/* ==========================================================================
   Ayurveda Panel — premium design tokens (CSS custom properties only,
   per project convention: no hardcoded hex outside this token layer)
   ========================================================================== */
:root {
  --ay-forest:        #1B4332;
  --ay-forest-deep:    #0E2A1E;
  --ay-gold:          #C9A227;
  --ay-gold-soft:     #E8D9A0;
  --ay-ivory:         #FAF7F0;
  --ay-ivory-warm:    #F3ECDC;
  --ay-maroon:        #7C2D3E;
  --ay-ink:           #1F2421;
  --ay-ink-muted:     #5B6660;
  --ay-border:        #E3DCC8;
  --ay-card-bg:       #FFFFFF;
  --ay-shadow:        0 12px 32px -12px rgba(27,67,50,.18);
  --ay-radius-lg:     20px;
  --ay-radius-md:     12px;
  --ay-font-head:     'Fraunces', serif;
  --ay-font-body:     'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.ay-body {
  margin: 0;
  background: var(--ay-ivory);
  color: var(--ay-ink);
  font-family: var(--ay-font-body);
  line-height: 1.6;
}

.ay-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---- Top bar ---- */
.ay-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ay-forest);
  border-bottom: 1px solid rgba(201,162,39,.25);
}
.ay-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1240px; margin: 0 auto;
}
.ay-logo {
  font-family: var(--ay-font-head);
  font-weight: 700; font-size: 1.35rem; color: var(--ay-ivory);
  letter-spacing: .02em; text-decoration: none;
}
.ay-logo span { color: var(--ay-gold); }
.ay-nav { display: flex; align-items: center; gap: 28px; }
.ay-nav a {
  color: var(--ay-ivory-warm); text-decoration: none; font-size: .875rem;
  font-weight: 600; letter-spacing: .03em; opacity: .85;
  display: flex; align-items: center; gap: 6px;
}
.ay-nav a:hover { opacity: 1; color: var(--ay-gold); }
.ay-soon-tag {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ay-forest);
  background: var(--ay-gold-soft); padding: 2px 6px; border-radius: 999px;
}
.ay-nav-cta {
  background: var(--ay-gold); color: var(--ay-forest-deep) !important;
  padding: 9px 20px; border-radius: 999px; font-weight: 800 !important;
  opacity: 1 !important;
}
.ay-nav-cta:hover { background: var(--ay-gold-soft); }
.ay-hamburger { display: none; background: none; border: none; color: var(--ay-ivory); font-size: 1.4rem; cursor: pointer; }

/* ---- Hero ---- */
.ay-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(160deg, var(--ay-forest-deep), var(--ay-forest) 65%);
  color: var(--ay-ivory);
  padding: 92px 24px 110px;
}
.ay-hero-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.ay-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ay-gold-soft); margin-bottom: 18px;
}
.ay-eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--ay-gold); display: inline-block; }
.ay-hero h1 {
  font-family: var(--ay-font-head); font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.12; margin: 0 0 20px;
}
.ay-hero h1 em { font-style: italic; color: var(--ay-gold); }
.ay-hero p.lead {
  font-size: 1.05rem; color: rgba(250,247,240,.82); max-width: 46ch; margin: 0 0 32px;
}
.ay-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.ay-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
}
.ay-btn-primary { background: var(--ay-gold); color: var(--ay-forest-deep); }
.ay-btn-primary:hover { background: var(--ay-gold-soft); }
.ay-btn-ghost { border-color: rgba(250,247,240,.4); color: var(--ay-ivory); }
.ay-btn-ghost:hover { border-color: var(--ay-gold); color: var(--ay-gold-soft); }

.ay-hero-art {
  position: relative; aspect-ratio: 1/1; border-radius: 32px;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,162,39,.35), transparent 55%),
    conic-gradient(from 210deg, rgba(201,162,39,.25), rgba(250,247,240,.06), rgba(201,162,39,.25));
  border: 1px solid rgba(201,162,39,.3);
  display: flex; align-items: center; justify-content: center; font-size: 6rem;
}

/* ---- Trust strip ---- */
.ay-trust { background: var(--ay-forest-deep); padding: 18px 24px; }
.ay-trust-inner {
  max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; color: var(--ay-ivory-warm); font-size: .78rem; font-weight: 700;
  letter-spacing: .03em;
}
.ay-trust-inner span { display: flex; align-items: center; gap: 8px; opacity: .9; }

/* ---- Section shell ---- */
.ay-section { padding: 76px 24px; }
.ay-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.ay-section-eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ay-maroon); margin-bottom: 10px; display: block;
}
.ay-section-head h2 { font-family: var(--ay-font-head); font-size: clamp(1.6rem,3vw,2.2rem); margin: 0 0 14px; color: var(--ay-forest); }
.ay-section-head p { color: var(--ay-ink-muted); font-size: .95rem; margin: 0; }

/* ---- Herb spotlight ---- */
.ay-herb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ay-herb-card {
  background: var(--ay-card-bg); border: 1px solid var(--ay-border); border-radius: var(--ay-radius-lg);
  padding: 26px 22px; box-shadow: var(--ay-shadow); transition: transform .2s ease;
}
.ay-herb-card:hover { transform: translateY(-4px); }
.ay-herb-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--ay-ivory-warm);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 16px;
}
.ay-herb-card h4 { font-family: var(--ay-font-head); font-size: 1.1rem; margin: 0 0 4px; color: var(--ay-forest); }
.ay-herb-latin { font-size: .72rem; font-style: italic; color: var(--ay-ink-muted); margin: 0 0 10px; }
.ay-herb-card p.desc { font-size: .82rem; color: var(--ay-ink-muted); margin: 0; }

/* ---- Dosha CTA band ---- */
.ay-dosha-band {
  margin: 0 24px; border-radius: 28px; padding: 56px 40px;
  background: linear-gradient(120deg, var(--ay-forest), var(--ay-forest-deep));
  color: var(--ay-ivory); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.ay-dosha-band h3 { font-family: var(--ay-font-head); font-size: clamp(1.5rem,2.6vw,2rem); margin: 0 0 12px; }
.ay-dosha-band p { color: rgba(250,247,240,.8); margin: 0 0 0; max-width: 52ch; font-size: .92rem; }
.ay-dosha-pills { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ay-dosha-pill {
  font-size: .72rem; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(201,162,39,.4); color: var(--ay-gold-soft);
}

/* ---- Value props ---- */
.ay-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ay-value-card { text-align: center; padding: 8px; }
.ay-value-icon {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--ay-ivory-warm); display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.ay-value-card h4 { font-family: var(--ay-font-head); font-size: 1.05rem; margin: 0 0 8px; color: var(--ay-forest); }
.ay-value-card p { font-size: .85rem; color: var(--ay-ink-muted); margin: 0; }

/* ---- Categories (what's coming) ---- */
.ay-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ay-cat-card {
  position: relative; border-radius: var(--ay-radius-lg); overflow: hidden;
  background: var(--ay-forest); color: var(--ay-ivory); padding: 30px 24px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ay-cat-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(220px 160px at 85% 0%, rgba(201,162,39,.3), transparent 70%);
}
.ay-cat-card h4 { font-family: var(--ay-font-head); font-size: 1.15rem; margin: 0 0 6px; position: relative; }
.ay-cat-card p { font-size: .8rem; color: rgba(250,247,240,.75); margin: 0; position: relative; }
.ay-cat-badge {
  position: absolute; top: 18px; right: 18px; font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; background: var(--ay-gold);
  color: var(--ay-forest-deep); padding: 3px 9px; border-radius: 999px;
}

/* ---- Newsletter ---- */
.ay-newsletter {
  background: var(--ay-ivory-warm); border-radius: var(--ay-radius-lg); margin: 0 24px;
  padding: 44px 36px; text-align: center;
}
.ay-newsletter h3 { font-family: var(--ay-font-head); color: var(--ay-forest); margin: 0 0 8px; font-size: 1.4rem; }
.ay-newsletter p { color: var(--ay-ink-muted); font-size: .88rem; margin: 0 0 22px; }
.ay-newsletter-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.ay-newsletter-form input {
  flex: 1; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--ay-border);
  font-family: var(--ay-font-body); font-size: .88rem;
}
.ay-newsletter-form button {
  background: var(--ay-forest); color: var(--ay-ivory); border: none; padding: 12px 22px;
  border-radius: 999px; font-weight: 800; font-size: .85rem; cursor: pointer;
}

/* ---- Footer ---- */
.ay-footer { background: var(--ay-forest-deep); color: rgba(250,247,240,.75); padding: 56px 24px 28px; margin-top: 40px; }
.ay-footer-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ay-footer-brand .ay-logo { color: var(--ay-ivory); }
.ay-footer-brand p { font-size: .82rem; margin: 14px 0 0; max-width: 32ch; color: rgba(250,247,240,.6); }
.ay-footer h5 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ay-gold-soft); margin: 0 0 14px; }
.ay-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ay-footer a { color: rgba(250,247,240,.72); text-decoration: none; font-size: .84rem; }
.ay-footer a:hover { color: var(--ay-gold); }
.ay-footer-bottom {
  max-width: 1240px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(250,247,240,.12);
  font-size: .76rem; color: rgba(250,247,240,.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* legacy cutoff removed (legacy hero/herb/dosha/footer cutoffs) - replaced by mobile-first cascade below */


/* ==========================================================================
   Our Products — tabbed catalog section (added: products showcase)
   ========================================================================== */
.ay-products-tabs {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  background: var(--ay-ivory-warm); border-radius: 999px; padding: 6px;
  max-width: fit-content; margin: 0 auto 40px;
}
.ay-ptab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--ay-font-body); font-size: .72rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ay-ink-muted);
  padding: 10px 18px; border-radius: 999px; transition: all .18s ease;
}
.ay-ptab:hover { color: var(--ay-forest); }
.ay-ptab.active { background: var(--ay-gold); color: var(--ay-forest-deep); }

.ay-product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.ay-product-card {
  background: var(--ay-card-bg); border: 1px solid var(--ay-border);
  border-radius: var(--ay-radius-lg); overflow: hidden; box-shadow: var(--ay-shadow);
  display: flex; flex-direction: column; transition: transform .2s ease;
}
.ay-product-card:hover { transform: translateY(-4px); }
.ay-product-card.ay-hide { display: none; }

.ay-product-media {
  position: relative; aspect-ratio: 1/1; background: var(--ay-ivory-warm);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ay-product-media svg { width: 78%; height: 78%; }
.ay-product-tag {
  position: absolute; top: 12px; left: 12px; font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px;
  background: var(--ay-gold); color: var(--ay-forest-deep);
}
.ay-product-tag.new { background: var(--ay-forest); color: var(--ay-ivory); }

.ay-product-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ay-product-body h4 { font-family: var(--ay-font-head); font-size: .98rem; margin: 0; color: var(--ay-ink); line-height: 1.3; }
.ay-product-body .sub { font-size: .76rem; color: var(--ay-ink-muted); margin: 0; }
.ay-product-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.ay-product-price .now { font-weight: 800; font-size: 1.02rem; color: var(--ay-ink); }
.ay-product-price .mrp { font-size: .82rem; color: var(--ay-ink-muted); text-decoration: line-through; }
.ay-product-price .off { font-size: .74rem; font-weight: 800; color: #1B7A43; }
.ay-product-sizes { display: flex; gap: 6px; margin-top: 2px; }
.ay-size-pill {
  font-size: .68rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1.5px solid var(--ay-border); color: var(--ay-ink-muted);
}
.ay-size-pill.sel { border-color: var(--ay-gold); color: var(--ay-forest); background: var(--ay-gold-soft); }
.ay-product-add {
  margin-top: auto; width: 100%; background: var(--ay-gold); color: var(--ay-forest-deep);
  border: none; padding: 11px; border-radius: 999px; font-weight: 800; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.ay-product-add:hover { background: var(--ay-gold-soft); }
.ay-products-viewall { text-align: center; margin-top: 34px; }
.ay-products-viewall a {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ay-forest); text-decoration: none; border-bottom: 1.5px solid var(--ay-gold); padding-bottom: 3px;
}

/* legacy cutoff removed (legacy product-grid cutoffs) - replaced by mobile-first cascade below */


/* ==========================================================================
   Shop by Category
   ========================================================================== */
.ay-cats-row { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; }
.ay-cat-circle { text-align: center; cursor: pointer; background: none; border: none; font-family: var(--ay-font-body); }
.ay-cat-circle-img {
  width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  background: radial-gradient(circle at 32% 28%, var(--ay-gold-soft), var(--ay-forest) 78%);
  box-shadow: var(--ay-shadow); transition: transform .18s ease;
}
.ay-cat-circle:hover .ay-cat-circle-img { transform: translateY(-4px) scale(1.04); }
.ay-cat-circle-label { font-size: .82rem; font-weight: 700; color: var(--ay-ink); }

/* ==========================================================================
   New Arrivals (dedicated section, reuses .ay-product-* card styles)
   ========================================================================== */
.ay-newarrivals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* legacy cutoff removed (legacy new-arrivals-grid cutoffs) - replaced by mobile-first cascade below */

/* ==========================================================================
   Gifting banner
   ========================================================================== */
.ay-gift-banner {
  margin: 0 24px; border-radius: var(--ay-radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--ay-card-bg); border: 1px solid var(--ay-border); box-shadow: var(--ay-shadow);
}
.ay-gift-art {
  background: linear-gradient(135deg, var(--ay-forest), var(--ay-forest-deep));
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.ay-gift-art svg { width: 62%; max-width: 220px; }
.ay-gift-copy { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; background: var(--ay-ivory-warm); }
.ay-gift-copy span.eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ay-maroon); margin-bottom: 10px; display: block;
}
.ay-gift-copy h3 { font-family: var(--ay-font-head); font-size: 1.7rem; color: var(--ay-forest); margin: 0 0 14px; }
.ay-gift-copy p { font-size: .92rem; color: var(--ay-ink-muted); margin: 0 0 22px; max-width: 42ch; }
/* legacy cutoff removed (legacy gift-banner cutoff) - replaced by mobile-first cascade below */

/* ==========================================================================
   Ritual Spotlight (educational how-to cards — NOT customer testimonials)
   ========================================================================== */
.ay-ritual-row {
  display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory;
}
.ay-ritual-row::-webkit-scrollbar { height: 6px; }
.ay-ritual-row::-webkit-scrollbar-thumb { background: var(--ay-border); border-radius: 999px; }
.ay-ritual-card {
  position: relative; flex: 0 0 190px; aspect-ratio: 9/15; border-radius: 18px; overflow: hidden;
  scroll-snap-align: start; background: linear-gradient(160deg, var(--ay-forest), var(--ay-forest-deep));
  box-shadow: var(--ay-shadow);
}
.ay-ritual-card .art {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .9;
}
.ay-ritual-card .art svg { width: 58%; }
.ay-ritual-card .overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px;
  background: linear-gradient(0deg, rgba(14,42,30,.92), rgba(14,42,30,0));
  color: var(--ay-ivory);
}
.ay-ritual-card .overlay .cap { font-size: .78rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.ay-ritual-card .overlay .chip {
  display: inline-block; font-size: .62rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(201,162,39,.25); border: 1px solid rgba(201,162,39,.5); color: var(--ay-gold-soft);
}


/* ==========================================================================
   Our Products — section polish (background band, hover zoom, size-pill click)
   ========================================================================== */
#shop {
  background: linear-gradient(180deg, var(--ay-ivory-warm), var(--ay-ivory) 85%);
  border-radius: 0 0 36px 36px;
}
.ay-product-media svg { transition: transform .25s ease; }
.ay-product-card:hover .ay-product-media svg { transform: scale(1.07); }
.ay-product-trustline {
  text-align: center; font-size: .78rem; color: var(--ay-ink-muted); margin-top: 6px;
}
.ay-size-pill { cursor: pointer; transition: all .15s ease; }


/* ==========================================================================
   Header — announcement bar / social+logo+actions row / nav row
   ========================================================================== */
.ay-annbar {
  background: var(--ay-gold); color: var(--ay-forest-deep);
  text-align: center; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 9px 16px;
}
.ay-header { background: var(--ay-ivory); border-bottom: 1px solid var(--ay-border); }
.ay-header-row {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 24px;
}
.ay-header-social { display: flex; align-items: center; gap: 16px; }
.ay-header-social a { color: var(--ay-ink); opacity: .7; display: flex; }
.ay-header-social a:hover { opacity: 1; color: var(--ay-forest); }
.ay-header-social svg { width: 18px; height: 18px; }

.ay-header-logo { text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ay-header-logo .wordmark {
  font-family: var(--ay-font-head); font-size: 1.6rem; font-weight: 700; color: var(--ay-forest); letter-spacing: .01em;
}
.ay-header-logo .wordmark em { font-style: italic; color: var(--ay-maroon); }
.ay-header-logo .tagline { font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ay-ink-muted); }

.ay-header-actions { display: flex; align-items: center; gap: 18px; }
.ay-header-actions a { color: var(--ay-ink); position: relative; display: flex; }
.ay-header-actions a:hover { color: var(--ay-forest); }
.ay-header-actions svg { width: 21px; height: 21px; }
.ay-cart-badge {
  position: absolute; top: -7px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--ay-maroon); color: #fff; font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

.ay-header-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 24px; border-top: 1px solid var(--ay-border);
}
.ay-header-nav-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ay-header-nav-links a {
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ay-ink); text-decoration: none; opacity: .82;
}
.ay-header-nav-links a:hover { opacity: 1; color: var(--ay-maroon); }

.ay-header-search { display: flex; align-items: center; background: var(--ay-ivory-warm); border-radius: 999px; padding: 7px 8px 7px 16px; gap: 8px; }
.ay-header-search input {
  border: none; background: none; outline: none; font-family: var(--ay-font-body); font-size: .78rem;
  width: 140px; color: var(--ay-ink);
}
.ay-header-search input::placeholder { color: var(--ay-ink-muted); }
.ay-header-search button { border: none; background: var(--ay-forest); color: var(--ay-ivory); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ay-header-search button svg { width: 13px; height: 13px; }

.ay-header-hamburger { display: none; background: none; border: none; color: var(--ay-forest); font-size: 1.4rem; cursor: pointer; }

/* old single-breakpoint header media queries removed - replaced by mobile-first cascade below */


/* ==========================================================================
   Sticky header + nav dropdown (Shop by Category mega-lite menu)
   ========================================================================== */
.ay-header { position: sticky; top: 0; z-index: 200; transition: box-shadow .2s ease; }
.ay-header.ay-scrolled { box-shadow: 0 10px 26px -14px rgba(14,42,30,.35); }

.ay-nav-dropdown-wrap { position: relative; }
.ay-nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ay-nav-dropdown-trigger .chev { transition: transform .18s ease; }
.ay-nav-dropdown-wrap:hover .ay-nav-dropdown-trigger .chev,
.ay-nav-dropdown-wrap.ay-dd-open .ay-nav-dropdown-trigger .chev { transform: rotate(180deg); }

.ay-nav-dropdown {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--ay-card-bg); border: 1px solid var(--ay-border); border-radius: 14px;
  box-shadow: var(--ay-shadow); padding: 10px; min-width: 220px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.ay-nav-dropdown::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--ay-card-bg);
  border-left: 1px solid var(--ay-border); border-top: 1px solid var(--ay-border);
}
.ay-nav-dropdown-wrap:hover .ay-nav-dropdown,
.ay-nav-dropdown-wrap.ay-dd-open .ay-nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ay-dd-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: .8rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--ay-ink) !important; opacity: 1 !important; text-decoration: none;
}
.ay-dd-item:hover { background: var(--ay-ivory-warm); color: var(--ay-forest) !important; }
.ay-dd-item .ico { font-size: 1rem; }

/* dead mobile dropdown override removed - superseded by mobile-first cascade */


/* ===================================================================
   Ayurveda Header — Mobile-First Responsive Rewrite
   Breakpoints: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   Base (no media query) = 320px and up. Progressive min-width overrides.
   =================================================================== */

.ay-annbar {
  background: var(--ay-forest-deep);
  color: var(--ay-gold-soft);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  line-height: 1.4;
}

.ay-header {
  background: var(--ay-ivory);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow .2s ease;
}
.ay-header.ay-scrolled {
  box-shadow: 0 4px 16px rgba(14,42,30,0.12);
}

.ay-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 10px;
}

/* Social icons: hidden on phones, shown from tablet-portrait up */
.ay-header-social {
  display: none;
}
.ay-header-social a {
  color: var(--ay-forest);
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.ay-header-social a svg { width: 100%; height: 100%; }

.ay-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  line-height: 1.1;
}
.ay-header-logo .wordmark {
  font-family: var(--ay-font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ay-forest-deep);
}
.ay-header-logo .wordmark em {
  font-style: normal;
  color: var(--ay-gold);
}
.ay-header-logo .tagline {
  display: none;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ay-maroon);
  margin-top: 1px;
}

.ay-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ay-header-actions a {
  color: var(--ay-forest-deep);
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.ay-header-actions a svg { width: 100%; height: 100%; }

.ay-header-hamburger {
  background: none;
  border: none;
  padding: 2px;
  width: 24px;
  height: 24px;
  color: var(--ay-forest-deep);
  cursor: pointer;
  display: inline-flex;
}
.ay-header-hamburger svg { width: 100%; height: 100%; }

/* Desktop nav row: hidden by default (mobile), shown at 1024px+ */
.ay-header-nav {
  display: none;
}

/* ---------------- 375px — iPhone SE ---------------- */
@media (min-width: 375px) {
  .ay-header-row { padding: 11px 18px; }
  .ay-header-logo .wordmark { font-size: 1.1rem; }
}

/* ---------------- 390px — iPhone 14 standard ---------------- */
@media (min-width: 390px) {
  .ay-header-actions { gap: 14px; }
}

/* ---------------- 430px — iPhone 14 Plus / large mobile ---------------- */
@media (min-width: 430px) {
  .ay-header-row { padding: 12px 22px; }
  .ay-header-logo .wordmark { font-size: 1.18rem; }
  .ay-annbar { font-size: 0.76rem; padding: 7px 12px; }
}

/* ---------------- 768px — Tablet portrait (iPad) ---------------- */
@media (min-width: 768px) {
  .ay-header-row { padding: 14px 32px; }
  .ay-header-social {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ay-header-logo .tagline { display: block; }
  .ay-header-logo .wordmark { font-size: 1.35rem; }
  .ay-header-actions { gap: 18px; }
  .ay-header-actions a, .ay-header-hamburger { width: 22px; height: 22px; }
}

/* ---------------- 1024px — Tablet landscape / small laptop ---------------- */
@media (min-width: 1024px) {
  .ay-header-row { padding: 16px 40px; }
  .ay-header-hamburger { display: none; }

  .ay-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px 14px;
    border-top: 1px solid rgba(27,67,50,0.08);
  }
  .ay-header-nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .ay-header-nav-links > a {
    color: var(--ay-forest-deep);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .ay-header-nav-links > a:hover { color: var(--ay-gold); }

  .ay-header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(27,67,50,0.18);
    border-radius: 20px;
    padding: 5px 8px 5px 14px;
    min-width: 190px;
  }
  .ay-header-search input {
    border: none;
    outline: none;
    background: none;
    font-size: 0.82rem;
    flex: 1;
    color: var(--ay-forest-deep);
    font-family: var(--ay-font-body);
  }
  .ay-header-search button {
    background: none;
    border: none;
    color: var(--ay-forest);
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .ay-header-search button svg { width: 100%; height: 100%; }
}

/* ---------------- 1280px — Standard desktop ---------------- */
@media (min-width: 1280px) {
  .ay-header-nav-links { gap: 34px; }
  .ay-header-search { min-width: 220px; }
}

/* ---------------- 1440px — Large desktop ---------------- */
@media (min-width: 1440px) {
  .ay-header-row { padding: 18px 60px; }
  .ay-header-nav { padding: 0 60px 16px; }
  .ay-header-logo .wordmark { font-size: 1.5rem; }
}

/* ---------------- 1920px — Wide screen ---------------- */
@media (min-width: 1920px) {
  .ay-header-row { padding: 20px 90px; }
  .ay-header-nav { padding: 0 90px 18px; }
}

/* ===================== Shop-by-Category dropdown (desktop, 1024px+) ===================== */
.ay-nav-dropdown-wrap { position: relative; }
.ay-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ay-nav-dropdown-trigger .chev { transition: transform .18s ease; }
.ay-nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(14,42,30,0.16);
  padding: 10px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 50;
}
@media (min-width: 1024px) {
  .ay-nav-dropdown-wrap:hover .ay-nav-dropdown,
  .ay-nav-dropdown-wrap.ay-dd-open .ay-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .ay-nav-dropdown-wrap:hover .chev,
  .ay-nav-dropdown-wrap.ay-dd-open .chev {
    transform: rotate(180deg);
  }
}
.ay-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
}
.ay-dd-item:hover { background: var(--ay-ivory-warm); color: var(--ay-gold); }
.ay-dd-item .ico { font-size: 1rem; }

/* ===================================================================
   Mobile mega-menu — off-canvas drawer
   =================================================================== */
.ay-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,42,30,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
  z-index: 900;
}
.ay-drawer-backdrop.ay-open { opacity: 1; visibility: visible; }

.ay-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 86vw;
  max-width: 360px;
  background: var(--ay-ivory);
  z-index: 901;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 28px rgba(14,42,30,0.18);
}
.ay-drawer.ay-open { transform: translateX(0); }

.ay-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(27,67,50,0.1);
}
.ay-drawer-logo {
  font-family: var(--ay-font-head);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ay-forest-deep);
  text-decoration: none;
}
.ay-drawer-logo em { font-style: normal; color: var(--ay-gold); }
.ay-drawer-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--ay-forest-deep);
  cursor: pointer;
  width: 32px;
  height: 32px;
}

.ay-drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 18px;
  border: 1px solid rgba(27,67,50,0.18);
  border-radius: 20px;
  padding: 8px 10px 8px 16px;
}
.ay-drawer-search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-size: 0.9rem;
  color: var(--ay-forest-deep);
  font-family: var(--ay-font-body);
}
.ay-drawer-search button {
  background: none;
  border: none;
  color: var(--ay-forest);
  width: 18px;
  height: 18px;
}
.ay-drawer-search button svg { width: 100%; height: 100%; }

.ay-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 18px;
}
.ay-drawer-item {
  display: flex;
  align-items: center;
  padding: 13px 12px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(27,67,50,0.06);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--ay-font-body);
}
.ay-drawer-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ay-drawer-accordion-trigger .chev { transition: transform .2s ease; color: var(--ay-forest); }
.ay-drawer-accordion.ay-open .ay-drawer-accordion-trigger .chev { transform: rotate(180deg); }

.ay-drawer-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: var(--ay-ivory-warm);
  border-radius: 8px;
}
.ay-drawer-accordion.ay-open .ay-drawer-accordion-panel {
  max-height: 320px;
}
.ay-drawer-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.86rem;
}
.ay-drawer-subitem .ico { font-size: 0.95rem; }
.ay-drawer-account { color: var(--ay-maroon); }

.ay-drawer-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-top: 1px solid rgba(27,67,50,0.1);
}
.ay-drawer-footer a {
  color: var(--ay-forest);
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.ay-drawer-footer a svg { width: 100%; height: 100%; }

body.ay-drawer-locked { overflow: hidden; }

/* Drawer only makes sense below desktop nav breakpoint; keep it available up to 1023px */
@media (min-width: 1024px) {
  .ay-drawer, .ay-drawer-backdrop { display: none; }
}


/* ===================================================================
   Ayurveda Header — Shop-by-Category Mega Menu
   Broad Ayurveda taxonomy (not skincare-only): product type,
   health concern (diabetes, digestion, immunity, etc.) and dosha.
   =================================================================== */

.ay-mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  transform: translateY(6px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(14,42,30,0.18);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) 200px;
  gap: 30px;
  width: max-content;
  max-width: min(820px, 92vw);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
@media (min-width: 1024px) {
  .ay-nav-dropdown-wrap:hover .ay-mega-panel,
  .ay-nav-dropdown-wrap.ay-dd-open .ay-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .ay-nav-dropdown-wrap:hover .chev,
  .ay-nav-dropdown-wrap.ay-dd-open .chev {
    transform: rotate(180deg);
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-mega-panel {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    max-width: 620px;
  }
  .ay-mega-promo {
    grid-column: 1 / -1;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
}
@media (min-width: 1280px) {
  .ay-mega-panel { max-width: 900px; }
}

.ay-mega-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 150px;
}
.ay-mega-heading {
  font-family: var(--ay-font-head);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ay-maroon);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(27,67,50,0.1);
}
.ay-mega-item {
  padding: 6px 7px;
  border-radius: 6px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.ay-mega-item:hover { background: var(--ay-ivory-warm); color: var(--ay-gold); }
.ay-mega-item-cta { color: var(--ay-gold); font-weight: 700; }

.ay-mega-promo {
  background: var(--ay-forest-deep);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 200px;
}
.ay-mega-promo-icon { font-size: 1.6rem; line-height: 1; }
.ay-mega-promo-title {
  font-family: var(--ay-font-head);
  color: var(--ay-ivory);
  font-size: 0.92rem;
  font-weight: 600;
}
.ay-mega-promo-text {
  color: var(--ay-gold-soft);
  font-size: 0.72rem;
  line-height: 1.45;
}
.ay-mega-promo-btn {
  margin-top: 4px;
  align-self: flex-start;
  background: var(--ay-gold);
  color: var(--ay-forest-deep);
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile drawer: grouped accordion (Product Type / Concern / Dosha) */
.ay-drawer-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ay-maroon);
  padding: 12px 20px 5px;
}
.ay-drawer-accordion.ay-open .ay-drawer-accordion-panel {
  max-height: 2400px;
}


/* ===================================================================
   Ayurveda Landing — Mobile-First Responsive Rewrite
   Breakpoints: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   Base (no media query) = 320px and up. Progressive min-width overrides.
   Replaces the old scattered max-width(1024/900/800/720/560) cutoffs.
   =================================================================== */

/* ---- Global container / section shell ---- */
.ay-wrap { padding: 0 16px; }
.ay-section { padding: 48px 16px; }
@media (min-width: 430px) {
  .ay-wrap { padding: 0 20px; }
  .ay-section { padding: 56px 20px; }
}
@media (min-width: 768px) {
  .ay-wrap { padding: 0 32px; }
  .ay-section { padding: 64px 28px; }
}
@media (min-width: 1024px) {
  .ay-wrap { padding: 0 40px; }
  .ay-section { padding: 76px 24px; }
}
@media (min-width: 1440px) {
  .ay-wrap { padding: 0 60px; }
}

/* ---- Hero ---- */
.ay-hero { padding: 52px 16px 64px; }
.ay-hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.ay-hero h1 { font-size: clamp(1.7rem, 7vw, 3.4rem); }
.ay-hero p.lead { margin-left: auto; margin-right: auto; }
.ay-hero-ctas { justify-content: center; }
.ay-hero-ctas .ay-btn { flex: 1 1 100%; justify-content: center; }
.ay-hero-art { max-width: 160px; margin: 0 auto; font-size: 3.4rem; }
@media (min-width: 375px) {
  .ay-hero-art { max-width: 190px; font-size: 4rem; }
}
@media (min-width: 430px) {
  .ay-hero { padding: 60px 20px 72px; }
  .ay-hero-inner { text-align: left; }
  .ay-hero p.lead { margin-left: 0; margin-right: 0; }
  .ay-hero-ctas { justify-content: flex-start; }
  .ay-hero-ctas .ay-btn { flex: 0 1 auto; }
  .ay-hero-art { max-width: 220px; font-size: 4.6rem; }
}
@media (min-width: 768px) {
  .ay-hero { padding: 80px 28px 96px; }
  .ay-hero-art { max-width: 280px; font-size: 6rem; }
}
@media (min-width: 1024px) {
  .ay-hero { padding: 92px 24px 110px; }
  .ay-hero-inner { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  .ay-hero-art { max-width: none; }
}

/* ---- Trust strip ---- */
.ay-trust-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
@media (min-width: 430px) {
  .ay-trust-inner { flex-direction: row; justify-content: center; }
}
@media (min-width: 768px) {
  .ay-trust-inner { justify-content: space-between; }
}

/* ---- Our Products tabs ---- */
.ay-products-tabs { gap: 2px; padding: 5px; }
.ay-ptab { padding: 8px 11px; font-size: .64rem; }
@media (min-width: 430px) {
  .ay-products-tabs { gap: 4px; padding: 6px; }
  .ay-ptab { padding: 9px 14px; font-size: .68rem; }
}
@media (min-width: 768px) {
  .ay-products-tabs { gap: 6px; }
  .ay-ptab { padding: 10px 18px; font-size: .72rem; }
}

/* ---- Product grid / New Arrivals grid ---- */
.ay-product-grid, .ay-newarrivals-grid { grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 430px) {
  .ay-product-grid, .ay-newarrivals-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 768px) {
  .ay-product-grid, .ay-newarrivals-grid { gap: 20px; }
}
@media (min-width: 1024px) {
  .ay-product-grid, .ay-newarrivals-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* ---- Herb Encyclopedia grid ---- */
.ay-herb-grid { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
  .ay-herb-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .ay-herb-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Shop by Category circles ---- */
.ay-cats-row { gap: 18px; }
.ay-cat-circle-img { width: 84px; height: 84px; font-size: 1.9rem; }
@media (min-width: 430px) {
  .ay-cats-row { gap: 24px; }
  .ay-cat-circle-img { width: 92px; height: 92px; font-size: 2.1rem; }
}
@media (min-width: 768px) {
  .ay-cats-row { gap: 34px; }
  .ay-cat-circle-img { width: 108px; height: 108px; font-size: 2.4rem; }
}

/* ---- Ritual Spotlight ---- */
@media (min-width: 1024px) {
  .ay-ritual-card { flex: 0 0 210px; }
}

/* ---- Dosha band ---- */
.ay-dosha-band { grid-template-columns: 1fr; text-align: center; padding: 40px 20px; margin: 0 16px; }
.ay-dosha-pills { justify-content: center; }
@media (min-width: 430px) {
  .ay-dosha-band { padding: 44px 24px; margin: 0 20px; }
}
@media (min-width: 768px) {
  .ay-dosha-band { padding: 48px 32px; margin: 0 32px; }
}
@media (min-width: 1024px) {
  .ay-dosha-band { grid-template-columns: 1fr auto; text-align: left; padding: 56px 40px; margin: 0 24px; }
  .ay-dosha-pills { justify-content: flex-start; }
}

/* ---- Gifting banner ---- */
.ay-gift-banner { grid-template-columns: 1fr; margin: 0 16px; }
.ay-gift-copy { padding: 24px 20px; }
@media (min-width: 430px) {
  .ay-gift-banner { margin: 0 20px; }
  .ay-gift-copy { padding: 28px 24px; }
}
@media (min-width: 768px) {
  .ay-gift-banner { grid-template-columns: 1fr 1fr; margin: 0 24px; }
  .ay-gift-copy { padding: 48px 44px; }
}

/* ---- Why Ayurveda (value grid) ---- */
.ay-value-grid { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) {
  .ay-value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ay-value-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ---- Newsletter ---- */
.ay-newsletter { margin: 0 16px; padding: 28px 20px; }
.ay-newsletter-form { flex-direction: column; }
@media (min-width: 430px) {
  .ay-newsletter { padding: 32px 24px; }
  .ay-newsletter-form { flex-direction: row; }
}
@media (min-width: 768px) {
  .ay-newsletter { margin: 0 24px; padding: 44px 36px; }
}

/* ---- Footer ---- */
.ay-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.ay-footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
@media (min-width: 768px) {
  .ay-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .ay-footer-bottom { flex-direction: row; text-align: left; }
}
@media (min-width: 1024px) {
  .ay-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
}


/* ===================================================================
   Ayurveda Header — Mega Menu Level-2 Flyouts (every category has
   its own sub-listing, desktop hover-flyout + mobile nested accordion)
   =================================================================== */

/* ---- Desktop: flyout submenu per mega-item ---- */
.ay-mega-item-wrap { position: relative; }
.ay-mega-item-wrap > .ay-mega-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ay-mega-item-wrap > .ay-mega-item::after {
  content: '\203A';
  font-size: 0.95rem;
  opacity: 0.35;
  line-height: 1;
}

.ay-mega-flyout {
  position: absolute;
  top: -10px;
  left: 100%;
  margin-left: 6px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(14,42,30,0.2);
  padding: 10px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 70;
}
@media (min-width: 1024px) {
  .ay-mega-item-wrap:hover > .ay-mega-flyout,
  .ay-mega-item-wrap.ay-flyout-open > .ay-mega-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.ay-flyout-item {
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.ay-flyout-item:hover { background: var(--ay-ivory-warm); color: var(--ay-gold); }

/* Keep flyouts from overflowing off the right edge of the viewport for
   items in the rightmost (Dosha) column by flipping them to open leftward.
   Only applied at 1280px+, where the mega-panel is a single 3-column row and
   Dosha is genuinely the rightmost column (at 1024-1279px it's a 2-col grid
   and Dosha sits on the left, so it keeps the default rightward flyout). */
@media (min-width: 1280px) {
  .ay-mega-col:last-of-type .ay-mega-flyout {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
    transform: translateX(4px);
  }
  .ay-mega-col:last-of-type .ay-mega-item-wrap:hover > .ay-mega-flyout,
  .ay-mega-col:last-of-type .ay-mega-item-wrap.ay-flyout-open > .ay-mega-flyout {
    transform: translateX(0);
  }
}

/* ---- Mobile: nested (level-2) drawer accordions ---- */
.ay-drawer-accordion-l2 { background: var(--ay-ivory-warm); border-radius: 8px; margin: 2px 0; }
.ay-drawer-accordion-l2 > .ay-drawer-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 20px;
  font-size: 0.86rem;
  border-bottom: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--ay-font-body);
}
.ay-drawer-accordion-l2 > .ay-drawer-accordion-trigger .chev { transition: transform .2s ease; color: var(--ay-forest); }
.ay-drawer-accordion-l2.ay-open > .ay-drawer-accordion-trigger .chev { transform: rotate(180deg); }

.ay-drawer-accordion-l2 > .ay-drawer-accordion-panel {
  overflow: hidden;
  transition: max-height .22s ease;
}
/* An earlier broad rule (.ay-drawer-accordion.ay-open .ay-drawer-accordion-panel)
   uses a descendant combinator and would force EVERY nested panel open just
   because the outer "Shop by Category" accordion is open. Re-assert the
   collapsed state here (same specificity, declared later = wins) so each
   level-2 accordion only opens when it itself has .ay-open. */
.ay-drawer-accordion-l2:not(.ay-open) > .ay-drawer-accordion-panel {
  max-height: 0;
}
.ay-drawer-accordion-l2.ay-open > .ay-drawer-accordion-panel {
  max-height: 320px;
}
.ay-drawer-subsubitem {
  display: block;
  padding: 9px 20px 9px 32px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.8rem;
}
.ay-drawer-subsubitem:active { color: var(--ay-gold); }

/* Outer "Shop by Category" accordion panel needs a much larger cap now that
   it holds 21 nested sub-accordions; scope with '>' so it does not force
   every nested panel open too. */
#ayDrawerCatAccordion.ay-open > #ayDrawerCatPanel {
  max-height: 3200px;
}


/* ===================================================================
   Ayurveda Header — Mega Menu v2: master-detail layout
   Fixes the earlier per-item flyout overlapping neighbouring columns.
   Now there is exactly ONE shared detail zone on the right, so nothing
   ever covers a sibling category. Same content, no category dropped.
   Overrides the older grid-based .ay-mega-panel (display:flex wins).
   =================================================================== */

.ay-mega-panel {
  display: flex;
  align-items: stretch;
  grid-template-columns: none; /* neutralise the old grid rule */
  width: max-content;
  max-width: min(560px, 92vw);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-mega-panel { max-width: min(520px, 90vw); }
}
@media (min-width: 1280px) {
  .ay-mega-panel { max-width: 580px; }
}

.ay-mega-list {
  width: 260px;
  flex: 0 0 260px;
  max-height: 430px;
  overflow-y: auto;
  padding: 14px 8px;
  border-right: 1px solid rgba(27,67,50,0.08);
}
.ay-mega-list::-webkit-scrollbar { width: 5px; }
.ay-mega-list::-webkit-scrollbar-thumb { background: var(--ay-border); border-radius: 999px; }

.ay-mega-list-heading {
  font-family: var(--ay-font-head);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ay-maroon);
  padding: 12px 10px 6px;
}
.ay-mega-list-heading:first-child { padding-top: 4px; }

.ay-mega-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}
.ay-mega-list-item .chev { opacity: 0.35; flex: 0 0 auto; transition: opacity .15s ease, transform .15s ease; }
.ay-mega-list-item:hover,
.ay-mega-list-item.is-active {
  background: var(--ay-ivory-warm);
  color: var(--ay-gold);
}
.ay-mega-list-item:hover .chev,
.ay-mega-list-item.is-active .chev {
  opacity: 0.9;
  transform: translateX(2px);
}
.ay-mega-list-item.ay-mega-item-cta { color: var(--ay-gold); font-weight: 700; margin-top: 4px; }

.ay-mega-detail {
  position: relative;
  width: 260px;
  flex: 0 0 260px;
  min-height: 300px;
}
.ay-mega-detail-panel {
  position: absolute;
  inset: 0;
  padding: 22px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
  overflow-y: auto;
}
.ay-mega-detail-panel.is-active {
  opacity: 1;
  visibility: visible;
}
.ay-mega-detail-heading {
  font-family: var(--ay-font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ay-forest);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(27,67,50,0.1);
}
.ay-mega-detail-panel .ay-flyout-item {
  display: block;
  padding: 7px 4px;
  border-radius: 6px;
  color: var(--ay-forest-deep);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
}
.ay-mega-detail-panel .ay-flyout-item:hover { background: var(--ay-ivory-warm); color: var(--ay-gold); }

/* Default (promo) detail panel content reuses the promo styles but fills
   the full detail width instead of a fixed 200px grid column */
.ay-mega-detail-default {
  background: var(--ay-forest-deep);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ay-mega-detail-default .ay-mega-promo-icon { font-size: 1.7rem; }
.ay-mega-detail-default .ay-mega-promo-title {
  font-family: var(--ay-font-head);
  color: var(--ay-ivory);
  font-size: 1rem;
  font-weight: 600;
}
.ay-mega-detail-default .ay-mega-promo-text {
  color: var(--ay-gold-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}
.ay-mega-detail-default .ay-mega-promo-btn {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--ay-gold);
  color: var(--ay-forest-deep);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}


/* ===================================================================
   Ayurveda Header — Mega Menu v3: wider box + category icons
   Requested: keep the category list always visible (unchanged
   behaviour), increase the overall panel width, and give every
   category an icon (in the list AND in its detail panel) instead of
   a bare text list. Selectors below are deliberately more specific
   than the v2 rules so they win regardless of file order.
   =================================================================== */

.ay-header-nav .ay-mega-panel {
  max-width: min(760px, 94vw);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-header-nav .ay-mega-panel { max-width: min(700px, 92vw); }
}
@media (min-width: 1280px) {
  .ay-header-nav .ay-mega-panel { max-width: 820px; }
}

.ay-header-nav .ay-mega-list {
  width: 300px;
  flex: 0 0 300px;
}

.ay-header-nav .ay-mega-detail {
  width: auto;
  flex: 1 1 auto;
  min-width: 340px;
}

/* Category icon medallion in the list */
.ay-header-nav .ay-mega-list-item {
  gap: 10px;
}
.ay-mega-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ay-ivory-warm);
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-list-item.is-active .ay-mega-icon {
  background: var(--ay-gold);
}
.ay-mega-list-item-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Matching icon medallion at the top of the detail panel */
.ay-header-nav .ay-mega-detail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ay-mega-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ay-ivory-warm);
  font-size: 1.2rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Small decorative marker before every sub-item link in the detail
   panel, so the right-hand column reads as more than a bare list */
.ay-mega-detail-panel .ay-flyout-item {
  position: relative;
  padding-left: 20px;
}
.ay-mega-detail-panel .ay-flyout-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ay-gold);
  opacity: 0.65;
}

/* Same visual language on the mobile drawer's category sub-items, for
   consistency between desktop and mobile */
.ay-drawer-accordion-l2 > .ay-drawer-subitem.ay-drawer-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ay-drawer-accordion-l2 > .ay-drawer-subitem.ay-drawer-accordion-trigger::before {
  content: "🌿";
  font-size: 0.8rem;
  flex: 0 0 auto;
}
.ay-drawer-accordion-l2 > .ay-drawer-subitem.ay-drawer-accordion-trigger .chev {
  margin-left: auto;
}

/* ===================================================================
   Ayurveda Header — Mega Menu v4: 3 always-visible columns
   Requested: Shop by Concern, Product Type and Shop by Dosha side by
   side in one row (not stacked one below another, no scrolling needed
   to see every group) — Concern left, Product Type middle, Dosha
   right — with the existing hover-preview detail panel staying on the
   far right. Higher-specificity selectors win over v2/v3 rules
   regardless of file order.
   =================================================================== */

.ay-header-nav .ay-mega-panel {
  max-width: min(1000px, 96vw);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-header-nav .ay-mega-panel { max-width: min(920px, 94vw); }
}
@media (min-width: 1280px) {
  .ay-header-nav .ay-mega-panel { max-width: 1060px; }
}

.ay-header-nav .ay-mega-list {
  display: flex;
  align-items: flex-start;
  width: auto;
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  border-right: 1px solid rgba(27,67,50,0.08);
}

.ay-mega-col-group {
  width: 200px;
  flex: 0 0 200px;
  padding: 14px 10px;
  border-right: 1px solid rgba(27,67,50,0.06);
}
.ay-mega-col-group:last-child {
  border-right: none;
}
.ay-mega-col-group .ay-mega-list-heading {
  padding: 4px 4px 10px;
}
.ay-mega-col-group .ay-mega-list-item {
  white-space: normal;
  align-items: flex-start;
}
.ay-mega-col-group .ay-mega-list-item .ay-mega-icon {
  margin-top: 1px;
}
.ay-mega-col-group .ay-mega-list-item .chev {
  margin-top: 3px;
}

.ay-header-nav .ay-mega-detail {
  min-width: 300px;
}

/* ===================================================================
   Ayurveda Header — Mega Menu v5: adjacent hover-open + fix truncated
   text
   1) Category text was clipping to "…" — the per-item text span had
      its own forced nowrap/ellipsis; overridden here so it wraps
      normally inside the wider columns.
   2) The detail/preview panel always opened pinned to the far right,
      no matter which column you hovered. Now it uses flexbox `order`
      (set from JS in header.blade.php) to slot in immediately next to
      whichever column is being hovered — Concern, Product Type or
      Dosha — and every other column simply shifts along. Nothing is
      ever hidden or overlapped, and all three columns stay visible at
      all times.
   =================================================================== */

.ay-header-nav .ay-mega-panel {
  max-width: min(1040px, 96vw);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-header-nav .ay-mega-panel { max-width: min(1000px, 94vw); }
}
@media (min-width: 1280px) {
  .ay-header-nav .ay-mega-panel { max-width: 1100px; }
}

.ay-mega-col-group {
  width: 220px;
  flex: 0 0 220px;
}

.ay-header-nav .ay-mega-detail {
  min-width: 280px;
}

/* Fix: text was truncating to "…" — the span had its own nowrap +
   ellipsis regardless of the parent's white-space, so undo that here
   and let category names wrap onto a second line when needed. */
.ay-mega-col-group .ay-mega-list-item-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

/* Column order — Concern, Product Type, Dosha, left to right — plus a
   default resting order for the detail panel (far right, matching the
   "New to Ayurveda" promo state). JS overrides the detail panel's
   order on hover to slot it in right after the active column. */
.ay-header-nav .ay-mega-list {
  display: contents; /* unwrap — its 3 columns become direct flex
                         items of .ay-mega-panel, sitting alongside
                         .ay-mega-detail so order-based reflow works */
}
.ay-mega-col-group[data-col="concern"] { order: 10; }
.ay-mega-col-group[data-col="producttype"] { order: 20; }
.ay-mega-col-group[data-col="dosha"] { order: 30; }
.ay-header-nav .ay-mega-detail {
  order: 40;
  transition: none; /* order changes aren't animatable — keep it snappy, no half-states */
}

/* ===================================================================
   Ayurveda Header — Mega Menu v6: visual polish
   Everything here is purely cosmetic — layout, positioning and
   hover-behaviour from v4/v5 are untouched. Higher-specificity
   selectors win over earlier rules regardless of file order.
   =================================================================== */

/* Themed icon medallions — a different soft tint per column so the
   three groups read as distinct at a glance */
.ay-mega-col-group[data-col="concern"] .ay-mega-icon { background: #fbe6d4; }
.ay-mega-col-group[data-col="producttype"] .ay-mega-icon { background: #e2efe4; }
.ay-mega-col-group[data-col="dosha"] .ay-mega-icon { background: #f6ecd9; }

.ay-mega-col-group[data-col="concern"] .ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-col-group[data-col="concern"] .ay-mega-list-item.is-active .ay-mega-icon { background: #f0b877; }
.ay-mega-col-group[data-col="producttype"] .ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-col-group[data-col="producttype"] .ay-mega-list-item.is-active .ay-mega-icon { background: #9dc7a6; }
.ay-mega-col-group[data-col="dosha"] .ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-col-group[data-col="dosha"] .ay-mega-list-item.is-active .ay-mega-icon { background: var(--ay-gold); }

.ay-mega-icon {
  transition: background .15s ease, transform .15s ease;
}
.ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-list-item.is-active .ay-mega-icon {
  transform: scale(1.08);
}

/* Active / hovered list item: gold accent edge + gentle nudge */
.ay-mega-list-item {
  border-left: 3px solid transparent;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.ay-mega-list-item:hover,
.ay-mega-list-item.is-active {
  border-left-color: var(--ay-gold);
  transform: translateX(2px);
}

/* Column headings: small gradient underline instead of the flat rule */
.ay-mega-col-group .ay-mega-list-heading {
  position: relative;
  border-bottom: none;
}
.ay-mega-col-group .ay-mega-list-heading::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,138,61,.55), rgba(201,138,61,0) 85%);
}

/* CTA row: arrow nudges forward on hover */
.ay-mega-list-item.ay-mega-item-cta {
  transition: transform .15s ease;
}
.ay-mega-list-item.ay-mega-item-cta:hover {
  transform: translateX(4px);
}

/* Panel: slightly richer shadow + radius */
.ay-header-nav .ay-mega-panel {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14,42,30,0.22), 0 2px 10px rgba(14,42,30,.07);
}

/* Detail panel: gentle slide-in when switching between categories */
.ay-mega-detail-panel {
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ay-mega-detail-panel.is-active {
  transform: translateX(0);
}

/* Sub-item links: nudge forward on hover to match the list style */
.ay-mega-detail-panel .ay-flyout-item {
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.ay-mega-detail-panel .ay-flyout-item:hover {
  transform: translateX(3px);
}

/* Default "New to Ayurveda" promo: soft decorative glow + a real icon
   badge instead of a bare emoji floating on the dark background */
.ay-mega-detail-default {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 22px 20px !important;
}
.ay-mega-detail-default::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,138,61,.28), transparent 70%);
  pointer-events: none;
}
.ay-mega-detail-default .ay-mega-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 2px;
}
.ay-mega-detail-default .ay-mega-promo-btn {
  transition: transform .15s ease, box-shadow .15s ease;
}
.ay-mega-detail-default .ay-mega-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(201,138,61,.35);
}

/* ===================================================================
   Ayurveda Footer v2 — trust strip + social icons + legal link row
   Enhancement merging ideas from two reference footers (trust badges
   + rich columns from one, a clean centered legal-link bottom bar
   from the other), restyled entirely in ViriX's own brand tokens.
   Mobile-first; the existing .ay-footer / .ay-footer-grid rules are
   untouched, this only adds new pieces.
   =================================================================== */

.ay-trust-strip {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 4px;
}
.ay-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ay-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ay-ivory-warm);
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.ay-trust-item span:last-child {
  font-family: var(--ay-font-head);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ay-forest-deep);
}

.ay-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ay-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(250,247,240,.08);
  color: rgba(250,247,240,.75);
  transition: background .15s ease, color .15s ease;
}
.ay-footer-social a svg { width: 15px; height: 15px; }
.ay-footer-social a:hover {
  background: var(--ay-gold);
  color: var(--ay-forest-deep);
}

.ay-footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ay-footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}
.ay-footer-legal a { color: rgba(250,247,240,.65); }
.ay-footer-legal a:hover { color: var(--ay-gold); }
.ay-footer-legal span { color: rgba(250,247,240,.3); }

/* 375px+ */
@media (min-width: 375px) {
  .ay-trust-icon { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* 768px+ — trust strip becomes a single row */
@media (min-width: 768px) {
  .ay-trust-strip {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 34px 24px 6px;
  }
  .ay-trust-item { flex: 1 1 auto; justify-content: center; }
}


/* ==========================================================================
   Ayurveda Shop — Shop All / Category / Product pages
   New classes only; reuses existing --ay-* tokens and .ay-product-* card
   styles already defined above. Mobile-first; breakpoints at the bottom.
   ========================================================================== */

.ay-shop-hero { background: var(--ay-ivory-warm); padding: 28px 0; margin-bottom: 8px; }
.ay-shop-hero-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.ay-shop-hero-img { width: 100%; max-width: 480px; border-radius: var(--ay-radius-lg); object-fit: cover; max-height: 220px; }
.ay-shop-hero-copy h1 { font-family: var(--ay-font-head); font-size: 1.6rem; margin: 6px 0 8px; color: var(--ay-forest-deep); }
.ay-shop-hero-copy p { color: var(--ay-ink-muted); font-size: .88rem; max-width: 560px; }

.ay-shop-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 26px; }
.ay-shop-cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--ay-card-bg); border: 1.5px solid var(--ay-border); border-radius: var(--ay-radius-lg);
  padding: 16px 10px; text-decoration: none; color: var(--ay-ink); transition: all .18s ease;
}
.ay-shop-cat-card:hover, .ay-shop-cat-card.active { border-color: var(--ay-gold); background: var(--ay-gold-soft); transform: translateY(-2px); }
.ay-shop-cat-icon { font-size: 1.6rem; }
.ay-shop-cat-img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.ay-shop-cat-name { font-family: var(--ay-font-head); font-weight: 700; font-size: .78rem; }

.ay-shop-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ay-shop-count { font-size: .78rem; color: var(--ay-ink-muted); font-weight: 600; }
.ay-shop-sort { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.ay-shop-sort select { border: 1.5px solid var(--ay-border); border-radius: 999px; padding: 7px 12px; font-size: .78rem; background: var(--ay-card-bg); }

.ay-breadcrumb { font-size: .74rem; color: var(--ay-ink-muted); margin-bottom: 18px; }
.ay-breadcrumb a { color: var(--ay-ink-muted); text-decoration: none; }
.ay-breadcrumb a:hover { color: var(--ay-forest); }
.ay-breadcrumb span { color: var(--ay-ink); font-weight: 600; }

/* ---- Product detail ---- */
.ay-product-detail { display: flex; flex-direction: column; gap: 24px; }
.ay-product-gallery-main {
  background: var(--ay-ivory-warm); border-radius: var(--ay-radius-lg); border: 1px solid var(--ay-border);
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ay-product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ay-product-gallery-main svg { width: 60%; height: 60%; }
.ay-product-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ay-gallery-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--ay-border); padding: 0; cursor: pointer; background: none; }
.ay-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ay-product-info h1 { font-family: var(--ay-font-head); font-size: 1.5rem; margin: 6px 0 8px; color: var(--ay-forest-deep); }
.ay-product-info-sub { color: var(--ay-ink-muted); font-size: .88rem; }
.ay-product-tabs-info { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.ay-info-block h5 { font-family: var(--ay-font-head); font-size: .86rem; color: var(--ay-forest); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.ay-info-block p { font-size: .84rem; color: var(--ay-ink); line-height: 1.6; white-space: pre-line; }

/* ---- Breakpoints ---- */
@media (min-width: 430px) { .ay-shop-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) {
  .ay-shop-hero-inner { flex-direction: row; text-align: left; }
  .ay-shop-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .ay-shop-cat-grid { grid-template-columns: repeat(6, 1fr); }
  .ay-product-detail { flex-direction: row; gap: 40px; align-items: flex-start; }
  .ay-product-gallery, .ay-product-info { flex: 1 1 0; }
  .ay-product-gallery { position: sticky; top: 100px; }
}


/* ==========================================================================
   Ayurveda Shop — Promo Hero banner (Shop All page)
   Gradient banner with layered decorative bottle illustrations + offer
   copy, in ViriX's own brand tokens. Dynamic via ayurveda_pages
   (page_type = shop-hero): title -> headline, content (one bullet per
   line) -> bullet list, hero_image_url -> replaces the bottle SVGs.
   ========================================================================== */
.ay-promo-hero {
  background: linear-gradient(135deg, var(--ay-forest-deep) 0%, var(--ay-maroon) 100%);
  padding: 36px 0; overflow: hidden;
}
.ay-promo-hero-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column-reverse; gap: 22px; align-items: center;
}
.ay-promo-hero-bottles { display: flex; align-items: flex-end; justify-content: center; }
.ay-promo-bottle { width: 78px; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); }
.ay-promo-bottle.b1 { transform: translateY(6px) rotate(-4deg); margin-right: -12px; }
.ay-promo-bottle.b2 { transform: translateY(-6px); position: relative; z-index: 2; }
.ay-promo-bottle.b3 { transform: translateY(8px) rotate(5deg); margin-left: -12px; }
.ay-promo-hero-img { max-width: 260px; border-radius: var(--ay-radius-lg); }
.ay-promo-hero-content { text-align: center; color: var(--ay-ivory); }
.ay-promo-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ay-gold); }
.ay-promo-headline { font-family: var(--ay-font-head); font-size: 1.6rem; margin: 8px 0 14px; line-height: 1.18; color: var(--ay-ivory); }
.ay-promo-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.ay-promo-bullets li { font-size: .8rem; color: rgba(250,247,240,.88); position: relative; padding-left: 20px; }
.ay-promo-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--ay-gold); font-weight: 800; }
.ay-promo-hero .ay-btn-primary { background: var(--ay-gold); color: var(--ay-forest-deep); border: none; }

@media (min-width: 430px) { .ay-promo-bottle { width: 92px; } }
@media (min-width: 768px) {
  .ay-promo-hero-inner { flex-direction: row; justify-content: space-between; padding: 22px 40px; gap: 32px; }
  .ay-promo-hero-content { text-align: left; }
  .ay-promo-bullets { align-items: flex-start; }
  .ay-promo-headline { font-size: 2.2rem; }
  .ay-promo-bottle { width: 120px; }
}
@media (min-width: 1024px) {
  .ay-promo-headline { font-size: 2.6rem; }
  .ay-promo-bottle { width: 148px; }
}


/* ==========================================================================
   Ayurveda Header — Mega Menu hover-trap fix
   Bug: the closed mega-panel was invisible (opacity:0) but still sat in
   the hit-testing tree just below the header, overlapping the top of the
   hero section — so moving the mouse into that (invisible) area was
   enough to trigger :hover on it and pop the menu open, even nowhere
   near the "Shop by Category" trigger. Fix: the closed panel is now also
   pointer-events:none, so it can never intercept the mouse at all while
   closed; it only becomes interactive again once genuinely open (hover
   on the trigger itself, or tapped open on touch).
   ========================================================================== */
.ay-mega-panel { pointer-events: none; }
.ay-nav-dropdown { pointer-events: none; }

@media (min-width: 1024px) {
  .ay-nav-dropdown-wrap:hover .ay-mega-panel,
  .ay-nav-dropdown-wrap.ay-dd-open .ay-mega-panel {
    pointer-events: auto;
  }
  .ay-nav-dropdown-wrap:hover .ay-nav-dropdown,
  .ay-nav-dropdown-wrap.ay-dd-open .ay-nav-dropdown {
    pointer-events: auto;
  }
}


/* ==========================================================================
   Ayurveda Header — Mega Menu "closes before I can click" fix
   Root cause: the trigger and the panel below it had a 14px empty gap
   between them (top: calc(100% + 14px)). That gap belongs to neither
   box, so moving the mouse from the trigger down into the panel briefly
   left the whole hover area, instantly cutting pointer-events (added in
   the previous phantom-hover fix) before the mouse ever reached the
   menu items. Fix: the panel now sits flush against the trigger (no
   dead zone at all), so the hover chain from trigger -> panel is
   continuous and nothing closes early.
   ========================================================================== */
.ay-header-nav .ay-nav-dropdown-wrap .ay-mega-panel {
  top: 100%;
}

/* ===================================================================
   Ayurveda Header — Mega Menu v9: detail panel width fix
   The preview/detail box (right side of the "Shop by Concern" etc.
   dropdown) was using flex:1 1 auto, so it grew to fill all leftover
   row space instead of sizing to its own short bullet-list content —
   leaving a big blank gap on the right of the dropdown. This block
   only stops it from growing (fixed width instead) and trims the
   panel's max-width to match. Layout/columns/push/slide behaviour
   from v4/v5 is untouched.
   =================================================================== */

.ay-header-nav .ay-mega-detail {
  flex: 0 0 300px;
  width: 300px;
}

.ay-header-nav .ay-mega-panel {
  max-width: min(1000px, 96vw);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ay-header-nav .ay-mega-panel { max-width: min(940px, 94vw); }
}
@media (min-width: 1280px) {
  .ay-header-nav .ay-mega-panel { max-width: 1000px; }
}

/* ===================================================================
   Ayurveda Header — Mega Menu v10: column blank-space fix
   Root cause: the base .ay-mega-panel rule (Mega Menu v2, earlier in
   this file) sets `align-items: stretch`, which is the flex container
   for all 3 columns + the detail box (since v5 turned .ay-mega-list
   into display:contents). "stretch" forces every short column
   (Product Type, Shop by Dosha) to grow to match the tallest column's
   (Shop by Concern) height, painting empty space + a long divider
   line below their last item. Overriding to flex-start makes each
   column only as tall as its own content — nothing else changes.
   =================================================================== */

.ay-header-nav .ay-mega-panel {
  align-items: flex-start;
}

/* ===================================================================
   Ayurveda Header — Mega Menu v11: View All expand/collapse
   Shop by Concern has 12 items vs 6/4 in the other columns. Items 7-12
   are marked .ay-mega-hidden-item in the HTML and hidden by default;
   the "View All Concerns" button (JS toggles .ay-mega-col-expanded on
   its column) reveals them. Because .ay-mega-panel is absolutely
   positioned with no fixed height, the box grows naturally to fit.
   =================================================================== */

.ay-mega-hidden-item {
  display: none;
}
.ay-mega-col-group.ay-mega-col-expanded .ay-mega-hidden-item {
  display: flex;
  animation: ayMegaItemIn .18s ease both;
}

.ay-mega-item-viewall {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: none;
  border-top: 1px dashed rgba(27, 67, 50, 0.14);
  background: transparent;
  color: var(--ay-gold);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0 0 7px 7px;
  transition: background .15s ease, color .15s ease;
}
.ay-mega-item-viewall:hover,
.ay-mega-item-viewall:focus-visible {
  background: var(--ay-ivory-warm);
}
.ay-mega-viewall-count {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(201, 138, 61, .14);
  color: var(--ay-gold);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.ay-mega-viewall-chev {
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.ay-mega-item-viewall[aria-expanded="true"] .ay-mega-viewall-chev {
  transform: rotate(180deg);
}

/* Soft "more below" hint at the bottom of a collapsed long column */
.ay-mega-col-group:not(.ay-mega-col-expanded) .ay-mega-item-viewall {
  position: relative;
}
.ay-mega-col-group:not(.ay-mega-col-expanded) .ay-mega-item-viewall::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9));
  pointer-events: none;
}

@keyframes ayMegaItemIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   Ayurveda Header — Mega Menu v12: 10 advanced visual enhancements
   All CSS-only, additive, targeting existing classes/attributes that
   are already in the markup. Nothing here changes layout, position,
   order or flex mechanics — those stay exactly as they work today.
   =================================================================== */

/* 1) Staggered entrance for list items when the dropdown opens */
@keyframes ayMegaListItemEnter {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (min-width: 1024px) {
  .ay-nav-dropdown-wrap:hover .ay-mega-col-group .ay-mega-list-item,
  .ay-nav-dropdown-wrap.ay-dd-open .ay-mega-col-group .ay-mega-list-item {
    animation: ayMegaListItemEnter .22s ease both;
  }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(2) { animation-delay: .02s; }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(3) { animation-delay: .04s; }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(4) { animation-delay: .06s; }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(5) { animation-delay: .08s; }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(6) { animation-delay: .10s; }
  .ay-mega-col-group[data-col="concern"] .ay-mega-list-item:nth-child(7) { animation-delay: .12s; }
  .ay-mega-col-group[data-col="producttype"] .ay-mega-list-item:nth-child(2) { animation-delay: .02s; }
  .ay-mega-col-group[data-col="producttype"] .ay-mega-list-item:nth-child(3) { animation-delay: .04s; }
  .ay-mega-col-group[data-col="producttype"] .ay-mega-list-item:nth-child(4) { animation-delay: .06s; }
  .ay-mega-col-group[data-col="producttype"] .ay-mega-list-item:nth-child(5) { animation-delay: .08s; }
  .ay-mega-col-group[data-col="dosha"] .ay-mega-list-item:nth-child(2) { animation-delay: .02s; }
  .ay-mega-col-group[data-col="dosha"] .ay-mega-list-item:nth-child(3) { animation-delay: .04s; }
}

/* 2) Slight overshoot on the panel's own entrance instead of a flat ease */
.ay-header-nav .ay-mega-panel {
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, .9, .25, 1.3), visibility .16s;
}

/* 3) Icon medallion: gentle wobble + scale together on hover/active */
.ay-mega-list-item:hover .ay-mega-icon,
.ay-mega-list-item.is-active .ay-mega-icon {
  transform: scale(1.08) rotate(-6deg);
}

/* 4) "Popular" badge on two high-traffic categories - CSS only, no HTML change */
.ay-mega-col-group[data-col="concern"] a[data-detail="c-immunity-wellness"] .ay-mega-list-item-text,
.ay-mega-col-group[data-col="concern"] a[data-detail="c-stress-sleep"] .ay-mega-list-item-text {
  position: relative;
}
.ay-mega-col-group[data-col="concern"] a[data-detail="c-immunity-wellness"] .ay-mega-list-item-text::after,
.ay-mega-col-group[data-col="concern"] a[data-detail="c-stress-sleep"] .ay-mega-list-item-text::after {
  content: "Popular";
  display: inline-block;
  margin-left: 8px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ay-gold);
  background: rgba(201, 138, 61, .14);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* 5) Detail panel icon: small bounce-in when a new panel becomes active */
@keyframes ayMegaDetailIconIn {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.ay-mega-detail-panel.is-active .ay-mega-detail-icon {
  animation: ayMegaDetailIconIn .28s ease both;
}

/* 6) Custom scrollbar for the (rare) case a detail panel needs to scroll */
.ay-mega-detail-panel::-webkit-scrollbar { width: 5px; }
.ay-mega-detail-panel::-webkit-scrollbar-thumb { background: var(--ay-border); border-radius: 999px; }

/* 7) Clear focus-visible outlines for keyboard users, matching brand gold */
.ay-mega-list-item:focus-visible,
.ay-flyout-item:focus-visible,
.ay-mega-item-viewall:focus-visible,
.ay-nav-dropdown-trigger:focus-visible {
  outline: 2px solid var(--ay-gold);
  outline-offset: 2px;
  border-radius: 7px;
}

/* 8) Soft highlight glow behind whichever column is actively hovered */
.ay-mega-col-group:hover {
  background: linear-gradient(180deg, rgba(201,138,61,.05), rgba(201,138,61,0) 60%);
}

/* 9) CTA row ("Take the Dosha Quiz"): gentle shimmer sweep on hover */
.ay-mega-list-item.ay-mega-item-cta {
  position: relative;
  overflow: hidden;
}
.ay-mega-list-item.ay-mega-item-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(201,138,61,.25), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.ay-mega-list-item.ay-mega-item-cta:hover::after {
  left: 120%;
}

/* 10) Column headings: small icon-style dot accent before the label */
.ay-mega-col-group .ay-mega-list-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ay-mega-col-group .ay-mega-list-heading::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ay-gold);
  opacity: .7;
  flex: 0 0 auto;
}

/* ===================================================================
   Ayurveda Header — Mega Menu v13: category descriptions + richer icon
   tiles
   Every detail panel now carries a one-line description (new
   .ay-mega-detail-desc paragraph). This block styles that text and
   upgrades the existing icon medallion into a bigger, gradient tile
   with a soft shadow so each preview reads less like a bare list.
   Nothing here changes layout/position/order mechanics.
   =================================================================== */

.ay-mega-detail-desc {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(27, 67, 50, 0.08);
  color: var(--ay-forest-deep);
  opacity: 0.78;
  font-size: 0.78rem;
  line-height: 1.5;
}

.ay-header-nav .ay-mega-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1.35rem;
  background: linear-gradient(145deg, var(--ay-ivory-warm), rgba(201, 138, 61, 0.18));
  box-shadow: 0 4px 10px rgba(14, 42, 30, 0.12), inset 0 0 0 1px rgba(201, 138, 61, 0.15);
}

.ay-header-nav .ay-mega-detail-heading {
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* ===================================================================
   Ayurveda Shop — advanced filter UI (grouped category tabs, price/
   dosha/stock filters, active-filter chips). Additive only; does not
   touch the header mega-menu or any existing shop-page rule.
   =================================================================== */

.ay-shop-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 14px;
}
.ay-shop-cat-tab {
  border: 1px solid rgba(27, 67, 50, 0.14);
  background: #fff;
  color: var(--ay-forest-deep);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ay-shop-cat-tab:hover {
  border-color: var(--ay-gold);
}
.ay-shop-cat-tab.active {
  background: var(--ay-forest-deep);
  border-color: var(--ay-forest-deep);
  color: var(--ay-ivory);
}

.ay-shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.ay-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.ay-filter-group label {
  font-weight: 600;
  color: var(--ay-forest-deep);
}
.ay-filter-group input[type="number"] {
  width: 76px;
  padding: 6px 8px;
  border: 1px solid rgba(27, 67, 50, 0.16);
  border-radius: 7px;
  font-size: 0.8rem;
}
.ay-filter-group select {
  padding: 6px 10px;
  border: 1px solid rgba(27, 67, 50, 0.16);
  border-radius: 7px;
  font-size: 0.8rem;
  background: #fff;
}
.ay-filter-dash {
  opacity: 0.5;
}
.ay-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ay-forest-deep);
  cursor: pointer;
}
.ay-btn-ghost {
  background: transparent;
  border: 1px solid var(--ay-forest-deep);
  color: var(--ay-forest-deep);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ay-btn-ghost:hover {
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
}

.ay-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 20px;
}
.ay-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ay-ivory-warm);
  color: var(--ay-forest-deep);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
}
.ay-filter-chip a {
  color: var(--ay-forest-deep);
  opacity: 0.6;
  text-decoration: none;
  font-weight: 800;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s ease, opacity .15s ease;
}
.ay-filter-chip a:hover {
  background: rgba(27, 67, 50, 0.12);
  opacity: 1;
}
.ay-filter-clear-all {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ay-gold);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .ay-shop-filters {
    margin-left: 0;
    width: 100%;
  }
  .ay-shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================================
   Ayurveda Shop — stock urgency badges + empty state
   =================================================================== */

.ay-product-media {
  position: relative;
}
.ay-product-stock-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
}
.ay-product-stock-badge.low {
  background: #C9820A;
}
.ay-product-stock-badge.out {
  background: #7A2E2E;
}
.ay-product-oos img {
  filter: grayscale(60%);
  opacity: 0.65;
}

.ay-empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--ay-ink-muted);
}
.ay-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
}
.ay-empty-state h3 {
  font-family: var(--ay-font-head);
  color: var(--ay-forest-deep);
  margin: 0 0 8px;
}
.ay-empty-state p {
  margin: 0 0 18px;
  font-size: 0.86rem;
}

/* ===================================================================
   Ayurveda Shop — wishlist button, quick view button + modal,
   recently viewed row. Purely additive.
   =================================================================== */

/* ── Wishlist heart button ── */
.ay-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ay-forest-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.ay-wishlist-btn:hover {
  transform: scale(1.08);
}
.ay-wishlist-btn.is-active {
  color: #fff;
  background: #B3423B;
}
.ay-wishlist-btn.is-active svg {
  fill: currentColor;
}

/* ── Quick View button (shown on hover over the product image) ── */
.ay-quickview-btn {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.ay-product-media:hover .ay-quickview-btn,
.ay-quickview-btn:focus {
  opacity: 1;
  transform: translateY(0);
}
.ay-quickview-btn:hover {
  background: var(--ay-gold);
  color: var(--ay-forest-deep);
}
@media (max-width: 767px) {
  /* No hover on touch devices — keep the button always visible */
  .ay-quickview-btn {
    opacity: 1;
    transform: none;
  }
}

/* ── Quick View modal ── */
.ay-qv-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.ay-qv-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .18s ease, visibility 0s linear 0s;
}
.ay-qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 20, 0.55);
}
body.ay-qv-locked {
  overflow: hidden;
}
.ay-qv-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  .ay-qv-dialog {
    grid-template-columns: 1fr;
  }
}
.ay-qv-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ay-forest-deep);
}
.ay-qv-media {
  background: var(--ay-ivory-warm);
  min-height: 240px;
}
.ay-qv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ay-qv-body {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ay-qv-body h3 {
  font-family: var(--ay-font-head);
  color: var(--ay-forest-deep);
  margin: 0;
  font-size: 1.3rem;
}
.ay-qv-desc {
  color: var(--ay-ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.ay-qv-stock {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
}
.ay-qv-body .ay-btn {
  margin-top: 6px;
  align-self: flex-start;
}

/* ── Recently Viewed row (reuses .ay-section / .ay-product-grid rules) ── */
#ayRecentlyViewedSection .ay-product-card {
  display: block;
}
#ayRecentlyViewedSection .ay-product-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ay-ivory-warm);
}
#ayRecentlyViewedSection .ay-product-body h4 {
  font-size: 0.88rem;
  margin: 8px 0 4px;
  color: var(--ay-forest-deep);
}

/* ===================================================================
   Ayurveda Shop — category grid collapse + show-more toggle (keeps
   the product grid visible near the top of the page instead of being
   pushed below a long list of category cards).
   =================================================================== */

.ay-shop-cat-grid {
  position: relative;
  max-height: 246px;
  overflow: hidden;
  transition: max-height .3s ease;
}
.ay-shop-cat-grid.is-expanded {
  max-height: 6000px;
}
.ay-shop-cat-grid:not(.is-expanded)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(250, 247, 240, 0) 0%, #FAF7F0 88%);
  pointer-events: none;
}
.ay-shop-cat-toggle {
  display: block;
  margin: 2px auto 20px;
  background: transparent;
  border: 1px solid var(--ay-forest-deep);
  color: var(--ay-forest-deep);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ay-shop-cat-toggle:hover {
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
}

/* ===================================================================
   Ayurveda Shop — category slider (2-3 row horizontal scroll + arrows),
   replaces the earlier collapse/show-more approach.
   =================================================================== */

.ay-shop-cat-slider {
  position: relative;
  margin: 18px 0 22px;
  padding: 0 40px;
}
.ay-shop-cat-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  grid-auto-columns: 132px;
  gap: 10px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  max-height: none;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ay-shop-cat-grid::-webkit-scrollbar {
  display: none;
}
.ay-shop-cat-grid::after {
  display: none !important;
}
.ay-shop-cat-grid .ay-shop-cat-card {
  width: 132px;
  scroll-snap-align: start;
}
.ay-shop-cat-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(27, 67, 50, 0.16);
  background: #fff;
  color: var(--ay-forest-deep);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.ay-shop-cat-slide-arrow:hover {
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
}
.ay-shop-cat-slide-arrow.prev {
  left: 0;
}
.ay-shop-cat-slide-arrow.next {
  right: 0;
}
.ay-shop-cat-slide-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 640px) {
  .ay-shop-cat-slider {
    padding: 0;
  }
  .ay-shop-cat-slide-arrow {
    display: none;
  }
  .ay-shop-cat-grid {
    grid-template-rows: repeat(2, auto);
  }
}

/* ===================================================================
   Ayurveda Shop — grid/list view toggle + product image hover-swap.
   =================================================================== */

.ay-view-toggle {
  display: flex;
  gap: 6px;
  margin: 0 14px 0 0;
}
.ay-view-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(27, 67, 50, 0.16);
  background: #fff;
  color: var(--ay-forest-deep);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ay-view-btn.active,
.ay-view-btn:hover {
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
  border-color: var(--ay-forest-deep);
}

.ay-product-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
.ay-product-card:hover .ay-product-img-hover {
  opacity: 1;
}

/* ── List view ── */
.ay-product-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ay-product-grid.is-list .ay-product-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  text-align: left;
  border: 1px solid rgba(27, 67, 50, 0.1);
  border-radius: 12px;
  padding: 10px;
}
.ay-product-grid.is-list .ay-product-media {
  width: 140px;
  flex: 0 0 140px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}
.ay-product-grid.is-list .ay-product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ay-product-grid.is-list .ay-product-add {
  display: none;
}
@media (max-width: 640px) {
  .ay-product-grid.is-list .ay-product-media {
    width: 96px;
    flex: 0 0 96px;
  }
}

/* ===================================================================
   Ayurveda Shop — compare checkbox + tray + modal, and sticky filter
   toolbar (offset dynamically below the sticky top nav via JS).
   =================================================================== */

.ay-shop-toolbar {
  position: sticky;
  top: var(--ay-topbar-h, 0px);
  z-index: 40;
  background: #FAF7F0;
  padding: 10px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ay-compare-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ay-forest-deep);
  margin: 6px 0;
  cursor: pointer;
}

.ay-compare-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.ay-compare-tray.is-open {
  transform: translateY(0);
}
.ay-compare-tray-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ay-compare-tray-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ay-compare-chip {
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ay-compare-chip a {
  color: var(--ay-ivory);
  opacity: 0.7;
  text-decoration: none;
  font-weight: 800;
}
.ay-compare-tray-actions {
  display: flex;
  gap: 10px;
}
.ay-compare-tray .ay-btn-ghost {
  border-color: var(--ay-ivory);
  color: var(--ay-ivory);
}

.ay-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.ay-compare-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .18s ease, visibility 0s linear 0s;
}
.ay-compare-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: min(880px, 94vw);
  max-height: 86vh;
  overflow: auto;
  padding: 34px 26px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ay-compare-html-table {
  width: 100%;
  border-collapse: collapse;
}
.ay-compare-html-table th,
.ay-compare-html-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(27, 67, 50, 0.1);
  text-align: left;
  vertical-align: top;
  font-size: 0.85rem;
}
.ay-compare-html-table th {
  width: 110px;
  color: var(--ay-forest-deep);
  font-weight: 700;
}
.ay-compare-col-head img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
  display: block;
}
.ay-compare-col-head h4 {
  margin: 0;
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .ay-compare-tray-inner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===================================================================
   Ayurveda Shop — category product-count badges, product star ratings,
   category hero banner fallback gradient.
   =================================================================== */

.ay-shop-cat-card {
  position: relative;
}
.ay-shop-cat-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ay-gold);
  color: var(--ay-forest-deep);
  font-size: 0.66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ay-product-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0 6px;
  font-size: 0.72rem;
}
.ay-star {
  color: rgba(27, 67, 50, 0.2);
  font-size: 0.82rem;
  line-height: 1;
}
.ay-star.filled {
  color: var(--ay-gold);
}
.ay-rating-count {
  margin-left: 4px;
  color: var(--ay-ink-muted);
  font-size: 0.7rem;
}

.ay-shop-hero-fallback {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ay-forest-deep) 0%, #2E5D45 55%, var(--ay-gold) 150%);
}

/* ===================================================================
   Ayurveda Shop — sort chips (replacing the dropdown) + Load More button.
   =================================================================== */

.ay-sort-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  width: 100%;
}
.ay-sort-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ay-forest-deep);
  margin-right: 2px;
}
.ay-sort-chip {
  border: 1px solid rgba(27, 67, 50, 0.16);
  background: #fff;
  color: var(--ay-forest-deep);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ay-sort-chip:hover {
  border-color: var(--ay-gold);
}
.ay-sort-chip.active {
  background: var(--ay-forest-deep);
  border-color: var(--ay-forest-deep);
  color: var(--ay-ivory);
}

.ay-load-more-wrap {
  display: flex;
  justify-content: center;
}
.ay-load-more-wrap button[data-load-more-btn] {
  min-width: 200px;
}
.ay-load-more-wrap button[data-load-more-btn]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ===================================================================
   Ayurveda Shop — per-product share button + popover, back-to-top.
   =================================================================== */

.ay-share-btn {
  position: absolute;
  top: 50px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ay-forest-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform .15s ease;
}
.ay-share-btn:hover {
  transform: scale(1.08);
}

.ay-share-popover {
  position: absolute;
  top: 88px;
  right: 10px;
  z-index: 10;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.ay-share-popover button,
.ay-share-popover a {
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ay-forest-deep);
  text-decoration: none;
  cursor: pointer;
}
.ay-share-popover button:hover,
.ay-share-popover a:hover {
  background: var(--ay-ivory-warm);
}
.ay-share-copied {
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--ay-forest-deep);
}

.ay-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 400;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--ay-forest-deep);
  color: var(--ay-ivory);
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  cursor: pointer;
}
.ay-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



/* ==========================================================================
   Ayurveda Product Detail — gallery video support (play badge, active thumb)
   + A+ listing style section (Ingredients in Focus cards + brand banner)
   ========================================================================== */
.ay-product-gallery-main video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.ay-gallery-thumb { position: relative; }
.ay-gallery-thumb video { width: 100%; height: 100%; object-fit: cover; }
.ay-gallery-thumb.active { border-color: var(--ay-gold); border-width: 2px; }
.ay-gallery-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .8rem; background: rgba(27,67,50,.35); pointer-events: none;
}
.ay-aplus-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--ay-border); }
.ay-aplus-head { text-align: center; margin-bottom: 28px; }
.ay-aplus-head h2 { font-family: var(--ay-font-head); font-size: 1.6rem; color: var(--ay-forest-deep); margin-top: 6px; }
.ay-aplus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 28px; }
.ay-aplus-card {
  background: var(--ay-ivory-warm); border: 1px solid var(--ay-border); border-radius: var(--ay-radius-lg);
  padding: 24px 20px; text-align: center;
}
.ay-aplus-icon { font-size: 2rem; margin-bottom: 10px; }
.ay-aplus-card h4 { font-family: var(--ay-font-head); font-size: .92rem; color: var(--ay-forest); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.ay-aplus-card p { font-size: .85rem; color: var(--ay-ink); line-height: 1.6; white-space: pre-line; }
.ay-aplus-banner {
  background: linear-gradient(135deg, var(--ay-forest-deep) 0%, var(--ay-forest) 100%);
  border-radius: var(--ay-radius-lg); padding: 32px 28px; text-align: center;
}
.ay-aplus-banner-text h3 { font-family: var(--ay-font-head); color: #fff; font-size: 1.25rem; margin-bottom: 8px; }
.ay-aplus-banner-text p { color: rgba(255,255,255,.85); font-size: .88rem; max-width: 520px; margin: 0 auto; }
@media (min-width: 600px) { .ay-aplus-grid { grid-template-columns: repeat(3, 1fr); } }


/* ==========================================================================
   Ayurveda Product Detail — accordion (Description/Benefits/How To Use/
   Ingredients/Complete Ingredients/Additional Information/FAQ), click to
   expand, nested accordion used for individual FAQ questions.
   ========================================================================== */
.ay-accordion-item { border-bottom: 1px solid var(--ay-border); }
.ay-accordion-item:first-child { border-top: 1px solid var(--ay-border); }
.ay-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 14px 4px; cursor: pointer; text-align: left;
  font-family: var(--ay-font-head); font-size: .86rem; color: var(--ay-forest);
  text-transform: uppercase; letter-spacing: .04em;
}
.ay-accordion-icon { font-size: 1.1rem; line-height: 1; color: var(--ay-gold); transition: transform .2s ease; flex-shrink: 0; margin-left: 10px; }
.ay-accordion-item.open > .ay-accordion-trigger .ay-accordion-icon { transform: rotate(45deg); }
.ay-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.ay-accordion-item.open > .ay-accordion-panel { grid-template-rows: 1fr; }
.ay-accordion-panel-inner { min-height: 0; overflow: hidden; }
.ay-accordion-panel-inner > p { padding: 0 4px 16px; font-size: .84rem; color: var(--ay-ink); line-height: 1.6; white-space: pre-line; }
.ay-accordion-nested { margin: 0 4px 16px; border: 1px solid var(--ay-border); border-radius: var(--ay-radius-lg); overflow: hidden; }
.ay-accordion-nested .ay-accordion-item { border-bottom: 1px solid var(--ay-border); }
.ay-accordion-nested .ay-accordion-item:first-child { border-top: none; }
.ay-accordion-nested .ay-accordion-item:last-child { border-bottom: none; }
.ay-accordion-nested .ay-accordion-trigger { padding: 12px 14px; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.ay-accordion-nested .ay-accordion-panel-inner > p { padding: 0 14px 14px; }


/* ==========================================================================
   Ayurveda Product Detail — How To Use icon-step cards (RAS-style AM/PM/tip
   layout: icon circle + title + text, inside the How To Use accordion panel)
   ========================================================================== */
.ay-howto-steps { display: flex; flex-direction: column; gap: 16px; padding: 0 4px 16px; }
.ay-howto-step { display: flex; gap: 14px; align-items: flex-start; }
.ay-howto-step-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ay-gold-soft); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.ay-howto-step-body h5 { font-family: var(--ay-font-head); font-size: .82rem; color: var(--ay-forest); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.ay-howto-step-body p { font-size: .84rem; color: var(--ay-ink); line-height: 1.6; }

/* ===== Dynamic Hero: background video/image support (superadmin Ayurveda Controls -> Pages, "Homepage - Hero Banner") ===== */
.ay-hero.ay-hero-media {
  position: relative;
  overflow: hidden;
}
.ay-hero-bg-video,
.ay-hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ay-hero-bg-image {
  background-size: cover;
  background-position: center;
}
.ay-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.ay-hero.ay-hero-media .ay-hero-inner {
  position: relative;
  z-index: 2;
}
.ay-hero.ay-hero-media .ay-eyebrow,
.ay-hero.ay-hero-media h1,
.ay-hero.ay-hero-media .lead {
  color: #fff;
}
.ay-hero.ay-hero-media h1 em {
  color: #fff;
}
/* ===== Page-builder section blocks (product grid / category grid / FAQ) ===== */
.ay-block-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}
.ay-block-product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #EDE7D8;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ay-block-product-card:hover { box-shadow: 0 8px 24px rgba(27,67,50,.10); transform: translateY(-2px); }
.ay-block-product-img { aspect-ratio: 1/1; background: #F7F4EC; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ay-block-product-img img { width:100%; height:100%; object-fit:cover; }
.ay-block-product-name { padding: 10px 12px 2px; font-size: .88rem; font-weight: 600; color: #24331F; }
.ay-block-product-price { padding: 0 12px 12px; font-size: .85rem; color: #7C2D3E; font-weight: 700; }

.ay-block-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.ay-block-category-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #F7F4EC;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  font-weight: 600;
  font-size: .85rem;
  color: #24331F;
}
.ay-block-category-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ay-block-category-card span { display: block; padding: 10px; }

.ay-block-faq-item { padding: 14px 0; border-bottom: 1px solid #EDE7D8; }
.ay-block-faq-item strong { display: block; margin-bottom: 6px; color: #24331F; }
.ay-block-faq-item p { margin: 0; color: #5A6B5E; }
.ay-usp-collapsed { max-height: 260px; overflow-y: auto; }

/* ===== Product Page Enhancements (Batch: PDP Redesign) ===== */
.ay-pdp-rating-row { display:flex; align-items:center; gap:6px; margin:6px 0 10px; flex-wrap:wrap; }
.ay-star { color:#D8D2C2; font-size:1rem; line-height:1; }
.ay-star.filled { color:#C9A227; }
.ay-pdp-rating-count { font-size:.8rem; color:#7A8A7E; text-decoration:underline; }
.ay-pdp-highlights { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.ay-pdp-highlight-item { font-size:.72rem; background:#EFEBE0; color:#1B4332; padding:5px 10px; border-radius:20px; font-weight:600; }
.ay-pdp-urgency { font-size:.8rem; color:#B4530A; font-weight:600; margin-bottom:12px; }
.ay-pdp-actions-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.ay-qty-stepper { display:flex; align-items:center; border:1px solid #D8D2C2; border-radius:8px; overflow:hidden; }
.ay-qty-btn { width:34px; height:38px; background:#FAF7F0; border:none; font-size:1rem; cursor:pointer; color:#1B4332; }
.ay-qty-btn:hover { background:#EFEBE0; }
.ay-qty-value { min-width:32px; text-align:center; font-weight:700; font-size:.9rem; }
.ay-icon-btn { width:38px; height:38px; border-radius:50%; border:1px solid #D8D2C2; background:#FAF7F0; cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; color:#1B4332; transition:transform .15s ease, background .15s ease; }
.ay-icon-btn:hover { transform:scale(1.08); background:#EFEBE0; }
.ay-icon-btn.active { color:#C0392B; border-color:#C0392B33; }
.ay-product-add.added { background:#1B4332 !important; }
.ay-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#1B4332; color:#FAF7F0; padding:10px 18px; border-radius:30px; font-size:.82rem; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:999; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.ay-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.ay-pdp-quicknav { display:flex; gap:14px; overflow-x:auto; margin:22px 0 6px; padding-bottom:6px; border-bottom:1px solid #D8D2C2; }
.ay-pdp-quicknav a { font-size:.78rem; font-weight:600; color:#7A8A7E; white-space:nowrap; cursor:pointer; padding-bottom:6px; border-bottom:2px solid transparent; }
.ay-pdp-quicknav a:hover { color:#1B4332; border-bottom-color:#C9A227; }
.ay-gallery-counter { position:absolute; right:12px; bottom:12px; background:rgba(27,67,50,.82); color:#FAF7F0; font-size:.72rem; padding:3px 9px; border-radius:14px; }
.ay-product-gallery-main { position:relative; overflow:hidden; }
.ay-product-gallery-main img, .ay-product-gallery-main video { transition:transform .4s ease; }
@media (hover:hover) {
  .ay-product-gallery-main:hover img, .ay-product-gallery-main:hover video { transform:scale(1.08); }
}
.ay-trust-strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin:48px 0; padding:22px; background:#FAF7F0; border:1px solid #D8D2C2; border-radius:14px; }
.ay-trust-strip-item { flex:1 1 140px; text-align:center; }
.ay-trust-strip-item span { font-size:1.5rem; display:block; margin-bottom:6px; }
.ay-trust-strip-item p { font-size:.76rem; font-weight:600; color:#1B4332; margin:0; }
.ay-fbt-section { margin:48px 0; }
.ay-fbt-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0; }
.ay-fbt-item { text-align:center; width:120px; }
.ay-fbt-item input[type=checkbox] { margin-bottom:6px; width:16px; height:16px; }
.ay-fbt-thumb { width:90px; height:90px; margin:0 auto 6px; border-radius:10px; overflow:hidden; background:#EFEBE0; }
.ay-fbt-thumb img { width:100%; height:100%; object-fit:cover; }
.ay-fbt-item p { font-size:.72rem; margin:0 0 2px; color:#1B4332; line-height:1.25; height:2.4em; overflow:hidden; }
.ay-fbt-price { font-size:.78rem; font-weight:700; color:#1B4332; }
.ay-fbt-plus { font-size:1.2rem; color:#7A8A7E; }
.ay-fbt-total-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; background:#FAF7F0; border:1px solid #D8D2C2; border-radius:12px; padding:16px 20px; }
.ay-fbt-total-bar span { font-size:.9rem; color:#1B4332; }
.ay-reviews-section { margin:48px 0; }
.ay-reviews-summary { display:flex; justify-content:center; padding:24px; background:#FAF7F0; border:1px solid #D8D2C2; border-radius:14px; }
.ay-reviews-summary-score { text-align:center; }
.ay-reviews-summary-num { font-size:2.2rem; font-weight:800; color:#1B4332; line-height:1; }
.ay-reviews-summary-stars { margin:8px 0; font-size:1.2rem; }
.ay-reviews-summary-count { font-size:.8rem; color:#7A8A7E; }
.ay-reviews-empty { padding:28px; text-align:center; background:#FAF7F0; border:1px dashed #D8D2C2; border-radius:14px; color:#7A8A7E; font-size:.88rem; }
.ay-expert-cta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:48px 0; padding:26px 28px; background:#1B4332; border-radius:16px; color:#FAF7F0; }
.ay-expert-cta-text h3 { margin:0 0 6px; font-size:1.05rem; }
.ay-expert-cta-text p { margin:0; font-size:.82rem; opacity:.85; }
.ay-expert-cta-btn { background:#25D366; color:#fff; padding:11px 20px; border-radius:30px; font-weight:700; font-size:.84rem; text-decoration:none; white-space:nowrap; }
.ay-expert-cta-btn:hover { opacity:.9; }
.ay-brand-pillars { margin:56px 0 24px; }
.ay-brand-pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px; }
.ay-brand-pillar { text-align:center; padding:20px 14px; background:#FAF7F0; border:1px solid #D8D2C2; border-radius:14px; }
.ay-brand-pillar-icon { font-size:1.6rem; margin-bottom:8px; }
.ay-brand-pillar h4 { margin:0 0 6px; font-size:.92rem; color:#1B4332; }
.ay-brand-pillar p { margin:0; font-size:.76rem; color:#7A8A7E; line-height:1.4; }
.ay-sticky-cart-bar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:900; background:#fff; border-top:1px solid #D8D2C2; padding:10px 16px; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -6px 20px rgba(0,0,0,.08); transform:translateY(100%); transition:transform .25s ease; }
.ay-sticky-cart-bar.show { transform:translateY(0); }
.ay-sticky-cart-info { display:flex; flex-direction:column; font-size:.78rem; }
.ay-sticky-cart-info strong { font-size:.82rem; color:#1B4332; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 768px) {
  .ay-sticky-cart-bar { display:flex; }
  .ay-brand-pillars-grid { grid-template-columns:repeat(2,1fr); }
  .ay-trust-strip { justify-content:flex-start; }
  .ay-expert-cta { flex-direction:column; align-items:flex-start; text-align:left; }
}
@media (min-width: 769px) {
  .ay-sticky-cart-bar { display:none !important; }
}
/* ===== Premium Design Pass v2 — glassmorphism, motion, icon system ===== */
:root{
  --ay-glass-bg: linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,247,240,.5));
  --ay-glass-border: rgba(216,210,194,.55);
  --ay-glass-shadow: 0 10px 34px rgba(27,67,50,.09), 0 2px 6px rgba(27,67,50,.05);
}
.ay-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.ay-reveal.in-view { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .ay-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

.ay-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; position:relative; padding-bottom:4px; display:inline-block; }
.ay-eyebrow::after { content:''; display:block; width:28px; height:2px; margin-top:6px; background:linear-gradient(90deg,#C9A227,#E8D9A0); border-radius:2px; }
.ay-section-head h2 { position:relative; padding-bottom:12px; }
.ay-section-head h2::after { content:''; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:3px; background:linear-gradient(90deg,#1B4332,#C9A227); }

.ay-trust-strip, .ay-fbt-total-bar, .ay-reviews-summary, .ay-reviews-empty, .ay-brand-pillar, .ay-fbt-thumb {
  background: var(--ay-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ay-glass-border);
  box-shadow: var(--ay-glass-shadow);
}
.ay-brand-pillar { transition: transform .3s ease, box-shadow .3s ease; }
.ay-brand-pillar:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(27,67,50,.14); }
.ay-trust-strip-item { transition: transform .25s ease; }
.ay-trust-strip-item:hover { transform: translateY(-3px); }
.ay-trust-strip-item svg, .ay-pdp-highlight-item svg, .ay-brand-pillar-icon svg, .ay-aplus-icon svg { color:#1B4332; }

.ay-pdp-highlight-item { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#EFEBE0,#F5F0E4); box-shadow:0 2px 8px rgba(27,67,50,.06); transition:transform .2s ease, box-shadow .2s ease; }
.ay-pdp-highlight-item:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(27,67,50,.12); }
.ay-pdp-highlight-item svg { width:14px; height:14px; vertical-align:-2px; }

.ay-star svg { width:1em; height:1em; display:inline-block; }
.ay-star { color:#D8D2C2; }
.ay-star.filled { color:#C9A227; filter: drop-shadow(0 1px 3px rgba(201,162,39,.4)); }

.ay-product-add { background-image: linear-gradient(135deg,#1B4332,#25563f); border:none; box-shadow:0 6px 18px rgba(27,67,50,.28); transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease; }
.ay-product-add:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 28px rgba(27,67,50,.36); }
.ay-product-add:active:not(:disabled) { transform:translateY(0) scale(.97); box-shadow:0 4px 12px rgba(27,67,50,.3); }
.ay-product-add.added { background-image: linear-gradient(135deg,#154029,#1B4332) !important; }

.ay-expert-cta-btn { display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 22px rgba(37,211,102,.35); transition:transform .2s ease, box-shadow .2s ease; }
.ay-expert-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.45); opacity:1; }

.ay-icon-btn { background: var(--ay-glass-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow:0 3px 10px rgba(27,67,50,.08); }
.ay-icon-btn svg { width:17px; height:17px; }
.ay-icon-btn.active svg { fill: currentColor; }
@keyframes ayPulseKf { 0%{ box-shadow:0 0 0 0 rgba(27,67,50,.32);} 100%{ box-shadow:0 0 0 16px rgba(27,67,50,0);} }
.ay-icon-btn.ay-pulse { animation: ayPulseKf .55s ease-out; }

.ay-qty-stepper { border-radius:999px; background: var(--ay-glass-bg); box-shadow: inset 0 1px 3px rgba(27,67,50,.08); }
.ay-qty-btn { background:transparent; }
.ay-qty-btn:first-child { border-radius:999px 0 0 999px; }
.ay-qty-btn:last-child { border-radius:0 999px 999px 0; }
.ay-qty-btn:hover { background:rgba(27,67,50,.08); }

.ay-product-gallery-main { border-radius:16px; box-shadow:0 14px 36px rgba(27,67,50,.1); }
.ay-product-gallery-main img, .ay-product-gallery-main video { transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.ay-gallery-loading { position:relative; }
.ay-gallery-loading::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(239,235,224,.4) 30%, rgba(255,255,255,.75) 50%, rgba(239,235,224,.4) 70%); background-size:200% 100%; animation:ayShimmer 1.3s ease-in-out infinite; z-index:2; }
@keyframes ayShimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.ay-gallery-thumb { transition: transform .2s ease, box-shadow .2s ease; }
.ay-gallery-thumb:hover { transform:translateY(-2px); }
.ay-gallery-thumb.active { box-shadow:0 0 0 2px #C9A227; }

.ay-accordion-icon { transition: transform .3s ease; display:inline-block; }
.ay-accordion-trigger[aria-expanded="true"] .ay-accordion-icon { transform:rotate(45deg); }
.ay-accordion-trigger { transition: background .2s ease; }
.ay-accordion-trigger:hover { background:rgba(27,67,50,.04); }

.ay-sticky-cart-bar { background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow:0 -8px 30px rgba(27,67,50,.12); transition: transform .35s cubic-bezier(.22,.61,.36,1); }

.ay-fbt-item { transition: transform .2s ease; }
.ay-fbt-item:hover { transform: translateY(-3px); }
/* ===== Design Pass v3 — Add to Cart text fix + 10 more advanced features ===== */

/* --- Fix: legacy .ay-product-add sets color:var(--ay-forest-deep) for its
   gold background; our v2 gradient made that text invisible. Force both
   background and color together, base + hover + added states. --- */
.ay-product-add { background: linear-gradient(135deg,#1B4332,#25563f) !important; color:#FAF7F0 !important; }
.ay-product-add:hover:not(:disabled) { background: linear-gradient(135deg,#20573d,#2c6a4a) !important; color:#FAF7F0 !important; transform:translateY(-2px); box-shadow:0 12px 28px rgba(27,67,50,.36); }
.ay-product-add:active:not(:disabled) { transform:translateY(0) scale(.97); box-shadow:0 4px 12px rgba(27,67,50,.3); }
.ay-product-add.added { background: linear-gradient(135deg,#154029,#1B4332) !important; color:#FAF7F0 !important; }

/* --- 1. Desktop sticky order bar (top-anchored); mobile keeps bottom bar --- */
@media (max-width: 768px) {
  .ay-sticky-cart-bar { display:flex !important; top:auto; bottom:0; transform:translateY(100%); }
  .ay-sticky-cart-bar.show { transform:translateY(0); }
}
@media (min-width: 769px) {
  .ay-sticky-cart-bar { display:flex !important; top:0; bottom:auto; transform:translateY(-100%); box-shadow:0 8px 30px rgba(27,67,50,.12); padding:10px 24px; }
  .ay-sticky-cart-bar.show { transform:translateY(0); }
  .ay-sticky-cart-bar .ay-product-add { max-width:200px; }
}

/* --- 2. Fullscreen gallery lightbox --- */
#ayGalleryMain { cursor: zoom-in; }
.ay-lightbox { position:fixed; inset:0; background:rgba(10,20,15,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:2000; }
.ay-lightbox.open { display:flex; }
.ay-lightbox-media { max-width:88vw; max-height:86vh; }
.ay-lightbox-media img, .ay-lightbox-media video { max-width:88vw; max-height:86vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); display:block; }
.ay-lightbox-close { position:absolute; top:20px; right:24px; background:rgba(255,255,255,.12); color:#fff; border:none; width:42px; height:42px; border-radius:50%; font-size:1.5rem; cursor:pointer; line-height:1; }
.ay-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:none; width:48px; height:48px; border-radius:50%; font-size:1.1rem; cursor:pointer; }
.ay-lightbox-prev { left:24px; }
.ay-lightbox-next { right:24px; }
.ay-lightbox-close:hover, .ay-lightbox-nav:hover { background:rgba(255,255,255,.25); }

/* --- 3. Delivery pincode checker --- */
.ay-pincode-check { display:flex; gap:8px; margin:6px 0 4px; max-width:320px; }
.ay-pincode-check input { flex:1; padding:9px 12px; border:1px solid #D8D2C2; border-radius:8px; font-size:.82rem; }
.ay-pincode-check button { padding:9px 16px; border:1px solid #1B4332; background:transparent; color:#1B4332; border-radius:8px; font-weight:700; font-size:.78rem; cursor:pointer; transition:background .2s ease, color .2s ease; }
.ay-pincode-check button:hover { background:#1B4332; color:#FAF7F0; }
.ay-pincode-result { font-size:.78rem; margin:4px 0 14px; min-height:1em; }
.ay-pincode-result.ok { color:#1B4332; font-weight:600; }
.ay-pincode-result.error { color:#B4530A; }

/* --- 4/8. Social proof + video spotlight row --- */
.ay-pdp-meta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 4px; }
.ay-social-proof { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:#7A8A7E; }
.ay-social-proof svg { color:#C9A227; }
.ay-video-spotlight { display:inline-flex; align-items:center; gap:6px; background:#1B4332; color:#FAF7F0; border:none; padding:7px 14px; border-radius:999px; font-size:.74rem; font-weight:700; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 4px 12px rgba(27,67,50,.25); }
.ay-video-spotlight:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,67,50,.35); }

/* --- 5. Dosha tooltip guide --- */
.ay-product-sizes { position:relative; }
.ay-dosha-info { width:20px; height:20px; border-radius:50%; border:1.5px solid #D8D2C2; background:#fff; color:#7A8A7E; font-size:.68rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.ay-dosha-info:hover { border-color:#C9A227; color:#1B4332; }
.ay-dosha-tooltip { display:none; position:absolute; z-index:20; top:100%; left:0; margin-top:10px; background:#fff; border:1px solid #D8D2C2; border-radius:10px; padding:12px 14px; font-size:.74rem; line-height:1.6; color:#1B4332; box-shadow:0 10px 30px rgba(27,67,50,.15); max-width:260px; }
.ay-dosha-tooltip.show { display:block; }

/* --- 7. Secure-checkout / payment trust band --- */
.ay-payment-band { background:#F5F0E4; border-top:1px solid #D8D2C2; border-bottom:1px solid #D8D2C2; padding:16px 0; margin-top:20px; }
.ay-payment-band-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.ay-payment-secure { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:#1B4332; }
.ay-payment-icons { display:flex; gap:10px; flex-wrap:wrap; }
.ay-payment-icons span { font-size:.68rem; font-weight:700; color:#7A8A7E; background:#fff; border:1px solid #D8D2C2; padding:5px 10px; border-radius:6px; }

/* --- 9. Accordion Expand All / Collapse All --- */
.ay-accordion-toggle-all { text-align:right; margin:14px 0 -4px; }
.ay-accordion-toggle-all button { background:none; border:none; color:#7A8A7E; font-size:.74rem; font-weight:700; text-decoration:underline; cursor:pointer; }
.ay-accordion-toggle-all button:hover { color:#1B4332; }

/* --- 10. Brand-philosophy quote callout --- */
.ay-quote-callout { text-align:center; max-width:640px; margin:48px auto; padding:34px 24px; position:relative; }
.ay-quote-mark { font-family:'Fraunces', serif; font-size:3.4rem; color:#C9A227; line-height:1; margin-bottom:-10px; }
.ay-quote-text { font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; color:#1B4332; line-height:1.6; }
.ay-quote-attribution { margin-top:12px; font-size:.76rem; color:#7A8A7E; text-transform:uppercase; letter-spacing:.08em; }
.ay-pincode-note { font-size:.68rem; color:#9AA69C; margin:-10px 0 14px; font-style:italic; }

/* ===== Design Pass v4 — 10 features + 10 UX enhancements ===== */

/* Skip link + focus accessibility */
.ay-skip-link { position:absolute; left:-999px; top:0; background:#1B4332; color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:9999; text-decoration:none; font-weight:700; font-size:.85rem; }
.ay-skip-link:focus { left:0; }
.ay-icon-btn:focus-visible, .ay-product-add:focus-visible, .ay-qty-btn:focus-visible,
.ay-accordion-trigger:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:3px solid #2fa86c; outline-offset:2px;
}

/* Dark mode toggle button */
.ay-dark-toggle { position:fixed; top:14px; right:14px; z-index:60; width:38px; height:38px; border-radius:50%; border:1px solid var(--ay-glass-border,#ddd); background:var(--ay-glass-bg,#fff); cursor:pointer; font-size:1rem; box-shadow:0 4px 14px rgba(0,0,0,.12); }

/* Dark mode overrides — product-detail area only */
html[data-ay-theme="dark"] body.ay-body { background:#0f1712; color:#EAEFE9; }
html[data-ay-theme="dark"] .ay-product-info,
html[data-ay-theme="dark"] .ay-accordion-item,
html[data-ay-theme="dark"] .ay-trust-strip,
html[data-ay-theme="dark"] .ay-spec-sheet,
html[data-ay-theme="dark"] .ay-compare-table-wrap,
html[data-ay-theme="dark"] .ay-reviews-summary,
html[data-ay-theme="dark"] .ay-reviews-empty,
html[data-ay-theme="dark"] .ay-brand-pillar,
html[data-ay-theme="dark"] .ay-ask-question-form,
html[data-ay-theme="dark"] .ay-fbt-total-bar { background:#17231b; color:#EAEFE9; border-color:#2b3a2f; }
html[data-ay-theme="dark"] .ay-accordion-panel-inner p,
html[data-ay-theme="dark"] .ay-product-info-sub,
html[data-ay-theme="dark"] .ay-freshness-note,
html[data-ay-theme="dark"] .ay-compare-table td,
html[data-ay-theme="dark"] .ay-spec-item span { color:#C9D2C9; }
html[data-ay-theme="dark"] .ay-compare-table th { color:#EAEFE9; border-color:#2b3a2f; }
html[data-ay-theme="dark"] .ay-compare-table td { border-color:#2b3a2f; }

/* Freshness note */
.ay-freshness-note { font-size:.7rem; color:var(--ay-ink-muted,#9AA69C); margin:2px 0 10px; }

/* Stock badge */
.ay-stock-badge-wrap { margin-bottom:8px; }
.ay-stock-badge { display:inline-block; padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.ay-stock-badge.in { background:#E5F5EC; color:#1B7A43; }
.ay-stock-badge.low { background:#FFF3D6; color:#9A6A00; }
.ay-stock-badge.out { background:#FCE7E7; color:#B42318; }

/* Share menu */
.ay-share-wrap { position:relative; display:inline-block; }
.ay-share-menu { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.14); padding:8px; display:none; flex-direction:column; min-width:170px; z-index:40; }
.ay-share-menu.show { display:flex; }
.ay-share-menu a, .ay-share-menu button { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; text-decoration:none; color:#1B4332; font-size:.82rem; font-weight:600; border:none; background:none; cursor:pointer; text-align:left; }
.ay-share-menu a:hover, .ay-share-menu button:hover { background:#F5F3EC; }

/* Accordion search */
.ay-accordion-search { display:flex; align-items:center; gap:8px; border:1px solid #e2e2e2; border-radius:10px; padding:8px 12px; margin-bottom:10px; color:#8a8a8a; }
.ay-accordion-search input { border:none; outline:none; flex:1; font-size:.85rem; background:transparent; }

/* Compare table */
.ay-compare-table-wrap { overflow-x:auto; }
.ay-compare-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.ay-compare-table th, .ay-compare-table td { padding:10px 14px; border:1px solid #eee; text-align:left; white-space:nowrap; }
.ay-compare-table th { background:#F5F3EC; font-weight:700; }
.ay-compare-table td:first-child { font-weight:700; background:#FAFAF7; }

/* Spec sheet */
.ay-spec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.ay-spec-item { border:1px solid #eee; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.ay-spec-item span { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#9AA69C; }
.ay-spec-item strong { font-size:.9rem; color:#1B4332; }

/* Ask a question */
.ay-ask-question-form { display:flex; flex-direction:column; gap:10px; border:1px solid #eee; border-radius:14px; padding:16px; }
.ay-ask-question-form textarea { border:1px solid #ddd; border-radius:10px; padding:10px; font-family:inherit; font-size:.85rem; resize:vertical; }
.ay-ask-question-form button { align-self:flex-start; display:flex; align-items:center; gap:8px; background:#25D366; color:#fff; border:none; padding:10px 18px; border-radius:999px; font-weight:700; font-size:.82rem; cursor:pointer; }

/* Bulk CTA */
.ay-bulk-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#F5F3EC; border-radius:16px; padding:20px 24px; margin-top:24px; }
.ay-bulk-cta-text h3 { margin:0 0 4px; font-size:1rem; }
.ay-bulk-cta-text p { margin:0; font-size:.82rem; color:var(--ay-ink-muted,#666); }
.ay-bulk-cta-btn { background:#1B4332; color:#fff; text-decoration:none; padding:10px 20px; border-radius:999px; font-weight:700; font-size:.82rem; white-space:nowrap; }


/* Toast stack (queue) */
.ay-toast-stack { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:80; align-items:center; }
.ay-toast-item { background:#1B4332; color:#fff; padding:10px 18px; border-radius:999px; font-size:.82rem; opacity:0; transform:translateY(10px); transition:all .25s; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.ay-toast-item.show { opacity:1; transform:translateY(0); }

/* Heart burst micro-animation */
@keyframes ayHeartBurst { 0%{transform:scale(1);} 35%{transform:scale(1.4);} 60%{transform:scale(.92);} 100%{transform:scale(1);} }
.ay-heart-burst { animation:ayHeartBurst .55s ease; color:#e0455a; }

/* Image loading shimmer (skeleton + blur-up, shared) */
.ay-img-loading { position:relative; overflow:hidden; background:#F0EEE6; }
.ay-img-loading img { filter:blur(6px); opacity:.4; transition:filter .3s, opacity .3s; }
.ay-img-loading::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:200% 100%; animation:ayShimmerV4 1.3s infinite;
}
@keyframes ayShimmerV4 { 0%{background-position:150% 0;} 100%{background-position:-50% 0;} }

/* Custom scrollbars for horizontal strips */
.ay-fbt-row::-webkit-scrollbar, .ay-product-gallery-thumbs::-webkit-scrollbar { height:6px; }
.ay-fbt-row::-webkit-scrollbar-thumb, .ay-product-gallery-thumbs::-webkit-scrollbar-thumb { background:#C9BE9A; border-radius:999px; }
.ay-fbt-row::-webkit-scrollbar-track, .ay-product-gallery-thumbs::-webkit-scrollbar-track { background:transparent; }

/* Gallery tilt target */
#ayGalleryMainImg { transition:transform .12s ease-out; transform-style:preserve-3d; }

/* Print stylesheet */
@media print {
  .ay-header, .ay-footer, .ay-sticky-cart-bar, .ay-back-to-top, .ay-dark-toggle,
  .ay-icon-btn, .ay-share-menu, .ay-lightbox, .ay-toast-stack, .ay-expert-cta,
  .ay-ask-question, .ay-bulk-cta, .ay-accordion-search, .ay-pdp-quicknav,
  .ay-accordion-toggle-all, .ay-qty-stepper, .ay-pincode-check, .ay-skip-link { display:none !important; }
  body { color:#000; }
  .ay-accordion-panel { max-height:none !important; }
}
/* ==========================================================================
   Landing page (/ayurveda) — premium enhancement pass (LANDING_ENH_V1)
   Section background separation + 20 design/UI-UX enhancements. Reuses
   the same .ay-bg-1/2/3 and .ay-reveal mechanisms already established on
   about.blade.php / herbs.blade.php rather than inventing new ones.
   ========================================================================== */

/* Section background separation — alternating panels, matches about/herbs */
.ay-section { position: relative; }
.ay-bg-1 { background: var(--ay-surface, #fff); }
.ay-bg-2 { background: var(--ay-cream, #FAF7F0); }
.ay-bg-3 { background: rgba(27,67,50,.045); }
html[data-ay-theme="dark"] .ay-bg-1 { background: #0f1a14; }
html[data-ay-theme="dark"] .ay-bg-2 { background: #14231b; }
html[data-ay-theme="dark"] .ay-bg-3 { background: rgba(255,255,255,.035); }

/* 1. Smooth in-page anchor scrolling, with room for the fixed header */
html { scroll-behavior: smooth; }
#shop, #herbs, #categories, #ritual, #new-arrivals, #dosha, #gifting, #why-ayurveda {
  scroll-margin-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 2. Premium gold underline accent below every eyebrow label */
.ay-section-eyebrow { position: relative; padding-bottom: 8px; display: inline-block; }
.ay-section-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--ay-gold, #C9A227), transparent);
}

/* 3. Numbered section watermarks (premium editorial-style large numerals) */
.ay-section-head { position: relative; z-index: 1; }
.ay-section-watermark {
  position: absolute;
  top: 4px;
  right: 20px;
  font-family: 'Fraunces', serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: rgba(27,67,50,.05);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}
html[data-ay-theme="dark"] .ay-section-watermark { color: #7fb89a; opacity: .12; }
.ay-gift-banner { position: relative; }
.ay-gift-banner .ay-section-watermark { top: -6px; right: 16px; }

/* 4. Functional back-to-top button (markup ships site-wide via
   footer.blade.php; this page now wires up scroll show/hide + click) */
/* (behavior wired in <script>; .is-visible styling already defined in
   the base back-to-top rule elsewhere in this file) */

/* 5. Product card hover-lift */
.ay-product-card {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.ay-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(27,67,50,.14), 0 4px 12px rgba(27,67,50,.08);
}

/* 6. Herb card hover-lift + icon bounce/rotate */
.ay-herb-card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.ay-herb-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(27,67,50,.12);
}
.ay-herb-icon { transition: transform .3s ease; display: inline-block; }
.ay-herb-card:hover .ay-herb-icon { transform: scale(1.15) rotate(-6deg); }

/* 7. Category circle hover-lift + icon scale */
.ay-cat-circle { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.ay-cat-circle:hover { transform: translateY(-4px) scale(1.05); }
.ay-cat-circle-img { transition: transform .3s ease; display: inline-block; }
.ay-cat-circle:hover .ay-cat-circle-img { transform: scale(1.12); }

/* 8. Gradient-glow effect on primary CTA buttons (hero + dosha band) */
.ay-hero .ay-btn-primary,
.ay-dosha-band .ay-btn-primary {
  position: relative;
  box-shadow: 0 8px 28px rgba(201,162,39,.35), 0 2px 8px rgba(27,67,50,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ay-hero .ay-btn-primary:hover,
.ay-dosha-band .ay-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(201,162,39,.45), 0 4px 12px rgba(27,67,50,.25);
}

/* 9. Custom premium scrollbar styling */
body.ay-body { scrollbar-width: thin; scrollbar-color: var(--ay-forest, #1B4332) transparent; }
body.ay-body::-webkit-scrollbar { width: 10px; }
body.ay-body::-webkit-scrollbar-track { background: transparent; }
body.ay-body::-webkit-scrollbar-thumb {
  background: var(--ay-forest, #1B4332);
  border-radius: 10px;
  border: 2px solid var(--ay-cream, #FAF7F0);
}

/* 10. Staggered fade-in entrance animation on product/herb grid cards */
.ay-product-grid .ay-product-card,
.ay-herb-grid .ay-herb-card,
.ay-newarrivals-grid .ay-product-card {
  animation: ayLandingCardIn .6s cubic-bezier(.22,.61,.36,1) both;
}
.ay-product-grid .ay-product-card:nth-child(1),
.ay-herb-grid .ay-herb-card:nth-child(1),
.ay-newarrivals-grid .ay-product-card:nth-child(1) { animation-delay: .05s; }
.ay-product-grid .ay-product-card:nth-child(2),
.ay-herb-grid .ay-herb-card:nth-child(2),
.ay-newarrivals-grid .ay-product-card:nth-child(2) { animation-delay: .1s; }
.ay-product-grid .ay-product-card:nth-child(3),
.ay-herb-grid .ay-herb-card:nth-child(3),
.ay-newarrivals-grid .ay-product-card:nth-child(3) { animation-delay: .15s; }
.ay-product-grid .ay-product-card:nth-child(4),
.ay-herb-grid .ay-herb-card:nth-child(4),
.ay-newarrivals-grid .ay-product-card:nth-child(4) { animation-delay: .2s; }
.ay-product-grid .ay-product-card:nth-child(5) { animation-delay: .25s; }
.ay-product-grid .ay-product-card:nth-child(6) { animation-delay: .3s; }
@keyframes ayLandingCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ay-product-grid .ay-product-card,
  .ay-herb-grid .ay-herb-card,
  .ay-newarrivals-grid .ay-product-card { animation: none; }
}

/* 11. Ritual card art zoom-on-hover */
.ay-ritual-card .art svg { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.ay-ritual-card:hover .art svg { transform: scale(1.12); }

/* 12. Keyboard focus-visible outlines (accessibility) */
.ay-cat-circle:focus-visible,
.ay-product-add:focus-visible,
.ay-ptab:focus-visible,
.ay-btn:focus-visible {
  outline: 2px solid var(--ay-gold, #C9A227);
  outline-offset: 3px;
}

/* 13. Brand-matched text selection color */
body.ay-body ::selection {
  background: var(--ay-gold, #C9A227);
  color: var(--ay-forest-deep, #14301F);
}

/* 14. Trust-strip icon hover pulse */
.ay-trust-inner span { transition: transform .25s ease; display: inline-block; }
.ay-trust-inner span:hover { transform: scale(1.08); }

/* 15. Newsletter input focus-glow + button hover-lift */
.ay-newsletter-form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,162,39,.35);
}
.ay-newsletter-form button {
  transition: transform .25s ease, box-shadow .25s ease;
}
.ay-newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(27,67,50,.2);
}

/* 16. Gift banner card shadow-lift on hover */
.ay-gift-banner { transition: box-shadow .35s ease; }
.ay-gift-banner:hover { box-shadow: 0 20px 48px rgba(27,67,50,.12); }

/* 17. Value-card (Why Ayurveda) hover-lift */
.ay-value-card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.ay-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(27,67,50,.1);
}

/* 18. Floating decorative orbs in hero for premium depth */
.ay-hero { position: relative; overflow: hidden; }
.ay-hero-inner { position: relative; }
.ay-hero-inner > *:not(.ay-landing-hero-orb) { position: relative; z-index: 1; }
.ay-landing-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .25;
  pointer-events: none;
  z-index: 0;
  animation: ayLandingOrbFloat 9s ease-in-out infinite;
}
.ay-landing-hero-orb-1 { width: 220px; height: 220px; background: var(--ay-gold, #C9A227); top: -60px; right: 8%; }
.ay-landing-hero-orb-2 { width: 160px; height: 160px; background: var(--ay-forest, #1B4332); bottom: -40px; left: 4%; animation-delay: 1.5s; }
@keyframes ayLandingOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ay-landing-hero-orb { animation: none; }
}

/* 19–20. Print hygiene: hide decorative/interactive-only landing elements */
@media print {
  .ay-landing-hero-orb, .ay-section-watermark { display: none !important; }
}

/* ==========================================================================
   Hero CTA contrast fix + Shop by Category premium redesign
   (HERO_CTA_CATCIRCLE_V1)
   ========================================================================== */

/* Fix: .ay-btn-ghost is defined more than once sitewide in ayurveda.css —
   a dark-text variant meant for light backgrounds and a light-text
   variant meant for dark backgrounds — and whichever rule comes later in
   the file wins at equal specificity. On the hero specifically the
   dark-text version was winning, making "Explore Herbs"/"Shop Now"
   nearly invisible against the dark hero background. Scope the hero's
   ghost button explicitly so it always gets the light-on-dark treatment,
   regardless of ordering elsewhere in the file. */
.ay-hero-ctas .ay-btn-ghost {
  color: var(--ay-ivory, #FAF7F0);
  border-color: rgba(250,247,240,.55);
  background: rgba(250,247,240,.06);
}
.ay-hero-ctas .ay-btn-ghost:hover {
  background: var(--ay-ivory, #FAF7F0);
  color: var(--ay-forest-deep, #14301F);
  border-color: var(--ay-ivory, #FAF7F0);
}

/* Shop by Category — premium redesign */
.ay-cats-row { gap: 40px; padding: 8px 0 4px; }
.ay-cat-circle {
  position: relative;
  padding: 12px 10px;
  border-radius: 20px;
  transition: background .3s ease;
}
.ay-cat-circle:hover { background: rgba(27,67,50,.05); }
html[data-ay-theme="dark"] .ay-cat-circle:hover { background: rgba(255,255,255,.05); }

.ay-cat-circle-img {
  position: relative;
  box-shadow: var(--ay-shadow), 0 0 0 1px rgba(201,162,39,.22);
}
.ay-cat-circle-img::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,162,39,.4);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.ay-cat-circle:hover .ay-cat-circle-img::after {
  opacity: 1;
  transform: scale(1);
}

.ay-cat-circle-label {
  display: block;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
}
.ay-cat-circle-label::after {
  content: '';
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ay-gold, #C9A227);
  margin: 6px auto 0;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .3s ease, transform .3s ease;
}
.ay-cat-circle:hover .ay-cat-circle-label::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .ay-cat-circle-img::after,
  .ay-cat-circle-label::after { transition: none; }
}