/* ===========================================================
   GET ME TODAY — brand tokens
   Bold, playful, bubbly. White canvas, thick black outlines,
   purple→pink gradient accent, pill radii everywhere.
=========================================================== */

:root{
  --ink:        #0d0d0f;
  --paper:      #ffffff;
  --paper-soft: #faf8ff;
  --line:       #0d0d0f;
  --purple:     #7C4DFF;
  --purple-dk:  #5B2FE0;
  --pink:       #FF6FD8;
  --lilac:      #C9B6FF;
  --grad:       linear-gradient(135deg, #8A5CFF 0%, #B96BFF 50%, #FF7AD9 100%);
  --grad-soft:  linear-gradient(135deg, #efe8ff 0%, #fbeaff 100%);
  --shadow-pop: 6px 6px 0 var(--ink);
  --shadow-pop-sm: 3px 3px 0 var(--ink);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:"Baloo 2",system-ui,sans-serif; margin:0; line-height:1.05; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  border:1.5px solid rgba(13,13,15,.15);
  font-weight:600; font-size:15px;
  background:#fff;
  box-shadow:0 1px 2px rgba(13,13,15,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(13,13,15,.08); border-color:rgba(13,13,15,.28); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(124,77,255,.28); }
.btn-primary:hover{ box-shadow:0 8px 24px rgba(124,77,255,.36); }
.btn-amber{
  background:linear-gradient(135deg,#FFD873,#FFAC30);
  color:#2b1a00; border-color:transparent;
  box-shadow:0 4px 16px rgba(255,172,48,.35);
}
.btn-amber:hover{ box-shadow:0 8px 24px rgba(255,172,48,.45); }
.btn-dark{ background:var(--ink); color:#fff; border-color:transparent; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-disabled, .btn:disabled{
  opacity:.45; cursor:not-allowed; pointer-events:none;
  box-shadow:none; transform:none;
}

/* ---------- top announcement bar ---------- */
.announce{
  background:var(--ink); color:#fff; text-align:center;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:8px 12px;
}

/* ---------- social topbar (above header) ---------- */
.topbar{ background:#000; padding:7px 0; }
.topbar .wrap{ display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.topbar a{
  color:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; transition:color .15s ease, transform .15s ease;
}
.topbar a:hover{ color:#fff; transform:translateY(-1px); }
.topbar svg{ width:16px; height:16px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(13,13,15,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap;
}
.logo-link{ display:flex; align-items:center; }
.logo-link img{ height:86px; width:auto; }

.main-nav{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; row-gap:10px; flex:1 1 auto; min-width:0; }
.main-nav a{
  font-weight:600; font-size:14.5px; letter-spacing:.01em;
  position:relative; padding:6px 0; color:#3a3a42;
  transition:color .15s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--grad); border-radius:2px;
  transition:right .2s ease;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid rgba(13,13,15,.12);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(13,13,15,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.icon-btn:hover{
  border-color:var(--purple);
  box-shadow:0 4px 14px rgba(124,77,255,.18);
  transform:translateY(-1px);
}
.icon-btn svg{ width:19px; height:19px; stroke-width:1.8; }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background:var(--ink); color:#fff;
  border:1.5px solid #fff; border-radius:var(--radius-pill);
  font-size:10.5px; font-weight:700; line-height:1;
  min-width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}
.burger{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:url('assets/hero-bg.jpg') center/cover no-repeat;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}
.hero-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%0A%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%2224%22%20height%3D%2216%22%20rx%3D%222%22%20fill%3D%22%23E8362B%22%20stroke%3D%22%238f1f18%22%20stroke-width%3D%221%22/%3E%0A%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%2224%22%20height%3D%227%22%20fill%3D%22%23C4241A%22%20stroke%3D%22%238f1f18%22%20stroke-width%3D%221%22/%3E%0A%3Crect%20x%3D%2215.5%22%20y%3D%2211%22%20width%3D%225%22%20height%3D%2221%22%20fill%3D%22%23FFC531%22%20stroke%3D%22%23c48a00%22%20stroke-width%3D%220.8%22/%3E%0A%3Cpath%20d%3D%22M18%2012%20C12%2012%2010%206%2014.5%205.2%20C17.5%204.6%2018%209%2018%2012%20Z%22%20fill%3D%22%23FFC531%22%20stroke%3D%22%23c48a00%22%20stroke-width%3D%220.8%22/%3E%0A%3Cpath%20d%3D%22M18%2012%20C24%2012%2026%206%2021.5%205.2%20C18.5%204.6%2018%209%2018%2012%20Z%22%20fill%3D%22%23FFC531%22%20stroke%3D%22%23c48a00%22%20stroke-width%3D%220.8%22/%3E%0A%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%222.2%22%20fill%3D%22%23FFC531%22%20opacity%3D%220.85%22/%3E%0A%3C/svg%3E") 8 4, auto;
}
.trust-text .stars{ color:#FFD166; margin-left:4px; }

/* ---------- hero floating overlays ---------- */
.hero-badge{
  position:absolute; top:20px; left:20px; z-index:5;
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
}
.hero-badge .trust-avatars{ display:flex; }
.hero-badge .trust-avatars img{
  width:46px; height:46px; border-radius:50%;
  object-fit:cover;
  border:2.5px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  margin-left:-13px;
}
.hero-badge .trust-avatars img:first-child{ margin-left:0; }
.hero-badge-title{
  color:#fff; font-size:16px; font-weight:800; line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  max-width:190px;
}
.hero-badge-text{
  color:rgba(255,255,255,.85); font-size:11px; font-weight:600; line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.hero-badge-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:700;
  padding:9px 18px; border-radius:var(--radius-pill);
  text-decoration:none;
  animation:heartbeat 1.6s ease-in-out infinite;
}
.hero-badge-btn:hover{ animation-play-state:paused; transform:translateY(-1px); }
@keyframes heartbeat{
  0%, 100% { transform:scale(1); }
  15% { transform:scale(1.08); }
  30% { transform:scale(1); }
  45% { transform:scale(1.06); }
  60% { transform:scale(1); }
}

.hero-trend-card{
  position:absolute; bottom:20px; right:20px; z-index:5;
  display:flex; flex-direction:column;
  width:150px;
  background:rgba(20,10,40,.35);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(20,0,60,.3);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.hero-trend-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(20,0,60,.32);
}
.hero-trend-media{
  width:100%; aspect-ratio:1/1;
  background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:44px;
  overflow:hidden;
}
.hero-trend-media img{ width:100%; height:100%; object-fit:cover; }
.hero-trend-info{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px 12px;
}
.hero-trend-label{
  font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#FFD166;
}
.hero-trend-title{
  font-size:12.5px; font-weight:700; line-height:1.25;
  color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-trend-price{ font-size:13px; font-weight:800; color:#fff; }

@media (max-width: 680px){
  .hero-badge{ top:12px; left:12px; gap:8px; }
  .hero-badge .trust-avatars img{ width:34px; height:34px; margin-left:-10px; }
  .hero-badge-title{ font-size:13px; max-width:150px; }
  .hero-badge-text{ font-size:10px; }
  .hero-badge-btn{ font-size:11.5px; padding:7px 14px; }
  .hero-trend-card{ bottom:12px; right:12px; width:118px; }
  .hero-trend-media{ font-size:32px; }
  .topbar{ padding:8px 0; }
  .topbar .wrap{ gap:16px; }
  .topbar a{ width:30px; height:30px; }
  .topbar svg{ width:20px; height:20px; }
}

/* ---------- section headings ---------- */
.section{ padding:64px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:32px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.4vw,40px); font-weight:800; }
.section-head .sub{ color:#5a5a63; font-weight:600; font-size:15px; margin-top:6px; }

/* ---------- category pills ---------- */
.cat-row-wrap{ position:relative; }
.cat-row{
  display:flex; gap:12px; overflow-x:auto; overflow-y:visible;
  padding:4px 4px 8px; margin:-4px -4px 0;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cat-row::-webkit-scrollbar{ display:none; }
.cat-chip{ scroll-snap-align:start; }
.cat-row-hint{
  display:none;
  position:absolute; top:0; right:0; bottom:8px; width:44px;
  align-items:center; justify-content:flex-end;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--paper) 65%);
  pointer-events:none;
  color:var(--purple);
}
.cat-row-hint svg{ width:20px; height:20px; animation:swipe-hint 1.4s ease-in-out infinite; }
@keyframes swipe-hint{
  0%, 100% { transform:translateX(0); opacity:.6; }
  50% { transform:translateX(4px); opacity:1; }
}
.cat-chip{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:8px 20px 8px 8px;
  border:1px solid rgba(13,13,15,.1); border-radius:var(--radius-pill);
  background:#fff; font-weight:600; font-size:14px; color:#3a3a42;
  box-shadow:0 1px 2px rgba(13,13,15,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cat-chip:hover{
  border-color:var(--purple);
  box-shadow:0 6px 18px rgba(124,77,255,.14);
  transform:translateY(-1px);
}
.cat-chip .dot{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--grad-soft);
}
.cat-chip.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(124,77,255,.35); }
.cat-chip.active .dot{ background:rgba(255,255,255,.2); }

/* ---------- product grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  border:1px solid rgba(13,13,15,.08);
  border-radius:20px;
  background:#fff;
  box-shadow:0 1px 3px rgba(13,13,15,.05);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(20,0,60,.12);
  border-color:rgba(124,77,255,.25);
}
.card-media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  color:var(--purple-dk); font-weight:700; font-size:10.5px;
  padding:5px 11px; border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(13,13,15,.08);
}
.card-wish{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border:1px solid rgba(13,13,15,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.card-body{ padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-cat{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9a9aa4; }
.card-title{ font-size:15px; font-weight:600; line-height:1.3; color:var(--ink); }
.card-price-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; }
.card-price{ font-size:17px; font-weight:700; }
.card-price .was{ font-size:12.5px; font-weight:500; color:#b0b0b8; text-decoration:line-through; margin-right:6px; }
.add-btn{
  width:36px; height:36px; border-radius:50%;
  border:none; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:background .15s ease, transform .15s ease;
}
.add-btn:hover{ background:var(--purple); transform:scale(1.08); }
.view-all-row{ display:flex; justify-content:flex-end; margin-top:28px; }
.btn-lg{ padding:16px 36px; font-size:16px; }

/* ---------- legal pages ---------- */
.legal-body{ color:#3a3a42; font-size:15px; line-height:1.7; }
.legal-body .legal-updated{ color:#8a8a92; font-size:13px; font-weight:600; margin-bottom:24px; }
.legal-body h3{ font-family:"Inter",sans-serif; font-size:17px; font-weight:700; color:var(--ink); margin:28px 0 10px; }
.legal-body p{ margin-bottom:14px; }
.legal-body ul{ margin:0 0 14px; padding-left:22px; list-style:disc; }
.legal-body li{ margin-bottom:8px; }
.legal-body a{ color:var(--purple-dk); font-weight:600; text-decoration:underline; }

/* ---------- WhatsApp floating chat button (branded) ---------- */
.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; z-index:80;
  width:62px; height:62px; border-radius:50%;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(124,77,255,.4);
  transition:transform .15s ease, box-shadow .15s ease;
  padding:6px;
}
.whatsapp-fab:hover{ transform:scale(1.08); box-shadow:0 12px 30px rgba(124,77,255,.5); }
.whatsapp-fab img{ width:100%; height:100%; object-fit:contain; }
.whatsapp-fab-inner{
  width:100%; height:100%; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:7px;
}
.whatsapp-fab-badge{
  position:absolute; bottom:-2px; right:-2px;
  width:24px; height:24px; border-radius:50%;
  background:#25D366; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:680px){
  .whatsapp-fab{ width:54px; height:54px; bottom:16px; right:16px; }
  .whatsapp-fab-badge{ width:20px; height:20px; }
  .whatsapp-fab-badge svg{ width:11px; height:11px; }
}

/* ---------- marquee ---------- */
.marquee{
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  background:var(--ink); color:#fff;
  overflow:hidden; white-space:nowrap; padding:14px 0;
}
.marquee-track{ display:inline-flex; gap:40px; animation:scroll-left 22s linear infinite; }
.marquee-track span{ font-weight:800; font-size:18px; letter-spacing:.02em; }
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- perks ---------- */
.perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.perk{
  border:3px solid var(--ink); border-radius:var(--radius-lg);
  padding:22px; background:var(--paper-soft);
  display:flex; flex-direction:column; gap:10px;
}
.perk .ic{
  width:44px; height:44px; border-radius:50%;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  font-size:20px; border:2px solid var(--ink);
}
.perk h4{ font-size:16px; font-weight:800; }
.perk p{ font-size:14px; color:#55555e; font-weight:500; }

/* ---------- newsletter ---------- */
.newsletter{
  border:3px solid var(--ink); border-radius:var(--radius-xl);
  background:var(--grad);
  padding:48px; text-align:center; color:#fff;
  box-shadow:var(--shadow-pop);
}
.newsletter h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:10px; }
.newsletter p{ opacity:.9; font-weight:600; margin-bottom:24px; }
.newsletter-form{ display:flex; gap:10px; max-width:440px; margin:0 auto; }
.newsletter-form input{
  flex:1; padding:14px 18px; border-radius:var(--radius-pill);
  border:3px solid var(--ink); font-size:15px; font-weight:600;
}
.newsletter-form button{
  padding:14px 24px; border-radius:var(--radius-pill);
  border:3px solid var(--ink); background:var(--ink); color:#fff;
  font-weight:800;
}

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#fff; padding:56px 0 24px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-brand img{ height:52px; margin-bottom:14px; }
.footer-brand p{ color:#b9b9c4; font-size:14px; font-weight:500; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition:background .15s ease, transform .15s ease;
}
.footer-social a:hover{ background:var(--grad); transform:translateY(-2px); border-color:transparent; }
.footer-social svg{ width:18px; height:18px; }
.footer-col h5{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; color:#fff; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:#c9c9d4; font-size:14px; font-weight:500; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid #2a2a30; padding-top:20px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  color:#8a8a95; font-size:13px; font-weight:500;
}
.pay-icons{ display:flex; gap:8px; }
.pay-icons span{
  border:1px solid #3a3a42; border-radius:6px; padding:4px 8px;
  font-size:11px; font-weight:700; color:#c9c9d4;
}
.footer-credit{
  text-align:center; padding:14px 0 0; margin-top:6px;
  border-top:1px solid #22222a;
  font-size:12px; color:#6a6a74;
}
.footer-credit a{ color:#9a9aa4; font-weight:600; text-decoration:none; }
.footer-credit a:hover{ color:#fff; }

/* ---------- cart drawer ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(13,13,15,.35);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(400px,100%);
  background:#fff;
  border-left:1px solid rgba(13,13,15,.08);
  box-shadow:-24px 0 60px rgba(13,13,15,.08);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  z-index:95;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid rgba(13,13,15,.08);
}
.cart-head h3{ font-size:17px; font-weight:700; letter-spacing:.01em; }
.cart-close{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(13,13,15,.12);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
  color:#55555e; transition:border-color .15s ease, color .15s ease;
}
.cart-close:hover{ border-color:var(--ink); color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; padding:8px 24px; display:flex; flex-direction:column; }
.cart-empty{ text-align:center; padding:70px 20px; color:#9a9aa4; font-weight:500; font-size:14px; }
.cart-line{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(13,13,15,.06); }
.cart-line img{ width:64px; height:64px; border-radius:14px; object-fit:cover; background:var(--paper-soft); }
.cart-line-info{ flex:1; display:flex; flex-direction:column; gap:3px; }
.cart-line-title{ font-weight:600; font-size:13.5px; color:var(--ink); }
.cart-line-price{ font-weight:700; font-size:13.5px; color:#55555e; }
.cart-line-qty{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.qty-btn{
  width:24px; height:24px; border-radius:50%; border:1px solid rgba(13,13,15,.15);
  background:#fff; font-weight:600; font-size:13px; color:#3a3a42;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease;
}
.qty-btn:hover{ border-color:var(--purple); color:var(--purple); }
.cart-line-remove{ font-size:11.5px; font-weight:600; color:#b0b0b8; margin-top:6px; align-self:flex-start; text-decoration:none; transition:color .15s ease; }
.cart-line-remove:hover{ color:#c22; }
.cart-foot{ border-top:1px solid rgba(13,13,15,.08); padding:20px 24px 24px; display:flex; flex-direction:column; gap:14px; }
.cart-subtotal{ display:flex; justify-content:space-between; font-weight:700; font-size:15px; }
.cart-note{ font-size:11.5px; color:#a0a0a8; font-weight:500; text-align:center; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 22px;
  border-radius:var(--radius-pill); font-weight:700; font-size:14px;
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:120;
  border:2px solid #fff;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- page header (shop/product/etc) ---------- */
.page-hero{
  background:var(--grad-soft); border-bottom:3px solid var(--ink);
  padding:40px 0;
}
.breadcrumb{ font-size:13px; font-weight:700; color:#5a5a63; margin-bottom:8px; }
.breadcrumb a:hover{ color:var(--purple-dk); }
.page-hero h1{ font-size:clamp(28px,4vw,44px); font-weight:800; }

/* ---------- shop layout ---------- */
.shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; }
.filters{
  border:3px solid var(--ink); border-radius:var(--radius-lg);
  padding:20px; position:sticky; top:96px;
}
.filters h4{ font-size:14px; font-weight:800; text-transform:uppercase; margin-bottom:12px; }
.filter-group{ margin-bottom:22px; }
.filter-opt{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:8px; }
.filter-opt input{ width:16px; height:16px; }
.price-inputs{ display:flex; gap:8px; align-items:center; }
.price-inputs input{ width:100%; padding:8px 10px; border:2px solid var(--ink); border-radius:10px; font-size:13px; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.result-count{ font-weight:700; font-size:14px; color:#55555e; }
.sort-select{
  padding:10px 14px; border:2px solid var(--ink); border-radius:var(--radius-pill);
  font-weight:700; font-size:13px; background:#fff;
}

/* ---------- product page ---------- */
.product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.product-gallery-main{
  border:3px solid var(--ink); border-radius:var(--radius-xl);
  aspect-ratio:1/1; overflow:hidden; background:var(--grad-soft);
  box-shadow:var(--shadow-pop);
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.product-thumbs{ display:flex; gap:10px; margin-top:14px; }
.product-thumbs img{ width:70px; height:70px; border-radius:12px; border:2px solid var(--ink); object-fit:cover; opacity:.6; }
.product-thumbs img.active{ opacity:1; box-shadow:0 0 0 2px var(--purple); }
.product-info .badge{
  display:inline-block; background:var(--pink); border:2px solid var(--ink);
  padding:5px 14px; border-radius:var(--radius-pill); font-weight:800; font-size:12px; margin-bottom:14px;
}
.product-info h1{ font-size:clamp(26px,3vw,36px); font-weight:800; margin-bottom:10px; }
.product-price{ font-size:28px; font-weight:800; margin-bottom:16px; }
.product-price .was{ font-size:16px; color:#9a9aa2; text-decoration:line-through; font-weight:600; margin-right:10px; }
.product-desc{ color:#44444c; font-weight:500; line-height:1.6; margin-bottom:24px; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.qty-stepper{ display:flex; align-items:center; border:3px solid var(--ink); border-radius:var(--radius-pill); overflow:hidden; }
.qty-stepper button{ width:44px; height:44px; background:#fff; font-weight:800; font-size:18px; }
.qty-stepper span{ width:40px; text-align:center; font-weight:800; }
.product-ctas{ display:flex; gap:12px; margin-bottom:24px; }
.trust-row{ display:flex; gap:20px; flex-wrap:wrap; font-size:13px; font-weight:700; color:#44444c; }
.trust-row span{ display:flex; align-items:center; gap:6px; }
.accordion{ margin-top:28px; border-top:2px solid #eee; }
.accordion-item{ border-bottom:2px solid #eee; }
.accordion-item summary{ padding:16px 0; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item div{ padding-bottom:16px; color:#55555e; font-weight:500; line-height:1.6; font-size:14px; }

/* ---------- checkout / success ---------- */
.simple-page{ padding:80px 0; text-align:center; }
.simple-page .ic-big{ font-size:64px; margin-bottom:16px; }
.simple-page h1{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.simple-page p{ color:#55555e; font-weight:600; max-width:480px; margin:0 auto 28px; }
.order-summary{
  max-width:420px; margin:0 auto 32px; text-align:left;
  border:3px solid var(--ink); border-radius:var(--radius-lg); padding:20px;
}

/* ---------- responsive ---------- */

/* Tablet */
@media (max-width: 980px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .perks{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .shop-layout{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .product-layout{ grid-template-columns:1fr; gap:28px; }
  .product-gallery-main{ max-width:520px; margin:0 auto; }
  .comparison-table{ overflow-x:auto; }
  .cat-row-hint{ display:flex; }
}

/* Mobile */
@media (max-width: 680px){
  /* mobile dropdown nav, opened by the burger button */
  .site-header .wrap{ position:relative; }
  .burger{ display:flex; z-index:2; }
  .main-nav{
    display:none;
    position:absolute; top:calc(100% + 1px); left:0; right:0;
    background:#fff; border:1px solid rgba(13,13,15,.08); border-radius:16px;
    box-shadow:0 16px 40px rgba(20,0,60,.14);
    flex-direction:column; align-items:flex-start; gap:2px;
    padding:10px; margin-top:8px; z-index:40;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ width:100%; padding:11px 12px; border-radius:10px; }
  .main-nav a:hover{ background:var(--paper-soft); }
  .main-nav a::after{ display:none; }

  .logo-link img{ height:64px; }
  .hero-eyebrow{ font-size:12px; }

  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .section{ padding:40px 0; }
  .section-head{ gap:10px; }
  .perks{ grid-template-columns:1fr 1fr; gap:14px; }
  .perk{ padding:18px; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; row-gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .pay-icons{ flex-wrap:wrap; }

  .cat-chip{ font-size:13px; padding:7px 16px 7px 7px; }
  .cat-chip .dot{ width:28px; height:28px; font-size:13px; }

  .card-title{ font-size:13.5px; }
  .card-price{ font-size:15px; }
  .card-body{ padding:12px; }

  .shop-layout{ gap:20px; }
  .toolbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sort-select{ width:100%; }

  .product-info h1{ font-size:26px; }
  .product-price{ font-size:24px; }
  .product-ctas{ flex-direction:column; }
  .qty-row{ flex-wrap:wrap; }
  .trust-row{ gap:10px 16px; }

  .legal-body{ font-size:14px; }
  .page-hero h1{ font-size:26px; }

  .cart-drawer{ width:100%; }

  .footer-credit{ font-size:11px; }
}

/* Very small phones */
@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr; row-gap:28px; }
}
@media (max-width: 380px){
  .grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .hero-trend-card{ width:104px; }
  .hero-badge{ max-width:150px; }
  .logo-link img{ height:52px; }
}