/* ============================================================
   Nourkids store.css  (storefront: landing, plan detail, checkout)
   ============================================================ */

/* ---------- Announcement bar ---------- */
.announce {
  background: linear-gradient(90deg, var(--sky) 0%, var(--amber) 100%);
  color: var(--ink);
  font-weight: 800;
  text-align: center;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 10px 16px;
}
[dir="rtl"] .announce { background: linear-gradient(270deg, var(--sky) 0%, var(--amber) 100%); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(244, 251, 255, 0.88); /* tracks --bg */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: var(--shadow-s);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; overflow: hidden; }
.brand__name {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--ink-soft);
  font-size: 16.5px;
  font-weight: 700;
  padding-block: 6px;
  border-block-end: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover { color: var(--accent-ink); border-color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.nav-burger svg { width: 20px; height: 20px; }

/* ---------- Hero (bright sky wash) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(51, 206, 254, 0.38) 0%, transparent 58%),
    radial-gradient(110% 150% at 8% 120%, rgba(183, 74, 255, 0.20) 0%, transparent 62%),
    radial-gradient(80% 90% at 50% 118%, rgba(254, 191, 0, 0.18) 0%, transparent 60%),
    linear-gradient(165deg, #E4F8FF 0%, #DCF1FF 46%, #F4E9FF 100%);
  color: var(--ink);
}
.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -10%;
  inset-inline-end: -8%;
  width: 620px;
  height: 620px;
  max-width: 70%;
  /* Puzzle-heart watermark echoing the logo, plus sparkles. '#' must be '%23' here. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2333CEFE' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 137.1 C43.3 97.7 66.5 45.3 100 78.8 C133.5 45.3 156.7 97.7 100 137.1Z'/%3E%3Cpath d='M100 63 V133'/%3E%3Cpath d='M62 95 H138'/%3E%3Ccircle cx='100' cy='73' r='8'/%3E%3Ccircle cx='100' cy='119' r='8'/%3E%3Ccircle cx='76' cy='95' r='8'/%3E%3Ccircle cx='124' cy='95' r='8'/%3E%3Cpath d='M30 30 v14 M23 37 h14'/%3E%3Cpath d='M170 46 v12 M164 52 h12'/%3E%3Cpath d='M24 160 v12 M18 166 h12'/%3E%3Cpath d='M168 158 v14 M161 165 h14'/%3E%3Ccircle cx='46' cy='96' r='4'/%3E%3Ccircle cx='154' cy='120' r='4'/%3E%3Ccircle cx='100' cy='176' r='4'/%3E%3Ccircle cx='100' cy='22' r='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-block: 72px 88px;
}
.hero__kicker {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid rgba(0, 142, 244, 0.28);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  margin-block-end: 20px;
}
.hero h1 {
  font-size: clamp(38px, 7.2vw, 68px);
  margin-block-end: 18px;
  color: var(--ink);
}
.hero__sub {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  max-width: 46ch;
  margin-block-end: 30px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.hero .btn--ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

.hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hero__art .art-tile {
  --float-base: 0px;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  aspect-ratio: 3 / 4;
  transform: translateY(var(--float-base));
  animation: heroFloat 7s ease-in-out infinite;
}
.hero__art .art-tile svg { width: 100%; height: 100%; }
.hero__art .art-tile:nth-child(1) { --float-base: 26px; }
.hero__art .art-tile:nth-child(2) { --float-base: -8px; animation-delay: 1.6s; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(var(--float-base)); }
  50%      { transform: translateY(calc(var(--float-base) - 12px)); }
}

/* ============================================================
   COLOUR BANDS
   Every content section gets its own soft colour. The rotation is
   warm → cool → warm → cool (amber, sky, magenta, mint, grape, blue)
   run through twice, so no two neighbours share a temperature and no
   hue repeats until six sections later. That is what stops it reading
   as a random rainbow.

   Each band curves over the one above it, so the page scrolls as a
   stack of soft cards. Sections are in DOM order and all position:
   relative with no z-index, so each naturally paints over its
   predecessor. Do NOT give a band z-index >= 100 or it will cover
   the sticky header.

   NOTE: overflow:hidden here is what stops the decorative blobs from
   widening the page. It also disables position:sticky in descendants,
   so don't extend this recipe to plan.html or checkout.html, whose
   .pd__media and .summary-card rely on sticky.
   ============================================================ */
.usps, #plans, #offers, #workshops, #facilities, #ages,
#visit, #rules, #parties, #gallery, #about, #contact {
  position: relative;
  isolation: isolate;            /* lets the blobs use z-index:-1 safely */
  overflow: hidden;
  background-color: var(--band);
  /* confetti dots: percentage positions can never overflow the box */
  background-image:
    radial-gradient(circle at 11% 16%, var(--deco)   0 7px,  transparent 7px),
    radial-gradient(circle at 90% 11%, var(--deco-2) 0 10px, transparent 10px),
    radial-gradient(circle at 79% 84%, var(--deco)   0 6px,  transparent 6px),
    radial-gradient(circle at 21% 89%, var(--deco-2) 0 9px,  transparent 9px),
    radial-gradient(circle at 52% 6%,  var(--deco)   0 5px,  transparent 5px);
  background-repeat: no-repeat;
  /* curve over the previous band */
  margin-block-start: calc(var(--band-curve) * -1);
  border-start-start-radius: var(--band-curve);
  border-start-end-radius: var(--band-curve);
  padding-block-start: calc(var(--section-pad, 64px) + var(--band-curve) * 0.4);
}
.site-footer {
  position: relative;
  margin-block-start: calc(var(--band-curve) * -1);
  border-start-start-radius: var(--band-curve);
  border-start-end-radius: var(--band-curve);
  padding-block-start: var(--band-curve);
}

/* warm */ .usps      { --band: var(--amber-soft);   --deco: rgba(254,191,0,.28);  --deco-2: rgba(51,206,254,.22); --section-pad: 34px; }
/* cool */ #plans     { --band: var(--sky-soft);     --deco: rgba(51,206,254,.30); --deco-2: rgba(183,74,255,.16); }
/* warm */ #offers    { --band: var(--magenta-soft); --deco: rgba(252,35,113,.16); --deco-2: rgba(254,191,0,.22); }
/* cool */ #workshops { --band: var(--mint-soft);    --deco: rgba(18,165,124,.16); --deco-2: rgba(51,206,254,.24); }
/* warm */ #facilities{ --band: var(--grape-soft);   --deco: rgba(183,74,255,.20); --deco-2: rgba(252,35,113,.14); }
/* cool */ #ages      { --band: var(--surface-warm); --deco: rgba(0,142,244,.14);  --deco-2: rgba(183,74,255,.16); }
/* warm */ #visit     { --band: var(--amber-soft);   --deco: rgba(254,191,0,.28);  --deco-2: rgba(0,142,244,.14); }
/* cool */ #rules     { --band: var(--sky-soft);     --deco: rgba(51,206,254,.30); --deco-2: rgba(18,165,124,.16); }
/* warm */ #parties   { --band: var(--magenta-soft); --deco: rgba(252,35,113,.16); --deco-2: rgba(183,74,255,.18); }
/* cool */ #gallery   { --band: var(--mint-soft);    --deco: rgba(18,165,124,.16); --deco-2: rgba(254,191,0,.22); }
/* warm */ #about     { --band: var(--grape-soft);   --deco: rgba(183,74,255,.20); --deco-2: rgba(51,206,254,.24); }
/* cool */ #contact   { --band: var(--surface-warm); --deco: rgba(0,142,244,.14);  --deco-2: rgba(252,35,113,.14); }

/* Two drifting soft blobs per band. These DO hang outside the box,
   which is why every band carries overflow:hidden above. */
.usps::before, #plans::before, #offers::before, #workshops::before,
#facilities::before, #ages::before, #visit::before, #rules::before,
#parties::before, #gallery::before, #about::before, #contact::before,
.usps::after, #plans::after, #offers::after, #workshops::after,
#facilities::after, #ages::after, #visit::after, #rules::after,
#parties::after, #gallery::after, #about::after, #contact::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.usps::before, #plans::before, #offers::before, #workshops::before,
#facilities::before, #ages::before, #visit::before, #rules::before,
#parties::before, #gallery::before, #about::before, #contact::before {
  inset-block-start: -70px;
  inset-inline-end: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--deco) 0%, transparent 70%);
  animation: blobDrift 18s ease-in-out infinite;
}
.usps::after, #plans::after, #offers::after, #workshops::after,
#facilities::after, #ages::after, #visit::after, #rules::after,
#parties::after, #gallery::after, #about::after, #contact::after {
  inset-block-end: -90px;
  inset-inline-start: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--deco-2) 0%, transparent 70%);
  animation: blobDrift 24s ease-in-out infinite reverse;
}
@keyframes blobDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, 26px, 0) scale(1.08); }
}

/* ---------- USP strip ---------- */
.usps-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-block: 34px;
}
.usp {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--r-l);
  border-block-start: 6px solid var(--card-hue);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 20px;
}
.usp__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--card-tint);
  color: var(--card-on-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.usp__icon svg { width: 22px; height: 22px; }
.usp h3 { font-family: var(--font-body); font-size: 17px; font-weight: 800; margin: 2px 0 4px; }
.usp p { font-size: 15.5px; color: var(--muted); margin: 0; }

/* ---------- Product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.card {
  background: var(--surface);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.85);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(53, 63, 112, 0.16), 0 0 0 1.5px var(--accent-soft);
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}
.card__media .badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
}
.card__media svg, .card__media .media-img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}
.card:hover .card__media svg, .card:hover .card__media .media-img { transform: scale(1.04); }
.card__media { overflow: hidden; }

.card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__cat {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.card__name { font-size: 21px; margin: 0 0 6px; }
.card__name a { color: var(--ink); }
.card__name a:hover { color: var(--accent-ink); }
.card__tag {
  font-size: 15.5px;
  color: var(--muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card__price { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---------- Shop controls ---------- */
.shop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-end: 30px;
}
.shop-controls .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-search {
  margin-inline-start: auto;
  position: relative;
}
.shop-search input {
  width: 250px;
  max-width: 100%;
  padding: 11px 16px;
  padding-inline-start: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit;
  font-size: 16px;
}
.shop-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.shop-search svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.shop-empty {
  text-align: center;
  color: var(--muted);
  padding-block: 48px;
}

/* ---------- About ---------- */
/* #about's background comes from the band rotation above */
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about__art {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  aspect-ratio: 4 / 3;
}
.about__art svg { width: 100%; height: 100%; }
.about h2 { font-size: clamp(32px, 5.2vw, 44px); }
.about p { color: var(--ink-soft); font-size: 19px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  margin-block-start: 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: 56px 40px;
}
.site-footer .brand { color: #FFFFFF; margin-block-end: 12px; }
.site-footer .brand__name { font-size: 23px; }
.site-footer h4 {
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: 14px;
}
.site-footer a { display: block; color: var(--on-ink); font-size: 16px; padding-block: 5px; }
.site-footer a:hover { color: #fff; }
.site-footer p { font-size: 16px; }
.footer-bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 14.5px;
  color: var(--on-ink-dim);
}

/* ---------- Page hero (inner pages) ---------- */
.page-head { padding-block: 44px 8px; }
.page-head h1 { font-size: clamp(32px, 5.6vw, 50px); margin-block-end: 4px; }
.breadcrumb {
  font-size: 15px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-block-start: 24px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb .sep { opacity: 0.6; }

/* ---------- Product detail ---------- */
.pd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 28px 72px;
}
.pd__media {
  position: sticky;
  inset-block-start: 100px;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  aspect-ratio: 1 / 1;
}
.pd__media svg { width: 100%; height: 100%; }
.pd__cat {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 8px;
}
.pd h1 { font-size: clamp(32px, 5.6vw, 52px); margin-block-end: 8px; }
.pd__tag { color: var(--muted); font-size: 19px; margin-block-end: 18px; }
.pd__price {
  font-size: clamp(28px, 7.5vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-block-end: 6px;
}
.pd__avail { font-size: 15.5px; font-weight: 700; margin-block-end: 22px; }
.pd__avail.ok { color: var(--success-ink); }
.pd__avail.low { color: var(--danger); }
.pd__avail.out { color: var(--muted); }

/* "What's included" heading above the perks list */
.pd__subhead {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
/* Workshop date/time/age line on the detail page */
.pd__meta { margin-block-end: 24px; }
/* An unbookable item stays readable, but the art signals it's not live */
.pd.is-expired .pd__media { filter: saturate(0.5); opacity: 0.75; }

.pd__buy {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-block-end: 30px;
  flex-wrap: wrap;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
}
.qty button {
  width: 44px;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: var(--ink-soft);
  transition: background 0.15s ease;
}
.qty button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.qty input {
  width: 46px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 800;
  background: transparent;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.accordion { border-block-start: 1px solid var(--line); }
.accordion details { border-block-end: 1px solid var(--line); }
.accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 17px;
  font-weight: 800;
  font-size: 17.5px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  font-size: 24px;
  color: var(--accent-ink);
  transition: transform 0.2s ease;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding-block-end: 18px; color: var(--ink-soft); font-size: 17px; }

.related { padding-block: 0 80px; }
.related h2 { font-size: clamp(28px, 4.4vw, 38px); margin-block-end: 26px; }

.notfound { text-align: center; padding-block: 90px; }

/* ---------- Booking summary (checkout side column) ---------- */
.summary-card {
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 26px;
  position: sticky;
  inset-block-start: 100px;
}
.summary-card h2 { font-size: 25px; margin-block-end: 18px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16.5px;
  padding-block: 8px;
  color: var(--ink-soft);
}
.summary-row .price { font-variant-numeric: tabular-nums; }
.summary-row--total {
  border-block-start: 1px solid var(--line);
  margin-block-start: 10px;
  padding-block-start: 14px;
  font-size: 19.5px;
  font-weight: 800;
  color: var(--ink);
}
/* Validity / "show this at reception" strip */
.valid-note {
  background: var(--amber-soft);
  color: #7A5400;
  border-radius: var(--r-s);
  font-size: 15px;
  padding: 11px 15px;
  margin-block: 14px 18px;
}

.empty-state { text-align: center; padding-block: 70px 90px; }
.empty-state .empty-icon {
  width: 88px;
  height: 88px;
  margin-inline: auto;
  margin-block-end: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state .empty-icon svg { width: 38px; height: 38px; }
.empty-state h2 { font-size: 32px; }
.empty-state p { color: var(--muted); margin-block-end: 26px; }

/* ---------- Checkout ---------- */
.steps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 18px 34px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--muted);
}
.step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 800;
  background: var(--surface);
}
.step.is-active { color: var(--ink); }
.step.is-active .step__dot { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
.step.is-done .step__dot { border-color: var(--success-ink); background: var(--success-ink); color: #fff; }
.step-line { flex: 1 1 30px; height: 2px; background: var(--line-strong); min-width: 24px; }

.checkout-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
  padding-block-end: 90px;
}
.panel {
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 30px;
}
.panel h2 { font-size: 26px; margin-block-end: 20px; }
.panel-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-block-start: 8px;
  flex-wrap: wrap;
}

/* Fake payment gateway */
.pay-hint {
  display: flex;
  gap: 10px;
  background: var(--amber-soft);
  color: #7A5400;
  border-radius: var(--r-s);
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.5;
  margin-block-end: 22px;
}
.pay-hint svg { flex: none; width: 18px; height: 18px; margin-block-start: 2px; }

.cardface {
  background: linear-gradient(135deg, #353F70 0%, #008EF4 55%, #33CEFE 100%);
  border-radius: var(--r-m);
  color: #FFFFFF;
  padding: 22px 24px;
  margin-block-end: 24px;
  box-shadow: var(--shadow-m);
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cardface__top { display: flex; justify-content: space-between; align-items: center; }
.cardface__chip {
  width: 40px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #FEBF00, #F0A400);
}
.cardface__brand { font-weight: 800; letter-spacing: 0.06em; font-size: 14.5px; opacity: 0.95; }
.cardface__num {
  font-size: clamp(18px, 3.6vw, 23px);
  letter-spacing: 0.10em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}
.cardface__meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.05em;
  opacity: 0.9;
  text-transform: uppercase;
}
[dir="rtl"] .cardface__num { text-align: end; }

.card-inputs input { direction: ltr; text-align: start; }
[dir="rtl"] .card-inputs input { text-align: end; }
[dir="rtl"] .card-inputs input::placeholder { text-align: end; }

.secure-note {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--muted);
  font-size: 14.5px;
  margin-block-start: 16px;
}
.secure-note svg { width: 15px; height: 15px; }

/* Mini summary (checkout side) */
.mini-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
}
.mini-item:last-of-type { border-block-end: 0; }
.mini-item__art {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}
.mini-item__art svg { width: 100%; height: 100%; }
.mini-item__name { font-size: 15.5px; font-weight: 700; margin: 0; }
.mini-item__qty { font-size: 14px; color: var(--muted); margin: 0; }
.mini-item__price {
  margin-inline-start: auto;
  font-weight: 800;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Processing overlay */
.processing {
  position: fixed;
  inset: 0;
  background: rgba(244, 251, 255, 0.93);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.processing.is-visible { display: flex; }
.processing__box { text-align: center; }
.spinner {
  width: 54px;
  height: 54px;
  margin-inline: auto;
  margin-block-end: 18px;
  border-radius: 50%;
  border: 4px solid var(--accent-soft);
  border-block-start-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.processing__box p { font-weight: 800; color: var(--ink-soft); }

/* Result screens */
.result { text-align: center; padding-block: 40px 20px; }
.result__icon {
  width: 92px;
  height: 92px;
  margin-inline: auto;
  margin-block-end: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.5, 1);
}
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.result__icon svg { width: 44px; height: 44px; }
.result__icon--ok { background: var(--success-soft); color: var(--success-ink); }
.result__icon--no { background: var(--danger-soft); color: var(--danger); }
.result h2 { font-size: 36px; }
.result p { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.result .bookingnum {
  display: inline-block;
  background: var(--surface-warm);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.06em;
  padding: 11px 24px;
  margin-block: 10px 26px;
}
.result .btn { margin-block-start: 6px; }

/* ============================================================
   CARD COLOUR ROTATION
   One rotation drives six components so a row reads blue / purple /
   gold / pink instead of four identical white boxes.

   --card-hue is fills and borders ONLY.
   --card-on-tint is the only one ever used as `color`, which is what
   mechanically keeps --sky and --amber out of text.

   Note the hue is positional: when an offer expires and drops out, the
   survivors shift one colour. That's inherent to a :nth-child rotation.
   ============================================================ */
.usp, .plan-card, .card--offer, .wsched__row, .age-card, .feature, .contact-row {
  --card-hue: var(--accent);
  --card-tint: var(--accent-soft);
  --card-on-tint: var(--accent-ink);
}
:is(.usp, .plan-card, .card--offer, .wsched__row, .age-card, .feature, .contact-row):nth-child(4n+2) {
  --card-hue: var(--grape); --card-tint: var(--grape-soft); --card-on-tint: #6B2FB0;
}
:is(.usp, .plan-card, .card--offer, .wsched__row, .age-card, .feature, .contact-row):nth-child(4n+3) {
  --card-hue: var(--amber); --card-tint: var(--amber-soft); --card-on-tint: #8A5E00;
}
:is(.usp, .plan-card, .card--offer, .wsched__row, .age-card, .feature, .contact-row):nth-child(4n+4) {
  --card-hue: var(--magenta); --card-tint: var(--magenta-soft); --card-on-tint: var(--magenta-ink);
}

/* ---------- Hero facts ---------- */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 28px;
}
.fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: var(--shadow-s);
}
.fact svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- Pricing plans ---------- */
.plans-grid {
  display: grid;
  /* 258px + 22px gaps lets all four plans sit on one row inside the 1160 container.
     Any wider and the fourth card is orphaned onto a second row. */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line);
  border-block-start: 8px solid var(--card-hue);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: 22px 24px 24px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.plan-card.is-featured {
  border-color: var(--accent);
  border-block-start-color: var(--accent);
  transform: scale(1.025);
}
.plan-card.is-featured:hover { transform: scale(1.025) translateY(-6px); }
.plan-card__ribbon {
  position: absolute;
  inset-block-start: -15px;
  inset-inline-start: 24px;
  background: var(--magenta-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-s);
}
.plan-card__art {
  width: 72px;
  height: 72px;
  border-radius: var(--r-m);
  overflow: hidden;
  margin-block-end: 16px;
  flex: none;
  background: var(--card-tint);
}
.plan-card__art svg { width: 100%; height: 100%; }
.plan-card__name { font-size: 22px; margin: 0 0 5px; line-height: 1.2; }
.plan-card__duration {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--card-on-tint, var(--accent-ink));
  margin: 0 0 14px;
}
.plan-card__price {
  font-family: var(--font-display);
  /* Fallback: viewport-based. Overridden below by a container query so the
     price tracks the card's own width instead. */
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Sizing the price against the card means a narrow 4-up card shrinks it instead
   of wrapping "45.000 OMR" onto two lines, while a wide party card keeps it big. */
@supports (container-type: inline-size) {
  .plan-card { container-type: inline-size; }
  .plan-card__price { font-size: clamp(26px, 13cqi, 40px); }
}

.plan-card__tag {
  font-size: 15.5px;
  color: var(--muted);
  margin: 10px 0 16px;
}
.plan-card__perks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plan-card__perks li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.plan-card__perks li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-ink);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-card__foot { margin-block-start: auto; }

/* ---------- Offers ---------- */
.card--offer { border-block-start: 8px solid var(--card-hue); }
.card--offer .card__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.offer__old {
  color: var(--muted);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: line-through;
}
.offer-window {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 10px;
}
.offer-days {
  display: inline-block;
  background: var(--amber-soft);
  color: #7A5400;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  padding: 5px 12px;
  margin-block-end: 10px;
}
.card.is-expired, .plan-card.is-expired {
  opacity: 0.6;
  filter: saturate(0.5);
}
.card.is-expired:hover { transform: none; }

/* ---------- Workshop schedule ---------- */
.wsched { display: flex; flex-direction: column; gap: 14px; }
.wsched__row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  border-inline-start: 8px solid var(--card-hue);
  border-block: 1px solid rgba(255, 255, 255, 0.85);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.85);
  padding: 16px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wsched__row:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.wsched__date {
  flex: none;
  background: var(--card-tint);
  border-radius: var(--r-s);
  padding: 10px 6px;
  text-align: center;
  line-height: 1.15;
}
.wsched__day {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
}
.wsched__mon {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--card-on-tint, var(--ink-soft));
}
.wsched__row.is-soon .wsched__date { background: var(--accent-strong); }
.wsched__row.is-soon .wsched__day,
.wsched__row.is-soon .wsched__mon { color: #fff; }
.wsched__body { min-width: 0; }
.wsched__name { font-size: 21px; margin: 0 0 4px; }
.wsched__name a { color: var(--ink); }
.wsched__name a:hover { color: var(--accent-ink); }
.wsched__tag { font-size: 15.5px; color: var(--muted); margin: 0 0 9px; }
.wsched__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 700;
}
.wsched__meta span { display: inline-flex; align-items: center; gap: 6px; }
.wsched__meta svg { width: 14px; height: 14px; color: var(--card-on-tint); flex: none; }
.wsched__seats.is-full { color: var(--danger); }
.wsched__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.wsched__price {
  font-weight: 800;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wsched__row.is-past { opacity: 0.55; }
.wsched__row.is-past:hover { transform: none; }

/* ---------- Facilities & age groups ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}
.feature {
  background: var(--surface);
  border-radius: var(--r-l);
  border-block-start: 8px solid var(--card-hue);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 24px;
}
.feature__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 14px;
  background: var(--card-tint);
  color: var(--card-on-tint);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 20px; margin: 0 0 7px; }
.feature p { font-size: 16px; color: var(--muted); margin: 0; }

.age-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.age-card {
  background: var(--surface);
  border-radius: var(--r-l);
  border-block-start: 8px solid var(--card-hue);
  box-shadow: var(--shadow-card);
  padding: 20px 24px 26px;
  text-align: center;
}
.age-card__range {
  display: inline-block;
  background: var(--card-tint);
  color: var(--card-on-tint);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 800;
  padding: 7px 17px;
  margin-block-end: 13px;
}
.age-card h3 { font-size: 23px; margin: 0 0 9px; }
.age-card p { font-size: 16px; color: var(--muted); margin: 0; }

/* ---------- Visit: hours + location ---------- */
.visit-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.hours {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hours th, .hours td {
  padding: 14px 18px;
  text-align: start;
  font-size: 16.5px;
  line-height: 1.4;
  border-block-end: 1px solid var(--line);
}
.hours th {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-warm);
}
.hours tr:last-child td { border-block-end: 0; }
.hours td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.hours tr.is-today { background: var(--sky-soft); font-weight: 800; }
.hours .today-tag {
  display: inline-block;
  background: var(--accent-strong);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-inline-start: 8px;
  vertical-align: 1px;
}

.loc-card {
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-block-end: 20px;
}
.loc-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-block: 11px;
  border-block-end: 1px solid var(--line);
}
.loc-row:last-child { border-block-end: 0; }
.loc-row svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-block-start: 3px; }
.loc-row strong { display: block; font-size: 16.5px; font-weight: 700; }
.loc-row span { font-size: 16px; color: var(--muted); }
.loc-row a { font-size: 16px; }

.map-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-m);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(51, 206, 254, 0.07) 14px 28px),
    var(--sky-soft);
  border: 2px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.map-placeholder svg { width: 34px; height: 34px; color: var(--accent); }
.map-placeholder p { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 30ch; }

/* ---------- Rules ---------- */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 34px;
}
.rule {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.rule__mark {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-ink);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule p { margin: 0; font-size: 17px; color: var(--ink-soft); }
.rules-note {
  grid-column: 1 / -1;
  background: var(--amber-soft);
  color: #7A5400;
  border-radius: var(--r-s);
  padding: 14px 17px;
  font-size: 16px;
  margin-block-start: 8px;
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.gallery-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.gallery-tile svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}
.gallery-tile:hover svg { transform: scale(1.06); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 34px;
}
.contact-row {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-card);
  border-inline-start: 8px solid var(--card-hue);
  padding: 18px 20px;
}
.contact-row svg { flex: none; width: 22px; height: 22px; color: var(--card-on-tint); }
.contact-row strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.contact-row a, .contact-row span { font-size: 18px; font-weight: 700; color: var(--ink); }
.contact-row a:hover { color: var(--accent-ink); }

/* WhatsApp green is mandated by their brand guidelines. The one off-palette colour. */
.btn--wa { background: #25D366; }
.btn--wa:hover { background: #1FB855; }

/* Call to action under the plans grid, pointing at the registration form.
   It is a SIBLING of #plansGrid, never a child: UI.revealGrid() iterates
   container.children and would otherwise tag it with a stagger delay. */
.reg-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block-start: 28px;
  background: var(--surface);
  border-radius: var(--r-l);
  border-block-start: 8px solid var(--grape);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
}
.reg-cta h3 { font-size: 23px; margin: 0 0 4px; }
.reg-cta p { font-size: 16.5px; color: var(--muted); margin: 0; max-width: 52ch; }

/* ---------- Registration form ---------- */
.reg-main { padding-block-end: 80px; }
.reg-sub { color: var(--muted); font-size: 19px; max-width: 60ch; }

/* Honest notice while no submission endpoint is connected */
.reg-demo {
  background: var(--amber-soft);
  color: #7A5400;
  border: 1px solid rgba(254, 191, 0, 0.5);
  border-radius: var(--r-m);
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 700;
  margin-block-end: 22px;
}

.reg-panel { max-width: 760px; }
.reg-required { color: var(--muted); font-size: 15.5px; margin-block-end: 20px; }

/* Each numbered section of the paper form */
.reg-panel .fs {
  margin-block-end: 30px;
  padding-block-end: 26px;
  border-block-end: 1px solid var(--line);
}
.reg-panel .fs:last-of-type { border-block-end: 0; }
.reg-panel .fs__legend { font-size: 15px; color: var(--accent-ink); }

.reg-note {
  background: var(--sky-soft);
  border-radius: var(--r-s);
  padding: 12px 15px;
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-block-end: 18px;
}
.reg-sublabel {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.reg-q { font-size: 17px; font-weight: 700; margin-block-end: 12px; }
.reg-radios { display: flex; gap: 26px; flex-wrap: wrap; margin-block-end: 6px; }
.reg-radios .check-field { margin-block-end: 12px; }

/* Read-only policy text the parent accepts (sections 6 and 7) */
.reg-policy {
  background: var(--bg);
  border-radius: var(--r-m);
  padding: 18px 20px 6px;
  margin-block-end: 18px;
}
.reg-policy p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-block-end: 12px;
}

.reg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-block-end: 20px;
}
.reg-fact {
  background: var(--accent-soft);
  border-radius: var(--r-m);
  padding: 14px 18px;
}
.reg-fact strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-block-end: 3px;
}
.reg-fact span { font-size: 18px; font-weight: 700; }

/* The final declaration is the one that carries legal weight, so it is set apart */
.check-field--final {
  background: var(--surface-warm);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-m);
  padding: 16px 18px;
  align-items: flex-start;
  margin-block: 8px 18px;
}
.check-field--final input { margin-block-start: 3px; flex: none; }

.reg-privacy {
  font-size: 15px;
  color: var(--muted);
  margin-block-end: 22px;
}

/* ---------- Responsive ---------- */
/* Five nav links plus the brand and the actions do not fit an English header
   between the 720px burger breakpoint and about 860px. Tighten the gaps rather
   than moving the breakpoint, which the rest of the layout depends on. */
@media (max-width: 900px) {
  .header-inner { gap: 16px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 15px; }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 44px 56px; }
  .hero__art { max-width: 520px; }
  .usps-inner { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .pd { grid-template-columns: 1fr; gap: 32px; }
  .pd__media { position: static; max-width: 520px; }
  .checkout-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .visit-inner, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .age-grid { grid-template-columns: 1fr; }
  /* the scale() lift crowds its neighbours once the grid narrows */
  .plan-card.is-featured { transform: none; }
  .plan-card.is-featured:hover { transform: translateY(-6px); }
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    padding: 10px 24px 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding-block: 12px; border-block-end: 1px solid var(--line); }
  .site-nav a:last-child { border-block-end: 0; }
  .nav-burger { display: inline-flex; }
  .header-inner { gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 32px; height: 32px; border-radius: 50%; }
  .brand__name { font-size: 20px; }
  .header-actions { gap: 8px; }
  .lang-toggle { padding: 7px 11px; font-size: 14px; }
  .nav-burger { width: 40px; height: 40px; }
  .shop-search { margin-inline-start: 0; width: 100%; }
  .shop-search input { width: 100%; }
  .usps-inner { grid-template-columns: 1fr; gap: 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .panel { padding: 22px; }
  .field--row { grid-template-columns: 1fr; gap: 0; }
  .reg-radios { gap: 4px 22px; }
  .check-field { align-items: flex-start; }
  .check-field input { margin-block-start: 4px; flex: none; }
  .plans-grid { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: 1fr; }
  /* workshop row folds to two columns; price and button drop under the text */
  .wsched__row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .wsched__mon { letter-spacing: 0.03em; }
  .wsched__date { min-width: 0; padding: 8px 4px; }
  .wsched__body { overflow-wrap: anywhere; }
  .wsched__day { font-size: 26px; }
  .wsched__foot {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
    /* Both children are nowrap; without this the 1fr track inflates to their
       combined width and pushes the whole page sideways on small phones. */
    min-width: 0;
  }
}

/* Very narrow phones */
@media (max-width: 520px) {
  /* The header CTA duplicates the hero button and is the first thing to go
     when the brand, language toggle and burger stop fitting. */
  .header-actions .btn--small { display: none; }
  .section { --section-pad: 48px; }
  .section--tight { --section-pad: 34px; }
  .wsched__row { padding: 14px; gap: 12px; }
  .plan-card { padding: 20px 20px 20px; }
  .wsched__row, .contact-row { border-inline-start-width: 6px; }
}

/* Very small phones: the header has almost no slack left at this size */
@media (max-width: 400px) {
  .container { padding-inline: 16px; }
  .brand__name { font-size: 18px; }
  .lang-toggle { padding: 7px 10px; }
}