/* =====================================================================
   New Skin · Cosmetics & Perfumery — central stylesheet
   All component styling lives here. Dynamic per-element values
   (product tints, avatar gradients) are passed in from the markup
   as the `--tint` custom property.
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root{
  --background:oklch(0.985 0.012 95);
  --foreground:oklch(0.25 0.03 255);
  --card:oklch(1 0 0);
  --card-foreground:oklch(0.20 0.04 150);
  --brand:#15E307;                  /* exact client brand green */
  --primary:#15E307;                /* used for fills, accents & green text */
  --primary-ink:#0a8f06;            /* deeper shade for green text on light bg (legibility) */
  --primary-foreground:#06330a;     /* dark text shown on the bright green */
  --secondary:oklch(0.81 0.07 85);
  --secondary-foreground:oklch(0.27 0.03 255);
  --muted:oklch(0.94 0.015 95);
  --muted-foreground:oklch(0.46 0.02 250);
  --accent:oklch(0.95 0.06 143);
  --border:oklch(0.90 0.015 250);
  --input:oklch(0.92 0.015 250);
  --ring:#15E307;
  --sun:oklch(0.74 0.13 80);
  --leaf:#15E307;
  --radius:0.75rem;
  --font-display:"Fraunces","Source Serif 4",Georgia,serif;
  --font-body:"Plus Jakarta Sans","Work Sans",system-ui,sans-serif;
  --maxw:1200px;
}

/* ----------------------------- Base ----------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--background); color:var(--foreground);
  font-family:var(--font-body); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none; color:inherit;}
button{font-family:inherit;}
h1,h2{font-family:var(--font-display);}

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

/* ----------------------------- Buttons ----------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; border-radius:var(--radius); font-weight:600; font-size:14px;
  cursor:pointer; border:1px solid transparent; line-height:1;
  height:42px; padding:0 18px;
  transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px);}
.btn-lg{height:50px; padding:0 26px; font-size:15px;}
.btn-sm{height:40px;}
.btn-default{background:var(--primary); color:var(--primary-foreground);}
.btn-default:hover{background:color-mix(in oklab,var(--primary) 88%,#000);}
.btn-outline{background:var(--card); color:var(--foreground); border-color:var(--border);}
.btn-outline:hover{background:var(--accent); border-color:color-mix(in oklab,var(--primary) 30%,var(--border));}
.btn-full{width:100%;}

/* ----------------------------- Keyframes / scrollbars --------------- */
@keyframes nsToast{from{opacity:0;transform:translate(-50%,16px);}to{opacity:1;transform:translate(-50%,0);}}
@keyframes nsOverlay{from{opacity:0;}to{opacity:1;}}
@keyframes nsDrawer{from{transform:translateX(100%);}to{transform:translateX(0);}}
.ns-scroll::-webkit-scrollbar{height:6px;width:6px;}
.ns-scroll::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--primary) 30%,transparent);border-radius:99px;}

/* ----------------------------- Bottle illustration ----------------- */
.bottle{position:relative; display:flex; flex-direction:column; align-items:center;}
.bottle-cap{border-radius:7px 7px 3px 3px; background:color-mix(in oklab,var(--primary) 34%,transparent);}
.bottle-neck{background:color-mix(in oklab,var(--primary) 34%,transparent);}
.bottle-body{
  flex:1; border:2.2px solid color-mix(in oklab,var(--primary) 46%,transparent);
  background:color-mix(in oklab,var(--primary) 12%,transparent);
  display:flex; align-items:flex-end; justify-content:center;
}
.bottle-line{height:2px; background:color-mix(in oklab,var(--primary) 34%,transparent);}

.bottle--hero{width:150px; height:226px;}
.bottle--hero .bottle-cap{width:52px; height:30px;}
.bottle--hero .bottle-neck{width:26px; height:16px;}
.bottle--hero .bottle-body{width:150px; border-width:2.4px; border-radius:26px; padding-bottom:34px;}
.bottle--hero .bottle-line{width:94px;}

.bottle--detail{width:128px; height:196px;}
.bottle--detail .bottle-cap{width:46px; height:26px;}
.bottle--detail .bottle-neck{width:23px; height:14px;}
.bottle--detail .bottle-body{width:128px; border-radius:22px; padding-bottom:28px;}
.bottle--detail .bottle-line{width:80px;}

.bottle--card{width:74px; height:108px;}
.bottle--card .bottle-cap{width:26px; height:15px; border-radius:5px 5px 2px 2px;}
.bottle--card .bottle-neck{width:13px; height:9px;}
.bottle--card .bottle-body{width:74px; border-width:1.6px; border-radius:14px; padding-bottom:18px; border-color:color-mix(in oklab,var(--primary) 42%,transparent); background:color-mix(in oklab,var(--primary) 11%,transparent);}
.bottle--card .bottle-line{width:46px; height:1.4px;}

.mini-bottle{
  width:20px; height:30px; border:1.5px solid color-mix(in oklab,var(--primary) 42%,transparent);
  border-radius:5px 5px 7px 7px; background:color-mix(in oklab,var(--primary) 10%,transparent);
}

/* ----------------------------- Badges ----------------------------- */
.badge{
  position:absolute; top:14px; left:14px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.badge--default{background:var(--secondary); color:var(--secondary-foreground);}
.badge--new{background:color-mix(in oklab,var(--primary) 14%,#fff); color:var(--primary);}
.badge--lg{top:18px; left:18px; font-size:12px; letter-spacing:.05em; padding:6px 13px;}

/* ----------------------------- Topbar / Header --------------------- */
.topbar{
  background:var(--primary); color:var(--primary-foreground); text-align:center;
  font-size:13px; letter-spacing:.02em; padding:9px 16px; font-weight:500;
}
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--border);
}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:24px;}
.logo{cursor:pointer; display:flex; align-items:center; flex-shrink:0;}
.logo img{height:46px; width:auto; display:block; mix-blend-mode:multiply;}
.mainnav{display:flex; align-items:center; gap:26px; margin-left:8px; flex:1;}
.nav-link{
  cursor:pointer; font-size:14.5px; font-weight:500; color:var(--foreground);
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav-link.is-active{font-weight:700; color:var(--primary); border-bottom-color:var(--primary);}
.header-actions{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:8px 14px;
}
.search-box .search-icon{color:var(--muted-foreground); font-size:14px;}
.search-box input{
  border:none; background:transparent; outline:none; font-size:14px; width:128px;
  color:var(--foreground); font-family:inherit;
}
.icon-btn{
  position:relative; cursor:pointer; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.cart-badge{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--secondary); color:var(--secondary-foreground);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* ----------------------------- Sections ---------------------------- */
.section{max-width:var(--maxw); margin:0 auto; padding:40px 24px;}
.section--hero{padding:64px 24px 40px;}
.section--cats{padding:34px 24px;}
.section--testi{padding:40px 24px 56px;}
.section--cta{max-width:var(--maxw); margin:0 auto 64px; padding:0 24px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px;}
.section-head--tight{margin-bottom:22px;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); margin-bottom:8px;}
.section-title{font-weight:600; font-size:32px; margin:0;}
.section-title--sm{font-size:30px;}
.view-all{cursor:pointer; font-size:14px; font-weight:600; color:var(--primary); border-bottom:1.5px solid currentColor; padding-bottom:2px;}

/* ----------------------------- Hero -------------------------------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-eyebrow{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--primary); margin-bottom:20px;}
.hero-title{font-weight:600; font-size:60px; line-height:1.04; letter-spacing:-.02em; margin:0 0 22px; color:var(--foreground);}
.hero-text{font-size:18px; line-height:1.6; color:var(--muted-foreground); max-width:460px; margin:0 0 32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-rating{display:flex; align-items:center; gap:18px; margin-top:36px; font-size:14px; color:var(--muted-foreground);}
.hero-rating .stars{color:var(--sun); font-size:16px; letter-spacing:1px;}
.hero-rating strong{color:var(--foreground);}
.hero-card{
  cursor:pointer; position:relative; border-radius:28px; background:var(--tint);
  aspect-ratio:4/4.4; display:flex; align-items:center; justify-content:center;
  box-shadow:0 40px 80px -40px rgba(30,70,40,.5);
}
.hero-card-info{
  position:absolute; bottom:22px; left:22px; background:var(--card); border-radius:16px;
  padding:13px 16px; box-shadow:0 10px 30px -12px rgba(20,40,25,.4);
  display:flex; flex-direction:column; gap:2px;
}
.hero-card-info .label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground); font-weight:600;}
.hero-card-info .name{font-family:var(--font-display); font-weight:600; font-size:16px;}
.hero-card-info .price{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--primary);}
.hero-save{
  position:absolute; top:22px; right:22px; background:var(--secondary); color:var(--secondary-foreground);
  border-radius:999px; font-size:12px; font-weight:700; padding:7px 14px;
}

/* ----------------------------- Category grid ----------------------- */
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.cat-card{
  cursor:pointer; border-radius:18px; padding:20px; min-height:170px; background:var(--tint);
  border:1px solid rgba(20,50,30,.06); display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .2s ease;
}
.cat-card:hover{transform:translateY(-4px);}
.cat-icon{width:42px; height:42px; border-radius:12px; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:20px;}
.cat-name{font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.2;}
.cat-count{font-size:12.5px; color:var(--muted-foreground); margin-top:4px;}

/* ----------------------------- Product grid / card ----------------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{
  cursor:pointer; background:var(--card); border:1px solid var(--border); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,25,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{transform:translateY(-6px); box-shadow:0 18px 38px -16px rgba(20,60,35,.32);}
.product-media{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--tint);}
.product-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1;}
.product-cat{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground);}
.product-name{font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.25; color:var(--foreground);}
.product-rating{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--muted-foreground);}
.product-rating .star{color:var(--sun); letter-spacing:1px;}
.product-rating strong{font-weight:600; color:var(--foreground);}
.product-price-row{display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:6px; flex-wrap:wrap; row-gap:2px;}
.product-price{font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--primary);}
.product-old{font-size:14px; color:var(--muted-foreground); text-decoration:line-through;}
.product-add{margin-top:8px;}

/* ----------------------------- Promises bar ------------------------ */
.promises-bar{background:var(--primary); color:var(--primary-foreground); margin:24px 0;}
.promise-grid{max-width:var(--maxw); margin:0 auto; padding:40px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.promise{display:flex; gap:14px; align-items:flex-start;}
.promise-icon{font-size:24px; line-height:1;}
.promise-title{font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:3px;}
.promise-text{font-size:13px; opacity:.82; line-height:1.45;}

/* ----------------------------- Testimonials ------------------------ */
.section-title--center{text-align:center; margin:0 0 28px;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.testimonial{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:26px;}
.testimonial .stars{color:var(--sun); font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.testimonial p{font-size:15px; line-height:1.6; color:var(--foreground); margin:0 0 22px;}
.testimonial-author{display:flex; align-items:center; gap:12px;}
.avatar{
  width:42px; height:42px; border-radius:999px; background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--primary);
}
.author-name{font-weight:600; font-size:14px;}
.author-city{font-size:12.5px; color:var(--muted-foreground);}

/* ----------------------------- CTA banner -------------------------- */
.cta-banner{
  border-radius:26px; background:linear-gradient(135deg,#f4ead0,#e6efe2); padding:48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner h2{font-weight:600; font-size:30px; margin:0 0 10px;}
.cta-banner p{font-size:16px; color:var(--muted-foreground); margin:0; max-width:520px;}

/* ----------------------------- Shop page --------------------------- */
.page{max-width:var(--maxw); margin:0 auto; padding:30px 24px 64px;}
.breadcrumb{font-size:13px; color:var(--muted-foreground); margin-bottom:18px;}
.breadcrumb a{cursor:pointer; color:var(--muted-foreground);}
.breadcrumb .current{color:var(--foreground); font-weight:600;}
.shop-title{font-weight:600; font-size:38px; margin:0 0 6px;}
.shop-sub{color:var(--muted-foreground); margin:0 0 26px; font-size:15px;}
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--border);
}
.chips{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;}
.chip{
  cursor:pointer; white-space:nowrap; font-size:14px; font-weight:600; padding:9px 18px;
  border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--foreground);
}
.chip.is-active{border-color:var(--primary); background:var(--primary); color:var(--primary-foreground);}
.sort{display:flex; align-items:center; gap:10px;}
.sort-label{font-size:13px; color:var(--muted-foreground);}
.sort select{
  font-family:inherit; font-size:14px; padding:9px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--foreground); cursor:pointer;
}
.empty{text-align:center; padding:80px 0; color:var(--muted-foreground);}
.empty .icon{font-size:38px; margin-bottom:14px;}
.empty p{font-size:16px;}
.empty a{cursor:pointer; color:var(--primary); font-weight:600;}

/* ----------------------------- Product detail ---------------------- */
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start;}
.detail-media{position:sticky; top:96px;}
.detail-main-img{
  border-radius:24px; background:var(--tint); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px;}
.thumb{
  cursor:pointer; aspect-ratio:1/1; border-radius:13px; background:var(--tint);
  border:2px solid transparent; display:flex; align-items:center; justify-content:center;
}
.thumb.is-active{border-color:var(--primary);}
.thumb .mini{width:22px; height:34px; border:1.6px solid color-mix(in oklab,var(--primary) 42%,transparent); border-radius:6px 6px 8px 8px; background:color-mix(in oklab,var(--primary) 10%,transparent);}
.detail-cat{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:12px;}
.detail-title{font-weight:600; font-size:40px; line-height:1.08; margin:0 0 16px;}
.detail-rating{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.detail-rating .stars{color:var(--sun); font-size:16px; letter-spacing:1px;}
.detail-rating .val{font-weight:600; font-size:14px;}
.detail-rating .count{font-size:14px; color:var(--muted-foreground);}
.detail-price-row{display:flex; align-items:baseline; gap:14px; margin-bottom:24px;}
.detail-price{font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--primary);}
.detail-old{font-size:18px; color:var(--muted-foreground); text-decoration:line-through;}
.detail-desc{font-size:16px; line-height:1.65; color:var(--muted-foreground); margin:0 0 28px; max-width:480px;}
.size-block{margin-bottom:24px;}
.size-label{font-size:13px; font-weight:600; margin-bottom:10px;}
.size-opts{display:flex; gap:10px; flex-wrap:wrap;}
.size-btn{
  cursor:pointer; font-size:14px; font-weight:600; padding:11px 18px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--card); color:var(--foreground);
}
.size-btn.is-active{border-color:var(--primary); background:color-mix(in oklab,var(--primary) 8%,var(--card)); color:var(--primary);}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:24px;}
.qty{display:flex; align-items:center; border:1.5px solid var(--border); border-radius:12px; overflow:hidden;}
.qty button{cursor:pointer; width:44px; height:46px; border:none; background:var(--card); font-size:20px; color:var(--foreground);}
.qty-val{width:46px; text-align:center; font-weight:600; font-size:16px;}
.qty-note{font-size:13px; color:var(--muted-foreground);}
.detail-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px;}
.info-box{display:flex; flex-direction:column; gap:11px; padding:20px; background:var(--card); border:1px solid var(--border); border-radius:16px; margin-bottom:28px;}
.info-row{display:flex; gap:10px; font-size:14px; align-items:center;}
.info-row .ic{color:var(--primary);}
.accordion{border-top:1px solid var(--border);}
.accordion-btn{
  cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; background:none; border:none; font-family:inherit; font-size:16px;
  font-weight:600; color:var(--foreground); text-align:left;
}
.accordion-btn .sign{font-size:20px; color:var(--muted-foreground);}
.accordion-body{padding:0 2px 20px;}
.accordion-body p{font-size:14.5px; line-height:1.65; color:var(--muted-foreground); margin:0 0 12px;}
.bullet{font-size:14px; color:var(--foreground); display:flex; gap:9px; padding:4px 0;}
.bullet .dot{color:var(--primary);}
.detail-section{margin-top:64px; padding-top:40px; border-top:1px solid var(--border);}
.detail-section--related{margin-top:56px; padding-top:0; border-top:none;}
.detail-section .section-title{font-size:28px; margin:0 0 24px;}

/* review card (detail) */
.review{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px;}
.review .stars{color:var(--sun); font-size:14px; letter-spacing:1.5px; margin-bottom:12px;}
.review p{font-size:14.5px; line-height:1.6; margin:0 0 16px; color:var(--foreground);}
.review-author{display:flex; align-items:center; gap:10px;}
.review-author .avatar{width:36px; height:36px; font-size:13px;}
.review-author .meta{font-size:13px;}

/* ----------------------------- Footer ------------------------------ */
.footer{background:oklch(0.24 0.035 258); color:oklch(0.92 0.015 120);}
.footer-grid{max-width:var(--maxw); margin:0 auto; padding:56px 24px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px;}
.footer-brand .brand{font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; margin-bottom:14px;}
.footer-brand .brand span{color:var(--leaf);}
.footer-brand p{font-size:14px; line-height:1.6; opacity:.78; margin:0 0 18px; max-width:280px;}
.socials{display:flex; gap:10px;}
.social{width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600;}
.social--sm{font-size:12px;}
.footer-title{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; color:#fff;}
.footer-links{display:flex; flex-direction:column; gap:11px;}
.footer-links a{cursor:pointer; font-size:14px; opacity:.8;}
.footer-contact{font-size:13.5px; line-height:1.55; opacity:.82; display:flex; flex-direction:column; gap:12px;}
.footer-contact strong{color:#fff; opacity:1;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);}
.footer-bottom-inner{max-width:var(--maxw); margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12.5px; opacity:.6;}

/* ----------------------------- Cart drawer ------------------------- */
.drawer-root{position:fixed; inset:0; z-index:60;}
.drawer-overlay{position:absolute; inset:0; background:rgba(15,30,20,.45); animation:nsOverlay .25s ease;}
.drawer{
  position:absolute; top:0; right:0; height:100%; width:420px; max-width:92vw;
  background:var(--background); box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);
  display:flex; flex-direction:column; animation:nsDrawer .3s cubic-bezier(.2,.8,.2,1);
}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--border);}
.drawer-title{font-family:var(--font-display); font-weight:600; font-size:20px;}
.drawer-close{cursor:pointer; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:18px;}
.cart-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px; text-align:center;}
.cart-empty .icon{font-size:40px;}
.cart-empty p{color:var(--muted-foreground); margin:0;}
.cart-list{flex:1; overflow-y:auto; padding:8px 24px;}
.cart-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border);}
.cart-thumb{width:72px; height:72px; flex-shrink:0; border-radius:12px; background:var(--tint); display:flex; align-items:center; justify-content:center;}
.cart-item-body{flex:1; min-width:0;}
.cart-item-top{display:flex; justify-content:space-between; gap:8px;}
.cart-item-name{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.25;}
.cart-remove{cursor:pointer; border:none; background:none; color:var(--muted-foreground); font-size:14px; flex-shrink:0;}
.cart-size{font-size:12.5px; color:var(--muted-foreground); margin:3px 0 10px;}
.cart-item-bottom{display:flex; align-items:center; justify-content:space-between;}
.cart-stepper{display:flex; align-items:center; border:1px solid var(--border); border-radius:9px; overflow:hidden;}
.cart-stepper button{cursor:pointer; width:30px; height:30px; border:none; background:var(--card); font-size:16px;}
.cart-stepper .val{width:30px; text-align:center; font-size:13px; font-weight:600;}
.cart-line{font-family:var(--font-display); font-weight:700; color:var(--primary);}
.cart-foot{padding:20px 24px; border-top:1px solid var(--border); background:var(--card);}
.subtotal-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.subtotal-row .label{font-size:15px; color:var(--muted-foreground);}
.subtotal-row .amt{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--foreground);}
.cart-note{font-size:12.5px; color:var(--muted-foreground); margin:0 0 16px;}
.checkout-wa{cursor:pointer; background:#25D366; color:#fff; border-radius:12px; padding:15px; text-align:center; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; gap:8px;}
.continue-shopping{cursor:pointer; width:100%; margin-top:10px; background:none; border:none; color:var(--muted-foreground); font-size:13.5px; font-family:inherit;}

/* ----------------------------- Toast / FAB ------------------------- */
.toast{
  position:fixed; bottom:28px; left:50%; z-index:70; background:var(--foreground); color:var(--background);
  padding:13px 22px; border-radius:999px; font-size:14px; font-weight:500;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.4); animation:nsToast .3s ease;
}
.fab-wa{
  position:fixed; bottom:26px; right:26px; z-index:50; height:56px; padding:0 22px 0 18px;
  border-radius:999px; border:none; cursor:pointer; background:#25D366; color:#fff;
  font-family:inherit; font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.6);
}
.fab-wa .emoji{font-size:20px;}

/* ----------------------------- Real media (images / video) --------- */
.product-media{overflow:hidden;}
.product-media .media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-card{overflow:hidden;}
.hero-card .media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.detail-main-img{overflow:hidden;}
.detail-main-img .media-img,.detail-main-img .media-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thumb{position:relative; overflow:hidden;}
.thumb .media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thumb-vid{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,40,25,.35); color:#fff; font-size:14px;}
.cart-thumb{overflow:hidden;}
.cart-thumb .media-img{width:100%; height:100%; object-fit:cover;}
.admin-link{opacity:.9; text-decoration:underline;}

/* Scroll-triggered video previews (cover image -> muted autoplay video) */
.product-media .media-vid,
.detail-main-img .media-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s ease; pointer-events:none; background:#0c1a12; z-index:2;
}
.product-media .media-img,
.detail-main-img .media-img{transition:opacity .7s ease;}
.product-media.is-playing .media-img,
.detail-main-img.is-playing .media-img{opacity:0;}
.product-media.is-playing .media-vid,
.detail-main-img.is-playing .media-vid{opacity:1;}
.media-sound{
  position:absolute; bottom:14px; right:14px; width:40px; height:40px; border-radius:999px;
  border:none; background:rgba(20,40,25,.55); color:#fff; font-size:16px; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.media-sound:hover{background:rgba(20,40,25,.72);}

/* ----------------------------- Admin panel ------------------------- */
.admin-shell{min-height:100vh;}
.admin-bar{position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border); }
.admin-bar-inner{max-width:1100px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.admin-brand{font-family:var(--font-display); font-weight:700; font-size:20px; display:flex; align-items:center; gap:10px;}
.admin-brand .dot{color:var(--primary);}
.admin-main{max-width:1100px; margin:0 auto; padding:28px 24px 80px;}
.admin-login{max-width:380px; margin:8vh auto; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:32px;}
.admin-login h1{font-family:var(--font-display); font-size:26px; margin:0 0 6px;}
.admin-login p{color:var(--muted-foreground); font-size:14px; margin:0 0 22px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:13px; font-weight:600;}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:14px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--border); background:var(--background); color:var(--foreground); outline:none; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);}
.field textarea{min-height:90px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-hint{font-size:12px; color:var(--muted-foreground);}
.form-err{background:color-mix(in oklab,oklch(0.6 0.22 27) 12%,#fff); color:oklch(0.5 0.2 27); border:1px solid color-mix(in oklab,oklch(0.6 0.22 27) 30%,#fff); border-radius:10px; padding:10px 13px; font-size:13px; margin-bottom:14px;}

.admin-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.admin-head h1{font-family:var(--font-display); font-size:30px; margin:0;}
.admin-count{color:var(--muted-foreground); font-size:14px;}
.admin-table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.admin-table th,.admin-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle;}
.admin-table th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-foreground); background:color-mix(in oklab,var(--muted) 60%,var(--card));}
.admin-table tr:last-child td{border-bottom:none;}
.admin-thumb{width:48px; height:48px; border-radius:10px; background:var(--tint,linear-gradient(150deg,#e6f4e1,#caedc6)); object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:18px;}
.pill{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--muted); color:var(--muted-foreground);}
.pill--on{background:color-mix(in oklab,var(--primary) 16%,#fff); color:var(--primary);}
.pill--badge{background:var(--secondary); color:var(--secondary-foreground);}
.row-actions{display:flex; gap:8px;}
.btn-ghost{background:none; border:1px solid var(--border); color:var(--foreground);}
.btn-danger{background:oklch(0.6 0.22 27); color:#fff;}
.btn-xs{height:34px; padding:0 12px; font-size:13px;}

.modal-root{position:fixed; inset:0; z-index:80; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:40px 16px;}
.modal-overlay{position:fixed; inset:0; background:rgba(15,30,20,.5);}
.modal{position:relative; width:100%; max-width:680px; background:var(--background); border-radius:18px; box-shadow:0 30px 80px -30px rgba(0,0,0,.5); padding:26px 28px 30px;}
.modal h2{font-family:var(--font-display); font-size:22px; margin:0 0 18px;}
.modal-foot{display:flex; gap:12px; justify-content:flex-end; margin-top:8px;}
.media-tiles{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.media-tile{position:relative; width:74px; height:74px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--muted);}
.media-tile img,.media-tile video{width:100%; height:100%; object-fit:cover;}
.media-tile .rm{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:999px; border:none; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:12px; line-height:1;}
.media-tile.is-cover{outline:2px solid var(--primary); outline-offset:-2px;}
.media-tile .cover-tag{position:absolute; bottom:3px; left:3px; font-size:9px; font-weight:700; background:var(--primary); color:#fff; padding:2px 6px; border-radius:6px; letter-spacing:.03em;}
.media-tile .setcover{position:absolute; bottom:3px; left:3px; width:22px; height:20px; border:none; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:11px; line-height:1;}
.media-tile .setcover:hover{background:var(--primary);}
.uploading{font-size:12px; color:var(--primary); margin-top:6px;}
.size-editor .size-line{display:grid; grid-template-columns:1fr 1fr 36px; gap:10px; margin-bottom:8px;}
.size-editor .size-line button{border:1px solid var(--border); background:var(--card); border-radius:8px; cursor:pointer;}

/* ----------------------------- Mobile menu (hamburger) ------------- */
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); font-size:20px; align-items:center; justify-content:center; cursor:pointer; color:var(--foreground);
}
.menu-root{position:fixed; inset:0; z-index:65;}
.menu-overlay{position:absolute; inset:0; background:rgba(15,30,20,.45); animation:nsOverlay .25s ease;}
.menu-drawer{
  position:absolute; top:0; left:0; height:100%; width:308px; max-width:86vw; background:var(--background);
  box-shadow:24px 0 60px -20px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:16px; padding:18px;
  animation:nsMenu .28s cubic-bezier(.2,.8,.2,1); overflow-y:auto;
}
@keyframes nsMenu{from{transform:translateX(-100%);}to{transform:translateX(0);}}
.menu-head{display:flex; align-items:center; justify-content:space-between;}
.menu-title{font-family:var(--font-display); font-weight:700; font-size:20px;}
.menu-search{display:flex; align-items:center; gap:8px; background:var(--muted); border:1px solid var(--border); border-radius:12px; padding:11px 14px;}
.menu-search input{border:none; background:transparent; outline:none; font-size:15px; width:100%; font-family:inherit; color:var(--foreground);}
.menu-nav{display:flex; flex-direction:column;}
.menu-nav a{padding:15px 4px; border-bottom:1px solid var(--border); font-size:16px; font-weight:600; cursor:pointer; color:var(--foreground);}
.menu-nav a.is-active{color:var(--primary);}
.admin-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px;}

/* ----------------------------- Responsive -------------------------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:32px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .promise-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr; gap:32px;}
  .detail-media{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .mainnav{display:none;}
  .nav-toggle{display:flex;}
  .header-wa{display:none;}
  .search-box{display:none;}
  .header-inner{gap:12px; padding:12px 16px;}
  .admin-table{min-width:680px;}
}

/* ---- Phones ---- */
@media (max-width:640px){
  .section{padding:30px 18px;}
  .section--hero{padding:28px 18px 16px;}
  .section--cats{padding:24px 18px;}
  .page{padding:22px 18px 56px;}
  .topbar{font-size:11.5px; padding:8px 12px;}
  .hero-title{font-size:40px;}
  .hero-text{font-size:16px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .hero-card{aspect-ratio:4/4;}
  .section-title{font-size:25px;}
  .section-title--sm{font-size:23px;}
  .section-head{gap:10px;}
  .detail-title{font-size:30px;}
  .detail-price{font-size:30px;}
  .detail-actions{flex-direction:column;}
  .detail-actions .btn{width:100%;}
  .promise-grid{padding:32px 18px;}
  .footer-grid{grid-template-columns:1fr 1fr; padding:40px 18px 24px; gap:28px;}
  .cta-banner{padding:32px 22px;}
  .cta-banner h2{font-size:24px;}
  .fab-wa{height:52px; width:52px; padding:0; border-radius:999px; bottom:18px; right:16px; font-size:0;}
  .fab-wa .emoji{font-size:24px;}
  .testimonial{padding:22px;}
}

/* ---- Small phones ---- */
@media (max-width:430px){
  .cat-grid,.prod-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-title{font-size:34px;}
  .logo img{height:38px;}
  .thumbs{grid-template-columns:repeat(4,1fr);}
  .product-name{font-size:16px;}
  .product-price{font-size:19px;}
}

/* Admin form: single column on small screens */
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }