/* ==========================================================================
   VEERA NATURALS — BRAND THEME OVERRIDE v2026.3
   Strict solid-color palette. ZERO GRADIENTS.
   Applied AFTER style.css and reference-fix.css to take final precedence.

   ── UPDATED BRAND PALETTE ──────────────────────────────────────────────────
   Primary Blue  : #08135a   (Primary Deep Blue)
   Primary Green : #128A42   (Primary Herbal Green)
   Deep Blue     : #050d38   (Footer and dark bottom elements)
   Hover Blue    : #060e44   (Card/button hover states)
   Hover Green   : #128A42   (Green hover states)
   Base White    : #FFFFFF   (Pure white sections & cards)
   Border Color  : #E2E8F0   (Clean universal border)
   Text on White : #1E293B   (Slate dark body text)
   Text on Color : #FFFFFF   (High-contrast white text)
   Soft Blue Tint: #F0F3FA   (Subtle card/icon backdrop)
   Soft Green Tint:#EDFBF3   (Fresh badge/tag backdrop)

   ── STRICT ALTERNATING SECTION PATTERN (Home Page) ────────────────────────
   Topbar                 : #128A42  (Primary Green — immediate green presence)
   Navbar                 : #FFFFFF  (White with Blue & Green nav items)
   Section 1 Hero Slider  : #08135a  (Primary Blue)
   Section 2 Best Sellers : #FFFFFF  (Base White)
   Section 3 Comfort      : #128A42  (Primary Green)
   Section 4 Why-Us       : #FFFFFF  (Base White)
   Section 5 Reviews      : #08135a  (Primary Blue)
   Section 6 FAQ          : #FFFFFF  (Base White)
   Footer                 : #050d38  (Deep Navy Blue)
   ========================================================================== */

:root {
  --nt-blue:         #08135a;   /* Primary Blue */
  --nt-blue-dark:    #060e44;   /* Darker navy blue */
  --nt-blue-deep:    #050d38;   /* Deepest blue for footer */
  --nt-blue-tint:    #F0F3FA;   /* Subtle blue tint */
  --nt-green:        #128A42;   /* Primary Green */
  --nt-green-dark:   #128A42;   /* Primary Green */
  --nt-green-hover:  #128A42;   /* Primary Green */
  --nt-green-text:   #128A42;   /* Primary Green */
  --accent-pink:     #128A42;   /* Legacy alias to primary green */
  --accent-green:    #128A42;   /* Primary Green */
  --nt-green-tint:   #EDFBF3;   /* Soft light mint badge tint */
  --nt-white:        #FFFFFF;   /* Pure white */
  --nt-border:       #E2E8F0;   /* Universal clean border */
  --nt-text-dark:    #1E293B;   /* Clean dark text on white */
  --nt-text-white:   #FFFFFF;   /* Clean white text on colors */
  --nt-text-muted:   #475569;   /* Body secondary text */
  --nt-shadow-card:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --nt-shadow-hover: 0 14px 30px rgba(8, 19, 90, 0.12);
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL BASE
   ────────────────────────────────────────────────────────────────────────── */
body {
  color: var(--nt-text-dark) !important;
  background-color: var(--nt-white) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   TOP ANNOUNCEMENT BAR  →  Solid Vibrant Green (#128A42)
   Balances color distribution across the page immediately at the top
   ────────────────────────────────────────────────────────────────────────── */
.site-topbar {
  background: var(--nt-green) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--nt-white) !important;
}
.site-topbar .topbar-msg,
.site-topbar .topbar-offer,
.site-topbar .topbar-link {
  color: var(--nt-white) !important;
}
.site-topbar .topbar-link:hover {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   NAVBAR  →  White background, Blue & Green accents
   ────────────────────────────────────────────────────────────────────────── */
.site-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 990 !important;
  margin: 0 !important;
  background: var(--nt-white) !important;
  border-bottom: 1px solid var(--nt-border) !important;
  box-shadow: 0 2px 8px rgba(8, 19, 90, 0.06) !important;
}
.brand-name-main { color: var(--nt-blue) !important; }
.brand-name-sub   { color: var(--nt-text-muted) !important; }

.desktop-nav .nav-links-center a {
  color: var(--nt-blue) !important;
  transition: color 0.2s ease !important;
}
.desktop-nav .nav-links-center a:hover,
.desktop-nav .nav-links-center a.active {
  color: var(--nt-green) !important;
}
.desktop-nav .nav-links-center a.active::after {
  background: var(--nt-green) !important;
}

.nav-icon-link {
  color: var(--nt-blue) !important;
}
.nav-icon-link:hover {
  background: var(--nt-blue-tint) !important;
  color: var(--nt-green) !important;
}

.nav-badge {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border-color: var(--nt-white) !important;
}

.nav-account-pill {
  background: var(--nt-blue) !important;
  color: var(--nt-white) !important;
  border-radius: 50px !important;
}
.nav-account-pill:hover {
  background: var(--nt-green) !important;
}

.page-menu-btn {
  background: var(--nt-white) !important;
  border-color: var(--nt-border) !important;
}
.page-menu-btn span {
  background: var(--nt-blue) !important;
}

/* Mobile Pages Sidebar */
.page-sidebar {
  background: var(--nt-blue-deep) !important;
}
.ps-group-title {
  color: #128A42 !important;
}
.ps-link {
  color: rgba(255, 255, 255, 0.88) !important;
}
.ps-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--nt-white) !important;
}
.ps-link.active {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
}
.page-sidebar-close:hover {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
}
.ps-logout-btn:hover {
  background: var(--nt-green) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 1 — HERO SLIDER  →  PRIMARY BLUE (#08135a)
   ────────────────────────────────────────────────────────────────────────── */
.hero-slider-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nt-blue) !important;
  border: none !important;
  border-bottom: none !important;
  overflow: hidden !important;
}
.hero-slider-section,
.hero-slider-container,
.hero-slider-track,
.hero-slide,
.hero-banner-link,
.hero-banner-picture {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: default !important;
}
.hero-banner-img {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: default !important;
}

@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .site-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 62px !important;
    z-index: 990 !important;
    margin: 0 !important;
  }
  .hero-slider-section {
    height: calc(100vh - 62px) !important;
    height: calc(100dvh - 62px) !important;
    height: calc(100svh - 62px) !important;
    min-height: calc(100vh - 62px) !important;
    min-height: calc(100dvh - 62px) !important;
    max-height: calc(100vh - 62px) !important;
    max-height: calc(100dvh - 62px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    cursor: default !important;
  }
  .hero-slider-container,
  .hero-slider-track,
  .hero-slide,
  .hero-banner-link,
  .hero-banner-picture {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    cursor: default !important;
  }
  .hero-banner-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    cursor: default !important;
  }
  /* Slide 1 mobile (mob1.png): image bottom visible till end */
  .hero-slide[data-slide-index="0"] .hero-banner-img,
  .hero-slide--1 .hero-banner-img,
  .hero-banner-img--slide1 {
    object-position: center bottom !important;
  }
  /* Slide 2 mobile (mob2.png): image top visible */
  .hero-slide[data-slide-index="1"] .hero-banner-img,
  .hero-slide--2 .hero-banner-img,
  .hero-banner-img--slide2 {
    object-position: center top !important;
  }
}

/* Slider arrows on Blue: Clean White circle with Green hover */
.hero-slider-arrow {
  background: var(--nt-white) !important;
  border: 1.5px solid var(--nt-white) !important;
  color: var(--nt-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
.hero-slider-arrow:hover {
  background: var(--nt-green) !important;
  border-color: var(--nt-green) !important;
  color: var(--nt-white) !important;
  box-shadow: 0 6px 18px rgba(18, 138, 66, 0.40) !important;
}

/* Dots */
.hero-dot {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}
.hero-dot.active {
  background: var(--nt-green) !important;
  border-color: var(--nt-white) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 2 — BEST SELLERS  →  BASE WHITE (#FFFFFF)
   ────────────────────────────────────────────────────────────────────────── */
.best-sellers-section {
  background: var(--nt-white) !important;
  color: var(--nt-text-dark) !important;
}

.best-sellers-section .bs-eyebrow {
  color: var(--nt-green) !important;
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
}
.best-sellers-section .bs-title {
  color: var(--nt-blue) !important;
}
.best-sellers-section .bs-subtitle {
  color: var(--nt-text-muted) !important;
}

.bs-viewall {
  background: var(--nt-blue) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--nt-white) !important;
}
.bs-viewall:hover {
  background: var(--nt-blue-dark) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PRODUCT CARDS (Home Best Sellers & Products Page) — Professional E-Commerce
   No clunky top bar, clean neutral image backdrop, crisp 50/50 action buttons
   ────────────────────────────────────────────────────────────────────────── */
.bs-card,
.bestseller-card,
main .products-catalog .bestseller-card {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--nt-shadow-card) !important;
  color: var(--nt-text-dark) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.bs-card:hover,
.bestseller-card:hover,
main .products-catalog .bestseller-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(18, 138, 66, 0.35) !important;
  box-shadow: var(--nt-shadow-hover) !important;
}

/* Product Media / Image Box: Clean neutral #F8FAFC (no dark blue block) */
.bs-media,
.bestseller-img-box,
main .products-catalog .bestseller-img-box {
  background: #F8FAFC !important;
  border: 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-radius: 0 !important;
  height: 220px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bs-media img,
.bestseller-img-box img,
main .products-catalog .bestseller-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.35s ease !important;
}
.bs-card:hover .bs-media img,
.bestseller-card:hover .bestseller-img-box img {
  transform: scale(1.04) !important;
}

/* Best Seller Flag */
.bs-flag {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 6px rgba(18, 138, 66, 0.3) !important;
  top: 12px !important;
  left: 12px !important;
}

/* Wishlist Heart */
.bs-card .wishlist-heart,
.bestseller-card .wishlist-heart,
main .products-catalog .wishlist-heart {
  background: var(--nt-white) !important;
  color: #64748B !important;
  border: 1px solid var(--nt-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  top: 12px !important;
  right: 12px !important;
  transition: all 0.2s ease !important;
}
.bs-card .wishlist-heart:hover,
.bestseller-card .wishlist-heart:hover,
main .products-catalog .wishlist-heart:hover {
  background: var(--nt-white) !important;
  color: var(--nt-green) !important;
  border-color: var(--nt-green) !important;
  transform: scale(1.08) !important;
}
.bs-card .wishlist-heart.in-wishlist,
.bestseller-card .wishlist-heart.in-wishlist,
main .products-catalog .wishlist-heart.in-wishlist {
  background: #FEF2F2 !important;
  color: #EF4444 !important;
  border-color: #FECACA !important;
}

/* Category Badge */
.bs-cat {
  color: var(--nt-green-text) !important;
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 50px !important;
}
.bs-cat:hover {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border-color: var(--nt-green) !important;
}

/* Card Typography */
.bs-body,
.bestseller-details,
main .products-catalog .bestseller-details {
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.bs-name,
.bestseller-title,
main .products-catalog .bestseller-title {
  font-family: var(--font-serif) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: var(--nt-blue) !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
.bs-name a,
.bestseller-title a,
main .products-catalog .bestseller-title a {
  color: var(--nt-blue) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.bs-name a:hover,
.bestseller-title a:hover,
main .products-catalog .bestseller-title a:hover {
  color: var(--nt-green) !important;
}

.bs-tagline,
.bestseller-tagline,
main .products-catalog .bestseller-tagline {
  font-size: 0.82rem !important;
  color: var(--nt-text-muted) !important;
  margin-bottom: 12px !important;
  line-height: 1.45 !important;
}

.bs-foot,
.price-row,
main .products-catalog .price-row {
  border-top: 1px solid var(--nt-border) !important;
  padding-top: 10px !important;
  margin-top: auto !important;
}

.bs-price,
.current-price,
main .products-catalog .current-price {
  font-family: var(--font-sans) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--nt-text-dark) !important;
}

/* Action Buttons inside Product Cards: Add-to-Cart = Green, Buy-Now = Blue */
.product-card-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.product-card-actions form {
  flex: 1 !important;
  margin: 0 !important;
}

.product-card-actions .add-to-cart-form .btn,
main .products-catalog .product-card-actions .add-to-cart-form .btn {
  background: var(--nt-green) !important;
  border: none !important;
  color: var(--nt-white) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  height: 42px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}
.product-card-actions .add-to-cart-form .btn:hover,
main .products-catalog .product-card-actions .add-to-cart-form .btn:hover {
  background: var(--nt-green-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(18, 138, 66, 0.35) !important;
}

.product-card-actions .buy-now-form .btn,
main .products-catalog .product-card-actions .buy-now-form .btn {
  background: var(--nt-blue) !important;
  border: none !important;
  color: var(--nt-white) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  height: 42px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}
.product-card-actions .buy-now-form .btn:hover,
main .products-catalog .product-card-actions .buy-now-form .btn:hover {
  background: var(--nt-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(8, 19, 90, 0.30) !important;
}

.bestsellers-mobile-cta .btn {
  background: var(--nt-blue) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--nt-white) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 3 — COMFORT ("DESIGNED FOR YOUR COMFORT")  →  PRIMARY GREEN (#128A42)
   ────────────────────────────────────────────────────────────────────────── */
#comfort {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
}
#comfort .eyebrow-tag {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: var(--nt-white) !important;
}
#comfort .section-title {
  color: var(--nt-white) !important;
}
.comfort-subtext {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* Benefit feature cards on Green section: White card, green icon harmony */
.benefit-item {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--nt-shadow-card) !important;
}
.benefit-item:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-2px) !important;
}
.benefit-icon-circle {
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
  color: var(--nt-green) !important;
}
.benefit-title {
  color: var(--nt-blue) !important;
}
.benefit-desc {
  color: var(--nt-text-muted) !important;
}

.comfort-img-card {
  border: 4px solid var(--nt-white) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
  border-radius: 20px !important;
}
.comfort-handwritten-overlay {
  background: var(--nt-white) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
  color: var(--nt-blue) !important;
}
.comfort-handwritten-overlay .heart-accent {
  color: var(--nt-green) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 4 — WHY US ("WHY CHOOSE VEERA NATURALS?")  →  BASE WHITE (#FFFFFF)
   Feature icons & CTA button use Vibrant Green to enhance color balance
   ────────────────────────────────────────────────────────────────────────── */
#why-us {
  background: var(--nt-white) !important;
  color: var(--nt-text-dark) !important;
}
#why-us .eyebrow-tag,
#why-us .eyebrow-tag.light {
  background: var(--nt-green-tint) !important;
  color: var(--nt-green) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
}
#why-us .section-title,
#why-us .section-title.text-white {
  color: var(--nt-blue) !important;
}
#why-us .promise-desc {
  color: var(--nt-text-muted) !important;
}

#why-us .promise-feature-item {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--nt-shadow-card) !important;
}
#why-us .promise-feature-item:hover {
  border-color: rgba(18, 138, 66, 0.35) !important;
  box-shadow: 0 8px 22px rgba(18, 138, 66, 0.10) !important;
}
#why-us .promise-feature-title {
  color: var(--nt-blue) !important;
}
#why-us .promise-feature-desc {
  color: var(--nt-text-muted) !important;
}

/* Green icon circles in Why-Us */
#why-us .promise-icon-circle {
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
  color: var(--nt-green) !important;
}
#why-us .promise-img-box {
  border: 3px solid var(--nt-border) !important;
  box-shadow: 0 12px 30px rgba(8, 19, 90, 0.10) !important;
  border-radius: 16px !important;
}

/* CTA button in White section: Vibrant Green (#128A42) */
#why-us .btn-pink,
#why-us .btn-outline-navy {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
#why-us .btn-pink:hover,
#why-us .btn-outline-navy:hover {
  background: var(--nt-green-dark) !important;
  box-shadow: 0 4px 14px rgba(18, 138, 66, 0.35) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 5 — REVIEWS ("LOVED BY OUR CUSTOMERS")  →  PRIMARY BLUE (#08135a)
   ────────────────────────────────────────────────────────────────────────── */
#reviews,
#stories {
  background: var(--nt-blue) !important;
  color: var(--nt-white) !important;
}
#reviews .eyebrow-tag {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border: 1px solid var(--nt-green) !important;
}
#reviews .section-title {
  color: var(--nt-white) !important;
}
#reviews .section-subtitle {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ── CAROUSEL NAVIGATION BUTTONS (< and >) — Professionally Perfect ──────── */
.carousel-arrows-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.carousel-arrow-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--nt-white) !important;
  border: 1.5px solid var(--nt-white) !important;
  color: var(--nt-blue) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  user-select: none !important;
}

.carousel-arrow-btn:hover:not(:disabled) {
  background: var(--nt-green) !important;
  border-color: var(--nt-green) !important;
  color: var(--nt-white) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(18, 138, 66, 0.45) !important;
}

.carousel-arrow-btn:disabled {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Review Cards on Blue */
.review-card {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  box-shadow: var(--nt-shadow-card) !important;
  border-radius: 14px !important;
}
.review-card:hover {
  border-color: rgba(8, 19, 90, 0.25) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}
.avatar-circle {
  background: var(--nt-blue-tint) !important;
  border: 1px solid rgba(8, 19, 90, 0.25) !important;
}
.reviewer-name {
  color: var(--nt-blue) !important;
}
.reviewer-tag {
  color: var(--nt-green-text) !important;
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
}
.review-text {
  color: var(--nt-text-dark) !important;
}
.reviewer-rating-row .stars {
  color: #F59E0B !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION 6 — FAQ ("FREQUENTLY ASKED QUESTIONS")  →  BASE WHITE (#FFFFFF)
   Flawless accordion mechanism: question never overlaps answer content
   ────────────────────────────────────────────────────────────────────────── */
#faq {
  background: var(--nt-white) !important;
  color: var(--nt-text-dark) !important;
}
#faq .eyebrow-tag {
  background: var(--nt-green-tint) !important;
  color: var(--nt-green) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
}
#faq .section-title {
  color: var(--nt-blue) !important;
}
#faq .faq-subtext {
  color: var(--nt-text-muted) !important;
}

/* View All FAQs CTA button → Vibrant Green */
#faq .btn-outline-navy {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
#faq .btn-outline-navy:hover {
  background: var(--nt-green-dark) !important;
  box-shadow: 0 4px 14px rgba(18, 138, 66, 0.35) !important;
}

/* ── FAQ ACCORDION ENGINE ────────────────────────────────────────────────── */
.faq-accordion-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.faq-accordion-item {
  display: block !important;
  width: 100% !important;
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  margin: 0 !important;
}

.faq-accordion-item:hover {
  border-color: rgba(8, 19, 90, 0.30) !important;
  box-shadow: 0 6px 18px rgba(8, 19, 90, 0.08) !important;
}

.faq-accordion-item.active {
  border-color: var(--nt-blue) !important;
  box-shadow: 0 6px 20px rgba(8, 19, 90, 0.12) !important;
}

/* Question Button */
.faq-toggle-btn {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  background: var(--nt-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--nt-blue) !important;
  text-align: left !important;
  cursor: pointer !important;
  gap: 16px !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

.faq-toggle-btn:hover {
  background: #FAFBFD !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Active Button: adds crisp divider line between question and answer */
.faq-accordion-item.active .faq-toggle-btn {
  color: var(--nt-blue) !important;
  background: #FAFBFD !important;
  border-bottom: 1px solid var(--nt-border) !important;
}

/* Plus/Close Icon */
.faq-toggle-btn .faq-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: var(--nt-blue-tint) !important;
  color: var(--nt-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.faq-accordion-item.active .faq-toggle-btn .faq-icon {
  transform: rotate(45deg) !important;
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
}

/* Answer Content: smooth expand with clean padding, never overlaps */
.faq-answer-content {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 22px !important;
  background: var(--nt-white) !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease !important;
}

.faq-accordion-item.active .faq-answer-content {
  max-height: 600px !important;
  padding: 16px 22px 20px !important;
}

.faq-answer-content p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  color: #475569 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FOOTER  →  DEEP NAVY BLUE (#1C4567)
   ────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--nt-blue-deep) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

.footer-heading {
  color: var(--nt-white) !important;
  border-bottom: 2px solid var(--nt-green) !important;
}
.footer-brand-desc {
  color: rgba(255, 255, 255, 0.70) !important;
}
.footer-links-list a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-links-list a:hover {
  color: var(--nt-white) !important;
}
.footer-address-list li {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-address-list li svg {
  color: var(--nt-green) !important;
}
.footer-address-list a {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-address-list a:hover {
  color: var(--nt-white) !important;
}

.footer-map-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.footer-map-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.footer-map-head h4 {
  color: var(--nt-white) !important;
}
.footer-map-head svg {
  color: var(--nt-green) !important;
}
.footer-map-dir-btn {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
  border-radius: 8px !important;
}
.footer-map-dir-btn:hover {
  background: var(--nt-green-dark) !important;
}

.footer-bottom-bar {
  background: #020925 !important;
  color: #7b95bd !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 18px 0 !important;
  text-align: center !important;
}

.footer-bottom-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.copyright-text {
  color: #7b95bd !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PAGE HEROES (Inner Pages) — BACKGROUND IMAGE RESTORED
   Undoes previous solid color override; restores page-header.png
   ────────────────────────────────────────────────────────────────────────── */
.page-hero,
.wcu-hero,
body[class*="page-"] .page-hero {
  background: url('../images/page-heroes/page-header.webp') center center / cover no-repeat !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  position: relative !important;
  color: var(--nt-white) !important;
}

/* Clean up any darkening pseudo elements */
.page-hero::before,
.wcu-hero::before,
body[class*="page-"] .page-hero::before {
  display: none !important;
}

.page-hero .container,
.wcu-hero .wcu-hero-inner {
  position: relative !important;
  z-index: 2 !important;
}

.page-hero-eyebrow,
.wcu-hero .wcu-eyebrow,
body[class*="page-"] .page-hero-eyebrow {
  background: var(--nt-green) !important;
  border: 1px solid var(--nt-green) !important;
  color: var(--nt-white) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.page-hero-title,
.wcu-hero-title {
  color: var(--nt-white) !important;
  text-shadow: 0 2px 10px rgba(28, 69, 103, 0.6) !important;
}
.page-hero-title .ph-accent,
.page-hero .ph-accent,
.page-header .ph-accent,
.wcu-hero-title .wcu-hero-accent,
.wcu-hero-script .heart-accent {
  color: rgb(56, 241, 108) !important;
}

.page-hero-sub,
.wcu-hero-sub {
  color: #F1F5F9 !important;
  text-shadow: 0 2px 10px rgba(28, 69, 103, 0.6) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABOUT PAGE — OUR CORE VALUES SECTION (Clean, Executive Styling)
   ────────────────────────────────────────────────────────────────────────── */
#core-values {
  background: var(--nt-white) !important;
}

.core-value-card {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 14px !important;
  padding: 2rem 1.75rem !important;
  box-shadow: var(--nt-shadow-card) !important;
  text-align: left !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.core-value-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(18, 138, 66, 0.35) !important;
  box-shadow: var(--nt-shadow-hover) !important;
}

.core-value-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.2rem !important;
}

.core-value-title {
  font-family: var(--font-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--nt-blue) !important;
  margin-bottom: 0.5rem !important;
}

.core-value-desc {
  font-size: 0.9rem !important;
  color: var(--nt-text-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PRODUCTS CATALOG PAGE — Toolbar, Filters, Zoom
   ────────────────────────────────────────────────────────────────────────── */
.products-catalog {
  background: var(--nt-white) !important;
  color: var(--nt-text-dark) !important;
}

.shop-toolbar-form {
  border: 1px solid var(--nt-border) !important;
  box-shadow: 0 4px 16px rgba(8, 19, 90, 0.06) !important;
  border-radius: 50px !important;
}
.shop-search-input,
.shop-cat-select {
  color: var(--nt-blue) !important;
  border-color: var(--nt-border) !important;
  background: var(--nt-white) !important;
}
.shop-search-input:focus,
.shop-cat-select:focus {
  border-color: var(--nt-green) !important;
  box-shadow: 0 0 0 3px rgba(18, 138, 66, 0.15) !important;
}
.shop-toolbar-form button,
.shop-toolbar-form .btn {
  border-radius: 50px !important;
  padding: 0.55rem 1.4rem !important;
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
}

.shop-results-count b {
  color: var(--nt-blue) !important;
}
.shop-clear-link {
  color: var(--nt-green) !important;
}

.img-zoom-pill {
  color: var(--nt-blue) !important;
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.prod-zoom-title {
  color: var(--nt-blue) !important;
}
.prod-zoom-close:hover {
  color: var(--nt-green) !important;
  background: var(--nt-green-tint) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   WHY CHOOSE US PAGE
   ────────────────────────────────────────────────────────────────────────── */
.wcu-stats-band {
  background: var(--nt-green) !important;
  background-image: none !important;
}
.wcu-stat-number,
.wcu-stat-number *,
.wcu-stat-number span,
.wcu-stat-number [data-count-to],
.wcu-stat-number .wcu-count-accent { color: #ffffff !important; }
.wcu-stat-label  { color: rgba(255, 255, 255, 0.92) !important; }

.wcu-reasons { background: var(--nt-white) !important; }
.wcu-reasons::before { display: none !important; }

.wcu-tl-node {
  background: var(--nt-white) !important;
  border-color: var(--nt-blue) !important;
  color: var(--nt-blue) !important;
}
.wcu-tl-item:hover .wcu-tl-node {
  background: var(--nt-green) !important;
  border-color: var(--nt-green) !important;
}
.wcu-tl-item:hover .wcu-tl-node svg { color: var(--nt-white) !important; }
.wcu-tl-progress { background: var(--nt-blue) !important; }
.wcu-tl-progress::after { background: var(--nt-blue) !important; }
.wcu-tl-step  { color: var(--nt-green) !important; }
.wcu-tl-title { color: var(--nt-blue) !important; }
.wcu-tl-desc  { color: var(--nt-text-muted) !important; }

.wcu-section-head .wcu-eyebrow {
  color: var(--nt-green) !important;
  background: var(--nt-green-tint) !important;
  border: 1px solid rgba(18, 138, 66, 0.25) !important;
}
.wcu-section-head h2 { color: var(--nt-blue) !important; }
.wcu-section-head p  { color: var(--nt-text-muted) !important; }

.wcu-compare {
  background: var(--nt-blue) !important;
}
.wcu-compare .wcu-section-head .wcu-eyebrow {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--nt-white) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.wcu-compare .wcu-section-head h2 { color: var(--nt-white) !important; }
.wcu-compare .wcu-section-head p  { color: rgba(255, 255, 255, 0.88) !important; }

.wcu-compare-card--good {
  background: var(--nt-white) !important;
  border-color: var(--nt-white) !important;
}
.wcu-compare-card--bad {
  background: var(--nt-blue-tint) !important;
  border-color: rgba(8, 19, 90, 0.20) !important;
}
.wcu-compare-card--good h3,
.wcu-compare-card--bad h3 {
  color: var(--nt-blue) !important;
}
.wcu-compare-card--good .wcu-compare-tag {
  background: var(--nt-green) !important;
  color: var(--nt-white) !important;
}
.wcu-compare-card--bad .wcu-compare-tag {
  background: var(--nt-white) !important;
  color: var(--nt-blue) !important;
}
.wcu-check { color: var(--nt-green) !important; }
.wcu-vs-badge {
  background: var(--nt-blue-dark) !important;
  border-color: var(--nt-white) !important;
  color: var(--nt-white) !important;
}

.wcu-cta {
  background: var(--nt-white) !important;
  border-top: 1px solid var(--nt-border) !important;
}
.wcu-cta h2 { color: var(--nt-blue) !important; }
.wcu-cta p  { color: var(--nt-text-muted) !important; }
.wcu-cta .btn-pink {
  background: var(--nt-green) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--nt-white) !important;
}
.wcu-cta .btn-pink:hover {
  background: var(--nt-green-dark) !important;
}
.wcu-cta .btn-outline-navy {
  background: var(--nt-white) !important;
  color: var(--nt-blue) !important;
  border: 1.5px solid var(--nt-blue) !important;
  border-radius: 8px !important;
}
.wcu-cta .btn-outline-navy:hover {
  background: var(--nt-blue) !important;
  color: var(--nt-white) !important;
}

.wcu-chip {
  color: var(--nt-blue) !important;
  background: var(--nt-white) !important;
  border-color: rgba(8, 19, 90, 0.25) !important;
}
.wcu-chip:hover {
  background: var(--nt-green-tint) !important;
  border-color: var(--nt-green) !important;
  color: var(--nt-green) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CUSTOMER AUTH / ACCOUNT PAGES
   ────────────────────────────────────────────────────────────────────────── */
.auth-card {
  box-shadow: 0 12px 35px rgba(8, 19, 90, 0.08) !important;
}
.auth-tab.active {
  color: var(--nt-green) !important;
  border-bottom-color: var(--nt-green) !important;
}
.form-label {
  color: var(--nt-blue) !important;
}
.form-input-group .form-control:focus {
  border-color: var(--nt-green) !important;
  box-shadow: 0 0 0 3px rgba(18, 138, 66, 0.15) !important;
}
.btn-submit-auth {
  background: var(--nt-green) !important;
  border-radius: 8px !important;
  border: none !important;
  color: var(--nt-white) !important;
}
.btn-submit-auth:hover {
  background: var(--nt-green-dark) !important;
}
.forgot-pwd-link {
  color: var(--nt-green) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CONTACT PAGE
   ────────────────────────────────────────────────────────────────────────── */
.contact-map-dir-btn {
  background: var(--nt-green) !important;
  border-radius: 8px !important;
  color: var(--nt-white) !important;
}
.contact-map-dir-btn:hover {
  background: var(--nt-green-dark) !important;
}
.contact-form-input:focus {
  border-color: var(--nt-green) !important;
  box-shadow: 0 0 0 3px rgba(18, 138, 66, 0.15) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   CART TOAST FEEDBACK
   ────────────────────────────────────────────────────────────────────────── */
#cart-toast {
  background: var(--nt-blue-dark) !important;
  border-left: 4px solid var(--nt-green) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SHARED UTILITY HELPERS
   ────────────────────────────────────────────────────────────────────────── */
.section-title {
  color: var(--nt-blue) !important;
}
.section-subtitle {
  color: var(--nt-text-muted) !important;
}
.eyebrow-tag {
  color: var(--nt-green) !important;
}
.link-with-arrow {
  color: var(--nt-blue) !important;
}
.link-with-arrow:hover {
  color: var(--nt-green) !important;
}

.category-card {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  box-shadow: var(--nt-shadow-card) !important;
  border-radius: 12px !important;
}
.category-card:hover {
  border-color: rgba(18, 138, 66, 0.35) !important;
  box-shadow: var(--nt-shadow-hover) !important;
}
.cat-icon-row,
.cat-title,
.cat-explore-link {
  color: var(--nt-blue) !important;
}
.cat-desc {
  color: var(--nt-text-muted) !important;
}
.category-card:hover .cat-explore-link {
  color: var(--nt-green) !important;
}
.cat-img-box {
  background: var(--nt-blue-tint) !important;
}

.bg-blue-section,
.bg-section-navy,
.bg-primary-blue {
  background-color: var(--nt-blue) !important;
  color: var(--nt-white) !important;
}
.bg-green-section,
.bg-section-green {
  background-color: var(--nt-green) !important;
  color: var(--nt-white) !important;
}
.bg-white,
.bg-cat-light,
.bg-faq-light,
.bg-faq-tint,
.bg-blue-tint,
.bg-green-tint,
.bg-comfort-light,
.bg-stories-light {
  background-color: var(--nt-white) !important;
  color: var(--nt-text-dark) !important;
}

.bg-blue-section .section-title,
.bg-section-navy .section-title,
.bg-green-section .section-title,
.bg-section-green .section-title {
  color: var(--nt-white) !important;
}
.bg-blue-section .section-subtitle,
.bg-section-navy .section-subtitle,
.bg-green-section .section-subtitle,
.bg-section-green .section-subtitle {
  color: rgba(255, 255, 255, 0.88) !important;
}
.bg-blue-section .eyebrow-tag,
.bg-section-navy .eyebrow-tag,
.bg-green-section .eyebrow-tag,
.bg-section-green .eyebrow-tag {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: var(--nt-white) !important;
}

/* ==========================================================================
   UNIVERSAL BUTTON STYLING — STRICTLY SOLID LIGHT GREEN (#128A42)
   NO GRADIENTS. NO DARK GREEN.
   Normal: #128A42 | Hover: #128A42 | Text: #FFFFFF | Radius: 8px | Border: None
   ========================================================================== */
.btn-pink,
.btn-green,
.btn-green-white,
.btn-green-sm,
.btn-submit-auth,
.nav-account-pill,
.contact-map-dir-btn,
.footer-map-dir-btn,
.page-sidebar-foot .btn-pink,
.product-card-actions .add-to-cart-form .btn,
.bs-card .product-card-actions .add-to-cart-form .btn,
.bestseller-card .product-card-actions .add-to-cart-form .btn,
main .products-catalog .product-card-actions .add-to-cart-form .btn,
#why-us .btn-pink,
#why-us .btn-outline-navy,
#faq .btn-outline-navy,
.wcu-cta .btn-pink,
.wcu-cta .btn-outline-navy {
  background: #128A42 !important;
  background-color: #128A42 !important;
  border-color: #128A42 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-pink:hover,
.btn-green:hover,
.btn-green-white:hover,
.btn-green-sm:hover,
.btn-submit-auth:hover,
.nav-account-pill:hover,
.contact-map-dir-btn:hover,
.footer-map-dir-btn:hover,
.page-sidebar-foot .btn-pink:hover,
.product-card-actions .add-to-cart-form .btn:hover,
.bs-card .product-card-actions .add-to-cart-form .btn:hover,
.bestseller-card .product-card-actions .add-to-cart-form .btn:hover,
main .products-catalog .product-card-actions .add-to-cart-form .btn:hover,
#why-us .btn-pink:hover,
#why-us .btn-outline-navy:hover,
#faq .btn-outline-navy:hover,
.wcu-cta .btn-pink:hover,
.wcu-cta .btn-outline-navy:hover,
.bestsellers-mobile-cta .btn:hover {
  background: #128A42 !important;
  background-color: #128A42 !important;
  border-color: #128A42 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  filter: brightness(0.92) !important;
  box-shadow: 0 4px 14px rgba(18, 138, 66, 0.4) !important;
}