/* --- 1. COZY BRAND VARIABLES --- */

:root {
  --primary: #ff5252; /* Softer, warm red/orange from the logo kimchi */
  --primary-dark: #d32f2f;
  --bg: #fff8e1; /* Warm Cream/Beige background */
  --text: #4e342e; /* Dark Brown (matches logo text) */
  --card-bg: #ffffff;
  --shadow: 0 8px 20px rgba(78, 52, 46, 0.08); /* Softer brown shadow */
  --radius: 24px; /* Extra rounded corners */
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Nunito", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  padding-bottom: 0;
  
  /* ✅ NEW: This forces the body to fill the screen height */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  /* ✅ NEW: This creates the subtle paper grain texture */
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.10'/%3E%3C/svg%3E");
}

/* --- 1a. SCROLLING ANNOUNCEMENT BAR (CLEANER) --- */
.announcement-bar {
  background-color: #4e342e;
  color: #fff8e1;
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  /* This must be lower than the side menu and overlay */
  z-index: 3001;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marquee-content {
  display: flex;
  width: max-content; /* Critical: Forces the box to be as wide as all 10 sentences */
  animation: scroll-left 60s linear infinite; /* Increased time because the strip is longer now */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Moves half the huge chain, then snaps back */
  }
}

/* --- 2. HEADER (Sticky & Animated) --- */
/* --- FIXED HEADER --- */
header {
  background: transparent;
  padding: 5px 20px;
  /* --- THE FIX IS HERE --- */
  position: sticky;
  top: 0;
  /* ----------------------- */
  z-index: 1000; /* Increased to stay above hero content */
  display: grid;
  align-items: center;
  transition: all 0.4s ease;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
}

body.scrolled header {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Prevent the profile image from becoming huge */
.profile-logo-btn {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Center column contains both nav and mobile mascot */
header > div:nth-child(2) {
  justify-self: center;
}

@media (max-width: 768px) {
  header {
    grid-template-columns: 50px 1fr 50px;
  }
  .desktop-only {
    display: none;
  }
}

/* --- LOGO ANIMATIONS --- */

/* A. DESKTOP LOGO (Jumps to Top-Left) */
.desktop-brand-area {
  justify-self: start;
  display: flex;
  align-items: center;
  opacity: 0; /* Hidden initially */

  /* START POSITION: Down and to the Right (from center) */
  transform: translate(50px, 150px) scale(0.6);

  /* The "Jump" Bounce Physics */
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.header-mascot-img {
  height: 50px;
  width: auto;
}

/* Jump In State */
body.scrolled .desktop-brand-area {
  opacity: 1;
  transform: translate(0, 0) scale(1); /* Lands in top left */
  pointer-events: auto;
}

/* B. MOBILE LOGO (Climbs Ladder to Top-Center) */
.mobile-brand-area {
  display: none; /* Hidden on desktop */
}

/* --- NAVIGATION --- */
.nav-links {
  justify-self: center;
  display: flex;
  gap: 30px;
}
.header-right {
  justify-self: end;
}

/* --- HERO SECTION (The Main Big Mascot) --- */
/* --- UPDATED HERO (FULL SCREEN) --- */
.hero {
  /* 1. Force Full Screen Height */
  min-height: 100vh; /* Takes up 100% of the device screen */
  width: 100vw;
  
  /* 2. Positioning */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -85px; /* Pulls it up behind the header */

  /* 3. Perfect Centering */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertical Center */
  align-items: center;     /* Horizontal Center */
  text-align: center;

  /* 4. Style & Shape */
  background: #333;
  padding: 0 20px; /* Only side padding needed now */
  z-index: 1;
  border-radius: 0 !important;/* Subtle curve at the bottom */
  overflow: hidden; /* Clips the video to the curve */
}

/* The Big Mascot Image */
.hero-logo-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
  transition: all 0.4s ease; /* Smooth fade out */
  transform-origin: center center;
}

/* When scrolled, the Big Mascot shrinks and disappears */
body.scrolled .hero-logo-img {
  opacity: 0;
  transform: scale(0); /* Poof! Gone */
}

/* --- MEDIA QUERY: MOBILE ANIMATIONS --- */
@media (max-width: 768px) {
  header {
    /* Mobile Layout: Burger(Left) | Logo(Center) | Profile(Right) */
    grid-template-columns: 50px 1fr 50px;
  }

  .desktop-brand-area {
    display: none;
  } /* Hide Desktop Jump */

  /* Configure Mobile Climb Area */
  .mobile-brand-area {
    display: flex;
    justify-self: center;
    align-items: center;
    justify-content: center;
    opacity: 0;

    /* START POSITION: "Down the ladder" */
    transform: translateY(120px);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.3s ease;
  }

  /* Climb Up State */
  body.scrolled .mobile-brand-area {
    opacity: 1;
    transform: translateY(0); /* Reaches the top */
  }

  /* Wiggle Animation while climbing */
  body.scrolled .mobile-brand-area img {
    animation: climbShake 0.6s ease-in-out;
  }

  /* --- MOBILE CAROUSEL TRANSFORMATION --- */
.feature-container {
    display: flex !important; /* Forces side-by-side */
    overflow-x: auto;         /* Allows scrolling sideways */
    scroll-snap-type: x mandatory; /* Snaps to center */
    padding: 20px 20px 40px 20px !important; /* Space for shadow */
    gap: 15px;
    margin-top: 20px;
    
    /* Hide scrollbar for clean look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome/Safari */
.feature-container::-webkit-scrollbar {
    display: none;
}

.feature-card {
    min-width: 260px; /* Shows 85% of card, teases the next one */
    scroll-snap-align: center;
    margin-bottom: 0; /* Remove bottom margin */
    border: 2px dashed #eee; /* Adds a "Stamp/Label" texture */
}

  @keyframes climbShake {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-10deg);
    } /* Left hand up */
    50% {
      transform: rotate(10deg);
    } /* Right hand up */
    75% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}

/* --- 3. PRODUCT GRID --- */
main {
  max-width: 1200px;
  margin: 0 auto;
  
  /* 🔴 CHANGE THIS LINE */
  /* Old: padding: 20px; */
  padding: 0 20px 20px 20px; /* Top is now 0! */
  
  width: 100%;
  flex: 1; 
}


h2 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #333;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}

/* --- 4. PRODUCT CARD --- */
.product-card {
  position: relative;
  background: var(--card-bg);
  height: 100%; /* <--- THIS IS THE MAGIC FIX */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:active {
  transform: scale(0.98);
}

.product-card {
    /* Existing styles... */
    background: #ffffff;
    
    /* ✅ NEW: Makes it look like a sticker/label */
    border: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 10px 25px rgba(141, 110, 99, 0.15); /* Warmer, softer shadow */
}

/* Make the "Add" button pop more */
.add-btn {
    /* Add a subtle gradient */
    background: linear-gradient(135deg, #4e342e 0%, #3e2723 100%);
    box-shadow: 0 4px 10px rgba(78, 52, 46, 0.3);
}

.img-container {
  width: 100%;
  height: 160px;
  background: #eee;
  position: relative;
  overflow: hidden;
}
.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This crops the photo to fit perfectly in the square */
}
.product-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  background: #fafafa;
}

.card-details {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
h3 {
  margin: 0 0 5px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 42px;
}
.price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

/* --- 5. SMART BUTTONS --- */
.add-btn {
  background-color: var(--text);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  margin-top: auto;
}

/* Better spacing for prices */
.price-container {
    min-height: 50px; /* Reserves space so all cards look even */
    align-content: center; /* Centers the text vertically */
}

/* Force the button area to the bottom of the card */
.card-details > div:last-child {
    margin-top: auto;
    width: 100%; /* Ensures button spans full width */
}
.qty-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 4px;
  margin-top: auto;
}
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-number {
  font-weight: 700;
  font-size: 14px;
}

/* --- SKELETON LOADING ANIMATION --- */
.skeleton-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(78, 52, 46, 0.08);
}

.skeleton-img {
  width: 100%;
  height: 160px;
  background: #ececec;
}

.skeleton-text {
  height: 15px;
  background: #ececec;
  margin: 12px;
  border-radius: 4px;
  width: 80%;
}

.skeleton-price {
  height: 15px;
  background: #ececec;
  margin: 0 12px 12px 12px;
  border-radius: 4px;
  width: 40%;
}

/* The Shimmer Effect */
.shimmer {
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* --- 6. STICKY CART BAR --- */
.sticky-cart {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  
  /* Probiotic Green */
  background: #2e7d32; 
  
  /* Cream border to pop against the brown footer */
  border: 3px solid #fff8e1; 
  
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  
  /* Matching Green Shadow */
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.4); 
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  z-index: 999;
  transform: translateY(150%);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sticky-cart.visible {
  transform: translateY(0);
}
.cart-total {
  font-weight: 700;
  font-size: 16px;
}

/* --- 7. MODALS --- */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: flex-end;
  z-index: 2000;
}
.modal-content {
  background: white;
  width: 100%;
  max-width: 500px;
  border-radius: 20px 20px 0 0;
  padding: 25px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-title {
  font-size: 20px;
  font-weight: 800;
}
.close-icon {
  font-size: 24px;
  cursor: pointer;
  color: #888;
  background: none;
  border: none;
}

.form-group {
  margin-bottom: 15px;
  position: relative;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
}

/* --- PHONE INPUT GROUP FIX --- */
.phone-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

.phone-code {
  width: 100px !important; /* Forces the dropdown to be narrow */
  min-width: 100px; /* Prevents it from getting too small */
  flex-shrink: 0; /* Stops it from shrinking */
}

.phone-number {
  flex-grow: 1; /* Forces the number input to fill the rest of the space */
  width: auto !important; /* Overrides any default width */
}
/* PASSWORD EYE ICON STYLE */
.password-wrapper {
  position: relative;
}
.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
}

.confirm-btn {
  background: #25d366;
  color: white;
  border: none;
  padding: 16px;
  width: 100%;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.save-profile-btn {
  background: var(--text);
  color: white;
  border: none;
  padding: 16px;
  width: 100%;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.switch-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
}

/* MEMBER CARD */
.member-card {
  text-align: center;
}
.member-avatar {
  width: 80px;
  height: 80px;
  background: #eee;
  border-radius: 50%;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.member-badge {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}
.member-details {
  background: #f9f9f9;
  text-align: left;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.detail-row {
  display: flex;
  margin-bottom: 10px;
  font-size: 14px;
}
.detail-label {
  width: 80px;
  font-weight: 600;
  color: #666;
}
.detail-val {
  flex: 1;
  font-weight: 500;
  color: #333;
}
.outline-btn {
  background: white;
  border: 1px solid #ccc;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  margin-bottom: 10px;
}
.logout-btn {
  background: white;
  border: 1px solid #d32f2f;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
  font-weight: 600;
  color: #d32f2f;
  cursor: pointer;
}

@media (min-width: 768px) {
  .modal {
    align-items: center;
  }
  .modal-content {
    border-radius: 20px;
    width: 450px;
  }
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* --- 8. TOAST NOTIFICATIONS --- */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* z-index 9999 ensures it sits ON TOP of the modal (which is 2000) */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90%;
  max-width: 400px;
  pointer-events: none;
}

.toast {
  background: #323232;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideUpFade 0.3s ease forwards;
  pointer-events: auto;
}

.toast.success {
  border-left: 4px solid #25d366;
}
.toast.error {
  border-left: 4px solid #d32f2f;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* --- 9. LOADING BUTTON STATES --- */
button:disabled {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed;
  transform: none !important; /* Stop the button from clicking down */
  box-shadow: none !important;
}

/* --- 10. NEW NAVIGATION & PAGES --- */
.nav-links {
  display: flex;
  gap: 30px;
  font-weight: 600;
  font-size: 14px;
}

.nav-item {
  cursor: pointer;
  text-decoration: none;
  position: relative; /* Anchors the overlapping layers */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px; /* Fixed width keeps spacing perfect */
  height: 60px;
}

/* 1. THE IMAGE (Visible by default) */
.home-nav-icon {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1; /* Fully visible */
  position: absolute; /* Stack it on top */
  transform: scale(1);
  height: 40px; /* Default size */
  width: auto;
}

/* 2. THE TEXT (Hidden by default) */
.nav-label {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;

  /* --- UPDATED FONT STYLE --- */
  font-family: "Chewy", cursive;
  font-size: 18px;
  font-weight: 400;
  color: #4e342e; /* <--- NEW DARK BROWN COLOR */
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  transform: translateY(10px);

  /* Optional: Add a white outline so it pops against any background */
  text-shadow: 2px 2px 0px white;
}
/* --- 3. THE HOVER MAGIC (GLOBAL FIX) --- */

/* Hide standard Nav Icons on Hover */
.nav-item:hover .home-nav-icon {
  opacity: 0 !important;
  transform: scale(0.5) !important;
}

/* Hide Profile Icon on Hover */
.profile-item:hover .profile-logo-btn {
  opacity: 0 !important;
  transform: scale(0.5) !important;
  pointer-events: none;
}

/* Show the Text Labels on Hover for both Nav and Profile */
.nav-item:hover .nav-label,
.profile-item:hover .nav-label {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10;
}

/* Show the "MY PAGE" text on Hover */
.profile-item:hover .nav-label {
  opacity: 1;
  /* This overrides the initial hidden transform to move it to dead-center */
  transform: translate(-50%, -50%) !important;
}

/* Add this to your CSS to trigger the profile transition */
.profile-item:hover .profile-logo-btn {
  opacity: 0;
  transform: scale(0.5);
}

.profile-item:hover .profile-label {
  opacity: 1;
  transform: translateY(0);
}

/* When hovering, show the text */
.nav-item:hover .nav-label {
  opacity: 1;
  transform: translateY(0); /* Floats up into place */
}

/* --- UPDATED HERO (Full Width Breakout) --- */
.hero {
  /* 1. THE BREAKOUT MAGIC (Forces full width inside a container) */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* 2. Style & Colors */
  text-align: center;
  background: linear-gradient(180deg, #fff8e1 0%, #ffccbc 100%);

  /* 3. Spacing adjustments */
  padding: 120px 20px 160px 20px; /* Extra top padding for the transparent header */
  margin-top: -85px; /* Pulls the background UP behind the header */

  z-index: 1; /* Ensures it sits behind the header text */
  border-radius: 0 0 50px 50px; /* Nice curved bottom */
}

.hero h1 {
  font-size: 38px;
  margin: 15px 0;
  color: #bf360c; /* Deep warm orange/red text */
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* This creates the floating cute logo effect */
.hero-logo-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;

  /* ✅ NEW: The Magic Glow */
    filter: drop-shadow(0 10px 20px rgba(255, 82, 82, 0.3));
}

.hero h1 {
  font-size: 36px;
  margin: 10px 0;
  color: var(--text);
  font-weight: 800; /* Extra bold for the cute font */
  line-height: 1.1;
}

/* The Custom Wave Shape at the bottom */
.custom-shape-divider-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
}

.custom-shape-divider-bottom .shape-fill {
  fill: var(--bg); /* Matches the body background color */
}

/* Floating Animation for the Character */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}


/* --- FINAL FEATURE CONTAINER (Clean & Spacious) --- */
.feature-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    
    /* 🟢 NEW: Positive 40px pushes it DOWN away from the video */
    margin: 40px auto 80px auto; 
    
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* Make the cards taller and content centered */
.feature-card {
    background: white;
    padding: 30px 20px; /* More vertical padding */
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensures they are all same height */
    border: 1px solid rgba(0,0,0,0.02); /* Subtle border definition */
}
.feature-icon {
  font-size: 32px;
  margin-bottom: 5px;
  display: block;
}
.feature-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

/* FAQ SECTION */
.faq-container {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.faq-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-q {
  font-weight: 700;
  margin-bottom: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.faq-a {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: none;
  margin-top: 10px;
}
.faq-item.open .faq-a {
  display: block;
}
.faq-icon {
  transition: transform 0.3s;
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

/* HIDE PAGES BY DEFAULT */
.page-view {
  display: none;
  animation: fadeIn 0.4s ease;
  
}
.page-view.active {
  display: block;
}



@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- HOME ICON STYLE --- */
.home-nav-icon {
  /* <--- FIXED: Matches your HTML class name */
  height: 40px;
  width: auto;
  vertical-align: middle;
  transition: transform 0.2s;
  margin-bottom: -5px;
}

/* Make it pop BIG when you hover or when it's active */
.nav-item:hover .home-nav-icon,
.nav-item.active .home-nav-icon {
  transform: scale(1.5) rotate(-5deg);
}

/* Optional: Hide the underline for the image only */
#nav-home.active::after,
#nav-menu.active::after {
  display: none;
}

/* --- MOBILE LAYOUT TRANSFORMATION --- */

/* Default: Hide Hamburger & Side Menu on Desktop */
.hamburger-btn {
  display: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text);
}
/* --- UPDATE: Side Menu Layering --- */

/* Align menu exactly under the 45px brown bar */

/* --- BETTER MOBILE MENU ANIMATION --- */

/* 1. The Menu Drawer */
.side-menu {
    position: fixed;
    top: 0;
    left: -280px; /* Hidden off-screen to the left */
    width: 280px;
    height: 100vh; /* Full screen height */
    background: #fff8e1; /* Cream background to match your theme */
    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    transition: left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Professional "Ease" animation */
    z-index: 10001; /* Highest layer */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* When open, slide it to 0 (visible) */
.side-menu.open {
    left: 0; 
}

/* 2. The Dark Backdrop */
.mobile-menu-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background: rgba(0,0,0,0.5); /* Semi-transparent black */
    backdrop-filter: blur(3px);   /* Nice glass blur effect */
    z-index: 10000; /* Sits just behind the menu */
    opacity: 0;
    visibility: hidden; /* Actually hides it so it doesn't block clicks when closed */
    transition: opacity 0.3s ease;
}

/* When open, make it visible */
.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* IMPORTANT: Delete the 'body.scrolled' rules for side-menu 
   that you currently have around line 448 and 467. 
   They are forcing the menu to jump to 45px. */

/* FIX: Make Ban-Chan and FAQ icons slightly bigger */
#nav-menu .home-nav-icon,
#nav-faq .home-nav-icon {
  height: 48px;
  margin-top: -5px;
}

.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;

  font-family: "Chewy", cursive;
  font-size: 24px;
  color: #4e342e;
  /* This aligns the text height with your header content */
  height: 40px;
}

/* Update the side-link style for better spacing */
.side-link {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Image Left, Text Right */
  font-family: "Chewy", cursive;
  font-size: 22px;
  letter-spacing: 1px;
  color: #4e342e;
  padding: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 5px;
}

.side-link img {
  flex-shrink: 0; /* Prevents the image from getting squashed */
  transition: transform 0.2s ease;
}

.side-link:active img {
  transform: scale(1.1); /* Little pop effect when clicked */
}

/* --- MEDIA QUERY: TABLETS & PHONES (Max Width 768px) --- */
@media (max-width: 768px) {
  /* 1. Header Grid: Left(Burger) | Center(Brand) | Right(Profile) */
  header {
    grid-template-columns: 40px 1fr 40px;
  }

  /* 2. Show Hamburger */
  .hamburger-btn {
    display: block;
    justify-self: start;
  }

  /* 3. Center The Brand */
  .brand {
    justify-self: center;
    font-size: 18px;
  } /* Slightly smaller text for mobile safety */

  /* 4. Hide Desktop Nav */
  .desktop-only {
    display: none;
  }
}
/* --- SOCIAL LOGIN & DIVIDER --- */
.social-login-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #888;
    font-size: 14px;
    font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.auth-divider::before {
    margin-right: 10px;
}

.auth-divider::after {
    margin-left: 10px;
}

.member-section-title {
    font-weight: 800;
    font-size: 14px;
    margin: 20px 0 10px 0;
    color: var(--primary);
    text-transform: uppercase;
}
.history-container {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 10px;
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 15px;
}

/* --- COMPARISON TABLE (Fixed Spacing & Alignment) --- */

/* --- COMPARISON TABLE (3-Column Bubble Style) --- */

.comparison-container {
    background: white;
    border-radius: 20px;
    padding: 30px 40px; 
    margin: 40px auto;
    box-shadow: 0 5px 20px rgba(78, 52, 46, 0.08);
    max-width: 900px;
    width: 100%;
    box-sizing: border-box; 
}

/* The Grid Layout: 3 Equal Columns (or slightly adjusted) */
.comp-header, .comp-row {
    display: grid;
    /* 1 part Category | 1.2 parts Supermarket | 1.2 parts Michin */
    grid-template-columns: 1fr 1.2fr 1.2fr; 
    align-items: center;
    gap: 15px; 
}

/* --- HEADER SPECIFICS --- */
.comp-header {
    margin-bottom: 20px;
    font-size: 12px; /* Slightly smaller for headers */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bcaaa4; /* Soft Brown/Grey */
    text-align: center;
}

/* --- ROW SPECIFICS --- */
.comp-row {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.comp-row.last { border-bottom: none; }

/* 1. The Category Bubble (NEW STYLE) 🏷️ */
.comp-label {
    background: #efebe9; /* Very Light Brown (Paper color) */
    color: #5d4037;      /* Dark Brown Text */
    font-weight: 800;    /* Bold to match the others */
    font-size: 13px;
    text-align: center;  /* ✅ CENTERED */
    
    padding: 12px 10px;
    border-radius: 12px; /* Rounded Bubble */
    width: 100%;
}

/* 2. The Supermarket Bubble (Grey) */
.comp-val-bad {
    background: #f5f5f5;
    color: #9e9e9e;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 12px 10px;
    border-radius: 12px;
    width: 100%;
}

/* 3. The Michin Bubble (Red) */
.comp-val-good {
    background: #ffebee; /* Soft Red Tint */
    color: #d32f2f;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(211, 47, 47, 0.1);
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.08);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.comp-val-good i { font-size: 14px; }

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .comparison-container { padding: 20px; }
    .comp-header { display: none; } /* Hide headers on phone */

    .comp-row {
        /* On phone, the Category becomes a full-width header above the comparison */
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
    }

    /* Transform the Category Label into a Header */
    .comp-label {
        grid-column: 1 / -1; /* Span across top */
        background: transparent; /* Remove bubble bg on mobile */
        color: var(--primary);   /* Make it red to stand out */
        font-size: 15px;
        margin-bottom: 2px;
        padding: 0;
        text-align: center;
    }
}

/* Add this to style.css */
.cta-btn {
  background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%);
  color: white;
  border: none;
  padding: 15px 40px;
  font-family: 'Chewy', cursive;
  font-size: 22px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(211, 47, 47, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 1px;
  margin-top: 20px;
}

.cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 25px rgba(211, 47, 47, 0.4);
}

.cta-btn:active {
  transform: translateY(1px);
}

@media (max-width: 600px) {
  .comparison-container {
    padding: 20px 10px; /* Less padding on phone */
    overflow-x: auto; /* Allows horizontal scrolling if needed */
  }
  
  .premium-table {
    min-width: 400px; /* Forces table to keep its shape, user scrolls to see */
  }
  
  /* Make the hero font slightly smaller on mobile so it doesn't wrap weirdly */
  .hero h1 {
    font-size: 32px; 
  }
}

/* --- BEST SELLER BADGE --- */
.badge-bestseller {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffca28; /* Golden Yellow */
  color: #5d4037;       /* Dark Brown text */
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 20; /* Higher than everything else */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none; /* Let clicks pass through it */
}

.policy-content {
    max-width: 800px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    line-height: 1.8;
    color: #444;
}
.policy-content h1 { color: var(--text); margin-bottom: 10px; }
.policy-content h2 { color: var(--primary); font-size: 18px; margin-top: 30px; }
.policy-content ul { padding-left: 20px; }
.policy-content li { margin-bottom: 10px; }

/* --- FOOTER STYLES (Desktop Default) --- */
.main-footer {
    background: #4e342e;
    color: #fff8e1;
    /* CHANGE 1: Much slimmer top/bottom padding */
    padding: 25px 40px 15px 40px; 
    margin-top: auto; 
    border-radius: 24px 24px 0 0;
}

.footer-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* This ensures they all try to stick to the top */
    align-items: start; 
}

/* BRAND COLUMN */
.footer-logo {
    font-family: 'Chewy', cursive;
    font-size: 22px; 
    margin-top: -6px; /* <--- PULLS IT UP to align with "SHOP" */
    margin-bottom: 8px;
    line-height: 1;
    display: block;
}

.brand-section p {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.8;
    margin: 0; /* Remove messy margins */
}
.social-links a {
    display: inline-block;
    margin-right: 12px;
    font-size: 16px;
    transition: transform 0.2s;
}
.social-links a:hover { transform: scale(1.2); }

/* LINKS COLUMNS */
/* 1. RESET the headers so they have no random top spacing */
.footer-section h4 {
    color: var(--primary);
    margin-top: 0;    /* <--- Crucial: Removes top gap */
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2; /* Matches the logo line-height better */
}

.footer-section a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-bottom: 4px; /* Very tight spacing between links */
    font-size: 13px;
    transition: opacity 0.2s, color 0.2s;
}

.footer-section a:hover {
    opacity: 1;
    color: white;
}

/* COPYRIGHT ROW */
.copyright {
    text-align: center;
    /* CHANGE 2: Pull it up! Reduced margin from 40px to 15px */
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 11px;
    opacity: 0.4;
}

@media (max-width: 768px) {
    /* 1. Ultra-Compact Container */
    .main-footer {
        padding: 15px 10px 10px 10px; /* Tight padding */
        text-align: center;
    }

    /* --- PASTE THIS INSIDE @media (max-width: 768px) --- */

/* 1. Add "Store" Label to Grey Box */
.comp-val-bad::before {
    content: "🏪 Store"; /* The text to show */
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 4px;
    font-weight: 800;
}

/* 2. Add "Michin" Label to Pink Box */
.comp-val-good::before {
    content: "🥬 Michin"; /* The text to show */
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #ef5350;
    margin-bottom: 4px;
    font-weight: 800;
}

/* 3. Adjust layout to handle the extra text */
.comp-val-bad, .comp-val-good {
    display: flex;
    flex-direction: column; /* Stacks label on top of value */
    justify-content: center;
    min-height: 60px; /* Ensures they match height */
    line-height: 1.2;
}

    .footer-grid {
        grid-template-columns: 1fr 1.2fr; /* Give Legal (right) a tiny bit more space */
        gap: 5px;
    }

    /* 2. Compact Headers */
    .footer-section h4 {
        margin: 0 0 5px 0;
        font-size: 13px;
        color: #ffccbc; /* Light Orange for contrast */
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* 3. General Links (applies to Shop) */
    .footer-section a {
        margin-bottom: 2px;
        font-size: 12px;
        display: block;
        line-height: 1.3;
        color: rgba(255,255,255,0.85);
    }

    /* --- SPECIAL: Split LEGAL Section into 2 Columns --- */
    /* "Legal" is the 3rd section in the HTML list */
    .footer-grid > .footer-section:nth-child(3) {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Create 2 sub-columns */
        column-gap: 5px; /* Space between the columns */
    }

    /* Make the word "LEGAL" span across the top */
    .footer-grid > .footer-section:nth-child(3) h4 {
        grid-column: 1 / -1; /* Spans both columns */
    }

    /* --- BRAND SECTION (Top Row) --- */
    .brand-section {
        grid-column: 1 / -1;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex;
        justify-content: space-between; 
        align-items: center;
    }
    
    .footer-logo { margin: 0; font-size: 16px; }
    .brand-section p { display: none; }
    .social-links { margin: 0; }
    .social-links a { margin-left: 10px; font-size: 16px; }

    /* --- CONTACT SECTION (Bottom Row) --- */
    .contact-section {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 8px;
        margin-top: 5px;
        background: none;
    }
    .contact-section h4 { display: none; }
    
    .contact-section a {
        display: inline-block;
        margin: 0 5px;
        font-size: 11px;
        font-weight: 700;
        color: #ffccbc;
    }

    /* --- COPYRIGHT --- */
    .copyright {
        margin-top: 5px;
        padding-top: 0;
        border: none;
        font-size: 9px;
        opacity: 0.4;
    }
}

/* --- CLEAN FEATURE ROW (Apple Style) --- */


/* 2. The Item: No Box, No Shadow, Just Content */
.feature-card {
    background: transparent !important; /* Remove colored background */
    box-shadow: none !important;        /* Remove shadow */
    border: none !important;            /* Remove border */
    text-align: center;
    padding: 0;
    transition: transform 0.3s ease;
}

/* 3. The Icon: Make it pop */
.feature-icon {
    font-size: 48px;
    margin-bottom: 15px;
    /* Give the icons a subtle drop shadow instead of the box */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15));
    display: inline-block;
}

/* 4. The Title: Clean & Dark */
.feature-title {
    /* 🟢 NEW: Use your brand font */
    font-family: 'Chewy', cursive; 
    font-size: 22px; /* Bump size up slightly for this font */
    color: #4e342e; 
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* 5. The Description Text */
.feature-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #6d4c41; /* Softer Brown */
    opacity: 0.9;
    margin: 0;
    font-weight: 600;
}

/* 6. Hover Effect: Subtle Lift */
.feature-card:hover {
    transform: translateY(-5px);
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .feature-container {
        /* On mobile, we can keep the horizontal scroll or stack them */
        display: flex !important;
        overflow-x: auto;
        padding-bottom: 20px; /* Space for scrollbar */
        margin-top: -20px; /* Less overlap on mobile */
        gap: 20px;
    }
    
    .feature-card {
        min-width: 200px; /* Ensure they are wide enough */
    }
}

/* --- MINI CART ITEMS (Inside Checkout Modal) --- */
.cart-item-card {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    animation: fadeIn 0.3s ease;
}

/* 1. The Tiny Image */
.cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #f0f0f0;
}

/* 2. Name & Price Area */
.cart-item-info {
    flex: 1; /* Takes up all available middle space */
}

.cart-item-title {
    font-weight: 800;
    font-size: 14px;
    color: #4e342e;
    margin-bottom: 4px;
}

.cart-item-price {
    font-size: 13px;
    color: #888;
}

/* 3. The +/- Control Box */
.cart-qty-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f8e9; /* Very light green bg */
    padding: 6px 12px;
    border-radius: 30px;
}

.qty-btn-mini {
    background: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 900;
    color: #2e7d32; /* Probiotic Green */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(46, 125, 50, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.qty-btn-mini:active {
    transform: scale(0.9);
}

/* --- COOKIE CONSENT BANNER (Upper Hand Style) --- */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Sits on the left, non-intrusive */
    max-width: 320px;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: none; /* Hidden by default, JS turns it on */
    z-index: 10000; /* Above everything */
    border: 1px solid #eee;
    animation: slideUpFade 0.5s ease;
}

.cookie-text {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 10px;
}

.cookie-text a {
    color: #4e342e;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.cookie-banner button {
    background: #4e342e;
    color: #fff8e1;
    border: none;
    padding: 8px 15px;
    width: 100%;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cookie-banner button:hover {
    background: #3e2723;
}

/* Sold Out State */
.sold-out-card {
    opacity: 0.7;
    filter: grayscale(100%); /* Makes it look grey/inactive */
}

/* IMPORTANT: Allow clicking the Admin Edit button even on sold out cards */
.sold-out-card button[onclick^="openEditModal"] {
    pointer-events: auto;
    filter: none;
    z-index: 100;
}

/* Disable the add button cursor */
.sold-out-card .add-btn[disabled] {
    pointer-events: none;
}

/* --- PRICE TAG STYLES --- */
.price-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
    font-weight: 600;
}

.sale-price {
    color: #d32f2f;
    font-weight: 800;
    font-size: 18px;
}

.sale-tag {
    background: #ffebee;
    color: #d32f2f;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ffcdd2;
}

/* --- NEW PRICE LAYOUT (Badge Top, Prices Bottom) --- */

/* The main box holding everything */
.price-container-vertical {
    display: flex;
    flex-direction: column; /* Stacks Badge on top of Prices */
    align-items: flex-start; /* Aligns everything to the left */
    gap: 4px; /* Space between Badge and Prices */
    margin-bottom: 10px;
    min-height: 50px; /* Keeps card height consistent */
}

/* The Row holding the two prices ($99 $111) */
.price-row {
    display: flex;
    align-items: baseline; /* Aligns the bottom of the numbers */
    gap: 8px; /* Space between Sale Price and Old Price */
}

/* The Big Red Price ($99) */
.sale-price {
    color: #d32f2f;
    font-weight: 800;
    font-size: 18px;
}

/* The Old Crossed Out Price ($111) */
.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
    font-weight: 600;
}

/* The "SAVE $12" Badge */
.sale-tag {
    background: #ffebee;
    color: #d32f2f;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ffcdd2;
    display: inline-block; /* Ensures it looks like a button/tag */
}

/* --- CINEMATIC VIDEO HERO --- */

/* Find this block in style.css */
.hero {
    position: relative;
    overflow: hidden;
    
    /* 🔴 CHANGE THIS LINE */
    /* Old: background: #333; */
    /* 🟢 NEW: Transparent so the body texture shows through! */
    background: transparent; 
}

/* Find this block in style.css */
.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    /* 🟢 NEW: The "Eraser" Mask */
    /* This fades the video out so the REAL textured body shows through */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Find this block in style.css */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* 🟢 ADD THIS LINE: Zooms in 5% to hide the "Veo" watermark */
    transform: scale(1.08); 
}



/* Ensure your text/buttons sit ON TOP of the fade */
.hero-content, .hero h1, .hero p, .cta-btn, .hero-logo-img {
    position: relative;
    z-index: 3; 
}

/* 4. The Dark Overlay (Crucial for readability) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 40% Black tint */
    z-index: 1;
}

/* 5. Force Content to Sit on Top */
.hero > *:not(.video-bg-container) {
    position: relative;
    z-index: 2; /* Higher than video */
}

/* 6. Text Color Updates (White Text for Video) */
.hero-text-white {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); /* Adds shadow so it pops */
}

/* Make the sub-text (The "Day-12 Standard") stand out */
.hero h1 span {
    color: #ffccbc !important; /* Light peach instead of brown */
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/* --- 📱 MOBILE HERO FIXES (Paste at bottom of style.css) --- */

/* 1. Standard Mobile Adjustments (All Phones) */
@media (max-width: 768px) {
    .hero {
        /* Reduce the huge padding so content fits */
        padding-top: 90px !important; 
        padding-bottom: 40px !important; 
        
        /* Ensure it always fills the screen, but allows scrolling if content is huge */
        min-height: 100vh; 
        height: auto; 
    }

    .hero-logo-img {
        /* Shrink logo slightly on phones */
        width: 140px; 
        height: 140px;
    }
    
    .hero h1 {
        font-size: 28px; /* Smaller headline */
    }
}

/* 2. "Short Screen" Fix (iPhone SE, Older Phones) */
@media (max-height: 750px) {
    .hero {
        /* Even less padding for short screens */
        padding-top: 70px !important;
        padding-bottom: 30px !important;
        justify-content: center; /* Force center alignment */
    }

    .hero-logo-img {
        /* Shrink logo more to make room for text */
        width: 110px; 
        height: 110px;
        margin-bottom: 5px;
    }

    .hero h1 {
        font-size: 24px; /* Compact text */
        margin: 5px 0;
    }

    .hero p {
        font-size: 13px !important; /* Smaller description */
        margin: 10px auto;
        line-height: 1.4;
    }

    .cta-btn {
        /* Compact Button */
        padding: 10px 30px;
        font-size: 18px;
        margin-top: 10px;
    }
    
    /* Hide the bouncing arrow on short screens if it blocks the button */
    .hero .fa-chevron-down {
        display: none;
    }
}

/* --- FIX: Center the Comparison Title --- */
.comparison-container h3 {
    text-align: center;
    width: 100%; /* Ensures it spans the full width to center properly */
    margin-top: 0; /* Removes extra gap at the top */
    font-size: 22px; /* Optional: Make it slightly bigger on mobile */
}

/* Optional: Ensure the container itself centers everything by default */
.comparison-container {
    text-align: center;
}

/* --- FIX: Comparison Table (Mobile Polish) --- */

/* 1. Hide the legend on Desktop */
.mobile-only-legend {
    display: none;
}

/* 2. Mobile Adjustments */
@media (max-width: 768px) {
    
    /* A. Remove the repetitive "Store" & "Michin" labels inside the boxes */
    .comp-val-bad::before,
    .comp-val-good::before {
        content: none !important;
    }

    /* B. Show the new Top Legend Row instead */
    .mobile-only-legend {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Columns */
        gap: 10px;
        text-align: center;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    /* C. FIX THE UNEVEN SIZES (The Magic Part) */
    .comp-row {
        /* This forces both boxes to stretch to the same height */
        align-items: stretch !important; 
    }

    .comp-val-bad, 
    .comp-val-good {
        height: auto;      /* Let them grow */
        min-height: 100%;  /* Fill the stretched parent */
        display: flex;
        align-items: center;    /* Vertical Center text */
        justify-content: center;/* Horizontal Center text */
        padding: 15px 5px;      /* Add breathing room */
    }
}

/* --- SCROLL ANIMATION (Super Slow & Cinematic) --- */

/* 1. Initial State */
.feature-card {
    opacity: 0; 
    transform: translateY(60px); 
    
    /* 🟢 NEW: 1.5s duration is very slow and graceful */
    transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 2. Active State */
.feature-card.visible {
    opacity: 1; 
    transform: translateY(0); 
}

/* 3. The "Stagger" (Big pauses between each one) */
/* Card 1: Starts after 0.2s */
.feature-card:nth-child(1) { transition-delay: 0.2s; }

/* Card 2: Waits half a second longer */
.feature-card:nth-child(2) { transition-delay: 0.7s; }

/* Card 3: Arrives more than a second later */
.feature-card:nth-child(3) { transition-delay: 1.2s; }

/* --- LIVING ICON ANIMATIONS (Constant Motion) --- */

/* 1. THE BUBBLES: "Float & Breathe" 🫧 */
/* Moves up/down and slightly grows to mimic effervescence */
@keyframes kimchiBubble {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); } /* Float Up + Grow */
    100% { transform: translateY(0) scale(1); }
}

/* 2. THE CABBAGE: "The Massage" 🥬 */
/* Squashes and rotates to mimic hands rubbing salt in */
@keyframes handRub {
    0% { transform: scale(1, 1) rotate(0deg); }
    25% { transform: scale(1.15, 0.85) rotate(-5deg); } /* Squish Down & Tilt Left */
    50% { transform: scale(1, 1) rotate(0deg); }         /* Back to normal */
    75% { transform: scale(0.9, 1.1) rotate(5deg); }     /* Stretch Up & Tilt Right */
    100% { transform: scale(1, 1) rotate(0deg); }
}

/* 3. THE CLOCK: "Tick Tock" ⏱️ */
/* Swings back and forth like a pendulum */
@keyframes tickTock {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

/* --- LIVING ICON ANIMATIONS (Revised) --- */

/* 1. THE BUBBLES: "Rise & Pop" 🫧 */
/* Rise up, get bigger (inflate), and then vanish (pop!) */
@keyframes bubblePop {
    0% { 
        transform: translateY(10px) scale(0.8); 
        opacity: 0; /* Start invisible at bottom */
    }
    20% {
        opacity: 1; /* Fade in quickly */
    }
    70% { 
        transform: translateY(-15px) scale(1.2); 
        opacity: 1; /* Rise and inflate */
    }
    90% {
        transform: translateY(-20px) scale(1.4); 
        opacity: 0; /* POP! (Disappear) */
    }
    100% { 
        transform: translateY(-20px) scale(1.4); 
        opacity: 0; /* Stay gone until restart */
    }
}

/* 2. THE CABBAGE: "The Massage" 🥬 */
/* Squashes and rotates to mimic hands rubbing salt in */
@keyframes handRub {
    0% { transform: scale(1, 1) rotate(0deg); }
    25% { transform: scale(1.15, 0.85) rotate(-5deg); } /* Squish Down & Tilt Left */
    50% { transform: scale(1, 1) rotate(0deg); }         /* Back to normal */
    75% { transform: scale(0.9, 1.1) rotate(5deg); }     /* Stretch Up & Tilt Right */
    100% { transform: scale(1, 1) rotate(0deg); }
}

/* --- LIVING ICON ANIMATIONS (The "Gentle Massage" Fix) --- */

/* 1. BUBBLES: Rise & Pop 🫧 */
@keyframes bubblePop {
    0% { transform: translateY(10px) scale(0.8); opacity: 0; }
    20% { opacity: 1; }
    70% { transform: translateY(-15px) scale(1.2); opacity: 1; }
    90% { transform: translateY(-20px) scale(1.4); opacity: 0; } 
    100% { transform: translateY(-20px) scale(1.4); opacity: 0; }
}

/* 2. CABBAGE: The Circular Rub 🖐️ */
/* The hand moves in a circle (kneading) instead of a line (slapping) */
@keyframes circularRub {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, 5px) rotate(5deg); }   /* Press Down-Right */
    50% { transform: translate(0, 8px) rotate(0deg); }     /* Press Bottom */
    75% { transform: translate(-5px, 5px) rotate(-5deg); } /* Press Down-Left */
    100% { transform: translate(0, 0) rotate(0deg); }      /* Lift Up */
}

/* The cabbage gently reacts to the pressure */
@keyframes gentleSquish {
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.05, 0.95); } /* Squish down gently when hand is low */
    100% { transform: scale(1, 1); }
}

/* 3. CLOCK: The "Alarm Ring" ⏱️ */
@keyframes clockRing {
    0% { transform: rotate(0); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(0); } 
    100% { transform: rotate(0); }
}

/* --- APPLY THE ANIMATIONS --- */

/* Card 1: Bubbles */
.feature-card:nth-child(1) .feature-icon {
    animation: bubblePop 2.5s ease-out infinite;
    display: inline-block;
}

/* Card 2: Cabbage + Hand */
.feature-card:nth-child(2) .feature-icon {
    position: relative; 
    display: inline-block;
    /* Cabbage breathes/squishes slowly */
    animation: gentleSquish 1.5s ease-in-out infinite;
    z-index: 1;
}

/* The Hand 🖐️ */
.feature-card:nth-child(2) .feature-icon::after {
    content: '🖐️';
    position: absolute;
    font-size: 24px; 
    
    /* 🔴 CHANGED: Pull it closer (was -8px) */
    /* Now it sits overlapping the cabbage */
    bottom: -2px; 
    right: -2px; 
    
    z-index: 2; 
    animation: circularRub 1.5s linear infinite; 
}

/* Card 3: Clock */
.feature-card:nth-child(3) .feature-icon {
    display: inline-block;
    transform-origin: center center;
    animation: clockRing 2s ease-in-out infinite;
}

/* --- KITCHEN SCENE (Labels Pinned to Objects) --- */
.kitchen-bg-section {
    position: relative;
    width: 100vw;
    height: 700px; /* Fixed height to show the full table scene */
    margin-left: calc(50% - 50vw); /* Full width breakout */
    margin-right: calc(50% - 50vw);
    
    background-image: url('kitchen_final_bg.png');
    background-size: cover;
    background-position: center bottom; /* Anchors image to show the table clearly */
    background-repeat: no-repeat;
    
    /* 🔴 CHANGED: Removed 'fixed'. Now image & text move together */
    background-attachment: scroll; 
    
    margin-top: 40px;
    margin-bottom: 60px;
    overflow: hidden;
}

/* --- ADDING THE FADE TRANSITION --- */

/* 1. The Bottom Fade (Melts into the "Michin Difference" section) */
.kitchen-bg-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* How tall the fade is */
    
    /* Fade from Transparent -> Cream Color */
    background: linear-gradient(to bottom, transparent, #fff8e1);
    
    z-index: 1; /* Sits on top of image, but BELOW the text labels */
    pointer-events: none; /* Lets you click through it */
}

/* 2. The Top Fade (Melts into the Hero section) */
.kitchen-bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Slightly shorter fade at the top */
    
    /* Fade from Cream Color -> Transparent */
    background: linear-gradient(to bottom, #fff8e1, transparent);
    
    z-index: 1;
    pointer-events: none;
}

/* Common Style for the Floating Labels */
.kitchen-label {
    position: absolute;
    text-align: center;
    max-width: 200px;
    z-index: 10;
    
    /* Sticker Effect */
    color: #4e342e;
    text-shadow: 
        2px 2px 0 #fff, -1px -1px 0 #fff,  
        1px -1px 0 #fff, -1px 1px 0 #fff,
        1px 1px 0 #fff;
    
    /* Animation: Gentle Float */
    animation: floatLabel 3s ease-in-out infinite;
}

.kitchen-label .feature-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 5px;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

.kitchen-label .feature-title {
    font-family: 'Chewy', cursive;
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 5px;
    display: block;
}

.kitchen-label p {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    background: rgba(255,255,255,0.9);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: 0;
    display: inline-block;
    text-shadow: none; /* No outline for small text */
}

/* --- POSITIONING THE LABELS (Coordinates based on your image) --- */

/* 1. Unpasteurized -> Bottom Left (By the Kimchi Bowl) */
.label-kimchi {
    bottom: 42%; 
    left: 39%;
}

/* 2. Hand-Rubbed -> Bottom Center (By the Cabbage/Radish) */
.label-cabbage {
    bottom: 25%;
    left: 60%;
    transform: translateX(-50%); /* Centers it perfectly */
}

/* 3. Sourness -> Top Right (By the Jar) */
.label-jar {
    top: 22%;
    right: 18%;
}

/* Animation Keyframes */
@keyframes floatLabel {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- MOBILE FIX (Clustered Closer) --- */
@media (max-width: 768px) {
    
    .kitchen-bg-section {
        height: 600px; 
        background-position: center center !important; 
        background-size: cover !important;
        
        display: flex;
        flex-direction: column;
        
        /* 🟢 1. Pack them from the top (don't stretch to edges) */
        justify-content: flex-start; 
        
        /* 🟢 2. Control the spacing tightly here */
        gap: 25px; 
        
        align-items: center;
        
        /* 🟢 3. Push the whole group down to the "Wall" area */
        padding-top: 80px; 
        
        /* Reserve space for button */
        padding-bottom: 120px; 
    }

    /* Keep the Label Styling Clean */
    .kitchen-label {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: auto;
        margin: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        backdrop-filter: none;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    }

    .kitchen-label .feature-icon {
        font-size: 32px;
        margin-bottom: 5px;
        filter: drop-shadow(0 2px 4px rgba(255,255,255,0.8));
    }

    .kitchen-label .feature-title {
        font-size: 20px;
        color: #4e342e;
        margin-bottom: 0;
    }

    /* Hide descriptions */
    .kitchen-label p {
        display: none; 
    }
    
    /* Button stays at bottom */
    .kitchen-bg-section .science-arrow-btn {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        justify-content: center;
    }
}

/* --- PUFFY BAG INTERACTION --- */
.puffy-interaction-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 60px auto 0 auto;
    padding: 20px;
    gap: 30px;
}

.puffy-question {
    font-family: 'Chewy', cursive;
    font-size: 32px;
    color: #00bcd4;
    transform: rotate(-3deg);
    flex: 1;
}

.science-arrow-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 3px solid #00bcd4;
    cursor: pointer;
}

.science-arrow-btn:hover {
    transform: translateX(10px);
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.4);
}

.arrow-icon {
    font-size: 24px;
    color: #00bcd4;
    animation: pointRight 1s infinite alternate;
}

@keyframes pointRight {
    from { transform: translateX(0); }
    to { transform: translateX(5px); }
}

/* Mobile Layout Fix */
@media (max-width: 768px) {
    .puffy-interaction-container {
        flex-direction: column;
        text-align: center;
    }
    .science-arrow-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- ACTIVATE ANIMATIONS FOR KITCHEN LABELS --- */
/* This works on BOTH Mobile and Desktop */

/* 1. Kimchi: Bubbles Pop 🫧 */
.label-kimchi .feature-icon {
    display: inline-block;
    animation: bubblePop 2.5s ease-out infinite;
}

/* 2. Jar: Clock Ticks ⏱️ */
.label-jar .feature-icon {
    display: inline-block;
    transform-origin: center center;
    animation: clockRing 2s ease-in-out infinite;
}

/* 3. Cabbage: Squish & Hand Rub 🥬 */
.label-cabbage .feature-icon {
    display: inline-block;
    position: relative;
    /* Cabbage breathes gently */
    animation: gentleSquish 1.5s ease-in-out infinite;
    z-index: 1;
}

/* The Magic Hand 🖐️ (Re-adding it for the kitchen scene) */
.label-cabbage .feature-icon::after {
    content: '🖐️';
    position: absolute;
    font-size: 20px; /* Slightly smaller for the label */
    bottom: -5px; 
    right: -5px; 
    z-index: 2; 
    /* Hand rubs in a circle */
    animation: circularRub 1.5s linear infinite; 
}

/* Class for the button */
.btn-checkout {
  width: 100%; /* Fills the container */
  padding: 12px 20px;
  background-color: #d9534f; /* A nice "Kimchi Red" or stick to your brand orange */
  color: white;
  border: none;
  border-radius: 12px; /* Matches your modal rounded corners */
  font-family: inherit; /* Uses your site's cute font */
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Space between text and icon */
  margin-top: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Hover effect to make it feel interactive */
.btn-checkout:hover {
  background-color: #c9302c; /* Slightly darker on hover */
  transform: translateY(-2px); /* Moves up slightly */
  box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

/* Active click effect */
.btn-checkout:active {
  transform: translateY(0);
}