@import url('design-system.css');

:root, [data-theme-style="emerald"] {
  --theme-name: "emerald";
  --c-cream: #F7F3E9;
  --c-ivory: #FFFDF7;
  --c-forest: #173F32;
  --c-sage: #82977B;
  --c-gold: #C5A15A;
  --c-charcoal: #242820;

  --g-900: #0D261E;
  --g-800: #173F32;
  --g-700: #235847;
  --g-600: #2c6e58;
  --g-100: #E3EBE0;
  --gold-500: #C5A15A;
  --gold-600: #af8d47;
  --ink: #242820;
  --muted: #575D53;
  --bg-page: #FFFDF7;
  --bg-card: #FFFFFF;
  --line: rgba(36, 40, 32, 0.08);
  --line-strong: rgba(23, 63, 50, 0.18);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 4px 14px rgba(23, 63, 50, 0.06);
  --shadow-md: 0 14px 34px rgba(23, 63, 50, 0.12);
  --shadow-lg: 0 26px 60px rgba(23, 63, 50, 0.18);
  --shadow-glow: 0 8px 24px rgba(197, 161, 90, 0.30);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme-style="natural"] {
  --theme-name: "natural";
  --g-900: #1b4332;
  --g-800: #2d6a4f;
  --g-700: #40916c;
  --g-600: #52b788;
  --g-100: #d8f3dc;
  --gold-500: #d4a373;
  --gold-600: #c58f5b;
  --ink: #13221b;
  --muted: #53645b;
  --bg-page: #f8faf8;
  --bg-card: #ffffff;
  --line: rgba(45, 106, 79, 0.14);
  --line-strong: rgba(45, 106, 79, 0.26);
  --shadow-glow: 0 8px 24px rgba(45, 106, 79, 0.28);
}

[data-theme-style="rose"] {
  --theme-name: "rose";
  --g-900: #582131;
  --g-800: #933852;
  --g-700: #b84a68;
  --g-600: #d46382;
  --g-100: #fdf2f4;
  --gold-500: #e5a970;
  --gold-600: #d49354;
  --ink: #2b141c;
  --muted: #735962;
  --bg-page: #fff9fa;
  --bg-card: #ffffff;
  --line: rgba(147, 56, 82, 0.15);
  --line-strong: rgba(147, 56, 82, 0.28);
  --shadow-glow: 0 8px 24px rgba(147, 56, 82, 0.28);
}

[data-theme-style="midnight"] {
  --theme-name: "midnight";
  --g-900: #0a111a;
  --g-800: #142336;
  --g-700: #1f3754;
  --g-600: #10b981;
  --g-100: #e4f7f0;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --ink: #0f172a;
  --muted: #64748b;
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --line: rgba(16, 185, 129, 0.18);
  --line-strong: rgba(16, 185, 129, 0.32);
  --shadow-glow: 0 8px 24px rgba(16, 185, 129, 0.28);
}

[data-theme-style="sand"] {
  --theme-name: "sand";
  --g-900: #3e2820;
  --g-800: #6b4738;
  --g-700: #8c5d49;
  --g-600: #bc6c25;
  --g-100: #fefae0;
  --gold-500: #dda15e;
  --gold-600: #c98842;
  --ink: #281d18;
  --muted: #6e5f58;
  --bg-page: #faf7f2;
  --bg-card: #ffffff;
  --line: rgba(107, 71, 56, 0.15);
  --line-strong: rgba(107, 71, 56, 0.28);
  --shadow-glow: 0 8px 24px rgba(188, 108, 37, 0.28);
}

[data-theme-style="royal"] {
  --theme-name: "royal";
  --g-900: #111e3b;
  --g-800: #1e3a8a;
  --g-700: #2563eb;
  --g-600: #059669;
  --g-100: #eff6ff;
  --gold-500: #eab308;
  --gold-600: #ca8a04;
  --ink: #0f172a;
  --muted: #475569;
  --bg-page: #f8faff;
  --bg-card: #ffffff;
  --line: rgba(30, 58, 138, 0.15);
  --line-strong: rgba(30, 58, 138, 0.28);
  --shadow-glow: 0 8px 24px rgba(30, 58, 138, 0.28);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

html{scroll-behavior:smooth;}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--g-700); color:#fff;}

/* Slim premium scrollbar (desktop) */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:#f2f7f3;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--g-700),var(--g-900)); border-radius:20px;}

/* ---------------------------------------------------------------------
   Reveal-on-scroll (JS toggles .in-view — see premium.js)
--------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform,opacity;
}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *{animation:none;}

/* ---------------------------------------------------------------------
   HEADER — glass + elevate on scroll
--------------------------------------------------------------------- */
header{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:box-shadow .35s var(--ease), padding .35s var(--ease), background .35s var(--ease);
}
header.scrolled{
  box-shadow:0 10px 30px rgba(12,45,30,.14) !important;
}
.logo img{
  filter:drop-shadow(0 4px 10px rgba(12,123,69,.25));
  transition:transform .45s var(--ease);
}
.logo:hover img{transform:rotate(-4deg) scale(1.06);}

nav ul li a{position:relative;}
nav ul li a::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--g-700),var(--gold-500));
  transition:width .35s var(--ease);
  border-radius:2px;
}
nav ul li a:hover::after{width:100%;}

.cart-icon{position:relative; transition:transform .3s var(--ease);}
.cart-icon:hover{transform:translateY(-2px) scale(1.08);}
.cart-icon #cart-count{
  box-shadow:0 3px 10px rgba(255,201,77,.55);
}

/* ---------------------------------------------------------------------
   BUTTONS — premium gradient, depth, shine sweep, tactile press
--------------------------------------------------------------------- */
.buy-btn, .order-btn, .btn-green, .footer-btn, .follow-button,
.checkout-btn, .review-submit, .newsletter-box button, .newsletter button,
.view-btn{
  position:relative;
  overflow:hidden;
  border:none;
  background:linear-gradient(135deg,var(--g-600) 0%,var(--g-800) 55%,var(--g-900) 100%);
  color:#fff !important;
  border-radius:50px !important;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  padding:14px 32px !important;
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset, 0 10px 24px rgba(6,74,41,.32);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  isolation:isolate;
}
.buy-btn::before, .order-btn::before, .btn-green::before, .footer-btn::before,
.follow-button::before, .checkout-btn::before, .review-submit::before, .view-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.4) 38%, transparent 55%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
  z-index:1;
  pointer-events:none;
}
.buy-btn:hover::before, .order-btn:hover::before, .btn-green:hover::before,
.footer-btn:hover::before, .follow-button:hover::before, .checkout-btn:hover::before,
.review-submit:hover::before, .view-btn:hover::before{
  transform:translateX(120%);
}
.buy-btn:hover, .order-btn:hover, .btn-green:hover, .footer-btn:hover,
.follow-button:hover, .checkout-btn:hover, .review-submit:hover,
.newsletter-box button:hover, .newsletter button:hover, .view-btn:hover{
  transform:translateY(-5px) scale(1.035);
  box-shadow:0 2px 0 rgba(255,255,255,.22) inset, 0 20px 40px rgba(6,74,41,.4);
  filter:brightness(1.05);
}
.buy-btn:active, .order-btn:active, .btn-green:active, .checkout-btn:active, .view-btn:active{
  transform:translateY(-1px) scale(.98);
  box-shadow:0 2px 0 rgba(255,255,255,.14) inset, 0 8px 16px rgba(6,74,41,.3);
}
.buy-btn i, .order-btn i, .btn-green i, .footer-btn i, .follow-button i, .checkout-btn i{
  margin-right:6px;
}

.follow-button-alt{
  background:linear-gradient(135deg,#d9599f 0%,#9c2c6e 55%,#6e1a4d 100%) !important;
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset, 0 10px 24px rgba(110,26,77,.32) !important;
}
.follow-button-alt:hover{box-shadow:0 2px 0 rgba(255,255,255,.22) inset, 0 20px 40px rgba(110,26,77,.4) !important;}

.btn-outline{
  position:relative;
  border:2px solid var(--g-700) !important;
  color:var(--g-800) !important;
  background:rgba(255,255,255,.7);
  border-radius:50px !important;
  font-weight:600;
  padding:13px 30px !important;
  backdrop-filter:blur(6px);
  transition:all .35s var(--ease);
}
.btn-outline:hover{
  background:linear-gradient(135deg,var(--g-700),var(--g-900)) !important;
  color:#fff !important;
  border-color:transparent !important;
  transform:translateY(-5px) scale(1.03);
  box-shadow:var(--shadow-md);
}

.qty-btn{
  transition:all .25s var(--ease);
}
.qty-btn:hover{
  background:var(--g-800) !important;
  color:#fff !important;
  transform:scale(1.08);
}

/* Small circular icon buttons (social icons, top-icons, footer-social) */
.footer-social a, .social-icons a, .top-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.footer-social a:hover, .social-icons a:hover{
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 10px 20px rgba(12,123,69,.35);
}
.top-icons a:hover{transform:scale(1.15);}

/* ---------------------------------------------------------------------
   HERO — depth, floating motion, premium badge
--------------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(circle at 12% 18%, rgba(12,123,69,.10), transparent 42%),
    radial-gradient(circle at 90% 12%, rgba(255,201,77,.16), transparent 40%),
    linear-gradient(135deg,#eefcf2,#ffffff) !important;
  overflow:hidden;
}
.badge{
  background:linear-gradient(135deg,var(--g-100),#fff) !important;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.hero h1 span{
  background:linear-gradient(120deg,var(--g-700),var(--g-900));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}
.hero-right{
  perspective:1400px;
}
.hero-right img{
  border-radius:var(--radius-lg);
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.hero-right:hover img{
  transform:rotateY(-4deg) rotateX(2deg) scale(1.02);
}

/* ---------------------------------------------------------------------
   SECTION TITLES
--------------------------------------------------------------------- */
.section-title span{
  color:var(--g-800);
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  font-size:13px;
}
.section-title h2{
  position:relative;
  display:inline-block;
}
.section-title h2::after{
  content:"";
  display:block;
  width:64px; height:4px;
  margin:14px auto 0;
  border-radius:4px;
  background:linear-gradient(90deg,var(--g-700),var(--gold-500));
}

/* ---------------------------------------------------------------------
   PRODUCT / INSTA CARDS — 3D tilt-on-hover, glass shadow
--------------------------------------------------------------------- */
.product-grid, .products-grid{perspective:1600px;}

.product-card{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-sm) !important;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease) !important;
  transform-style:preserve-3d;
  will-change:transform;
}
.product-card:hover{
  transform:translateY(-10px) rotateX(3deg) rotateY(-2deg) !important;
  box-shadow:var(--shadow-lg) !important;
}
.product-image{overflow:hidden; border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.product-image img{
  transition:transform .6s var(--ease);
}
.product-card:hover .product-image img{
  transform:scale(1.08);
}
.product-badge{
  box-shadow:0 6px 16px rgba(255,193,7,.4);
}

.insta-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.insta-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-md);
}
.insta-card img{transition:transform .6s var(--ease);}
.insta-card:hover img{transform:scale(1.1);}
.insta-overlay{
  backdrop-filter:blur(2px);
  transition:opacity .35s var(--ease);
}

/* ---------------------------------------------------------------------
   TESTIMONIALS / WHY-CHOOSE CARDS
--------------------------------------------------------------------- */
.testimonial-grid > div, .why-grid > div, .testimonial-card{
  border-radius:var(--radius-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonial-grid > div:hover, .why-grid > div:hover, .testimonial-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
}

/* ---------------------------------------------------------------------
   SITE-WIDE PREMIUM CARDS
   (about / contact / visit-us / product-details / tracking sections)
--------------------------------------------------------------------- */
.feature-box, .info-box, .achievement-card, .mission-box, .hours-box,
.visit-box, .faq-item, .details, .gallery img, .main-image{
  border-radius:var(--radius-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.feature-box, .info-box, .achievement-card, .mission-box, .hours-box, .visit-box, .faq-item{
  position:relative;
  box-shadow:var(--shadow-sm);
  border:1px solid transparent;
}
.feature-box:hover, .info-box:hover, .achievement-card:hover, .mission-box:hover,
.hours-box:hover, .visit-box:hover, .faq-item:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
  border-color:var(--line);
}
.feature-box i, .info-box i, .mission-box i, .visit-box i{
  background:linear-gradient(135deg,var(--g-100),#fff);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease);
}
.feature-box:hover i, .info-box:hover i, .mission-box:hover i, .visit-box:hover i{
  transform:scale(1.12) rotate(-6deg);
}

/* Tabs (product-details pages) */
.tab-btn{
  border-radius:50px !important;
  font-weight:600;
  transition:all .3s var(--ease);
}
.tab-btn:hover{transform:translateY(-2px);}
.tab-btn.active{
  background:linear-gradient(135deg,var(--g-700),var(--g-900)) !important;
  color:#fff !important;
  box-shadow:var(--shadow-glow);
}
.tab-content{transition:opacity .35s var(--ease);}

/* Page hero banners (about / contact / visit-us / product-details) */
.page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(12,123,69,.14), transparent 45%),
    radial-gradient(circle at 88% 10%, rgba(255,201,77,.18), transparent 42%),
    linear-gradient(135deg,#eefcf2,#ffffff);
}

/* Forms — contact / review / newsletter */
.contact-form input, .contact-form textarea, .contact-form select,
.review-form input, .review-form textarea{
  border-radius:14px !important;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.contact-form input:focus, .contact-form textarea:focus,
.review-form input:focus, .review-form textarea:focus{
  border-color:var(--g-700) !important;
  box-shadow:0 0 0 4px rgba(12,123,69,.14) !important;
}
.contact-form, .review-widget{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.star-input span{transition:transform .2s var(--ease), color .2s var(--ease);}
.star-input span:hover{transform:scale(1.25);}

/* ---------------------------------------------------------------------
   NEWSLETTER / CTA
--------------------------------------------------------------------- */
.newsletter{
  background:linear-gradient(135deg,var(--g-900),var(--g-700)) !important;
}
.newsletter-box input, .newsletter input{
  border-radius:50px !important;
  border:none !important;
  padding:14px 22px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.cta-box{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

/* ---------------------------------------------------------------------
   FLOATING WHATSAPP + SCROLL TOP (Responsive & Non-Overlapping)
--------------------------------------------------------------------- */
.whatsapp{
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 56px !important;
  height: 56px !important;
  background: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: white !important;
  font-size: 28px !important;
  text-decoration: none !important;
  z-index: 9300 !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.45) !important;
  animation: wa-pulse 2.6s ease-in-out infinite;
  transition: transform .25s ease, bottom .3s ease, box-shadow .25s ease !important;
}
.whatsapp:hover{
  transform: translateY(-4px) scale(1.06) !important;
  color: white !important;
}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.45);}
  50%{box-shadow:0 8px 30px rgba(37,211,102,.7), 0 0 0 8px rgba(37,211,102,.12);}
}
body.gg-has-bottomnav .whatsapp,
body.gg-has-sticky-atc .whatsapp,
body.gg-has-smartcta .whatsapp{
  bottom: 84px !important;
}

#scrollTop{
  position: fixed !important;
  right: 28px !important;
  bottom: 90px !important;
  z-index: 9150 !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform .3s var(--ease), bottom .3s ease, box-shadow .3s var(--ease) !important;
}
#scrollTop:hover{transform:translateY(-4px) scale(1.08) !important;}
body.gg-has-bottomnav #scrollTop,
body.gg-has-sticky-atc #scrollTop,
body.gg-has-smartcta #scrollTop{
  bottom: 148px !important;
}

/* ---------------------------------------------------------------------
   LOADER — premium spinner
--------------------------------------------------------------------- */
#loader{
  background:#ffffff;
}
.spinner{
  border-top-color:var(--g-700) !important;
}

/* ---------------------------------------------------------------------
   AMBIENT DEPTH — soft blurred glow blobs behind key sections
   (pure decoration, pointer-events:none, never affects layout)
--------------------------------------------------------------------- */
.hero, .featured-products, .newsletter, .contact-cta, .page-hero{
  position:relative;
  isolation:isolate;
}
.hero::after, .page-hero::after{
  content:"";
  position:absolute;
  width:420px; height:420px;
  right:-140px; top:-160px;
  background:radial-gradient(circle, rgba(255,201,77,.35), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
  z-index:-1;
}
.featured-products::before{
  content:"";
  position:absolute;
  width:360px; height:360px;
  left:-120px; bottom:-140px;
  background:radial-gradient(circle, rgba(12,123,69,.10), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
  z-index:-1;
}

/* ---------------------------------------------------------------------
   PRICE TAG — gold-accented, premium chip feel
--------------------------------------------------------------------- */
.price{
  background:linear-gradient(120deg,var(--g-900),var(--g-700));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  font-weight:800 !important;
  position:relative;
}
.price-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.price-row::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(255,201,77,.25);
}

/* ---------------------------------------------------------------------
   TESTIMONIALS — quote mark + gold stars
--------------------------------------------------------------------- */
.testimonial-card, .testimonial-grid > div{
  position:relative;
  background:#fff;
}
.testimonial-card::before, .testimonial-grid > div::before{
  content:"\201C";
  position:absolute;
  top:6px; left:18px;
  font-size:64px;
  line-height:1;
  font-family:Georgia, serif;
  color:var(--g-100);
  z-index:0;
}
.testimonial-card *, .testimonial-grid > div *{position:relative; z-index:1;}
.stars, .rating{color:var(--gold-500) !important;}

/* ---------------------------------------------------------------------
   FOOTER — premium dark gradient + gold accents
--------------------------------------------------------------------- */
.footer{
  background:linear-gradient(160deg,var(--g-900) 0%, #052a18 100%) !important;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 85% 0%, rgba(255,201,77,.10), transparent 45%);
  pointer-events:none;
}
.footer h3{
  position:relative;
  display:inline-block;
  color:#fff;
}
.footer h3::after{
  content:"";
  display:block;
  width:36px; height:3px;
  margin-top:8px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-500),transparent);
}
.footer ul li a:hover{
  color:var(--gold-500) !important;
}
.footer-logo{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.footer-bottom{
  position:relative;
}

/* ---------------------------------------------------------------------
   CONVERSION — sticky mobile order bar (injected by premium.js)
--------------------------------------------------------------------- */
.gg-sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -10px 30px rgba(6,74,41,.16);
  transform:translateY(100%);
  transition:transform .4s var(--ease);
}
.gg-sticky-cta.show{transform:translateY(0);}
.gg-sticky-cta .gg-cta-text{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.25;
}
.gg-sticky-cta .gg-cta-text span{display:block; color:var(--muted); font-weight:500; font-size:11px;}
.gg-sticky-cta a{
  flex-shrink:0;
  background:linear-gradient(135deg,#25D366,#128C4A);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  padding:12px 20px;
  border-radius:50px;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(37,211,102,.35);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
@media (min-width:601px){
  .gg-sticky-cta{display:none !important;}
}
@media (max-width:600px){
  .gg-sticky-cta{display:flex;}
  body.gg-has-sticky-cta{padding-bottom:72px;}
}

/* ---------------------------------------------------------------------
   MOBILE-FIRST PREMIUM FIXES (real bug fixes, not just decoration)
--------------------------------------------------------------------- */
img{max-width:100%; height:auto;}

@media (max-width:900px){
  header nav.nav-open{
    background:#fff;
    border-radius:0 0 var(--radius-md) var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:6px 14px 14px;
  }
  nav ul li a::after{display:none;}
  .hero-right:hover img{transform:none;}
  .product-card:hover{transform:translateY(-4px) !important;}

  /* Two-column grids had no mobile breakpoint at all — on phones the
     columns were squeezed to ~120px, crushing images and text.
     Stack them into one readable column. */
  .about-grid,
  .story-grid,
  .featured-grid,
  .visit-grid,
  .promise-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
    text-align:center;
  }
  .about-grid > div:last-child,
  .story-grid > div:first-child,
  .featured-image,
  .visit-image,
  .promise-grid > div:first-child{
    order:-1;
  }
  .page-hero-img{height:280px !important;}
}

@media (max-width:600px){
  .page-hero-img{height:220px !important;}
}

@media (max-width:600px){
  :root{--radius-lg:16px; --radius-md:12px;}
  .container{width:94%;}
  .hero{padding:36px 0 !important;}
  .hero h1{font-size:26px !important; line-height:1.28 !important;}
  .hero p{font-size:14.5px !important; line-height:1.7 !important; margin-bottom:22px !important;}
  .hero-buttons{gap:10px;}
  .hero-buttons a{flex:1 1 auto; justify-content:center; text-align:center; font-size:14px !important; padding:12px 16px !important;}
  .badge{font-size:12px !important; padding:7px 14px !important;}

  .section-title h2{font-size:22px !important;}
  .section-title p{font-size:13.5px !important;}

  .product-card{margin-bottom:2px;}
  .product-content h3{font-size:16px !important;}
  .product-content p{font-size:13px !important;}
  .price-row .price{font-size:18px !important;}

  .product-actions{gap:8px !important;}
  .product-actions .buy-btn, .product-actions .order-btn{width:100%; text-align:center; font-size:13.5px !important; padding:12px 14px !important;}
  .product-actions .qty-selector{width:100%; justify-content:space-between !important;}

  /* Homepage / listing product cards: the row holding the qty selector +
     Add to Cart button has no flex-wrap, so a 100%-width qty-selector was
     squeezing the button down to a sliver. Let this row wrap onto two
     lines instead, and give the qty box a sane max width. */
  .product-buttons > div{flex-wrap:wrap;}
  .product-buttons .qty-selector{flex:1 1 140px; max-width:160px;}
  .whatsapp{width:50px !important; height:50px !important; font-size:24px !important; bottom:20px !important; right:18px !important; z-index:9300 !important;}
  body.gg-has-bottomnav .whatsapp,
  body.gg-has-sticky-atc .whatsapp,
  body.gg-has-smartcta .whatsapp{bottom:80px !important; right:16px !important;}
  #scrollTop{width:40px !important; height:40px !important; bottom:80px !important; right:23px !important; z-index:9150 !important;}
  body.gg-has-bottomnav #scrollTop,
  body.gg-has-sticky-atc #scrollTop,
  body.gg-has-smartcta #scrollTop{bottom:140px !important; right:21px !important;}

  .cta-box h2{font-size:20px !important;}
  .newsletter-box h2{font-size:20px !important;}

  .footer-grid{gap:28px !important;}
  .footer-about p{font-size:13.5px;}

  /* prevent any accidental horizontal scroll on small screens */
  html, body{max-width:100%; overflow-x:hidden;}
  .hero-content, .product-grid, .products-grid, .footer-grid{max-width:100%;}
}

@media (max-width:380px){
  .hero h1{font-size:23px !important;}
  .logo h2{font-size:19px !important;}
  .logo img{width:44px !important;}
}

/* ---------------------------------------------------------------------
   PREMIUM CATEGORY PILLS (product.html filter/navigation)
--------------------------------------------------------------------- */
.category-list{
  gap:12px;
  padding:6px 2px;
}
.category-list a.category-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px !important;
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:50px;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.2px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.category-list a.category-btn i{
  font-size:14px;
  color:var(--g-700);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.category-list a.category-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.category-list a.category-btn:hover::before{transform:translateX(120%);}
.category-list a.category-btn:hover{
  transform:translateY(-3px);
  border-color:transparent;
  background:linear-gradient(135deg,var(--g-700),var(--g-900));
  color:#fff;
  box-shadow:var(--shadow-glow);
}
.category-list a.category-btn:hover i{color:#fff;}
.category-list a.category-btn.active{
  background:linear-gradient(135deg,var(--g-700),var(--g-900));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.category-list a.category-btn.active i{color:var(--gold-500);}

@media (max-width:600px){
  .category-list{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:10px;
    margin:0 -4vw;
    padding-left:4vw;
    padding-right:4vw;
  }
  .category-list::-webkit-scrollbar{display:none;}
  .category-list a.category-btn{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:11px 20px !important;
    font-size:13.5px;
    white-space:nowrap;
  }
}

/* ---------------------------------------------------------------------
   PREMIUM PRODUCT GALLERY (product-details pages)
--------------------------------------------------------------------- */
.gallery{
  position:sticky;
  top:100px;
}
.main-image{
  position:relative;
  background:linear-gradient(160deg,#f8fffa,#eefaf1);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.main-image::after{
  content:"\f00e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:16px; bottom:16px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9);
  color:var(--g-800);
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  font-size:14px;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.main-image:hover::after{opacity:1; transform:translateY(0);}
.main-image img{
  transition:opacity .18s linear, transform .5s var(--ease);
}
.main-image img.fading{opacity:0;}
.main-image img:hover{transform:scale(1.06);}

.thumbs{
  gap:14px;
}
.thumbs img{
  border:2px solid transparent;
  background:linear-gradient(160deg,#f8fffa,#eefaf1);
  box-shadow:var(--shadow-sm);
  opacity:.75;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease), opacity .3s var(--ease);
}
.thumbs img:hover{opacity:1;}
.thumbs img.active{
  border-color:var(--g-700);
  opacity:1;
  box-shadow:var(--shadow-glow);
}

/* Single-image galleries: hide an empty/redundant thumb row cleanly */
.thumbs:empty{display:none;}

/* Lightbox */
.img-lightbox{
  position:fixed; inset:0;
  background:rgba(6,20,13,.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
  z-index:9999;
  padding:5vh 5vw;
}
.img-lightbox.open{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.img-lightbox img{
  max-width:min(90vw,720px);
  max-height:86vh;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  transform:scale(.92);
  transition:transform .35s var(--ease);
}
.img-lightbox.open img{transform:scale(1);}
.img-lightbox-close{
  position:absolute; top:22px; right:28px;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:26px;
  line-height:1;
  border-radius:50%;
  cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.img-lightbox-close:hover{background:rgba(255,255,255,.25); transform:rotate(90deg);}

@media (max-width:1024px){
  .gallery{position:static;}
}
@media (max-width:600px){
  .main-image{padding:14px !important; border-radius:16px !important;}
  .main-image::after{width:32px; height:32px; font-size:12px; right:10px; bottom:10px;}
  .thumbs{gap:10px; margin-top:14px !important;}
  .thumbs img{width:72px !important; padding:8px !important; border-radius:12px !important;}
  .img-lightbox-close{top:14px; right:14px; width:36px; height:36px; font-size:20px;}
}

/* ---------------------------------------------------------------------
   HIDE DESCRIPTION ON PRODUCT CARDS
   Description text (with feature bullets) should only appear on a
   product's own detail page (.details), never on listing cards or
   "related products" cards (.product-content), across any page.
--------------------------------------------------------------------- */
.product-content p,
.product-content li,
.product-content ul,
.product-content ol{
  display:none !important;
}

/* Touch devices: skip hover-only tilt/scale so nothing gets stuck mid-animation */
@media (hover:none){
  .product-card:hover, .insta-card:hover, .hero-right:hover img{
    transform:none !important;
  }
  .product-card:active{transform:translateY(-4px) !important;}
}

/* ---------------------------------------------------------------------
   ABOUT PAGE — premium emblem frame (fixes the pixelated hero graphic)
   The source image is small, so stretching it to fill the full grid
   column upscaled it heavily and made it look blurry/pixelated. Capping
   its size close to its native resolution — inside a designed frame —
   removes the pixelation and reads as an intentional badge rather than
   a stretched photo.
--------------------------------------------------------------------- */
.about-hero .about-grid > div:last-child{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}
.about-hero .about-grid > div:last-child::before{
  content:"";
  position:absolute;
  width:min(78%,340px);
  aspect-ratio:1/1;
  background:radial-gradient(circle, var(--g-100) 0%, rgba(234,252,241,0) 72%);
  border-radius:50%;
  z-index:0;
}
.about-hero .about-grid > div:last-child img{
  position:relative;
  z-index:1;
  width:auto;
  max-width:min(66%,280px);
  height:auto;
  filter:drop-shadow(0 24px 34px rgba(6,74,41,.22));
  animation:float 4.5s ease-in-out infinite;
}

/* Our Story image: decent resolution already — give it a premium card
   frame instead of a bare edge-to-edge photo */
.story-grid > div:first-child img{
  border:6px solid #fff;
  box-shadow:var(--shadow-lg);
}

@media (max-width:900px){
  .about-hero .about-grid > div:last-child::before{width:min(60%,240px);}
  .about-hero .about-grid > div:last-child img{max-width:min(58%,220px);}
}

/* ==========================================================================
   GLOW & GROW — E-COMMERCE CORE EXTENSION STYLES
   Search, Quick View, Wishlist, Cart, Checkout, Tracking, Account & Dark Mode
   ========================================================================== */

/* --- Toast Notifications --- */
.gg-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.gg-toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  background: rgba(18, 32, 26, 0.95);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid var(--g-600);
  animation: toastSlideIn 0.35s var(--ease);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gg-toast.fade-out {
  opacity: 0;
  transform: translateX(30px);
}
.gg-toast-success { border-left-color: #10b981; }
.gg-toast-success i { color: #10b981; font-size: 18px; }
.gg-toast-info { border-left-color: var(--gold-500); }
.gg-toast-info i { color: var(--gold-500); font-size: 18px; }
.gg-toast-error { border-left-color: #ef4444; }
.gg-toast-error i { color: #ef4444; font-size: 18px; }
.gg-toast span { flex: 1; }
.gg-toast-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.gg-toast-close:hover { color: #fff; }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --- Cart & Wishlist Bump Animation --- */
.cart-bump {
  animation: badgeBump 0.35s var(--ease);
}
@keyframes badgeBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --- Header Action Icons & Nav --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-action-btn {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  text-decoration: none;
}
.nav-action-btn:hover {
  background: rgba(12, 123, 69, 0.08);
  color: var(--g-800);
  transform: translateY(-2px);
}
.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--g-800);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(12, 123, 69, 0.4);
}
.nav-badge-gold {
  background: var(--gold-600);
  color: #12201a;
}

/* --- Wishlist Heart Active State --- */
.wishlist {
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.wishlist:hover {
  transform: scale(1.15);
}
.wishlist.active i,
.wishlist i.fas {
  color: #e63946 !important;
}

/* --- Search Bar & Search Autocomplete Modal --- */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 18, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 16px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.search-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.search-modal-container {
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  overflow: hidden;
  transform: translateY(-20px) scale(0.98);
  transition: transform 0.35s var(--ease);
  border: 1px solid rgba(12,123,69,0.12);
}
.search-modal-overlay.open .search-modal-container {
  transform: translateY(0) scale(1);
}
.search-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eef3ef;
  gap: 12px;
}
.search-modal-header i.search-icon {
  font-size: 20px;
  color: var(--g-800);
}
.search-modal-input {
  flex: 1;
  border: none;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  background: transparent;
  color: var(--ink);
}
.search-clear-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  display: none;
}
.search-clear-btn.show {
  display: block;
}
.search-modal-close {
  background: #f0f4f1;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.search-modal-close:hover {
  background: #e2eae4;
  color: var(--ink);
}
.search-suggestions-box {
  padding: 14px 20px;
  background: #fafdfb;
  border-bottom: 1px solid #eef3ef;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.search-tag-chip {
  background: #eef7f1;
  color: var(--g-800);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12.5px;
  cursor: pointer;
  transition: 0.2s;
  border: 1px solid rgba(12,123,69,0.1);
}
.search-tag-chip:hover {
  background: var(--g-800);
  color: #fff;
}
.search-results-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 10px 14px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease);
}
.search-result-item:hover, .search-result-item.highlighted {
  background: #f0f7f2;
}
.search-result-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: #f7faf8;
}
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.search-result-price {
  color: var(--g-800);
  font-weight: 700;
  font-size: 14.5px;
}
.search-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.search-empty-state i {
  font-size: 36px;
  color: #ccc;
  margin-bottom: 12px;
}

/* --- Quick View Modal --- */
.quick-view-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 18, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.quick-view-modal.open {
  opacity: 1;
  visibility: visible;
}
.quick-view-dialog {
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.3);
  position: relative;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s var(--ease);
  border: 1px solid rgba(12,123,69,0.14);
}
.quick-view-modal.open .quick-view-dialog {
  transform: translateY(0) scale(1);
}
.quick-view-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f4f1;
  border: none;
  font-size: 22px;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: 0.2s;
}
.quick-view-close:hover {
  background: #e0e9e2;
  color: #000;
  transform: rotate(90deg);
}
.qv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 36px;
  align-items: center;
}
.qv-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qv-main-image-wrap {
  background: #f7faf8;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(12,123,69,0.08);
}
.qv-main-image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}
.qv-main-image:hover {
  transform: scale(1.06);
}
.qv-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--g-800);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(12,123,69,0.25);
}
.qv-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.qv-thumb-img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f5f5f5;
  transition: 0.2s;
}
.qv-thumb-img.active, .qv-thumb-img:hover {
  border-color: var(--g-800);
  transform: translateY(-2px);
}
.qv-details {
  display: flex;
  flex-direction: column;
}
.qv-category {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--g-700);
  letter-spacing: 1px;
}
.qv-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 10px;
  line-height: 1.25;
}
.qv-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.qv-stars {
  color: #f59e0b;
  font-size: 15px;
}
.qv-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.qv-current-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--g-800);
}
.qv-orig-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}
.qv-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  padding: 3px 10px;
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 14px;
}
.qv-stock-dot {
  width: 7px;
  height: 7px;
  background: #059669;
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.qv-description {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.qv-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qv-bullets li {
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.qv-bullets li i {
  color: var(--g-800);
  font-size: 12px;
}
.qv-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qv-actions-row .qty-selector {
  margin: 0;
}
.qv-actions-row .buy-btn {
  flex: 1;
  min-width: 140px;
}
.qv-view-details-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-800);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: 0.2s;
}
.qv-view-details-link:hover {
  text-decoration: underline;
  transform: translateX(4px);
}
@media (max-width: 768px) {
  .qv-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }
  .qv-title { font-size: 20px; }
  .qv-current-price { font-size: 22px; }
}

/* --- Free Shipping Progress Bar --- */
.free-shipping-card {
  background: #f5fbf7;
  border: 1px solid rgba(12, 123, 69, 0.16);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 22px;
}
.free-shipping-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.free-shipping-header i {
  color: var(--g-800);
  font-size: 18px;
}
.free-shipping-progress-track {
  width: 100%;
  height: 9px;
  background: #e2ece5;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}
.free-shipping-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--g-800), var(--gold-500));
  border-radius: 50px;
  transition: width 0.4s var(--ease);
}
.free-shipping-card.unlocked {
  background: #ecfdf5;
  border-color: #10b981;
}
.free-shipping-card.unlocked .free-shipping-header {
  color: #065f46;
}

/* --- Coupon Input Section --- */
.coupon-section {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.coupon-input {
  flex: 1 1 0%;
  min-width: 0; /* let the input shrink instead of forcing the button off-width */
  padding: 12px 16px;
  border: 1px solid #dbe5de;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  text-transform: uppercase;
}
.coupon-input:focus {
  outline: none;
  border-color: var(--g-800);
  box-shadow: 0 0 0 3px rgba(12, 123, 69, 0.12);
}
.coupon-btn {
  flex: 0 0 auto; /* never shrink — this is what was collapsing to a
                      near-zero-width column and wrapping "Apply" one
                      letter per line ("A" / "p" / "p" / "l" / "y") */
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  cursor: pointer;
  transition: 0.25s;
}
.coupon-btn:hover {
  background: var(--g-800);
}
.applied-coupon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  color: #065f46;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.applied-coupon-badge button {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-weight: bold;
}

/* --- Filter Bar & Catalog Controls --- */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(12, 123, 69, 0.12);
  box-shadow: var(--shadow-sm);
}
.catalog-count-text {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.catalog-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.catalog-select {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #dbe5de;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.catalog-select:focus {
  outline: none;
  border-color: var(--g-800);
}
.clear-filters-btn {
  background: transparent;
  border: 1px dashed #ef4444;
  color: #ef4444;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}
.clear-filters-btn:hover {
  background: #fee2e2;
}

/* --- Flash Sale Countdown Banner --- */
.flash-sale-banner {
  background: linear-gradient(135deg, #073820 0%, #0d5430 100%);
  color: #fff;
  padding: 30px 20px;
  border-radius: 22px;
  margin: 40px auto 20px;
  box-shadow: 0 16px 40px rgba(7, 56, 32, 0.28);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 201, 77, 0.2);
}
.flash-sale-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.flash-sale-info h3 {
  font-size: 24px;
  color: var(--gold-500);
  margin-bottom: 6px;
}
.flash-sale-info p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
}
.countdown-clock {
  display: flex;
  gap: 12px;
}
.countdown-unit {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 201, 77, 0.3);
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  min-width: 64px;
}
.countdown-num {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--gold-500);
  font-family: monospace;
}
.countdown-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}

/* --- FAQ Accordion --- */
.faq-section {
  padding: 70px 0;
}
.faq-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-card {
  background: #fff;
  border: 1px solid rgba(12, 123, 69, 0.14);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.faq-card.active {
  border-color: var(--g-700);
  box-shadow: 0 8px 24px rgba(12, 123, 69, 0.08);
}
.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.faq-question i {
  color: var(--g-800);
  transition: transform 0.3s var(--ease);
}
.faq-card.active .faq-question i {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 0 24px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.faq-card.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px;
}

/* --- Order Tracking Timeline --- */
.tracking-timeline {
  margin: 28px 0;
  padding: 20px 0;
  position: relative;
}
.timeline-step {
  display: flex;
  gap: 18px;
  padding-bottom: 24px;
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: #e2ece5;
}
.timeline-step.completed::after {
  background: var(--g-800);
}
.timeline-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f4f1;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-step.completed .timeline-icon {
  background: var(--g-800);
  color: #fff;
}
.timeline-step.current .timeline-icon {
  background: var(--gold-500);
  color: #12201a;
  box-shadow: 0 0 0 4px rgba(255, 201, 77, 0.3);
}
.timeline-step-content h4 {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--ink);
}
.timeline-step-content p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* --- Payment Method Cards --- */
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.payment-method-card {
  border: 2px solid #e0ece3;
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.25s;
  background: #fff;
}
.payment-method-card:hover {
  border-color: var(--g-700);
}
.payment-method-card.active {
  border-color: var(--g-800);
  background: #f0f9f3;
  box-shadow: 0 4px 14px rgba(12, 123, 69, 0.12);
}
.payment-method-card input[type="radio"] {
  display: none;
}
.payment-method-title {
  font-size: 13.5px;
  font-weight: 700;
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

/* --- DARK THEME OVERRIDES FOR ALL 6 PALETTES --- */
[data-theme="dark"] {
  --ink: #eaf5ee;
  --muted: #a3b8ad;
  --line: rgba(255, 255, 255, 0.12);
  --bg-page: #0b1610;
  --bg-card: #12221a;
}
[data-theme="dark"] body {
  background: var(--bg-page);
  color: var(--ink);
}

[data-theme="dark"][data-theme-style="natural"] {
  --ink: #edf5f0;
  --muted: #a1b8ac;
  --bg-page: #0f1c16;
  --bg-card: #162a21;
  --line: rgba(82, 183, 136, 0.18);
}

[data-theme="dark"][data-theme-style="rose"] {
  --ink: #fcecef;
  --muted: #bfa1a9;
  --bg-page: #1c0e14;
  --bg-card: #2b1620;
  --line: rgba(212, 99, 130, 0.22);
}

[data-theme="dark"][data-theme-style="midnight"] {
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --bg-page: #070d14;
  --bg-card: #0f1a26;
  --line: rgba(16, 185, 129, 0.24);
}

[data-theme="dark"][data-theme-style="sand"] {
  --ink: #faede6;
  --muted: #bfa99d;
  --bg-page: #19120e;
  --bg-card: #281e18;
  --line: rgba(188, 108, 37, 0.22);
}

[data-theme="dark"][data-theme-style="royal"] {
  --ink: #f0f4ff;
  --muted: #97a8c4;
  --bg-page: #0b1220;
  --bg-card: #131e33;
  --line: rgba(37, 99, 235, 0.24);
}

[data-theme="dark"] header {
  background: rgba(11, 22, 16, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .product-card,
[data-theme="dark"] .cart-wrapper,
[data-theme="dark"] .checkout-container,
[data-theme="dark"] .quick-view-dialog,
[data-theme="dark"] .search-modal-container,
[data-theme="dark"] .faq-card,
[data-theme="dark"] .why-box,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .info-box,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .catalog-toolbar,
[data-theme="dark"] .summary-box,
[data-theme="dark"] .mega-menu,
[data-theme="dark"] .cart-drawer,
[data-theme="dark"] .theme-menu-dropdown {
  background: var(--bg-card) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .product-content h3,
[data-theme="dark"] .cart-header h1,
[data-theme="dark"] .checkout-container h2,
[data-theme="dark"] .qv-title,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .search-result-name,
[data-theme="dark"] .cart-drawer-header h3,
[data-theme="dark"] .mega-col-title {
  color: #fff !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .free-shipping-card,
[data-theme="dark"] .cart-free-shipping {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .search-suggestions-box {
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .search-tag-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gold-500) !important;
}
[data-theme="dark"] .nav-action-btn,
[data-theme="dark"] .theme-toggle-btn {
  color: var(--ink) !important;
}
[data-theme="dark"] .nav-action-btn:hover,
[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .announcement-bar {
  background: linear-gradient(90deg, #06381e, #0c4d29) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   THEME SWITCHER COMPONENT
   ========================================================================== */
.theme-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.theme-picker-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s var(--ease);
}
.theme-picker-btn:hover {
  border-color: var(--g-700);
  background: rgba(12, 123, 69, 0.08);
}
.theme-picker-btn .theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--g-700);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 6px var(--g-700);
}
.theme-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  border: 1px solid var(--line);
  padding: 16px;
  z-index: 1000;
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.theme-menu-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.theme-menu-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme-styles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.theme-style-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5ede7;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: all 0.2s;
}
.theme-style-option:hover {
  background: #f0f7f2;
  border-color: var(--g-700);
}
.theme-style-option.active {
  border-color: var(--g-800);
  background: #e8f5ec;
  color: var(--g-900);
}
.theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px #ffffff, 0 1px 3px rgba(0, 0, 0, 0.2);
}
.theme-swatch-natural { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.theme-swatch-emerald { background: linear-gradient(135deg, #0c7b45, #ffc94d); }
.theme-swatch-rose { background: linear-gradient(135deg, #9e4760, #e5a970); }
.theme-swatch-midnight { background: linear-gradient(135deg, #152232, #10b981); }
.theme-swatch-sand { background: linear-gradient(135deg, #6b4d3b, #dda15e); }
.theme-swatch-royal { background: linear-gradient(135deg, #1e3a8a, #ca8a04); }

.theme-mode-switch {
  display: flex;
  background: #f0f4f1;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.theme-mode-btn {
  flex: 1;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.theme-mode-btn.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .theme-mode-switch {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .theme-mode-btn.active {
  background: var(--g-800);
  color: #ffffff;
}

/* ==========================================================================
   MEGA MENU NAVIGATION
   ========================================================================== */
.nav-has-mega {
  position: static !important;
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(12, 45, 30, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 34px 50px;
  z-index: 999;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-has-mega:hover .mega-menu,
.nav-has-mega.mega-active .mega-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.mega-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr) 280px;
  gap: 28px;
}
.mega-col-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--g-800);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.mega-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-links li a {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  transition: color 0.2s, transform 0.2s;
}
.mega-links li a:hover {
  color: var(--g-800);
  transform: translateX(4px);
}
.mega-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mega-pill-hot { background: #fee2e2; color: #dc2626; }
.mega-pill-new { background: #dbeafe; color: #2563eb; }
.mega-pill-herbal { background: #dcfce7; color: #15803d; }
.mega-pill-sale { background: #fef3c7; color: #d97706; }

.mega-featured {
  background: linear-gradient(145deg, var(--g-100), #ffffff);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(12, 123, 69, 0.08);
}
.mega-featured img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 12px;
  transition: transform 0.3s;
}
.mega-featured:hover img {
  transform: scale(1.08) rotate(2deg);
}
.mega-featured h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.mega-featured p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.mega-featured .mega-featured-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--g-800);
  margin-bottom: 10px;
}

/* ==========================================================================
   SLIDE-OUT CART DRAWER
   ========================================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-drawer.active {
  transform: translateX(0);
}
.cart-drawer-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.cart-drawer-count {
  background: var(--g-800);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.cart-drawer-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.cart-drawer-close:hover {
  color: #ef4444;
  transform: rotate(90deg);
}

.cart-free-shipping {
  background: #f4fbf6;
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
}
.shipping-meter-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shipping-meter-track {
  height: 6px;
  background: #e0eee4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 4px;
}
.shipping-meter-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--g-700), var(--gold-500));
  border-radius: 10px;
  width: 0%;
  transition: width 0.4s var(--ease);
}
.shipping-flat-note {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.cart-drawer-empty i {
  font-size: 52px;
  color: var(--line-strong);
  margin-bottom: 16px;
}
.cart-drawer-empty h4 {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
}
.cart-drawer-empty p {
  font-size: 13.5px;
  margin-bottom: 20px;
}

.drawer-item {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.drawer-item-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #f8faf8;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.drawer-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}
.drawer-item-title:hover {
  color: var(--g-800);
}
.drawer-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.drawer-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-800);
}
.drawer-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.drawer-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
[data-theme="dark"] .drawer-stepper {
  background: rgba(255, 255, 255, 0.05);
}
.drawer-stepper button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.drawer-stepper button:hover {
  background: var(--g-100);
}
.drawer-stepper span {
  width: 28px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.drawer-item-remove {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  transition: transform 0.2s;
}
.drawer-item-remove:hover {
  transform: scale(1.15);
}

.cart-drawer-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  background: #fbfdfc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="dark"] .cart-drawer-footer {
  background: var(--bg-card);
}
.drawer-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}
.drawer-summary-row.total {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.drawer-summary-row.total span:last-child {
  color: var(--g-800);
}
.drawer-checkout-btn {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--g-700), var(--g-900));
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-glow);
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.drawer-checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.drawer-view-cart {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-800);
  text-decoration: none;
  transition: color 0.2s;
}
.drawer-view-cart:hover {
  text-decoration: underline;
}

/* ==========================================================================
   NAVIGATION ACTION BUTTONS & ICONS
   ========================================================================== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-action-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s var(--ease);
  text-decoration: none;
}
.nav-action-btn:hover {
  border-color: var(--g-700);
  background: var(--g-100);
  transform: translateY(-2px);
}
.nav-action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--g-800);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nav-action-btn {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .nav-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}




/* ---------------------------------------------------------------------
   Glow & Grow 2026 product-image integrity + consistent product actions
--------------------------------------------------------------------- */
.product-card .product-image,
.product-card .product-image a {
  overflow: hidden;
}
.product-card .product-image img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  width: 100%;
  height: 320px;
  display: block;
}
.product-card:hover .product-image img {
  transform: none !important;
}
.main-image img,
.qv-main-image,
.drawer-item-img,
.search-result-img {
  object-fit: contain !important;
  object-position: center !important;
}
.main-image img:hover,
.qv-main-image:hover {
  transform: none !important;
}
.qv-thumb-img {
  object-fit: contain !important;
}
.drawer-item-img {
  background: #f8faf8;
}
.product-button-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.product-button-row > * {
  flex: 1 1 0;
  min-width: 0;
}
.gg-new-product-card .product-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gg-new-product-card .product-buttons {
  margin-top: auto;
  display: grid;
  gap: 9px;
}
.gg-new-product-card .order-btn,
.gg-new-product-card .view-btn,
.gg-new-product-card .buy-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 600px) {
  .product-card .product-image img { height: 260px; }
  .product-button-row { flex-direction: column; }
}

.customer-avatar{width:60px;height:60px;border-radius:50%;margin-right:15px;display:inline-flex;align-items:center;justify-content:center;background:var(--g-100,#e8f5ec);color:var(--g-800,#0c7b45);font-weight:800;font-size:18px;flex:0 0 auto;}


/* Glow & Grow product image safety: preserve the complete product, never crop. */
.product-image img,
.main-image img,
.thumbs img,
.qv-main-image,
.qv-thumb-img,
.search-result-img,
.drawer-item-img {
  object-fit: contain !important;
}


/* ================= FINAL GLOBAL POLISH / RESPONSIVE SAFETY ================= */
:root{--container-max:1280px;--premium-border:rgba(12,123,69,.12);}
*{box-sizing:border-box;}
body{overflow-x:hidden;line-height:1.55;}
img{max-width:100%;}
.container{width:min(92%,var(--container-max));margin-inline:auto;}
header{z-index:10000 !important;}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.top-bar p{line-height:1.4;}
.logo h2{font-size:24px !important;letter-spacing:.5px;white-space:nowrap;}
.logo span{white-space:nowrap;}
.nav{gap:20px;}
nav{min-width:0;}
nav ul{gap:2px;}
nav ul li a{white-space:nowrap;}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.nav-action-btn{flex:0 0 auto;}
.nav-order-btn{white-space:nowrap;}
.theme-picker-wrapper{position:relative;z-index:10002;}
.theme-picker-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.theme-menu-dropdown{z-index:10020 !important;}

/* Premium mega menu */
.mega-menu{top:calc(100% + 8px);padding:28px 30px !important;border:1px solid var(--premium-border);border-radius:0 0 24px 24px;background:color-mix(in srgb,var(--bg-card,#fff) 94%,transparent);box-shadow:0 24px 70px rgba(12,45,30,.20);}
.mega-grid{grid-template-columns:repeat(5,minmax(130px,1fr)) minmax(210px,250px);gap:18px;}
.mega-col{padding:4px 10px;}
.mega-col-title{font-size:12px;margin-bottom:10px;}
.mega-links{gap:5px;}
.mega-links li a{font-size:12.5px;padding:6px 7px;border-radius:9px;}
.mega-links li a:hover{background:var(--g-100);transform:translateX(3px);}
.mega-featured{padding:15px;border-radius:18px;}
.mega-featured img{width:105px;height:105px;object-fit:contain;}
.mega-featured-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--g-700);font-weight:800;}
.mega-featured p{line-height:1.45;}
.mega-featured .buy-btn{padding:9px 18px !important;font-size:12px;}

/* Product cards: no crop, stable layout, complete buttons */
.product-grid,.products-grid{align-items:stretch;}
.product-card{height:100%;display:flex;flex-direction:column;overflow:hidden;}
.product-card .product-image{height:285px;min-height:285px;padding:18px;background:linear-gradient(145deg,#f8fcf9,#eef8f1);display:flex;align-items:center;justify-content:center;}
.product-card .product-image img{width:100%;height:100%;object-fit:contain !important;transform:none !important;}
.product-card:hover .product-image img{transform:none !important;}
.product-card .product-content{display:flex;flex-direction:column;flex:1;padding:20px;min-width:0;}
.product-card .product-content h3{font-size:17px;line-height:1.35;min-height:46px;margin:7px 0 8px;overflow-wrap:anywhere;}
.product-card .product-content h3 a{color:inherit;text-decoration:none;}
.product-card .qv-category{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;}
.product-price{display:flex;align-items:baseline;gap:8px;min-height:28px;margin:6px 0 12px;}
.product-price .price{font-size:20px;font-weight:800;color:var(--g-800);}
.old-price{font-size:12px;color:#999;text-decoration:line-through;}
.product-buttons{margin-top:auto;display:grid;gap:8px;}
.product-button-row{display:flex;gap:8px;align-items:stretch;}
.product-button-row>*{min-width:0;flex:1 1 0;}
.product-button-row .qty-selector{flex:0 0 110px;}
.product-button-row .buy-btn,.product-button-row .view-btn,.product-button-row .order-btn{min-height:42px;padding:10px 12px !important;font-size:12px;}
.product-buy-row .add-cart{flex:1 1 auto;}
.qty-selector{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-card,#fff);min-height:42px;}
.qty-selector .qty-btn{width:32px;height:40px;border:0;background:transparent;cursor:pointer;font-weight:800;color:var(--g-800);}
.qty-selector .qty-input{width:42px;height:40px;border:0;text-align:center;background:transparent;color:var(--ink);font-weight:700;outline:none;}
.wishlist{z-index:3;}

/* Category cards: show full image, concise content */
.category-card,.cat-hub-card{position:relative;}
.category-card img{height:210px !important;object-fit:contain !important;padding:18px;background:#f7fbf8;}
.category-card h3{font-size:19px !important;line-height:1.3;margin:15px 18px 6px !important;}
.category-card-desc{margin:0 18px 14px;color:var(--muted);font-size:12.5px;line-height:1.45;min-height:36px;}
.category-card-badge{display:inline-block;margin:14px 18px 0;padding:5px 10px;border-radius:999px;background:var(--g-100);color:var(--g-800);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.category-card a{margin:0 18px 20px !important;padding:10px 18px !important;font-size:12.5px !important;}
.cat-hub-image-wrap{height:220px !important;background:#f7fbf8 !important;}
.cat-hub-image-wrap img{object-fit:contain !important;padding:18px;transform:none !important;}
.cat-hub-card:hover .cat-hub-image-wrap img{transform:none !important;}
.cat-hub-title{font-size:18px !important;line-height:1.3;}
.cat-hub-desc{font-size:13px !important;line-height:1.45 !important;}

/* Text overlap prevention.
   NOTE: <button> is deliberately excluded from this list. Buttons hold short,
   fixed labels ("Apply", "Add to Cart", "Buy Now") — letting them break
   letter-by-letter when a flex sibling squeezes their width is what caused
   the "A / p / p / l / y" vertical-letter bug on the coupon Apply button.
   Buttons that truly need protection get flex:0 0 auto + white-space:nowrap
   instead (see .coupon-btn, .buy-btn, .view-btn, etc. below). */
h1,h2,h3,h4,h5,h6,p,a,label,span{overflow-wrap:anywhere;}

/* Action buttons (Add to Cart / Buy Now / Details / Quick View) must never
   split text into single letters when squeezed for space by a flex sibling
   (e.g. the quantity selector). Word-level wrapping only. */
.buy-btn,.view-btn,.quick-view,.order-btn,.qty-selector,.qty-selector *{
  overflow-wrap:normal;
  word-break:normal;
}
/* Stat numbers (5000+, 100%, 4.9★, 24/7) and short feature-strip headings must
   never be broken mid-character. On narrow phones the global overflow-wrap:anywhere
   rule above combined with a fixed 4-column grid was splitting these onto one
   digit/letter per line ("5" "0" "0" "0" stacked vertically). Reset wrapping to
   normal here; the responsive grid rules below give each item enough room instead. */
.counter-grid h2,.counter-grid p,.strip-grid h4,.strip-grid p{
  overflow-wrap:normal;
  word-break:normal;
}
.counter-grid h2{white-space:nowrap;}
@media (max-width:700px){
  .counter-grid{grid-template-columns:repeat(2,1fr) !important;gap:24px 16px !important;}
  .counter-grid h2{font-size:32px !important;}
  .counter-grid p{font-size:12.5px !important;}
  .strip-grid{grid-template-columns:repeat(2,1fr) !important;gap:22px 16px !important;}
  .strip-grid h4{font-size:15px !important;line-height:1.3;}
  .strip-grid i{font-size:30px !important;margin-bottom:10px !important;}
}
@media (max-width:420px){
  .counter-grid h2{font-size:26px !important;}
}
.section-title h2{line-height:1.2 !important;}
.section-title p{max-width:720px;margin-inline:auto;line-height:1.6;}
.page-hero h1{line-height:1.18 !important;overflow-wrap:anywhere;}
.details h1{line-height:1.15 !important;overflow-wrap:anywhere;}
.details p,.details li,.tab-content p,.tab-content li{line-height:1.65;}

/* Hero slider */
.hero-right{position:relative;min-width:0;}
.hero-right .hero-slide{width:100%;}
.hero-right .hero-slide img{width:100%;max-height:500px;object-fit:contain !important;display:block;}
.hero-slider-controls{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:5;}
.hero-slider-controls button{border:0;background:transparent;cursor:pointer;color:var(--g-900);font-weight:800;}
.hero-slider-prev,.hero-slider-next{width:28px;height:28px;border-radius:50%;background:#fff !important;box-shadow:0 4px 12px rgba(0,0,0,.12);font-size:21px;line-height:1;}
.hero-slider-dots{display:flex;gap:6px;}
.hero-dot{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(12,123,69,.25) !important;}
.hero-dot.active{background:var(--g-800) !important;transform:scale(1.35);}

/* Instagram sections: both account buttons are clearly visible */
.instagram-grid + .insta-follow-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.insta-follow-buttons .follow-button{min-width:220px;text-align:center;}
.instagram-grid>a[aria-label*="The Candle"],.instagram-grid>.insta-card>a[aria-label*="Instagram"]{display:none !important;}

/* Forms and panels */
input,select,textarea,button{font:inherit;}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--g-700) 18%,transparent);outline-offset:1px;}

/* Mobile / tablet premium layout */
@media (max-width:1100px){
  .nav{gap:10px;}
  .logo img{width:58px;}
  .logo h2{font-size:20px !important;}
  nav ul{gap:0;}
  nav ul li a{font-size:12px;padding-inline:7px;}
  .nav-order-btn span{display:none;}
  .nav-order-btn{padding:11px 13px !important;border-radius:50% !important;width:42px;height:42px;}
  .mega-grid{grid-template-columns:repeat(3,1fr);}
  .mega-featured{display:none;}
}
@media (max-width:900px){
  header .nav{min-height:74px;}
  .nav-actions{margin-left:auto;}
  .theme-picker-wrapper{display:none;}
  .nav-action-btn{width:40px;height:40px;}
  .nav-order-btn{display:none;}
  header nav{background:var(--bg-card,#fff);}
  header nav.nav-open{max-height:calc(100vh - 80px);overflow-y:auto;padding-bottom:16px;}
  nav ul{gap:0;}
  nav ul li{width:100%;}
  nav ul li a{font-size:14px;padding:13px 8px;}
  .nav-has-mega>.mega-menu{position:static !important;width:100%;display:none !important;opacity:1;transform:none;padding:12px 0 !important;border:0;border-radius:0;box-shadow:none;background:transparent;}
  .nav-has-mega.mega-active>.mega-menu{display:block !important;}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .mega-col{padding:8px;}
  .mega-col-title{font-size:11px;}
  .mega-links li a{font-size:12px;white-space:normal;}
  .product-card .product-image{height:250px;min-height:250px;}
  .product-card .product-content{padding:16px;}
  .product-card .product-content h3{font-size:16px;min-height:44px;}
  .product-button-row{flex-wrap:wrap;}
  .product-button-row .qty-selector{flex:1 1 100%;}
  .product-button-row .buy-btn,.product-button-row .view-btn,.product-button-row .order-btn{flex:1 1 calc(50% - 4px);}
  .hero-right .hero-slide img{max-height:360px;}
}
@media (max-width:600px){
  body{padding-bottom:0;}
  .top-bar{font-size:11px;padding:7px 0;}
  .top-bar-inner{justify-content:center;text-align:center;}
  .top-icons{justify-content:center;}
  .logo img{width:48px;margin-right:8px;}
  .logo h2{font-size:17px !important;}
  .logo span{font-size:10px;}
  .nav-actions{gap:4px;}
  .nav-action-btn{width:36px;height:36px;}
  .menu-toggle{width:34px;height:34px;}
  .hero{padding:34px 0 !important;}
  .hero h1{font-size:27px !important;line-height:1.22 !important;}
  .hero p{font-size:14px !important;line-height:1.65;}
  .hero-buttons{flex-direction:column;gap:9px;}
  .hero-buttons>*{width:100%;justify-content:center;}
  .hero-slider-controls{bottom:9px;}
  .product-grid,.products-grid,.category-grid,.categories-hub-grid{grid-template-columns:1fr !important;gap:16px !important;}
  .product-card .product-image{height:255px;min-height:255px;}
  .category-card img{height:190px !important;}
  .cat-hub-image-wrap{height:200px !important;}
  .section-title h2{font-size:25px !important;}
  .section-title p{font-size:13px !important;}
  .page-hero{padding:36px 0 28px !important;}
  .page-hero h1{font-size:27px !important;}
  .details-grid{gap:22px !important;}
  .main-image{min-height:280px;}
  .main-image img{max-height:330px;object-fit:contain !important;}
  .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;}
  .tab-btn{flex:0 0 auto;}
  .checkout-layout,.checkout-grid{grid-template-columns:1fr !important;}
  .checkout-panel{padding:20px 16px !important;}
  .checkout-form>div[style*="grid-template-columns"],#checkoutForm>div[style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr !important;}
  .gg-sticky-cta{left:10px;right:10px;bottom:10px;}
  .gg-sticky-cta .gg-cta-text{font-size:11px;}
  .gg-sticky-cta a{white-space:nowrap;}
}

@media (max-width:600px){
  .theme-picker-wrapper{display:block !important;}
  .theme-picker-btn{width:36px;height:36px;padding:0 !important;justify-content:center;border-radius:50% !important;font-size:0;}
  .theme-picker-btn .theme-dot{width:9px;height:9px;}
  .theme-label{display:none;}
  .theme-menu-dropdown{position:fixed !important;top:74px !important;right:10px !important;left:auto !important;width:min(300px,calc(100vw - 20px)) !important;}
}

/* Final breakpoint: collapse navigation before it can collide with actions. */
@media (max-width:1050px){
  header .nav{min-height:74px;height:auto;padding:12px 0;}
  .menu-toggle{display:flex !important;order:10;margin-left:0;}
  header nav{flex-basis:100%;order:20;max-height:0;overflow:hidden;}
  header nav.nav-open{max-height:calc(100vh - 80px);overflow-y:auto;margin-top:10px;border-top:1px solid var(--line);}
  header nav>ul{flex-direction:column;width:100%;padding:8px 0;}
  header nav>ul>li{width:100%;}
  header nav>ul>li>a{display:flex;align-items:center;justify-content:space-between;padding:12px 8px;font-size:14px;}
  .mega-menu{position:static !important;width:100%;}
  .nav-order-btn{display:none;}
  .theme-label{display:none;}
  .theme-picker-btn{width:40px;height:40px;padding:0 !important;justify-content:center;border-radius:50% !important;}
}


/* ==============================/* =====================================================================
   FINAL GLOBAL NAV + OVERLAP ELIMINATION + MEGA MENU + CUSTOMIZATION
   ===================================================================== */
header .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:84px;
  position:relative;
}
header .logo{
  flex:0 0 auto !important;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
header .logo img{width:56px !important;height:56px !important;object-fit:contain !important;flex:0 0 56px;}
header .logo h2{font-size:22px !important;line-height:1.05 !important;margin:0;}
header .logo span{font-size:12.5px !important;}
header nav{
  flex:1 1 auto !important;
  display:flex;
  justify-content:center;
  min-width:0 !important;
  overflow:visible !important;
}
header nav>ul{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:0 !important;
  flex-wrap:nowrap;
  margin:0;
  padding:0;
  list-style:none;
}
header nav>ul>li{margin:0 !important;flex:0 0 auto;}
header nav>ul>li>a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 11px !important;
  font-size:14.5px !important;
  font-weight:600;
  white-space:nowrap;
  color:var(--text, #1b2e25);
  border-radius:8px;
  transition:all .2s ease;
}
header nav>ul>li>a:hover, header nav>ul>li>a.active{
  color:var(--g-700, #0c7b45);
  background:rgba(12,123,69,.06);
}
header .nav-actions{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:7px !important;
  min-width:0;
}
header .nav-action-btn{width:42px;height:42px;flex:0 0 42px;}
header .theme-picker-btn{height:42px;padding:0 13px !important;border-radius:21px !important;}
header .nav-order-btn{height:44px;padding:10px 18px !important;border-radius:22px !important;white-space:nowrap;}

/* Extreme-premium mega menu: balanced 5 category columns + featured panel + hover bridge
   DESKTOP ONLY (>=1051px). Scoped in a media query so these rules can never
   out-specificity the mobile in-drawer mega menu rules below (they were
   previously bare/global and — because they used an extra `header` type
   selector — won that specificity fight even on phones, which is why the
   mega menu broke on mobile). */
@media (min-width:1051px){
header .nav-has-mega{position:static !important;}
header .mega-menu{
  position:absolute !important;
  top:calc(100% + 4px) !important;
  left:50% !important;
  transform:translate(-50%,-10px) !important;
  width:min(1260px,calc(100vw - 24px)) !important;
  padding:28px 32px !important;
  border:1px solid rgba(12,123,69,.16) !important;
  border-radius:0 0 28px 28px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,253,249,.97)) !important;
  box-shadow:0 30px 80px rgba(12,45,30,.22),0 8px 24px rgba(12,123,69,.08) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:99999 !important;
  display:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
/* Invisible hover bridge between header and mega menu */
header .mega-menu::before{
  content:'';
  position:absolute;
  top:-22px;
  left:0;
  right:0;
  height:22px;
  background:transparent;
}
header .nav-has-mega:hover .mega-menu,
header .nav-has-mega.mega-hover .mega-menu,
header .nav-has-mega.mega-active .mega-menu{
  display:block !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) !important;
}
header .mega-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) minmax(210px,250px) !important;
  gap:16px !important;
}
header .mega-col{
  padding:6px 12px !important;
  border-right:1px solid rgba(12,123,69,.08);
}
header .mega-col:nth-of-type(5){border-right:0;}
header .mega-col-title{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase;
  color:var(--g-800);
  padding-bottom:10px !important;
  margin-bottom:10px !important;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:2px solid rgba(12,123,69,.12);
}
header .mega-links{list-style:none;padding:0;margin:0;}
header .mega-links li{margin-bottom:6px;}
header .mega-links li a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  font-size:12.5px !important;
  font-weight:550;
  padding:7px 9px !important;
  border-radius:8px !important;
  color:var(--text, #1b2e25);
  transition:background .2s, color .2s;
}
header .mega-links li a:hover{
  background:rgba(12,123,69,.08) !important;
  color:var(--g-800) !important;
}
.mega-pill{
  font-size:9.5px;
  font-weight:800;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:999px;
  letter-spacing:.3px;
}
.mega-pill-hot{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;}
.mega-pill-herbal{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.mega-pill-new{background:#fef3c7;color:#b45309;border:1px solid #fde68a;}
.mega-pill-custom{background:#f3e8ff;color:#7e22ce;border:1px solid #d8b4fe;}

header .mega-featured{
  border-radius:18px !important;
  padding:16px !important;
  background:linear-gradient(145deg,#ebf8f0,#ffffff) !important;
  border:1px solid rgba(12,123,69,.12) !important;
  box-shadow:0 10px 24px rgba(12,123,69,.09) !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
header .mega-featured img{width:110px !important;height:110px !important;object-fit:contain !important;margin-bottom:8px;}
header .mega-featured .mega-featured-kicker{font-size:11px;font-weight:750;text-transform:uppercase;color:var(--g-600);letter-spacing:.5px;}
header .mega-featured h4{font-size:14.5px !important;margin:4px 0 !important;font-weight:800;}
header .mega-featured p{font-size:11.5px;color:var(--muted);margin:0 0 10px;line-height:1.35;}
header .mega-featured-price{font-size:15px;font-weight:850;color:var(--g-800);margin-bottom:10px;}
header .mega-featured .buy-btn{min-height:36px;padding:6px 14px;font-size:12.5px;width:100%;}

/* Dark mode mega menu */
[data-theme="dark"] header .mega-menu{
  background:linear-gradient(135deg, #13241b, #0c1812) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.60) !important;
}
[data-theme="dark"] header .mega-featured{
  background:linear-gradient(145deg,#1b3327,#12241b) !important;
  border-color:rgba(255,255,255,.10) !important;
}
[data-theme="dark"] header .mega-col-title{color:#e2f5eb;border-bottom-color:rgba(255,255,255,.10);}
[data-theme="dark"] header .mega-links li a{color:#d5ebe0;}
[data-theme="dark"] header .mega-links li a:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;}
} /* end desktop-only mega menu block */

/* Product price comparison: current price + crossed compare-at + savings badge */
.product-price{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:48px !important;margin:6px 0 10px;}
.product-price .price{font-size:20px !important;font-weight:850 !important;color:var(--g-900, #083c21);}
.old-price{font-size:13px !important;color:#89938d !important;text-decoration:line-through !important;font-weight:550;}
.price-save{
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.2px;
  color:#b45309;
  background:#fff7df;
  border:1px solid #f7d77a;
  border-radius:999px;
  padding:3px 8px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}
.price-save.price-current{color:var(--g-800);background:var(--g-100);border-color:var(--line);}
.price-compare{margin:-4px 0 16px;font-size:12.5px;font-weight:750;color:#b45309;background:#fff8e7;border:1px solid #f5d37b;border-radius:10px;padding:7px 12px;display:inline-block;}

/* Action buttons polish */
.product-actions .order-btn,.product-buttons .order-btn,.product-button-row .order-btn,#qvWhatsAppBtn{display:none !important;}
.product-button-row .buy-btn,.product-button-row .view-btn,.product-actions .buy-btn,.product-actions .view-btn{
  min-height:44px !important;
  border-radius:12px !important;
  font-weight:700 !important;
}
.product-button-row .view-btn,.product-actions .view-btn{
  border:1px solid var(--line-strong) !important;
  background:linear-gradient(180deg,#fff,#f4faf6) !important;
  color:var(--g-800) !important;
}
.product-button-row .view-btn:hover,.product-actions .view-btn:hover{
  background:linear-gradient(135deg,var(--g-700),var(--g-900)) !important;
  color:#fff !important;
}

/* Customization Suite Styles */
.customization-box{
  background:linear-gradient(135deg,rgba(244,252,247,.92),#ffffff);
  border:1.5px solid rgba(12,123,69,.22);
  border-radius:16px;
  padding:18px 20px;
  margin:18px 0 22px;
  box-shadow:0 8px 24px rgba(12,45,30,.06);
}
.customization-title{
  font-size:13.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--g-800);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.custom-input-group{margin-bottom:14px;}
.custom-input-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:700;
  color:var(--g-900);
  margin-bottom:6px;
}
.custom-name-field{
  width:100%;
  padding:12px 14px;
  font-size:16px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border:2px solid var(--g-300, #a3d9bc);
  border-radius:10px;
  background:#ffffff;
  color:var(--g-900);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.custom-name-field:focus{
  border-color:var(--g-700);
  box-shadow:0 0 0 3px rgba(12,123,69,.15);
}
.custom-chips-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;
}
.custom-chip-label{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  font-size:12.5px;
  font-weight:600;
  border:1px solid var(--line-strong, #c3e2d1);
  border-radius:10px;
  background:#ffffff;
  cursor:pointer;
  transition:all .2s;
}
.custom-chip-label:hover{
  border-color:var(--g-500);
  background:rgba(12,123,69,.04);
}
.custom-chip-label:has(input:checked){
  border-color:var(--g-700);
  background:rgba(12,123,69,.12);
  color:var(--g-900);
  font-weight:750;
  box-shadow:0 2px 8px rgba(12,123,69,.14);
}
.custom-preview-card{
  background:#ffffff;
  border:1.5px dashed var(--g-500);
  border-radius:12px;
  padding:14px 16px;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.custom-preview-tag{
  font-size:11px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--g-700);
  background:var(--g-100);
  padding:3px 9px;
  border-radius:6px;
}
.custom-preview-text{
  font-size:18px;
  font-weight:900;
  letter-spacing:2px;
  color:var(--g-900);
}

/* =====================================================================
   COLLISION-FREE RESPONSIVE NAVBAR SYSTEM
   ===================================================================== */
/* Laptops & intermediate desktops (1051px - 1280px) */
@media (max-width:1280px){
  header nav>ul>li>a{
    padding:8px 8px !important;
    font-size:13.5px !important;
    gap:4px;
  }
  header .theme-label{display:none !important;}
  header .theme-picker-btn{width:38px !important;height:38px !important;padding:0 !important;justify-content:center;border-radius:50% !important;}
  header .nav-order-btn span{display:none !important;}
  header .nav-order-btn{width:40px !important;height:40px !important;padding:0 !important;justify-content:center;border-radius:50% !important;}
  header .nav-action-btn{width:38px;height:38px;}
  header .nav-actions{gap:5px !important;}
  header .mega-grid{grid-template-columns:repeat(3,1fr) repeat(2,1fr) !important;}
  header .mega-col:nth-of-type(3){border-right:0;}
  header .mega-featured{display:none !important;}
}

/* Tablets & Mobile (< 1050px) - clean drawer navigation */
@media (max-width:1050px){
  header .nav{
    display:flex !important;
    flex-wrap:wrap !important;
    min-height:72px;
    height:auto;
    padding:10px 0;
  }
  header .logo{flex:1 1 auto;min-width:0;}
  header .logo img{width:50px !important;height:50px !important;flex:0 0 50px;}
  header .logo h2{font-size:19px !important;}
  header .nav-actions{margin-left:auto;}
  header .menu-toggle{display:flex !important;order:10;}
  header nav{
    flex-basis:100% !important;
    order:20;
    max-height:0;
    overflow:hidden !important;
    transition:max-height .35s ease, padding .35s ease;
    background:var(--bg-card, #ffffff);
    border-radius:0 0 18px 18px;
  }
  header nav.nav-open{
    max-height:calc(100vh - 80px);
    overflow-y:auto !important;
    padding:12px 14px 24px;
    margin-top:10px;
    border-top:1px solid var(--line);
    box-shadow:0 16px 36px rgba(0,0,0,.10);
  }
  header nav>ul{flex-direction:column !important;width:100%;}
  header nav>ul>li{width:100%;}
  header nav>ul>li>a{
    font-size:14.5px !important;
    justify-content:space-between;
    padding:12px 10px !important;
    border-bottom:1px solid rgba(12,123,69,.07);
  }
  /* In-drawer Mega Menu */
  .nav-has-mega>.mega-menu{
    position:static !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    display:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:12px 8px !important;
    border:none !important;
    box-shadow:none !important;
    background:rgba(12,123,69,.04) !important;
    border-radius:12px !important;
    margin-top:6px;
  }
  .nav-has-mega.mega-active>.mega-menu{
    display:block !important;
  }
  header .mega-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  header .mega-col{
    border-right:0 !important;
    border-bottom:1px solid rgba(12,123,69,.08);
    padding:8px 4px !important;
  }
}

/* Small mobile devices (< 600px) */
@media (max-width:600px){
  header .logo img{width:44px !important;height:44px !important;flex:0 0 44px;}
  header .logo h2{font-size:16.5px !important;}
  header .logo span{font-size:10px !important;}
  header .nav-actions{gap:4px !important;}
  header .nav-action-btn{width:35px;height:35px;}
  header .mega-grid{grid-template-columns:1fr !important;}
  .product-price{align-items:flex-start;}
  .price-save{white-space:normal;}
  .custom-chips-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   CINEMATIC PRODUCT VIDEO HERO & VARIANT SELECTOR SYSTEM
   ========================================================================== */

.product-video-hero,
.page-video-hero {
  position: relative;
  overflow: hidden;
  background-color: #0c261c;
  color: #ffffff;
  padding: 56px 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border-bottom: 1px solid rgba(197, 161, 90, 0.25);
}

.product-video-hero {
  padding: 70px 0 60px;
}

.video-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.video-bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.video-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(12, 38, 28, 0.90) 0%, rgba(12, 38, 28, 0.78) 50%, rgba(17, 53, 38, 0.90) 100%);
  pointer-events: none;
}

.video-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.video-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 163, 89, 0.4);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f7ede2;
  margin-bottom: 20px;
}

.eyebrow-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 10px #25d366;
  display: inline-block;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.video-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #f7d794 0%, #d4a359 50%, #f3a683 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.video-hero-desc {
  font-size: clamp(0.98rem, 1.8vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 auto 28px;
  max-width: 720px;
}

.video-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 16px 24px;
  margin: 0 auto 30px;
  max-width: 680px;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f7d794;
}

.hero-stat-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.hero-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
}

.video-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-hero-cta {
  background: linear-gradient(135deg, #d4a359 0%, #b8860b 100%);
  color: #0c261c !important;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(212, 163, 89, 0.35);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}

.btn-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 163, 89, 0.5);
  color: #0c261c !important;
}

.btn-hero-whatsapp {
  background: rgba(37, 211, 102, 0.2);
  border: 1px solid rgba(37, 211, 102, 0.6);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.btn-hero-whatsapp:hover {
  background: #25d366;
  color: #0c261c !important;
  border-color: #25d366;
  transform: translateY(-2px);
}

.btn-video-toggle {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-video-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.08);
}

/* Variant Selector Styling */
.variant-selector-container {
  margin: 18px 0 22px;
  padding: 16px;
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid var(--c-border, #e5e7eb);
  box-shadow: 0 4px 16px rgba(12, 38, 28, 0.04);
}

.variant-selector-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-forest, #0c261c);
  margin-bottom: 12px;
}

.variant-selector-title span.badge-selected {
  font-size: 0.74rem;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 999px;
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.variant-card {
  position: relative;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
  text-align: left;
  user-select: none;
}

.variant-card:hover {
  border-color: #0c7b45;
  background: #fbfdfc;
  transform: translateY(-2px);
}

.variant-card.selected {
  border-color: #0c7b45;
  background: rgba(12, 123, 69, 0.05);
  box-shadow: 0 4px 12px rgba(12, 123, 69, 0.12);
}

.variant-card-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  background: #d4a359;
  color: #0c261c;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.variant-card-badge.badge-popular {
  background: #0c7b45;
  color: #ffffff;
}

.variant-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  display: block;
}

.variant-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.variant-current-price {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0c7b45;
}

.variant-old-price {
  font-size: 0.78rem;
  color: #888888;
  text-decoration: line-through;
}

.variant-save-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .video-bg-media {
    display: none !important;
  }
  .video-bg-container {
    background-image: url('../images/herbal-oil-banner.jpeg');
    background-size: cover;
    background-position: center;
  }
  .eyebrow-pulse-dot {
    animation: none !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-video-hero,
  .page-video-hero {
    padding: 44px 0 38px;
  }
  .video-hero-title {
    font-size: 1.85rem;
  }
  .video-hero-stats {
    gap: 12px 18px;
    padding: 12px 16px;
  }
  .hero-stat-val {
    font-size: 1.15rem;
  }
  .hero-stat-divider {
    display: none;
  }
  .variant-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .product-video-hero,
  .page-video-hero {
    padding: 36px 0 30px;
  }
  .video-hero-title {
    font-size: 1.6rem;
  }
  .video-hero-desc {
    font-size: 0.92rem;
  }
  .video-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn-hero-cta, .btn-hero-whatsapp {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   CONSISTENT ANNOUNCEMENT BAR ACROSS ALL STORE PAGES
   Normalize legacy .top-bar markup and newer .announcement-bar markup.
   ========================================================================== */
.top-bar,
.announcement-bar {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 8px 0 !important;
  background: var(--c-forest-dark, #0c261c) !important;
  color: var(--c-ivory, #fffdf7) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid rgba(197, 161, 90, 0.28);
  position: relative;
  z-index: 1010;
}
.top-bar .container,
.announcement-bar .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
}
.top-bar p,
.announcement-bar .promo-text {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500;
  min-width: 0;
}
.top-bar .top-icons,
.announcement-bar .social-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px !important;
}
.top-bar .top-icons a,
.announcement-bar .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 253, 247, 0.92) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.top-bar .top-icons a:hover,
.announcement-bar .social-links a:hover {
  color: var(--c-gold, #c5a15a) !important;
  background: rgba(255,255,255,.07);
}
.top-bar .top-icons a i,
.announcement-bar .social-links a i {
  font-size: 14px;
  line-height: 1;
}
.announcement-bar .promo-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Individual category pages use their own relevant, muted, looping video hero. */
.category-page-video-hero {
  min-height: 340px;
  padding: 65px 0 55px;
  background: #0c261c;
}
.category-page-video-hero .video-bg-media {
  object-position: center center;
}
.category-page-video-hero .category-video-content {
  max-width: 850px;
  margin-inline: auto;
  padding-inline: 20px;
}
.category-page-video-hero h1,
.category-page-video-hero p,
.category-page-video-hero .eyebrow,
.category-page-video-hero nav {
  position: relative;
  z-index: 2;
}
.hero-section-video-el {
  background: #0c261c;
}

@media (max-width: 768px) {
  .top-bar,
  .announcement-bar {
    padding: 8px 0 !important;
    font-size: 12px !important;
  }
  .top-bar .container,
  .announcement-bar .container {
    justify-content: center !important;
    gap: 5px 8px !important;
    text-align: center;
  }
  .top-bar p,
  .announcement-bar .promo-text {
    justify-content: center;
    font-size: 12px !important;
    text-align: center;
  }
  .top-bar .top-icons,
  .announcement-bar .social-links {
    justify-content: center !important;
    gap: 5px !important;
  }
  .top-bar .top-icons a,
  .announcement-bar .social-links a {
    min-height: 28px;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  .category-page-video-hero {
    min-height: 300px;
    padding: 44px 0 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-frame {
    animation: none !important;
  }
}