/* Nutrition page styles extracted */
/* Ensure #main has minimal top spacing */
#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.nutrition-nav { background:#ff9800; color:#fff; padding:1rem 0; position: sticky; top:0; z-index:100; }
.nutrition-nav .container { display:flex; justify-content:space-between; align-items:center; padding:0 24px; }
.nutrition-nav .logo img { height:67px; width:auto; filter: brightness(0) invert(1); }
.nutrition-nav .nav .menu a { color:#fff; }
.nutrition-nav .nav .menu a:hover { color:#ffd700; }
.nutrition-nav .btn.primary { background:#ffd700; color:#ff9800; }
.nutrition-nav .btn.primary:hover { background:#ffed4e; }

/* Disable logo animation on nutrition category pages */
body:has(main #main .nutrition-category-products) .site-header.at-top .logo img,
body:has(main #main .category-menu-wrapper) .site-header.at-top .logo img {
  height: 58px !important;
  max-height: calc(var(--header-height) - 22px) !important;
  transform: scale(1) !important;
}

body:has(main #main .nutrition-category-products) .site-header .logo img,
body:has(main #main .category-menu-wrapper) .site-header .logo img {
  height: 58px !important;
  max-height: calc(var(--header-height) - 22px) !important;
  transform: scale(1) !important;
}

/* Fallback for browsers without :has support - use class-based approach */
body.nutrition-category-page .site-header.at-top .logo img,
body.nutrition-category-page .site-header .logo img {
  height: 58px !important;
  max-height: calc(var(--header-height) - 22px) !important;
  transform: scale(1) !important;
}

@media (min-width: 1025px) {
  body:has(main #main .nutrition-category-products) .site-header.at-top .logo img,
  body:has(main #main .category-menu-wrapper) .site-header.at-top .logo img {
    height: 58px !important;
    max-height: calc(var(--header-height) - 22px) !important;
    transform: scale(1) !important;
  }
  
  body.nutrition-category-page .site-header.at-top .logo img {
    height: 58px !important;
    max-height: calc(var(--header-height) - 22px) !important;
    transform: scale(1) !important;
  }
}

/* Nutrition Hero Section - Full width photo */
.nutrition-hero {
  --hero-padding-top: 120px;
  padding: var(--hero-padding-top) 0 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}

.nutrition-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: transparent;
  animation: float 20s ease-in-out infinite;
  z-index: 0;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}

.nutrition-hero .hero-content h1 {
  font-family: 'Source Serif Pro', 'Times New Roman', Times, serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #f4ebc9;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  animation: fadeInUp 0.8s ease;
  letter-spacing: 0.01em;
}

.nutrition-hero .hero-content p {
  font-size: clamp(16px, 2vw, 20px);
  color: #f8f4e6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  max-width: 600px;
  margin: 0 auto 32px;
  text-align: center;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.coming-soon { text-align:center; padding:4rem 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* Override for fitline-products section */
#fitline-products.coming-soon {
  padding: 0 !important;
  background: #ffffff !important;
  min-height: auto !important;
  display: block !important;
  text-align: center !important;
}

/* Modern Panel Styles */
.fitline-header-panel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 3rem 0;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 10%, #f2f3f5 35%, #eef0f2 60%, #e2e6ea 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

.fitline-panel-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  padding: 0 2.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fitline-panel-logo-title {
  height: 120px;
  width: auto;
  margin: 0 auto 1.5rem auto;
  display: block;
  object-fit: contain;
}

.fitline-products-title {
  display: none;
}

@media (max-width: 768px) {
  .fitline-header-panel {
    padding: 2rem 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  
  .fitline-panel-logo-title {
    height: 101px;
    margin-bottom: 1rem;
  }
  
  .fitline-products-title {
    display: none !important;
  }
}

.fitline-header-panel .fitline-products-title {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin: 0;
}

/* Below Panel Content */
.fitline-below-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 0 2rem;
}

.fitline-question-text {
  font-size: 2.25rem !important;
  color: #255e50;
  font-weight: 500;
  font-family: 'Playfair Display', serif;
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {
  .fitline-question-text {
    font-size: 1.56rem !important;
    padding-top: 1.5rem;
  }
}

.fitline-select-text {
  font-size: 1.3rem !important;
  color: #374151;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

/* Down Arrow Styles - Matching category page style */
.fitline-down-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8b6914;
  cursor: pointer;
  width: 56px;
  height: 56px;
  margin-top: 0.14rem;
  animation: bounceDown 2s ease-in-out infinite;
}

.fitline-down-arrow:hover {
  opacity: 0.8;
}

.fitline-down-arrow svg {
  width: 48px;
  height: 48px;
  stroke-width: 2.5;
}


.fitline-nutritionist-text {
  margin: 1.5rem auto;
  text-align: left;
  max-width: 800px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

.fitline-nutritionist-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
  text-align: left;
  max-width: none !important;
  width: 100% !important;
}

.fitline-nutritionist-text p:first-child {
  font-weight: 600;
  font-size: 1.15rem;
}

.fitline-nutritionist-text ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.fitline-nutritionist-text li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 0.75rem;
  padding-left: 0;
}


@media (max-width: 768px) {
  .fitline-header-panel {
    padding: 2rem 1.5rem !important;
    margin: 0 0 2rem 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .fitline-panel-logo {
    height: 101px;
  }
  
  .fitline-nutritionist-text {
    margin: 1rem 0;
    text-align: left;
  }
  
  .fitline-nutritionist-text p {
    font-size: 1rem;
  }
  
  .fitline-nutritionist-text p:first-child {
    font-size: 1.05rem;
  }
  
  .fitline-nutritionist-text li {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .coming-soon {
    padding: 1rem 0 2rem 0 !important;
  }
  
  #fitline-products.coming-soon {
    padding: 1rem 0 2rem 0 !important;
  }
}
.coming-soon p { font-size:1.2rem; color:#6c757d; max-width:600px; line-height:1.6; margin-bottom:2rem; }
#fitline-products.coming-soon .fitline-below-panel .fitline-question-text { font-size: 2.25rem !important; max-width: none !important; }
@media (max-width: 768px) {
  #fitline-products.coming-soon .fitline-below-panel .fitline-question-text { font-size: 1.56rem !important; }
}
#fitline-products.coming-soon .fitline-below-panel .fitline-select-text { font-size: 1.3rem !important; max-width: none !important; }
.nutrition-icon { font-size:4rem; margin-bottom:2rem; opacity:.7; }
.fitline-link { background:#ff9800; color:#fff; padding:12px 24px; border-radius:25px; text-decoration:none; font-weight:600; font-size:1rem; transition: all .3s ease; display:inline-block; margin-top:0; }
.fitline-link:hover { background:#ffb74d; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); color:#fff; text-decoration:none; }
.fitline-register-link { background:#255e50; }
.fitline-register-link:hover { background:#1e4a3d; }
.fitline-shop-link { background:#059669; }
.fitline-shop-link:hover { background:#047857; }

/* Product Grid Styles */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  margin-bottom: 3rem;
  align-items: stretch; /* Ensure all cards stretch to same height */
}

.products-grid .product-card {
  height: 100%; /* Ensure cards fill grid cell */
}

@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .products-grid {
    margin-bottom: 0 !important;
  }
}

.product-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #b8945a; /* Outer shadow + inner dark gold line */
  display: flex;
  flex-direction: column; /* Stack image and content vertically */
  height: 100%; /* Ensure cards have same height */
  border: 3px solid #e8d4a0; /* Gold outer border */
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.product-card:hover {
  text-decoration: none;
  color: inherit;
}

.product-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #b8945a; /* Outer shadow + inner dark gold line */
  border-width: 4px; /* Even more prominent on hover */
  border-color: #f0e0b0; /* Lighter gold on hover */
  transform: translateY(-2px);
}

/* Extra prominent double border for category page product cards - gold outer with dark green inner line */
body.nutrition-category-page .product-card {
  border: 3px solid #e8d4a0 !important; /* Gold outer border */
  box-shadow: 0 4px 20px rgba(37, 94, 80, 0.2), 0 2px 8px rgba(232, 212, 160, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #b8945a !important; /* Outer shadows + inner dark gold line */
}

body.nutrition-category-page .product-card:hover {
  border-width: 4px !important;
  border-color: #f0e0b0 !important; /* Lighter gold on hover */
  box-shadow: 0 8px 32px rgba(37, 94, 80, 0.3), 0 4px 12px rgba(240, 224, 176, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #b8945a !important; /* Enhanced shadows + inner dark gold line */
}

.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* Glass-like dark panel for category cards on main nutrition page ONLY (not category page) */
/* Category page product cards should keep original gradient styling */
body:not(.nutrition-category-page) .nutrition-products .product-card {
  position: relative;
  overflow: hidden;
  /* Ensure all cards are same size */
  aspect-ratio: 4 / 3; /* Fixed aspect ratio for consistent sizing */
  height: 100%;
  /* Double border: gold outer with dark gold inner line */
  border: 3px solid #e8d4a0 !important; /* Gold outer border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #b8945a !important; /* Outer shadows + inner dark gold line */
}

body:not(.nutrition-category-page) .nutrition-products .product-card:hover {
  border-width: 4px !important;
  border-color: #f0e0b0 !important; /* Lighter gold on hover */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #b8945a !important; /* Enhanced shadows + inner dark gold line */
}

body:not(.nutrition-category-page) .nutrition-products .product-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: unset !important;
  display: block !important;
  z-index: 0;
}

body:not(.nutrition-category-page) .nutrition-products .product-card-divider {
  display: none; /* Hide divider on nutrition page */
}

body:not(.nutrition-category-page) .nutrition-products .product-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25) !important; /* 75% transparent dark background (50% more transparent) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 16px 16px;
  padding: 0 !important; /* Same as original - no padding */
  min-height: 90px !important; /* Same as original gradient - slim and compact */
  width: 100%;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  padding-bottom: 2.5rem !important; /* Same as original */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body:not(.nutrition-category-page) .nutrition-products .product-card-title {
  color: #f4e5c1 !important; /* Very light gold text for visibility on dark glass */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, calc(-50% - 3px)) !important; /* Same positioning as before */
  width: calc(100% - 2rem) !important;
  max-width: 100% !important;
  text-align: center;
  padding: 0.25rem 1rem !important; /* Same as before */
  box-sizing: border-box;
}

.product-card-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(212, 175, 55, 0.3) 20%, 
    rgba(212, 175, 55, 0.6) 50%, 
    rgba(212, 175, 55, 0.3) 80%, 
    transparent 100%);
  position: relative;
  margin: 0;
  box-shadow: 0 1px 3px rgba(212, 175, 55, 0.2);
}

.product-card-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(212, 175, 55, 0.8) 30%, 
    rgba(230, 190, 80, 1) 50%, 
    rgba(212, 175, 55, 0.8) 70%, 
    transparent 100%);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.product-card-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fffef0 0%, #f8eed8 20%, #f8eed8 60%, #f0dcc0 80%, #f8eed8 95%, #fffef0 100%); /* Premium multi-stop light gold gradient */
  align-items: center;
  justify-content: center;
  min-height: 90px; /* Increased to ensure 2 rows fit without trimming */
  position: relative;
  padding-bottom: 2.5rem; /* Reduced from 3rem */
}

/* Very subtle, very light gradient background for products section on category page */
body.nutrition-category-page .nutrition-products-section {
  background: linear-gradient(135deg, #f5f7f4 0%, #f4f7f3 8%, #f3f7f2 15%, #f2f7f1 22%, #f3f7f2 28%, #f2f7f1 35%, #f1f7f0 42%, #f0f7ef 48%, #f1f7f0 52%, #f2f7f1 58%, #f3f7f2 65%, #f2f7f1 72%, #f3f7f2 78%, #f4f7f3 85%, #f5f7f4 92%, #f5f7f5 100%) !important; /* Very subtle, very light gradient - almost white with hint of green */
}

/* Premium dark green gradient for product cards on category page - matches stripe color */
body.nutrition-category-page .product-card .product-card-content,
body.nutrition-category-page .nutrition-products .product-card .product-card-content,
body.nutrition-category-page .nutrition-products-section .product-card .product-card-content {
  background: linear-gradient(135deg, #1e4a3d 0%, #255e50 15%, #2d6b5a 30%, #357c6a 50%, #2d6b5a 70%, #255e50 85%, #1e4a3d 100%) !important; /* Premium multi-stop dark green gradient matching stripe */
  box-shadow: 0 2px 8px rgba(37, 94, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Subtle depth and highlight */
}

/* Light gold text color for product card titles on category page */
body.nutrition-category-page .product-card-title,
body.nutrition-category-page .product-card .product-card-title {
  color: #f4e5c1 !important; /* Very light gold text for premium look */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for readability */
}

@media (max-width: 767px) {
  body.nutrition-category-page .product-card .product-card-content,
  body.nutrition-category-page .nutrition-products .product-card-content,
  body.nutrition-category-page .nutrition-products-section .product-card-content {
    background: linear-gradient(135deg, #1e4a3d 0%, #255e50 15%, #2d6b5a 30%, #357c6a 50%, #2d6b5a 70%, #255e50 85%, #1e4a3d 100%) !important; /* Premium multi-stop dark green gradient matching stripe */
    box-shadow: 0 2px 8px rgba(37, 94, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Subtle depth and highlight */
  }
  
  body.nutrition-category-page .product-card-title,
  body.nutrition-category-page .product-card .product-card-title {
    color: #f4e5c1 !important; /* Very light gold text for premium look */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for readability */
  }
}

.product-card-title {
  text-align: center;
  width: calc(100% - 2rem);
  padding: 0.25rem 1rem; /* Simplified padding */
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 3px)); /* Moved up by 3px for desktop */
  box-sizing: border-box;
  color: #255e50 !important; /* Dark green text */
  line-height: 1.4; /* Slightly increased line-height for better spacing */
  max-height: 3.8em; /* Increased further to ensure 2 full lines fit without trimming (1.4em * 2 + generous buffer) */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.product-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #255e50;
}

.product-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 1.5rem;
  align-items: center;
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  height: auto;
  box-sizing: border-box;
}

.product-card-price {
  margin-bottom: 0;
}

.product-card-description {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  min-height: 3em;
}

/* Mobile Responsive Styles */
@media (max-width: 767px) {
  section.coming-soon {
    padding: 1rem 0 2rem 0 !important;
  }
  
  div.nutrition-products {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .nutrition-products .products-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    padding: 0 1rem !important;
    max-width: 100% !important;
    width: calc(100% - 2rem) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  
  .nutrition-products .product-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .nutrition-products .fitline-products-title {
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  
  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-width: 3px !important; /* Prominent gold border on mobile */
    border-radius: 14px;
  }
  
  /* Extra prominent double border for category page product cards on mobile - gold outer with dark green inner line */
  body.nutrition-category-page .product-card {
    border-width: 3px !important;
    border-color: #e8d4a0 !important; /* Gold outer border */
    box-shadow: inset 0 0 0 1px #b8945a !important; /* Inner dark gold line */
  }
  
  body.nutrition-category-page .product-card:hover {
    border-width: 4px !important;
    border-color: #f0e0b0 !important; /* Lighter gold on hover */
    box-shadow: inset 0 0 0 1px #b8945a !important; /* Inner dark gold line */
  }
  
  /* Nutrition page category cards - glass effect on mobile (main page only, not category page) */
  body:not(.nutrition-category-page) .nutrition-products .product-card {
    aspect-ratio: 4 / 3; /* Fixed aspect ratio for consistent sizing */
    /* Double border: gold outer with dark gold inner line */
    border: 3px solid #e8d4a0 !important; /* Gold outer border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #b8945a !important; /* Outer shadows + inner dark gold line */
  }
  
  body:not(.nutrition-category-page) .nutrition-products .product-card:hover {
    border-width: 4px !important;
    border-color: #f0e0b0 !important; /* Lighter gold on hover */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #b8945a !important; /* Enhanced shadows + inner dark gold line */
  }
  
  body:not(.nutrition-category-page) .nutrition-products .product-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset !important;
    display: block !important;
  }
  
  body:not(.nutrition-category-page) .nutrition-products .product-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.25) !important; /* 75% transparent dark background (50% more transparent) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 12px 12px;
    padding: 0 !important; /* Same as original */
    min-height: 70px !important; /* Same as original mobile - slim and compact */
    padding-bottom: 2.25rem !important; /* Same as original mobile */
  }
  
  body:not(.nutrition-category-page) .nutrition-products .product-card-title {
    color: #f4e5c1 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Same as original mobile */
    width: calc(100% - 2.5rem) !important;
    max-width: 100% !important;
    font-family: 'Source Serif Pro', 'Times New Roman', Times, serif !important;
    font-size: clamp(22px, 4vw, 30px) !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Regular product cards (not nutrition page) - keep original styles */
  body.nutrition-category-page .product-card img {
    aspect-ratio: 4 / 3;
    padding: 0;
    margin: 0;
    width: 100%;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
  }
  
  body.nutrition-category-page .product-card h3,
  body.nutrition-category-page .product-card-title {
    font-family: 'Source Serif Pro', 'Times New Roman', Times, serif !important;
    font-size: clamp(22px, 4vw, 30px) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #255e50 !important; /* Dark green text */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    min-height: 40px !important;
    width: calc(100% - 2.5rem) !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important; /* Keep centered on mobile */
  }
  
  body.nutrition-category-page .product-card-content {
    padding: 0.75rem 1rem 2.25rem 1rem !important; /* Reduced padding */
    min-height: 70px !important; /* Reduced from 80px */
  }
  
  .product-card p {
    font-size: 0.9rem;
    min-height: auto;
  }
  
  .product-card-footer {
    padding: 0 !important;
    gap: 0.25rem !important;
    position: absolute !important;
    bottom: 0.75rem !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .nutrition-products h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Nutrition benefit cards - glass panel touches edges on mobile */
  .nutrition-benefit-item-image > div {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 32px 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 575px) {
  section.coming-soon {
    padding: 1rem 0 2rem 0 !important;
  }
  
  div.nutrition-products {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .nutrition-products .products-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1rem !important;
    gap: 1.25rem;
    max-width: 100% !important;
    width: calc(100% - 2rem) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  
  .nutrition-products .product-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .nutrition-products .fitline-products-title {
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  
  .product-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  
  .product-card {
    border-width: 1px;
    border-radius: 12px;
  }
  
  .product-card img {
    aspect-ratio: 4 / 3;
    padding: 0;
    margin: 0;
    width: 100%;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
  }
  
  .product-card h3,
  .product-card-title {
    font-family: 'Source Serif Pro', 'Times New Roman', Times, serif !important;
    font-size: clamp(20px, 4.5vw, 28px) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    color: #255e50 !important; /* Dark green text */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    min-height: 40px !important;
    width: calc(100% - 2.5rem) !important;
    box-sizing: border-box !important;
  }
  
  .product-card-content {
    padding: 0.75rem 1rem 2.25rem 1rem !important; /* Reduced padding */
    min-height: 70px !important; /* Reduced from 80px */
  }
  
  .product-card-footer {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  
  .product-card p {
    font-size: 0.85rem;
  }
  
  .product-card-footer {
    padding: 0 !important;
    gap: 0.25rem !important;
    position: absolute !important;
    bottom: 0.75rem !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .nutrition-products h2 {
    font-size: 1.25rem !important;
    padding: 0 0.5rem;
  }
}

/* Distributor benefit cards - metallic silver premium styling */
.distributor-benefit-card {
  position: relative;
  overflow: hidden;
}

.distributor-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
}

.distributor-benefit-card:hover > div[style*="position: absolute"] {
  left: 100% !important;
}

/* Category Menu - Scrollable Stripe with Thumbnails */
.category-menu-wrapper {
  position: relative; /* Relative for fade positioning */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(135deg, #1e4a3d 0%, #255e50 15%, #2d6b5a 30%, #357c6a 50%, #2d6b5a 70%, #255e50 85%, #1e4a3d 100%) !important; /* Premium multi-stop dark green gradient matching product cards */
  padding: 0.5rem 0 0.25rem 0; /* Reduced bottom padding - stripe ends just below text */
  margin-bottom: 0;
  border-radius: 0;
  border-top: 3px solid #e8d4a0; /* Gold outer border - top */
  border-bottom: 2px solid rgba(232, 212, 160, 0.6); /* Lighter, less prominent bottom border */
  box-shadow: inset 0 1px 0 #b8945a, inset 0 -1px 0 rgba(184, 148, 90, 0.4); /* Dark gold inner line on top, lighter on bottom */
  overflow: hidden; /* Contain fade effects within wrapper */
}

.category-menu-thumbnail {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


.category-menu-label {
  transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-menu-item {
  transition: min-width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove gap between sections */
.nutrition-category-products {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important; /* No top padding - breadcrumb handles its own spacing */
  padding-bottom: 0 !important;
}

.nutrition-content-background {
  margin-top: 0 !important;
  padding-top: 120px !important;
  padding-bottom: 80px !important;
  display: block;
}

/* Category title spacing inside glass panel */
.category-glass-panel .category-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 1rem !important; /* Similar gap to description padding */
}

/* Glass-like panel wrapper for category title and description */
.category-glass-panel {
  background: rgba(0, 0, 0, 0.3) !important; /* Dark glass background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 2rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Category description inside glass panel */
.category-glass-panel .category-description {
  background: transparent !important; /* Remove background from description since it's inside glass panel */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 18px !important; /* Larger text on desktop */
}

.category-glass-panel .category-description p,
.category-glass-panel .category-description ul,
.category-glass-panel .category-description li {
  color: #f4ebc9 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: inherit;
}

.category-description ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.category-description li {
  margin-bottom: 0.5rem;
}

/* Ensure no gap between stripe and background */
section.nutrition-category-products + section.nutrition-content-background {
  margin-top: 0 !important;
  padding-top: 120px !important; /* Keep top padding for title spacing */
  line-height: 0;
}

section.nutrition-content-background .container {
  line-height: normal;
}

.category-menu-scroll {
  overflow-x: auto;
  overflow-y: hidden; /* Keep hidden for scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
  position: relative;
  padding: 0.25rem 0; /* No extra padding - stripe stays short */
}

/* Center category items on desktop only when all items fit (no scrolling needed) */
@media (min-width: 1025px) {
  .category-menu-scroll.no-scroll-needed {
    display: flex;
    justify-content: center; /* Center items when all fit without scrolling */
  }
  
  .category-menu-scroll.no-scroll-needed .category-menu-container {
    margin: 0 auto; /* Center the container when it fits */
  }
}

.category-menu-scroll::-webkit-scrollbar {
  height: 8px;
}

.category-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.category-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4); /* Light gold scrollbar */
  border-radius: 4px;
  transition: background 0.3s ease;
}

.category-menu-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6);
}

.category-menu-container {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  min-width: max-content;
  align-items: flex-start; /* Align items to top by default */
}

/* Active category item vertically centered */
.category-menu-item-active {
  align-self: center; /* Vertically center the active item */
  margin-top: 0 !important; /* Reset margin for centering */
}

/* Inactive items - thumbnails align horizontally, positioned lower */
.category-menu-item:not(.category-menu-item-active) {
  align-self: flex-start; /* Align to top so thumbnails are in one line */
  margin-top: 10px; /* Move inactive items 10px lower from top */
}

.category-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  min-width: 120px;
  transition: all 0.3s ease;
  padding: 0.25rem;
  border-radius: 12px;
}

.category-menu-item:hover {
  transform: translateY(-4px);
}

.category-menu-item:hover .category-menu-thumbnail {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
  filter: brightness(1); /* Brighten on hover */
}

.category-menu-item:hover .category-menu-label {
  color: #e0ceaa; /* Lighter gold on hover */
}

.category-menu-item-active {
  z-index: 10;
  position: relative;
  cursor: default !important;
  pointer-events: none !important;
}

.category-menu-item-active:hover {
  transform: none !important;
}

.category-menu-item-active:hover .category-menu-thumbnail {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

.category-menu-item-active:hover .category-menu-label {
  color: #f4e5c1 !important; /* Keep active color on hover */
}

.category-menu-item-active .category-menu-thumbnail {
  width: 110px !important; /* 10% bigger (100px * 1.1) */
  height: 110px !important;
  border-color: #f4e5c1 !important; /* Very light gold */
  border-width: 2px !important; /* Thinner border */
  box-shadow: 0 6px 20px rgba(244, 229, 193, 0.3), 0 0 0 3px rgba(244, 229, 193, 0.08) !important;
  animation: activeCategoryEntrance 0.6s ease-out; /* Only entrance animation, no pulse */
  transform: scale(1);
  filter: brightness(1) !important; /* Active thumbnail stays bright */
}

.category-menu-item-active .category-menu-label {
  color: #f4e5c1 !important; /* Very light gold for active */
  font-weight: 700 !important; /* Bolder text */
  font-size: 1rem !important; /* Original size */
  margin-top: 0.25rem;
  margin-bottom: 0; /* No bottom margin - arrow positioned absolutely */
  animation: textGrowShrink 2s ease-in-out infinite;
  transform-origin: center;
}

.category-menu-thumbnail {
  width: 85px; /* 15% smaller than base (100px * 0.85) */
  height: 85px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: none; /* No border for inactive */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: #f3f4f6;
  position: relative;
  filter: brightness(0.65); /* 35% darker for inactive thumbnails */
}

/* Brighten inactive thumbnails on hover */
.category-menu-item:hover .category-menu-thumbnail {
  filter: brightness(1); /* Full brightness on hover */
}

/* Animation for active category */
@keyframes activeCategoryPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3), 0 0 0 3px rgba(212, 175, 55, 0.08);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4), 0 0 0 4px rgba(212, 175, 55, 0.12);
    transform: scale(1.02);
  }
}

/* Down arrow animation for active category */
@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Text pulsating animation for active category */
@keyframes textPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes textGrowShrink {
  0%, 100% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(1.1); /* 10% larger */
  }
}


/* Entrance animation for active category on page load */
@keyframes activeCategoryEntrance {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.category-menu-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-menu-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #d4c29a !important; /* Light gold - 20% darker than active */
  text-align: center;
  transition: all 0.3s ease;
  max-width: 100px;
  word-wrap: break-word;
  line-height: 1.3;
}

/* Fade indicators for scrollable menu */
.category-menu-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease;
  height: 100%; /* Constrain to wrapper height */
}

.category-menu-fade-left {
  left: 0;
  background: linear-gradient(to right, #1e4a3d 0%, rgba(30, 74, 61, 0.8) 30%, rgba(30, 74, 61, 0.4) 60%, rgba(30, 74, 61, 0) 100%); /* Match gradient start color */
}

.category-menu-fade-right {
  right: 0;
  background: linear-gradient(to left, #1e4a3d 0%, rgba(30, 74, 61, 0.8) 30%, rgba(30, 74, 61, 0.4) 60%, rgba(30, 74, 61, 0) 100%); /* Match gradient end color */
}

/* Show/hide fade indicators based on scroll position */
.category-menu-scroll.scrolled-left .category-menu-fade-left {
  opacity: 0;
}

.category-menu-scroll.scrolled-right .category-menu-fade-right {
  opacity: 0;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .category-menu-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 0.25rem;
    padding-bottom: 0.125rem; /* Reduced bottom padding - stripe ends just below text */
    margin-bottom: 0;
    border-top: 2px solid #e8dcc0; /* Light gold top border */
    border-bottom: none; /* Removed bottom golden divider */
    overflow: visible; /* Allow arrow to protrude below stripe */
  }
  
  .category-menu-scroll {
    padding: 0.125rem 0; /* No extra padding - stripe stays short */
    overflow-y: hidden; /* Keep hidden for scrolling */
  }
  
  .category-menu-container {
    gap: 0.75rem;
    padding: 0 0.75rem;
    align-items: flex-start; /* Align items to top by default on mobile */
  }
  
  /* Active category item vertically centered on mobile */
  .category-menu-item-active {
    align-self: center !important; /* Vertically center the active item */
    margin-top: 0 !important; /* Reset margin for centering */
  }
  
  /* Inactive items - thumbnails align horizontally, positioned lower on mobile */
  .category-menu-item:not(.category-menu-item-active) {
    align-self: flex-start !important; /* Align to top so thumbnails are in one line */
    margin-top: 10px; /* Move inactive items 10px lower from top on mobile */
  }
  
  /* Active category item vertically centered on mobile */
  .category-menu-item-active {
    align-self: center !important; /* Vertically center the active item */
    margin-top: 0 !important; /* Reset margin for centering */
  }
  
  .category-menu-item {
    min-width: 100px;
  }
  
  .category-menu-item-active {
    min-width: 120px !important;
  }
  
  .category-menu-thumbnail {
    width: 68px; /* 15% smaller than base (80px * 0.85) */
    height: 68px;
    filter: brightness(0.65); /* 35% darker for inactive thumbnails on mobile */
  }
  
  /* Brighten inactive thumbnails on hover - mobile */
  .category-menu-item:hover .category-menu-thumbnail {
    filter: brightness(1) !important; /* Brighten on hover */
  }
  
  .category-menu-item-active .category-menu-thumbnail {
    width: 88px !important; /* 10% bigger on mobile (80px * 1.1) */
    height: 88px !important;
    filter: brightness(1) !important; /* Active thumbnail stays bright on mobile */
  }
  
  .category-menu-label {
    font-size: 0.85rem;
    max-width: 80px;
  }
  
  .category-menu-item-active .category-menu-label {
    font-size: 0.95rem !important; /* Original size on mobile */
    max-width: 100px !important;
    animation: textGrowShrink 2s ease-in-out infinite; /* Same animation on mobile */
    transform-origin: center;
  }
  
  .category-menu-fade {
    width: 40px;
  }
  
  .category-menu-wrapper {
    border-top: 3px solid #e8d4a0 !important; /* Gold outer border - top */
    border-bottom: 2px solid rgba(232, 212, 160, 0.6) !important; /* Lighter, less prominent bottom border */
    box-shadow: inset 0 1px 0 #b8945a, inset 0 -1px 0 rgba(184, 148, 90, 0.4) !important; /* Dark gold inner line on top, lighter on bottom */
    overflow: hidden; /* Contain fade effects */
  }
  
  
  .category-menu-fade-left {
    background: linear-gradient(to right, #1e4a3d 0%, rgba(30, 74, 61, 0.8) 30%, rgba(30, 74, 61, 0.4) 60%, rgba(30, 74, 61, 0) 100%); /* Match gradient start color */
  }
  
  .category-menu-fade-right {
    background: linear-gradient(to left, #1e4a3d 0%, rgba(30, 74, 61, 0.8) 30%, rgba(30, 74, 61, 0.4) 60%, rgba(30, 74, 61, 0) 100%); /* Match gradient end color */
  }
  
  /* Smaller description text on mobile */
  .category-glass-panel {
    padding: 1.5rem !important; /* Slightly less padding on mobile */
  }
  
  .category-glass-panel .category-description {
    font-size: 16px !important;
  }
}

/* Breadcrumb Navigation - Consistent styling for category and product pages */
.breadcrumb-nav {
  padding: 0.125rem 2rem; /* Minimal top/bottom padding for compact look */
  margin-top: 0;
  margin-bottom: 0;
  background: transparent; /* Default transparent */
}

/* Premium solid background for breadcrumb - no gradient */
body.nutrition-category-page .breadcrumb-nav,
.nutrition-category-products .breadcrumb-nav {
  background: white !important; /* White background - no gradient */
  box-shadow: 0 2px 8px rgba(205, 199, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Enhanced shadow for premium depth */
  border-radius: 0; /* No border radius for full-width look */
  border-bottom: none !important; /* No bottom divider on category page */
  /* Extend to full width on desktop */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  padding-left: 2rem !important; /* Horizontal padding for content */
  padding-right: 2rem !important;
  margin-top: 0 !important; /* Remove any top margin */
  padding-top: 0.125rem !important; /* Minimal top padding */
  position: relative; /* Ensure proper positioning */
}

/* Ensure container doesn't constrain breadcrumb on category page */
.nutrition-category-products .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important; /* Allow breadcrumb to extend */
}

/* Ensure container doesn't constrain breadcrumb on product detail page */
.nutrition-product-detail .container {
  overflow: visible !important; /* Allow breadcrumb to extend */
}

/* Product detail page specific breadcrumb adjustments */
.nutrition-product-detail .breadcrumb-nav {
  position: relative; /* Normal flow - will scroll away naturally */
  z-index: 100;
  margin-top: 0;
  margin-bottom: 30px !important; /* 30px padding below breadcrumb on desktop */
  padding: 0.125rem 2rem; /* Same minimal padding as category page */
  background: white !important; /* White background - no gradient */
  box-shadow: 0 2px 8px rgba(205, 199, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; /* Enhanced shadow for premium depth */
  border-radius: 0; /* No border radius for full-width look */
  border-bottom: 2px solid #e8d4a0 !important; /* Nice gold border divider at bottom for product detail page */
  /* Extend to full width on desktop */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  padding-left: 2rem !important; /* Horizontal padding for content */
  padding-right: 2rem !important;
  padding-top: 0.125rem !important; /* Minimal top padding */
  padding-bottom: 2px !important; /* Tiny bottom padding */
}

/* Product detail page title panel spacing adjustments */
.nutrition-product-detail .product-header-panel {
  margin-top: 0 !important; /* Align with top edge of main photo on desktop */
  margin-bottom: 0.75rem !important; /* Reduced gap between title and description */
  background: #ffffff !important; /* White background - gradient only in title panel */
}

.nutrition-product-detail .product-title-panel {
  padding-top: 2.25rem !important; /* Add a little top padding */
  padding-bottom: 0 !important; /* Keep bottom padding minimal */
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 20%, #ffe8cc 60%, #ffd9a3 80%, #ffe8cc 95%, #fff5e6 100%) !important; /* Premium multi-stop light orange gradient - only in title/subtitle section */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; /* Inner highlight */
}

/* Green pastel badge for category breadcrumb link on product detail page - match category page badge exactly, but clickable */
.nutrition-product-detail .breadcrumb-nav .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo) {
  color: #255e50 !important; /* Dark green text - same as category page */
  font-weight: 600 !important; /* Same weight as category page */
  cursor: pointer !important; /* Show pointer cursor to indicate clickability */
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important; /* Pastel green badge - exact same as category page */
  padding: 0.25rem 0.75rem !important; /* Same padding as category page */
  border-radius: 12px !important; /* Same rounded corners as category page */
  box-shadow: 0 1px 3px rgba(37, 94, 80, 0.15) !important; /* Same subtle shadow as category page */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition on hover and unhover */
}

/* Hover effect for category link on product detail page - darker background and grow */
.nutrition-product-detail .breadcrumb-nav .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo):hover {
  background: linear-gradient(135deg, #d4e6d5 0%, #b8d9ba 100%) !important; /* Darker green background */
  color: #255e50 !important; /* Keep text color */
  transform: scale(1.05) !important; /* Grow a little */
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* Hover effect for breadcrumb logo on all pages - darker background and grow */
.breadcrumb-link.breadcrumb-logo:hover {
  background: rgba(37, 94, 80, 0.15) !important; /* Darker green background */
  transform: scale(1.05) !important; /* Grow a little */
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
}

/* Orange pastel badge for active breadcrumb (product name) on product detail page */
.nutrition-product-detail .breadcrumb-link.breadcrumb-current {
  color: #e65100; /* Orange text */
  background: linear-gradient(135deg, #ffe8cc 0%, #ffd9a3 100%); /* Pastel orange badge */
}

.nutrition-product-detail .breadcrumb-link.breadcrumb-current:hover {
  background: linear-gradient(135deg, #ffe8cc 0%, #ffd9a3 100%); /* Keep same background */
  color: #e65100;
}

@media (max-width: 768px) {
  .nutrition-product-detail .breadcrumb-nav {
    margin-top: 0;
    margin-bottom: 20px !important; /* 20px padding below breadcrumb on mobile */
    padding: 0.125rem 1rem !important; /* Same minimal padding as category page mobile */
    margin-left: calc(50% - 50vw) !important; /* Extend to left edge */
    margin-right: calc(50% - 50vw) !important; /* Extend to right edge */
    width: 100vw !important; /* Full viewport width */
  }
  
  /* Product detail page title panel spacing adjustments - mobile */
  .nutrition-product-detail .product-header-panel {
    margin-top: 0.5rem !important; /* Reduced gap between photo and title panel on mobile */
    margin-bottom: 0.75rem !important; /* Reduced gap between title and description on mobile */
    background: #ffffff !important; /* White background - gradient only in title panel */
  }
  
  .nutrition-product-detail .product-title-panel {
    padding-top: 2rem !important; /* Increased top padding on mobile - from 1.75rem to 2rem */
    padding-bottom: 0 !important; /* Keep bottom padding minimal */
    background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 20%, #ffe8cc 60%, #ffd9a3 80%, #ffe8cc 95%, #fff5e6 100%) !important; /* Premium multi-stop light orange gradient - only in title/subtitle section */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; /* Inner highlight */
  }
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* Ensure breadcrumb list content is centered on category page */
.nutrition-category-products .breadcrumb-list {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0; /* No extra padding - nav handles it */
  padding-right: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: #255e50; /* Dark green to match site theme */
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition on hover and unhover */
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
}

.breadcrumb-logo-img {
  height: 3.02rem; /* 15% bigger than previous (2.625rem * 1.15) */
  width: auto;
  display: block;
  vertical-align: middle;
}

.breadcrumb-link:hover {
  color: #255e50; /* Keep original color */
  text-decoration: none;
}

/* Hover effect for category link on category page - darker background and grow */
.nutrition-category-page .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo),
.nutrition-category-products .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth transition on hover and unhover */
}

.nutrition-category-page .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo):hover,
.nutrition-category-products .breadcrumb-link:not(.breadcrumb-current):not(.breadcrumb-logo):hover {
  background: linear-gradient(135deg, #d4e6d5 0%, #b8d9ba 100%) !important; /* Darker green background */
  transform: scale(1.05) !important; /* Grow a little */
}

.breadcrumb-link.breadcrumb-current {
  color: #255e50; /* Dark green text */
  font-weight: 600;
  cursor: default;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); /* Pastel green badge */
  padding: 0.25rem 0.75rem;
  border-radius: 12px; /* More rounded for badge look */
  box-shadow: 0 1px 3px rgba(37, 94, 80, 0.15); /* Subtle shadow for depth */
}

.breadcrumb-link.breadcrumb-current:hover {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); /* Keep same background */
  color: #255e50;
  transform: none;
}

.breadcrumb-separator {
  color: #6b7280; /* Medium grey for separators */
  font-size: 0.875rem;
  margin: 0 0.25rem;
  user-select: none;
  font-weight: 600;
}

/* Mobile breadcrumb adjustments */
@media (max-width: 768px) {
  /* Ensure breadcrumb nav extends to left edge on mobile */
  .breadcrumb-nav {
    margin-left: calc(50% - 50vw) !important; /* Extend to left edge */
    margin-right: calc(50% - 50vw) !important; /* Extend to right edge */
    width: 100vw !important; /* Full viewport width */
    padding: 0.125rem 1rem !important; /* Minimal top/bottom padding, horizontal padding for content */
  }
  
  /* Premium solid background for breadcrumb on category page - mobile - no gradient */
  body.nutrition-category-page .breadcrumb-nav,
  .nutrition-category-products .breadcrumb-nav {
    background: white !important; /* White background - no gradient */
    box-shadow: 0 2px 8px rgba(205, 199, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; /* Enhanced shadow for premium depth */
    border-bottom: none !important; /* No bottom divider on category page */
  }
  
  /* Ensure breadcrumb container doesn't constrain on mobile */
  .nutrition-category-products .container,
  .nutrition-product-detail .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Premium solid background for breadcrumb on product detail page - mobile - no gradient */
  .nutrition-product-detail .breadcrumb-nav {
    background: white !important; /* White background - no gradient */
    box-shadow: 0 2px 8px rgba(205, 199, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; /* Enhanced shadow for premium depth */
    border-bottom: 2px solid #e8d4a0 !important; /* Nice gold border divider at bottom for product detail page */
    padding-bottom: 2px !important; /* Tiny bottom padding */
  }
  
  .breadcrumb-list {
    padding-left: 0; /* No extra padding, nav already has it */
    padding-right: 0;
    flex-wrap: nowrap !important; /* Prevent wrapping to multiple lines */
    overflow: hidden; /* Hide overflow */
  }
  
  .breadcrumb-item {
    flex-shrink: 0; /* Don't shrink items */
  }
  
  .breadcrumb-item:last-child {
    flex-shrink: 1; /* Allow last item (current) to shrink and truncate */
    min-width: 0; /* Allow truncation */
    overflow: hidden;
  }
  
  .breadcrumb-link {
    font-size: 0.8125rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  .breadcrumb-link.breadcrumb-current {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important; /* Allow truncation */
    display: inline-block !important; /* Required for text-overflow */
  }
  
  .breadcrumb-item:last-child .breadcrumb-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .breadcrumb-logo-img {
    height: 2.8rem; /* 15% bigger than previous (2.4375rem * 1.15) */
  }
  
  .breadcrumb-link.breadcrumb-current {
    padding: 0.2rem 0.6rem;
  }
  
  .breadcrumb-separator {
    font-size: 0.8125rem;
    margin: 0 0.2rem;
  }
}