:root{
  --ink:#0B0B10; --ink-2:#171722;
  --pink:#FF2E9A; --pink-600:#E01585; --pink-700:#B70E6C;
  --pink-300:#FF74C4; --pink-100:#FFD6EE; --pink-50:#FFF0F9;
  --paper:#FFF7FC; --white:#fff;
  --shadow:0 18px 40px -18px rgba(183,14,108,.45);
  --hard:6px 6px 0 var(--ink);
  --hard-pink:6px 6px 0 var(--pink);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Poppins',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); overflow-x:hidden; line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:.95}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.display{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.5px; text-transform:uppercase}
.sticker{font-family:'Bungee',sans-serif; text-transform:uppercase}

/* metallic chrome text */
.chrome{
  background:linear-gradient(180deg,#fff 0%,#e7e7ef 38%,#a9a9bb 55%,#f4f4fa 72%,#8f8fa2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px rgba(0,0,0,.15);
}
.pinktxt{color:var(--pink)}

/* ---- announcement ---- */
.announce{
  background:var(--ink); color:#fff; text-align:center; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:9px 16px;
}
.announce b{color:var(--pink-300)}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:2px solid var(--ink);
}
.nav-inner{display:flex; align-items:center; gap:24px; height:76px}
.brand img{height:40px; width:auto}
.nav-links{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-links a{font-weight:600; font-size:.9rem; letter-spacing:.02em; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0; background:var(--pink); transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.cart-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--pink); color:#fff;
  font-weight:700; padding:10px 16px; border:2px solid var(--ink); border-radius:40px;
  box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-size:.85rem;
}
.cart-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.cart-count{background:#fff; color:var(--pink-700); border-radius:20px; padding:0 8px; font-size:.78rem; min-width:22px; text-align:center}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px; margin-left:auto}
.burger span{display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; border-radius:3px; transition:.25s}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; padding:60px 0 46px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--pink-100) 0%, var(--paper) 55%);
}
.hero .dots{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(var(--pink-300) 1.4px, transparent 1.6px);
  background-size:22px 22px; mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);}
.hero-burst{position:absolute; top:-6%; left:50%; transform:translateX(-50%); width:min(760px,120%); z-index:0;
  filter:drop-shadow(0 30px 60px rgba(255,46,154,.28)); animation:spin 60s linear infinite}
.hero-inner{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.28em; font-size:.72rem;
  text-transform:uppercase; color:var(--pink-700); background:var(--white); border:2px solid var(--ink);
  padding:7px 16px; border-radius:40px; box-shadow:3px 3px 0 var(--pink); margin-bottom:26px}
.hero-logo{width:min(560px,86%); animation:float 6s ease-in-out infinite; margin-bottom:6px}
.hero h1{font-size:clamp(3rem,10vw,6.6rem); margin:6px 0 0}
.hero h1 .lock{color:var(--ink)} .hero h1 .load{color:var(--pink)}
.hero-sub{max-width:560px; margin:20px auto 0; font-size:clamp(1rem,2.4vw,1.22rem); font-weight:500; color:#3a2b34}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:700; padding:15px 28px;
  border-radius:44px; border:2.5px solid var(--ink); cursor:pointer; font-size:1rem; transition:transform .12s, box-shadow .12s}
.btn-primary{background:var(--pink); color:#fff; box-shadow:var(--hard)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.btn-ghost{background:#fff; color:var(--ink); box-shadow:5px 5px 0 var(--pink-300)}
.btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--pink-300)}
.hero-mini{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:26px; font-weight:600; font-size:.82rem; color:#5a4650}
.hero-mini span{display:inline-flex; align-items:center; gap:7px}
.hero-mini svg{width:16px; height:16px; color:var(--pink)}
/* floating product chips */
.chip{position:absolute; z-index:1; width:118px; border:3px solid var(--ink); border-radius:18px;
  background:#fff; box-shadow:var(--shadow); padding:8px; transform:rotate(var(--r)); animation:bob 7s ease-in-out infinite}
.chip img{border-radius:10px; aspect-ratio:1; object-fit:cover}
.chip.c1{top:20%; left:3%; --r:-8deg}
.chip.c2{top:52%; left:6%; --r:6deg; animation-delay:1.4s}
.chip.c3{top:22%; right:3%; --r:9deg; animation-delay:.7s}
.chip.c4{top:54%; right:5%; --r:-7deg; animation-delay:2s}

/* ---- ticker ---- */
.ticker{background:var(--ink); color:#fff; padding:16px 0; border-top:3px solid var(--pink); border-bottom:3px solid var(--pink); overflow:hidden}
.ticker-track{display:flex; gap:34px; white-space:nowrap; width:max-content; animation:marq 26s linear infinite}
.ticker-track span{font-family:'Bungee',sans-serif; font-size:1.05rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:34px}
.ticker-track b{color:var(--pink-300)}
.tstar{color:var(--pink); font-size:1.2rem}

/* section base */
.section{padding:84px 0}
.sec-head{text-align:center; max-width:640px; margin:0 auto 50px}
.sec-eye{font-family:'Bungee',sans-serif; color:var(--pink); font-size:.8rem; letter-spacing:.12em; display:block; margin-bottom:14px}
.sec-title{font-size:clamp(2rem,5.5vw,3.4rem)}

/* ---- usp ---- */
.usp{background:var(--pink); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink)}
.usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center}
.usp-item{padding:34px 18px; color:#fff; border-right:2px dashed rgba(255,255,255,.4)}
.usp-item:last-child{border-right:0}
.usp-item svg{width:36px; height:36px; margin-bottom:12px}
.usp-item h3{font-family:'Bungee',sans-serif; font-size:.98rem; letter-spacing:.02em}
.usp-item p{margin:6px 0 0; font-size:.82rem; opacity:.92; font-weight:500}

/* ---- categories ---- */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.cat{position:relative; border:3px solid var(--ink); border-radius:22px; overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:#fff; box-shadow:var(--hard);
  transition:transform .2s}
.cat:hover{transform:translateY(-6px)}
.cat.selftan{background:linear-gradient(160deg,#c86a2f,#7c3d16)}
.cat.lashes{background:linear-gradient(160deg,var(--ink),#3a2130)}
.cat.tools{background:linear-gradient(160deg,var(--pink),var(--pink-700))}
.cat .kicker{font-family:'Bungee',sans-serif; font-size:.72rem; letter-spacing:.1em; opacity:.85}
.cat h3{font-family:'Anton',sans-serif; font-size:2rem; text-transform:uppercase; margin:8px 0 8px; letter-spacing:.5px}
.cat p{font-weight:500; font-size:.9rem; opacity:.95; margin:0 0 16px}
.cat .go{font-weight:700; display:inline-flex; align-items:center; gap:8px; font-size:.9rem}
.cat::before{content:""; position:absolute; top:-30px; right:-30px; width:130px; height:130px; opacity:.22;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%22100.00%2C50.00%2073.54%2C54.68%2096.19%2C69.13%2069.96%2C63.33%2085.36%2C85.36%2063.33%2C69.96%2069.13%2C96.19%2054.68%2C73.54%2050.00%2C100.00%2045.32%2C73.54%2030.87%2C96.19%2036.67%2C69.96%2014.64%2C85.36%2030.04%2C63.33%203.81%2C69.13%2026.46%2C54.68%200.00%2C50.00%2026.46%2C45.32%203.81%2C30.87%2030.04%2C36.67%2014.64%2C14.64%2036.67%2C30.04%2030.87%2C3.81%2045.32%2C26.46%2050.00%2C0.00%2054.68%2C26.46%2069.13%2C3.81%2063.33%2C30.04%2085.36%2C14.64%2069.96%2C36.67%2096.19%2C30.87%2073.54%2C45.32%22%20fill%3D%22white%22/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- products ---- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.card{position:relative; background:#fff; border:3px solid var(--ink); border-radius:20px; padding:14px;
  box-shadow:var(--hard); transform:rotate(var(--tilt,-1deg)); transition:transform .18s, box-shadow .18s}
.card:nth-child(even){--tilt:1.2deg}
.card:hover{transform:rotate(0deg) translateY(-8px); box-shadow:10px 12px 0 var(--pink)}
.card-img{position:relative; border:2px solid var(--ink); border-radius:14px; overflow:hidden; background:var(--pink-50); aspect-ratio:1}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-img .ph{width:100%; height:100%; display:none; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--pink-100),var(--pink-300)); color:#fff; font-family:'Bungee',sans-serif; font-size:.8rem; text-align:center; padding:12px}
.tag{position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-family:'Bungee',sans-serif;
  font-size:.62rem; letter-spacing:.05em; padding:5px 9px; border-radius:20px}
.card h3{font-size:1rem; margin:14px 4px 4px; line-height:1.2}
.card .price-row{display:flex; align-items:center; justify-content:space-between; padding:0 4px 4px; margin-top:8px}
.price{position:relative; font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--pink-700)}
.add{background:var(--pink); color:#fff; border:2px solid var(--ink); border-radius:40px; font-weight:700;
  padding:9px 16px; cursor:pointer; font-size:.82rem; box-shadow:3px 3px 0 var(--ink); transition:.12s}
.add:hover{transform:translate(-1px,-1px)} .add:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.add.added{background:var(--ink)}
.shopall{text-align:center; margin-top:46px}

/* ---- attitude band ---- */
.attitude{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.attitude .dots{position:absolute; inset:0; opacity:.14;
  background-image:radial-gradient(#fff 1.2px, transparent 1.4px); background-size:26px 26px}
.attitude-inner{position:relative; text-align:center; max-width:820px; margin:0 auto}
.attitude h2{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(2.1rem,6vw,4rem); line-height:.98}
.attitude p{font-size:clamp(1rem,2.4vw,1.2rem); font-weight:500; color:#e9d9e4; margin:22px auto 0; max-width:640px}
.attitude .fade{display:inline-block; margin-top:26px; font-family:'Bungee',sans-serif; color:var(--pink-300); font-size:1rem}

/* ---- founder ---- */
.founder{background:var(--pink-50)}
.founder-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.founder-photo{position:relative}
.founder-photo img{border:4px solid var(--ink); border-radius:24px; box-shadow:12px 12px 0 var(--pink); width:100%}
.founder-photo .stamp{position:absolute; bottom:-22px; right:-14px; background:var(--pink); color:#fff;
  font-family:'Bungee',sans-serif; font-size:.72rem; padding:14px 18px; border:3px solid var(--ink);
  border-radius:50%; width:118px; height:118px; display:flex; align-items:center; text-align:center; box-shadow:var(--hard); transform:rotate(-10deg)}
.founder h2{font-size:clamp(2rem,5vw,3rem); text-transform:uppercase; font-family:'Anton',sans-serif; margin-bottom:6px}
.say{font-weight:700; color:var(--pink); font-style:italic; margin-bottom:20px}
.founder p.body{font-size:1.05rem; color:#3a2b34; margin:0 0 16px}
.sig{font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--pink-700); margin-top:8px}
.sig small{display:block; font-family:'Poppins'; font-weight:600; font-size:.8rem; letter-spacing:.14em; color:#7a6570; text-transform:uppercase; margin-top:2px}

/* ---- reviews ---- */
.reviews{background:#fff}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.rev{border:3px solid var(--ink); border-radius:20px; padding:26px; background:var(--pink-50); box-shadow:5px 5px 0 var(--pink-300)}
.stars{color:var(--pink); font-size:1.05rem; letter-spacing:2px}
.rev p{font-weight:500; margin:14px 0 18px; font-size:1rem}
.rev .who{font-weight:700; font-size:.9rem}
.rev .who small{display:block; font-weight:500; color:#8a7580; font-size:.78rem}

/* ---- squad / social ---- */
.squad{background:linear-gradient(160deg,var(--pink),var(--pink-700)); color:#fff; text-align:center}
.squad h2{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(2rem,5.5vw,3.4rem)}
.squad p{max-width:520px; margin:16px auto 30px; font-weight:500}
.socials{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:44px}
.soc{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--ink); font-weight:700;
  padding:12px 22px; border-radius:40px; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transition:.12s}
.soc:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.soc svg{width:18px; height:18px}
.iggrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:720px; margin:0 auto}
.iggrid a{border:3px solid #fff; border-radius:14px; overflow:hidden; aspect-ratio:1; background:#fff2; position:relative}
.iggrid img{width:100%; height:100%; object-fit:cover}
.iggrid .igph{width:100%; height:100%; background:linear-gradient(140deg,#fff5,#fff1); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Bungee'; font-size:1.4rem}

/* ---- newsletter ---- */
.news{background:var(--ink); color:#fff; text-align:center}
.news h2{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(1.8rem,4.5vw,2.8rem)}
.news p{color:#e2cdd9; margin:14px auto 26px; max-width:460px; font-weight:500}
.news-form{display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.news-form input{flex:1; min-width:220px; padding:15px 18px; border-radius:40px; border:2.5px solid var(--pink);
  background:#fff; font-family:inherit; font-size:1rem}
.news-note{margin-top:16px; font-size:.78rem; color:#a892a0}

/* ---- footer ---- */
.foot{background:#0a0a0f; color:#cfc3cb; padding:64px 0 30px; border-top:3px solid var(--pink)}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px}
.foot img.flogo{height:44px; margin-bottom:16px}
.foot p{font-size:.9rem; max-width:320px}
.foot h4{color:#fff; font-family:'Bungee'; font-size:.82rem; letter-spacing:.06em; margin:0 0 16px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot ul a{font-size:.9rem; color:#cfc3cb}
.foot ul a:hover{color:var(--pink-300)}
.pay{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.pay span{background:#1a1a24; border:1px solid #2c2c38; border-radius:6px; font-size:.66rem; padding:5px 9px; color:#b9adb5}
.foot-bottom{border-top:1px solid #22222c; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#8a7d86}
.foot-bottom a{color:var(--pink-300); font-weight:600}

/* ---- toast ---- */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(120px); z-index:90;
  background:var(--ink); color:#fff; font-weight:700; padding:14px 24px; border-radius:44px; border:2.5px solid var(--pink);
  box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.2,1.2,.3,1)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bob{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(var(--r)) translateY(-16px)}}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes marq{to{transform:translateX(-50%)}}

@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .founder-grid{grid-template-columns:1fr; gap:60px}
  .foot-top{grid-template-columns:1fr 1fr}
  .chip{display:none}
}
@media (max-width:820px){
  .nav-links{display:none; position:absolute; top:76px; left:0; right:0; background:#fff; flex-direction:column;
    padding:18px 24px; gap:16px; border-bottom:2px solid var(--ink); box-shadow:0 18px 30px -18px rgba(0,0,0,.4)}
  .nav-links.open{display:flex}
  .cart-btn .lbl{display:none}
  .burger{display:block}
  .brand{margin-right:auto}
  .cats{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .usp-item:nth-child(2){border-right:0}
  .usp-item{border-bottom:2px dashed rgba(255,255,255,.4)}
  .rev-grid{grid-template-columns:1fr}
  .iggrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .section{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ===== card links (added in PHP conversion) ===== */
.card-media{display:block}
.card-title{color:inherit}
.card-title:hover{color:var(--pink-700)}
.card-blurb{font-size:.8rem; color:#8a7580; font-weight:600; padding:0 4px}

/* ===== product detail page ===== */
.pdp{padding-top:44px}
.pdp-back{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem;
  color:var(--pink-700); margin-bottom:28px}
.pdp-back:hover{color:var(--pink)}
.pdp-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.pdp-main{position:relative; border:3px solid var(--ink); border-radius:22px; overflow:hidden;
  background:var(--pink-50); aspect-ratio:1; box-shadow:var(--hard)}
.pdp-main img{width:100%; height:100%; object-fit:cover}
.pdp-main .tag{position:absolute; top:14px; left:14px; background:var(--ink); color:#fff;
  font-family:'Bungee',sans-serif; font-size:.66rem; letter-spacing:.05em; padding:6px 11px; border-radius:20px}
.pdp-thumbs{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.pg-thumb{width:74px; height:74px; padding:0; border:2.5px solid var(--ink); border-radius:12px;
  overflow:hidden; cursor:pointer; background:var(--pink-50); transition:.15s}
.pg-thumb img{width:100%; height:100%; object-fit:cover}
.pg-thumb.active{box-shadow:0 0 0 3px var(--pink)}
.pg-thumb:hover{transform:translateY(-2px)}
.pdp-title{font-size:clamp(2rem,5vw,3rem); margin:10px 0 12px}
.pdp-price{font-family:'Anton',sans-serif; font-size:2.2rem; color:var(--pink-700)}
.pdp-variants{margin:22px 0}
.pdp-vlabel{display:block; font-weight:700; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:10px; color:#5a4650}
.pdp-vgrid{display:flex; flex-wrap:wrap; gap:10px}
.vopt{font-family:inherit; font-weight:600; font-size:.85rem; padding:9px 16px; cursor:pointer;
  background:#fff; border:2px solid var(--ink); border-radius:40px; transition:.12s}
.vopt:hover{transform:translate(-1px,-1px)}
.vopt.sel{background:var(--pink); color:#fff; box-shadow:3px 3px 0 var(--ink)}
.pdp-actions{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 12px}
.pdp-body{margin-top:20px; border-top:2px dashed var(--pink-100); padding-top:22px}
.pdp-body p{font-size:1.02rem; color:#3a2b34; margin:0 0 14px}
.pdp-body h4{font-family:'Bungee',sans-serif; font-size:.85rem; color:var(--pink-700); margin:18px 0 8px}
.pdp-badges{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px;
  font-weight:600; font-size:.9rem; color:#3a2b34}
.pdp-related{margin-top:90px; border-top:3px solid var(--ink); padding-top:60px}
@media (max-width:820px){
  .pdp-grid{grid-template-columns:1fr; gap:34px}
}

/* ============================================================= *
 *  Cart · Checkout · Order confirmation  (Phase 3–4)
 * ============================================================= */
.add-form{display:contents}
.vopt.sold{opacity:.45; text-decoration:line-through; cursor:not-allowed}

.cart-h1{font-size:clamp(2.2rem,6vw,3.4rem); margin-bottom:26px}
.cart-empty{text-align:center; padding:50px 0}
.cart-empty p{font-size:1.15rem; margin-bottom:22px}

.ship-nudge{background:var(--pink-50); border:2px solid var(--ink); border-radius:16px;
  padding:12px 18px; font-weight:600; margin-bottom:24px; box-shadow:4px 4px 0 var(--pink-300)}
.ship-nudge.win{background:var(--pink-100)}

.cart-grid{display:grid; grid-template-columns:1fr 340px; gap:34px; align-items:start}
.cart-lines{display:flex; flex-direction:column; gap:14px}
.cart-line{display:grid; grid-template-columns:74px 1fr auto auto 30px; gap:16px; align-items:center;
  background:#fff; border:3px solid var(--ink); border-radius:18px; padding:12px 14px; box-shadow:var(--shadow)}
.cart-thumb{display:block; border:2px solid var(--ink); border-radius:12px; overflow:hidden; aspect-ratio:1; background:var(--pink-50)}
.cart-thumb img{width:100%; height:100%; object-fit:cover}
.cart-title{font-weight:700; color:var(--ink); text-decoration:none; line-height:1.25}
.cart-title:hover{color:var(--pink-700)}
.cart-variant{font-size:.82rem; color:#6c5560; margin-top:3px}
.cart-unit{font-size:.82rem; color:#8a7580; margin-top:2px}
.cart-qty input{width:60px; padding:8px; border:2px solid var(--ink); border-radius:10px; font-weight:700; text-align:center; font-family:inherit}
.cart-line-total{font-family:'Anton',sans-serif; font-size:1.25rem; color:var(--pink-700); white-space:nowrap}
.cart-remove button{background:none; border:none; font-size:1.6rem; line-height:1; color:#b9a4ad; cursor:pointer; padding:0 4px}
.cart-remove button:hover{color:var(--pink)}

.cart-summary,.checkout-summary,.success-ship,.success-items{background:#fff; border:3px solid var(--ink);
  border-radius:20px; padding:22px; box-shadow:var(--hard-pink)}
.cart-summary h2,.checkout-summary h2,.success-ship h2,.success-items h2{font-family:'Anton',sans-serif;
  text-transform:uppercase; font-size:1.35rem; margin:0 0 16px; letter-spacing:.5px}
.sum-row{display:flex; justify-content:space-between; padding:8px 0; font-weight:600}
.sum-row.total{border-top:2px solid var(--ink); margin-top:8px; padding-top:14px; font-family:'Anton',sans-serif; font-size:1.4rem; color:var(--pink-700)}
.sum-vat{font-size:.8rem; color:#8a7580; margin-top:4px}
.cart-checkout{width:100%; justify-content:center; margin-top:18px}
.cart-continue{display:block; text-align:center; margin-top:14px; font-weight:600; color:var(--pink-700)}

/* Checkout */
.checkout-grid{display:grid; grid-template-columns:1fr 360px; gap:34px; align-items:start}
.checkout-form{background:#fff; border:3px solid var(--ink); border-radius:20px; padding:26px; box-shadow:var(--shadow)}
.checkout-form h2{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.3rem; letter-spacing:.5px; margin:26px 0 14px}
.checkout-form h2:first-of-type{margin-top:0}
.field{margin-bottom:16px; display:flex; flex-direction:column}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{font-weight:700; font-size:.9rem; margin-bottom:6px}
.field label .opt{font-weight:500; color:#8a7580}
.field input{padding:12px 14px; border:2px solid var(--ink); border-radius:12px; font-family:inherit; font-size:1rem}
.field input:focus{outline:none; box-shadow:3px 3px 0 var(--pink-300)}
.field-err{color:var(--pink-700); font-size:.8rem; font-weight:600; margin-top:5px}
.form-error-banner{background:var(--pink-100); border:2px solid var(--pink-700); border-radius:14px; padding:14px 18px; font-weight:600; margin-bottom:22px}
.checkout-submit{width:100%; justify-content:center; margin-top:10px}
.checkout-note{font-size:.82rem; color:#8a7580; margin-top:14px; text-align:center}

.co-items{list-style:none; padding:0; margin:0 0 16px; border-bottom:2px solid var(--ink)}
.co-items li{display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:baseline; padding:8px 0; font-size:.9rem}
.co-qty{font-weight:700; color:var(--pink-700)}
.co-name em{display:block; font-style:normal; font-size:.8rem; color:#8a7580}
.co-price{font-weight:700; white-space:nowrap}

/* Order success */
.success-hero{text-align:center; max-width:640px; margin:0 auto 44px}
.success-badge{width:70px; height:70px; margin:0 auto 20px; border-radius:50%; background:var(--pink);
  border:3px solid var(--ink); color:#fff; font-size:2rem; display:flex; align-items:center; justify-content:center; box-shadow:var(--hard)}
.success-hero h1{font-size:clamp(2rem,5.5vw,3rem); margin:6px 0 16px}
.success-sub{font-size:1.05rem; color:#3a2b34; line-height:1.6}
.success-orderno{margin-top:20px; display:inline-block; background:var(--ink); color:#fff; font-family:'Bungee',sans-serif;
  font-size:.85rem; letter-spacing:.05em; padding:10px 20px; border-radius:30px}
.success-grid{display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:start; max-width:960px; margin:0 auto}
.success-ship address{font-style:normal; line-height:1.7; font-weight:600}
.success-email{font-size:.85rem; color:#8a7580; margin:16px 0 20px}

@media (max-width:860px){
  .cart-grid,.checkout-grid,.success-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:64px 1fr auto; grid-auto-rows:auto}
  .cart-line .cart-qty{grid-column:2}
  .cart-line-total{grid-column:3; grid-row:1}
  .cart-remove{grid-column:3; grid-row:2; justify-self:end}
}

/* ============================================================= *
 *  Shop listing · filters · stock states  (Phase 2)
 * ============================================================= */
.shoppage .sec-head{text-align:center; margin-bottom:30px}
.shop-sub{color:#6c5560; font-weight:600; margin-top:8px}

.shop-toolbar{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  margin-bottom:26px; padding-bottom:22px; border-bottom:3px solid var(--ink)}
.shop-cats{display:flex; flex-wrap:wrap; gap:10px}
.pill{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:2px solid var(--ink);
  border-radius:40px; background:#fff; font-weight:700; font-size:.9rem; color:var(--ink); transition:transform .12s, box-shadow .12s}
.pill:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--pink-300)}
.pill.on{background:var(--pink); color:#fff; box-shadow:4px 4px 0 var(--ink)}
.pill-cnt{font-size:.72rem; background:rgba(0,0,0,.12); border-radius:20px; padding:1px 7px}
.pill.on .pill-cnt{background:rgba(255,255,255,.28)}

.shop-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.shop-search{display:flex; border:2px solid var(--ink); border-radius:40px; overflow:hidden; background:#fff}
.shop-search input{border:none; padding:10px 16px; font-family:inherit; font-size:.92rem; min-width:150px; outline:none}
.shop-search button{border:none; background:var(--ink); color:#fff; font-weight:700; padding:0 18px; cursor:pointer; font-family:'Bungee',sans-serif; font-size:.78rem}
.shop-sort{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.88rem}
.shop-sort select{border:2px solid var(--ink); border-radius:40px; padding:9px 14px; font-family:inherit; font-weight:600; background:#fff; cursor:pointer}

.shop-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-weight:600; color:#6c5560}
.shop-clear{color:var(--pink-700); font-weight:700}

/* Stock states on cards */
.tag-sold{background:#5b5b66}
.tag-low{background:var(--pink-700)}
.card.is-sold-out .card-img img,.card.is-sold-out .ph{filter:grayscale(.7) opacity(.7)}
.add-disabled{background:#d9cfd4; color:#7d6d75; border:2px solid #b9a4ad; cursor:not-allowed;
  box-shadow:none; pointer-events:none}

@media (max-width:700px){
  .shop-toolbar{flex-direction:column; align-items:stretch}
  .shop-controls{justify-content:space-between}
}

/* ============================================================= *
 *  The Dolls Dream House  (client update)
 * ============================================================= */
.dolls-intro{max-width:820px; margin:0 auto 44px; text-align:center}
.dolls-title{font-size:clamp(2rem,5.5vw,3.2rem); line-height:1.05; margin-bottom:20px}
.dolls-lead{color:#3a2b34; line-height:1.7; font-size:1.05rem; margin-bottom:16px}

.dolls-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.doll-card{display:block; margin:0; padding:0; width:100%; font:inherit; cursor:pointer; text-align:center;
  background:#fff; border:3px solid var(--ink); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s}
.doll-card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--pink-300)}
.doll-card:focus-visible{outline:3px solid var(--pink); outline-offset:3px}
.doll-card img{display:block; width:100%; height:auto}
.doll-name{display:block; font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.5px;
  padding:12px; font-size:1.15rem; color:var(--pink-700); border-top:3px solid var(--ink)}

.dolls-cta{text-align:center; margin-top:48px}
.dolls-cta p{font-family:'Bungee',sans-serif; font-size:1rem; margin-bottom:20px; color:var(--ink)}

/* Lightbox */
.doll-lb{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(11,11,16,.88); padding:24px}
.doll-lb.open{display:flex}
.doll-lb-fig{margin:0; max-width:min(560px,92vw); max-height:92vh; display:flex; flex-direction:column}
.doll-lb-fig img{max-width:100%; max-height:82vh; object-fit:contain; border:3px solid #fff; border-radius:16px}
.doll-lb-fig figcaption{color:#fff; text-align:center; font-family:'Bungee',sans-serif; margin-top:14px; letter-spacing:.04em}
.doll-lb-close{position:absolute; top:18px; right:22px; background:none; border:none; color:#fff;
  font-size:2.6rem; line-height:1; cursor:pointer}
.doll-lb-nav{background:rgba(255,255,255,.14); border:2px solid #fff; color:#fff; cursor:pointer;
  width:52px; height:52px; border-radius:50%; font-size:1.8rem; line-height:1; flex:none; margin:0 10px;
  transition:background .15s}
.doll-lb-nav:hover{background:var(--pink)}
@media (max-width:600px){
  .doll-lb-nav{position:absolute; bottom:20px; width:46px; height:46px}
  .doll-lb-nav.prev{left:24px} .doll-lb-nav.next{right:24px}
}

@media (max-width:820px){ .dolls-grid{grid-template-columns:repeat(2,1fr); gap:16px} }
@media (max-width:480px){ .dolls-grid{grid-template-columns:1fr} }

/* Discount code (cart + checkout) */
.sum-row.discount{color:var(--pink-700); font-weight:700}
.disc-form{display:flex; gap:8px; margin:14px 0 4px}
.disc-form input{flex:1; padding:10px 12px; border:2px solid var(--ink); border-radius:10px; font-family:inherit; font-size:.92rem; text-transform:uppercase}
.disc-form input:focus{outline:none; box-shadow:3px 3px 0 var(--pink-300)}
.disc-form button{border:2px solid var(--ink); background:var(--ink); color:#fff; border-radius:10px; padding:0 16px; font-weight:700; cursor:pointer; font-family:'Bungee',sans-serif; font-size:.72rem}
.disc-form.applied{align-items:center; justify-content:space-between; background:var(--pink-50); border:2px solid var(--pink-300); border-radius:12px; padding:10px 14px; font-size:.88rem}
.disc-remove{background:none; border:none; color:var(--pink-700); font-weight:700; cursor:pointer; text-decoration:underline; font-size:.82rem}

/* ============================================================= *
 *  Legal / content pages  (page.php)
 * ============================================================= */
.legalpage .legal-head{text-align:center; max-width:720px; margin:0 auto 34px}
.legal-title{font-size:clamp(2rem,5vw,3rem); margin-top:6px}
.legal-body{max-width:760px; margin:0 auto; background:#fff; border:3px solid var(--ink);
  border-radius:20px; padding:34px 38px; box-shadow:var(--shadow)}
.legal-body h3{font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.5px;
  font-size:1.25rem; color:var(--pink-700); margin:28px 0 10px}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:0 0 14px; line-height:1.7; color:#3a2b34}
.legal-body ul{margin:0 0 16px; padding-left:22px}
.legal-body li{margin:6px 0; line-height:1.6; color:#3a2b34}
.legal-body a{color:var(--pink-700); font-weight:600; text-decoration:underline}
@media (max-width:600px){ .legal-body{padding:24px 20px} }

/* ============================================================= *
 *  Bow Baddie custom order form
 * ============================================================= */
.bowpage .sec-head{margin-bottom:34px}
.bow-sub{color:#3a2b34; max-width:620px; margin:12px auto 0; line-height:1.6}
.bow-ig{margin-top:20px}
.bow-form{max-width:720px; margin:0 auto}
.bow-form textarea,.checkout-form textarea{padding:12px 14px; border:2px solid var(--ink); border-radius:12px;
  font-family:inherit; font-size:1rem; resize:vertical}
.bow-form textarea:focus,.checkout-form textarea:focus{outline:none; box-shadow:3px 3px 0 var(--pink-300)}
.check-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.check{display:flex; align-items:center; gap:8px; background:var(--pink-50); border:2px solid var(--ink);
  border-radius:12px; padding:10px 12px; font-weight:600; font-size:.9rem; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--pink); cursor:pointer}
.bow-thankyou{max-width:560px; margin:0 auto; text-align:center; background:#fff; border:3px solid var(--ink);
  border-radius:20px; padding:40px 30px; box-shadow:var(--hard-pink)}
.bow-thankyou h2{font-size:2rem; margin:6px 0 14px}
.bow-thankyou p{color:#3a2b34; line-height:1.6; margin-bottom:24px}
@media (max-width:640px){ .check-grid{grid-template-columns:repeat(2,1fr)} }