/* ==========================================================================
   GLOBAL HEADING TYPOGRAPHY
   ========================================================================== */

/* 
==========================================================================
   Indleaf Custom Enhancements
   ========================================================================== */

/* ── Global Typography ── */

/* Main Page Titles — Medium */
h1, .entry-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  color: #1A1A1A;
}



/* Breadcrumbs Elegance Upgrade */
.ct-breadcrumbs {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  font-size: 11px !important;
}
.ct-breadcrumbs a {
  color: rgba(255, 255, 255, 0.95) !important;
}
.ct-breadcrumbs a:hover {
  color: #FFFFFF !important;
}

/* Secondary Headings — Regular */
h2, h3, .wp-block-heading {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: #1A1A1A;
}

/* Body, nav, buttons — DM Sans */
body, p, a, button, input,
.ct-menu li a,
.wp-block-button a,
.woocommerce-loop-product__title {
  font-family: 'DM Sans', sans-serif;
}


/* ═══════════════════════════════════════════════════
   FIX 3: Hide duplicate "Indleaf" text below logo
   Blocksy renders .site-title-container alongside the
   logo image via its Header Builder. This is a Customizer
   toggle (Header → Logo → Show Site Title) that can't be
   changed via files. CSS hide is the only child-theme option.
   ═══════════════════════════════════════════════════ */
.site-branding .site-title-container {
  display: none !important; /* Blocksy header builder sets display inline, no other override path */
}


/* ═══════════════════════════════════════════════════
   Hero Section
   ═══════════════════════════════════════════════════ */

/* Hero background: solid #FAFAF9 only, kill Stackable photo.
   Stackable sets background-image with !important in an inline
   <style> block — no other override mechanism exists. */
.stk-3e20b48 {
  background-image: none !important;
  background-color: #FAFAF9 !important;
  pointer-events: auto !important;
}
.stk-3e20b48:before {
  background-color: #FAFAF9 !important;
  opacity: 1 !important;
}

/* Fix for any overlay absorbing mouse events */
.wp-block-cover__background,
.stk-3e20b48__background,
.wp-block-cover > .wp-block-cover__image-background,
[class*="cover__background"] {
  pointer-events: none !important;
}

/* Hero height: 85vh max, reduced padding.
   Stackable sets padding-top:370px, padding-bottom:220px with !important. */
body.home .stk-3e20b48 {
  min-height: calc(85vh + 25px) !important;
  max-height: calc(85vh + 25px) !important;
  padding-top: 80px !important;
  padding-bottom: 105px !important;
  display: flex !important;
  align-items: center !important;
}


/* Hero headline — "Timeless by nature."
   Exact element: .stk-aaa7c47 .stk-block-heading__text (h2)
   Stackable sets font-size:70px, line-height:1.2em with !important */
body.home .stk-aaa7c47 .stk-block-heading__text {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 90px !important; /* Decreased to 90px for desktop */
  font-weight: 300 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: #1A1A1A !important;
  transition: none !important;
  animation: none !important;
}

/* Force cloned hero text on inner pages to match the standard Product Page H1 typography perfectly */
body:not(.home) .stk-aaa7c47 .stk-block-heading__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  html body.home .stk-aaa7c47 .stk-block-heading__text {
    font-size: 72px !important; /* Apply to both tablet and mobile */
    line-height: 0.9 !important; /* Decrease space between lines */
  }
}

/* Kicker label — "Architectural Artificial Greenery"
   Exact element: .stk-53cbe73 .stk-block-text__text (p)
   Stackable sets font-size:14px, font-weight:700 with !important */
body.home .stk-53cbe73 .stk-block-text__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  color: #2D5A3D !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}

/* Sub-paragraph — "Engineered exclusively..."
   Exact element: .stk-d00c8c2 .stk-block-text__text (p)
   Stackable sets font-size:20px, color:#6b6b6b with !important */
.stk-d00c8c2 .stk-block-text__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #6E6E73 !important;
  line-height: 1.65 !important;
  max-width: 500px !important;
  margin: 0 auto 32px !important; /* Fixed tight vertical gap (2rem) */
}

/* Ensure column wrappers shrink-wrap their content and do not stretch vertically */
.stk-3e20b48-column,
.stk-882b043,
.stk-882b043-container,
.stk-882b043-inner-blocks {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════
   Hero Leaf System — Two-Layer Architecture
   ═══════════════════════════════════════════════════ */

/* Outer wrapper: drift animation target */
.il-leaf-outer {
  pointer-events: none;
}

/* Inner wrapper: cursor nudge target */
.il-leaf-inner {
  will-change: transform, filter;
}

/* Leaf image: pure visual */
.il-hero-leaf {
  display: block;
  filter: none;
  user-select: none;
}

/* Mobile: hide all leaves, clean text only */
@media (max-width: 767px) {
  .il-leaf-outer {
    display: none !important; /* Override inline styles on mobile */
  }
}

/* ═══════════════════════════════════════════════════
   Lenis Base Styles
   ═══════════════════════════════════════════════════ */
html.lenis, html.lenis body {
  height: auto !important;
  min-height: 100vh !important;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   Scroll Reveal Initial State
   ═══════════════════════════════════════════════════ */
html.gsap-ready body.home .stk-block-heading:not(.stk-3e20b48 *),
html.gsap-ready body.home .stk-block-text:not(.stk-3e20b48 *),
html.gsap-ready body.home .stk-block-button-group:not(.stk-3e20b48 *),
html.gsap-ready body.home .wp-block-image:not(.stk-3e20b48 *),
html.gsap-ready body.home .stk-block-icon:not(.stk-3e20b48 *) {
  opacity: 0;
  transform: translateY(40px);
}

/* ═══════════════════════════════════════════════════
   Marquee Ribbon
   ═══════════════════════════════════════════════════ */
.il-marquee {
  overflow: hidden;
  background-color: #1B3B28; /* Deep premium green */
  color: #FAFAF9; /* Soft cream text */
  padding: 16px 0;
  display: flex;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.il-marquee-track {
  display: flex;
  align-items: center;
  /* Animate to -50% to seamlessly loop since content is duplicated */
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

.il-marquee-track span {
  padding: 0 24px;
}

.il-marquee-track span.dot {
  padding: 0;
  opacity: 0.5;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ═══════════════════════════════════════════════════
   Why Indleaf 3D Aesthetic Overhaul (Task 7)
   ═══════════════════════════════════════════════════ */
/* Outer Wrapper Tweaks */
body.home .stk-a1fb9dd {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Force Uniform Dark Heading Color and Weight for Main Heading */
body div#built-for-spaces-that-dont-have-time-for-upkeep h2.stk-block-heading__text {
  color: #000000 !important; /* Pure black */
  font-weight: 700 !important; /* Make it bold, not light */
}

/* Revert to Dark Green Eyebrow but distinctly larger */
body div.stk-f635f10 p.stk-block-text__text,
body div.stk-f635f10 {
  color: #2D5A3D !important; /* Dark Green */
  font-weight: 800 !important;
  font-size: 18px !important; /* Make it bigger */
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* 3-Column Conversion */
.stk-d471b21-column {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}
.stk-36feae3 {
  display: none !important; /* Hide 4th column */
}

/* Card Overhaul (Subtle Fill + 3D Prep) */
.stk-d471b21 .stk-block-column {
  background: #FFFFFF !important; /* Crisp white fill */
  border: 1px solid rgba(27, 59, 40, 0.05) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 10px 30px rgba(27, 59, 40, 0.06) !important;
  transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  transform-style: preserve-3d;
}

/* Hover state for shadow/background (Tilt is handled by JS) */
.stk-d471b21 .stk-block-column:hover {
  background: #FFFFFF !important;
  box-shadow: 0 30px 60px rgba(27, 59, 40, 0.12);
}

/* Card Typography (Force dark green colors to override white defaults with max specificity) */
body div.stk-d471b21 .stk-block-column .stk-block-heading .stk-block-heading__text,
body div.stk-d471b21 .stk-block-heading__text {
  color: #1B3B28 !important; /* Deep green */
  font-weight: 700 !important; /* Make card headings bold */
  margin-bottom: 16px !important;
  transform: translateZ(30px); /* Pop out in 3D space */
}

.stk-d471b21 .stk-block-column .stk-block-text .stk-block-text__text,
div.stk-d471b21 .stk-block-text__text {
  color: #4A5D51 !important; /* Softer green/grey for body text */
  transform: translateZ(20px); /* Pop out in 3D space */
}

/* Icon Container Spacing & 3D Pop */
.stk-d471b21 .stk-block-icon {
  margin-bottom: 32px !important;
  transform: translateZ(40px); /* Pop out most in 3D space */
}

/* Hide original ugly SVGs and style new ones */
.stk-d471b21 .stk--inner-svg {
  color: #1B3B28 !important; /* Force currentColor to brand green */
}

body.home .stk-d471b21 .stk--inner-svg svg.ugb-custom-icon {
  display: none !important;
}

.stk-d471b21 .stk--inner-svg svg.lucide {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center;
  display: inline-block !important;
}

.stk-d471b21 .stk-block-column:hover .stk--inner-svg svg.lucide {
  transform: scale(1.1) rotate(5deg);
}

/*──────────────────────────────────────────
  Premium 3D Categories Overhaul (WooCommerce Gutenberg)
──────────────────────────────────────────*/
ul.wc-block-product-categories-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 1200px !important;
}

ul.wc-block-product-categories-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  align-items: stretch !important;
  justify-items: center !important;
}

ul.wc-block-product-categories-list::before,
ul.wc-block-product-categories-list::after {
  display: none !important;
}

/* Base Card Styling - Matching the Why Indleaf aesthetics */
li.wc-block-product-categories-list-item.premium-category-card,
li.wc-block-product-categories-list-item {
  background: #FFFFFF !important; /* Crisp white fill */
  border: 1px solid rgba(27, 59, 40, 0.05) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  text-align: center !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  box-shadow: 0 10px 30px rgba(27, 59, 40, 0.06) !important;
}

li.wc-block-product-categories-list-item:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
  z-index: 10 !important;
}

/* Perfect Centering Fix */
li.wc-block-product-categories-list-item a {
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Card Heading Styling */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item__name {
  color: #1B3B28 !important; /* Deep green */
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin-top: 25px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: none !important;
  line-height: 1.3 !important;
  transform: translateZ(20px) !important; /* 3D depth */
  transition: transform 0.4s ease !important;
  display: inline-block !important;
}

/* Remove default count mark styling to blend with title */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item-count {
  background: transparent !important;
  color: #4A5D51 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  margin-left: 5px !important;
  display: inline-block !important;
  transform: translateZ(20px) !important;
}

/* Image Wrapper Centering */
li.wc-block-product-categories-list-item .wc-block-product-categories-list-item__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 260px !important; /* Massive height zone for the images */
  margin: 0 auto 15px auto !important; /* NUKE hidden negative margins from Woo */
  border: none !important; /* Force kill the default WooCommerce Gutenberg grey border */
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  flex: 1 1 auto !important; /* Fills remaining space */
}

/* Injected Premium Images */
li.wc-block-product-categories-list-item img.premium-category-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  transform-origin: center center !important; /* Perfect uniform center scaling */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.5s ease !important;
  transform: translateZ(40px) scale(1.15) !important;
}

/* Specific adjustment for Artificial Plants (Monstera) to decrease size by 4px */
li.wc-block-product-categories-list-item:nth-child(1) img.premium-category-image {
  max-height: 249px !important; 
}

li.wc-block-product-categories-list-item:hover img.premium-category-image {
  transform: translateZ(60px) scale(1.25) !important;
  filter: drop-shadow(0 25px 35px rgba(0,0,0,0.25)) !important;
}

/* Reduce drop-shadow intensity for Artificial Plants (Monstera) because the solid pot casts a much darker shadow */
li.wc-block-product-categories-list-item:nth-child(1):hover img.premium-category-image {
  filter: drop-shadow(0 25px 35px rgba(0,0,0,0.12)) !important; 
}

/* Responsive Grid for Mobile/Tablet */
@media (max-width: 900px) {
  ul.wc-block-product-categories-list {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 24px !important;
  }
  .stk-d471b21-column {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 24px !important;
  }
}
@media (max-width: 768px) {
  ul.wc-block-product-categories-list {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
  }
  li.wc-block-product-categories-list-item {
    max-width: 400px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .stk-d471b21-column {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
  }
  .stk-d471b21 .stk-block-column {
    max-width: 400px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

/* ==================================================
   Premium Mobile Menu Overhaul
================================================== */

/* Fullscreen Background & Tagline Wrapper */
#offcanvas.ct-panel {
  background: linear-gradient(135deg, #FAFAF9 0%, #D8E3DB 100%) !important; /* Richer, more elegant sage gradient */
}
#offcanvas.ct-panel::before {
  content: "";
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background-color: rgba(17, 36, 24, 0.15); /* Delicate decorative line */
  pointer-events: none;
}
#offcanvas.ct-panel::after {
  content: "ELEVATE YOUR SPACE WITH TIMELESS BEAUTY";
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(17, 36, 24, 0.4); /* Darker green opacity */
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
#offcanvas.ct-panel.active::after {
  opacity: 1;
  transform: translateY(0);
}

/* Center Content */
#offcanvas .ct-panel-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 40px !important;
  margin: 0 !important;
}

/* Close Button Aesthetics - Cleaned Up */
#offcanvas .ct-toggle-close {
  position: absolute !important;
  /* Tweak these two values to perfectly match the position of your hamburger menu! */
  top: 25px !important; 
  right: 30px !important; 
  
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: #112418 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  z-index: 9999 !important; /* FIX: Force above flex containers */
  cursor: pointer !important;
}
#offcanvas .ct-toggle-close:hover {
  transform: rotate(90deg) scale(1.1) !important;
}
#offcanvas .ct-toggle-close svg {
  width: 26px !important;
  height: 26px !important;
  fill: currentColor !important;
  pointer-events: none !important; /* FIX: prevent SVG from swallowing the click */
}

/* Navigation Links */
#offcanvas nav.mobile-menu ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(24px, 5vh, 40px) !important; /* Slightly tighter fluid spacing for serif */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}
#offcanvas nav.mobile-menu ul li a {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 38px !important; /* Refined, slightly smaller scale */
  font-weight: 400 !important;
  font-style: normal !important; /* Classic, no italics */
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #112418 !important; /* Ultra-crisp dark green */
  text-decoration: none !important;
  line-height: 1.2 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* Link Hover State */
#offcanvas nav.mobile-menu ul li a:hover {
  opacity: 0.6;
}
#offcanvas nav.mobile-menu ul li a::after {
  content: "";
  position: absolute;
  bottom: 4px; /* Standard underline for serif */
  left: 0;
  width: 0%;
  height: 1px;
  background-color: rgba(17, 36, 24, 0.5);
  transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#offcanvas nav.mobile-menu ul li a:hover::after {
  width: 100%;
}

/* ==================================================
   Mobile Hero Section Centering Fix (Under 768px)
================================================== */
@media (max-width: 767px) {
  /* Nuclear specificity to override Stackable's built-in responsive padding */
  html body.home main .stk-3e20b48 {
    max-height: none !important; /* Prevent overflow on shorter mobile devices */
    padding-top: 80px !important; /* Mobile perfectly centered */
    padding-bottom: 120px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body main .stk-3e20b48 > .stk-container,
  html body main .stk-3e20b48 > .stk-inner-blocks {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
  }
}

/* ==================================================
   Tablet Hero Section Centering Fix (768px - 1024px)
================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Nuclear specificity to override Stackable's built-in responsive padding */
  html body.home main .stk-3e20b48 {
    max-height: none !important; 
    height: auto !important;
    padding-top: 140px !important; /* Tablet pushed downward to perfectly center */
    padding-bottom: 80px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body main .stk-3e20b48 > .stk-container,
  html body main .stk-3e20b48 > .stk-inner-blocks {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
  }
}

/* ==================================================
   Force Fix for WordPress/Stackable Global Blue Glitch
================================================== */
:root {
  /* Force Stackable Variables */
  --paletteColor1: #1B3B28 !important;
  --paletteColor2: #2D5A3D !important;
  --stk-theme-color-1: #1B3B28 !important;
  --stk-theme-color-2: #2D5A3D !important;
  
  /* Force WordPress Preset Variables */
  --wp--preset--color--palette-color-1: #1B3B28 !important;
  --wp--preset--color--palette-color-2: #2D5A3D !important;
  
  /* Force WooCommerce / Blocksy Button Variables */
  --theme-button-background-initial-color: #1B3B28 !important;
  --theme-button-background-hover-color: #2D5A3D !important;
}

/* Force Text Preset Classes */
.has-palette-color-1-color,
.has-theme-color-1-color,
.stk-has-theme-color-1-color {
  color: #1B3B28 !important;
}
.has-palette-color-2-color,
.has-theme-color-2-color,
.stk-has-theme-color-2-color {
  color: #2D5A3D !important;
}

/* Force Fallback Button Backgrounds (for any remaining rogue buttons) */
.wp-block-button__link,
.stk-button,
.onsale,
.button,
.checkout-button,
.add_to_cart_button {
  background-color: #1B3B28 !important;
  color: #FAFAF9 !important;
}
.wp-block-button__link:hover,
.stk-button:hover,
.button:hover,
.add_to_cart_button:hover {
  background-color: #2D5A3D !important;
}

/* ==================================================
   Header Menu Typography & Styling (Global)
================================================== */
  /* Nuclear specificity for Blocksy header links */
  header.ct-header [data-id*="menu"] > ul > li > a,
  header.ct-header .ct-menu > li > a,
  header.ct-header .menu > li > a {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important; /* Bold */
    text-transform: uppercase !important; /* Premium architectural look */
    letter-spacing: 0.08em !important; 
    color: #1A1A1A !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  /* Premium hover state */
  header.ct-header [data-id*="menu"] > ul > li > a:hover,
  header.ct-header .ct-menu > li > a:hover,
  header.ct-header .menu > li > a:hover {
    color: #1B4332 !important; /* Deep green on hover */
  }


/* ==================================================
   Premium Footer Styling (Ultra Compact)
================================================== */
.ct-footer {
  background-color: #FAFAF9 !important; 
  border-top: 1px solid rgba(27, 67, 50, 0.1);
  padding: 0 !important;
}

/* Nuke Massive Row Paddings */
footer#footer.ct-footer [data-row] {
  padding-top: 15px !important; 
  padding-bottom: 15px !important;
  margin: 0 !important;
}
footer#footer.ct-footer [data-row="middle"] {
  padding-top: 5px !important; 
  padding-bottom: 5px !important; 
}
footer#footer.ct-footer [data-row="bottom"] {
  padding-top: 5px !important;
  padding-bottom: 25px !important;
}

/* Delete Double Lines */
footer#footer.ct-footer [data-row]::before,
footer#footer.ct-footer [data-row]::after,
footer#footer.ct-footer .ct-container::before,
footer#footer.ct-footer .ct-container::after,
footer#footer.ct-footer hr, 
footer#footer.ct-footer .divider {
  display: none !important;
  border: none !important;
}

/* Headers */
footer#footer.ct-footer h4, 
footer#footer.ct-footer .widget-title, 
footer#footer.ct-footer .wp-block-heading {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1A1A1A !important;
  margin-bottom: 20px !important;
}

/* Contact Info Text */
footer#footer.ct-footer [data-column="widget-area-1"] p, 
footer#footer.ct-footer [data-column="widget-area-1"] li {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #4A4A4A !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}
footer#footer.ct-footer [data-column="widget-area-1"] p:last-child {
  margin-bottom: 0 !important;
}

/* Footer Link Containers */
footer#footer.ct-footer [data-column="widget-area-2"] p,
footer#footer.ct-footer [data-column="widget-area-3"] p,
footer#footer.ct-footer [data-column="widget-area-4"] p {
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Footer Links */
html body footer#footer.ct-footer [data-column*="widget-area"] a,
html body footer#footer.ct-footer a, 
html body footer#footer.ct-footer .wp-block-paragraph a,
html body footer#footer.ct-footer .widget_block a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #4A4A4A !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  background: none !important;
  transition: all 0.2s ease !important;
  display: inline !important;
}

/* Link Hover State */
html body footer#footer.ct-footer [data-column*="widget-area"] a:hover,
html body footer#footer.ct-footer a:hover, 
html body footer#footer.ct-footer .wp-block-paragraph a:hover,
html body footer#footer.ct-footer .widget_block a:hover {
  color: #1B4332 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

/* Widget Spacing Compression */
footer#footer.ct-footer .ct-widget,
footer#footer.ct-footer .wp-block-group {
  margin-bottom: 15px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Optimize widget layout to industry standard proportions */
@media (min-width: 992px) {
  footer#footer.ct-footer [data-row="top"] .ct-container {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
    gap: 40px !important;
  }
}

/* Contact Column Specific Squish & Logo Size */
html body footer#footer.ct-footer [data-column="widget-area-1"] figure.wp-block-image,
html body footer#footer.ct-footer [data-column="widget-area-1"] .custom-footer-logo-wrapper {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}
html body footer#footer.ct-footer [data-column="widget-area-1"] figure.wp-block-image img,
html body footer#footer.ct-footer [data-column="widget-area-1"] .custom-footer-logo {
  width: 120px !important; /* Increased from 80px */
  height: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
}

/* Payment Method Icons Alignment */
html body footer#footer.ct-footer [data-column="widget-area-4"] .wp-block-image,
html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments-wrapper {
  margin-top: -15px !important; /* Reverted to protect mobile layout */
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Desktop-only precision upward shift */
@media (min-width: 992px) {
  html body footer#footer.ct-footer [data-column="widget-area-4"] .wp-block-image,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments-wrapper {
    margin-top: -30px !important; /* Shifted downward by 1px (-31px to -30px) */
  }
}
html body footer#footer.ct-footer [data-column="widget-area-4"] figure img,
html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments {
  height: auto !important;
  width: 80% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

/* Premium Social Icons */
footer#footer.ct-footer .ct-footer-socials {
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 992px) {
  footer#footer.ct-footer .ct-footer-socials {
    margin-top: -30px !important;
  }
}
footer#footer.ct-footer .ct-social-box {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
}
footer#footer.ct-footer .ct-social-box a,
html body footer#footer.ct-footer .ct-social-box a {
  background-color: #E8F0EA !important;
  color: #1B4332 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
footer#footer.ct-footer .ct-social-box .ct-icon-container {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
footer#footer.ct-footer .ct-social-box .ct-icon-container svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}
html body footer#footer.ct-footer .ct-social-box a:hover {
  background-color: #1B4332 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
}

/* Copyright Row */
footer#footer.ct-footer .ct-footer-copyright p,
footer#footer.ct-footer .ct-footer-copyright em {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #888888 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* Newsletter Subscription Form Premium Styling */
html body div.wpforms-container.wpforms-subscribe-form form.wpforms-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  max-width: 550px !important;
  margin: 0 auto !important;
  gap: 15px !important;
}
html body div.wpforms-container.wpforms-subscribe-form .wpforms-field-container {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body div.wpforms-container.wpforms-subscribe-form .wpforms-field {
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}
html body div.wpforms-container.wpforms-subscribe-form .wpforms-submit-container {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body div.wpforms-container.wpforms-subscribe-form input[type=email] {
  width: 100% !important;
  height: 54px !important;
  padding: 0 25px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  border-radius: 4px !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  backdrop-filter: blur(5px) !important;
  transition: all 0.3s ease !important;
}
html body div.wpforms-container.wpforms-subscribe-form input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
html body div.wpforms-container.wpforms-subscribe-form input[type=email]:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
html body div.wpforms-container.wpforms-subscribe-form button[type=submit] {
  height: 54px !important;
  padding: 0 35px !important;
  background-color: #1B4332 !important;
  color: #ffffff !important;
  border: 1px solid #1B4332 !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body div.wpforms-container.wpforms-subscribe-form button[type=submit]:hover {
  background-color: #2D5A3D !important;
  border-color: #2D5A3D !important;
}

/* Mobile Responsive Adjustments for Newsletter */
@media (max-width: 767px) {
  html body div.wpforms-container.wpforms-subscribe-form form.wpforms-form {
    flex-direction: column !important;
    gap: 15px !important;
  }
  html body div.wpforms-container.wpforms-subscribe-form .wpforms-field-container,
  html body div.wpforms-container.wpforms-subscribe-form .wpforms-field,
  html body div.wpforms-container.wpforms-subscribe-form .wpforms-submit-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body div.wpforms-container.wpforms-subscribe-form input[type=email],
  html body div.wpforms-container.wpforms-subscribe-form button[type=submit] {
    width: 100% !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  html body div.wpforms-container.wpforms-subscribe-form button[type=submit] {
    border-color: #1B4332 !important;
  }
}

/* Mobile Optimization (Ultra Compact & Uniformly Spaced) */
@media (max-width: 991px) {
  /* 1. NUCLEAR RESET OF ALL NATIVE MARGINS & PADDINGS */
  html body footer#footer.ct-footer [data-row="top"],
  html body footer#footer.ct-footer [data-row="middle"],
  html body footer#footer.ct-footer [data-row="bottom"],
  html body footer#footer.ct-footer [data-row] > .ct-container,
  html body footer#footer.ct-footer [data-column],
  html body footer#footer.ct-footer .ct-widget,
  html body footer#footer.ct-footer .wp-block-group,
  html body footer#footer.ct-footer .widget_block,
  html body footer#footer.ct-footer figure,
  html body footer#footer.ct-footer .wp-block-image,
  html body footer#footer.ct-footer p,
  html body footer#footer.ct-footer ul,
  html body footer#footer.ct-footer li,
  html body footer#footer.ct-footer h1,
  html body footer#footer.ct-footer h2,
  html body footer#footer.ct-footer h3,
  html body footer#footer.ct-footer h4,
  html body footer#footer.ct-footer h5,
  html body footer#footer.ct-footer h6,
  html body footer#footer.ct-footer .wp-block-heading {
    margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    border: none !important;
  }
  
  html body footer#footer.ct-footer .wp-block-spacer,
  html body footer#footer.ct-footer p:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. BASE ROW PADDING */
  html body footer#footer.ct-footer [data-row="top"] {
    padding-top: 25px !important;
  }
  html body footer#footer.ct-footer [data-row="bottom"] {
    padding-bottom: 25px !important;
  }

  /* 3. GRID LAYOUT & GAPS */
  html body footer#footer.ct-footer [data-row="top"] > .ct-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 10px !important; /* UNIFORM 30px gap between vertical sections */
    text-align: center !important;
  }

  /* 4. COLUMNS CONFIGURATION */
  html body footer#footer.ct-footer [data-column="widget-area-1"] {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  html body footer#footer.ct-footer [data-column="widget-area-2"],
  html body footer#footer.ct-footer [data-column="widget-area-3"] {
    grid-column: span 1 !important;
    text-align: center !important;
  }
  html body footer#footer.ct-footer [data-column="widget-area-4"] {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  /* 5. TYPOGRAPHY & INTRA-SECTION SPACING */
  html body footer#footer.ct-footer h4, 
  html body footer#footer.ct-footer .widget-title, 
  html body footer#footer.ct-footer .wp-block-heading {
    margin-bottom: 12px !important; /* Uniform 12px below all headings */
    font-size: 14px !important;
    text-align: center !important;
  }

  html body footer#footer.ct-footer [data-column] p,
  html body footer#footer.ct-footer [data-column] li {
    margin-bottom: 6px !important; /* Uniform 6px between lines of text */
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* 6. EXCEPTIONS & SPECIFIC ELEMENTS */
  /* Payment Methods heading -> 24px margin-top + 6px from link above = 30px (perfect uniform gap matching grid gap) */
  html body footer#footer.ct-footer [data-column="widget-area-4"] h4,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .wp-block-heading {
    margin-top: 24px !important;
  }
  /* Reset the first heading so it doesn't drop down */
  html body footer#footer.ct-footer [data-column="widget-area-4"] > h4:first-child,
  html body footer#footer.ct-footer [data-column="widget-area-4"] > .wp-block-heading:first-child,
  html body footer#footer.ct-footer [data-column="widget-area-4"] > div:first-child h4,
  html body footer#footer.ct-footer [data-column="widget-area-4"] > div:first-child .wp-block-heading {
    margin-top: 0 !important;
  }

  /* Logo Gap */
  html body footer#footer.ct-footer [data-column="widget-area-1"] figure.wp-block-image img,
  html body footer#footer.ct-footer [data-column="widget-area-1"] .custom-footer-logo {
    margin: 0 auto 15px auto !important; /* 15px gap below logo */
    width: 100px !important;
  }

  /* Payment Icons */
  html body footer#footer.ct-footer [data-column="widget-area-4"] figure {
    margin: 0 auto !important;
    padding: 0 !important;
  }
  html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments-wrapper {
    margin: -15px auto 0 auto !important;
    padding: 0 !important;
  }
  html body footer#footer.ct-footer [data-column="widget-area-4"] figure img,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments {
    margin: 6px auto 0 auto !important;
    width: 85% !important; 
    max-width: 250px !important; 
  }
  
  html body footer#footer.ct-footer [data-column] a:not(.ct-social-box a) {
    display: inline-block !important; 
  }

  /* 7. SOCIAL ICONS & COPYRIGHT */
  html body footer#footer.ct-footer .ct-footer-socials {
    margin-top: 30px !important; /* Uniform 30px gap above social icons */
    margin-bottom: 25px !important; /* Uniform 25px gap below social icons */
  }
  html body footer#footer.ct-footer .ct-social-box {
    justify-content: center !important;
  }
  html body footer#footer.ct-footer .ct-social-box a {
    display: inline-flex !important; 
  }
}

/* ──────────────────────────────────────────
   Tablet Optimization (768px - 991px)
   ────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  
  /* Center the 3rd item in "Plant by Styles" and "Why Indleaf" ONLY */
  html body .stk-d471b21 .stk-row > .wp-block-stackable-column:nth-child(3),
  html body .stk-d471b21 .stk-row > .stk-block-column:nth-child(3),
  html body .wc-block-product-categories .wc-block-product-categories-list > li:nth-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    flex: 0 0 100% !important; /* Force flex items to drop to next line */
    max-width: 380px !important; 
    float: none !important; /* Defeat legacy WooCommerce floats */
    clear: both !important;
  }
  
  /* Hide ghost 4th columns ONLY in these specific sections */
  html body .stk-d471b21 .stk-row > .wp-block-stackable-column:nth-child(4),
  html body .stk-d471b21 .stk-row > .stk-block-column:nth-child(4),
  html body .wc-block-product-categories .wc-block-product-categories-list > li:nth-child(4) {
    display: none !important;
  }

  /* 2. NUCLEAR RESET OF NATIVE MARGINS & GAPS FOR TABLET FOOTER */
  html body footer#footer.ct-footer [data-row="top"],
  html body footer#footer.ct-footer [data-row="middle"],
  html body footer#footer.ct-footer [data-row="bottom"],
  html body footer#footer.ct-footer [data-row] > .ct-container,
  html body footer#footer.ct-footer [data-column],
  html body footer#footer.ct-footer .ct-widget,
  html body footer#footer.ct-footer .wp-block-group,
  html body footer#footer.ct-footer .widget_block,
  html body footer#footer.ct-footer figure,
  html body footer#footer.ct-footer .wp-block-image,
  html body footer#footer.ct-footer p,
  html body footer#footer.ct-footer ul,
  html body footer#footer.ct-footer li,
  html body footer#footer.ct-footer h1,
  html body footer#footer.ct-footer h2,
  html body footer#footer.ct-footer h3,
  html body footer#footer.ct-footer h4,
  html body footer#footer.ct-footer h5,
  html body footer#footer.ct-footer h6,
  html body footer#footer.ct-footer .wp-block-heading {
    margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    border: none !important;
  }

  /* Crush massive native grid gaps on tablet */
  html body footer#footer.ct-footer [data-row] > .ct-container {
    gap: 15px !important;
    row-gap: 15px !important;
  }

  /* Compact Row Paddings */
  html body footer#footer.ct-footer [data-row="top"] {
    padding-top: 25px !important;
    padding-bottom: 0 !important;
  }
  html body footer#footer.ct-footer [data-row="middle"] {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }
  html body footer#footer.ct-footer [data-row="bottom"] {
    padding-top: 5px !important;
    padding-bottom: 20px !important;
  }
  
  /* Compress Social Icons margins for Tablet */
  html body footer#footer.ct-footer .ct-footer-socials {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
  }

  /* Restore text spacings */
  html body footer#footer.ct-footer h4, 
  html body footer#footer.ct-footer .widget-title, 
  html body footer#footer.ct-footer .wp-block-heading {
    margin-bottom: 12px !important; 
    font-size: 14px !important;
  }
  html body footer#footer.ct-footer [data-column] p,
  html body footer#footer.ct-footer [data-column] li {
    margin-bottom: 6px !important; 
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  html body footer#footer.ct-footer [data-column="widget-area-4"] h4,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .wp-block-heading {
    margin-top: 15px !important;
  }
  
  /* Reset Desktop Negative Margin for Payment Icons */
  html body footer#footer.ct-footer [data-column="widget-area-4"] .wp-block-image,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments-wrapper {
    margin-top: -15px !important;
  }

  /* Match Mobile Payment Icon Alignment & Sizing */
  html body footer#footer.ct-footer [data-column="widget-area-4"] figure img,
  html body footer#footer.ct-footer [data-column="widget-area-4"] .custom-footer-payments {
    margin: 6px auto 0 auto !important;
    width: 85% !important; 
    max-width: 250px !important; 
    transform: none !important; /* Center geometrically */
  }
}
/* ==================================================
   Contact Page Hero Fix (Match Product Page)
================================================== */
html body main .stk-893499a {
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body main .stk-6449bae .stk-block-heading__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
  margin-bottom: 0 !important;
}

html body main .stk-5883b58 .stk-block-text__text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 8px !important;
}

/* ==================================================
   Contact Page Cards & Footer Spacing Fix
================================================== */
body.page-id-548 .entry-content,
body.page-id-548 main {
  margin-bottom: 80px !important; /* Guaranteed spacing before footer regardless of bottom blocks */
}

html body main .stk-5d6be64 .stk-block-column {
  padding: 10px !important; /* Decrease outer spacing if any */
}

html body main .stk-5d6be64 .stk-column-wrapper {
  padding: 35px 25px !important; /* Tighter internal padding for optimal box size */
}

/* ==================================================
   Make Mobile Fonts Uniform Across Headers
================================================== */
@media (max-width: 767px) {
  html body main .stk-6449bae .stk-block-heading__text,
  html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
    font-size: 36px !important;
  }
}

/* ==================================================
   Make Product Page H1 Desktop Font Match Contact Us
================================================== */
html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
  font-size: 48px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}

/* ==================================================
   Force Product Page Hero to Decrease and Match
================================================== */
@media (min-width: 768px) {
  html body.post-type-archive-product .hero-section[data-type="type-2"] , html body.tax-product_cat .hero-section[data-type="type-2"] {
    min-height: 320px !important;
    height: 320px !important;
    max-height: 320px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==================================================
   UNIVERSAL HERO ALIGNMENT (DESKTOP, TABLET, MOBILE)
================================================== */
/* 1. Reset inner columns across all screens so text never gets stuck */
body:not(.home) .stk-3e20b48 .stk-3e20b48-column,
body:not(.home) .stk-893499a .stk-893499a-column {
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Mobile Alignment (Up to 767px) */
@media (max-width: 767px) {
  /* Box models */
  body:not(.home) .stk-3e20b48,
  body:not(.home) .stk-893499a {
    min-height: 0 !important; max-height: none !important; height: auto !important;
    padding-top: 100px !important; padding-bottom: 100px !important; display: block !important;
  }
  html body.post-type-archive-product .hero-section[data-type="type-2"] , html body.tax-product_cat .hero-section[data-type="type-2"] {
    min-height: 280px !important; height: 280px !important; max-height: 280px !important;
    padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  }
  /* Main Typography Mobile (Products, About, Contact) */
  html body main .stk-6449bae .stk-block-heading__text,
  html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
    font-size: 35px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #ffffff !important;
  }
}

/* ==================================================
html body main .stk-6449bae .stk-block-heading__text,
html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 2. MOBILE PIXEL-PERFECT CENTERING (Up to 767px) --- */
@media (max-width: 767px) {
  /* Lock all background boxes to exactly 250px tall, completely flex-centered */
  body:not(.home) .stk-3e20b48,
  body:not(.home) .stk-893499a,
  html body.post-type-archive-product .hero-section[data-type="type-2"] , html body.tax-product_cat .hero-section[data-type="type-2"] {
    min-height: 250px !important;
    max-height: 250px !important;
    height: 250px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Destroy all Stackable internal margins/paddings that ruin flex centering */
  body:not(.home) .stk-3e20b48 .stk-3e20b48-column,
  body:not(.home) .stk-893499a .stk-893499a-column,
  body:not(.home) .stk-3e20b48 .stk-column-wrapper,
  body:not(.home) .stk-893499a .stk-column-wrapper,
  body:not(.home) .stk-3e20b48 .stk-block-content,
  body:not(.home) .stk-893499a .stk-block-content,
  body:not(.home) .stk-3e20b48 .stk-block,
  body:not(.home) .stk-893499a .stk-block {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Lock mobile font sizes so they cannot differ */
  html body main .stk-6449bae .stk-block-heading__text,
  html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
    font-size: 38px !important;
  }
}

/* --- 3. TABLET & DESKTOP ALIGNMENT RESTORATION --- */
/* Tablet Alignment (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Lock all background boxes to exactly 250px tall, completely flex-centered */
  body:not(.home) .stk-3e20b48,
  body:not(.home) .stk-893499a,
  html body.post-type-archive-product .hero-section[data-type="type-2"] , html body.tax-product_cat .hero-section[data-type="type-2"] {
    min-height: 250px !important;
    max-height: 250px !important;
    height: 250px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Destroy all Stackable internal margins/paddings that ruin flex centering on tablet */
  body:not(.home) .stk-3e20b48 .stk-3e20b48-column,
  body:not(.home) .stk-893499a .stk-893499a-column,
  body:not(.home) .stk-3e20b48 .stk-column-wrapper,
  body:not(.home) .stk-893499a .stk-column-wrapper,
  body:not(.home) .stk-3e20b48 .stk-block-content,
  body:not(.home) .stk-893499a .stk-block-content,
  body:not(.home) .stk-3e20b48 .stk-block,
  body:not(.home) .stk-893499a .stk-block {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Lock tablet font sizes identically */
  html body main .stk-6449bae .stk-block-heading__text,
  html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
    font-size: 42px !important;
  }
}

/* Desktop Alignment (1025px and up) */
@media (min-width: 1025px) {
  body:not(.home) .stk-3e20b48,
  body:not(.home) .stk-893499a {
    min-height: 0 !important; max-height: none !important; height: auto !important;
    padding-top: 113px !important; padding-bottom: 113px !important; display: block !important;
  }
  html body.post-type-archive-product .hero-section[data-type="type-2"] , html body.tax-product_cat .hero-section[data-type="type-2"] {
    min-height: 320px !important; height: 320px !important; max-height: 320px !important;
    padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  }
  
  /* Restore Desktop Font Sizes */
  html body main .stk-6449bae .stk-block-heading__text,
  html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
    font-size: 48px !important;
  }
}

/* Minor 8px optical adjustment for Product breadcrumbs strictly on mobile */
@media (max-width: 767px) {
  html body.post-type-archive-product .hero-section .woocommerce-breadcrumb , html body.tax-product_cat .hero-section .woocommerce-breadcrumb {
    transform: translateY(-8px) !important;
  }
}

/* Global White Color Enforcement strictly for Product, About Us, and Contact Us Titles */
html body main .stk-6449bae .stk-block-heading__text,
html body.post-type-archive-product .hero-section .page-title , html body.tax-product_cat .hero-section .page-title {
  color: #ffffff !important;
}

/* Fix for specific category headers that are invisible because of white text */
html body.tax-product_cat.term-artificial-plants .hero-section .page-title,
html body.tax-product_cat.term-creepers-and-greens .hero-section .page-title,
html body.tax-product_cat.term-green-walls-vertical-panels .hero-section .page-title {
  color: #ffffff !important; 
}

/* ==================================================
   Single Product Page Text Visibility Fix
   Forces breadcrumbs and titles to be dark green on the off-white background
================================================== */
html body.single-product main .stk-6449bae .stk-block-heading__text,
html body.single-product .hero-section .page-title,
html body.single-product h1.entry-title {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #556B5D !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Removed conflicting breadcrumb block */

/* 1. Product Title */
html body.single-product h1.product_title,
html body.single-product h1.entry-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(32px, 4vw, 42px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #112418 !important; /* Deep luxury green */
  margin-bottom: 15px !important;
  text-transform: none !important; /* Forces normal casing instead of uppercase */
}

/* 2. Product Price */
html body.single-product .price,
html body.single-product .woocommerce-Price-amount {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #1B3B28 !important; /* Rich green */
  margin-bottom: 25px !important;
}

/* Fix the strikethrough line being too high on the old price using a bulletproof background gradient */
html body.single-product .price del,
html body.single-product .price del span,
html body.single-product .price del bdi {
  text-decoration: none !important; /* Remove native broken strikethrough */
}

html body.single-product .price del {
  /* Draw our own perfectly positioned line */
  /* Using 48% instead of 50% pulls the line down slightly from the "upper side" to exactly cross the middle of the numbers */
  background-image: linear-gradient(transparent calc(48% - 1px), currentColor calc(48% - 1px), currentColor calc(48% + 1px), transparent calc(48% + 1px)) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  display: inline !important; /* Restore normal inline flow so baseline doesn't break */
  opacity: 0.7 !important;
}

/* 3. Breadcrumbs Typography (Mathematically Perfect Grid - ONLY FOR SINGLE PRODUCTS) */

/* The outer container */
html body.single-product main .ct-breadcrumbs,
html body.single-product main .woocommerce-breadcrumb,
html body.single-product .bread-crumbs,
html body.single-product #breadcrumbs {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #4A5D51 !important;
  line-height: 1 !important;
  
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important; /* CRITICAL: Kills the uneven right-side gap */
}

/* The wrapper spans containing the text and the separator */
html body.single-product main .ct-breadcrumbs > span,
html body.single-product main .woocommerce-breadcrumb > span,
html body.single-product main .ct-breadcrumbs > div,
html body.single-product main .woocommerce-breadcrumb > div {
  display: flex !important;
  align-items: center !important;
}

html body.single-product main .ct-breadcrumbs a,
html body.single-product main .woocommerce-breadcrumb a,
html body.single-product .bread-crumbs a,
html body.single-product #breadcrumbs a {
  color: #1B3B28 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: flex !important; /* Ensures text inside is aligned */
  align-items: center !important;
  font-size: 13px !important;
}

html body.single-product main .ct-breadcrumbs a:hover,
html body.single-product main .woocommerce-breadcrumb a:hover,
html body.single-product .bread-crumbs a:hover,
html body.single-product #breadcrumbs a:hover {
  color: #2D5A3D !important;
}

/* The Native Separator */
html body.single-product main .ct-breadcrumbs .ct-breadcrumb-separator,
html body.single-product main .woocommerce-breadcrumb .separator,
html body.single-product .bread-crumbs .separator,
html body.single-product main .ct-breadcrumbs svg.ct-separator,
html body.single-product main .woocommerce-breadcrumb svg.ct-separator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1B3B28 !important;
  
  /* CRITICAL: Horizontal Symmetry */
  margin: 0 12px !important; 
  
  /* CRITICAL: Cap-Height Center Alignment (Optical adjustment) */
  transform: translateY(-1px) !important;
}

/* Restrict SVG dimensions */
html body.single-product main .ct-breadcrumbs svg.ct-separator,
html body.single-product main .woocommerce-breadcrumb svg.ct-separator {
  width: 9px !important;
  height: 9px !important;
  stroke: none !important;
  fill: currentColor !important;
}

/* Clean up any injected pseudo elements */
html body.single-product main .ct-breadcrumbs > span::after,
html body.single-product main .woocommerce-breadcrumb > span::after,
html body.single-product main .ct-breadcrumbs a::after,
html body.single-product main .woocommerce-breadcrumb a::after {
  display: none !important;
}

/* 4. Product Short Description */
html body.single-product .woocommerce-product-details__short-description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: rgba(17, 36, 24, 0.75) !important; /* Soft dark green for readability */
}
/* Mobile Breadcrumb Single Line Fix */
@media (max-width: 767px) {
  html body.single-product main .ct-breadcrumbs,
  html body.single-product main .woocommerce-breadcrumb,
  html body.single-product .bread-crumbs,
  html body.single-product #breadcrumbs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
  }
  
  html body.single-product main .ct-breadcrumbs::-webkit-scrollbar,
  html body.single-product main .woocommerce-breadcrumb::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }

  html body.single-product main .ct-breadcrumbs > span,
  html body.single-product main .woocommerce-breadcrumb > span,
  html body.single-product main .ct-breadcrumbs > div,
  html body.single-product main .woocommerce-breadcrumb > div {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* Mobile Breadcrumb Compacting */
@media (max-width: 767px) {
  html body.single-product main .ct-breadcrumbs,
  html body.single-product main .woocommerce-breadcrumb,
  html body.single-product .bread-crumbs,
  html body.single-product #breadcrumbs,
  html body.single-product main .ct-breadcrumbs a,
  html body.single-product main .woocommerce-breadcrumb a,
  html body.single-product .bread-crumbs a,
  html body.single-product #breadcrumbs a {
    font-size: 11px !important; /* Slightly smaller text for mobile */
  }

  /* Drastically reduce horizontal gaps on mobile while keeping it even */
  html body.single-product main .ct-breadcrumbs .ct-breadcrumb-separator,
  html body.single-product main .woocommerce-breadcrumb .separator,
  html body.single-product .bread-crumbs .separator,
  html body.single-product main .ct-breadcrumbs svg.ct-separator,
  html body.single-product main .woocommerce-breadcrumb svg.ct-separator {
    margin: 0 5px !important; /* Reduced from 12px to 5px */
    transform: translateY(-1px) !important;
  }

  /* Make the arrows proportionally smaller */
  html body.single-product main .ct-breadcrumbs svg.ct-separator,
  html body.single-product main .woocommerce-breadcrumb svg.ct-separator {
    width: 7px !important;
    height: 7px !important;
  }
}

/* 5. Footer Social Icons - Bare Optimal Aesthetic */
html body footer#footer.ct-footer .ct-social-box {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

html body footer#footer.ct-footer .ct-social-box a {
  background-color: transparent !important; /* No background */
  border: none !important; /* No outline */
  color: #112418 !important; /* Matches exactly with MAIN MENU and ACCOUNT headings */
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  margin: 0 12px !important; /* Elegant spacing */
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

html body footer#footer.ct-footer .ct-social-box .ct-icon-container {
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body footer#footer.ct-footer .ct-social-box .ct-icon-container svg {
  fill: currentColor !important;
  width: 20px !important; /* Optimal bare icon size */
  height: 20px !important;
  transition: all 0.3s ease !important;
}

/* Hover State - Smooth lift */
html body footer#footer.ct-footer .ct-social-box a:hover {
  background-color: transparent !important;
  color: #2D5A3D !important; /* Accent green */
  transform: translateY(-3px) scale(1.1) !important;
}
/* 6. Mobile Search Modal Fixes & Enhancements */
@media (max-width: 999px) {
  /* Enforce strict 'flex-start' to permanently stop the search bar from dancing/re-centering */
  html body #search-modal .ct-panel-content {
    justify-content: flex-start !important; 
  }

  /* Lock the search bar at an optimal fixed position near the top */
  html body #search-modal .ct-search-form {
    margin-top: 15vh !important; /* Optimal top placement */
    transform: none !important; 
  }
}


/* 7. Mobile/Tablet Header Icon Alignment Fix (Safe Version) */
@media (max-width: 999px) {
  /* 1. Establish a pristine flex container for the icons */
  html body header#header [data-device="mobile"] [data-column="end"] [data-items] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important; /* Slightly increased gap to prevent misclicks */
    margin-top: 10px !important; /* Final optical nudge to perfectly align with Indleaf text baseline */
  }

  /* 2. Strip rogue horizontal margins from the icons that cause irregular gaps */
  html body header#header [data-device="mobile"] [data-column="end"] [data-items] > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. Absolutely obliterate hidden labels (like 'Login') so they take zero physical space */
  html body header#header [data-device="mobile"] [data-column="end"] .ct-label {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}