/* ============================================================
   home.css — TOYLAND homepage theme
   ------------------------------------------------------------
   Self-contained: only index.html loads this file, so the rest
   of the scaffold (products / cart / checkout) is untouched.
   ============================================================ */

:root {
  --pink:        #ff3d6e;
  --pink-soft:   #ff5c8a;
  --pink-tint:   #ffe3ea;
  --blue:        #17a2e8;
  --blue-tint:   #dbf0fc;
  --coral:       #ff8a73;
  --yellow:      #ffe97f;
  --amber:       #f6b73c;
  --ink:         #2f3542;
  --ink-soft:    #4a515f;
  --muted:       #7b8494;
  --line:        #eef0f4;
  --surface:     #ffffff;

  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --soft: "Quicksand", "Poppins", system-ui, sans-serif;

  --max: 1280px;
  --header-h: 88px;
  --shadow-sm: 0 4px 14px rgba(47, 53, 66, .06);
  --shadow-md: 0 12px 32px rgba(47, 53, 66, .10);
  --shadow-lg: 0 22px 60px rgba(47, 53, 66, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--ui);
  color: var(--ink-soft);
  line-height: 1.6;
  background-color: #fff;
  background-image:
    radial-gradient(1100px 620px at 88% -8%, rgba(255, 209, 163, .55), transparent 62%),
    radial-gradient(760px 520px at -5% 18%, rgba(206, 233, 255, .5), transparent 62%),
    repeating-conic-gradient(#fafbfd 0% 25%, #ffffff 0% 50%);
  background-size: auto, auto, 30px 30px;
  background-attachment: fixed, fixed, scroll;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: 28px; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 2px solid rgba(47, 53, 66, .06);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(47, 53, 66, .08); }
.header-inner { display: flex; align-items: center; gap: 22px; height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #ff5c8a, #f5194f);
  border-radius: 32%;
  box-shadow: 0 10px 24px rgba(245, 25, 79, .32);
  /* the tile (and the T with it) turns slowly, forever */
  animation: logo-spin 14s linear infinite;
}
.logo-mark svg { width: 24px; height: 24px; }
.logo:hover .logo-mark { animation-duration: 3s; }

@keyframes logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.logo-text {
  font-family: var(--ui); font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: 0; color: var(--ink);
}
.logo-text span { color: var(--blue); }

.main-nav { display: flex; gap: 34px; margin-inline: auto; }
.main-nav a {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 2px; position: relative; transition: color .2s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 0; height: 3px; border-radius: 3px; background: var(--blue);
  transition: width .25s ease;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after { width: 22px; }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* The browser hides [hidden] with display:none, but that is a plain
   UA rule and any class here that sets display beats it. .icon-btn and
   .btn both do, so el.hidden = true did nothing to them and the
   profile icon stayed on screen for signed-out visitors. Make hidden
   mean hidden, everywhere. */
[hidden] { display: none !important; }

.icon-btn {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line);
  color: var(--ink); position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }

/* The signed-in end of the header. Exactly one of Login, the profile
   icon and the shield is ever on screen; the rest are hidden by
   js/auth.js. They are all .icon-btn, so they line up with the heart
   and the bag without any extra sizing. */
.profile-btn { color: var(--pink); }

/* Admins get the shield instead of the profile icon, filled so it
   reads as a different kind of account at a glance rather than
   another link to the same place. */
.admin-btn {
  background: #ffe1e8; border-color: transparent; color: var(--pink);
}
.admin-btn:hover { background: #ffd2dd; }

.signout-btn { color: var(--ink); }
.signout-btn:hover { color: var(--pink); }

/* The way into the portal, for admins only. */
.btn-portal {
  background: #fdf1c8; color: #b9880a;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 11px 22px;
}
.btn-portal:hover { background: #fbe7a8; color: #9c7208; }
.icon-btn.sparkle {
  background: #fdf5d2; border-color: transparent; color: #ffd52e;
  box-shadow: 0 6px 16px rgba(253, 216, 53, .28);
}
.icon-btn.sparkle svg { width: 27px; height: 27px; }
.icon-btn.sparkle:hover { transform: translateY(-2px) rotate(-8deg); }
.cart-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; font-weight: 600; font-size: 15px;
  padding: 14px 32px; transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-pink {
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #fff; box-shadow: 0 10px 26px rgba(255, 61, 110, .34);
}
.btn-pink:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(255, 61, 110, .42); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-login { padding: 13px 36px; }

.nav-toggle {
  display: none; width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
  place-items: center; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ============ Hero ============ */
.hero {
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: 56px; align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-block: 56px 40px;
}
/* Without this the gallery's intrinsic width props the grid open and the
   page scrolls sideways on small screens. */
.hero > * { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blue-tint); color: #1b9fe0;
  border-radius: 999px; padding: 10px 22px;
  font-size: 14px; font-weight: 600;
}
.eyebrow svg { width: 17px; height: 17px; }

.hero h1 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(46px, 5.9vw, 82px); line-height: 1.14;
  letter-spacing: -1px; color: var(--ink);
  margin: 28px 0 0; position: relative;
  /* room under the last line for the rocket to hover in */
  padding-bottom: clamp(52px, 5vw, 74px);
}
.hero h1 .l { display: block; }
/* "Magic" drifts slowly through the palette. The stops run forward around
   the colour wheel (coral > yellow > green > sky > purple > pink) so each
   leg is a short hop; jumping across the wheel passes through grey.

   Six seconds for the full round, one per colour. Fast enough that the
   change is plainly happening while you look at it, which is the point
   of it - slower and the word just appears to be a different colour
   every time you come back to the page. */
.hero h1 .coral {
  color: var(--coral);
  animation: magic-hue 6s linear infinite;
}
@keyframes magic-hue {
  0%   { color: #ff8a73; }
  17%  { color: #f6b73c; }
  34%  { color: #3aa76d; }
  50%  { color: #17a2e8; }
  67%  { color: #a06ee1; }
  84%  { color: #ff5c8a; }
  100% { color: #ff8a73; }
}
.hero h1 .blue { color: var(--blue); position: relative; display: inline-block; }
.hero h1 .blue::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: .1em;
  height: 14px; border-radius: 999px; background: rgba(23, 162, 232, .16); z-index: -1;
}
/* ---- the stars over "Discover" ----

   One coral star was hard-coded here. It has four more around it now,
   and they all bounce and twinkle.

   Every position and size is in em, so the cluster scales with the
   heading: it holds together at 46px on a phone and at 82px on a
   desktop without a single breakpoint.

   Each star runs its own duration AND its own delay. Shared durations
   would have them all reach the top of the bounce together, which
   reads as one object moving rather than five. The delays are
   negative so the cluster is already mid-flight on the first frame
   instead of starting in a neat row.

   Bounce owns transform and twinkle owns opacity - two animations on
   one element cannot both write transform, the later one simply
   wins. */
.hero h1 .sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
}

.hero h1 .twinkle {
  position: absolute;
  width: .36em; height: .36em;
  color: var(--coral);
  animation: star-bounce 2.6s ease-in-out infinite,
             star-twinkle 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* The original, in its original place. */
.hero h1 .t1 { top: -.14em; left: 1.55em; }

/* Kept low: at -.40em this one bounced up into the "Magical playtime
   awaits" pill and read as part of the badge. */
.hero h1 .t2 {
  top: -.17em; left: .44em;
  width: .22em; height: .22em; color: var(--amber);
  animation-duration: 3.3s, 3.3s; animation-delay: -1.1s, -1.1s;
}

.hero h1 .t3 {
  top: .02em; left: 2.62em;
  width: .17em; height: .17em; color: var(--pink-soft);
  animation-duration: 2.1s, 2.1s; animation-delay: -.45s, -.45s;
}

.hero h1 .t4 {
  top: -.34em; left: 3.34em;
  width: .27em; height: .27em; color: var(--blue);
  animation-duration: 3.8s, 3.8s; animation-delay: -2.2s, -2.2s;
}

.hero h1 .t5 {
  top: -.22em; left: 4.35em;
  width: .15em; height: .15em; color: var(--amber);
  animation-duration: 2.9s, 2.9s; animation-delay: -1.7s, -1.7s;
}

@keyframes star-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-.22em) rotate(14deg) scale(1.12); }
}

/* Never all the way out. A star that vanishes leaves a hole in the
   cluster; one that dims still reads as part of it. */
@keyframes star-twinkle {
  0%, 100% { opacity: .45; }
  45%      { opacity: 1; }
}

/* Anyone who has asked their system for less movement gets the
   cluster standing still, fully lit. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .twinkle { animation: none; opacity: 1; }
}

/* ---- the rocket under "Land" ----

   It hangs off the word itself rather than off the heading, so it
   stays under "Land" at every width without a single hard-coded
   offset. The heading carries the padding underneath that the rocket
   hovers in, so nothing it does can reach the line below.

   It never leaves and it never fades. The old version flew one pass
   and vanished off the edge, which meant the hero sat still most of
   the time; this one is always on screen and always moving. */
.hero h1 .land { position: relative; }

/* 100% is the bottom of the word's own box, not the bottom of the
   line, so the offset after it is what actually clears the letters -
   and it is in em, so it clears them at every size. */
.rocket {
  position: absolute; top: calc(100% + .04em); right: 0;
  width: clamp(38px, 4.2vw, 58px); height: auto;
  animation: rocket-hover 6s ease-in-out infinite;
}

.rocket .body  { fill: #ff5c8a; }
.rocket .fin   { fill: var(--pink); }
.rocket .port  { fill: var(--blue); }
.rocket .flame { fill: var(--amber); }
.rocket .puff  { fill: var(--amber); opacity: .45; }

/* transform-box keeps the scale centred on the flame itself; without
   it an SVG child rotates around the top-left of the whole viewBox. */
.rocket .flame {
  transform-box: fill-box; transform-origin: 50% 10%;
  animation: flame-flicker .26s ease-in-out infinite alternate;
}

.rocket .puff {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: puff-drift 1.1s ease-out infinite;
}
.rocket .p2 { animation-delay: .16s; }
.rocket .p3 { animation-delay: .32s; }

/* A loop, not a journey. It climbs and drops through the whole six
   seconds and the last frame is the first one, so there is no jump
   where it starts over.

   The 50% is what puts it ON the corner: the rocket is pinned to the
   right edge of "Land", and half its own width back to the right
   centres it there. The drift is even either side of that, so the
   corner is where it sits rather than where it passes.

   Every frame repeats the 50%, because a transform list replaces the
   one before it rather than adding to it. */
@keyframes rocket-hover {
  0%   { transform: translate(calc(50% - 8px),  4px)   rotate(-12deg); }
  20%  { transform: translate(calc(50% + 7px),  -16px) rotate(10deg); }
  40%  { transform: translate(calc(50% + 10px), 2px)   rotate(4deg); }
  60%  { transform: translate(calc(50% - 4px),  -18px) rotate(-14deg); }
  80%  { transform: translate(calc(50% - 10px), -3px)  rotate(-4deg); }
  100% { transform: translate(calc(50% - 8px),  4px)   rotate(-12deg); }
}

@keyframes flame-flicker {
  from { transform: scaleY(.78) scaleX(.9); opacity: .8; }
  to   { transform: scaleY(1.15) scaleX(1.05); opacity: 1; }
}

@keyframes puff-drift {
  0%   { transform: scale(.5); opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rocket, .rocket .flame, .rocket .puff { animation: none; }
  .rocket { transform: translateX(50%); }
}

.hero p.lede {
  font-family: var(--soft); font-weight: 500;
  font-style: italic; font-size: 19px; color: var(--muted);
  max-width: 44ch; margin-top: 12px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 27px; margin-top: 40px; }
.hero-cta .btn { padding: 15px 34px; }

/* Social proof: overlapping avatars + "dreamers joined" */
.hero-social { display: flex; align-items: center; gap: 14px; margin-top: 60px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars img {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #fff; background: #f2f4f8;
  box-shadow: 0 3px 10px rgba(47, 53, 66, .12);
  object-fit: cover; position: relative; cursor: pointer;
  transition: transform .34s cubic-bezier(.34, 1.35, .64, 1), box-shadow .34s ease;
}
.avatars img:hover { transform: translateY(-4px) scale(1.07); z-index: 3; }
/* click a face: it slides right, then rejoins the stack at the end */
.avatars img.is-moving {
  transform: translateX(132px) scale(1.14) rotate(9deg);
  box-shadow: 0 12px 26px rgba(47, 53, 66, .26);
  z-index: 4;
}
.avatars img + img { margin-left: -12px; }
.joined-spark { width: 26px; height: 26px; color: #c3b0e8; margin-left: 2px; }
.joined {
  font-family: var(--soft);
  font-style: italic; font-size: 13px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}

/* Curved divider that closes the hero */
/* pulled up so the curve sits close under the gallery */
.hero-wave { line-height: 0; margin-top: -56px; }
.hero-wave svg { display: block; width: 100%; height: 130px; }

/* Pinterest-style masonry gallery

   Everything the card does under the cursor is driven by four custom
   properties rather than by inline styles. The pointer handler in
   js/home.js writes --rx/--ry/--px/--py and CSS decides what they
   mean, which is why hovering and tracking can share one transform
   without fighting over the style attribute.

   Defaults sit on .pin so a card with no script, no pointer, or no
   JavaScript at all is simply a still card. */
.pin-grid { columns: 2; column-gap: 32px; }
.pin {
  --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; --lift: 0px; --zoom: 1;
  position: relative; break-inside: avoid; margin: 0 0 32px;
  border-radius: 24px; overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: perspective(900px) translateY(var(--lift))
             rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .3s ease, box-shadow .3s ease;
}
.pin:hover, .pin:focus-within {
  --lift: -6px; --zoom: 1.12;
  box-shadow: var(--shadow-lg);
}

/* While the pointer is inside, the card has to keep up with it, so
   the easing shortens. On the way out the long transition comes back
   and everything settles instead of snapping. */
.pin.is-tracking { transition: transform .1s ease-out, box-shadow .3s ease; }

.pin img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom)) translate(var(--px), var(--py));
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.pin.is-tracking img { transition: transform .12s ease-out; }

/* The image moves against the cursor rather than with it. That is
   what makes it read as depth: the near thing lags the far thing. */

.pin-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 46px 24px 20px; color: #fff; text-align: left;
  /* Several of these pictures are pale at the bottom, so the scrim
     has to carry the text on its own rather than hoping the photo
     underneath is dark enough. */
  background: linear-gradient(to top,
    rgba(18, 22, 32, .9), rgba(18, 22, 32, .48) 52%, rgba(18, 22, 32, 0));
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.pin:hover .pin-cap, .pin:focus-within .pin-cap { opacity: 1; transform: none; }
.pin-cap b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 2vw, 27px); letter-spacing: -.2px;
}
.pin-cap span {
  display: block; margin-top: 5px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase; opacity: .88;
}

.pin-like {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); display: grid; place-items: center;
  color: var(--pink); box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.pin-like svg { width: 20px; height: 20px; }
.pin:hover .pin-like, .pin:focus-within .pin-like,
.pin-like:focus-visible, .pin-like.is-liked { opacity: 1; transform: none; }
.pin:hover .pin-like:hover, .pin-like.is-liked:hover { transform: scale(1.12); }
.pin-like.is-liked svg { fill: currentColor; }

/* A touch screen has no hover to wait for, so the card arrives
   finished rather than hiding half of itself behind a gesture that
   does not exist there. */
@media (hover: none) {
  .pin-cap, .pin-like { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pin, .pin img, .pin-cap { transition: none; }
  .pin:hover, .pin:focus-within { --zoom: 1; --lift: 0px; }
}

/* ============ Section furniture ============ */
.section { padding: 96px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.pill {
  display: inline-block; border-radius: 999px;
  padding: 9px 24px; font-size: 12px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
}
.pill-pink { background: var(--pink-tint); color: var(--pink); }
.pill-blue { background: var(--blue-tint); color: var(--blue); }
.pill-yellow { background: #fff3d1; color: #d99a12; }
.section-head h2 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12;
  letter-spacing: -.5px; text-transform: uppercase;
  color: var(--ink); margin-top: 18px;
}
.section-head h2 span { color: var(--blue); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 16px; }

/* ============ Categories ============ */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.cat-card {
  border-radius: 26px; padding: 40px 14px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.cat-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(47, 53, 66, .07);
}
.cat-icon svg { width: 30px; height: 30px; }
.cat-card span {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
}
.cat-card:hover span { color: var(--ink); }

/* ============ Curated favourites ============ */
/* Warm cream band that runs the full width of the page. */
.band-cream {
  background: linear-gradient(180deg, #fdfbea 0%, #f8f3d2 45%, #f5efc3 100%);
}
/* Heading on the left, "Explore All" pinned to the right. */
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 46px;
}
.head-row .section-head { text-align: left; margin-bottom: 0; }
.section-head h2 .pink { color: var(--pink); }

.fav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.fav-card {
  position: relative; min-width: 0;
  background: var(--surface); border-radius: 24px; padding: 12px;
  display: flex; flex-direction: column;
  /* Two layers: a soft wide one for depth and a tighter, darker one
     right under the card, so it reads as sitting on the page rather
     than floating in a haze. The negative spread keeps both from
     bleeding out sideways into the neighbouring card. */
  box-shadow:
    0 18px 34px -12px rgba(47, 53, 66, .20),
    0 6px 14px -6px rgba(47, 53, 66, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fav-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 30px 50px -14px rgba(47, 53, 66, .26),
    0 10px 20px -8px rgba(47, 53, 66, .14);
}

.fav-media {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 1 / .92; background: #f7f8fa; display: block;
}
.fav-media img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 12px;
}
.badge-best {
  position: absolute; top: 11px; left: 11px;
  background: #ffd93d; color: var(--ink);
  border-radius: 999px; padding: 6px 13px;
  font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
}
.fav-like {
  position: absolute; top: 22px; right: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; color: var(--ink);
  box-shadow: 0 4px 12px rgba(47, 53, 66, .14);
  transition: transform .2s ease, color .2s ease;
}
.fav-like svg { width: 17px; height: 17px; }
.fav-like:hover { transform: scale(1.1); color: var(--pink); }
.fav-like.is-liked { color: var(--pink); }
.fav-like.is-liked svg { fill: currentColor; }

.fav-body { padding: 16px 10px 8px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fav-body .cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 9px;
}
.fav-body h3 {
  font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.fav-foot {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fav-foot .price { font-size: 17px; font-weight: 700; color: var(--ink); }
.cart-fab {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  box-shadow: 0 8px 20px rgba(255, 61, 110, .35);
  transition: transform .2s ease, background .2s ease;
}
.cart-fab svg { width: 18px; height: 18px; }
.cart-fab:hover { transform: translateY(-2px) scale(1.06); }
.cart-fab.done {
  background: linear-gradient(135deg, #5ecf8f, #2f9e5f);
  box-shadow: 0 8px 20px rgba(47, 158, 95, .35);
}

/* ============ Quick view ============ */
.quick-view {
  position: absolute; left: 50%; top: 38%; translate: -50% -50%; z-index: 3;
  background: rgba(255, 255, 255, .96); color: var(--ink);
  border-radius: 999px; padding: 10px 22px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(47, 53, 66, .18);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.fav-card:hover .quick-view,
.quick-view:focus-visible { opacity: 1; pointer-events: auto; }
.quick-view:hover { background: var(--pink); color: #fff; }

.qv-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(29, 33, 43, .55);
  display: grid; place-items: center; padding: 24px;
  overflow-y: auto;
}
.qv-panel {
  position: relative; width: min(760px, 100%);
  background: var(--surface); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.qv-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 24px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.qv-close:hover { background: var(--pink); color: #fff; }
.qv-media { background: #f4f6f8; }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-body { padding: 34px 32px; display: flex; flex-direction: column; }
.qv-body .cat {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--blue);
}
.qv-body h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 27px; color: var(--ink); line-height: 1.2; margin-top: 8px;
}
.qv-desc { font-size: 14.5px; color: var(--muted); margin-top: 12px; }
.qv-meta { display: flex; gap: 16px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.qv-meta .stars b { color: var(--amber); }
.qv-price {
  font-family: var(--display); font-weight: 700;
  font-size: 30px; color: var(--ink); margin-top: 18px;
}
.qv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.qv-actions .btn { padding: 13px 26px; font-size: 14.5px; }

/* ============ Shop by age ============ */
.age-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.age-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 24px; aspect-ratio: 1 / 1.24;
  background: #e9ecf1;
  box-shadow: 0 12px 30px rgba(47, 53, 66, .14);
  transition: transform .28s ease, box-shadow .28s ease;
}
.age-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.age-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.age-card:hover img { transform: scale(1.06); }
/* Scrim so the white plate text stays readable over any artwork. */
.age-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(24, 26, 32, .62) 0%, rgba(24, 26, 32, .10) 38%, rgba(24, 26, 32, 0) 58%);
}
.age-go {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .25s ease;
}
.age-card:hover .age-go { transform: scale(1.12) rotate(6deg); }
.age-plate {
  position: absolute; left: 15px; right: 15px; bottom: 16px; z-index: 2;
  border-radius: 16px; padding: 14px 16px;
  background: rgba(255, 255, 255, .17);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .26);
}
.age-plate b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: .5px;
  text-transform: uppercase; color: #fff;
}
.age-plate span {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255, 255, 255, .86);
}

/* ============ Our magic playground ============ */
.play-grid { columns: 3; column-gap: 24px; }
.play-card {
  display: block; break-inside: avoid; margin-bottom: 24px;
  background: var(--surface); border-radius: 18px; padding: 10px;
  box-shadow: 0 8px 24px rgba(47, 53, 66, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.play-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.play-card img { width: 100%; border-radius: 12px; }
.play-cap { padding: 13px 6px 6px; }
.play-cap b {
  display: block; font-size: 16px; font-weight: 900;
  letter-spacing: .7px; text-transform: uppercase; color: var(--ink);
}
.play-cap span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }

/* ============ Perks band ============ */
.band-lemon { background: #faefbd; }
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.perk {
  border-radius: 28px; padding: 30px 18px 26px; text-align: center;
  box-shadow: 0 14px 30px rgba(47, 53, 66, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.perk:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.perk .ico {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  background: #fff; display: grid; place-items: center; color: var(--ink);
  box-shadow: 0 6px 16px rgba(47, 53, 66, .10);
}
.perk .ico svg { width: 30px; height: 30px; }
.perk b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.perk span {
  display: block; margin-top: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--muted);
}

/* Curated Favorites cards: photo fills a taller portrait frame, matching
   the reference. Scoped to the home page row so the shop grid keeps the
   fitted treatment it already has. */
#featured-grid .fav-media { aspect-ratio: 1 / 1.22; }
#featured-grid .fav-media img { object-fit: cover; padding: 0; }

/* Curated row prices drift between pink and sky blue and back. */
#featured-grid .fav-foot .price {
  animation: price-shift 6s ease-in-out infinite;
}
@keyframes price-shift {
  0%, 100% { color: var(--pink); }
  50%      { color: var(--blue); }
}

/* ============ Shop listing ============ */
.shop-toolbar {
  display: flex; flex-direction: column; gap: 20px;
  align-items: center; margin-bottom: 44px;
}
.shop-search {
  display: flex; align-items: center; gap: 11px;
  width: min(460px, 100%);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 13px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shop-search:focus-within { border-color: var(--blue); box-shadow: var(--shadow-md); }
.shop-search svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.shop-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.shop-search input::placeholder { color: #b6bcc7; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  border-radius: 999px; padding: 10px 22px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  background: var(--surface); color: var(--muted);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.chip:hover { transform: translateY(-2px); color: var(--ink); }
.chip.active {
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #fff; box-shadow: 0 8px 20px rgba(255, 61, 110, .32);
}

.badge-age { background: rgba(255, 255, 255, .94); color: var(--ink); }
.stock-line { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.empty-state {
  text-align: center; padding: 70px 24px;
  color: var(--muted); font-size: 16px;
}
.cart-fab.done {
  background: linear-gradient(135deg, #5ecf8f, #2f9e5f);
  box-shadow: 0 8px 20px rgba(47, 158, 95, .35);
}

/* heart count on the header wishlist button */
.wish-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

@media (max-width: 700px) {
  .shop-toolbar { margin-bottom: 30px; gap: 15px; }
  .chip { padding: 9px 16px; font-size: 12.5px; }
}

/* ============ Product detail ============ */
.pd-wrap { padding: 46px 0 10px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
.pd-grid > * { min-width: 0; }

.pd-main {
  background: var(--surface); border-radius: 28px; padding: 28px;
  box-shadow: var(--shadow-md); display: grid; place-items: center;
  aspect-ratio: 1 / 1;
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.pd-thumbs { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pd-thumb {
  width: 86px; height: 86px; border-radius: 18px; padding: 6px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  border: 2px solid transparent; transition: border-color .2s ease, transform .2s ease;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.pd-thumb:hover { transform: translateY(-3px); }
.pd-thumb.active { border-color: var(--blue); }

.pd-toprow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-toprow .pill { padding: 8px 20px; font-size: 11.5px; }
.stars-row { display: inline-flex; gap: 2px; font-size: 19px; color: #dfe3ea; line-height: 1; }
.stars-row .star.on { color: #f6c445; }
.stars-row.small { font-size: 15px; }
.pd-reviewcount {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
}

.pd-info h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08;
  letter-spacing: -1px; color: var(--ink); margin: 22px 0 0;
}
.pd-desc { color: var(--muted); font-size: 16px; margin-top: 16px; max-width: 52ch; }
.pd-price {
  font-family: var(--display); font-weight: 700;
  font-size: 36px; color: var(--blue); margin-top: 20px;
}

.pd-buyrow { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
.stepper {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border-radius: 999px; padding: 7px;
  box-shadow: var(--shadow-sm);
}
.stepper button {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f6f8fa; color: var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.stepper button:hover { background: var(--pink); color: #fff; }
.stepper span { min-width: 40px; text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); }
.pd-stock {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
.pd-stock i { width: 9px; height: 9px; border-radius: 50%; background: #3aa76d; flex-shrink: 0; }
.pd-stock.out i { background: #d0d5dd; }

.pd-actions { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.pd-add {
  flex: 1; min-width: 230px; padding: 22px 34px;
  font-size: 18px; border-radius: 999px;
}
.pd-add svg { width: 22px; height: 22px; }
.pd-add[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pd-add.done { background: linear-gradient(135deg, #5ecf8f, #2f9e5f); }
.pd-round {
  width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  transition: transform .2s ease;
}
.pd-round svg { width: 24px; height: 24px; }
.pd-round.heart { background: var(--pink-tint); color: var(--pink); }
.pd-round.heart.is-liked svg { fill: currentColor; }
.pd-round.smile { background: #fff3d1; color: #d99a12; }
.pd-round:hover { transform: translateY(-3px) scale(1.05); }

.pd-perks { display: flex; gap: 44px; margin-top: 42px; flex-wrap: wrap; }
.pd-perk { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pd-perk .ico { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; }
.pd-perk .ico svg { width: 25px; height: 25px; }
.pd-perk span:last-child {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--muted);
}

.pd-react { display: flex; align-items: center; gap: 16px; margin-top: 42px; flex-wrap: wrap; }
.pd-react-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
}
.joy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.joy {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border-radius: 16px; padding: 9px 13px;
  box-shadow: var(--shadow-sm); font-size: 19px; line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.joy:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.joy .n { font-size: 12px; font-weight: 700; color: var(--muted); font-family: var(--ui); }
.joy.has { background: #fffaf0; }
.joy.pop { transform: scale(1.22) translateY(-4px); }

/* ---- user stories ---- */
.stories-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; margin-bottom: 44px;
}
.stories-head h2 {
  font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -.5px; text-transform: uppercase; color: var(--ink);
}
.stories-head h2 span { color: var(--blue); }
.stories-head p { font-family: var(--soft); font-weight: 500; font-style: italic; color: var(--muted); margin-top: 10px; }
.joy-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border-radius: 22px; padding: 18px 24px;
  box-shadow: var(--shadow-md);
}
.joy-card span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--muted);
}
.joy-card b {
  display: block; margin-top: 4px;
  font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--blue);
}
/* The no-reviews state is a sentence, so it cannot sit at 27px. */
.joy-card b.joy-empty {
  font-family: var(--soft); font-size: 15px; font-weight: 600; color: var(--muted);
}
.joy-star {
  width: 50px; height: 50px; border-radius: 16px; flex-shrink: 0;
  background: #fff3d1; color: #f6b73c;
  display: grid; place-items: center; font-size: 24px;
}

.stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.stories-grid > * { min-width: 0; }
.tale-card {
  background: var(--surface); border-radius: 26px; padding: 32px;
  box-shadow: var(--shadow-md);
}
.tale-card h3 {
  font-weight: 800; font-size: 23px; letter-spacing: -.3px;
  text-transform: uppercase; color: var(--ink);
}
.tale-card h3 span { color: var(--pink); }
.star-picker { display: flex; gap: 11px; margin: 22px 0; }
.star-picker .pick {
  width: 48px; height: 48px; border-radius: 15px;
  background: #f1f3f7; color: #cfd5df; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.star-picker .pick.on { background: #ffd93d; color: #fff; }
.star-picker .pick:hover { transform: translateY(-3px); }

.tale-input { position: relative; }
.tale-input textarea {
  width: 100%; resize: vertical; min-height: 118px;
  border: 1.5px solid var(--line); border-radius: 20px;
  padding: 18px 70px 18px 20px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: #fbfcfe; outline: none;
}
.tale-input textarea:focus { border-color: var(--blue); background: #fff; }
.tale-input textarea::placeholder { color: #b6bcc7; }
.tale-send {
  position: absolute; right: 14px; bottom: 14px;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  box-shadow: 0 8px 20px rgba(255, 61, 110, .35);
  transition: transform .2s ease;
}
.tale-send svg { width: 20px; height: 20px; }
.tale-send:hover { transform: translateY(-2px) scale(1.05); }
.tale-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); min-height: 20px; }

.reviews-list { display: flex; flex-direction: column; gap: 16px; }
.reviews-empty {
  border: 2px dashed #dfe4ec; border-radius: 26px;
  padding: 70px 28px; text-align: center; color: #c2c9d4;
}
.reviews-empty svg { width: 54px; height: 54px; margin-bottom: 18px; }
.reviews-empty p {
  font-family: var(--soft);
  font-style: italic; font-size: 19px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #c2c9d4;
}
.review {
  background: var(--surface); border-radius: 22px; padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.review-when { font-size: 12px; color: var(--muted); }
.review p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }

@media (max-width: 1000px) {
  .pd-grid { grid-template-columns: 1fr; gap: 38px; }
  .stories-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pd-wrap { padding-top: 28px; }
  .pd-main { padding: 16px; border-radius: 22px; }
  .pd-thumb { width: 66px; height: 66px; border-radius: 14px; }
  .pd-perks { gap: 24px; justify-content: space-between; }
  .pd-add { min-width: 0; padding: 18px 24px; font-size: 16px; }
  .pd-round { width: 54px; height: 54px; }
  .tale-card { padding: 22px; }
  .star-picker .pick { width: 42px; height: 42px; }
}

/* ============ Magic Bag (cart) ============ */
.bag-bg {
  background: linear-gradient(125deg, #e4d6f6 0%, #eddff2 38%, #f8e7ea 68%, #fdefe0 100%);
  padding: 62px 0 130px;
}
.bag-title { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 42px; }
.bag-title h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 5.2vw, 64px); line-height: 1;
  letter-spacing: -1px; color: var(--ink);
}
.bag-count {
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: #9b93ab;
}

.bag-layout { display: grid; grid-template-columns: 1.75fr 1fr; gap: 40px; align-items: start; }
.bag-layout > * { min-width: 0; }
.bag-lines { display: flex; flex-direction: column; gap: 22px; }

.bag-line {
  display: grid; grid-template-columns: 110px 1fr auto auto; gap: 26px; align-items: center;
  background: #fff; border-radius: 30px; padding: 22px 30px;
  box-shadow: 0 18px 40px rgba(90, 70, 120, .10);
}
.bag-thumb {
  width: 110px; height: 110px; border-radius: 22px; overflow: hidden;
  background: #f7f8fa; display: grid; place-items: center;
}
.bag-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.bag-name {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  color: var(--ink); line-height: 1.25; display: block;
}
.bag-price {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  color: var(--blue); margin-top: 4px;
}
.bag-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bag-pill {
  border-radius: 999px; padding: 6px 15px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.bag-remove {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #b9bfcb;
  transition: background .2s ease, color .2s ease;
}
.bag-remove svg { width: 20px; height: 20px; }
.bag-remove:hover { background: var(--pink-tint); color: var(--pink); }

.bag-sum {
  background: #fff; border-radius: 34px; padding: 40px 38px 34px;
  box-shadow: 0 22px 50px rgba(90, 70, 120, .12);
  position: sticky; top: calc(var(--header-h) + 22px);
}
.bag-sum h2 {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
  margin-bottom: 30px;
}
.bag-sum .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 13px 0;
}
.bag-sum .row dt {
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: #9b93ab;
}
.bag-sum .row dd { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .5px; }
.bag-sum .row dd.free { color: #2f9e5f; font-weight: 700; letter-spacing: 1.4px; }
.bag-sum .row.total { margin-top: 26px; }
.bag-sum .row.total dt { font-size: 13px; letter-spacing: 1.8px; color: #8a8296; }
.bag-sum .row.total dd {
  font-family: var(--display); font-weight: 700;
  font-size: 34px; color: var(--pink); letter-spacing: 0;
}
.bag-checkout {
  width: 100%; margin-top: 26px; padding: 22px 30px;
  font-size: 17px; border-radius: 999px; line-height: 1.25;
}
.bag-checkout svg { width: 20px; height: 20px; }
.bag-guarantee {
  display: block; text-align: center; margin-top: 36px;
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: #c3bccd;
}

.bag-empty {
  background: #fff; border-radius: 34px; padding: 80px 30px;
  text-align: center; box-shadow: 0 18px 40px rgba(90, 70, 120, .10);
}
.bag-empty svg { width: 60px; height: 60px; color: #d9d3e4; margin-bottom: 20px; }
.bag-empty p { color: var(--muted); font-size: 17px; margin-bottom: 24px; }

@media (max-width: 950px) {
  .bag-layout { grid-template-columns: 1fr; gap: 26px; }
  .bag-sum { position: static; }
}
@media (max-width: 700px) {
  .bag-bg { padding: 36px 0 80px; }
  .bag-line {
    grid-template-columns: 84px 1fr; gap: 16px;
    padding: 18px; border-radius: 24px;
  }
  .bag-thumb { width: 84px; height: 84px; border-radius: 18px; }
  .bag-name { font-size: 18px; }
  .bag-line .stepper, .bag-remove { grid-column: 1 / -1; }
  .bag-line .stepper { justify-self: start; }
  .bag-remove { justify-self: end; margin-top: -44px; }
  .bag-sum { padding: 28px 22px; border-radius: 26px; }
  .bag-sum h2 { font-size: 24px; }
}

/* Magic List reuses the bag layout, with an Add to Bag button in place
   of the quantity stepper. */
.fav-line { grid-template-columns: 110px 1fr auto auto; }
.fav-add { padding: 14px 26px; font-size: 14.5px; white-space: nowrap; }
.fav-add.done { background: linear-gradient(135deg, #5ecf8f, #2f9e5f); }
.bag-sum .btn.wide { width: 100%; }

@media (max-width: 700px) {
  .fav-line { grid-template-columns: 84px 1fr; }
  .fav-line .fav-add { grid-column: 1 / -1; width: 100%; }
  .fav-line .bag-remove { justify-self: end; margin-top: -52px; }
}

/* ============ Magic List: empty vault ============ */
/* Same lavender-to-peach wash as the bag, with the site's check showing
   through it. */
.vault-bg {
  background-image:
    repeating-conic-gradient(rgba(255, 255, 255, .5) 0% 25%, rgba(255, 255, 255, 0) 0% 50%),
    linear-gradient(125deg, #e4d6f6 0%, #eddff2 38%, #f8e7ea 68%, #fdefe0 100%);
  background-size: 30px 30px, auto;
}

.vault-head { text-align: center; padding: 34px 0 4px; }
.vault-badge {
  width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 26px;
  background: #fff; display: grid; place-items: center; color: var(--pink);
  box-shadow: 0 14px 40px rgba(255, 61, 110, .22);
}
.vault-badge svg { width: 46px; height: 46px; fill: currentColor; }
.vault-head h1 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1;
  letter-spacing: -.5px; color: var(--ink);
}
.vault-head h1 .pink { color: var(--pink); }
.vault-sub {
  font-family: var(--soft); font-weight: 500; font-style: italic;
  font-size: 17px; color: var(--muted); margin-top: 12px;
}

.vault-card {
  background: #fff; border-radius: 40px;
  max-width: 730px; margin: 62px auto 0;
  padding: 62px 44px 66px; text-align: center;
  box-shadow: 0 24px 60px rgba(90, 70, 120, .10);
}
.vault-ico {
  width: 142px; height: 142px; border-radius: 50%; margin: 0 auto 34px;
  background: #f4f5f8; display: grid; place-items: center; color: #b9bfcb;
}
.vault-ico svg { width: 54px; height: 54px; }
.vault-card h2 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(25px, 3vw, 34px); color: var(--ink); letter-spacing: -.3px;
}
.vault-card p {
  color: var(--muted); font-size: 16.5px; line-height: 1.7; margin-top: 18px;
}
.vault-card .btn { margin-top: 34px; padding: 18px 40px; font-size: 16px; }

@media (max-width: 700px) {
  .vault-badge { width: 88px; height: 88px; }
  .vault-badge svg { width: 36px; height: 36px; }
  .vault-card { padding: 40px 22px 46px; border-radius: 30px; margin-top: 40px; }
  .vault-ico { width: 108px; height: 108px; }
  .vault-ico svg { width: 42px; height: 42px; }
}

/* Saved cards on the Magic List: filled heart, pink price. */
#fav-body { margin-top: 54px; }
.fav-like.is-liked { background: var(--pink); color: #fff; }
.fav-like.is-liked svg { fill: currentColor; }
#fav-body .fav-foot .price { color: var(--pink); }

/* A figure nobody has confirmed yet: visible, but clearly not a promise. */
.policy-tbc { color: var(--muted); font-style: italic; }

/* ============ Profile ============ */
.pf-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--surface); border-radius: 30px;
  padding: 30px 34px; box-shadow: var(--shadow-md); margin-bottom: 26px;
}
.pf-avatar {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  background: var(--pink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 30px; font-weight: 700;
}
.pf-head h1 { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--ink); margin: 0; }
.pf-email { font-family: var(--soft); font-size: 14.5px; color: var(--muted); margin: 5px 0 0; }
.pf-joined { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; }
.pf-signout { margin-left: auto; }

.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }
.pf-grid > * { min-width: 0; }
.pf-tile {
  background: var(--surface); border-radius: 24px; padding: 26px 28px;
  box-shadow: var(--shadow-sm); text-decoration: none; display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pf-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pf-tile-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
}
.pf-tile-value {
  display: block; margin-top: 8px;
  font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink);
}

@media (max-width: 800px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-signout { margin-left: 0; width: 100%; }
}

/* ============ Checkout ============ */
.co-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.co-layout > * { min-width: 0; }
.co-form {
  background: #fff; border-radius: 34px; padding: 38px 36px;
  box-shadow: 0 22px 50px rgba(90, 70, 120, .10);
}
.co-form h2 {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  color: var(--ink); margin-bottom: 24px;
}
.co-lines { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.co-line { display: flex; align-items: center; gap: 14px; }
.co-line img {
  width: 54px; height: 54px; border-radius: 14px; object-fit: contain;
  background: #f7f8fa; padding: 5px; flex-shrink: 0;
}
.co-line-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.co-line-qty { font-size: 12px; color: var(--muted); margin-top: 2px; }
.co-line-total { margin-left: auto; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.co-divider { height: 1px; background: var(--line); margin: 20px 0 4px; }

/* ============ Product page: age beside the category ============ */
.pd-age {
  border-radius: 999px; padding: 8px 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; background: #eef0f4; color: var(--ink-soft);
}

@media (max-width: 900px) {
  .co-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .co-form { padding: 26px 20px; border-radius: 26px; }
}

/* ============ Cart, checkout and forms ============ */
.cart-layout { display: grid; grid-template-columns: 1.65fr 1fr; gap: 30px; align-items: start; }
.cart-layout > * { min-width: 0; }

.cart-lines { display: flex; flex-direction: column; gap: 16px; }
.cart-line {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center;
  background: var(--surface); border-radius: 24px; padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}
.cart-thumb {
  width: 96px; height: 96px; border-radius: 18px;
  background: #f7f8fa; display: grid; place-items: center; overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-line-name { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cart-line-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 6px;
}
.cart-line-each { font-size: 13px; color: var(--muted); margin-top: 6px; }
.cart-line-right { display: flex; align-items: center; gap: 20px; }
.cart-line-total {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  color: var(--ink); min-width: 86px; text-align: right;
}
.cart-remove {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  background: #f6f8fa; transition: background .2s ease, color .2s ease;
}
.cart-remove svg { width: 17px; height: 17px; }
.cart-remove:hover { background: var(--pink-tint); color: var(--pink); }

.stepper.sm { padding: 5px; }
.stepper.sm button { width: 34px; height: 34px; font-size: 18px; }
.stepper.sm span { min-width: 30px; font-size: 15px; }

.cart-sum {
  background: var(--surface); border-radius: 26px; padding: 30px;
  box-shadow: var(--shadow-md); position: sticky; top: calc(var(--header-h) + 20px);
}
.cart-sum h3 {
  font-weight: 800; font-size: 19px; letter-spacing: -.2px;
  text-transform: uppercase; color: var(--ink); margin-bottom: 20px;
}
.cart-sum .row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 15px; color: var(--ink-soft); padding: 9px 0;
}
.cart-sum .row.total {
  border-top: 1.5px solid var(--line); margin-top: 10px; padding-top: 18px;
  font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--ink);
}
.cart-sum .btn { width: 100%; margin-top: 22px; }
.cart-sum .keep { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: var(--muted); }
.cart-sum .keep:hover { color: var(--pink); }

/* ---- forms (checkout, contact) ---- */
.form-card {
  background: var(--surface); border-radius: 26px; padding: 34px;
  box-shadow: var(--shadow-md); max-width: 760px; margin: 0 auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 17px; background: #fbfcfe; outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { border-color: var(--blue); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #b6bcc7; }
.form-note { margin-top: 16px; font-size: 14px; color: var(--muted); min-height: 20px; }

/* ---- about ---- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.about-grid > * { min-width: 0; }
.about-art {
  border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-md);
  background: var(--surface);
}
.about-art img { width: 100%; display: block; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-sum { position: static; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .cart-line { grid-template-columns: 72px 1fr; gap: 14px; padding: 14px; }
  .cart-thumb { width: 72px; height: 72px; border-radius: 15px; }
  .cart-line-right { grid-column: 1 / -1; justify-content: space-between; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .cart-sum { padding: 24px 20px; }
}

/* ============ Inner pages (faq / shipping / returns / admin) ============ */
.page-head { text-align: center; padding: 64px 0 12px; }
.page-head h1 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12;
  letter-spacing: -.5px; text-transform: uppercase;
  color: var(--ink); margin-top: 18px;
}
.page-head h1 .pink { color: var(--pink); }
.page-head p { margin: 14px auto 0; max-width: 56ch; color: var(--muted); }

.prose { max-width: 780px; margin: 0 auto; }
.prose h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 24px; color: var(--ink); margin: 38px 0 10px;
}
.prose p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 12px; }
.prose ul { margin: 0 0 14px 20px; color: var(--ink-soft); font-size: 15.5px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--pink); font-weight: 600; }

/* Draft banner — these pages carry placeholder policy values */
.notice {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff7db; border: 1.5px solid #f4d97a;
  border-radius: 18px; padding: 17px 20px;
  font-size: 14.5px; color: #7a5c11; margin-bottom: 30px;
}
.notice svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px; }
.notice b { display: block; margin-bottom: 3px; color: #5e4608; }

.info-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.info-table th, .info-table td {
  text-align: left; padding: 14px 16px; font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.info-table th { color: var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; }
.info-table td { color: var(--ink-soft); }
.info-table tr:last-child td { border-bottom: none; }

.faq-list { display: flex; flex-direction: column; gap: 13px; }
.faq-item {
  background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px 24px; font-weight: 600; font-size: 16px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 24px; color: var(--pink); line-height: 1; flex-shrink: 0;
}
.faq-item[open] summary::after { content: "‘2"; }
.faq-item p { padding: 0 24px 22px; color: var(--muted); font-size: 15px; margin: 0; }

.auth-wrap { display: grid; place-items: center; padding: 30px 0 20px; }
.auth-card {
  width: min(430px, 100%); background: var(--surface);
  border-radius: 28px; padding: 40px 34px;
  box-shadow: var(--shadow-lg); text-align: center;
}
.auth-card h1 { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--ink); }
.auth-card > p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; text-align: left; }
.auth-form label { font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink); }
.auth-form input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 16px; background: #fbfcfe; outline: none;
}
.auth-form input:focus { border-color: var(--blue); background: #fff; }
.auth-form .btn { margin-top: 6px; }
.auth-note { margin-top: 18px; font-size: 13px; color: var(--muted); min-height: 20px; }
.auth-note.bad { color: var(--pink); }
.auth-note.ok  { color: #1f9d55; }
/* The standing caveat under the Admin Portal heading. Quieter than the
   card's own intro line, since it is for whoever runs the shop. */
.auth-card > p.auth-sub {
  font-family: var(--soft); font-size: 13px; line-height: 1.55;
  color: var(--muted); margin-top: 14px;
}
.auth-card > p.auth-sub code {
  font-size: 12px; background: #f2f3f7; border-radius: 6px; padding: 1px 5px;
}

@media (max-width: 700px) {
  .page-head { padding-top: 40px; }
  .auth-card { padding: 30px 22px; }
}

/* ============ Footer ============ */
.site-footer { background: #f1f7fe; margin-top: 0; }
.footer-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr;
  gap: 40px; padding: 74px 0 44px;
}
.footer-wordmark {
  display: inline-block;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 29px; line-height: 1; color: var(--coral); letter-spacing: .3px;
}
.footer-brand p {
  color: #6b7a8f; font-size: 15px; line-height: 1.65;
  margin-top: 18px; max-width: 34ch;
}
.footer-col h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.footer-col > a { display: block; color: #6b7a8f; font-size: 15px; padding: 10px 0; transition: color .2s ease; }
.footer-col > a:hover { color: var(--pink); }

.contact-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.contact-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: #6b7a8f; font-size: 15px; line-height: 1.5;
}
.contact-list svg { width: 19px; height: 19px; color: #f6942f; flex-shrink: 0; margin-top: 3px; }
.contact-list a { transition: color .2s ease; }
.contact-list a:hover { color: var(--pink); }

.footer-bottom {
  border-top: 1px solid #dce7f5; padding: 24px 0 30px;
  text-align: center; color: #93a1b5; font-size: 14px;
}

/* ============ Reveal on scroll ============ */
/* Hidden only when JS is running (home.js puts .js on <html>), so the
   page still shows everything if scripting is off or a script fails. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .logo-mark { animation: none; transform: rotate(-10deg); }
  .hero h1 .coral { animation: none; }
  #featured-grid .fav-foot .price { animation: none; }
  .avatars img { transition: none; }
  .avatars img:hover, .avatars img.is-moving { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .main-nav { gap: 22px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .fav-grid { grid-template-columns: repeat(2, 1fr); }
  .age-grid { grid-template-columns: repeat(2, 1fr); }
  .play-grid { columns: 2; }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding-block: 36px 24px; }
  .hero p.lede { max-width: 46ch; }
  .main-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 4px; background: #fff;
    padding: 14px 28px 22px; box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; }
  .main-nav a::after { display: none; }
  .nav-toggle { display: grid; }
  .icon-btn.sparkle, .icon-btn.wish { display: none; }
}
@media (max-width: 700px) {
  .container { padding-inline: 20px; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .btn-login { padding: 10px 18px; font-size: 14px; }
  .logo { gap: 9px; min-width: 0; }
  .logo-text { font-size: 22px; }
  .logo-mark { width: 38px; height: 38px; border-radius: 32%; }
  .logo-mark svg { width: 20px; height: 20px; }
  .icon-btn, .nav-toggle { width: 42px; height: 42px; }
  .section { padding: 66px 0; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fav-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .fav-card { padding: 9px; border-radius: 20px; }
  .fav-body { padding: 13px 6px 4px; }
  .fav-body h3 { font-size: 14.5px; }
  .fav-foot { padding-top: 16px; }
  .fav-foot .price { font-size: 15.5px; }
  .cart-fab { width: 38px; height: 38px; }
  .qv-panel { grid-template-columns: 1fr; border-radius: 22px; }
  .qv-media { aspect-ratio: 3 / 2; }
  .qv-body { padding: 24px 20px 28px; }
  .quick-view { display: none; }
  .age-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .age-plate { left: 10px; right: 10px; bottom: 11px; padding: 11px 12px; border-radius: 13px; }
  .age-plate b { font-size: 19px; }
  .age-go { width: 34px; height: 34px; top: 10px; right: 10px; font-size: 9.5px; }
  .head-row { margin-bottom: 34px; }
  .head-row .section-head { text-align: center; }
  .head-row > .btn { margin: 0 auto; }
  .play-grid { columns: 2; column-gap: 14px; }
  .play-card { margin-bottom: 14px; border-radius: 15px; padding: 8px; }
  .play-cap { padding: 11px 4px 4px; }
  .play-cap b { font-size: 14px; }
  .perk-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .perk { border-radius: 22px; padding: 22px 12px 20px; }
  .perk b { font-size: 16px; }
  .perk .ico { width: 50px; height: 50px; margin-bottom: 16px; }
  .hero-social { gap: 11px; margin-top: 40px; }
  .avatars img { width: 40px; height: 40px; }
  .joined { font-size: 11.5px; letter-spacing: 1px; }
  .joined-spark { display: none; }
  .hero-cta { gap: 12px; }
  .hero-wave { margin-top: -30px; }
  .hero-wave svg { height: 70px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ Order placed, and My Orders ============
   Both screens are new with the orders work. They borrow the bag
   page's background and card shapes so a customer does not feel
   they have been handed off to a different site at the one moment
   they are most likely to be nervous. */

.co-done {
  max-width: 620px; margin: 0 auto 60px; padding: 44px 40px;
  background: var(--surface); border-radius: 26px;
  box-shadow: var(--shadow-md); text-align: center;
}
.co-done-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%; background: #d7f5e0; color: #178542;
}
.co-done-mark svg { width: 30px; height: 30px; }
.co-done h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 30px; color: var(--ink); margin: 0;
}
.co-done-lede {
  font-family: var(--soft); font-size: 15.5px; color: var(--muted);
  margin: 10px 0 18px;
}
.co-done-ref {
  font-family: var(--ui); font-weight: 700; font-size: 22px;
  letter-spacing: 1.6px; color: var(--pink);
  padding: 12px 18px; border-radius: 14px;
  background: var(--pink-tint); display: inline-block; margin: 0;
}
.co-done-facts {
  display: flex; justify-content: center; gap: 40px;
  margin: 26px 0 28px; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.co-done-facts dt {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}
.co-done-facts dd {
  margin: 6px 0 0; font-family: var(--ui); font-weight: 700;
  font-size: 17px; color: var(--ink);
}
.co-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mo-note {
  max-width: 720px; margin: 0 0 26px; padding: 16px 20px;
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  font-family: var(--soft); font-size: 15px; color: var(--ink-soft);
}
.mo-note a { color: var(--pink); font-weight: 600; }

.mo-card {
  background: var(--surface); border-radius: 22px; padding: 26px 28px;
  box-shadow: var(--shadow-md); margin-bottom: 24px;
}
.mo-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.mo-ref {
  margin: 0; font-family: var(--ui); font-weight: 700; font-size: 17px;
  letter-spacing: 1.2px; color: var(--ink);
}
.mo-when {
  margin: 4px 0 0; font-family: var(--soft); font-size: 13.5px; color: var(--muted);
}
.mo-pill {
  padding: 7px 15px; border-radius: 999px;
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
}

/* Four steps with the line drawn behind them. The line is a
   pseudo-element on the list rather than a border on each step, so
   it does not break where a step wraps on a narrow screen. */
.mo-track {
  display: flex; list-style: none; margin: 24px 0; padding: 0;
  position: relative;
}
.mo-track::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 6px;
  height: 2px; background: var(--line);
}
.mo-track li {
  flex: 1; text-align: center; position: relative;
}
.mo-track-dot {
  display: block; width: 14px; height: 14px; margin: 0 auto;
  border-radius: 50%; background: #e3e6ee; position: relative; z-index: 1;
}
.mo-track li.is-done .mo-track-dot { background: var(--pink); }
.mo-track-label {
  display: block; margin-top: 8px;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
}
.mo-track li.is-done .mo-track-label { color: var(--ink); }

.mo-lines { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.mo-line { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.mo-line img {
  width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex: none;
}
.mo-line > div { flex: 1; min-width: 0; }
.mo-line-name {
  margin: 0; font-family: var(--ui); font-weight: 600; font-size: 14.5px;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mo-line-qty { margin: 3px 0 0; font-family: var(--soft); font-size: 13px; color: var(--muted); }
.mo-line-total { font-family: var(--ui); font-weight: 700; font-size: 14.5px; color: var(--ink); }

.mo-totals { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.mo-totals > div {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-family: var(--ui); font-size: 14px; color: var(--muted);
}
.mo-totals dt, .mo-totals dd { margin: 0; }
.mo-totals .is-total { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.mo-ship {
  margin: 14px 0 0; font-family: var(--soft); font-size: 13px; color: var(--muted);
}

@media (max-width: 640px) {
  .co-done { padding: 32px 22px; }
  .co-done-facts { gap: 26px; }
  .mo-card { padding: 20px 18px; }
  .mo-track-label { font-size: 9.5px; letter-spacing: .8px; }
}

/* ============ Account page panels ============ */
.pf-panel {
  background: var(--surface); border-radius: 22px; padding: 28px 30px;
  box-shadow: var(--shadow-md); margin-top: 24px;
}
.pf-panel h2 {
  margin: 0 0 18px; font-family: var(--display); font-weight: 600;
  font-size: 21px; color: var(--ink);
}
.pf-form { max-width: 460px; }
.pf-label {
  display: block; margin: 14px 0 6px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.pf-label:first-child { margin-top: 0; }
.pf-input {
  width: 100%; padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fafbfd;
  font-family: var(--ui); font-size: 15px; color: var(--ink);
}
.pf-input:focus { outline: none; border-color: var(--blue); background: #fff; }
/* A locked field has to look locked, or it reads as one that simply
   refuses to work. */
.pf-input:disabled { color: var(--muted); cursor: not-allowed; }
.pf-hint {
  margin: 8px 0 0; font-family: var(--soft); font-size: 13px; color: var(--muted);
}
.pf-form-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pf-note {
  margin: 14px 0 0; min-height: 20px;
  font-family: var(--ui); font-size: 13.5px; color: var(--ink-soft);
}
@media (max-width: 640px) {
  .pf-panel { padding: 22px 20px; }
  .pf-form-actions .btn { width: 100%; justify-content: center; }
}

/* ============ 404 ============ */
.nf-wrap { max-width: 560px; margin: 40px auto 80px; text-align: center; }
.nf-code {
  font-family: var(--display); font-weight: 600; font-size: 84px;
  line-height: 1; margin: 0; color: var(--pink); letter-spacing: -2px;
}
.nf-wrap h1 {
  font-family: var(--ui); font-weight: 800; font-size: 30px;
  color: var(--ink); margin: 14px 0 0;
}
.nf-lede {
  font-family: var(--soft); font-size: 16px; color: var(--muted);
  margin: 14px 0 28px;
}
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ Shop listing: the tally and "show more" ============ */
.listing-more {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: 44px;
}
.listing-tally {
  margin: 0; font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}

/* A review now carries a name, because it is public and somebody
   wrote it. */
.review-who {
  font-family: var(--ui); font-weight: 600; font-size: 13px;
  color: var(--ink); margin-right: auto;
}
/* Shown to anyone not signed in, in place of a form that would only
   be refused. */
.tale-gate {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--pink-tint);
  font-family: var(--soft); font-size: 14px; color: var(--ink-soft);
}
.tale-gate a { color: var(--pink); font-weight: 600; }

/* ============================================================
   The header on a phone
   ------------------------------------------------------------
   Signed in as an admin the bar carried the most it ever will -
   Portal, the bag, the shield, sign out and the menu - and the
   whole lot together was wider than a phone screen. A header
   wider than the screen drags the document with it, which is the
   strip of empty space that appears down the right-hand side.

   Portal moves into the menu instead. It is the only text button
   of the five, so it costs the most room, and the menu is where a
   link like that belongs anyway.
   ============================================================ */

/* The menu entry. Hidden on desktop, where the header has its own
   Portal button and plenty of room for it. js/auth.js shows and
   hides both by the same class, so an admin gets one or the other
   and nobody else gets either. */
.nav-portal { display: none; }

/* Nothing in the header may make the page wider than the screen.
   The buttons keep their size - a 34px circle has nothing to give
   up - and the wordmark yields instead, shortening rather than
   pushing the bar off the edge. */
.logo { min-width: 0; flex-shrink: 1; }
.logo-mark { flex-shrink: 0; }
.logo-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.header-actions { margin-left: auto; flex-shrink: 0; }

@media (max-width: 900px) {
  /* Wherever the menu button exists, Portal lives inside it. */
  .btn-portal { display: none; }
  .main-nav .nav-portal { display: block; }
}

/* Smaller, so four things and a wordmark sit comfortably rather
   than only just fitting. */
@media (max-width: 560px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 7px; }
  .logo { gap: 8px; }
  .logo-text { font-size: 20px; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-mark svg { width: 19px; height: 19px; }
  .icon-btn, .nav-toggle { width: 38px; height: 38px; }
  .icon-btn svg, .nav-toggle svg { width: 18px; height: 18px; }
  .btn-login { padding: 9px 15px; font-size: 13.5px; }
  .cart-badge, .wish-badge { min-width: 17px; height: 17px; font-size: 10px; }
}

@media (max-width: 400px) {
  .header-inner { gap: 6px; }
  .header-actions { gap: 5px; }
  .logo-text { font-size: 18px; }
  .logo-mark { width: 33px; height: 33px; }
  .icon-btn, .nav-toggle { width: 34px; height: 34px; }
  .icon-btn svg, .nav-toggle svg { width: 16px; height: 16px; }
  .btn-login { padding: 8px 13px; font-size: 13px; }
}