:root{--pink:#ff5ecb;--pink-2:#ffa7e6;--ink:#0f0f14;--card:rgba(17,17,24,.72);--glass:rgba(255,255,255,.06)}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#fff;background:#0a0a0f;overflow-x:hidden}

/* Background */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.55);z-index:-2}
.backdrop{position:fixed;inset:0;background:
radial-gradient(1200px 500px at 20% -10%, rgba(255,94,203,.25), transparent),
radial-gradient(900px 400px at 100% 0%, rgba(255,167,230,.15), transparent);z-index:-1}

/* Header / hero */
.site-header{position:sticky;top:0;display:flex;align-items:center;gap:12px;padding:10px 20px;background:linear-gradient(to bottom, rgba(10,10,15,.85), rgba(10,10,15,.25) 70%, transparent);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.env-badge{margin-left:auto;font-size:12px;padding:4px 8px;border:1px dashed rgba(255,255,255,.3);border-radius:999px;opacity:.7}
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 16px 0}
.hero-logo{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,94,203,.35))}
.hero-title{margin:12px 0 6px;font-weight:900;letter-spacing:.4px;font-size:40px;text-shadow:0 0 32px rgba(255,94,203,.35)}
.hero-sub{margin:0 0 12px;color:#f5e9f5;opacity:.8}

/* Tabs */
.tabs{display:flex;gap:10px;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(17,17,24,.85), rgba(17,17,24,.55));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:8px;margin:12px auto 14px;max-width:840px;box-shadow:0 2px 14px rgba(255,94,203,.12)}
.tab{appearance:none;border:none;cursor:pointer;padding:10px 14px;border-radius:12px;color:#fff;font-weight:800;letter-spacing:.2px;background:transparent}
.tab:hover{background:rgba(255,255,255,.06)}
.tab.active{color:#0f0310;background:linear-gradient(90deg,var(--pink),var(--pink-2));box-shadow:0 6px 16px rgba(255,94,203,.28)}

/* Layout */
.container{max-width:1200px;margin:8px auto 120px;padding:0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;min-height:60px}
.hidden{display:none}
.loadstate{opacity:.85;text-align:center;margin:18px 0}

/* Card – centered layout */
.card{background:var(--card);border:1.5px solid rgba(255,255,255,.10);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .18s, box-shadow .18s, border-color .18s}
.card:hover{transform:translateY(-3px);border-color:rgba(255,94,203,.35);box-shadow:0 18px 42px rgba(255,94,203,.18), inset 0 0 0 1px rgba(255,94,203,.15)}
.glow{box-shadow:0 2px 20px rgba(255,94,203,.09)}
.thumb{width:min(48%,220px);aspect-ratio:1/1;object-fit:contain;background:transparent;margin:18px auto 6px;display:block}
.card-body{width:100%;padding:12px 16px 16px}
.card-title{margin:4px 0 8px;font-size:18px;font-weight:900}
.hint{margin:0 0 10px;font-size:12px;opacity:.8}
.price-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 10px}
.price{font-weight:900;font-size:19px}
.qty{display:inline-flex;align-items:center;gap:6px;background:var(--glass);padding:6px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}
.btn{appearance:none;border:0;background:rgba(255,94,203,.18);color:#fff;font-weight:900;width:30px;height:30px;border-radius:8px;cursor:pointer;transition:transform .06s}
.btn:active{transform:scale(.96)}
.qty-input{width:56px;background:transparent;border:0;color:#fff;text-align:center;font-weight:800}
.add-btn{width:88%;padding:12px 14px;margin:6px auto 4px;font-weight:900;background:linear-gradient(90deg,var(--pink),var(--pink-2));border:none;border-radius:14px;color:#0f0310;cursor:pointer}
.add-btn:hover{filter:brightness(1.08)}
.card:hover .thumb{animation:shimmer 1.2s ease}
@keyframes shimmer{from{filter:brightness(1)}50%{filter:brightness(1.25)}to{filter:brightness(1)}}

/* Cart */
.cart{position:fixed;right:16px;bottom:16px;width:min(420px,90vw);background:rgba(15,11,16,.82);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(255,94,203,.22)}
.cart h3{margin:0 0 8px}
.cart-line{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.10)}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding-top:8px;font-size:18px}

/* Section head — centered (no emojis) */
.section-head{max-width:1000px;margin:40px auto 14px;padding:0 16px}
.section-head.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.section-head h2{margin:0 0 6px;font-size:28px;font-weight:900;text-shadow:0 0 24px rgba(255,94,203,.25)}
.section-head .sub{margin:0;color:#e9d7ea;opacity:.85}

/* FAQ */
.faq-wrap{max-width:1000px;margin:20px auto 50px;padding:0 16px}
.faq-item{background:rgba(17,17,24,.78);border:1px solid rgba(255,255,255,.1);border-radius:14px;margin:10px 0;overflow:hidden}
.faq-item[open]{box-shadow:0 14px 36px rgba(255,94,203,.16)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"▾";opacity:.85;transition:transform .15s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-body{padding:0 18px 16px 18px;opacity:.95}
.faq-body a{color:#ffa7e6;text-decoration:underline}

/* Reviews */
.reviews-wrap{max-width:1200px;margin:10px auto 90px;padding:0 16px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.review-card{background:rgba(17,17,24,.8);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;box-shadow:0 6px 26px rgba(255,94,203,.14)}
.review-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.avatar{width:36px;height:36px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#0f0310;font-weight:900;display:flex;align-items:center;justify-content:center}
.meta .name{font-weight:900}
.meta .stars{font-size:14px;letter-spacing:1px}
.meta .when{opacity:.65;font-size:12px}
.review-text{margin:8px 0 10px;opacity:.95}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}

/* === Bottom Stats Ribbon === */
.stats-ribbon{max-width:1200px;margin:8px auto 140px;padding:0 16px}
.stats-inner{
  background:rgba(17,17,24,.86);
  border-radius:18px;
  padding:22px 28px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 2px rgba(255,94,203,.16) inset,
    0 18px 44px rgba(255,94,203,.18),
    0 4px 18px rgba(0,0,0,.35);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.stat .big{
  font-weight:900;
  font-size:42px;
  line-height:1;
  letter-spacing:.5px;
  background:linear-gradient(90deg,var(--pink),var(--pink-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 24px rgba(255,94,203,.21);
}
.stat .label{opacity:.9;margin-top:6px;letter-spacing:.3px}
@media (max-width:760px){
  .stats-inner{grid-template-columns:1fr;gap:10px}
}
/* ===== Policy notice above FAQ ===== */
.policy-notice{
  max-width:1200px;margin:32px auto 10px;padding:10px 14px;
  text-align:center;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.25)
}
.policy-notice a{font-weight:800;text-decoration:underline;color:var(--pink-2)}

/* ===== Policy page ===== */
.policy-wrap{max-width:920px;margin:40px auto 120px;padding:0 18px}
.policy-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.back-link{align-self:flex-start;opacity:.8}
.policy-logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,94,203,.35))}
.policy-title{margin:4px 0 0;font-weight:900;letter-spacing:.3px;text-shadow:0 0 28px rgba(255,94,203,.22)}
.policy-sub{margin:0 0 14px;opacity:.9}

.policy-card{
  background:rgba(17,17,24,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px;
  box-shadow:
    0 0 0 2px rgba(255,94,203,.16) inset,
    0 18px 44px rgba(255,94,203,.18),
    0 4px 18px rgba(0,0,0,.35);
}
.pol-block{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid var(--pink);
  border-radius:14px;
  padding:16px 16px;
  margin:12px 0;
}
.pol-heading{margin:0 0 6px;font-weight:900}
.pol-body{margin:0;opacity:.95;line-height:1.55}

.policy-footer{display:flex;justify-content:center;margin-top:18px}
.btn-primary{
  display:inline-block;padding:10px 16px;border-radius:12px;font-weight:800;border:none;
  background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#0f0310;text-decoration:none
}
.btn-primary:hover{filter:brightness(1.08)}
/* ===== Floating cart panel ===== */
.cart{position:fixed;right:16px;bottom:16px;width:min(420px,92vw);max-height:70vh;overflow:auto;
  background:rgba(15,11,16,.88);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px;backdrop-filter:blur(6px);
  box-shadow:0 10px 40px rgba(255,94,203,.22);transform:translateY(140%);transition:transform .25s}
.cart.open{transform:translateY(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cart-x{background:transparent;border:0;font-size:20px;color:#fff;cursor:pointer;opacity:.8}
.cart-items{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.cart-line{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.cart-line-right{display:flex;align-items:center;gap:10px}
.line-x{background:#2a1626;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:8px;cursor:pointer;padding:4px 8px}
.cart-actions{display:flex;flex-direction:column;gap:8px}
.btn-primary{padding:10px 12px;font-weight:800;background:linear-gradient(90deg,var(--pink),var(--pink-2));border:none;border-radius:12px;color:#0f0310;cursor:pointer}
.btn-danger{padding:10px 12px;font-weight:800;background:#e24a6b;border:none;border-radius:12px;color:#fff;cursor:pointer}
.btn-ghost{padding:10px 12px;font-weight:800;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:12px;color:#fff;cursor:pointer}
.cart-fab{position:fixed;right:20px;bottom:20px;border:none;border-radius:999px;width:46px;height:46px;background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#0f0310;font-size:20px;cursor:pointer;box-shadow:0 8px 26px rgba(255,94,203,.25)}
.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:18px}

/* ===== Modal (TOS before checkout) ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:60}
.modal{width:min(560px,92vw);background:#121018;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 16px 12px}
.check-row{display:flex;align-items:flex-start;gap:10px;margin:10px 0}
.warn{margin-top:6px;background:#2a1626;border-left:4px solid var(--pink);padding:10px;border-radius:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

/* ===== Cards: centered layout ===== */
.card.tall .thumb.big{height:180px}

/* ===== Checkout ===== */
.checkout-wrap{max-width:1100px;margin:36px auto 120px;padding:0 18px}
.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.pane{background:rgba(17,17,24,.82);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px}
.field{display:flex;flex-direction:column;margin:10px 0}
.field input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff}
.order-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.order-line{display:flex;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.order-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin:6px 0 10px}
.small-note{font-size:12px;opacity:.75;margin-bottom:8px}

/* Minor helpers */
.center{text-align:center}
.xl{font-size:40px}
.muted{opacity:.75}
.pill-tabs{display:flex;gap:8px;justify-content:center;margin-top:10px}
.pill{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.pill.active{background:linear-gradient(90deg,var(--pink),var(--pink-2));color:#0f0310;border-color:transparent}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card.tall{display:flex;flex-direction:column}
.card-body.center{display:flex;flex-direction:column;align-items:center}
.price-row.center{margin:6px 0}
.qty.center{gap:6px}
.faq-wrap.center{max-width:1100px;margin:30px auto}
.stats-bar{max-width:1100px;margin:30px auto 120px;padding:14px;border-radius:16px;background:rgba(15,11,16,.82);border:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat .num{font-size:28px;font-weight:900}
.stat .lbl{opacity:.7;font-size:12px}
/* --- Fix: honor [hidden] everywhere (prevents TOS modal showing on page load) --- */
[hidden]{ display:none !important; }
.modal-mask[hidden]{ display:none !important; }
/* ===== UI hotfix: restore centered hero + tabs, clamp logo size, keep pink vibe ===== */

/* Ensure any element using the HTML [hidden] attribute actually hides */
[hidden]{ display:none !important; }

/* Hero wrapper variants we may have used */
.hero, .hero-wrap, .brand-hero, .brandbar {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:center !important;
  margin:40px auto 10px !important;
}

/* Keep the logo small and pretty (prevents the huge donut) */
img.logo, .hero img.logo, .brandbar img.logo {
  width:72px !important;
  height:72px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 12px rgba(255,94,203,.45));
}

/* Title + tagline look */
.brand, .brand h1, .hero .brand {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 4px 0 6px !important;
  text-shadow: 0 0 24px rgba(255,94,203,.35);
}
.tagline, .hero .tagline {
  opacity:.9 !important;
  margin: 0 0 6px !important;
}

/* Segmented category tabs centered under the title */
.nav-tabs, .segmented, .tabs {
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
}
.nav-tabs button, .segmented .seg, .tabs button {
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:#fff;
  font-weight:800;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
}
.nav-tabs button.active, .segmented .seg.active, .tabs button.active {
  background: linear-gradient(90deg, var(--pink), var(--pink-2));
  color:#0f0310;
  box-shadow: 0 6px 22px rgba(255,94,203,.25);
}

/* Extra guard: if any oversized hero art sneaks in, hide it */
.hero-graphic, .hero-art, .mascot, .big-logo, .hero img:not(.logo)[src*="logo"] {
  display:none !important;
}
/* ====  Hero (centered) — restore look, keep everything else the same  ==== */
.site-header{
  position:relative;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:28px 16px 10px;
  background:linear-gradient(to bottom, rgba(10,10,15,.88), rgba(10,10,15,.38) 65%, transparent);
  border:0;
}
.site-header > img.logo{
  width:78px; height:78px; object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 0 14px rgba(255,94,203,.45));
}
.site-header .brand{
  margin:0;
  font-weight:800;
  font-size:44px;
  letter-spacing:.25px;
  text-align:center;
}
.site-header .subtitle{
  margin:0 0 6px 0;
  text-align:center;
  opacity:.88;
}

/* Segmented category tabs (centered) */
.site-header .segmented, 
.site-header .tabs, 
.site-header .category-tabs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  margin:6px auto 0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,94,203,.12);
}
.site-header .segmented button, 
.site-header .tabs button, 
.site-header .category-tabs button{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  opacity:.85;
  transition:opacity .15s, transform .05s, background .15s;
}
.site-header .segmented button:hover,
.site-header .tabs button:hover,
.site-header .category-tabs button:hover{ opacity:1 }
.site-header .segmented button:active,
.site-header .tabs button:active,
.site-header .category-tabs button:active{ transform:scale(.98) }

.site-header .segmented .active, 
.site-header .tabs .active, 
.site-header .category-tabs .active{
  background:linear-gradient(90deg,var(--pink),var(--pink-2));
  color:#0f0310;
  opacity:1;
}

/* Make sure no oversized artwork sneaks into the header */
.site-header img:not(.logo){ max-width:96px; height:auto }

/* Keep the rest of the page exactly as-is */
.back-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#fff;text-decoration:none;font-weight:800;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(255,94,203,.20);
  transition:box-shadow .15s,border-color .15s,transform .05s;
}
.back-pill:hover{border-color:rgba(255,94,203,.55);box-shadow:0 14px 36px rgba(255,94,203,.30)}
.back-pill:active{transform:translateY(1px)}

/* Stock UI */ .stock-row{margin-top:6px;font-size:12px}.add-btn[disabled]{opacity:.45;cursor:not-allowed}

/* OOS line (only shown when item is unavailable) */ .stock-row{margin-top:6px;font-size:12px}


/* Show a subtle OOS line only when unavailable */ .stock-row{margin-top:6px;font-size:12px}


/* Hide any stock display rows */ .stock-row{display:none!important}


/* subtle OOS line for unavailable items */ .stock-row{margin-top:6px;font-size:12px}