/* main — every page's styles, in this order: tokens, base, composition, elements, the frame's own, the
   header, the footer. One file for the folder; each part its own block. */

/* ==== tokens ==== */

/* tokens — the design's values as variables: colours, fonts, radii, and the space scale density moves.
   Everything else reads these; nothing below defines a colour of its own. */

:root {
  /* the palette and fonts come from the design (printed by the layout) — listed here for reference */
  /* --bg --surface --ink --muted --line --tint --primary --primary-ink --mark --accent */
  /* --font-display --font-body --radius --radius-small */

  /* The space between bands. Density changes this one value; every section reads it. */
  --section-pad: clamp(3.8rem, 8vw, 6.5rem);
  --head-gap: 2.6rem;
  --grid-gap: 1.5rem;
  --card-gap: 1rem;
}

.density-compact { --section-pad: clamp(2.4rem, 5vw, 4rem); --head-gap: 1.8rem; --grid-gap: 1rem; }
.density-airy    { --section-pad: clamp(5rem, 11vw, 9rem);  --head-gap: 3.4rem; --grid-gap: 2rem; }

/* ==== base ==== */

/* base — the document: the derived tones, reset, body, type, links, images, the .container. */

:root, .section {
  /* What is mixed from the ground and the ink is mixed again in every band: a band's palette sets its own
     --bg / --ink / --primary, and a value mixed once at the root kept the page's — the lead of a contrast band
     was the page's grey on its dark ground. */
  /* Derived tones — computed from the injected tokens so a palette swap
     keeps every tint in step automatically. */
  --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--bg));
  /* --shade, the colour of every shadow, is the layout's (Support\Palette):
     the palette's ink on a light ground, black on a dark one — never the TEXT
     colour of a dark palette, which would make every card glow. Not set here:
     this stylesheet comes after the layout's <style> and would override it. */
  /* Hover must be visible on EVERY palette, so it moves toward --ink: the one
     colour guaranteed to contrast with the background, because that is what
     --ink is for. Deriving hover from --primary looked fine on light themes
     and vanished on dark-brand ones — a black shadow on a black page, a 10%
     black tint on a near-black background. Reported live: buttons and the
     language switcher had no visible hover at all. */
  --hover-lift: color-mix(in srgb, var(--primary) 82%, var(--lift-to, var(--ink))); /* away from the button's label (Support\Palette: --lift-to) */
  --hover-wash: color-mix(in srgb, var(--bg) 88%, var(--ink));
  --tint: color-mix(in srgb, var(--primary) 5%, var(--bg));
  --body-text: color-mix(in srgb, var(--ink) 80%, var(--bg));
  /* A card's outline: the line, halfway into the ground — a box is drawn softer than a field or a rule. */
  --card-line: color-mix(in srgb, var(--line) 55%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg));
  /* Errors: the layout's readable version of the renderer's red (readable on
     the design's surface), the red itself where a design's own layout does
     not give one; its soft ground mixed into the surface, not a pale patch
     on a dark site. The state tones the same way. */
  --danger: var(--danger-readable, #b3423f);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface, #fff));
  --success-soft: color-mix(in srgb, var(--success, #1f7a45) 12%, var(--surface, #fff));
  --warning-soft: color-mix(in srgb, var(--warning, #9a5800) 12%, var(--surface, #fff));
  /* The band of a chosen range of dates: the ink, faint, on the surface — readable on a light and a dark site alike. */
  --range: color-mix(in srgb, var(--ink) 14%, var(--surface, #fff));
}

:root { --container: 1140px; }

* { box-sizing: border-box; }

/* `hidden` hides, whatever display a class gives the element: a script shows and hides a notice, a step, a
   panel by the attribute alone, and one rule here instead of one per class that sets display. */
[hidden] { display: none !important; }

/* Type scale the multiplier belongs on the ROOT, not
   on body. Headings and most text are sized in rem — and rem resolves against
   <html> — so a body-level scale moved almost nothing (found live: "Text size"
   looked broken). 16px is the browser default this renderer was drawn against. */
html {
  scroll-behavior: smooth;
  font-size: calc(16px * var(--font-scale, 1));
  /* The root stands on the page's ground too, not only <body>: whatever
     the browser shows of the root between two pages is the site's colour,
     never its own white canvas. */
  background: var(--bg);
  /* The window's scrollbar in the site's colours: a thin thumb of the ink, faint, on the ground — the browser's own
     light bar stood beside a dark site like a strip of another page. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) var(--bg);
}

/* Keyboard focus is seen on every palette: a ring in the link colour, which
   holds 4.5 on the page. Zero specificity (:where) — whatever draws a focus of
   its own (a field's border, the header's pills) keeps it. A field in focus
   rings its border with a 1px line of the same colour; the soft primary ring
   it had stood at 1.05–1.34 on the surface, which is no ring at all. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

/* The page's frame: the main part takes what the header and the footer leave,
   so a short page (an error, an empty list) keeps its footer at the bottom. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 1.03rem; /* 16.5px at scale 1 — now inherits the root scale */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
body > main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

/* A page's title sits tight on its lines and close to the line under it — two
   loose lines of a big title read as two headings. */
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.04; margin-bottom: .28em; }
/* Section headings at ~3x the body, not 2.4x. Measured against the reference
   set: the timid step between body and heading is what reads as "safe", and
   safe reads as generated. h1 was already at 3.5x — these were the ones
   lagging behind it, and there are ten of them per page to h1's one. */
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* A container inside a container is the same column, not a narrower one: a part that brings its own (the
   category chips, a band) does not indent twice. */
.container .container { padding-inline: 0; }

.lead {
  font-size: 1.16rem;
  color: var(--body-text);
  max-width: 620px;
  margin: 0 0 2rem; /* away from what follows it — a form's first field sat on it */
}

.kicker, .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .76rem;
  font-weight: 600;
  color: var(--mark, var(--primary));
  margin-bottom: 1rem;
}

/* ==== composition ==== */

/* composition — how a page's bands stand: their colours, their space, their width, and the space between
   two of them. The ONLY place that decides it. The section tag prints what this reads:

     <section class="section home-story palette-tint width-standard space-normal">
       <div class="container">…</div>          (no container when the width is full)
     </section>

   No rule here names a component or a page. A section's own class (`home-story`) is for a design's CSS. */

/* ---------- colours ----------
   A palette is a set of the design's tokens under a class: `.palette-tint { --bg: …; --ink: …; --mark: … }`.
   The layout prints every palette the design has (tint and contrast derived from its tokens unless it says
   its own), and after them a section's own tokens (`.home-story { --mark: … }`). Everything inside the band
   reads the variables, so a component never knows which palette it stands on. */
.section { background: var(--bg); color: var(--ink); }

/* ---------- the band's own space ---------- */
.section               { --space: var(--section-pad); padding-block: var(--space); }
.section.space-compact { --space: calc(var(--section-pad) * .5); }
.section.space-large   { --space: calc(var(--section-pad) * 1.4); }

/* ---------- width ---------- */
.section.width-narrow > .container { --container: 760px; }
.section.width-full                { padding-inline: 0; }

/* ---------- between two bands ----------
   Nothing: two bands meet at their edges whatever their colours, and the space between their contents is the
   first one's space under it and the second one's over it — what the drawer's «Space» says, and nothing else.
   A colour changes the colours only: space that moved with the colour is space nobody can predict. */

/* ==== elements ==== */

/* elements — what many pages and components share: buttons, the eyebrow, section heads, chips, the text of
   a record, forms and their fields, the empty state, and the layout knobs as the variables they set. What one
   page alone uses lives in that page's folder; what one component uses, in the component's. */

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-block;
  padding: .95rem 2.1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid var(--mark, var(--primary));
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover { transform: translateY(-2px); background: var(--hover-lift); box-shadow: 0 10px 24px -14px var(--shade); }

.btn-ghost { background: transparent; color: var(--mark, var(--primary)); }
/* The wash is the ink's own, see-through: under the words whatever the ground — a contrast band, a photo behind the
   words (a wash mixed from the page's ground was a pale patch under white words there). */
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: var(--ink); color: var(--ink); box-shadow: none; }

.btn-small { padding: .55rem 1.3rem; font-size: .85rem; }

.link-arrow {
  font-weight: 600;
  color: var(--mark, var(--primary));
  white-space: nowrap;
}
.link-arrow::after { content: ' →'; transition: margin .2s ease; }
.link-arrow:hover::after { margin-left: 4px; }

/* A link back («‹ Products»): its arrow leads — before the text, and to the left. */

.link-back:hover { color: var(--mark, var(--primary)); }

/* The page's headings (body.headings-center) reach it as variables: --head-direction, --head-align,
   --head-text (none: inherited) and --head-lead-margin. */
.section-head {
  display: flex;
  flex-direction: var(--head-direction, row);
  align-items: var(--head-align, end);
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: var(--head-gap, 2.6rem);
  text-align: var(--head-text);
}
.section-head .lead { margin-inline: var(--head-lead-margin, 0); }
.section-head h2 { margin-bottom: 0; }

/* The head of a page: the site's name, the title, a line — close under the header, as the shop's
   first had it: a tall empty band above every title pushed what the page is about below the fold. */
.page-head {
  padding: clamp(2rem, 4vw, 2.6rem) 0 0;
}
.page-head h1 { max-width: 720px; }
.page-head .lead { margin-bottom: 0; }
/* A page that is ONLY its head — an about page whose optional blocks had no
   text — would otherwise end its lead flush against the footer. */
main > .page-head:last-child { padding-bottom: clamp(3.8rem, 8vw, 6.5rem); }

/* ---------- Category chips ---------- */

.chip {
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 500;
  color: var(--body-text);
  transition: all .2s ease;
}
.chip:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
/* Selected: the text colour inverted — not the brand fill. A row of chips in
   the brand colour on a dark design with a yellow brand read as a warning
   sign; the brand stays for the one primary action of a view. */
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.is-active .chip-count { opacity: .7; }

/* ---------- Content pages: the body of a list of questions, photos, reasons, reviews, entries ---------- */
.cp { padding-top: 1.6rem; }
.cp :target, .cp .is-marked { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }

/* ---------- Article ---------- */
.article { padding: clamp(3rem, 6vw, 5rem) 0; }

/* The block editor's text, on every record page (product, service, news,
   page…). A measure of ~68 characters, quiet headings in the display face,
   the brand colour only where the page writes IN it (links, list marks). */
.prose { color: var(--body-text); max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose h2, .prose h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-wrap: balance; }
.prose h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose ul li::marker { color: var(--mark, var(--primary)); }
.prose ol li::marker { color: var(--muted); font-weight: 600; }
.prose strong { color: var(--ink); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose a { color: var(--mark, var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose blockquote {
  position: relative;
  margin: 1.8rem 0;
  padding: .2rem 0 .2rem 2.2rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
/* The quote mark is garnish — `accent`, the one place it is allowed. */
.prose blockquote::before {
  content: '“';
  position: absolute; left: 0; top: -.35rem;
  font-size: 2.8rem; line-height: 1;
  color: var(--accent);
}

/* ---------- Columns ----------
   Two components side by side on a page — the contacts beside the form —
   one under the other on a phone. A component in a column is part of the
   page's section, so it brings no spacing of its own. */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.cols--narrow-first { grid-template-columns: .8fr 1.2fr; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.field-error { min-height: 1.1rem; font-size: .82rem; color: var(--danger); margin-bottom: .6rem; }

.form-error {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-small);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.form-success { background: var(--primary-soft); color: var(--mark, var(--primary)); }
.form-error { background: var(--danger-soft); color: var(--danger); }

/* ---------- Layout knobs ----------
   Body classes rendered from design.yml `layout:` — see layout/main.twig.
   Every rule keys on tokens, so palettes keep working under any frame. */

/* width: wide — the container token cascades from body */
body.width-wide { --container: 1320px; }

/* header: solid — opaque, in-flow (no sticky, no blur) */

/* ---------- Density ----------
   A knob of the page, a class on <body>. Section rhythm and card spacing
   change together — the same blocks in a tighter or airier grid read as a
   different site, which is the cheapest variety there is. It sets variables
   only; the sections, grids and cards read them, and a look of a component
   that fixes its own gap (a list, a stack: gap 0) keeps it. */
body.density-compact { --section-pad: clamp(2.4rem, 5vw, 4rem); --head-gap: 1.7rem; --grid-gap: .9rem; --card-gap: .9rem; }
body.density-airy { --section-pad: clamp(5rem, 11vw, 9rem); --head-gap: 3.6rem; --grid-gap: 2rem; --card-gap: 2rem; }

/* --- native form controls ------------------------------------------------
   Everything else in a booking box is themed — the date input, the slot
   chips, the textarea, the button — and then the master picker rendered as
   a raw operating-system dropdown in the middle of it. Blue system highlight,
   system font, square corners, next to 24px-radius cards.

   `select` was simply never styled here, and neither were checkboxes,
   radios or file inputs: a design styles what its own pages happen to use,
   and a control that arrives with a feature (bookings, in this case) slips
   through. So this block covers the native set once, from the tokens.

   The arrow needs a wrapper because a `select` cannot carry ::after and a
   background-image would hard-code its colour outside the token system. */
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
  content: '';
  position: absolute; right: .85rem; top: 50%;
  width: .45rem; height: .45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select,
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding: .85rem 2.4rem .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: normal;
  cursor: pointer;
}
/* The select drawn by main.js where there is a mouse (the browser's own
   list cannot be styled): the button looks as the select did, the list is
   the site's. The real select stays under it, unseen, and holds the value. */
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.select-btn {
  display: block; width: 100%;
  padding: .85rem 2.4rem .85rem 1rem; /* as tall as the inputs beside it (48px) */
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: normal;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s ease;
}
.select-btn:hover:not(:disabled), .select-wrap.is-open .select-btn { border-color: var(--mark, var(--primary)); }
.select-btn:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.select-btn:disabled { opacity: .5; cursor: default; }
.select-wrap.is-open::after { transform: translateY(-20%) rotate(225deg); }
.select-list {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  min-width: 100%; max-height: 280px; overflow-y: auto;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  box-shadow: 0 14px 34px rgb(0 0 0 / .32);
}
.select-wrap.is-up .select-list { top: auto; bottom: calc(100% + 6px); }
.select-option {
  padding: .55rem .8rem;
  border-radius: calc(var(--radius-small) * .7);
  color: var(--ink); font-size: .95rem; white-space: nowrap;
  cursor: pointer;
}
.select-option.is-active { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.select-option.is-selected { color: var(--mark, var(--primary)); font-weight: 600; }
.select-option[aria-disabled='true'] { opacity: .45; cursor: default; }

select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mark, var(--primary));
  outline-offset: 2px;
  border-color: var(--mark, var(--primary));
}

/* Every textarea: room for a few lines before a scrollbar. A two-row box
   flattened to one line in some layouts and scrolled at the first word; the
   visitor can still drag it taller. */
textarea { min-height: 6.5rem; line-height: 1.5; resize: vertical; }

/* Radio: drawn from the tokens like the checkbox — the native one stayed a
   white system disc on a dark site (the checkout's ways to receive and pay).
   An empty ring in `muted`; chosen, the ring and a dot in `mark`, the colour
   the page writes in. Still the real input: arrows, label click, the value. */
input[type='radio'] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; margin: 0;
  width: 1.15rem; height: 1.15rem;
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--muted); /* not `line`: on a dark design that ring was all but gone */
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease;
}
input[type='radio']::before {
  content: '';
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--mark, var(--primary));
  transform: scale(0);
  transition: transform .12s ease;
}
input[type='radio']:hover { border-color: var(--mark, var(--primary)); }
input[type='radio']:checked { border-color: var(--mark, var(--primary)); }
input[type='radio']:checked::before { transform: scale(1); }
input[type='radio']:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
input[type='radio']:disabled { opacity: .45; cursor: default; }

/* Checkbox: drawn from the tokens — the native one stayed a white system box
   on a dark site («Remember me»). Still the real input: keyboard, label
   click and form value are the browser's. */
input[type='checkbox'] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; margin: 0;
  width: 1.15rem; height: 1.15rem;
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--muted); /* not `line`: on a dark design the box was all but gone */
  border-radius: calc(var(--radius-small) * .5);
  background: var(--surface);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input[type='checkbox']::before {
  content: '';
  width: .62rem; height: .62rem;
  background: var(--primary-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform .12s ease;
}
input[type='checkbox']:hover { border-color: var(--mark, var(--primary)); }
input[type='checkbox']:checked { background: var(--primary); border-color: var(--primary); }
input[type='checkbox']:checked::before { transform: scale(1); }
input[type='checkbox']:disabled { opacity: .45; cursor: default; }

/* The browser's autofill (a saved email and password) painted the field its
   own pale blue with black text on a dark site. Kept the site's colours: the
   background as an inset shadow — the only property autofill lets through. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease-out 0s;
}
input:autofill { box-shadow: 0 0 0 1000px var(--surface) inset; color: var(--ink); }

input[type='file'] { font-family: var(--font-body); font-size: .95rem; color: var(--ink); }

/* Depth, three levels, in the shadow's colour (--shade: the palette's ink, or
   black on a dark ground). On a dark ground a shadow barely shows, so a raised
   thing there is a line, a light edge on top and a lighter surface.
   On a light ground a shadow stays inside the gap between two rows of cards
   (~1rem): it reached 40px below a card and laid itself over the next row's
   top, the rows reading as one grey block. */
:root {
  --elev-1: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--shade) 9%, transparent);
  --elev-2: 0 1px 3px color-mix(in srgb, var(--shade) 7%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--shade) 16%, transparent);
  --elev-3: 0 2px 6px color-mix(in srgb, var(--shade) 8%, transparent), 0 14px 26px -12px color-mix(in srgb, var(--shade) 24%, transparent);
  --edge: 0 0 #0000;
  --surface-raised: var(--surface);
}
:root[data-scheme="dark"] {
  --elev-1: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px -2px rgb(0 0 0 / .45);
  --elev-2: 0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -10px rgb(0 0 0 / .65);
  --elev-3: 0 4px 10px rgb(0 0 0 / .4), 0 28px 56px -16px rgb(0 0 0 / .75);
  --edge: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --surface-raised: color-mix(in srgb, var(--ink) 5%, var(--surface));
}
/* cards: outline (stock) | soft | shadow | flat. soft: a faint line and the
   first level, the second on hover; shadow: no line, the second level, the
   third on hover. On a dark ground both keep the line and add the light edge. */
body.cards-soft {
  --card-border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  --card-shadow: var(--elev-1);
  --card-hover-line: var(--line);
  --card-hover-shadow: var(--elev-2);
}
body.cards-shadow {
  --card-border: 1px solid transparent;
  --card-shadow: var(--elev-2);
  --card-hover-line: transparent;
  --card-hover-shadow: var(--elev-3);
}
:root[data-scheme="dark"] body.cards-soft {
  --card-border: 1px solid var(--line);
  --card-shadow: var(--elev-1), var(--edge);
  --card-hover-shadow: var(--elev-2), var(--edge);
}
:root[data-scheme="dark"] body.cards-shadow {
  --card-border: 1px solid var(--line);
  --card-shadow: var(--elev-2), var(--edge);
  --card-hover-line: var(--line);
  --card-hover-shadow: var(--elev-3), var(--edge);
}
body.cards-flat { --card-border: 0; --card-bg: var(--primary-soft); }
/* On a dark ground the line is already quiet: a card keeps it whole. */
:root[data-scheme="dark"], :root[data-scheme="dark"] .section { --card-line: var(--line); }
/* headings: centred section heads — variables .section-head reads */
body.headings-center { --head-direction: column; --head-align: center; --head-text: center; --head-lead-margin: auto; }

/* The owner's own picture as the logo (site('logo')): the header and the footer size it in their places. */
.brand__mark :is(img, svg) { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Decor: one quiet motif of the design's (layout.decor → body.decor-*), drawn
   only where a component keeps a place for it (<span class="decor">) and the
   motif names that place — two places a page at most, a corner fading out,
   under nothing anybody reads. The motif is a mask in the colour of the words
   around it (currentColor), so it sits on a light ground, a dark one and the
   brand band alike; how strong is the motif's own, per scheme.
   --------------------------------------------------------------------------- */
.decor { display: none; }
/* Contour lines: a landscape's — on the figures (the reasons, when there are none: they are rarer than reasons). Not
   the footer: its contacts stand in the corner the lines would take. */
.decor-topo {
  --decor-mask: url('decor-topo.svg');
  --decor-size: 620px 620px;
  --decor-alpha: .11;
  --decor-stats: block;
}
.decor-topo:not(:has(.stats)) { --decor-features: block; }
[data-scheme='dark'] .decor-topo { --decor-alpha: .14; }
/* Dots: a playful grid — on the call to action's band and the steps (the reasons, when there are no steps). */
.decor-dots {
  --decor-mask: radial-gradient(circle, #000 1.7px, transparent 2.2px);
  --decor-size: 22px 22px;
  --decor-alpha: .3;
  --decor-cta: block;
  --decor-steps: block;
}
.decor-dots:not(:has(.steps)) { --decor-features: block; }
[data-scheme='dark'] .decor-dots { --decor-alpha: .22; }
/* On the brand band the dots are the band's ink: a little goes a long way. */
.decor-dots .cta--band { --decor-alpha: .18; }

.decor {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(48%, 620px);
  height: 100%;
  pointer-events: none;
  background: currentColor;
  opacity: var(--decor-alpha, .1);
  -webkit-mask-image: var(--decor-mask), radial-gradient(ellipse at 100% 0, #000 0%, transparent 72%);
  -webkit-mask-size: var(--decor-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  -webkit-mask-position: 100% 0, 0 0;
  -webkit-mask-composite: source-in;
  mask-image: var(--decor-mask), radial-gradient(ellipse at 100% 0, #000 0%, transparent 72%);
  mask-size: var(--decor-size), 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-position: 100% 0, 0 0;
  mask-composite: intersect;
}
.stats > .decor { display: var(--decor-stats, none); }
.steps > .decor { display: var(--decor-steps, none); }
.features > .decor { display: var(--decor-features, none); }
.cta > .decor { display: var(--decor-cta, none); }
/* The band it stands in is its frame — a component inside a section takes the section's corner, not the text
   column's (nothing between them is positioned) — and its own layer, the motif under everything in it. */
body:not(.decor-none) .section:has(> .container > * > .decor), body:not(.decor-none) .cta:has(> .decor) { position: relative; overflow: hidden; isolation: isolate; }
/* Not over a photograph, and not on a call to action with no band. */
.cta--photo:has(.cta-backdrop) > .decor, .cta--plain > .decor { display: none; }
/* A phone's column of words is the whole width: no free corner left — the motif would lie under the heading. */
@media (max-width: 720px) {
  .decor { display: none !important; }
}

/* ---------- Cards: the card frame and the reasons' card, shared by several components ---------- */
/* ---------- Feature cards (the features and steps components) ---------- */
.features-grid { display: grid; gap: var(--grid-gap, 1.4rem); }

/* Its columns are a class on the component's root (features, steps). */
.features--columns-2 .features-grid, .steps--columns-2 .features-grid { grid-template-columns: repeat(2, 1fr); }

.features--columns-3 .features-grid, .steps--columns-3 .features-grid { grid-template-columns: repeat(3, 1fr); }

.features--columns-4 .features-grid, .steps--columns-4 .features-grid { grid-template-columns: repeat(4, 1fr); }

/* The page's cards (body.cards-*) reach every card as variables: --card-border, --card-bg,
   --card-shadow, and on hover --card-hover-line and --card-hover-shadow. */
.feature-card {
  background: var(--card-bg, var(--surface));
  border: var(--card-border, 1px solid var(--card-line));
  border-radius: var(--radius);
  padding: 1.8rem;
  gap: var(--card-gap, normal);
  box-shadow: var(--card-shadow, none);
}

.feature-index {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}

.feature-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }

.feature-card p { font-size: .95rem; margin: 0; }

/* ---------- Service cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap, 1.4rem);
}

.services--columns-1 .cards-grid, .products--columns-1 .cards-grid { grid-template-columns: 1fr; }

.services--columns-2 .cards-grid { grid-template-columns: repeat(2, 1fr); }

.services--columns-3 .cards-grid, .products--columns-3 .cards-grid { grid-template-columns: repeat(3, 1fr); }

.services--columns-4 .cards-grid { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, normal);
  background: var(--card-bg, var(--surface));
  border: var(--card-border, 1px solid var(--card-line));
  border-radius: var(--radius);
  box-shadow: var(--card-shadow, none);
  padding: 1.8rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-hover-line, var(--mark, var(--primary)));
  box-shadow: var(--card-hover-shadow, 0 18px 34px -24px color-mix(in srgb, var(--shade) 35%, transparent));
}

.card h3 { margin-bottom: .5rem; }

.card p { font-size: .95rem; flex: 1; }

@media (max-width: 960px) {
  .cards-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .services .cards-grid, .products .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cards-grid, .form-row { grid-template-columns: 1fr; }
  .services .cards-grid, .products .cards-grid { grid-template-columns: 1fr; }
  .features--columns-2 .features-grid, .features--columns-3 .features-grid, .features--columns-4 .features-grid,
  .steps--columns-2 .features-grid, .steps--columns-3 .features-grid, .steps--columns-4 .features-grid { grid-template-columns: 1fr; }
}

/* list — one row per service, price and link pushed to the right edge. Reads
   as a price list, which is what a salon or a workshop actually wants. */
.services--list .cards-grid { grid-template-columns: 1fr; gap: 0; }

.services--list .card:not(.svc-card) {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 1.4rem .4rem;
}

.services--list .card:not(.svc-card):first-child { border-top: 1px solid var(--line); }

.services--list .card:not(.svc-card):hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
  background: var(--surface);
}

.services--list .card-body { flex: 1; min-width: 0; }

.services--list .card:not(.svc-card) h3 { display: inline; margin: 0; }

.services--list .card:not(.svc-card) p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* rows — the photo and the words side by side, alternating; a service with no photo is its words alone. */
.services--rows .cards-grid.svc-grid { grid-template-columns: 1fr; gap: 1.6rem; }

.services--list .cards-grid.svc-grid { grid-template-columns: 1fr; gap: 0; }

.features--numbered .feature-card {
  background: none;
  border: 0;
  box-shadow: none; /* not a card: the page's cards (--card-*) do not dress it */
  padding: 0 1.4rem 0 0;
}

.features--numbered .feature-index {
  font-size: 2.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--primary) 35%, var(--bg));
  margin-bottom: .6rem;
}

/* checkerboard — alternating tint instead of borders; reads denser and less
   "three boxes in a row". */
.features--checkerboard .features-grid { gap: 0; }

.features--checkerboard .feature-card {
  border: 0;
  box-shadow: none; /* not a card: the page's cards (--card-*) do not dress it */
  border-radius: 0;
  background: var(--bg);
  padding: 1.9rem;
}

.features--checkerboard .feature-card:nth-child(odd) { background: var(--tint); }

/* ---------- Steps variants ---------- */
.steps--timeline .feature-card {
  background: none;
  border: 0;
  box-shadow: none; /* not a card: the page's cards (--card-*) do not dress it */
  padding: 0 .8rem;
  text-align: center;
}

.steps--timeline .feature-index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: .95rem;
}

.steps--stacked .feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem 1.4rem;
  background: none;
  border: 0;
  box-shadow: none; /* not a card: the page's cards (--card-*) do not dress it */
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1.3rem .2rem;
}

.steps--stacked .feature-index {
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: 1.9rem;
  color: color-mix(in srgb, var(--primary) 40%, var(--bg));
}

@media (max-width: 960px) {
  .services--list .cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .services--list .cards-grid { grid-template-columns: 1fr; }
  .services--list .card:not(.svc-card) { flex-wrap: wrap; gap: .8rem; }
  .steps--timeline .feature-card { text-align: left; padding: 0; }
  .features--numbered .feature-card { padding-right: 0; }
}

/* ---------- Cards in a row ----------
   A list of cards — products, services, posts — in columns that close up on a narrower screen. */
.cards { display: grid; gap: var(--grid-gap, 1.4rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; } }

/* ==== main ==== */

/* main — the frame's own: body as a column, main grows, so a short page keeps the footer at the bottom. */

body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ==== header ==== */

/* header — the frame at the top of every page (header.twig). Loaded by the
   layout itself: a component drawn inside <body> cannot put a stylesheet into
   the <head> that was already printed.

   Every look is a class on the component's root, `.header` (from
   the design's `layout` knobs: header--sticky | solid | transparent,
   header--layout-*, header--tone-*, header--lang-*, header--nav-*), never on
   <body>: the Design drawer switches it in the preview at once, and the header
   follows without being drawn again. The root holds the row, the mobile menu
   and the cart's panel and makes no box of its own (display: contents), so the
   row still sticks to the page. What the header needs to know of the page —
   a photo hero right under it — it asks the page (:has), and what the page
   needs of it, it sets as variables (--header-sticky-h, --header-over).

   Colours only through var(--*). The header speaks its own small palette,
   --hd-*, which the tone sets (bg | tint | inverted | brand) and the
   transparent state over a hero overrides — so every part below is written
   once, whatever it stands on. */

.header { display: contents; }

:root {
  --header-row-h: 4rem;      /* the main row */
  --header-bar-h: 50px;      /* utility-bar's strip: open now, the phone, the account — for a
                                business people call or visit, the line that matters most;
                                its pills are the row's own size, with room around them */
  --header-top-h: 5.25rem;   /* centered's logo row */
  --header-sticky-h: 0px;    /* what stays stuck at the top; main.js measures it */
  --footer-bg: color-mix(in srgb, var(--ink) 3.5%, var(--bg));
}
body:is(.header--sticky, .header--transparent) { --header-sticky-h: var(--header-row-h); }
/* transparent is transparent only over a photo hero; elsewhere it behaves as sticky */

.hdr {
  --hd-bg: var(--bg);
  --hd-ink: var(--ink);
  --hd-text: var(--body-text, var(--ink));
  --hd-muted: var(--muted);
  --hd-line: var(--line);
  --hd-wash: var(--hover-wash, color-mix(in srgb, var(--ink) 6%, transparent));
  --hd-mark: var(--mark, var(--primary));
  --hd-bar: var(--footer-bg);
  position: relative;
  z-index: 50;
  background: var(--hd-bg);
  color: var(--hd-ink);
  border-bottom: 1px solid var(--hd-line);
}

/* --- tone: what the header stands on ------------------------------------ */
.header--tone-tint .hdr { --hd-bg: var(--footer-bg); --hd-bar: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
/* inverted: the page's ink as the ground, its background as the ink — a pair
   the design already keeps readable, turned over. */
.header--tone-inverted .hdr {
  --hd-bg: var(--ink);
  --hd-ink: var(--bg);
  --hd-text: color-mix(in srgb, var(--bg) 84%, var(--ink));
  --hd-muted: color-mix(in srgb, var(--bg) 62%, var(--ink));
  --hd-line: color-mix(in srgb, var(--bg) 16%, var(--ink));
  --hd-wash: color-mix(in srgb, var(--bg) 12%, transparent);
  --hd-mark: var(--bg);
  --hd-bar: color-mix(in srgb, var(--bg) 8%, var(--ink));
}
/* brand: the primary as the ground, primary-ink on it — the one pair whose
   contrast is checked. The mark's primary part and the primary button would
   vanish into it, so both take the ink. */
.header--tone-brand .hdr {
  --hd-bg: var(--primary);
  --hd-ink: var(--primary-ink);
  --hd-text: color-mix(in srgb, var(--primary-ink) 86%, var(--primary));
  --hd-muted: color-mix(in srgb, var(--primary-ink) 66%, var(--primary));
  --hd-line: color-mix(in srgb, var(--primary-ink) 18%, var(--primary));
  --hd-wash: color-mix(in srgb, var(--primary-ink) 12%, transparent);
  --hd-mark: var(--primary-ink);
  --hd-bar: color-mix(in srgb, var(--primary-ink) 10%, var(--primary));
}
.header--tone-brand .hdr .hdr-cta { background: var(--primary-ink); color: var(--primary); border-color: var(--primary-ink); }

/* --- rows --------------------------------------------------------------- */
.hdr-row__in { height: var(--header-row-h); display: flex; align-items: center; gap: 1.25rem; }
.hdr-utils__d { display: contents; } /* its parts stand in the row as if loose */
.hdr-m { display: none !important; }

/* --- the brand: the mark alone ------------------------------------------- */
.hdr .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hd-ink); text-decoration: none; flex: none; border-radius: 6px; }
.hdr .brand__mark { display: inline-flex; }
.hdr .brand__mark :is(img, svg) { height: 36px; }
.header .hdr-brand--mini .brand__mark :is(img, svg) { height: 28px; }
.hdr .brand:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 4px; }

/* --- the menu: as many as fit, the rest in «More» ------------------------ */
.hdr-nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.hdr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; min-width: 0; }
.hdr-nav__item, .hdr-nav__more { position: relative; flex: none; }
.hdr-nav__item.is-hidden, .hdr-nav__more.is-hidden { display: none; }
/* Without scripts the first four stand in the row, the rest wait in «More». */
html:not(.has-js) .hdr-nav__item.is-late { display: none; }

.hdr-link {
  display: inline-flex; align-items: center; gap: .3rem; height: 2.5rem; padding: 0 .7rem;
  border: 0; border-radius: 999px; background: none; color: var(--hd-text);
  font: 500 .93rem/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative;
  list-style: none;
}
.hdr-link::-webkit-details-marker { display: none; }
.hdr-link__t { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
/* A label in a pill stands at its optical middle, whatever the site's font:
   the box is trimmed to cap height..baseline (so the font's own ascent and
   descent stop deciding), then lifted by a quarter of cap minus x-height —
   caps centred exactly still read low, the lowercase carries the weight.
   The even .3em keeps descenders and Ї/Й clear of the ellipsis clip. */
.hdr-link__t, .hdr-acct__t, .hdr-cta__t, .lang-switch__btn > span { line-height: 1; padding-block: .3em calc(.3em + (1cap - 1ex) / 2); }
@supports (text-box: trim-both cap alphabetic) {
  .hdr-link__t, .hdr-acct__t, .hdr-cta__t, .lang-switch__btn > span { text-box: trim-both cap alphabetic; }
}
.hdr-link:hover { color: var(--hd-ink); background: var(--hd-wash); }
.hdr-link.is-active { color: var(--hd-ink); font-weight: 600; }
.hdr-link.is-active::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--hd-mark); }
.hdr-link:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 2px; }
.hdr-chev { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.hdr-dd[open] > summary .hdr-chev { transform: rotate(180deg); }

/* --- drop-downs: a group, «More» ---------------------------------------- */
.hdr-dd > summary { list-style: none; }
.hdr-dd__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 15rem; max-width: 22rem; padding: .4rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px var(--shade, rgb(0 0 0 / .4));
}
/* the bridge: the pointer crosses the gap without closing it */
.hdr-dd__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.hdr-dd__panel.is-right { left: auto; right: 0; }
.hdr-dd__panel--more.is-wide { min-width: 30rem; max-width: 34rem; columns: 2; column-gap: .4rem; }
/* `.hdr-dd` before it: the panel stands on the page's surface, not on the header's ground — the row's own link
   colour (.hdr-bar__l a: the header's ink, dark on a brand-tone header) must not reach inside it. */
.hdr-dd .hdr-dd__panel a { display: block; padding: .55rem .75rem; border-radius: var(--radius-small); color: var(--body-text, var(--ink)); text-decoration: none; font-size: .92rem; line-height: 1.3; break-inside: avoid; }
.hdr-dd .hdr-dd__panel a:hover { background: var(--hover-wash); color: var(--ink); }
.hdr-dd .hdr-dd__panel a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hdr-dd__all { color: var(--mark, var(--primary)) !important; font-weight: 600; }
.hdr-dd__group { display: block; padding: .6rem .75rem .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); break-after: avoid; }
.hdr-more__entry { display: none; break-inside: avoid; }
.hdr-more__entry.is-shown { display: block; }

/* --- utilities ------------------------------------------------------------ */
.hdr-utils { display: flex; align-items: center; gap: .35rem; flex: none; }
.hdr-icon {
  position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; border: 0; background: transparent; color: var(--hd-ink); cursor: pointer; text-decoration: none;
}
.hdr-icon:hover { background: var(--hd-wash); }
.hdr-icon svg { width: 21px; height: 21px; }
.hdr-icon:focus-visible { outline: 2px solid var(--hd-mark); outline-offset: 2px; }
.header-cart__count {
  position: absolute; top: .1rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--hd-ink); color: var(--hd-bg);
  font: 700 .66rem/1.15rem var(--font-body); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--hd-bg);
}
.hdr-acct { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .75rem; border-radius: 999px; color: var(--hd-ink); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.hdr-acct:hover { background: var(--hd-wash); }
.hdr-acct svg { width: 19px; height: 19px; flex: none; }
.hdr-acct__icon { position: relative; display: inline-flex; flex: none; }
/* signed in: a dot on the icon, as on an avatar — cut out of it by a ring of the ground */
.hdr-acct__dot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--hd-bg, var(--bg)); }
.hdr-cta { display: inline-flex; align-items: center; height: 2.5rem; padding-block: 0; padding-inline: 1.15rem; font-size: .9rem; white-space: nowrap; }

/* --- languages (lang_switch.twig): the header's palette; the footer and the menu use the page's */
.lang-switch { --ls-ink: var(--ink); --ls-muted: var(--muted); --ls-line: var(--line); --ls-mark: var(--mark, var(--primary)); --ls-wash: var(--hover-wash); position: relative; display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.hdr .lang-switch { --ls-ink: var(--hd-ink); --ls-muted: var(--hd-muted); --ls-line: var(--hd-line); --ls-mark: var(--hd-mark); --ls-wash: var(--hd-wash); }
.lang-switch__btn { display: none; }
.lang-switch__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.lang-switch__list li { display: flex; align-items: center; }
.lang-switch .lang-switch__list a { color: var(--ls-muted); text-decoration: none; display: inline-flex; align-items: center; height: 2rem; padding: 0 .55rem; }
.lang-switch .lang-switch__list a:hover { color: var(--ls-ink); }

/* divided (the default): the codes in a row, a hairline between them, the
   current one underlined in the mark */
.lang-switch__list li + li::before { content: ''; width: 1px; height: .85em; background: currentColor; opacity: .4; } /* as open now's */
.lang-switch .lang-switch__list a.is-active { color: var(--ls-ink); text-decoration: underline; text-decoration-color: var(--ls-mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* dropdown: the current code on a button, the names in a panel under it (over
   it in the footer, which ends the page). The panel is the page's own colours
   whatever the header stands on — like the menu's drop-downs. Each place has
   its own look (header--lang-*, footer--lang-*); the mobile menu is neither, so
   it always shows the row. */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn {
  display: inline-flex; align-items: center; gap: .2rem; height: 2.5rem; padding: 0 .55rem 0 .7rem;
  border: 0; border-radius: 999px; background: none; color: var(--ls-ink); cursor: pointer;
  font: inherit; letter-spacing: inherit;
}
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn:hover, :is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch.is-open .lang-switch__btn { background: var(--ls-wash); }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__btn:focus-visible { outline: 2px solid var(--ls-mark); outline-offset: 2px; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  flex-direction: column; align-items: stretch; min-width: 11rem; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px var(--shade, rgb(0 0 0 / .4));
  font-size: .92rem; font-weight: 400; letter-spacing: normal;
}
/* the bridge: the pointer crosses the gap without closing it */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch.is-open .lang-switch__list,
html:not(.has-js) :is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch:is(:hover, :focus-within) .lang-switch__list { display: flex; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list li::before { display: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list li.is-current { display: none; } /* the button says it already */
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a { width: 100%; height: auto; padding: .55rem .75rem; border-radius: var(--radius-small); color: var(--body-text, var(--ink)); text-decoration: none; line-height: 1.3; white-space: nowrap; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a:hover { background: var(--hover-wash); color: var(--ink); }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch .lang-switch__list a.is-active { color: var(--ink); font-weight: 600; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list .lang-switch__code { display: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list .lang-switch__name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
:is(.header--lang-dropdown .hdr, .footer--lang-dropdown) .lang-switch__list.is-left { right: auto; left: 0; }
.footer--lang-dropdown .lang-switch__list { top: auto; bottom: calc(100% + 6px); }
.footer--lang-dropdown .lang-switch__list::before { top: auto; bottom: -8px; }

/* none: that place has no languages — the owner's choice, kept as made */
.header--lang-none .hdr .lang-switch { display: none; }
.footer--lang-none .lang-switch { display: none; }

/* --- open now, in the header's colours ---------------------------------- */
.hdr .open-status { font-size: .84rem; color: var(--hd-text); gap: .45rem; white-space: nowrap; }
.hdr .open-status strong { color: var(--hd-ink); }
.hdr .open-status .open-status__dot { width: 8px; height: 8px; box-shadow: none; }

/* --- header_layout ------------------------------------------------------- */
/* classic (the default): brand · menu (to the right) · utilities. The bar and
   the centered row's left part wait for their layouts. */
.hdr-bar, .hdr-top__l { display: none; }
.hdr-brand--mini { display: none !important; }

/* split: menu · brand in the middle · utilities */
.header--layout-split .hdr-row__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.header--layout-split .hdr-nav { order: -1; justify-content: flex-start; }
.header--layout-split .hdr-utils { justify-self: end; }

/* utility-bar: a strip of status, phone, e-mail · account, languages above the
   row; the row keeps brand · menu · cart · «Contact us». No bar (`no-bar`:
   fewer than two of its five; `bar-by-langs` with the header's languages
   hidden, when they were the second) — a classic row. */
.header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-bar { display: block; }
.header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-utils__own { display: none; }
.hdr-bar { height: var(--header-bar-h); border-bottom: 1px solid var(--hd-line); font-size: .9rem; color: var(--hd-text); background: var(--hd-bar); }
.hdr-bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hdr-bar__l, .hdr-bar__r { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.hdr-bar__l a, .hdr-top__l a { color: var(--hd-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.hdr-bar__l a:hover, .hdr-top__l a:hover { color: var(--hd-mark); }
.hdr-bar__tel { font-variant-numeric: tabular-nums; }
.hdr-bar .open-status { font-size: inherit; }
.hdr-bar__mail { overflow: hidden; text-overflow: ellipsis; }
/* the phone, the e-mail and the way there as one drop-down narrower than 1100px */
.hdr-bar__contact { display: none; position: relative; }
.hdr-bar__contact > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--hd-ink); font-weight: 600; white-space: nowrap; }
.hdr-bar__contact > summary:hover { color: var(--hd-mark); }
.hdr-bar__icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 1099px) {
  .hdr-bar__wide { display: none !important; }
  .hdr-bar__contact { display: block; }
}

/* centered: status and phone · the brand · utilities on the first row, the
   menu centred on a second one under a line across the page */
.header--layout-centered .hdr { overflow-x: clip; }
.header--layout-centered .hdr-row__in {
  height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: var(--header-top-h) 3.25rem; align-items: center; gap: 0 1rem;
}
.header--layout-centered .hdr-top__l { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; font-size: .85rem; min-width: 0; }
.header--layout-centered .hdr-brand { justify-self: center; }
.header--layout-centered .hdr-brand:not(.hdr-brand--mini) .brand__mark :is(img, svg) { height: 48px; }
.header--layout-centered .hdr-utils { justify-self: end; }
.header--layout-centered .hdr-nav { grid-column: 1 / -1; grid-row: 2; height: 100%; align-items: center; justify-content: center; position: relative; gap: 1rem; }
.header--layout-centered .hdr-nav::before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-top: 1px solid var(--hd-line); }

/* --- header: how it behaves ------------------------------------------------ */
/* solid: in the flow, never stuck */
.header--solid .hdr { position: relative; }
/* sticky (and transparent with no photo hero under it): stuck, translucent;
   the line appears once the page has moved */
:is(.header--sticky, .header--transparent:not(:has(main > .section:first-child .hero--cover.has-photo))) .hdr {
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--hd-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: transparent;
}
:is(.header--sticky, .header--transparent:not(:has(main > .section:first-child .hero--cover.has-photo))) .hdr.is-scrolled { border-bottom-color: var(--hd-line); }
/* two rows: the strip / the logo row go up with the page, the menu row stays */
body:is(.header--sticky, .header--transparent:not(:has(main > .section:first-child .hero--cover.has-photo))).header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) { top: calc(-1 * var(--header-bar-h)); }
body:is(.header--sticky, .header--transparent:not(:has(main > .section:first-child .hero--cover.has-photo))).header--layout-centered .hdr { top: calc(-1 * var(--header-top-h)); }
.header--layout-centered .hdr.is-scrolled .hdr-brand--mini { display: inline-flex !important; }
.header--layout-centered .hdr.is-scrolled .hdr-nav { justify-content: flex-start; }

/* transparent over a photo hero: white on a dark gradient; past the hero, a
   header like sticky. */
.header--transparent:has(main > .section:first-child .hero--cover.has-photo) .hdr {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / 0));
  border-bottom-color: transparent;
  transition: background .2s, color .2s;
}
.header--transparent:has(main > .section:first-child .hero--cover.has-photo) .hdr:not(.is-scrolled) {
  --hd-ink: #fff; --hd-text: rgb(255 255 255 / .88); --hd-muted: rgb(255 255 255 / .7);
  --hd-line: rgb(255 255 255 / .22); --hd-wash: rgb(255 255 255 / .14); --hd-mark: #fff;
  --hd-bar: transparent; --hd-bg: #111;
}
.header--transparent:has(main > .section:first-child .hero--cover.has-photo) .hdr:not(.is-scrolled) .header-cart__count { background: #fff; color: #111; box-shadow: none; }
.header--transparent:has(main > .section:first-child .hero--cover.has-photo) .hdr.is-scrolled {
  background: color-mix(in srgb, var(--hd-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hd-line);
}
.header--transparent:has(main > .section:first-child .hero--cover.has-photo) .hdr.is-scrolled .hdr-bar { display: none; }
.header--transparent:has(main > .section:first-child .hero--cover.has-photo).header--layout-centered .hdr.is-scrolled .hdr-row__in { grid-template-rows: 0 3.25rem; }
.header--transparent:has(main > .section:first-child .hero--cover.has-photo).header--layout-centered .hdr.is-scrolled :is(.hdr-top__l, .hdr-brand:not(.hdr-brand--mini), .hdr-utils) { display: none; }
/* the hero under a fixed header is told how much of it the header covers (--header-over); the hero keeps its words clear of that */
body.header--transparent main > .section:first-child .hero--cover.has-photo { --header-over: var(--header-full-h, var(--header-row-h)); }

/* --- the mobile menu / the sidebar (one element) -------------------------- */
.hdr-sheet { position: fixed; inset: 0; z-index: 80; display: none; }
.hdr-sheet.is-open, .hdr-sheet:target { display: block; }
.hdr-sheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--shade, #000) 55%, transparent); }
.hdr-sheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 26rem);
  background: var(--bg); color: var(--ink); display: flex; flex-direction: column;
  box-shadow: -20px 0 40px -30px var(--shade, #000);
}
.hdr-sheet__top { display: flex; align-items: center; gap: .5rem; height: var(--header-row-h); padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.hdr-sheet__top .brand { margin-right: auto; color: var(--ink); text-decoration: none; display: inline-flex; }
.hdr-sheet__top .brand__mark :is(img, svg) { height: 32px; }
.hdr-sheet .hdr-icon { --hd-ink: var(--ink); --hd-wash: var(--hover-wash); --hd-bg: var(--bg); --hd-mark: var(--mark, var(--primary)); }
.hdr-sheet__side-cart { display: none; }
.hdr-sheet__body { flex: 1; overflow: auto; padding: .5rem 16px 1rem; overscroll-behavior: contain; }
.hdr-sheet__list { list-style: none; margin: 0; padding: 0; }
.hdr-sheet__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: .4rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 1.05rem/1.3 var(--font-display);
  cursor: pointer; list-style: none;
}
.hdr-sheet__link::-webkit-details-marker { display: none; }
.hdr-sheet__link.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--mark, var(--primary)); padding-left: .75rem; }
.hdr-sheet__link .hdr-chev { width: 18px; height: 18px; color: var(--muted); }
.hdr-sheet__group[open] > summary .hdr-chev { transform: rotate(180deg); }
.hdr-sheet__sub a { display: block; padding: .6rem 0 .6rem 1rem; border-bottom: 1px solid var(--line); color: var(--body-text, var(--ink)); text-decoration: none; font-size: .98rem; }
.hdr-sheet__sub a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hdr-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.hdr-sheet__row .hdr-acct { --hd-ink: var(--ink); --hd-wash: var(--hover-wash); --hd-bg: var(--bg); margin-left: -.75rem; }
.hdr-sheet__foot { flex: none; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--footer-bg); display: flex; flex-direction: column; gap: .75rem; }
.hdr-call { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.hdr-call__icon { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--tint, var(--hover-wash)); display: grid; place-items: center; flex: none; }
.hdr-call__icon svg { width: 20px; height: 20px; }
.hdr-call small { display: block; color: var(--muted); font-size: .8rem; }
.hdr-call b { display: block; font: 700 1.15rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.hdr-sheet__cta { display: flex; width: 100%; justify-content: center; align-items: center; margin-top: .5rem; }
body.has-sheet-open { overflow: hidden; }

/* --- below 720px: the brand, the cart (and the phone in utility-bar), the burger. From 720 the row,
   its overflow folded into «More» (main.js) — a 13" laptop's narrower window and a tablet keep the
   menu. */
.hdr-phone { display: none !important; }
@media (max-width: 719px) {
  .hdr-d { display: none !important; }
  .hdr-m:not(.hdr-phone) { display: inline-grid !important; }
  .header--layout-utility-bar .hdr:not(.no-bar, .header--lang-none .bar-by-langs) .hdr-phone { display: inline-grid !important; }
  .hdr-utils { margin-left: auto; }
  .header--layout-split .hdr-row__in,
  .header--layout-centered .hdr-row__in { display: flex; height: var(--header-row-h); grid-template-rows: none; gap: .75rem; }
  .header--layout-centered .hdr-brand:not(.hdr-brand--mini) .brand__mark :is(img, svg) { height: 36px; }
  .header--layout-utility-bar .hdr, .header--layout-centered .hdr { top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-chev, .hdr { transition: none; }
}

/* --- nav: left — from 960px the menu is a column, and the top row goes ---- */
@media (min-width: 960px) {
  body:has(.header--nav-left) { padding-left: 264px; }
  .header--nav-left .hdr { display: none; }
  .header--nav-left .hdr-sheet { display: block; inset: 0 auto 0 0; width: 264px; z-index: 45; }
  .header--nav-left .hdr-sheet .hdr-sheet__scrim, .header--nav-left .hdr-sheet .hdr-sheet__close { display: none; }
  .header--nav-left .hdr-sheet .hdr-sheet__panel { position: static; width: 100%; height: 100%; box-shadow: none; border-right: 1px solid var(--line); }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart {
    display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .8rem 0 .65rem;
    border-radius: 999px; background: var(--tint, var(--hover-wash)); color: var(--ink); text-decoration: none;
    font: 600 .86rem/1 var(--font-body);
  }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart:hover { background: var(--hover-wash); }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
  .header--nav-left .hdr-sheet .hdr-sheet__side-cart svg { width: 18px; height: 18px; flex: none; }
  .hdr-sheet__side-count { min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 .68rem/1.2rem var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
  .header--nav-left .hdr-sheet .hdr-sheet__top { height: auto; padding: 1.5rem 1.25rem 1rem; }
  .header--nav-left .hdr-sheet .hdr-sheet__body { padding: .75rem; }
  /* the links as the top row's: a pill around the words, not a bar across the column */
  .header--nav-left .hdr-sheet .hdr-sheet__link { display: inline-flex; justify-content: flex-start; gap: .3rem; min-height: 0; padding: .55rem .85rem; border: 0; border-radius: 999px; font: 500 .95rem/1.3 var(--font-body); color: var(--body-text, var(--ink)); }
  .header--nav-left .hdr-sheet .hdr-sheet__link:hover { background: var(--hover-wash); color: var(--ink); }
  .header--nav-left .hdr-sheet .hdr-sheet__link.is-active { box-shadow: none; padding-left: .85rem; background: var(--tint, var(--hover-wash)); color: var(--ink); font-weight: 600; }
  .header--nav-left .hdr-sheet .hdr-sheet__sub a { display: table; border: 0; padding: .45rem .85rem .45rem 1.5rem; font-size: .9rem; border-radius: 999px; }
  .header--nav-left .hdr-sheet .hdr-sheet__sub a:hover { background: var(--hover-wash); color: var(--ink); }
  .header--nav-left .hdr-sheet .hdr-sheet__row { border: 0; padding: .75rem .75rem 0 .85rem; }
  .header--nav-left .hdr-sheet .hdr-sheet__foot { padding: 1rem 1.25rem 1.25rem; background: none; }
}

/* --- «Skip to content»: the document's first link, seen when focused ------ */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--radius-small); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* In the narrow menu and the sidebar «open now» is a sentence that wraps, not three flex boxes. */
.hdr-sheet .open-status { display: block; font-size: .9rem; white-space: normal; }
.hdr-sheet .open-status__dot { display: inline-block; margin-right: .45rem; vertical-align: .05em; }
.hdr-sheet .open-status__sep { margin-inline: .5em; }

/* ==== footer ==== */

/* footer — the frame at the bottom of every page (footer.twig). Loaded by the
   layout itself, like the header's. Colours only through var(--*).

   One markup for every look; the look is a class on its root (footer--layout-*,
   footer--minimal, footer--lang-*), so the Design drawer
   switches it in place. The languages' look here (footer--lang-*) is styled
   with the switcher, above. */

.ftr { margin-top: 3rem; background: var(--footer-bg); border-top: 1px solid var(--line); color: var(--body-text, var(--ink)); font-size: .95rem; }
/* After a band the footer meets it at its edge, as two bands meet: the band's own space is the air above it.
   A page that does not end in a band (an account screen) keeps the footer's margin. */
main:has(> .section:last-child) ~ .ftr { margin-top: 0; }
.ftr a { color: var(--ink); text-decoration: none; }
.ftr a:hover { color: var(--mark, var(--primary)); }
.ftr-main { padding-block: 3.25rem 2.5rem; display: grid; gap: 2.5rem 3rem; }
.ftr-title { margin: 0 0 .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); }

.ftr .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
.ftr .brand__mark { display: inline-flex; flex: none; }
.ftr .brand__mark :is(img, svg) { height: 36px; }
.ftr .brand__name { font: 650 1.15rem/1.15 var(--font-display); max-width: 20rem; }
.ftr .brand:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 4px; border-radius: 6px; }
.ftr-about { margin: .9rem 0 0; max-width: 40ch; line-height: 1.6; font-size: .92rem; }

.ftr-menu ul { list-style: none; margin: 0; padding: 0; }
.ftr-menu li { margin: .15rem 0; break-inside: avoid; }
.ftr-menu a { display: inline-block; padding: .2rem 0; color: var(--body-text, var(--ink)); }
.ftr-menu a:hover { color: var(--ink); }
.ftr-menu__group { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--ink) !important; }
.ftr-menu__group + ul a { padding-left: .75rem; font-size: .9rem; }
.ftr-menu.is-two .ftr-menu__list { columns: 2; column-gap: 1.5rem; }

.ftr-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.ftr-tel { font: 700 1.15rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftr .open-status { font-size: .88rem; margin-top: .35rem; }
.ftr-hours { margin: .35rem 0 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: .15rem 1.25rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ftr-hours dt { color: var(--body-text, var(--ink)); }
.ftr-hours dd { margin: 0; color: var(--ink); }
.ftr-hours dd.is-off { color: var(--muted); }

.ftr-soc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; }
.ftr-soc a, .ftr-soc span { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--bg); }
.ftr-soc a:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

.ftr-bottom { border-top: 1px solid var(--line); }
.ftr-bottom__in { min-height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }

/* columns (the default): brand · menu · contacts, 5 / 3 / 4 */
.ftr-main { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
.ftr-main.ftr-n2 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
.ftr-main.has-wide-menu { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }

/* brand-split: the signature large on the left, the links on the right */
.footer--layout-brand-split .ftr-main { grid-template-columns: minmax(0, 6fr) minmax(0, 3.5fr) minmax(0, 2.5fr); }
.footer--layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.footer--layout-brand-split .ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
.footer--layout-brand-split .ftr-brand .brand { flex-direction: column; align-items: flex-start; gap: 1rem; }
.footer--layout-brand-split .ftr-brand .brand__mark :is(img, svg) { height: 44px; }
.footer--layout-brand-split .ftr-brand .brand__name { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; max-width: 14ch; }

/* centered and bar: rows, not columns — the brand's parts stand loose among the rest */
:is(.footer--layout-centered, .footer--layout-bar) .ftr-brand { display: contents; }
:is(.footer--layout-centered, .footer--layout-bar) .ftr-title { display: none; }
:is(.footer--layout-centered, .footer--layout-bar) .ftr-menu__list { display: flex; flex-wrap: wrap; columns: auto; }
:is(.footer--layout-centered, .footer--layout-bar) .ftr-menu__list ul { display: none; } /* a group is its name */
:is(.footer--layout-centered, .footer--layout-bar) .ftr-menu li { margin: 0; }
:is(.footer--layout-centered, .footer--layout-bar) .ftr-menu__group { margin: 0; font-weight: 400; color: var(--body-text, var(--ink)) !important; }
:is(.footer--layout-centered, .footer--layout-bar) .ftr-hours { display: none; }

/* centered: everything on one axis — brand, about, the menu, the contacts in a row, open now, socials */
.footer--layout-centered .ftr-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; }
.footer--layout-centered .ftr-main > .ftr-brand > .brand { order: 1; flex-direction: column; gap: .75rem; }
/* on its own axis the signature can be large: it is what the column stands under */
.footer--layout-centered .ftr-brand .brand__mark :is(img, svg) { height: 44px; }
.footer--layout-centered .ftr-brand .brand__name { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.01em; max-width: 24ch; }
.footer--layout-centered .ftr-about { order: 2; margin: 0 auto; max-width: 58ch; } /* not narrower than the name above it */
.footer--layout-centered .ftr-menu { order: 3; }
.footer--layout-centered .ftr-contacts { order: 4; }
.footer--layout-centered .ftr-soc { order: 5; justify-content: center; margin: 0; }
.footer--layout-centered .ftr-menu__list { justify-content: center; gap: .35rem 1.4rem; }
.footer--layout-centered .ftr-contacts { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem 1.4rem; }
.footer--layout-centered .ftr-contacts .ftr-tel { font: 600 1rem/1.3 var(--font-body); }
.footer--layout-centered .ftr-contacts .open-status { flex-basis: 100%; justify-content: center; }
.footer--layout-centered .ftr-bottom__in { justify-content: center; flex-direction: column; gap: .4rem; padding-block: 1rem; text-align: center; }

/* bar: one line — brand · the menu · the phone · socials */
.footer--layout-bar .ftr-main { padding-block: 1.4rem; display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.footer--layout-bar .ftr-about,
.footer--layout-bar .ftr-contacts > :not(.ftr-tel) { display: none; }
.footer--layout-bar .brand__name { font-size: 1rem; max-width: 14rem; }
.footer--layout-bar .ftr-menu { flex: 1; min-width: 16rem; }
.footer--layout-bar .ftr-menu__list { gap: .25rem 1.1rem; }
.footer--layout-bar .ftr-menu__list a { font-size: .9rem; }
.footer--layout-bar .ftr-soc { margin: 0; }
.footer--layout-bar .ftr-tel { font-size: 1rem; }

/* minimal: the bottom line alone */
.footer--minimal .ftr-main { display: none; }

@media (max-width: 899px) {
  .ftr-main, .ftr-main.has-wide-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr-main > .ftr-brand { grid-column: 1 / -1; }
  .ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
  .footer--layout-brand-split .ftr-main, .footer--layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .ftr-main, .ftr-main.has-wide-menu, .ftr-main.ftr-n2,
  .footer--layout-brand-split .ftr-main, .footer--layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 1fr); }
  .footer--layout-bar .ftr-main { flex-direction: column; align-items: flex-start; }
  .ftr-bottom__in { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 1rem; gap: .5rem; }
  .footer--layout-centered .ftr-bottom__in { align-items: center; }
}

/* bar: the parts in the line's order — brand · menu · phone · socials */
.footer--layout-bar .ftr-main > .ftr-brand > .brand { order: 1; }
.footer--layout-bar .ftr-menu { order: 2; }
.footer--layout-bar .ftr-contacts { order: 3; }
.footer--layout-bar .ftr-soc { order: 4; }

/* ==== the shared parts ====
   The parts many pages draw (layout/*.twig): the cart's lines, the account's rows,
   the services' list, the forms' pieces. */

.catalog-empty { display: grid; justify-items: start; gap: 1rem; padding: 1rem 0 2rem; }

/* --- products -------------------------------------------------------------
   Goods, not services. The card leads with the picture and ends with a price
   that has to read as a price — which is why the price gets its own weight
   and sits on the baseline with the link rather than inside the prose.

   Everything is token-driven; a literal here would leave one shelf behind
   when the owner changes the palette. */

.product-section-title { font-size: 1.45rem; margin-bottom: 1rem; }


/* An empty kind, with the way to make one. */
.inline-empty { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; margin-bottom: .8rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--body-text); }
.inline-empty > div { flex: 1; min-width: 0; }
.inline-empty strong { color: var(--ink); }
.inline-empty p { margin: .2rem 0 0; font-size: .88rem; color: var(--muted); }
.inline-empty__mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tint); color: var(--muted); flex: none; }
.inline-empty__mark svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 559px) {
  .inline-empty { flex-wrap: wrap; }
}

/* A place an address's #<record> leads to (data-arrive, main.js) stops under what of the header stays stuck. */
[data-arrive] { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
/* …and a ring in the link colour fades around it: where the address led. */
[data-arrive].is-arrived { outline: 2px solid transparent; outline-offset: .6rem; border-radius: var(--radius); animation: arrived 2.4s ease-out both; }
@keyframes arrived {
  from { outline-color: color-mix(in srgb, var(--mark, var(--primary)) 75%, transparent); }
  to   { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { [data-arrive].is-arrived { animation-duration: .01s; } }
.settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.2rem 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .settings { grid-template-columns: 1fr; }
}

/* ---------- Posts: news, a blog (pages/post (post_list.twig and post.twig), the news component) ---------- */

.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.news-meta__cat { color: var(--mark, var(--primary)); }
a.news-meta__cat { text-decoration: none; }
a.news-meta__cat:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The grid: three, two, one; the first page's newest large (two by two) beside two. */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.news-grid.is-single { grid-template-columns: 1fr; }

/* The list look: a date tile, the text, a thumbnail on the right. */
.news-rows { display: grid; border-top: 1px solid var(--line); }

/* A post's page: the column of text 44rem, the photo wider. */
.post { --col: 44rem; padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.post__head { max-width: calc(var(--col) + 48px); }
.post__title { font-size: clamp(2.1rem, 4.8vw, 3.4rem); line-height: 1.08; text-wrap: balance; margin: 0 0 1rem; }
.post__standfirst { margin: 0; font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--body-text); }
.post__hero { margin: 2rem auto 0; max-width: calc(66rem + 48px); }
.post__hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.post__body { max-width: calc(var(--col) + 48px); margin-top: 2.2rem; }
.prose--post { max-width: none; font-size: 1.08rem; line-height: 1.75; }
.prose--post p { margin: 0 0 1.25rem; }
.prose--post h2 { font-size: 1.65rem; margin: 2.6rem 0 .8rem; }
.prose--post h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.prose--post ul, .prose--post ol { padding-left: 1.4rem; margin-bottom: 1.25rem; }
.prose--post li::marker { color: var(--mark, var(--primary)); font-weight: 600; }
.prose--post a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark, var(--primary)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose--post a:hover { color: var(--mark, var(--primary)); }
.prose--post strong { color: var(--ink); font-weight: 600; }
.prose--post img { width: 100%; height: auto; margin: 1.8rem 0; border-radius: var(--radius-small); }
.prose--post blockquote { margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 3px solid var(--mark, var(--primary)); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.45; color: var(--ink); background: none; }
.prose--post blockquote::before { display: none; }
.prose--post blockquote p { margin: 0; }
.post__foot { max-width: calc(var(--col) + 48px); margin-top: 2.4rem; }

@media (max-width: 899px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}
@media (max-width: 559px) {
  .news-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- The cart and the checkout ---------------------------------------- */

.chip-count { opacity: .55; font-variant-numeric: tabular-nums; margin-left: .15rem; }  /* a count beside a word: a chip's, the account's groups, the cart's title */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Notices: a list of wrong fields, too many attempts, a payment being checked. */
.notice { display: grid; gap: .3rem; margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .92rem; }
.notice:focus { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.notice p, .notice ul { margin: 0; }
.notice ul { padding-left: 1.2rem; }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.notice--danger { border-color: var(--danger); background: var(--danger-soft); }
.notice--danger strong { color: var(--danger); }
.notice--warning { border-color: var(--warning, var(--accent)); background: var(--warning-soft); }
.notice--success { border-color: color-mix(in srgb, var(--success, #1f7a45) 45%, var(--line)); background: var(--success-soft); }
.notice--success strong { color: var(--ink); }
.field-error:empty { display: none; }
.choice { display: flex; align-items: flex-start; gap: 1rem; padding: .9rem 1rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.choice:has(input:checked) { border-color: var(--mark, var(--primary)); }
.choice.is-invalid { border-color: var(--danger); }
.choice input { margin-top: .32rem; } /* on the title's letters, not on its line box: they sit lower */
.choice__text { display: grid; gap: .15rem; }
.choice__text strong { color: var(--ink); font-weight: 600; }
.choice__text small { color: var(--muted); font-size: .85rem; }
.checkout-sums { display: grid; gap: .5rem; margin: 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; }
.checkout-sums > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; }
.checkout-sums dt { color: var(--body-text); }
.checkout-sums dd { margin: 0; color: var(--ink); font-weight: 600; }
.checkout-sums__note { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--muted); }
.checkout-total { padding-top: .8rem; border-top: 1px solid var(--line); }

/* The order's page: a receipt to come back to. */
.order-page__inner { max-width: 860px; }
.order-head { display: grid; justify-items: start; gap: .6rem; margin-bottom: 1.6rem; }
.order-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: .4rem 0 0; text-wrap: balance; }
.order-head .lead { margin: 0; max-width: 46ch; }
/* A receipt's head — the mark, the state, what next — stands in the middle; the facts under it stay left, to be read. */
.order-head { justify-items: center; text-align: center; }
/* The state's mark: the icon alone, large, in its state's colour — no disc under it. */
.order-head .order-head__mark { width: auto; height: auto; background: none; border-radius: 0; }
.order-head .order-head__mark svg { width: 3.2rem; height: 3.2rem; stroke-width: 1.5; }
/* …and so does its foot: the way on, the cancel, the note — the head's frame around the facts. */
.order-actions { justify-content: center; text-align: center; }

.order-head__mark { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; }
.order-head__mark svg { width: 1.6rem; height: 1.6rem; }
.order-head__mark--success { background: var(--success-soft); color: var(--success, var(--mark, var(--primary))); }
.order-head__mark--warning { background: var(--warning-soft); color: var(--warning, var(--accent)); }
.order-head__mark--muted { background: var(--hover-wash); color: var(--muted); }
.order-head__mark--danger { background: var(--danger-soft); color: var(--danger); }
.order-facts { display: grid; gap: .9rem; margin: 0; }
.order-facts > div { display: grid; gap: .15rem; }
.order-facts dt { color: var(--muted); font-size: .82rem; }
.order-facts dd { margin: 0; color: var(--ink); font-weight: 600; display: grid; gap: .15rem; justify-items: start; }
.order-facts small { color: var(--muted); font-weight: 400; font-size: .88rem; }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; }
.order-actions__note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .88rem; }

/* These cards hold a page's facts — they do not lift like a card you follow. */
.checkout-summary.card:hover, .cart-page__sum.card:hover, .order-page .card:hover { transform: none; border-color: var(--line); box-shadow: none; }

/* ---- A number field with − and + (main.js, a field with the class stepper) ----
   The field's own border, background and height move to the wrapper; the input
   inside is bare. Its context sizes it: the buy box's 48px, the cart's line. */
.qty {
  display: inline-flex; align-items: stretch; height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface);
  overflow: hidden;
}
.qty:focus-within { border-color: var(--mark, var(--primary)); }
.qty input[type='number'] {
  width: 2.8rem; height: auto; min-width: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  text-align: center; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.qty input[type='number']:focus { outline: none; }
.qty input[type='number']::-webkit-inner-spin-button,
.qty input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.qty__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; flex: 0 0 auto;
  padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.qty__btn svg { width: 16px; height: 16px; }

.qty__btn:hover:not(:disabled) { color: var(--mark, var(--primary)); background: var(--hover-wash); }

.qty__btn:disabled { opacity: .35; cursor: default; }

/* The price before a markdown, beside the price — smaller, muted, struck through. */
.price-was { font-size: .62em; font-weight: 500; color: var(--muted); margin-left: .35em; text-decoration-thickness: 1px; }