/* ==========================================================================
   Herbal Shop - Main Stylesheet (refactored)
   Sections: 1.Tokens 2.Reset 3.Helpers 4.Buttons/Badges 5.Header 6.Sections
   7.Home 8.Shop 9.Product 10.Profile 11.Footer 12.Overlays 13.Animations
   14.Responsive 15.A11y
   Note: font "Vazirmatn" must be loaded via <link> or @font-face.
   ========================================================================== */

/* ===== 1. DESIGN TOKENS ================================================== */
:root{
  /* brand */
  --green:#173f35;
  --green-2:#245b4c;
  --green-700:#1b4c3f;
  --green-900:#102f27;
  --lime:#c9e86b;
  --lime-1:#edf4df;          /* soft lime surface */
  --lime-2:#e7efd3;          /* strong lime surface */
  --cream:#f5f1e7;
  --paper:#fffcf5;
  --white:#fff;
  --ink:#18201d;
  --muted:#69746f;
  --red:#cf5545;
  --gold:#e0a83c;
  --wa:#25d366;

  /* neutrals & states */
  --line:rgba(23,63,53,.13);
  --line-light:rgba(255,255,255,.08);
  --price-old:#a2aaa6;
  --icon-empty:#b9c5bf;
  --on-dark:#c2d2cd;
  --on-dark-2:#aebfba;
  --ok-bg:#e6f4ea;  --ok-fg:#267242;
  --warn-bg:#fff3d8;--warn-fg:#9a6a08;

  /* elevation */
  --shadow:0 24px 70px rgba(20,55,46,.13);
  --shadow-md:0 16px 45px rgba(23,63,53,.07);
  --shadow-sm:0 12px 25px rgba(23,63,53,.18);

  /* radii */
  --radius:30px;
  --r-xs:9px; --r-sm:12px; --r-md:15px; --r-lg:20px; --r-xl:25px; --r-2xl:34px;
  --r-pill:99px;

  /* motion */
  --dur:.25s;
  --dur-slow:.45s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* layout */
  --header-h:82px;
  --sticky-top:104px;
  --wrap:1180px;

  /* layers */
  --z-fab:45; --z-header:50; --z-overlay:80; --z-panel:90;
  --z-filter:100; --z-drawer:110; --z-toast:120;
}

/* ===== 2. RESET & BASE =================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;overflow-x:hidden;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0}
button,a,label,select{cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.3;font-weight:900}

/* ===== 3. HELPERS ======================================================== */
.container{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* shared primitives -------------------------------------------------------- */
.icon-btn,.photo-zoom,.favorite,.shop-fav,.remove-wish,.socials a,
.cart-drawer-head button,.drawer-remove,.heart-btn,.mini-add,.shop-add,
.add-cart,.stat-icon,.cat-icon,.logo-mark,.trust-icon,.deal-icon,.avatar,
.float-wa{display:grid;place-items:center}

/* ===== 4. BUTTONS & BADGES =============================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--r-md);padding:14px 22px;font-weight:700;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn i{width:19px}
.btn-dark{background:var(--green);color:var(--white)}
.btn-dark:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-lime,.btn-primary{background:var(--lime);color:var(--green)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(201,232,107,.22)}
.btn-outline{background:transparent;border:1px solid var(--green);color:var(--green)}
.btn-ghost{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  color:var(--white);backdrop-filter:blur(8px);
}
.small-btn{background:var(--cream);border-radius:var(--r-xs);padding:7px 10px;font-size:10px;font-weight:700;color:var(--green)}

/* corner badges (product / shop / gallery) */
.discount,.shop-badge,.new-badge,.photo-badge{
  position:absolute;top:11px;right:11px;z-index:2;
  background:var(--red);color:var(--white);border-radius:8px;
  padding:4px 8px;font-size:10px;font-weight:800;pointer-events:none;
}
.new-badge{background:var(--green)}
.shop-badge,.new-badge{top:10px;right:10px;padding:4px 7px;font-size:9px}
.photo-badge{top:18px;right:18px;padding:7px 13px;border-radius:10px;font-size:11px}

/* favourite toggles */
.favorite,.shop-fav{
  position:absolute;top:11px;left:11px;z-index:2;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.9);color:var(--green);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.shop-fav{top:10px;left:10px;width:33px;height:33px;background:rgba(255,255,255,.92)}
.favorite i{width:17px}
.shop-fav i{width:16px}
.favorite.active,.shop-fav.active,.heart-btn.active{background:var(--red);color:var(--white)}

/* add-to-cart buttons */
.add-cart,.mini-add,.shop-add{
  width:40px;height:40px;border-radius:13px;background:var(--green);color:var(--white);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.mini-add{width:38px;height:38px;border-radius:var(--r-sm)}
.shop-add{width:39px;height:39px;border-radius:var(--r-sm)}
.add-cart:hover,.shop-add:hover,.mini-add:hover{background:var(--lime);color:var(--green)}
.add-cart i{width:19px}

/* ===== 5. TOPBAR & HEADER ================================================ */
.topbar{background:var(--green);color:#dbe9e4;font-size:12px;padding:0;overflow:hidden}
.topbar img{width:100%;height:auto;display:block;max-height:60px;object-fit:cover}
.topbar a{display:block;width:100%;height:100%;text-decoration:none}

body>header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,252,245,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{height:var(--header-h);display:flex;align-items:center;gap:30px}

.logo{display:flex;align-items:center;gap:11px;min-width:max-content}
.logo-mark{
  width:48px;height:48px;border-radius:50% 50% 48% 52%;
  background:var(--green);color:var(--lime);transform:rotate(-7deg);
}
.logo-mark i{width:25px}
.logo-text strong{display:block;font-size:19px;line-height:1.1;color:var(--green)}
.logo-text small{font-size:9px;letter-spacing:2px;color:#7b867f}

.main-nav{display:flex;align-items:center;gap:27px;margin-inline:auto;font-size:14px;font-weight:600}
.main-nav a{position:relative}
.main-nav a::after{
  content:"";position:absolute;right:0;bottom:-9px;width:0;height:2px;
  background:var(--green);transition:width var(--dur) var(--ease);
}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}

.nav-tools{display:flex;align-items:center;gap:9px}
.auth-btn{
  display:flex;align-items:center;gap:8px;height:43px;padding:0 15px;
  border-radius:14px;background:var(--green);color:var(--white);
  font-size:12px;font-weight:800;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.auth-btn i{width:18px}
.auth-btn:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:0 9px 22px rgba(23,63,53,.17)}
.icon-btn{
  position:relative;width:43px;height:43px;border:1px solid var(--line);
  border-radius:50%;background:var(--white);color:var(--green);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.icon-btn:hover{background:var(--green);color:var(--white);transform:translateY(-2px)}
.icon-btn i{width:20px}
.cart-count{
  position:absolute;left:-3px;top:-4px;display:grid;place-items:center;
  min-width:18px;height:18px;border-radius:10px;border:2px solid var(--paper);
  background:var(--red);color:var(--white);font-size:10px;
}
.menu-btn{display:none}

/* ===== 6. SECTION HEADS & BREADCRUMB ===================================== */
section{padding:74px 0}
.breadcrumb{padding:28px 0 12px}
.breadcrumb ol{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb i{width:14px}
.breadcrumb li:last-child{color:var(--green);font-weight:700}

.section-kicker{color:var(--green-2);font-size:12px;font-weight:800;margin-bottom:7px}
.section-title{
  font-size:clamp(20px,2.8vw,32px);color:var(--green);
  position:relative;display:inline-block;
}
.section-title::after{
  content:"";position:absolute;right:0;bottom:-8px;
  width:40px;height:3px;border-radius:3px;
  background:var(--lime);
}
.section-sub{margin-top:8px;font-size:13px;color:var(--muted)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.text-link{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--green)}
.text-link i{width:17px}

/* ===== 7. HOME =========================================================== */
/* 7.1 hero slider */
.hero{padding:24px 0 52px}
.hero-slider{position:relative;height:clamp(320px,55vh,620px);border-radius:38px;overflow:hidden;background:var(--green);box-shadow:var(--shadow)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s}
.slide.active{opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.slide::after{display:none!important;content:none!important}
.slide-content{position:relative;z-index:2;width:58%;padding:95px 7%;color:var(--white)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  padding:7px 13px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);
  background:rgba(255,255,255,.11);backdrop-filter:blur(8px);font-size:12px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.slide h1{font-size:clamp(20px,2.8vw,38px);line-height:1.25;letter-spacing:-2px;margin-bottom:17px}
.slide h1 em,.shop-hero h1 em{font-style:normal;color:var(--lime)}
.slide p{max-width:500px;margin-bottom:30px;font-size:15px;line-height:2;color:#e4ece9}
.cta-row{display:flex;align-items:center;gap:13px}
.slider-controls{position:absolute;z-index:5;left:35px;bottom:30px;display:flex;gap:8px}
.slider-arrow{
  display:grid;place-items:center;width:45px;height:45px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px);color:var(--white);
}
.slider-dots{position:absolute;z-index:5;right:7%;bottom:35px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:10px;background:rgba(255,255,255,.4);transition:width var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.dot.active{width:27px;background:var(--lime)}

/* 7.2 trust strip */
.trust-strip{
  position:relative;z-index:6;width:87%;margin:-22px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:20px 28px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);box-shadow:0 14px 45px rgba(21,54,45,.1);
}
.trust-item{display:flex;align-items:center;justify-content:center;gap:11px;border-left:1px solid var(--line)}
.trust-item:last-child{border-left:0}
.trust-icon{width:42px;height:42px;border-radius:13px;background:var(--lime-1);color:var(--green)}
.trust-icon i{width:20px}
.trust-item strong{display:block;font-size:13px}
.trust-item small{font-size:10px;color:var(--muted)}

/* 7.3 categories - Instagram Highlights Style (Compact) */
.categories{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  animation:fadeInUp .6s var(--ease) both;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.cat-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;cursor:pointer;
  transition:transform .3s var(--ease);
  padding:4px 8px;
  margin:0;
  width:100px;
}

.cat-card:hover{
  transform:scale(1.06);
}

.cat-icon{
  position:relative;width:56px;height:56px;margin:0 auto 2px;
  border-radius:0;display:grid;place-items:center;
  background:transparent;
  transition:transform .35s cubic-bezier(.34,.1,.64,.1);
  cursor:pointer;
  overflow:hidden;
  flex-shrink:0;
}

.cat-icon img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:0;
}

.cat-icon::before,.cat-icon::after{display:none}

.cat-icon i{
  width:36px;height:36px;
  color:var(--green);
  transition:transform .35s cubic-bezier(.34,.1,.64,.1);
  display:flex;align-items:center;justify-content:center;
  stroke-width:1.5;
}

.cat-card:hover .cat-icon{
  transform:scale(1.1);
}

.cat-card:hover .cat-icon i{
  transform:scale(1.15);
}

/* Typography - positioned below circle */
.cat-card strong{
  font-size:12px;font-weight:800;
  color:var(--green);margin-bottom:0px;
  transition:all .3s var(--ease);
  letter-spacing:-.2px;
  line-height:1.3;
}

.cat-card span{
  display:block;margin-top:0px;font-size:9px;
  color:var(--muted);line-height:1.3;
  transition:all .3s var(--ease);
  opacity:.8;
  font-weight:500;
}

.cat-card:hover strong{
  color:#0f3a32;
}

.cat-card:hover span{
  color:var(--green);
  opacity:1;
}

/* 7.4 promo cards */
.promo-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}
.inverted-wrap{position:relative}
.inverted-radius{
  --r:28px; --s:32px; --x:88px; --y:10px;
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:calc(var(--s) + var(--r));
  position:relative;min-height:310px;border-radius:var(--r);overflow:hidden;background:var(--green);
  -webkit-mask:
    calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  mask:
    calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.promo-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,47,39,.06),rgba(15,47,39,.92))}
.promo-content{position:absolute;z-index:2;right:0;bottom:0;padding:30px 50px;color:var(--white)}
.promo-content h3{font-size:30px;line-height:1.45;margin-bottom:10px}
.promo-content p{font-size:12px;line-height:1.9;color:#d5e1dd}
.promo-discount{
  position:absolute;z-index:4;top:8px;right:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-width:112px;height:38px;padding:0 14px;border-radius:var(--r-pill);
  border:4px solid var(--paper);background:var(--lime);color:var(--green);
  box-shadow:0 8px 18px rgba(23,63,53,.13);font-size:11px;font-weight:900;white-space:nowrap;
}
.promo-discount::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.promo-small .promo-discount{min-width:86px}
.promo-small .promo-content{padding:30px 35px}
.promo-small .promo-content h3{font-size:25px}
.promo-small .promo-overlay{background:linear-gradient(90deg,rgba(23,63,53,.28),rgba(23,63,53,.95))}

/* 7.5 deals */
.deal-section{
  position:relative;overflow:hidden;color:var(--white);
  background:linear-gradient(135deg,var(--green-900) 0%,var(--green-700) 58%,#14382f 100%);
}
.deal-section::before{content:"";position:absolute;left:-160px;top:-190px;width:420px;height:420px;border:80px solid rgba(255,255,255,.025);border-radius:50%}
.deal-section::after{content:"";position:absolute;right:-180px;top:-170px;width:360px;height:360px;border-radius:50%;background:rgba(201,232,107,.08);filter:blur(2px)}
.deal-head{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:34px;padding:24px 26px;border:1px solid rgba(255,255,255,.13);border-radius:24px;
  background:linear-gradient(110deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(5,22,17,.18);
  backdrop-filter:blur(10px);
}
.deal-heading{display:flex;align-items:center;gap:16px}
.deal-icon{width:58px;height:58px;border-radius:18px;background:var(--lime);color:var(--green);transform:rotate(-5deg);box-shadow:0 10px 25px rgba(201,232,107,.18)}
.deal-icon i{width:27px}
.deal-head .section-title{color:var(--white);font-size:clamp(25px,3vw,38px)}
.deal-head .section-kicker{display:flex;align-items:center;gap:7px;color:var(--lime)}
.deal-head .section-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(201,232,107,.1)}
.countdown-area{text-align:center}
.countdown-label{display:block;margin-bottom:8px;font-size:10px;color:#bcd0c9}
.countdown{display:flex;direction:ltr;gap:8px}
.time-box{
  width:62px;height:64px;padding:8px;text-align:center;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.17);background:rgba(7,29,23,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.time-box b{display:block;font-size:20px;line-height:1.25;color:var(--lime)}
.time-box small{font-size:9px;color:#cbd9d4}

/* 7.6 product cards (shared: related / deals / best) */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:2}
.product-card{
  background:var(--white);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:10px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.product-card:hover{transform:translateY(-7px);box-shadow:0 16px 35px rgba(23,63,53,.09)}
.product-image-wrap{position:relative}
.product-image{position:relative;height:210px;border-radius:18px;overflow:hidden;background:var(--cream)}
.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-card:hover .product-image img{transform:scale(1.05)}
.product-info{padding:15px 8px 9px}
.product-meta{display:flex;justify-content:space-between;margin-bottom:7px;font-size:10px;color:var(--muted)}
.product-info h3{font-size:14px;margin-bottom:13px}
.card-price{display:flex;align-items:center;justify-content:space-between;color:var(--green);font-size:14px;font-weight:800}
.price-row{display:flex;align-items:flex-end;justify-content:space-between}
.price strong{display:block;color:var(--green);font-size:16px}
.price del{font-size:10px;color:var(--price-old)}
.best-section{background:var(--paper)}
.best-section .product-card{box-shadow:0 12px 35px rgba(24,57,48,.05)}

/* countdown inside cards */
.card-timer{
  position:absolute;inset:auto 0 0 0;direction:ltr;
  display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;
  border-radius:0 0 18px 18px;border-top:1px solid rgba(201,232,107,.18);
  background:linear-gradient(135deg,rgba(10,35,28,.92) 0%,rgba(20,56,45,.88) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--white);box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.card-timer i{flex:none;font-size:12px;color:var(--lime);filter:drop-shadow(0 0 4px rgba(201,232,107,.6))}
.card-timer-sep,.detail-timer .card-timer-sep{color:rgba(201,232,107,.5);font-size:13px;font-weight:900;line-height:1}
.card-timer-unit{display:flex;flex-direction:column;align-items:center;gap:1px}
.card-timer-d,.card-timer-h,.card-timer-m,.card-timer-s{
  min-width:22px;text-align:center;line-height:1;font-size:15px;font-weight:900;
  color:var(--lime);text-shadow:0 0 8px rgba(201,232,107,.5);
}
.card-timer-label{font-size:8px;letter-spacing:.5px;color:rgba(255,255,255,.5);font-weight:400}

/* 7.7 consult / story / newsletter */
.consult{padding-top:15px}
.consult-box{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;
  align-items:center;gap:40px;padding:45px 55px;border-radius:var(--r-2xl);background:var(--lime-2);
}
.consult-box::after{content:"";position:absolute;left:-80px;bottom:-150px;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.35)}
.consult h2{font-size:32px;color:var(--green);margin-bottom:12px}
.consult p{max-width:570px;font-size:13px;line-height:2;color:#58685f}
.consult-actions{display:flex;justify-content:flex-end;gap:12px}

.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}
.story-image{position:relative;height:480px;border-radius:var(--r-2xl);overflow:hidden}
.story-image img{width:100%;height:100%;object-fit:cover}
.experience{
  position:absolute;left:22px;bottom:22px;display:grid;place-items:center;text-align:center;
  width:125px;height:125px;border-radius:50%;border:8px solid rgba(255,255,255,.6);
  background:var(--lime);color:var(--green);
}
.experience b{display:block;font-size:27px;line-height:1}
.experience span{font-size:10px}
.story-copy p{margin:18px 0;font-size:14px;line-height:2.1;color:var(--muted)}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:22px 0 30px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.check i{width:19px;color:var(--green)}

.newsletter{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:40px;border-radius:var(--radius);background:var(--cream);
}
.newsletter h3{font-size:23px;color:var(--green)}
.newsletter p{margin-top:5px;font-size:12px;color:var(--muted)}
.subscribe{display:flex;width:min(430px,100%);padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.subscribe input{flex:1;min-width:0;padding:0 13px;border:0;background:transparent;outline:0}
.subscribe button{padding:12px 20px;border-radius:var(--r-sm);background:var(--green);color:var(--white);font-weight:700}

/* ===== 8. SHOP =========================================================== */
.shop-hero{padding:12px 0 32px}
.shop-hero-inner{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:45px;min-height:270px;padding:44px 55px;border-radius:var(--r-2xl);
  background:linear-gradient(115deg,var(--green-900),var(--green-2));color:var(--white);
}
.shop-hero-inner::before{content:"";position:absolute;left:-85px;top:-130px;width:290px;height:290px;border:65px solid rgba(201,232,107,.08);border-radius:50%}
.shop-hero-inner>div,.shop-search{position:relative;z-index:2}
.shop-kicker{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:11px;font-weight:800;color:var(--lime)}
.shop-kicker i{width:17px}
.shop-hero h1{font-size:clamp(32px,5vw,54px)}
.shop-hero p{margin-top:9px;font-size:12px;line-height:2;color:#c5d5d0}
.shop-search{
  display:flex;align-items:center;width:min(440px,100%);height:58px;
  padding:6px 8px 6px 6px;border-radius:17px;background:var(--white);color:var(--green);
  box-shadow:0 18px 40px rgba(5,22,17,.22);
}
.shop-search>i{width:19px;margin:0 8px}
.shop-search input{flex:1;min-width:0;padding:0 4px;border:0;background:transparent;outline:0}
.shop-search button{height:46px;padding:0 18px;border-radius:var(--r-sm);background:var(--lime);color:var(--green);font-weight:800}

.shop-categories{padding:0 0 35px}
.category-chips{display:flex;gap:10px;padding:3px;overflow-x:auto;scrollbar-width:none}
.category-chips::-webkit-scrollbar{display:none}
.category-chip{
  display:flex;align-items:center;gap:8px;min-width:max-content;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);
  font-size:11px;font-weight:700;color:var(--muted);
}
.category-chip i{width:17px}
.category-chip.active,.weight.active{background:var(--green);border-color:var(--green);color:var(--white)}

.catalog-section{padding:0 0 70px}
.catalog-layout{display:grid;grid-template-columns:255px 1fr;gap:23px;align-items:start}
.filter-sidebar{position:sticky;top:var(--sticky-top);padding:18px;background:var(--white);border:1px solid var(--line);border-radius:23px}
.filter-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}
.filter-head strong{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--green)}
.filter-head strong i{width:18px}
.filter-head .clear-filters{display:flex!important;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:rgba(207,85,69,.1);color:var(--red);font-size:10px;font-weight:700;transition:all var(--dur) var(--ease);cursor:pointer;text-decoration:none}
.filter-head .clear-filters i{width:14px}
.filter-head .clear-filters:hover{background:rgba(207,85,69,.2);transform:scale(1.04)}
.filter-group{padding:18px 0;border-bottom:1px solid var(--line)}
.filter-group h3{margin-bottom:13px;font-size:12px;color:var(--green)}
.filter-group label{display:flex;align-items:center;gap:8px;margin:11px 0;font-size:11px;color:var(--muted)}
.filter-group input{accent-color:var(--green)}
.price-range{width:100%}
.range-values{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--muted)}
.range-values strong{color:var(--green)}
.switch-line{justify-content:space-between!important}
.switch-line input{width:34px;height:18px}
.apply-filter{display:none;width:100%;margin-top:15px}

.catalog-toolbar{
  display:flex;align-items:center;justify-content:space-between;min-height:58px;
  margin-bottom:12px;padding:10px 15px;border:1px solid var(--line);border-radius:18px;
  background:var(--white);font-size:11px;color:var(--muted);
}
.catalog-toolbar>div{display:flex;align-items:center;gap:10px}
.mobile-filter-btn{display:none;align-items:center;gap:6px;padding:9px 11px;border-radius:10px;background:var(--cream);color:var(--green);font-size:11px;font-weight:800}
.mobile-filter-btn i{width:16px}
.sort-control{display:flex;align-items:center;gap:8px}
.sort-control select{padding:8px 10px;border:0;border-radius:10px;background:var(--cream);color:var(--green);font-size:11px;outline:0}
.active-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.filter-tag{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--r-pill);background:var(--lime-1);color:var(--green);font-size:9px}
.filter-tag i{width:12px}

.shop-products{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.shop-card{
  position:relative;min-width:0;padding:9px;background:var(--white);
  border:1px solid var(--line);border-radius:23px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.shop-card:hover{transform:translateY(-6px);box-shadow:0 17px 38px rgba(23,63,53,.09)}
.shop-card-image{position:relative;height:205px;border-radius:17px;overflow:hidden;background:var(--cream)}
.shop-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.shop-card:hover .shop-card-image img{transform:scale(1.05)}
.shop-card-body{padding:14px 7px 8px}
.shop-card-cat{display:block;margin-bottom:6px;font-size:9px;color:var(--muted)}
.shop-card h2{min-height:43px;font-size:13px;line-height:1.65;font-weight:700}
.shop-card-footer{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px}
.shop-price strong{display:block;font-size:14px;color:var(--green)}
.shop-price del{font-size:9px;color:var(--price-old)}

/* empty states (shop + profile) */
.empty-products,.empty-state{padding:80px 20px;text-align:center;color:var(--muted)}
.empty-products{display:none}
.empty-products.show{display:block}
.empty-state{padding:70px 20px}
.empty-products i,.empty-state i{width:55px;height:55px;margin-bottom:13px;color:var(--icon-empty)}
.empty-products h2{font-size:21px;color:var(--green)}
.empty-state h3{margin-bottom:7px;color:var(--green)}
.empty-products p{margin:6px 0 18px;font-size:11px}

.shop-service{padding:0 0 70px}
.service-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px 25px;border-radius:var(--r-xl);background:var(--lime-2)}
.service-strip>span{display:flex;align-items:center;justify-content:flex-start;gap:15px;padding:0;border-left:0}
.service-strip>span>div{display:flex;flex-direction:column;gap:3px}
.service-strip i{flex-shrink:0;width:48px;height:48px;padding:10px;border-radius:var(--r-sm);background:var(--white);color:var(--green);display:grid;place-items:center}
.service-strip strong{font-size:13px;font-weight:700;color:var(--green);line-height:1.3}
.service-strip small{font-size:11px;color:var(--muted);line-height:1.4}

/* ===== 9. PRODUCT PAGE =================================================== */
.product-hero{padding:20px 0 70px}
.product-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start}
.gallery-wrap{display:flex;flex-direction:column;gap:12px}
.gallery{display:flex;flex-direction:column;gap:12px;direction:ltr}
.thumbs{display:flex;flex-direction:row;gap:10px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{
  width:92px;height:92px;padding:5px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);border-radius:18px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.thumb.active{border:2px solid var(--green);box-shadow:0 8px 22px rgba(23,63,53,.1)}
.main-photo{position:relative;aspect-ratio:1/1;height:auto;border-radius:32px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow)}
.main-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.main-photo:hover img{transform:scale(1.025)}
.photo-zoom{position:absolute;left:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green);backdrop-filter:blur(8px)}

.product-summary{padding-top:12px}
.product-labels{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.product-category,.stock{padding:7px 11px;border-radius:var(--r-pill);font-size:11px;font-weight:700}
.product-category{background:var(--lime-1);color:var(--green)}
.stock{background:#eaf6ef;color:#277447}
.product-summary h1{font-size:clamp(20px,3vw,32px);line-height:1.35;letter-spacing:-1.2px;color:var(--green)}
.rating-row{display:flex;align-items:center;gap:12px;margin:13px 0 22px;font-size:12px}
.stars{color:var(--gold);letter-spacing:2px}
.rating-row a{color:var(--green);font-weight:700}
.short-desc{padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:2.1;color:var(--muted)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:22px 0}
.benefit{display:flex;align-items:center;gap:8px;padding:12px 10px;border-radius:16px;background:var(--cream);font-size:11px;font-weight:700;color:var(--green)}
.benefit i{width:18px;flex:none}
.choice-label{display:block;margin-bottom:10px;font-size:12px;font-weight:800}
.weights{display:flex;gap:8px;margin-bottom:22px}
.weight{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-size:12px;color:var(--muted)}

.purchase-box{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-md)}
.price-line{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.price-line .price strong{font-size:25px}
.price-line .price del{font-size:11px}
.save{color:var(--red);font-size:11px;font-weight:800}
.buy-actions{display:grid;grid-template-columns:auto 1fr auto;gap:10px}
.buy-actions .btn{height:52px}
.quantity{display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.quantity button{width:38px;height:50px;color:var(--green);font-size:20px}
.quantity span{min-width:32px;text-align:center;font-weight:800}
.heart-btn{width:52px;height:52px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);color:var(--green)}
.shipping-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--muted)}
.shipping-note i{width:17px;color:var(--green)}

.info-section{padding:0 0 74px}
.info-card{overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.tabs{display:flex;gap:32px;padding:0 28px;border-bottom:1px solid var(--line)}
.tab{position:relative;padding:21px 4px;font-weight:800;color:var(--muted)}
.tab.active{color:var(--green)}
.tab.active::after{content:"";position:absolute;right:0;left:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--green)}
.tab-panel{display:none;padding:36px}
.tab-panel.active,.profile-panel.active{display:block;animation:fade .35s var(--ease)}
.tab-panel h3{margin-bottom:13px;font-size:22px;color:var(--green)}
.tab-panel p{font-size:13px;line-height:2.2;color:var(--muted)}
.detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:45px}
.usage-box{padding:24px;border-radius:22px;background:var(--lime-1)}
.usage-box h4{margin-bottom:12px;color:var(--green)}
.usage-box li{display:flex;gap:8px;margin:11px 0;font-size:12px;color:#53665e}
.usage-box i{width:17px;color:var(--green)}
.specs{display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;background:var(--line);border:1px solid var(--line);border-radius:18px}
.spec{padding:17px;background:var(--paper);display:flex;align-items:center;gap:8px;font-size:13px}
.spec small{display:inline;font-size:13px;color:var(--muted);font-weight:normal}
.spec span{color:var(--muted)}
.spec strong{font-size:13px;color:var(--green);font-weight:600}
.reviews-summary{display:grid;grid-template-columns:220px 1fr;gap:35px}
.review-score{padding:24px;text-align:center;border-radius:22px;background:var(--cream)}
.review-score b{display:block;font-size:52px;color:var(--green)}
.review{padding:17px 0;border-bottom:1px solid var(--line)}
.review-head{display:flex;justify-content:space-between;margin-bottom:8px}
.review p{font-size:12px}
.related{padding:0 0 70px}

/* product-page countdown */
.detail-timer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;
  width:100%;margin-top:12px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(201,232,107,.2);color:var(--white);
  background:linear-gradient(135deg,rgba(10,35,28,.95),rgba(20,56,45,.9));
}
.detail-timer>i{flex:none;color:var(--lime);filter:drop-shadow(0 0 4px rgba(201,232,107,.5))}
.detail-timer>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:rgba(255,255,255,.7)}
.detail-timer-units{display:flex;align-items:center;gap:5px;flex:none;direction:ltr}
.detail-timer .dt-d,.detail-timer .dt-h,.detail-timer .dt-m,.detail-timer .dt-s{
  min-width:22px;text-align:center;font-size:17px;font-weight:900;
  color:var(--lime);text-shadow:0 0 8px rgba(201,232,107,.5);
}
.detail-timer .card-timer-label{font-size:9px;color:rgba(255,255,255,.5)}
.detail-timer .card-timer-sep{font-size:15px;margin-bottom:10px}

/* ===== 10. PROFILE ======================================================= */
.profile-main{padding:36px 0 80px}
.profile-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;padding:34px 38px;border-radius:32px;color:var(--white);
  background:linear-gradient(125deg,var(--green-900),var(--green-2));
}
.profile-hero::before{content:"";position:absolute;left:-75px;top:-110px;width:240px;height:240px;border:55px solid rgba(201,232,107,.08);border-radius:50%}
.user-welcome{position:relative;display:flex;align-items:center;gap:18px}
.avatar{width:78px;height:78px;border-radius:var(--r-xl);border:4px solid rgba(255,255,255,.18);background:var(--lime);color:var(--green);font-size:25px;font-weight:900;transform:rotate(-3deg)}
.user-welcome h1{margin-bottom:5px;font-size:27px}
.user-welcome p{font-size:12px;color:var(--on-dark)}
.profile-score{position:relative;text-align:left}
.profile-score strong{font-size:22px;color:var(--lime)}
.profile-score small{display:block;font-size:10px;color:var(--on-dark)}

.profile-layout{display:grid;grid-template-columns:270px 1fr;gap:22px;align-items:start}
.profile-sidebar,.profile-content{background:var(--white);border:1px solid var(--line);border-radius:26px;box-shadow:0 13px 40px rgba(23,63,53,.05)}
.profile-sidebar{position:sticky;top:var(--sticky-top);padding:14px}
.profile-nav{display:flex;flex-direction:column;gap:5px}
.profile-nav button{
  display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:13px;
  text-align:right;font-size:13px;font-weight:600;color:var(--muted);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.profile-nav button i{width:19px}
.profile-nav button.active{background:var(--green);color:var(--white)}
.profile-nav button.logout{margin-top:8px;padding-top:18px;border-top:1px solid var(--line);border-radius:0;color:var(--red)}
.profile-content{padding:28px;min-height:560px}
.profile-panel{display:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.panel-head h2{font-size:23px;color:var(--green)}
.panel-head p{margin-top:4px;font-size:11px;color:var(--muted)}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:28px}
.stat-card{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.stat-icon{width:44px;height:44px;border-radius:14px;background:var(--lime-1);color:var(--green)}
.stat-icon i{width:21px}
.stat-card b{display:block;font-size:19px;color:var(--green)}
.stat-card small{font-size:10px;color:var(--muted)}

.orders-list{display:flex;flex-direction:column;gap:12px}
.order-card{padding:17px;border:1px solid var(--line);border-radius:19px}
.order-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.order-id strong{font-size:13px;color:var(--green)}
.order-id small{display:block;margin-top:4px;font-size:10px;color:var(--muted)}
.status{padding:6px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:800}
.status.delivered{background:var(--ok-bg);color:var(--ok-fg)}
.status.processing{background:var(--warn-bg);color:var(--warn-fg)}
.order-bottom{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}
.order-bottom strong{font-size:13px;color:var(--green)}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field.full{grid-column:1/-1}
.field label{display:block;margin-bottom:7px;font-size:11px;font-weight:800;color:var(--green)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  background:var(--paper);color:var(--ink);outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{min-height:105px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,63,53,.07)}
.form-actions{display:flex;justify-content:flex-end;margin-top:20px}

.addresses{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.address-card{position:relative;padding:19px;border:1px solid var(--line);border-radius:var(--r-lg)}
.address-card.default{border-color:var(--green);background:#fbfdf5}
.address-card h3{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:14px;color:var(--green)}
.address-card p{font-size:11px;line-height:2;color:var(--muted)}
.address-actions{display:flex;gap:8px;margin-top:14px}

.wishlist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.wish-card{position:relative;padding:8px;border:1px solid var(--line);border-radius:19px}
.wish-card img{width:100%;height:140px;object-fit:cover;border-radius:14px}
.wish-card h3{padding:11px 4px 5px;font-size:12px}
.wish-card strong{display:block;padding:0 4px 8px;font-size:11px;color:var(--green)}
.remove-wish{position:absolute;left:15px;top:15px;width:31px;height:31px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--red)}

/* ===== 11. FOOTER ======================================================== */
footer{
  position:relative;overflow:hidden;padding:78px 0 24px;
  background:linear-gradient(175deg,#0f2f27 0%,var(--green-900) 62%,#0b241d 100%);
  color:#d6e2de;
}
footer::before,footer::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(60px);opacity:.16;z-index:0;
}
footer::before{width:420px;height:420px;background:var(--lime);top:-220px;left:-120px}
footer::after{width:360px;height:360px;background:var(--green-2);bottom:-200px;right:-100px;opacity:.22}
footer .container{position:relative;z-index:1}

.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .7fr 1.1fr;gap:45px 30px}

.footer-about .logo{margin-bottom:18px}
.footer-about p{margin:0 0 22px;font-size:12.5px;line-height:2;color:var(--on-dark-2);max-width:34ch}

.socials{display:flex;gap:10px}
.socials a{
  position:relative;width:40px;height:40px;border-radius:13px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-light);
  color:var(--on-dark);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.socials a:hover{background:var(--lime);color:var(--green-900);border-color:var(--lime);transform:translateY(-4px) rotate(-4deg)}
.socials i{width:17px}

.footer-col h4{
  position:relative;margin-bottom:24px;padding-bottom:14px;
  font-size:14px;letter-spacing:.2px;color:var(--white);
}
.footer-col h4::after{
  content:"";position:absolute;right:0;bottom:0;width:32px;height:3px;
  border-radius:3px;background:var(--lime);
}
.footer-col a,.footer-col li{
  display:flex;align-items:center;gap:7px;margin-bottom:14px;
  font-size:12.5px;line-height:1.7;color:var(--on-dark-2);
}
.footer-col a{
  position:relative;width:fit-content;
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease),padding-right var(--dur) var(--ease);
}
.footer-col a::before{
  content:"";width:0;height:1px;background:var(--lime);
  transition:width var(--dur) var(--ease);
}
.footer-col a:hover{color:var(--lime);padding-right:4px}
.footer-col a:hover::before{width:10px}

.contact-line{align-items:flex-start!important;gap:11px!important}
.contact-line i{
  flex:none;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(201,232,107,.1);color:var(--lime);
}
.contact-line i[data-lucide]{width:15px;height:15px}
.contact-line span,.contact-line{color:var(--on-dark-2)}

.copyright{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line-light);
  font-size:11px;color:#849b94;
}
.scroll-to-top:hover{background:var(--lime)!important;color:var(--green-900)!important;transform:translateY(-3px)}

/* ===== 12. OVERLAYS: PANEL / DRAWER / TOAST / FAB ======================== */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(16, 47, 39, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; 
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
}
.overlay.open { opacity: 1; visibility: visible; }

/* ── Header Ajax Search Overlay ────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(16, 47, 39, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 90px;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay.open .search-overlay-inner { transform: translateY(0); opacity: 1; }

.search-overlay-inner {
  width: min(700px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px;
  transform: translateY(-14px); opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}

.search-overlay-box {
  flex: 1; position: relative;
  display: flex; align-items: center;
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(16, 47, 39, .25);
  overflow: hidden;
}
.search-overlay-icon {
  position: absolute; right: 18px; width: 20px; color: var(--muted); pointer-events: none; flex-shrink: 0;
}
.search-overlay-input {
  flex: 1; height: 58px; background: transparent;
  border: none; outline: none;
  padding: 0 52px 0 52px;
  font-size: 17px; font-weight: 500; color: var(--ink);
  direction: rtl;
}
.search-overlay-input::placeholder { color: var(--muted); }
.search-overlay-input::-webkit-search-cancel-button { display: none; }

.search-overlay-clear {
  position: absolute; left: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); color: var(--muted);
  display: grid; place-items: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}
.search-overlay-clear i { width: 15px; }
.search-overlay-clear:hover { background: var(--green); color: var(--white); }

.search-overlay-close {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 58px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  color: var(--white); font-size: 13px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  transition: background-color var(--dur) var(--ease);
  backdrop-filter: blur(6px);
}
.search-overlay-close i { width: 17px; }
.search-overlay-close:hover { background: rgba(255,255,255,.25); }

.search-overlay-results {
  width: min(700px, calc(100% - 32px));
  margin-top: 14px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.search-overlay-results::-webkit-scrollbar { width: 5px; }
.search-overlay-results::-webkit-scrollbar-track { background: transparent; }
.search-overlay-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 10px; }

/* نتایج جستجو */
.search-result-list {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--white); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 0 16px 50px rgba(16, 47, 39, .2);
  padding: 8px;
}
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}
.search-result-item:hover, .search-result-item:focus { background: var(--lime-1); outline: none; }
.search-result-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.search-result-thumb {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  object-fit: cover; flex-shrink: 0;
  background: var(--cream);
}
.search-result-thumb-placeholder {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--lime-1); display: grid; place-items: center;
  flex-shrink: 0; color: var(--green);
}
.search-result-thumb-placeholder i { width: 22px; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 3px;
}
.search-result-cat { font-size: 11px; color: var(--muted); }
.search-result-price {
  font-size: 13px; font-weight: 800; color: var(--green);
  white-space: nowrap; flex-shrink: 0; text-align: left;
}
.search-result-price .old-price {
  display: block; font-size: 10px; font-weight: 400;
  color: var(--price-old); text-decoration: line-through; margin-bottom: 1px;
}

/* حالت‌های وضعیت */
.search-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px; background: var(--white); border-radius: var(--r-lg);
  box-shadow: 0 16px 50px rgba(16, 47, 39, .2);
  color: var(--muted); font-size: 14px; text-align: center;
}
.search-state i { width: 32px; color: var(--icon-empty); }
.search-state strong { font-size: 15px; color: var(--ink); display: block; }

.search-spinner { display: flex; gap: 6px; align-items: center; }
.search-spinner span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: searchBounce .8s infinite ease-in-out;
}
.search-spinner span:nth-child(2) { animation-delay: .15s; }
.search-spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes searchBounce { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

.search-view-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--lime-1); color: var(--green);
  font-size: 13px; font-weight: 800; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
  border-top: 1px solid var(--line);
}
.search-view-all:hover { background: var(--lime-2); }
.search-view-all i { width: 16px; }

@media (max-width: 600px) {
  .search-overlay { padding-top: 70px; }
  .search-overlay-input { font-size: 15px; height: 52px; }
  .search-overlay-close span { display: none; }
  .search-overlay-close { padding: 0 12px; height: 52px; }
}

.mobile-panel{
  position:fixed;inset:0 0 0 auto;width:min(330px,88%);z-index:var(--z-panel);
  padding:25px;background:var(--paper);transform:translateX(105%);
  transition:transform .3s var(--ease);
}
.mobile-panel.open{transform:none}
.mobile-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}
.mobile-panel nav{display:flex;flex-direction:column;gap:10px}
.mobile-panel nav a{padding:12px;border-bottom:1px solid var(--line);font-weight:700}

body.drawer-open { overflow: hidden; padding-right: 8px; }

.cart-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; 
  width: min(440px, 100%); z-index: var(--z-drawer);
  display: flex; flex-direction: column; 
  background: var(--paper);
  transform: translateX(-105%); 
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.cart-drawer.open { 
  transform: translateX(0);
  box-shadow: 30px 0 80px rgba(16, 47, 39, 0.15);
}

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between; 
  padding: 24px 28px; 
  background: rgba(255, 252, 245, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.cart-drawer-head h2 { 
  font-size: 20px; font-weight: 900; 
  color: var(--green); letter-spacing: -0.5px; 
}
.cart-drawer-head button {
  width: 44px; height: 44px; border-radius: 50%; 
  background: var(--white); color: var(--muted);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-drawer-head button i { width: 20px; transition: transform 0.3s ease; }
.cart-drawer-head button:hover {
  background: var(--cream); color: var(--red);
  border-color: rgba(207, 85, 69, 0.2);
  transform: scale(1.05);
}
.cart-drawer-head button:hover i { transform: rotate(90deg); }

.cart-drawer-items {
  flex: 1; padding: 24px 28px; overflow-y: auto; 
  display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(180deg, var(--paper) 0%, #ffffff 100%);
  scrollbar-width: thin; scrollbar-color: var(--icon-empty) transparent;
}
.cart-drawer-items::-webkit-scrollbar { width: 5px; }
.cart-drawer-items::-webkit-scrollbar-thumb { background: var(--icon-empty); border-radius: 10px; }

.cart-item {
  display: grid; grid-template-columns: 82px 1fr auto; 
  gap: 16px; align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 14px;
  position: relative; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.cart-item:hover {
  box-shadow: 0 16px 35px rgba(23, 63, 53, 0.07);
  border-color: rgba(23, 63, 53, 0.15);
  transform: translateY(-2px);
}
.cart-item>img {
  width: 82px; height: 82px; object-fit: cover;
  border-radius: var(--r-md); background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cart-item-info {
  display: flex; flex-direction: column; justify-content: center; 
  gap: 6px; min-width: 0;
}
.cart-item-info h4 {
  font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-price {
  font-size: 13px; font-weight: 900; color: var(--green);
  background: var(--lime-1); 
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--r-pill); width: fit-content;
}

.cart-item-qty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--cream);
  padding: 4px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.qty-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); color: var(--green);
  font-size: 16px; font-weight: 700; display: grid; place-items: center;
  border: 1px solid transparent; box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  transition: all 0.25s ease; line-height: 1;
}
.qty-btn:hover { 
  background: var(--lime-1); color: var(--green-900);
  border-color: var(--line); transform: scale(1.1); 
}
.qty-btn:active { transform: scale(0.95); }
.cart-item-qty>span {
  font-size: 13px; font-weight: 900; color: var(--green);
  min-width: 20px; text-align: center; padding: 2px 0;
}

.cart-drawer-items .empty {
  margin: auto; display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px; text-align: center; color: var(--muted); gap: 18px;
}
.cart-drawer-items .empty i {
  width: 80px; height: 80px; padding: 20px;
  background: var(--lime-1); color: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(201, 232, 107, 0.15);
}
.cart-drawer-items .empty p { font-size: 15px; font-weight: 700; color: var(--green); }

.cart-drawer-footer {
  padding: 24px 28px; 
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  position: relative; z-index: 10;
}
.cart-drawer-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; font-size: 15px;
  background: var(--lime-1); padding: 18px 22px; 
  border-radius: var(--r-lg);
  border: 1px dashed rgba(23, 63, 53, 0.25);
}
.cart-drawer-total span:first-child { font-weight: 700; color: var(--green-700); }
.cart-drawer-total #cartTotal { font-size: 19px; font-weight: 900; color: var(--green); }

.cart-drawer-footer .btn {
  height: 56px; border-radius: var(--r-lg); font-size: 15px;
  background: linear-gradient(135deg, var(--green), var(--green-900));
  color: var(--lime-1); border: none;
  box-shadow: 0 12px 28px rgba(23, 63, 53, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}
.cart-drawer-footer .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(23, 63, 53, 0.3);
  background: linear-gradient(135deg, var(--green-2), var(--green));
  color: var(--white);
}
.cart-drawer-footer .btn:disabled { 
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; 
}

.toast {
  position: fixed; right: 50%; bottom: 40px; z-index: var(--z-toast);
  padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--green); color: var(--lime); font-size: 13px; font-weight: 700;
  box-shadow: 0 15px 35px rgba(23, 63, 53, 0.3);
  transform: translateX(50%) translateY(40px) scale(0.9); opacity: 0; visibility: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.show { 
  opacity: 1; visibility: visible; 
  transform: translateX(50%) translateY(0) scale(1); 
}

.float-wa{
  position:fixed;left:23px;bottom:23px;z-index:var(--z-fab);
  width:58px;height:58px;border-radius:19px;background:var(--wa);color:var(--white);
  box-shadow:0 12px 30px rgba(37,211,102,.32);animation:float 2.5s var(--ease) infinite;
}
.float-wa i{width:27px}

/* ===== 13. ANIMATIONS ==================================================== */
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-6px)}}

/* ===== 14. RESPONSIVE ==================================================== */
@media (max-width:960px){
  .nav{height:72px}
  .main-nav{display:none}
  .menu-btn{display:none}
  .nav-tools{margin-right:auto}
  .auth-btn{width:43px;padding:0;justify-content:center;border-radius:50%}
  .auth-btn span{display:none}

  .hero-slider{height:clamp(280px,48vh,530px)}
  .slide-content{width:76%}
  .trust-strip{width:94%;grid-template-columns:repeat(2,1fr);gap:16px}
  .trust-item:nth-child(2){border-left:0}
  .categories{gap:0}
  .promo-grid,.consult-box{grid-template-columns:1fr}
  .consult-actions{justify-content:flex-start}
  .story-grid{gap:35px}
  .products,.wishlist-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}

  .catalog-layout{grid-template-columns:1fr}
  .filter-sidebar{
    position:fixed;inset:0 0 0 auto;width:min(330px,90%);z-index:var(--z-filter);
    border-radius:0;overflow-y:auto;transform:translateX(105%);transition:transform .3s var(--ease);
  }
  .filter-sidebar.open{transform:none}
  .mobile-filter-btn,.apply-filter{display:flex}

  .product-layout{grid-template-columns:1fr;gap:24px}
  .main-photo{height:auto;aspect-ratio:1/1}
  .profile-layout{grid-template-columns:220px 1fr}
}

@media (max-width:700px){
  .container{width:min(100% - 24px,var(--wrap))}
  .topbar img{max-height:50px}
  .nav-tools .icon-btn:first-child{display:none}
  .logo-text small{display:none}
  .section-head .text-link{display:none}

  /* shop */
  .shop-hero-inner{display:block;min-height:330px;padding:32px 22px}
  .shop-search{height:54px;margin-top:25px}
  .shop-search button{height:42px}
  .shop-categories{padding-bottom:25px}
  .catalog-toolbar{align-items:flex-start;gap:10px}
  .sort-control>span{display:none}
  .shop-products{grid-template-columns:repeat(2,1fr);gap:9px}
  .shop-card{padding:7px;border-radius:18px}
  .shop-card-image{height:155px;border-radius:13px}
  .shop-card h2{min-height:38px;font-size:11px}
  .shop-price strong{font-size:11px}
  .shop-add{width:34px;height:34px}
  .service-strip{grid-template-columns:repeat(2,1fr);gap:20px;padding:20px}
  .service-strip>span{padding:0;border-left:0}

  /* product */
  .breadcrumb{padding-top:20px}
  .product-hero{padding-bottom:50px}
  .gallery-wrap{width:100%}
  .gallery{display:flex;flex-direction:column}
  .main-photo{order:1;border-radius:24px;aspect-ratio:1/1;height:auto}
  .thumbs{order:2;flex-direction:row}
  .thumb{width:70px;height:70px}
  .product-summary{padding-top:0}
  .product-summary h1{font-size:22px}
  .benefits{grid-template-columns:1fr}
  .purchase-box{padding:16px}
  .buy-actions{grid-template-columns:auto 1fr}
  .heart-btn{grid-column:1/-1;width:100%}
  .detail-timer{flex-wrap:nowrap;gap:8px;padding:10px 12px}
  .detail-timer>span{font-size:10px}
  .detail-timer-units{gap:4px}
  .detail-timer .dt-d,.detail-timer .dt-h,.detail-timer .dt-m,.detail-timer .dt-s{font-size:14px;min-width:18px}
  .detail-grid,.reviews-summary{grid-template-columns:1fr}
  .tabs{gap:18px;padding:0 15px;overflow-x:auto}
  .tab{white-space:nowrap;font-size:12px}
  .tab-panel{padding:24px 18px}
  .products{
    display:flex;gap:10px;padding:2px 0 18px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .products::-webkit-scrollbar{display:none}
  .products .product-card{flex:0 0 72%;max-width:260px;scroll-snap-align:start}
  .product-image{height:155px}
  .related .products{
    display:flex;gap:10px;padding:2px 0 18px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .related .products::-webkit-scrollbar{display:none}
  .related .products .product-card{flex:0 0 72%;max-width:260px;scroll-snap-align:start}

  /* profile */
  .profile-main{padding-top:20px}
  .profile-hero{display:block;padding:24px 20px}
  .profile-score{margin:18px 96px 0 0;text-align:right}
  .profile-layout{grid-template-columns:1fr}
  .profile-sidebar{position:static;padding:8px;overflow-x:auto}
  .profile-nav{flex-direction:row;min-width:max-content}
  .profile-nav button{white-space:nowrap}
  .profile-nav button.logout{margin:0;padding-top:13px;border-top:0}
  .profile-content{padding:20px 15px}
  .stat-grid,.form-grid,.addresses{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .wishlist-grid{grid-template-columns:repeat(2,1fr)}
  .order-bottom{flex-wrap:wrap;align-items:flex-start;gap:10px}

  /* footer */
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .footer-about{grid-column:1/-1}
  .copyright{flex-direction:column-reverse;align-items:flex-start;gap:14px;text-align:right}
}

@media (max-width:640px){
  .hero{padding-top:40px}
  .hero-slider{
    height:auto;aspect-ratio:16/10;max-height:340px;min-height:200px;
    border-radius:var(--r-xl);
  }
  .slide-bg{object-fit:cover;object-position:center}
  .slide-content{width:100%;padding:55px 20px 70px;display:flex;flex-direction:column;justify-content:center}
  .slide h1{font-size:16px;line-height:1.3}
  .slide p{font-size:10px;line-height:1.5}
  .cta-row{gap:10px}
  .cta-row .btn{padding:11px 16px;font-size:12px}
  .slide::after{display:none!important;content:none!important}
  .eyebrow{font-size:10px;padding:5px 10px;margin-bottom:10px;width:fit-content}
  .slider-controls{left:20px;bottom:70px;gap:6px}
  .slider-arrow{width:34px;height:34px;font-size:13px}
  .slider-dots{right:25px;bottom:76px}
  .trust-strip{width:92%;padding:15px;grid-template-columns:repeat(2,1fr)}
  .trust-item{justify-content:flex-start;border-left:0}
  .trust-icon{width:35px;height:35px}
  .trust-item small{display:none}
  .categories{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:8px;
  }
  #categories{padding-top:16px}
  .categories::-webkit-scrollbar{display:none}
  .cat-card{flex:0 0 100px;scroll-snap-align:start}
  .promo-content h3{font-size:25px}
  .inverted-radius{--r:22px;--s:28px;--x:82px;--y:8px;min-height:340px}

  .deal-head{flex-direction:column;align-items:stretch;gap:22px;padding:20px}
  .deal-heading{align-items:flex-start}
  .deal-icon{width:50px;height:50px;flex:none}
  .countdown-area{text-align:right}
  .countdown{justify-content:flex-end}
  .time-box{width:57px}
  .deal-section .products{
    display:flex;gap:10px;padding:2px 0 18px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .deal-section .products::-webkit-scrollbar{display:none}
  .deal-section .product-card{flex:0 0 76%;max-width:280px;scroll-snap-align:start}

  .consult-box{padding:35px 24px;border-radius:var(--r-xl)}
  .consult-actions{flex-direction:column}
  .consult-actions .btn{width:100%}
  .story-grid{grid-template-columns:1fr}
  .story-image{order:2;height:380px}
  .checks{grid-template-columns:1fr}
  .newsletter{display:block;padding:28px 20px}
  .subscribe{margin-top:20px}
  .float-wa{left:15px;bottom:15px;width:52px;height:52px}
}

@media (max-width:480px){
  .hero{padding-top:28px}
  .hero-slider{
    height:auto;aspect-ratio:16/9;max-height:230px;min-height:160px;
  }
  .slide-bg{object-fit:cover;object-position:center}
  .slide-content{padding:50px 16px 36px}
  .slide h1{font-size:14px}
  .slide p{display:none}
  .eyebrow{display:none}
  .slider-controls{left:12px;bottom:26px;gap:5px}
  .slider-arrow{width:28px;height:28px;font-size:11px}
  .slider-dots{right:16px;bottom:30px}
}

/* ===== 15. ACCESSIBILITY & PRINT ========================================= */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .topbar,body>header,.overlay,.mobile-panel,.cart-drawer,.toast,.float-wa,
  .slider-controls,.slider-dots,.filter-sidebar{display:none!important}
  body{background:#fff;color:#000}
}


/* ===== REVIEW FORM ======================================================= */
.review-form {
  margin-top: 40px;
  padding: 28px;
  background: var(--lime-1);
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 232, 107, 0.3);
}

.review-form h3 {
  margin-bottom: 20px;
  font-size: 18px;
  color: var(--ink);
}

.review-form .form-group {
  margin-bottom: 20px;
}

.review-form label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}

.review-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.review-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 63, 53, 0.1);
}

.review-form small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* Rating Input */
.rating-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-input input[type="radio"] {
  display: none;
}

.rating-input input[type="radio"] + label {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur);
  margin: 0;
}

.rating-input input[type="radio"]:checked + label {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.rating-input input[type="radio"] + label:hover {
  border-color: var(--green);
}

.review-form button[type="submit"] {
  margin-top: 10px;
}

#reviewMessage {
  font-size: 14px;
  font-weight: 600;
}

/* Review Login Prompt */
.review-login-prompt {
  margin-top: 40px;
  padding: 28px;
  background: var(--lime-1);
  border-radius: var(--r-lg);
  text-align: center;
}

.review-login-prompt p {
  font-size: 16px;
  color: var(--ink);
}

.review-login-prompt a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.review-login-prompt a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .review-form {
    padding: 20px;
  }

  .review-form h3 {
    font-size: 16px;
  }

  .rating-input {
    gap: 8px;
  }

  .review-form .btn {
    width: 100%;
  }
}