/* ==========================================================================
   Glow & Grow — PREMIUM LAYER
   Loaded AFTER style.css + responsive.css.
   Purpose: elevate the existing design system to a premium, modern,
   conversion-focused, mobile-first look with smooth 3D motion —
   without touching the original files or breaking existing markup/JS.
   ========================================================================== */

:root{
  --g-900:#064a29;
  --g-800:#0c7b45;
  --g-700:#0e9251;
  --g-600:#12ad60;
  --g-100:#eafcf1;
  --gold-500:#ffc94d;
  --gold-600:#f5b636;
  --ink:#12201a;
  --muted:#5c6b64;
  --line:rgba(12,123,69,.14);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 4px 14px rgba(12,45,30,.08);
  --shadow-md:0 14px 34px rgba(12,45,30,.14);
  --shadow-lg:0 26px 60px rgba(12,45,30,.20);
  --shadow-glow:0 8px 24px rgba(12,123,69,.30);
  --ease:cubic-bezier(.22,1,.36,1);
}

@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
--------------------------------------------------------------------- */
.whatsapp{
  box-shadow:0 8px 24px rgba(37,211,102,.45) !important;
  animation:wa-pulse 2.6s ease-in-out infinite;
}
@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);}
}
#scrollTop{
  border-radius:50% !important;
  box-shadow:var(--shadow-md) !important;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}
#scrollTop:hover{transform:translateY(-4px) scale(1.08) !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;}
  .qty-selector{width:100%; justify-content:space-between !important;}

  .whatsapp{width:48px !important; height:48px !important; font-size:20px !important; bottom:16px !important; right:16px !important;}
  #scrollTop{width:42px !important; height:42px !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);}
}