/* ==========================================================
   bocco home — page styles
   Patterns: split screen, gradient mesh, spotlight, 3D coverflow,
   marquee, bento grid, masonry, tabs, card rail, stepper,
   stacked cards, accordion, full-bleed story, parallax.
   Builds on app-ui.css tokens and components.
   ========================================================== */

/* ---------- Shared home rhythm ---------- */

.page-home { overflow-x: hidden; }
.page-home .section { padding: 44px 0 0; scroll-margin-top: 90px; }
@media (min-width: 1024px) { .page-home .section { padding-top: 72px; } }

.overline {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.overline::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--gold); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; }
.link-more { font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.link-more:hover { color: var(--coral); }

.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; border-radius: 16px; }

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

.header-actions { display: flex; align-items: center; gap: 10px; }
.account-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.92rem;
}
.account-link:hover { border-color: var(--accent-text); text-decoration: none; }
.top-nav a[aria-current="page"] { color: var(--accent-text); }
.search { max-width: 460px; }
@media (max-width: 767px) { .account-link { display: none; } }

/* ---------- 1. Hero: split screen + gradient mesh + coverflow ---------- */

.hero { position: relative; display: block; overflow: hidden; padding: 24px 0 8px; isolation: isolate; }
.hero-mesh { position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; }
.hero-mesh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: mesh-drift 18s ease-in-out infinite alternate;
}
.hero-mesh span:nth-child(1) { width: 46vmax; height: 46vmax; left: -8%; top: -10%; background: #FDB3AE; }
.hero-mesh span:nth-child(2) { width: 40vmax; height: 40vmax; right: -10%; top: 10%; background: #FEB03D; opacity: 0.35; animation-delay: -6s; }
.hero-mesh span:nth-child(3) { width: 36vmax; height: 36vmax; left: 30%; bottom: -25%; background: #8D263C; opacity: 0.18; animation-delay: -11s; }
@keyframes mesh-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.12); }
}

.hero-grid { position: relative; display: grid; gap: 4px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.hero-copy { min-width: 0; }
.hero-visual { min-width: 0; }
.hero-copy { display: grid; gap: 18px; }
.hero-copy .eyebrow {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
  box-shadow: var(--shadow-1);
}
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .grad {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { font-size: 1.125rem; line-height: 1.6; max-width: 46ch; color: var(--ink-2); margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
  max-width: 520px;
}
.hero-stats div {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.hero-stats dt { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.hero-stats dd {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Spotlight that follows the cursor over the visual */
.hero-visual { position: relative; display: grid; justify-items: center; gap: 6px; }
.spotlight {
  position: absolute;
  width: 480px;
  height: 480px;
  left: 50%;
  top: 46%;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 91, 87, 0.22), transparent 62%);
  transform: translate(var(--sx, 0px), var(--sy, 0px));
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s var(--ease-out);
}

/* 3D perspective carousel (coverflow) */
.coverflow {
  --cw: 200px;
  position: relative;
  width: 100%;
  height: 430px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  perspective: 1100px;
  perspective-origin: 50% 40%;
  z-index: 1;
  user-select: none;
  touch-action: pan-y;
}
.cf-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw);
  height: calc(var(--cw) * 1.28);
  margin: calc(var(--cw) * 1.28 / -2) 0 0 calc(var(--cw) / -2);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -28px rgba(60, 14, 26, 0.55);
  transform: translate3d(var(--x, 0px), 0, var(--z, 0px)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 0.75s var(--ease-out), opacity 0.5s, box-shadow 0.5s;
  cursor: pointer;
  color: inherit;
}
.cf-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-card .cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(42, 11, 18, 0.78);
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cf-card.front { box-shadow: 0 36px 60px -24px rgba(253, 91, 87, 0.6), 0 0 0 3px var(--coral); }
.cf-card:focus-visible { outline-offset: 6px; }
@media (min-width: 1024px) { .coverflow { --cw: 218px; height: 540px; } }
@media (max-width: 380px) { .coverflow { --cw: 170px; height: 400px; } }

.cf-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }
.cf-dots { display: flex; gap: 8px; }
.cf-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: var(--line);
  padding: 0;
  cursor: pointer;
  transition: width 0.35s var(--ease-out), background 0.3s;
}
.cf-dots button[aria-current="true"] { width: 28px; background: var(--maroon); }

/* ---------- 2. Marquee ---------- */

.marquee {
  margin-top: 36px;
  overflow: hidden;
  background: var(--maroon);
  color: #fff;
  border-block: 1px solid var(--maroon-deep);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 36px;
  padding: 16px 0;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 500;
  animation: marquee 38s linear infinite;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 36px; }
.marquee-track span::after { content: "•"; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- 2b. Golden Pass promo ---------- */

.gp-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  padding: 18px 24px;
  color: #fff;
  background: linear-gradient(135deg, #220810 0%, #4A1420 55%, #6E1B2C 100%);
  border: 1px solid rgba(254,176,61,0.3);
  box-shadow: 0 16px 36px -22px rgba(0,0,0,0.65);
}
.gp-card::before { content: ""; position: absolute; width: 280px; height: 280px; right: -110px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(254,176,61,0.16), transparent 70%); z-index: -1; }
.gp-card::after {
  content: "";
  position: absolute;
  inset: -50% -70%;
  background: linear-gradient(100deg, transparent 40%, rgba(254,176,61,0.14) 50%, transparent 60%);
  background-size: 250% 250%;
  transform: rotate(-8deg);
  animation: gp-shine 7s linear infinite;
  pointer-events: none;
}
@keyframes gp-shine { to { background-position: -250% -250%; } }
@media (prefers-reduced-motion: reduce) { .gp-card::after { animation: none; } }

.gp-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gp-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--gold), #C98A1F); color: #3B1B04; }
.gp-text { flex: 1 1 280px; min-width: 0; }
.gp-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(254,176,61,0.12);
  border: 1px solid rgba(254,176,61,0.4);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--gold);
  margin-bottom: 5px;
}
.gp-text h2 { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0 0 2px; }
.gp-text p { color: rgba(255,255,255,0.68); margin: 0; font-size: 0.86rem; max-width: 54ch; }
.gp-cta { flex: 0 0 auto; }
.gp-cta .btn {
  min-height: 38px;
  padding: 0 18px;
  font-size: 0.86rem;
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(254,176,61,0.55);
  box-shadow: none;
}
.gp-cta .btn:hover { background: rgba(254,176,61,0.12); box-shadow: none; }
.gp-cta .btn::after { display: none; }
@media (max-width: 640px) {
  .gp-inner { flex-direction: column; align-items: flex-start; }
  .gp-cta { width: 100%; }
  .gp-cta .btn { width: 100%; }
}

/* ---------- 3. Bento grid ---------- */

.bento {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 150px;
}
.bento-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background: var(--maroon);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 36px -16px var(--tint, var(--shadow-2)), var(--shadow-2);
  text-decoration: none;
}
.bento-card img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease-out);
}
.bento-card:hover img { transform: scale(1.06); }
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42, 11, 18, 0) 32%, rgba(42, 11, 18, 0.88) 100%);
}
.bento-card .emoji-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bento-card .txt { position: relative; z-index: 1; padding: 16px; display: grid; gap: 3px; }
.bento-card h3 { color: #fff; font-size: 1.1rem; font-weight: 600; font-family: var(--font-head); line-height: 1.2; }
.bento-card small { color: rgba(255, 255, 255, 0.88); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.bento-card .go {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(150deg, #ff7862, var(--coral) 55%, #e8443f);
  color: var(--on-coral);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.bento-card:hover .go { transform: translateX(3px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.bento-card.big { grid-column: span 2; grid-row: span 2; }
.bento-card.big h3 { font-size: 1.55rem; }
.bento-card.big .emoji-badge { width: 38px; height: 38px; font-size: 1.2rem; }

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .bento-card h3 { font-size: 1.2rem; }
}
@media (min-width: 1024px) {
  .bento { grid-auto-rows: 200px; gap: 14px; }
  .bento-card.big h3 { font-size: 1.9rem; }
}

/* Parallax-ready: JS sets --py on these */
.bento-card[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0); }

/* ---------- 4. Full menu: tabs + masonry ---------- */

.tabs-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 14px;
  margin-bottom: 8px;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s, background 0.25s, color 0.25s, border-color 0.25s;
}
.tab:hover { transform: translateY(-2px); border-color: var(--accent-text); box-shadow: 0 8px 16px -10px rgba(253, 91, 87, 0.3); }
.tab:active { transform: translateY(0) scale(0.96); }
.tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(94, 21, 38, 0.6);
}

.masonry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.mcol { display: grid; gap: 14px; align-content: start; min-width: 0; }
.mcard {
  break-inside: avoid;
  margin: 0;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow 0.4s, transform 0.5s var(--ease-out);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  animation: card-in 0.6s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
.mcard:hover { box-shadow: var(--shadow-2); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
.mcard .ph {
  position: relative;
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  background: var(--brand-soft);
  cursor: zoom-in;
}
.mcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out); }
.mcard:hover .ph img { transform: scale(1.07); }
.mcard .new { position: absolute; left: 10px; top: 10px; }
.mcard .body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.mcard .name { font-family: var(--font-head); font-weight: 500; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.mcard .meta { font-size: 0.8rem; color: var(--muted); }
.mcard .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mcard .price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (min-width: 768px) { .masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mcol { gap: 16px; } }
@media (min-width: 1200px) { .masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .mcol { gap: 18px; } }

.more-row { display: flex; justify-content: center; margin-top: 26px; transition: margin 0.2s; }
.more-row.hidden { margin-top: 0; }
.more-done {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}
.more-done::before, .more-done::after { content: ""; width: 44px; height: 1px; background: var(--line); }
.more-done .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); flex: 0 0 auto; }

/* ---------- 5. New this season: card rail ---------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 270px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 22px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  scroll-snap-align: start;
  display: grid;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.rail-card:hover { box-shadow: var(--shadow-2); }
.rail-card .ph { position: relative; height: 210px; overflow: hidden; background: var(--brand-soft); }
.rail-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.rail-card:hover .ph img { transform: scale(1.08); }
.rail-card .new { position: absolute; left: 12px; top: 12px; }
.rail-card .body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.rail-card .name { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.rail-card .meta { font-size: 0.82rem; color: var(--muted); }
.rail-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.rail-card .price { font-weight: 700; }

/* ---------- 6. Story: full-bleed split screen ---------- */

.story {
  position: relative;
  margin-top: 72px;
  display: grid;
  background: var(--bg-2);
  overflow: hidden;
}
.story-media { position: relative; min-height: 340px; overflow: hidden; }
.story-media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
/* Paper panel — the same cream "editorial" material as the dashboard's
   reorder card and the Orders receipts, so Home's story ties into the
   rest of the app's material language instead of being its own maroon
   block. */
.story-copy { display: grid; gap: 16px; align-content: center; padding: 48px 22px 56px; background: var(--paper); color: var(--on-coral); }
.story .overline { color: var(--maroon); }
.story .overline::before { background: var(--maroon); }
.story-copy h2 { color: var(--on-coral); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1.02; }
.story-copy .lede { color: #5C3A3F; margin: 0; font-size: 1.05rem; line-height: 1.6; max-width: 52ch; }
/* Flip cards: tap (or hover, on desktop) to turn each one over. */
.flip-grid { display: grid; gap: 14px; margin-top: 10px; }
@media (min-width: 480px) { .flip-grid { grid-template-columns: repeat(3, 1fr); } }
.flip-card { display: block; width: 100%; perspective: 1000px; background: none; border: 0; padding: 0; margin: 0; height: 158px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.flip-inner { display: block; position: relative; width: 100%; height: 100%; transition: transform 0.6s var(--ease-spring); transform-style: preserve-3d; }
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.flip-front { background: rgba(42, 11, 18, 0.06); border: 1px solid rgba(42, 11, 18, 0.14); }
.flip-front .feature-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(42, 11, 18, 0.1); color: var(--maroon); }
.flip-front strong { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--on-coral); }
.flip-back { background: #fff; color: #2A0B12; transform: rotateY(180deg); box-shadow: var(--shadow-1); }
.flip-back p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #5C3A3F; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1fr; min-height: 580px; }
  .story-copy { padding: 72px clamp(32px, 6vw, 88px); }
}

/* ---------- 7. Stepper ---------- */

.stepper-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
.stepper-steps li {
  position: relative;
  padding: 22px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.stepper-steps .num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--coral);
  color: var(--on-coral);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.stepper-steps h3 { font-size: 1.15rem; font-family: var(--font-head); font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.stepper-steps p { margin: 0; font-size: 0.95rem; }
@media (min-width: 900px) {
  .stepper-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .stepper-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px;
    left: calc(100% + 2px);
    width: 14px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--coral) 0 6px, transparent 6px 10px);
  }
}

/* ---------- 8. Offers: stacked cards ---------- */

.offers-layout { display: grid; gap: 32px; align-items: center; }
.deck { position: relative; height: 270px; width: 100%; max-width: 460px; justify-self: center; }
.deck-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 26px 40px -22px var(--g1);
  transition: transform 0.7s var(--ease-out), opacity 0.5s;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.deck-card .emoji { font-size: 2.6rem; }
.deck-card h3 { color: #fff; font-size: 1.6rem; font-family: var(--font-head); font-weight: 600; }
.deck-card p { color: rgba(255, 255, 255, 0.92); margin: 0; }
.deck-card .code {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.75);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.deck-card:focus-visible { outline-offset: 6px; }

/* ---------- 9. FAQ ---------- */

.faq { padding-bottom: 36px; }
.faq-layout { display: grid; gap: 22px; }

/* Right side: a tilting photo + a real way to find the counter */
.faq-visual { display: grid; gap: 14px; align-content: start; }
.faq-photo {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-2);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.3s var(--ease-out);
}
.faq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faq-visit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: start;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.faq-visit-ico { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent-text); }
.faq-visit strong { display: block; color: var(--ink); font-size: 1rem; }
.faq-visit p { margin: 2px 0 0; font-size: 0.86rem; }
.faq-visit .btn { grid-column: 2; justify-self: start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .faq-photo { transition: none; } }

.accordion { display: grid; gap: 10px; }
.accordion details {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 20px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s var(--ease-out);
}
.accordion details:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.accordion details[open] { box-shadow: var(--shadow-2); border-color: var(--brand-soft); }
.accordion details::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.accordion details[open]::before { opacity: 1; }
.accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion .q-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--accent-text);
  transition: background 0.3s, color 0.3s;
}
.accordion details[open] .q-ico { background: var(--maroon); color: #fff; }
.accordion .q-text { flex: 1 1 auto; }
.accordion summary::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238D263C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.35s var(--ease-spring);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details p { margin: 0 0 18px 48px; color: var(--ink-2); line-height: 1.6; max-width: 62ch; }

@media (min-width: 900px) {
  .offers-layout { grid-template-columns: 1fr 1fr; gap: 56px; }
  .faq-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .faq-visual { position: sticky; top: 90px; }
}

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

.page-home .foot {
  margin-top: 36px;
  padding: 26px 0 0;
  background: var(--maroon-deep);
  color: rgba(255, 255, 255, 0.85);
  border-top: 0;
}
.page-home .foot h3 { color: #fff; font-size: 0.86rem; font-family: var(--font-head); font-weight: 500; margin: 0 0 6px; }
.page-home .foot a { display: block; padding: 3px 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); }
.page-home .foot a:hover { color: #fff; text-decoration: underline; }
.page-home .foot-grid { display: grid; gap: 18px; grid-template-columns: 1fr; padding-bottom: 16px; }
.page-home .foot-brand p { margin: 6px 0 0; color: #fff; font-family: var(--font-head); font-size: 0.92rem; }
.page-home .foot-brand .foot-note { margin-top: 4px; font-family: var(--font); font-size: 0.82rem; color: rgba(255,255,255,0.75); }
.page-home .foot-brand .logo-stack {
  width: 86px;
  height: auto;
  padding: 7px 9px;
  border-radius: 12px;
  background: #fff;
}
.page-home .foot-base {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
  .page-home .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .page-home .foot-base { padding-bottom: 16px; }
}

/* ---------- Responsive layout ---------- */

@media (min-width: 768px) {
  .hero { padding-top: 40px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 64px); min-height: 640px; }
}

/* Reduced motion: keep the layout, stop the loops */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh span, .marquee-track { animation: none; }
  .mcard { animation: none; }
}

/* Wide rail/bento tweak: the "wide" tile spans the full row on desktop */
@media (min-width: 768px) { .bento-card.wide { grid-column: span 4; } }

/* Coverflow cards are buttons: reset native button chrome */
.cf-card { padding: 0; font: inherit; }
.mcard .ph { border: 0; padding: 0; width: 100%; display: block; }

.outlet-line { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--accent-text); }
.page-home .foot-base span:nth-child(2) { color: rgba(255,255,255,0.7); }

/* ---------- Menu category page ---------- */

.cat-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: var(--maroon-deep);
}
.cat-hero .cat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); animation: cat-zoom 14s ease-out forwards; }
@keyframes cat-zoom { to { transform: scale(1); } }
.cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,11,18,0.15) 0%, rgba(42,11,18,0.55) 55%, rgba(42,11,18,0.92) 100%); }
.cat-inner { width: min(1240px, 100% - 32px); margin-inline: auto; padding: 56px 0 36px; display: grid; gap: 14px; }
.cat-inner .overline { color: var(--gold); }
.cat-inner .overline::before { background: var(--gold); }
.cat-inner h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.cat-inner .lede { margin: 0; color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 60ch; }
.cat-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-stats span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.85rem; font-weight: 600; color: #fff; }
.cat-stats span.new { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.cat-tabs-wrap { position: sticky; top: var(--header-h, 64px); z-index: 30; background: var(--surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.cat-tabs-wrap .tabs-row { max-width: 1240px; margin: 0 auto; padding: 12px 16px; }
.cat-tabs-wrap .tab { text-decoration: none; display: inline-flex; align-items: center; }
.cat-tabs-wrap .tab[aria-current="page"] { background: var(--maroon); border-color: var(--accent-text); color: #fff; }
.page-category .section { padding-top: 28px; scroll-margin-top: 90px; }

/* Dark mode: softer hero glow so the photo stays the focus */
:root[data-theme="dark"] .hero-mesh span { opacity: 0.2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-mesh span { opacity: 0.2; } }

/* Profile icon, top right of the storefront header */
.account-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent-text);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.account-icon:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; }

/* Category strip: photo cards you can scroll, with a clear active state */
.strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 16px;
}
.strip::-webkit-scrollbar { display: none; }
.strip-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(170px, 19vw, 230px);
  height: 124px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: center;
  background: var(--maroon-deep);
  box-shadow: var(--shadow-1);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.strip-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.8s var(--ease-out), filter 0.4s;
  filter: saturate(0.9);
}
.strip-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42,11,18,0.05) 25%, rgba(42,11,18,0.85) 100%);
}
.strip-card .lbl { position: absolute; left: 14px; right: 12px; bottom: 12px; display: grid; gap: 2px; }
.strip-card .name { font-family: var(--font-head); font-weight: 500; font-size: 0.98rem; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.strip-card .cnt { font-size: 0.74rem; color: rgba(255,255,255,0.88); font-weight: 500; }
.strip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); text-decoration: none; }
.strip-card:hover img { transform: scale(1.08); }
.strip-card[aria-current="page"] {
  box-shadow: 0 0 0 3px var(--gold), 0 18px 30px -14px rgba(42,11,18,0.7);
}
.strip-card[aria-current="page"] img { filter: none; }
.strip-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Shop by category: a bento of full-bleed photo cards — replaces the
   old full item grid + group tabs on Home. Same photo-and-gradient
   identity as the Menu page's own per-category banner (.cat-hero),
   just at tile scale, so it reads as the same app rather than a
   fourth pattern. One feature tile (the first, after any preference
   sort) runs wide for visual rhythm instead of a flat uniform grid. */
.shop-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.shop-tile {
  position: relative;
  grid-column: span 1;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  border-radius: 22px;
  overflow: hidden;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: #fff;
  text-decoration: none;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.shop-tile:hover { box-shadow: var(--shadow-2); text-decoration: none; }
.shop-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.shop-tile:hover img { transform: scale(1.08); }
.shop-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(14,7,9,0) 32%, rgba(14,7,9,.58) 68%, rgba(14,7,9,.92) 100%);
}
.shop-tile-chev {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(14,7,9,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
.shop-tile-body { position: relative; z-index: 1; display: grid; gap: 2px; padding: 14px; width: 100%; }
.shop-tile-body strong { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.shop-tile-body small { font-size: 0.78rem; color: rgba(255,255,255,.8); }
.shop-tile--feature { grid-column: span 2; aspect-ratio: 2.3 / 1; }
.shop-tile--feature .shop-tile-body strong { font-size: 1.3rem; }
@media (min-width: 640px) {
  .shop-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-tile--feature { grid-column: span 3; aspect-ratio: 3.6 / 1; }
}
@media (min-width: 1024px) {
  .shop-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .shop-tile--feature { grid-column: span 2; aspect-ratio: 2.3 / 1; }
}

/* Search results reuse the Menu page's own .menu-list/.mrow rows
   (defined above), so a search on Home looks identical to browsing a
   category instead of being a third visual pattern. */
.search-results { margin-top: 18px; }
.search-results .menu-list { margin-top: 12px; }

/* Category pills (Menu page): round photo avatar + name + count, the
   selected pill goes solid ink — replaces the photo-card strip above
   for this page's "other menus" switcher. */
.cat-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 44px; padding: 0 14px 0 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 0.85rem; white-space: nowrap; text-decoration: none; }
.cat-pill img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cat-pill .cnt { opacity: 0.7; font-weight: 600; }
.cat-pill.on { background: var(--ink); color: var(--on-coral); border-color: var(--ink); }

/* Menu list rows, replacing the masonry card grid on category.html */
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; }
.mrow-ph { width: 92px; height: 92px; flex: 0 0 auto; border-radius: 20px; overflow: hidden; background: var(--paper); cursor: pointer; }
.mrow-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mrow-body .badge-gold.new { align-self: flex-start; }
.mrow-name { font-weight: 700; font-size: 1rem; }
.mrow-price { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink-2); }
.mrow-cta { flex: 0 0 auto; }
.add-btn.mrow-add { height: 44px; min-width: 0; padding: 0 20px; border-radius: 14px; }

/* Stepper, filled coral — the Menu variant of the shared .stepper
   (Cart keeps the outline version already defined in app-ui.css) */
.stepper.filled { background: var(--coral); border-color: var(--coral); height: 44px; }
.stepper.filled button { color: var(--on-coral); width: 38px; }
.stepper.filled button:hover { background: rgba(42,11,18,0.1); }
.stepper.filled output { color: var(--on-coral); min-width: 20px; }

/* Phones: tighter hero, carousel directly under the buttons */
@media (max-width: 767px) {
  .hero { padding-top: 12px; }
  .coverflow { height: 330px; --cw: 186px; }
  .cf-controls { margin-top: -6px; }
}
.coverflow.dragging .cf-card { transition: none; }
.coverflow { touch-action: pan-y; }

/* Header end: a fine gradient line exactly on the header's bottom edge */
.page-home .topbar,
.page-category .topbar { border-bottom: 0; transition: transform 0.4s var(--ease-out), box-shadow 0.3s; }
.page-home .topbar::after,
.page-category .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(253,91,87,0), #FD5B57 22%, #FEB03D 50%, #8D263C 78%, rgba(141,38,60,0));
  background-size: 200% 100%;
  box-shadow: 0 4px 14px -4px rgba(253,91,87,0.55);
  animation: sheen 8s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .page-home .topbar::after, .page-category .topbar::after { animation: none; } }

/* Phones: Home's search now shows as a full-width row under the header
   (search the whole menu) — Category still hides its own, since it's
   one menu already narrowed down, matching the redesign spec's mobile
   search field. */
@media (max-width: 767px) {
  .page-category .topbar .search { display: none; }
  .page-home .topbar .search { margin: 2px 0 6px; }
  .page-home .topbar .search input { height: 50px; border-radius: 16px; }
}

/* Keep the hero clear of the header wave */
.hero { padding-top: 34px; }
@media (min-width: 768px) { .hero { padding-top: 44px; } }

/* Header: icons pushed to the right edge with a clear gap after the brand */
.page-home .topbar-inner,
.page-category .topbar-inner { gap: 16px; justify-content: space-between; }
.page-home .header-actions,
.page-category .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.page-home main,
.page-category main { padding-bottom: 40px; }

/* Bottom menu: a fixed bar along the bottom edge on phones, always visible */
@media (max-width: 1023px) {
  .page-home .bottom-nav,
  .page-category .bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom));
    border-radius: 0;
    border: 0;
    box-shadow: 0 -12px 30px -18px rgba(42,11,18,0.45);
  }
  .page-home .bottom-nav::before,
  .page-category .bottom-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(253,91,87,0), #FD5B57 22%, #FEB03D 50%, #8D263C 78%, rgba(141,38,60,0));
    background-size: 200% 100%;
    animation: sheen 8s linear infinite;
  }
  .cart-bar { bottom: 96px; }
  .page-home main,
  .page-category main { padding-bottom: 90px; }
}

/* Tighter space between the carousel and the marquee on phones */
@media (max-width: 767px) {
  .coverflow { height: 300px; }
  .cf-controls { margin-top: 0; }
  .marquee { margin-top: 10px; }
}

/* Header wordmark: smaller on phones */
@media (max-width: 767px) {
  .page-home .topbar .logo-h,
  .page-category .topbar .logo-h { font-size: 24px; }
}

/* Offers row and the hero/new/offer dot rows: grab to drag on desktop */
.offers { cursor: grab; }
.offers.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }