/* Product + guidance widgets. Existing Shuddhy tokens only. */
.wpg-button-secondary{min-height:48px;padding:0 22px;border:1px solid var(--deep);border-radius:999px;background:var(--surface);color:var(--deep);font-weight:700;cursor:pointer}
.product-stage{position:relative}
.wpg-buy-tools{margin:18px 0 0}
.wpg-quantity>span{display:block;margin-bottom:7px;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.wpg-stepper{display:inline-grid;grid-template-columns:44px 64px 44px;width:152px;max-width:100%;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.wpg-stepper button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--deep);font-size:1.35rem;line-height:1;cursor:pointer}
.wpg-stepper output{display:block;text-align:center;font-weight:800}
.wpg-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wpg-detail{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:0 22px}
.wpg-detail summary{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--display);font-size:1.35rem;cursor:pointer;list-style:none}
.wpg-detail summary::-webkit-details-marker{display:none}
.wpg-detail summary::after{content:'+';font-family:var(--body);font-size:1.15rem}
.wpg-detail[open] summary::after{content:'−'}
.wpg-detail p{color:var(--muted)}
.wpg-role{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr);align-items:center;gap:clamp(28px,5vw,80px);border-radius:var(--radius);background:var(--deep);color:var(--surface);overflow:hidden}
.wpg-role-copy{padding:clamp(26px,5vw,72px)}
.wpg-role-copy p:not(.eyebrow){max-width:60ch;color:var(--bg)}
.wpg-role img{width:100%;height:420px;object-fit:contain;padding:24px}
.wpg-review{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:clamp(24px,4vw,54px)}
.wpg-review h2{font-size:clamp(2rem,4vw,4rem)}
.wpg-review p{color:var(--muted)}
.wpg-swipe .product-grid,.wpg-related-guides>div{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:10px;overscroll-behavior-inline:contain}
.wpg-swipe .product-card{flex:0 0 min(620px,80vw);scroll-snap-align:start}
/* N04: sticky bar = short product name (one line, ellipsis if too long, never split in a word) + size and price. */
.wpg-sticky-meta::before{content:" \00b7  "}
.wpg-topics h2,.wpg-related-guides h2{font-size:clamp(2rem,4vw,4rem);margin-bottom:22px}
.wpg-topics nav{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.wpg-topics a{flex:none;min-height:46px;display:flex;align-items:center;padding:0 20px;border:1px solid var(--border);border-radius:999px;background:var(--surface);text-decoration:none;font-weight:700}
.wpg-reading-progress{position:sticky;top:84px;z-index:10;width:var(--shell);margin:12px auto;padding:10px 16px;display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.78rem;font-weight:700}
.wpg-reading-progress progress{width:100%;height:8px;accent-color:var(--accent)}
.wpg-articles{display:grid;gap:12px}
.wpg-articles details{padding:0 clamp(20px,4vw,42px);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.wpg-articles summary{min-height:82px;display:flex;align-items:center;font-family:var(--display);font-size:clamp(1.45rem,3vw,2.3rem);cursor:pointer}
.wpg-articles p{max-width:72ch;color:var(--muted);font-size:1.05rem}
.wpg-guide-share{text-align:right}
.wpg-related-guides>div>a{flex:0 0 min(390px,82vw);min-height:150px;display:flex;align-items:flex-end;padding:24px;border-radius:var(--radius-sm);background:var(--deep);color:var(--surface);font-family:var(--display);font-size:1.55rem;text-decoration:none;scroll-snap-align:start}
.wpg-newsletter{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(24px,4vw,54px);border-radius:var(--radius);background:var(--surface)}
.wpg-newsletter[hidden]{display:none!important}
.wpg-newsletter form{display:grid;grid-template-columns:1fr auto;gap:10px}
.wpg-newsletter input{min-width:0;min-height:52px;padding:0 18px;border:1px solid var(--border);border-radius:999px;color:var(--fg);background:var(--bg)}
.wpg-newsletter small{grid-column:1/-1;color:var(--muted)}
@media(max-width:780px){.wpg-details-grid{grid-template-columns:1fr}.wpg-reading-progress{top:74px}.wpg-role{grid-template-columns:1fr}.wpg-role img{height:330px}.wpg-newsletter{grid-template-columns:1fr}}
@media(max-width:600px){.wpg-review{align-items:stretch;flex-direction:column}.wpg-review .button{text-align:center}.wpg-newsletter form{grid-template-columns:1fr}.wpg-newsletter small{grid-column:auto}}
@media(max-width:430px){.wpg-reading-progress{grid-template-columns:auto 1fr;width:calc(100vw - 24px);border-radius:var(--radius-sm)}.wpg-reading-progress span:last-child{grid-column:1/-1;text-align:right}.wpg-role img{height:280px}.wpg-swipe .product-card{flex-basis:88vw}}
@media(prefers-reduced-motion:reduce){.wpg-swipe .product-grid,.wpg-related-guides>div{scroll-behavior:auto}}
/* ── Related product swipe cards ("Explore SHUDDHY") ────── */
/* Override: swipe cards need a portrait layout, not the default row layout */
.wpg-swipe .product-card {
  /* Reset any horizontal-card layout from responsive.css */
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  padding: 10px !important;
  background-color: var(--cream) !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
/* Media block: give it an explicit aspect-ratio */
.wpg-swipe .product-card .product-media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 200px !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px 10px 0 0 !important;
  background-color: transparent !important;
}
/* Image: cover the box, never collapse */
.wpg-swipe .product-card .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  display: block !important;
  border-radius: 10px 10px 0 0 !important;
}
/* Copy panel */
.wpg-swipe .product-card .product-copy {
  background-color: var(--white) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 18px 22px 16px !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.wpg-swipe .product-card .price { justify-content: center !important; }
.wpg-swipe .product-card .card-actions {
  width: 100% !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
.wpg-swipe .product-card .button { width: 100% !important; }
/* Key actives pills */
.wpg-actives{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.wpg-actives span,.wpg-active-pill{display:inline-flex;align-items:center;padding:6px 14px;border:1px solid var(--accent);border-radius:999px;font-size:.78rem;font-weight:700;color:var(--accent);background:color-mix(in oklch,var(--accent) 8%,transparent)}
/* Free-from badges — works with both <li> and <span> children */
.wpg-free-badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 4px;padding:0}
.wpg-free-badges li,.wpg-badge{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--border);border-radius:999px;font-size:.75rem;font-weight:700;color:var(--muted);background:var(--surface)}
/* Description 2-col grid */
.wpg-desc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin-top:40px}
.wpg-desc-grid h3{font-size:clamp(1.3rem,2vw,1.8rem);margin-bottom:12px}
.wpg-desc-grid p{color:var(--muted);line-height:1.7;font-size:1rem}
/* About formulation section */
.wpg-about-formulation{border-top:1px solid var(--border);padding-top:clamp(40px,5vw,72px)}
.wpg-about-formulation>p.eyebrow{margin-bottom:8px}
.wpg-about-formulation>h2{font-size:clamp(2rem,4vw,3.6rem);max-width:24ch;margin-bottom:0}
/* Breadcrumb in product hero */
.breadcrumb{display:flex;align-items:center;gap:.4em;font-size:.8rem;opacity:.65;margin-bottom:.75rem}
.breadcrumb a{text-decoration:none;color:inherit}.breadcrumb a:hover{text-decoration:underline}
/* Product hero responsive fix — ensure 2-col on desktop stacks on mobile */
@media(max-width:780px){
  .wpg-desc-grid{grid-template-columns:1fr}
  .wpg-details-grid{grid-template-columns:1fr}
  .wpg-about-formulation>h2{font-size:clamp(1.9rem,8vw,3rem)}
}
/* Fix: product hero should not have fixed min-height on mobile causing blank space */
@media(max-width:780px){
  .product-hero{min-height:unset;padding:24px 0 48px}
  .product-stage{height:340px}
}




/* ─────────────────────────────────────────────────────────────
   GLOBAL BUTTON DESIGN SYSTEM (Elementor / WordPress Standard)
   5 Standardized Global Button Types with Responsive Behaviors
   ───────────────────────────────────────────────────────────── */

/* Base Global Button Reset & Standards */
.button,
.button-primary,
.button-secondary,
.button-light,
.button-outline,
.wpg-button-secondary,
.text-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1.5px solid transparent !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
}

/* TYPE 1: Primary Action Button (.button, .button-primary) */
.button,
.button-primary {
  background-color: var(--deep) !important;
  color: var(--surface) !important;
  border-color: var(--deep) !important;
  box-shadow: var(--shadow) !important;
}
.button:hover,
.button-primary:hover {
  background-color: color-mix(in oklch, var(--deep) 85%, black) !important;
  border-color: color-mix(in oklch, var(--deep) 85%, black) !important;
  color: var(--surface) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}
.button:active,
.button-primary:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: none !important;
}

/* TYPE 2: Secondary / Light Button (.button-secondary, .button-light) */
.button-secondary,
.button-light {
  background-color: var(--surface) !important;
  color: var(--deep) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.button-secondary:hover,
.button-light:hover {
  background-color: var(--bg) !important;
  border-color: var(--deep) !important;
  color: var(--deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}
.button-secondary:active,
.button-light:active {
  transform: translateY(0) scale(0.98) !important;
}

/* TYPE 3: Outline / Ghost Button (.button-outline, .wpg-button-secondary) */
.button-outline,
.wpg-button-secondary {
  background-color: transparent !important;
  color: var(--deep) !important;
  border-color: var(--deep) !important;
}
.button-outline:hover,
.wpg-button-secondary:hover {
  background-color: var(--deep) !important;
  color: var(--surface) !important;
  transform: translateY(-2px) !important;
}
.button-outline:active,
.wpg-button-secondary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* TYPE 4: Text Link / Minimal Action (.text-link) */
.text-link {
  min-height: auto !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.text-link:hover {
  color: var(--deep) !important;
  transform: translateX(3px) !important;
}

/* TYPE 5: Full Width Mobile CTA (.button-wide, .button.wide, .wide) */
.button-wide,
.button.wide,
.wide {
  width: 100% !important;
  display: flex !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
  .card-actions .button,
  .sidebar-card .button,
  .contact-cta .button,
  .drawer-foot .button {
    width: 100% !important;
    display: flex !important;
    min-height: 48px !important;
  }
}

/* ── Site Footer Standard Responsive Styles ─────────────────────────── */
.site-footer {
  background: var(--deep);
  color: var(--surface);
  padding: 60px max(24px, calc((100vw - min(94vw, 1200px)) / 2)) 30px;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 40px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-brand img {
  max-height: 48px;
  width: auto;
  display: block;
}
.footer-tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}
.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.footer-address a {
  color: var(--surface);
  text-decoration: none;
  font-size: 0.92rem;
  opacity: 0.85;
}
.footer-address a:hover {
  opacity: 1;
  text-decoration: underline;
}
.footer-heading {
  font-family:var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--surface);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col nav a {
  color: var(--surface);
  text-decoration: none;
  font-size: 0.92rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}
.footer-col nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklch, var(--surface) 15%, transparent);
  text-align: center;
}
.footer-bottom small {
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 780px) {
  .site-footer {
    padding-top: 48px;
    padding-bottom: 30px;
  }
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-brand-col {
    grid-column: 1;
  }
  .footer-col nav a {
    min-height: 40px;
  }
}
.has-home-widget-dock .site-footer,
.has-shop-widget-dock .site-footer {
  padding-bottom: 120px;
}


/* First-screen combo: visible beside the product name instead of below the fold. */
.product-combo-first{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 14px;margin:12px 0 18px;padding:14px 16px;border:1px solid color-mix(in oklch,var(--accent) 68%,var(--deep));border-radius:var(--radius-sm);background:color-mix(in oklch,var(--surface) 88%,var(--cream));color:var(--deep)}
.product-combo-first>span{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in oklch,var(--accent) 68%,var(--deep))}.product-combo-first>strong{font-family:var(--display);font-size:1.45rem}.product-combo-first small{display:block;margin-top:2px;font:700 .75rem var(--body);color:var(--muted)}.product-combo-first .combo-cta{grid-column:2;grid-row:1/3;min-height:46px;padding:0 16px;border:0;border-radius:999px;background:var(--deep);color:var(--surface);font:750 .82rem var(--body);cursor:pointer}.product-combo-first .combo-cta:hover,.product-combo-first .combo-cta:focus-visible{background:var(--deep-hover);transform:translateY(-1px)}
@media(max-width:520px){.product-combo-first{grid-template-columns:1fr}.product-combo-first .combo-cta{grid-column:1;grid-row:auto;width:100%;margin-top:7px}.wpg-sticky-add strong{display:block;min-width:0;line-height:1.2}.wpg-sticky-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;word-break:normal}.wpg-sticky-meta{display:block;white-space:nowrap;font-size:.9em}.wpg-sticky-meta::before{content:none}.wpg-sticky-add button.button,.wpg-sticky-add a.button{padding-inline:14px!important;font-size:.88rem!important}.wpg-sticky-name{font-size:.92rem}}

/* ═══ FE-2 (6 Oct 2026): product gallery, title fit, dock/badge fixes, article overflow ═══ */
.wpg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cart-count[hidden]{display:none!important}

/* Hero columns start at the top so the photo and the title line up */
.product-hero{align-items:start}

/* Gallery: native scroll-snap track (touch swipe), arrows, keyboard, thumbnail strip */
.wpg-gallery{min-width:0}
.wpg-gallery-stage{position:relative;aspect-ratio:4/5;max-height:min(78vh,760px);width:100%;border-radius:var(--radius);background:var(--surface);overflow:hidden}
.wpg-gallery-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.wpg-gallery-track::-webkit-scrollbar{display:none}
.wpg-gallery-track:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
.wpg-slide{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;background:var(--surface)}
.wpg-slide img{width:100%;height:100%;object-fit:contain}
.wpg-gallery-arrow{display:none;position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid var(--border);border-radius:50%;place-items:center;background:color-mix(in oklch,var(--surface) 92%,transparent);color:var(--deep);cursor:pointer;box-shadow:var(--shadow)}
.wpg-gallery-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wpg-gallery-arrow[data-dir="prev"]{left:10px}
.wpg-gallery-arrow[data-dir="next"]{right:10px}
.wpg-gallery-arrow:hover:not(:disabled),.wpg-gallery-arrow:focus-visible{background:var(--deep);border-color:var(--deep);color:var(--surface)}
.wpg-gallery-arrow:disabled{opacity:.35;cursor:default}
.js-gallery .wpg-gallery-arrow{display:grid}
.wpg-gallery-dots{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);display:flex;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in oklch,var(--surface) 82%,transparent);pointer-events:none}
.wpg-gallery-dots span{width:8px;height:8px;border-radius:50%;background:color-mix(in oklch,var(--deep) 28%,var(--surface));transition:width .2s ease,background-color .2s ease}
.wpg-gallery-dots span[aria-current="true"]{width:22px;border-radius:999px;background:var(--deep)}
.wpg-gallery-thumbs{display:flex;gap:8px;margin:12px 0 0;padding:2px 2px 6px;list-style:none;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.wpg-gallery-thumbs li{flex:0 0 auto}
.wpg-thumb{display:block;width:64px;height:80px;padding:0;border:2px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;cursor:pointer}
.wpg-thumb img{width:100%;height:100%;object-fit:cover}
.wpg-thumb[aria-current="true"]{border-color:var(--deep)}
.wpg-thumb:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.wpg-gallery-dots span{transition:none}}
@media(max-width:780px){.wpg-gallery-stage{max-height:none}.wpg-gallery-arrow{width:44px;height:44px}.wpg-thumb{width:56px;height:70px}}

/* Product title: never breaks inside a word (D13). 12 letters must fit one line at every width. */
.product-hero .product-details h1{font-size:clamp(1.9rem,9.2vw,3.4rem);overflow-wrap:normal;word-break:normal;hyphens:manual;line-height:1.05}
@media(min-width:781px){.product-hero .product-details h1{font-size:clamp(2.3rem,3.6vw,3.4rem)}}
.wpg-variant-title{margin:10px 0 2px;font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.25;color:var(--deep)}
.wpg-variant-meta{margin:0 0 6px;font-size:.84rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.product-hero .product-details .product-intro{font-size:1.02rem;margin:16px 0}

/* Description + product details (live-site copy) */
.wpg-about-formulation .wpg-lead{margin-top:18px;max-width:68ch;color:var(--muted);font-size:1.1rem;line-height:1.7}
.wpg-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,64px);margin:36px 0 0;padding:0}
.wpg-specs div{display:grid;grid-template-columns:minmax(120px,.7fr) 1.3fr;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.wpg-specs dt{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wpg-specs dd{margin:0;overflow-wrap:anywhere}
.wpg-detail-link{display:inline-block;margin-top:6px;font-weight:700;color:var(--deep)}
.wpg-detail .ingredient-declaration{color:var(--muted)}
.wpg-variant-note{font-size:.85rem;color:var(--muted);margin-top:10px}
@media(max-width:780px){.wpg-specs{grid-template-columns:1fr}.wpg-specs div{grid-template-columns:1fr 1.4fr}}

/* Articles + How to use: long reference links must wrap (D20) */
.split-copy,.howto-answer,.faq-list p{min-width:0}
.split-copy a,.split-copy li,.howto-answer a,.faq-list a{overflow-wrap:anywhere}
.split-copy ul{padding-left:1.2rem}

/* How to use page */
.howto-steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.howto-steps-media{border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.howto-steps-media img{width:100%;height:auto}
.howto-steps ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:14px}
.howto-steps li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:1.05rem}
.howto-steps li::before{content:counter(step);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--deep);color:var(--surface);font-weight:800}
.howto-closing{margin-top:18px;font-family:var(--display);font-size:1.35rem;color:var(--deep)}
.howto-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.howto-product{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,32px);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.howto-product h3{font-size:1.6rem}
.howto-product p{color:var(--muted)}
.howto-product .text-link{margin-top:auto;align-self:flex-start}
.howto-lather{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.howto-lather figure{margin:0}
.howto-lather img{width:100%;height:auto;border-radius:var(--radius-sm)}
.howto-lather figcaption{margin-top:8px;font-size:.85rem;color:var(--muted)}
.howto-faq details{border-top:1px solid var(--border)}
.howto-faq details:last-child{border-bottom:1px solid var(--border)}
.howto-faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;padding-right:42px;font-weight:700;position:relative}
.howto-faq summary::-webkit-details-marker{display:none}
.howto-faq summary::after{content:'+';position:absolute;right:4px;font-size:1.5rem;font-weight:400}
.howto-faq details[open] summary::after{content:'\2212'}
.howto-faq details p{color:var(--muted);padding:0 40px 22px 0;max-width:68ch}
@media(max-width:780px){.howto-steps{grid-template-columns:1fr}.howto-products{grid-template-columns:1fr}.howto-lather{grid-template-columns:1fr 1fr}}

/* Long article titles: smaller on phones so the first screen shows more than the heading */
@media(max-width:780px){[data-od-id="guidance-article-hero"] h1{font-size:clamp(1.9rem,8vw,3.2rem);line-height:1.1}.page-hero.plain>div{min-height:0}}
/* Tablets: the photo column is full width here, keep it from filling the whole screen */
@media(min-width:600px) and (max-width:1000px){.wpg-gallery-stage{max-height:600px}}

/* Integration (6 Oct 2026): the label on the dark "Explore the formulation" band was the accent green on deep green (2.03:1); use the light text colour like the paragraph under it */
.wpg-role-copy .eyebrow{color:var(--bg)}
/* Small pills on the "Explore SHUDDHY" cards: never under 12 px */
.product-card .facts span{font-size:.75rem}

/* ═══ Layout round 2 (6 Oct 2026, from Vibhor's phone check) ═══ */
/* Buy box: Add To Cart first (primary), Share second (secondary), 12 px between them.
   The quantity control is compact and left-aligned: 44 px tap targets, the number centred between - and +. */
.wpg-quantity{display:block}
.wpg-buy-actions{display:flex;flex-direction:column;gap:12px;margin:16px 0 0}
.wpg-buy-actions .button.wide{margin:0}
.wpg-buy-actions .wpg-share{margin:0}
.wpg-buy-actions .wpg-share button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px}

/* Sticky "Add To Cart" bar: pinned to the true bottom of the screen (position:fixed, no vh offsets),
   solid background, safe-area aware. The script shows it only once the main Add To Cart button has scrolled
   away and hides it again when the pre-footer or footer comes into view. Without the script it stays hidden. */
.wpg-sticky-add{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:60;width:auto;max-width:none;min-height:0;margin:0;
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  padding-inline:max(12px,calc((100vw - var(--shell)) / 2),env(safe-area-inset-left));
  border:0;border-top:1px solid var(--border);border-radius:0;background:var(--surface);opacity:1;
  box-shadow:0 -10px 24px -14px color-mix(in srgb,var(--deep) 40%,transparent);
  transform:translateY(100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.wpg-sticky-add.is-visible{transform:none;visibility:visible;transition-delay:0s}
.no-js .wpg-sticky-add{display:none}
.wpg-sticky-add img{width:48px;height:48px;object-fit:contain;border-radius:12px;background:var(--bg)}
.wpg-sticky-add strong{min-width:0;font-family:var(--display);font-size:1.05rem;font-weight:400;line-height:1.2}
.wpg-sticky-add .button{min-height:48px;padding-inline:16px}
/* Pages with the bar keep room under their last content (the footer is padded by the bar's height). */
.product-page .site-footer{padding-bottom:calc(30px + 76px + env(safe-area-inset-bottom))}
/* The "added to your cart" toast must not sit on top of the bar. */
.product-page .toast,.product-page .widget-toast{bottom:calc(88px + env(safe-area-inset-bottom))}
/* Phones turned sideways: the bar would take a fifth of the screen, and the main button is one swipe away. */
@media(max-height:520px){.wpg-sticky-add{display:none}}
@media(prefers-reduced-motion:reduce){.wpg-sticky-add{transition:none}}
@media(max-width:430px){.wpg-sticky-add{grid-template-columns:42px minmax(0,1fr) auto;gap:10px}.wpg-sticky-add img{width:42px;height:48px}.wpg-sticky-add .button{padding-inline:14px}}

/* Reading-progress bar on the guide pages: flush under the header (no 6 px gap where text showed through),
   solid full-width strip instead of a floating pill. */
.wpg-reading-progress{top:72px;border:0;border-radius:0;background:var(--bg)}
.wpg-reading-progress::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--bg);border-bottom:1px solid var(--border);pointer-events:none}
@media(max-width:780px){.wpg-reading-progress{top:68px}}


/* layout round 3 (6 Oct): wrapped accordion titles keep their top/bottom space; less dead space under the buy box on phones */
.wpg-detail summary{padding:14px 0}
@media(max-width:780px){.section.compact.wpg-details-grid{padding-top:8px}.product-hero{padding-bottom:24px}}

/* ===== B-scroll spacing (J1, 9 Oct 2026) =====
   Vibhor's recording 10:20 / 10:57: uneven spacing on the single product page. Before: the gap between the main blocks was
   32, 112, 144, 144, 144, 108 px on a phone and 141-170 px on desktop, because every section stacked its own padding
   (70/72/100 px top and bottom) on its neighbour's. Now ONE scale: --pgap is the visible gap between two blocks.
   Each section gives half above and half below; the dark ingredient panel (it IS a coloured box) gets the half as outer margin instead
   of inner padding; the last block before the final call-to-action gets the full gap. Content is not changed. */
body.product-page { --pgap: 64px; }
@media (max-width: 900px) { body.product-page { --pgap: 52px; } }
@media (max-width: 600px) { body.product-page { --pgap: 40px; } }
body.product-page main > section:not(.product-hero):not(.wpg-role) { padding-top: calc(var(--pgap) / 2) !important; padding-bottom: calc(var(--pgap) / 2) !important; }
body.product-page main > section.product-hero { padding-bottom: calc(var(--pgap) / 2) !important; }
body.product-page main > section.wpg-role { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: calc(var(--pgap) / 2) !important; margin-bottom: calc(var(--pgap) / 2) !important; }
body.product-page main > section:last-of-type:not(.wpg-role) { padding-bottom: var(--pgap) !important; }
body.product-page main > section:last-of-type.wpg-role { margin-bottom: var(--pgap) !important; }
body.product-page .contact-cta { margin-top: 0; }
/* ===== end B-scroll spacing ===== */

/* ===== B-scroll combo card (J1, 9 Oct 2026) =====
   The "Complete ritual / All three for Rs 1,199 / Add the combo" block inside the Explore SHUDDHY cards is styled in
   widgets-home-shop.css, which the product pages do not load, so it ran together as unstyled text
   ("Complete ritualAll three for Rs 1,199The complete ritual..."). Same block, light card version, product pages only. */
.product-page .combo-showcase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--deep); text-align: left; }
.product-page .combo-showcase[hidden] { display: none; }
.product-page .combo-showcase-kicker { grid-column: 1 / -1; font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.product-page .combo-showcase strong { grid-column: 1; font-family: var(--display); font-size: 1.13rem; font-weight: 400; line-height: 1.2; }
.product-page .combo-showcase > span:not(.combo-showcase-kicker) { grid-column: 1; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.product-page .combo-showcase .combo-cta { grid-column: 2; grid-row: 2 / 4; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--deep); color: var(--white); font: 750 .85rem var(--body); cursor: pointer; }
.product-page .combo-showcase .combo-cta:hover, .product-page .combo-showcase .combo-cta:focus-visible { background: var(--deep-hover, var(--deep)); }
@media (max-width: 520px) { .product-page .combo-showcase { grid-template-columns: 1fr; } .product-page .combo-showcase .combo-cta { grid-column: 1; grid-row: auto; width: 100%; margin-top: 6px; } }
/* ===== end B-scroll combo card ===== */

/* ===== PARENT desc-grid odd card (9 Oct 2026) =====
   .wpg-desc-grid is 2 columns on tablet and desktop. KESHRASAYAN and NITYASHUDDHY have 3 cards, so the third sat alone
   on the left with an empty right half. With an odd count the last card now spans both columns. 4 cards (KESHSHUDDHY) unchanged. */
.wpg-desc-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* ===== end PARENT desc-grid odd card ===== */
/* part 2: the spanning block's paragraph is capped at 662px and sat left with an empty right half. Centre it as a 662px column. */
@media (min-width: 781px) { .wpg-desc-grid > :last-child:nth-child(odd) { justify-self: center; width: 100%; max-width: 662px; text-align: center; } }
/* ===== end PARENT desc-grid odd card ===== */

/* ===== "Read next" on guidance articles =====
   Each article used to end with nothing: no next step for the reader, and 30 near-dead-ends for
   a search engine. The block is plain on purpose — a heading and a list of real article titles,
   styled only with the variables this stylesheet already uses, so it inherits the site's colours
   and spacing instead of introducing a new look. */
.guidance-related { border-top: 1px solid var(--border); }
.guidance-related h2 { margin: 0 0 18px; font-family: var(--display); }
.guidance-related-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.guidance-related-list li {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
}
.guidance-related-list a { color: var(--deep); font-weight: 600; text-decoration: none; }
.guidance-related-list a:hover,
.guidance-related-list a:focus-visible { text-decoration: underline; }
.guidance-related-list span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.94rem; }
/* The shared .text-link is cut to min-height:auto at phone widths, which left this link 23px
   tall — under the 36px a thumb needs, and the responsive check failed it on all 30 articles.
   Give it its own tap target rather than changing .text-link, which other pages rely on. */
.guidance-related .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px !important;
  padding: 0 4px;
}
@media (min-width: 781px) {
  /* Same 700px centred column the other article sections use
     (section[data-od-id="guidance-article-hero"] > div and friends), so "Read next" lines up with
     the article text instead of running the full 1286px width beside a 700px column. */
  section[data-od-id="guidance-related"] > div { max-width: 700px; margin-left: auto; margin-right: auto; }
  .guidance-related-list { grid-template-columns: repeat(3, 1fr); }
}
/* ===== end "Read next" ===== */