/* Responsive consistency pass. DESIGN.md values remain authoritative. */
:root {
  --bg: #F7F4EA;
  --surface: #FFFFFF;
  --surface-muted: #EBEFE3;
  --fg: #1D3B2C;
  --muted: oklch(47% .03 150);
  --border: #D8DED2;
  --accent: #76602F;
  --action: #1D3B2C; /* H3 (9 Oct): was #397512, a second green that made contact/checkout/cart buttons differ */
  --deep: #1D3B2C;
  --deep-hover: oklch(from var(--deep) calc(l - .06) c h);
  --cream: var(--bg);
  --white: var(--surface);
  --black: var(--fg);
  --display: Georgia, "Times New Roman", serif;
  --body: Arial, Helvetica, sans-serif;
  --radius: 30px;
  --radius-sm: 18px;
  --shell: min(calc(100% - 80px), 1500px);
  --shadow: 0 18px 50px oklch(20% .03 145 / .12);
}

html { scroll-behavior: smooth; }
body { max-width: 100%; overflow-x: visible; }
body.menu-open,
body.drawer-open { overflow: hidden; }
button, input, textarea, select { font-family: var(--body); }
h1 { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; overflow-wrap: break-word; }
h2 { font-size: clamp(2.25rem, 3.5vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: break-word; }
h3 { overflow-wrap: break-word; }
p { max-width: 65ch; }

.button { min-height: 48px; background: var(--action); border-color: var(--action); color: var(--white); }
.button:hover,
.button:focus-visible { background: var(--deep); border-color: var(--deep); color: var(--white); }
.button-light { background: var(--white); border-color: var(--white); color: var(--deep); }
.button-light:hover,
.button-light:focus-visible { background: var(--surface-muted); border-color: var(--surface-muted); color: var(--deep); }

.site-header { height: 88px; }
.site-header.is-sticky { height: 72px; }
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu a { width: 100%; }
.no-js .menu-button { display: none !important; }
.no-js .mobile-menu { position: static; width: var(--shell); margin: 0 auto 16px; padding: 12px; background: var(--deep); border-radius: var(--radius-sm); }
.no-js .mobile-menu[hidden] { display: block; }
.no-js .mobile-menu > div { display: flex; flex-wrap: wrap; gap: 4px; }
.no-js .mobile-menu a { width: auto; min-height: 44px; padding: 0 14px; border: 0; font: 600 1rem var(--body); }
.no-js .menu-close,
.no-js .menu-contact { display: none; }

.hero { height: min(780px, calc(100svh - 112px)); min-height: 650px; background: var(--deep); }
.hero-content { width: min(58%, 760px); }
.hero h1 { max-width: 12ch; }
.hero-pack { right: 3%; width: min(38vw, 560px); height: 88%; }
.hero-pack img { object-fit: contain; }

/* Removed old unapproved decorative media; content now fills the space. */
.split-section:has(.split-copy:only-child) { grid-template-columns: minmax(0, 780px); justify-content: center; }
.split-section:has(.split-copy:only-child) .split-copy { text-align: center; }
.split-section:has(.split-copy:only-child) .split-copy > p { margin-inline: auto; }
.split-section:has(.split-copy:only-child) .trust-pair { text-align: left; }
.page-hero > div:only-child { grid-column: 1 / -1; max-width: 1040px; }
.shop-hero > div:only-child { padding-right: clamp(50px, 14vw, 220px); }

.product-grid { align-items: stretch; }
.product-card { min-height: 0; }
.product-media { aspect-ratio: 1 / 1.04; }
.product-media img { object-fit: contain; background: var(--bg); padding: 12px; }
.product-card:hover .product-media img { transform: scale(.98); }
.product-details { min-width: 0; }
.product-details h1 { font-size: clamp(2.75rem, 4.5vw, 4.5rem); overflow-wrap: break-word; word-break: normal; }
.product-stage img { object-fit: contain; padding: 28px; }

.ritual-steps-with-images { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ritual-steps-with-images article { display: flex; flex-direction: column; padding: 0 0 28px; border-top: 0; min-width: 0; }
.ritual-steps-with-images article:last-child { border-bottom: 0; }
.ritual-steps-with-images img { order: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); margin: 0 0 20px; }
.ritual-steps-with-images span { order: 1; margin-bottom: 10px; }
.ritual-steps-with-images h3 { order: 2; }
.ritual-steps-with-images p { order: 3; }

input, textarea, select { min-height: 48px; max-width: 100%; }
textarea { min-height: 140px; resize: vertical; }
.contact-grid h2 { word-break: normal; overflow-wrap: anywhere; }
.checkout-layout { min-width: 0; }
.checkout-layout > * { min-width: 0; }
.checkout-line > div,
.cart-line > div { min-width: 0; }
.cart-line h3,
.checkout-line h3 { overflow-wrap: anywhere; }
.cart-drawer { max-width: calc(100vw - 24px); }
.drawer-foot { background: var(--bg); }
.drawer-foot .button { min-height: 48px; }

.site-footer nav a,
.site-footer address a { min-height: 44px; display: flex; align-items: center; }
.concern-card > a,
.product-copy h3 a,
.contact-grid article > a,
.contact-grid h2 a,
.empty-cart a,
.checkout-note a,
.order-summary > a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-brand { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer address span { overflow-wrap: anywhere; }

@media (max-width: 1120px) {
  :root { --shell: min(calc(100% - 48px), 1500px); }
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-capsule, .phone { display: none; }
  .menu-button { display: grid; }
  .hero-content { width: min(62%, 650px); }
  .hero-pack { width: min(44vw, 480px); right: 0; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 9px); width: 100%; justify-self: center; }
  .product-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr); gap: 40px; }
  .product-stage { height: 560px; }
  .product-details h1 { font-size: clamp(2.7rem, 5.8vw, 4rem); }
  .ritual { grid-template-columns: 1fr; gap: 40px; }
  .ritual-head { position: static; }
  .ritual-steps-with-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --shell: calc(100% - 48px); --radius: 24px; }
  body { font-size: 16px; }
  h1 { font-size: clamp(2.875rem, 8.5vw, 4.25rem); line-height: .98; letter-spacing: -.025em; }
  h2 { font-size: clamp(2rem, 7vw, 3rem); }
  .site-header { height: 72px; }
  .site-header.is-sticky { height: 68px; }
  .brand { width: 128px; }
  .shop-now { display: none; }
  .mobile-menu { padding: 82px 24px 24px; }
  .mobile-menu a { min-height: 56px; font-size: 1.75rem; }
  .hero { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr; padding: 24px; gap: 16px; }
  .hero-pack { position: static; width: 100%; height: auto; order: 1; }
  .hero-pack img { height: min(48svh, 440px); object-fit: contain; }
  .hero-content { position: static; width: 100%; transform: none; order: 2; padding: 12px 8px 20px; }
  .hero h1 { max-width: 12ch; font-size: clamp(3.25rem, 9vw, 4.5rem); }
  .hero-content > p:not(.eyebrow) { max-width: 45ch; }
  .split-section { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .concern-track { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .concern-card { min-height: 250px; }
  .product-grid,
  .product-grid.two { grid-template-columns: 1fr; }
  .product-grid > :last-child:nth-child(odd) { grid-column: auto; max-width: none; }
  .product-card { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); }
  .product-media { height: 100%; min-height: 360px; aspect-ratio: auto; }
  .product-media img { padding: 18px; }
  .card-actions { align-items: stretch; }
  .card-actions .text-link { display: inline-flex; min-height: 44px; }
  .page-hero,
  .page-hero.plain { min-height: 420px; }
  .page-hero > div,
  .page-hero.plain > div { min-height: 420px; padding: 48px; }
  .shop-hero > div:only-child { padding-right: 48px; }
  .product-hero { grid-template-columns: 1fr; gap: 40px; padding: 24px 0 72px; }
  .product-stage { height: min(56svh, 520px); min-height: 430px; }
  .product-details { max-width: none; padding: 0; }
  .product-details h1 { font-size: clamp(3rem, 9vw, 4.5rem); }
  .inline-steps { grid-template-columns: 1fr; }
  .ritual { padding: 72px 24px; }
  .ritual-steps-with-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 260px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid article:last-child { grid-column: auto; }
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 32px); }
  h1 { font-size: clamp(2.875rem, 13vw, 3.65rem); }
  h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .brand { width: 112px; }
  .header-actions { gap: 4px; }
  .hero { padding: 16px; }
  .hero-pack img { height: 310px; }
  .hero-content { padding: 4px 4px 20px; }
  .hero h1 { font-size: clamp(2.875rem, 13vw, 3.5rem); }
  .split-section { padding: 64px 0 72px; }
  .trust-pair div + div { padding-left: 20px; }
  .concern-card { padding: 28px; }
  .product-card { grid-template-columns: 1fr; }
  .product-media { min-height: 0; aspect-ratio: 1 / 1; }
  .product-copy { padding: 24px; }
  .card-actions { flex-direction: column; gap: 8px; }
  .card-actions .button,
  .card-actions .text-link { width: 100%; justify-content: center; }
  .page-hero,
  .page-hero.plain { min-height: 360px; }
  .page-hero > div,
  .page-hero.plain > div { min-height: 360px; padding: 40px 24px; }
  .shop-hero > div:only-child { padding-right: 24px; }
  .product-stage { height: 410px; min-height: 0; }
  .product-stage img { padding: 18px; }
  .product-details h1 { font-size: clamp(2.35rem, 11vw, 3.15rem); }
  .product-facts strong { font-size: 1.75rem; }
  .ritual { padding: 64px 16px; }
  .ritual-steps-with-images { grid-template-columns: 1fr; gap: 28px; }
  .ritual-steps-with-images img { aspect-ratio: 4 / 3; }
  .contact-cta { padding: 36px 24px; }
  .contact-cta .button { width: 100%; }
  .contact-grid article { min-height: 200px; padding: 28px; }
  .guide-card { min-height: 240px; padding: 28px; }
  .guide-card h2 { font-size: clamp(1.8rem, 9vw, 2.45rem); }
  .checkout-line { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; }
  .checkout-line img { width: 82px; height: 96px; }
  .checkout-line .remove-item { grid-column: 2; justify-self: start; }
  .order-summary { padding: 24px; }
  .order-summary > p { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cart-drawer { width: calc(100vw - 12px); height: calc(100dvh - 12px); margin: 6px; border-radius: 24px; }
  .cart-items { padding: 16px; }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr); }
  .cart-line img { width: 64px; height: 76px; }
  .cart-line button { grid-column: 2; justify-self: start; }
  .site-footer { grid-template-columns: 1fr; padding: 48px 16px 24px; }
  .site-footer nav,
  .site-footer address { grid-column: 1; }
  .toast { max-width: calc(100vw - 32px); width: max-content; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== GLOBAL FIXES (lane FE-3, 6 Oct 2026) ===== */
/* Why this block exists: review defects D04 D10 D11 D12 D15 D16 D19 and the footer layout.
   It sits at the end of this file, which every page loads after site.css. Lane stylesheets load
   later still, so the selectors below are specific enough to win where it matters. */

/* D11: no sideways scroll. The stray "0" badge was position:absolute and its [hidden] was ignored. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.cart-count[hidden] { display: none !important; }

/* Sticky header: mixing with "transparent" in oklch turned the bar pink. Mix in srgb instead. */
.site-header.is-sticky { background: color-mix(in srgb, var(--cream) 92%, transparent); }

/* D19: at phone width the logo sat under the Shop Now button. The home page already hides it. */
@media (max-width: 780px) { .site-header .header-actions .shop-now { display: none !important; } }
.site-header .brand { min-width: 96px; }

/* Footer: .site-footer was still a three column grid, squeezing the real footer into one column. */
footer.site-footer { display: block; }
footer.site-footer .footer-col nav a { min-height: 44px; }
footer.site-footer .footer-tagline,
footer.site-footer .footer-bottom small { color: color-mix(in srgb, var(--surface) 78%, transparent); }
body:has(.widget-home-dock) footer.site-footer { padding-bottom: 120px; }

/* D15: the "Need help choosing?" label was the same colour as its band. */
.contact-cta .eyebrow { color: var(--white); }

/* D16: 16px fields stop the iPhone zooming in when a field is tapped. */
input, select, textarea { font-size: max(16px, 1em); }

/* D12: the bottom dock (Shop SHUDDHY | Your Cart) is styled the same on every page that has it. */
.widget-home-dock { position: fixed; left: 50%; bottom: 12px; z-index: 41; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(calc(100% - 24px), 620px); padding: 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); transform: translateX(-50%); }
.widget-home-dock a, .widget-home-dock button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.widget-home-dock a:first-child { background: var(--deep); color: var(--surface); }
.widget-home-dock button { background: transparent; color: var(--deep); }
.widget-home-dock .cart-count { position: static; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: .72rem; }
@media (max-width: 430px) {
  .widget-home-dock { bottom: 8px; }
  .widget-home-dock a, .widget-home-dock button { padding-inline: 10px; font-size: .88rem; }
}

/* D10: cart drawer. Header and footer stay pinned; the middle (items, combo offer) scrolls.
   The combo offer used to push Subtotal and "Review your cart" off the bottom. */
.cart-drawer[open] { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.cart-drawer .drawer-head { flex: none; position: sticky; top: 0; z-index: 2; background: var(--cream); }
.cart-drawer .cart-items { flex: 1 0 auto; height: auto; overflow: visible; }
.cart-drawer .combo-widget { flex: none; margin: 0 16px 12px !important; padding: 12px 14px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: var(--surface) !important; }
.cart-drawer .combo-widget p { margin: 0 0 10px !important; max-width: none; font-size: .85rem !important; line-height: 1.4; }
.cart-drawer .combo-widget .combo-cta { min-height: 44px; padding: 0 12px !important; font-size: .85rem !important; background: var(--deep); border-color: var(--deep); color: var(--white); }
.cart-drawer .combo-widget .combo-cta:hover, .cart-drawer .combo-widget .combo-cta:focus-visible { background: var(--action); border-color: var(--action); color: var(--white); }
.cart-drawer .drawer-foot { flex: none; position: sticky; bottom: 0; z-index: 2; margin-top: auto; }

/* D26: no text under 12px (labels, CALL caption, cart badge). */
.eyebrow { font-size: .8rem; }
.phone span { font-size: .75rem; }
.cart-count, .widget-home-dock .cart-count { font-size: .75rem; }

/* D15: on dark bands, "muted" copy must stay readable. */
.site-footer, .page-hero, .hero, .ritual, .contact-cta, .mobile-menu { --muted: color-mix(in srgb, var(--surface) 80%, transparent); }

/* N03 (QA 6 Oct): phone held sideways (short screens). The fixed bars used 262 of 390 px and hid the page.
   Header, filter chips and the bottom cart dock scroll away with the page; the cart stays one tap away in the header. */
@media (max-height: 500px) and (orientation: landscape) {
  body .site-header.is-sticky { position: relative !important; top: auto !important; }
  body .widget-shop-tools { position: static !important; }
  body .widget-home-dock { display: none !important; }
  body:has(.widget-home-dock) footer.site-footer { padding-bottom: 0 !important; }
}

/* ===== Layout round 2 (6 Oct 2026, from Vibhor's phone check) ===== */
/* Header: a solid cream bar. Nothing shows through it, it is not a floating pill, and anchored
   sections stop below it instead of starting underneath it. */
html { scroll-padding-top: 84px; }
body .site-header::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--cream); pointer-events: none; }
body .site-header.is-sticky { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
body .site-header.is-sticky::before { border-bottom: 1px solid var(--border); box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--deep) 45%, transparent); }
/* The cart and menu round buttons sat 4 px apart on phones, so a thumb could hit the wrong one. */
.header-actions { gap: 10px; }


/* B3 2026-10-07 (Ravi request 5): header cart / menu icons centred in TRUE circles at every width.
   Measured before: at 1280px the header cart button was squeezed to 40x48 (an oval), so the icon sat off-centre in
   its "circle". Fix: never shrink, fixed square box, no browser padding, icon centred by flex. */
.site-header .icon-button,
.mobile-menu .icon-button,
.cart-drawer .icon-button {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .menu-button { display: none; }
@media (max-width: 1120px) { .site-header .menu-button { display: inline-flex; } } /* same breakpoint as the menu rule above */
.no-js .site-header .menu-button { display: none !important; }
.site-header .icon-button svg { display: block; flex: none; margin: 0; }

/* ===== hidden attribute, global (7 Oct 2026, parity with live) =====
   No author-level [hidden] rule existed, so .button{display:inline-flex} won over
   the browser default and every .button carrying a hidden attribute stayed visible
   (what Ravi reported on the quiz, call 18:45). The attribute is doubled to reach
   specificity 0,2,0 so it outranks widgets-home-shop.css's
   .button{display:inline-flex !important} regardless of stylesheet order.
   The no-JS mobile-menu fallback is restored explicitly below. */
[hidden][hidden] { display: none !important; }
.no-js .mobile-menu[hidden][hidden] { display: block !important; }

/* ===== H2: cart drawer opens from the LEFT (Vibhor, 9 Oct recording, 09:10) =====
   site.css sets `margin: 12px 12px 12px auto`, which pins the dialog to the right
   edge. Mirroring the auto margin moves it to the left. The full-width phone rule
   (margin: 6px) is unaffected, so nothing changes below the mobile breakpoint. */
.cart-drawer { margin: 12px auto 12px 12px !important; }
@media (max-width: 640px) { .cart-drawer { margin: 6px !important; } }

/* ===== D1-D6: guidance + how-to cards (Vibhor, 9 Oct recording 03:52-06:17) =====
   Cards = image + tag + short title + short description + link, readable type, even spacing.
   Desktop 3 columns, tablet 2, phone 1. Body copy never below 16px. */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.guide-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 0; overflow: hidden;
  background: var(--surface, #fff); border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: var(--radius, 18px); }
.guide-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream, #f6f3e8); }
.guide-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.guide-card:hover .guide-card-media img { transform: scale(1.04); }
.guide-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 22px 24px; }
.guide-card .guide-card-tag { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent, #8a6a2f); }
.guide-card h2 { margin: 0; max-width: none; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-card h2 a { color: inherit; text-decoration: none; }
.guide-card h2 a:hover, .guide-card h2 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.guide-card-body > p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg, #1f2a24); opacity: .86;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.guide-card .guide-card-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; font-size: .95rem; color: var(--deep, #1f3b2d); text-decoration: none; }
.guide-card .guide-card-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 180ms ease; }
.guide-card .guide-card-link:hover svg, .guide-card .guide-card-link:focus-visible svg { transform: translateX(4px); }
.guide-card:hover { transform: translateY(-4px); }
/* D1 share button: inside the content column, right-aligned, proper tap size and spacing */
.wpg-guide-share { display: flex; justify-content: flex-end; padding-top: 0; padding-bottom: 8px; }
.wpg-guide-share .button { min-height: 44px; padding-inline: 22px; }
@media (max-width: 1023px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; gap: 18px; }
  .guide-card-body { padding: 18px 18px 20px; }
  .wpg-guide-share { justify-content: stretch; }
  .wpg-guide-share .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .guide-card, .guide-card-media img, .guide-card .guide-card-link svg { transition: none; } .guide-card:hover { transform: none; } }
/* D6 how-to product cards: same spacing and type scale */
.howto-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.howto-product { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: var(--radius, 18px); }
.howto-product h3 { margin: 0; }
.howto-product p { margin: 0; font-size: 1rem; line-height: 1.6; }
.howto-product .text-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1023px) { .howto-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .howto-products { grid-template-columns: 1fr; gap: 18px; } .howto-product { padding: 20px; } }

/* ===== TAP TARGETS: standalone links (responsive sweep 9 Oct: 15 page-views failed) =====
   widgets-product-guidance.css sets `.text-link { min-height: auto !important }`, which cancels every
   tap-size rule. Standalone links (cards, steps, chooser fallback) get a real 44px target; inline links
   inside running text are left alone. The breadcrumb gets 36px and gives back the space it used to leave
   below it so the page does not jump. */
.howto-product a.text-link, .choose-fallback a.text-link, .card-actions a.text-link, .section-heading a.text-link {
  min-height: 44px !important; display: inline-flex !important; align-items: center; }
.breadcrumb { margin-bottom: 0; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }

/* combo button tap size (sweep 9 Oct): the product-page stylesheet shrinks buttons */
.combo-showcase .combo-cta, .combo-widget .combo-cta { min-height: 44px !important; padding-inline: 18px; }

/* ===== F3 contact alignment (Vibhor recording 07:54) ===== */
.contact-top-grid { align-items: stretch; }
.contact-merged-card { height: 100%; }
.whatsapp-action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.whatsapp-action-row .button { min-height: 48px; }
.contact-channel-item h2 { overflow-wrap: anywhere; }
/* combo button: grey on product pages because that sheet restyles <button>; give it the brand look everywhere */
.combo-showcase .combo-cta { background: var(--surface, #fff) !important; color: var(--deep, #1D3B2C) !important; border: 0; }
@media (max-width: 640px) { .contact-top-grid { grid-template-columns: 1fr; } .whatsapp-action-row .button { width: 100%; justify-content: center; } }

/* ===== H1/H4 phone menu + dock (Vibhor recording 09:01 and 10:04) =====
   H4: the close button was absolutely positioned over the first menu item. It now sits in normal flow, top-right,
       above the list, so nothing can overlap it at any width.
   H1: the cart is no longer a menu item (removed from partials/menu.html); the header cart icon is the cart.
   Dock: the floating "Shop SHUDDHY | Your Cart" bar covered page content on desktop and tablet; it is kept on phones only,
       with room reserved at the bottom of the page so it never hides the footer. */
html:not(.no-js) .mobile-menu { position: fixed; inset: 0; width: auto; margin: 0; border-radius: 0; display: flex; flex-direction: column;
  padding: 16px 24px 28px; overflow-y: auto; }
html:not(.no-js) .mobile-menu[hidden] { display: none; }
html:not(.no-js) .mobile-menu .menu-close { position: static; align-self: flex-end; flex: none; margin: 0 0 12px; }
html:not(.no-js) .mobile-menu > div { display: grid; }
html:not(.no-js) .mobile-menu a { width: 100%; padding: 0; min-height: 56px; font-size: 1.75rem; }
@media (min-width: 768px) { .widget-home-dock { display: none !important; } }
@media (max-width: 767px) { body { padding-bottom: 88px; } }

/* ===== POST CONTENT (editor): what Ravi can put in an article, styled for phone, tablet and desktop ===== */
.split-copy .post-video, .split-copy .post-figure { margin: 28px 0; }
.post-video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--radius-sm, 12px); background: #000; }
.post-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm, 12px); }
.post-video figcaption, .post-figure figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.5; opacity: .75; }
.split-copy blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--accent, #76602F); font-size: 1.15rem; line-height: 1.6; font-style: italic; }
.split-copy hr { border: 0; border-top: 1px solid var(--border, #D8DED2); margin: 32px 0; }
.split-copy ol, .split-copy ul { padding-left: 1.4em; }
.split-copy li { margin: .35em 0; line-height: 1.6; }
.post-table { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.post-table table { border-collapse: collapse; min-width: 480px; width: 100%; }
.post-table th, .post-table td { border: 1px solid var(--border, #D8DED2); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-table th { background: var(--surface-muted, #EBEFE3); }
.split-copy img, .split-copy iframe { max-width: 100%; }

/* pictures and videos in an article: readable width on big screens, full width on phones */
.split-copy .post-video, .split-copy .post-figure { max-width: 880px; margin-inline: auto; }

/* ===== J4 ingredient chips (recording 11:51): all ingredient names on the green panel, no picture ===== */
.wpg-role-names { grid-template-columns: 1fr; }
.wpg-role-names .wpg-role-copy { padding: clamp(26px, 5vw, 64px); }
.wpg-ingredient-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; }
.wpg-ingredient-chips li { margin: 0; padding: 9px 16px; border: 1px solid color-mix(in oklch, var(--white) 38%, transparent); border-radius: 999px;
  background: color-mix(in oklch, var(--white) 10%, transparent); color: var(--white); font-size: .95rem; line-height: 1.3; font-weight: 600; }
@media (max-width: 640px) { .wpg-ingredient-chips { gap: 8px; } .wpg-ingredient-chips li { padding: 8px 13px; font-size: .9rem; } }

/* ===== TEAM A-CAROUSEL (9 Oct 2026): shop filter pills = auto-sliding infinite carousel when they overflow ===== */
/* One line at every width (tablets used to wrap); assets/pill-carousel.js adds the drift + clones only when the pills do not fit. */
.widget-filter-bar .widget-chip-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:5px 3px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.widget-filter-bar .widget-chip-row::-webkit-scrollbar{display:none;width:0;height:0}
.widget-filter-bar .widget-chip-row>a{flex:0 0 auto}
.widget-filter-bar .widget-chip-row>a.pill-clone{user-select:none;-webkit-user-select:none}
@media (prefers-reduced-motion: reduce){.widget-filter-bar .widget-chip-row{scroll-behavior:auto}}
/* ===== end TEAM A-CAROUSEL ===== */

/* ===== TEAM A-CAROUSEL part 2: widgets-home-shop.css loads after this file, so the pill rules need one more class to win ===== */
.widget-shop-tools .widget-filter-bar .widget-chip-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:5px 3px;scrollbar-width:none;-ms-overflow-style:none}
.widget-shop-tools .widget-filter-bar .widget-chip-row>a{flex:0 0 auto}
/* ===== end TEAM A-CAROUSEL part 2 ===== */

/* ===== TEAM A-CAROUSEL part 3: the extra 2px of vertical padding (room for the focus ring) is cancelled so the sticky bar keeps its old height ===== */
.widget-shop-tools .widget-filter-bar .widget-chip-row{margin-block:-2px}
/* ===== end TEAM A-CAROUSEL part 3 ===== */

/* ===== B-scroll header (9 Oct 2026, team B) =====
   Vibhor's recording 00:16: the header flickered on phones at one scroll point.
   Cause: .is-sticky was added at 110 px and switched the header from relative to sticky AND from 72 to 68 px tall (88 to 72 on desktop).
   The 4 px layout shift made scroll anchoring pull scrollY back under 110, so the class came off, the page grew, scrollY went back over 110 ...
   (the class flipped every frame between 107 and 114 px).
   Fix: the header is sticky from the first pixel and the SAME height in both states, so toggling .is-sticky (now only border + shadow) cannot move the page.
   72 px desktop and 68 px phone are the heights the sticky shop filter bar and the reading-progress bar already assume (top:72px / 68px). */
body .site-header, body .site-header.is-sticky { position: sticky; top: 0; height: 72px; }
@media (max-width: 780px) { body .site-header, body .site-header.is-sticky { height: 68px; } }
@media (max-height: 500px) and (orientation: landscape) { body .site-header, body .site-header.is-sticky { position: relative !important; top: auto !important; } }
/* ===== end B-scroll header ===== */

/* ===== PARENT shop-grid tablet fix (9 Oct): widgets-home-shop.css forces 3 columns above 780px with !important,
   while the site-wide rule centres a lone last card. Result at 781-1120px: two narrow cards plus a stranded third.
   Same 2-up + centred third as the 601-780 layout, for the shop grid only. */
@media (min-width: 781px) and (max-width: 1120px) {
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .shop-product-grid > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; width: 100%; max-width: calc(50% - 12px) !important; justify-self: center; }
}

/* ===== PARENT shop-grid tablet fix, part 2: first block lost on load order (widgets-home-shop.css loads later with equal !important). Higher specificity wins. */
@media (min-width: 781px) and (max-width: 1120px) {
  .product-grid.shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .product-grid.shop-product-grid > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; width: 100%; max-width: calc(50% - 12px) !important; justify-self: center; }
}

/* ===== F1-VISUAL-A (9 Oct): home + shop product card pictures fill the card width.
   Before: padding 12-18px inset the photo so its edges did not line up with the white panel below. ===== */
body.has-home-widget-dock .products-section .product-card .product-media img,
body.has-shop-widget-dock .shop-product-grid .product-card .product-media img { padding: 0 !important; }
/* ===== /F1-VISUAL-A ===== */

/* ===== F1-VISUAL-B (9 Oct): footer on home, shop, contact, checkout, 404, how-to.
   (1) a short second rule drawn inside the full-width rule above the copyright line.
   (2) a cream strip under the dark footer on phone: body padding 88px on top of the footer's own bottom space. ===== */
:is(body.has-home-widget-dock, body.has-shop-widget-dock, body.contact-widgets-page, body.checkout-widgets-page, body.notfound-page) footer.site-footer .footer-bottom small { border-top: 0; padding-top: 0; }
@media (max-width: 767px) {
  :is(body.has-home-widget-dock, body.has-shop-widget-dock, body.contact-widgets-page, body.checkout-widgets-page, body.notfound-page) { padding-bottom: 0; }
  :is(body.has-home-widget-dock, body.has-shop-widget-dock, body.contact-widgets-page, body.checkout-widgets-page, body.notfound-page) footer.site-footer { padding-bottom: 120px; }
}
/* ===== /F1-VISUAL-B ===== */

/* ===== F1-VISUAL-C (9 Oct): help-me-choose + home quiz: a one-line answer sat at the top of its card with empty space below. Centre radio and text. ===== */
body.has-home-widget-dock .choose-options label { align-items: center; }
body.has-home-widget-dock .choose-options input { margin: 0; }
/* ===== /F1-VISUAL-C ===== */

/* ===== F1-VISUAL-D (9 Oct): contact page. Radio sat above its label and the third product pill was stranded alone;
   "Send a message" touched the paragraph under it. ===== */
body.contact-widgets-page .product-help-options label { flex-direction: row; }
body.contact-widgets-page .product-help-options input { flex: 0 0 20px; margin: 0; }
body.contact-widgets-page .contact-form-intro h2 { margin-bottom: 16px; }
@media (max-width: 767px) {
  body.contact-widgets-page .product-help-options { flex-direction: column; flex-wrap: nowrap; }
  body.contact-widgets-page .product-help-options label { width: 100%; }
}
/* ===== /F1-VISUAL-D ===== */

/* ===== F2-VISUAL block A (product pages, 9 Oct) - scoped to body.product-page ===== */
/* A1 variant sub-title: no single orphan word on the last line */
body.product-page .wpg-variant-title { text-wrap: balance; }
/* A2 "Explore SHUDDHY" pack photos: fill the card width so photo edges line up with the white panel below */
body.product-page .more-products .product-card .product-media img { padding: 0 !important; }
/* A3 the buttons of the two related cards sit on the same line (the combo box exists in one card only) */
body.product-page .more-products .product-card .card-actions { margin-top: 0 !important; }
@media (min-width: 781px) {
  /* A4 desktop/tablet: both related cards fit side by side instead of the 2nd being cut off at 980px */
  body.product-page .more-products .product-grid.two { max-width: none; }
  body.product-page .more-products .product-grid.two .product-card { flex: 1 1 0 !important; }
  /* A5 closed accordions stay header-height instead of stretching to the open one */
  body.product-page .wpg-details-grid { align-items: start; }
}
/* A6 star rating: one tidy row on wide screens, one tidy column on phones (no 4+1 / 3+2 ragged wrap) */
body.product-page .shuddhy-reviews .sr-rating { flex-wrap: nowrap; gap: .4rem .6rem; }
body.product-page .shuddhy-reviews .sr-star { gap: .25rem; accent-color: var(--deep); }
@media (max-width: 600px) {
  body.product-page .shuddhy-reviews .sr-rating { flex-direction: column; gap: 0; }
}
/* A7 phone: reading text at 14px minimum */
@media (max-width: 780px) {
  body.product-page .breadcrumb { font-size: .875rem; }
  body.product-page .wpg-variant-meta { font-size: .875rem; }
  body.product-page .fine, body.product-page .text-xs { font-size: .875rem; }
  body.product-page .shuddhy-reviews .sr-note { font-size: .875rem; }
  body.product-page .price s { font-size: .875rem; }
  body.product-page .combo-showcase > span:not(.combo-showcase-kicker) { font-size: .875rem; }
}
/* ===== end F2-VISUAL block A ===== */

/* ===== F1-VISUAL-D2 (9 Oct): contact pills: another rule made the label a grid and the radio 100% wide. ===== */
body.contact-widgets-page .product-help-options label { display: flex; }
body.contact-widgets-page .product-help-options input { width: 20px; min-width: 20px; height: 20px; }
/* ===== /F1-VISUAL-D2 ===== */

/* ===== F2-VISUAL block B (tablet card label alignment) ===== */
@media (min-width: 781px) and (max-width: 1100px) {
  body.product-page .more-products .product-concern { min-height: 2.8em; }
}
/* ===== end F2-VISUAL block B ===== */

/* ===== F2-VISUAL block B2 (label height = two full lines) ===== */
@media (min-width: 781px) and (max-width: 1100px) {
  body.product-page .more-products .product-concern { min-height: 2.12rem; min-height: 39px; }
}
/* ===== end F2-VISUAL block B2 ===== */

/* ===== F2-VISUAL block C (guidance article pages: heading size and spacing) ===== */
/* Scope: only the four DB-rendered article sections (data-od-id guidance-article-*). */
/* C1 headings were 39px (bigger than the 31px page title) and sat flush against the paragraph above (0px gap). */
section[data-od-id^="guidance-article-"] h2 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); line-height: 1.2; margin: 44px 0 14px; text-wrap: balance; }
section[data-od-id^="guidance-article-"] .split-copy > :first-child,
section[data-od-id^="guidance-article-"] .section-heading h2 { margin-top: 0; }
section[data-od-id^="guidance-article-"] h3 { margin: 32px 0 10px; }
section[data-od-id^="guidance-article-"] .split-copy > p { margin-top: 0; margin-bottom: 18px; }
section[data-od-id^="guidance-article-"] .split-copy > p + ul,
section[data-od-id^="guidance-article-"] .split-copy > h2 + p { margin-top: 0; }
@media (min-width: 781px) {
  section[data-od-id^="guidance-article-"] h2 { font-size: clamp(1.9rem, 2.6vw, 2.3rem); margin: 56px 0 16px; }
  section[data-od-id^="guidance-article-"] .split-copy > p { margin-bottom: 20px; }
}
/* ===== end F2-VISUAL block C ===== */

/* ===== F2-VISUAL block C2 (guidance article pages: gap between sections 144px -> about 80px phone) ===== */
section[data-od-id="guidance-article-body"],
section[data-od-id="guidance-article-faq"],
section[data-od-id="guidance-article-tail"] { padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 781px) {
  section[data-od-id="guidance-article-body"],
  section[data-od-id="guidance-article-faq"],
  section[data-od-id="guidance-article-tail"] { padding-top: 44px; padding-bottom: 44px; }
}
/* ===== end F2-VISUAL block C2 ===== */

/* ===== F2-VISUAL block D (policy pages: phone number must not split across two lines) ===== */
body.policy-page a[href^="tel:"] { white-space: nowrap; }
/* ===== end F2-VISUAL block D ===== */

/* ===== F2-VISUAL block E (article headings: avoid a lone last word without squeezing the line) ===== */
section[data-od-id^="guidance-article-"] h2 { text-wrap: pretty; }
/* ===== end F2-VISUAL block E ===== */

/* ===== PARENT footer everywhere (9 Oct 2026): F1 fixed the footer on five page types only. The footer is one shared partial, so the same two
   defects were on the other ten pages (product pages, Guidance index and articles, How to use, four policy pages), measured at 390px:
   (1) a short second rule drawn inside the full-width rule above the copyright line;
   (2) an 88px cream strip under the dark footer (body padding kept for the floating Shop/Cart dock, which these pages do not have). ===== */
footer.site-footer .footer-bottom small { border-top: 0; padding-top: 0; }
@media (max-width: 767px) {
  html body:not(.has-home-widget-dock):not(.has-shop-widget-dock):not(.contact-widgets-page):not(.checkout-widgets-page):not(.notfound-page) { padding-bottom: 0; }
}
/* ===== /PARENT footer everywhere ===== */

/* ===== PARENT guidance (9 Oct 2026), from team F2's open list, each re-measured first =====
   INDEX: (1) the two accordion boxes had no space under their last line (text touched the border);
          (2) 72px + 72px section padding left ~140px empty bands between the chips, the boxes and the Share button;
          (3) the reading-progress bar ("Start ... Guide complete") sat under the hero with nothing to read: hidden on the index only
              (the markup stays; articles keep their own bar).
   ARTICLES (tablet + desktop): hero heading started at x=149 while the body text hugged the card edge at x=40 in a 616px column.
          Hero text and body now share ONE centred 700px column, so the left edges line up. Phones are unchanged. */
main > .wpg-articles details { padding-bottom: 22px; }
main:has(> .wpg-articles) > .wpg-reading-progress { display: none; }
main > .wpg-topics { padding-bottom: 20px; }
main > .wpg-articles { padding-top: 12px; padding-bottom: 12px; }
main > .wpg-guide-share { padding-top: 20px; }
@media (min-width: 781px) {
  section[data-od-id="guidance-article-hero"] > div { max-width: 700px; margin-left: auto; margin-right: auto; }
  section[data-od-id^="guidance-article-"]:not([data-od-id="guidance-article-hero"]) .split-copy,
  section[data-od-id="guidance-article-tail"] > div { max-width: 700px; margin-left: auto; margin-right: auto; }
  section[data-od-id^="guidance-article-"] .split-copy > p,
  section[data-od-id^="guidance-article-"] .split-copy > ul,
  section[data-od-id^="guidance-article-"] .split-copy > ol { max-width: none; }
}
/* ===== /PARENT guidance ===== */

/* ===== PARENT guidance part 2: the hero's inner box carries its own 1040px cap and 109px side padding; make it the same 700px column as the body ===== */
@media (min-width: 781px) {
  section.page-hero[data-od-id="guidance-article-hero"] > div { width: 100%; max-width: 700px; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
}
/* ===== /PARENT guidance part 2 ===== */

/* ===== PARENT explore row (9 Oct 2026), from team F2's list =====
   (1) the "All three for Rs 1,199" offer sat inside the FIRST card only, so one card was taller than the other (~170px blank under the
       second). It now sits once, centred under both cards (same element, same script hook, moved in the three product pages).
   (2) phones: the row swipes, but the second card started past the right edge so nothing said it existed. Cards are 56px narrower so
       about 38px of the next one peeks. ===== */
body.product-page .more-products .combo-showcase { max-width: 520px; margin: 22px auto 0; }
@media (max-width: 600px) {
  body.product-page .more-products .product-grid.two .product-card { flex-basis: calc(100% - 56px); }
}
/* ===== /PARENT explore row ===== */

/* ===== PARENT cycle 18 (9 Oct 2026), from Vibhor's screenshots =====
   CART DRAWER: "Remove" was cut off at the right edge and the drawer scrolled sideways, because the row was
   [picture | text | Remove] in a space too narrow for all three, and there was no way to change the quantity.
   Now each row is [picture | name, size, price] with a second line [ - 1 + ] and Remove under it. Nothing is wider than the drawer.
   REVIEWS: the whole block hugged the left edge; it is now one centred column. ===== */
.cart-drawer[open] { overflow-x: hidden; }
.cart-drawer .cart-items { overflow-x: hidden; }
.cart-drawer .cart-line { --thumb: 72px; grid-template-columns: var(--thumb) minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
.cart-drawer .cart-line img { grid-row: 1 / span 2; width: var(--thumb); height: var(--thumb); object-fit: contain; }
.cart-drawer .cart-line-info { grid-column: 2; min-width: 0; }
.cart-drawer .cart-line-info h3 { margin: 0 0 2px; overflow-wrap: anywhere; }
.cart-drawer .cart-line-info p { margin: 0 0 2px; }
.cart-drawer .cart-line-controls { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cart-drawer .cart-line .cart-qty { display: inline-grid; grid-template-columns: 40px minmax(28px, auto) 40px; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.cart-drawer .cart-line .cart-qty button { grid-column: auto; justify-self: stretch; width: 40px; height: 40px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); font-size: 1.15rem; line-height: 1; text-decoration: none; cursor: pointer; }
.cart-drawer .cart-line .cart-qty button:hover, .cart-drawer .cart-line .cart-qty button:focus-visible { background: var(--bg); }
.cart-drawer .cart-line .cart-qty button:disabled { opacity: .4; cursor: not-allowed; }
.cart-drawer .cart-line .cart-qty output { text-align: center; font-weight: 750; min-width: 28px; }
.cart-drawer .cart-line .remove-item { grid-column: auto; justify-self: auto; width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 0 4px; white-space: nowrap; }
@media (max-width: 640px) { .cart-drawer .cart-line { --thumb: 64px; } }

section.shuddhy-reviews { grid-template-columns: minmax(0, 640px); justify-content: center; text-align: center; }
section.shuddhy-reviews .sr-form { max-width: none; width: 100%; text-align: left; }
section.shuddhy-reviews .sr-form h3, section.shuddhy-reviews .sr-form .sr-note { text-align: center; }
section.shuddhy-reviews .sr-rating { justify-content: center; }
section.shuddhy-reviews .sr-rating legend { text-align: center; }
section.shuddhy-reviews .sr-list, section.shuddhy-reviews .sr-item { text-align: left; }
/* ===== /PARENT cycle 18 ===== */

/* ===== CYCLE18-V1 (9 Oct 2026) - home page + shared storefront polish. Every rule is scoped to body.has-home-widget-dock (home) ===== */
/* V1-1 "3 hair washes | 100 g each pack": sat hard-left under a centred heading and paragraph. Centre both stats. */
body.has-home-widget-dock .split-section:has(.split-copy:only-child) .trust-pair { text-align: center; }
body.has-home-widget-dock .trust-pair div { align-items: center; text-align: center; }
body.has-home-widget-dock .trust-pair div + div { padding-left: 0; }
/* V1-2 concern cards: the icon had margin-bottom:auto, so the one-line card ("Daily care") put its heading lower than its two neighbours. Fixed gap instead; the link stays at the bottom. */
body.has-home-widget-dock .concern-card > svg { margin-bottom: 20px; }
body.has-home-widget-dock .concern-card p { margin-bottom: 18px; }
/* V1-3 quiz on the home page: one centred column, like the "Why SHUDDHY" block under it (it hugged the left edge with 560 px empty on the right). */
body.has-home-widget-dock #choose .choose-quiz,
body.has-home-widget-dock #choose .choose-result { margin-inline: auto; }
body.has-home-widget-dock #choose .choose-step > .eyebrow,
body.has-home-widget-dock #choose .choose-step > h2,
body.has-home-widget-dock #choose .choose-result { text-align: center; }
body.has-home-widget-dock #choose .choose-step > h2 { max-width: none; margin-inline: auto; text-wrap: balance; }
body.has-home-widget-dock #choose .choose-actions { justify-content: center; }
body.has-home-widget-dock #choose .choose-actions .fine { flex: 1 1 100%; text-align: center; order: 3; }
body.has-home-widget-dock #choose .choose-result > p { margin-inline: auto; }
body.has-home-widget-dock #choose .choose-result .card-actions { justify-content: center; }
body.has-home-widget-dock #choose .choose-result .fine { text-align: center; }
/* ===== /CYCLE18-V1 ===== */

/* CYCLE18-V1 (part 2): quiz buttons stacked and centred, hint line under them */
body.has-home-widget-dock #choose .choose-actions { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; }
body.has-home-widget-dock #choose .choose-actions .fine { flex: 0 0 auto; width: 100%; margin: 0; }
@media (max-width: 780px) { body.has-home-widget-dock #choose .choose-actions .button { width: 100%; } }
/* ===== /CYCLE18-V1 part 2 ===== */

/* ===== CYCLE18-V2 (contact form) ===== */
/* The reply-note under "Send Message" touched the button (0px gap at every width). */
#contact-form .form-submit-row{display:grid;justify-items:start;gap:14px}
#contact-form .form-submit-row .contact-status{margin:0}
/* ===== /CYCLE18-V2 ===== */

/* ===== CYCLE18-V3 (9 Oct 2026) - Guidance index + 30 articles. Scoped to the guidance sections only. =====
   (1) ARTICLES >= 781px: the FAQ block was a 2-column box spanning the full page (heading hugging the left edge at x=24/40, list from x=372/620)
       while hero + body + closing band sit in one centred 700px column. FAQ now joins the same column (heading above, list under it).
   (2) INDEX phones: the 3 topic chips were a sideways-scroll row and the third chip ("Shipping & returns") was cut off at the right edge.
       They now wrap onto a second line instead.
   (3) INDEX desktop >= 1100px: the three "Continue reading" cards were fixed 390px wide and hugged the left, leaving 80-400px of dead space at
       the right. They now share the row equally. Tablets keep the swipe row.
   (4) INDEX: the "See the full How to use page" link was a 26px-high tap target; now 44px. */
@media (min-width: 781px) {
  section.faq[data-od-id="guidance-article-faq"] { max-width: 700px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  section.faq[data-od-id="guidance-article-faq"] .section-heading, section.faq[data-od-id="guidance-article-faq"] .faq-list { width: 100%; }
}
@media (max-width: 780px) {
  .wpg-topics nav { flex-wrap: wrap; overflow-x: visible; }
}
@media (min-width: 1100px) {
  .wpg-related-guides > div > a { flex: 1 1 0; min-width: 0; }
}
.wpg-articles .wpg-detail-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
/* ===== /CYCLE18-V3 ===== */

/* ===== CYCLE18-V3 part 2: tighten the FAQ heading-to-list gap now that the heading sits above the list (was 48px margin + 20px gap + 16px) ===== */
@media (min-width: 781px) {
  section.faq[data-od-id="guidance-article-faq"] .section-heading { margin-bottom: 0; }
}
/* ===== /CYCLE18-V3 part 2 ===== */

/* ===== CYCLE18-V2 (contact help-center card) ===== */
/* The card is a space-between flex column that stretches to the height of its neighbour, so "Here to help" was pushed ~60px
   away from its "HELP CENTER" label (the left card keeps label and heading together); and the link list sat in only the
   first half of a two-column grid, so its divider lines stopped halfway across the card. */
.contact-widget-card.contact-merged-card:has(.policy-shortcuts){justify-content:flex-start}
.contact-widget-card.contact-merged-card .policy-shortcuts{grid-template-columns:minmax(0,1fr)}
.contact-widget-card.contact-merged-card .policy-links-list{grid-template-columns:minmax(0,1fr);gap:0}
/* ===== /CYCLE18-V2 ===== */

/* CYCLE18-V1 (part 3): home product cards, three across (1201-1547 px): the tagline wraps to two lines on some cards and one on others, so the pills, price and
   Add To Cart sat 21 px higher on one card. Reserve two lines for every tagline in that width range. */
@media (min-width: 1201px) and (max-width: 1547px) {
  body.has-home-widget-dock .product-grid .product-tagline { min-height: 3.1em; min-height: 2lh; }
}
/* ===== /CYCLE18-V1 part 3 ===== */

/* ===== CYCLE18-V3 part 3: (3) above lost the cascade to widgets-product-guidance.css (loaded later, same specificity) - raise specificity ===== */
@media (min-width: 1100px) {
  main > .wpg-related-guides > div > a { flex: 1 1 0; min-width: 0; }
}
/* ===== /CYCLE18-V3 part 3 ===== */

/* ===== CYCLE18-V2 (how-to lather photos) ===== */
/* The two photos are 514x514 and 514x494, so the pair sat uneven with captions on different lines. Same square for both. */
.howto-lather figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* ===== /CYCLE18-V2 ===== */

/* CYCLE18-V1 (part 4): same tagline fix on /shop (three cards across, 1201-1547 px) */
@media (min-width: 1201px) and (max-width: 1547px) {
  body.has-shop-widget-dock .product-grid .product-tagline { min-height: 3.1em; min-height: 2lh; }
}
/* ===== /CYCLE18-V1 part 4 ===== */

/* CYCLE18-V1 (part 5): /shop quiz = same quiz as the home page. Answer cards had the text at the top and the radio dot below it; block hugged the left. Same fixes as home. */
body.has-shop-widget-dock .choose-options label { align-items: center; }
body.has-shop-widget-dock .choose-options input { margin: 0; }
body.has-shop-widget-dock #choose .choose-quiz,
body.has-shop-widget-dock #choose .choose-result { margin-inline: auto; }
body.has-shop-widget-dock #choose .choose-step > .eyebrow,
body.has-shop-widget-dock #choose .choose-step > h2,
body.has-shop-widget-dock #choose .choose-result { text-align: center; }
body.has-shop-widget-dock #choose .choose-step > h2 { max-width: none; margin-inline: auto; text-wrap: balance; }
body.has-shop-widget-dock #choose .choose-actions { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; justify-content: center; }
body.has-shop-widget-dock #choose .choose-actions .fine { flex: 0 0 auto; width: 100%; margin: 0; text-align: center; order: 3; }
body.has-shop-widget-dock #choose .choose-result > p { margin-inline: auto; }
body.has-shop-widget-dock #choose .choose-result .card-actions { justify-content: center; }
body.has-shop-widget-dock #choose .choose-result .fine { text-align: center; }
@media (max-width: 780px) { body.has-shop-widget-dock #choose .choose-actions .button { width: 100%; } }
/* ===== /CYCLE18-V1 part 5 ===== */

/* ===== CYCLE18-V2 (cart drawer: combo button + quantity buttons) ===== */
/* "Add the combo" in the drawer was a square, browser-default-bordered, Arial button (the 2px outset border and 0 radius showed);
   the drawer + and - were 40px. Same pill as the checkout page combo button; 44px quantity buttons. */
dialog.cart-drawer .combo-widget .combo-cta{border:1px solid var(--deep);border-radius:999px;font:700 .9rem/1 var(--body,inherit)!important;padding:0 20px!important;cursor:pointer}
dialog.cart-drawer .combo-widget .combo-cta:hover,dialog.cart-drawer .combo-widget .combo-cta:focus-visible{border-color:var(--action,var(--deep))}
dialog.cart-drawer [data-quantity-delta]{min-width:44px;min-height:44px;font-family:inherit}
/* ===== /CYCLE18-V2 ===== */

/* CYCLE18-V1 (part 6): the "Question n of 3" / "Your match" label has a max-width, so its centred text sat left of centre. Centre the label box itself. */
:is(body.has-home-widget-dock, body.has-shop-widget-dock) #choose .choose-step > .eyebrow,
:is(body.has-home-widget-dock, body.has-shop-widget-dock) #choose .choose-result > .eyebrow { margin-inline: auto; max-width: 100%; }
/* ===== /CYCLE18-V1 part 6 ===== */

/* ===== CYCLE18-V3 part 4: tablets too - at 781-1099px the third "Continue reading" card ran off the right edge (cut mid-word, "Shipping a"). Three equal cards fit from 781px up; phones keep the swipe row. ===== */
@media (min-width: 781px) and (max-width: 1099px) {
  main > .wpg-related-guides > div > a { flex: 1 1 0; min-width: 0; padding: 20px; font-size: 1.35rem; }
}
/* ===== /CYCLE18-V3 part 4 ===== */

/* CYCLE18-V1 (part 7): cart drawer - and the - + buttons were 40 px wide; make them 44 px (tap target) */
.cart-drawer .cart-line .cart-qty { grid-template-columns: 44px minmax(28px, auto) 44px; }
.cart-drawer .cart-line .cart-qty button { width: 44px; height: 44px; }
/* ===== /CYCLE18-V1 part 7 ===== */

/* ===== CYCLE18-V1b part 1: product pages. (a) opened Ingredients / How to use / Shipping cards had no bottom padding: last line touched the card edge (gap 1px);
   (b) the "See the full How to use page" link inside was 25px tall; (c) breadcrumb "Shop" link was 35x36px. ===== */
body.product-page .wpg-detail[open] { padding-bottom: 20px; }
body.product-page .wpg-detail .wpg-detail-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
body.product-page .breadcrumb a { min-height: 44px; min-width: 44px; justify-content: flex-start; }
/* ===== /CYCLE18-V1b part 1 ===== */

/* ===== CYCLE18-V1b part 2: the "X added to your cart" toast (bottom 22px) sat on top of the bottom bars while it shows (2.6 s):
   shop = the "Subtotal / Review your cart" bar (118px tall under 640px, 66px from 640px, 12px off the bottom edge);
   home + contact on phones (up to 780px) = the Shop/Cart dock (64px tall, 8-12px off the bottom). Lift the toast above them. Product pages already lift it (88px). ===== */
body.has-shop-widget-dock .toast { bottom: 148px; }
@media (min-width: 640px) { body.has-shop-widget-dock .toast { bottom: 96px; } }
@media (max-width: 780px) { :is(body.has-home-widget-dock, body.contact-widgets-page) .toast { bottom: 96px; } }
/* ===== /CYCLE18-V1b part 2 ===== */

/* ===== CYCLE18-V1b part 3: phone/tablet menu - the page you are on (aria-current="page") looked identical to the other four links.
   Mark it with a small cream dot after the word and a brighter rule under it. ===== */
html:not(.no-js) .mobile-menu a[aria-current="page"] { justify-content: flex-start; gap: 14px; border-bottom-color: color-mix(in srgb, var(--surface) 70%, transparent); }
html:not(.no-js) .mobile-menu a[aria-current="page"]::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); }
/* ===== /CYCLE18-V1b part 3 ===== */

/* ===== CYCLE18-V1b part 4: footer bottom space. Home and Contact kept 120px of empty dark green under the copyright line on tablets/desktops (room for the phone Shop/Cart dock,
   which is hidden from 781px up) while every other page has 30px. Same footer everywhere from 781px up. Shop keeps its space (the Subtotal bar shows there when the cart has items). ===== */
@media (min-width: 781px) {
  :is(body.has-home-widget-dock, body.contact-widgets-page) footer.site-footer { padding-bottom: 30px; }
}
/* ===== /CYCLE18-V1b part 4 ===== */

/* ===== CYCLE18-V1b part 5: the Shop/Cart dock is hidden from 768px (measured), not 781px: align parts 2 and 4 to 768px. ===== */
@media (min-width: 768px) {
  :is(body.has-home-widget-dock, body.contact-widgets-page) footer.site-footer { padding-bottom: 30px; }
  :is(body.has-home-widget-dock, body.contact-widgets-page) .toast { bottom: 22px; }
}
/* ===== /CYCLE18-V1b part 5 ===== */