/* ===========================================================
   שלום אטרקציות — "Bouncy Playground" design system
   Neubrutalist / sticker-collage aesthetic: thick ink outlines,
   hard offset shadows, squish interactions, scalloped castle
   dividers. Built to feel like an inflatable, not a SaaS template.
=========================================================== */
:root {
  color-scheme: light;
  --ink: #16132B;
  --cream: #FFF6E8;
  --paper: #FFFFFF;
  /* Pink deepened from #FF2E7A: white-on-pink is the site's most repeated
     pairing (every primary button + the fixed call bar) and the old tint
     sat near 3:1. This holds ~4.5:1 while keeping the candy register. */
  --pink: #E00A5B;
  --pink-bright: #FF2E7A;   /* decorative only — never behind white text */
  --yellow: #FFD100;
  --sky: #1FC8E3;
  --grass: #2FD98A;
  --grape: #7B3FF2;
  --orange: #FF7A1A;
  --wa: #0F7A6C;            /* WhatsApp teal-green, darkened for white text */

  --pink-tint: #FFE3EE;
  --sky-tint: #DEF7FB;
  --yellow-tint: #FFF6CF;
  --grape-tint: #EDE4FF;

  --line: 3px;
  --line-thick: 4px;
  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 14px;
  --pop: 6px 6px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);
  --pop-lg: 9px 9px 0 var(--ink);
  --bounce: cubic-bezier(.34, 1.61, .7, 1);
  --font-display: 'Secular One', 'Rubik', sans-serif;
  --font-main: 'Rubik', 'Segoe UI', sans-serif;
  --bottom-bar-h: 68px;
}

/* Intentionally no dark-mode variant — this is a fixed-palette brand
   identity (candy colors + ink outlines); inverting would break contrast
   pairings the whole sticker/neubrutalist look depends on. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--cream);
  color: var(--ink);
  direction: rtl;
  text-align: right;
  padding-bottom: var(--bottom-bar-h);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
p { line-height: 1.7; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.section { padding: 76px 0; position: relative; overflow: hidden; }
.center { text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  background: var(--yellow);
  border: var(--line) solid var(--ink);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
  transform: rotate(-2deg);
  box-shadow: var(--pop-sm);
}
.section-title { font-size: clamp(30px, 5.2vw, 50px); }
.section-sub { font-size: 18px; max-width: 560px; margin: 0 auto 40px; }

/* ===== Reveal-on-scroll ===== */
/* Shorter travel, no scale, quicker: the bounce read as playful on one card
   and as restless once a page had a dozen. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .42s ease, transform .42s var(--bounce); }
.reveal.in-view { opacity: 1; transform: none; }

/* ===== Buttons — squish interaction ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 999px;
  border: var(--line) solid var(--ink);
  cursor: pointer;
  box-shadow: var(--pop);
  transform: translate(0, 0);
  transition: transform .15s var(--bounce), box-shadow .15s var(--bounce);
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px) scaleX(1.05) scaleY(.9); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary { background: var(--pink); color: #fff; }
.btn-whatsapp { background: var(--wa); color: #fff; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-outline { background: var(--paper); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: var(--cream);
  border-bottom: var(--line) solid var(--ink);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; }
.brand-badge {
  width: 44px; height: 44px; border-radius: 50%;
  /* Light rather than yellow: the balloon carries the colour, and a saturated
     disc behind it fought the pink and read as a third brand colour. */
  background: var(--paper);
  border: var(--line) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  animation: floaty 3.2s ease-in-out infinite;
  flex: none;
}
.brand-badge svg { width: 24px; height: 30px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .brand-badge, .blob, .starburst, .starburst span.inner { animation: none; }
}
.nav { display: none; gap: 24px; font-weight: 700; font-size: 15px; }
.nav a { position: relative; }
.nav a:hover { color: var(--pink); }
.nav a.active { color: var(--pink); }
.header-cta { display: none; align-items: center; gap: 10px; }
/* Both labels are short and both were breaking mid-phrase once the search
   icon joined the row — a phone number split across two lines reads as a
   layout fault, not as a compact header. */
.header-cta .btn { white-space: nowrap; }

/* ===== Search =====
   One box, three homes: the header, the mobile drawer and the top of
   /products/. It submits to /products/?q= and works with JavaScript off. */
.site-search { display: flex; align-items: center; gap: 6px; }
.site-search input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px; /* < 16px makes iOS Safari zoom on focus */
  color: var(--ink); background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
}
.site-search input::placeholder { color: #6B6580; }
.site-search input:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; }
.site-search button {
  flex: none; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--yellow);
  border: var(--line) solid var(--ink);
  border-radius: 50%; cursor: pointer;
}
.site-search button:hover { background: var(--pink); color: #fff; }
.site-search button svg { width: 19px; height: 19px; }

.site-search--drawer { margin: 0 0 16px; }
.site-search--hero { max-width: 460px; margin: 18px 0 4px; }

/* The header's search entry point. An icon rather than a field, so it costs
   the row 40px at any width instead of competing with the nav and the CTAs. */
.header-search {
  flex: none; width: 40px; height: 40px; margin-inline: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--yellow);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
}
.header-search:hover { background: var(--pink); color: #fff; }
.header-search svg { width: 19px; height: 19px; }
/* On a phone the drawer carries a full search box, and the row is down to the
   brand and the menu button — a second icon between them just adds noise. */
@media (max-width: 899px) { .header-search { display: none; } }

/* Catalogue filter — the search box and category chips above /products/. */
.prod-tools { margin-bottom: 26px; }
.prod-search {
  width: 100%; max-width: 520px;
  font-family: inherit;
  font-size: 16px; /* < 16px makes iOS Safari zoom on focus */
  padding: 12px 16px;
  color: var(--ink); background: #fff;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
}
.prod-search::placeholder { color: #6B6580; }
.prod-search:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.prod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prod-chips .chip {
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 7px 15px; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
}
.prod-chips .chip:hover { background: var(--yellow-tint); }
.prod-chips .chip.is-on { background: var(--ink); color: #fff; }
.prod-empty { margin-top: 18px; font-weight: 600; }
/* `display: flex` on the card would otherwise win over the hidden attribute,
   so a filtered-out card would stay on screen. */
.unit-group[hidden], .unit-card[hidden] { display: none; }

/* ===== Mobile navigation =====
   The horizontal nav disappears below 900px, so everything under that width
   depends on this button and drawer. */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; flex: none;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 3px; border-radius: 3px; background: var(--ink);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .22s ease;
}
.nav-scrim.is-open { opacity: 1; }

.nav-drawer {
  position: fixed; z-index: 80; top: 0; bottom: 0;
  inset-inline-start: 0;              /* RTL: opens from the right */
  width: min(310px, 84vw);
  display: flex; flex-direction: column;
  background: var(--cream);
  border-inline-end: var(--line) solid var(--ink);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
/* translateX is not direction-aware, so the closed offset is written out for
   each direction. Deliberately four flat rules rather than a custom property
   holding the offset: every state is one declaration you can read straight
   off, and the open rules outrank the closed ones by plain specificity. */
.nav-drawer            { transform: translateX(-102%); }  /* LTR: off to the left  */
[dir="rtl"] .nav-drawer { transform: translateX(102%); }   /* RTL: off to the right */
.nav-drawer.is-open,
[dir="rtl"] .nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px; border-bottom: var(--line) solid var(--ink);
}
.nav-drawer__title { font-family: var(--font-display); font-size: 22px; }
.nav-drawer__close {
  width: 38px; height: 38px; font-size: 27px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-drawer__links { display: flex; flex-direction: column; padding: 10px 0; }
.nav-drawer__links a {
  padding: 15px 22px; font-weight: 700; font-size: 17px;
  border-bottom: 1px dashed rgba(0, 0, 0, .12);
}
.nav-drawer__links a.active { color: var(--pink); }
.nav-drawer__links a.active::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--pink);
  margin-inline-end: 9px; vertical-align: middle;
}
.nav-drawer__cta {
  margin-top: auto; display: grid; gap: 10px;
  /* clears the fixed bottom bar, which stays visible under the drawer */
  padding: 18px 22px calc(18px + var(--bottom-bar-h));
  border-top: var(--line) solid var(--ink);
}
.nav-drawer__cta .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim, .nav-toggle span { transition: none; }
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .header-cta { display: flex; }
  .nav-toggle { display: none; }
}

/* ===== Sticky bottom contact bar ===== */
.bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-bar-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 60;
  border-top: var(--line) solid var(--ink);
}
@media (min-width: 900px) { .bottom-bar { display: none; } }
.bottom-bar a {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; font-weight: 800; font-size: 15.5px; color: #fff;
  letter-spacing: .01em;
}
.bottom-bar svg { width: 21px; height: 21px; flex: none; }
.bottom-bar .call { background: var(--pink); }
.bottom-bar .wa { background: var(--wa); }
.bottom-bar a:active { filter: brightness(.9); }

/* ===== Hero — collage, not a dimmed banner ===== */
.hero {
  position: relative;
  padding: 54px 0 90px;
  background: var(--pink-tint);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }
.hero-eyebrow-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero h1 { font-size: clamp(36px, 6.4vw, 60px); }
.hero h1 .hl { color: var(--pink); }
.hero p.lead { font-size: 19px; max-width: 480px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero-badges {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 34px; font-size: 14px; font-weight: 800;
}
.hero-badges span {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: 999px; padding: 7px 14px; box-shadow: var(--pop-sm);
}

.hero-collage { position: relative; height: 420px; }
.polaroid {
  position: absolute;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-sm);
  box-shadow: var(--pop-lg);
  padding: 10px 10px 34px;
  transition: transform .3s var(--bounce);
}
.polaroid img { border-radius: 6px; width: 100%; height: 100%; object-fit: cover; }
.polaroid:hover { transform: scale(1.04) rotate(0deg) !important; z-index: 5; }
.polaroid.p1 { width: 62%; top: 0; right: 4%; transform: rotate(-6deg); aspect-ratio: 4/5; }
.polaroid.p2 { width: 46%; bottom: 0; left: 0; transform: rotate(7deg); aspect-ratio: 4/5; z-index: 2; }

.starburst {
  position: absolute; top: -18px; left: -18px;
  width: 108px; height: 108px;
  background: var(--yellow);
  border: var(--line) solid var(--ink);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 800; font-size: 13px; line-height: 1.25;
  z-index: 6;
  animation: spin-slow 14s linear infinite;
}
.starburst b { font-family: var(--font-display); font-size: 22px; display: block; }
.starburst span.inner { animation: spin-slow-rev 14s linear infinite; display: block; }

.blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: .55;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-slow-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ===== Scalloped castle-turret divider =====
   Usage: <div class="scallop" style="background-color:var(--below);
   background-image:radial-gradient(circle at 28px 0, var(--above) 27px, transparent 28px);"></div>
   Hanging bumps of the "above" section's color drape into the "below" color, like bunting on a castle. */
.scallop { height: 40px; width: 100%; background-repeat: repeat-x; background-size: 56px 40px; position: relative; z-index: 3; }

/* ===== Category grid ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  border: var(--line) solid var(--ink);
  box-shadow: var(--pop);
  transition: transform .25s var(--bounce), box-shadow .25s var(--bounce);
  background: var(--paper);
}
.cat-card:nth-child(4n+1) { transform: rotate(-2deg); }
.cat-card:nth-child(4n+2) { transform: rotate(1.5deg); }
.cat-card:nth-child(4n+3) { transform: rotate(-1deg); }
.cat-card:nth-child(4n+4) { transform: rotate(2deg); }
.cat-card:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: var(--pop-lg); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,43,0) 45%, rgba(22,19,43,.88) 100%); }
.cat-card .label { position: absolute; bottom: 12px; right: 12px; left: 12px; color: #fff; font-family: var(--font-display); font-size: 17px; }

/* ===== About teaser ===== */
.about-teaser { display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) { .about-teaser { grid-template-columns: 1fr 1fr; } }
.about-photo {
  border-radius: var(--r-lg); border: var(--line) solid var(--ink); box-shadow: var(--pop-lg);
  transform: rotate(-2deg); overflow: hidden;
}
.stat-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.stat {
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-sm);
  box-shadow: var(--pop-sm); padding: 12px 18px; transform: rotate(-1.5deg);
}
.stat:nth-child(2) { transform: rotate(1.5deg); }
.stat:nth-child(3) { transform: rotate(-2deg); }
.stat b { display: block; font-family: var(--font-display); font-size: 28px; color: var(--pink); }
.stat span { font-size: 13px; font-weight: 700; }

/* ===== Video section ===== */
.video-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: var(--line-thick) solid var(--ink);
  box-shadow: var(--pop-lg);
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9/16;
  position: relative;
  background: #000;
  transform: rotate(-1.5deg);
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.video-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--yellow); color: var(--ink);
  border: var(--line) solid var(--ink);
  font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px;
}

/* ===== Testimonials ===== */
.testi-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-md);
  padding: 26px;
  box-shadow: var(--pop);
  transition: transform .25s var(--bounce);
}
.testi-grid > *:nth-child(3n+1) { transform: rotate(-1.5deg); }
.testi-grid > *:nth-child(3n+2) { transform: rotate(1deg); }
.testi-grid > *:nth-child(3n+3) { transform: rotate(-1deg); }
.testi-card:hover { transform: rotate(0deg) translateY(-4px) !important; }
.testi-stars { color: var(--yellow); -webkit-text-stroke: 1px var(--ink); font-size: 20px; margin-bottom: 10px; letter-spacing: 3px; }
.testi-name { font-weight: 800; margin-top: 14px; }

/* ===== Gallery (category pages) — scrapbook style =====
   Every tile used to be an identical white polaroid, which read as a
   contact sheet rather than a scrapbook. Four frame treatments now cycle:
   polaroid, tall crop, colour-backed card, and wide landscape. */
.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 26px 18px; padding-top: 10px;
  /* Each frame variant has its own aspect ratio, so tiles in a row have
     different natural heights. The default `stretch` pulls them all to the
     tallest while the image keeps its ratio, leaving dead white space below
     the shorter ones. `start` lets every tile end where its picture ends —
     which is also what makes it read as a scrapbook rather than a grid. */
  align-items: start;
}
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid .polaroid-tile {
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-sm);
  box-shadow: var(--pop); padding: 8px 8px 20px;
  transition: transform .25s var(--bounce), box-shadow .25s var(--bounce);
}
/* width:100% is load-bearing, not cosmetic. These images are lazy-loaded, and
   `max-width:100%` alone leaves an unloaded image at its natural width — zero.
   aspect-ratio then computes zero height and the tile collapses to a sliver
   until the bytes arrive, which also throws layout shift. An explicit width
   lets aspect-ratio reserve the right box up front. */
.gallery-grid .polaroid-tile img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 5px;
  background: var(--sky-tint);
}

/* Frame variants on a single 3-cycle so every tile gets exactly one
   treatment. An earlier version ran two overlapping cycles (4n and 6n); a
   tile matching both became a wide colour card holding a square image, which
   left most of the card empty. One cycle, one frame. */
.gallery-grid > *:nth-child(3n+2) {           /* tall crop, edge to edge */
  padding: 0; border-radius: var(--r-md); overflow: hidden;
}
.gallery-grid > *:nth-child(3n+2) img { aspect-ratio: 3/4; border-radius: 0; }

.gallery-grid > *:nth-child(3n+3) {           /* colour-backed card */
  background: var(--yellow-tint); padding: 11px 11px 24px;
}
.gallery-grid > *:nth-child(3n+3) img { aspect-ratio: 4/5; }

/* rotations */
.gallery-grid > *:nth-child(5n+1) { transform: rotate(-3deg); }
.gallery-grid > *:nth-child(5n+2) { transform: rotate(2deg); }
.gallery-grid > *:nth-child(5n+3) { transform: rotate(-1.5deg); }
.gallery-grid > *:nth-child(5n+4) { transform: rotate(3deg); }
.gallery-grid > *:nth-child(5n+5) { transform: rotate(-2deg); }
.gallery-grid .polaroid-tile:hover { transform: rotate(0deg) scale(1.04) !important; box-shadow: var(--pop-lg); z-index: 2; position: relative; }

/* ===== CTA band ===== */
.cta-band {
  background: var(--grape);
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--r-lg);
  padding: 54px 30px;
  color: #fff;
  text-align: center;
  box-shadow: var(--pop-lg);
  position: relative;
}
.cta-band h2 { font-size: clamp(26px, 4vw, 38px); }

/* ===== Footer ===== */
.site-footer { padding: 54px 0 130px; border-top: var(--line) solid var(--ink); font-size: 14px; }
@media (min-width: 900px) { .site-footer { padding-bottom: 40px; } }
.footer-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 24px; }
.footer-grid a { display: block; margin-bottom: 8px; font-weight: 600; }
.footer-grid a:hover { color: var(--pink); }

/* ===== Page header (category/inner pages) ===== */
.page-hero { padding: 60px 0 46px; text-align: center; background: var(--sky-tint); }

/* ===== Confetti ===== */
.confetti-piece { position: fixed; top: -10px; z-index: 999; pointer-events: none; border-radius: 2px; }

/* ===== Category caveat ===== */
.cat-note {
  background: var(--yellow-tint);
  border: var(--line) solid var(--ink);
  border-inline-start: 6px solid var(--yellow);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  font-size: 15.5px; line-height: 1.7; font-weight: 500;
}

/* ===== Offer list (attractions page) ===== */
.offer-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.offer {
  display: block;
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--pop-sm);
  transition: transform .2s var(--bounce), box-shadow .2s var(--bounce);
}
.offer:hover { transform: translate(-3px, -3px); box-shadow: var(--pop); }
.offer h3 { font-size: 18.5px; margin: 0 0 6px; }
.offer p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; }
.offer-go { font-weight: 800; font-size: 14.5px; color: var(--pink); }

/* ===== Contact strip (foot of every page) ===== */
.strip {
  background: var(--ink);
  color: #fff;
  padding: 40px 0;
  border-top: var(--line) solid var(--ink);
}
.strip-inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .strip-inner { grid-template-columns: 1fr 1fr; gap: 40px; } }
.strip-copy h2 { font-size: clamp(22px, 3.6vw, 30px); margin: 0 0 8px; color: #fff; }
.strip-copy p { margin: 0 0 16px; color: rgba(255,255,255,.82); font-size: 16px; }
.strip-direct { display: flex; gap: 10px; flex-wrap: wrap; }
.strip-direct a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 9px 16px;
}
.strip-direct a:hover { background: rgba(255,255,255,.2); }
.strip-direct svg { width: 17px; height: 17px; }

/* The form inside the dark strip is the same markup as on /contact/; only the
   surface changes, so the label colour has to flip while the fields stay on
   the light ground that keeps them readable. */
.strip-formwrap .quote-form {
  background: transparent; border: none; box-shadow: none;
  padding: 0; gap: 13px;
}
.strip-formwrap .qf-row label { color: #fff; font-size: 14px; }
.strip-formwrap .qf-status { color: rgba(255,255,255,.9); }
.strip-formwrap .qf-status.is-error { color: #FFB4C8; }
.strip-formwrap .qf-done { color: #fff; }
.strip-formwrap .qf-done h2 { color: #fff; }
.strip-formwrap input,
.strip-formwrap select,
.strip-formwrap textarea { background: #fff; }

/* ===== Footer towns ===== */
.footer-towns {
  margin: 0 0 22px; padding: 16px 0;
  border-top: 1px solid rgba(27,27,58,.1);
  border-bottom: 1px solid rgba(27,27,58,.1);
  font-size: 13.5px; line-height: 1.9; color: var(--ink);
  opacity: .75;
}
.footer-towns strong { opacity: 1; margin-inline-end: 6px; }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--pop-sm);
  overflow: hidden;
}
.faq-item summary {
  padding: 17px 20px;
  font-weight: 800;
  font-size: 16.5px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--pink);
  flex: none;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { border-bottom: 2px solid rgba(22, 19, 43, .12); }
.faq-answer { padding: 16px 20px 18px; }
.faq-answer p { margin: 0; font-size: 15.5px; line-height: 1.75; }

/* ===== Quote form ===== */
.quote-form {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.qf-row { display: flex; flex-direction: column; gap: 6px; }
.qf-row label { font-weight: 800; font-size: 15px; }
.qf-row .req { color: var(--pink); }
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* < 16px makes iOS Safari zoom on focus */
  padding: 13px 14px;
  border: var(--line) solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
}
.quote-form textarea { resize: vertical; min-height: 84px; }
.quote-form input:focus-visible,
.quote-form select:focus-visible,
.quote-form textarea:focus-visible,
.quote-form button:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.qf-2col { display: grid; gap: 16px; }
@media (min-width: 520px) { .qf-2col { grid-template-columns: 1fr 1fr; } }

/* Honeypot: still rendered (display:none is a giveaway) but clipped in place.
   The usual `left:-9999px` trick is wrong in an RTL document — it pushes the
   field 10,000px off the leading edge and inflates the page's scroll width to
   match. overflow-x:hidden hides the symptom while the phantom scroll area
   stays. Clipping at natural position keeps the field real and the page the
   width it looks. */
.qf-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qf-status { margin: 4px 0 0; font-weight: 700; font-size: 14.5px; min-height: 1.2em; }
.qf-status.is-error { color: var(--pink); }
.qf-fineprint { font-size: 14px; margin: 6px 0 0; }
.qf-fineprint a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qf-done { text-align: center; padding: 18px 6px; }
.qf-done h2 { font-size: 30px; margin-bottom: 8px; }

/* ===========================================================
   READING LAYER — blog index + article
   The playground look above is loud on purpose; long-form text
   needs the opposite. Same palette and ink outlines, but quieter
   surfaces, a real type scale, and a measured column.
=========================================================== */

.read-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* --- blog index --- */
.post-grid { display: grid; gap: 26px; }
@media (min-width: 780px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--pop);
  overflow: hidden;
  transition: transform .22s var(--bounce), box-shadow .22s var(--bounce);
  min-width: 0;
}
.post-card:hover { transform: translate(-3px, -3px); box-shadow: var(--pop-lg); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--sky-tint); border-bottom: var(--line) solid var(--ink); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.post-card__meta { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--pink); }
.post-card__title {
  font-family: var(--font-display); font-size: 20px; line-height: 1.28;
  margin: 0; text-wrap: balance;
}
.post-card__excerpt {
  /* 1.65 left the three clamped lines drifting apart and reading as a list
     rather than a paragraph; 1.5 holds them together at this size. */
  margin: 0; font-size: 15px; line-height: 1.5; color: #4A4560;
  /* excerpt is plain text (HTML stripped at render) so clamping is safe */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__more { margin-top: auto; padding-top: 4px; font-weight: 800; font-size: 14.5px; color: var(--pink); }

/* --- article --- */
.article-head { padding: 44px 0 28px; }
.article-kicker {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
  color: var(--pink); margin-bottom: 14px;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.4vw, 44px);
  line-height: 1.16;
  margin: 0 0 18px;
  text-wrap: balance;
}
.article-standfirst {
  font-size: 19px; line-height: 1.6; color: #4A4560; margin: 0 0 26px;
  font-weight: 500;
}

.byline { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-block: var(--line) solid var(--ink); }
.byline__avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  border: var(--line) solid var(--ink); object-fit: cover; object-position: center 22%;
  background: var(--yellow);
}
.byline__who { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.byline__meta { font-size: 13.5px; color: #5C5775; line-height: 1.4; }
.byline__meta span + span::before { content: "·"; margin: 0 7px; opacity: .55; }

.article-hero-img {
  margin: 30px 0 6px; border: var(--line) solid var(--ink); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--pop);
}
.article-hero-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* body copy — the actual reading experience */
.article-body { font-size: 18.5px; line-height: 1.85; color: #22203A; padding-bottom: 8px; }
.article-body > *:first-child { margin-top: 26px; }
.article-body p { margin: 0 0 1.25em; }
.article-body p.lede { font-size: 20.5px; line-height: 1.7; font-weight: 500; color: #16132B; }
.article-body h2 {
  font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.25; margin: 1.9em 0 .5em; text-wrap: balance;
}
.article-body h3 { font-size: 19.5px; font-weight: 800; font-family: var(--font-main); margin: 1.6em 0 .4em; }
.article-body strong { font-weight: 800; }
.article-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-inline-start: 1.3em; }
.article-body li { margin-bottom: .7em; padding-inline-start: .2em; }
.article-body ol { list-style: none; counter-reset: step; padding-inline-start: 0; }
.article-body ol > li {
  counter-increment: step; position: relative;
  padding-inline-start: 46px; margin-bottom: 1.15em;
}
.article-body ol > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; top: .1em;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--yellow); border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; line-height: 1;
}
.article-body blockquote {
  margin: 1.8em 0; padding: 20px 24px;
  background: var(--yellow-tint);
  border-inline-start: 5px solid var(--yellow);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 19px; line-height: 1.7; font-weight: 500;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body img { border-radius: var(--r-sm); border: var(--line) solid var(--ink); margin: 1.6em 0; }
.article-body figure { margin: 1.8em 0; }
.article-body figcaption { font-size: 14px; color: #5C5775; margin-top: 8px; text-align: center; }
.article-body hr { border: none; border-top: 2px dashed rgba(22,19,43,.22); margin: 2.4em 0; }
/* long URLs / unbroken strings must never widen the column */
.article-body { overflow-wrap: break-word; }
.article-body pre, .article-body table { overflow-x: auto; max-width: 100%; }

.article-endnote {
  margin-top: 34px; padding: 22px 24px;
  background: var(--sky-tint); border: var(--line) solid var(--ink);
  border-radius: var(--r-md); font-size: 15.5px; line-height: 1.7;
}
.article-endnote strong { font-weight: 800; }

.article-next { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Two onward articles. Every post is linked from at least two others, so no
   article sits at the end of a dead branch — for a reader or for a crawler. */
.article-more {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 46px; padding-top: 30px;
  border-top: 2px dashed var(--ink-20, rgba(0, 0, 0, .18));
}
.article-rel {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: var(--r-md); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.article-rel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.article-rel__k {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 6px;
}
.article-rel__t {
  display: block; font-weight: 800; font-size: 16.5px; line-height: 1.45;
  color: var(--ink);
}

/* ---------------------------------------------------------------- gallery */

.gal-chips {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-bottom: 26px; justify-content: center;
}
.gal-chip {
  font: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gal-chip:hover { transform: translateY(-2px); }
.gal-chip.is-active { background: var(--ink); color: var(--paper); }

/* ===== Equipment catalogue =====
   A named unit with its measurements, as opposed to the loose grid below it.
   Wider cards than the photo tiles because these carry text and are meant to
   be read rather than scanned past. */
.unit-grid {
  display: grid; gap: 16px; margin-top: 28px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.unit-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.unit-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.unit-card__media { position: relative; aspect-ratio: 4/3; background: var(--sky-tint); }
.unit-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-card__count {
  position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
  padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--ink); color: #fff;
}
.unit-card__body { padding: 13px 15px 16px; }
.unit-card__name { font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.unit-card__spec { margin-top: 5px; font-size: 13.5px; color: var(--ink-70, #555); }

/* Specification table on a unit's own page. */
.unit-specs {
  display: grid; gap: 12px; margin: 0 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.unit-spec {
  padding: 14px 16px; background: var(--yellow-tint);
  border: var(--line) solid var(--ink); border-radius: var(--r-md);
}
.unit-spec dt {
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-70, #555); margin-bottom: 4px;
}
.unit-spec dd { margin: 0; font-size: 19px; font-weight: 800; }
.unit-desc { margin-bottom: 26px; font-size: 16.5px; line-height: 1.75; }

/* Homepage product strip: one row, swiped on a phone, scrolled on a desktop.
   Scroll-snap keeps a card centred after every flick without any JS. */
.pcar {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(260px, 74vw);
  gap: 16px; overflow-x: auto; padding: 6px 4px 18px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.pcar > .unit-card { scroll-snap-align: center; }

/* Two columns on a phone, filling out on wider screens. Square tiles keep the
   grid calm when the source photos are a mix of portrait and landscape. */
.gal-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } }

.gal-tile {
  position: relative; display: block; padding: 0; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: var(--r-md);
  overflow: hidden; background: var(--sky-tint);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gal-tile:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--ink); }
.gal-tile[hidden] { display: none; }
/* Explicit width: a lazy image has no natural width before it loads, which
   makes aspect-ratio resolve to zero height and collapses the tile. */
.gal-tile img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;
}

/* Full-screen viewer for a gallery tile — replaces the old "opens the image
   in a new tab" behaviour. Sits above everything, dismissed by its own
   button, a click on the backdrop, or Escape. */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 16, 12, .92);
  align-items: center; justify-content: center; padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%; max-height: 100%; border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lightbox__close {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .4); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
body.lightbox-lock { overflow: hidden; }

/* ===== Accessibility widget ===== */
.a11y-btn {
  position: fixed; z-index: 90;
  bottom: calc(var(--bottom-bar-h) + 14px); inset-inline-start: 14px;
  width: 50px; height: 50px; border-radius: 50%;
  background: #1a56db; color: #fff; border: 2px solid #fff;
  box-shadow: var(--pop-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.a11y-btn svg { width: 26px; height: 26px; }
@media (min-width: 900px) { .a11y-btn { bottom: 18px; } }

.a11y-panel {
  position: fixed; z-index: 91;
  bottom: calc(var(--bottom-bar-h) + 72px); inset-inline-start: 14px;
  width: 260px; max-width: calc(100vw - 28px);
  background: var(--paper); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--r-md);
  box-shadow: var(--pop);
  padding: 14px;
}
@media (min-width: 900px) { .a11y-panel { bottom: 82px; } }
.a11y-panel[hidden] { display: none; }
.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 15px;
}
.a11y-panel__close {
  border: none; background: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--ink); padding: 2px 6px;
}
.a11y-opt {
  display: block; width: 100%; text-align: start; box-sizing: border-box;
  padding: 9px 12px; margin-bottom: 6px;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--cream); font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; text-decoration: none; color: var(--ink);
}
.a11y-opt:last-child { margin-bottom: 0; }
.a11y-opt[aria-pressed="true"] { background: var(--yellow); }
.a11y-opt--link { text-align: center; }

/* What each control actually does. Kept simple on purpose — these override
   the site's own design, so the effect has to be obvious and reversible,
   not a subtle theme variant. */
html.a11y-font-1 { font-size: 108%; }
html.a11y-font-2 { font-size: 118%; }
html.a11y-font-3 { font-size: 130%; }
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast :is(p, li, dd, dt, span, h1, h2, h3, h4, label, small) { color: #000 !important; }
html.a11y-contrast a { color: #0000CD !important; }
html.a11y-underline a { text-decoration: underline !important; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

.gal-tile--video .gal-play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); border: 2px solid #fff;
}
.gal-tile--video .gal-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-style: solid;
  /* RTL flips nothing here — this triangle is drawn, not typed */
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(3px);
}
.gal-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 20px 10px 8px; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  text-align: center;
}

/* Full-bleed viewer. The point of the fixed inset:0 and the object-fit:contain
   is that the media owns the whole screen — the previous version showed the
   page around the photo, which is what the owner objected to. */
/* Above the confetti layer (999) — a burst firing while the viewer is open
   would otherwise rain over the photo. */
.gal-view {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .94);
  display: flex; align-items: center; justify-content: center;
}
.gal-view[hidden] { display: none; }
.gal-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.gal-stage img, .gal-stage video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.gal-close, .gal-nav {
  position: absolute; z-index: 2; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; border: 0;
  border-radius: 50%; width: 46px; height: 46px;
  font-size: 30px; line-height: 1; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.gal-close:hover, .gal-nav:hover { background: rgba(255, 255, 255, .3); }
.gal-close { top: 14px; inset-inline-end: 14px; font-size: 34px; }
.gal-nav { top: 50%; transform: translateY(-50%); }
.gal-prev { inset-inline-end: 12px; }
.gal-next { inset-inline-start: 12px; }
@media (max-width: 560px) {
  .gal-nav { width: 40px; height: 40px; font-size: 26px; }
}


/* ===== Concept-page product picker ===== */
.pick-group { margin-top: 26px; }
.pick-group h3 { font-size: 18px; margin-bottom: 10px; }
.pick-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: var(--r-md);
}
.pick-row:has(input:checked) { background: var(--yellow-tint); box-shadow: 3px 3px 0 var(--ink); }
.pick-row input { width: 20px; height: 20px; accent-color: var(--pink); flex: none; }
.pick-row img {
  width: 54px; height: 54px; object-fit: cover; border-radius: 8px;
  border: 2px solid var(--ink); flex: none;
}
.pick-row__name { font-weight: 800; flex: 1; min-width: 0; }
.pick-row__name small { display: block; font-weight: 600; color: #5C5775; }
.pick-row__price { font-weight: 800; white-space: nowrap; }

.pick-total {
  position: sticky; bottom: calc(var(--bottom-bar-h) + 10px); z-index: 40;
  margin-top: 20px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.pick-total__sum { font-size: 22px; }
@media (min-width: 900px) { .pick-total { bottom: 14px; } }