/* =====================================================
   The site stylesheet — parametric, shared by every design
   -----------------------------------------------------
   NO colors or fonts live in this file. Every value comes
   from the CSS custom properties that layouts/layout.twig
   renders out of the design's design.yml > tokens/fonts.
   Change the design, the whole site re-dresses itself — this file never needs
   an edit for a restyle.
   ===================================================== */

:root {
  /* 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));
  --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));
  --container: 1140px;
}

* { box-sizing: border-box; }

/* 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 theme 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);
}

/* 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;
}

.container--narrow { max-width: 860px; }

/* Escape the container for one section: its heading stays in the column, its
   content runs edge to edge. Every block sitting in the same centred column is
   the single loudest "this is a template" signal a page can send — measured on
   a generated page, where all eleven sections came out at exactly 1320px.

   Done by widening the container rather than the usual `width: 100vw` +
   negative-margin trick: 100vw counts the scrollbar, so that version overflows
   horizontally by ~15px on any page long enough to have one — which is every
   page this would be used on. */
/* Not padding:0 — edge to edge with the content literally touching the
   viewport reads as unfinished rather than wide. A small gutter keeps
   the block full-bleed and still lets it breathe. */
.compare > .container { max-width: none; padding: 0 clamp(16px, 2.5vw, 40px); }
.compare .section-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.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 {
  display: block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .76rem;
  font-weight: 600;
  color: var(--mark, var(--primary));
  margin-bottom: 1rem;
}

/* ---------- 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)); }
.btn-ghost:hover { background: var(--hover-wash); border-color: var(--ink); color: var(--ink); box-shadow: none; }

.btn-light { background: var(--bg); border-color: var(--bg); color: var(--ink); }

.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; }

/* The `--back` modifier was used in pages/product.twig and never styled, so a
   link reading «Назад до магазину» carried the base arrow — pointing forward.
   The arrow leads: before the text, and to the left. */
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: '← '; transition: margin .2s ease; }
.link-arrow--back:hover::before { margin-right: 4px; }

.link-back {
  display: inline-block;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 2rem;
}
.link-back:hover { color: var(--mark, var(--primary)); }

/* ---------- Header ---------- */


/* A label never wraps: two-line items are what broke the header first. */


/* «More» — items past the fourth (partials/header.twig). Hover or keyboard
   focus opens it; no script. The panel is a plain block on mobile (below). */


 /* hover bridge to the panel */


/* --ink, not --mark: on a dark palette the derived readable colour
   lands in the same grey as --muted, so hover changed nothing you could see. */


.hero--centered .lead { margin-left: auto; margin-right: auto; }

/* A scrim changes the GROUND — so it has to change what is written on it.
   Without the two blocks below, `overlay: dark` laid a black veil over the
   photo and left the copy in the palette's dark ink: dark text on a darkened
   picture. Measured on a real page: 1.4:1, against the 4.5:1 the guidelines
   ask for. `overlay: light` fails the same way in reverse on a dark palette.

   The colours here are literals, and deliberately so — for the same reason
   the scrim above is one. A veil is not a brand colour: black-with-white-on-it
   is what "dark overlay" MEANS, and a token cannot promise that, because the
   same token is light in one palette and dark in another. The accent keeps
   its token: it stays vivid in every palette we ship.

   Worst cases were worked out rather than eyeballed. A white photo under the
   dark veil gives 4.8:1; a black photo under the light veil gives 8.7:1. */
.hero--media-background.hero--overlay-dark .lead {
  color: #f7f5f2;
}
.hero--media-background.hero--overlay-dark .btn-ghost {
  color: #f7f5f2;
  border-color: rgba(247, 245, 242, .55);
}
.hero--media-background.hero--overlay-dark .btn-ghost:hover {
  background: rgba(247, 245, 242, .12);
}

.hero--media-background.hero--overlay-light .lead {
  color: #1c1a18;
}
.hero--media-background.hero--overlay-light .btn-ghost {
  color: #1c1a18;
  border-color: rgba(28, 26, 24, .45);
}
.hero--media-background.hero--overlay-light .btn-ghost:hover {
  background: rgba(28, 26, 24, .08);
}

/* The transparent header sits OVER that same first section, so it inherits
   the same problem: dark links on a darkened photo all but disappeared.
   `:has()` keys it on the actual neighbour — the header only lightens when a
   dark veil is underneath it, and stays untouched on every other page. */

/* The mark is an inline SVG on currentColor, so it follows the rule above —
   except the accent dot, which carries its own fill and must stay accent. */


/* The pill language switcher hovers to `--hover-wash`, which is derived from
   the LIGHT page ground — correct everywhere except right here, where these
   same rules have already turned the text light. Light text on a light wash:
   the hovered code all but disappears while its neighbour stays readable. On
   this ground the veil has to come from the light side too. */


.hero .lead { margin-bottom: 2.4rem; }

/* ---------- Sections ---------- */
/* The page's density (body.density-*) reaches every section as variables: --section-pad here, --head-gap,
   --grid-gap and --card-gap below — no component reads the body's class. */
.section { padding: var(--section-pad, clamp(3.8rem, 8vw, 6.5rem)) 0; }

.section--alt, .section-tinted {
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* 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); }

/* ---------- Feature cards (sections/features) ---------- */
.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(--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);
}

/* Count beside a filter chip: quieter than the label it follows — it answers
   "is there anything here", it is not the thing being chosen. */
.chip-count { opacity: .55; font-variant-numeric: tabular-nums; margin-left: .15rem; }

.services--columns-1 .cards-grid, .products--columns-1 .cards-grid { grid-template-columns: 1fr; }
.services--columns-2 .cards-grid, .products--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, .products--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(--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-index {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.card h3 { margin-bottom: .5rem; }
.card p { font-size: .95rem; flex: 1; }

/* A visit's people (cards/booking.twig): a quiet line under the text. */
.card-meta { display: block; margin-top: .6rem; font-size: .85rem; color: var(--muted); }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}

.price-chip {
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 75%, var(--ink));
  font-weight: 600;
  font-size: .85rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Duration sits next to the price and reads as secondary to it — a booking
   detail, not the offer. */
.meta-chip {
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
}

.card-media { display: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Pricing list (sections/pricing) ---------- */
.rate-list { list-style: none; margin: 0; padding: 0; }

.rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem 0;
  border-bottom: 1px dashed var(--line);
}
.rate-row:last-child { border-bottom: none; }

.rate-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.rate-name:hover { color: var(--mark, var(--primary)); }
.rate-desc { font-size: .9rem; color: var(--muted); margin: .2rem 0 0; max-width: 46ch; }
.rate-price { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- About strip / values / steps ---------- */
.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.about-strip h2 { margin-bottom: 0; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.value-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--mark, var(--primary));
  display: block;
  margin-bottom: .6rem;
}

/* ---------- Category chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }

.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; }

/* ---------- Catalogue: categories, a bar, the goods ----------
   pages/listing/product.twig. The categories are a row of chips that stays
   under the sticky header where there is room and scrolls sideways when it
   does not fit (js/catalog.js adds ‹ › at its ends on a desktop). Then a
   bar: how many were found, the quick filters, the order. */
/* The list's head is every page's head now; the class stays for designs that name it. */
.section.catalog { padding-top: 1.5rem; }

.catalog-cats {
  position: sticky;
  top: var(--header-sticky-h, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.catalog-cats .container { position: relative; }
.catalog-cats__row {
  display: flex; gap: .5rem;
  padding: .8rem 0;
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.catalog-cats__row::-webkit-scrollbar { display: none; }
.catalog-cats .chip { flex: none; white-space: nowrap; }
/* ‹ › — only while there is somewhere to scroll, fading into the ground. */
.catalog-cats__scroll {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  width: 3.2rem; padding: 0; border: 0;
  color: var(--ink); font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.catalog-cats__scroll[hidden] { display: none; }
.catalog-cats__scroll--left { left: 24px; justify-content: flex-start; background: linear-gradient(to right, var(--bg) 45%, transparent); }
.catalog-cats__scroll--right { right: 24px; justify-content: flex-end; background: linear-gradient(to left, var(--bg) 45%, transparent); }
.catalog-cats__scroll:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }

.chip.is-disabled { opacity: .45; cursor: default; pointer-events: none; }

.catalog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: 1.4rem; }
.catalog-found { margin: 0 auto 0 0; color: var(--muted); font-size: .95rem; }
.catalog-found strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.catalog-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chip--toggle.is-active::before { content: '✓'; margin-right: .35rem; }
.catalog-sort { position: relative; display: inline-flex; margin: 0; }
.catalog-sort__icon { display: none; }
.catalog-sort select,
.catalog-sort .select-btn { padding: .5rem 2.2rem .5rem .9rem; font-size: .88rem; border-radius: var(--radius-small); }
/* One height for everything in the row — the quick filters and the order — so the row (and the
   list under it) does not move when a filter is not offered. The phone's order icon is 2.4rem too. */
.catalog-controls .chip { display: inline-flex; align-items: center; height: 2.4rem; box-sizing: border-box; }
.catalog-sort select,
.catalog-sort .select-btn { height: 2.4rem; box-sizing: border-box; }

.catalog-more { display: grid; justify-items: center; gap: .6rem; margin-top: 2.4rem; }
.catalog-shown { margin: 0; color: var(--muted); font-size: .88rem; }
.catalog-more + [data-catalog-pages] .pagination { margin-top: 1.4rem; }
.catalog-empty { display: grid; justify-items: start; gap: 1rem; padding: 1rem 0 2rem; }

@media (max-width: 560px) {
  .catalog-cats { position: static; }
  .catalog-found { flex-basis: 100%; }
  .catalog-controls { width: 100%; flex-wrap: nowrap; }
  /* The order as a round icon; the select (or the drawn one) lies over it,
     unseen, and opens on a tap. A dot says an order other than the default is on. */
  .catalog-sort { margin-left: auto; flex: none; width: 2.4rem; height: 2.4rem; }
  .catalog-sort__icon {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink);
  }
  .catalog-sort__icon::before {
    content: ''; width: 1.1rem; height: 1.1rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .catalog-sort.is-set .catalog-sort__icon { border-color: var(--ink); }
  .catalog-sort.is-set::after {
    content: ''; position: absolute; top: .1rem; right: .1rem;
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--mark, var(--primary)); border: 2px solid var(--bg);
  }
  .catalog-sort .select-wrap { position: absolute; inset: 0; }
  .catalog-sort .select-wrap::after { display: none; }
  .catalog-sort .select-wrap select,
  .catalog-sort .select-btn { position: absolute; inset: 0; width: 100%; min-width: 0; max-width: 100%; height: 100%; padding: 0; font-size: 16px; opacity: 0; cursor: pointer; }
  /* 16px: iOS zooms the page into a smaller field on a tap. */
  .catalog-sort .select-list { left: auto; right: 0; min-width: 12rem; }
  .catalog-sort:has(select:focus-visible) .catalog-sort__icon,
  .catalog-sort:has(.select-btn:focus-visible) .catalog-sort__icon { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
  /* Two to a row on a phone: a catalogue shows twice as much, and the card
     tightens itself (its container query). */
  .catalog .products-grid,
  .product-related .products-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .catalog .product-card,
  .product-related .product-card { padding: .9rem; }
}

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


.article-photo {
  border-radius: var(--radius);
  margin: 2rem 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);
}

/* ---------- Buy box ---------- */
.buy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 1.6rem 1.8rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Facts column: price is the headline, duration the supporting line. Both
   render without any commerce feature being on. */
.buy-facts { display: flex; flex-direction: column; gap: .15rem; }

.buy-duration {
  font-size: .9rem;
  color: var(--muted);
}

.buy-label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.buy-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}

.buy-form { display: flex; align-items: center; gap: .8rem; }

.buy-qty {
  width: 74px;
  height: 48px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
}
.buy-qty:focus { outline: none; border-color: var(--mark, var(--primary)); }


/* ---------- Booking box (pages/service) ---------- */
.book-box {
  /* Landed on by #booking after a date pick; clear the sticky header. */
  scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem);
  margin-top: 2.5rem;
  padding: 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.book-box h2 { font-size: 1.5rem; }
.book-hint { font-size: .92rem; color: var(--muted); }
.stay-rules { font-size: .88rem; color: var(--muted); margin: -.2rem 0 1rem; }

/* ---------- Booking page: article + card ----------
   Booking is the page's main act. Wide: the article left, the card right and
   in view from the first scroll. Phone: name, lead, photo, then the card,
   then the long description — grid areas, so the DOM stays one order. */
.article--split {
  display: grid;
  grid-template-areas: "intro" "aside" "body";
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 960px) {
  .article--split {
    grid-template-areas: "intro aside" "body aside";
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    grid-template-rows: auto 1fr;
    column-gap: 3.5rem;
    row-gap: 1rem;
    align-items: start;
  }
  .split__aside { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
}
.split__intro { grid-area: intro; }
.split__aside { grid-area: aside; }
.split__body  { grid-area: body; }
.split__intro .article-photo { margin-bottom: 0; }

.book-card {
  scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem);
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.book-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; margin-bottom: 1rem; }
.book-card__head h2 { font-size: 1.3rem; margin: 0 0 .2rem; }
.book-card__what { margin: 0; font-size: .92rem; color: var(--muted); }
/* Price and length on one line: right-aligned under a wrapped heading, the
   length sat indented under the price, belonging to neither. */
.book-card__facts { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; flex-shrink: 0; }
.book-card__price { font-size: 1.35rem; color: var(--ink); }
.book-card__duration { font-size: .85rem; color: var(--muted); }
.book-card .cal { max-width: none; margin: .6rem 0 1rem; }
/* The day picker sits in a wrapping row with the person: the month takes the whole line, as the stay's does. */
.book-date-form .cal { flex: 1 1 100%; }
.book-card[aria-busy='true'] { opacity: .6; transition: opacity .15s; }
.book-card .book-fields { grid-template-columns: 1fr; }
.book-card .book-empty { color: var(--muted); font-size: .92rem; }

.book-date-form { margin: 1.2rem 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.book-label { font-size: .85rem; font-weight: 600; color: var(--ink); }

.book-date-form input[type='date'] {
  padding: .7rem 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;
}
.book-date-form input[type='date']:focus { outline: none; border-color: var(--mark, var(--primary)); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .55rem;
  margin-bottom: 1.4rem;
}

.slot input { position: absolute; opacity: 0; pointer-events: none; }

.slot span {
  display: block;
  text-align: center;
  padding: .6rem 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}

.slot:hover span { border-color: var(--mark, var(--primary)); }
.slot input:checked + span {
  background: var(--primary);
  border-color: var(--mark, var(--primary));
  color: var(--primary-ink);
}
.slot input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.book-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }

.book-fields input, .book-notes {
  width: 100%;
  padding: .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;
}
.book-fields input:focus, .book-notes:focus { outline: none; border-color: var(--mark, var(--primary)); }

.book-notes { display: block; margin-bottom: 1.2rem; resize: vertical; }

.book-empty {
  padding: 1.2rem;
  background: var(--tint);
  border-radius: var(--radius-small);
  color: var(--muted);
  text-align: center;
}

/* ---------- Testimonials (sections/testimonials) ---------- */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap, 1.4rem);
}

.quote-card {
  margin: 0;
  gap: var(--card-gap, normal);
  background: var(--card-bg, var(--surface));
  border: var(--card-border, 1px solid var(--line));
  border-radius: var(--radius);
  box-shadow: var(--card-shadow, none);
  padding: 1.8rem;
}

.quote-card blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
  line-height: 1.5;
}
.quote-card blockquote::before { content: '\201C'; color: var(--accent); margin-right: .15em; }
.quote-card blockquote::after { content: '\201D'; color: var(--accent); margin-left: .1em; }

.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
}

.quote-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--mark, var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ---------- Team (the staff component; cards/people.twig) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap, 1.4rem);
}

.cta--band .cta-inner h2 { color: var(--primary-ink); }
.cta--band .cta-inner p { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin-bottom: 2rem; }

.cta--plain .cta-inner p { color: var(--body-text); margin-bottom: 2rem; }

.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; }

/* ---------- 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-success, .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); }

/* ---------- Auth pages (account/login, account/register) ---------- */
.auth-inner { max-width: 460px; margin: 0 auto; }

.auth-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4rem;
}

.auth-form input[type='email'],
.auth-form input[type='password'],
.auth-form input[type='text'] {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .97rem;
  margin-bottom: .35rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--mark, var(--primary));
  box-shadow: 0 0 0 1px var(--mark, var(--primary));
}

/* `.auth-form label` (a field's label: a block) outweighed this and the box
   sat on the text's baseline, a space away from it. */
.auth-form .auth-remember {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9rem;
  margin: .6rem 0 1.2rem;
  cursor: pointer;
}

.auth-form .btn { width: 100%; }

.auth-switch { margin-top: 1.6rem; text-align: center; font-size: .92rem; color: var(--muted); }
.auth-switch a { color: var(--mark, var(--primary)); font-weight: 600; }

/* ---------- Account page ---------- */
.account-grid { display: grid; gap: 2.2rem; max-width: 760px; }

.account-block h2 { font-size: 1.4rem; margin-bottom: 1rem; }

.account-list { list-style: none; margin: 0; padding: 0; }

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  margin-bottom: .6rem;
}

.account-row-title { display: block; font-weight: 600; color: var(--ink); }
.account-row-sub { display: block; font-size: .85rem; color: var(--muted); }
.account-row-side { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.account-row-price { font-weight: 600; color: var(--ink); }

.account-cancel { font-size: .85rem; color: var(--danger); }
.account-cancel:hover { text-decoration: underline; }

.status {
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--muted);
}
.status--confirmed, .status--paid { background: var(--primary-soft); color: var(--mark, var(--primary)); }
.status--new { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.status--cancelled { background: var(--danger-soft); color: var(--danger); }

.account-actions { padding-top: .5rem; }

/* ---------- A booking's / an order's own page ---------- */
.receipt-inner { text-align: center; max-width: 560px; padding-top: 2rem; margin: 0 auto; }

.receipt-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--mark, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.receipt-mark svg { width: 30px; height: 30px; }

.receipt-inner .lead { margin: 0 auto 2rem; }

.receipt-list {
  margin: 0 0 2.2rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.receipt-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.receipt-list dt { color: var(--muted); font-size: .9rem; }
.receipt-list dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }

.receipt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

/* ---------- Pagination (partials/pagination.twig) ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  margin-top: 3.2rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .7rem;
  border-radius: var(--radius-small);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: .92rem;
  font-weight: 600;
  color: var(--body-text);
  transition: all .2s ease;
}

a.page-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px var(--shade);
}

.page-btn.is-current {
  background: var(--primary);
  border-color: var(--mark, var(--primary));
  color: var(--primary-ink);
}

.page-btn.is-gap { border-color: transparent; color: var(--muted); }

.page-arrow { font-size: 1.05rem; }
.page-arrow.is-disabled { opacity: .35; }

/* ---------- Footer ---------- */


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cards-grid, .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .services .cards-grid, .products .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .features--columns-3 .features-grid, .features--columns-4 .features-grid,
  .steps--columns-3 .features-grid, .steps--columns-4 .features-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes-grid { grid-template-columns: 1fr; }
  .about-strip, .cols { grid-template-columns: 1fr; gap: 2rem; }
  
  
  /* The drawn mark is decoration and goes; a PHOTOGRAPH is content and stays.
     This rule predates hero photos, so it hid them too — and the builder's own
     preview pane is narrower than this breakpoint, which meant an owner who had
     just been given a hero image saw no image at all while looking straight at
     the site. Shorter here, because it now sits under the copy instead of
     beside it. */
  
  
  /* The copy stops being a left column here and spans the whole width, so it
     lands on the open side of the gradient — measured at 6.2:1 on a mid-tone
     photo, and a darker one goes under the line. No far side to spare means
     an even veil, which is the one place the flat wash is the right answer. */
  
  .book-fields { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cards-grid, .values-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; }
  

  .section-head { flex-direction: column; align-items: var(--head-align, start); gap: .8rem; }

  

  .account-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .account-row-side { width: 100%; justify-content: space-between; }

  .rate-row { flex-direction: column; gap: .3rem; }

  /* Mobile nav: a button (js/nav.js puts .is-open on the header). The
     checkbox selectors stay for a design's own older header.twig. */
  
  

  

  

  /* In the burger the fold is pointless: show every page as one list. */
  
  
  
  
  
  
  
}

/* ---------- Layout knobs ----------
   Body classes rendered from design.yml `layout:` — see layouts/layout.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) */


/* header: transparent — floats over the hero, no ground of its own */


/* footer: minimal — just the legal line, no link grid */


/* nav: left — desktop sidebar; below 960px the burger takes over as usual */


/* ---------- Section variants ----------
   Deliberately near the END of the file, right before their media
   queries. Variant classes carry the same specificity as the base
   `.cards-grid` / `.quotes-grid` they override, so at equal weight the
   later rule wins — defined up beside the base grids, the spotlight
   column count silently lost and rendered two columns instead of three.
   Keep the whole variant layer down here. */

/* ---------- Services variants ----------
   One markup shape, three layouts. Everything below re-arranges the SAME
   elements the cards variant uses — no variant owns markup or copy of its
   own, which is what keeps the translation-key scan whole. */

/* 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-index {
  margin-bottom: 0;
  margin-right: .2rem;
  display: inline-block;
}
.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;
}
.services--list .card-foot { margin-top: 0; flex: 0 0 auto; }

/* alternating — image beside text, sides swapping row to row.

   Grid, not flex-direction: row-reverse. Reversing the row flips ALL three
   children, so on even rows the price and the "Details" link detached from
   their own text and floated to the far left of the card — the layout read as
   two unrelated columns. Explicit placement moves only the image, which is the
   one thing that is supposed to alternate. */
.cards-grid--alternating { grid-template-columns: 1fr; gap: 1.2rem; }

.cards-grid--alternating .card {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: .5rem 2rem;
  padding: 1.4rem;
}
.cards-grid--alternating .card-media {
  display: block;
  grid-row: 1 / 3;
  grid-column: 1;
  aspect-ratio: 3 / 2;
  max-height: 14rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.cards-grid--alternating .card-body {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  min-width: 0;
}
.cards-grid--alternating .card-body p { margin-bottom: 0; }
.cards-grid--alternating .card-foot {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  justify-content: flex-start;
  margin-top: .4rem;
}

/* Swap the TRACKS as well as the placement: moving the image to column 2
   without this leaves it floating in the wide text track with dead space
   beside it, and squeezes the copy into the narrow one. */
.cards-grid--alternating .card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
}
.cards-grid--alternating .card:nth-child(even) .card-media { grid-column: 2; }
.cards-grid--alternating .card:nth-child(even) .card-body,
.cards-grid--alternating .card:nth-child(even) .card-foot { grid-column: 1; }

/* A record without a photo gets the full width instead of an empty column —
   a half-illustrated area is the normal state, not an edge case. */
.cards-grid--alternating .card:not(:has(.card-media)) { grid-template-columns: minmax(0, 1fr); }
.cards-grid--alternating .card:not(:has(.card-media)) .card-body,
.cards-grid--alternating .card:not(:has(.card-media)) .card-foot { grid-column: 1; }

/* ---------- The service card (partials/cards/service.twig) ----------
   One card for both kinds of service — a visit booked by the time, a service
   with a fixed price. Built like the product card: the whole card is the
   link, the action above it, the price always the last line. Two looks:
   `cards`, and `list` — a price list, the prices in one column on the right. */
.svc-card { position: relative; padding: 0; overflow: hidden; container-type: inline-size; }
.svc-card:hover { transform: translateY(-2px); }
.svc-card__link { color: inherit; }
.svc-card__link::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.svc-card__link:focus-visible { outline: none; }
.svc-card:has(.svc-card__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.svc-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hover-wash); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-card__body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.3rem 1.4rem 1.2rem; }
.svc-card__main { display: grid; gap: .3rem; }
.svc-card .svc-card__title {
  margin: 0; /* a design's `.card h3` margin would set the rows' height apart */ font-size: 1.1rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; max-height: 2.6em;
}
.svc-card__excerpt {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--body-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.2em;
}
.svc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .85rem; color: var(--muted); }
.svc-card__meta:empty { display: none; }
.svc-card__dur { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.svc-card__dur svg { width: 1rem; height: 1rem; }
.svc-card__staff { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.svc-card__names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatars { display: inline-flex; }
.avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--surface); background: var(--hover-wash);
  display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--ink);
}
.avatar + .avatar { margin-left: -.45rem; }
.avatar--more { font-size: .65rem; color: var(--muted); }
.svc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .5rem; min-height: 2.5rem; }
.svc-card__price { display: grid; min-width: 0; color: var(--ink); }
.svc-card__price .price-main { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.svc-card__price .price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.svc-card__price .price-from, .svc-card__price .price-unit { font-size: .8rem; color: var(--muted); }
.svc-card__price .price-was { font-size: .8rem; color: var(--muted); margin: 0; }
.svc-card__price .price-ask { font-size: .92rem; font-weight: 600; }
.svc-card__action { position: relative; z-index: 1; flex: none; }
.svc-card__book {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.svc-card__book svg { width: 1rem; height: 1rem; }
.svc-card__book:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); background: var(--hover-wash); }
.svc-card__book:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
/* «Order»: the same pill as «Book», a submit button (its label is escaped
   text), so the cart is a mask in the text colour, like the product card's. */
.svc-card__cart { margin: 0; }
.svc-card__book--cart { font-family: inherit; line-height: inherit; cursor: pointer; }
.svc-card__book--cart::before {
  content: ''; flex: none; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
@container (max-width: 240px) {
  .svc-card__excerpt { display: none; }
  .svc-card__book span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .svc-card__book { padding: .6rem; }
  .svc-card__book--cart { font-size: 0; gap: 0; } /* the word stays in aria-label */
}

/* list: a price list — name and a line | how long, who | the price, right-aligned | the action. */
.services--list .cards-grid.svc-grid { grid-template-columns: 1fr; gap: 0; }
/* Stronger than a design's card look (`cards-shadow`…): a price list's rows are lines, not cards. */
.services--list .svc-grid > .svc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem 8.5rem 9rem;
  align-items: center; column-gap: 1.2rem;
  padding: 1.1rem .6rem; border-radius: 0; border-width: 0 0 1px; border-color: var(--line); background: none; box-shadow: none;
}
.services--list .svc-grid > .svc-card:first-child { border-top: 1px solid var(--line); }
.services--list .svc-grid > .svc-card:hover { transform: none; background: var(--hover-wash); border-color: var(--line); box-shadow: none; }
.services--list .svc-card__media { display: none; }
.services--list .svc-card__body,
.services--list .svc-card__foot { display: contents; }
.services--list .svc-card__title { min-height: 0; max-height: none; -webkit-line-clamp: 2; font-size: 1.02rem; }
.services--list .svc-card__excerpt { -webkit-line-clamp: 1; max-height: 1.6em; font-size: .88rem; color: var(--muted); }
/* Every row as tall as one with a line under the name: a service with no excerpt keeps the row's
   height, its name in the middle, so the price list keeps its rhythm. */
.services--list .svc-card__main { min-height: calc(1.02rem * 1.3 + .3rem + .88rem * 1.6); align-content: center; }
.services--list .svc-card__meta { display: flex; }
.services--list .svc-card__names { display: none; }
.services--list .svc-card__price { justify-items: end; text-align: right; }
.services--list .svc-card__action { justify-self: end; }
@media (max-width: 900px) {
  .services--list .svc-grid > .svc-card {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .5rem;
  }
  /* The action shares the second line with the meta across both columns, so
     its width does not take the price's column and narrow the name. */
  .services--list .svc-card__main { grid-column: 1; grid-row: 1; }
  .services--list .svc-card__price { grid-column: 2; grid-row: 1; align-self: start; }
  .services--list .svc-card__meta { grid-column: 1; grid-row: 2; }
  .services--list .svc-card__action { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .services--cards .svc-grid { grid-template-columns: 1fr; }
}

/* ---------- Testimonials variants ---------- */

/* spotlight — the first quote carries the section, the rest support it. */
.testimonials--spotlight .quotes-grid { grid-template-columns: repeat(3, 1fr); }
.testimonials--spotlight .quotes-grid .quote-card:first-child {
  grid-column: 1 / -1;
  padding: 2.4rem;
  text-align: center;
}
.testimonials--spotlight .quotes-grid .quote-card:first-child blockquote {
  font-size: 1.6rem;
  line-height: 1.4;
  max-width: 46ch;
  margin-inline: auto;
}
.testimonials--spotlight .quotes-grid .quote-card:first-child figcaption { justify-content: center; }

/* strip — one horizontal row, scroll-snapped. Deliberately NOT an
   auto-playing marquee: text that slides away mid-sentence is unreadable,
   and an animation nobody can pause is an accessibility problem. */
.testimonials--strip .quotes-grid {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .6rem;
  scrollbar-width: thin;
}
.testimonials--strip .quotes-grid .quote-card {
  flex: 0 0 min(23rem, 78vw);
  scroll-snap-align: start;
}

/* ---------- Features variants ---------- */

/* numbered — the figure carries the eye, the card chrome gets out of the way. */
.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); }

/* ---------- Team variants ---------- */

/* list — a row a person: a long roster where a grid of faces turns into wallpaper. */
.staff--list .team-grid { grid-template-columns: 1fr; gap: 0; max-width: 56rem; border-top: 1px solid var(--line); }

/* strip — one scrolling row of faces; scroll-snap, no autoplay. */
.staff--strip .team-grid {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* A scroller clips everything outside its box, card shadows included, so
     the box is grown by the shadow's reach and pulled back by the same
     margin — the cards stay where they were, the shadow gets room. */
  padding: 1rem 1rem 2rem;
  margin: -1rem -1rem -1.4rem;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
}
.staff--strip .team-grid .person { flex: 0 0 min(15rem, 60vw); scroll-snap-align: start; }

/* ---------- FAQ variants ---------- */

/* ---------- Gallery variants ---------- */

/* ---------- Pricing variants ---------- */

/* cards — a tile per rate, for short menus where rows look thin. */
.rate-list--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.rate-list--cards .rate-row {
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.rate-list--cards .rate-price {
  font-size: 1.5rem;
  color: var(--mark, var(--primary));
}


/* ---------- 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; }

/* ---------- Header layouts ----------
   The header is the first thing anyone sees and the one block every page
   shares, so a single composition made every site look related. Four layouts
   re-arrange the SAME two groups the markup ships — .nav-links (the pages)
   and .nav-utils (contact, account, language) — with no variant owning markup
   or copy of its own.

   Deliberately below the base header rules and above the responsive block:
   equal specificity means source order decides, and everything here is undone
   at mobile width where the burger takes over. */


/* classic — logo left, everything else right (the original). Nothing to do. */

/* split — logo in the middle, pages on the left, utilities on the right.
   The most "designed" of the four; wants a short nav, which is why the
   catalog structures keep 4–5 items. */


/* Neither group may reach the absolutely-centred logo. */


/* utility-bar — a thin top row for language and account, the main row below
   with the pages and the contact button. Reads as a business that expects to
   be phoned: the utilities stop competing with navigation. */

/* `.site-nav` dissolves so its two groups become children of .header-inner —
   otherwise `width: 100%` on the utility strip measures the nav box and the
   "two rows" collapse back into one (which is exactly what happened first
   time round, and only geometry showed it). */


/* The contact button stays IN the strip rather than the main row: it lives
   inside .nav-utils, and CSS cannot lift a child out of its group — the first
   attempt "moved" it by hiding it, which simply lost the call to action.
   Contact + account + language together read as one coherent utility strip
   anyway, with the pages left alone below. */


/* centered — logo on its own line, navigation centred beneath it. Editorial
   and calm; suits portfolios and restaurants more than a service business. */


/* ---------- Language switcher looks ----------
   Same markup — a flat list of codes — dressed four ways. It sits in the
   header next to everything else that repeats site to site, and two letters
   in the corner are exactly the kind of detail people register without
   noticing. */

/* plain — bare codes, active in the brand colour (the original). */

/* pills — each code its own chip; the active one filled. Reads deliberate,
   suits sites where the language choice actually matters to visitors. */


/* divided — codes split by a hairline, the quietest way to group them. */


/* boxed — one segmented control. The most "app-like" of the four; good when
   the header is otherwise sparse and needs an anchor on the right. */


/* ---------- Footer layouts ----------
   The footer carries every page too, and `layout.footer` only ever switched
   the whole grid on or off. These arrange the SAME three blocks — brand, menu,
   contacts — four ways. */

/* columns — brand wide, menu and contacts beside it (the original). */

/* brand-split — brand on the left, the two link groups pushed right together.
   Reads as a company signature rather than a sitemap. */


/* centered — one column, everything centred. Quiet close to a short site. */


/* bar — one compact line: brand, links, contacts. No titles, minimal height;
   for sites whose footer is a formality, not a directory. */


/* flex-direction is spelled out because the base rule sets `column` — without
   it the "single bar" rendered four stacked links, which is the one thing this
   layout is not. */


/* ---------- 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));
}

/* ---------- Story variants ---------- */

.story--narrow .lead { margin-inline: auto; }

/* quote — the opening paragraph set as a pull quote. For a founder's line or
   a promise worth slowing down for. */
.story--quote .lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--mark, var(--primary));
  padding-left: 1.6rem;
  max-width: 46ch;
}

/* ---------- Section-variant responsiveness ----------
   Deliberately LAST in the file. The shared breakpoints above reset
   `.cards-grid` / `.quotes-grid` to 2 and 1 columns, and they carry the same
   specificity as the variant classes — so at equal weight the later rule
   wins, and anything placed next to the variant definitions further up would
   quietly lose on tablet. Keep these here. */

@media (max-width: 960px) {
  /* Both variants are single-column by design; the shared reset would put
     them back into a two-column grid. */
  .services--list .cards-grid,
  .cards-grid--alternating { grid-template-columns: 1fr; }

  .testimonials--spotlight .quotes-grid { grid-template-columns: repeat(2, 1fr); }
  
  .testimonials--strip .quotes-grid { display: flex; }
}

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

  /* Image over text: side-by-side at phone width leaves neither enough room,
     and the alternating rhythm is invisible in one column anyway. */
  .cards-grid--alternating .card,
  .cards-grid--alternating .card:not(:has(.card-media)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .9rem;
  }
  .cards-grid--alternating .card-media,
  .cards-grid--alternating .card:nth-child(even) .card-media {
    grid-row: 1;
    grid-column: 1;
    max-height: 11rem;
  }
  .cards-grid--alternating .card-body,
  .cards-grid--alternating .card:nth-child(even) .card-body { grid-row: 2; grid-column: 1; }
  .cards-grid--alternating .card-foot,
  .cards-grid--alternating .card:nth-child(even) .card-foot { grid-row: 3; grid-column: 1; }

  /* The list row keeps its shape but lets the price wrap under the title
     rather than squeezing the name into two characters. */
  .services--list .card:not(.svc-card) { flex-wrap: wrap; gap: .8rem; }
  .services--list .card-foot { width: 100%; justify-content: flex-start; }

  .testimonials--spotlight .quotes-grid { grid-template-columns: 1fr; }

  /* Footer and step layouts collapse on a phone: three columns of links do
     not fit, and a horizontal timeline becomes a line of crushed words. */
  
  

  
  .steps--timeline .feature-card { text-align: left; padding: 0; }

  
  

  /* Below the burger breakpoint every header layout collapses to the same
     thing — logo + toggle, everything else inside the dropdown. Leaving a
     variant active here produced an absolutely-positioned logo over the
     menu button, which is the kind of break only a phone shows. */
  
  
  

  /* `.site-nav` must go back to being a real box: it IS the dropdown the
     burger toggles, and `display: contents` leaves nothing to position — the
     menu items scattered into the header bar instead. Desktop-only trick,
     undone here. */
  
  

  

  /* The multi-column variants collapse to one column on a phone; `columns`
     and CSS `columns:` both need saying, they are different properties. */
  
  
  .rate-list--cards { grid-template-columns: 1fr; }
  .features--numbered .feature-card { padding-right: 0; }
  .testimonials--spotlight .quotes-grid .quote-card:first-child { padding: 1.6rem; }
  .testimonials--spotlight .quotes-grid .quote-card:first-child blockquote { font-size: 1.25rem; }
}

/* --- 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 theme 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 js/select.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;
}
.auth-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 1px var(--mark, var(--primary)); box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 1px var(--mark, var(--primary)); }
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); }

/* ===========================================================================
   Section library, part two.

   Seven sections that answer questions the sections above do not: who works
   here and when, what it costs read as a menu, what the result looks like,
   how to get here. Each is optional — none renders without the content it
   needs, so a theme that lists them all still shows only what the site has.

   Same rules as everything above: colours only through var(--*), so the
   Design panel drives these too.
   =========================================================================== */


@media (max-width: 900px) {
    
    .masters__grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .masters__grid    { grid-template-columns: 1fr; }
}
/* Before/after — platform component (shop/stubs/components/compare).

   GEOMETRY. The whole state is one CSS variable, --compare-pos (0–100, percent of
   the container's width). The after image is clipped with
   clip-path: inset(0 0 0 var(--compare-pos)) — i.e. its LEFT part is hidden, so
   left of the divider you see "before", right of it "after". The divider
   line sits at left: var(--compare-pos). The JS only ever writes --compare-pos;
   everything that moves derives from it here, so the image and the line can
   never drift apart. */

/* --- questions in two columns -------------------------------------------- */
.faq-split__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; }
.faq-split__aside { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); align-self: start; }
.faq-split__lead { color: var(--muted); margin-top: .75rem; }
.faq-split__contacts { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.5rem; align-items: start; }
.faq-split__phone { font-family: var(--font-display); font-size: 1.4rem; color: var(--mark, var(--primary)); text-decoration: none; }

.faq-split__list { counter-reset: faq; }
.faq-split__item { border-top: 1px solid var(--line); }
.faq-split__item:last-child { border-bottom: 1px solid var(--line); }
.faq-split__item summary {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.35rem 0; cursor: pointer; list-style: none;
}
.faq-split__item summary::-webkit-details-marker { display: none; }
/* Numbering by counter: add a question in the panel and it renumbers itself. */
.faq-split__item summary::before {
    counter-increment: faq; content: counter(faq, decimal-leading-zero);
    font-family: var(--font-display); font-size: .95rem; color: var(--accent);
}
.faq-split__q { font-size: 1.1rem; }
.faq-split__sign { margin-left: auto; width: 1.1rem; height: 1.1rem; position: relative; flex: none; }
.faq-split__sign::before, .faq-split__sign::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1px; background: var(--ink); transition: transform .2s ease;
}
.faq-split__sign::after { transform: rotate(90deg); }
.faq-split__item[open] .faq-split__sign::after { transform: rotate(0deg); }
.faq-split__a { padding: 0 0 1.35rem 2.5rem; color: var(--muted); max-width: 62ch; }

.visit__week__special-title, .contact-hours__special-title { display: block; margin-top: .9rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--body-text)); }

@media (max-width: 900px) {
    .faq-split__grid { grid-template-columns: 1fr; gap: 2rem; }
    .faq-split__aside { position: static; }
}

/* --- 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. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.products-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.products-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.products-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.product-card { position: relative; overflow: hidden; container-type: inline-size; }
/* The body fills the card, so the foot (margin-top: auto) sits on its bottom in every card of a row. */
.product-card .card-body { display: flex; flex-direction: column; flex: 1; }

/* The whole card is the link: the title's link stretched over it. Anything
   else that must stay clickable (the cart) sits above it. */
.product-card__link::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.product-card__link:focus-visible { outline: none; }
.product-card:has(.product-card__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.product-card:hover { border-color: var(--card-hover-line, var(--mark, var(--primary))); transform: translateY(-2px); }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--hover-wash);
  overflow: hidden; /* a photo of another shape must not stretch the frame */
  border-radius: var(--radius-small);
  margin-bottom: 1.1rem; /* the title must not sit on the photo's edge */
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* `contain`: the product on its plate, whole — for goods shot on white. */
.products--media-contain .product-card__media { background: var(--plate, #fff); }
.products--media-contain .product-card__media img { object-fit: contain; padding: .9rem; }
.product-card.is-sold-out .product-card__media > * { opacity: .55; }

/* No photo yet: a drawn mark on the theme's own wash. A grey box reads as a
   broken image, and a stock photo would be somebody else's product. */
.product-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  opacity: .5;
}
.product-card__mark svg { width: 38%; max-width: 72px; }

/* The markdown, counted from the old price: a surface pill with the text
   colour — never the brand fill, which a photo or a dark design could swallow. */
.product-card__off {
  position: absolute; top: .6rem; left: .6rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--mark, var(--primary));
  font-size: .75rem; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Title and line: two lines each, the title always two lines tall, so a row
   of cards starts its foot at one height. */
.product-card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
  max-height: 2.6em; /* the clamp alone left a third line half-shown in newer Chromium */
}
.product-card p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--body-text);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 3.2em;
}

.product-card__foot {
  display: grid;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
}
/* The price is the card's last line: the cart beside it, the old price
   above it — so «from», a unit or a strike-through never move it. */
.product-card__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; min-height: 2.5rem; }
.product-card__price { display: grid; min-width: 0; color: var(--ink); }
.product-card__price .price-main { display: flex; align-items: baseline; gap: .35rem; min-width: 0; white-space: nowrap; }
.product-card__price .price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-card__price .price-from,
.product-card__price .price-unit { font-size: .8rem; color: var(--muted); }
.product-card__price .price-unit { overflow: hidden; text-overflow: ellipsis; }
.product-card__price .price-was { font-size: .8rem; margin: 0; color: var(--muted); }
.product-card__price .price-ask { font-size: .92rem; font-weight: 600; color: var(--ink); }
.product-card.is-sold-out .product-card__price .price { color: var(--muted); }

/* The cart: a quiet round button, above the card's link. The word stays for
   screen readers; the picture is a mask in the text colour. */
.product-card__cart { position: relative; z-index: 1; margin: 0; flex: none; }
.product-card__cart-btn {
  position: relative;
  display: block;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0; /* the label is aria-label; the icon is below */
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.product-card__cart-btn::before {
  /* Centred on its own: the hidden label still takes a line in the button's
     flow, and pushed a grid-centred icon up. */
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 1.1rem; height: 1.1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-card__cart-btn:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); background: var(--hover-wash); }
.product-card__cart-btn:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

/* A narrow card (two columns on a phone): the line goes, the type tightens. */
@container (max-width: 200px) {
  .product-card p { display: none; }
  .product-card h3 { font-size: .95rem; }
  .product-card__price .price { font-size: 1.05rem; }
}

/* list — one per row, picture small on the left, price hard right. The shape
   a price list wants when the photographs are not the selling point. */
.products-grid--list { grid-template-columns: 1fr; gap: 0; }
.products-grid--list .product-card {
  flex-direction: row;
  align-items: center;
  gap: 1.4rem;
  border-radius: 0;
  border-width: 0 0 1px;
  padding: 1.1rem .4rem;
}
.products-grid--list .product-card:first-child { border-top: 1px solid var(--line); }
.products-grid--list .product-card__media {
  margin-bottom: 0; /* beside the text here, not above it */
  width: 96px;
  flex: 0 0 96px;
  aspect-ratio: 1;
  border-radius: var(--radius-small);
}
.products-grid--list .card-body { display: flex; align-items: center; gap: 1.4rem; flex: 1; }
.products-grid--list .product-card__foot { margin: 0; padding: 0; flex: 0 0 auto; }
.products-grid--list .product-card h3 { min-height: 0; }
.products-grid--list .product-card:hover { transform: none; }

/* showcase — the first item double-width. One shelf, one hero product, and
   no new section to maintain. */
.products-grid--showcase .product-card:first-child { grid-column: span 2; grid-row: span 2; }
.products-grid--showcase .product-card:first-child .product-card__media { aspect-ratio: 1; }

/* --- product page (record/product.twig) ------------------------
   Gallery and description left, the buy box right — the name, the price and
   the button together, staying in sight while the left side scrolls (when it
   fits the window: js/product.js sets .is-sticky). One column below 900px,
   with a bar at the bottom once the button scrolled away. The .product-detail
   rules below stay for designs that draw their own product page. */
.product-page { padding-top: 1.6rem; }
.product-back { display: inline-block; margin-bottom: 1.4rem; color: var(--muted); font-size: .92rem; }
.product-back:hover { color: var(--mark, var(--primary)); }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "gallery buy" "about buy";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 4vw, 3rem);
  row-gap: 2.4rem;
  align-items: start;
}
.product-gallery { grid-area: gallery; min-width: 0; }
.product-buy { grid-area: buy; min-width: 0; }
.product-about { grid-area: about; min-width: 0; }
.product-layout--nophoto { grid-template-areas: "about buy"; grid-template-rows: auto; }
.product-layout--single { grid-template-columns: minmax(0, 640px); grid-template-areas: "buy"; }
.product-buy.is-sticky { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); }

/* The gallery: one strip of photos that snaps — a swipe on a phone, the
   arrows, the thumbs and the keys elsewhere move the same strip. */
.product-gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hover-wash);
}
.product-gallery__track {
  display: flex; height: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.product-gallery__track::-webkit-scrollbar { display: none; }
.product-gallery__track:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }
.product-gallery__slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; cursor: zoom-in; }
.product-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery--contain .product-gallery__stage { background: var(--plate, #fff); }
.product-gallery--contain .product-gallery__slide img { object-fit: contain; padding: 1.5rem; }

.product-gallery__arrow,
.product-gallery__zoom,
.product-gallery__count {
  position: absolute;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
}
.product-gallery__arrow {
  top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 3.5rem; padding: 0; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
/* The arrows over the photo: the chevron alone, white and half see-through, a soft shadow to
   stay readable on a light photo — no disc to cover the picture. */
.product-gallery__arrow.product-gallery__arrow { border: 0; background: none; color: #fff; }
.product-gallery__arrow svg { width: 2rem; height: 2rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .55)); }
.product-gallery__arrow--prev { left: .8rem; }
.product-gallery__arrow--next { right: .8rem; }
.product-gallery__stage:hover .product-gallery__arrow,
.product-gallery__stage:focus-within .product-gallery__arrow { opacity: .75; }
.product-gallery__stage .product-gallery__arrow:hover,
.product-gallery__stage .product-gallery__arrow:focus-visible { opacity: 1; }
.product-gallery__arrow:disabled { opacity: 0 !important; pointer-events: none; }
.product-gallery__zoom:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
.product-gallery__count { right: .8rem; bottom: .8rem; padding: .2rem .65rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.product-gallery__zoom { left: .8rem; bottom: .8rem; width: 2.3rem; height: 2.3rem; padding: 0; cursor: pointer; }
/* Over the photo, not on it: the zoom and the counter are a light veil until the hand is near. */
.product-gallery__zoom, .product-gallery__count {
  border-color: transparent; background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .7; transition: opacity .15s ease;
}
.product-gallery__zoom svg { width: 1.05rem; height: 1.05rem; }
.product-gallery__stage:hover .product-gallery__zoom, .product-gallery__zoom:focus-visible,
.product-gallery__stage:hover .product-gallery__count { opacity: 1; }

.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.product-gallery__thumb {
  flex: none; width: 4.5rem; height: 4.5rem; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-small);
  overflow: hidden; background: var(--hover-wash); cursor: pointer;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery--contain .product-gallery__thumb { background: var(--plate, #fff); }
.product-gallery--contain .product-gallery__thumb img { object-fit: contain; }
.product-gallery__thumb.is-active { border-color: var(--ink); }
.product-gallery__thumb:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

/* The whole screen: the same photos, whole, on a dark veil. */
.product-lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--shade) 94%, transparent);
  color: #fff;
}
.product-lightbox::backdrop { background: transparent; }
.product-lightbox__img { position: absolute; inset: 5.5rem 6rem 3.5rem; width: calc(100% - 12rem); height: calc(100% - 9rem); object-fit: contain; } /* the top clears the ✕, the sides the arrows */
.product-lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; padding: 0;
  border: 1px solid rgb(255 255 255 / .25); border-radius: 999px;
  background: rgb(255 255 255 / .08); color: #fff; font-size: 1.4rem; cursor: pointer;
}
.product-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.product-lightbox__close { top: 1.5rem; right: 2rem; width: 3.2rem; height: 3.2rem; border: 0; background: none; opacity: .75; transition: opacity .15s ease; }
.product-lightbox__close:hover { opacity: 1; }
.product-lightbox__close svg { width: 2.2rem; height: 2.2rem; }
@media (max-width: 640px) { .product-lightbox__close { top: .8rem; right: .8rem; } }
.product-lightbox__prev { left: 2rem; top: 50%; transform: translateY(-50%); }
.product-lightbox__next { right: 2rem; top: 50%; transform: translateY(-50%); }
/* The same as the ✕: the distance from the edge, the size, the line. */
.product-lightbox__prev, .product-lightbox__next { width: 3.2rem; height: 3.2rem; border: 0; background: none; opacity: .75; transition: opacity .15s ease; }
.product-lightbox__prev:hover, .product-lightbox__next:hover { opacity: 1; }
.product-lightbox__prev:disabled, .product-lightbox__next:disabled { opacity: .2; }
.product-lightbox__prev svg, .product-lightbox__next svg { width: 2.2rem; height: 2.2rem; stroke-width: 1.8; }
.product-lightbox__count { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: .9rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* The buy box. */
.product-buy__title { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.12; margin-bottom: .6rem; text-wrap: balance; }
.product-buy__lead { font-size: 1rem; color: var(--body-text); max-width: 46ch; margin: 0 0 .5rem; }
.product-buy__sku { font-size: .8rem; color: var(--muted); margin: 0; }
.product-buy__price { display: grid; gap: .2rem; margin: 1.2rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink); }
.product-buy__was { display: flex; align-items: center; gap: .5rem; }
.product-buy__was .price-was { font-size: .95rem; margin: 0; color: var(--muted); }
.product-buy__off {
  padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--mark, var(--primary));
  font-size: .78rem; font-weight: 700;
}
.product-buy__price .price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.product-buy__price .price { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.product-buy__price .price-from,
.product-buy__price .price-unit { font-size: 1rem; color: var(--muted); }
.product-buy__price .price-ask { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.product-buy .product-detail__stock { margin: 0 0 1.2rem; font-size: .9rem; }
.product-buy__action { margin-top: 1.2rem; }
.product-buy__note { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }

/* How it is received and paid. */
.product-terms {
  list-style: none; margin: 1.6rem 0 0; padding: .3rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.product-terms__row { display: grid; gap: .1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.product-terms__row:first-child { border-top: 0; }
.product-terms__name { color: var(--ink); font-weight: 600; }
.product-terms__note { color: var(--muted); }

.product-section-title { font-size: 1.45rem; margin-bottom: 1rem; }
.product-related { padding-top: 0; }
.product-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.product-related__head .product-section-title { font-size: 1.6rem; margin: 0; }

/* The bar at the bottom of a narrow screen. */
.product-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.product-bar[hidden] { display: none; }
.product-bar__text { display: grid; min-width: 0; flex: 1; }
.product-bar__name { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-bar__price { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-bar__form { margin: 0; flex: none; }
html.has-product-bar body { padding-bottom: 4.5rem; }

@media (min-width: 901px) { .product-bar { display: none !important; } }
@media (max-width: 1100px) { .product-layout { column-gap: 2rem; } }
@media (max-width: 900px) {
  .product-layout, .product-layout--nophoto { display: flex; flex-direction: column; gap: 1.8rem; }
  .product-buy.is-sticky { position: static; }
}
@media (max-width: 560px) {
  .product-gallery__stage { margin: 0 -24px; border-radius: 0; }
  .product-gallery__thumbs, .product-gallery__arrow { display: none; }
  .product-buy__price .price { font-size: 1.85rem; }
  .product-lightbox__img { inset: 4.5rem .5rem 3.5rem; width: calc(100% - 1rem); height: calc(100% - 8rem); }
  .product-lightbox__prev, .product-lightbox__next { display: none; }
}

/* --- product page --------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.product-detail__media img { width: 100%; border-radius: var(--radius); display: block; }
.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: .6rem;
}
.product-detail__thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-small); }
.product-detail__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
}

@media (max-width: 900px) {
  .products-grid, .products-grid--cols-3, .products-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .products-grid--showcase .product-card:first-child { grid-column: span 2; grid-row: auto; }
  .product-detail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .products-grid, .products-grid--cols-2, .products-grid--cols-3, .products-grid--cols-4 { grid-template-columns: 1fr; }
  .products-grid--list .card-body { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* No photograph: one column, and the body keeps a readable measure instead of
   stretching to the full container. */
.product-detail--textonly { grid-template-columns: minmax(0, 62ch); }

/* The error page's one action — spaced away from the message above and from
   whatever the layout puts below, so the page ends deliberately. */
.error-actions {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(3rem, 6vw, 5rem);
}

/* --- lightbox (platform component — the overlay only) ---------------------
   The component file also ships an example grid (`.gallery-section` /
   `.gallery-grid` / `.gallery-item`) as a demonstration host for its markup.
   Pasted in whole, that grid overrides the theme's OWN gallery: the layout
   became a five-column grid instead of masonry, and square cells holding
   height:auto images left empty bands under every photo — which is exactly what
   looked like "captions that will not display".

   So we take precisely the overlay from it. The theme keeps its own gallery
   markup, and the component's contract is just that: <a data-lightbox> around
   an <img>. */
/* --- Overlay (JS-built, lives directly under <body>) ------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
    animation: lightbox-in .2s ease;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox__figure {
    margin: 0;
    max-width: min(92vw, 1400px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
}

.lightbox__caption {
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    text-align: center;
    min-height: 1.2em;
}

.lightbox__counter {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

/* Controls: real buttons, big hit areas, visible on keyboard focus. */
.lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, .28);
}

.lightbox__close {
    top: 1rem;
    right: 1.2rem;
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }

@media (max-width: 700px) {
    /* On phones the arrows would cover the photo — swipe and the keyboard
       still work, so tuck them under the image instead of hiding them. */
    .lightbox__prev,
    .lightbox__next {
        top: auto;
        bottom: 1rem;
        transform: none;
    }
    .lightbox__prev { left: 20%; }
    .lightbox__next { right: 20%; }
}

/* Body scroll lock while the overlay is open (class set by the JS). */
body.lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { animation: none; }
}

/* ── Lattice knobs: what the eye reads first ───────────────────────────── */
/* rhythm: every second section on a tint (the patterns never set --alt themselves) */
.rhythm-bands main > .section:nth-of-type(even) { background: var(--tint); }
.rhythm-flat main > .section--alt { background: transparent; }
/* 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); }
/* headings: centred section heads — variables .section-head reads */
body.headings-center { --head-direction: column; --head-align: center; --head-text: center; --head-lead-margin: auto; }

/* Availability badge. Deliberately quiet: it sits beside the price, and a
   green pill shouting "In stock" on every card turns the shelf into noise.
   Colour carries the meaning only where the meaning is a warning — sold out
   and pre-order — while the ordinary case reads as plain small print.
   Built on --primary/--muted rather than hard-coded green and red, so it
   inherits whatever palette the site was generated with. */
.product-card__stock,
.product-detail__stock {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Availability: one scheme for every state — a dot and a plain word. The
   colour is the dot's only: no italic, no strike-through (sold out read as
   a typo). Built on the state tokens the design may set (success, warning). */
.product-card__stock::before,
.product-detail__stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.product-card__stock--in_stock::before,
.product-detail__stock--in_stock::before { background: var(--success, var(--mark, var(--primary))); }
.product-card__stock--pre_order::before,
.product-detail__stock--pre_order::before { background: var(--warning, var(--accent)); }

.product-detail__stock {
  font-size: .9rem;
  margin: -.8rem 0 1.2rem;
}

/* ---------- Inline calendar (calendar.js) ----------
   Drawn on the page instead of a closed native date box. Same vocabulary as
   the slot grid above so a picked day and a picked time read as one control. */
.cal { max-width: 22rem; margin: 1rem 0 1.4rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal-title { font-weight: 600; color: var(--ink); text-transform: capitalize; }
.cal-nav {
  width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--bg); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.cal-nav { display: grid; place-items: center; padding: 0; }
.cal-nav svg { width: 1.1rem; height: 1.1rem; }
.cal-nav:hover:not(:disabled) { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.cal-dow { font-size: .72rem; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .2rem 0; }
.cal-day {
  aspect-ratio: 1; border: 1.5px solid transparent; border-radius: var(--radius-small);
  background: var(--bg); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.cal-day:hover:not(:disabled) { border-color: var(--mark, var(--primary)); }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.cal-day.is-past { color: var(--muted); opacity: .45; cursor: default; }
/* A taken night — struck through, so «greyed» does not read as «in the past». */
.cal-day.is-busy { color: var(--muted); opacity: .55; text-decoration: line-through; cursor: not-allowed; }
/* Not selectable right now (past the first taken night, short of the minimum
   stay): faded, so what can be clicked is visible before anything is clicked. */
.cal-day:disabled { cursor: default; }
.cal-day:disabled:not(.is-past):not(.is-busy):not(.is-selected) { opacity: .35; }
.cal-day.is-between { background: color-mix(in srgb, var(--primary) 26%, var(--bg)); color: var(--ink); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.cal-day.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--mark, var(--primary)); }
.cal-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Terms under a day-rental calendar: the end in one click from the start. Off
   until a start is picked, and for a term the rules or a taken day rule out. */
.cal-terms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.cal-term {
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.cal-term:hover:not(:disabled):not(.is-selected) { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
.cal-term:disabled { opacity: .35; cursor: default; }
.cal-term.is-selected { background: var(--primary); color: var(--primary-ink); border-color: var(--mark, var(--primary)); }

/* Stay request: dates + guests, then the same fields the booking form uses. */
.stay-summary { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1.2rem 2rem; margin: .4rem 0 1.2rem; font-size: .95rem; color: var(--muted); }
/* Its place is kept before anything is picked: filled in on the second click,
   it pushed the fields and the button down under the visitor's hand. */
.stay-summary:has(#stay-range) { min-height: 5.2rem; }
.stay-summary:not(:has(#stay-range)) { min-height: 1.9rem; }
@media (max-width: 480px) { .stay-summary:has(#stay-range) { min-height: 7rem; } } /* the range wraps to two lines on a phone */
.stay-summary strong { color: var(--ink); font-size: 1.15rem; }
.stay-guests { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.stay-guests input { width: 6rem; padding: .7rem 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; }
.stay-guests input:focus { outline: none; border-color: var(--mark, var(--primary)); }
.stay-native { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
/* calendar.js sets `hidden` once it has drawn the month; a display rule
   above would win over the attribute, so it is said here explicitly. */
.stay-native[hidden], .book-label[hidden] { display: none; }
.stay-native input[type='date'] { padding: .7rem 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; }
@media (max-width: 640px) { .book-fields { grid-template-columns: 1fr; }
}

/* ---------- The booking card of a visit (partials/booking/slot.twig) ----------
   Who, the day, the time, then who is coming. A choice — the day, the time —
   is ink on the ground, never the brand colour: that stays on the one button
   that books. The stay's card (booking/period.twig) keeps its own for now. */
.book-card > .book-card__title { font-size: 1.25rem; margin: 0 0 1.1rem; }
.book-card .book-date-form { display: block; margin: 0 0 1rem; }
.book-card .book-label { display: block; margin-bottom: .5rem; }
.book-card .book-label[hidden] { display: none; }
.book-staff { border: 0; padding: 0; margin: 0 0 1.2rem; min-width: 0; }
.book-staff legend { padding: 0; }
.book-person { align-items: center; gap: .8rem; margin-bottom: .5rem; padding: .7rem .9rem; }
.book-staff .book-person { position: relative; align-items: center; } /* stronger than .choice's flex-start */
/* No radio dot beside the picture: the row is the choice — its frame and a check on the right say
   which; the input stays (the keyboard, the form), out of sight. */
.book-person input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.book-person .choice__text { flex: 1; min-width: 0; }
.book-person__check {
  display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--line); color: transparent; transition: all .15s ease;
}
.book-person__check svg { width: .9rem; height: .9rem; }
.book-person:has(input:checked) .book-person__check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.book-person:has(input:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.book-person--one { display: flex; padding: 0; margin: 0 0 1.2rem; }
.avatar--lg { width: 2.4rem; height: 2.4rem; font-size: .95rem; border: 0; flex: none; }
.avatar--initial { background: linear-gradient(135deg, var(--tint), var(--hover-wash)); }
.avatar--any { color: var(--muted); background: var(--hover-wash); }
.avatar--any svg { width: 1.3rem; height: 1.3rem; }

/* The month: an open day is a tile, a closed one is only a number. */
.cal[data-mode='single'] .cal-day { background: var(--surface); border: 1px solid var(--line); position: relative; }
.cal[data-mode='single'] .cal-day:hover:not(:disabled) { border-color: var(--mark, var(--primary)); }
.cal[data-mode='single'] .cal-day:disabled:not(.is-selected) { background: none; border-color: transparent; color: var(--muted); font-weight: 400; opacity: .5; }
.cal[data-mode='single'] .cal-day.is-today { box-shadow: none; }
.cal[data-mode='single'] .cal-day.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
.cal[data-mode='single'] .cal-day.is-selected { background: var(--ink); color: var(--bg); border-color: var(--ink); opacity: 1; }
.cal[data-mode='single'] .cal-day:focus-visible { outline: 2px solid var(--mark, var(--primary)); }

/* The times. */
.book-times { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1rem); }
.book-times:focus { outline: none; }
.book-times .notice { margin-bottom: 1rem; }
.slot-part { display: block; margin: .2rem 0 .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.book-card .slot-grid { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; margin-bottom: .9rem; }
.book-card .slot span { display: grid; place-items: center; height: 2.5rem; padding: 0; border-width: 1px; border-radius: 999px; background: var(--surface); font-variant-numeric: tabular-nums; }
.book-card .slot input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.book-card .slot input:focus-visible + span { outline-color: var(--mark, var(--primary)); }
.book-card .book-empty { padding: 1.1rem 1.2rem; background: none; border: 1px dashed var(--line); text-align: left; color: var(--body-text); }
.book-card .book-empty strong { display: block; color: var(--ink); }
.book-card .book-hint { margin: .2rem 0 0; font-size: .85rem; }
.book-card .field-error { color: var(--danger); font-weight: 500; font-size: .8rem; }

/* What was chosen, then who is coming. */
.book-details { margin-top: 1.2rem; display: grid; gap: .9rem; }
.book-details[hidden] { display: none; }
.book-details .notice { margin: 0; }
.book-chosen {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: var(--success-soft); border-radius: var(--radius-small); color: var(--ink); font-size: .92rem; font-weight: 600;
}
.book-chosen[hidden] { display: none; }
.book-chosen svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--success, var(--ink)); }
.book-chosen span { flex: 1; min-width: 0; }
.book-chosen__change {
  border: 0; background: none; padding: .2rem 0; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--mark, var(--primary)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.book-card .book-fields { display: grid; grid-template-columns: 1fr; gap: .2rem; margin: 0; }
.book-fields label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.book-fields input, .book-fields textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .97rem; margin-bottom: .35rem;
}
.book-fields textarea { resize: vertical; min-height: 5rem; }
.book-fields input:focus, .book-fields textarea:focus { outline: none; border-color: var(--mark, var(--primary)); box-shadow: 0 0 0 1px var(--mark, var(--primary)); }
.book-fields [aria-invalid='true'] { border-color: var(--danger); }
.book-fields .field-error { color: var(--danger); font-weight: 500; font-size: .8rem; margin-bottom: .3rem; }
.book-submit { width: 100%; justify-content: center; text-align: center; }

/* Booking off, or a visit with no length: ask, call, the hours. */
.book-card__text { margin: 0 0 1.1rem; color: var(--body-text); }
.book-card__ask { width: 100%; justify-content: center; text-align: center; }
.book-card__phone { margin: 1rem 0 .6rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; user-select: all; }
.book-card__phone a { color: var(--ink); text-decoration: none; }
.book-hours { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; font-size: .9rem; }
.book-hours__day { display: flex; justify-content: space-between; gap: 1rem; color: var(--body-text); }
.book-hours__day span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.book-hours__day.is-off span:last-child { color: var(--muted); }
.book-hours__special-title { display: block; margin-top: .8rem; font-size: .8rem; color: var(--muted); }
.book-hours--special { border-top: 0; padding-top: .3rem; }

/* A service's page: the product's page with how long it takes beside the price, and the booking card under it. */
.service-price { grid-template-columns: auto; }
.service-price__dur { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--muted); }
.service-price__dur svg { width: 1.1rem; height: 1.1rem; }
.service-page__book { margin-top: 1.4rem; }
.service-page__book .book-card { padding: 1.4rem; }

/* The booking's own page (pages/booking.twig): the order's receipt, one column. */
.booking-page__inner { max-width: 760px; display: grid; gap: 1.2rem; }
.booking-page .order-head { margin-bottom: .4rem; }
.booking-when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.4rem; flex-direction: row; }
.booking-when__text { display: grid; gap: .25rem; min-width: 0; }
.booking-when__label { font-size: .8rem; color: var(--muted); }
.booking-when__date { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-weight: 700; color: var(--ink); line-height: 1.25; font-variant-numeric: tabular-nums; }
.booking-when__what { color: var(--body-text); font-size: .95rem; }
.booking-when.is-cancelled .booking-when__date { color: var(--muted); }
.booking-when__add { display: inline-flex; align-items: center; gap: .45rem; flex: none; }
.booking-when__add svg { width: 1.05rem; height: 1.05rem; }
.booking-facts { padding: 1.4rem; }
.booking-facts dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; }
.booking-facts dd a:hover { color: var(--mark, var(--primary)); text-decoration-color: currentColor; }
.booking-facts dd.booking-facts__person { display: flex; align-items: center; gap: 1rem; }
.booking-facts__person .avatar.avatar { width: 3rem; height: 3rem; font-size: 1.1rem; }
.booking-facts__who { display: grid; gap: 0; line-height: 1.3; }
.booking-facts__number { font-variant-numeric: tabular-nums; }
.booking-cancel__ask { border: 0; background: none; padding: 0; color: var(--muted); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
.booking-cancel__ask:hover { color: var(--danger); }
.booking-cancel__ask[hidden], .booking-cancel__confirm[hidden] { display: none; }
.booking-cancel__confirm { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--danger-soft); }
.booking-cancel__confirm p { margin: 0 0 .8rem; color: var(--ink); font-weight: 600; }
.booking-cancel__buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.booking-cancel__yes { background: var(--danger); border-color: var(--danger); color: #fff; }
.booking-cancel__yes:hover { background: var(--danger); filter: brightness(.92); color: #fff; }
.booking-page .order-actions { margin-top: .8rem; }

/* ---------- Rentals (cards/service.twig's rental, record/rental.twig, booking/period.twig) ---------- */
/* The card: a 4:3 photo — a house or a box is chosen with the eyes. */
.svc-card--rental .svc-card__media { aspect-ratio: 4 / 3; }
/* The price list: a thumbnail on the left. */
.services--list .svc-grid > .svc-card--rental.has-photo { grid-template-columns: 4.5rem minmax(0, 1fr) 8.5rem 9.5rem; }
.services--list .svc-card--rental.has-photo .svc-card__media { display: block; width: 4.5rem; aspect-ratio: 1; border-radius: var(--radius-small); }
.services--list .svc-card--rental .svc-card__meta { display: none; }
.services--list .svc-grid > .svc-card--rental:not(.has-photo) { grid-template-columns: minmax(0, 1fr) 8.5rem 9.5rem; }
@media (max-width: 900px) {
  .services--list .svc-grid > .svc-card--rental.has-photo { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .services--list .svc-card--rental.has-photo .svc-card__media { grid-column: 1; grid-row: 1 / span 2; }
  .services--list .svc-card--rental.has-photo .svc-card__main { grid-column: 2; grid-row: 1 / span 2; }
  .services--list .svc-card--rental.has-photo .svc-card__price { grid-column: 3; grid-row: 1; }
  .services--list .svc-card--rental.has-photo .svc-card__action { grid-column: 3; grid-row: 2; }
}

/* The area's rules: one line under a list's heading, a column under the price on a record's page. */
.rent-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--body-text); font-size: .92rem; }
.rent-rules li { display: inline-flex; align-items: center; gap: .45rem; }
.rent-rules svg { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: none; }
.page-head .rent-rules { margin-top: 1rem; }
.rent-rules--list { flex-direction: column; gap: .45rem; margin: .2rem 0 0; }
.rent-rules__quiet { color: var(--muted); }

/* The month for a range: a free day is a tile, a taken one is struck through, one out of reach
   is a faint number; the chosen ends are ink, the days between a band (--range), no gaps. */
.cal[data-mode='range'] .cal-grid { column-gap: 0; row-gap: .25rem; }
.cal[data-mode='range'] .cal-day {
  position: relative; z-index: 0; background: none; border: 0; border-radius: 0; color: var(--ink); opacity: 1;
  font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; box-shadow: none;
}
.cal[data-mode='range'] .cal-day::before {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-small);
  border: 1px solid var(--line); background: var(--surface);
}
.cal[data-mode='range'] .cal-day.is-free:hover::before { border-color: var(--mark, var(--primary)); }
.cal[data-mode='range'] .cal-day.is-busy,
.cal[data-mode='range'] .cal-day.is-off,
.cal[data-mode='range'] .cal-day.is-nope { cursor: default; font-weight: 400; color: var(--muted); }
.cal[data-mode='range'] .cal-day.is-busy { text-decoration: line-through; }
.cal[data-mode='range'] .cal-day.is-off,
.cal[data-mode='range'] .cal-day.is-nope { opacity: .5; }
.cal[data-mode='range'] .cal-day.is-busy::before,
.cal[data-mode='range'] .cal-day.is-off::before,
.cal[data-mode='range'] .cal-day.is-nope::before { display: none; }
.cal[data-mode='range'] .cal-day.is-between,
.cal[data-mode='range'] .cal-day.is-preview { background: var(--range); opacity: 1; color: var(--ink); text-decoration: none; }
.cal[data-mode='range'] .cal-day.is-preview { background: color-mix(in srgb, var(--ink) 8%, var(--surface, #fff)); } /* the band to be, fainter than the chosen one */
.cal[data-mode='range'] .cal-day.is-between::before,
.cal[data-mode='range'] .cal-day.is-preview::before { display: none; }
.cal[data-mode='range'] .cal-day.is-selected { color: var(--bg); opacity: 1; }
.cal[data-mode='range'] .cal-day.is-selected::before { display: block; background: var(--ink); border-color: var(--ink); }
.cal[data-mode='range'] .cal-day.is-start.has-range { background: linear-gradient(to right, transparent 50%, var(--range) 50%); }
.cal[data-mode='range'] .cal-day.is-end:not(.is-start) { background: linear-gradient(to left, transparent 50%, var(--range) 50%); }
.cal[data-mode='range'] .cal-day.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.cal[data-mode='range'] .cal-day:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }
.cal[data-mode='range'] .cal-term.is-selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cal[data-mode='range'] .cal-term:disabled { opacity: .4; }

.rent-hint {
  display: flex; align-items: flex-start; gap: .55rem; margin: .4rem 0 .6rem; padding: .7rem .9rem;
  border-radius: var(--radius-small); background: var(--tint); color: var(--ink); font-size: .88rem; line-height: 1.45;
}
.rent-hint::before {
  content: '→'; flex: none; font-weight: 700; color: var(--muted);
}
.rent-hint[hidden] { display: none; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.3rem; margin: .3rem 0 .7rem; font-size: .82rem; line-height: 1; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.cal-legend span::before { content: ''; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 5px; box-sizing: border-box; }
/* The free tile's own frame is faint on a dark surface; at legend size it needs the muted ink to show. */
.cal-legend__free::before { border: 1px solid color-mix(in srgb, var(--muted) 70%, transparent); background: var(--surface); }
.cal-legend__busy::before {
  content: '15' !important; display: grid; place-items: center; width: auto !important; height: 1.2rem;
  text-decoration: line-through; font-size: 1.05rem; font-weight: 600; color: var(--muted);
}
.cal-legend__picked::before { background: var(--ink); }
.rent-terms-note { margin: .2rem 0 .4rem; font-size: .82rem; color: var(--muted); }
.rent-terms-note[hidden] { display: none; }

/* What was chosen, and what it costs. */
.rent-chosen { align-items: flex-start; }
.rent-chosen svg { margin-top: .15rem; }
.rent-chosen__text { display: grid; gap: .15rem; }
.rent-chosen__text small { font-weight: 400; color: var(--body-text); font-size: .85rem; }
.rent-total { display: grid; gap: .35rem; padding: .2rem 0 .4rem; }
.rent-total[hidden] { display: none; }
.rent-total p { margin: 0; }
.rent-total__line { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--body-text); font-variant-numeric: tabular-nums; }
.rent-total__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.rent-total__sum span { color: var(--ink); font-weight: 600; }
.rent-total__sum strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rent-total__note { font-size: .82rem; color: var(--muted); }
.rent-card .stay-guests { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
.rent-card .stay-guests .book-label { margin: 0; }

/* The booking's own page for a stay: hand-over → return, the day and the hour each. */
.booking-when--stay { flex-direction: column; align-items: stretch; }
.booking-span { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.booking-span__end { display: grid; gap: .2rem; }
.booking-span__end:last-child { text-align: right; }
.booking-span__units { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.booking-when__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .9rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .booking-span { grid-template-columns: 1fr; }
  .booking-span__end:last-child { text-align: left; }
}

/* ---------- The account (pages/account/*) ---------- */
/* Sign-in pages: one narrow column in the middle, its head on the same axis. */
.auth-inner { max-width: 26rem; }
.auth-head { text-align: center; margin-bottom: 1.6rem; }
.auth-head h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin: .4rem 0 .5rem; }
.auth-head .lead { margin: 0 auto; max-width: 30ch; font-size: 1rem; }
.auth-form { display: grid; gap: .2rem; }
.auth-form .field-error { color: var(--danger); font-size: .8rem; font-weight: 500; margin-bottom: .4rem; }
.auth-form [aria-invalid='true'] { border-color: var(--danger) !important; }
.auth-check { display: flex !important; align-items: center; gap: .6rem; margin: .4rem 0 1rem !important; font-weight: 400 !important; cursor: pointer; }
.auth-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ink); }
.auth-submit { width: 100%; justify-content: center; text-align: center; }
.auth-quiet { margin: .6rem 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.auth-notice { margin-bottom: 1rem; }
.auth-phone { text-align: center; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; user-select: all; }
.auth-phone a { color: var(--ink); text-decoration: none; }
.auth-link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--mark, var(--primary)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-sent { text-align: center; }
.auth-sent__mark { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--success-soft); color: var(--success, var(--ink)); }
.auth-sent__mark svg { width: 1.6rem; height: 1.6rem; }
.auth-sent .auth-head { margin-bottom: .8rem; }
.auth-sent__text { margin: 0 0 1rem; color: var(--body-text); }
.auth-again { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; font-size: .88rem; color: var(--muted); }

/* A password: the eye inside the field, Caps Lock and the rule under it. */
.pw-field { margin-bottom: .35rem; }
.pw-field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pw-field__forgot { font-size: .85rem; color: var(--mark, var(--primary)); }
.pw-field__box { position: relative; }
.pw-field__box input { padding-right: 3rem !important; margin-bottom: 0 !important; }
.pw-field__eye {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0;
  border: 0; border-radius: var(--radius-small); background: none; color: var(--muted); cursor: pointer;
}
.pw-field__eye:hover { color: var(--ink); }
.pw-field__eye:focus-visible { outline: 2px solid var(--mark, var(--primary)); }
.pw-field__eye svg { width: 1.2rem; height: 1.2rem; }
.pw-field__eye .pw-eye-shut, .pw-field__eye[aria-pressed='true'] .pw-eye-open { display: none; }
.pw-field__eye[aria-pressed='true'] .pw-eye-shut { display: block; }
.pw-field__caps { margin: .35rem 0 0; font-size: .78rem; font-weight: 600; color: var(--warning, var(--ink)); }
.pw-field__caps[hidden] { display: none; }
.pw-field__hint { margin: .35rem 0 0; font-size: .8rem; color: var(--muted); }
.pw-field .field-error:not(:empty) { margin-top: .35rem; }

/* The account: the profile card on the left, the list on the right. */
.account-head .lead { margin-bottom: 0; }
/* «‹ My account» above the heading, in the head's own top space: the title stays where every page has it. */
.account-head .product-back { display: block; width: fit-content; margin: -2.4rem 0 1rem; line-height: 1.4rem; }
.account-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
.profile-card { display: grid; gap: 1.25rem; padding: 1.6rem; flex-direction: column; }
.profile-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.profile-card__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.avatar--profile { width: 3.25rem; height: 3.25rem; font-size: 1.2rem; border: 0; background: var(--range); color: var(--ink); flex: none; } /* the ink, faint, on the card: --tint vanished on a dark one */
.profile-card__names { display: grid; min-width: 0; }
.profile-card__names strong, .profile-card__names small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card__names strong { color: var(--ink); }
.profile-card__names small { color: var(--muted); font-size: .85rem; }
.profile-card__phone { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.profile-card__phone strong { color: var(--ink); font-weight: 600; }
.profile-card__phone a { color: var(--mark, var(--primary)); font-weight: 600; }
.profile-card__why { margin: -.6rem 0 .2rem; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.profile-card__email { align-items: center; }
.profile-card__ok { color: var(--success) !important; }
.profile-card__confirm { margin: 0; }
.profile-card__confirm .auth-link-btn { color: var(--mark, var(--primary)); font-weight: 600; }
.profile-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .2rem; }
.profile-card__out { margin: 0; }
.profile-card__out .auth-link-btn { color: var(--muted); font-size: .88rem; }
.account-main { min-width: 0; }
.account-main .notice { margin-bottom: 1.2rem; }
.account-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.account-group__title { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.account-group { margin-top: 1.6rem; }
.account-group summary { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; list-style: none; }
.account-group summary::-webkit-details-marker { display: none; }
/* A drawn chevron instead of the browser's triangle: right while folded, down when open. */
.account-group summary::before {
  content: ''; width: .45rem; height: .45rem; margin-left: .15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.account-group[open] summary::before { transform: translateY(-.15rem) rotate(45deg); }
.account-group summary:hover { color: var(--ink); }
.account-group summary:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 3px; border-radius: 4px; }
.account-group summary .chip-count { margin-left: .3rem; }

.acc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.acc-row { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; padding: .9rem .4rem; border-bottom: 1px solid var(--line); }
.acc-row:hover { background: var(--hover-wash); }
.acc-row:has(.acc-row__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }
.acc-row__tile { display: grid; place-items: center; width: 3.25rem; height: 3.4rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); overflow: hidden; color: var(--muted); }
.acc-row__tile--date { align-content: center; gap: .1rem; line-height: 1; }
.acc-row__tile--date strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.acc-row__tile--date small { font-size: .72rem; text-transform: lowercase; color: var(--muted); }
.acc-row__tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.acc-row__tile--photo svg { width: 1.4rem; height: 1.4rem; }
.acc-row.is-past .acc-row__tile { background: none; }
.acc-row__main { min-width: 0; }
.acc-row__title { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; }
.acc-row__link { color: var(--ink); }
.acc-row__link::after { content: ''; position: absolute; inset: 0; }
.acc-row__link:focus-visible { outline: none; }
.acc-row.is-past .acc-row__link { color: var(--body-text); }
.acc-row.is-cancelled .acc-row__title { text-decoration: line-through; color: var(--muted); }
.acc-row__meta { margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }
.acc-row__num { font-variant-numeric: tabular-nums; }
.acc-row__now { color: var(--ink); font-weight: 600; }
.acc-row__side { position: relative; z-index: 1; display: grid; justify-items: end; gap: .35rem; text-align: right; }
.acc-row__sum { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-row__cancel { font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.acc-row__cancel:hover { color: var(--danger); }
.acc-row__cancel[hidden] { display: none; }
.acc-row__confirm { grid-column: 1 / -1; position: relative; z-index: 1; padding: .8rem 1rem; border-radius: var(--radius-small); background: var(--danger-soft); }
.acc-row__confirm[hidden] { display: none; }
.acc-row__confirm p { margin: 0 0 .7rem; color: var(--ink); font-weight: 600; font-size: .9rem; }
.acc-row__confirm form { margin: 0; }

/* A state as a pill: waiting, done well, on its way, nothing to do. */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--tint); color: var(--muted); }
.pill::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pill--wait { background: var(--warning-soft); color: var(--ink); }
.pill--wait::before { background: var(--warning, var(--accent)); }
.pill--ok { background: var(--success-soft); color: var(--ink); }
.pill--ok::before { background: var(--success, var(--ink)); }
.pill--go { color: var(--ink); }
.pill--go::before { background: var(--ink); }

/* 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.is-slim { padding: .8rem 1rem; justify-content: space-between; }
.inline-empty.is-slim p { margin: 0; }
.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; }

/* The profile: sections of settings — what it is on the left, the fields on the right. */
/* On the heading's axis (the container's left edge), not centred under it. */
.profile-inner > * { max-width: 880px; }
.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); }
.settings__about h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.settings__about p { margin: 0; font-size: .88rem; color: var(--muted); }
.settings__fields { display: grid; gap: .2rem; }
.settings__fields > label, .settings__fields .pw-field__label label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.settings__fields input:not([type='checkbox']) {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .97rem; margin-bottom: .35rem;
}
.settings__fields input:focus { outline: none; border-color: var(--mark, var(--primary)); box-shadow: 0 0 0 1px var(--mark, var(--primary)); }
.settings__fields [aria-invalid='true'] { border-color: var(--danger) !important; }
.settings__fields .field-error { color: var(--danger); font-size: .8rem; font-weight: 500; }
.field-static { display: grid; gap: .2rem; padding: .85rem 1rem; border-radius: var(--radius-small); background: var(--tint); margin-top: .4rem; }
.field-static__label { font-size: .8rem; color: var(--muted); }
.field-static strong { color: var(--ink); font-weight: 600; }
.field-static small { font-size: .82rem; color: var(--muted); }
.field-static a { color: var(--mark, var(--primary)); }
.pw-change summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-radius: var(--radius-small); background: var(--tint); cursor: pointer; list-style: none; }
.pw-change summary::-webkit-details-marker { display: none; }
.pw-change[open] summary { display: none; }
.pw-change__dots { letter-spacing: .15em; color: var(--muted); }
.pw-change__open { color: var(--mark, var(--primary)); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.pw-change__fields { display: grid; gap: .2rem; }
.pw-change__fields .auth-link-btn { justify-self: start; margin-top: .4rem; font-size: .88rem; color: var(--muted); }
.profile-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.profile-actions .auth-link-btn { color: var(--muted); }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  /* On a phone the card is a line over the list: the name and the way to edit. */
  .profile-card { padding: .9rem 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .profile-card__phone, .profile-card__why { display: none; }
  .profile-card__foot { gap: .8rem; }
  .profile-card__foot .btn { padding: .45rem .9rem; }
  .settings { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .acc-row { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .acc-row__side { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: .8rem; }
  .inline-empty { flex-wrap: wrap; }
  .profile-card__out { display: none; }
}

/* ---------- Posts: news, a blog (cards/post.twig, listing/post.twig, record/post.twig, components/news) ---------- */
/* A day as a tile — the number and the month — shared by the account's lines and the news list. */
.date-tile { display: grid; place-items: center; align-content: center; gap: .1rem; width: 3.6rem; height: 3.6rem; flex: none; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); line-height: 1; }
.date-tile strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.date-tile small { font-size: .72rem; text-transform: lowercase; color: var(--muted); }

.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.has-lead > .news-card--lead { grid-column: span 2; grid-row: span 2; }
.news-grid.is-single { grid-template-columns: 1fr; }

.news-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.news-card:hover { transform: translateY(-2px); border-color: var(--mark, var(--primary)); }
.news-card:has(.news-card__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.news-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--hover-wash); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.news-card:hover .news-card__media img { transform: scale(1.03); }
.news-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.35rem 1.4rem; flex: 1; }
.news-card__title { margin: 0; font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.news-card__link { color: inherit; }
.news-card__link::after { content: ''; position: absolute; inset: 0; }
.news-card__link:focus-visible { outline: none; }
.news-card:hover .news-card__title { color: var(--mark, var(--primary)); }
.news-card__excerpt { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--body-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__time { display: inline-flex; align-items: center; gap: .4rem; margin: auto 0 0; padding-top: .3rem; font-size: .82rem; color: var(--muted); }
.news-card__time svg { width: 1rem; height: 1rem; }
/* No photo: not a placeholder — a rule in the accent, a larger title, a longer excerpt. */
.news-card.is-text .news-card__rule { display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--mark, var(--primary)); margin-bottom: .4rem; }
.news-card.is-text .news-card__title { font-size: 1.42rem; -webkit-line-clamp: 4; }
.news-card.is-text .news-card__excerpt { -webkit-line-clamp: 5; }
/* The newest, large: the photo fills the height above the text; without one a typographic cover. */
.news-card--lead .news-card__media { flex: 1; min-height: 17rem; aspect-ratio: auto; }
.news-card--lead .news-card__title { font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.15; }
.news-card--lead .news-card__excerpt { -webkit-line-clamp: 2; font-size: 1rem; }
.news-card--lead .news-card__body { flex: none; padding: 1.5rem 1.6rem 1.6rem; }
.news-card--lead.is-text { background: linear-gradient(160deg, var(--tint), var(--surface) 70%); }
.news-card--lead.is-text .news-card__body { flex: 1; justify-content: flex-end; padding: 2rem; }
.news-card--lead.is-text .news-card__rule { width: 3rem; height: 4px; margin-bottom: auto; }
.news-card--lead.is-text .news-card__title { font-size: clamp(2rem, 3.6vw, 3rem); -webkit-line-clamp: 4; }
.news-card--lead.is-text .news-card__excerpt { font-size: 1.1rem; -webkit-line-clamp: 4; }
.news-card--lead .news-card__time { margin-top: .4rem; }
/* One alone: across the width, the photo beside the text. */
.news-card--wide.has-photo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.news-card--wide .news-card__media { aspect-ratio: auto; min-height: 16rem; }
.news-card--wide .news-card__body { justify-content: center; padding: 1.8rem 2rem; }
.news-card--wide .news-card__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

/* The list look: a date tile, the text, a thumbnail on the right. */
.news-rows { display: grid; border-top: 1px solid var(--line); }
.news-row { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: 1.2rem .3rem; border-bottom: 1px solid var(--line); }
.news-row.has-photo { grid-template-columns: 3.6rem minmax(0, 1fr) 11rem; }
.news-row:hover { background: var(--hover-wash); }
.news-row:has(.news-card__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }
.news-row__text { display: grid; gap: .35rem; min-width: 0; }
.news-row__title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row:hover .news-row__title { color: var(--mark, var(--primary)); }
.news-row__excerpt { margin: 0; max-width: 68ch; font-size: .92rem; color: var(--body-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row__thumb { aspect-ratio: 3 / 2; border-radius: var(--radius-small); overflow: hidden; }
.news-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-rows--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 0; }
.news-rows--two .news-row:nth-child(-n+2) { border-top: 1px solid var(--line); }
.news-block--list .news-row__title { font-size: 1.1rem; }

/* 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__back { display: block; width: fit-content; margin-bottom: 1.2rem; }
.post__meta { margin-bottom: .9rem; }
.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__gallery { max-width: calc(var(--col) + 48px); margin-top: 2.4rem; }
.post-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.post-gallery__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-small); background: var(--hover-wash); }
.post-gallery__item[hidden] { display: none; }
.post-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.post-gallery__item:hover img { transform: scale(1.04); }
.post-gallery__item:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.post-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--shade, #000) 55%, transparent); color: #fff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.post__foot { max-width: calc(var(--col) + 48px); margin-top: 2.4rem; }
.post__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.post__tools [data-share] { display: inline-flex; align-items: center; gap: .5rem; }
.post__tools [data-share][hidden] { display: none; }
.post__tools [data-share] svg { width: 1.05rem; height: 1.05rem; }
.post__more-in { margin-left: auto; font-size: .9rem; color: var(--muted); }
.post__more-in:hover { color: var(--mark, var(--primary)); }
.ask-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--tint); }
.ask-band > div:first-child { flex: 1 1 18rem; }
.ask-band strong { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; }
.ask-band p { margin: .3rem 0 0; font-size: .92rem; color: var(--body-text); }
.ask-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ask-band__phone { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; }
/* On the tint the line colour is lost: the ghost button's border is the ink, faint. */
.ask-band .btn-ghost { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.ask-band--card { display: grid; gap: 1rem; margin-top: 0; padding: 1.3rem 1.4rem; }
.ask-band--card > div:first-child { flex: none; }
.ask-band--card .ask-band__actions { display: grid; justify-items: start; gap: .8rem; }
.post__related { margin-top: 4.5rem; border-top: 1px solid var(--line); }

@media (max-width: 899px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .news-grid.has-lead > .news-card--lead { grid-column: 1 / -1; grid-row: auto; }
  .news-card--lead .news-card__media { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
  /* A last card alone on two columns takes the width, the photo beside the text. */
  .news-grid.has-lead > .news-card:last-child:nth-child(even),
  .news-grid:not(.has-lead):not(.is-single) > .news-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .news-grid.has-lead > .news-card.has-photo:last-child:nth-child(even):not(.news-card--lead),
  .news-grid:not(.has-lead):not(.is-single) > .news-card.has-photo:last-child:nth-child(odd) { display: grid; grid-template-columns: 1fr 1fr; }
  .news-grid > .news-card.has-photo:last-child .news-card__media { aspect-ratio: auto; min-height: 12rem; }
  .news-card--wide.has-photo { grid-template-columns: 1fr 1fr; }
  .news-rows--two { grid-template-columns: 1fr; }
  .news-rows--two .news-row:nth-child(2) { border-top: 0; }
}
@media (max-width: 559px) {
  .news-grid { grid-template-columns: 1fr; gap: 1rem; }
  .news-grid > .news-card.has-photo:last-child, .news-card--wide.has-photo { display: flex !important; }
  .news-grid > .news-card.has-photo:last-child .news-card__media, .news-card--wide .news-card__media { aspect-ratio: 3 / 2; min-height: 0; }
  .news-row.has-photo { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .news-row__thumb { display: none; }
  .post__hero { padding: 0; }
  .post__hero img { border-radius: 0; }
  .post-gallery { gap: .4rem; }
  .ask-band { padding: 1.2rem; }
}

/* A person's page (record/staff.twig): the services they do, each into the booking card with them picked. */
.staff-services { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.staff-services a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.staff-services a:hover { border-color: var(--mark, var(--primary)); }
.book-card > h2 { font-size: 1.3rem; margin: 0 0 .4rem; }

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


/* ---------- The cart: its panel, its page, the checkout, the order ----------
   One line drawn three ways (partials/cart_lines.twig): the panel's, the
   page's wider one, and a compact one without controls for the checkout's
   summary and the order's page. The sum is the goods' alone. */
.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; }

.cart-drawer { position: fixed; inset: 0; z-index: 200; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .2s ease; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column; background: var(--surface); color: var(--body-text);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform .2s ease;
}
.cart-drawer__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart-drawer__panel:focus { outline: none; } /* it takes the focus when it opens; the ring belongs to its controls */
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
html.cart-is-open { overflow: hidden; padding-right: var(--cart-scrollbar, 0px); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.cart-drawer__head h2 { margin: 0; font-size: 1.25rem; }
.cart-drawer__close { background: none; border: 0; color: var(--ink); cursor: pointer; padding: .3rem; }
.cart-drawer__close svg { width: 22px; height: 22px; display: block; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: .2rem 1.4rem; }
.cart-drawer__foot { padding: 1.1rem 1.4rem 1.3rem; border-top: 1px solid var(--line); display: grid; gap: .7rem; }
.cart-drawer__checkout { width: 100%; text-align: center; }
.cart-note { margin: 0; font-size: .82rem; color: var(--muted); }

.cart-empty { display: grid; justify-items: center; gap: .5rem; padding: 2.5rem 1.4rem; text-align: center; }
.cart-empty__mark { color: var(--muted); opacity: .6; }
.cart-empty__mark svg { width: 3.2rem; height: 3.2rem; display: block; }
.cart-empty__title { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.cart-empty__text { margin: 0 0 .8rem; color: var(--muted); font-size: .92rem; }

/* A line: photo | name and the price of one | the line's total; under them, the quantity and «Remove». */
.cart-lines__list { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  grid-template-areas: "photo main total" "photo controls controls";
  column-gap: .9rem; row-gap: .55rem;
  align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line[hidden] { display: none; }
.cart-line__photo { grid-area: photo; width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-small); background: var(--hover-wash); display: block; }
.cart-line__photo--contain { object-fit: contain; background: var(--plate, #fff); padding: .25rem; }
.cart-line__photo--none { display: grid; place-items: center; color: var(--muted); }
.cart-line__photo--none svg { width: 45%; height: 45%; }
.cart-line__main { grid-area: main; display: grid; gap: .2rem; min-width: 0; }
.cart-line__name { color: var(--ink); font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.cart-line__name:hover { color: var(--mark, var(--primary)); }
.cart-line__price { font-size: .85rem; color: var(--muted); }
.cart-line__tag {
  display: inline-block; margin-right: .35rem; padding: .05rem .45rem;
  border-radius: 999px; background: var(--tint); color: var(--ink);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: .1em;
}
.cart-line__added { font-size: .8rem; color: var(--success, var(--mark, var(--primary))); }
.cart-line__added::before { content: '● '; }
.cart-line.is-added { background: var(--success-soft); margin: 0 -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; }
.cart-line__total { grid-area: total; font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-line__controls { grid-area: controls; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cart-line__qty { width: 4rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); color: var(--ink); font-family: var(--font-body); }
.cart-line__remove {
  background: none; border: 0; padding: .2rem 0;
  color: var(--muted); font: inherit; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cart-line__remove:hover { color: var(--danger, var(--ink)); }
.cart-line--removed { display: flex; align-items: center; justify-content: space-between; gap: 1rem; grid-template-areas: none; font-size: .9rem; color: var(--muted); }
.cart-line--removed strong { color: var(--ink); }
.cart-line__undo { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--mark, var(--primary)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-lines--wide .cart-line { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
.cart-lines--wide .cart-line__photo { width: 5.5rem; height: 5.5rem; }
.cart-lines--wide .cart-line__controls { justify-content: flex-start; gap: 1.6rem; }
.cart-line--compact { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "photo main total"; align-items: center; padding: .7rem 0; }
.cart-line--compact .cart-line__photo { width: 3rem; height: 3rem; }
.cart-line--compact .cart-line__name { font-size: .92rem; }
.cart-line--compact .cart-line__total { font-size: .95rem; }

.cart-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1rem; color: var(--ink); }
.cart-sum strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The cart page. */
.cart-page__title { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
.cart-page__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.cart-page__sum { display: grid; gap: .9rem; position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.cart-page__sum .btn { text-align: center; }
.cart-page__sum .link-arrow { justify-self: center; }

/* 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--info { background: var(--tint); }
.notice--success { border-color: color-mix(in srgb, var(--success, #1f7a45) 45%, var(--line)); background: var(--success-soft); }
.notice--success strong { color: var(--ink); }

/* The checkout. */
.checkout__title { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.checkout-block { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
/* The checkout's fields wear the contact form's look (contact_form.css) — the same fields a visitor already knows. */
.checkout-block label:not(.choice) { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.checkout-block input:not([type='radio']),
.checkout-block textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: .97rem; margin-bottom: .35rem;
}
.checkout-block input:not([type='radio']):focus,
.checkout-block textarea:focus { outline: none; border-color: var(--mark, var(--primary)); box-shadow: 0 0 0 1px var(--mark, var(--primary)); }
.checkout-block [aria-invalid='true'] { border-color: var(--danger) !important; }
.checkout-block textarea { resize: vertical; min-height: 5.5rem; }
.checkout-block legend { display: flex; align-items: baseline; gap: .6rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; padding: 0; }
.checkout-step { font-size: .95rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.checkout-hint { margin: -.2rem 0 .6rem; font-size: .85rem; color: var(--muted); }
.form-one > div { width: 100%; }
.field-error:empty { display: none; }
.checkout-block .field-error { color: var(--danger); font-weight: 500; font-size: .8rem; }
.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-static { cursor: default; }
.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-address { margin-top: .8rem; }
.checkout-address[hidden], [data-when-delivery][hidden], [data-after-pay][hidden] { display: none; }

.checkout-summary { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); display: grid; gap: 0; padding: 1.4rem; }
.checkout-summary__toggle { display: none; }
.checkout-summary__body { display: grid; gap: 1rem; }
.checkout-summary__body[hidden] { display: none; }
.checkout-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.checkout-summary__head h2 { font-size: 1.2rem; margin: 0; }
.checkout-summary__head a { color: var(--mark, var(--primary)); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.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); }
.checkout-finish { display: grid; gap: .5rem; }
.checkout-finish--phone { display: none; }
.checkout-submit { width: 100%; text-align: center; }
.checkout-submit:disabled { opacity: .7; cursor: progress; }
.checkout-after-pay { margin: 0; text-align: center; }
@media (max-width: 900px) {
  .checkout-grid, .cart-page__grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; padding: 0; }
  .checkout-summary__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    padding: 1rem 1.2rem; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer;
  }
  .checkout-summary__toggle > span { display: inline-flex; align-items: baseline; gap: .4rem; text-align: left; }
  .checkout-summary__toggle > strong { margin-left: auto; }
  .checkout-summary__toggle::after { content: '⌄'; color: var(--muted); }
  .checkout-summary__toggle[aria-expanded='true']::after { content: '⌃'; }
  .checkout-summary__body { padding: 0 1.2rem 1.2rem; }
  .checkout-finish--wide { display: none; }
  .checkout-finish--phone { display: grid; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .cart-page__sum { position: static; }
}

/* 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; }
.order-head .order-number { text-align: left; }
/* 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; }
.booking-cancel { text-align: center; }
.booking-cancel__buttons { justify-content: center; }
.order-head__mail { margin: 0; color: var(--muted); font-size: .9rem; }
.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-number { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .8rem; padding: 1rem 1.2rem; }
.order-number__label { color: var(--muted); font-size: .85rem; flex-basis: 100%; }
.order-number__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.order-number__copy { margin-left: auto; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.order-number__copy:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
.order-progress { display: flex; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: none; }
.order-progress__step { flex: 1; display: grid; gap: .4rem; font-size: .85rem; color: var(--muted); }
.order-progress__dot { height: 4px; border-radius: 999px; background: var(--line); }
.order-progress__step.is-done .order-progress__dot { background: var(--success, var(--mark, var(--primary))); }
.order-progress__step.is-current { color: var(--ink); font-weight: 600; }
.order-progress__step.is-current .order-progress__dot { background: var(--ink); }
.order-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.order-details .card { padding: 1.4rem; }
.order-details h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.order-details__lines { display: grid; gap: .8rem; }
.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; }
@media (max-width: 900px) { .order-details { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .order-progress { flex-direction: column; gap: .7rem; }
  .order-progress__step { grid-template-columns: 1.6rem 1fr; align-items: center; }
  .order-progress__dot { width: .7rem; height: .7rem; }
}

/* 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; }

.receipt-number { margin: 0 0 1.2rem; color: var(--muted); }
.receipt-number strong { color: var(--ink); font-size: 1.15rem; letter-spacing: .02em; }
.receipt-lines { list-style: none; margin: 0 0 1rem; padding: 0; text-align: left; display: grid; gap: .5rem; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 1rem; }

/* ---- A number field with − and + (js/stepper.js) --------------------------------
   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; }
.qty--cart-line__qty { height: 36px; background: var(--bg); }
.qty--cart-line__qty input[type='number'] { width: 2.2rem; font-size: .92rem; }
.qty--cart-line__qty .qty__btn { width: 1.9rem; }
.stay-guests .qty { height: 44px; background: var(--bg); }

/* 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; }


/* ---------- Content pages: questions, a gallery, reasons, reviews, a list, a text page
   (listing/faq, gallery, features, testimonials, content; record/page.twig) ---------- */
.cp { padding-top: 1.6rem; }
.cp :target, .cp .is-marked { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
@keyframes cp-mark { from { background-color: color-mix(in srgb, var(--mark, var(--primary)) 10%, transparent); } to { background-color: transparent; } }
.is-marked { animation: cp-mark 1.6s ease-out; }

/* Questions: the groups beside, the questions in their groups. */
.faq-page { display: grid; gap: 2rem; }
.faq-page__side { display: grid; gap: 1.4rem; align-content: start; }
@media (min-width: 900px) {
  .faq-page { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
  .faq-page__side { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); order: 0; }
}
.faq-nav { display: grid; gap: .1rem; }
.faq-nav__link { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0 .5rem .9rem; border-left: 2px solid var(--line); color: var(--body-text); text-decoration: none; font-size: .95rem; }
.faq-nav__link:hover { color: var(--ink); border-left-color: var(--ink); }
.faq-nav__link .chip-count { color: var(--muted); font-size: .8rem; }
.faq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.6rem; }
.faq-tools[hidden] { display: none; }
.faq-search { position: relative; flex: 1 1 18rem; display: flex; align-items: center; }
.faq-search svg { position: absolute; left: 1rem; width: 1.1rem; height: 1.1rem; color: var(--muted); pointer-events: none; }
.faq-search input { width: 100%; padding: .7rem 1rem .7rem 2.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, var(--bg)); color: var(--ink); font: inherit; }
.faq-search input:focus { outline: 2px solid var(--mark, var(--primary)); outline-offset: 1px; border-color: transparent; }
.faq-tools__toggle { padding: 0; border: 0; background: none; color: var(--mark, var(--primary)); font: inherit; font-size: .92rem; cursor: pointer; }
.faq-none { margin: 0 0 1.6rem; color: var(--body-text); }
.faq-none a { color: var(--mark, var(--primary)); }
.faq-group + .faq-group { margin-top: 2.4rem; }
.faq-group[hidden] { display: none; }
.faq-group__title { font-size: 1.3rem; margin: 0 0 .6rem; scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.faq-group { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.qa { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.qa[hidden] { display: none; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.qa.is-found .qa__q { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--mark, var(--primary)) 18%, transparent) 62%); }
.qa__plus { position: relative; flex: none; width: 1.5rem; height: 1.5rem; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.qa__plus::before, .qa__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.qa__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa summary:hover .qa__plus { color: var(--ink); }
.qa[open] .qa__plus { transform: rotate(45deg); color: var(--ink); }
.qa summary:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.qa__a { padding: 0 2.75rem 1.2rem 0; color: var(--body-text); line-height: 1.65; }
.qa__a .prose { max-width: 68ch; }
.qa__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.qa__link[hidden] { display: none; }
.qa__link svg { width: .95rem; height: .95rem; }
.qa__link:hover { color: var(--mark, var(--primary)); }
.faq-qs--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.qa--open { padding: 1.1rem 0; }
.qa--open .qa__q { margin: 0 0 .5rem; }
.qa--open .qa__a { padding: 0; }

/* A gallery: frames 4:3 or each photo its own shape; a caption only with a name. */
.cp-gallery__grid--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cp-gallery__grid--masonry { columns: 4 14rem; column-gap: .75rem; }
.cp-gallery__grid--masonry .cp-photo { break-inside: avoid; margin-bottom: .75rem; }
.cp-photo { margin: 0; scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.cp-photo__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-small); background: var(--hover-wash); cursor: zoom-in; }
.cp-gallery__grid--grid .cp-photo__link { aspect-ratio: 4 / 3; }
.cp-photo__link img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.cp-gallery__grid--grid .cp-photo__link img { height: 100%; object-fit: cover; }
.cp-photo__link:hover img { transform: scale(1.04); }
.cp-photo__link:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }
.cp-photo__more { position: absolute; right: .5rem; bottom: .5rem; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--shade) 70%, transparent); color: #fff; font-size: .8rem; font-weight: 600; }
.cp-photo__caption { margin-top: .45rem; font-size: .85rem; line-height: 1.4; color: var(--body-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-lightbox.has-caption .product-lightbox__img { bottom: 6rem; height: calc(100% - 11.5rem); }
.product-lightbox__caption { position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%); width: min(40rem, calc(100% - 2rem)); margin: 0; text-align: center; display: grid; gap: .2rem; }
.product-lightbox__caption[hidden] { display: none; }
.product-lightbox__caption strong { font-family: var(--font-display); font-weight: 600; }
.product-lightbox__caption span { font-size: .88rem; opacity: .75; }

/* Reasons, in the design's look for them. */
.cp-features { display: grid; gap: 1.2rem; }
.cp-features--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-features--cards.cp-features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-features--cards .cp-feature { display: grid; gap: .9rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, var(--bg)); }
.cp-feature__tick { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--tint); color: var(--mark, var(--primary)); }
.cp-feature__tick svg { width: 1.2rem; height: 1.2rem; }
.cp-feature__title { margin: 0 0 .35rem; font-size: 1.2rem; }
.cp-feature p { margin: 0; color: var(--body-text); }
.cp-features--numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.cp-features--numbered .cp-feature { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.cp-feature__n { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--mark, var(--primary)); }
.cp-features--checkerboard { gap: 0; }
.cp-features--checkerboard .cp-feature { padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.cp-features--checkerboard .cp-feature__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 3rem; align-items: start; }
.cp-features--checkerboard .cp-feature:nth-child(even) .cp-feature__title { order: 2; }
.cp-features--checkerboard .cp-feature__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0; }
.cp-features--checkerboard p { font-size: 1.05rem; line-height: 1.65; }
.cp-features + .cp-foot { margin-top: 2.6rem; }

/* Reviews: a wall of quotes. */
.quote-wall { columns: 3 18rem; column-gap: 1.2rem; }
.quote-wall--two { columns: 2 18rem; }
.cp-quote { break-inside: avoid; margin: 0 0 1.2rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, var(--bg)); scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.cp-quote__mark { display: block; height: 1.6rem; font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--mark, var(--primary)); }
.cp-quote__text { margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font-size: 1.02rem; line-height: 1.6; white-space: pre-line; }
.cp-quote__text::before { display: none; }
.cp-quote__text.is-long { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.cp-quote__more { margin-top: .5rem; padding: 0; border: 0; background: none; color: var(--mark, var(--primary)); font: inherit; font-size: .9rem; cursor: pointer; }
.cp-quote__more[hidden] { display: none; }
.cp-quote__who { margin-top: 1rem; font-weight: 600; color: var(--ink); }
.cp-quote.is-spot { column-span: all; margin-bottom: 1.6rem; padding: clamp(1.6rem, 3vw, 2.6rem); border: 0; background: var(--tint); }
.cp-quote.is-spot .cp-quote__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; }
.quote-wall + .cp-foot { margin-top: 1.4rem; }

/* «Other» (content): a plain list and a plain record — a starting point a design redraws. */
.cp-list { max-width: 52rem; border-top: 1px solid var(--line); }
.cp-record { max-width: calc(44rem + 48px); padding-top: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cp-record h1 { margin: 0 0 .8rem; }
.cp-record__photo { display: block; width: 100%; height: auto; margin: 1.6rem 0; border-radius: var(--radius); }
.cp-row { position: relative; display: grid; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.cp-row.has-photo { grid-template-columns: 7rem minmax(0, 1fr); }
.cp-row__thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-small); overflow: hidden; }
.cp-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-row__title { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 600; }
.cp-row__text p { margin: 0; color: var(--body-text); }
.cp-row__link { color: inherit; text-decoration: none; }
.cp-row__link::after { content: ''; position: absolute; inset: 0; }
.cp-row.is-link:hover .cp-row__title { color: var(--mark, var(--primary)); }
.cp-row__link:focus-visible { outline: none; }
.cp-row:has(.cp-row__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

/* A text page: one axis, the contents beside it where there is room. */
.text-page__body { position: relative; }
.text-page__body h2 { scroll-margin-top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.toc { margin-bottom: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.toc summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600; color: var(--ink); }
.toc__title { display: none; }
.toc__list { margin: 0; padding: 0 1rem 1rem 2.2rem; display: grid; gap: .4rem; }
.toc__list a { color: var(--body-text); text-decoration: none; }
.toc__list a:hover { color: var(--mark, var(--primary)); }
@media (min-width: 1240px) {
  .toc-rail { position: absolute; top: 0; bottom: 0; right: calc(100% - 24px + 2.5rem); width: 12.5rem; }
  .toc { position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); margin: 0; border: 0; }
  .toc summary { display: none; }
  .toc__title { display: block; margin: 0 0 .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .toc__list { list-style: none; padding: 0; gap: 0; }
  .toc__list a { display: block; padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--line); font-size: .9rem; line-height: 1.4; }
  .toc__list a.is-current { border-left-color: var(--ink); color: var(--ink); font-weight: 600; }
}

@media (max-width: 899px) {
  .faq-page__side { display: contents; }
  .faq-nav { order: 1; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
  .faq-nav__link { flex: none; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
  .faq-page__main { order: 2; }
  .faq-page .ask-band--card { order: 3; }
  .faq-qs--columns { grid-template-columns: 1fr; }
  .cp-gallery__grid--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-features--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-features--numbered { grid-template-columns: 1fr; }
  .cp-features--checkerboard .cp-feature__text { grid-template-columns: 1fr; }
  .cp-features--checkerboard .cp-feature:nth-child(even) .cp-feature__title { order: 0; }
}
@media (max-width: 559px) {
  .cp-gallery__grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .cp-gallery__grid--masonry { columns: 2; column-gap: .5rem; }
  .cp-gallery__grid--masonry .cp-photo { margin-bottom: .5rem; }
  .cp-features--cards, .cp-features--cards.cp-features--two { grid-template-columns: 1fr; }
  .cp-row.has-photo { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .qa__a { padding-right: 0; }
}
.text-page { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Open now (partials/open_status.twig) ----------
   One line, the same on the contact page, in the header's bar, the mobile
   menu and the footer. */
.open-status { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .95rem; color: var(--body-text); }
.open-status strong { color: var(--ink); font-weight: 600; }
.open-status__dot { width: .6rem; height: .6rem; margin-right: 2px; border-radius: 999px; background: var(--muted); flex: none; }
/* the state | the rest: a hairline in the text's colour */
.open-status__sep { display: inline-block; flex: none; width: 1px; height: .85em; margin-inline: .1em; background: currentColor; opacity: .4; vertical-align: -.08em; }
/* The dot stands at the middle of the capitals on every system: the words are
   trimmed to cap height..baseline, so the font's own ascent and descent (which
   differ between systems) stop deciding where the row's middle is. */
@supports (text-box: trim-both cap alphabetic) {
  .open-status > strong, .open-status__rest { text-box: trim-both cap alphabetic; }
}
.open-status.is-open .open-status__dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.open-status.is-soon .open-status__dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.open-status.is-reply svg { width: 1.1rem; height: 1.1rem; color: var(--muted); flex: none; }

/* ---------- The contact page (pages/contact.twig): reach-now and reference on the
   left, the form on the right; on a phone reach-now, the form, the reference.
   The `contacts` component's wrapper steps aside (display: contents) so its two
   parts take places in this grid. ---------- */
.contact-layout { display: grid; gap: 2rem; grid-template-areas: "quick" "form" "info"; }
.contact-layout > .contacts--list { display: contents; }
.contact-layout .contact-quick { grid-area: quick; }
.contact-layout .contact-info { grid-area: info; }
.contact-layout__form { grid-area: form; min-width: 0; }
.contact-layout--form-only { max-width: calc(44rem + 48px); grid-template-areas: "form"; }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "quick form" "info form"; gap: 2rem 3.5rem; align-items: start; }
  .contact-layout--form-only { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "form"; }
}

/* ---------- The error page (pages/errors/index.twig): the height of the screen
   (the frame above), the text beside the code drawn as an outline. ---------- */
body > main:has(> .err) { display: flex; flex-direction: column; }
.err { flex: 1; display: flex; align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.err__grid { display: grid; gap: 2rem; align-items: center; width: 100%; }
@media (min-width: 900px) { .err__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.err__code { order: -1; font-family: var(--font-display); font-weight: 700; font-size: clamp(4.5rem, 17vw, 13rem); line-height: .9; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 22%, transparent); user-select: none; }
@media (min-width: 900px) { .err__code { order: 0; text-align: right; } }
.err h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; margin: .4rem 0 .8rem; text-wrap: balance; }
.err .lead { max-width: 38rem; }
.err__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.err__acts [hidden] { display: none; }
.err__maybe { margin-top: 2.2rem; }
.err__maybe-title { display: block; margin-bottom: .7rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.err__maybe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.err__help { margin: 1.6rem 0 0; color: var(--body-text); font-size: .95rem; }
.err__help a { color: var(--mark, var(--primary)); }

/* ---------- People (cards/people.twig, listing/staff.twig, record/staff.twig) ---------- */
.person { position: relative; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.person__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--hover-wash); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .35s ease; }
.person:hover .person__photo img { transform: scale(1.03); }
.person__text { display: grid; gap: .3rem; }
.person__name { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.person__link { color: var(--ink); text-decoration: none; }
.person__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.person:hover .person__link { color: var(--mark, var(--primary)); }
.person:has(.person__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 4px; border-radius: var(--radius); }
.person__link:focus-visible { outline: none; }
.person__role { margin: 0; font-size: .93rem; color: var(--body-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person__works { margin: 0; font-size: .82rem; color: var(--muted); }
.person__book { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.person__book svg { width: 1.05rem; height: 1.05rem; color: var(--mark, var(--primary)); }
.person__book:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }
/* No photo: a card of type — a stroke, the name large; no letter in a circle. */
.person.is-text { padding: 1.5rem; border: var(--card-border, 1px solid var(--line)); border-radius: var(--radius); background: var(--card-bg, var(--surface)); box-shadow: var(--card-shadow, none); }
.person.is-text::before { content: ''; display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--mark, var(--primary)); }
.person.is-text .person__name { font-size: 1.45rem; }
.person.is-text .person__role { -webkit-line-clamp: 3; }
/* A row of a list: a small portrait, the name and the whole role, «Book» at the end. */
.person--row, .staff--list .person { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.person--row.is-text, .staff--list .person.is-text { padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; } /* rows, not cards */
.person--row.is-text::before, .staff--list .person.is-text::before { display: none; }
.person--row .person__photo, .staff--list .person .person__photo { flex: none; width: 5rem; }
.person--row .person__text, .staff--list .person .person__text { flex: 1; min-width: 0; }
.person--row .person__role, .staff--list .person .person__role { -webkit-line-clamp: unset; display: block; }
.person--row .person__book, .staff--list .person .person__book { align-self: center; }

/* The team page's grid: as many columns as people up to five (narrow while
   three or fewer), then three or four — the template sets --c. */
.people-grid { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 2rem 1.4rem; }
.people-grid.is-narrow { grid-template-columns: repeat(var(--c, 3), minmax(0, 20rem)); }
.people-rows { max-width: 56rem; border-top: 1px solid var(--line); }

/* A person's page: the portrait on the left, kept in sight; the rest on the right. */
.person-page { padding-top: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.person-page__back { display: block; width: fit-content; margin-bottom: 1.4rem; }
.person-page__grid { display: grid; gap: 2rem; }
.person-page.has-photo .person-page__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: start; }
.person-page.is-text .person-page__grid { max-width: 44rem; }
.person-page__photo { margin: 0; position: sticky; top: calc(var(--header-sticky-h, 0px) + 1.5rem); }
.person-page__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius); display: block; }
.person-page__main { display: grid; gap: 2rem; min-width: 0; }
.person-page__name { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: .3rem 0 .8rem; text-wrap: balance; }
.person-page__bio { max-width: 44rem; }
.person-page__photos h2 { font-size: 1.3rem; margin: 0 0 .9rem; }
.person-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.person-book h2 { font-size: 1.4rem; margin: 0 0 .3rem; }
.person-book__sub { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.service-picks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.service-pick { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.service-pick + .service-pick { border-top: 1px solid var(--line); }
.service-pick:hover { background: var(--hover-wash); }
.service-pick__main { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.service-pick__name { color: var(--ink); font-weight: 600; text-decoration: none; }
.service-pick__name::after { content: ''; position: absolute; inset: 0; }
.service-pick:hover .service-pick__name { color: var(--mark, var(--primary)); }
.service-pick:has(.service-pick__name:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }
.service-pick__len { font-size: .85rem; color: var(--muted); }
.service-pick__side { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.service-pick__price { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.service-pick__near { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.service-pick__near::before { content: ''; width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted); }
.service-pick__near.is-free { color: var(--body-text); }
.service-pick__near.is-free::before { background: var(--success); }
.service-pick__go { color: var(--muted); font-size: 1.4rem; line-height: 1; }
.person-hours { margin: 0; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--tint); color: var(--body-text); font-size: .95rem; }
.person-hours__title { display: block; margin-bottom: .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.person-hours strong { color: var(--ink); font-weight: 600; }
.person-more { border-top: 1px solid var(--line); margin-top: 1rem; }

@media (max-width: 899px) {
  .people-grid, .people-grid.is-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-page.has-photo .person-page__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .person-page__photo { position: static; max-width: 28rem; }
  .person-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .people-grid, .people-grid.is-narrow { gap: 1.4rem .9rem; }
  .person.is-text { padding: 1.1rem; }
  .person--row, .staff--list .person { flex-wrap: wrap; }
  .person--row .person__book, .staff--list .person .person__book { margin-left: 6.2rem; }
  .person-page__photo { margin: 0 -24px; max-width: none; }
  .person-page__photo img { aspect-ratio: 1; border-radius: 0; }
  .service-pick { flex-wrap: wrap; }
  .service-pick__side { justify-items: start; text-align: left; flex-basis: 100%; order: 3; }
  .service-pick__go { display: none; }
}