/* ──────────────────────────────────────────────
   Wish List · structure
   Layout, components and behaviour, with no brand values in it. Pair this
   with exactly one theme file, which supplies colour, type and button shape.
   The shopping surface borrows Giftly's shape: soft cards, big warm artwork,
   price up front, everything on a pill.
   ────────────────────────────────────────────── */

:root{
  /* Structure only. Brand colour, type and button shape live in a theme file,
     so a partner skin is one <link> swap. See theme-angels.css. */

  /* Type scale. Everything on the page picks from these eight steps. */
  --fs-2xs:11.5px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:15px;
  --fs-md:17px;    --fs-lg:20px;   --fs-xl:24px;   --fs-2xl:28px;

  /* Spacing scale, used for section rhythm and component padding. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:64px;

  /* Theme-overridable shape and weight. */
  --r-sm:11px; --r:18px; --r-lg:22px; --r-pill:50px;
  --btn-radius:var(--r-pill); --btn-weight:650; --btn-transform:none; --btn-tracking:0;
  --h1-weight:650; --h1-tracking:-.03em; --h1-leading:1.16;
  --font-sans:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --sh:0 1px 2px rgba(29,27,22,.06), 0 1px 3px rgba(29,27,22,.04);
  --sh-md:0 10px 30px -12px rgba(88,76,45,.28);
  --sh-lg:0 30px 70px -24px rgba(88,76,45,.38);
}

*{box-sizing:border-box}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--body); margin:0;
  font-size:var(--fs-md); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{color:var(--ink); font-weight:650; letter-spacing:-.02em; line-height:1.16; margin:0}
h1{font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:var(--h1-weight); letter-spacing:var(--h1-tracking); line-height:var(--h1-leading)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
a{color:var(--ink); text-decoration:none}
a.link{color:var(--brand-deep); font-weight:600}
a.link:hover{color:var(--ink)}

/* Type utilities. Nothing on the page should set a font-size inline. */
.t-2xs{font-size:var(--fs-2xs)} .t-xs{font-size:var(--fs-xs)} .t-sm{font-size:var(--fs-sm)}
.t-base{font-size:var(--fs-base)} .t-md{font-size:var(--fs-md)} .t-lg{font-size:var(--fs-lg)}
.t-xl{font-size:var(--fs-xl)} .t-2xl{font-size:var(--fs-2xl)}
.emoji-lg{font-size:40px; line-height:1}
.emoji-xl{font-size:52px; line-height:1}
.t-hero{font-size:clamp(2.1rem,4.8vw,3.2rem); letter-spacing:-.03em}
.w-600{font-weight:600} .w-700{font-weight:700}
.ink{color:var(--ink)} .c-green{color:var(--green)} .c-brand{color:var(--brand-deep)} .c-soft{color:var(--soft)}
.lede{font-size:var(--fs-md); color:var(--body); margin:0}

/* Spacing utilities for the handful of one-off gaps components cannot own. */
.mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.mb-1{margin-bottom:var(--s1)} .mb-2{margin-bottom:var(--s2)} .mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)} .mb-5{margin-bottom:var(--s5)} .mb-6{margin-bottom:var(--s6)}
.m-0{margin:0} .stack-tight > * + *{margin-top:var(--s2)}
.container{max-width:1180px; margin:0 auto; padding:0 22px}
.container-narrow{max-width:820px; margin:0 auto; padding:0 22px}
[hidden]{display:none !important}
.text-balance{text-wrap:balance}
.muted{color:var(--soft)}
.tiny{font-size:var(--fs-xs)}

/* ── Header ── */
.hdr{position:sticky; top:0; z-index:60; background:rgba(253,251,246,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex; align-items:center; gap:18px; padding:13px 0}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:40px; width:auto}
.brand-name{font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.05; font-size:var(--fs-base)}
.brand-name span{display:block; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-deep)}
.hdr-nav{margin-left:auto; display:flex; align-items:center; gap:6px}
.hdr-link{padding:9px 14px; border-radius:50px; font-size:var(--fs-base); font-weight:550; color:var(--body)}
.hdr-link:hover{background:var(--brand-wash); color:var(--ink)}

/* ── Buttons ── */
.btn{
  font-weight:var(--btn-weight); border-radius:var(--btn-radius); padding:11px 22px;
  font-size:var(--fs-base); text-transform:var(--btn-transform); letter-spacing:var(--btn-tracking);
  border:1.5px solid transparent; transition:.15s; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; gap:var(--s2); font-family:inherit;
}
.btn-xl{padding:15px 32px; font-size:var(--fs-md)}
.btn-sm{padding:7px 15px; font-size:var(--fs-sm)}
/* Primary is brand gold carrying ink, not white: 5.8:1 against the real
   Atlanta Angels value instead of a washed-out approximation of it. */
.btn-primary{background:var(--brand); color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover); color:var(--on-brand); box-shadow:0 12px 24px -12px rgba(162,144,96,.9)}
.btn-primary:disabled{background:var(--line); color:var(--faint); box-shadow:none; cursor:default}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#000; color:#fff}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand); background:var(--brand-wash)}
.btn:focus-visible,.chip:focus-visible,.fpill:focus-visible,.tile:focus-visible,
.kid-card:focus-visible,.card-pick:focus-visible,.tab:focus-visible{outline:none; box-shadow:var(--ring)}
.btn-plain{background:none; border:none; font:inherit; color:var(--soft); font-weight:600; cursor:pointer; padding:8px 12px; border-radius:50px}
.btn-plain:hover{color:var(--ink); background:var(--brand-wash)}
.btn-plain:focus-visible{outline:none; box-shadow:var(--ring)}
.btn-block{width:100%}

/* ── Cart button ── */
.cart-btn{position:relative; background:var(--ink); color:#fff; border:none; border-radius:50px; padding:10px 18px; font-weight:600; font-size:var(--fs-base); cursor:pointer; display:flex; align-items:center; gap:9px}
.cart-btn:hover{background:#000}
.cart-count{background:var(--accent); color:#fff; border-radius:50px; min-width:21px; height:21px; font-size:var(--fs-2xs); display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-weight:700}

/* ── Hero ── */
.hero{padding:56px 0 30px; background:radial-gradient(950px 420px at 50% -40%, #fbf1de 0%, transparent 62%)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.15rem); max-width:19ch; margin:0 auto 16px; text-align:center}
.hero p{font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:600px; margin:0 auto; text-align:center; color:var(--body)}
.hero-badge{display:flex; justify-content:center; margin-bottom:18px}
.hero-badge span{background:#fff; border:1px solid var(--line); border-radius:50px; padding:7px 17px; font-size:var(--fs-sm); font-weight:600; color:var(--brand-deep); box-shadow:var(--sh)}
.hero-stats{display:flex; justify-content:center; gap:34px; margin-top:26px; flex-wrap:wrap}
.hero-stat b{display:block; font-size:var(--fs-xl); color:var(--ink); font-weight:700; letter-spacing:-.02em}
.hero-stat span{font-size:var(--fs-xs); color:var(--soft)}

/* ── Tabs ── */
.tabs-wrap{position:sticky; top:59px; z-index:50; background:rgba(253,251,246,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none; border:none; font:inherit; font-size:var(--fs-base); font-weight:600; color:var(--soft); padding:15px 15px 13px; border-bottom:2.5px solid transparent; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:8px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); border-bottom-color:var(--brand)}
.tab .pill{background:var(--line-soft); color:var(--soft); border-radius:50px; font-size:var(--fs-2xs); padding:2px 8px; font-weight:700}
.tab.on .pill{background:var(--brand-wash); color:var(--brand-deep)}

/* ── Filter bar ── */
.filters{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:20px 0 4px}
.chip{background:#fff; border:1.5px solid var(--line); border-radius:50px; padding:8px 15px; font-size:var(--fs-sm); font-weight:550; color:var(--body); cursor:pointer; white-space:nowrap; font-family:inherit; transition:.14s}
.chip:hover{border-color:var(--brand); background:var(--brand-wash)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip-scroll{display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.chip-scroll::-webkit-scrollbar{display:none}

/* ── Filter dropdowns ── */
.fdrop{position:relative}
.fpill{
  display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:var(--fs-base); font-weight:550;
  background:#fff; border:1.5px solid var(--line); border-radius:50px; padding:9px 16px 9px 15px;
  color:var(--body); cursor:pointer; transition:.14s; white-space:nowrap;
}
.fpill:hover{border-color:var(--brand); background:var(--brand-wash)}
.fpill > i:first-child{font-size:var(--fs-xs); color:var(--faint)}
.fpill .caret{font-size:var(--fs-2xs); color:var(--faint); transition:transform .16s}
.fdrop.open .fpill{border-color:var(--ink); background:#fff; color:var(--ink)}
.fdrop.open .caret{transform:rotate(180deg)}
.fpill.on{background:var(--ink); border-color:var(--ink); color:#fff}
.fpill.on > i:first-child,.fpill.on .caret{color:rgba(255,255,255,.6)}

.fmenu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:55; min-width:236px;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-md);
  padding:7px; display:none;
}
.fdrop.open .fmenu{display:block}
.fopt{
  display:flex; align-items:center; gap:10px; width:100%; font:inherit; font-size:var(--fs-base);
  background:none; border:none; border-radius:10px; padding:9px 11px; color:var(--body);
  cursor:pointer; text-align:left;
}
.fopt:hover{background:var(--brand-wash); color:var(--ink)}
.fopt.on{color:var(--ink); font-weight:600}
.fopt span{flex:1; white-space:nowrap}
.fopt-ic{width:16px; color:var(--brand); font-size:var(--fs-xs)}
.fopt .tick{color:var(--brand-deep); font-size:var(--fs-xs)}

/* ── Section headers ── */
.sec{padding:34px 0 6px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px}
.sec-head h2{font-size:var(--fs-lg)}
.sec-head p{margin:5px 0 0; font-size:var(--fs-base); color:var(--soft)}
.sec-link{font-size:var(--fs-sm); font-weight:650; color:var(--brand-deep); white-space:nowrap; cursor:pointer}
.sec-link:hover{color:var(--ink)}

/* ── Tiles ── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:250px; gap:18px; overflow-x:auto; padding:4px 2px 18px; scroll-snap-type:x proximity; scrollbar-width:thin}
.rail > *{scroll-snap-align:start}

.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.16s; text-align:left; padding:0; font:inherit; cursor:pointer; width:100%}
.tile:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-edge)}
.art-wrap{position:relative}
.tile-art{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:56px; overflow:hidden}
.tile-art.has-photo{padding:0}
.tile-art img{width:100%; height:100%; object-fit:cover; display:block}
.art-wrap .cat-tag{position:absolute; left:11px; top:11px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); border-radius:50px; font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-deep); padding:4px 10px}
.art-wrap .claimed-tag{position:absolute; right:11px; top:11px; background:var(--green); color:#fff; border-radius:50px; font-size:var(--fs-2xs); font-weight:700; padding:4px 10px}
.tile.is-claimed .tile-art img{filter:grayscale(.65)}

/* Photo variants of the small art slots */
.icon.has-photo,.line-art.has-photo,.prod-art.has-photo{overflow:hidden; padding:0}
.icon.has-photo img,.line-art.has-photo img,.prod-art.has-photo img{width:100%; height:100%; object-fit:cover; display:block}
.tile-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:7px; flex:1}
.tile-name{font-weight:600; color:var(--ink); font-size:var(--fs-base); line-height:1.3}
.tile-for{font-size:var(--fs-xs); color:var(--soft); display:flex; align-items:center; gap:6px}
.tile-for .dot{width:20px; height:20px; border-radius:50px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:700; color:#fff; background:var(--brand)}
.tile-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px}
.price{font-weight:700; color:var(--ink); font-size:var(--fs-md); letter-spacing:-.02em}
.tile.is-claimed{opacity:.62}
.tile.is-claimed:hover{transform:none; box-shadow:none}
.add-btn{background:var(--brand-wash); color:var(--brand-deep); border:none; border-radius:var(--r-pill); width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-base); cursor:pointer; transition:.14s}
.add-btn:hover{background:var(--brand); color:var(--on-brand)}
.add-btn.in{background:var(--green); color:#fff}

.t1{background:linear-gradient(150deg,#fdeef1,#f8dce6)}
.t2{background:linear-gradient(150deg,#eef5fb,#dbe9f7)}
.t3{background:linear-gradient(150deg,#eef7ef,#d9eede)}
.t4{background:linear-gradient(150deg,#fdf3e3,#f8e6c8)}
.t5{background:linear-gradient(150deg,#f4eefb,#e6dbf6)}
.t6{background:linear-gradient(150deg,#eaf4f6,#d5e9ee)}
.t7{background:linear-gradient(150deg,#fdf0e8,#f9dfcd)}
.t8{background:linear-gradient(150deg,#f6f2ea,#eae2d2)}

.art-wrap .cart-tag{position:absolute; right:11px; top:11px; background:var(--brand); color:var(--on-brand); border-radius:50px; font-size:var(--fs-2xs); font-weight:700; padding:4px 10px}
.art-wrap .need-tag{position:absolute; right:11px; top:11px; background:var(--ink); color:#fff; border-radius:50px; font-size:var(--fs-2xs); font-weight:700; padding:4px 10px}
.prod-art{width:66px; height:66px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); flex:none}

/* ── Quantity stepper ── */
.stepper-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.stepper{display:flex; align-items:center; gap:2px; background:#fff; border:1.5px solid var(--line); border-radius:50px; padding:4px}
.step-btn{width:34px; height:34px; border-radius:50px; border:none; background:var(--brand-wash); color:var(--ink); font-size:var(--fs-xs); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.14s}
.step-btn:hover:not(:disabled){background:var(--ink); color:#fff}
.step-btn:disabled{background:transparent; color:var(--line); cursor:default}
.step-n{min-width:38px; text-align:center; font-weight:700; font-size:var(--fs-md); color:var(--ink)}

/* ── Category landing ── */
.cat-hero{background:radial-gradient(900px 400px at 20% -30%, #fbf1de 0%, transparent 62%); padding:22px 0 34px; border-bottom:1px solid var(--line-soft); margin-bottom:8px}
.cat-head{display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:end; margin-top:14px}
.cat-head h1{font-size:clamp(1.8rem,3.6vw,2.5rem); max-width:16ch; margin:10px 0 12px}
.cat-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--brand-deep)}
.cat-lede{font-size:var(--fs-md); margin:0; max-width:52ch}
.cat-cta{box-shadow:var(--sh-md)}
@media (max-width:820px){ .cat-head{grid-template-columns:1fr; gap:22px} }

/* ── Trust strip ── */
.trust{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px}
.trust span{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:50px; padding:8px 16px; font-size:var(--fs-sm); font-weight:550; color:var(--body); box-shadow:var(--sh)}
.trust i{color:var(--green)}

/* ── FAQ ── */
.faq{padding:66px 0; border-top:1px solid var(--line-soft); background:#fff; scroll-margin-top:112px}
.faq-list{margin-top:28px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-size:var(--fs-md); font-weight:600; color:var(--ink); line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:var(--fs-2xs); color:var(--brand);
  position:absolute; right:8px; top:23px; transition:transform .18s;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item summary:hover{color:var(--brand-deep)}
.faq-item p{margin:0 0 22px; padding-right:44px; font-size:var(--fs-base); color:var(--body); max-width:74ch}

/* ── Child cards ── */
.kid-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:13px; transition:.16s; cursor:pointer; text-align:left; font:inherit; width:100%}
.kid-card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-edge)}
.kid-top{display:flex; align-items:center; gap:13px}
.avatar{width:52px; height:52px; border-radius:50px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); font-weight:700; color:#fff; flex:none; letter-spacing:-.02em}
.kid-name{font-weight:650; color:var(--ink); font-size:var(--fs-md); line-height:1.2}
.kid-meta{font-size:var(--fs-sm); color:var(--soft)}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{background:var(--brand-wash); color:var(--brand-deep); border-radius:50px; font-size:var(--fs-xs); font-weight:600; padding:4px 11px}
.bar{height:7px; border-radius:50px; background:var(--line-soft); overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--brand-light),var(--brand)); border-radius:50px; transition:width .4s}
.bar.done i{background:var(--green)}
.fund-line{display:flex; justify-content:space-between; font-size:var(--fs-sm); font-weight:600; color:var(--soft)}
.fund-line b{color:var(--ink)}

/* ── Panels / callouts ── */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px}
.panel-warm{background:var(--brand-wash); border-color:var(--brand-edge)}
.panel-green{background:var(--green-bg); border-color:#cfe6da}
.note{display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-base); line-height:1.55}
.note i{color:var(--brand-deep); margin-top:3px; flex:none}

/* ── Why section ── */
.why{background:linear-gradient(180deg,#fff,var(--brand-wash)); border-top:1px solid var(--line-soft); margin-top:56px; padding:66px 0; scroll-margin-top:112px}
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:34px}
.why-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px}
.why-card i{font-size:var(--fs-lg); color:var(--brand-deep); background:var(--brand-wash); width:42px; height:42px; border-radius:50px; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.why-card h4{font-size:var(--fs-md); margin-bottom:8px}
.why-card p{margin:0; font-size:var(--fs-base); color:var(--body); line-height:1.55}
.flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:34px; counter-reset:s}
.flow-step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 18px 20px; position:relative}
.flow-step b{display:block; color:var(--ink); font-size:var(--fs-base); margin-bottom:5px}
.flow-step span{font-size:var(--fs-sm); color:var(--soft); line-height:1.5}
.flow-step::before{counter-increment:s; content:counter(s); position:absolute; top:-11px; left:18px; width:24px; height:24px; border-radius:50px; background:var(--ink); color:#fff; font-size:var(--fs-xs); font-weight:700; display:flex; align-items:center; justify-content:center}

/* ── Cart drawer ── */
.scrim{position:fixed; inset:0; background:rgba(29,27,22,.52); z-index:90; opacity:0; pointer-events:none; transition:.2s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg); z-index:95; box-shadow:var(--sh-lg); transform:translateX(102%); transition:transform .24s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer-hd{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.drawer-bd{flex:1; overflow-y:auto; padding:16px 20px}
.drawer-ft{border-top:1px solid var(--line); padding:18px 20px; background:#fff}
.x{background:none; border:none; font-size:var(--fs-lg); color:var(--soft); cursor:pointer; padding:6px 10px; border-radius:50px}
.x:hover{background:var(--line-soft); color:var(--ink)}
.line{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft)}
/* Lines cascade in behind the panel. `backwards` fill, never `both`: the
   hidden state only exists during the delay, so a line can never be left
   invisible if the animation does not run. */
.drawer.cascade .line{
  animation:drop-in .42s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}
.drawer.cascade .drawer-ft{animation:drop-in .4s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.16s}
@keyframes drop-in{
  from{opacity:0; transform:translateY(-14px) scale(.985)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .drawer.cascade .line,.drawer.cascade .drawer-ft{animation:none}
}
.line-art{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xl); flex:none}
.line-name{font-weight:600; color:var(--ink); font-size:var(--fs-base); line-height:1.3}
.line-sub{font-size:var(--fs-xs); color:var(--soft)}
.rm{background:none; border:none; color:var(--faint); font-size:var(--fs-xs); cursor:pointer; padding:0; font-weight:600}
.rm:hover{color:var(--brand-deep)}
.total-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px}
.total-row b{font-size:var(--fs-lg); color:var(--ink); letter-spacing:-.02em}

/* ── Modal ── */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:22px}
.modal.on{display:flex}
.modal .scrim{z-index:1}
.modal-box{background:var(--bg); border-radius:22px; z-index:2; width:min(640px,100%); max-height:88vh; overflow-y:auto; box-shadow:var(--sh-lg); position:relative}
.modal-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:22px 24px 0}
.modal-bd{padding:16px 24px 26px}

/* ── Forms ── */
label.f{display:block; font-size:var(--fs-sm); font-weight:650; color:var(--ink); margin-bottom:6px}
.hint{font-size:var(--fs-xs); color:var(--soft); margin:5px 0 0}
input.i, select.i, textarea.i{
  width:100%; font:inherit; font-size:var(--fs-base); color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; transition:.14s;
}
input.i:focus, select.i:focus, textarea.i:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(162,144,96,.15)}
.field{margin-bottom:18px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.row2>*,.row3>*{min-width:0}

/* ── Caregiver stepper ── */
.steps{display:flex; justify-content:center; gap:8px; padding:22px 0 6px; overflow-x:auto; scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex; align-items:center; gap:9px; font-size:var(--fs-sm); font-weight:600; color:var(--faint); white-space:nowrap; padding:7px 14px 7px 8px; border-radius:50px}
.step .n{width:24px; height:24px; border-radius:50px; background:var(--line-soft); color:var(--faint); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; flex:none}
.step.on{background:var(--ink); color:#fff}
.step.on .n{background:var(--brand); color:var(--on-brand)}
.step.done{color:var(--green)}
.step.done .n{background:var(--green); color:#fff}

/* A caregiver's link is a reference, not a checkout button, so it reads as a
   footnote rather than an action. */
.item-link{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-2xs); font-weight:600; color:var(--brand-deep); margin-top:3px}
.item-link i{font-size:var(--fs-2xs)}
.item-link:hover{color:var(--ink)}
.item-link .muted{font-weight:500}

/* ── Caregiver intake ── */
.form-card{max-width:760px; margin-left:auto; margin-right:auto}
.add-row{display:grid; grid-template-columns:1fr 180px; gap:var(--s3); align-items:start}
.list-divider{border-top:1px solid var(--line-soft); margin:var(--s5) 0 var(--s4)}
.picked-row{display:flex; align-items:center; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--line-soft)}
.picked-row:last-of-type{border-bottom:none}
.ml-3{margin-left:var(--s3)}
@media (max-width:560px){ .add-row{grid-template-columns:1fr} }

/* ── Caregiver step header ── */
.step-header{position:relative; text-align:center; padding:46px 0 22px; max-width:680px; margin:0 auto}
.step-header h1{font-size:clamp(1.6rem,3.4vw,2.1rem); margin:0 0 10px}
.step-lede{color:var(--soft); margin:0 auto; max-width:56ch; font-size:var(--fs-base)}
.step-back{position:absolute; left:0; top:4px}
@media (max-width:760px){
  .step-header{padding-top:10px}
  .step-back{position:static; display:inline-flex; margin-bottom:10px}
}

/* ── Lists step controls ── */
.list-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:2px 0 0}
.list-controls .push{margin-left:auto}
.chip-div{flex:none; width:1px; align-self:stretch; background:var(--line); margin:4px 3px}
.list-controls .chip-scroll{padding-bottom:0}

/* ── Add-your-own, docked above the list ── */
.add-own{background:var(--brand-wash); border:1px solid var(--brand-edge); border-radius:14px; padding:11px; margin-bottom:16px}
.add-own-row{display:grid; grid-template-columns:1fr 78px; gap:7px; margin-bottom:7px}
.add-own .i{font-size:var(--fs-sm); padding:9px 11px; border-radius:10px}

/* ── Link field under a picked gift ── */
.link-in{display:flex; align-items:center; gap:8px; padding:7px 12px; border-top:1px solid var(--line-soft); color:var(--faint)}
.link-in i{font-size:var(--fs-2xs)}
.link-in input{flex:1; border:none; background:none; font:inherit; font-size:var(--fs-xs); color:var(--ink); padding:0}
.link-in input:focus{outline:none}
.link-in input::placeholder{color:var(--faint)}
.link-in.has{color:var(--brand-deep); background:var(--brand-wash); border-radius:0 0 13px 13px}
.picked .spec-in{border-radius:0}

.card-pick{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:20px; cursor:pointer; transition:.15s; display:block; width:100%; text-align:left; font:inherit; position:relative}
.card-pick:hover{border-color:var(--brand); box-shadow:var(--sh-md)}
.card-pick.on{border-color:var(--brand); box-shadow:var(--ring)}
.rec{position:absolute; top:-10px; right:18px; background:var(--brand); color:var(--on-brand); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:50px; padding:4px 11px}

.picked{border:1px solid var(--line); border-radius:14px; margin-bottom:9px; background:#fff}
.spec-in{width:100%; font:inherit; font-size:var(--fs-xs); color:var(--ink); background:var(--line-soft); border:none; border-top:1px solid var(--line-soft); border-radius:0 0 13px 13px; padding:8px 12px}
.spec-in:focus{outline:none; background:var(--brand-wash)}
.spec-in::placeholder{color:var(--faint)}

.mini{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:12px}
.mini .icon{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); flex:none}
.icon-sm{width:32px !important; height:32px !important; font-size:var(--fs-base) !important}

.sticky-foot{position:sticky; bottom:0; background:rgba(253,251,246,.95); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:14px 0; margin-top:30px; z-index:40}
.sticky-in{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* ── Footer ── */
.ftr{border-top:1px solid var(--line); background:#fff; padding:40px 0; margin-top:0}
.ftr-in{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; font-size:var(--fs-sm); color:var(--soft)}

.disclosure{font-size:var(--fs-xs); color:var(--soft); line-height:1.55; background:var(--line-soft); border-radius:12px; padding:13px 15px}


/* ══════════════════════════════════════════════
   Season goal, editorial shelves, and motion.
   Merged in from the v2 experiment.
   ══════════════════════════════════════════════ */

/* ── Season goal ── */
.season{
  max-width:660px; margin:26px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:22px 26px 24px; box-shadow:var(--sh-md);
}
.season-top{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px}
.season-raised{font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1}
.season-raised span{font-size:var(--fs-base); font-weight:600; color:var(--soft); letter-spacing:0}
.season-deadline{font-size:var(--fs-xs); font-weight:600; color:var(--accent-deep); background:var(--accent-wash); border-radius:50px; padding:6px 13px; white-space:nowrap}
.season-bar{height:14px; border-radius:50px; background:var(--line-soft); overflow:hidden; position:relative}
/* The real width is in the markup, so the number is right even if the
   animation never runs; the grow is a transform, which needs no JS timing. */
.season-bar i{
  display:block; height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-light),var(--brand) 60%,var(--accent));
  transform-origin:left center; animation:fill 1.3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .season-bar i{animation:none} }
.season-legs{display:flex; justify-content:space-between; margin-top:13px; gap:12px}
.season-leg{font-size:var(--fs-xs); color:var(--soft)}
.season-leg b{display:block; font-size:var(--fs-lg); color:var(--ink); font-weight:700; letter-spacing:-.02em}


/* ── Shelves ── */
.shelf-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px}
.shelf-head h2{font-size:var(--fs-xl); display:flex; align-items:center; gap:11px}
.shelf-kicker{
  font-size:var(--fs-2xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-radius:50px; padding:5px 11px; background:var(--accent-wash); color:var(--accent-deep);
}
.shelf-kicker.gold{background:var(--brand-wash); color:var(--brand-deep)}
.shelf-kicker.green{background:var(--green-bg); color:var(--green)}
.shelf-head p{margin:5px 0 0; font-size:var(--fs-base); color:var(--soft); max-width:62ch}
.shelf{padding:36px 0 4px}
.shelf + .shelf{padding-top:26px}
.shelf-rule{border:none; border-top:1px solid var(--line-soft); margin:34px 0 0}

/* ── Motion ── */
.tile .tile-art img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .tile-art img{transform:scale(1.07)}
.tile,.kid-card{transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s}
.add-btn{transition:transform .16s cubic-bezier(.3,1.4,.5,1), background .14s, color .14s}
.add-btn:active{transform:scale(.86)}
.add-btn.pop{animation:pop .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{0%{transform:scale(1)}38%{transform:scale(1.42)}100%{transform:scale(1)}}
.cart-btn.bump{animation:bump .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes bump{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px) rotate(-3deg)}60%{transform:translateY(0) rotate(2deg)}}

/* Visible by default. Only an element JS has actually taken responsibility for
   gets hidden, and a failsafe un-hides everything if the observer never fires,
   because no animation is worth a blank page. */
.reveal{transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.pending{opacity:0; transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.pending{opacity:1; transform:none; transition:none}
  .tile:hover .tile-art img{transform:none}
  .add-btn.pop{animation:none}
}

/* ── Confetti ── */
.confetti{position:fixed; z-index:120; pointer-events:none; width:9px; height:9px; border-radius:2px}
@keyframes fly{
  0%{opacity:1; transform:translate(0,0) rotate(0)}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
}

@media (max-width:640px){
  .hero{padding:28px 0 18px}
  /* The trust row stacks on a phone, so it has to earn its height. */
  .trust{gap:var(--s2); margin-top:var(--s5)}
  .trust span{font-size:var(--fs-xs); padding:6px 13px; box-shadow:none}
  .trust i{font-size:var(--fs-2xs)}
  .hero-badge span{font-size:var(--fs-xs); padding:6px 14px}
  .hero-stats{gap:18px 30px; margin-top:22px}
  .hero-stat b{font-size:var(--fs-lg)}
  .row2,.row3{grid-template-columns:1fr}
  .hdr-link.hide-sm{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
  .tile-art{font-size:42px}
  /* Menus anchor to the filter row instead of the pill, so a pill near the
     right edge cannot push its menu off screen. */
  .filters{position:relative}
  .fdrop{position:static}
  .fmenu{left:0; right:0; width:auto; min-width:0}
}