/**
 * Homepage product rows + section color bands (no nested boxes)
 */

:root {
  --isarva-op-green: #006c34;
  --isarva-op-green-deep: #083821;
  --isarva-op-sage: #dff0e4;
  --isarva-op-mist: #f3f8f4;
  --isarva-op-ink: #132218;
  --isarva-op-muted: #5b6c61;
  --isarva-op-line: rgba(0, 108, 52, 0.16);
  --isarva-op-display: "Fraunces", "Georgia", serif;
  --isarva-op-sans: "Jost", system-ui, sans-serif;
}

/* ----- Shared section rhythm ----- */
.modern-home-preview > .mhp-categories,
.modern-home-preview > .mhp-products.section-spacer,
.modern-home-preview > .mhp-promo-strip,
.modern-home-preview > .mhp-video-gallery.section-spacer,
.modern-home-preview > .isarva-testimonials.section-spacer,
.modern-home-preview > .mhp-trust-feature.section-spacer {
  position: relative;
  isolation: isolate;
}

/* ----- Categories strip: right under banner, not a titled section ----- */
.modern-home-preview > .mhp-categories,
.modern-home-preview > .mhp-categories.mhp-categories--strip {
  margin: 0;
  padding: 1rem 0 0.85rem;
  background: transparent;
  border: 0;
}

.modern-home-preview > .mhp-categories .mhp-category-grid {
  padding-bottom: 2px;
}

.modern-home-preview .mhp-category-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.modern-home-preview .mhp-category-rail .mhp-cat-prev,
.modern-home-preview .mhp-category-rail .mhp-cat-next {
  flex-shrink: 0;
  z-index: 2;
}

.modern-home-preview .mhp-category-rail .mhp-category-grid {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .modern-home-preview .mhp-category-rail {
    gap: 0;
  }

  .modern-home-preview .mhp-category-rail .mhp-cat-prev,
  .modern-home-preview .mhp-category-rail .mhp-cat-next {
    display: none !important;
  }
}

/* ----- Our Products: soft green mist -----
   The own-brand pack shots sit on a light, very low-chroma mint (~#d9ebdf).
   A saturated green band overpowers them and makes the products look dull, while
   matching that mint makes the cards dissolve. So this wash stays in the green
   family but keeps low chroma and sits consistently LIGHTER than the photo mint:
   the pack shots read as the most colourful thing on screen, and each card still
   separates as its own tile. Avoid strong radial glows here — they were what
   previously dragged the wash down onto the photo mint value. */
.modern-home-preview > .isarva-our-products.section-spacer {
  margin: 1.15rem 0 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(0, 108, 52, 0.05), transparent 60%),
    linear-gradient(180deg, #f6faf7 0%, #eaf2ed 100%);
  border-block: 1px solid rgba(0, 108, 52, 0.1);
}

.modern-home-preview > .isarva-our-products .container::before {
  content: none !important;
  display: none !important;
}

/* ----- Promo strip: cool mint strip ----- */
.modern-home-preview > .mhp-promo-strip {
  padding: clamp(1.1rem, 2.5vw, 1.75rem) 0;
  background:
    linear-gradient(90deg, #eaf6ee 0%, #f7fbf8 50%, #eaf6ee 100%);
  border-bottom: 1px solid rgba(0, 108, 52, 0.08);
}

/* ----- Bestsellers: clean warm white + soft leaf glow ----- */
.modern-home-preview > .isarva-home-bestsellers.section-spacer {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 108, 52, 0.07), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7faf7 100%);
}

/* ----- Video: deeper botanical ----- */
.modern-home-preview > .mhp-video-gallery.section-spacer {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 108, 52, 0.1), transparent 50%),
    linear-gradient(160deg, #e8f2eb 0%, #f4f8f5 55%, #eef5f0 100%) !important;
}

/* ----- New Arrival: soft golden-sage ----- */
.modern-home-preview > .isarva-home-new.section-spacer {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(180, 140, 60, 0.08), transparent 45%),
    linear-gradient(180deg, #f8f6ef 0%, #f3f7f2 100%);
  border-block: 1px solid rgba(0, 108, 52, 0.07);
}

/* ----- Trust: calm deep mist ----- */
.modern-home-preview > .mhp-trust-feature.section-spacer {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  background:
    radial-gradient(ellipse at 10% 80%, rgba(0, 108, 52, 0.08), transparent 50%),
    linear-gradient(180deg, #eef5f0 0%, #f8fbf9 100%);
  border-top: 1px solid rgba(0, 108, 52, 0.1);
}

/* ----- Single product row (Bestsellers, New Arrival, Our Products) ----- */
.modern-home-preview .mhp-products .mhp-product-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.15rem;
  align-items: stretch;
}

.modern-home-preview .mhp-products .mhp-product-row__item {
  min-width: 0;
}

.modern-home-preview .mhp-products .mhp-product-card {
  height: 100%;
}

/* Phone + tablet: single-row horizontal swipe (app-style) */
@media (max-width: 991.98px) {
  .modern-home-preview .mhp-products .mhp-product-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* overflow-y: hidden clips at the padding box, so the card's -3px hover lift
       gets its top edge cut off. This padding gives the lift somewhere to go. */
    padding-top: 8px;
    padding-bottom: 0.5rem;
    margin-inline: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .modern-home-preview .mhp-products .mhp-product-row::-webkit-scrollbar {
    display: none;
  }

  .modern-home-preview .mhp-products .mhp-product-row__item {
    flex: 0 0 min(42vw, 220px);
    max-width: min(42vw, 220px);
    scroll-snap-align: start;
  }

  .modern-home-preview .mhp-products .mhp-product-body {
    padding: 10px 10px 12px;
  }

  .modern-home-preview .mhp-products .mhp-product-body h3 {
    font-size: 12.5px;
    min-height: 0 !important;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modern-home-preview .mhp-products .mhp-product-body h3 a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modern-home-preview .mhp-products .isarva-op-title-row {
    margin-bottom: 6px;
  }

  .modern-home-preview .mhp-products .isarva-op-title-row h3 {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modern-home-preview .mhp-products .mhp-price {
    font-size: 13.5px;
    margin-bottom: 6px;
  }

  .modern-home-preview .mhp-products .mhp-variation-wrap,
  .modern-home-preview .mhp-products .mhp-variation-placeholder {
    min-height: 36px;
    margin-bottom: 8px;
  }

  .modern-home-preview .mhp-products .mhp-variation-select {
    font-size: 12px;
    height: 34px;
    padding-inline: 8px;
  }
}

/* Phones: two cards per view, capped in px so the card cannot balloon at the
   top of this breakpoint range.
   NOTE: template-home-modern-preview.php prints an inline !important block for
   this same breakpoint, so the homepage is driven by that. Keep the two in sync;
   this rule is the fallback for any other page using these product rows. */
@media (max-width: 767.98px) {
  .modern-home-preview .mhp-products .mhp-product-row {
    gap: 0.5rem;
  }

  .modern-home-preview .mhp-products .mhp-product-row__item {
    flex: 0 0 min(calc(50% - 4px), 200px);
    max-width: min(calc(50% - 4px), 200px);
  }
}

/* ----- Shared product-section header (Our Products, Bestsellers, New Arrival) ----- */
.mhp-products .isarva-op-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  margin-bottom: 1rem;
  padding: 0;
  border-bottom: none;
}

.mhp-products .isarva-op-kicker {
  display: inline-block;
  margin: 0 0 0.35rem;
  font-family: var(--isarva-op-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isarva-op-green);
}

.mhp-products .isarva-op-head h2 {
  margin: 0;
  font-family: var(--isarva-op-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.4vw, 2.45rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--isarva-op-green-deep);
}

.mhp-products .isarva-op-intro {
  margin: 0.4rem 0 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--isarva-op-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--isarva-op-muted);
}

.mhp-products .isarva-op-head__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-bottom: 0.15rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 108, 52, 0.28);
  background: #fff;
  color: var(--isarva-op-green-deep);
  font-family: var(--isarva-op-sans);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mhp-products .isarva-op-head__link:hover {
  background: var(--isarva-op-green);
  border-color: var(--isarva-op-green);
  color: #fff;
  text-decoration: none;
}

.mhp-products .isarva-op-mobile-cta {
  display: none;
  margin-top: 1.15rem;
}

@media (max-width: 767.98px) {
  .modern-home-preview > .mhp-categories,
  .modern-home-preview > .mhp-categories.mhp-categories--strip {
    padding-top: 0.85rem;
    padding-bottom: 0.65rem;
  }

  .modern-home-preview > .mhp-categories .mhp-category-grid {
    padding-bottom: 0.15rem;
    margin-bottom: 0;
  }

  .modern-home-preview > .mhp-products.section-spacer {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .modern-home-preview > .isarva-our-products.section-spacer,
  .modern-home-preview > .mhp-products.isarva-our-products.section-spacer {
    margin-top: 1rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  .modern-home-preview > .isarva-home-bestsellers.section-spacer,
  .modern-home-preview > .isarva-home-new.section-spacer {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem !important;
  }

  .mhp-products .isarva-op-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.95rem;
    gap: 0.35rem;
  }

  .mhp-products .isarva-op-head h2 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }

  .mhp-products .isarva-op-head__link {
    display: none;
  }

  .mhp-products .isarva-op-intro {
    white-space: normal;
    font-size: 0.9rem;
  }

  /* Keep flex so the mobile CTA stays centered (block broke alignment). */
  .mhp-products .isarva-op-mobile-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding-inline: 0.25rem;
  }

  .mhp-products .isarva-op-mobile-cta .mhp-view-more-btn {
    width: 100%;
    max-width: 280px;
    min-width: 0;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0, 108, 52, 0.28);
    background: #fff;
    color: var(--isarva-op-green-deep);
    font-weight: 600;
    text-align: center;
  }
}

/* ----- Our Products cards ----- */
.isarva-our-products .isarva-op-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 108, 52, 0.16);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17, 49, 35, 0.07);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* z-index on lift: without it the raised card slides under the neighbouring
   section's background (each section is an isolated stacking context), which
   reads as the card's border cutting into the block below. */
.isarva-our-products .isarva-op-card:hover,
.isarva-our-products .isarva-op-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(0, 108, 52, 0.32);
  box-shadow: 0 16px 34px rgba(17, 49, 35, 0.1);
  z-index: 3;
}

/* Touch devices keep :hover latched after a tap, so the card would sit raised
   with nothing to un-hover it. Drop the lift where there is no real pointer. */
@media (hover: none) {
  .isarva-our-products .isarva-op-card:hover,
  .isarva-our-products .isarva-op-card:focus-within {
    transform: none;
  }
}

.isarva-our-products .isarva-op-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.55rem;
  margin: 0 0 8px;
}

.isarva-our-products .isarva-op-title-row h3 {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
}

.isarva-our-products .isarva-op-badge {
  position: static;
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0.15rem 0 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #006c34;
  background: #006c34;
  color: #fff;
  font-family: var(--isarva-op-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
  white-space: nowrap;
}

/* Match homepage product stage — portrait 2:3 fits Ayurvivek pack shots */
.isarva-our-products .mhp-product-image-wrap {
  display: block;
  background: #eef5f0;
  aspect-ratio: 2 / 3;
  padding: 0;
  min-height: 0;
}

.isarva-our-products .mhp-product-image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.isarva-our-products .mhp-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px;
}

.isarva-our-products .mhp-product-body h3 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 0 !important;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isarva-our-products .mhp-product-body h3 a {
  color: #1c2b25;
  font-weight: 600;
  text-decoration: none;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isarva-our-products .isarva-op-title-row h3,
.isarva-our-products .isarva-op-title-row h3 a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isarva-our-products .mhp-price {
  color: var(--isarva-op-green);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.isarva-our-products .mhp-product-actions {
  margin-top: auto;
}

/* Keep Buy Now / cart aligned: same reserved height for variation row on every card */
.mhp-products .mhp-variation-wrap,
.mhp-products .mhp-variation-placeholder,
.isarva-our-products .mhp-variation-wrap,
.isarva-our-products .mhp-variation-placeholder {
  display: block;
  min-height: 42px;
  margin: 0 0 10px;
  padding: 0;
}

.mhp-products .mhp-variation-wrap--disabled .mhp-variation-select,
.isarva-our-products .mhp-variation-wrap--disabled .mhp-variation-select {
  background: #f1f4f2;
  color: #7a8a82;
  border-color: #d5e0da;
  cursor: not-allowed;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.isarva-our-products .mhp-product-actions .mhp-btn-primary {
  background: #006c34;
  border-color: #006c34;
  color: #fff;
}

.isarva-our-products .mhp-product-actions .mhp-btn-primary:hover {
  background: #08522a;
  border-color: #08522a;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .isarva-our-products .isarva-op-card {
    transition: none;
  }

  .isarva-our-products .isarva-op-card:hover {
    transform: none;
  }
}

/* section-bands 1785751442 */