@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#080a0e;--dark:#0d1117;--dark2:#131922;--dark3:#1a2130;--border:#2a1a3d;--purple:#9333ea;--purple2:#a855f7;--green:#22c55e;--green2:#4ade80;--pink:#f472b6;--pink2:#ec4899;--white:#f0f4ff;--gray:#8a95a5;--light:#c8d4e8}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--black);color:var(--white);line-height:1.65;min-height:100vh;font-size:17px}
a{color:var(--green);text-decoration:none}
.container{max-width:1400px;margin:0 auto;padding:0 1.25rem}
header.shop-header{position:static;background:rgba(8,10,14,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--purple);padding:1.1rem 0 .9rem}
.shop-header-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;text-align:center}
.shop-logo{font-family:'Quicksand',sans-serif;font-weight:900;font-size:1.05rem;color:#fff;letter-spacing:.05em;text-decoration:none}
.shop-logo span{color:var(--purple)}
.shop-nav{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.shop-nav a{font-family:'Quicksand',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--light)}
.shop-nav a:hover{color:var(--green)}
.shop-hero{padding:3rem 0 1.5rem;text-align:center;border-bottom:1px solid var(--border);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(147,51,234,.15) 0%,transparent 70%)}
.shop-hero h1{font-family:'Quicksand',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1}
.shop-hero h1 span{background:linear-gradient(90deg,#a855f7,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#c084fc;text-shadow:none}
.shop-hero p{color:var(--light);margin-top:.75rem;font-size:1.05rem}
.coupon-banner{background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(239,68,68,.15),rgba(147,51,234,.15));border-top:1px solid rgba(245,158,11,.3);border-bottom:1px solid rgba(245,158,11,.3);padding:.85rem 1rem;text-align:center;color:#fbbf24;font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:.08em;font-size:.9rem}
.cat-jump{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.25rem 0;justify-content:center;border-bottom:1px solid var(--border);background:var(--dark);position:sticky;top:65px;z-index:40}
.cat-jump a{padding:.4rem .9rem;background:transparent;border:1.5px solid var(--border);color:var(--light);border-radius:4px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;}
.cat-jump a:hover{border-color:var(--purple);color:var(--purple)}
.cat-section{padding:3rem 0 1rem}
.cat-section h2{font-family:'Quicksand',sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:#fff;margin-bottom:.5rem;letter-spacing:.05em}
.cat-section h2 .count{color:var(--green);font-size:.7em;margin-left:.5rem;font-family:'Quicksand',sans-serif}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;padding:1rem 0}
.card{background:var(--dark2);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);border-color:var(--purple);box-shadow:0 8px 22px rgba(147,51,234,.18)}
.card-img{aspect-ratio:1/1;overflow:hidden;background:var(--dark3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:.85rem;display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.card-cat{font-family:'Quicksand',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.02em;color:var(--green);margin-bottom:.35rem}
.card-name{font-family:'Quicksand',sans-serif;font-size:1rem;font-weight:600;color:#fff;margin-bottom:.4rem;line-height:1.25}
.card-price{font-family:'Quicksand',sans-serif;font-size:1.2rem;font-weight:700;color:var(--purple);margin-bottom:.5rem}
.card-actions{margin-top:auto;display:flex;gap:.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .9rem;border-radius:11px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.06em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:all .2s;flex:1}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}
.btn-primary:hover{box-shadow:0 0 14px rgba(147,51,234,.6)}
.btn-buy{background:linear-gradient(135deg,var(--green),var(--green2));color:#0a2410;font-weight:800}
.btn-buy:hover{box-shadow:0 4px 14px rgba(34,197,94,.4)}
.btn-secondary{background:transparent;color:var(--green);border-color:var(--green)}
.btn-secondary:hover{background:rgba(34,197,94,.1)}
.btn-add{background:transparent;color:var(--purple);border-color:var(--purple)}
.btn-add:hover{background:rgba(147,51,234,.12)}
footer{padding:3rem 0;border-top:1px solid var(--border);text-align:center;color:var(--gray);margin-top:3rem}
footer a{color:var(--green)}

/* hpd-brand-motif */
.shop-logo .hpd-brandmark{margin-right:.4rem}
.shop-hero{position:relative}.shop-hero::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22150%22%20viewBox%3D%220%200%20210%20105%22%3E%3Cg%20fill%3D%22%239333ea%22%20stroke%3D%22%239333ea%22%3E%3Cellipse%20cx%3D%2258%22%20cy%3D%2258%22%20rx%3D%2224%22%20ry%3D%2220%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M52%2044%20C44%2034%2046%2022%2056%2018%20C62%2016%2066%2018%2067%2022%22%20fill%3D%22none%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2220%22%20r%3D%227%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M60%2020%20L50%2025%20L57%2026%20Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M54%2076%20L51%2092%20M64%2076%20L66%2092%22%20fill%3D%22none%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28105%2C5%29%22%3E%3Cpath%20d%3D%22M50%2026c-3%200-5%202-5%205c0%201%200%202%201%203c-8%201-15%207-15%2017c0%2011%209%2019%2019%2019s19-8%2019-19c0-10-7-16-15-17c1-1%201-2%201-3%200-3-2-5-5-5%20zM33%2036c-3-1-6%200-7%203-1%202%200%205%203%206l6-3%20zM67%2036c3-1%206%200%207%203%201%202%200%205-3%206l-6-3%20zM35%2064c-2%202-3%205-1%207%201%202%204%202%206%201l1-6%20zM65%2064c2%202%203%205%201%207-1%202-4%202-6%201l-1-6%20zM48%2074h4l-1%206c0%201-2%201-2%200%20z%22%20fill%3D%22%2322c55e%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right -50px top -30px;background-size:300px;opacity:0.06;pointer-events:none;z-index:0}.shop-hero>*{position:relative;z-index:1}
footer{position:relative}footer::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22150%22%20viewBox%3D%220%200%20210%20105%22%3E%3Cg%20fill%3D%22%239333ea%22%20stroke%3D%22%239333ea%22%3E%3Cellipse%20cx%3D%2258%22%20cy%3D%2258%22%20rx%3D%2224%22%20ry%3D%2220%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M52%2044%20C44%2034%2046%2022%2056%2018%20C62%2016%2066%2018%2067%2022%22%20fill%3D%22none%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2220%22%20r%3D%227%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M60%2020%20L50%2025%20L57%2026%20Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M54%2076%20L51%2092%20M64%2076%20L66%2092%22%20fill%3D%22none%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28105%2C5%29%22%3E%3Cpath%20d%3D%22M50%2026c-3%200-5%202-5%205c0%201%200%202%201%203c-8%201-15%207-15%2017c0%2011%209%2019%2019%2019s19-8%2019-19c0-10-7-16-15-17c1-1%201-2%201-3%200-3-2-5-5-5%20zM33%2036c-3-1-6%200-7%203-1%202%200%205%203%206l6-3%20zM67%2036c3-1%206%200%207%203%201%202%200%205-3%206l-6-3%20zM35%2064c-2%202-3%205-1%207%201%202%204%202%206%201l1-6%20zM65%2064c2%202%203%205%201%207-1%202-4%202-6%201l-1-6%20zM48%2074h4l-1%206c0%201-2%201-2%200%20z%22%20fill%3D%22%2322c55e%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center top 10px;background-size:220px;opacity:0.05;pointer-events:none;z-index:0}footer>*{position:relative;z-index:1}

.detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:3rem 0;max-width:1200px;margin:0 auto}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.detail-gallery{display:flex;flex-direction:column;gap:.75rem}
.detail-main-img{width:100%;aspect-ratio:1/1;background:var(--dark2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.detail-main-img img{width:100%;height:100%;object-fit:cover}
.detail-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem}
.detail-thumb{aspect-ratio:1/1;border:1.5px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer}
.detail-thumb.active,.detail-thumb:hover{border-color:var(--green)}
.detail-thumb img{width:100%;height:100%;object-fit:cover}
.detail-cat{font-family:'Quicksand',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--green);margin-bottom:.5rem}
.detail h1{font-family:'Quicksand',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#fff;margin-bottom:1rem}
.detail-price{font-family:'Quicksand',sans-serif;font-size:2.2rem;font-weight:700;color:var(--purple);margin:1rem 0}
.detail-meta{display:flex;flex-wrap:wrap;gap:1rem;margin:1.25rem 0;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.detail-meta-item{font-size:.85rem}
.detail-meta-item strong{display:block;color:var(--green);font-family:'Quicksand',sans-serif;font-size:.7rem;letter-spacing:.02em;margin-bottom:.2rem}
.detail-desc{color:var(--light);white-space:pre-wrap;line-height:1.7;margin:1.25rem 0}
.detail-cta{display:flex;gap:.75rem;margin:1.5rem 0;flex-wrap:wrap}
.detail-cta .btn{flex:1;min-width:160px;font-size:1.05rem;padding:1.1rem 1.25rem;letter-spacing:.02em}
.back-link{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 0;color:var(--green);font-family:'Quicksand',sans-serif;font-size:.85rem;letter-spacing:.02em;}
.checkout-note{font-size:.85rem;color:var(--gray);margin-top:1rem;text-align:center}
.coupon-eligibility{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:.85rem 1rem;margin:1rem 0;color:#fbbf24;font-family:'Quicksand',sans-serif;font-weight:600;letter-spacing:.05em}

/* Mobile polish v1 — 44px min tap targets, iPhone 375/414 widths */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .shop-hero { padding: 2rem 0 1rem; }
  .shop-hero h1 { font-size: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .card-body { padding: .65rem; }
  .card-name { font-size: .9rem; }
  .card-price { font-size: 1.05rem; }
  .card-actions { flex-direction: column; gap: .35rem; }
  .btn { min-height: 44px; padding: .8rem .9rem; font-size: .8rem; }
  .cart-link { min-height: 44px; padding: .55rem .85rem !important; }
  .shop-nav a { padding: .5rem .65rem; min-height: 44px; display: inline-flex; align-items: center; }
  .cat-jump a { min-height: 36px; padding: .55rem .85rem; }
  .coupon-banner { font-size: .75rem; padding: .65rem .75rem; line-height: 1.4; }
  #dragon-promo-banner { font-size: .72rem; padding: .55rem .65rem; line-height: 1.4; }
  .cart-line { grid-template-columns: 60px 1fr; gap: .65rem; }
  .cart-line .qty-controls,
  .cart-line .remove-btn { grid-column: 2; justify-self: start; margin-top: .35rem; }
  .cart-line img { width: 60px; height: 60px; }
  .qty-controls button { min-width: 44px; min-height: 44px; }
  .qty-controls input { min-height: 44px; }
  .checkout-btn { min-height: 56px; font-size: 1.05rem; }
  .detail { padding: 1.5rem 0; gap: 1.5rem; }
  .detail h1 { font-size: 1.6rem; }
  .detail-price { font-size: 1.8rem; }
  .detail-cta .btn { min-width: 100%; min-height: 48px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .btn { min-height: 44px; }
}
/* Touch device: bigger card buttons */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .card-actions .btn { padding: .7rem .8rem; }
}

/* brand logo image */
.shop-logo{display:inline-flex;align-items:center;line-height:0}
.shop-logo img{height:140px;width:auto;display:block;filter:drop-shadow(0 2px 9px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(244,114,182,.22))}
@media(max-width:560px){.shop-logo img{height:90px}}

/* friendlier kids-shop polish v2 — calmer, less techy, flamingo pink accent */
#storewide-promo-banner{animation:none!important;background:linear-gradient(90deg,#22c55e,#f472b6)!important;color:#15121a!important;text-transform:none!important;letter-spacing:.01em!important;box-shadow:0 2px 10px rgba(244,114,182,.22)!important}
.detail-cat{color:var(--pink2)}
