:root{
  --page:#FFF8F0; --ink:#141318; --dim:#6B6875; --card:#FFFFFF; --hairline:#EBE4D8;
  --red:#FF4438; --orange:#FF9500; --yellow:#FFD60A; --green:#34C759; --blue:#2E8CFF; --purple:#A855F7;
  --calm:#FFFFFF; --calm-ink:#141318; --calm-dim:#6B6875; --calm-line:#E8E6EF;
  --display:"Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --snap:cubic-bezier(.34,1.56,.64,1); --t1:120ms; --t2:240ms; --t3:480ms;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--body); font-weight:700}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:12px}
::selection{background:var(--yellow)}
a{color:inherit}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:12px;
  padding:12px clamp(16px,4vw,32px); background:var(--page); border-bottom:2px solid var(--hairline);
}
.wordmark{font:800 clamp(1.3rem,4vw,1.6rem) var(--display); letter-spacing:.01em; user-select:none; text-decoration:none}
.wordmark span{display:inline-block}
.hgrow{flex:1}
#cartBtn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  background:var(--ink); color:#fff; border:0; border-radius:999px;
  padding:8px 18px; font:800 .95rem var(--display);
  transition:transform var(--t1) var(--snap);
}
#cartBtn:hover{transform:translateY(-1px)}
#cartBtn .n{background:var(--yellow); color:var(--ink); border-radius:999px; font-size:.75rem; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center}

/* ---------- intro ---------- */
.intro{max-width:1160px; margin:0 auto; padding:clamp(24px,5vw,48px) clamp(16px,4vw,32px) 8px; text-align:center}
.intro h1{font:800 clamp(1.7rem,5vw,2.6rem)/1.1 var(--display); letter-spacing:-.01em; margin:0 auto 8px; max-width:22ch}
.intro h1 .u{border-bottom:6px solid var(--yellow); line-height:1}
.intro p{margin:0 auto 20px; color:var(--dim); font-size:clamp(.95rem,2.2vw,1.05rem); max-width:52ch}
.heroCta{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  background:var(--ink); color:#fff; border-radius:14px; padding:10px 28px;
  font:800 1rem var(--display); text-decoration:none;
  transition:transform var(--t1) var(--snap), background var(--t2) ease;
}
.heroCta:hover{transform:translateY(-2px); background:#2A2833}

/* ---------- shelves / cards ---------- */
.shelf{max-width:1160px; margin:0 auto; padding:24px clamp(16px,4vw,32px) 8px}
.shelf-label{
  display:flex; align-items:center; gap:12px; margin:0 0 16px;
  font:800 .85rem var(--display); text-transform:uppercase; letter-spacing:.12em; color:var(--dim);
}
.shelf-label::after{content:""; flex:1; height:2px; background:var(--hairline); border-radius:2px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(164px,44vw),230px)); gap:clamp(12px,2.5vw,20px); justify-content:center}
.card{
  background:var(--card); border:2px solid var(--hairline); border-radius:20px; padding:10px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform var(--t2) ease, box-shadow var(--t2) ease, border-color var(--t2) ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,19,24,.10); border-color:var(--ac,var(--hairline))}
.card a.plink{text-decoration:none; display:flex; flex-direction:column; gap:8px}
.tile{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1}
.tile canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.card h3{font:800 1rem/1.2 var(--display); margin:2px 2px 0}
.card .cap{margin:0 2px; color:var(--dim); font-size:.84rem; font-weight:700; line-height:1.35; min-height:2.7em}
.crow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:0 2px 2px}
.price{font:800 .95rem var(--display); color:var(--ink); background:var(--yellow); border-radius:10px; padding:6px 10px; min-height:36px; display:inline-flex; align-items:center}
.price.soon{background:#F0EBE2; color:var(--dim)}
.addbtn{
  min-height:44px; min-width:44px; padding:8px 18px; border:0; border-radius:12px;
  background:var(--ink); color:#fff; font:800 .95rem var(--display);
  transition:transform var(--t1) var(--snap), background var(--t2) ease;
}
.addbtn:hover{transform:translateY(-1px); background:#2A2833}
.addbtn:active{transform:scale(.94)}
.shelf.soon .card{background:#FDF4E7}
.shelf.soon .cap{min-height:0}

/* ---------- product page ---------- */
.crumbs{max-width:960px; margin:0 auto; padding:20px clamp(16px,4vw,32px) 0; font:700 .85rem var(--body); color:var(--dim)}
.crumbs a{color:var(--dim)}
.pdp{
  max-width:960px; margin:0 auto; padding:20px clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr; gap:clamp(20px,4vw,48px); align-items:center;
}
@media (min-width:760px){ .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.pdp .tile{border-radius:24px; border:2px solid var(--hairline)}
.pdp h1{font:800 clamp(1.6rem,4.5vw,2.4rem)/1.1 var(--display); margin:0 0 12px}
.pdp .desc{color:var(--dim); font-size:1rem; line-height:1.55; margin:0 0 24px; max-width:48ch}
.ageNote{color:var(--dim); font-size:.82rem; font-weight:700; margin:0 0 16px}

/* ---------- pdp photo gallery ---------- */
.gallery{display:flex; flex-direction:column; gap:12px}
.gbig{border-radius:24px; border:2px solid var(--hairline); overflow:hidden; aspect-ratio:1}
.gbig img{width:100%; height:100%; object-fit:cover; display:block}
.gthumbs{display:grid; grid-template-columns:repeat(3,minmax(72px,1fr)); gap:12px}
.gthumb{
  padding:0; border-radius:14px; border:2px solid var(--hairline); overflow:hidden;
  min-height:44px; min-width:44px; aspect-ratio:1; background:var(--card);
  transition:border-color var(--t1) ease;
}
.gthumb img{width:100%; height:100%; object-fit:cover; display:block}
.gthumb:hover{border-color:var(--dim)}
.gthumb.on{border-color:var(--ink); border-width:2px}
.pdp .buy{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.pdp .price{font-size:1.15rem; min-height:48px; padding:8px 16px}
.pdp .addbtn{min-height:52px; padding:10px 32px; font-size:1.05rem}
.pdp .soonNote{color:var(--dim); font-size:.9rem; margin:0}
.backrow{margin-top:24px}
.backrow a{font:800 .9rem var(--display); color:var(--dim); text-decoration:none}
.backrow a:hover{color:var(--ink)}

/* ---------- faq ---------- */
.faq{display:flex; flex-direction:column; gap:12px; max-width:680px; margin:0 auto}
.faq details{background:var(--card); border:2px solid var(--hairline); border-radius:16px; padding:0 16px}
.faq summary{
  font:800 1rem var(--display); padding:14px 4px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; min-height:44px;
}
.faq summary::after{content:"+"; font-size:1.3rem; color:var(--dim); transition:transform var(--t2) var(--snap)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 4px 16px; color:var(--dim); font-size:.92rem; line-height:1.5}

/* ---------- footer ---------- */
footer.site{max-width:1160px; margin:32px auto 0; padding:24px clamp(16px,4vw,32px) 48px; border-top:2px solid var(--hairline)}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px}
.fslot{background:var(--card); border:2px solid var(--hairline); border-radius:16px; padding:14px 16px; text-decoration:none; display:block; transition:border-color var(--t2) ease}
.fslot:hover{border-color:var(--ink)}
.fslot b{display:block; font:800 .8rem var(--display); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px}
.fslot span{color:var(--dim); font-size:.85rem}
.fline{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; font:700 .85rem var(--body); color:var(--dim)}
#shareBtn{background:none; border:2px solid var(--hairline); border-radius:999px; min-height:44px; padding:8px 18px; font:800 .85rem var(--display); color:var(--ink)}

/* ---------- plain pages (policies / 404) ---------- */
.page{max-width:680px; margin:0 auto; padding:clamp(32px,6vw,64px) clamp(16px,4vw,32px); text-align:center}
.page h1{font:800 clamp(1.6rem,4.5vw,2.2rem) var(--display); margin:0 0 12px}
.page p{color:var(--dim); line-height:1.6; margin:0 0 16px}

/* ---------- cart drawer (calm) ---------- */
#scrim{position:fixed; inset:0; background:rgba(20,19,24,.4); z-index:90; opacity:0; pointer-events:none; transition:opacity var(--t2) ease}
#scrim.on{opacity:1; pointer-events:auto}
#cart{
  position:fixed; top:0; right:0; height:100dvh; width:min(420px,100vw); z-index:100;
  background:var(--calm); color:var(--calm-ink); transform:translateX(102%);
  transition:transform var(--t3) cubic-bezier(.22,.8,.3,1); display:flex; flex-direction:column;
  border-left:1px solid var(--calm-line);
}
#cart.on{transform:none}
#cart .chead{border-bottom:1px solid var(--calm-line); padding:16px 20px; display:flex; align-items:center; justify-content:space-between}
#cart h2{font:800 1.1rem var(--body); margin:0}
#cartClose{background:none; border:0; font-size:1.2rem; color:var(--calm-dim); width:44px; height:44px; border-radius:10px}
#cartClose:hover{color:var(--calm-ink); background:#F4F2F8}
#cartItems{flex:1; overflow-y:auto; padding:4px 20px}
.citem{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--calm-line)}
.citem .thumb{width:44px; height:44px; border-radius:10px; flex:none}
.citem .nm{flex:1; min-width:0}
.citem .nm b{display:block; font-size:.94rem; font-weight:800}
.citem .nm span{font-size:.85rem; color:var(--calm-dim)}
.qty{display:flex; align-items:center; border:1px solid var(--calm-line); border-radius:10px}
.qty button{background:none; border:0; width:44px; height:44px; font-size:1.05rem; color:var(--calm-ink); border-radius:10px}
.qty button:hover{background:#F4F2F8}
.qty span{min-width:24px; text-align:center; font-size:.9rem}
.citem .rm{background:none; border:0; color:var(--calm-dim); font-size:1rem; width:44px; height:44px; border-radius:10px}
.citem .rm:hover{color:#C0392B}
#cartEmpty{color:var(--calm-dim); text-align:center; padding:48px 16px; font-weight:700}
#cartFoot{border-top:1px solid var(--calm-line); padding:16px 20px 20px}
.trow{display:flex; justify-content:space-between; font-size:1rem; margin-bottom:12px}
.trow b{font-size:1.1rem}
#checkout{
  width:100%; min-height:52px; border:0; border-radius:14px; background:var(--calm-ink); color:#fff;
  font:800 1.02rem var(--body); transition:opacity var(--t1) ease;
}
#checkout:hover{opacity:.9}
#checkout:disabled{opacity:.45; cursor:default}
#cartNote{margin:12px 0 0; font-size:.8rem; color:var(--calm-dim); text-align:center; font-weight:700}

#toast{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,200%); z-index:150;
  background:var(--ink); color:#fff; font:800 .95rem var(--display);
  padding:12px 24px; border-radius:999px; transition:transform var(--t2) var(--snap);
}
#toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){ *{transition-duration:1ms !important} }