/* ============================================================
   THE TOY BOX · interior page components (shops / story / brands / gift)
   Loaded after style.css on interior pages.
   ============================================================ */

/* Compact page hero */
.page-hero {
  background: var(--forest); color: var(--cream); position: relative; overflow: hidden;
  padding-top: clamp(110px, 16vw, 170px); padding-bottom: clamp(3rem, 6vw, 5rem); isolation: isolate;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 70% at 85% 0%, color-mix(in oklch, var(--honey) 30%, transparent), transparent 60%);
}
.page-hero .kicker { color: var(--honey); }
.page-hero h1 { margin-top: 0.4rem; max-width: 18ch; }
.page-hero .lede { color: var(--cream-soft); margin-top: 1.1rem; max-width: 52ch; }
.breadcrumb { font-size: var(--step--1); color: var(--cream-soft); margin-bottom: 0.4rem; }
.breadcrumb a { color: var(--honey); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   LOCAL EXPERIENCE ("make a day of it")
   ============================================================ */
.local-band { background: var(--forest); color: var(--cream); position: relative; overflow: hidden; }
.local-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 10% 0%, color-mix(in oklch, var(--honey) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.local-band .wrap { position: relative; z-index: 1; }
.local-intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.local-intro h2 { color: var(--cream); }
.local-intro p { color: var(--cream-soft); margin-top: 1rem; }
.local-intro .pull {
  font-family: var(--display); font-size: var(--step-2); color: var(--honey); line-height: 1.25;
  border-top: 1px solid var(--line-cream); border-bottom: 1px solid var(--line-cream); padding: 1.2rem 0;
}

/* While you're here cards */
.near-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.near-card {
  background: color-mix(in oklch, var(--cream) 7%, transparent); border: 1px solid var(--line-cream);
  border-radius: var(--radius); padding: 1.3rem;
  transition: transform 0.4s var(--ease-expo), background 0.3s ease;
}
.near-card:hover { transform: translateY(-4px); background: color-mix(in oklch, var(--cream) 12%, transparent); }
.near-card .n-ico { width: 40px; height: 40px; color: var(--honey); margin-bottom: 0.8rem; }
.near-card h4 { font-family: var(--display); font-size: var(--step-1); color: var(--cream); line-height: 1.1; }
.near-card .walk {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem;
  font-family: var(--hand); font-size: 1.1rem; color: var(--honey);
}
.near-card .walk svg { width: 14px; height: 14px; }
.near-card p { color: var(--cream-soft); font-size: var(--step--1); margin-top: 0.6rem; line-height: 1.55; }

/* A perfect day: a genuine ordered itinerary (numbers carry real sequence info) */
.itinerary { background: var(--paper-2); }
.itin-list { display: grid; gap: 0; margin-top: 2rem; position: relative; max-width: 820px; }
.itin-list::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px; background: repeating-linear-gradient(var(--sage) 0 6px, transparent 6px 12px); }
.itin-step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 0.9rem 0; position: relative; }
.itin-n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--honey); color: var(--forest-deep);
  display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; z-index: 1; flex: none;
}
.itin-step.is-us .itin-n { background: var(--poppy); color: #fff; }
.itin-step h4 { font-family: var(--body); font-weight: 800; color: var(--forest); font-size: var(--step-0); }
.itin-step .when { font-family: var(--hand); color: var(--brass); font-size: 1.15rem; }
.itin-step p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.2rem; max-width: 56ch; }
.itin-step.is-us h4 { color: var(--poppy-deep); }

/* Practical: park / eat / know */
.practical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.practical-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.practical-card .p-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--sage-soft); color: var(--forest); display: grid; place-items: center; margin-bottom: 0.8rem; }
.practical-card .p-ico svg { width: 20px; height: 20px; }
.practical-card h4 { font-family: var(--body); font-weight: 800; color: var(--forest); }
.practical-card p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.4rem; line-height: 1.55; }

/* Town chooser cards (shops index) */
.chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); }

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

/* ---- Shop detail ---- */
.shop-detail { padding-block: var(--section-y); scroll-margin-top: calc(var(--banner-h) + 88px); }
.shop-detail:nth-of-type(even) { background: var(--paper-2); }
.shop-detail-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.shop-detail:nth-of-type(even) .shop-detail-inner { grid-template-columns: 0.95fr 1.05fr; }
.shop-detail:nth-of-type(even) .shop-media { order: -1; }
.shop-media { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
.shop-media figure { border-radius: var(--radius); overflow: hidden; margin: 0; }
.shop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-media .lead-shot { grid-column: 1 / -1; aspect-ratio: 3/2; }
.shop-info h2 { color: var(--forest); }
.shop-info .placeline { font-family: var(--hand); color: var(--brass); font-size: 1.5rem; display: block; }
.shop-info > p { color: var(--ink-soft); margin-top: 0.8rem; max-width: 52ch; }
.shop-facts { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.fact { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.fact .f-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--sage-soft); color: var(--forest); display: grid; place-items: center; flex: none; }
.fact .f-ico svg { width: 21px; height: 21px; }
.fact h4 { font-family: var(--body); font-weight: 800; font-size: var(--step-0); color: var(--forest); margin-bottom: 0.15rem; }
.fact p, .fact address { color: var(--ink-soft); font-size: var(--step--1); font-style: normal; line-height: 1.6; }
.fact a { color: var(--poppy-deep); font-weight: 700; text-decoration: none; }
.fact a:hover { text-decoration: underline; }

/* Hours */
.hours { margin-top: 0.3rem; display: grid; gap: 0.1rem; max-width: 330px; }
.hours .hrow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; border-bottom: 1px dashed var(--line); font-size: var(--step--1); }
.hours .hrow:last-child { border-bottom: none; }
.hours .hrow b { font-weight: 700; color: var(--ink); }
.hours .closed { color: var(--brass); }

/* Map */
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 1.4rem; background: var(--sage-soft); }
.map-embed iframe { width: 100%; height: 300px; border: 0; display: block; background: var(--sage-soft); }
.map-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; font-size: var(--step--1); font-weight: 700; color: var(--poppy-deep); text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.map-link svg { width: 16px; height: 16px; }

.confirm-note {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem;
  font-size: 0.76rem; color: var(--brass); background: var(--sage-soft);
  padding: 0.4em 0.85em; border-radius: 100px; line-height: 1.3;
}
.confirm-note svg { width: 15px; height: 15px; flex: none; }

/* ---- Story ---- */
.story-lead { background: var(--paper); }
.story-lead-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.story-lead figure { border-radius: var(--radius-lg); overflow: hidden; margin: 0; }
.story-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prose { max-width: 60ch; }
.prose p { margin-top: 1rem; color: var(--ink-soft); }
.prose .drop { font-family: var(--display); font-size: var(--step-1); color: var(--forest); line-height: 1.45; }
.prose h3 { color: var(--forest); margin-top: 1.8rem; }

.manifesto-full { background: var(--forest); color: var(--cream); position: relative; overflow: hidden; }
.manifesto-full .wrap-narrow { position: relative; }
.manifesto-full .quote-mark { font-family: var(--display); font-size: 5rem; line-height: 0.7; color: var(--honey); opacity: 0.55; display: block; }
.manifesto-full .big { font-family: var(--display); font-size: var(--step-3); line-height: 1.22; color: var(--cream); }
.manifesto-full .big em { color: var(--honey); font-style: normal; }
.manifesto-full p { color: var(--cream-soft); margin-top: 1.2rem; }
.manifesto-full .signature { font-family: var(--hand); font-size: 1.9rem; color: var(--honey); margin-top: 1.6rem; }

/* Timeline */
.timeline { background: var(--paper-2); }
.tl-list { display: grid; gap: 0; margin-top: 2rem; position: relative; max-width: 760px; }
.tl-list::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: repeating-linear-gradient(var(--sage) 0 6px, transparent 6px 12px); }
.tl-item { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1rem 0; position: relative; }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--honey); color: var(--forest-deep); display: grid; place-items: center; z-index: 1; flex: none; }
.tl-dot svg { width: 17px; height: 17px; }
.tl-year { font-family: var(--display); font-size: var(--step-1); color: var(--poppy); line-height: 1; }
.tl-item h4 { font-family: var(--body); font-weight: 800; color: var(--forest); margin-top: 0.3rem; }
.tl-item p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.25rem; max-width: 54ch; }

/* ---- Brands / umbrella ---- */
.umbrella-top { text-align: center; }
.umbrella-parent {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: var(--forest); color: var(--cream); padding: 1.3rem 2.6rem; border-radius: var(--radius-lg);
  box-shadow: 0 24px 40px -26px oklch(0 0 0 / 0.5); position: relative;
}
.umbrella-parent .up-word { font-family: var(--display); font-size: var(--step-2); }
.umbrella-parent .up-sub { font-family: var(--hand); color: var(--honey); font-size: 1.2rem; }
.umbrella-stem { width: 2px; height: 46px; margin: 0 auto; background: repeating-linear-gradient(var(--sage) 0 6px, transparent 6px 12px); }
.brand-group { margin-top: clamp(2rem, 5vw, 3.4rem); }
.brand-group-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.2rem; }
.brand-group-head h3 { color: var(--forest); font-size: var(--step-1); white-space: nowrap; }
.brand-group-head .count { font-family: var(--hand); color: var(--brass); font-size: 1.15rem; }
.brand-group-head .rule { flex: 1; height: 1px; background: var(--line); }
.brand-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1rem; }
/* Each tile carries its brand's real colour in --bc (set inline per tile). */
.brand-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.2rem; transition: transform 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo), border-color 0.3s ease;
  position: relative; overflow: hidden;
}
/* a whisper of the brand colour, so 15 tiles still read as one family */
.brand-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 9%, transparent), transparent 42%);
  opacity: 0; transition: opacity 0.4s var(--ease-quart);
}
.brand-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -24px color-mix(in srgb, var(--bc) 55%, transparent); border-color: color-mix(in srgb, var(--bc) 45%, transparent); }
.brand-tile:hover::after { opacity: 1; }
.brand-tile .bt-name { font-family: var(--display); font-size: var(--step-1); color: var(--forest); line-height: 1; transition: color 0.3s ease; }
.brand-tile:hover .bt-name { color: color-mix(in srgb, var(--bc) 80%, var(--ink)); }

/* logo plate: white clear-space, as brand guidelines expect.
   flex + an absolute max-height: a % max-height can't resolve against an
   auto-sized grid row, so the tall logos (Maileg, Dinkum) escaped the plate. */
.bt-plate {
  height: 78px; border-radius: 12px; background: #fff;
  border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 0.6rem 0.9rem; margin-bottom: 0.9rem; overflow: hidden;
  position: relative; z-index: 1;
}
/* explicit height + object-fit: SVGs have no intrinsic size, so a bare
   max-height leaves them unconstrained and they clip. */
.bt-logo { height: 58px; width: auto; max-width: 100%; object-fit: contain; }
.bt-name, .bt-origin, .bt-desc, .bt-open { position: relative; z-index: 1; }
.brand-tile .bt-origin { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brass); margin-top: 0.45rem; }
.brand-tile .bt-desc { color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.6rem; line-height: 1.55; }

/* the whole tile is the click target, but the button stays a real control */
.bt-open {
  margin-top: 0.9rem; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: var(--step--1); color: var(--poppy-deep);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.bt-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.bt-open svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-expo); }
.brand-tile:hover .bt-open svg { transform: translateX(4px); }
.bt-open:focus-visible { outline: none; }
.brand-tile:has(.bt-open:focus-visible) { outline: 3px solid var(--honey); outline-offset: 3px; }
.bt-detail { display: none; }

/* ---- Brand modal ---- */
.brand-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem);
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-quart), visibility 0.35s;
}
.brand-modal.is-open { opacity: 1; visibility: visible; }
.bm-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--forest-deep) 78%, transparent); backdrop-filter: blur(4px); border: none; cursor: pointer; }
/* The panel CLIPS (radius + overflow:hidden) and an inner element scrolls.
   Radius + overflow-y on the same box let the paper bg show through behind the
   coloured header corners and put the scrollbar inside the curve = white clipping. */
.bm-panel {
  position: relative; width: min(100%, 720px);
  background: var(--paper); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.65);
  transform: translateY(18px) scale(0.98); transition: transform 0.45s var(--ease-expo);
  --bc: var(--forest);
}
.bm-scroll {
  max-height: min(88vh, 820px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--bc) 55%, transparent) transparent;
}
.bm-scroll::-webkit-scrollbar { width: 10px; }
.bm-scroll::-webkit-scrollbar-track { background: transparent; }
.bm-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bc) 45%, transparent);
  border-radius: 100px; border: 3px solid transparent; background-clip: content-box;
}
.bm-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--bc) 75%, transparent); background-clip: content-box; }
.brand-modal.is-open .bm-panel { transform: none; }
.bm-close {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: oklch(0.99 0.01 90 / 0.92); color: var(--ink); display: grid; place-items: center;
  transition: transform 0.3s var(--ease-expo), background 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 14px -4px oklch(0 0 0 / 0.4);
}
.bm-close:hover { transform: rotate(90deg); background: var(--poppy); color: #fff; }
.bm-close svg { width: 19px; height: 19px; }

/* hero takes the brand's real colour */
.bm-hero {
  background: var(--bc); color: #fff; padding: clamp(1.5rem, 4vw, 2.2rem);
  padding-right: 4.2rem; position: relative; isolation: isolate;
}
.bm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.22), transparent 60%);
}
.bm-hero h2 { color: inherit; font-size: var(--step-3); line-height: 1; }
.bm-hero .bm-origin { font-family: var(--hand); color: inherit; opacity: 0.85; font-size: 1.3rem; margin-top: 0.3rem; }
/* brands whose colour is pale (Maileg taupe, Steiff yellow) need dark type */
.bm-hero.is-light { color: var(--ink); }
.bm-hero.is-light::before { background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.4), transparent 60%); }

/* the brand's own logo, on white clear-space */
.bm-logo {
  background: #fff; border-radius: 12px; padding: 0.6rem 0.95rem; margin-bottom: 0.9rem;
  height: 72px; width: fit-content; max-width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.bm-logo img { height: 54px; width: auto; max-width: min(240px, 56vw); object-fit: contain; display: block; }
.bm-logo:empty { display: none; }
.bm-body { padding: clamp(1.4rem, 4vw, 2.2rem); }
.bm-body p { color: var(--ink-soft); }
.bm-body p + p { margin-top: 0.9rem; }
.bm-body h5 {
  font-family: var(--body); font-weight: 800; color: var(--forest); font-size: var(--step-0);
  margin-top: 1.6rem; margin-bottom: 0.6rem;
}
.bm-body ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: var(--step--1); display: grid; gap: 0.3rem; }
.bm-body ul li::marker { color: var(--poppy); }
.bm-instore { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.6rem; }
.bm-shop { background: var(--sage-soft); border-radius: 14px; padding: 1rem 1.1rem; }
.bm-shop b { display: block; color: var(--forest); font-size: var(--step--1); margin-bottom: 0.25rem; }
.bm-shop span { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.5; display: block; }
.bm-figure { border-radius: 14px; overflow: hidden; margin-top: 1rem; }
.bm-figure img { width: 100%; display: block; }
.bm-foot { border-top: 1px dashed var(--line); margin-top: 1.6rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: space-between; }
.bm-foot .bm-note { font-family: var(--hand); color: var(--brass); font-size: 1.15rem; }
.bm-nav { display: flex; gap: 0.5rem; }
.bm-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  color: var(--forest); cursor: pointer; display: grid; place-items: center; transition: background 0.25s ease, color 0.25s ease;
}
.bm-nav button:hover { background: var(--forest); color: var(--cream); }
.bm-nav svg { width: 17px; height: 17px; }
body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .bm-instore { grid-template-columns: 1fr; }
}

/* ---- Gift cards ---- */
.gift-builder { background: var(--paper); }
.gb-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.gb-panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); }
.gb-field { margin-bottom: 1.6rem; }
.gb-field:last-child { margin-bottom: 0; }
.gb-field > label, .gb-legend { display: block; font-family: var(--body); font-weight: 800; color: var(--forest); margin-bottom: 0.7rem; font-size: var(--step-0); }
.gb-fieldset { border: none; padding: 0; margin: 0; }
.gb-hint { font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; }
.amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.6rem; }
.amount-opt { position: relative; }
.amount-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; }
.amount-opt span {
  display: grid; place-items: center; padding: 0.9em 0.5em; border-radius: 14px;
  border: 2px solid var(--line); font-family: var(--display); font-size: var(--step-1); color: var(--forest);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.amount-opt input:checked + span { border-color: var(--poppy); background: color-mix(in oklch, var(--poppy) 8%, transparent); }
.amount-opt input:focus-visible + span { outline: 3px solid var(--honey); outline-offset: 2px; }
.amount-opt span:hover { transform: translateY(-2px); }
.custom-amount { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.custom-amount .pound { font-family: var(--display); font-size: var(--step-1); color: var(--forest); }
.gb-input, .gb-textarea {
  width: 100%; padding: 0.85em 1em; border-radius: 12px; border: 2px solid var(--line);
  background: var(--paper); font-size: var(--step-0); color: var(--ink); transition: border-color 0.2s ease; font-family: var(--body);
}
.gb-input:focus, .gb-textarea:focus { outline: none; border-color: var(--forest-2); }
.gb-textarea { resize: vertical; min-height: 88px; }
.gb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.delivery-opt { position: relative; }
.delivery-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; }
.delivery-opt label {
  display: flex; gap: 0.7rem; align-items: start; padding: 1rem; border-radius: 14px; border: 2px solid var(--line);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; height: 100%;
}
.delivery-opt input:checked + label { border-color: var(--poppy); background: color-mix(in oklch, var(--poppy) 7%, transparent); }
.delivery-opt input:focus-visible + label { outline: 3px solid var(--honey); outline-offset: 2px; }
.delivery-opt .d-ico { width: 32px; height: 32px; color: var(--forest); flex: none; }
.delivery-opt b { display: block; color: var(--forest); font-size: var(--step-0); }
.delivery-opt small { color: var(--ink-soft); font-size: 0.8rem; }

/* Live preview card */
.gb-preview { position: sticky; top: 100px; }
.gift-card-live {
  aspect-ratio: 1.585/1; border-radius: 20px; background: var(--forest); color: var(--cream);
  padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 34px 56px -28px oklch(0 0 0 / 0.5); position: relative; overflow: hidden; border: 1px solid var(--line-cream);
}
.gift-card-live::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--honey) 45%, transparent), transparent 70%); pointer-events: none; }
.gcl-top { display: flex; justify-content: space-between; align-items: start; position: relative; z-index: 1; }
.gcl-brand { font-family: var(--display); font-size: 1.5rem; line-height: 0.95; }
.gcl-brand small { display: block; font-family: var(--hand); color: var(--honey); font-size: 0.95rem; }
.gcl-amt { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 3.4rem); color: var(--honey); position: relative; z-index: 1; }
.gcl-msg { font-family: var(--hand); font-size: 1.3rem; color: var(--cream); position: relative; z-index: 1; min-height: 1.4em; word-break: break-word; }
.gcl-foot { font-size: 0.72rem; color: var(--cream-soft); position: relative; z-index: 1; letter-spacing: 0.02em; }
.gb-summary { margin-top: 1.4rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.gb-summary .srow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: var(--step--1); color: var(--ink-soft); }
.gb-summary .srow b { color: var(--ink); font-weight: 700; text-align: right; }
.gb-summary .total { border-top: 1px dashed var(--line); margin-top: 0.4rem; padding-top: 0.7rem; }
.gb-summary .total b { font-family: var(--display); font-size: var(--step-1); color: var(--forest); }
.gb-checkout { margin-top: 1.2rem; width: 100%; justify-content: center; }
.lightspeed-note { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin-top: 0.9rem; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }
.lightspeed-note svg { width: 15px; height: 15px; color: var(--forest-2); flex: none; }

/* How it works / steps */
.steps { background: var(--forest); color: var(--cream); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.5rem; }
.step { text-align: center; }
.step-n { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%; background: color-mix(in oklch, var(--honey) 18%, transparent); color: var(--honey); display: grid; place-items: center; font-family: var(--display); font-size: var(--step-2); }
.step h4 { color: var(--cream); font-family: var(--body); font-weight: 800; font-size: var(--step-0); }
.step p { color: var(--cream-soft); font-size: var(--step--1); margin-top: 0.4rem; max-width: 30ch; margin-inline: auto; }

/* FAQ */
.faq { background: var(--paper); }
.faq-list { max-width: 780px; margin: 2rem auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 1.2rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--display); font-size: var(--step-1); color: var(--forest); }
.faq-q .chev { width: 24px; height: 24px; flex: none; transition: transform 0.4s var(--ease-expo); color: var(--brass); }
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-expo); }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a-inner { padding-bottom: 1.3rem; color: var(--ink-soft); max-width: 64ch; }
.faq-a-inner a { color: var(--poppy-deep); font-weight: 700; }

/* generic centered section header */
.sec-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.2rem, 3vw, 2rem); }
.sec-head h2 { color: var(--forest); }
.steps .sec-head h2 { color: var(--cream); }
.sec-head .lede { margin-top: 0.7rem; }
.steps .sec-head .lede { color: var(--cream-soft); }
.sec-head .kicker { display: inline-block; margin-bottom: 0.2rem; }

@media (max-width: 900px) {
  .shop-detail-inner, .shop-detail:nth-of-type(even) .shop-detail-inner { grid-template-columns: 1fr; }
  .shop-detail:nth-of-type(even) .shop-media { order: 0; }
  .story-lead-inner { grid-template-columns: 1fr; }
  .story-lead figure { order: -1; }
  .gb-grid { grid-template-columns: 1fr; }
  .gb-preview { position: static; order: -1; max-width: 430px; margin-inline: auto; width: 100%; }
  .steps-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .shop-media { grid-template-columns: 1fr 1fr; }
  .gb-row, .delivery-grid { grid-template-columns: 1fr; }
}