@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,650;9..144,700&family=Mukta:wght@400;500;600;700;800&display=swap');

/* ===== original merchant CSS (live_backup/vinner-healthcare-live.css), unchanged ===== */
.sh-header-main {
    background-color: #ffffff ;
    color: #ffffff ;
}
.sh-header-location-icon {
    fill: #68a33c ;
}
.sh-header-account-icon {
    stroke: #68a33c ;
}
.sh-header-cart-icon {
    stroke: #68a33c ;
    fill: none 
}
.sh-header-arrow-icon {
    fill: #68a33c ;
}
.sh-header-search-icon {
    stroke:#68a33c ;
}
.sh-header-cart-badge {
    background-color: #68a33c ;
    color: #FFFFFF ;
}
.sh-bottom-nav-main {
    background-color: #f5f5f5 ;
    color: #68a33c ;
}
.sh-bottom-nav-selected {
    stroke: #68a33c ;
    color: #68a33c ;
    fill: none ;
}
.sh-bottom-nav-unselected {
    stroke: #4a4a4a ;
    color: #4a4a4a ;
}
.sh-bottom-nav-cart-badge {
    background-color: #68a33c ;
    color: #FFFFFF ;
}
.sh-product-wishlist-desktop {
    border-color: #68a33c ;
}
.sh-product-share-icon {
    stroke: #68a33c ;
}
.sh-product-card-price {
    color: #000000 ;
}
.sh-product-card-mrp {
    color: #8e8c93 ;
}
.sh-product-card-name {
    color: #000000 ;
    font-weight: 400 ;
}
.sh-product-card-discount-tag {
    background-color: #68a33c ;
    color: #ffffff ;
    font-weight: 400 ;
    border-radius: 20px ;
    right: 10px ;
    top: 10px ;
    left: auto ;
}
.sh-product-discount-tag {
    background-color: #68a33c ;
    color: #ffffff ;
    font-weight: 400 ;
    border-radius: 50% ;
}
.sh-product-social-button {
    background-color: #68a33c ;
    fill: #ffffff ;
}
.sh-product-wishlisted-icon {
    fill: #68a33c ;
}
.sh-product-not-wishlisted-icon {
    stroke: #690C0C ;
}
.sh-footer-main {
    background-color: #68a33c ;
    color: #ffffff ;
}
.sh-footer-icon {
    color: #000000 ;
}
.sh-outlined-button {
    border-radius: 0px ;
}
.sh-solid-button {
    border-radius: 20px ;
    color: #ffffff ;
    background-color: #68a33c ;
    fill: none ;
    border: 1px solid #68a33c ;
}
.sh-product-plus-minus-button {
    background-color: #ffffff ;
    color: #eb1a23 ;
    border-radius: 20px ;
    fill: #fff9ee ;
    border-color:#eb1a23 ;
   
}
.sh-product-buy-now-button {
    color: #ffffff ;
    background-color: #68a33c ;
    border-radius: 20px ;
}
.sh-categories-container {
    background-color: #ffffff 
}

.sh-product-card-enquiry {
   background-color: #ffffff ;
   color: #68a33c ;
   border: 1px solid #68a33c;
}

.review-card-subtext{
    display: none;
}



#sh-footer-copyright::before {
  content: "Disclaimer: The information on www.vinnerhealthcare.com is for general knowledge only and not a substitute for medical advice. Products and statements are not evaluated by any medical authority and are not intended to diagnose, treat, cure, or prevent any disease. Always consult your doctor before use. Results may vary person to person.";
  display: block;
/*  background-color: #26a269; /* Green background */*/
  color: #ffffff;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 12px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* 📱 Responsive for mobile */
@media (max-width: 768px) {
  #sh-footer-copyright::before {
    font-size: 12px;
    padding: 10px 12px;
  }
}





/* ===== refine-177592.css — Vinner Healthcare look & feel (round 3, easy-checkout "basic")
   Appended after the merchant's original CSS (live_backup/vinner-healthcare-live.css), so later rules win.
   Target values: theme-preview2/preview/vinner-healthcare/preview.css + theme.css. */

/* 1. Palette tokens.
   theme_color stays #29A56C (the theme maps it to a white header and a #0E4B35 footer, styles/theme.js);
   only the button colour moves to #146B43, because white text on #29A56C is 3.1:1 (fails AA) and on #146B43 is 6.5:1.
   Header icons were theme-default black (#000); the cart badge was the light brand green. */
html:root {
  --button-main: #146B43;
  --button-contrast-text: #FFFFFF;
  --button-borderColor: #146B43;
  --header-accent: #1C2B22;
  --header-badge-main: #C2530F;
  --header-badge-contrast-text: #FFFFFF;
  --typography-font-family: "Mukta", system-ui, -apple-system, "Segoe UI", "Noto Sans", Arial, sans-serif;
  --vh-ink: #1C2B22;
  --vh-muted: #5B6B60;
  --vh-line: #E8E1D3;
  --vh-cream: #FBF7EF;
  --vh-dark: #0E3B27;
  --vh-deal: #C2530F;
  --vh-cta: #146B43;
  --vh-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

/* 2. Body text: was pure #000 in Arial; now ink in Mukta (older readers, covers Devanagari). */
.sh-body { color: var(--vh-ink); font-family: var(--typography-font-family); }

/* 3. Desktop menu: was a solid #29A56C bar with white uppercase links; the mock has ink links on white with hairlines. */
.menu-bar.sh-header-menu { background: #fff; border-top: 1px solid var(--vh-line); border-bottom: 1px solid var(--vh-line); }
.menu-bar.sh-header-menu .sh-header-submenu,
.menu-bar.sh-header-menu a.links { color: var(--vh-ink); font-weight: 600; }
.menu-bar.sh-header-menu a.links:hover { color: var(--vh-cta); }

/* 4. Search: square grey box → cream pill, as in the mock. */
.MuiPaper-root:has(> .search-field) { border-radius: 999px; background: var(--vh-cream); border: 1.5px solid var(--vh-line); box-shadow: none; }

/* 5. Header icons: the original CSS made them #68a33c (a different green from the brand); now ink. */
.sh-header-cart-icon { stroke: var(--vh-ink); }
.sh-header-cart-badge { background-color: var(--vh-deal); color: #fff; }

/* 6. Section titles: Arial 24/600 #1A1A1A → Fraunces 650, ink (the mock's serif echoes the pack lettering). */
.sh-section-heading .section-heading { font-family: var(--vh-serif); font-weight: 650; letter-spacing: -.01em; color: var(--vh-ink); }

/* 7. Buttons by role. Banner "Shop Now" was theme-default black; card ADD TO CART / ORDER NOW were red #EB1A23 outlines
   (original rule .sh-product-plus-minus-button); PDP Buy Now was #68a33c. */
.ban-cont-button.universal-btn-style { background-color: var(--button-main); color: #fff; border-color: var(--button-main); }
.sh-product-plus-minus-button { color: var(--vh-cta); border-color: var(--vh-cta); background-color: #fff; }
.sh-product-buy-now-button { background-color: var(--button-main); border-color: var(--button-main); color: #fff; }
.sh-solid-button { background-color: var(--button-main); border-color: var(--button-main); }

/* 8. Product card text and tags: #000 name/price → ink; discount tag #68a33c → saffron deal colour (from the logo's leaves). */
.sh-product-card-name { color: var(--vh-ink); font-weight: 600; }
.sh-product-card-price { color: var(--vh-ink); }
.sh-product-card-mrp { color: var(--vh-muted); }
.sh-product-card-discount-tag { background-color: var(--vh-deal); color: #fff; font-weight: 700; border-radius: 6px; }
.sh-product-discount-tag { background-color: var(--vh-deal); color: #fff; font-weight: 700; border-radius: 6px; }

/* 9. Product-page icons: share/wishlist were #68a33c, the not-wishlisted heart maroon #690C0C. */
.sh-product-share-icon { stroke: var(--vh-cta); }
.sh-product-wishlisted-icon { fill: var(--vh-cta); }
.sh-product-not-wishlisted-icon { stroke: var(--vh-ink); }
.sh-product-wishlist-desktop { border-color: var(--vh-line); }
.sh-product-social-button { background-color: var(--vh-cta); }

/* 10. Footer: on this theme it is the light three-column footer (#F7F6F4; the theme's own rule beats .sh-footer-main,
   so the original #68a33c never applied). The dark forest footer of the mock is a later round (footer).
   The merchant's disclaimer (original CSS, #sh-footer-copyright::before) is kept; it was white-ish on the light footer
   because a broken comment in the original swallowed its colour. Muted ink reads at ~5:1. */
#sh-footer-copyright::before { color: var(--vh-muted); }

/* 11. Fonts that skipped the site font: MUI buttons (Consultation Now, pincode Check) were Roboto,
   the Trusted Badges plugin sets Noto Sans on its wrapper. */
.MuiButtonBase-root.MuiButton-root,
.shoopy-trusted-badges-wrapper,
.shoopy-trusted-badge-label { font-family: var(--typography-font-family); }

/* 12. Phone bottom nav: the active label was white on #f5f5f5 (invisible), the active icon #68a33c (original CSS),
   inactive labels #bbb (~1.9:1). Active = deep green, inactive = muted ink. */
.sh-bottom-nav-main .bottom-nav__buttons.sh-bottom-nav-selected,
.sh-bottom-nav-main svg.sh-bottom-nav-selected { color: var(--vh-cta); stroke: var(--vh-cta); }
.sh-bottom-nav-main .bottom-nav__buttons.sh-bottom-nav-selected .MuiBottomNavigationAction-label { color: var(--vh-cta); font-weight: 600; }
.sh-bottom-nav-main .bottom-nav__buttons.sh-bottom-nav-unselected,
.sh-bottom-nav-main .bottom-nav__buttons.sh-bottom-nav-unselected .MuiBottomNavigationAction-label { color: var(--vh-muted); }

/* 13. One content column on home (round 5): the header and categories sit in a 1280px column, but the banner+products
   collection row and the "Products" grid ran edge to edge (x=20), under the fixed "Refer & Earn" tab (x 0–44). */
.sh-generic-collection-card,
.sh-home-page-prod-section,
.sh-prod-grid-collection-card { max-width: 1280px; margin-left: auto; margin-right: auto; } /* product rows added round 7 (Bestsellers) */

/* 14. Footer (round 12): the theme's light three-column footer (#F7F6F4) → the mock's forest #0E3B27. Needs footer element + class to beat the theme rule
   (a plain .sh-footer-main lost). Phone + WhatsApp numbers carry an ID rule (.sh-footer-main #sh-footer-git-mobile p) = bold #1A1A1A, so they get their own.
   Contrast on #0E3B27: links #DCE8E0 10:1, headings #fff 12.5:1, copyright #9FB6A8 5.8:1, disclaimer #B9CCC0 7.4:1. Contact icons gold as in the mock. */
footer.three-col-footer__footer.sh-footer-main { background-color: #0E3B27; color: #DCE8E0; }
footer.sh-footer-main .three-col-footer__heading { color: #FFFFFF; }
footer.sh-footer-main .three-col-footer__link,
footer.sh-footer-main .vertical-soc-cont a,
footer.sh-footer-main a { color: #DCE8E0; }
footer.sh-footer-main .three-col-footer__link:hover,
footer.sh-footer-main .vertical-soc-cont a:hover { color: #FFFFFF; }
footer.sh-footer-main #sh-footer-git-mobile p,
footer.sh-footer-main #sh-footer-git-whatsapp p { color: #FFFFFF; }
footer.sh-footer-main .sh-footer-icon { color: #F2C14E; fill: #F2C14E; }
footer.sh-footer-main .three-col-footer__rights { color: #9FB6A8; }
footer.sh-footer-main #sh-footer-copyright::before { color: #B9CCC0; }
footer.sh-footer-main hr { border-color: rgba(255,255,255,.14); }

/* 15. Phone "Refer & Earn" tab (round 13, home only): a fixed 44×188px vertical tab at the left edge (inline left:-72px; rotate(90deg))
   covered the first 44px of every section on phones. Under 769px it becomes a horizontal pill bottom-left, centred on the WhatsApp bubble
   (bubble 64px at bottom 76px) and 25px above the 59px bottom nav. Desktop keeps the side tab (content column starts at 103px). */
@media (max-width: 768px) {
  .ref-widg .root-ctn { left: 12px !important; top: auto !important; bottom: 88px !important; width: auto !important; transform: none !important; height: 40px; padding: 6px 14px; gap: 6px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  .ref-widg .root-ctn img { transform: none !important; width: 22px; height: 22px; }
}

/* 16. Leftover theme-default #000 text and off-brand fonts found in the round-15 audit:
   home category tile titles, listing/category "All Products" heading + filter labels, the account pop-up labels,
   and the WhatsApp chat window (plugin) in Roboto. The theme's single-class #000 rules load after this file,
   so each selector carries one extra element/class to win the tie. Listing heading takes the section-title serif. */
h3.cat-card-title,
p.filter-sheet-title,
p.category-filter-subtitle,
p.filter-subtitle,
p.price-filter-subtitle,
body .account-popup .ac-popup-label { color: var(--vh-ink); }
h1.products-prod-head { color: var(--vh-ink); font-family: var(--vh-serif); font-weight: 650; letter-spacing: -.01em; }
#cb12_window_wrapper, #cb12_window_wrapper * { font-family: var(--typography-font-family); }

/* 17. Product-card button (round 21): the mock has one full-width solid "Add to cart". product_card_settings.show_buynow_cta=false
   removed the card's ORDER NOW; this makes the remaining add button solid deep green. The in-cart stepper (.pr-plus-minus-button,
   same sh- class) is not a .pr-outlined-button, so it keeps the green outline from §7. */
.pr-long-card button.pr-outlined-button.sh-product-plus-minus-button { flex: 1 1 100%; width: 100%; min-height: 42px; background-color: var(--button-main); border-color: var(--button-main); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; }
.pr-long-card button.pr-outlined-button.sh-product-plus-minus-button:hover { background-color: #0F5A37; border-color: #0F5A37; }

/* 18. PDP trust badges (round 24): Trusted Badges plugin in custom-HTML mode (payloads/trusted-badges.html, html_edited=true), so its own <style> is gone and
   layout lives here. Was COD Available (false for the 90-day pack) / Satisfaction Guaranteed (unverified) / Secure Checkout (generic) / Free Shipping;
   now three claims true for every product. Icons brand green on a pale tint, like the trust strip. */
.shoopy-trusted-badges-wrapper { margin: 8px 0; padding: 0; }
.shoopy-trusted-badges-list { display: grid; gap: 12px 16px; list-style: none; margin: 0; padding: 0; align-items: start; }
.shoopy-trusted-badges-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shoopy-trusted-badge-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shoopy-trusted-badges-wrapper .shoopy-trusted-badge-icon { width: 40px; height: 40px; border-radius: 50%; background: #EAF5EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shoopy-trusted-badge-icon svg.vh-stroke { width: 20px; height: 20px; display: block; fill: none; stroke: var(--vh-cta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shoopy-trusted-badge-label b { display: block; font-size: 13.5px; font-weight: 700; color: var(--vh-ink); line-height: 1.25; }
.shoopy-trusted-badge-label small { display: block; font-size: 12px; font-weight: 500; color: var(--vh-muted); line-height: 1.3; margin-top: 2px; }
@media (max-width: 600px) {
  .shoopy-trusted-badges-list--three { gap: 10px 8px; }
  .shoopy-trusted-badge-item { flex-direction: column; text-align: center; gap: 6px; }
  .shoopy-trusted-badge-label b { font-size: 12.5px; }
  .shoopy-trusted-badge-label small { font-size: 11px; }
}

/* 19. PDP product name on phones (round 24): the 200-character merchant name wrapped ~10 lines at the theme size and pushed price + packs below the fold.
   Smaller on phones only; the real fix is a shorter product name (merchant). */
@media (max-width: 768px) {
  h1.product-component-name { font-size: 18px; line-height: 1.3; }
}

/* 20. Header WhatsApp like the mock (round 25). Desktop: the existing wa.me icon (+91 91529 12953) moves before account/cart; at 1280px+ it gets an
   "Ask an expert" label (the link has inline display:block;width/height:27px, hence !important). Phone: one row (menu, logo, WhatsApp) instead of
   the icon on its own line; .title-ctn holds only the hidden h1 + punchline. */
@media (min-width: 769px) {
  .app-bar:not(.mobile-app-bar) .flex.items-center > div:has(> a[href*="wa.me"]) { order: -1; margin-left: 0; margin-right: 12px; padding-bottom: 0; }
}
@media (min-width: 1280px) {
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"] { display: inline-flex !important; width: auto !important; height: auto !important; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; color: #0B5D2E; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; }
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"]:hover { background: #EAF5EE; }
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"] svg { width: 24px; height: 24px; }
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"]::after { content: "Ask an expert"; white-space: nowrap; }
}
@media (max-width: 768px) {
  .mobile-app-bar .logo-ctn .title-ctn { display: none; }
  .mobile-app-bar .MuiToolbar-root { flex-wrap: nowrap; align-items: center; }
  .mobile-app-bar .MuiToolbar-root > .flex-ctn-align-center:last-child { margin-left: auto; }
  .mobile-app-bar a[href*="wa.me"] svg { width: 28px; height: 28px; }
}

/* 21. Combo PDP: hide the "22-Day Starter Pack" chip (round 26, user: "remove it"). Its product SKU-0030 is deleted but stays in the Combo's variant
   list (backend keeps it; can't be removed via API) and choosing it gives "Resource not found". Only the Combo has a chip with this title
   (the Capsules starter pack's chips say "22 Days Pack"). Remove this rule once Shoopy drops SKU-0030 from the Combo. */
.sh-variant-values-list > div:has(> button.sh-variant-chip[title^="22-Day Starter Pack"]) { display: none !important; }

/* 22. Search pill icon inset (round 27): the icon wrapper (MuiIcon, width 1em, overflow hidden) swallowed its 16px left padding, so on phones the
   magnifier sat 2-3px from the pill edge (desktop 9px). Now 18px in on both, 10px before the text. */
.MuiPaper-root:has(> .search-field) > .material-icons { width: auto; height: auto; overflow: visible; flex-shrink: 0; padding: 0 0 0 16px; }
.MuiPaper-root:has(> .search-field) > .material-icons svg { margin-right: 10px; }

/* 23. Footer "Your Heart Health" link (round 29): merchant asked to remove it. It is store page 36055 whose slug is an external swipepages URL;
   store pages have no API delete, so it is hidden here until the merchant deletes the page in the admin (then remove this rule). */
a.sh-footer-link[href*="swipepages.page"] { display: none !important; }

/* ===== Round 34 (12 Nov 2026) — layout like the mock https://shpy-wix.b-cdn.net/vinner-healthcare/index.html
   (preview.css + theme.css of that mock). Appended after the live CSS of 10 Nov (Vinner1794296773106…css), so these rules win.
   Column: the mock's .wrap = 1240px box with 28px gutters (content 1184px) on >=768px, 16px gutters on phones.
   Rhythm: every home block gets 56px top/bottom on desktop, 36px on phones (content-to-content 112 / 72px). */

html:root { --vh-wrap: 1240px; --vh-gut: 16px; --vh-pad: 36px; }
@media (min-width: 768px) { html:root { --vh-gut: 28px; } }
@media (min-width: 1024px) { html:root { --vh-pad: 56px; } }

/* 24. Header, desktop (>768px = theme's desktop header). Mock: notice 14px/500 in a 35px bar; one 76px row with the logo at 42px,
   a centred 520px search pill (44px) and the icons at the right edge of the same 1184px column; a 46px menu row whose links start
   on that column (15.5px/600), with "Track order" pushed to the right in muted ink. Was: 48px notice at 17.8px, 60px logo + punchline,
   search pushed right, centred menu with 16px pads per item. */
header .notice { padding: 0 !important; } /* theme pads the bar 10.5px on phones with a more specific rule */
header .notice .notice-message { padding: 7px 16px; font-size: 14px; font-weight: 500; line-height: 21px; }
@media (min-width: 769px) {
  header .app-bar-main { max-width: var(--vh-wrap); margin: 0 auto; padding: 0 var(--vh-gut); box-sizing: border-box; }
  header .app-bar-main > .MuiToolbar-root { min-height: 76px; height: 76px; padding: 0; gap: 28px; }
  header .app-bar-main .logo-ctn .title-ctn { display: none; }
  header .app-bar-main .logo-ctn img.logo { height: 42px; width: auto; }
  header .app-bar-main .sh-header-searchbar-slot { flex: 1 1 auto; max-width: 520px !important; margin: 0 auto; }
  header .app-bar-main .MuiPaper-root:has(> .search-field) { height: 44px; }
  header .app-bar-main .MuiToolbar-root > .flex.items-center:last-child:not(:first-child) { margin-left: auto; } /* cart page: the logo group is the only child */
  .menu-bar.sh-header-menu .menu-bottom { max-width: var(--vh-wrap) !important; margin: 0 auto; padding: 0 var(--vh-gut); box-sizing: border-box; justify-content: flex-start !important; gap: 28px; min-height: 46px; }
  .menu-bar.sh-header-menu .menu-bottom::before,
  .menu-bar.sh-header-menu .menu-bottom::after { display: none; } /* theme centres the row with empty auto-margin flex items */
  .menu-bar.sh-header-menu .menu-bottom .link-item,
  .menu-bar.sh-header-menu .menu-bottom > a.links { padding-left: 0; padding-right: 0; }
  .menu-bar.sh-header-menu .menu-bottom a.links { font-size: 15.5px; font-weight: 600; color: var(--vh-ink); white-space: nowrap; }
  .menu-bar.sh-header-menu .menu-bottom .updown-arrow { margin-left: 6px; }
  .menu-bar.sh-header-menu .menu-bottom > a.links:last-child { margin-left: auto; color: var(--vh-muted); font-weight: 500; }
}
/* 8 merchant menu items at 15.5px/28px gaps need ~1140px; under 1280px they shrink to 14px/16px (one row at 1024px; the row scrolls
   sideways below that, as the theme's menu already does). The mock swaps to a burger under 1024px; the theme keeps its desktop header to 769px. */
@media (min-width: 769px) and (max-width: 1279px) {
  .menu-bar.sh-header-menu .menu-bottom { gap: 16px; }
  .menu-bar.sh-header-menu .menu-bottom a.links { font-size: 14px; }
  .menu-bar.sh-header-menu .menu-bottom .updown-arrow { margin-left: 4px; }
}

/* 25. Header, phone. Mock: one 64px row with a 34px logo and a 42px search pill under it. Was a 50px logo; the notice wrapped to 2 lines at 13px. */
@media (max-width: 768px) {
  header .notice .notice-message { font-size: 12.5px; line-height: 17px; padding: 6px 12px; }
  .mobile-app-bar .logo-ctn img.logo { height: 34px; width: auto; }
  .mobile-app-bar .MuiPaper-root:has(> .search-field) { height: 42px; }
}

/* 26. One content column for every home block (replaces the 1280px column of §13). Native rows and the category block get the mock's
   1240px box + gutters on >=768px (on phones the theme already pads them 16px); our inline HTML sections (.sx-wrap, 1280px content-box
   + 20px in their own <style>) are brought to the same 1184px column and 16px phone gutter. */
@media (min-width: 768px) {
  .sh-generic-collection-card,
  .sh-home-page-prod-section,
  .sh-prod-grid-collection-card,
  .cat-section.cat-section-boxed { max-width: var(--vh-wrap); margin-left: auto; margin-right: auto; padding-left: var(--vh-gut); padding-right: var(--vh-gut); box-sizing: border-box; }
}
/* Other templates on the same column as the header: listing/category/about/policies use .page-container (was max 1600px + 32px pads,
   content edge to edge), the PDP .product-component-container (was 1200px, 8px wider than the header column each side). */
@media (min-width: 768px) {
  .page-container { max-width: var(--vh-wrap); margin-left: auto; margin-right: auto; padding-left: var(--vh-gut); padding-right: var(--vh-gut); box-sizing: border-box; }
}
@media (min-width: 1240px) { .product-component-container { max-width: 1184px; margin-left: auto; margin-right: auto; } }
html body .sx .sx-wrap { max-width: 1184px; padding-left: var(--vh-gut); padding-right: var(--vh-gut); box-sizing: content-box; }

/* 27. Section rhythm: the same --vh-pad above and below every block. Was 36–110px between blocks: the theme adds 20px under every
   product-row section item, 10px above/below the row swiper, 16/20px margins around each HTML section, and the category tiles' own
   bottom padding (6/10px) sits under the names. */
.cat-section.cat-section-boxed,
.sh-prod-grid-collection-card { padding-top: var(--vh-pad); padding-bottom: var(--vh-pad); margin-top: 0; margin-bottom: 0; }
.cat-section.cat-section-boxed { padding-bottom: calc(var(--vh-pad) - 6px); }
@media (min-width: 768px) { .cat-section.cat-section-boxed { padding-bottom: calc(var(--vh-pad) - 10px); } }
/* both are inline styles on the theme's elements (item: padding 0 20px 20px; swiper: padding 10px 0), hence !important */
.section-item:has(> .sh-prod-grid-collection-card) { padding-bottom: 0 !important; }
@media (min-width: 768px) {
  .section-item:has(> .sh-prod-grid-collection-card),
  .section-item:has(> .cat-section) { padding-left: 0 !important; padding-right: 0 !important; } /* inline 0 20px: added 20px to the gutter under 1280px */
}
.sh-prod-grid-collection-card > .swiper { padding-top: 0 !important; padding-bottom: 2px !important; }
html body section.sx { margin-top: 0; margin-bottom: 0; }
html body .sx-combo .sx-wrap,
html body .sx-course .sx-wrap,
html body .sx-faq .sx-wrap { padding-top: var(--vh-pad); padding-bottom: var(--vh-pad); }

/* 28. Section heads (native rows + categories). Mock: Fraunces 650 36px (27px under 1024px), subtitle 16px muted regular under it,
   "View all →" deep green 15px/700 at the right, bottom-aligned; 26px (18px) to the content. Was 24px (18px phone) titles, a 14–16px
   bold near-black subtitle, a black "View All" (desktop) and a black outlined "View All" button under the row (phone). */
.sh-section-heading.section-heading-container { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; column-gap: 16px; row-gap: 4px; margin: 0 0 18px; }
.sh-section-heading.section-heading-container > a:first-child { grid-column: 1; grid-row: 1; text-decoration: none; }
.sh-section-heading h2.section-heading { margin: 0; font-size: 27px; line-height: 1.15; }
.sh-section-heading p.section-description { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--vh-muted); }
.sh-section-heading a.section-heading-viewall { position: static; grid-column: 2; grid-row: 1 / span 2; align-self: end; display: inline-block !important; color: var(--vh-cta); font-size: 15px; font-weight: 700; line-height: 1.45; text-decoration: none; white-space: nowrap; text-transform: lowercase; }
.sh-section-heading a.section-heading-viewall::first-letter { text-transform: uppercase; }
.sh-section-heading a.section-heading-viewall::after { content: "\00a0\2192"; }
.sh-section-heading a.section-heading-viewall:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-prod-grid-collection-card > .view-all { display: none; }
.cat-section .sh-section-heading.section-heading-container::after { content: "Ayurvedic support for what matters to you"; grid-column: 1; grid-row: 2; font-size: 16px; line-height: 1.45; color: var(--vh-muted); }
@media (min-width: 1024px) {
  .sh-section-heading.section-heading-container { margin-bottom: 26px; }
  .sh-section-heading h2.section-heading { font-size: 36px; }
}

/* 29. Category tiles. Mock: the photo is the tile (square, 18px corners, no frame), 20px gaps (12px on phones), name under it in 16.5px/600 ink
   (15px phones). Was a framed white card (1px border, shadow, 7–10px white image border, 8px corners), 32px gaps, 16px/400 names. */
.cat-section .cat-card.sh-category-card { padding: 6px; }
.cat-section .grid:has(> .cat-card) { margin-left: -6px; margin-right: -6px; }
.cat-section .cat-card-img-container { border: 0; box-shadow: none; border-radius: 18px; overflow: hidden; background: var(--vh-cream); }
.cat-section img.cat-card-img { border: 0 !important; border-radius: 18px; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .2s; }
.cat-section .cat-card a:hover img.cat-card-img { transform: translateY(-3px); }
.cat-section h3.cat-card-title { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--vh-ink); }
@media (min-width: 768px) {
  .cat-section .cat-card.sh-category-card { padding: 10px; }
  .cat-section .grid:has(> .cat-card) { margin-left: -10px; margin-right: -10px; }
  .cat-section h3.cat-card-title { font-size: 16.5px; }
}

/* 30. Product cards in home rows. Mock: 1px #E8E1D3 border, 16px corners, photo edge to edge on cream, 12px body padding.
   Was a 12px-corner card with 8px padding around the photo. */
.sh-prod-grid-collection-card .product-card > .MuiPaper-root { padding: 0; border: 1px solid var(--vh-line); border-radius: 16px; overflow: hidden; box-shadow: none; }
.sh-prod-grid-collection-card .product-card .pr-image-ctn { border-radius: 0; background: var(--vh-cream); }
.sh-prod-grid-collection-card .product-card .pr-card-content { padding: 12px 12px 14px; }
.sh-prod-grid-collection-card .product-card .my-2 button { border-color: var(--vh-line); border-radius: 10px; }

/* 31. Carousel arrows on phones: the 48px grey circles sat on the hero copy and on the second product card; swiping + dots are the mock's phone controls. */
@media (max-width: 768px) {
  .banner-root .swiper-button-prev, .banner-root .swiper-button-next,
  .sh-prod-grid-collection-card .swiper-button-prev, .sh-prod-grid-collection-card .swiper-button-next { display: none; }
}


/* ===== Round 38 (12 Nov 2026) — announcement bar + footer like the mock (user: "make announcement bar, reviews and footer same like preview").
   Reviews = collection 68d1167c html (payloads/stories-videos.html v3), not CSS. */

/* 32. Announcement bar. Mock: three short items with gold line icons (14px/500 on #0E3B27, 35px bar), one item on phones, two from 640px,
   three from 1024px. The theme prints notice_message as one plain string, so the items are drawn here; the setting text
   (same words, "|"-separated) stays in the DOM at font-size 0 for screen readers and search, and the drawn copies have empty alt text.
   IF THE MERCHANT CHANGES THE NOTICE TEXT IN THE ADMIN, UPDATE THESE THREE STRINGS TOO. Copy chosen by the user 12 Nov: keep the prepaid offer. */
header .notice { display: flex !important; justify-content: center; align-items: center; padding: 7px 16px !important; overflow: hidden; white-space: nowrap; }
header .notice .notice-message { display: flex; align-items: center; padding: 0 !important; font-size: 0 !important; line-height: 0; }
header .notice .notice-message::before,
header .notice .notice-message::after,
header .notice::after { display: inline-block; font-size: 14px; font-weight: 500; line-height: 21px; color: #fff; padding-left: 20px; background-repeat: no-repeat; background-position: left center; background-size: 14px 14px; }
header .notice .notice-message::before {
  content: "Free shipping on every order"; content: "Free shipping on every order" / "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C14E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}
header .notice .notice-message::after {
  display: none; margin-left: 22px;
  content: "Extra 10–15% off on prepaid orders"; content: "Extra 10–15% off on prepaid orders" / "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C14E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}
header .notice::after {
  display: none; margin-left: 22px;
  content: "Cash on delivery on most packs"; content: "Cash on delivery on most packs" / "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2C14E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { header .notice .notice-message::after { display: inline-block; } }
@media (min-width: 1024px) { header .notice::after { display: inline-block; } }

/* 33. Footer like the mock, theme footer kept (user: "Restyle theme footer only"). Was: 50px/60px pads outside the site column, 36px between links,
   12px uppercase headings, an 18px bold GSTIN line, labelled social list, centred legal text, a "Get it on Google Play" badge that opens a
   Play Store 404 (hidden here, list for the merchant). Mock: 1184px column, 40/24px pads, 16px/700 headings, 15px links 6px apart,
   38px round social icons in a row, small left-aligned legal block under a hairline. */
footer.three-col-footer__footer.sh-footer-main { padding: 40px 0 24px; font-size: 15px; }
footer.sh-footer-main > .w-full { max-width: var(--vh-wrap); margin: 0 auto; padding: 0 var(--vh-gut); box-sizing: border-box; }
footer.sh-footer-main > .w-full > .flex.flex-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 767px) { /* phones: one column; the 11 quick links in two columns (the no-wrap links made a 2-col grid 237 + 78px) */
  footer.sh-footer-main > .w-full > .flex.flex-wrap > div:first-child { column-count: 2; column-gap: 16px; }
  footer.sh-footer-main > .w-full > .flex.flex-wrap > div:first-child h3.three-col-footer__heading { column-span: all; }
  footer.sh-footer-main > .w-full > .flex.flex-wrap > div:first-child p.three-col-footer__link { white-space: normal; }
  footer.sh-footer-main > .w-full > .flex.flex-wrap > div:empty { display: none; }
}
footer.sh-footer-main > .w-full > .flex.flex-wrap > div { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
footer.sh-footer-main > .w-full > .flex.flex-wrap > #sh-footer-git,
footer.sh-footer-main > .w-full > .flex.flex-wrap > #sh-footer-copyright { grid-column: 1 / -1; }
@media (min-width: 768px) {
  footer.sh-footer-main > .w-full > .flex.flex-wrap { grid-template-columns: 1fr 1.3fr .9fr 1.15fr; }
  footer.sh-footer-main > .w-full > .flex.flex-wrap > #sh-footer-git { grid-column: auto; }
}
footer.sh-footer-main h3.three-col-footer__heading { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.3; color: #fff; }
footer.sh-footer-main a.three-col-footer__link,
footer.sh-footer-main > .w-full a:has(> p.three-col-footer__link),
footer.sh-footer-main div.three-col-footer__link { display: block; margin: 0 !important; padding: 3px 0; }
footer.sh-footer-main p.three-col-footer__link,
footer.sh-footer-main div.three-col-footer__link { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: #DCE8E0; }
footer.sh-footer-main a:hover p.three-col-footer__link { color: #fff; text-decoration: underline; }
footer.sh-footer-main #sh-footer-git a { display: block; }
footer.sh-footer-main #sh-footer-git a:not(#sh-footer-git-address) p.three-col-footer__link,
footer.sh-footer-main #sh-footer-git a#sh-footer-git-address { display: flex; align-items: flex-start; gap: 8px; white-space: normal; }
footer.sh-footer-main #sh-footer-git a#sh-footer-git-address p.three-col-footer__link { display: block; margin: 0; }
footer.sh-footer-main #sh-footer-git svg { flex: none; width: 16px; height: 16px; margin-top: 4px; }
/* phone + WhatsApp were bold white via §14's ID rule; same weight/colour as the other links now */
footer.sh-footer-main #sh-footer-git-mobile p, footer.sh-footer-main #sh-footer-git-whatsapp p { font-weight: 400; color: #DCE8E0; }
footer.sh-footer-main p.sh-footer-gstin { margin: 12px 0 0; font-size: 13px; font-weight: 400; letter-spacing: 0; color: #9FB6A8; }
footer.sh-footer-main img.three-col-footer__pay-icon { height: 28px; width: auto; }
footer.sh-footer-main div:has(> div > a[href*="play.google.com"]),
footer.sh-footer-main div:has(> a[href*="play.google.com"]) { display: none !important; }
footer.sh-footer-main .vertical-soc-cont { display: flex; flex-wrap: wrap; gap: 10px; }
footer.sh-footer-main .vertical-soc-cont .vertical-social__container { margin: 0; padding: 0; }
footer.sh-footer-main .vertical-soc-cont .vertical-social__socialBtn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; margin: 0; }
footer.sh-footer-main .vertical-soc-cont .vertical-social__socialBtn img { width: 20px; height: 20px; }
footer.sh-footer-main .vertical-soc-cont a:hover .vertical-social__socialBtn { background: rgba(255,255,255,.18); }
footer.sh-footer-main .vertical-soc-cont .vertical-social__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
footer.sh-footer-main #sh-footer-copyright { margin-top: 30px !important; padding-top: 18px !important; border-top: 1px solid rgba(255,255,255,.12); }
footer.sh-footer-main #sh-footer-copyright::before { display: block; margin: 0 0 10px; padding: 0; text-align: left; font-size: 13px; line-height: 1.55; }
footer.sh-footer-main #sh-footer-copyright p.three-col-footer__rights { margin: 0; padding: 0; border-top: 0; text-align: left; font-size: 13px; color: #9FB6A8; }
footer.sh-footer-main #sh-footer-copyright hr, footer.sh-footer-main > .w-full hr { display: none; }

/* 34. Width sweep (12 Nov, all templates at 1440): home, /products, category, collection, about, contact already sit on the header column.
   Policy pages (shipping/refund/privacy/terms/payment) had a further 0 40px inside the column, so the title and text started 40px right of the logo;
   the PDP details column had 16px left / 32px right padding, ending 24px short of the cart icon with only 16px to the gallery (mock: 52px gap, flush right).
   Blog list/post keep their centred ~840px reading column (deliberate). The 404 page renders without header/footer (theme; Shoopy item). */
@media (min-width: 768px) {
  .dynamic-page-container > .w-full { padding-left: 0; padding-right: 0; }
}
/* Desktop header 769–899px: the theme moves the search to its own full-width row there (max-width:899px → order:10, basis 100%), but §24's fixed
   76px row and 520px cap kept it in the row, so the icons sat between the logo and the search. Let it wrap: logo … icons, search below. */
@media (min-width: 769px) and (max-width: 899px) {
  header .app-bar-main > .MuiToolbar-root { height: auto; min-height: 0; flex-wrap: wrap; padding: 12px 0; row-gap: 10px; }
  header .app-bar-main .sh-header-searchbar-slot { max-width: none !important; flex: 1 1 100%; margin: 0; }
  header .app-bar-main .MuiToolbar-root > .flex.items-center:last-child:not(:first-child) { margin-left: auto; }
}
@media (min-width: 768px) {
  main > .page-padding-y:has(> .product-component-container) { padding-left: var(--vh-gut); padding-right: var(--vh-gut); } /* was 40px: PDP 12px inside the header column under 1240px */
}
@media (min-width: 900px) {
  .product-component-container > .MuiGrid-item:nth-child(2) { padding-left: 40px; padding-right: 8px; } /* share/wishlist buttons sit 8px outside their box */
}


/* ===== Round 39 (12 Nov 2026) — header icons + account/profile like the mock (user: "make header like this, account icon and profile").
   Theme SVG icons can't be re-drawn with CSS, so each is hidden (visibility, keeps its box and click target) and the mock's line icon
   (lucide user / shopping-bag / message-circle) is painted on the wrapper with a CSS mask in the icon colour. */

/* 35. Header icons. Was: a person-on-a-stand account icon, a bag-with-tag cart icon, a filled WhatsApp bubble. Mock: 22px ink line icons,
   WhatsApp outline in WhatsApp green with the label beside it (label #0F7F3D = 5:1 on white; the mock's #1DA851 is 3.1:1, too light for 15px text). */
.account-popup.ac-popup-user > div > div:first-child { width: 26px; height: 26px; background-color: var(--vh-ink); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.account-popup.ac-popup-user > div > div:first-child > svg { visibility: hidden; }
.account-popup.ac-popup-user:hover > div > div:first-child { background-color: var(--vh-cta); }
#cart-div .MuiBadge-root { position: relative; }
#cart-div .MuiBadge-root > svg { visibility: hidden; }
#cart-div .MuiBadge-root::before { content: ""; position: absolute; inset: 0; background-color: var(--vh-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
#cart-div:hover .MuiBadge-root::before { background-color: var(--vh-cta); }
#cart-div .MuiBadge-badge { z-index: 1; }
.app-bar a[href*="wa.me"], .mobile-app-bar a[href*="wa.me"] { position: relative; }
.app-bar a[href*="wa.me"] > svg, .mobile-app-bar a[href*="wa.me"] > svg { visibility: hidden; }
.app-bar a[href*="wa.me"]::before, .mobile-app-bar a[href*="wa.me"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background-color: #1DA851;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9.5 9.2c.3 1.6 1.7 3.6 3.6 4.6l1-1 1.7.8-.4 1.5c-3.3.3-6.6-3.2-6.4-6.4l1.5-.4.8 1.7z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9.5 9.2c.3 1.6 1.7 3.6 3.6 4.6l1-1 1.7.8-.4 1.5c-3.3.3-6.6-3.2-6.4-6.4l1.5-.4.8 1.7z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
@media (min-width: 1280px) { /* labelled link (§20): icon sits in the 10px left padding, before "Ask an expert" */
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"] { color: #0F7F3D; }
  .app-bar:not(.mobile-app-bar) a[href*="wa.me"]::before { left: 10px; transform: translateY(-50%); }
}
.mobile-app-bar a[href*="wa.me"]::before { left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; -webkit-mask-size: 26px 26px; mask-size: 26px 26px; }

/* 36. Menu without dropdown arrows, as in the mock (the sub-menus still open on hover/click of the item). */
@media (min-width: 769px) { .menu-bar.sh-header-menu .menu-bottom .updown-arrow { display: none; } }

/* 37. Sign-in / sign-up dialog (opens from the account icon when signed out). Was Roboto fields with 8px corners, a grey MUI button and a 22px/600 title.
   Now the site font, a Fraunces title, 12px-corner fields with a line border that turns deep green on focus, a solid deep-green 48px button, green link. */
main.authenticate, main.authenticate * { font-family: var(--typography-font-family); }
main.authenticate h3 { font-family: var(--vh-serif); font-weight: 650; font-size: 26px; letter-spacing: -.01em; color: var(--vh-ink); }
main.authenticate .MuiOutlinedInput-root { border-radius: 12px; }
main.authenticate .MuiOutlinedInput-notchedOutline { border: 1.5px solid var(--vh-line); border-radius: 12px; }
main.authenticate .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #C9BFA9; }
main.authenticate .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--vh-cta); border-width: 1.5px; }
main.authenticate .MuiInputLabel-root { color: var(--vh-muted); font-size: 15px; }
main.authenticate .MuiInputLabel-root.Mui-focused { color: var(--vh-cta); }
main.authenticate input { font-size: 16px; color: var(--vh-ink); }
/* the theme sets font-size/height inline and the disabled grey with !important (.solid-button__disabled_btn) */
main.authenticate form button { height: 48px !important; border-radius: 12px; font-size: 16px !important; font-weight: 700 !important; text-transform: none; letter-spacing: 0; box-shadow: none; color: #fff; }
main.authenticate form button:not(:disabled):hover { background: #0F5A37 !important; }
main.authenticate form button:disabled, main.authenticate form button.Mui-disabled { background: #EDE7DA !important; color: #6B776F !important; }
main.authenticate a, main.authenticate p span[class*="cursor-pointer"], main.authenticate .cursor-pointer { color: var(--vh-cta); font-weight: 700; }
div.rounded-\[var\(--card-radius\)\]:has(> main.authenticate) { border-radius: 20px; box-shadow: 0 24px 60px rgba(14,59,39,.25); }

/* 38. Signed-in profile menu (account icon → "Hi, name", My Account, Wishlist, Reviews and Ratings, Sign Out). Was a 12px card with a heavy
   grey shadow and 14px labels. Now a forest greeting band (the theme writes "Hi," in white), 15px ink labels with a cream hover. */
.ac-popup-sheet.universal-border { border-radius: 16px; border: 1px solid var(--vh-line); box-shadow: 0 16px 40px rgba(14,59,39,.16); overflow: hidden; }
.ac-popup-sheet .ac-popup-profile-card { background: var(--vh-dark); color: #fff; padding: 14px 16px; }
.ac-popup-sheet .ac-popup-item { padding: 10px 16px; transition: background .15s; }
.ac-popup-sheet .ac-popup-item:hover { background: var(--vh-cream); }
body .account-popup .ac-popup-sheet .ac-popup-label { font-size: 15px; font-weight: 500; color: var(--vh-ink); }
.ac-popup-sheet .ac-popup-item svg { color: var(--vh-cta); stroke: currentColor; }


/* ===== Round 40 (12 Nov 2026) — PDP wishlist heart cropped on phones (user report).
   39. The theme sizes the PDP heart SVG 20x17px (its drawing is 24x24) with overflow hidden, so on phones (3x pixel density) the stroke of the
   two top lobes was shaved flat. Square 22px box, stroke allowed to show; same on the share icon beside it for an even row. */
.sh-product-wishlist-desktop svg.sh-product-not-wishlisted-icon,
.sh-product-wishlist-desktop svg.sh-product-wishlisted-icon { width: 22px !important; height: 22px !important; overflow: visible; }
.sh-product-wishlist-desktop { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }