@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;600;700&display=swap');

/* CSS Custom Properties (Variables) */
:root {
  /* Immutable Site Infrastructure - NEVER affected by customization */
  --site-header-solid: #1e4a35;      /* Header background - solid color only */
  --site-footer-solid: #1e4a35;      /* Footer background - solid color only */
  --site-nav-text: #ffffff;          /* Navigation text color */
  --site-nav-hover: #2d5a47;         /* Navigation hover background */

  /* Legacy site colors - deprecated, use above instead */
  --site-header-bg: #1e4a35;         /* Header background */
  --site-footer-bg: #1e4a35;         /* Footer background */
  --site-nav-primary: #2d5a47;       /* Navigation primary */
  --site-nav-secondary: #3e7b69;     /* Navigation secondary */

  /* Original Green Theme - Keep for backwards compatibility */
  --primary-green: #1e4a35;          /* Darker for better contrast */
  --primary-green-rgb: 30, 74, 53;
  --secondary-green: #2d5a47;        /* Deeper green */
  --secondary-green-rgb: 45, 90, 71;
  --tertiary-green: #3e7b69;         /* Lighter accent green */

  /* Customizable Theme Colors - Landing page elements */
  --theme-primary: #1e4a35;          /* Main theme color */
  --theme-secondary: #2d5a47;        /* Secondary theme color */
  --theme-tertiary: #3e7b69;         /* Tertiary theme color */

  /* Semantic theme variables derived from main theme colors */
  --theme-border: var(--theme-secondary);
  --theme-text-accent: var(--theme-primary);
  --theme-button-bg: var(--theme-primary);
  --theme-button-hover: var(--theme-secondary);
  --theme-active-bg: var(--theme-primary);
  --theme-link: var(--theme-secondary);
  --theme-link-hover: var(--theme-primary);
  --theme-section-bg: var(--theme-secondary);
  --theme-section-border: var(--theme-secondary);

  /* Base colors - unchanged */
  --light-green-bg: #f0f9f4;         /* Slightly more saturated */
  --card-bg: #ffffff;
  --text-dark: #0f172a;              /* Much darker for better readability */
  --text-medium: #334155;            /* Medium gray for secondary text */
  --text-light: #64748b;             /* Lighter but still readable */
  --border-color: #e2e8f0;           /* Better contrast border */
  --accent-gold: #d97706;            /* More vibrant gold */
  --accent-purple: #7c3aed;          /* Higher contrast purple */
  --accent-orange: #ea580c;          /* Brighter orange */
  --accent-blue: #2563eb;            /* Better blue contrast */
  --error-red: #dc2626;              /* Stronger red */
  --success-green: #059669;          /* Bright success green */
  --out-of-stock-bg: #f1f5f9;
  --out-of-stock-text: #64748b;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Borders */
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Enhanced Shadows for Better Depth */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.12), 0 4px 6px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.15), 0 10px 10px rgba(15, 23, 42, 0.06);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Theme RGB values for transparency support */
  --theme-primary-rgb: 30, 74, 53;
  --theme-secondary-rgb: 45, 90, 71;
  --theme-tertiary-rgb: 62, 123, 105;

  /* Enhanced Pricing Colors - Matching Website Theme */
  --enhanced-pricing-bg: var(--light-green-bg);     /* Use existing light green */
  --enhanced-pricing-border: var(--border-color);   /* Use existing border color */
  --enhanced-pricing-accent: var(--primary-green);  /* Use existing primary green */
  --discount-green: var(--success-green);           /* Use existing success green */
  --discount-bg: var(--light-green-bg);             /* Use existing light green */
  --shipping-blue: var(--accent-blue);              /* Use existing blue */
  --shipping-bg: #f8fafc;                           /* Very light gray-blue */
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================================================================== */
/* THEME APPLICATION SCOPE - Maps legacy variables to theme variables in content areas     */
/* ======================================================================================== */

/* Only apply theme variables to main content areas, not site infrastructure */
main,
.product-grid,
.product-card,
.enhanced-pricing,
.filter-section,
.vendor-filter,
.sort-controls,
.price-breakdown-popup,
.review-carousel,
.review-modal-overlay,
.review-modal-content,
.review-card-compact {
  /* Map legacy green variables to theme variables within content scope */
  --primary-green: var(--theme-primary);
  --secondary-green: var(--theme-secondary);
  --tertiary-green: var(--theme-tertiary);
  --primary-green-rgb: var(--theme-primary-rgb);
  --secondary-green-rgb: var(--theme-secondary-rgb);
  --enhanced-pricing-accent: var(--theme-primary);
}

/* ======================================================================================== */
/* END THEME APPLICATION SCOPE                                                             */
/* ======================================================================================== */

/* Prevent body scroll when modal is active */
body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Mobile Touch Target Optimization - WCAG 2.1 AAA minimum 44x44px */
@media (max-width: 768px) {
  button,
  .btn,
  a.nav-item,
  a.mobile-nav-item,
  .filter-checkbox-label,
  .tag-checkbox-label,
  .page-number,
  input[type="checkbox"],
  input[type="radio"],
  .dropdown-link,
  .cookie-button,
  .age-button,
  .auth-button {
    min-width: 44px;
    min-height: 44px;
    /* Ensure padding doesn't shrink below minimum */
    padding: max(0.75rem, 11px) max(1rem, 11px);
  }
}

/* Ad Carousel Container */
.ad-carousel-wrapper {
  background: white;
  border: 2px solid var(--theme-border);
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-md) 0;
  padding: var(--spacing-md);
  box-shadow: var(--shadow-md);
  max-width: 1200px; /* Limit carousel to 1200px wide - half the typical desktop width */
  margin-left: auto;
  margin-right: auto;
}

.ad-carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background-image: url('/static/images/AdCarasoul/Base.webp');
  background-size: 200px auto;
  background-position: center;
  background-repeat: repeat;
}

.ad-carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1; /* Changed from 3/1 to match 2400x1200 image ratio - no letterboxing */
}

.ad-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.ad-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.ad-slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.ad-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Always show full image without cropping */
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: transparent; /* Let tiled Base.webp background show through letterbox areas */
}

.ad-slide a:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(30, 74, 53, 0.3);
}

/* ===== HTML Ad Carousel Components ===== */
/* Carousel-specific versions of real site components */

/* Base carousel content container */
.ad-carousel-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Split layout for carousel slides */
.ad-carousel-split {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem 3rem;
  width: 100%;
  height: 100%;
  background: transparent;
}

.ad-carousel-text {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ad-carousel-text h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
}

.ad-carousel-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carousel version of coupons hero - scaled down for carousel */
.ad-carousel-hero {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

/* Same pattern background as real coupons hero */
.ad-carousel-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 1;
  z-index: 0;
}

.ad-carousel-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.ad-carousel-hero h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ad-carousel-hero h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
}

.ad-carousel-hero p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 700px;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin: 0;
}

/* Carousel version of add coupon button - same as real one */
.ad-carousel-btn {
  background: white;
  color: var(--primary-green);
  border: none;
  padding: 0.875rem 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-medium);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.ad-carousel-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Responsive carousel */
@media (max-width: 768px) {
  .ad-carousel-split {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .ad-carousel-text {
    flex: 1;
    text-align: center;
  }

  .ad-carousel-text h2 {
    font-size: 1.5rem;
  }

  .ad-carousel-hero {
    padding: 2rem 1.5rem;
  }

  .ad-carousel-hero h1 {
    font-size: 1.5rem;
    flex-direction: column;
  }

  .ad-carousel-hero h3 {
    font-size: 1.1rem;
  }

  .ad-carousel-hero p {
    font-size: 0.9rem;
  }

  .ad-carousel-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .ad-carousel-split {
    padding: 1rem;
  }

  .ad-carousel-text h2 {
    font-size: 1.3rem;
  }

  .ad-carousel-hero h1 {
    font-size: 1.3rem;
  }
}

.ad-carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(30, 74, 53, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  z-index: 10;
  font-size: 20px;
  font-weight: bold;
}

.ad-carousel-nav-btn:hover {
  background: rgba(30, 74, 53, 0.95);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.5);
}

.ad-carousel-nav-btn:active {
  transform: translateY(-50%) scale(1.05);
}

.ad-carousel-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ad-carousel-prev {
  left: 16px;
}

.ad-carousel-next {
  right: 16px;
}

/* Mobile responsive adjustments for ad carousel */
@media (max-width: 768px) {
  .ad-carousel-wrapper {
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm); /* Reduced padding for more banner space */
  }

  .ad-carousel-track {
    aspect-ratio: 2 / 1; /* Taller on tablets - 50% more height than desktop */
  }

  .ad-carousel-nav-btn {
    width: 40px; /* Slightly larger for better touch targets */
    height: 40px;
    font-size: 18px;
  }

  .ad-carousel-prev {
    left: 8px;
  }

  .ad-carousel-next {
    right: 8px;
  }
}

@media (max-width: 480px) {
  .ad-carousel-wrapper {
    padding: var(--spacing-xs); /* Minimal padding on mobile for maximum banner size */
  }

  .ad-carousel-track {
    aspect-ratio: 3 / 2; /* Much taller on mobile - 100% more height than desktop 3:1 */
  }

  .ad-carousel-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .ad-carousel-prev {
    left: 6px;
  }

  .ad-carousel-next {
    right: 6px;
  }
}

.welcome-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.welcome-header h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 1px 2px rgba(30, 74, 53, 0.3);
  letter-spacing: 0.5px;
}

.welcome-header p {
  font-size: 0.95rem;
  color: var(--secondary-green);
  margin: 0;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(45, 90, 71, 0.2);
}

.welcome-features-carousel {
  margin-top: var(--spacing-md);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.features-carousel-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: var(--spacing-xs);
}

.features-track {
  display: flex;
  gap: var(--spacing-sm);
  transition: transform 0.5s ease-in-out;
}

.carousel-nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: rgba(30, 74, 53, 0.3);
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  z-index: 10;
  font-size: 14px;
  font-weight: bold;
}

.carousel-nav-btn:hover {
  background: rgba(30, 74, 53, 0.6);
  width: 12px;
  box-shadow: 0 2px 8px rgba(30, 74, 53, 0.4);
}

.carousel-nav-btn:active {
  background: rgba(30, 74, 53, 0.8);
  width: 12px;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

.carousel-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Add subtle arrows via pseudo-elements for hover feedback */
.carousel-nav-btn::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.carousel-prev:hover::after {
  border: 4px solid transparent;
  border-right-color: white;
  border-left: 0;
  margin-left: -2px;
  opacity: 1;
}

.carousel-next:hover::after {
  border: 4px solid transparent;
  border-left-color: white;
  border-right: 0;
  margin-right: -2px;
  opacity: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: white;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  border: 1px solid var(--border-color);
  min-width: 280px;
  max-width: 280px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden;
  transform: translateZ(0);
}

.feature-item:hover {
  background: white;
  border-color: var(--theme-primary);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 16px rgba(30, 74, 53, 0.15);
  z-index: 2;
}

.feature-item:hover .feature-text {
  color: var(--primary-green);
  text-shadow: 0 1px 2px rgba(30, 74, 53, 0.3);
}

.feature-icon {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.feature-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--primary-green);
  flex: 1;
  text-shadow: 0 1px 1px rgba(30, 74, 53, 0.2);
}


/* Responsive adjustments for welcome banner */
@media (max-width: 768px) {
  .welcome-banner {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
  }
  
  .welcome-header h2 {
    font-size: 1.2rem;
  }
  
  .welcome-header p {
    font-size: 0.9rem;
  }
  
  .features-track {
    animation-duration: 200s;
  }
  
  .feature-item {
    min-width: 240px;
    max-width: 240px;
    padding: var(--spacing-xs);
  }
  
  .feature-icon {
    font-size: 1.1rem;
    min-width: 1.4rem;
  }
  
  .feature-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .welcome-banner {
    padding: var(--spacing-xs);
  }
  
  .features-track {
    animation-duration: 220s;
  }
  
  .feature-item {
    min-width: 200px;
    max-width: 200px;
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-xs);
  }
  
  .welcome-header h2 {
    font-size: 1.1rem;
  }
  
  .welcome-header p {
    font-size: 0.85rem;
  }
  
  .feature-icon {
    font-size: 1.1rem;
    min-width: 1.5rem;
  }
  
  .feature-text {
    font-size: 0.75rem;
    text-align: center;
  }
}

/* Meta-Affiliate Custom Header Styles */
/* Standard: 2400x1200 (2:1 aspect ratio) banners */
.meta-affiliate-custom-header {
  width: 100%;
  height: 300px;           /* Reduced by 50% for more reasonable desktop size */
  max-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-md) 0;
  border: 2px solid var(--theme-border);
  box-shadow: var(--shadow-md);
  background-image: url('/static/images/AdCarasoul/Base.webp');
  background-size: 200px auto;
  background-position: center;
  background-repeat: repeat;
}

.custom-header-image {
  width: 100%;
  height: 100%;            /* Fill container height instead of auto */
  object-fit: contain;     /* Show full image without cropping - letterbox if needed */
  display: block;
  border-radius: calc(var(--radius-md) - 2px); /* Account for container border */
  border: none;
}

/* Responsive adjustments for custom header */
@media (max-width: 768px) {
  .meta-affiliate-custom-header {
    height: 360px;       /* ~720px width ÷ 2 = 360px for 2:1 ratio on mobile */
    max-height: 360px;
  }

  /* Image inherits height: 100% from base style */
}

@media (max-width: 480px) {
  .meta-affiliate-custom-header {
    height: 180px;       /* 360px width ÷ 2 = 180px for perfect 2:1 ratio on small screens */
    max-height: 180px;
    margin-bottom: var(--spacing-xs);
  }

  /* Image inherits height: 100% from base style */
}

/* Age Verification Modal Styles */
.age-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.age-modal-overlay.show {
  opacity: 1;
}

.age-modal-content {
  background: #ffffff; /* Solid white - no gradient */
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 500px;
  width: 90%;
  margin: 1rem;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.age-modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-primary); /* Solid theme color */
}

.age-modal-inner {
  transform: translateY(30px);
  opacity: 0;
  animation: slideInFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes slideInFade {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.age-verification-logo {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.age-verification-logo img {
  max-width: 200px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

.age-verification-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.age-verification-text {
  font-size: 1.1rem;
  color: var(--text-medium);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.age-verification-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.age-button {
  flex: 1;
  min-width: 160px;
  padding: 1rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: var(--theme-button-bg); /* Solid button color */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.3);
  position: relative;
  overflow: hidden;
}

.age-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* Solid shimmer effect */
  transition: left 0.5s ease;
}

.age-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 74, 53, 0.4);
  background: var(--theme-button-hover); /* Solid hover color */
}

.age-button:hover::before {
  left: 100%;
}

.age-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.3);
}

.age-verification-remember {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the actual checkbox input */
.remember-checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.remember-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-medium);
  user-select: none;
}

.checkmark {
  position: relative;
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: white;
  transition: all 0.2s ease;
}

.remember-checkbox:hover .checkmark {
  border-color: var(--theme-primary);
}

/* Checked state using adjacent sibling combinator */
.remember-checkbox-input:checked ~ .remember-checkbox .checkmark {
  background: var(--primary-green);
  border-color: var(--theme-primary);
}

.remember-checkbox-input:checked ~ .remember-checkbox .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.age-verification-disclaimer {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* Mobile Bottom Sheet Transformation - Age Verification Modal */
@media (max-width: 768px) {
  /* Transform overlay to align bottom sheet at bottom */
  .age-modal-overlay {
    align-items: flex-end;
  }

  /* Transform modal to bottom sheet */
  .age-modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 2rem 1.5rem;
    border-radius: 20px 20px 0 0; /* Rounded corners only on top */
    max-height: 85vh; /* Prevent covering entire screen */
    overflow-y: auto; /* Allow scrolling if content is tall */
  }

  .age-verification-title {
    font-size: 1.5rem;
  }

  .age-verification-text {
    font-size: 1rem;
  }

  .age-verification-buttons {
    flex-direction: column;
    align-items: center;
  }

  .age-button {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .age-modal-content {
    padding: 1.5rem 1rem;
    max-height: 90vh; /* More screen space on smaller devices */
  }

  .age-verification-logo img {
    max-width: 150px;
  }

  .age-verification-title {
    font-size: 1.3rem;
  }
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Prevent any element from causing horizontal overflow */
*, *::before, *::after {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling at root level */
  max-width: 100vw; /* Ensure html doesn't exceed viewport width */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--light-green-bg);
  font-size: 16px;
  min-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  max-width: 100vw; /* Ensure body doesn't exceed viewport width */
  padding-top: 100px; /* Adjusted to match header height */
  margin: 0;
}

/* Main content area should grow to fill available space */
main {
  flex: 1;
}

/* ======================================================================================== */
/* SITE INFRASTRUCTURE ISOLATION - These styles MUST NOT be affected by customization      */
/* ======================================================================================== */

/* Critical isolation rules to protect site header and footer from customization */
.site-header,
.site-header *,
.mobile-header,
.mobile-header *,
.site-footer,
.site-footer * {
  /* Force use of immutable site colors - never use theme variables */
  --primary-green: var(--site-header-solid) !important;
  --secondary-green: var(--site-header-solid) !important;
  --tertiary-green: var(--site-header-solid) !important;
  --theme-primary: var(--site-header-solid) !important;
  --theme-secondary: var(--site-header-solid) !important;
  --theme-tertiary: var(--site-header-solid) !important;
}

/* Ensure header always uses site colors */
.site-header,
.mobile-header {
  background-color: var(--site-header-solid) !important;
  background: var(--site-header-solid) !important;
  color: var(--site-nav-text) !important;
}

/* Ensure footer always uses site colors */
.site-footer {
  background-color: var(--site-footer-solid) !important;
  background: var(--site-footer-solid) !important;
  color: var(--site-nav-text) !important;
}

/* Protect navigation items from customization */
.site-header a,
.mobile-header a,
.site-footer a {
  color: var(--site-nav-text) !important;
}

.site-header a:hover,
.mobile-header a:hover,
.site-footer a:hover {
  background-color: var(--site-nav-hover) !important;
  color: var(--site-nav-text) !important;
}

/* Protect buttons in header/footer */
.site-header button,
.mobile-header button,
.site-footer button {
  background-color: var(--site-header-solid) !important;
  color: var(--site-nav-text) !important;
  border-color: var(--site-nav-text) !important;
}

/* ======================================================================================== */
/* END SITE INFRASTRUCTURE ISOLATION                                                       */
/* ======================================================================================== */

/* Site Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--site-header-solid); /* Solid color - no gradient */
  color: var(--site-nav-text);
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1); /* More dramatic shadow */
  height: 100px; /* Header height */
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* More visible highlight */
  /* Add subtle pattern overlay */
  background-image: none;
  background-color: var(--site-header-solid); /* Solid header background */
  /* Add subtle animation */
  background-size: 100% 100%, 200% 200%, 300% 300%;
  animation: headerShimmer 8s ease-in-out infinite;
}

/* Mobile Header - Hidden by default, shown only on mobile */
.mobile-header {
  display: none;
}

/* Desktop Header - Shown by default, hidden on mobile */
.desktop-header {
  display: flex;
}

/* Mobile Header Styles */
.mobile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 var(--spacing-md);
  height: 60px;
}

.mobile-logo {
  display: flex;
  align-items: center;
  height: 58px;
}

.mobile-logo img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Hamburger Menu Button */
.mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px; /* Increased from 8px for better touch area */
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Touch target optimization - WCAG 2.5.5 & iOS HIG compliant */
  min-width: 44px;
  min-height: 44px;
}

.mobile-menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.mobile-menu-toggle.active {
  background-color: rgba(255, 255, 255, 0.25);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger Animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation */
.mobile-navigation {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /* Premium green gradient background matching desktop right dropdown */
  background: linear-gradient(180deg,
    #1a3d2e 0%,
    #1e4a35 20%,
    #2d5f47 60%,
    #1e4a35 100%);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 12px 12px; /* Rounded bottom corners */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Enhanced shadow matching desktop dropdown */
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
}

.mobile-navigation.active {
  max-height: 600px; /* Increased to fit all account items + menu items */
  overflow-y: auto; /* Make scrollable if content exceeds max-height */
}

.mobile-nav-content {
  padding: 20px; /* Match desktop dropdown-content padding of 25px but slightly less for mobile */
  display: flex;
  flex-direction: column;
  gap: 10px; /* Match desktop dropdown-nav gap */
}

.mobile-nav-item {
  color: rgba(255, 255, 255, 0.95); /* Match desktop dropdown-link */
  text-decoration: none;
  padding: 14px 18px; /* Match desktop dropdown-link padding */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px; /* Match desktop dropdown-link */
  transition: all 0.3s ease;
  /* Match desktop dropdown-link background and border */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px; /* Match desktop dropdown-link gap */
  position: relative; /* For ::before pseudo-element animation */
  cursor: pointer;
  text-align: left;
  min-height: 44px; /* Touch-friendly target */
  overflow: hidden; /* For ::before sliding animation */
}

/* Sliding animation effect (matches desktop dropdown-item) */
.mobile-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent);
  transition: left 0.5s ease;
  pointer-events: none; /* Don't interfere with clicks */
}

.mobile-nav-item:hover {
  /* Match desktop dropdown-link hover styling */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.1) 100%);
  color: #ffffff;
  transform: translateX(5px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mobile-nav-item:hover::before {
  left: 100%; /* Slide animation on hover */
}

/* Gold icons for all mobile nav items (matches desktop dropdown-link i) */
.mobile-nav-item i {
  color: var(--accent-gold);
  font-size: 16px; /* Match desktop dropdown-link i */
  width: 20px; /* Match desktop dropdown-link i */
  text-align: center; /* Match desktop dropdown-link i */
}

.mobile-nav-item.partner-button {
  background: var(--theme-primary); /* Solid color - no gradient */
  margin: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  border-left: none;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.mobile-nav-item.partner-button:hover {
  background: var(--theme-secondary); /* Solid color - no gradient */
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.mobile-affiliate-disclaimer {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--spacing-md);
  background-color: rgba(255, 255, 255, 0.05);
}

.mobile-affiliate-disclaimer i {
  font-size: 0.8rem;
  color: var(--accent-color);
}

/* Mobile navigation dividers (matches desktop dropdown dividers) */
.mobile-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 8px 20px;
}

.mobile-nav-section-divider {
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: var(--spacing-md) 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Subtle header animation */
@keyframes headerShimmer {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 0% 0%, 100% 100%, 100% 100%;
  }
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1900px;
	margin: auto;
	padding: 0 var(--spacing-xl); /* Increased padding */
	position: relative;
	gap: var(--spacing-xl);
}

.logo-home-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.site-logo {
  display: flex;
  align-items: center;
  height: 85px; /* Much larger height for premium look */
  position: relative;
  /* Add subtle glow effect */
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.site-logo img {
  height: 100%;
  width: auto;
  /* Properly scale logo with aspect ratio based on native resolution of 1710x778 */
  max-width: 220px; /* Significantly increased from 160px */
  object-fit: contain;
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)) 
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.1)); /* Enhanced shadow with glow */
  transition: all 0.3s ease; /* Smoother transition */
}

.home-button {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem;
  font-size: 1.1rem;
  gap: var(--spacing-xs);
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-button::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #ffffff; /* Solid white - no gradient */
  border-radius: 2px;
  transition: width 0.3s ease;
}

.home-button:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.home-button:hover::after {
  width: 80%;
}

.home-button i {
  font-size: 1.15em;
}

.site-logo:hover img {
  transform: scale(1.05) translateY(-2px); /* More dramatic hover effect */
  filter: 
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)) 
    drop-shadow(0 0 25px rgba(255, 255, 255, 0.2));
}

.site-navigation {
  display: flex;
  gap: var(--spacing-xl); /* Increased gap for better spacing */
  align-items: center;
}

.nav-item {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0.8rem 1.2rem; /* Increased padding for better click targets */
  font-size: 1.1rem; /* Slightly larger font */
  gap: var(--spacing-xs);
  border-radius: 8px; /* Slightly more rounded */
  transition: all 0.3s ease; /* Smoother transition */
  position: relative;
  letter-spacing: 0.03em; /* Improved letter spacing */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
  white-space: nowrap; /* Prevent text wrapping */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Higher specificity nav-item cascade fixes */
nav.site-navigation a.nav-item {
  color: rgb(255, 255, 255) !important;
  font-size: 1rem !important;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px; /* Thicker underline */
  background: #ffffff; /* Solid white - no gradient */
  border-radius: 2px;
  transition: width 0.3s ease;
}

.nav-item:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px); /* More pronounced lift */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-item:hover::after {
  width: 80%; /* Stylish partial underline */
}

.nav-item i {
  margin-right: 6px;
  font-size: 1.15em;
}

/* Partner Button Styling - Green Cannabis Theme */
.partner-button {
  background: var(--theme-primary) !important; /* Solid color - no gradient */
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(30, 74, 53, 0.3) !important;
}

/* High-specificity partner-button cascade fixes */
nav.site-navigation a.nav-item.partner-button {
  color: rgb(255, 255, 255) !important;
  background-color: rgb(30, 74, 53) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
}

.partner-button:hover {
  background: var(--theme-secondary) !important; /* Solid color - no gradient */
  box-shadow: 0 6px 20px rgba(30, 74, 53, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.partner-button::after {
  background: #ffffff !important; /* Solid white - no gradient */
}

/* Legacy Ko-fi Button Styling - kept for any remaining references */
.kofi-button {
  background: var(--theme-primary) !important; /* Solid color - no gradient */
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(30, 74, 53, 0.3) !important;
}

.kofi-button:hover {
  background: var(--theme-secondary) !important; /* Solid color - no gradient */
  box-shadow: 0 6px 20px rgba(30, 74, 53, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.kofi-button::after {
  background: #ffffff !important; /* Solid white - no gradient */
}

.joint-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.kofi-button:hover .joint-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  transform: scale(1.1);
}

.nav-item:hover {
  color: #ffffff;
  text-decoration: none;
}

.nav-item img {
  height: 20px;
  width: auto;
}

.container {
  max-width: 1400px;
  width: 96%; /* Ensure we use most of the available width */
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-sm); /* Reduce side padding */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: var(--spacing-xl);
  color: var(--theme-text-accent);
}

h1 .icon { /* For the leaf icon if added via span */
  color: var(--secondary-green);
}

p {
  margin-bottom: var(--spacing-md);
  color: #000000;
}

a {
  color: var(--secondary-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-green);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid transparent;
}

.btn.primary, /* Assuming .btn alone is primary */
.btn {
  background-color: var(--theme-button-bg);
  color: #fff;
  border-color: var(--theme-button-bg);
}

.btn.primary:hover,
.btn:hover {
  background-color: var(--theme-button-hover);
  border-color: var(--theme-button-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-green);
  border: 1px solid var(--primary-green);
}

.btn-secondary:hover {
  background-color: var(--light-green-bg);
  color: var(--secondary-green);
  border-color: var(--secondary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* Category Tabs - Clean Design */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-xl);
  padding: 16px 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border: 2px solid var(--theme-border);
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.category-tab {
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--text-dark);
  background-color: #f8fafc;
  border: 2px solid var(--secondary-green); /* Green outline for visual prominence */
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  text-align: center;
  min-width: min-content;
  transition: all var(--transition-normal); /* Smooth transitions for hover/active states */
}

.category-tab.active {
  background-color: var(--theme-active-bg);
  color: #ffffff;
  font-weight: 600;
  border: 2px solid var(--primary-green); /* Stronger green border for active state */
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.3); /* Enhanced shadow for active state */
}

.tab-emoji {
  font-size: 1em;
  margin-right: 4px;
  opacity: 0.9;
}

.category-tab.active .tab-emoji {
  opacity: 1;
}

/* Mobile responsiveness for category tabs */
@media (max-width: 768px) {
  .category-tabs {
    padding: 12px 16px;
    gap: 6px;
    margin-bottom: var(--spacing-lg);
    justify-content: flex-start;
  }
  
  .category-tab {
    padding: 12px 14px;
    font-size: 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tab-emoji {
    font-size: 0.95em;
    margin-right: 3px;
  }
}

@media (max-width: 480px) {
  .category-tabs {
    padding: 10px 12px;
    gap: 8px; /* Increased from 5px to meet 8px minimum spacing */
    margin-bottom: var(--spacing-md);
  }

  .category-tab {
    padding: 11px 12px; /* Adjusted padding for consistent height */
    font-size: 0.8rem;
    min-height: 44px; /* Increased from 40px - WCAG 2.5.5 compliant */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tab-emoji {
    font-size: 0.9em;
    margin-right: 2px;
  }
}

/* ================================
   ACTIVE FILTER CHIPS
   ================================ */

/* Filter chips container - shows active filters below category tabs */
.filter-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--border-color);
  min-height: 44px; /* Ensure minimum touch target height even when empty */
}

/* Hide container when no chips */
.filter-chips-container:empty {
  display: none;
}

/* Individual filter chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--primary-green);
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-heading);
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.2);
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 36px; /* Comfortable touch target */
}

/* Filter chip label */
.filter-chip-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Filter chip value */
.filter-chip-value {
  font-weight: 700;
  opacity: 0.95;
}

/* Filter chip remove button */
.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  /* Expand touch target */
  padding: 8px;
  margin: -8px;
}

.filter-chip-remove:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.filter-chip-remove::before {
  content: '×';
  font-size: 16px;
  font-weight: bold;
  color: white;
  line-height: 1;
}

/* Filter chip hover state */
.filter-chip:hover {
  background-color: var(--secondary-green);
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.3);
  transform: translateY(-1px);
}

/* Clear all filters button */
.filter-chips-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background-color: #ef4444;
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-heading);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.filter-chips-clear-all:hover {
  background-color: #dc2626;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.filter-chips-clear-all::before {
  content: '✕';
  font-size: 14px;
  font-weight: bold;
}

/* Filter count badge */
.filter-chips-count {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background-color: #e0e7ff;
  color: #3730a3;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  min-height: 28px;
}

/* Mobile responsiveness for filter chips */
@media (max-width: 768px) {
  .filter-chips-container {
    padding: 10px 12px;
    gap: 6px;
  }

  .filter-chip {
    font-size: 0.8rem;
    padding: 7px 10px;
    min-height: 34px;
  }

  .filter-chips-clear-all {
    font-size: 0.8rem;
    padding: 7px 12px;
    min-height: 34px;
  }

  .filter-chips-count {
    font-size: 0.7rem;
    padding: 5px 8px;
    min-height: 26px;
  }
}

@media (max-width: 480px) {
  .filter-chips-container {
    padding: 8px 10px;
    gap: 5px;
    /* Enable horizontal scrolling on very small screens */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .filter-chips-container::-webkit-scrollbar {
    height: 4px;
  }

  .filter-chips-container::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 2px;
  }

  .filter-chips-container::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 2px;
  }

  .filter-chip {
    font-size: 0.75rem;
    padding: 6px 9px;
    min-height: 32px;
    flex-shrink: 0; /* Prevent chips from shrinking */
  }

  .filter-chips-clear-all {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-height: 32px;
    flex-shrink: 0;
  }
}

/* ================================
   END ACTIVE FILTER CHIPS
   ================================ */

/* Filter Section */
.filter-section,
.advanced-filters {
  background-color: #ffffff;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg); /* Reduced from xl */
  box-shadow: var(--shadow-md);
  border: 2px solid var(--theme-border);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md); /* Reduced from lg for more compact layout */
  align-items: end; /* Align filter actions with other inputs */
}

.filter-group {
  display: flex;
  flex-direction: column;
}

/* Filter Actions Group - Inline with other filters */
.filter-actions-group {
  min-width: 200px; /* Ensure enough space for buttons */
}

.filter-actions-inline {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Bottom filter actions - duplicate buttons at bottom of advanced filters */
.filter-actions-bottom {
  justify-content: center; /* Center buttons on desktop */
}

@media (max-width: 768px) {
  .filter-actions-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .filter-actions-bottom .btn {
    width: 100%; /* Full width buttons on mobile */
  }
}

/* Compact button styles */
.btn-compact {
  padding: var(--spacing-sm) var(--spacing-md); /* Smaller padding */
  font-size: 0.85rem; /* Slightly smaller text */
  min-width: auto; /* Allow buttons to be smaller */
}

.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  white-space: nowrap;
}

/* Remove old filter actions styles that are no longer needed */
.filter-actions {
  display: none; /* Hide old filter actions if any remain */
}

.filter-group label,
.checkbox-group label {
  font-family: var(--font-heading);
  font-size: 0.95rem; /* Increased from 0.85rem */
  font-weight: 700; /* Increased from 600 for more bold */
  color: var(--theme-text-accent); /* Use theme accent for better customization */
  margin-bottom: var(--spacing-sm); /* Increased spacing for better separation */
  display: block;
  text-transform: uppercase; /* Make labels uppercase for more professional look */
  letter-spacing: 0.5px; /* Add slight letter spacing for better readability */
}

input[type='text'],
input[type='number'],
input[type='search'],
select {
  width: 100%;
  padding: 0.65rem var(--spacing-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4a35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-sm) center;
  background-size: 16px;
  border: 2px solid #9ca3af;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  min-height: 44px;
  appearance: none;
  cursor: pointer;
}

/* Remove spinners from number inputs */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type='number'] {
  appearance: textfield; /* Firefox */
}

/* Search input specific styling */
input[type='search'] {
  padding-right: calc(var(--spacing-md) + 24px + var(--spacing-sm)); /* Space for icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e4a35'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 20px 20px;
}

/* Clear button for search (WebKit specific) */
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  appearance: none;
}

/* Remove dropdown arrows from input fields marked with no-dropdown class */
input.no-dropdown::-webkit-outer-spin-button,
input.no-dropdown::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.no-dropdown[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input.no-dropdown[type=text],
input.no-dropdown[type=number] {
  background-image: none !important;
}


input[type='text']:hover,
input[type='number']:hover,
input[type='search']:hover,
select:hover {
  border-color: var(--theme-primary); /* Darker green on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* Slightly more pronounced shadow */
}

input[type='text']:focus,
input[type='number']:focus,
input[type='search']:focus,
select:focus {
  outline: none;
  border-color: var(--theme-primary); /* Darker green on focus */
  box-shadow: 0 0 0 3px rgba(30, 74, 53, 0.25); /* Primary green shadow */
  background-color: #ffffff; /* Ensure background remains white on focus */
}

/* Placeholder styling */
input[type='text']::placeholder,
input[type='number']::placeholder,
input[type='search']::placeholder,
select::placeholder { /* select placeholder is not standard but good to have */
  color: #6b7280;
  opacity: 1;
}

/* Disabled state for inputs */
input[type='text']:disabled,
input[type='number']:disabled,
input[type='search']:disabled,
select:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: not-allowed;
  box-shadow: none;
}

input[type='text']:disabled:hover,
input[type='number']:disabled:hover,
input[type='search']:disabled:hover,
select:disabled:hover {
  border-color: #d1d5db; /* Keep border same as disabled */
}


.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md); /* Align with other inputs if label is above */
  min-height: 44px; /* Ensure minimum touch target height */
}

.checkbox-group input[type='checkbox'] {
  /* Visual checkbox size */
  width: 20px;
  height: 20px;
  accent-color: var(--primary-green);
  cursor: pointer;
  /* Remove problematic padding/margin that caused text to overflow */
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.checkbox-group label {
  margin-bottom: 0; /* Reset margin for inline label */
  font-weight: 600; /* Slightly less bold for checkbox labels to maintain hierarchy */
  color: var(--text-dark); /* Keep darker color for checkbox text */
  text-transform: none; /* Remove uppercase for checkbox labels */
  letter-spacing: normal; /* Remove letter spacing for checkbox labels */
  font-size: 0.9rem; /* Slightly smaller than main labels */
}

.advanced-filters-toggle {
  text-align: center;
  margin: var(--spacing-lg) 0;
}

.advanced-filters-toggle .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

#advanced-toggle-icon {
  transition: transform var(--transition-medium);
}

.advanced-filters-toggle .btn[aria-expanded='true'] #advanced-toggle-icon {
  transform: rotate(180deg);
}

.advanced-filters {
  /* Styles already defined above */
  margin-top: 0; /* Remove top margin for tighter layout */
  margin-bottom: var(--spacing-lg); /* Reduced spacing */
}

.advanced-filters h4 {
  font-size: 1.1rem; /* Slightly smaller */
  color: var(--primary-green);
  margin-bottom: var(--spacing-md); /* Reduced spacing */
  padding-bottom: var(--spacing-xs); /* Reduced spacing */
  border-bottom: 1px solid var(--border-color);
}

/* Enhanced Pricing Features Section */
.enhanced-pricing-section {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--light-green-bg); /* Solid color - no gradient */
  border: 2px solid var(--enhanced-pricing-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.enhanced-pricing-section h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.enhanced-pricing-section .filter-grid {
  margin-bottom: var(--spacing-md);
}

.enhanced-pricing-section .checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.enhanced-pricing-section .checkbox-group input[type="checkbox"] {
  /* Visual checkbox size */
  width: 18px;
  height: 18px;
  accent-color: var(--primary-green);
  cursor: pointer;
  /* Remove problematic padding/margin that caused text to overflow */
  margin: 0;
  padding: 0;
}

.enhanced-pricing-section .checkbox-group label {
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}

.pricing-features-note {
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: center;
}

.pricing-features-note small {
  color: var(--text-medium);
  font-style: italic;
}

/* Tag Filters Section */
.tag-filters-section {
  margin-top: var(--spacing-md); /* Reduced from lg */
}

/* Filter Category Sections (for nested accordions in advanced filters) */
.filter-category-section {
  margin-bottom: var(--spacing-sm); /* Reduced from md for more compact layout */
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.filter-category-header {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  padding: var(--spacing-md) var(--spacing-md); /* Increased for better presence */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff; /* White text for contrast */
  transition: all var(--transition-fast);
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.15);
}

.filter-category-header:hover {
  background: linear-gradient(135deg, var(--secondary-green) 0%, var(--tertiary-green) 100%);
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.25);
  transform: translateY(-1px);
}

.filter-category-content {
  padding: var(--spacing-sm) var(--spacing-md); /* Reduced vertical padding for more compact layout */
  background-color: #ffffff;
  transition: all var(--transition-medium);
}

.filter-category-content[style*="display: none"] {
  display: none !important;
}

.tag-category-section {
  margin-bottom: var(--spacing-sm); /* Reduced from md */
  border: 2px solid #d1d5db;
  border-radius: var(--radius-md);
  overflow: hidden; /* Ensures children conform to border radius */
}

.tag-category-header {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  padding: var(--spacing-md) var(--spacing-lg); /* Increased horizontal padding */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem; /* Slightly larger font */
  color: #ffffff; /* White text for contrast */
  transition: all var(--transition-fast);
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.15);
}

.tag-category-header:hover {
  background: linear-gradient(135deg, var(--secondary-green) 0%, var(--tertiary-green) 100%);
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.25);
  transform: translateY(-1px);
}

.dropdown-arrow {
  transition: transform var(--transition-medium);
  color: #ffffff; /* White text for contrast on green headers */
}

.tag-category-header[aria-expanded='true'] .dropdown-arrow,
.dropdown-arrow.expanded {
  transform: rotate(180deg);
}

.tag-category-items {
  padding: var(--spacing-lg); /* Increased padding for more breathing room */
  display: flex; /* Remove !important to allow inline styles to work */
  flex-wrap: wrap !important; /* Ensure wrapping works */
  gap: var(--spacing-sm); /* Larger gap between buttons for better spacing */
  background-color: #ffffff; /* White background for tags area */
  min-height: auto; /* Remove fixed height to allow natural sizing */
  justify-content: flex-start; /* Align tags to start for better packing */
}

/* Hidden tag categories should be completely hidden */
.tag-category-items[style*="display: none"] {
  display: none !important;
}

.tag-checkbox-label { /* This is the label wrapping the checkbox and text */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs); /* Add small gap for better spacing */
  padding: var(--spacing-sm) var(--spacing-md); /* More generous padding for breathing room */
  background-color: #f8fafc; /* Light gray background for better contrast */
  color: var(--text-dark); /* Dark text for better readability */
  border: 2px solid #9ca3af; /* Gray border for better contrast */
  border-radius: 20px; /* Slightly larger radius for more elegant bubbles */
  font-size: 0.85rem; /* Slightly larger text for better readability */
  font-weight: 600; /* Bolder weight for better readability and contrast */
  cursor: pointer;
  transition: all var(--transition-medium); /* Smoother transition for premium feel */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Subtle shadow for better depth */
  user-select: none; /* Prevent text selection */
  white-space: nowrap; /* Prevent text wrapping */
  line-height: 1.4; /* Better line height for readability */
  min-height: 32px; /* Consistent minimum height */
  width: fit-content; /* Size exactly to content */
}

.tag-checkbox-label:hover {
  background-color: var(--primary-green);
  border-color: var(--theme-primary);
  color: #fff;
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.25); /* Enhanced shadow on hover */
  transform: translateY(-1px); /* Subtle lift effect */
}

.tag-checkbox-label input[type='checkbox'] {
  display: none; /* Hide actual checkbox, style the label */
}

.tag-checkbox-label.checked { /* Add this class via JS when checkbox is checked */
  background-color: var(--primary-green);
  color: #fff;
  border-color: var(--theme-primary);
  font-weight: 700; /* Even bolder when selected for strong visual feedback */
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.4); /* Stronger shadow for depth */
  transform: translateY(-2px); /* More pronounced lift effect when selected */
}

.tag-checkbox-label.checked:hover {
  background-color: var(--theme-primary); /* Theme color on hover */
  box-shadow: 0 6px 16px rgba(30, 74, 53, 0.5); /* Strongest shadow on hover */
  transform: translateY(-2px); /* Maintain lift on hover */
}

.tag-checkbox-label .tag-count {
  font-size: 0.75rem; /* Slightly smaller than main text */
  font-weight: 400; /* Normal weight for count */
  opacity: 0.8; /* Slightly faded for hierarchy */
  margin-left: var(--spacing-xs); /* Small space before count */
}

.tag-checkbox-label.checked .tag-count {
  opacity: 0.9; /* Less faded when selected for better readability */
}

.tag-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}


/* Loading Spinner & No Results */
.loading,
.no-results {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--text-light);
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--border-color);
  border-top-color: var(--secondary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md) auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.no-results-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  color: var(--secondary-green);
}

.no-results h3 {
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm);
}

/* Pagination */
.pagination-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--spacing-sm) / 2) 0; /* Padding remains for internal content spacing */
  margin: var(--spacing-sm) 0 calc(var(--spacing-sm) / 2) 0; /* Top margin set to var(--spacing-lg), bottom margin remains calc(var(--spacing-sm) / 2) */
  border-top: 2px solid #d1d5db;
  gap: var(--spacing-sm); /* Add gap for proper spacing when items wrap */
}

.pagination-info {
  font-size: 0.9rem;
  color: var(--text-light);
  margin: 0; /* Remove margin to fix alignment */
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md); /* Increased gap for better spacing between touch targets */
}

.pagination-btn,
.page-number {
  font-family: var(--font-heading);
  padding: var(--spacing-sm) var(--spacing-md); /* Increased padding for better touch targets */
  min-width: 48px; /* Meets iOS 44px minimum recommendation */
  min-height: 44px; /* Minimum touch target height */
  text-align: center;
  border: 2px solid #d1d5db;
  background-color: #ffffff;
  color: var(--text-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover,
.page-number:hover {
  background-color: var(--primary-green);
  border-color: var(--theme-primary);
  color: #ffffff;
}

.pagination-btn:disabled {
  background-color: var(--out-of-stock-bg);
  color: var(--out-of-stock-text);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.page-number.active {
  background-color: var(--primary-green);
  color: #fff;
  border-color: var(--theme-primary);
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.3);
}

.page-ellipsis {
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-light);
}

/* Mobile pagination optimization - simplified layout */
@media (max-width: 768px) {
  .pagination-container {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
  }

  .pagination-info {
    text-align: center;
    order: -1; /* Move info to top on mobile */
    font-size: 0.85rem;
    padding: var(--spacing-xs) 0;
  }

  .pagination-controls {
    justify-content: center;
    gap: var(--spacing-sm);
  }

  /* Hide individual page number buttons on mobile - too many buttons */
  .page-number,
  .page-ellipsis {
    display: none;
  }

  /* Enlarge prev/next buttons for mobile touch */
  .pagination-btn {
    min-width: 56px; /* Larger touch target */
    min-height: 48px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
  }

  /* Add spacing between prev/next buttons */
  .pagination-btn + .pagination-btn {
    margin-left: var(--spacing-md);
  }
}

/* Even smaller screens - ultra compact */
@media (max-width: 480px) {
  .pagination-info {
    font-size: 0.8rem;
  }

  .pagination-btn {
    min-width: 52px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.95rem;
  }

  .pagination-btn + .pagination-btn {
    margin-left: var(--spacing-sm);
  }
}

/* Product Grid - Row-based Masonry layout with 3 products per row */
.product-grid {
  /* Primary: Use CSS Grid for proper left-to-right, top-to-bottom sorting display */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns per row */
  grid-auto-flow: row; /* Fill horizontally first (left to right), then next row */
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  width: 100%;
  margin: 0 auto;
  align-items: start; /* Align cards to top of their grid areas */
  contain: layout style;
}

/* Fallback for consistent grid behavior across all browsers */
@supports not (grid-auto-flow: row) {
  .product-grid {
    /* Use standard CSS Grid as fallback */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    width: 100%;
    margin: 0 auto;
    align-items: start;
  }
  
  .product-grid .product-card {
    /* Ensure cards maintain their natural height */
    display: block;
    width: 100%;
    align-self: start;
    margin-bottom: 0;
  }
}

/* Individual product cards in grid layout */
.product-grid .product-card {
  /* For standard grid layout */
  display: block;
  width: 100%;
  align-self: start; /* Prevent cards from stretching to fill grid area height */
  transition: all var(--transition-medium);
  contain: layout style;
  transform: translateZ(0);
}



/* Responsive grid: adjust column count based on viewport */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns per row on smaller screens */
  }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
  }
  
  .product-grid .product-card {
    display: block;
    width: auto;
    margin-bottom: var(--spacing-md);
  }
}

/* Product grid layout complete */

/* Product Card - Modern Cannabis Theme Redesign with Unified Flow */
.product-card {
  background: #ffffff; /* Solid white - no gradient */
  border: 2px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-medium);
  position: relative;
  backdrop-filter: blur(2px);
  /* Unified gradient background that flows from header to content */
}

/* Product card darkening effect when popup is active */
.product-card.popup-active {
  position: relative;
}

.product-card.popup-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  border-radius: 16px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46, 204, 113, 0.02); /* Solid light green overlay - no gradient */
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition-medium);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--secondary-green);
  background: #ffffff; /* Solid white - no gradient */
}

.product-card:hover::before {
  opacity: 1.5;
  background: rgba(46, 204, 113, 0.04); /* Solid light green overlay - no gradient */
}

.product-card.out-of-stock {
  background: var(--out-of-stock-bg);
  opacity: 0.8;
  border-color: var(--border-color);
  position: relative;
}

.product-card.out-of-stock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(100, 116, 139, 0.05); /* Solid light gray - no gradient */;
  pointer-events: none;
  z-index: 1;
}

.product-card.out-of-stock .out-of-stock-badge {
  filter: none;
  opacity: 1;
  background: var(--error-red);
  color: #ffffff;
  z-index: 2;
  font-weight: 700;
}

/* Section divider for visual separation between card sections */
.section-divider {
  height: 1px;
  background: var(--border-color); /* Solid color - no gradient */
  margin: var(--spacing-md) var(--spacing-lg);
  opacity: 0.6;
}

/* Floating Motivational Text for Whitespace Gaps */
.whitespace-motivational {
  position: absolute;
  background: rgba(248, 252, 248, 0.95);
  border: 2px dashed rgba(30, 74, 53, 0.5);
  border-radius: 10px;
  padding: var(--spacing-md);
  text-align: center;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.2);
  transition: all var(--transition-medium);
}

.whitespace-motivational:hover {
  border-color: rgba(30, 74, 53, 0.7);
  background: rgba(248, 252, 248, 1);
  box-shadow: 0 6px 16px rgba(30, 74, 53, 0.25);
  transform: translateY(-1px);
}

.whitespace-text {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(30, 74, 53, 0.95);
  font-style: italic;
  letter-spacing: 0.3px;
  line-height: 1.4;
  text-align: center;
  padding: 0 var(--spacing-xs);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Clickable vendor name styling */
.clickable-vendor {
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  pointer-events: auto;
  position: relative;
  z-index: 15;
}

.clickable-vendor:hover {
  background: rgba(30, 74, 53, 0.1);
  color: var(--primary-green);
  text-decoration: underline;
  transform: translateY(-1px);
}

.clickable-vendor:active {
  transform: translateY(0);
  background: rgba(30, 74, 53, 0.15);
}

/* Vendor name link (links to vendor page) */
.vendor-name-link {
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  pointer-events: auto;
  position: relative;
  z-index: 15;
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.vendor-name-link:hover {
  background: rgba(30, 74, 53, 0.1);
  color: var(--primary-green);
  text-decoration: underline;
  transform: translateY(-1px);
}

.vendor-name-link:active {
  transform: translateY(0);
  background: rgba(30, 74, 53, 0.15);
}

/* Ensure product grid allows absolute positioning */
.product-grid {
  position: relative;
}

/* Product Card Sub-Elements - Modern Badge System */
.product-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-badge {
  padding: 6px 12px;
  font-size: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 20px;
  color: #ffffff;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Enhanced Badge System with Better Contrast */
.badge-lab-tested { 
  background: var(--accent-blue);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.badge-organic { 
  background: var(--success-green);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.badge-premium { 
  background: var(--accent-gold);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.badge-new { 
  background: var(--error-red);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  animation: new-badge-pulse 2s ease-in-out infinite;
}

@keyframes new-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(1deg); }
}


/* Product Header - Prominent Image Hero Design with Seamless Flow */
.product-header {
  display: flex;
  flex-direction: column; /* Stack image above info for maximum prominence */
  gap: 0; /* No gap for seamless design */
  padding: 0; /* Remove padding to maximize image space */
  align-items: stretch; /* Stretch to full width */
  justify-content: flex-start;
  position: relative;
  background: transparent; /* Clean background */
  overflow: visible; /* Allow content to flow */
  z-index: 2; /* Above card background gradient */
}

.product-image-container {
  width: 100%; /* Full width for maximum prominence */
  height: 240px; /* Much taller for prominent display */
  border-radius: 16px 16px 0 0; /* Rounded top corners only for seamless card integration */
  overflow: hidden;
  background: var(--light-green-bg); /* Solid color - no gradient */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Remove border for clean look */
  position: relative;
  transition: all var(--transition-medium);
  box-shadow: 
    inset 0 -3px 12px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadows for depth */
  margin: 0;
  flex-shrink: 0; /* Prevent shrinking */
}

.product-image-container:hover {
  box-shadow: 
    inset 0 -4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.15); /* Enhanced hover shadow */
  transform: none; /* Remove transform to prevent layout shift */
}

/* Prominent Product Image */
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-medium);
  cursor: pointer;
  filter: brightness(1.02) contrast(1.05) saturate(1.05); /* Enhanced image quality */
}

.product-image:hover {
  transform: scale(1.08); /* Larger hover effect for prominence */
  filter: brightness(1.05) contrast(1.08) saturate(1.1);
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2.2rem;
  color: var(--secondary-green);
}

.product-image-placeholder span {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-medium);
  margin-top: 6px;
  font-weight: 500;
}

/* Product Info - Seamlessly Blended with Header */
.product-info {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: transparent; /* Remove solid background for seamless flow */
  border: none; /* Remove borders for unified look */
  border-radius: 0; /* Remove border radius for seamless connection */
  padding: 16px 16px 20px 16px; /* Reduced top padding for tighter connection */
  position: relative;
  z-index: 1; /* Ensure it's below price breakdown popup */
  margin: 0;
  box-shadow: none; /* Remove separate shadow */
  transition: all var(--transition-medium);
  min-height: 100px; /* Slightly reduced for compactness */
  overflow: hidden;
  gap: 12px;
  z-index: 2; /* Above card background gradient */
  /* Dark green stylized gradient line separator at bottom of header */
  border-bottom: 3px solid var(--theme-secondary); /* Solid border - no gradient */
}

.product-info:hover {
  transform: none; /* Remove separate transform */
  border-color: transparent;
  box-shadow: none; /* Remove separate shadow */
  background: transparent; /* Keep transparent background */
}

/* Removed gradient line separator - moved to cannabinoid content section */

/* Decorative corner elements */
.product-info::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: rgba(46, 204, 113, 0.05); /* Solid light green - no gradient */
  border-radius: 50%;
  pointer-events: none;
  transition: all var(--transition-fast);
}

/* Additional decorative elements for enhanced visual interest */
.product-info:hover::after {
  transform: scale(1.2);
  background: rgba(46, 204, 113, 0.08); /* Solid light green - no gradient */
}

/* Subtle side accent lines */
.product-info:hover::before {
  width: 80px;
  opacity: 1;
}

/* Product Title - Only for non-overlay version (if any) */
.product-info .product-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.3;
  word-wrap: break-word;
  hyphens: auto;
  text-align: center;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  letter-spacing: -0.025em;
  transition: all var(--transition-fast);
}

/* Removed hover effect for product title */

.product-info .product-vendor {
  font-size: 0.8rem;
  color: var(--text-medium);
  margin-bottom: 10px;
  font-weight: 600;
  background: var(--light-green-bg);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.product-card:hover .product-info .product-vendor {
  background: rgba(46, 204, 113, 0.1);
  border-color: var(--secondary-green);
  transform: translateY(-1px);
}

/* Product Pricing - Enhanced hierarchy and visual appeal */
/* Primary field - displays price or metric depending on sort */
.primary-field {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--theme-text-accent);
  margin: 0;
  white-space: nowrap;
  text-shadow: none;
  transition: all var(--transition-fast);
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.product-card:hover .primary-field {
  color: var(--theme-secondary);
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.25);
  transform: scale(1.03);
}

/* Secondary field - displays metric or price depending on sort */
.secondary-field {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-medium);
  background: rgba(46, 204, 113, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(46, 204, 113, 0.2);
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(46, 204, 113, 0.08);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.product-card:hover .secondary-field {
  background: rgba(46, 204, 113, 0.12);
  border-color: var(--theme-primary);
  color: var(--primary-green);
  transform: translateY(-0.5px);
  box-shadow: 0 1px 4px rgba(46, 204, 113, 0.15);
}

/* Legacy support - map old classes to new ones */
.product-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--theme-text-accent);
  margin: 0;
  white-space: nowrap;
  text-shadow: none;
  transition: all var(--transition-fast);
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.product-card:hover .product-price {
  color: var(--theme-secondary);
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.25);
  transform: scale(1.03);
}

/* Price per unit - Now styled as subtext within product-price */
.product-price .product-price-per-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-medium);
  background: rgba(46, 204, 113, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(46, 204, 113, 0.2);
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(46, 204, 113, 0.08);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.product-card:hover .product-price .product-price-per-unit {
  background: rgba(46, 204, 113, 0.12);
  border-color: var(--theme-primary);
  color: var(--primary-green);
  transform: translateY(-0.5px);
  box-shadow: 0 1px 4px rgba(46, 204, 113, 0.15);
}

/* Legacy standalone price-per-unit (for backward compatibility) */
.product-price-per-unit:not(.product-price .product-price-per-unit) {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-green);
  background: rgba(46, 204, 113, 0.08);
  padding: 10px 16px;
  border-radius: 18px;
  border: 2px solid rgba(46, 204, 113, 0.25);
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(46, 204, 113, 0.15);
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.product-card:hover .product-price-per-unit:not(.product-price .product-price-per-unit) {
  background: rgba(46, 204, 113, 0.15);
  border-color: var(--theme-primary);
  color: var(--secondary-green);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.25);
}

/* View Product Text - Compact call-to-action styling */
.view-product-text {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-medium);
  text-align: center;
  margin: 0;
  padding: 2px 8px;
  background: rgba(46, 204, 113, 0.05);
  border: 1px solid rgba(46, 204, 113, 0.15);
  border-radius: 8px;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}

.view-product-text:hover {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.25);
  color: var(--primary-green);
  transform: translateY(-1px);
}

/* iOS Safari Touch Compatibility - Critical Fix for Mobile */
/* Apply to ALL clickable div/span elements that use JavaScript click handlers */
.view-product-text,
.view-product-text.enhanced,
.clickable-vendor,
.product-tag,
.product-image,
.product-title-overlay .product-vendor .vendor-link-icon,
.vendor-link-icon,
.tag-category-header,
.vendor-filter-header,
.attribution-dismiss,
.mobile-menu-toggle,
.price-info-icon {
  -webkit-tap-highlight-color: rgba(46, 204, 113, 0.2);
  touch-action: manipulation;
  -webkit-user-select: none;
}

/* Mobile-specific: Use :active instead of :hover for better touch response */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices, use active state instead */
  .view-product-text:hover {
    background: rgba(46, 204, 113, 0.05);
    border-color: rgba(46, 204, 113, 0.15);
    color: var(--text-medium);
    transform: none;
  }

  .view-product-text:active {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.25);
    color: var(--primary-green);
    transform: translateY(-1px);
  }
}

/* Remove old product-info clickable styling since only "View Product" text is now clickable */

/* Product Type Overlay - Positioned in bottom right corner of title overlay */
.product-type-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--theme-primary);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 3;
  white-space: nowrap;
  /* Ensure it stays in corner even with long text */
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Removed hover effect for product type overlay */

/* Legacy product-type styling - keep for backwards compatibility but hide */
.product-type {
  display: none; /* Hide the old product type styling */
}

.product-details {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  flex-grow: 1;
  background: #ffffff;
}

.product-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 2px solid var(--border-color);
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--light-green-bg);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  transition: all var(--transition-medium);
  text-align: center;
}

.detail-item:hover {
  border-color: var(--secondary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.detail-icon {
  font-size: 1.3rem;
  margin-bottom: var(--spacing-sm);
  color: var(--secondary-green);
}

.detail-icon:empty {
  display: none;
}

.detail-label {
  font-size: 0.75rem;
  color: var(--text-medium);
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.detail-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* Strain Type Color-Coding - ensure these classes are applied via JS */
.detail-item.sativa .detail-value,
.detail-value.sativa {
  color: var(--accent-orange);
  font-weight: 700;
}

.detail-item.indica .detail-value,
.detail-value.indica {
  color: var(--accent-purple);
  font-weight: 700;
}

.detail-item.hybrid .detail-value,
.detail-value.hybrid {
  color: var(--secondary-green);
  font-weight: 700;
}


/* Cannabinoid Content Section - Seamlessly Blended with Dark Green Gradient Separator */
.cannabinoid-content-section,
.edible-package-info-section {
  background: transparent; /* Remove solid background for seamless flow */
  border: none; /* Remove borders for unified look */
  position: relative;
  z-index: 1; /* Ensure it's below price breakdown popup */
  border-radius: 0; /* Remove border radius for seamless connection */
  padding: 8px 20px; /* Reduced padding for tighter integration */
  margin: 0; /* Remove margins for seamless connection */
  box-shadow: none; /* Remove separate shadows */
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  transition: all var(--transition-medium);
  z-index: 2; /* Above card background gradient */
}

/* Dark green stylized gradient line separator - moved to header section */

/* Removed blue bar from cannabinoid and terpene sections */

.content-section-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  gap: 8px;
  text-align: left;
  width: 100%;
}

.content-section-title .section-icon {
  font-size: 1.1rem;
  color: var(--secondary-green);
}

.content-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 0;
  width: 100%;
  padding: 0;
  align-items: start;
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 16px; /* Slightly reduced for more subtle appearance */
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
  height: 36px;
  flex-direction: column;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  background-color: rgba(248, 252, 248, 0.7); /* Semi-transparent for blending */
  border: 1px solid rgb(0, 0, 0); /* Subtle border */
  color: var(--text-dark);
  backdrop-filter: blur(1px); /* Subtle blur effect */
}

.content-item-name {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1;
}

.content-item-value {
  color: var(--secondary-green);
  font-weight: 700;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1;
}

/* Primary cannabinoid styling - enhanced green theme */
.content-item.primary-cannabinoid {
  background-color: var(--primary-green);
  color: #ffffff;
  border: 2px solid var(--theme-border);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.content-item.primary-cannabinoid .content-item-name,
.content-item.primary-cannabinoid .content-item-value {
  color: #ffffff;
  font-weight: 700;
}

/* Servings info styling - enhanced blue theme */
.content-item.servings-info {
  background-color: var(--accent-blue);
  border: 2px solid var(--accent-blue);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.content-item.servings-info .content-item-name,
.content-item.servings-info .content-item-value {
  color: #ffffff;
  font-weight: 600;
}

/* Price per mg info styling - enhanced gold theme */
.content-item.price-per-mg-info {
  background-color: var(--accent-gold);
  border: 2px solid var(--accent-gold);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.content-item.price-per-mg-info .content-item-name,
.content-item.price-per-mg-info .content-item-value {
  color: #ffffff;
  font-weight: 600;
}

/* Dominant terpene styling - enhanced orange theme */
.content-item.dominant-terpene {
  background-color: var(--accent-orange);
  color: #ffffff;
  border: 2px solid var(--accent-orange);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.content-item.dominant-terpene .content-item-name,
.content-item.dominant-terpene .content-item-value {
  color: #ffffff;
  font-weight: 700;
}

/* Empty state for content sections */
.content-section-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
  font-style: italic;
  background-color: var(--light-green-bg);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-color);
}

/* More indicator for cannabinoid content */
.content-item.more-indicator {
  background-color: var(--light-green-bg);
  border: 1px solid #000000;
  color: var(--text-dark);
  cursor: help;
  position: relative;
  height: 36px;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.content-item.more-indicator:hover {
  background-color: var(--secondary-green);
  color: #ffffff;
  border-color: var(--secondary-green);
}

.more-indicator-icon {
  font-size: 1.2rem; /* Increased from 1rem */
  line-height: 1;
  font-weight: bold;
}

/* Mobile-friendly more indicator icon */
@media (max-width: 768px) {
  .more-indicator-icon {
    font-size: 1.4rem; /* Even larger on mobile */
  }

  .content-item.more-indicator {
    height: 32px; /* Match content-item height on mobile */
    min-width: 40px; /* Ensure square touch target */
    touch-action: manipulation; /* Optimize for touch */
  }
}

/* Inline tooltip for more indicator - hidden by default, used only as content source */
.more-indicator-tooltip {
  /* Hide inline tooltips - content is read by JavaScript and shown in global tooltip */
  display: none !important;
}

/* Global tooltip for more indicator - simple centered popup */
.more-indicator-tooltip-global {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: normal;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  text-align: left;
}

.more-indicator-tooltip-global::after {
  /* Hide arrow for simple popup design */
  display: none;
}

.more-indicator-tooltip-global.show {
  opacity: 1;
}

.tooltip-cannabinoid-item {
  display: block;
  margin: 3px 0; /* Increased margin for better spacing */
  white-space: nowrap;
  line-height: 1.4; /* Better line height for readability */
}

/* Mobile adjustments for cannabinoid tooltip */
@media (max-width: 768px) {
  .tooltip-cannabinoid-item {
    margin: 4px 0;
    font-size: 0.9rem;
  }
}

/* ============================
   EDIBLES PACKAGE INFO ROW - Enhanced Visual Separation
   ============================ */

/* Container for the edibles package info row */
.edibles-package-row {
  background: #ffffff; /* Solid white - no gradient */
  border: 3px solid var(--accent-blue);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 20px 20px 8px 20px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  transition: all var(--transition-medium);
  /* Add visual separator from cannabinoid section above */
  border-top: 4px solid var(--accent-blue);
}

/* Add distinctive header for edible package info */
.edibles-package-row::before {
  content: '📦 Package Information';
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  text-align: center;
}

/* Removed blue bar from edibles package section */

/* Grid layout for package info items */
.package-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

/* Individual package info items - Enhanced distinctive styling */
.package-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f8fafc; /* Solid light gray - no gradient */
  border: 2px solid var(--accent-blue);
  text-align: center;
  transition: all var(--transition-fast);
  min-height: 48px;
  cursor: help;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.package-info-item:hover {
  background: var(--accent-blue); /* Solid blue - no gradient */
  border-color: var(--accent-blue);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Package info labels - Enhanced styling */
.package-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  line-height: 1;
}

/* Package info values - Enhanced styling */
.package-info-value {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
  word-break: break-word;
}

/* Hover state color changes */
.package-info-item:hover .package-info-label,
.package-info-item:hover .package-info-value {
  color: #ffffff;
}

/* Specific styling for servings info - Enhanced blue theme */
.package-info-item[title*="Servings"] {
  background: rgba(37, 99, 235, 0.08); /* Solid light blue - no gradient */
  border-color: var(--accent-blue);
  border-width: 3px;
}

.package-info-item[title*="Servings"]:hover {
  background: var(--accent-blue); /* Solid blue - no gradient */
  border-color: var(--accent-blue);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

/* Specific styling for price per mg info - Enhanced gold theme */
.package-info-item[title*="Price per mg"] {
  background: rgba(217, 119, 6, 0.08); /* Solid light gold - no gradient */
  border-color: var(--accent-gold);
  border-width: 3px;
}

.package-info-item[title*="Price per mg"]:hover {
  background: var(--accent-gold); /* Solid gold - no gradient */
  border-color: var(--accent-gold);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3);
}

/* ============================
   END EDIBLES PACKAGE INFO
   ============================ */

/* Accessibility Improvements */

/* Focus styles for keyboard navigation */
.category-tab:focus,
.btn:focus,
.pagination-btn:focus,
.page-number:focus,
input:focus,
select:focus,
.tag-checkbox-label:focus-within { /* For labels wrapping inputs */
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(52 152 219 / 30%); /* accent-blue with opacity */
}

/* Ensure hidden checkboxes still allow focus on their labels */
/* Note: Custom focus styling can be added here if needed */

/* Utility Classes (Optional, but good practice) */
.sr-only { /* Screen-reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fix alignment for checkbox in advanced filters */
.advanced-filters .checkbox-group {
  padding-top: 0; /* Remove top padding to align with other inputs */
  margin-top: var(--spacing-md); /* Add margin instead to maintain spacing from label */
}

/* Style the select options for better readability */
select option {
  background-color: var(--card-bg);
  color: var(--text-dark);
  padding: var(--spacing-sm);
}

select option:checked {
  background-color: var(--secondary-green);
  color: #fff;
}

/* Ensure all filter inputs have consistent height */
.advanced-filters .filter-group input[type='text'],
.advanced-filters .filter-group input[type='number'],
.advanced-filters .filter-group select,
.advanced-filters .checkbox-group {
  min-height: 44px; /* Consistent height for all filter elements */
}

/* Style the checkbox to match the green theme */
.advanced-filters .checkbox-group input[type='checkbox'] {
  /* Visual checkbox size */
  width: 20px;
  height: 20px;
  accent-color: var(--primary-green);
  cursor: pointer;
  /* Remove problematic padding/margin that caused text to overflow */
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.advanced-filters .checkbox-group label {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  line-height: 1.4; /* Better line height for alignment */
}

/* Effects Section - Seamlessly Blended */
.effects-section {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  margin-top: 0; /* Remove margin for seamless connection */
  border-top: none; /* Remove border for unified look */
  background: transparent; /* Remove solid background */
  z-index: 2; /* Above card background gradient */
}

.effects-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.effects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.effect-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--accent-purple);
  color: #ffffff;
  border: 2px solid var(--accent-purple);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.effect-tag:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-purple);
}

/* Tags Spacer - Centered dark green diamonds separator */
.tags-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  margin: 0;
  gap: 8px;
}

.tags-spacer .diamond {
  color: var(--primary-green);
  font-size: 0.6rem;
  opacity: 0.7;
}



/* Package Info Spacer - Horizontal circles separator for edible sections */
.package-info-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  margin: 0;
  gap: 6px;
}

.package-info-spacer .circle {
  color: #1e4a35;
  font-size: 0.8rem;
  opacity: 0.6;
  transition: all var(--transition-fast);
  animation: circle-fade-in 0.6s ease-out forwards;
}


/* Product Tags Section - Redesigned with distinct visual styling */
.product-tags-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 20px;
  position: relative;
  transition: all var(--transition-medium);
  z-index: 1; /* Lowered to be below price breakdown popup */
}

.tags-header {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  position: relative;
  z-index: 1; /* Ensure it's below price breakdown popup */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Bubble styling for tags header */
  background: var(--theme-primary); /* Solid color - no gradient */
  border: 1px solid var(--theme-primary);
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(30, 74, 53, 0.25);
  transition: all var(--transition-fast);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 75px; /* Fixed minimum height for consistent spacing */
  max-height: 75px; /* Fixed maximum height */
  overflow: hidden; /* Hide overflow if too many tags */
  position: relative;
}

.product-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--light-green-bg); /* Solid color - no gradient */
  border: 2px solid var(--theme-secondary);
  border-radius: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-green);
  position: relative;
  z-index: 1; /* Ensure tags are below price breakdown popup */
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  opacity: 1; /* Removed fade effect - all tags at full opacity */
  animation: tag-fade-in calc(0.1s + (var(--tag-index, 0) * 0.05s)) ease-out forwards;
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.15);
}

@keyframes tag-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-tag:hover {
  background: var(--theme-button-bg); /* Solid button color */
  color: #ffffff;
  border-color: var(--theme-primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.3);
}

/* Active/Selected product tag styling - matches tag filter checked state */
.product-tag.active {
  background: var(--theme-active-bg);
  color: #fff;
  border-color: var(--theme-active-bg);
  font-weight: 700;
  box-shadow: 0 3px 8px rgb(39 92 64 / 40%);
  transform: translateY(-2px);
  cursor: pointer;
}

.product-tag.active:hover {
  background-color: var(--theme-primary); /* Theme color on hover */
  box-shadow: 0 4px 12px rgb(39 92 64 / 50%);
  transform: translateY(-2px) scale(1.05);
}

/* Make product tags clickable */
.product-tag {
  cursor: pointer;
  user-select: none;
}

/* Additional hover state for inactive tags to show they're clickable */
.product-tag:not(.active):hover {
  background: var(--theme-button-bg); /* Solid button color */
  color: #ffffff;
  border-color: var(--theme-primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(30, 74, 53, 0.3);
}

/* Debug section styling - Unified with card flow */
.debug-section {
  margin: 8px 20px  16px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.debug-copy-btn {
  background: #6c757d; /* Solid gray - no gradient */
 
 
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.debug-copy-btn:hover {
  opacity: 1;
  background: #5a6268; /* Solid dark gray - no gradient */
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.debug-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hide debug button by default, show on card hover */
.product-card .debug-section {
  opacity: 0.7;
  transition: all 0.2s ease;
}

.product-card:hover .debug-section {
  opacity: 1;
}

/* Enhanced Pricing Product Cards */
.product-card.enhanced-pricing {
  background: var(--enhanced-pricing-bg); /* Solid color - no gradient */
  border: 2px solid var(--enhanced-pricing-border);
  position: relative;
}

.product-card.enhanced-pricing::before {
  background: rgba(var(--primary-green-rgb), 0.04); /* Solid light green overlay - no gradient */
}

.product-card.enhanced-pricing:hover {
  border-color: var(--secondary-green);
  box-shadow: 0 20px 25px rgba(var(--primary-green-rgb), 0.12), 0 10px 10px rgba(var(--primary-green-rgb), 0.06);
}

/* Enhanced Pricing Badge - Removed */

/* Enhanced Vendor Display */
.product-vendor.enhanced {
  background: var(--light-green-bg); /* Match original vendor background */
  border: 1px solid var(--border-color); /* Use standard border color */
  padding: 4px 10px; /* Match original padding */
  border-radius: 20px; /* Match original border radius */
  display: flex;
  align-items: center;
  gap: 6px;
}

.enhanced-features-indicator {
  color: var(--accent-gold);
  font-size: 0.9rem;
  animation: twinkle 1.5s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Enhanced Product Info Section */
.product-info.enhanced {
  background: transparent; /* Remove solid background for seamless flow */
  border: none; /* Remove borders for unified look */
  border-radius: 0; /* Remove border radius for seamless connection */
  padding: 4px 16px 8px 16px; /* Further reduced from 8px 16px 12px 16px */
  margin-top: 0; /* Remove margin for seamless connection */
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Original Price Section */
.original-price-section {
  margin-bottom: 2px; /* Reduced from 4px */
}

.original-price-label {
  font-size: 0.7rem;
  color: var(--text-light);
  font-weight: 500;
  margin-bottom: 1px; /* Reduced from 2px */
  line-height: 1.2; /* Tighter line height */
}

.original-price.crossed-out {
  font-size: 0.9rem;
  color: var(--text-light);
  text-decoration: line-through;
  text-decoration-color: var(--error-red);
  text-decoration-thickness: 2px;
  line-height: 1.2; /* Tighter line height */
}

/* Modified Price Section */
.modified-price-section {
  margin-bottom: 4px; /* Reduced from 8px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.price-label-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px; /* Reduced from 4px */
  overflow: visible !important;
  z-index: 100;
}

.modified-price-label {
  font-size: 0.8rem;
  color: var(--primary-green);
  font-weight: 600;
  line-height: 1.2; /* Tighter line height */
}


.price-info-icon {
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  width: 20px; /* Increased from 16px */
  height: 20px; /* Increased from 16px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem; /* Increased from 0.7rem */
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 2;
  margin-left: 6px;
}

.price-info-icon:hover {
  background: var(--secondary-green);
  transform: scale(1.15); /* Slightly more scale on hover */
}

/* Mobile-friendly price info icon */
@media (max-width: 768px) {
  .price-info-icon {
    width: 24px; /* Even larger on mobile */
    height: 24px;
    font-size: 0.9rem;
    margin-left: 8px;
    touch-action: manipulation; /* Optimize for touch */
  }
}

.product-price.enhanced {
  color: var(--primary-green);
  font-weight: 700;
  font-size: 1.3rem;
  text-shadow: 0 1px 2px rgba(var(--primary-green-rgb), 0.15);
}

.product-price-per-unit.enhanced {
  background: var(--light-green-bg); /* Match original background */
  border: 1px solid var(--border-color); /* Use standard border color */
  color: var(--text-medium); /* Match original text color */
  font-weight: 600;
}

/* Sort-aware metric display styles */
.product-price.metric-primary {
  /* When metric (PPG/PPS/MGPD) is shown as primary */
  color: var(--primary-green);
  font-size: 1.4rem;
  font-weight: 800;
}

.product-price-per-unit.price-secondary {
  /* When price is shown as secondary during metric sorts */
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-medium);
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Hover effects for sort-aware display */
.product-card:hover .product-price.metric-primary {
  color: var(--secondary-green);
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.25);
}

.product-card:hover .product-price-per-unit.price-secondary {
  background: rgba(46, 204, 113, 0.12);
  border-color: var(--theme-primary);
}

/* Savings Indicator - Removed */

/* Price Breakdown Floating Popup */
.price-breakdown-popup {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 999999; /* Increased to ensure it's above all product card elements */
  min-width: 240px;
  max-width: 320px;
  width: max-content;
  white-space: normal;
  word-wrap: break-word;
  transition: all var(--transition-fast);
}

.price-breakdown-popup[style="display: none;"] {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
  visibility: hidden;
}

.price-breakdown-popup[style="display: block;"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Ensure the popup appears above other content */
.product-card.enhanced-pricing {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.product-card.enhanced-pricing:hover {
  z-index: 100;
  overflow: visible !important;
}

/* Force all child elements to have visible overflow */
.product-card.enhanced-pricing .cannabinoid-content-section,
.product-card.enhanced-pricing .vendor-offer-section,
.product-card.enhanced-pricing .product-tags-section,
.product-card.enhanced-pricing .product-header,
.product-card.enhanced-pricing .section-divider {
  overflow: visible !important;
}

/* Ensure product grid doesn't clip popups */
.product-grid {
  overflow: visible !important;
}

/* Debug styles for popup visibility */
.price-breakdown-popup[style="display: block;"] {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  background: white !important;
  border: 3px solid var(--primary-green) !important;
}

/* Note: Darkening effect now handled by JavaScript-created backdrop element */

/* Shipping note for conditional free shipping */
.shipping-note {
  font-size: 0.7rem;
  color: var(--text-medium);
  font-style: italic;
  margin-top: 4px;
  text-align: center;
  padding: 0 8px;
}

.summation-line.conditional .line-amount.free {
  color: var(--success-green);
  font-weight: 600;
}

.summation-line.conditional .line-amount.split {
  color: var(--accent-orange);
  font-weight: 600;
}

.breakdown-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breakdown-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.breakdown-item.discount {
  background: var(--discount-bg);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.breakdown-item.shipping {
  background: var(--shipping-bg);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.breakdown-icon {
  margin-right: 6px;
}

.breakdown-description {
  flex: 1;
  color: var(--text-dark);
  font-weight: 500;
}

.breakdown-amount {
  font-weight: 600;
}

.breakdown-amount.savings {
  color: var(--discount-green);
}

.breakdown-amount.free {
  color: var(--discount-green);
}

.breakdown-code {
  font-size: 0.7rem;
  color: var(--text-medium);
  font-style: italic;
  margin-top: 2px;
  padding-left: 24px;
}

.breakdown-notes {
  font-size: 0.7rem;
  color: var(--text-medium);
  margin-top: 2px;
  padding-left: 0;
  text-align: center;
  font-style: italic;
}

/* Summation Format Styling */
.breakdown-summation {
  padding: 8px 0;
  font-family: monospace, 'Courier New', courier;
}

.summation-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 8px;
  margin-bottom: 2px;
  font-size: 0.9rem;
  gap: 20px;
  min-height: 1.2em;
}

.summation-line .line-description {
  flex: 1;
  text-align: left;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}

.summation-line .line-amount {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.summation-line.original .line-amount {
  color: var(--text-dark);
  font-weight: 600;
}

.summation-line.shipping {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
}

.summation-line.shipping .line-description {
  flex: 1;
  text-align: left;
  color: var(--text-dark);
}

.summation-line.shipping .line-amount {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.summation-line.shipping .line-amount.free {
  color: var(--primary-green);
}

.summation-line.shipping .line-amount.positive {
  color: var(--text-dark);
}

.summation-line.discount {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
}

.summation-line.discount .line-description {
  flex: 1;
  text-align: left;
  color: var(--text-dark);
}

.summation-line.discount .line-amount {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.summation-line.discount .line-amount.negative {
  color: #d32f2f;
}


.summation-divider {
  height: 1px;
  background: var(--text-dark);
  margin: 8px 8px 6px 8px;
  border: none;
}

.summation-line.total {
  padding: 6px 8px;
  margin-top: 4px;
  background: rgba(var(--primary-green-rgb), 0.1);
  border-radius: 4px;
}

.summation-line.total .line-description {
  color: var(--primary-green);
}

.summation-line.total .total-amount {
  color: var(--primary-green);
  font-size: 1.1em;
}

/* Notes Section Below Total */
.breakdown-notes-section {
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
  padding-top: 8px;
}

.breakdown-note {
  font-size: 0.75rem;
  color: var(--text-medium);
  text-align: center;
  margin: 4px 0;
  font-style: italic;
  line-height: 1.3;
}

.breakdown-note.discount-note {
  color: var(--primary-green);
  font-weight: 500;
}

/* Legacy styles for backward compatibility */
.breakdown-divider {
  height: 1px;
  background: var(--border-color); /* Solid color - no gradient */
  margin: 8px 0;
}

.breakdown-item.original .breakdown-amount {
  color: var(--text-medium);
  font-weight: 500;
}

.breakdown-item.final {
  margin-top: 4px;
  padding: 8px 0;
  border-radius: 4px;
  background: rgba(var(--primary-green-rgb), 0.05);
}

.breakdown-item.final .breakdown-description {
  color: var(--primary-green);
}

.breakdown-amount.final-price {
  color: var(--primary-green) !important;
  font-size: 1.1em;
}

/* Section Divider Enhanced */
.section-divider.enhanced {
  height: 2px;
  background: var(--theme-primary); /* Solid color - no gradient */
  margin: var(--spacing-lg) var(--spacing-lg);
  opacity: 0.8;
  border-radius: 1px;
}

/* Vendor Offer Section */
.vendor-offer-section {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--enhanced-pricing-border);
  border-radius: 12px;
  padding: 8px;
  margin: 4px 0;
}

.offer-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.offer-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px;
  background: rgba(var(--primary-green-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--primary-green-rgb), 0.1);
}

.offer-icon {
  font-size: 1rem;
  margin-top: 1px;
}

.offer-content {
  flex: 1;
}

.offer-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.offer-details {
  font-size: 0.7rem;
  color: var(--text-medium);
}

/* Enhanced View Product Text */
.view-product-text.enhanced {
  background: var(--theme-button-bg); /* Solid button color */
  color: white;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  margin-top: 0;
  box-shadow: 0 2px 6px rgba(var(--primary-green-rgb), 0.2);
  transition: all var(--transition-fast);
}

.view-product-text.enhanced:hover {
  background: var(--theme-button-hover); /* Solid hover color */
  box-shadow: 0 4px 10px rgba(var(--primary-green-rgb), 0.3);
  transform: translateY(-1px);
}

/* Mobile-specific: Enhanced button touch response */
@media (hover: none) and (pointer: coarse) {
  .view-product-text.enhanced:hover {
    background: var(--theme-button-bg);
    box-shadow: 0 2px 6px rgba(var(--primary-green-rgb), 0.2);
    transform: none;
  }

  .view-product-text.enhanced:active {
    background: var(--theme-button-hover);
    box-shadow: 0 4px 10px rgba(var(--primary-green-rgb), 0.3);
    transform: translateY(-1px);
  }
}

/* Responsive Adjustments for Enhanced Cards */
@media (max-width: 768px) {
  .product-card.enhanced-pricing {
    padding: 8px;
  }
  
  .price-breakdown-popup,
  .vendor-offer-section {
    padding: 6px;
  }
  
  .breakdown-item,
  .offer-item {
    padding: 4px;
  }
  
  .product-price.enhanced {
    font-size: 1.2rem;
  }

  .price-breakdown-popup {
    position: fixed; /* Use fixed positioning on mobile for modal-like behavior */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw; /* Use viewport width */
    max-height: 80vh; /* Limit height */
    width: auto;
    min-width: 280px;
    overflow-y: auto; /* Allow scrolling if needed */
    font-size: 0.85rem; /* Larger font on mobile */
    padding: 16px 18px; /* More padding on mobile */
    border-radius: 12px; /* Larger border radius */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    z-index: 999999; /* Higher z-index for modal-like behavior */
  }
  
  .breakdown-header {
    font-size: 0.95rem; /* Larger header font on mobile */
    margin-bottom: 12px; /* More spacing */
  }
  
  .breakdown-item {
    padding: 10px 8px; /* More padding for better touch targets */
    font-size: 0.85rem; /* Larger font */
  }
  
  .summation-line {
    padding: 8px 0; /* More vertical spacing */
  }
}



/* Price Range Filter - Side by Side Inputs */
.price-inputs {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.price-inputs input[type='number'] {
  flex: 1; /* Make both inputs equal width */
  min-width: 80px; /* Minimum width for better usability on all devices */
  padding: var(--spacing-sm) var(--spacing-md); /* Better touch targets */
}

/* Cannabinoid Percentage Range Filter - Same styling as price inputs */
.cannabinoid-inputs {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cannabinoid-inputs input[type='number'] {
  flex: 1; /* Make both inputs equal width */
  min-width: 80px; /* Minimum width for better usability on all devices */
  padding: var(--spacing-sm) var(--spacing-md); /* Better touch targets */
}

.cannabinoid-separator {
  color: var(--text-secondary);
  font-weight: 500;
  user-select: none;
}

/* Image Popup Overlay */
.image-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  backdrop-filter: blur(4px);
  cursor: pointer;
  /* Transform will be applied via JavaScript for precise positioning */
}

.image-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.image-popup-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-popup-overlay.show .image-popup-container {
  transform: scale(1) translateY(0);
}

.image-popup-image {
  max-width: 90vw;  /* Never exceed 90% of viewport width */
  max-height: 80vh; /* Never exceed 80% of viewport height */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease-in-out;
  cursor: pointer; /* Indicate that clicking the image will close the popup */
}

/* Ensure the image respects 1080p max resolution while staying within viewport */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .image-popup-image {
    max-width: min(90vw, 1920px);
    max-height: min(80vh, 1080px);
  }
}

.image-popup-image:hover {
  transform: scale(1.02);
}

.image-popup-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--theme-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-green);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.image-popup-close:hover {
  background: var(--primary-green);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.image-popup-info {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.image-popup-overlay.show .image-popup-info {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.image-popup-info .product-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.image-popup-info .product-vendor {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Magnifying glass icon overlay for product images - Repositioned for overlay */
.image-zoom-icon {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 24px;
    height: 24px;
    background-color: var(--theme-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.image-zoom-icon::before {
    content: "🔎︎"; /* Using the specified variant U+1F50E + U+FE0E */
}

.product-image-container:hover .image-zoom-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .image-popup-container {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .image-popup-close {
    top: -10px;
    right: -10px;
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  
  .image-popup-info {
    bottom: -40px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .image-popup-container {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .image-popup-close {
    top: -10px;
    right: -10px;
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  
  .image-popup-info {
    bottom: -40px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
  }
}

/* Responsive adjustments for cannabinoid content items */
@media (max-width: 768px) {
  .content-items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  
  .content-item {
    height: 32px;
    padding: 4px 6px;
    font-size: 0.75rem;
  }
  
  .content-item-name {
    font-size: 0.6rem;
  }
  
  .content-item-value {
    font-size: 0.65rem;
  }

  /* Responsive adjustments for edibles package info on very small screens */
  .package-info-item {
    min-height: 36px;
    padding: 5px 8px;
  }
  
  .package-info-label {
    font-size: 0.55rem;
  }
  
  .package-info-value {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .content-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
  
  .content-item {
    height: 30px;
    padding: 3px 5px;
    font-size: 0.7rem;
  }
  
  .content-item-name {
    font-size: 0.55rem;
  }
  
  .content-item-value {
    font-size: 0.6rem;
  }
  
  /* Additional responsive adjustments for edibles package info on very small screens */
  .package-info-item {
    min-height: 36px;
    padding: 5px 8px;
  }
  
  .package-info-label {
    font-size: 0.55rem;
  }
  
  .package-info-value {
    font-size: 0.65rem;
  }
}

/* Visual separator for cannabinoid content sections - Enhanced Design */
.content-separator {
  grid-column: 1 / -1; /* Span all columns in grid */
  width: 100%;
  height: 2px;
  background: var(--theme-secondary); /* Solid color - no gradient */
  margin: 8px 0;
  position: relative;
  border-radius: 1px;
  justify-self: stretch; /* Ensure it fills the entire row */
}

.content-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--secondary-green);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  border: 1px solid #ffffff;
}



/* Ensure content items maintain consistent sizing */
.content-item {
  min-width: 0; /* Allow grid items to shrink */
}

/* ============================
   EDIBLE PACKAGE INFO SECTION - FORKED STYLING
   ============================ */

/* Fork of content-items-grid specifically for edible package info section to ensure equal space distribution */
.edible-package-info-section .content-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Use 2 columns for package info (servings and price per mg) */
  gap: 12px; /* Slightly larger gap for better separation */
  margin-top: 0;
  width: 100%;
  padding: 0;
  align-items: stretch; /* Stretch items to fill available height */
  justify-items: stretch; /* Stretch items to fill available width */
}

/* Fork of content-item specifically for edible package info section */
.edible-package-info-section .content-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px; /* Balanced padding */
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: normal; /* Allow text wrapping instead of nowrap */
  min-height: 42px; /* Use min-height instead of fixed height */
  max-height: 60px; /* Set a reasonable max height */
  flex-direction: column;
  line-height: 1.2; /* Slightly increased line height for better readability */
  text-align: center;
  overflow: visible; /* Allow overflow instead of hidden */
  background-color: var(--light-green-bg);
  border: 2px solid var(--secondary-green);
  color: var(--primary-green);
  min-width: 0; /* Allow shrinking */
  flex: 1; /* Equal flex for all items */
  word-wrap: break-word; /* Break long words if necessary */
}

/* Fork of content-item-name for edible package info section */
.edible-package-info-section .content-item-name {
  color: var(--primary-green);
  font-weight: 600;
  font-size: 0.7rem; /* Slightly larger font for package info */
  overflow: visible; /* Allow text to show fully */
  text-overflow: clip; /* Remove ellipsis */
  white-space: normal; /* Allow text wrapping */
  max-width: 100%;
  line-height: 1.2;
  word-wrap: break-word; /* Break long words if necessary */
}

/* Fork of content-item-value for edible package info section */
.edible-package-info-section .content-item-value {
  color: var(--secondary-green);
  font-weight: 700;
  font-size: 0.75rem; /* Slightly larger font for package info */
  overflow: visible; /* Allow text to show fully */
  text-overflow: clip; /* Remove ellipsis */
  white-space: normal; /* Allow text wrapping */
  max-width: 100%;
  line-height: 1.2;
  word-wrap: break-word; /* Break long words if necessary */
}

/* Fork of servings-info styling for edible package info section - Updated to green theme */
.edible-package-info-section .content-item.servings-info {
  background-color: var(--primary-green);
  border: 2px solid var(--theme-border);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.edible-package-info-section .content-item.servings-info .content-item-name,
.edible-package-info-section .content-item.servings-info .content-item-value {
  color: #ffffff;
  font-weight: 600;
}

/* Fork of price-per-mg-info styling for edible package info section - Updated to green theme */
.edible-package-info-section .content-item.price-per-mg-info {
  background-color: var(--primary-green);
  border: 2px solid var(--theme-border);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.edible-package-info-section .content-item.price-per-mg-info .content-item-name,
.edible-package-info-section .content-item.price-per-mg-info .content-item-value {
  color: #ffffff;
  font-weight: 600;
}

/* Hover effects for edible package info section */
.edible-package-info-section .content-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--theme-primary);
}

.edible-package-info-section .content-item.servings-info:hover {
  background-color: var(--secondary-green);
  border-color: var(--secondary-green);
}

.edible-package-info-section .content-item.price-per-mg-info:hover {
  background-color: var(--primary-green);
  border-color: var(--theme-primary);
}

/* Responsive adjustments for edible package info section */
@media (max-width: 768px) {
  .edible-package-info-section .content-items-grid {
    grid-template-columns: 1fr; /* Stack items vertically on mobile */
    gap: 8px;
  }
  
  .edible-package-info-section .content-item {
    min-height: 40px; /* Use min-height for flexibility */
    max-height: 70px; /* Allow more height on mobile */
    padding: 8px 10px;
    font-size: 0.75rem;
  }
  
  .edible-package-info-section .content-item-name {
    font-size: 0.65rem;
  }
  
  .edible-package-info-section .content-item-value {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .edible-package-info-section .content-items-grid {
    grid-template-columns: 1fr; /* Keep stacked on very small screens */
    gap: 6px;
  }
  
  .edible-package-info-section .content-item {
    min-height: 36px; /* Use min-height for flexibility */
    max-height: 65px; /* Allow sufficient height for text */
    padding: 6px 8px;
    font-size: 0.7rem;
  }
  
  .edible-package-info-section .content-item-name {
    font-size: 0.6rem;
  }
  
  .edible-package-info-section .content-item-value {
    font-size: 0.65rem;
  }
}

/* Responsive adjustments for prominent image design */
@media (max-width: 1024px) {
  .product-header {
    flex-direction: column; /* Maintain stacked layout */
    gap: 0;
    padding: 0;
  }
  
  .product-image-container {
    height: 200px; /* Slightly smaller on tablets */
  }
  
  .product-info {
    min-height: 120px;
    padding: 18px 14px;
  }
}

@media (max-width: 768px) {
  .product-header {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  
  .product-image-container {
    height: 180px; /* Smaller but still prominent on mobile */
    border-radius: 12px 12px 0 0;
  }
  
  .product-info {
    min-height: 110px;
    padding: 16px 12px;
    border-radius: 0 0 12px 12px;
  }
  
  .product-type-overlay {
    bottom: 6px;
    right: 6px;
    padding: 3px 8px;
    font-size: 0.6rem;
    border-radius: 10px;
    max-width: calc(100% - 12px);
  }
  
  .image-zoom-icon {
    top: 6px;
    right: 32px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .product-header {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  
  .product-image-container {
    height: 160px; /* Still prominent on small screens */
    border-radius: 12px 12px 0 0;
  }
  
  .product-info {
    min-height: 100px;
    padding: 14px 10px;
    border-radius: 0 0 12px 12px;
  }
  
  .product-type-overlay {
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 0.55rem;
    border-radius: 8px;
    max-width: calc(100% - 8px);
  }
}

/* Product Title Overlay - Transparent container for text elements with individual blur bubbles */
.product-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  padding: 16px 16px 8px 16px;
  z-index: 2;
  text-align: left;
  transition: all var(--transition-medium);
  pointer-events: none; /* Allow clicks to pass through to the image underneath */
}

.product-title-overlay .product-title {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
  transition: all var(--transition-fast);
  position: relative;
  display: inline;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Removed pseudo-element approach - now using box-decoration-break for proper multi-line support */

.product-title-overlay .product-vendor {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
  margin: 4px 0 0 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: row;
  justify-content: flex-start;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  pointer-events: auto;
  z-index: 10;
}

/* Responsive adjustments for product title overlay */
@media (max-width: 768px) {
  .product-title-overlay {
    padding: 12px;
  }
  
  .product-title-overlay .product-title {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
  
  .product-title-overlay .product-vendor {
    font-size: 0.75rem;
    padding: 4px 8px;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .product-title-overlay {
    padding: 10px;
  }
  
  .product-title-overlay .product-title {
    font-size: 0.85rem;
    line-height: 1.1;
    padding: 5px 8px;
  }
  
  .product-title-overlay .product-vendor {
    font-size: 0.7rem;
    margin-top: 2px;
    padding: 3px 6px;
    gap: 3px;
  }
}

/* Dynamic tag sizing based on number of tags */
.tags-container.tag-count-1-3 .product-tag {
  font-size: 0.75rem;
  padding: 8px 14px;
  border-radius: 16px;
}

.tags-container.tag-count-4-6 .product-tag {
  font-size: 0.7rem;
  padding: 6px 12px;
  border-radius: 14px;
}

.tags-container.tag-count-7-9 .product-tag {
  font-size: 0.65rem;
  padding: 5px 10px;
  border-radius: 12px;
}

.tags-container.tag-count-10-plus .product-tag {
  font-size: 0.6rem;
  padding: 4px 8px;
  border-radius: 10px;
}

/* For many tags, use smaller gap and adjust container */
.tags-container.tag-count-10-plus {
  gap: 4px; /* Reduce gap for more tags */
}

/* Additional size classes for products with many tags */
.tags-container.tag-count-15-plus .product-tag {
  font-size: 0.55rem;
  padding: 3px 6px;
  border-radius: 8px;
}

.tags-container.tag-count-20-plus .product-tag {
  font-size: 0.5rem;
  padding: 2px 5px;
  border-radius: 6px;
}

.tags-container.tag-count-15-plus,
.tags-container.tag-count-20-plus {
  gap: 3px;
  line-height: 1.2;
}

/* Image Loading Animation */
.image-loading-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: var(--secondary-green);
  font-weight: 500;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-medium);
}

.loading-dots {
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Nuclear Popup Animation */
@keyframes popupSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Nuclear popup styling */
.nuclear-price-popup {
  pointer-events: auto !important;
  user-select: auto !important;
}

/* Base Discount Styling */
.offer-item.discount {
  border-left: 4px solid var(--primary-green);
  background: var(--light-green-bg); /* Solid color - no gradient */
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.offer-item.discount .offer-icon {
  color: var(--primary-green);
  font-size: 1.1em;
}

.offer-item.discount .offer-title {
  color: var(--text-dark);
  font-weight: 600;
}

/* Targeted Discount Styling */
.offer-item.discount.targeted {
  border-left: 4px solid var(--success-green);
  background: rgba(5, 150, 105, 0.05); /* Solid light green - no gradient */
}

.offer-item.discount.targeted .offer-icon {
  color: var(--success-green);
  font-size: 1.2em;
}

.offer-item.discount.targeted .offer-title {
  color: var(--primary-green);
  font-weight: 600;
}

/* BOGO Discount Styling */
.offer-item.discount.bogo {
  border-left: 4px solid var(--tertiary-green);
  background: rgba(62, 123, 105, 0.05); /* Solid light green - no gradient */
  position: relative;
  overflow: hidden;
}

.offer-item.discount.bogo::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid var(--tertiary-green);
}

.offer-item.discount.bogo .offer-icon {
  color: var(--tertiary-green);
  font-size: 1.3em;
  animation: bogoGlow 2s ease-in-out infinite alternate;
}

.offer-item.discount.bogo .offer-title {
  color: var(--secondary-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes bogoGlow {
  0% { text-shadow: 0 0 5px rgba(62, 123, 105, 0.3); }
  100% { text-shadow: 0 0 10px rgba(62, 123, 105, 0.6), 0 0 15px rgba(62, 123, 105, 0.4); }
}

/* BOGO Toggle Styling */
.bogo-toggle-container {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(124, 58, 237, 0.15);
}

.bogo-toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

.bogo-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  background: #e2e8f0;
  border-radius: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
}

.bogo-toggle:checked {
  background: var(--accent-purple);
}

.bogo-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bogo-toggle:checked::before {
  transform: translateX(16px);
}

.bogo-toggle-text {
  color: var(--accent-purple);
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.bogo-toggle:not(:checked) + .bogo-toggle-slider + .bogo-toggle-text {
  opacity: 0.6;
}

.bogo-toggle-slider {
  display: none; /* Not needed since we're using ::before pseudo-element */
}

/* Universal Discount Toggle Styling (for all discount types) */
.discount-toggle-container {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
}

.discount-toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}

.discount-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  background: #e2e8f0;
  border-radius: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
}

.discount-toggle:checked {
  background: var(--success-green);
}

.discount-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.discount-toggle:checked::before {
  transform: translateX(16px);
}

.discount-toggle-text {
  color: var(--text-dark);
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.discount-toggle:not(:checked) + .discount-toggle-slider + .discount-toggle-text {
  opacity: 0.6;
}

/* Inactive Discount Styling */
.offer-item.discount.inactive {
  opacity: 0.7;
  background: var(--border-color); /* Solid color - no gradient */
  border-left-color: var(--text-light);
}

.offer-item.discount.inactive .offer-icon {
  opacity: 0.6;
  animation: none;
  color: var(--text-light);
}

.offer-item.discount.inactive .offer-title {
  color: var(--text-light);
  text-decoration: line-through;
}

.offer-item.discount.inactive .discount-toggle-text {
  opacity: 0.5;
}

/* Best Deal Discount Styling */
.offer-item.discount.best-deal {
  border-left: 4px solid var(--accent-gold);
  background: rgba(217, 119, 6, 0.05); /* Solid light gold - no gradient */
  position: relative;
  box-shadow: var(--shadow-sm);
}

.offer-item.discount.best-deal::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-top: 18px solid var(--accent-gold);
}

.offer-item.discount.best-deal::after {
  content: "⭐";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  color: white;
  z-index: 1;
}

.offer-item.discount.best-deal .offer-title {
  color: var(--primary-green);
  font-weight: 700;
}

.nuclear-price-popup .breakdown-header {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.nuclear-price-popup .breakdown-summation {
  margin-bottom: 12px;
}

.nuclear-price-popup .summation-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.nuclear-price-popup .summation-line.total {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: 8px;
  font-weight: 600;
}

.nuclear-price-popup .line-amount.negative {
  color: var(--success-green);
}

.nuclear-price-popup .line-amount.free {
  color: var(--success-green);
  font-weight: 600;
}

.nuclear-price-popup .breakdown-notes-section {
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin-top: 10px;
}

.nuclear-price-popup .breakdown-note {
  font-size: 12px;
  color: var(--text-medium);
  margin-bottom: 4px;
}

/* Hide loading text when image is loaded */
.image-loading-wrapper.loaded .image-loading-text {
  opacity: 0;
  pointer-events: none;
}

/* Show error placeholder when image fails to load */
.image-loading-wrapper.error .image-loading-text {
  opacity: 0;
  pointer-events: none;
}

.image-loading-wrapper.error .error-placeholder {
  display: flex !important;
}

/* Ensure image is positioned correctly in wrapper */
.image-loading-wrapper .product-image {
  position: relative;
  z-index: 1;
}

/* ==========================================
   FOOTER STYLES
   ========================================== */

.site-footer {
  background: var(--site-footer-solid); /* Solid color - no gradient */
  color: var(--site-nav-text);
  margin-top: auto;
  padding: var(--spacing-lg) 0 var(--spacing-sm);
  width: 100%;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg); /* Reduced gap */
  margin-bottom: var(--spacing-lg); /* Reduced margin */
}

.footer-section h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem; /* Slightly smaller */
  font-weight: 600;
  margin-bottom: var(--spacing-sm); /* Reduced margin */
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Thinner border */
  padding-bottom: var(--spacing-xs); /* Reduced padding */
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--spacing-xs); /* Reduced spacing */
}

.footer-links a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.92rem; /* Slightly smaller */
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px; /* Slightly less offset */
}

.footer-links a i {
  font-size: 1rem;
}

.footer-disclaimer {
  font-size: 0.85rem; /* Slightly smaller */
  line-height: 1.4; /* Tighter line height */
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.footer-disclaimer strong {
  color: #ffffff;
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Thinner border */
  padding-top: var(--spacing-sm); /* Reduced padding */
  text-align: center;
}

.footer-bottom p {
  margin: var(--spacing-xs) 0; /* Reduced margin */
  font-size: 0.8rem; /* Slightly smaller */
  color: rgba(255, 255, 255, 0.8);
}

.footer-warning {
  font-weight: 600;
  color: #fbbf24 !important;
}

/* Vendor Toggle Filter Styles */
.vendor-toggle-container {
  background: var(--light-green-bg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: all var(--transition-fast);
}

/* Mobile optimization for vendor toggle container */
@media (max-width: 768px) {
  .vendor-toggle-container {
    padding: var(--spacing-sm); /* Reduced from md for more vendor list space */
  }
}

.vendor-toggle-container:hover {
  border-color: var(--theme-primary);
  box-shadow: var(--shadow-sm);
}

/* Enhanced Vendor Filter Header Styles */
.vendor-filter-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  border: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.15);
}

.vendor-filter-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1); /* White overlay for hover effect */
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.vendor-filter-header:hover {
  background: linear-gradient(135deg, var(--secondary-green) 0%, var(--tertiary-green) 100%);
  box-shadow: 0 4px 8px rgba(30, 74, 53, 0.25);
  transform: translateY(-1px);
}

.vendor-filter-header:hover::before {
  opacity: 1;
}

.vendor-filter-header:hover .vendor-dropdown-indicator span {
  color: var(--accent-gold);
}

.vendor-dropdown-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}

.vendor-dropdown-indicator span:first-child {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
  color: var(--primary-green);
}

.vendor-dropdown-indicator span:last-child {
  font-size: 0.8rem;
  color: #ffffff; /* White text for contrast */
  font-weight: 500;
  transition: color var(--transition-fast);
}

/* Enhanced select all styling within header */
.vendor-filter-header .vendor-select-all {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vendor-filter-header .vendor-select-all input[type="checkbox"] {
  /* Visual checkbox size */
  width: 18px;
  height: 18px;
  accent-color: var(--primary-green);
  cursor: pointer;
  /* Remove problematic padding/margin that caused text to overflow */
  margin: 0;
  padding: 0;
}

.vendor-filter-header .vendor-select-all label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff; /* White text for contrast */
  cursor: pointer;
  margin: 0;
  transition: color var(--transition-fast);
}

.vendor-filter-header:hover .vendor-select-all label {
  color: var(--accent-gold);
}

/* Content animation */
.vendor-filter-content {
  padding-top: 1rem;
  transition: all var(--transition-medium);
  opacity: 0;
  transform: translateY(-10px);
}

.vendor-filter-content.show {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow rotation animation */
#vendor-filter-arrow {
  transition: transform 0.3s ease;
  color: #ffffff; /* White text for contrast */
}

#vendor-filter-arrow.rotated {
  transform: rotate(180deg);
}

/* Mobile responsiveness for vendor toggle */
@media (max-width: 768px) {
  .vendor-filter-header {
    padding: 0.6rem 0.8rem;
  }
  
  .vendor-filter-header .vendor-select-all label {
    font-size: 0.9rem;
  }
  
  .vendor-dropdown-indicator span:last-child {
    font-size: 0.75rem;
  }
  
  .vendor-list-container {
    max-height: 150px;
  }
  
  .vendor-toggle-item {
    padding: var(--spacing-xs);
  }
  
  .vendor-toggle-item label {
    font-size: 0.85rem;
  }
  
  .vendor-toggle-item .vendor-count {
    font-size: 0.75rem;
    padding: 1px 4px;
  }
}

.vendor-list-container {
  max-height: 200px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  background: white;
  border: 1px solid var(--border-color);
}

.vendor-list {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.vendor-toggle-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
}

.vendor-toggle-item:hover {
  background: #e8f5e8 !important;
  border-color: var(--theme-primary);
  transform: translateX(2px);
}

.vendor-toggle-item input[type="checkbox"] {
  /* Visual checkbox size */
  width: 18px;
  height: 18px;
  accent-color: var(--primary-green);
  cursor: pointer;
  flex-shrink: 0;
  /* Remove problematic padding/margin that caused text to overflow */
  margin: 0;
  padding: 0;
}



.vendor-toggle-item .vendor-count {
  font-size: 0.8rem;
  color: var(--text-medium);
  font-weight: 400;
  background: rgba(30, 74, 53, 0.25);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(30, 74, 53, 0.4);
  transition: all var(--transition-fast);
  white-space: nowrap;
}


.vendor-toggle-item input[type="checkbox"]:checked + label {
  color: var(--primary-green);
  font-weight: 600;
}

.vendor-toggle-item input[type="checkbox"]:checked + label .vendor-count {
  background: var(--primary-green);
  color: white;
  border-color: var(--theme-primary);
  font-weight: 500;
}

/* Mobile responsiveness for vendor toggle */
@media (max-width: 768px) {
  .vendor-list-container {
    max-height: 250px; /* Increased from 150px to show more vendors */
  }

  .vendor-toggle-item {
    padding: var(--spacing-xs);
  }

  .vendor-toggle-item label {
    font-size: 0.85rem;
  }

  .vendor-toggle-item .vendor-count {
    font-size: 0.75rem;
    padding: 1px 4px;
  }
}

/* Mobile responsiveness for footer */
@media (max-width: 768px) {
  .site-footer {
    padding: var(--spacing-md) 0 var(--spacing-sm);
  }
  
  .footer-container {
    padding: 0 var(--spacing-sm);
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .footer-section {
    text-align: center;
  }
  
  .footer-bottom {
    text-align: center;
  }
  
  .footer-bottom p {
    font-size: 0.8rem;
  }
}

/* ==========================================
   LEGAL PAGES STYLES
   ========================================== */

.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  line-height: 1.6;
  color: var(--text-dark);
}

.legal-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-green);
}

.legal-header h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: var(--spacing-sm);
}

.last-updated {
  font-size: 0.9rem;
  color: var(--text-medium);
  font-style: italic;
}

.legal-content {
  font-family: var(--font-body);
}

.legal-intro {
  background: var(--light-green-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  border-left: 4px solid var(--primary-green);
}

.legal-intro p {
  margin-bottom: var(--spacing-md);
}

.legal-intro p:last-child {
  margin-bottom: 0;
}

.legal-section {
  margin-bottom: var(--spacing-xl);
}

.legal-section h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.legal-section h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondary-green);
  margin-bottom: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.legal-section p {
  margin-bottom: var(--spacing-md);
}

.legal-section ul {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.legal-section li {
  margin-bottom: var(--spacing-sm);
}

.subsection {
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.warning-box {
  background: #fef3cd;
  border: 1px solid #fbbf24;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.warning-box.major-warning {
  background: #fee2e2;
  border-color: #f87171;
}

.warning-box h2 {
  color: #92400e;
  margin-bottom: var(--spacing-sm);
  border: none;
  padding: 0;
}

.warning-box p {
  margin-bottom: var(--spacing-sm);
  color: #92400e;
}

.warning-box p:last-child {
  margin-bottom: 0;
}

.important-notice {
  background: #eff6ff;
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.important-notice p {
  color: #1e40af;
  margin-bottom: var(--spacing-sm);
}

.important-notice p:last-child {
  margin-bottom: 0;
}

.important-notice ul {
  color: #1e40af;
}

/* Legal page links */
.legal-content a {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--secondary-green);
  text-decoration-thickness: 2px;
}

/* Mobile responsiveness for legal pages */
@media (max-width: 768px) {
  .legal-page {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .legal-header h1 {
    font-size: 2rem;
  }
  
  .legal-section h2 {
    font-size: 1.3rem;
  }
  
  .legal-section h3 {
    font-size: 1.1rem;
  }
  
  .subsection {
    margin-left: 0;
  }
  
  .legal-section ul {
    padding-left: var(--spacing-md);
  }
}

/* ==========================================
   FAQ PAGE STYLES
   ========================================== */

.faq-nav {
  background: var(--light-green-bg);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  border-left: 4px solid var(--primary-green);
}

.faq-nav h3 {
  margin-bottom: var(--spacing-md);
  color: var(--primary-green);
  font-size: 1.1rem;
}

.faq-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.faq-nav-links li {
  margin: 0;
}

.faq-nav-links a {
  color: var(--primary-green);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: var(--transition-fast);
  display: inline-block;
  border: 1px solid var(--border-color);
}

.faq-nav-links a:hover {
  background: var(--primary-green);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.faq-section {
  margin-bottom: var(--spacing-xl);
  scroll-margin-top: var(--spacing-xl);
}

.faq-section h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) 0;
  border-bottom: 2px solid var(--primary-green);
  background: var(--light-green-bg); /* Solid color - no gradient */
  padding-left: var(--spacing-md);
  border-radius: var(--radius-md);
}

.faq-item {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.faq-item h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondary-green);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.faq-item p {
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.faq-item p:last-child {
  margin-bottom: 0;
}

.faq-item ul {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.faq-item li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.faq-item strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Mobile responsiveness for FAQ */
@media (max-width: 768px) {
  .faq-nav-links {
    flex-direction: column;
  }
  
  .faq-nav-links a {
    text-align: center;
  }
  
  .faq-item {
    padding: var(--spacing-md);
  }
  
  .faq-section h2 {
    font-size: 1.4rem;
    padding-left: var(--spacing-sm);
  }
  
  .faq-item h3 {
    font-size: 1.1rem;
  }
}

/* ==========================================
   ABOUT PAGE STYLES
   ========================================== */

.about-page .legal-intro {
  background: var(--light-green-bg); /* Solid color - no gradient */
  border-left: 4px solid var(--primary-green);
  font-size: 1.1rem;
}

.highlight-box {
  background: #eff6ff; /* Solid light blue - no gradient */
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.highlight-box::before {
  content: "💡";
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  font-size: 1.5rem;
}

.highlight-box p {
  margin-left: var(--spacing-xl);
  color: #1e40af;
  line-height: 1.6;
}

.win-win-box {
  background: var(--light-green-bg);
  border: 2px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
}

.win-win-box h3 {
  color: var(--primary-green);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: 1.2rem;
}

/* Win-Win-Win Three Card Layout */
.win-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.win-card {
  background: white;
  border: 2px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: var(--transition-medium);
}

.win-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.win-card::before {
  content: "WIN";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-green);
  color: white;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.win-card:nth-child(1)::before {
  content: "WIN #1";
}

.win-card:nth-child(2)::before {
  content: "WIN #2";
}

.win-card:nth-child(3)::before {
  content: "WIN #3";
}

.win-card-icon {
  font-size: 3rem;
  color: var(--primary-green);
  margin-bottom: var(--spacing-md);
}

.win-card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-heading);
}

.win-card-content {
  color: var(--text-dark);
  line-height: 1.6;
}

/* Mobile responsiveness for win cards */
@media (max-width: 768px) {
  .win-cards-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .win-card {
    padding: var(--spacing-lg);
  }
  
  .win-card-icon {
    font-size: 2.5rem;
  }
  
  .win-card-title {
    font-size: 1.1rem;
  }
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.benefit-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-green-bg);
  border-radius: 50%;
}

.benefit-text {
  flex: 1;
  color: var(--text-dark);
}

.benefit-text strong {
  color: var(--primary-green);
  font-weight: 600;
}
.promise-box {
  background: #d1fae5; /* Solid light green - no gradient */
  border: 2px solid var(--theme-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.promise-box h3 {
  color: var(--primary-green);
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-heading);
}

.main-promise {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-green);
  font-style: italic;
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-gold);
}

.signature-section {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.signature {
  font-family: var(--font-heading);
}

.signature-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-green);
  margin: var(--spacing-sm) 0;
}

.signature-title {
  font-size: 1rem;
  color: var(--text-medium);
  font-style: italic;
}

.contact-section {
  background: var(--light-green-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px solid var(--border-color);
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--primary-green);
  text-decoration: none;
  font-weight: 500;
  padding: var(--spacing-md) var(--spacing-lg);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  border: 1px solid var(--border-color);
}

.contact-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--secondary-green);
}

.contact-link i {
  font-size: 1.2rem;
}

/* Mobile responsiveness for about page */
@media (max-width: 768px) {
  .contact-info {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  .contact-link {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  .main-promise {
    font-size: 1.3rem;
  }
  
  .signature-name {
    font-size: 1.5rem;
  }
}

/* Affiliate Disclaimer in Header */
.affiliate-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: 0.8rem; /* Slightly larger for better readability */
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1); /* Solid white overlay - no gradient */
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 10px; /* More rounded for premium look */
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px); /* Enhanced blur */
  transition: all var(--transition-medium);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  max-width: 250px; /* Slightly wider */
  min-width: 150px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Enhanced shadow */
}

.affiliate-disclaimer:hover {
  background: rgba(255, 255, 255, 0.18); /* Solid white overlay - no gradient */
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

.affiliate-disclaimer i {
  font-size: 0.85rem; /* Slightly larger icon */
  opacity: 0.9;
  flex-shrink: 0;
  margin-top: 1px; /* Better alignment */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.affiliate-disclaimer span {
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Mobile Index Counts - Below Mobile Header */
.mobile-index-counts {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--font-heading);
  min-width: 90px;
  min-height: 38px;
  box-shadow: none;
  color: #fff;
  position: relative;
}

.mobile-index-counts .mobile-index-products,
.mobile-index-counts .mobile-index-vendors {
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-family: var(--font-heading);
  margin: 0 0.7em 0 0;
  white-space: nowrap;
}

.mobile-index-counts .mobile-index-vendors {
  margin: 0;
}

.mobile-index-counts .mobile-index-circle-separator {
  width: 0.55em;
  height: 0.55em;
  margin: 0 0.7em 0 0;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.85;
  box-shadow: 0 1px 4px 0 rgba(30, 74, 53, 0.10);
  border: none;
  vertical-align: middle;
  flex-shrink: 0;
}

.mobile-index-counts .mobile-index-count {
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 1em;
  margin: 0 0.08em;
  font-family: var(--font-heading);
  text-shadow: none;
}

/* Hide mobile index counts on desktop */
@media (min-width: 769px) {
  .mobile-index-counts {
    display: none !important;
  }
}

/* Responsive adjustments for mobile index counts */
@media (max-width: 1024px) {
  .mobile-index-counts {
    margin-left: 0.5rem;
    padding: 0 0.1rem;
    min-width: 60px;
    min-height: 28px;
    font-size: 0.97rem;
  }
}

@media (max-width: 480px) {
  .mobile-index-counts {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 32px;
  }
  
  .mobile-index-counts .mobile-index-products,
  .mobile-index-counts .mobile-index-vendors {
    font-size: 0.85rem;
  }
  
  .mobile-index-counts .mobile-index-count {
    font-size: 0.9em;
  }
  
  .mobile-index-counts .mobile-index-circle-separator {
    width: 0.4em;
    height: 0.4em;
    margin: 0 0.6em 0 0;
  }
}

/* Mobile responsiveness for header */
@media (max-width: 1024px) {
  .affiliate-disclaimer {
    font-size: 1rem !important;
    max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .site-logo {
    height: 75px; /* Slightly smaller on tablets */
  }
  
  .site-logo img {
    max-width: 190px;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
    height: auto;
  }
  
  .site-header {
    height: auto;
    min-height: 80px; /* Significantly reduced from 120px */
    padding: var(--spacing-sm) 0;
  }
  
  .logo-home-section {
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
  }
  
  .site-logo {
    height: 45px; /* Much smaller on mobile */
  }
  
  .site-logo img {
    max-width: 140px; /* Reduced from 170px */
  }
  
  .home-button {
    padding: 0.4rem 0.8rem; /* More compact */
    font-size: 0.9rem;
  }
  
  .site-navigation {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm); /* Reduced gap */
  }
  
  .nav-item {
    font-size: 0.9rem; /* Smaller text */
    padding: 0.5rem 0.8rem; /* More compact padding */
  }
  
  .affiliate-disclaimer {
    font-size: 1rem !important;
    max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
    padding: var(--spacing-xs);
  }
  
  /* Adjust body padding for mobile header with index counts */
  body {
    padding-top: 110px; /* Account for mobile header + index counts */
  }
}

@media (max-width: 480px) {
  .site-navigation {
    gap: var(--spacing-xs); /* Even smaller gap on tiny screens */
  }
  
  .nav-item {
    font-size: 0.85rem; /* Even smaller text */
    padding: 0.4rem 0.6rem; /* Very compact */
  }
  
  .affiliate-disclaimer {
    max-width: 224px !important;
    min-width: 200px !important;
    width: 200px !important;
    font-size: 1rem !important;
    padding: 2px 4px; /* Very compact */
  }
  
  .site-logo {
    height: 40px; /* Even smaller logo */
  }
  
  .site-logo img {
    max-width: 120px; /* Reduced from 150px */
  }
  
  .home-button {
    padding: 0.3rem 0.6rem; /* Very compact */
    font-size: 0.8rem;
  }
  
  .logo-home-section {
    gap: var(--spacing-xs); /* Smaller gap between logo and home button */
  }
  
  .affiliate-disclaimer span {
    line-height: 1.1; /* Tighter line height */
  }
  
  /* Further reduce body padding for tiny screens */
  body {
    padding-top: 95px; /* Account for mobile header + index counts on tiny screens */
  }
}

/* Desktop Header - Ensure it's always shown on larger screens */
@media (min-width: 769px) {
  .desktop-header {
    display: flex !important;
  }
  
  .mobile-header {
    display: none !important;
  }
}

/* Mobile Header Media Queries */
@media (max-width: 768px) {
  .desktop-header {
    display: none !important;
  }
  
  .mobile-header {
    display: block !important;
  }
  
  /* Adjust body padding for mobile header */
  body {
    padding-top: 110px; /* Account for mobile header height + index counts */
  }
}

/* --- Modern Category Tabs --- */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 2.5rem;
  padding: 18px 28px 18px 28px;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 4px 18px rgba(30,74,53,0.07), 0 1.5px 6px rgba(30,74,53,0.04);
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border: none;
  position: relative;
}
.category-tab {
  padding: 13px 28px;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--primary-green);
  background: #f8fafc;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(30,74,53,0.06);
  text-align: center;
  min-width: min-content;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  outline: none;
  position: relative;
}
.category-tab.active {
  background: var(--theme-primary); /* Solid color - no gradient */
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(30,74,53,0.13);
}
.category-tab:hover:not(.active) {
  background: #e0f7ef;
  color: var(--primary-green);
  border-color: var(--primary-green); /* Enhance border to primary green on hover */
  box-shadow: 0 4px 12px rgba(30,74,53,0.15);
  transform: translateY(-1px); /* Subtle lift effect on hover */
}
.tab-emoji {
  font-size: 1.25em;
  margin-right: 8px;
  opacity: 0.93;
  vertical-align: middle;
}
.category-tab.active .tab-emoji {
  opacity: 1;
}

/* --- Modern Filter Section --- */
.modern-filter-section {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--theme-border);
  padding: 2.2rem 2.5rem 1.5rem 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}
.filter-section-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff; /* White text for contrast */
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  padding: 1rem 1.5rem;
  margin: 0 0 1.2rem 0; /* No negative margins - clean spacing */
  display: flex;
  align-items: center;
  gap: 0.7em;
  letter-spacing: 0.5px;
  border-radius: var(--radius-md); /* Rounded corners all around */
  box-shadow: 0 2px 4px rgba(30, 74, 53, 0.15);
}
.filter-section-title i {
  color: var(--accent-gold);
  font-size: 1.1em;
}
.modern-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.1rem 1.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
}
.modern-filter-group label {
  font-family: var(--font-heading);
  font-size: 1.01rem;
  font-weight: 700;
  color: var(--primary-green);
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modern-filter-group input,
.modern-filter-group select {
  font-size: 1.01rem;
  border-radius: 0.8em;
  border: 2px solid #d1d5db;
  background: #f8fafc;
  color: var(--text-dark);
  padding: 0.7em 1.1em;
  box-shadow: 0 1.5px 6px rgba(30,74,53,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modern-filter-group input:focus,
.modern-filter-group select:focus {
  border-color: var(--theme-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(30,74,53,0.10);
}
.modern-price-inputs {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.modern-filter-actions-inline {
  display: flex;
  gap: 0.7em;
  flex-wrap: wrap;
  align-items: center;
}
.btn-primary {
  background: var(--theme-button-bg);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(30,74,53,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: var(--theme-button-hover);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30,74,53,0.13);
}
.modern-divider {
  width: 100%;
  height: 2px;
  background: #ffffff; /* Solid white - no gradient */
  border-radius: 1px;
  margin: 2.1rem 0 1.2rem 0;
  opacity: 0.7;
}
.modern-advanced-filters {
  background: #f8fafc;
  border-radius: 1.1rem;
  padding: 1.2rem 1.5rem 1.2rem 1.5rem;
  box-shadow: 0 2px 8px rgba(30,74,53,0.04);
  border: 1.5px solid #e0f7ef;
}
@media (max-width: 900px) {
  .modern-filter-section {
    padding: 1.2rem 0.7rem 1.2rem 0.7rem;
  }
  .modern-filter-grid {
    gap: 1.1rem 0.7rem;
  }
}
@media (max-width: 600px) {
  .category-tabs {
    padding: 10px 6px;
    gap: 6px;
    margin-bottom: 1.2rem;
  }
  .category-tab {
    padding: 10px 10px;
    font-size: 0.93rem;
  }
  .modern-filter-section {
    padding: 0.8rem 0.5rem 0.8rem 0.5rem; /* Increased from 0.7/0.2 for better breathing room */
    margin-bottom: 1.2rem;
  }
  .modern-filter-grid {
    gap: 0.8rem 0.5rem; /* Increased from 0.7/0.3 for better spacing between filters */
  }
}

/* --- Compact Modern Category Tabs --- */
.category-tabs {
  gap: 7px;
  margin-bottom: 1.2rem;
  padding: 10px 12px;
  border-radius: 1.1rem;
  box-shadow: 0 2px 8px rgba(30,74,53,0.07), 0 1px 3px rgba(30,74,53,0.04);
}
.category-tab {
  padding: 7px 14px;
  font-size: 0.93rem;
  border-radius: 1.1em;
  box-shadow: 0 1px 3px rgba(30,74,53,0.06);
}
.category-tab .tab-emoji {
  font-size: 1.05em;
  margin-right: 4px;
}

/* --- Compact Modern Filter Section --- */
.modern-filter-section {
  border-radius: 1.1rem;
  box-shadow: 0 2px 8px rgba(30,74,53,0.10), 0 1px 3px rgba(30,74,53,0.04);
  padding: 1.1rem 1.2rem 0.7rem 1.2rem;
  margin-bottom: 1.2rem;
}
.filter-section-title {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  gap: 0.4em;
}
.modern-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem 0.7rem;
  margin-bottom: 0.2rem;
}
.modern-filter-group label {
  font-size: 0.91rem;
  margin-bottom: 0.3em;
}
.modern-filter-group input,
.modern-filter-group select {
  font-size: 0.91rem;
  border-radius: 0.5em;
  padding: 0.45em 0.7em;
  min-height: 32px;
}
.modern-price-inputs {
  gap: 0.3em;
}
.modern-filter-actions-inline {
  gap: 0.3em;
}
.btn-primary {
  font-size: 0.91rem;
  padding: 0.45em 1em;
}
.modern-divider {
  height: 1px;
  margin: 1.1rem 0 0.6rem 0;
}
.modern-advanced-filters {
  border-radius: 0.7rem;
  padding: 0.7rem 0.7rem 0.7rem 0.7rem;
}
@media (max-width: 900px) {
  .modern-filter-section {
    padding: 0.7rem 0.3rem 0.7rem 0.3rem;
  }
  .modern-filter-grid {
    gap: 0.5rem 0.3rem;
  }
}
@media (max-width: 600px) {
  .category-tabs {
    padding: 6px 2px;
    gap: 3px;
    margin-bottom: 0.7rem;
  }
  .category-tab {
    padding: 5px 6px;
    font-size: 0.85rem;
  }
  .modern-filter-section {
    padding: 0.6rem 0.4rem 0.6rem 0.4rem; /* Doubled from 0.3/0.1 for much better breathing room */
    margin-bottom: 0.7rem;
  }
  .modern-filter-grid {
    gap: 0.6rem 0.4rem; /* Doubled from 0.3/0.1 for better filter spacing */
  }
}

.partner-button, .affiliate-disclaimer {
  white-space: nowrap !important;
  font-size: 1rem !important;
  min-width: 200px !important;
  max-width: 224px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- Responsive Filter Container Styles --- */
.desktop-filter-container {
  display: block;
}

/* Product Grid Container Styles */
.product-grid-container {
  /* Inherits modern-filter-section styling */
}

.product-grid-container .product-grid {
  /* Remove any inherited padding/margin that might interfere with card layout */
  margin: 0;
  padding: 0;
}

.product-grid-container .pagination-container {
  /* Ensure pagination has proper spacing within the container */
  margin: 1.5rem 0 1rem 0;
}

.product-grid-container .loading {
  /* Center loading spinner within container */
  text-align: center;
  padding: 2rem 0;
}

/* Mobile responsiveness for desktop filters */
@media screen and (max-width: 1024px) {
  .desktop-filter-container {
    margin-bottom: 2rem;
  }
  
  /* Make filter grid responsive */
  .modern-filter-grid,
  .filter-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Stack filter actions vertically on mobile */
  .modern-filter-actions-inline {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .modern-filter-actions-inline .btn {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Better spacing for advanced filters */
  .modern-advanced-filters {
    margin-top: 1.5rem !important;
  }
  
  /* Improve vendor filter on mobile */
  .vendor-filter-header {
    padding: 1rem !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .vendor-dropdown-indicator {
    gap: 0 !important;
  }
  
  /* Hide the "Vendor Filter" text on mobile */
  .vendor-dropdown-indicator span:last-child {
    display: none !important;
  }
  
  /* Better spacing for vendor list container on mobile */
  .vendor-list-container {
    padding: 0.5rem !important;
  }
  
  .vendor-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 0.5rem !important;
    max-height: 300px !important;
    overflow-y: auto !important;
  }
  
  /* Better tag category spacing */
  .tag-category-header {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Responsive price and range inputs */
  .modern-price-inputs,
  .cannabinoid-inputs {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .modern-price-inputs input,
  .cannabinoid-inputs input {
    flex: 1 !important;
    min-width: 70px !important; /* Smaller on mobile but still usable */
  }
}

@media (max-width: 600px) {
  .modern-filter-section,
  .filter-section {
    border-radius: 0.7rem !important;
    border-width: 1.5px !important;
    padding: 0.7rem 0.5rem 0.7rem 0.5rem !important;
  }
  .modern-filter-group,
  .filter-group {
    margin-bottom: 0.7rem !important;
  }
  .modern-filter-actions-inline > * {
    margin-right: 0.5em !important;
    margin-bottom: 0.5em !important;
  }
  .modern-filter-actions-inline {
    margin-bottom: 0.7rem !important;
  }
  .modern-price-inputs {
    margin-bottom: 0.5rem !important;
  }
  .modern-filter-group input,
  .modern-filter-group select,
  .filter-group input,
  .filter-group select {
    padding-top: 0.7em !important;
    padding-bottom: 0.7em !important;
    font-size: 1rem !important;
  }
  .pagination-container {
    margin-bottom: 1.2rem !important;
  }
}

.vendor-toggle-item label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  margin: 0;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-fast);
}


.vendor-name-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
}

.vendor-name {
  font-weight: 500;
  transition: color var(--transition-fast);
}

.vendor-link {
  color: var(--text-medium);
  text-decoration: none;
  font-size: 0.8rem;
  opacity: 0.7;
  transition: all var(--transition-fast);
  padding: 2px;
  border-radius: 4px;
}

.vendor-link:hover {
  color: var(--primary-green);
  opacity: 1;
  background: rgba(30, 74, 53, 0.1);
  transform: scale(1.1);
}

.vendor-toggle-item:hover .vendor-link {
  color: var(--primary-green);
  opacity: 0.9;
}

/* Vendor link icon styles for product cards */
.product-vendor {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-direction: row;
  justify-content: flex-start;
}

.vendor-name-text {
  flex: 0 1 auto;
}

.vendor-link-icon {
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  opacity: 0.7;
  transition: all var(--transition-fast);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}


/* Ensure vendor link is always clickable */
.product-vendor .vendor-link-icon {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  cursor: pointer;
}

.product-title-overlay .product-vendor .vendor-link-icon {
  position: relative;
  z-index: 25;
  pointer-events: auto;
  cursor: pointer;
}

/* Vendor togglebox for product cards */
.vendor-togglebox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  background: #e53935;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 5px;
  border: 2px solid #e53935;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border 0.15s, opacity 0.15s;
  user-select: none;
  box-shadow: 0 1px 4px rgba(229,57,53,0.08);
  position: relative;
  z-index: 20;
  pointer-events: auto;
}
.product-vendor {
  position: relative;
  z-index: 1;
}
.vendor-togglebox:hover {
  background: #b71c1c;
  border-color: #b71c1c;
}
.vendor-togglebox.excluded {
  background: #fff;
  color: #e53935;
  border: 2px solid #e53935;
  opacity: 0.5;
}
.vendor-togglebox.excluded:hover {
  background: #ffebee;
  color: #b71c1c;
  border-color: #b71c1c;
  opacity: 0.8;
}

.vendor-toggle-item.excluded {
  background: #ffebee !important;
  opacity: 1;
  transition: background 0.2s;
}

.vendor-filter-header .vendor-select-all label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-green);
  cursor: pointer;
  margin: 0;
  transition: color var(--transition-fast);
}

.vendor-filter-header .vendor-select-all-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff; /* White text for contrast */
  cursor: pointer;
  margin: 0;
  transition: color var(--transition-fast);
}

.vendor-filter-header:hover .vendor-select-all label,
.vendor-filter-header:hover .vendor-select-all-label {
  color: var(--accent-gold);
}

/* ===========================================
   NEW FAQ & ABOUT PAGE STYLES
   =========================================== */

.faq-page, .about-page {
  background: #ffffff;
  min-height: 100vh;
}

.faq-page .page-header, .about-page .page-header {
  padding: 40px 0 30px;
  background: #ffffff;
  border-bottom: 1px solid #e9ecef;
}

.faq-page .header-content, .about-page .header-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.faq-page .breadcrumb, .about-page .breadcrumb {
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-light);
}

.faq-page .breadcrumb a, .about-page .breadcrumb a {
  color: var(--primary-green);
  text-decoration: none;
}

.faq-page .breadcrumb a:hover, .about-page .breadcrumb a:hover {
  text-decoration: underline;
}

.faq-page .separator, .about-page .separator {
  margin: 0 10px;
  color: #ccc;
}

.faq-page .page-header h1, .about-page .page-header h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #2c3e50;
}

.faq-page .page-description, .about-page .page-description {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.faq-quick-navigation {
  padding: 50px 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.faq-quick-navigation h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 600;
}

.faq-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-nav-card {
  display: flex;
  align-items: center;
  padding: 25px;
  background: white;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.faq-nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-color: var(--theme-primary);
  text-decoration: none;
  color: #333;
}

.faq-nav-icon {
  font-size: 2.2rem;
  margin-right: 20px;
  flex-shrink: 0;
}

.faq-nav-text h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
}

.faq-nav-text p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.intro-section {
  padding: 60px 0;
  background: white;
}

.intro-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.intro-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 25px;
}

.mission-statement {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #2c3e50;
  font-weight: 500;
}

.faq-main-content, .about-main-content {
  background: #f8f9fa;
  padding: 60px 0 80px;
}

.faq-section {
  margin-bottom: 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #2c3e50;
}

.section-icon {
  margin-right: 15px;
}

.section-description {
  font-size: 1.1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.faq-grid {
  display: grid;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.faq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.faq-card.featured-card {
  border: 2px solid var(--theme-border);
  position: relative;
}

.faq-card.warning-card {
  border-left: 5px solid #ffc107;
}

.faq-card.critical-warning-card {
  border-left: 5px solid #dc3545;
  background: #ffffff; /* Solid white - no gradient */
}

.faq-question {
  padding: 25px 30px 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
}

.important-badge, .warning-badge, .critical-badge {
  background: var(--primary-green);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 15px;
  flex-shrink: 0;
}

.warning-badge {
  background: #ffc107;
  color: #333;
}

.critical-badge {
  background: #dc3545;
}

.faq-answer {
  padding: 20px 30px 30px;
}

.faq-answer p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #444;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.highlight-box {
  background: #f0f9ff; /* Solid light blue - no gradient */
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
  border-left: 4px solid var(--primary-green);
}

.key-takeaway {
  background: #f0fdf4; /* Solid light green - no gradient */
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
  border-left: 4px solid var(--tertiary-green);
  font-weight: 500;
}

.warning-callout, .critical-warning {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: #fff3cd; /* Solid light yellow - no gradient */
  padding: 20px;
  border-radius: 12px;
  margin: 20px 0;
  border-left: 4px solid #ffc107;
}

.critical-warning {
  background: #f8d7da; /* Solid light red - no gradient */
  border-left-color: #dc3545;
}

.warning-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-content {
  flex: 1;
}

.answer-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}

.answer-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.list-icon {
  margin-right: 12px;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.product-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 25px 0;
}

.product-type-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.product-type-card:hover {
  border-color: var(--theme-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  text-decoration: none;
  color: #333;
}

.product-icon {
  font-size: 2rem;
  margin-right: 15px;
  flex-shrink: 0;
}

.product-info h4 {
  margin: 0 0 5px;
  font-size: 1.1rem;
  font-weight: 600;
}

.product-info p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.faq-contact-section {
  background: white;
  padding: 60px 0;
  margin-top: 40px;
}

.contact-card {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: #f8f9fa; /* Solid light gray - no gradient */
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.contact-card h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: #2c3e50;
}

.contact-content p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #444;
}

.disclaimer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.disclaimer-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.disclaimer-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 5px;
}

/* About page specific styles are now handled by the shared styles above */

.story-section, .business-model-section, .promise-section {
  margin-bottom: 80px;
}

.founder-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.founder-avatar {
  margin-right: 30px;
}

.avatar-icon {
  font-size: 4rem;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary); /* Solid color - no gradient */
  border-radius: 50%;
  color: white;
}

.founder-bio h3 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.founder-bio p {
  font-size: 1.1rem;
  color: #666;
  max-width: 400px;
}

.story-timeline {
  max-width: 900px;
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.timeline-marker {
  font-size: 2.5rem;
  margin-right: 25px;
  flex-shrink: 0;
  margin-top: 5px;
}

.timeline-content h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.timeline-content p {
  line-height: 1.6;
  color: #444;
}

.transparency-card {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  margin-bottom: 50px;
  border-left: 5px solid var(--primary-green);
}

.transparency-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.transparency-icon {
  font-size: 2rem;
  margin-right: 15px;
}

.transparency-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.win-win-section h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 40px;
  color: #2c3e50;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.benefit-card {
  background: white;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.user-benefit {
  border-top: 4px solid var(--tertiary-green);
}

.vendor-benefit {
  border-top: 4px solid var(--accent-gold);
}

.platform-benefit {
  border-top: 4px solid var(--primary-green);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.benefit-content h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.benefit-content p {
  line-height: 1.6;
  margin-bottom: 20px;
  color: #444;
}

.benefit-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tag {
  background: #f8f9fa;
  color: var(--primary-green);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #e9ecef;
}

.commitment-card {
  display: flex;
  align-items: flex-start;
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  margin-bottom: 40px;
}

.commitment-icon {
  font-size: 3rem;
  margin-right: 25px;
  flex-shrink: 0;
  margin-top: 5px;
}

.commitment-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
  color: #444;
}

.promise-card {
  background: #f8f9fa; /* Solid light gray - no gradient */
  padding: 50px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.promise-card h3 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #2c3e50;
}

.main-promise {
  margin: 40px 0;
}

.promise-quote {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--primary-green);
  font-style: italic;
  line-height: 1.3;
}

.quote-mark {
  font-size: 3rem;
  opacity: 0.5;
  position: relative;
  top: 10px;
}

.promise-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
  max-width: 600px;
  margin: 0 auto;
}

.signature-section {
  background: white;
  padding: 60px 0;
  margin-top: 40px;
}

.signature-card {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa; /* Solid light gray - no gradient */
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.signature-content {
  flex: 1;
}

.signature-greeting {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #666;
}

.signature-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.signature-title {
  font-size: 1rem;
  color: var(--tertiary-green);
  font-weight: 500;
}

.signature-visual {
  margin-left: 30px;
}

.signature-icon {
  font-size: 3rem;
}

/* Mobile Responsiveness for New Pages */
@media (max-width: 768px) {
  .faq-page .page-header h1, .about-page .page-header h1 {
    font-size: 2.2rem;1
  }
  
  .faq-page .page-description, .about-page .page-description {
    font-size: 1.1rem;
  }
  
  .faq-nav-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .faq-nav-card {
    padding: 20px;
  }
  
  .intro-text, .mission-statement {
    font-size: 1.1rem;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  
  .faq-question, .faq-answer {
    padding: 20px;
  }
  
  .faq-question {
    flex-direction: column;
    gap: 15px;
  }
  
  .important-badge, .warning-badge, .critical-badge {
    margin-left: 0;
    align-self: flex-start;
  }
  
  .product-types-grid {
    grid-template-columns: 1fr;
  }
  
  .disclaimer-grid {
    grid-template-columns: 1fr;
  }
  
  .founder-intro {
    flex-direction: column;
    text-align: center;
  }
  
  .founder-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .timeline-item {
    flex-direction: column;
    text-align: center;
  }
  
  .timeline-marker {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .signature-card {
    flex-direction: column;
    text-align: center;
  }
  
  .signature-visual {
    margin-left: 0;
    margin-top: 20px;
  }
  
  .promise-quote {
    font-size: 1.8rem;
  }
  
  .quote-mark {
    font-size: 2.5rem;
  }
}

/* === Settings Section with Help Tooltips === */
.settings-section {
  margin-top: 16px;
  margin-bottom: 2rem;
}

.settings-section .filter-grid {
  margin-left: 16px;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.setting-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--primary-green);
  background-color: transparent;
  color: var(--primary-green);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: 4px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.setting-help-btn:hover {
  background-color: var(--primary-green);
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

.setting-help-btn:focus {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.setting-help-btn:active {
  transform: scale(0.95);
}

/* Ensure tooltip doesn't interfere with layout */
.app-tooltip {
  font-family: var(--font-body);
}

/* Settings section responsive layout */
@media (max-width: 768px) {
  .setting-help-btn {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }
}

/* --- Meta-Affiliate Attribution Banner --- */
#meta-affiliate-attribution-banner {
  position: fixed;
  top: 100px; /* Position below the header (header height is 100px) */
  left: 0;
  right: 0;
  z-index: 999; /* Just below header's z-index of 1000 */
  width: 100%;
}

/* Adjust main content when attribution banner is visible */
body.has-attribution-banner main {
  padding-top: 50px; /* Additional padding for banner height on desktop */
}

/* Mobile-specific adjustments for main content with attribution banner */
@media (max-width: 768px) {
  body.has-attribution-banner main {
    padding-top: 0; /* Reset since body padding handles it */
  }
}

.meta-affiliate-attribution-banner {
  background: #ffffff;
  border: 3px double var(--success-green);
  border-top: none; /* Remove top border since it touches header */
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: slideInFromTop 0.3s ease-out;
}

.attribution-message {
  font-size: 0.95rem;
  color: var(--text-dark);
  font-weight: 500;
}

.attribution-message .affiliate-name {
  font-weight: 700;
  color: var(--primary-green);
}

.attribution-dismiss {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.attribution-dismiss:hover {
  background: var(--border-color);
  color: var(--text-dark);
  transform: scale(1.1);
}

/* Responsive attribution banner */
@media (max-width: 768px) {
  #meta-affiliate-attribution-banner {
    top: 125px; /* Position properly below mobile header to avoid overlap */
    position: fixed;
  }
  
  /* When attribution banner is visible on mobile */
  body.has-attribution-banner {
    padding-top: 175px; /* Header + banner + extra spacing for content */
  }
  
  .meta-affiliate-attribution-banner {
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 45px;
  }
  
  .attribution-message {
    font-size: 0.85rem;
    line-height: 1.3;
    flex: 1;
  }
  
  .attribution-dismiss {
    align-self: center;
    margin-left: var(--spacing-xs);
    flex-shrink: 0;
  }
}

/* Specific adjustments for smaller mobile devices */
@media (max-width: 480px) {
  #meta-affiliate-attribution-banner {
    top: 125px; /* Consistent positioning for small screens */
  }
  
  body.has-attribution-banner {
    padding-top: 175px; /* Maintain proper spacing */
  }
  
  .meta-affiliate-attribution-banner {
    min-height: 40px; /* Slightly smaller on very small screens */
    padding: 6px 10px;
  }
  
  .attribution-message {
    font-size: 0.8rem;
  }
}

/* --- Meta-Affiliate Header (Clean Implementation) --- */
.meta-affiliate-header {
  background: var(--theme-primary); /* Solid color - no gradient */
  color: white;
  padding: var(--spacing-md) 2.5rem;
  margin: 0 0 0 0;
  border-radius: 1.5rem 1.5rem 0 0;
  position: relative;
  font-family: var(--font-body);
  text-align: center;
  animation: slideInFromTop 0.3s ease-out;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--theme-border);
  border-bottom: none;
}

.endorsement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.notification-message {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-heading);
  flex: 1;
  margin-right: var(--spacing-md);
}

.endorsement-leaf {
  width: 50px;
  height: 50px;
  filter: brightness(0) saturate(100%) invert(100%);
  opacity: 0.9;
}

/* --- Meta-Affiliate Vendor Filter Section --- */
.meta-affiliate-vendor-filter {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  border: 2px solid var(--primary-green);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  animation: slideInFromTop 0.3s ease-out;
}

.meta-affiliate-vendor-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.vendor-header-leaf {
  width: 30px;
  height: 30px;
  filter: brightness(0) saturate(100%) invert(100%);
  opacity: 0.9;
}

.vendor-header-title {
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-heading);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.meta-affiliate-vendor-content {
  background: white;
  padding: var(--spacing-md);
}

.meta-affiliate-vendor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.meta-affiliate-vendor-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--light-green-bg);
  border: 2px solid var(--primary-green);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.meta-affiliate-vendor-item:hover {
  background: white;
  border-color: var(--secondary-green);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.meta-affiliate-vendor-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-green);
  cursor: pointer;
}

.meta-affiliate-vendor-item label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meta-affiliate-vendor-item .vendor-count {
  background: var(--primary-green);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-left: var(--spacing-sm);
}

.meta-affiliate-vendor-item input[type="checkbox"]:checked + label {
  color: var(--primary-green);
}

.meta-affiliate-vendor-item input[type="checkbox"]:not(:checked) + label .vendor-count {
  background: var(--text-light);
}

/* Container when meta-affiliate header is active */
.modern-filter-section.meta-affiliate-body {
  border-radius: 0 0 1.5rem 1.5rem;
  margin-bottom: 2.5rem;
  margin-top: 0;
}

/* Responsive meta-affiliate header */
@media (max-width: 900px) {
  .meta-affiliate-header {
    padding: var(--spacing-sm) 0.7rem;
    border-radius: 1.1rem 1.1rem 0 0;
  }
  
  .modern-filter-section.meta-affiliate-body {
    border-radius: 0 0 1.1rem 1.1rem;
  }
}

@media (max-width: 600px) {
  .meta-affiliate-header {
    padding: var(--spacing-sm) 0.5rem;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  
  .modern-filter-section.meta-affiliate-body {
    border-radius: 0 0 0.7rem 0.7rem;
  }
  
  .notification-message {
    font-size: 0.9rem;
  }
}

/* Legacy class name support */
.meta-affiliate-notification {
  background: var(--theme-primary); /* Solid color - no gradient */
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 1.5rem;
  margin: 0 0 var(--spacing-md) 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  font-family: var(--font-body);
  text-align: center;
  animation: slideInFromTop 0.3s ease-out;
}

.notification-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}


.notification-close {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.notification-close:active {
  transform: scale(0.95);
}

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

/* ============================================
   TUTORIAL SYSTEM STYLES
   ============================================ */

.advanced-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.header-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.share-search-btn {
  background: var(--theme-secondary); /* Solid color - no gradient */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.share-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--theme-tertiary); /* Solid color - no gradient */
}

.share-search-btn i {
  font-size: 1.1rem;
}

.tutorial-btn {
  background: var(--theme-primary); /* Solid color - no gradient */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.tutorial-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--theme-secondary); /* Solid color - no gradient */
}

.tutorial-btn i {
  font-size: 1.1rem;
}

/* Hide button text on mobile, show only icon */
@media (max-width: 768px) {
  .tutorial-btn-text,
  .share-btn-text {
    display: none;
  }
  
  .tutorial-btn,
  .share-search-btn {
    padding: 8px 12px;
  }
  
  .header-buttons {
    gap: 8px;
  }
}

/* Tutorial Floating Footer */
.tutorial-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.97); /* Solid white overlay - no gradient */
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--primary-green);
  box-shadow: 0 -4px 20px rgba(30, 74, 53, 0.15);
  z-index: 10500; /* Higher than modals (10000) to ensure visibility on mobile */
  animation: slideUpFooter 0.3s ease-out;
}

@keyframes slideUpFooter {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.tutorial-footer-content {
  padding: 12px 20px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.tutorial-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary-green);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  font-size: 1.2rem;
  z-index: 10;
}

.tutorial-close-btn:hover {
  background: var(--secondary-green);
  transform: scale(1.1);
}

.tutorial-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 40px; /* Space for close button */
}

.tutorial-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.tutorial-text {
  flex: 1;
}

.tutorial-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--primary-green);
  margin: 0 0 2px 0;
  font-weight: 600;
}

.tutorial-description {
  color: var(--text-dark);
  line-height: 1.4;
  margin: 0;
  font-size: 0.9rem;
}

.tutorial-nav {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.tutorial-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tutorial-play-pause {
  background: var(--primary-green);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  font-size: 0.9rem;
}

.tutorial-play-pause:hover {
  background: var(--secondary-green);
  transform: scale(1.1);
}

.tutorial-play-pause.playing {
  background: var(--tertiary-green);
}

.tutorial-tts-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: var(--text-medium);
}

.tutorial-tts-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-green);
}

.tts-label {
  font-weight: 500;
}

.tutorial-nav-prev,
.tutorial-nav-next {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  font-size: 0.85rem;
}

.tutorial-nav-prev:hover:not(:disabled),
.tutorial-nav-next:hover:not(:disabled) {
  background: var(--secondary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.tutorial-nav-prev:disabled {
  display: none;
}

.tutorial-progress {
  font-size: 0.85rem;
  color: var(--text-medium);
  font-weight: 500;
  white-space: nowrap;
}

/* Mobile Tutorial Footer Styles */
@media (max-width: 768px) {
  .tutorial-footer-content {
    padding: 10px 15px;
    gap: 12px;
  }
  
  .tutorial-icon {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
  
  .tutorial-title {
    font-size: 0.95rem;
  }
  
  .tutorial-description {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  
  .tutorial-nav-prev,
  .tutorial-nav-next {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
  
  .tutorial-progress {
    font-size: 0.8rem;
  }
  
  /* Hide previous button text on mobile */
  .tutorial-nav-prev i {
    margin: 0;
  }
  
  .tutorial-nav-prev:not(:disabled) {
    min-width: auto;
  }
  
  /* Compact layout on very small screens */
  @media (max-width: 480px) {
    .tutorial-footer-content {
      flex-wrap: wrap;
      padding: 8px 10px;
    }
    
    .tutorial-info {
      width: 100%;
      margin-right: 30px;
      margin-bottom: 8px;
    }
    
    .tutorial-nav {
      width: 100%;
      justify-content: space-between;
    }
    
    .tutorial-controls {
      gap: 8px;
    }
    
    .tutorial-play-pause {
      width: 28px;
      height: 28px;
      font-size: 0.8rem;
    }
    
    .tts-label {
      display: none;
    }
    
    .tutorial-description {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}

/* Highlight active tutorial element */
[data-tutorial].tutorial-active,
.tutorial-active {
  position: relative;
  z-index: 10400; /* Below tutorial footer (10500) but above most content */
  box-shadow: 0 0 0 3px var(--primary-green), 0 0 20px rgba(30, 74, 53, 0.4);
  animation: tutorialPulse 1.5s infinite;
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* Special styling for inline elements like h4 */
h4.tutorial-active {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(30, 74, 53, 0.05);
}

@keyframes tutorialPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--primary-green), 0 0 20px rgba(30, 74, 53, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px var(--primary-green), 0 0 30px rgba(30, 74, 53, 0.6);
    transform: scale(1.01);
  }
}

@keyframes tutorialBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Tutorial dropdown active state */
.tutorial-dropdown-active {
  outline: 2px solid var(--primary-green) !important;
  outline-offset: 2px;
}

  
  .notification-close {
    width: 28px;
    height: 28px;
  }
}