/* ===== RESET & VARIABLES ===== */
:root{
  --brand-primary: #ff4d8d;
  --brand-primary-dark: #e63b79;
  --brand-primary-light: #ffd1e3;
  --bs-primary: #ff4d8d;
  --bs-primary-rgb: 255, 77, 141;

  /* Primary - Fresh Green */
  --primary: #ff4d8d;
  --primary-dark: #2E7D32;
  --primary-light: #C8E6C9;
  --primary-soft: rgba(76, 175, 80, 0.1);
  
  /* Accent - Citrus #ff4d8d */
  --accent: #ff4d8d;
  --accent-dark: #ff4d8d;
  --accent-light: #FFE0B2;
  --accent-soft: rgba(255, 152, 0, 0.1);
  
  /* Berry/Red Accent */
  --berry: #E91E63;
  --berry-light: #F8BBD0;
  --berry-soft: rgba(233, 30, 99, 0.1);
  
  /* Tropical Yellow */
  --tropical: #FFEB3B;
  
  /* Neutral Colors - Premium Palette 2026 */
  --dark: #1A2A3A;
  --dark-soft: #2C3E50;
  --gray: #6C7A89;
  --gray-light: #E9ECEF;
  --light: #F8FAFC;
  --white: #FFFFFF;
  --off-white: #F9F9F9;
  
  /* Gradients */
  --gradient-citrus: linear-gradient(135deg, #ff4d8d 0%, #FF5722 100%);
  --gradient-green: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  --gradient-berry: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
  --gradient-tropical: linear-gradient(135deg, #FFEB3B 0%, #ff4d8d 100%);
  --gradient-glow: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  
  /* Shadows - Premium Depth */
  --shadow-xs: 0 2px 4px rgba(0,0,0,0.02);
  --shadow-sm: 0 4px 6px rgba(0,0,0,0.03);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-hover: 0 30px 35px -10px rgba(0,0,0,0.15);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.02);
  
  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
}

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


h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* ===== UTILITY CLASSES ===== */
.py-6 {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.section-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--gray);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== ACCESSIBILITY ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: white;
  padding: 8px;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Focus indicators */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.filter-btn:focus-visible,
.social-icon:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== MODERN NAVBAR ===== */


/* Ensure the header/nav always stays above hero/headers (fixes toggler/menu being hidden) */



@supports (backdrop-filter: blur(10px)) {

}


.navbar-brand {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.navbar .nav-link {
  position: relative;
  margin: 0 0.5rem;
  font-weight: 700;
  color: #a61e4d; /* darker for readability */
  transition: var(--transition-base);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
}

.navbar .navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--gradient-citrus);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.navbar .navbar .navbar .nav-link:hover::after,
.navbar .navbar .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar .navbar .nav-link:hover {
  color: var(--primary) !important;
}

/* ===== MODERN HERO SECTION ===== */
.hero {
  min-height: calc(100vh - 76px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* ===== MODERN HERO SECTION ===== */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/hero-juice.PNG') center/cover no-repeat;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26, 42, 58, 0.4) 0%, rgba(26, 42, 58, 0.2) 100%);
  backdrop-filter: blur(3px);
  z-index: -1;
}

/* Floating Shapes */
.floating-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  z-index: -1;
  animation: float 20s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(255,152,0,0.2) 0%, rgba(255,152,0,0) 70%);
  animation-delay: 0s;
}

.shape-2 {
  width: 400px;
  height: 400px;
  bottom: -150px;
  left: -150px;
  background: radial-gradient(circle, rgba(76,175,80,0.2) 0%, rgba(76,175,80,0) 70%);
  animation-delay: -5s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233,30,99,0.1) 0%, rgba(233,30,99,0) 70%);
  animation-delay: -10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -20px) scale(1.05); }
  50% { transform: translate(0, -40px) scale(1); }
  75% { transform: translate(-20px, -20px) scale(0.95); }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.premium-badge {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  color: var(--white);
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: var(--shadow-lg);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  line-height: 1.1;
  margin: 2rem 0 1.5rem;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-weight: 300;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ===== CONSOLIDATED FIXES (Cleaned) ===== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  color: black;
  padding-top: 0;
  background-color: var(--white);
  line-height: 1.6;
  padding: 0;
  background: linear-gradient(180deg, #fff5f9, #ffffff);
}

.navbar {
  background: #ffe4ec; /* soft light pink */
  padding: 12px 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Menu links */
.navbar .nav-link {
  color: #d63384; /* dark pink for readability */
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  position: relative;
  transition: all 0.3s ease;
}

/* Hover + active effect */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #d63384;
}

/* Modern underline hover animation */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background: #d63384;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar .nav-link:hover::after {
  width: 70%;
}

/* ===== MOBILE TOGGLER ICON VISIBILITY (Bootstrap) ===== */
/* If your <nav> doesn’t have navbar-light/dark, Bootstrap may not render the icon properly.
   This forces a dark hamburger icon that is visible on light pink backgrounds. */
.navbar .navbar-toggler {
  border: 1px solid rgba(166, 30, 77, 0.35);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 77, 141, 0.25);
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(166,30,77,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled {
  padding: 0.75rem 0;
  background: #ff4d8d;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.navbar.fixed-top {
  z-index: 2000;
}

.navbar-toggler {
  position: relative;
  z-index: 2002;
}

.navbar .navbar-collapse {
  position: relative;
  z-index: 2001;
}

.navbar-collapse {
  background: #d81b60;
  padding: 15px;
  border-radius: 10px;
}

.site-logo {
  height: 95px;         /* change: 85–110 if you want bigger/smaller */
  width: auto;
  display: block;
  transition: 0.3s ease;
}

.footer-logo-img {
  width: auto;
  height: 250px;
  max-width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .site-logo {
    height: 65px;
  }
}


.btn-primary-custom {
  background: var(--gradient-citrus);
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: var(--transition-base);
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.btn-primary-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary-custom:hover::before {
  left: 100%;
}

.btn-primary-custom:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  color: white;
}

.btn-outline-custom {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
  padding: 1rem 2.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: var(--transition-base);
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.btn-outline-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-outline-custom:hover::before {
  left: 100%;
}

.btn-outline-custom:hover {
  background: var(--white);
  color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* Floating Juice Elements */
.floating-juices {
  position: relative;
  height: 100px;
  margin-top: 3rem;
}

.juice-float {
  position: absolute;
  font-size: 3rem;
  animation: juiceFloat 6s infinite ease-in-out;
  opacity: 0.8;
}

.juice-1 {
  left: 20%;
  animation-delay: 0s;
}

.juice-2 {
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 2s;
}

.juice-3 {
  right: 20%;
  animation-delay: 4s;
}

@keyframes juiceFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--white);
  animation: fadeInUp 2s infinite;
}

.mouse {
  width: 26px;
  height: 40px;
  border: 2px solid var(--white);
  border-radius: 20px;
  margin: 0 auto 0.5rem;
  position: relative;
}

.mouse::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 8px;
  background: var(--white);
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  border-radius: 2px;
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

.scroll-indicator p {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.8;
}

/* ===== MODERN FEATURE CARDS ===== */
.features-section {
  background: var(--light);
  position: relative;
  overflow: hidden;
}

.feature-card-modern {
  background: var(--white);
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.02);
}

.feature-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient-citrus);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.feature-card-modern:hover::before {
  transform: scaleX(1);
}

.feature-card-modern:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.feature-icon-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.feature-card-modern:hover .feature-icon-wrapper {
  background: var(--primary);
  transform: scale(1.1);
}

.feature-icon-wrapper i {
  font-size: 2.5rem;
  color: var(--primary);
  transition: var(--transition-base);
}

.feature-card-modern:hover .feature-icon-wrapper i {
  color: var(--white);
}

/* ===== MODERN PRODUCT CARDS ===== */
.menu-section {
  background: var(--white);
}

.product-card-modern {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  height: 100%;
  border: 1px solid rgba(0,0,0,0.02);
}

.product-card-modern:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.product-image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}

.product-image-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.product-card-modern:hover .product-image {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.3) 100%);
  opacity: 0;
  transition: var(--transition-base);
}

.product-card-modern:hover .image-overlay {
  opacity: 1;
}

.product-badge-modern {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background: var(--gradient-citrus);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: var(--shadow-md);
}

.product-badge-modern.popular {
  background: var(--gradient-green);
}

.product-badge-modern.detox {
  background: var(--gradient-berry);
}

.product-content {
  padding: 1.5rem;
  text-align: center;
}

.product-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--dark);
  font-family: 'Playfair Display', serif;
}

.product-description {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ===== CANADIAN SECTION MODERN ===== */
.canadian-section-modern {
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.canadian-badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #FF0000 0%, #FF4D4D 100%);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(255,255,255,0.3);
}

.gradient-text-red {
  background: linear-gradient(135deg, #FF0000 0%, #FF4D4D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.farm-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.canadian-map-container {
  position: relative;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(0,0,0,0.02);
  overflow: hidden;
}

.map-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,0,0,0.05) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.map-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.map-leaves {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.maple-leaf-large {
  font-size: 4rem;
  animation: leafFloat 4s infinite ease-in-out;
  display: inline-block;
}

.maple-leaf-large:nth-child(2) {
  animation-delay: 1s;
}

.maple-leaf-large:nth-child(3) {
  animation-delay: 2s;
}

@keyframes leafFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

.province-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.province-badge {
  padding: 0.5rem 1.5rem;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-base);
  border: 1px solid transparent;
}

.province-badge:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.05);
  border-color: var(--white);
}

/* ===== LOCATION SECTION MODERN ===== */
.location-section {
  background: var(--light);
}

.location-card-modern {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  height: 100%;
  border: 1px solid rgba(0,0,0,0.02);
  transition: var(--transition-base);
}

.location-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.location-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.location-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-icon i {
  font-size: 1.5rem;
  color: var(--primary);
}

.location-details {
  margin-bottom: 2rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-light);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item i {
  color: var(--primary);
  font-size: 1.2rem;
  width: 24px;
}

.hours-modern {
  background: var(--light);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
}

.hours-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hours-header i {
  color: var(--primary);
}

.hours-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.map-container-modern {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  height: 100%;
  min-height: 400px;
  position: relative;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  filter: grayscale(0.2) contrast(1.1);
  transition: var(--transition-base);
}

.map-iframe:hover {
  filter: grayscale(0) contrast(1);
}

/* ===== MODERN FOOTER ===== */
.footer-modern {
  background: var(--dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.footer-main {
  padding: var(--spacing-3xl) 0;
  position: relative;
  z-index: 2;
}



@media (max-width: 768px) {

}


.footer-description {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  line-height: 1.8;
  max-width: 350px;
}

/* Premium Social Icons */
.social-links-modern {
  display: flex;
  gap: 1rem;
}

.social-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.3rem;
  transition: var(--transition-bounce);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(5px);
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: var(--transition-base);
}

.social-icon:hover::before {
  opacity: 1;
}

.social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  border-color: transparent;
}

.social-icon.facebook:hover {
  background: linear-gradient(135deg, #1877F2 0%, #0E5A9E 100%);
}

.social-icon.instagram:hover {
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
}

.social-icon.twitter:hover {
  background: #000000;
}

.social-icon.tiktok:hover {
  background: linear-gradient(135deg, #00F2EA 0%, #FF0050 100%);
}

.footer-title {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
  font-family: 'Playfair Display', serif;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gradient-citrus);
  border-radius: 2px;
}

.footer-menu,
.hours-list,
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li,
.hours-list li,
.contact-list li {
  margin-bottom: 1rem;
}

.footer-menu a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: var(--transition-base);
  display: inline-block;
  position: relative;
  padding-left: 0;
}

.footer-menu a::before {
  content: '→';
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: var(--transition-base);
  color: var(--accent);
}

.footer-menu a:hover {
  color: var(--white);
  transform: translateX(20px);
}

.footer-menu a:hover::before {
  opacity: 1;
  left: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding-bottom: 0.75rem;
}

.hours-list li:last-child {
  border-bottom: none;
}

.days {
  font-weight: 500;
}

.time {
  color: var(--white);
  font-weight: 600;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.7);
}

.contact-list li i {
  color: var(--accent);
  font-size: 1.2rem;
  width: 24px;
  margin-top: 3px;
}

.contact-text {
  display: flex;
  flex-direction: column;
}

.contact-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}

.contact-value {
  color: var(--white);
  font-weight: 500;
}

/* Footer Bottom */
.footer-bottom {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 2;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  margin: 0;
}

.footer-badges {
  display: flex;
  gap: 1rem;
}

.footer-badge {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  transition: var(--transition-base);
}

.footer-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.footer-badge i {
  color: var(--accent);
}

/* ===== BUTTON STYLES (Retained for compatibility) ===== */
.btn-outline-success-custom {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  border-radius: var(--radius-full);
  padding: 0.5rem 1.5rem;
  transition: var(--transition-base);
}

.btn-outline-success-custom:hover {
  background: var(--primary);
  color: white;
}

/* ===== BREADCRUMB NAVIGATION ===== */
.breadcrumb-nav {
  background: transparent;
  padding: 1rem 0;

  margin-top: 0;
}

.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--dark);
}

/* ===== PRODUCT CARDS (Original - Retained) ===== */
.product-card {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  transition: var(--transition-base);
  position: relative;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.product-image-container {
  height: 250px;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-card .card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.product-card .card-text {
  color: var(--dark);
  opacity: 0.7;
  margin-bottom: 1rem;
  flex: 1;
}

.product-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}

.product-badge .badge {
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

/* Loading state */
.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  z-index: 1;
}

.image-loading i {
  font-size: 3rem;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.product-image.loaded + .image-loading,
.product-image.loaded ~ .image-loading {
  display: none;
}

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

/* ===== CATEGORY FILTERS ===== */
.category-filters {
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.filter-btn {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition-base);
  cursor: pointer;
  min-width: 100px;
  min-height: 44px;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary);
  color: var(--white);
}

.filter-btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--white);
}

/* ===== EXPERIENCE BADGE ===== */
.experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--gradient-citrus);
  color: var(--white);
  padding: 1.5rem;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  .experience-badge {
    position: static;
    margin: 1rem auto 0;
    width: 100px;
    height: 100px;
  }
}

.experience-badge .years {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 768px) {
  .experience-badge .years {
    font-size: 1.5rem;
  }
}

/* ===== CONTACT INFO CARDS ===== */
.contact-info-card {
  background: var(--white);
  transition: var(--transition-base);
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg) !important;
}

.icon-circle {
  width: 80px;
  height: 80px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.contact-info-card:hover .icon-circle {
  transform: scale(1.1);
  background: var(--primary);
}

.contact-info-card:hover .icon-circle i {
  color: var(--white) !important;
}

/* ===== PROMO BANNER ===== */
.promo-banner-section {
  background: var(--gradient-citrus);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.promo-banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.promo-banner-section img {
  border: 5px solid var(--white);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-base);
  max-height: 300px;
  width: auto;
}

.promo-banner-section img:hover {
  transform: scale(1.02);
}

/* ===== ABOUT PAGE STYLES ===== */
.about-hero-section {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.about-hero-section::before {
  content: '🍎🍊🍋';
  position: absolute;
  font-size: 15rem;
  opacity: 0.03;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.story-image-wrapper {
  position: relative;
}

.experience-badge-modern {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--gradient-citrus);
  color: var(--white);
  padding: 1.5rem;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: pulse 2s infinite;
}

.experience-badge-modern .years {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.experience-badge-modern .text {
  font-size: 0.8rem;
  line-height: 1.2;
}

.stat-box-modern {
  transition: var(--transition-base);
  border: 1px solid rgba(0,0,0,0.02);
}

.stat-box-modern:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Team Section */
.team-section {
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
}

.team-card-modern {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  height: 100%;
  border: 1px solid rgba(0,0,0,0.02);
}

.team-card-modern:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.team-image-wrapper {
  aspect-ratio: 1;
  overflow: hidden;
}

.team-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  transition: var(--transition-base);
}

.team-card-modern:hover .team-image-placeholder {
  transform: scale(1.05);
}

.team-content {
  padding: 1.5rem;
  text-align: center;
}

.team-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--dark);
  font-family: 'Playfair Display', serif;
}

.team-role {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-bio {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ===== CONTACT PAGE STYLES ===== */
.contact-hero-section {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.contact-hero-section::before {
  content: '📱✉️📞';
  position: absolute;
  font-size: 15rem;
  opacity: 0.03;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.contact-card-modern {
  background: var(--white);
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;
}

.contact-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--gradient-citrus);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.contact-card-modern:hover::before {
  transform: scaleX(1);
}

.contact-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.contact-icon-wrapper {
  width: 90px;
  height: 90px;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.contact-card-modern:hover .contact-icon-wrapper {
  background: var(--primary);
  transform: scale(1.1);
}

.contact-icon-wrapper i {
  font-size: 2rem;
  color: var(--primary);
  transition: var(--transition-base);
}

.contact-card-modern:hover .contact-icon-wrapper i {
  color: var(--white);
}

.contact-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-base);
  border-bottom: 2px solid transparent;
}

.contact-link:hover {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
}

/* ===== Our Menu PAGE ADDITIONAL STYLES ===== */
.page-header-modern {
  padding: 120px 0 40px;
  background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

.page-header-modern::before {
  content: '🥬🍊🍎';
  position: absolute;
  font-size: 15rem;
  opacity: 0.03;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

/* ===== GRADIENT TEXT UTILITIES ===== */
.gradient-text-citrus {
  background: var(--gradient-citrus);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-green {
  background: var(--gradient-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-berry {
  background: var(--gradient-berry);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== FRUIT ICON LIST ===== */
.fruit-icon-list {
  list-style: none;
  padding-left: 0;
}

.fruit-icon-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fruit-icon-list li::before {
  content: '🍓';
  font-size: 1.2rem;
}

.fruit-icon-list li.berry::before { content: '🫐'; }
.fruit-icon-list li.citrus::before { content: '🍊'; }
.fruit-icon-list li.green::before { content: '🥬'; }
.fruit-icon-list li.tropical::before { content: '🍍'; }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
  .footer-main .row > div {
    margin-bottom: 2rem;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .farm-stats {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .stat-item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

@media (max-width: 768px) {

  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary-custom,
  .btn-outline-custom {
    width: 100%;
    max-width: 300px;
  }
  
  .floating-juices {
    display: none;
  }
  
  .farm-stats {
    justify-content: center;
  }
  
  .stat-item {
    flex: 0 0 auto;
    text-align: center;
  }
  
  .hours-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .contact-list li {
    align-items: center;
  }
  
  .social-links-modern {
    justify-content: center;
  }
  
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-menu,
  .hours-list,
  .contact-list {
    text-align: center;
  }
  
  .footer-menu a:hover {
    transform: translateX(0);
  }
  
  .hours-list li {
    align-items: center;
  }
  
  .contact-list li {
    justify-content: center;
  }
  
  .product-image-container {
    height: 200px;
  }
  
  .category-filters {
    gap: 0.5rem;
  }
  
  .breadcrumb-nav {
    padding: 0.5rem 0;
  
  margin-top: 0;
}
  
  .about-hero-section,
  .contact-hero-section,
  .page-header-modern {
    padding: 100px 0 40px;
  }
  
  .about-hero-section::before,
  .contact-hero-section::before,
  .page-header-modern::before {
    font-size: 10rem;
  }
  
  .experience-badge-modern {
    width: 100px;
    height: 100px;
    bottom: -10px;
    right: -10px;
  }
  
  .experience-badge-modern .years {
    font-size: 1.5rem;
  }
  
  .experience-badge-modern .text {
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .farm-stats {
    flex-direction: column;
    align-items: center;
  }
  
  .stat-item {
    text-align: center;
  }
  
  .map-leaves {
    gap: 1rem;
  }
  
  .maple-leaf-large {
    font-size: 3rem;
  }
  
  .province-badges {
    gap: 0.3rem;
  }
  
  .province-badge {
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
  }
  
  .product-image-container {
    height: 180px;
  }
  
  .filter-btn {
    width: calc(50% - 0.5rem);
    min-width: unset;
  }
  
  .footer-badges {
    flex-direction: column;
    width: 100%;
  }
  
  .footer-badge {
    justify-content: center;
  }
  
  .about-hero-section::before,
  .contact-hero-section::before,
  .page-header-modern::before {
    font-size: 8rem;
  }
  
  .team-image-placeholder {
    font-size: 4rem;
  }
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--light);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  .hero-shape,
  .footer,
  .btn,
  .filter-btn,
  .social-links,
  .social-links-modern,
  .map-container,
  .map-container-modern,
  .promo-banner-section,
  .scroll-indicator,
  .floating-juices,
  .floating-shape {
    display: none !important;
  }

  
  a {
    text-decoration: none;
    color: black;
  }
  
  .product-card,
  .product-card-modern {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Logo */

@media (max-width: 768px) {

}

/* ===============================
   Brand Overrides (Pink Theme)
   =============================== */

/* Header / Navbar */

/* Navbar link color (default) */


/* Hover */


/* Active page link */
.navbar .nav-link.active,



/* Background */


/* Header logo size */


.site-logo:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {

}

/* ===============================
   Navbar Visibility Fix (Dark Pink)
   =============================== */


@media (max-width: 991px) {

}
/* ===== Breadcrumb Navigation ===== */
.breadcrumb-nav {
  margin-top: 0;
  margin-bottom: 10px;
}

.breadcrumb {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 228, 236, 0.9);
  border: 1px solid rgba(166, 30, 77, 0.12);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumb-item a {
  color: #a61e4d;
  font-weight: 600;
}

.breadcrumb-item.active {
  color: #6c2b45;
  font-weight: 700;
}

/* ===== Persistent Hamburger ===== */
.navbar-toggler {
  border: 1px solid rgba(166,30,77,0.35);
}

.navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(166,30,77,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===== Fixed Navbar Spacer (prevents overlap) ===== */
:root { --nav-height: 120px; } /* fallback */
.nav-spacer { height: var(--nav-height); }

/* Breadcrumb should sit cleanly below navbar */
.breadcrumb-nav { margin-top: 0 !important; }


/* ===== Ultra-robust hamburger visibility (works on ALL backgrounds) ===== */
.navbar-toggler {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(166,30,77,0.35) !important;
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 77, 141, 0.25);
}

/* Keep icon dark + add slight shadow for contrast */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(166,30,77,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.45));
}



/* ===== FIX: Home/About overlays covering navbar toggler ===== */
/* Ensure navbar + toggler always sit above hero overlays */
.navbar.navbar-expand-lg.fixed-top {
  position: fixed;
  z-index: 5000 !important;
}

.navbar.navbar-expand-lg.fixed-top .navbar-toggler {
  position: relative;
  z-index: 5001 !important;
}

.navbar.navbar-expand-lg.fixed-top .navbar-toggler-icon {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If any hero overlay uses pointer events, keep navbar clickable */
.hero-overlay,
.hero-background,
.floating-shape,
.image-overlay {
  pointer-events: none;
}


/* Ensure hero buttons remain clickable */
.hero-content, .hero-cta { pointer-events: auto; }


/* ===== v7 Visual polish fixes ===== */

/* Navbar links: strong contrast on light pink header */
.navbar {
  background: #ffe4ec !important;
}
.navbar .nav-link {
  color: #8f1d4a !important; /* darker for readability */
  font-weight: 800;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #d63384 !important;
}

/* When navbar becomes scrolled/dark, keep links + toggler visible */
.navbar.scrolled .nav-link {
  color: #ffffff !important;
}
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link:focus {
  color: #ffe4ec !important;
}

/* About/Menu/Contact: decorative panels to avoid "empty" look */
.soft-panel {
  position: relative;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(166,30,77,0.12);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  overflow: hidden;
}
.soft-panel::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -90px;
  right: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(255,77,141,0.30), rgba(255,77,141,0) 65%);
  filter: blur(2px);
  animation: blobFloat 8s ease-in-out infinite;
}
.soft-panel--right::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  bottom: -100px;
  left: -110px;
  background: radial-gradient(circle at 40% 40%, rgba(255,228,236,0.95), rgba(255,228,236,0) 70%);
  animation: blobFloat 10s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(10px, -12px) scale(1.05); }
}

/* Soft banner row background */
.soft-banner-row {
  background: linear-gradient(135deg, rgba(255,228,236,0.95), rgba(255,255,255,0.85));
  border: 1px solid rgba(166,30,77,0.10);
  border-radius: 18px;
  padding: 28px 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
.soft-banner-row::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at 20% 20%, rgba(255,77,141,0.18), rgba(255,77,141,0) 55%),
              radial-gradient(circle at 80% 30%, rgba(255,235,59,0.18), rgba(255,235,59,0) 55%);
  pointer-events: none;
}
.soft-banner-row > * { position: relative; }

/* Ensure hero content remains clickable */
.hero-content, .hero-cta { position: relative; z-index: 2; }



/* ===== v9: About values icons + Navbar white links ===== */

/* Navbar: make background darker so white links are visible */
.navbar {
  background: #d63384 !important; /* darker pink */
}
.navbar .nav-link {
  color: #ffffff !important;
  font-weight: 700;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffe4ec !important;
}

/* Keep scrolled navbar slightly darker for depth */
.navbar.scrolled {
  background: #a61e4d !important;
}

/* Values list icons (About page) */
.value-icon {
  color: #d63384;
  margin-right: 10px;
  font-size: 18px;
  line-height: 1.2;
  position: relative;
  top: 2px;
}

.fruit-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.fruit-icon-list li strong {
  margin-right: 6px;
}



/* ===== v11 FIX: remove broken emoji pseudo-icons in Our Values list ===== */
.fruit-icon-list li::before,
.fruit-icon-list li.berry::before,
.fruit-icon-list li.citrus::before,
.fruit-icon-list li.green::before,
.fruit-icon-list li.tropical::before {
  content: none !important;
  display: none !important;
}
/* Ensure list aligns nicely with Font Awesome icons */
.fruit-icon-list li {
  align-items: flex-start;
}



/* ===== MOBILE OVERFLOW & NAVBAR TOGGLER FIXES ===== */
/* Prevent horizontal scroll on mobile (Home/About decorative elements can overflow) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure fixed navbar never becomes wider than viewport */
.navbar.fixed-top {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
}

/* Clip floating decorative elements on Home hero */
.hero,
.hero-background {
  overflow: hidden;
}

/* About page badge can create overflow on small screens */
.story-image-wrapper {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  /* Keep hero shapes inside viewport on mobile */
  .shape-1 { right: -40px; top: -60px; }
  .shape-2 { left: -80px; bottom: -120px; }
  .shape-1, .shape-2 { max-width: 70vw; max-height: 70vw; }

  /* Keep experience badge inside the image wrapper */
  .experience-badge-modern {
    right: 12px;
    bottom: 12px;
  }
}

/* Navbar color to whitish pink */
.navbar.navbar-expand-lg.navbar-light.fixed-top,
.navbar.navbar-expand-lg.navbar-light.fixed-top.scrolled,
.navbar.scrolled {
  background-color: #ffe6f0 !important;
}

/* Collapse menu background on mobile */
.navbar .collapse.navbar-collapse {
  background-color: #ffe6f0 !important;
}

/* Keep nav links readable on light navbar */
.navbar-light .navbar-nav .nav-link {
  color: #333 !important;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #ff4d8d !important;
}

/* HARD FIX: Always visible hamburger icon across devices + scrolled state */
.navbar-light .navbar-toggler {
  border-color: rgba(0,0,0,0.12) !important;
}

.navbar-light .navbar-toggler-icon {
  display: inline-block !important;
  width: 1.5em !important;
  height: 1.5em !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.85%29' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

.navbar.scrolled .navbar-toggler-icon,
.navbar.navbar-expand-lg.navbar-light.fixed-top.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.85%29' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


/* ===== PREMIUM HERO SLIDER ===== */
.hero-slider{position:relative;width:100%;overflow:hidden;}
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item{width:100%;}
.hero-slider .carousel-item{height:clamp(260px,42vw,540px);position:relative;}
.hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.02);}
.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.15) 100%);}
.hero-slide-caption{position:absolute;inset:0;display:flex !important;align-items:center;justify-content:center;text-align:center;padding:1.25rem;}
.hero-caption-inner{max-width:880px;padding:18px;border-radius:18px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(10px);}
.hero-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(10px);color:#fff;font-weight:600;margin-bottom:.9rem;}
.hero-title{color:#fff;letter-spacing:-0.02em;font-weight:800;margin-bottom:.6rem;}
.hero-subtitle{color:rgba(255,255,255,0.88);font-size:1.05rem;margin:0 auto 1.1rem;max-width:720px;}
.hero-cta{border-radius:999px;padding:.75rem 1.15rem;}
.hero-slider .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:999px;}

/* ===== OUR MENU: PHOTO BACKGROUND SECTIONS ===== */
.page-header-modern.menu-hero-bg{
  position:relative;
  overflow:hidden;
  background-image:url("../assets/img/menu/bg-hero.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.page-header-modern.menu-hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.10) 100%);
  pointer-events:none;
}
.page-header-modern.menu-hero-bg .container{position:relative;z-index:1;}
.page-header-modern.menu-hero-bg .section-badge,
.page-header-modern.menu-hero-bg h1,
.page-header-modern.menu-hero-bg p{color:#fff !important;}
.page-header-modern.menu-hero-bg p.text-muted{color:rgba(255,255,255,0.85) !important;}

.menu-bg-soft{
  position:relative;
  overflow:hidden;
  background-image:url("../assets/img/menu/bg-soft.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.menu-bg-soft::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.74);
  backdrop-filter:blur(2px);
  pointer-events:none;
}
.menu-bg-soft > .container{position:relative;z-index:1;}

.menu-highlight-strip{
  position:relative;
  overflow:hidden;
  background-image:url("../assets/img/menu/bg-strip.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.menu-highlight-strip .menu-highlight-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.12) 100%);
}
.menu-highlight-strip .container{position:relative;z-index:1;}
.menu-highlight-strip .highlight-item{
  padding:14px;border-radius:16px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  color:#fff;
}
.menu-highlight-strip .highlight-item i{font-size:22px;margin-bottom:8px;}
.menu-highlight-strip .highlight-item p{color:rgba(255,255,255,0.82);}