/**
 * Farwell Ekspress portal.
 *
 * Self-contained and scoped to .fw-ekspress, deliberately independent of the
 * theme's Bootstrap so the portal can be lifted out with the module.
 */

/* One place for the decisions every component repeats. Changing a corner
   radius or a line colour here changes it everywhere rather than in the dozens
   of rules that would otherwise each state it. */
:root {
  /* Single source: the values live in Tailwind's @theme (assets/src/app.css),
     which emits them as --color-* / --font-*. These aliases let the components
     not yet converted to utilities read the same numbers, so a change in one
     place moves both systems. The literals are fallbacks for the case where
     app.css has not loaded. */
  --fw-font: var(--font-sans, "Montserrat", "Open Sans", sans-serif);
  --fw-brand: var(--color-brand, #e1001a);

  --fw-ink: var(--color-ink, #111);
  --fw-muted: var(--color-muted, #6b6b6b);
  --fw-line: var(--color-line, #e4e4e4);
  --fw-surface: var(--color-surface, #fafafa);
  --fw-danger: var(--color-danger, #b3261e);
  --fw-success: var(--color-success, #1f7a3d);

  /* Shape */
  --fw-radius: 3px;
  --fw-border: 1px solid var(--fw-line);
  --fw-field-border: 1px solid #dcdcdc;

  /* Rhythm — components space themselves from these rather than each
     inventing their own numbers. */
  --fw-gap: 0.5rem;
  --fw-pad: 1.25rem;
  --fw-field-height: 2.3rem;
  --fw-field-font-size: 0.85rem;

  --fw-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
  --fw-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 28px rgb(0 0 0 / 0.12);
}

.fw-ekspress {
  font-family: var(--fw-font);
  max-width: 46rem;
  margin: 0 auto;
  color: var(--fw-ink);
}

.fw-ekspress h1,
.fw-ekspress h2,
.fw-ekspress h3 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 300;
}

/* Section headings in the portal, the same treatment the checkout cards carry:
   one family across the express layer rather than two near-misses. */
.fw-ekspress h4 {
  margin: 2rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fw-ink);
}

/* Tables */

.fw-ekspress__table {
  width: 100%;
  margin: 0 0 2rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.fw-ekspress__table th {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--fw-line);
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.fw-ekspress__table td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--fw-line);
  vertical-align: middle;
}

.fw-ekspress__table tr:last-child td {
  border-bottom: 0;
}

.fw-ekspress__table td:last-child,
.fw-ekspress__table th:last-child {
  padding-right: 0;
}

.fw-ekspress__name {
  font-weight: 500;
}

.fw-ekspress__num {
  color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fw-ekspress__actions {
  text-align: right;
  white-space: nowrap;
}

/* A column header belongs over its column. `.fw-ekspress__table th` sets
   text-align:left and outweighs a bare class, so the header sat left while its
   cells sat right — scoping this to the table gives it the specificity to
   follow the content it labels. */
.fw-ekspress__table th.fw-ekspress__actions,
.fw-ekspress__table td.fw-ekspress__actions {
  text-align: right;
}

/* Status badges */

/* Outlined on the card's own white, so a status reads as part of the card
   rather than as a sticker on it. They were hand-mixed pastels — a green, an
   amber and a pink that predate the tokens and matched nothing around them.
   One shape, one weight; only the line and the letters carry the state. */
.fw-ekspress__badge {
  padding: 0.25em 0.7em;
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  background: #fff;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fw-ekspress__badge--active {
  border-color: var(--fw-success);
  color: var(--fw-success);
}

/* No amber in this shell. Ink is the strongest neutral it has, which is what
   "we are working on it" wants — red belongs to what is being destroyed. */
.fw-ekspress__badge--pending {
  border-color: var(--fw-ink);
  color: var(--fw-ink);
}

.fw-ekspress__badge--dead {
  border-color: var(--fw-danger);
  color: var(--fw-danger);
}

/* Buttons */

/* Company detail */

.fw-ekspress__meta {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border-radius: var(--fw-radius);
  background: var(--fw-surface);
  line-height: 1.7;
}

.fw-ekspress__note {
  margin: 0 0 1.5rem;
  color: var(--fw-muted);
  font-size: 0.95rem;
}

/* Add-user form */

.fw-ekspress__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.fw-ekspress__form input {
  flex: 1 1 8rem;
}

/* Black on white with a coloured edge, the way an error is marked on a cart
   row. It was pale blue text on pale blue — barely readable, and the only blue
   in a shell that is otherwise ink, white and grey. Green rather than the
   shell's red, which is reserved for what is about to be destroyed. */
.fw-ekspress__notice {
  /* It sat flush against whatever followed it, so "Taotlus tühistatud."
     read as a heading for the page rather than as an answer to what was
     just done. The same 1.5rem the other sections are separated by. */
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  border: var(--fw-border);
  border-left: 3px solid var(--fw-success);
  border-radius: var(--fw-radius);
  background: #fff;
  color: var(--fw-ink);
  font-size: 0.95rem;
}

.fw-ekspress__empty {
  color: var(--fw-muted);
}

/* Navigation buttons are links; keep them visually identical to real buttons. */

/* Confirm dialog */

.fw-bar__dialog {
  /* A modal dialog is centred by the browser's own `dialog { margin: auto }`.
     Tailwind's preflight resets margin to 0 on every element, which silently
     took that away and pinned every confirm box to the top-left corner. */
  margin: auto;
  padding: 1.5rem;
  border: 0;
  border-radius: var(--fw-radius);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.25);
}

.fw-bar__dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.fw-bar__dialog p {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
}

.fw-bar__dialog menu {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.fw-bar__dialog {
  min-width: min(22rem, calc(100vw - 2rem));
}

.fw-ekspress__title {
  margin: 0 0 1.5rem;
}

/* Portal shell — the portal renders its own document, not the shop theme. */

body.fw-shell {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Montserrat ships here as 100/300/500 — the brand's three weights, and the
     same three the consumer site uses. 300 is its normal. Saying nothing left
     this at the CSS default of 400, which has no face to land on and resolved
     to 500, so every word on the page came out the weight of a heading. */
  font-weight: 300;
  line-height: 1.5;
}

.fw-shell__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid #e4e4e4;
}

.fw-shell__brand {
  color: #111;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.fw-shell__main {
  padding: 2.5rem 1.25rem 4rem;
}

.fw-shell__nav a {
  color: #6b6b6b;
  font-size: 0.9rem;
  text-decoration: none;
}

.fw-shell__nav a:hover,
.fw-shell__nav .current-menu-item a {
  color: #111;
}

/* Shell layout: footer sits at the bottom even on short pages. */

body.fw-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fw-shell__main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
}

/* The site header's pair mirrored: Ekspress on the left, Farwell on the
   right, at the widths that read as one size (150 and 201). */
.fw-shell__brand img {
  display: block;
  width: 150px;
  height: auto;
}

.fw-shell__site {
  display: flex;
  justify-content: flex-end;
  line-height: 0;
}

.fw-shell__site img {
  width: 201px;
  height: auto;
  /* The wordmark and slogan fill the top 47 of the logo's 70 units and the
     "30" hangs below; this lowers the logo so the wordmark and slogan sit on
     the header's centre line. */
  transform: translateY(16.4%);
}

.fw-shell__center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Brand and site logo share the leftover width equally, so the middle group
   sits in the true centre. */
@media (min-width: 60.0625rem) {
  .fw-shell__brand,
  .fw-shell__site {
    flex: 1 1 0;
  }

  .fw-shell__center .fw-shell__cartwrap,
  .fw-shell__center .fw-shell__nav {
    margin-left: 0;
  }

  /* The logos keep their size; a box narrower than its logo would shrink it,
     and the menu is a different width in every language. */
  .fw-shell__brand img,
  .fw-shell__site img {
    max-width: none;
  }
}

/* Between the phone layout and a full desktop the logo pair is set smaller,
   the same in every language; the fit steps below handle the rest. */
@media (min-width: 60.0625rem) and (max-width: 80rem) {
  .fw-shell__brand img { width: 110px; }
  .fw-shell__site img { width: 147px; }
}

/* Narrow: the middle group dissolves into the header row, which already
   wraps and orders its items for a phone; the Farwell logo gives way. */
@media (max-width: 60rem) {
  .fw-shell__center {
    display: contents;
  }

  .fw-shell__site {
    display: none;
  }

  .fw-shell__brand img {
    width: 110px;
  }
}

/* A phone keeps the globe and drops the code beside it. */
@media (max-width: 34rem) {
  .fw-lang summary span {
    display: none;
  }
}

/* Language picker, drawn for the light header. */
.fw-lang {
  position: relative;
}

.fw-lang summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  list-style: none;
  cursor: pointer;
  color: #111;
  font-size: 0.9rem;
}

.fw-lang summary::-webkit-details-marker {
  display: none;
}

.fw-lang__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 50;
  min-width: 8rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: var(--fw-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.fw-lang__list a {
  display: block;
  padding: 0.35rem 1rem;
  color: #111;
  font-size: 0.9rem;
  text-decoration: none;
}

.fw-lang__list a:hover {
  background: #f4f5f7;
}

/* Signed-out gate */

.fw-ekspress__gate {
  max-width: 26rem;
  margin: 4rem auto;
  /* Wider at the sides than a form needs, because this is the first screen of
     the shop rather than a dialog: with the sign-in button running almost the
     full width the panel read as a plain square block, and the inset is what
     makes it sit on the page as a card. */
  padding: 2.5rem 3rem;
  border: 1px solid #e4e4e4;
  border-radius: var(--fw-radius);
  text-align: center;
}

.fw-ekspress__gate h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fw-ekspress__gate p {
  margin: 0 0 1.75rem;
  color: #6b6b6b;
}

.fw-ekspress__gate-note {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #6b6b6b;
}

/* Outranks the gate's general paragraph rule, which spaces a lone sentence
   from the button below it; two sentences of one note sit close. */
.fw-ekspress__gate p.fw-ekspress__gate-note {
  margin: 0 0 0.35rem;
}

/* The way out, as the secondary button under the primary one: same shape,
   outlined, so the two read as a pair rather than a button and a stray link. */
.fw-ekspress__gate-logout {
  display: block;
  box-sizing: border-box;
  height: 2.5rem;
  margin-top: 0.75rem;
  padding: 0 1.25rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  background: #fff;
  color: var(--fw-ink);
  font-size: 0.9rem;
  line-height: calc(2.5rem - 2px);
  text-align: center;
  text-decoration: none;
}

.fw-ekspress__gate-logout:hover {
  border-color: #b4b4b4;
  color: var(--fw-ink);
}

/* The steps sit between the note and the action, with room on both sides. */
.fw-ekspress__gate-steps + .fw-auth {
  margin-top: 1.75rem;
}

/* Auto side margins on a column flex item cancel stretch, so these need an
   explicit width to span the viewport before max-width centres them. */
.fw-shell__head {
  width: 100%;
  box-sizing: border-box;
}

/* The theme's footer (footer.css) keeps to the bottom of a short page. */
.fw-shell .fw-footer {
  flex-shrink: 0;
}

/* Page sits on a light ground so content cards read as white surfaces. */
body.fw-shell {
  background: #f4f5f7;
}

.fw-shell__head {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  max-width: none;
  /* The logos' outer edges line up with the page content below. */
  padding-inline: max(1.25rem, calc((100% - 76rem) / 2 + 1.25rem));
  /* Room for the Farwell logo's lowered "30". */
  padding-block: 0.85rem;
}

.fw-ekspress__gate {
  background: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}

/* The card is the white surface; the table inside it stays transparent so the
   header row sits on the same sheet as the rows. */
.fw-ekspress__card {
  padding: 0.5rem 1.25rem;
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-ekspress__card .fw-ekspress__table {
  margin: 0;
}

.fw-ekspress__meta {
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-ekspress__name a {
  color: inherit;
  text-decoration: none;
}

.fw-ekspress__name a:hover {
  text-decoration: underline;
}

/* Dividers span the whole card: padding moves from the card onto the cells,
   so the rules meet both edges instead of stopping short. */
.fw-ekspress__card {
  padding: 0;
  overflow: hidden;
}

.fw-ekspress__card .fw-ekspress__table th:first-child,
.fw-ekspress__card .fw-ekspress__table td:first-child {
  padding-left: 1.25rem;
}

.fw-ekspress__card .fw-ekspress__table th:last-child,
.fw-ekspress__card .fw-ekspress__table td:last-child {
  padding-right: 1.25rem;
}

.fw-ekspress__note {
  color: var(--fw-muted);
  font-size: 0.9rem;
}

/* A pending row is not a name: don't let it inherit the name weight. */
.fw-ekspress__name .fw-ekspress__empty {
  color: var(--fw-muted);
  font-weight: 300;
  font-style: italic;
}

/* Failed actions are errors, not asides: they read as such. */
.fw-ekspress__error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #f3c9c6;
  border-radius: var(--fw-radius);
  background: #fdf2f1;
  color: #a12a24;
  font-size: 0.95rem;
  font-weight: 500;
}

.fw-ekspress__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.25rem;
  height: 1.25rem;
  border-radius: var(--fw-radius);
  background: #a12a24;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
}

.fw-ekspress__error[hidden] {
  display: none;
}

.fw-ekspress__idcode {
  display: block;
  margin-top: 0.15rem;
  color: var(--fw-muted);
  font-size: 0.8rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

/* People the register put there read differently from people we added. */
.fw-ekspress__badge--plain {
  text-transform: none;
  letter-spacing: 0;
}

.fw-ekspress__status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.fw-ekspress__status form {
  display: inline;
}

/* Grid rather than floats: a flex cell inside a float layout refuses to sit
   beside its label, which pulled the status away from its row. */
.fw-ekspress__meta {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: baseline;
  gap: 0.6rem 1rem;
}

.fw-ekspress__meta dt {
  color: var(--fw-muted);
  font-size: 0.9rem;
}

.fw-ekspress__meta dd {
  margin: 0;
}

@media (max-width: 34rem) {
  .fw-ekspress__meta {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }

  .fw-ekspress__meta dd {
    margin-bottom: 0.6rem;
  }
}

/* Confirmation is a decision point: centre its actions under the card. */
.fw-ekspress__buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Destructive actions look destructive. */

/* The primary action sits on the right, always. */

/* Squared corners throughout; depth comes from a subtle shadow, not curves. */
.fw-ekspress__card,
.fw-ekspress__meta,
.fw-ekspress__gate {
  border-radius: var(--fw-radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
}

/* Group centred under the card; the primary action stays on the right of it. */
.fw-ekspress__buttons {
  justify-content: center;
}

/* A row that contains a link is a row you can click. Stated in CSS rather
   than by a class added at load, so it is still true of rows that arrive from
   a filter or a page change. The old class is kept for any markup that still
   sets it. */

.fw-ekspress__table tbody tr:has(a[href]) {
  cursor: pointer;
}

.fw-ekspress__table tbody tr:has(a[href]):hover {
  background: #fafafa;
}

.fw-ekspress__name--quiet {
  color: var(--fw-muted);
  font-weight: 300;
}

/* ---------------------------------------------------------------------------
   Button component. One definition for every button and button-styled link in
   the express layer, so sizes cannot drift per context. Variants are opt-in:
   .fw-ekspress__ghost (secondary) and .fw-ekspress__danger (destructive).
   --------------------------------------------------------------------------- */

.fw-ekspress button,
.fw-ekspress a.fw-ekspress__button,
.fw-bar__dialog button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 1px solid var(--fw-ink, #111);
  border-radius: var(--fw-radius);
  background: var(--fw-ink, #111);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  /* Stated here, not only on the WooCommerce controls: without it the
     component inherited 400 and sat visibly lighter beside Esita tellimus. */
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fw-ekspress button:hover,
.fw-ekspress a.fw-ekspress__button:hover,
.fw-bar__dialog button:hover {
  background: #333;
  border-color: #333;
}

.fw-ekspress button.fw-ekspress__ghost,
.fw-ekspress a.fw-ekspress__button.fw-ekspress__ghost,
.fw-bar__dialog button.fw-ekspress__ghost {
  border-color: #cfcfcf;
  background: transparent;
  color: var(--fw-ink, #111);
}

.fw-ekspress button.fw-ekspress__ghost:hover,
.fw-ekspress a.fw-ekspress__button.fw-ekspress__ghost:hover,
.fw-bar__dialog button.fw-ekspress__ghost:hover {
  background: #f4f4f4;
  border-color: #b8b8b8;
}

/* An action that belongs to a line rather than to the screen: it sits beside a
   badge or a value, not under a card, so the full 2.5rem control towered over
   the row it was part of. Sized to the badge instead. */
/* Sized against the badge it stands beside, not against the full-size buttons.
   It was 40px next to a 26px badge, then overshot to 24px next to a 28px one —
   both read as a mismatch. Matching the badge's own type size and vertical
   padding puts the two on the same line at the same height, which is the only
   thing that makes a pair of inline controls look deliberate. */
.fw-ekspress button.fw-ekspress__small,
.fw-ekspress a.fw-ekspress__button.fw-ekspress__small,
.fw-bar__dialog button.fw-ekspress__small {
  min-height: 0;
  padding: 0.25em 0.7em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  /* 1.7, not the button default of 1.5: the badge's own line box works out at
     1.7, and two inline controls a couple of pixels apart in height read as a
     mistake rather than as a pair. */
  line-height: 1.7;
  /* Uppercase for the same reason. The two already matched on every measured
     value — 12px, 500, 0.36px tracking — and still looked like different type,
     because capitals fill the line box and lower case does not. Matching the
     size without matching the case matches nothing the eye can see. */
  text-transform: uppercase;
  vertical-align: middle;
}

.fw-ekspress button.fw-ekspress__danger,
.fw-ekspress a.fw-ekspress__button.fw-ekspress__danger,
.fw-bar__dialog button.fw-ekspress__danger {
  border-color: #e7b3af;
  background: #fdf2f1;
  color: #a12a24;
}

.fw-ekspress button.fw-ekspress__danger:hover,
.fw-ekspress a.fw-ekspress__button.fw-ekspress__danger:hover,
.fw-bar__dialog button.fw-ekspress__danger:hover {
  background: #a12a24;
  border-color: #a12a24;
  color: #fff;
}

.fw-ekspress button:disabled {
  opacity: 0.5;
  cursor: default;
}

.fw-ekspress__gate .fw-auth__open {
  width: 100%;
}

/* Express navigation */

.fw-shell__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: 2rem;
}

.fw-shell__navitem {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fw-shell__navitem:hover {
  color: #111;
}

.fw-shell__navicon { flex: none; }

.fw-shell__navitem.is-active {
  color: #111;
  font-weight: 500;
}

.fw-shell__navitem--soon {
  color: #c4c4c4;
  cursor: default;
}

/* Express header context (merged from the standalone bar) */

.fw-shell__context {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.85rem;
}

.fw-shell__logout {
  display: inline-flex;
  padding: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--fw-muted, #6b6b6b);
  cursor: pointer;
}

.fw-shell__logout:hover { color: #111; }

/* Category grid */

/* Same surface as every other card: a shadow, no outline. The 1px gap over a
   grey ground still draws the dividers between tiles. */
/* Hairlines are each tile's own shadow cast into the 1px gap, on a WHITE
   grid: the old grey grid showing through the gaps painted every cell a tile
   did not fill — a grey hole at the end of any row the count left short.
   The gap must stay: without it a neighbour's opaque background lands on top
   of the shadow and the lines vanish. overflow: hidden clips the outer
   tiles' shadows at the card's edge. */
.fw-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-cat__tile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  background: #fff;
  /* The right and bottom hairline of every tile; neighbours supply the rest. */
  box-shadow: 1px 0 0 var(--fw-line, #e4e4e4), 0 1px 0 var(--fw-line, #e4e4e4);
  color: #111;
  text-decoration: none;
}

.fw-cat__tile:hover { background: #fafafa; }

.fw-cat__name { font-weight: 500; }

.fw-cat__count {
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.fw-cat__img {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.fw-cat__img--none {
  display: block;
}

.fw-cat__label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.fw-cat__name {
  line-height: 1.35;
}

/* Browsing surfaces use the full shell width; forms and detail screens stay
   narrow, where a short measure is easier to read. */
.fw-ekspress--wide {
  max-width: none;
}

.fw-cat__tile {
  padding: 1rem 1.25rem;
}

/* Catalogue heading doubles as the trail. */
.fw-cat__title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 300;
}

.fw-cat__title a {
  color: var(--fw-muted, #6b6b6b);
  text-decoration: none;
}

.fw-cat__title a:hover { color: #111; }

.fw-cat__sep { color: #c4c4c4; }

/* A category's own picture and description, under its title. */
.fw-cat__intro {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1rem;
}

.fw-cat__intro-img {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
}

@media (max-width: 40rem) {
  .fw-cat__intro-img { display: none; }
}

.fw-cat__desc {
  min-width: 0;
  max-width: 60ch;
  color: var(--fw-ink);
  font-size: 1rem;
  line-height: 1.6;
}

.fw-cat__desc > * { margin: 0; }
.fw-cat__desc > * + * { margin-top: 0.5em; }

.fw-cat__title .fw-cat__count {
  font-size: 0.9rem;
}

/* Brand index: letters in columns, each name with its count. */
.fw-brands {
  columns: 16rem;
  column-gap: 2rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-brands__group {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.fw-ekspress .fw-brands__letter {
  margin: 0 0 0.35rem;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
  font-weight: 600;
}

.fw-brands ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-brands li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
}

.fw-brands li[hidden],
.fw-brands__group[hidden] { display: none; }

.fw-brands a {
  color: #111;
  text-decoration: none;
}

.fw-brands a:hover { text-decoration: underline; }

/* Product rows */

.fw-prod__thumb { width: 4.5rem; padding-left: 1.25rem; }

/* WordPress emits width/height attributes at full thumbnail size, so the
   dimensions have to be forced rather than merely suggested. */
.fw-ekspress .fw-prod__thumb img {
  display: block;
  width: 3.5rem !important;
  height: 3.5rem !important;
  max-width: 3.5rem;
  object-fit: contain;
}

.fw-prod__pricecol {
  text-align: right;
  white-space: nowrap;
}

.fw-prod__price { font-weight: 500; }

.fw-prod__was {
  margin-right: 0.4rem;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
}

.fw-prod__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.fw-prod__pageno {
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.fw-prod__vatnote {
  margin: 0.75rem 0 0;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
  text-align: center;
}

/* Product detail */

.fw-prod__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding: 1.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
}

.fw-prod__media img {
  display: block;
  width: 100%;
  height: auto;
  background: #f4f5f7;
}

.fw-prod__zoom { display: block; cursor: zoom-in; }
.fw-prod__zoom img { max-height: 36rem; object-fit: contain; background: none; }
.fw-prod__zoom img,
.fw-prod__thumbimg img { transition: opacity 0.2s ease; }
.fw-prod__zoom:hover img,
.fw-prod__thumbimg:hover img { opacity: 0.85; }
.fw-prod__thumbimg { transition: outline-color 0.2s ease; }

.fw-prod__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fw-prod__thumbimg { display: block; cursor: zoom-in; outline: 1px solid var(--fw-line, #e4e4e4); }
.fw-prod__thumbimg:hover { outline-color: var(--fw-ink, #111); }
.fw-prod__thumbimg img { aspect-ratio: 1; object-fit: contain; background: #fff; }

/* Lightbox: the image fills the screen, the backdrop closes it. */
.fw-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.fw-lightbox::backdrop {
  background: rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Open and close fade; allow-discrete keeps the dialog drawn while it closes. */
.fw-lightbox,
.fw-lightbox::backdrop {
  opacity: 0;
  transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}

.fw-lightbox[open],
.fw-lightbox[open]::backdrop { opacity: 1; }

@starting-style {
  .fw-lightbox[open],
  .fw-lightbox[open]::backdrop { opacity: 0; }
  .fw-lightbox[open] img { transform: scale(0.96); }
}

.fw-lightbox img { transition: opacity 0.2s ease, transform 0.25s ease; }
.fw-lightbox img.is-swapping { opacity: 0; }

.fw-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3rem 4rem;
  box-sizing: border-box;
}

/* Filled rather than natural size: most sources are narrower than the page image. */
.fw-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fw-lightbox button {
  position: absolute;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.fw-lightbox button:hover { background: rgb(255 255 255 / 0.12); }
.fw-lightbox__close { top: 0.5rem; right: 0.5rem; }
.fw-lightbox__prev { top: 50%; left: 0.5rem; transform: translateY(-50%); }
.fw-lightbox__next { top: 50%; right: 0.5rem; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .fw-lightbox,
  .fw-lightbox::backdrop,
  .fw-lightbox img,
  .fw-prod__zoom img,
  .fw-prod__thumbimg,
  .fw-prod__thumbimg img { transition: none; }
}

.fw-prod__name {
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.fw-prod__sku {
  margin: 0 0 1.25rem;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Struck former price above, buyer's price below — a column, so the two
   figures read as one statement instead of jostling on a baseline. */
.fw-prod__pricebox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0 0 0.35rem;
}

.fw-prod__price--lg { font-size: 1.6rem; }

.fw-prod__stock {
  margin: 0 0 1.5rem;
  color: #1b6b33;
  font-size: 0.9rem;
}

.fw-prod__buy {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.fw-prod__buy input {
  width: 5rem;
}

.fw-prod__desc {
  color: #444;
  font-size: 0.95rem;
}

.fw-prod__desc > * + * { margin-top: 0.75em; }

/* A page of text under Ekspress — the sales terms. */
.fw-page__body {
  padding: 1.5rem;
  background: #fff;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
}

.fw-page__body > * + * { margin-top: 0.75em; }
.fw-page__body h2,
.fw-page__body h3 { margin-top: 1.5em; color: #111; font-size: 1.05rem; font-weight: 600; }
.fw-page__body > :first-child { margin-top: 0; }
.fw-page__body ul,
.fw-page__body ol { padding-left: 1.25rem; list-style: disc; }
.fw-page__body ol { list-style: decimal; }
.fw-page__body a { color: #e1001a; text-decoration: underline; }

/* The Ekspress page's own text, above the catalogue on the front page. */
.fw-intro { margin-bottom: 1.5rem; }

@media (max-width: 48rem) {
  .fw-prod__detail { grid-template-columns: 1fr; }
}

.fw-prod__stock--out { color: var(--fw-muted, #6b6b6b); }

.fw-prod__rule {
  margin: -0.75rem 0 1.5rem;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.85rem;
}

/* Technical data */

.fw-prod__specstitle {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fw-muted, #6b6b6b);
}

.fw-prod__specs {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
  font-size: 0.95rem;
}

.fw-prod__specs dt { color: var(--fw-muted, #6b6b6b); }
.fw-prod__specs dd { margin: 0; }

/* Among plain values a link needs a mark at rest, not only on hover. */
.fw-ekspress .fw-prod__specs a,
.fw-return__note a {
  color: var(--fw-ink);
  text-decoration: underline;
  text-decoration-color: #c4c4c4;
  text-underline-offset: 0.2em;
}

.fw-ekspress .fw-prod__specs a:hover,
.fw-return__note a:hover { text-decoration-color: currentColor; }

/* Quick filter */

/* A spinner inside the field, left of the browser's own clear button. Out of
   flow because it comes and goes while typing, and in flow it pushed the
   toolbar sideways on every keystroke. */
/* Inside the field, just left of the browser's clear button. No padding is
   reserved for it: reserving space at that edge pushes the clear button inward
   by the same amount, and an indent would show even when nothing is loading.
   A long value can pass under it for the moment it spins, which is the better
   trade. */
.fw-prod__filtercount {
  position: absolute;
  right: 3rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  visibility: hidden;
  pointer-events: none;
}

.fw-prod__filtercount.is-busy {
  visibility: visible;
  border: 2px solid #dcdcdc;
  border-top-color: #6b6b6b;
  border-radius: 50%;
  animation: fw-spin 0.6s linear infinite;
}

@keyframes fw-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fw-prod__filtercount.is-busy { animation-duration: 2s; }
}

/* The product list is a white surface like every other card. */
.fw-prod { margin: 0; }

/* Filter shares the title row, pushed to the right. */
/* Both controls travel together to the right of the title, rather than the
   switch staying by the heading while the field flies to the far edge. */
.fw-cat__tools {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.fw-cat__filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fw-cat__filter input {
  width: 14rem;
}

.fw-cat__title { flex-wrap: wrap; }

/* The price header must follow its column: `.fw-ekspress__table th` is more
   specific than the column class alone, so it was staying left-aligned. */
.fw-ekspress__table th.fw-prod__pricecol {
  text-align: right;
}

.fw-prod__added {
  align-self: center;
  color: #1b6b33;
  font-size: 0.9rem;
}

/* Header search and cart */

.fw-shell__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem;
  color: #111;
}

.fw-shell__cartcount {
  position: absolute;
  /* On the icon's top-right corner, not floating off it. Anchored from the
     left because the running total shares this link, and a right-anchored badge
     would land on the figures. */
  /* The icon is centred inside the link, so the badge is offset from the link
     to land on the icon's own corner rather than above it. */
  top: -0.15rem;
  left: 1rem;
  min-width: 1.1rem;
  padding: 0 0.25rem;
  background: #111;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.1rem;
  text-align: center;
}

.fw-shell__cartcount[hidden] { display: none; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.fw-prod__quote {
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.9rem;
}

/* Search suggestions */

.fw-sug__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #f0f0f0;
  color: #111;
  text-decoration: none;
}

.fw-sug__row:hover { background: #fafafa; }

.fw-sug__row img,
.fw-sug__noimg {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.fw-sug__noimg { background: #f4f5f7; }

.fw-sug__name { flex: 1; font-size: 0.9rem; font-weight: 500; }
.fw-sug__name small { display: block; color: #6b6b6b; font-weight: 300; font-variant-numeric: tabular-nums; }
.fw-sug__price { font-weight: 500; white-space: nowrap; }

.fw-sug__all {
  display: block;
  width: 100%;
  padding: 0.7rem;
  border: 0;
  background: #f4f5f7;
  color: #111;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Mini cart */

/* The auto margin lives here rather than on the context group: it pushes the
   cart and the company controls to the right end together, so the cart sits
   beside the selector instead of stranded mid-header. */
.fw-shell__cartwrap {
  position: relative;
  margin-left: auto;
}

.fw-shell__minicart {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  /* Wide enough on a desktop for a full product name and its code to sit on
     one line without wrapping. */
  width: min(34rem, 92vw);
  padding: 0.5rem 0;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 28px rgb(0 0 0 / 0.12);
}

.fw-shell__minicart[hidden] { display: none; }

.fw-mini__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

/* Columns, like the tables: the code lines up down the panel instead of
   hanging under each name. */
.fw-mini__name { flex: 1 1 auto; min-width: 0; }

/* A line the checkout would refuse: the edge an error wears elsewhere, and
   what is wrong under the name. */
.fw-mini__row--problem {
  box-shadow: inset 3px 0 var(--fw-danger);
}

.fw-line-problem {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--fw-danger);
  font-size: 0.8rem;
  font-weight: 500;
}

.fw-mini__sku {
  flex: 0 0 auto;
  color: #6b6b6b;
  font-variant-numeric: tabular-nums;
}

.fw-mini__qty {
  flex: 0 0 auto;
  min-width: 2.5rem;
  color: #6b6b6b;
  text-align: right;
}
.fw-mini__total { font-weight: 500; white-space: nowrap; }

.fw-mini__actions {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0.9rem 0.4rem;
}

.fw-mini__go {
  display: block;
  flex: 1 1 0;
  padding: 0.6rem;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}

/* The cart is the secondary way on: outlined, beside the filled checkout. */
.fw-mini__go--cart {
  background: #fff;
  color: #111;
}

.fw-mini__empty { margin: 0; padding: 0.9rem; color: #6b6b6b; font-size: 0.9rem; }

/* Search: icon in the header, full-screen panel */

.fw-search[hidden] { display: none; }

.fw-search__bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
}

.fw-search__bar input {
  flex: 1;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 0;
  font: inherit;
  font-size: 1.15rem;
}

.fw-search__bar input:focus { outline: none; }

.fw-search__close {
  padding: 0 1.25rem;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b6b6b;
  cursor: pointer;
}

.fw-search__results[hidden] { display: none; }

.fw-search__results .fw-sug__row { padding: 0.75rem 1.25rem; }
.fw-search__results .fw-sug__row img,
.fw-search__results .fw-sug__noimg { width: 3rem; height: 3rem; }
.fw-search__results .fw-sug__name { font-size: 0.95rem; }

.fw-sug__row.is-active {
  background: var(--fw-surface);
  outline: 2px solid var(--fw-ink);
  outline-offset: -2px;
}

/* Search takes the whole screen: the results are the page while it is open. */
.fw-search {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  /* Mostly white, not solid: the page stays faintly visible underneath,
     blurred, so opening the search reads as a layer over the shop rather
     than a jump to a blank screen. The blur is GPU-composited and only
     paid while the overlay is open; the dim does most of the work, so it
     stays small. */
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fw-search__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* A reading width, not the page's: a result row is a name and a price, and
   across the full shop width the two drifted apart. */
.fw-search__bar {
  flex: 0 0 auto;
  padding: 0 max(1.25rem, calc((100% - 60rem) / 2));
}

.fw-search__bar input {
  min-height: 4.5rem;
  padding: 0;
  font-size: 1.5rem;
}

.fw-search__results {
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  padding: 0 max(1.25rem, calc((100% - 60rem) / 2));
}

/* Icon, label and shortcut on one line. Sized to that content and no wider:
   nothing is ever typed in here, it only opens the full-screen overlay, so a
   field-width control would just take room from the rest of the header. */
.fw-shell__searchbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  background: #fafafa;
  color: #6b6b6b;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.fw-shell__searchbtn:hover {
  border-color: #b4b4b4;
  background: #fff;
}

.fw-shell__searchlabel {
  flex: 0 0 auto;
}

.fw-shell__kbd {
  flex: 0 0 auto;
  padding: 0 0.3rem;
  border: 1px solid #dcdcdc;
  background: #fff;
  color: #6b6b6b;
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* Narrow headers keep the icon only — the shortcut is a desktop affordance. */
@media (max-width: 60rem) {
  .fw-shell__searchlabel,
  .fw-shell__kbd { display: none; }
}

/* On a desktop the header has room, and a search box the size of a tag
   looked like an afterthought beside the page title. */
@media (min-width: 60.0625rem) {
  .fw-shell__searchbtn {
    box-sizing: border-box;
    height: var(--fw-field-height);
    min-width: 11rem;
    padding: 0 0.6rem;
    gap: 0.5rem;
    font-size: var(--fw-field-font-size);
  }

  .fw-shell__searchbtn svg {
    width: 18px;
    height: 18px;
  }

  .fw-shell__searchlabel {
    flex: 1 1 auto;
  }

  .fw-shell__kbd {
    font-size: 0.75rem;
  }
}

/* Ordering from the list: compact enough not to crowd the row. */
.fw-prod__buycol {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

/* Last cell, so it would otherwise inherit padding-right:0 and sit flush
   against the card edge while the thumbnail keeps its 1.25rem inset. */
.fw-ekspress__table td.fw-prod__buycol,
.fw-ekspress__table th.fw-prod__buycol {
  padding-right: 1.25rem;
}

/* Block-level, not inline-flex: an inline-level box aligns on the row's text
   baseline, which left the controls sitting low against the price and code
   beside them. A flex box in a middle-aligned cell has no baseline to sit on. */
.fw-prod__buy--row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
}

/* Both controls to one height, so the pair reads as a single unit however the
   browser chooses to size a number spinner. */
.fw-prod__buy--row input[type="number"],
.fw-prod__buy--row button {
  height: 2.1rem;
  box-sizing: border-box;
}

.fw-prod__buy--row input[type="number"] {
  width: 3.75rem;
  text-align: center;
}

.fw-prod__buy--row button {
  padding: 0.3rem 0.7rem;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.fw-prod__buy--row button:hover { background: #333; border-color: #333; }
.fw-prod__buy--row button:disabled { opacity: 0.5; cursor: default; }

/* The row has no space for a message, so the button itself confirms. */
.fw-prod__buy--row.is-added button {
  background: #1f7a3d;
  border-color: #1f7a3d;
}

.fw-prod__buy--row.is-failed button {
  background: #b3261e;
  border-color: #b3261e;
}

/* Why an add was refused, over the row that refused it.

   The reason comes from the cart — usually that stock is already in there — and
   without it the button just flashes and the buyer reads the whole shop as
   broken. It cannot go in the cell: a message inside the table reflows every
   column on each failed click, so it is placed on the page in document
   coordinates instead and the table never moves. Above the mini cart and the
   company menu, which can be opened over it; below the full-screen search,
   which replaces the page it belongs to. */
.fw-rowerror {
  position: absolute;
  z-index: 50;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.5rem 0.7rem;
  border: var(--fw-border);
  border-left: 3px solid var(--fw-danger);
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: var(--fw-shadow-raised);
  color: var(--fw-ink);
  font-family: var(--fw-font);
  font-size: 0.85rem;
  line-height: 1.35;
  cursor: pointer;
}

/* Running order value, beside the cart count. */
.fw-shell__carttotal {
  /* Clear of the count badge, which overhangs the icon. */
  margin-left: 0.75rem;
  color: #111;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.fw-shell__carttotal[hidden] { display: none; }

@media (max-width: 40rem) {
  .fw-shell__carttotal { display: none; }
}

/* WooCommerce's cart and checkout arrive wearing the theme's Bootstrap
   palette — red primaries, grey secondaries — which is the opposite of the
   express shell's black. Red is reserved for destructive actions here, so it
   is taken off the buy path and left on remove. */
.fw-shop .checkout-button,
.fw-shop button[name="update_cart"],
.fw-shop button[name="apply_coupon"],
.fw-shop .button:not(.remove) {
  border: 1px solid var(--fw-ink);
  border-radius: var(--fw-radius);
  background: var(--fw-ink);
  color: #fff;
  font-weight: 500;
  text-shadow: none;
  transition: background 0.12s, border-color 0.12s;
}

.fw-shop .checkout-button:hover,
.fw-shop button[name="update_cart"]:hover,
.fw-shop button[name="apply_coupon"]:hover,
.fw-shop .button:not(.remove):hover {
  background: #333;
  border-color: #333;
}

/* Update cart is secondary to checkout, so it steps back to an outline. */
.fw-shop button[name="update_cart"],
.fw-shop button[name="apply_coupon"] {
  background: #fff;
  color: var(--fw-ink);
}

.fw-shop button[name="update_cart"]:hover,
.fw-shop button[name="apply_coupon"]:hover {
  background: #f4f5f7;
  border-color: var(--fw-ink);
  color: var(--fw-ink);
}

.fw-shop button[name="update_cart"]:disabled {
  border-color: var(--fw-line);
  background: #fff;
  color: #b4b4b4;
}

/* Theme links inside the cart are red too — the shipping calculator toggle
   reads as an error next to a total. */
/* Each :not() carries its argument's weight, so this scores higher than a
   two-class rule and was repainting the checkout label black-on-black. */
.fw-shop a:not(.remove):not(.button):not(.checkout-button):not(.fw-cart__checkout) {
  color: var(--fw-ink);
}

.fw-shop table th {
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Stock sits beside the order control: an empty buy cell then has a reason. */
.fw-prod__stockcol {
  width: 1%;
  padding-right: 1rem !important;
  white-space: nowrap;
  /* Centred, so a count and a "Tellimisel" that spans into the order column
     still sit on the same axis instead of drifting apart row to row. */
  text-align: center;
  vertical-align: middle;
}

.fw-ekspress__table th.fw-prod__stockcol {
  text-align: center;
}

.fw-prod__stock--out {
  color: var(--fw-muted, #6b6b6b);
}

/* The row/tile switch, in the category tools. */
.fw-cat__layout {
  display: inline-flex;
  margin-right: 0.75rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  overflow: hidden;
}

.fw-ekspress .fw-cat__layout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #8a8a8a;
  cursor: pointer;
}

.fw-ekspress .fw-cat__layout button + button {
  border-left: 1px solid #dcdcdc;
}

.fw-ekspress .fw-cat__layout button:hover { color: var(--fw-ink); }

.fw-ekspress .fw-cat__layout button[aria-pressed="true"] {
  background: #f0f0f0;
  color: var(--fw-ink);
}

/* Tiles at every width; a phone fits two across (set below). */
@media all {
  /* Tiles: the same table laid out as cards. The head goes, each row becomes
     a column of its own cells, and the picture leads. The stock cell says
     what it is, since no heading is left to say it. */
  .fw-ekspress .fw-prod--grid {
    display: block;
    margin-bottom: 1.5rem;
  }

  .fw-ekspress .fw-prod--grid thead { display: none; }

  .fw-ekspress .fw-prod--grid tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 1px;
    padding: 1px;
  }

  .fw-ekspress .fw-prod--grid tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 0 0 1px var(--fw-line);
  }

  .fw-ekspress .fw-prod--grid tbody tr:hover { background: #fafafa; }

  .fw-ekspress .fw-prod--grid td,
  .fw-ekspress .fw-prod--grid td.fw-prod__buycol,
  .fw-ekspress .fw-prod--grid td.fw-prod__stockcol {
    display: block;
    width: auto;
    padding: 0 !important;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__thumb {
    margin-bottom: 0.5rem;
  }

  /* Outranks the list's own 2.5rem thumbnail rule, which is more specific
     and later in the file. */
  .fw-ekspress .fw-prod.fw-prod--grid .fw-prod__thumb img {
    width: 100% !important;
    max-width: none;
    height: 9rem !important;
    object-fit: contain;
  }

  .fw-ekspress .fw-prod--grid td:nth-child(2) {
    flex: 1 1 auto;
    font-weight: 500;
    line-height: 1.35;
  }

  .fw-ekspress .fw-prod--grid .fw-ekspress__num {
    color: var(--fw-muted);
    font-size: 0.8rem;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__pricecol {
    font-size: 1.05rem;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__stockcol {
    color: var(--fw-muted);
    font-size: 0.8rem;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__stockcol::before {
    content: attr(data-label) ": ";
  }

  .fw-ekspress .fw-prod--grid .fw-prod__buycol {
    margin-top: 0.5rem;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__buy--row {
    justify-content: flex-start;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__buycol .fw-prod__stock--out {
    display: block;
    text-align: left;
  }

  .fw-ekspress .fw-prod--grid .fw-prod__buy--row input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* A buying list is scanned, not read: tighter rows put more of the catalogue
   on screen without crowding the controls. */
.fw-prod td {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

.fw-prod th {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.fw-ekspress .fw-prod .fw-prod__thumb img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  max-width: 2.5rem;
}

.fw-prod .fw-prod__thumb { width: 3.25rem; }

.fw-prod__buy--row input[type="number"],
.fw-prod__buy--row button { height: 1.9rem; }

/* The express cart is the catalogue table with quantity and a line total. */
.fw-ekspress__table th.fw-cart__qtycol {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.fw-ekspress__table th.fw-cart__qtycol { text-align: right; }

.fw-cart__qtycol .quantity input[type="number"] {
  width: 4.25rem;
  text-align: center;
}

.fw-cart__linetotal { font-weight: 500; }

.fw-cart__removecol {
  width: 1%;
  text-align: right;
  vertical-align: middle;
}

/* Removing a line, wherever a line is listed.

   One control for the cart page and the header dropdown. It was written twice
   once — a link on the page and a button in the panel — and the copy in the
   panel shipped in a stylesheet nobody enqueued, so it rendered as a raw
   browser button: unstyled, barely a glyph, impossible to aim at. Both are
   this class now, matched as `a` and as `button`, and neither is scoped to an
   ancestor so the panel cannot fall outside the rule again.

   Quiet until pointed at; red is kept for the hover, where the action is about
   to happen. WooCommerce's own stylesheet declared `color: red !important`
   here, but it is no longer loaded in the business layer, so this no longer has
   to shout back. */
a.fw-cart__remove,
button.fw-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A pointer target, not a glyph: 2rem is the smallest square that can be hit
     without aiming, and the row is tall enough to carry it. */
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--fw-radius);
  background: none;
  color: #8a8a8a;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

a.fw-cart__remove:hover,
button.fw-cart__remove:hover,
a.fw-cart__remove:focus-visible,
button.fw-cart__remove:focus-visible {
  border-color: #b3261e;
  background: #fdf2f1;
  color: #b3261e;
}

/* Mid-request the control must stop inviting a second click — the answer
   decides whether the line goes. */
button.fw-cart__remove:disabled {
  color: #dcdcdc;
  background: none;
  border-color: transparent;
  cursor: default;
}

.fw-cart__actions {
  padding-top: 1rem !important;
  text-align: right;
}

.fw-cart__coupon {
  float: left;
  display: flex;
  gap: 0.35rem;
}

.fw-cart__coupon input {
  width: 10rem;
}

.fw-cart__collaterals {
  margin-top: 1.5rem;
}

/* Spanning the order column, so it lines up with the table edge like the
   controls it replaces. */
/* Every cell in a product row shares one vertical axis. */
.fw-prod td,
.fw-prod th {
  vertical-align: middle;
}

.fw-prod .fw-prod__thumb img {
  margin: 0;
}

.fw-sug__all.is-active {
  background: var(--fw-surface);
  outline: 2px solid var(--fw-ink);
  outline-offset: -2px;
}

/* The theme's quantity template ships no .quantity wrapper, so the earlier
   selector never matched and each row sized itself. */
.fw-cart__qtycol input[type="number"] {
  width: 4.5rem;
  text-align: center;
}

.fw-mini__total {
  flex: 0 0 auto;
  min-width: 5rem;
  font-weight: 500;
  text-align: right;
}

/* Category suggestions sit in the same row rhythm as products, set apart by a
   lighter ground rather than a heading nobody reads. */
.fw-sug__cat {
  background: #fafbfc;
}

.fw-sug__cat .fw-sug__name {
  padding-left: 0.25rem;
  font-weight: 500;
}

.fw-sug__cat .fw-sug__name small {
  font-weight: 300;
}

.fw-sug__cat .fw-sug__price {
  color: #6b6b6b;
  font-weight: 300;
}

.fw-cat__stock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Leads the toolbar now, so the spacing moves to its trailing edge. */
  margin-right: 0.75rem;
  color: var(--fw-muted);
  font-size: 0.85rem;
  font-weight: 300;
  white-space: nowrap;
  cursor: pointer;
}

.fw-cat__stock input { margin: 0; }

.fw-cat__filter form { margin: 0; }

/* Mobile: nothing is allowed to push the page sideways. The header wraps, the
   menu scrolls on its own, and a table that cannot fit scrolls inside its card
   rather than being clipped by the viewport. */
@media (max-width: 60rem) {
  /* Not the header: its cart and language panels open below it and would be
     cut off at its edge. */
  .fw-ekspress {
    max-width: 100%;
    overflow-x: clip;
  }

  .fw-shell__head { max-width: 100%; }

  .fw-shell__head {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .fw-shell__nav {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fw-shell__nav::-webkit-scrollbar { display: none; }

  .fw-ekspress__card {
    overflow-x: auto;
  }

  .fw-cat__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
  }

  .fw-cat__filter { margin-left: 0; }
  .fw-cat__stock { margin-right: 0.75rem; }
  .fw-cat__tools { margin-left: 0; flex-wrap: wrap; }
}

@media (max-width: 34rem) {
  /* The thumbnail is the first thing to go: on a phone the name and the price
     are what a buyer is scanning for. */
  .fw-prod .fw-prod__thumb { display: none; }

  .fw-prod__buy--row input[type="number"] { width: 3rem; }

  .fw-shell__minicart { width: min(94vw, 30rem); }
}

/* The overlay is full-screen, so on a desktop there is room to put categories
   beside the products rather than above them. */
.fw-sug__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}

@media (min-width: 64rem) {
  .fw-sug__cols:has(> .fw-sug__side) {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

/* No heading and no divider: a list of category names next to a list of
   products is self-evident, and both were spending width on saying so. */
.fw-sug__side .fw-sug__cat {
  background: none;
}

/* Matching shelves above the product results, in the catalogue's own tiles. */
.fw-cat__grid--matches {
  margin-bottom: 1.5rem;
}

/* One height for the pair. Stretching them to the row settles it whatever the
   theme puts on buttons — a min-height there was overriding the fixed height
   and leaving the button taller than the field. */
.fw-prod__buy--row {
  align-items: stretch;
}

.fw-prod__buy--row input[type="number"],
.fw-prod__buy--row button {
  height: 2rem;
  min-height: 2rem;
  line-height: 1;
  box-sizing: border-box;
}

.fw-prod__buy--row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cart: lines on the left, the summary beside them on a wide screen, so the
   total and the way forward stay in view while quantities are edited. */
.fw-cart__layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 64rem) {
  .fw-cart__layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }

  .fw-cart__collaterals {
    position: sticky;
    top: 1.5rem;
    margin-top: 0;
  }

  /* WooCommerce replaces .cart_totals wholesale, so nothing that must survive
     an update can be styled by an id or set inline on it. */
  .fw-cart__collaterals .cart_totals {
    width: 100%;
  }
}

/* The card the cart shows its totals in is the checkout's card — see
   .fw-totals__card. What is left on .fw-cart__summary is placement only. */

/* The one action on the page, so it gets the primary treatment — not the red
   the shop reserves for destructive controls. */
/* Geometry comes from app.css, where every express-shop button shares one
   spec; only the colors live here. */
.fw-ekspress .fw-cart__checkout {
  border: 1px solid var(--fw-ink);
  border-radius: var(--fw-radius);
  background: var(--fw-ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.fw-ekspress .fw-cart__checkout:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* Held shut while a line breaks its product's ordering rules. Greyed rather
   than hidden: a button that disappears reads as a fault in the page, while a
   dead one next to the notice explaining why reads as a step still to do. */
.fw-ekspress .fw-cart__checkout--blocked,
.fw-ekspress .fw-cart__checkout--blocked:hover {
  border-color: var(--fw-line);
  background: var(--fw-line);
  color: var(--fw-muted);
  cursor: not-allowed;
}

/* WooCommerce lays the totals out for its own two-column cart page:
   `.woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }`.
   We need the class for its ajax refresh but not the layout, and matching its
   specificity is not enough — this adds a fourth class so source order cannot
   decide it. */
.fw-ekspress .fw-cart__collaterals .cart_totals.fw-cart__summary {
  float: none;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Checkout: the cart's shape — details left, order and payment beside them. */
.fw-checkout__layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 64rem) {
  /* Equal columns: the order side carries the delivery choices and the payment
     methods, so it needs as much room as the form beside it. */
  .fw-checkout__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: start;
  }

  .fw-checkout__aside {
    position: sticky;
    top: 1.5rem;
  }
}

.fw-checkout__card {
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-checkout__card + .fw-checkout__card {
  margin-top: 1.5rem;
}

.fw-shop .fw-checkout__card h3,
.fw-shop .fw-checkout__card .woocommerce-billing-fields h3,
.fw-shop .fw-checkout__card .woocommerce-shipping-fields h3 {
  margin: 0 0 1.1rem;
  color: var(--fw-ink);
  font-size: 1rem;
  font-weight: 500;
}

/* A card's own title, set apart from the body it heads: same uppercase and
   tracking as the field labels inside it, a step up in weight and in ink
   rather than grey. Named one by one rather than by descent — the terms of
   sale sit inside a card too, and their numbered headings are prose. */
.fw-shop .fw-checkout__card > h3,
.fw-shop .fw-checkout__card > .fw-checkout__who > h3,
.fw-shop .fw-checkout__card > .woocommerce-billing-fields > h3,
.fw-shop .fw-checkout__card > .woocommerce-shipping-fields > h3 {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Labels above their field rather than in a column beside it: the theme's
   two-column rows left a ragged gap and wrapped long labels onto two lines. */
/* Compact rows: a business buyer fills this often, and the stock spacing put
   half a screen between the first field and the last. */
.fw-shop .fw-checkout__card .form-row {
  display: block;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0;
}

.fw-shop .fw-checkout__card .form-row .required {
  color: #b3261e;
  text-decoration: none;
}

.fw-shop .fw-checkout__card .input-text,
.fw-shop .fw-checkout__card select,
.fw-shop .fw-checkout__card textarea {
  width: 100%;
}

.fw-shop .fw-checkout__card textarea {
  min-height: 5rem;
}

/* Fields filled from the register or the card are not the buyer's to retype. */
/* Two per row where they are short, on a wide screen. */
@media (min-width: 48rem) {
  .fw-shop .fw-checkout__card .form-row-first,
  .fw-shop .fw-checkout__card .form-row-last {
    display: inline-block;
    width: calc(50% - 0.45rem);
    vertical-align: top;
  }

  .fw-shop .fw-checkout__card .form-row-first {
    margin-right: 0.9rem;
  }
}

/* Order review inside the aside card. */
.fw-shop .woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
}

.fw-shop .woocommerce-checkout-review-order-table th,
.fw-shop .woocommerce-checkout-review-order-table td {
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid var(--fw-line);
  font-size: 0.9rem;
  text-align: left;
  vertical-align: top;
}

.fw-shop .woocommerce-checkout-review-order-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.fw-shop .woocommerce-checkout-review-order-table thead th {
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fw-shop .woocommerce-checkout-review-order-table .order-total th,
.fw-shop .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  font-size: 1.05rem;
  font-weight: 500;
}

/* Delivery choices read as a list of rows, not a right-ragged column. */
.fw-shop #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.fw-shop #shipping_method li {
  display: flex;
  align-items: baseline;
  gap: var(--fw-gap);
  margin: 0 0 0.3rem;
  white-space: normal;
}

.fw-shop #shipping_method label {
  font-size: 0.9rem;
}

/* Payment box: strip the plugin's purple panel and rounded card. */
.fw-shop #payment,
.fw-shop .woocommerce-checkout-payment {
  border-radius: var(--fw-radius);
  background: none;
}

.fw-shop #payment ul.payment_methods {
  margin: 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--fw-line);
  list-style: none;
}

.fw-shop #payment div.payment_box {
  border-radius: var(--fw-radius);
  background: #f7f7f7;
}

.fw-shop #payment div.payment_box::before {
  display: none;
}

.fw-ekspress .fw-shop .fw-checkout__confirm .form-row.place-order {
  padding: 0;
  margin: 0;
}

/* Geometry comes from app.css, same spec as every express-shop button. */
.fw-shop #place_order {
  border: 1px solid var(--fw-ink);
  border-radius: var(--fw-radius);
  background: var(--fw-ink);
  color: #fff;
  font-weight: 500;
}

.fw-shop #place_order:hover {
  background: #333;
  border-color: #333;
}

/* The theme's stylesheet loads on cart and checkout — WooCommerce's own markup
   needs it — and underlines links there. The header total sits inside the cart
   link, so it gained an underline on those two pages and lost it everywhere
   else, which read as the cart changing design between pages. */
body.fw-shell .fw-shell__cart,
body.fw-shell .fw-shell__cart:hover,
body.fw-shell .fw-shell__cart:focus,
body.fw-shell .fw-shell__carttotal {
  text-decoration: none;
}

/* Amounts align right, names do not. The blanket td rule above caught the
   product column too and pushed every line item away from its label. */
.fw-shop .woocommerce-checkout-review-order-table td.product-name,
.fw-shop .woocommerce-checkout-review-order-table th.product-name {
  text-align: left;
  white-space: normal;
}

.fw-shop .woocommerce-checkout-review-order-table td.product-total,
.fw-shop .woocommerce-checkout-review-order-table th.product-total {
  text-align: right;
}

/* Delivery options belong under their label, not in a narrow right column. */
.fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  text-align: left;
  white-space: normal;
}

/* ---- Checkout form ----------------------------------------------------
   WooCommerce styles these as `.woocommerce form .form-row input.input-text`,
   which scores higher than a three-class rule of ours — hence the rounded,
   dark-bordered, half-width fields. Everything here is scoped deeply enough to
   win outright rather than by enqueue order. */

/* The same row as the summary above them: label in its own column on the left,
   value beside it. Labels sat above their fields before, so one card carried two
   different layouts. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: start;
  /* No column gap. The label carries padding-right: 1rem exactly as the
     summary's <dt> does, and a gap on top of it pushed every field a further
     1rem right — so the inputs started one step inside the values printed
     above them and the card looked like two stacked layouts. */
  gap: 0;
  width: 100%;
  /* Separated by a rule like the rows above, not by a margin: the summary ended
     in a divider and the fields began in open space, which is what made the
     card change character halfway down. Drawn on top for the reason given on
     the summary rows — the fields live in several wrappers, so a bottom rule
     plus ":last-child" blanked lines mid-card. */
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--fw-line);
}

/* The first row of its card, under the card's own heading line. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row.place-order {
  border-top: 0;
}

/* The same label treatment as the summary rows above them — they share a card,
   so two typographies read as two sections. Not clipped: an ellipsis turned
   "E-posti aadress" into "E-posti aa…"; a long label wraps instead. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row label {
  margin: 0;
  padding-right: 1rem;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* 1.6 as in the summary above, and the field's own vertical padding is
     mirrored here so the label sits on the input's first line rather than
     riding above it. */
  line-height: 1.6;
  padding-top: 0.35rem;
  text-transform: uppercase;
  white-space: normal;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row .woocommerce-input-wrapper {
  width: 100%;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row input.input-text,
.fw-ekspress .fw-shop .fw-checkout__card .form-row textarea.input-text,
.fw-ekspress .fw-shop .fw-checkout__card .form-row select,
.fw-ekspress .fw-shop .fw-checkout__card .form-row .select2-selection {
  width: 100%;
  /* width alone was not enough: a max-width further up was cutting the field
     short of its column. */
  max-width: none;
  box-shadow: none;
}

/* The country picker is a widget, not one of our fields: dressed as one. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row .select2-selection {
  box-sizing: border-box;
  height: var(--fw-field-height);
  padding: 0 0.75rem;
  border: var(--fw-field-border);
  border-radius: var(--fw-radius);
  background: #fff;
  font-size: var(--fw-field-font-size);
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row input.input-text:focus,
.fw-ekspress .fw-shop .fw-checkout__card .form-row textarea.input-text:focus,
/* Register and certificate data: shown, not asked for. */
/* The asterisk is the only thing on the label that is not muted. */
.fw-ekspress .fw-shop .fw-checkout__card .required {
  color: #b3261e;
  border: 0;
  text-decoration: none;
}

.fw-ekspress .fw-shop .fw-checkout__card .optional {
  color: #b4b4b4;
  font-weight: 300;
  text-transform: none;
}

/* No wrapper around payment — the choices themselves are the boxes. */
.fw-ekspress .fw-shop #payment {
  margin-top: 1.25rem;
  padding: 0;
  border-radius: var(--fw-radius);
  background: none;
  box-shadow: none;
}

.fw-ekspress .fw-shop #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}

.fw-ekspress .fw-shop #payment ul.payment_methods > li {
  margin-bottom: 0.4rem;
  list-style: none;
}

.fw-ekspress .fw-shop #payment ul.payment_methods > li:last-child {
  margin-bottom: 0;
}

.fw-ekspress .fw-shop #payment ul.payment_methods label {
  font-size: 0.95rem;
}

/* The bank grid: even tiles, no purple panel behind them. */
.fw-ekspress .fw-shop #payment div.payment_box {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border-radius: var(--fw-radius);
  background: #fafafa;
}

.fw-ekspress .fw-shop #payment div.payment_box::before {
  display: none;
}

/* ---- Transport and payment as selectable boxes ------------------------
   A radio list gives a buyer a column of dots to aim at; a box is the whole
   row and reads as a choice. The radio stays for semantics and keyboard use. */

.fw-ekspress .fw-shop #shipping_method li,
.fw-ekspress .fw-shop ul.payment_methods > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--fw-gap);
  margin: 0 0 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.fw-ekspress .fw-shop #shipping_method li:hover,
.fw-ekspress .fw-shop ul.payment_methods > li:hover {
  border-color: #b4b4b4;
}

/* The chosen box is outlined, not merely dotted. */
.fw-ekspress .fw-shop #shipping_method li:has(input:checked),
.fw-ekspress .fw-shop ul.payment_methods > li:has(input:checked) {
  border-color: var(--fw-ink);
  background: #fafafa;
}

.fw-ekspress .fw-shop #shipping_method li label,
.fw-ekspress .fw-shop ul.payment_methods > li label {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.fw-ekspress .fw-shop #shipping_method li input,
.fw-ekspress .fw-shop ul.payment_methods > li input {
  flex: 0 0 auto;
  margin: 0;
}

/* Bank logos and gateway blurb sit under their own box, full width. */
.fw-ekspress .fw-shop ul.payment_methods > li div.payment_box {
  flex: 1 0 100%;
  margin: 0.6rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--fw-line);
  border-radius: var(--fw-radius);
  background: none;
}

/* A gateway icon should not outgrow the label beside it. */
.fw-ekspress .fw-shop ul.payment_methods > li label img {
  max-height: 1.5rem;
  width: auto;
  margin: 0 0 0 0.4rem;
  vertical-align: middle;
}

/* Transport spans the table rather than sitting in the amounts column: the
   label belongs above its choices, not in a narrow cell beside them. */
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  display: block;
  padding: 0.5rem 0;
}

.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
  margin-bottom: 0.4rem;
}

/* Inside a box the text reads from the left, whatever the table column does. */
.fw-ekspress .fw-shop #shipping_method li,
.fw-ekspress .fw-shop #shipping_method li label,
.fw-ekspress .fw-shop ul.payment_methods > li,
.fw-ekspress .fw-shop ul.payment_methods > li label {
  text-align: left;
}

/* The theme nests a whole table inside the shipping row's colspan cell, so
   flattening the outer row was not enough — the indent and the doubled rule
   both come from that inner table. Everything here collapses it to full-width
   blocks. */
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals > td,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table tbody,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table tr,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table th,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table td {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  text-align: left;
}

.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table th {
  margin-bottom: 0.4rem;
}

.fw-ekspress .fw-shop tr.woocommerce-shipping-totals table tr + tr {
  margin-top: 0.6rem;
}

/* The theme right-aligns the method list; the boxes read from the left. */
.fw-ekspress .fw-shop #shipping_method.text-right,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals .text-right {
  text-align: left;
}

/* One divider under the whole transport block, not one per nested row. */
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  border-bottom: 1px solid var(--fw-line);
}

/* The pickup-point picker belongs under its label at full width. */
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals select,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals .select2,
.fw-ekspress .fw-shop tr.woocommerce-shipping-totals .select2-container {
  width: 100% !important;
  max-width: none;
}

/* The method list fills its cell, and so does each box in it. */
.fw-ekspress .fw-shop #shipping_method {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fw-ekspress .fw-shop #shipping_method li {
  width: 100%;
  margin-right: 0;
  box-sizing: border-box;
}

/* Any row carrying a picker — the courier's pickup-point select is added by
   its own plugin as a separate row, so it cannot be matched by name. */
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr:has(select) th,
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr:has(select) td {
  display: block;
  width: 100%;
  text-align: left;
}

.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table tr:has(select) th {
  margin-bottom: 0.3rem;
}

.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table select {
  width: 100%;
  max-width: none;
}

/* The courier's own label sits in a bold right-aligned block by default. */
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table label,
.fw-ekspress .fw-shop .woocommerce-checkout-review-order-table strong {
  text-align: left;
}

/* The company block: stated, not asked for — and set in the same rows as the
   product and order tables it sits beside, so the two cards read as one
   design rather than a list next to a table. */
.fw-checkout__who .fw-who {
  display: grid;
  grid-template-columns: 9rem 1fr;
  margin: 0;
}

/* Separators are drawn on the TOP of each row, not the bottom.
   A row owning the rule below it means the last row of every block has to have
   its rule taken away again — and since the fields sit in several wrappers,
   ":last-child" fired inside each one and knocked out lines in the middle of
   the card. Drawn on top, only the very first row is special, and the fields
   below inherit the same rhythm with no exceptions. */
.fw-checkout__who dt,
.fw-checkout__who dd {
  padding: 0.55rem 0;
  border-top: 1px solid var(--fw-line);
}

.fw-checkout__who dt:first-of-type,
.fw-checkout__who dd:first-of-type {
  border-top: 0;
}

.fw-checkout__who dt {
  padding-right: 1rem;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.fw-checkout__who dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 34rem) {
  .fw-checkout__who .fw-who {
    grid-template-columns: 1fr;
  }

  .fw-checkout__who dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* WooCommerce's "send somewhere else?" heading is a decision we make from the
   delivery method, so the control itself is redundant. */
.fw-ekspress .fw-shop #ship-to-different-address {
  display: none;
}

.fw-ekspress .fw-shop .woocommerce-shipping-fields[hidden],
.fw-ekspress .fw-shop .form-row[hidden] {
  display: none;
}

/* Parcel machine picker: a search box over a filtered list, in place of a
   native select holding 253 terminals. */
.fw-pickup__label {
  display: block;
  margin: 0.75rem 0 0.3rem;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fw-pickup__box {
  position: relative;
  margin-bottom: 0.5rem;
}

.fw-ekspress .fw-shop .fw-pickup__search {
  width: 100%;
}

.fw-pickup__list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 17rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid #dcdcdc;
  background: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.12);
  list-style: none;
  text-align: left;
}

.fw-pickup__list[hidden] { display: none; }

/* The picker renders inside the shipping-methods list, so its own items
   inherit that list's rules — a flex row with padding, a border and a gap
   under each — and the dropdown came out as a stack of boxed cards. */
.fw-pickup__list li,
.fw-ekspress .fw-shop #shipping_method .fw-pickup__list li {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.fw-ekspress .fw-shop .fw-pickup__opt {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background: none;
  color: var(--fw-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fw-ekspress .fw-shop .fw-pickup__opt:hover,
.fw-ekspress .fw-shop .fw-pickup__opt.is-chosen {
  background: #f4f5f7;
  color: var(--fw-ink);
}

.fw-pickup__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
}

.fw-pickup__where {
  display: block;
  color: var(--fw-muted);
  font-size: 0.8rem;
}

.fw-pickup__none {
  display: block;
  padding: 0.6rem 0.7rem;
  color: var(--fw-muted);
  font-size: 0.85rem;
}

/* Transport: methods on the left, whatever the chosen one still needs on the
   right. Same shape as the payment block. */
.fw-ekspress .fw-shop .fw-transport__cell {
  display: block;
  width: 100%;
  padding: 0.75rem 0 !important;
  text-align: left;
}

.fw-transport {
  display: block;
}

.fw-ekspress .fw-shop .fw-transport__methods {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Inside the chosen method's own box, below its label — the same shape as a
   payment gateway's fields appearing inside the method the buyer picked. The
   list item is a flex row, so a full-basis child drops onto its own line. */
.fw-transport__sub {
  flex: 1 0 100%;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  padding-bottom: 0.15rem;
  border-top: 1px solid var(--fw-line);
}

/* Aligned with the method's own label rather than the radio beside it. */
.fw-transport__sub > * {
  margin-left: 0;
}

.fw-transport__sub .fw-pickup__label {
  margin-top: 0;
}

.fw-transport__details {
  margin: 0.5rem 0 0;
  color: var(--fw-muted);
}

/* Courier delivery address, as that method's own sub-choice.
   Scoped deeply: a single-class rule lost to the theme's input reset, so the
   fields sat flush against each other sharing borders. */
.fw-ekspress .fw-shop .fw-delivery .fw-delivery__field,
.fw-delivery__field {
  width: 100%;
  /* Enough that two bordered fields do not read as one gridded block. */
  margin-bottom: 0.5rem;
}

.fw-ekspress .fw-shop .fw-delivery .fw-delivery__pair,
.fw-delivery__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  /* Spaced from above rather than relying on the street field's own bottom
     margin: something outside this stylesheet zeroes that, and the street and
     the postcode/city row sat flush against each other — three bordered boxes
     reading as one gridded block. The gap matches the one between the two
     fields inside this row, so the spacing is even in both directions. */
  margin-top: 0.5rem;
}

.fw-ekspress .fw-shop .fw-delivery .fw-delivery__pair .fw-delivery__field,
.fw-delivery__pair .fw-delivery__field {
  margin-bottom: 0;
}

.fw-delivery > :last-child,
.fw-pickup > :last-child {
  margin-bottom: 0;
}

/* Summary and the fields are one section: the heading and the divider under it
   separate them without a second card. */
/* One card, so the summary and the fields sit close: a wide gap made them look
   like two blocks again. */
/* No gap to the fields below. The summary and the fields are one list of rows
   in one card, and a margin here left the last summary row floating above an
   empty band before the first field. */
.fw-checkout__who {
  margin-bottom: 0;
}

.fw-checkout__who h3 {
  margin-top: 0;
}

/* Payment, across the full width below both columns, in the same boxed
   treatment as the sections above it. */
.fw-checkout__payment {
  margin-top: 1.5rem;
}

.fw-ekspress .fw-shop .fw-checkout__payment #payment {
  margin-top: 0;
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

/* The bank grid has the room to lay out properly now. */
.fw-ekspress .fw-shop .fw-checkout__payment .payment_box img {
  max-width: 100%;
}

/* ---- Checkout sections ------------------------------------------------
   Five of them: payer and the goods on the left, transport, totals and payment
   on the right. Each is its own card rather than rows inside one table. */

.fw-checkout__aside > .fw-checkout__card,
.fw-checkout__aside .woocommerce-checkout-review-order > .fw-checkout__card {
  margin-bottom: 1.5rem;
}

.fw-checkout__aside > :last-child,
.fw-checkout__aside .woocommerce-checkout-review-order > :last-child {
  margin-bottom: 0;
}

.fw-review .fw-checkout__card + .fw-checkout__card {
  margin-top: 1.5rem;
}

/* ---- The totals card --------------------------------------------------
   One card, rendered by TotalsCard on the cart page and at the checkout
   alike. Each screen adds classes of its own — cart_totals for WooCommerce's
   ajax, fw-cart__summary for the cart column, fw-checkout__card for the
   aside's spacing — but none of them carries any of the card's appearance.
   Two owners is how the two ended up looking like different components. */
.fw-totals__card {
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

/* Three classes deep on purpose. At the checkout this card also carries
   .fw-checkout__card, so the card-title rule above reaches this heading on
   one screen and leaves the theme's own h3 on the other — a 24px light title
   beside a 16px uppercase one. Declared to match TELLIJA and TRANSPORT
   exactly, so SUMMAD cannot drift from the cards it sits with. */
.fw-shop .fw-totals__card .fw-totals__title {
  margin: 0 0 1.1rem;
  color: var(--fw-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Totals as a definition list: label left, figure right. */
.fw-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 0;
}

/* Separators on the TOP of each row, as the payer card draws them. A row
   owning the line below it means the last row has to have its line taken
   away again, and that exception is what the two screens disagreed about:
   one ruled under every row, the other only above the total. Drawn on top,
   only the first row is special. */
.fw-totals dt,
.fw-totals dd {
  padding: 0.55rem 0;
  border-top: 1px solid var(--fw-line);
  line-height: 1.6;
}

.fw-totals dt:first-of-type,
.fw-totals dd:first-of-type {
  border-top: 0;
}

/* The shell's field-label voice — the same one the payer card and the table
   headers above it are set in. */
.fw-totals dt {
  padding-right: 1rem;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fw-totals dd {
  margin: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The total is what the buyer commits to, so it is set apart in ink. Only the
   figure grows: the label keeps the voice of the rows above it, or the card
   reads as a list with a headline stuck on the end. */
.fw-totals dt.fw-totals__grand,
.fw-totals dd.fw-totals__grand {
  border-top-color: var(--fw-ink);
  color: var(--fw-ink);
}

.fw-totals dd.fw-totals__grand {
  font-size: 1.05rem;
  font-weight: 500;
}

/* The one control inside the card, and only on the cart — at the checkout the
   buyer is already here. */
.fw-totals__action {
  margin-top: 1.25rem;
}

/* The goods, in the same table as the cart and the catalogue. */
.fw-order__table {
  width: 100%;
  margin: 0;
}

.fw-order__qty {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.fw-ekspress .fw-shop .fw-order__table th,
.fw-ekspress .fw-shop .fw-order__table td {
  padding: 0.45rem 0.75rem 0.45rem 0;
}

.fw-ekspress .fw-shop .fw-order__table th:last-child,
.fw-ekspress .fw-shop .fw-order__table td:last-child {
  padding-right: 0;
}

/* Payment is a section like the others now, not a full-width strip. */
.fw-ekspress .fw-shop .fw-checkout__payment #payment {
  margin-top: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* The company you are buying as: context, so it sits beside the logo rather
   than among the pages. One control for switching and for reaching the list. */
.fw-company {
  position: relative;
}

.fw-ekspress .fw-company__button,
body.fw-shell .fw-company__button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--fw-field-height);
  min-height: 0;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  background: #fff;
  color: var(--fw-ink);
  font: inherit;
  font-size: var(--fw-field-font-size);
  font-weight: 500;
  cursor: pointer;
}

body.fw-shell .fw-company__button:hover {
  border-color: #b4b4b4;
  background: #fff;
  color: var(--fw-ink);
}

.fw-company__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  /* As wide as its longest entry, never narrower than the picker. */
  width: max-content;
  min-width: 100%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 28px rgb(0 0 0 / 0.12);
}

.fw-company__menu[hidden] { display: none; }

.fw-company__item,
.fw-company__manage {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--fw-ink);
  font-size: 0.9rem;
  text-decoration: none;
}

.fw-company__item:hover,
.fw-company__manage:hover {
  background: #f4f5f7;
}

.fw-company__item.is-active {
  font-weight: 500;
}

.fw-company__status {
  display: block;
  color: var(--fw-muted);
  font-size: 0.75rem;
  font-weight: 300;
}

/* Every entry keeps the mark's room, so the menu's width does not depend on
   which one is chosen. Through the menu, so button entries are not given the
   shop's button padding instead. */
.fw-company__menu .fw-company__item {
  position: relative;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
}

.fw-company__item.is-active::after {
  content: '✓';
  position: absolute;
  right: 0.75rem;
  color: var(--fw-muted);
}

/* The list of all companies reads as a way out of the switcher, not a company. */
.fw-company__manage {
  border-top: 1px solid var(--fw-line);
  color: var(--fw-muted);
  font-size: 0.85rem;
}

/* Address suggestions sit under the street field they fill. */
.fw-address__list {
  top: calc(2.3rem + 0.15rem);
}

.fw-delivery {
  position: relative;
}

/* The sign-in card centred in the window rather than sitting under the top
   edge with the rest of the page empty below it. Scoped to the gate, so pages
   with real content are unaffected. */
body.fw-shell:has(.fw-ekspress__gate) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.fw-shell:has(.fw-ekspress__gate) .fw-shell__main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

/* Without container-query support for :has, the card still centres itself
   horizontally and simply keeps its place vertically. */
.fw-ekspress__gate {
  margin-inline: auto;
}

/* Textareas keep the label on the first line rather than centred against a
   four-line box. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row:has(textarea) {
  align-items: start;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row:has(textarea) label {
  padding-top: 0.5rem;
}

/* Narrow screens have no room for a label column. */
@media (max-width: 38rem) {
  .fw-ekspress .fw-shop .fw-checkout__card .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

/* The theme renders checkout fields as Bootstrap rows — label.col-lg-4 next to
   input.col-lg-8 — and those flex bases and max-widths fought our grid, which
   is how the input ended up in the label's column at a third of the width.
   Items are placed by hand here and the Bootstrap sizing is neutralised, so the
   row is ours regardless of the classes the theme puts on it. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row > :not(.fw-field__input) {
  flex: none;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row > label {
  grid-column: 1;
  grid-row: 1;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row > .woocommerce-input-wrapper,
.fw-ekspress .fw-shop .fw-checkout__card .form-row > input,
.fw-ekspress .fw-shop .fw-checkout__card .form-row > select,
.fw-ekspress .fw-shop .fw-checkout__card .form-row > textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

/* ---- Components WooCommerce used to style ----------------------------
   Its stylesheets are no longer loaded in Ekspress, so the few elements it
   generates itself — notices, the ajax overlay, the quantity field — are
   described here. Everything is driven from the tokens above, so a change to a
   radius or a line colour moves the whole layer. */

.fw-shop .woocommerce-error,
.fw-shop .woocommerce-message,
.fw-shop .woocommerce-info,
.fw-shop .woocommerce-notice {
  margin: 0 0 var(--fw-pad);
  padding: 0.7rem 0.9rem;
  border: var(--fw-border);
  border-left: 3px solid var(--fw-ink);
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: var(--fw-shadow);
  color: var(--fw-ink);
  font-size: 0.9rem;
  list-style: none;
}

.fw-shop .woocommerce-error {
  border-left-color: var(--fw-danger);
}

.fw-shop .woocommerce-message {
  border-left-color: var(--fw-success);
}

.fw-shop .woocommerce-error li,
.fw-shop .woocommerce-message li {
  margin: 0;
  list-style: none;
}

/* The overlay WooCommerce lays over a section while it recalculates. */
.fw-shop .blockUI.blockOverlay {
  position: relative;
  background: rgb(255 255 255 / 0.6) !important;
}

.fw-shop .blockUI.blockOverlay::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border: 2px solid var(--fw-line);
  border-top-color: var(--fw-muted);
  border-radius: 50%;
  animation: fw-spin 0.6s linear infinite;
}

/* Fields, now that the theme no longer names them. */
.fw-shop .fw-field__label {
  color: var(--fw-muted);
}

/* Field — the shop's one text, number, e-mail, phone and search input, select
   and textarea. Forms place it (width, margins) and never restyle it. The
   search overlay and the header search button are their own components. */
.fw-shell .fw-field__input {
  box-sizing: border-box;
  height: var(--fw-field-height);
  margin: 0;
  padding: 0 0.75rem;
  border: var(--fw-field-border);
  border-radius: var(--fw-radius);
  background-color: #fff;
  color: var(--fw-ink);
  font: inherit;
  font-size: var(--fw-field-font-size);
}

.fw-shell .fw-field__input:focus {
  border-color: var(--fw-ink);
  outline: none;
}

.fw-shell textarea.fw-field__input {
  height: auto;
  min-height: 5rem;
  padding-block: 0.5rem;
  resize: vertical;
}

.fw-shell select.fw-field__input {
  padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.85rem;
  appearance: none;
  cursor: pointer;
}

.fw-shell .fw-field__input[readonly] {
  border-style: dashed;
  background-color: var(--fw-surface);
  color: var(--fw-muted);
  cursor: default;
}

.fw-shell .fw-field__input--search {
  padding-left: 2.1rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.7rem center / 0.95rem;
}

.fw-shell .fw-field__input--qty {
  padding-inline: 0.4rem;
  text-align: center;
}

.fw-shop .fw-field__input {
  width: 100%;
}

/* The header, footer and dialogs sit outside .fw-ekspress but belong to the
   same site, so the family is set on the shell as well. */
body.fw-shell,
body.fw-shell .fw-shop {
  font-family: var(--fw-font);
}

/* Opening from the right: the control sits at the end of the bar now, so a
   left-anchored menu would run off the page. */
.fw-shell__context .fw-company__menu {
  left: auto;
  right: 0;
}

/* The out-of-stock label stands where the order control would, so it centres in
   that column rather than aligning right the way the control does. */
.fw-prod__buycol > .fw-prod__stock--out {
  display: block;
  text-align: center;
}

/* An ordering rule, under the name of the row it governs.

   Small enough that the second line still fits inside the height the thumbnail
   already gives the row, so a table gains no height where a rule appears and
   the rows without one — nearly all of them — gain nothing at all. */
.fw-prod__ruletag {
  display: block;
  color: var(--fw-muted, #6b6b6b);
  font-size: 0.7rem;
  line-height: 1.1;
}

/* ---------------------------------------------------------------------------
   The company's contact address. Reported on the review card, edited and
   proven in a dialog: the card summarises what is about to be sent, and an
   editing flow inside it had that one screen asking two things at once.
   --------------------------------------------------------------------------- */

.fw-ekspress__emailrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-gap);
}

/* Reports, does not act: the tick is a property of the address beside it. */
.fw-ekspress__vmark {
  display: flex;
  color: var(--fw-success);
}

.fw-ekspress__vmark[hidden] { display: none; }

/* A form, not a question: wider than the confirm boxes the class carries. */
.fw-ekspress__emaildlg {
  position: relative;
  min-width: min(28rem, calc(100vw - 2rem));
}

.fw-ekspress__dlgclose {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.fw-ekspress__emaildlg .fw-ekspress__verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-gap);
}

/* Wide enough for a real address while still sharing its row with the send
   action, and the first thing to give way on a narrow screen. */
.fw-ekspress__emaildlg input {
  flex: 1 1 11rem;
  min-width: 0;
}

/* Under the field, where the send action's answer belongs. Held open so the
   menu below does not jump a line when a link goes out. */
.fw-ekspress__emaildlg .fw-ekspress__vstate {
  display: block;
  min-height: 1.4em;
  margin-top: 0.5rem;
  color: var(--fw-muted);
  font-size: 0.85rem;
}

/* The dialog's own paragraph rule sets the heading's size and spacing; an
   error is neither, so it keeps the shape it has everywhere else. */
.fw-ekspress__emaildlg .fw-ekspress__error {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

/* A refused application is the one thing on this screen that cannot be tried
   again by pressing harder, so the button says so rather than looking live. */
.fw-ekspress button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The confirmed tick where it sits in a line of text, rather than inside a
   field. .fw-ekspress__vmark is absolutely positioned to ride in the input on
   the review screen; borrowed for the company card it left the line entirely
   and printed under the address. */
.fw-ekspress__tick {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.4rem;
  color: var(--fw-success);
}

/* The order table sums itself. Same label voice as the totals card, and the
   rule above it separates the sum from the goods rather than reading as one
   more line. */

/* The terms row is a sentence with a checkbox, not a labelled field.

   It was inheriting the field-label voice — uppercase, 0.75rem, tracked — and
   the two-column grid, so a line of prose was squeezed into the 9rem label
   column and broke across four lines in small caps beside the submit button.
   It spans the row and reads as running text. */
.fw-ekspress .fw-shop .fw-checkout__card .woocommerce-terms-and-conditions-wrapper .form-row,
.fw-ekspress .fw-shop .fw-checkout__card .form-row.validate-required:has(input[type="checkbox"]) {
  display: block;
  border-top: 0;
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row.validate-required:has(input[type="checkbox"]) label {
  display: inline-flex;
  align-items: baseline;
  padding-block: 0;
  padding-right: 0;
  color: var(--fw-ink);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

/* The terms sentence above the action, each on its own line.

   .place-order is still the two-column grid the other form rows use, so the
   sentence was squeezed into the 9rem label column and wrapped three times
   beside the button. It is the last thing read before ordering — it gets the
   width. */
.fw-ekspress .fw-shop .fw-checkout__confirm .place-order {
  display: block;
}

.fw-ekspress .fw-shop .fw-checkout__confirm .place-order .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 0.9rem;
}

/* The order card's sum, on the title line at the far end. */
.fw-shop .fw-order > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.fw-order__sum {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* WooCommerce's own notices, dressed like the rest of the shell.

   Express drops WooCommerce's stylesheets, so its error and message lists
   arrived as bare <ul>s — validation failures printed as loose sentences above
   the form with nothing marking them as errors at all.

   The class names below are the theme's, not WooCommerce's. Its notice
   templates answer with Bootstrap ones — ul.list-group for an error,
   .alert-success, .alert-warning — and never emit .woocommerce-error or
   .woocommerce-message at all, so rules written against those names match
   nothing here. Bootstrap's stylesheet is not loaded in Ekspress either, which
   left the classes inert: a refused checkout printed its errors in a neutral
   grey box with nothing marking them as errors. Both sets are kept, because
   the WooCommerce names are what appears if the theme's overrides ever stop
   being used. */
.fw-shell .woocommerce-error,
.fw-shell .woocommerce-message,
.fw-shell .woocommerce-info,
.fw-shell .woocommerce-NoticeGroup ul,
.fw-shell ul.woocommerce-error,
.fw-shell .alert > ul.list-group,
.fw-shell .alert-success,
.fw-shell .alert-warning {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--fw-line);
  border-left: 3px solid var(--fw-muted);
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: var(--fw-shadow);
  color: var(--fw-ink);
  font-size: 0.9rem;
  list-style: none;
}

.fw-shell .woocommerce-error,
.fw-shell ul.woocommerce-error,
.fw-shell .alert > ul.list-group {
  border-left-color: var(--fw-danger);
}

.fw-shell .woocommerce-message,
.fw-shell .alert-success {
  border-left-color: var(--fw-success);
}

.fw-shell .woocommerce-error li,
.fw-shell .woocommerce-message li,
.fw-shell .woocommerce-info li,
.fw-shell .alert > ul.list-group li {
  margin: 0;
  padding: 0.15rem 0;
  list-style: none;
}

/* Same title-line treatment as the order card's sum. */
.fw-shop .fw-review__transport > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Reads as a link, because it opens something. */
.fw-ekspress .woocommerce-terms-and-conditions-link {
  color: var(--fw-ink);
  text-decoration: underline;
  cursor: pointer;
}

.fw-terms__dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
}

.fw-terms__body {
  max-height: 60vh;
  margin-bottom: 1rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Whatever state WooCommerce left it in, it is visible inside the dialog. */
.fw-terms__body .woocommerce-terms-and-conditions {
  display: block !important;
  max-height: none;
  border: 0;
  background: none;
}

/* The parcel-machine suggestions sit above the cards below them.

   z-index alone was not enough: each checkout card paints its own background
   and shadow, and a later sibling paints over an earlier one whatever the
   list's own z-index says. The card holding an open list is lifted with it, so
   the suggestions cover the totals rather than being interleaved with them. */
.fw-shop .fw-review__transport {
  position: relative;
  z-index: 30;
}

.fw-pickup__list {
  z-index: 60;
  box-shadow: var(--fw-shadow-raised);
}

/* The delivery contact number, beside the method that rings it. The country
   code is a choice, not something to type: +372 is preselected. */
.fw-delivery--phone {
  margin-top: 0.5rem;
}

.fw-phone {
  display: flex;
  gap: 0.5rem;
}

/* Scoped past two rules that otherwise win: the review table's
   `select { width: 100% }`, and the `#shipping_method li input` rule whose
   id selector pins every input in a method row to `flex: 0 0 auto` — which
   left the code select at full width and the number box pushed out of the
   card. */
.fw-ekspress .fw-shop .fw-delivery .fw-phone .fw-phone__prefix,
.fw-ekspress .fw-shop #shipping_method li .fw-phone .fw-phone__prefix {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
}

.fw-ekspress .fw-shop .fw-delivery .fw-phone .fw-delivery__field,
.fw-ekspress .fw-shop #shipping_method li .fw-phone input.fw-delivery__field {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* A title that is also a way back.

   Order screens are reached from three directions — the checkout, an emailed
   link, the orders list — and until this existed all three were dead ends with
   nothing but the browser's back button. */
.fw-crumb {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  font-weight: 500;
}

.fw-crumb a {
  color: var(--fw-muted);
  text-decoration: none;
}

.fw-crumb a:hover {
  color: var(--fw-ink);
  text-decoration: underline;
}

.fw-crumb span[aria-hidden] {
  color: var(--fw-line);
}

.fw-crumb__current {
  color: var(--fw-ink);
}

/* The order number sits left, its sum right — the two are different facts and
   reading them as one run-on string was the complaint. */
.fw-shop .fw-order__title,
.fw-order__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Quantities read as a column when centred; money reads as a column when the
   decimal points line up on the right. */
.fw-ekspress__table .fw-orders__qty {
  text-align: center;
}

.fw-ekspress__table .fw-orders__sum,
.fw-orders__sum {
  text-align: right;
}

.fw-received .fw-ekspress__name a {
  color: var(--fw-ink);
  text-decoration: none;
}

.fw-received .fw-ekspress__name a:hover {
  text-decoration: underline;
}

/* The orders list is the same kind of surface as the order it links to, so it
   is the same card. Without the last-row rule the table's final border sits a
   card-padding away from the bottom edge and reads as an empty row. */
.fw-orders__card .fw-ekspress__table {
  margin: 0;
}

.fw-orders__card .fw-ekspress__table tbody tr:last-child td {
  border-bottom: 0;
}

.fw-orders__card .fw-ekspress__empty {
  margin: 0;
}

.fw-orders__card + .fw-prod__pages {
  margin-top: 1.1rem;
}

/* How many orders and what they came to, for whatever is currently filtered —
   the answer to "what did we spend last year", which is the reason the year
   filter exists at all. */
.fw-orders__summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  color: var(--fw-muted);
  font-size: 0.9rem;
}

.fw-orders__summary-sum {
  color: var(--fw-ink);
  font-weight: 500;
}

.fw-orders__year {
  display: flex;
  margin-right: 0.6rem;
}

/* Where the registry data came from and how old it is. Quiet on purpose: it is
   provenance, not content — the answer to "can I trust this address" for
   somebody who is about to order goods against it. */
.fw-source {
  color: var(--fw-muted);
  font-size: 0.95rem;
  /* Lighter than the title it sits beside, not heavier: .fw-cat__title is 300,
     so a 400 here read as emphasis on the one thing that should recede. */
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
}

/* Print: the order itself, without the shop around it.
   An order is printed to file or to hand to someone; the header, the
   search, the cart and the footer are the shop's furniture, not the
   document. Links lose their colour because on paper they lead nowhere. */

@media print {
  .fw-shell__head,
  .fw-shell__nav,
  .fw-footer,
  .fw-search,
  .fw-shell__minicart,
  .fw-ekspress__notice {
    display: none !important;
  }

  body.fw-shell {
    background: #fff;
  }

  .fw-received a {
    color: inherit;
    text-decoration: none;
  }

  .fw-checkout__card {
    border: 0;
    box-shadow: none;
    padding: 0;
    break-inside: avoid;
  }
}

/* A heading with its "Seisuga" stamp at the right edge — the company card's
   title and the users section share this, as the company list does. */

.fw-stamped {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* The switcher and its account icon are one group: the icon is the
   suffix segment of the pill, sharing its border, the way into whichever
   account is selected. */

.fw-acting {
  display: inline-flex;
  align-items: stretch;
}

body.fw-shell .fw-acting .fw-company__button {
  border-radius: var(--fw-radius) 0 0 var(--fw-radius);
}

.fw-shell__account {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dcdcdc;
  border-left: 0;
  border-radius: 0 var(--fw-radius) var(--fw-radius) 0;
  background: #fff;
  color: var(--fw-muted);
  line-height: 0;
}

.fw-shell__account:hover {
  border-color: #b4b4b4;
  color: var(--fw-ink);
}

/* Your own card: the fixed facts and the editable ones in one white box.
   The definition list is the company card's, stripped of its own card
   chrome here because this box already is one; the form beneath it is
   one field — the e-mail — with its button beside it. */

.fw-account {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-account__meta {
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.fw-account__form {
  display: grid;
  grid-template-columns: minmax(0, 24rem) auto;
  gap: 0.6rem;
  align-items: center;
}

.fw-account__form input {
  min-width: 0;
}

.fw-account__form button {
  justify-self: start;
}

@media (max-width: 32rem) {
  .fw-account__form { grid-template-columns: 1fr; }
}

/* Stock shop by shop, under the availability line: a short two-column
   list, the shop's name muted, the count in ink. */

.fw-prod__storestitle {
  margin: 1rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fw-muted);
}

.fw-prod__stores {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.2rem 1.5rem;
  margin: 0 0 1rem;
}

.fw-prod__stores dt {
  color: var(--fw-muted);
}

.fw-prod__stores dd {
  margin: 0;
  text-align: right;
}

/* Asking for a delivery time on a product that has none: quantity and the
   one button, on the line where "Lisa korvi" would otherwise be. */

.fw-prod__ask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.fw-prod__ask input[type="number"] {
  width: 5rem;
}

/* The delivery-time inquiry dialog: a quantity and a comment, labelled
   above their fields, the two buttons on the dialog's usual menu row. */

.fw-ask {
  width: min(28rem, calc(100vw - 2rem));
}

.fw-ask__row {
  display: block;
  margin: 0 0 0.9rem;
}

.fw-ask__row span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: var(--fw-muted);
}

.fw-ask__row input,
.fw-ask__row textarea {
  width: 100%;
}

.fw-ask__row input[type="number"] {
  width: 6rem;
}

.fw-ask__topics {
  display: flex;
  gap: 1.25rem;
  padding: 0;
  border: 0;
}

.fw-ask__topics legend {
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: var(--fw-muted);
}

.fw-ask__topics label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fw-ask__row.fw-ask__topics input {
  width: auto;
}

/* A person's address on the card: proven, or waiting on its link. */

.fw-account__pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #dba617;
  background: #fffaf0;
  font-size: 0.9rem;
}

.fw-account__pending form {
  display: inline;
}

.fw-account__hint {
  margin: 0.25rem 0 0.9rem;
  color: var(--fw-muted);
  font-size: 0.9rem;
}

/* The gate for somebody signed in with a password: two steps, in order. */

.fw-ekspress__gate-steps {
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: 28rem;
  list-style: none;
  text-align: left;
}

.fw-ekspress__gate-steps li {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.fw-ekspress__gate-steps li:last-child {
  margin-bottom: 0;
}

.fw-ekspress__gate-steps li::before {
  content: counter(step);
  counter-increment: step;
  flex: 0 0 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--fw-ink);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.6rem;
  text-align: center;
}

.fw-ekspress__gate-steps {
  counter-reset: step;
}

.fw-ekspress__gate-steps li.is-done::before {
  content: '✓';
  background: var(--fw-success);
}

.fw-ekspress__muted {
  color: var(--fw-muted);
}

.fw-account__change {
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* "Sisene" in the bar, for a visitor: the auth dialog's trigger, sized like
   the switcher pill it stands in for. */

/* The header's way in, shaped like the switcher pill: a bare text link
   beside a pill read as an afterthought. */
.fw-shell__context .fw-auth__open,
.fw-checkout__who h3 .fw-auth__open {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  background: #fff;
  color: var(--fw-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.fw-shell__context .fw-auth__open:hover,
.fw-checkout__who h3 .fw-auth__open:hover,
.fw-checkout__who h3 .fw-auth__open:focus {
  border-color: #b4b4b4;
  background: #fff;
  color: var(--fw-ink);
}

/* At checkout it follows the visitor's person-or-company picker, as a
   separate action, in the title's own case rather than its capitals. */
.fw-checkout__who h3 .fw-auth--trigger {
  margin-left: 0.5rem;
  letter-spacing: normal;
  text-transform: none;
}

/* The first field row of a checkout with no summary above it — a visitor's —
   has nothing to be separated from, so no rule on top of it. */

.fw-ekspress .fw-shop .fw-checkout__card > .woocommerce-billing-fields:first-child .form-row:first-child {
  border-top: 0;
}

/* The cart's rows are as tall as their thumbnail and quantity box; the
   header row, carrying only its small caps, sat visibly shorter above them.
   Same height, same rhythm — scoped to the cart, whose rows are the tall ones. */

.fw-ekspress__table.fw-cart th {
  height: 3.4375rem;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

/* The honeypot: present for a script, absent for a person. */

.fw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fw-ask abbr.required {
  color: #b32d2e;
  text-decoration: none;
}

/* The section's action sits at the right of its title, as on the account
   card. */
.fw-checkout__who h3 {
  display: flex;
  align-items: baseline;
}

.fw-checkout__who h3 .fw-cat__tools {
  margin-left: auto;
}

/* The header's buyer selector, at the right of the title. It opens leftwards
   so the menu stays inside the card. */
.fw-checkout__who h3 .fw-company {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.fw-checkout__who .fw-company__menu {
  right: 0;
  left: auto;
}

/* The visitor's person-or-company entries are buttons, not links. */
button.fw-company__item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fw-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}

/* The theme darkens every button on hover and focus; these keep the picker's
   own light row, as its links have. */
button.fw-company__item:hover,
button.fw-company__item:focus {
  background: #f4f5f7;
  color: var(--fw-ink);
  box-shadow: none;
  outline: none;
}

button.fw-company__item:focus-visible {
  outline: 2px solid var(--fw-ink);
  outline-offset: -2px;
}

/* Each checkout card's head spans the card edge to edge, ruled off from its
   body by a grey line, so the card reads as a head and a body. Every head is the
   same height, set by the tallest — Tellija's picker — so titles side by side
   line up, and every body starts the same distance below its head. On screen
   only: a printed card has no padding to reach across. */
@media screen {
  .fw-shop .fw-checkout__card > h3,
  .fw-shop .fw-checkout__card > .fw-checkout__who:first-child > h3,
  .fw-shop .fw-totals__card .fw-totals__title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: calc(2.6rem + 2 * 0.75rem);
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 0.75rem 1.25rem;
    border-bottom: var(--fw-border);
  }

  /* The first row under the head drops its own rule and top padding: the
     band's edge divides them, and the head's margin is the one gap. A
     visitor's form leads with its company rows, hidden when they buy as a
     person, so the first row on screen is found past them. */
  .fw-shop .fw-checkout__card > .fw-checkout__who:first-child:not(:has(.fw-who)) ~ .woocommerce-billing-fields__field-wrapper > .form-row:not([hidden]):not(.form-row:not([hidden]) ~ .form-row),
  .fw-shop .fw-checkout__card .fw-who > :is(dt, dd):first-of-type,
  .fw-shop .fw-totals__card .fw-totals > :is(dt, dd):first-of-type,
  .fw-shop .fw-order > .fw-order__table > thead th {
    border-top: 0;
    padding-top: 0;
  }

  /* The body keeps the card's padding on all four sides and nothing more:
     the last thing in a card brings no space of its own below it. */
  .fw-shop .fw-checkout__card > :last-child,
  .fw-shop .fw-checkout__card > :last-child > :last-child,
  .fw-shop .fw-checkout__card > :last-child > :last-child > :last-child,
  .fw-shop .fw-checkout__card > :last-child > :last-child > :last-child > :last-child,
  .fw-shop .fw-totals__card .fw-totals > :is(dt, dd):last-of-type {
    margin-bottom: 0;
  }

  .fw-shop .fw-totals__card .fw-totals > :is(dt, dd):last-of-type,
  .fw-ekspress .fw-shop .fw-checkout__card > :last-child .form-row:last-child {
    padding-bottom: 0;
  }

  /* !important only because the cell's own padding is declared so. */
  .fw-ekspress .fw-shop .fw-review__transport > .fw-transport__cell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* The terms line sits as far from the card's heading above as from the
     button below. It is the last row in its own block, so the trailing-space
     rule above would otherwise leave it flush on the button. */
  .fw-shop .fw-checkout__confirm .place-order > .alert {
    margin-bottom: 1rem;
  }

  .fw-shop .fw-checkout__confirm .place-order > .alert > .form-row {
    padding-top: 0;
  }

  /* Through the list's id, which its own rows are styled by. */
  .fw-shop #shipping_method > li:last-child,
  .fw-shop .fw-transport__methods > li:last-child {
    margin-bottom: 0;
  }

  /* KOKKU and its larger figure end on one line, and the figure brings no
     taller line under it than its own. Both cells keep their row's height,
     so the rule above them stays straight. */
  .fw-shop .fw-totals :is(dt, dd).fw-totals__grand {
    display: flex;
    align-items: flex-end;
    justify-content: var(--fw-grand-justify, flex-start);
    line-height: 1.2;
  }

  .fw-shop .fw-totals dd.fw-totals__grand {
    --fw-grand-justify: flex-end;
  }

  /* Tellija's picker and sign-in sit together at the right, not spread
     across the head as a title and its sum are. */
  .fw-shop .fw-checkout__card > .fw-checkout__who:first-child > h3 {
    justify-content: flex-start;
    column-gap: 0;
  }
}

/* The other way to buy, pointing up at the selector that offers it. */
.fw-buyer-note {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dcdcdc;
  border-radius: var(--fw-radius);
  background: #f4f5f7;
  color: var(--fw-ink);
  font-size: 0.95rem;
  font-weight: 500;
}

.fw-buyer-note p {
  flex: 1 1 14rem;
  margin: 0;
}

.fw-buyer-note--up {
  margin-top: 0.85rem;
}

.fw-buyer-note--up::before,
.fw-buyer-note--up::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  border: 0.55rem solid transparent;
  border-top: 0;
}

.fw-buyer-note--up::before {
  bottom: 100%;
  border-bottom-color: #dcdcdc;
}

.fw-buyer-note--up::after {
  bottom: calc(100% - 1px);
  border-bottom-color: #f4f5f7;
}

/* ── Phone and narrow tablet ─────────────────────────────────────────────
   One header row: logo, search, cart, menu button. The language picker, the
   menu and sign-in fold behind the button into a panel under the row. */
.fw-shell__menubtn { display: none; }

@media (max-width: 60rem) {
  .fw-shell__head {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 0.6rem;
  }

  .fw-shell__brand { order: 0; margin-right: auto; }
  /* An icon like the cart and the menu, not the desktop field. */
  .fw-shell__center .fw-shell__searchbtn {
    order: 1;
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
  }
  /* The cart last, at the right edge, so its panel opens flush with it. */
  .fw-shell__center .fw-shell__cartwrap { order: 3; margin-left: 0; }

  .fw-shell__menubtn {
    display: inline-flex;
    order: 2;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
  }

  /* Folded away until the button opens the panel. */
  .fw-shell__head .fw-lang,
  .fw-shell__head .fw-shell__nav,
  .fw-shell__head .fw-shell__context { display: none; }

  .fw-shell__head.is-open {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  }

  .fw-shell__head.is-open .fw-shell__nav {
    display: flex;
    order: 4;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0.6rem 0 0;
    padding-top: 0.3rem;
    border-top: 1px solid var(--fw-line, #e4e4e4);
    overflow: visible;
  }

  .fw-shell__head.is-open .fw-shell__navitem {
    min-height: 44px;
    font-size: 0.95rem;
  }

  .fw-shell__head.is-open .fw-shell__context {
    display: flex;
    order: 5;
    flex: 1 0 100%;
    padding: 0.5rem 0;
  }

  .fw-shell__head.is-open .fw-lang {
    display: block;
    order: 6;
    flex: 1 0 100%;
    padding: 0.25rem 0 0.4rem;
  }

  /* Titles at a phone's scale, not a desktop's. */
  .fw-ekspress .fw-cat__title { font-size: 1.15rem; row-gap: 0.4rem; }
  .fw-ekspress .fw-cat__title .fw-cat__count { font-size: 0.8rem; }

  /* The panel has room for the language code the bar would hide. */
  .fw-shell__head.is-open .fw-lang summary span { display: inline; }
}

/* Product rows on a phone: the picture and the name on top, then code, price
   and stock, which stay together. The order control moves to its own
   right-aligned line only when a longer label or a quantity rule leaves no
   room beside them. */
@media (max-width: 40rem) {
  .fw-ekspress .fw-prod--list,
  .fw-ekspress .fw-prod--list tbody { display: block; width: 100%; }
  .fw-ekspress .fw-prod--list thead { display: none; }

  .fw-ekspress .fw-prod--list tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--fw-line, #e4e4e4);
  }

  .fw-ekspress .fw-prod--list tbody td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .fw-ekspress .fw-prod--list tbody td.fw-prod__thumb { flex: none; width: auto; padding: 0 !important; }

  .fw-ekspress .fw-prod--list .fw-prod__thumb img { width: 3rem !important; height: 3rem !important; max-width: none; padding: 0 !important; object-fit: contain; }

  .fw-ekspress .fw-prod--list .fw-ekspress__name {
    flex: 1 0 calc(100% - 3.75rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .fw-ekspress .fw-prod--list .fw-ekspress__num { font-size: 0.85rem; }
  .fw-ekspress .fw-prod--list .fw-prod__buycol { margin-left: auto; width: auto; }
  .fw-ekspress .fw-prod--list .fw-prod__buy--row input[type="number"] { width: 2.75rem; }

  /* Without the column heading a bare number is ambiguous: "Laos 3". */
  .fw-ekspress .fw-prod--list .fw-prod__stockcol { width: auto; padding-right: 0 !important; color: var(--fw-muted, #6b6b6b); font-size: 0.85rem; }
  .fw-ekspress .fw-prod--list .fw-prod__stockcol::before { content: attr(data-label) " "; }
}

/* Tiles on a phone: two across. */
@media (max-width: 40rem) {
  .fw-ekspress .fw-prod--grid tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw-ekspress .fw-prod--grid tbody tr { padding: 0.75rem; }
}

/* Search overlay: no match is said, not shown as an empty panel. */
.fw-sug__empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--fw-muted, #6b6b6b);
}

/* The current item inside a title row is the page heading; it looks like the
   rest of the row, which sets size, weight and colour. */
.fw-ekspress .fw-cat__h {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* The overlay has its own close button; the browser's clear (×) would be a second one. */
.fw-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* Brand index: A to Z jump links, and rows a finger can hit on a phone. */
.fw-brands__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 0 1rem;
}

.fw-brands__jump a {
  min-width: 2rem;
  padding: 0.35rem 0;
  color: #111;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}

.fw-brands__jump a:hover { text-decoration: underline; }

/* Clear of the sticky phone header when a letter is jumped to. */
.fw-brands__group { scroll-margin-top: 5rem; }

@media (max-width: 40rem) {
  .fw-brands__jump a { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .fw-brands li { min-height: 2.75rem; align-items: center; padding: 0; }
  .fw-brands li a { display: flex; align-items: center; min-height: 2.75rem; flex: 1; }
}

/* Placeholder text at a readable contrast (4.5:1 on white). */
.fw-ekspress input::placeholder,
.fw-shell input::placeholder { color: #767676; }

/* Tiles line up: the order area is one height whether it holds the quantity
   and button or the "Tellimisel" word. */
.fw-ekspress .fw-prod--grid td.fw-prod__buycol {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
}

@media (max-width: 40rem) {
  /* The whole "Laos" label is the target, not the 13px box. */
  .fw-cat__stock { min-height: 2.75rem; padding-right: 0.25rem; }
}

/* Focus drawn inside the field: on a phone the content area clips anything
   that reaches past its edge, and a ring outside the field was cut off. */
.fw-ekspress input:focus-visible,
.fw-ekspress select:focus-visible,
.fw-ekspress textarea:focus-visible {
  outline: 2px solid #111;
  outline-offset: -2px;
}

/* Desktop header that fits whatever it holds. A signed-in buyer has more in
   it (orders, the company switch, account, sign-out) and company names vary,
   so portal.js measures the row and sheds detail in steps until it fits,
   least useful first; the search field and the menu icons stay longest:
   1 the Farwell logo, 2 the shortcut hint, 3 a long company name, 4 the
   search label, 5 menu icons, 6 the menu as icons only. */

.fw-company__button { white-space: nowrap; }

@media (min-width: 60.0625rem) {
  .fw-shell__head.is-fit-1 .fw-shell__site { display: none; }

  /* The field narrows with its hint gone, or hiding the hint frees nothing. */
  .fw-shell__head.is-fit-2 .fw-shell__kbd { display: none; }
  .fw-shell__head.is-fit-2 .fw-shell__center .fw-shell__searchbtn { min-width: 10rem; }

  .fw-shell__head.is-fit-3 .fw-company__button {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fw-shell__head.is-fit-4 .fw-shell__searchlabel { display: none; }
  .fw-shell__head.is-fit-4 .fw-shell__center .fw-shell__searchbtn { min-width: 0; border-color: transparent; background: none; }

  .fw-shell__head.is-fit-5 .fw-shell__navicon { display: none; }

  /* The last step: the menu as icons, its names kept for screen readers. */
  .fw-shell__head.is-fit-6 .fw-shell__navicon { display: inline; }
  .fw-shell__head.is-fit-6 .fw-shell__navitem > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Phone cart panel: the screen's width less its gutters, opening down from
   the cart at the right edge, above the sticky header's shadow. */
@media (max-width: 60rem) {
  .fw-shell__minicart {
    width: calc(100vw - 2.5rem);
    max-width: 34rem;
    z-index: 45;
  }
}

/* Compact spacing on a phone: desktop gaps waste a third of a small screen. */
@media (max-width: 40rem) {
  .fw-shell__main { padding: 1rem 1.25rem 2.5rem; }

  .fw-ekspress .fw-cat__title {
    margin-bottom: 0.75rem;
    column-gap: 0.4rem;
    row-gap: 0.5rem;
  }

  /* The product page's trail is a path, not the page's heading: one quiet
     line instead of a second title stacked over the product name. */
  .fw-ekspress div.fw-cat__title:has(+ .fw-prod__detail) {
    font-size: 0.9rem;
  }

  .fw-prod__detail {
    gap: 1rem;
    padding: 1rem;
  }

  .fw-cat__tools { row-gap: 0.5rem; }
  .fw-cat__grid { margin-bottom: 1rem; }
}

/* Small phones: the cart opens as a full layer under the header, like the
   menu and the search, rather than a box hanging off the cart icon. */
@media (max-width: 40rem) {
  .fw-shell__minicart {
    position: fixed;
    top: 4rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    overflow-y: auto;
    padding: 0.5rem 0 1.5rem;
    border-top: 1px solid var(--fw-line, #e4e4e4);
    box-shadow: none;
  }
}

/* Phone header icons: search, menu and cart in one size of box, so equal
   gaps read as equal spacing. */
@media (max-width: 60rem) {
  .fw-shell__center .fw-shell__searchbtn,
  .fw-shell__menubtn,
  .fw-shell__cart {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0;
  }

  .fw-shell__head { column-gap: 0.25rem; }
  .fw-shell__carttotal { display: none; }
}

@media (max-width: 40rem) {
  /* Zoom fills the phone: the desktop's 4rem side padding left the zoomed
     image smaller than the page's own. Room on top for the close button. */
  .fw-lightbox__stage { padding: 3.5rem 0.5rem 1rem; }

  /* Search at a phone's type size; 1.15rem stays above the 16px below which
     iOS zooms into a focused field. */
  .fw-search__bar input {
    min-height: 3.5rem;
    font-size: 1.15rem;
  }
}

/* Cart on a phone. The table's desktop columns made it 477px wide on a 375px
   screen, which stretched the form and the totals beside it past the edge.
   Each line becomes a small card: name and remove, the code, then price,
   quantity and the line total. */
@media (max-width: 40rem) {
  .fw-ekspress .woocommerce-cart-form,
  .fw-ekspress .fw-cart__collaterals,
  .fw-ekspress .fw-cart__summary {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .fw-ekspress table.fw-cart,
  .fw-ekspress table.fw-cart tbody { display: block; width: 100%; }
  .fw-ekspress table.fw-cart thead { display: none; }

  .fw-ekspress table.fw-cart tr.cart_item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "name name name remove"
      "code code code code"
      "price qty total total";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--fw-line, #e4e4e4);
  }

  .fw-ekspress table.fw-cart tr.cart_item td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .fw-ekspress table.fw-cart tr.cart_item td.fw-prod__thumb { display: none; }
  .fw-ekspress table.fw-cart .fw-ekspress__name { grid-area: name; }
  .fw-ekspress table.fw-cart .fw-ekspress__num { grid-area: code; font-size: 0.85rem; }
  .fw-ekspress table.fw-cart td.fw-prod__pricecol:not(.fw-cart__linetotal) { grid-area: price; }
  .fw-ekspress table.fw-cart .fw-cart__qtycol { grid-area: qty; }
  .fw-ekspress table.fw-cart .fw-cart__linetotal { grid-area: total; justify-self: end; font-weight: 500; }
  .fw-ekspress table.fw-cart .fw-cart__removecol { grid-area: remove; justify-self: end; }
  .fw-ekspress table.fw-cart .fw-cart__qtycol input { width: 3.5rem; }

  .fw-ekspress table.fw-cart tr:not(.cart_item) { display: block; padding: 0.75rem 1rem; }
  .fw-ekspress table.fw-cart tr:not(.cart_item) td { display: block; padding: 0; border: 0; }
}

/* The menu button in the middle of the phone header, between the logo and
   the search and cart on the right. The header is sticky, so it anchors it. */
@media (max-width: 60rem) {
  .fw-shell__menubtn {
    position: absolute;
    top: calc(0.6rem + 24px);
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* With the menu lifted out of the row, search and cart close up. */
  .fw-shell__center .fw-shell__searchbtn { margin-left: auto; }
}

/* Checkout on a phone. The one-column grid sized itself to its widest
   content (the order table), which pushed every card past the screen edge;
   minmax(0, 1fr) holds the column to the screen and lets content wrap. */
@media (max-width: 63.9375rem) {
  .fw-checkout__layout { grid-template-columns: minmax(0, 1fr); }

  .fw-checkout__main,
  .fw-checkout__aside,
  .fw-checkout__card { min-width: 0; }
}

@media (max-width: 40rem) {
  /* Label above a full-width field, not squeezed beside it. */
  .fw-ekspress .fw-shop .fw-checkout__card .form-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.3rem;
  }

  .fw-ekspress .fw-shop .fw-checkout__card .form-row label {
    padding: 0;
  }

  /* A card title with its action beside it ("Tellija" and "Muuda") wraps
     rather than pushing the action off the card. */
  .fw-checkout__who h3,
  .fw-order h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
  }

  /* Order lines as two-line rows: the name, then code, quantity and sum. */
  .fw-order__table,
  .fw-order__table tbody { display: block; width: 100%; }
  .fw-order__table thead { display: none; }

  .fw-order__table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--fw-line, #e4e4e4);
  }

  .fw-order__table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .fw-order__table .fw-ekspress__name { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
  .fw-order__table .fw-ekspress__num { font-size: 0.85rem; }
  .fw-order__table .fw-order__qty::before { content: "× "; color: var(--fw-muted, #6b6b6b); }
  .fw-order__table .fw-prod__pricecol { margin-left: auto; }
}

/* Phone: the field goes under its label. The desktop rules pin it to column 2
   of row 1, which recreated a second column whatever the row's own template
   said; Märkused gets its own full-width row this way too. */
@media (max-width: 40rem) {
  .fw-ekspress .fw-shop .fw-checkout__card .form-row > .woocommerce-input-wrapper,
  .fw-ekspress .fw-shop .fw-checkout__card .form-row > input,
  .fw-ekspress .fw-shop .fw-checkout__card .form-row > select,
  .fw-ekspress .fw-shop .fw-checkout__card .form-row > textarea {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Stacked on a phone, label over value: one rule per entry, above the label.
   The value's own rule (needed when the two sit side by side) would otherwise
   fall between the label and the value. */
@media (max-width: 34rem) {
  .fw-checkout__who dd {
    padding-top: 0;
    border-top: 0;
  }
}

/* Delivery and payment options. A long label wraps beside its radio instead of
   dropping under it (a flex basis of auto first tries the whole text on one
   line). The panel under a chosen option, with the phone field in it, may
   shrink to the box: its minimum came from the number input's natural width,
   which pushed the field and the divider past the border on a phone. */
.fw-ekspress .fw-shop #shipping_method li label,
.fw-ekspress .fw-shop ul.payment_methods > li label {
  flex: 1 1 0;
  min-width: 0;
}

.fw-ekspress .fw-shop .fw-transport__sub,
.fw-ekspress .fw-shop .fw-phone {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* The radio on the label's first line when the label wraps. */
.fw-ekspress .fw-shop #shipping_method li,
.fw-ekspress .fw-shop ul.payment_methods > li { align-items: flex-start; }

.fw-ekspress .fw-shop #shipping_method li > input,
.fw-ekspress .fw-shop ul.payment_methods > li > input { margin-top: 0.3em; }

/* Sticky header on a phone: frosted, the page blurred as it scrolls under.
   The blur sits on a layer behind the header's contents, not on the header:
   backdrop-filter on the header would make it the box that its fixed-position
   children (the cart layer) are placed in. Solid while the menu is open. */
@media (max-width: 60rem) {
  .fw-shell__head { background: transparent; }

  .fw-shell__head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }

  .fw-shell__head.is-open::before { background: #fff; }
}

/* Pickup points: a long name wraps inside the option's padding rather than
   running to the edge and being cut off (the options are buttons, and a
   button keeps its text on one line). */
.fw-pickup__opt,
.fw-ekspress .fw-shop #shipping_method .fw-pickup__opt {
  white-space: normal;
  overflow-wrap: anywhere;
}

.fw-pickup__name { display: block; }

/* MakeCommerce's bank logos on a phone: an even two-column grid across the
   payment box, not 84px tiles indented under the radio. */
@media (max-width: 40rem) {
  .fw-ekspress .fw-shop .payment_box.payment_method_makecommerce { padding-left: 0; padding-right: 0; }

  .fw-ekspress .fw-shop .makecommerce_country_picker_methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .fw-ekspress .fw-shop .makecommerce_country_picker_methods > * {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .fw-ekspress .fw-shop .makecommerce_country_picker_methods img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 60rem) {
  /* In the phone menu panel the company control sits at the left, so its
     list opens from the left and stays inside the screen. */
  .fw-shell__context .fw-company__menu {
    left: 0;
    right: auto;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2.5rem);
  }
}

@media (max-width: 40rem) {
  /* MakeCommerce sizes each tile at half its cell, 92px at most; in our grid
     the tile fills its cell instead. */
  .fw-ekspress .fw-shop .makecommerce_country_picker_methods .makecommerce-banklink-picker {
    width: auto;
    max-width: none;
  }

  .fw-ekspress .fw-shop .makecommerce_country_picker_methods { max-width: none; }
  .fw-ekspress .fw-shop .makecommerce_country_picker_methods .breaker { display: none; }
}

/* The language picker is a control, not the current page: grey like the menu
   items beside it, darker on hover. */
.fw-shell__head .fw-lang summary { color: var(--fw-muted, #6b6b6b); }
.fw-shell__head .fw-lang summary:hover,
.fw-shell__head .fw-lang[open] summary { color: var(--fw-ink, #111); }

/* Return or complaint: the order list to pick from, then the order's lines,
   the reason and the wanted solution; the bank account only for a refund. */

.fw-return__note {
  margin: 0 0 1.5rem;
  color: var(--fw-muted);
}

.fw-return__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.1rem;
}

.fw-return__head .fw-crumb {
  margin: 0;
}

.fw-return__picker {
  max-width: 40rem;
}

.fw-return__orders {
  max-height: 24rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: var(--fw-border);
  border-radius: var(--fw-radius);
  background: #fff;
}

.fw-return__orders li + li {
  border-top: var(--fw-border);
}

.fw-return__orders a {
  display: block;
  padding: 0.6rem 0.8rem;
  color: inherit;
  text-decoration: none;
}

.fw-return__orders a:hover,
.fw-return__orders a:focus-visible {
  background: #f5f5f5;
}

.fw-return__orders span {
  display: block;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--fw-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fw-return__picked {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.fw-return {
  max-width: 40rem;
}

.fw-return .fw-ekspress__card {
  margin: 0 0 1.25rem;
}

.fw-return__line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.fw-return__line small {
  color: var(--fw-muted);
}

.fw-return__lines input[type="number"] {
  width: 4.5rem;
}

.fw-return input[type="file"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cfcfcf;
  border-radius: var(--fw-radius);
  background: #fff;
  font: inherit;
}

.fw-return__choices {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}

.fw-return__choices legend {
  margin-bottom: 0.3rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--fw-muted);
}

@media (min-width: 640px) {
  .fw-return__choices--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }

  .fw-return__choices--two legend {
    grid-column: 1 / -1;
  }
}

.fw-return__choice {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.fw-return__lines input[type="number"]:disabled {
  color: var(--fw-muted);
  border-color: var(--fw-line);
  background: #fff;
}

/* The order's notes for the customer: their requests and the shop's answers. */

.fw-return__history {
  margin: 2rem 0 0;
}

.fw-return__history > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-return__history > ol > li {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--fw-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 18px rgb(0 0 0 / 0.05);
}

.fw-return__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--fw-muted);
}

.fw-return__title {
  display: inline-block;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--fw-radius);
  background: var(--fw-ink, #111);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.fw-return__title--claim {
  background: #e1001a;
}

.fw-return__products {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.fw-return__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.fw-return__facts dt {
  color: var(--fw-muted);
}

.fw-return__facts dd {
  margin: 0;
}

@media (max-width: 639px) {
  .fw-return__facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fw-return__facts dd {
    margin-bottom: 0.5rem;
  }
}

.fw-return__text p {
  margin: 0 0 0.4rem;
}

.fw-return__text p:last-child {
  margin: 0;
}

.fw-orders__requests {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: var(--fw-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--fw-muted);
  text-decoration: none;
  vertical-align: middle;
}

.fw-orders__requests:hover {
  color: var(--fw-ink);
  border-color: currentColor;
}

.fw-return__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fw-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.fw-ekspress button.fw-hint__button,
.fw-ekspress button.fw-hint__button:hover,
.fw-ekspress button.fw-hint__button:focus-visible {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-color: var(--fw-line);
  background: transparent;
  color: var(--fw-muted);
  cursor: help;
}

.fw-hint__icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.fw-hint__text {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 16rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--fw-radius);
  background: var(--fw-ink, #111);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}

.fw-hint__button:hover + .fw-hint__text,
.fw-hint__button:focus + .fw-hint__text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 639px) {
  .fw-hint__text {
    right: auto;
    left: 0;
  }
}

.fw-return__group .fw-return__title {
  margin: 0.3rem 0 0.4rem;
}

@media (max-width: 639px) {
  .fw-return__group + .fw-return__group {
    margin-top: 0.75rem;
  }
}

.fw-return:not(:has(input[name="reason"]:checked)) .fw-return__solution {
  display: none;
}

.fw-ask__row .fw-return__photo-hint {
  display: none;
  margin: 0;
}

.fw-return:has(label[data-fw-return-kind="fault"] input:checked) .fw-ask__row .fw-return__photo-hint {
  display: inline;
}

.fw-return__hint {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.8rem;
  color: var(--fw-muted);
}

.fw-return__sent {
  max-width: 40rem;
  padding: 1.25rem;
}

.fw-return__sent p {
  margin: 0 0 1rem;
}

.fw-return__sent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fw-crumb h1.fw-crumb__current {
  margin: 0;
  font: inherit;
}

/* Required fields: a red star, the conditional ones only once they apply; and
   red where something is missing after "Saada". */

.fw-return abbr.required {
  border: 0;
  color: #e1001a;
  text-decoration: none;
}

.fw-return .fw-return__desc-star,
.fw-return .fw-return__photo-star {
  display: none;
}

.fw-return:has(label[data-fw-return-kind="fault"] input:checked) .fw-return__photo-star {
  display: inline;
}

.fw-return:has(input[name="reason"][value="other"]:checked) .fw-return__desc-star {
  display: inline;
}

.fw-return--tried textarea:invalid,
.fw-return--tried input[type="text"]:invalid,
.fw-return--tried input[type="file"]:invalid {
  border-color: #e1001a;
  box-shadow: 0 0 0 1px #e1001a;
}

.fw-return--tried fieldset:has(input:invalid) legend,
.fw-return--tried .fw-ask__row:has(:invalid) > span {
  color: #e1001a;
}

.fw-return--noline .fw-return__card {
  box-shadow: 0 0 0 2px #e1001a;
}

.fw-return__iban {
  display: none;
}

.fw-return:has(input[name="solution"][value="refund"]:checked) .fw-return__iban {
  display: block;
}

/* The shop's campaign popup: the theme's content, in a native dialog. */
.fw-campaign {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: min(800px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--fw-radius);
  overflow: auto;
}
.fw-campaign::backdrop { background: rgba(0, 0, 0, 0.5); }
.fw-campaign img { display: block; max-width: 100%; height: auto; }
.fw-campaign p { margin: 0; }
.fw-campaign__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Seaded → Inforibad, under the header. */
.fw-infobar {
  margin: 0;
  padding: 0.5rem 16px;
  background: var(--fw-ink);
  color: #fff;
  text-align: center;
}

/* A link in the message, white like the rest of it. */
.fw-infobar a {
  color: inherit;
}

/* The box as far from its sentence as a radio is from its label; the
   asterisk stays a word's space from the sentence it marks. */
.fw-ekspress .fw-shop .fw-checkout__card .form-row.validate-required:has(input[type="checkbox"]) label > input[type="checkbox"] {
  margin-right: var(--fw-gap);
}

.fw-ekspress .fw-shop .fw-checkout__card .form-row.validate-required:has(input[type="checkbox"]) label > .required {
  margin-left: 0.25em;
}