/* Moriveda Global Components Stylesheet */

/* Top Announcement / Offer Bar (built by js/main.js)
   Layout: flex row [prev][track][next][close] — every control is a static
   flex item vertically centered INSIDE the bar; nothing is positioned
   relative to the page, so controls can never leak into the navbar. */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  background: var(--gradient-cta);
  color: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0.25rem 0.9rem;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.announcement-bar.closing {
  transform: translateY(-100%);
  opacity: 0;
}

.announcement-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  min-height: 1.6em;
  overflow: hidden;
}

.announcement-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2rem 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.announcement-msg.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.announcement-msg i {
  margin-right: 0.45rem;
  opacity: 0.9;
}

.announcement-msg strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bar controls: static flex items, centered within the bar height */
.announcement-prev,
.announcement-next,
.announcement-close {
  position: static;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #ffffff;
  opacity: 0.75;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  transition: var(--transition-fast);
}

.announcement-close {
  font-size: 0.9rem;
  margin-left: 0.15rem;
}

.announcement-prev:hover,
.announcement-next:hover,
.announcement-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
  .announcement-msg {
    font-size: 0.72rem;
    line-height: 1.25;
  }
}

/* Header / Navigation */
.navbar {
  position: fixed;
  top: var(--banner-h, 0px);
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.5rem 0;
  /* Transition padding/background only — NOT `top`/`all`, so the banner
     offset always applies instantly and never gets frozen mid-transition. */
  transition: padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease;
}

.navbar.scrolled {
  padding: 1rem 0;
  background: var(--bg-navbar);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.25rem;
  min-width: 0;
}

/* Give the navbar a wider track than page content so links never wrap */
.container.navbar-container {
  max-width: 1360px;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo-light-img {
  display: var(--logo-display-light);
  height: 32px;
  width: auto;
}

.logo-dark-img {
  display: var(--logo-display-dark);
  height: 32px;
  width: auto;
}

[data-theme="dark"] .logo-light-img {
  display: block;
}

[data-theme="dark"] .logo-dark-img {
  display: none;
}

.nav-links {
  display: flex;
  gap: 2.25rem;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition-fast);
  opacity: 0.8;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--green-mid);
  transition: width 0.3s ease;
  opacity: 0;
}

.nav-link:hover {
  color: var(--green-mid);
  opacity: 1;
}

.nav-link:hover::after {
  width: 100%;
  opacity: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.nav-actions .btn {
  white-space: nowrap;
}

/* Tighten the navbar on mid-size desktops so everything stays on one line */
@media (max-width: 1280px) {
  .nav-links { gap: 1.5rem; }
  .nav-actions { gap: 0.9rem; }
  .nav-link { font-size: 0.8rem; }
  .nav-actions .btn { padding: 0.75rem 1.4rem; font-size: 0.82rem; }
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 1.05rem;
}

.theme-toggle-btn:hover {
  background: rgba(45, 90, 39, 0.05);
  color: var(--green-mid);
  border-color: var(--green-mid);
  transform: scale(1.05);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold-warm);
  border-color: var(--gold-warm);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--text-primary);
  transition: var(--transition-fast);
}

/* Below 1024px the desktop links can't fit on one line — switch to hamburger.
   NOTE: this block must come AFTER the base .menu-toggle rule (same specificity,
   last-declared wins) or the hamburger never shows. */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
}

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-primary);
  /* Must sit above the fixed navbar (z-index: 1000) so the logo/account/
     cart icons don't show through and overlap the open menu's links —
     but stay below the announcement bar (1100) so that banner remains
     visible/functional while the menu is open. */
  z-index: 1050;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* justify-content:center previously clipped the top links (Home, Shop)
     off-screen with no way to reach them whenever the menu's full link
     list was taller than the viewport. Start from the top instead, clear
     the fixed announcement bar + navbar with top padding, and allow the
     menu itself to scroll if it's still taller than the screen. */
  padding: calc(var(--banner-h, 42px) + 96px) 2rem 3rem;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(-100%);
}

.mobile-menu .nav-link {
  font-size: 1.8rem;
  font-family: var(--font-serif);
  color: var(--text-primary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(45, 90, 39, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 90, 39, 0.3);
  background: linear-gradient(135deg, var(--green-deep), var(--green-deep));
}

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

.btn-secondary:hover {
  background-color: var(--green-deep);
  color: var(--cream);
}

/* Product Cards */
.product-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(45, 90, 39, 0.06);
  border-color: var(--green-mid);
}

.product-image-container {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.product-image-container img {
  max-height: 100%;
  object-fit: contain;
  transition: var(--transition-smooth);
}

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

.product-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background-color: var(--gold-warm);
  color: #1E231C; /* Explicitly dark for high-contrast on gold */
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  /* REQUIRED — do not remove.
     .direct-product-card img carries a drop-shadow filter. A non-none filter
     creates a stacking context and paints the element in the positioned layer
     as if z-index:0 — the same level this absolutely-positioned badge sits at
     with z-index:auto. With both at 0, DOM order decides the winner, and the
     <img> comes after the badge, so the image painted straight over "Sale" /
     "Best Value". It only showed on mobile because the single-column layout
     centres a full-width image right across the badge. */
  z-index: 2;
}

.product-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.product-subtitle {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  font-family: var(--font-mono);
}

/* Variant Pill Selector */
.size-selector {
  display: inline-flex;
  background: rgba(45, 90, 39, 0.05);
  padding: 4px;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.size-pill {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-light);
  transition: var(--transition-fast);
}

.size-pill.active {
  background: var(--gradient-cta);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(45, 90, 39, 0.22);
}

/* Make the pill track visible against the dark background */
[data-theme="dark"] .size-selector {
  background: rgba(255, 255, 255, 0.06);
}

.price-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.price-original {
  text-decoration: line-through;
  color: var(--text-light);
  font-size: 1.1rem;
}

.price-sale {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--green-deep);
}

.price-unit {
  font-size: 0.8rem;
  color: var(--text-light);
  font-family: var(--font-mono);
  display: block;
  margin-top: -0.25rem;
}

/* Recipe Cards */
.recipe-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: var(--transition-smooth);
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border-color: var(--green-mid);
}

.recipe-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.recipe-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.recipe-card:hover .recipe-image img {
  transform: scale(1.08);
}

.recipe-content {
  padding: 1.5rem;
}

.recipe-tag {
  color: var(--green-mid);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}

.recipe-title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.recipe-link {
  font-size: 0.9rem;
  color: var(--green-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.recipe-link:hover {
  color: var(--green-mid);
}

/* FAQ Accordion */
.accordion {
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 0;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-title {
  font-size: 1.3rem;
  font-family: var(--font-serif);
  color: var(--green-deep);
}

.accordion-icon {
  font-size: 1.5rem;
  color: var(--green-mid);
  transition: var(--transition-fast);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-content {
  padding: 1rem 0 0.5rem 0;
  color: var(--text-light);
  line-height: 1.7;
}

.accordion.active .accordion-icon {
  transform: rotate(45deg);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #25D366;
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 999;
  font-size: 1.8rem;
  transition: var(--transition-smooth);
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Global Footer */
.footer {
  background-color: var(--footer-bg);
  color: var(--footer-text-body);
  padding: 5rem 0 2rem 0;
  border-top: 1px solid var(--footer-border);
}

.footer h3, .footer h4 {
  color: var(--footer-text-title);
  font-family: var(--font-serif);
  margin-bottom: 1.5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--footer-text-title);
}

.footer-description {
  font-size: 0.9rem;
  color: var(--footer-text-body);
  line-height: 1.7;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--footer-text-link);
}

.footer-link:hover {
  color: var(--gold-warm);
}

.footer-bottom {
  border-top: 1px solid var(--footer-border);
  margin-top: 4rem;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--footer-text-body);
  opacity: 0.7;
}

.fssai-badge-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--footer-border);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Responsiveness overrides for components */
@media (max-width: 768px) {
  /* Declutter the top bar: theme toggle + "Shop Now" live in the mobile menu.
     Keep only the cart icon and the hamburger beside the logo. */
  .nav-actions #theme-toggle {
    display: none;
  }
  .nav-actions .btn-secondary {
    display: none;
  }
  .nav-actions {
    gap: 0.85rem;
  }
  .navbar {
    padding: 1rem 0;
  }
  .whatsapp-float {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Moriveda Custom Interactive Components (Slider, Dropdown, Products)
   ========================================================================== */

/* Navbar Dropdown styling */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: var(--bg-navbar);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 0.75rem;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  z-index: 1005;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
}

.dropdown-item {
  display: block;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.dropdown-item:hover {
  background: rgba(45, 90, 39, 0.06);
  color: var(--green-mid);
}

/* ===== Hero Slider =====
   Ratio contract: the container ratio MUST equal the artwork ratio, otherwise
   `cover` crops the banner. Artwork is pre-built to match exactly:
     desktop  assets/images/*_wide.jpg  2400x600  = 4:1
     mobile   assets/images/*_sq.jpg    1080x1080 = 1:1
   4:1 is a slim, wide strip (like supplysix.com) rather than a
   full-viewport-height hero. On a 1512px-wide screen the band is only ~378px
   tall, so with the ~110px header the fold lands well inside the following
   section — the trust strip and product grid are visible without scrolling. */
.hero-slider-container {
  width: 100%;
  max-width: 2400px;
  margin: var(--header-total-h, 110px) auto 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 1;
  background-color: var(--bg-secondary);
}

.hero-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  /* Container ratio == artwork ratio, so `cover` scales without cropping and
     the anchor can sit dead-centre. */
  background-position: center center;
  background-repeat: no-repeat;
  text-decoration: none;
  cursor: pointer;
}

/* Desktop artwork (2.5:1). Mobile overrides live in css/mobile.css. */
.hs-1 { background-image: url('../assets/images/hero_slide_1_wide_v2.jpg'); }
.hs-2 { background-image: url('../assets/images/hero_slide_2_v3_wide.jpg'); }
.hs-3 { background-image: url('../assets/images/hero_slide_3_v2_wide.jpg'); }
.hs-4 { background-image: url('../assets/images/power_slide_v3_wide.jpg'); }
.hs-5 { background-image: url('../assets/images/hero_slide_4_v2_wide.jpg'); }
.hs-6 { background-image: url('../assets/images/hero_slide_5_v2_wide.jpg'); }

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-content-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(18, 22, 16, 0.7) 30%, rgba(18, 22, 16, 0.2) 60%, rgba(18, 22, 16, 0.1) 100%);
  display: flex;
  align-items: center;
  padding: 0 10%;
  z-index: 3;
}

[data-theme="light"] .slide-content-overlay {
  background: linear-gradient(to right, rgba(250, 248, 243, 0.8) 35%, rgba(250, 248, 243, 0.3) 65%, rgba(250, 248, 243, 0.1) 100%);
}

.slide-text-wrapper {
  max-width: 580px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.hero-slide.active .slide-text-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.slide-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.slide-title {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
  font-weight: 500;
}

.slide-description {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Slider Navigation */
.slider-arrows {
  position: absolute;
  bottom: 2rem;
  left: 4rem;
  right: auto;
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--bg-navbar);
  backdrop-filter: blur(10px);
  transition: var(--transition-fast);
}

.slider-arrow:hover {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
}

.slider-dots {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 10;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(45, 90, 39, 0.2);
  cursor: pointer;
  transition: var(--transition-fast);
}

.slider-dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--green-mid);
}

/* Direct Products Landing Grid */
.direct-products-section {
  /* Asymmetric padding: the trust strip directly above already contributes
     its own 2rem of bottom padding, so a full 6rem on top stacked into a
     ~8rem void between the banner and "Choose Your Wellness Pack". Half the
     top padding closes that gap; the bottom keeps its original breathing
     room before the next section. */
  padding: 2.5rem 0 6rem;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.direct-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 3rem;
  width: 100%;
}

.direct-product-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 2.5rem;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: var(--transition-smooth);
}

.direct-product-card:hover {
  transform: translateY(-5px);
  border-color: var(--green-mid);
  box-shadow: 0 20px 40px rgba(45, 90, 39, 0.05);
}

.direct-product-card img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(45, 90, 39, 0.1));
}

.direct-product-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.direct-product-sale-price {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: #d32f2f; /* Red to engage audience */
  margin-right: 0.5rem;
}

.direct-product-card .btn {
  padding: 0.8rem 1.5rem;
  font-size: 0.85rem;
}

/* Wholesale Info Section styling */
.wholesale-section {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 6rem 0;
}

.wholesale-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 4rem;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.wholesale-content {
  flex: 1.2;
}

.wholesale-visual {
  flex: 0.8;
  display: flex;
  justify-content: center;
}

.wholesale-visual img {
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
  max-width: 100%;
}

@media (max-width: 992px) {
  .direct-products-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .direct-product-card {
    padding: 2.5rem;
    gap: 2rem;
  }
  .wholesale-card {
    flex-direction: column;
    padding: 3rem;
    gap: 2.5rem;
    text-align: center;
  }
  /* Tablets keep the wide 4:1 artwork — see css/mobile.css for the
     <=768px switch to the 1:1 square artwork. */
  .hero-slider-container {
    aspect-ratio: 4 / 1;
  }
}

@media (max-width: 600px) {
  .direct-product-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem;
  }
  .direct-product-card img {
    max-height: 200px;
    margin: 0 auto;
  }
  .slider-arrows {
    right: 2rem;
  }
}

/* ===== Customer Feedback / Testimonials ===== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.testimonial-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.75rem;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.testimonial-stars {
  color: #F2CC5A;
  font-size: 0.95rem;
  letter-spacing: 0.15rem;
}

.testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.testimonial-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.testimonial-pack-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  background: rgba(95, 191, 119, 0.14);
  color: var(--green-deep);
}

.testimonial-empty {
  text-align: center;
  color: var(--text-light);
  padding: 2rem 0;
  grid-column: 1 / -1;
}

/* Compact strip used on the shop page, below Add to Cart / Buy Now */
.testimonial-strip-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 3rem 0 1.25rem;
  color: var(--text-primary);
}

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

/* ==========================================================================
   ARTICLE READER — right-hand slide-in panel for the Recipes page.
   Mirrors the cart drawer's geometry and easing so the site has one drawer
   idiom rather than two competing ones. Content is cloned in from the hidden
   .article-body inside each card (see js/articles.js).
   ========================================================================== */

/* Hidden in the grid, shown once cloned into the panel. Removing the [hidden]
   attribute alone is not enough — this class rule would still win. */
.recipe-card .article-body { display: none; }
#article-panel-content .article-body { display: block; }

#article-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 35, 28, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  z-index: 1400;
}
#article-overlay.open { opacity: 1; visibility: visible; }

#article-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(720px, 100%);
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1401;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
#article-panel.open { transform: translateX(0); }

.article-panel-head {
  padding: 1.6rem 2.4rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
  background: var(--bg-primary);
}
.article-panel-head .apn-meta { flex: 1; min-width: 0; }

#article-panel-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-mid);
  display: block;
  margin-bottom: 0.5rem;
}
#article-panel-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}

#article-panel-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
#article-panel-close:hover {
  background: var(--green-light);
  color: var(--green-deep);
  border-color: var(--green-mid);
}

#article-panel-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2rem 2.4rem 4rem;
  overscroll-behavior: contain;
}

/* ---- article typography ---- */
#article-panel-content .art-plate {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin: 0 0 2rem;
  background: var(--bg-secondary);
}
#article-panel-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.15rem;
}
#article-panel-content h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 2.2rem 0 0.9rem;
}
#article-panel-content ul,
#article-panel-content ol {
  margin: 0 0 1.4rem 1.1rem;
  padding: 0;
}
#article-panel-content li {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
  padding-left: 0.35rem;
}
#article-panel-content li::marker { color: var(--green-mid); }

#article-panel-content .art-callout {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--green-mid);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
}
#article-panel-content .art-callout p { margin: 0; font-size: 0.94rem; }

#article-panel-content .art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 1rem 0 1.6rem;
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 1.8rem;
}
#article-panel-content .art-meta div { min-width: 0; }
#article-panel-content .art-meta dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 0.25rem;
}
#article-panel-content .art-meta dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-primary);
  font-weight: 600;
}

#article-panel-content .art-disclaimer {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-light);
}

.article-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  background: var(--gradient-cta);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}
.article-cta:hover { transform: translateY(-2px); opacity: 0.94; }

body.article-open { overflow: hidden; }

@media (max-width: 768px) {
  #article-panel { width: 100%; border-left: none; }
  .article-panel-head { padding: 1.2rem 1.3rem 1rem; }
  #article-panel-content { padding: 1.4rem 1.3rem 3.5rem; }
  #article-panel-content .art-meta { gap: 1.1rem; }
}

/* =====================================================================
   Delivery / pincode checker  (js/delivery-check.js)
   Used on the shop page as a standalone widget, and under the checkout
   modal's pincode field as an inline hint.
   ===================================================================== */
.dc-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dc-input {
  flex: 1;
  min-width: 160px;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(45, 90, 39, 0.18);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  letter-spacing: 0.06em;
}
.dc-input:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 4px rgba(95, 191, 119, 0.14);
}
.dc-btn {
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: var(--gradient-cta);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.dc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.dc-btn:disabled { opacity: 0.55; cursor: default; }

.dc-out {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  min-height: 1.2em;
}
.dc-out:empty { min-height: 0; margin: 0; }
.dc-sub { font-size: 0.83rem; opacity: 0.85; }

.dc-muted { color: var(--text-light); }
.dc-good  { color: var(--green-deep); }
.dc-warn  { color: #B4772F; }
.dc-bad   { color: #B4462F; }

/* Dark theme: the site ships a dark palette via CSS variables, so the
   input must not stay hard-white against it. */
[data-theme="dark"] .dc-input,
body.dark-mode .dc-input {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .dc-good,
body.dark-mode .dc-good { color: var(--green-mid); }

@media (max-width: 480px) {
  .dc-row { flex-direction: column; }
  .dc-input, .dc-btn { width: 100%; }
}

/* =========================================================================
   PRODUCT GALLERY + FULLSCREEN ZOOM VIEWER
   These rules replace the inline styles that used to be written into every
   thumbnail by hand (and duplicated per pack size in js/shop.js). Keeping
   them here means the two galleries can't visually drift apart again.
   ========================================================================= */

.main-gallery-image {
  position: relative;
  background-color: var(--bg-secondary);
  padding: 2rem;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.main-gallery-image img {
  max-height: 400px;
  max-width: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 15px 30px rgba(45, 90, 39, 0.12));
}
.main-gallery-image:hover img { transform: scale(1.03); }

/* Affordance for the zoom viewer. Shown on hover on pointer devices, and
   permanently on touch where there is no hover to reveal it. */
.gallery-zoom-hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 100px;
  background: rgba(30, 35, 28, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(4px);
}
.main-gallery-image:hover .gallery-zoom-hint { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .gallery-zoom-hint { opacity: 1; transform: none; }
}

.gallery-thumbs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery-thumb {
  width: 80px;
  height: 80px;
  padding: 0.4rem;
  background-color: var(--bg-secondary);
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.gallery-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(45, 90, 39, 0.14);
}
.gallery-thumb.active { border-color: var(--green-deep); }
.gallery-thumb:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 2px;
}

/* ---------------------------------------------------- fullscreen viewer --- */

.img-viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;               /* above the sticky header and cart drawer */
  background: rgba(16, 20, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  overscroll-behavior: contain;
  backdrop-filter: blur(2px);
}
.img-viewer.open { opacity: 1; }
.img-viewer[hidden] { display: none; }

.img-viewer-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;            /* we handle pinch/pan ourselves */
}

.img-viewer-stage img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* While actively panning, drop the transition so dragging feels 1:1. */
.img-viewer.zoomed .img-viewer-stage img { transition: none; }

.img-viewer-close,
.img-viewer-nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.img-viewer-close:hover,
.img-viewer-nav:hover { background: rgba(255, 255, 255, 0.24); }
.img-viewer-close:focus-visible,
.img-viewer-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.img-viewer-close {
  top: 1.25rem; right: 1.25rem;
  width: 44px; height: 44px;
  font-size: 1.1rem;
}
.img-viewer-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 1.2rem;
}
.img-viewer-nav.prev { left: 1.25rem; }
.img-viewer-nav.next { right: 1.25rem; }
.img-viewer-nav:hover { transform: translateY(-50%) scale(1.06); }

.img-viewer-toolbar {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}
.img-viewer-toolbar button {
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.img-viewer-toolbar button:hover { background: rgba(255, 255, 255, 0.2); }
.img-viewer-zoom {
  min-width: 52px;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.img-viewer-counter {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .img-viewer-nav { width: 42px; height: 42px; }
  .img-viewer-nav.prev { left: 0.5rem; }
  .img-viewer-nav.next { right: 0.5rem; }
  .img-viewer-close { top: 0.75rem; right: 0.75rem; }
  .img-viewer-stage img { max-width: 96vw; max-height: 74vh; }
  .main-gallery-image { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .main-gallery-image:hover img,
  .gallery-thumb:hover,
  .img-viewer-nav:hover { transform: none; }
  .img-viewer, .img-viewer-stage img, .gallery-zoom-hint { transition: none; }
}