@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&display=swap");
.MuiToolbar-gutters
{
padding:3px;
}
.sh-header-mob-menu-icon
{
color:#000 !important;
}
.sh-category-card
 border-radius: 50% !important;
border:2px solid #000;
 
   }
.sh-category-card>a>div:hover{
   border:2px solid #2372A9; 
   }
.sh-footer-main
{
background-color:#000;
color:#fff;
}
.sh-product-card:hover {
    border-radius: 8px !important;
    
  }
.sh-product-card {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.pr-long-col-media {
    object-fit: contain;
}
.sh-bottom-nav-main {
    background-color: #000;
}
.sh-header-location-icon {
    fill: #000000 !important;
}
.sh-header-account-icon {
    stroke: #000000 !important;
}
.sh-header-cart-icon {
    stroke: #000000 !important;
    fill: none !important
}
.sh-header-arrow-icon {
    fill: #000000 !important;
}
.sh-header-search-icon {
    stroke: #000000 !important;
}
.sh-header-main
{
background-color:#fff;
font-size: 20px;
}
.sh-product-card-discount-tag {
background-color:#2372A9;
    font-weight: 400 !important;
    border-radius: 8px 0px 8px 0px !important;
    right: auto !important;
    top: 0px !important;
    left: 0px !important;
}
.sh-product-discount-tag {
background-color:#2372A9;
    font-weight: 400 !important;
    border-radius: 4px !important;
}
.sh-product-plus-minus-button {
    border-radius: 1px !important;
}
.sh-solid-button {
    border-radius: 4px;
}
.sh-row-title-divider {
   display: none !important
}
.sh-product-card-discount-tag{
font-size: 16px;
    line-height: 26px;
}
.sh-product-plus-minus-button {
    background-color: #88ce48;
    color:#fff;
    border: 1px solid #88ce48 !important;
}
.sh-product-plus-minus-button:hover{
    background-color: #88ce48;
    color:#fff;
    border: 1px solid #88ce48 !important;
}
.sh-product-plus-minus-button-div
{
color:#fff;
}
.sh-footer-icon {
    color: #FFFFFF !important;
}
/* ===== refine-362506.css — Ayush Pharmacy (added 30 Oct 2026, store_setup) ===== */

/* 1. Phone header: header attr title_show=true renders the store name + "WhatsApp Support (+91) - 9026950005"
      beside the logo. Below 769px there is no room: on fashion it pushes the WhatsApp icon off-screen (x=529 at 375px),
      on basic it wraps the header into 3 rows (home) / icons under the logo (PDP). The logo already carries the name,
      and the WhatsApp icon stays. Theme header switch is >768px, so max-width:768px. */
@media (max-width: 768px) {
  .app-bar-main .logo-ctn .title-ctn { display: none !important; }
}

/* 2. Buttons → #1B5E2F (button colour approved by user 29 Oct; preview-notes §3). The theme derives --button-* from
      theme_color #88CE48 (white on it = 1.9:1). Changing theme_color itself would also paint the header green
      (styles/theme.js default palette), so only the button variables move. White on #1B5E2F = 7.8:1. */
html:root {
  --button-main: #1B5E2F;
  --button-contrast-text: #FFFFFF;
  --button-borderColor: #1B5E2F;
}
/* Card + PDP Add To Cart / qty stepper: the original CSS hard-codes #88ce48, white text and a 1px radius here.
   Pill shape and 700 weight as in the mock's "Add to cart". */
.sh-product-plus-minus-button,
.sh-product-plus-minus-button:hover {
  background-color: #1B5E2F;
  color: #FFFFFF;
  border: 1px solid #1B5E2F !important;
  border-radius: 100px !important;
  font-weight: 700;
}
.sh-product-plus-minus-button:hover { background-color: #154A25; border-color: #154A25 !important; }
/* PDP "Show more" link was #88CE48 on white (1.9:1). */
.sh-desc-toggle { color: #1B5E2F; }
/* PDP: one primary CTA (AGENT_RULES §5h). Buy Now stays solid; the PDP Add To Cart / qty stepper becomes a #1B5E2F outline.
   Scoped to the PDP buy bar so product cards keep the solid pill. */
.product-footer-root .sh-product-plus-minus-button,
.product-footer-root .sh-product-plus-minus-button:hover {
  background-color: #FFFFFF;
  color: #1B5E2F;
  border: 1.5px solid #1B5E2F !important;
}
.product-footer-root .sh-product-plus-minus-button:hover { background-color: #EEF5EF; }
.product-footer-root .sh-product-plus-minus-button-div,
.product-footer-root .sh-product-plus-minus-button svg { color: #1B5E2F; }

/* 3. Palette tokens from the preview (preview-notes §3). */
html:root {
  --ap-ink: #17261B;
  --ap-muted: #5A675C;
  --ap-green: #1B5E2F;
  --ap-deep: #10361A;
  --ap-leaf: #88CE48;
  --ap-cream: #F4EFD9;
  --ap-line: #E5DFCB;
  --ap-amber: #F2A900;
  --ap-amber-ink: #2E2100;
}

/* 4. Font: Mukta (store_setting font_family drives --typography-font-family; the @import that loads it is hoisted to the
      top of custom-combined.css). Titles 800 / text 400-600, as in the preview. */
.sh-body, .sh-body button, .sh-body input { font-family: "Mukta", "Noto Sans", Arial, sans-serif; }

/* 5. Header icons: the original CSS forces #000 on cart/account/search/arrow icons. Ink, green on hover (§5e icon rule). */
.sh-header-cart-icon, .sh-header-account-icon, .sh-header-search-icon { stroke: var(--ap-ink) !important; }
.sh-header-location-icon, .sh-header-arrow-icon { fill: var(--ap-ink) !important; }
.sh-header-mob-menu-icon { color: var(--ap-ink) !important; }
a:hover > .sh-header-cart-icon, a:hover > .sh-header-account-icon, button:hover > .sh-header-search-icon { stroke: var(--ap-green) !important; }

/* 6. Menu bar: white with ink labels (colours themselves come from the menu's css setting); a hairline separates it from the page. */
.menu-bar.sh-header-menu { border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); }
.menu-bar.sh-header-menu a { font-weight: 600; font-size: 15px; }
.menu-bar.sh-header-menu a:hover { color: var(--ap-green) !important; }

/* 7. Section titles: preview .sec__title = Mukta 28/800 ink (22 on phones); subtitles muted 600. */
.section-heading { color: var(--ap-ink) !important; font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.01em; line-height: 1.15; }
.section-description { color: var(--ap-muted) !important; font-size: 15px !important; font-weight: 600 !important; }
@media (max-width: 768px) { .section-heading { font-size: 22px !important; } }

/* 8. Discount tags: the original CSS paints them blue #2372A9 at 16px. Preview: amber with dark ink, 800, 6px corners
      (ink on amber 7.8:1; white on amber would fail). */
.sh-product-card-discount-tag {
  background-color: var(--ap-amber) !important;
  color: var(--ap-amber-ink) !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 1px 8px !important;
  top: 10px !important;
  left: 10px !important;
}
.sh-product-discount-tag {
  background-color: var(--ap-amber) !important;
  color: var(--ap-amber-ink) !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
}

/* 9. Product card text: preview .pc__name 600 ink, price ink, MRP muted. */
.sh-product-card .sh-product-card-name, .sh-product-card [class*="product-name"] { color: var(--ap-ink); font-weight: 600; }
.sh-product-card .pr-price { color: var(--ap-ink); font-weight: 700; }
.sh-product-card .sh-product-card-mrp { color: var(--ap-muted); font-weight: 400; }

/* 10. Footer: basic renders a light #F7F6F4 three-col footer, the original CSS forces its icons white (invisible ticks) and the
       titles inherit leaf #88CE48 on light (1.7:1). Preview footer: deep green #10361A, text #D5E2CE, titles leaf (7.0:1), links white. */
.three-col-footer__footer.sh-footer-main { background-color: var(--ap-deep) !important; color: #D5E2CE !important; }
.sh-footer-main .footer-row-title { color: var(--ap-leaf) !important; font-weight: 700; }
.sh-footer-main .contact-info_heading { color: #FFFFFF !important; }
.sh-footer-main .three-col-footer__link, .sh-footer-main .three-col-footer__link a, .sh-footer-main a { color: #D5E2CE !important; }
.sh-footer-main a:hover, .sh-footer-main a:hover .three-col-footer__link { color: #FFFFFF !important; }
.sh-footer-main .sh-footer-icon { color: var(--ap-leaf) !important; fill: var(--ap-leaf); }
.copyright { background-color: #0B2913 !important; }
.copyright .three-col-footer__rights { color: #B9C9B2 !important; }

/* 11. Remaining theme-default #000 text (sweep 30 Oct): category tile names, account popup labels. */
.cat-card-title, .ac-popup-label { color: var(--ap-ink) !important; }

/* 12. Home HTML sections (step 5): the preview's theme.css blocks verbatim (base, usp-1, concerns-1, brands-1, why-1, help-1), then our overrides in 13. */
/* BEGIN shoopy-gen:base */
.sx {
  --sx-action: var(--secondary-main, #1B5E2F);
  --sx-leaf: #88CE48;
  --sx-leaf-tint: #EAF5DC;
  --sx-deep: #10361A;
  --sx-cream: #FAF6EA;
  --sx-sand: #F1EBD6;
  --sx-line: #E5DFCB;
  --sx-ink: #17261B;
  --sx-muted: #5A675C;
  --sx-wa: #25D366;
  --sx-radius: 16px;
  --sx-gutter: 16px;
  --sx-max: 1320px;
}
.sx-wrap { width: 100%; max-width: var(--sx-max); margin: 0 auto; padding: 0 var(--sx-gutter); box-sizing: border-box; }
.sx-eyebrow { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-action); }
.sx-title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--sx-ink); }
.sx-lede { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--sx-muted); }
.sx-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1; text-decoration: none; box-sizing: border-box; transition: transform .15s, background-color .15s; }
.sx-btn:active { transform: scale(.98); }
.sx-btn:focus-visible { outline: 3px solid var(--sx-leaf); outline-offset: 2px; }
@media (min-width: 768px) {
  .sx { --sx-gutter: 24px; }
  .sx-title { font-size: 28px; }
}
@media (min-width: 1280px) {
  .sx { --sx-gutter: 32px; }
  .sx-title { font-size: 31px; }
}
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp { width: 100%; background: #fff; border-bottom: 1px solid var(--sx-line); }
.sx-usp__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 4px 0; list-style: none; }
.sx-usp__item { display: flex; align-items: center; gap: 10px; padding: 12px 6px; min-width: 0; }
.sx-usp__badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sx-leaf-tint); color: var(--sx-action); flex: none; }
.sx-usp__badge .sx-icon { width: 20px; height: 20px; }
.sx-usp__text { display: flex; flex-direction: column; min-width: 0; }
.sx-usp__h { font-size: 14px; line-height: 1.2; font-weight: 700; color: var(--sx-ink); }
.sx-usp__p { margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--sx-muted); }
@media (min-width: 768px) {
  .sx-usp__list { grid-template-columns: repeat(4, 1fr); padding: 6px 0; }
  .sx-usp__item { padding: 14px 10px; gap: 12px; }
  .sx-usp__item + .sx-usp__item { border-left: 1px solid var(--sx-line); padding-left: 20px; }
  .sx-usp__badge { width: 44px; height: 44px; }
  .sx-usp__badge .sx-icon { width: 22px; height: 22px; }
  .sx-usp__h { font-size: 15.5px; }
  .sx-usp__p { font-size: 13px; }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:concerns-1 */
.sx-concerns { width: 100%; padding: 30px 0 34px; background: var(--sx-sand); }
.sx-concerns__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sx-concerns__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--sx-line); color: var(--sx-ink); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; box-sizing: border-box; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sx-concerns__link:hover { border-color: var(--sx-action); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 54, 26, .10); }
.sx-concerns__link:focus-visible { outline: 3px solid var(--sx-leaf); outline-offset: 2px; }
.sx-concerns__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sx-leaf-tint); color: var(--sx-action); }
@media (min-width: 640px) {
  .sx-concerns__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .sx-concerns { padding: 44px 0 48px; }
  .sx-concerns__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 22px; }
  .sx-concerns__link { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 72px; padding: 12px 16px; font-size: 15px; text-align: left; }
}
/* END shoopy-gen:concerns-1 */

/* BEGIN shoopy-gen:brands-1 */
.sx-brands { width: 100%; padding: 30px 0 8px; }
.sx-brands__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sx-brands__all { flex: none; font-size: 14.5px; font-weight: 700; color: var(--sx-action); text-decoration: none; white-space: nowrap; }
.sx-brands__all:hover { text-decoration: underline; }
.sx-brands__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sx-brands__link { display: grid; place-items: center; aspect-ratio: 9 / 5; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--sx-line); box-sizing: border-box; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sx-brands__link:hover { border-color: var(--sx-action); box-shadow: 0 8px 18px rgba(16, 54, 26, .10); transform: translateY(-2px); }
.sx-brands__link:focus-visible { outline: 3px solid var(--sx-leaf); outline-offset: 2px; }
.sx-brands__logo { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px) {
  .sx-brands__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .sx-brands { padding: 44px 0 10px; }
  .sx-brands__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 22px; }
}
/* END shoopy-gen:brands-1 */

/* BEGIN shoopy-gen:why-1 */
.sx-why { width: 100%; padding: 34px 0; background: #fff; border-top: 1px solid var(--sx-line); }
.sx-why__grid { display: grid; gap: 28px; }
.sx-why__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.sx-why__stat { padding: 14px 16px; border-radius: 14px; background: var(--sx-cream); border: 1px solid var(--sx-line); }
.sx-why__num { display: block; font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; color: var(--sx-action); }
.sx-why__lab { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--sx-muted); }
.sx-why__steps { margin: 0; padding: 22px 20px; border-radius: 20px; background: var(--sx-leaf-tint); list-style: none; counter-reset: sx-step; }
.sx-why__steps-title { margin: 0 0 14px; font-size: 18px; line-height: 1.2; font-weight: 800; color: var(--sx-deep); }
.sx-why__step { position: relative; display: flex; gap: 14px; padding: 0 0 18px; counter-increment: sx-step; }
.sx-why__step:last-child { padding-bottom: 0; }
.sx-why__step::before { content: counter(sx-step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sx-action); color: #fff; font-size: 15px; font-weight: 800; flex: none; position: relative; z-index: 1; }
.sx-why__step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: rgba(27, 94, 47, .28); }
.sx-why__step-h { display: block; font-size: 15.5px; line-height: 1.25; font-weight: 700; color: var(--sx-ink); }
.sx-why__step-p { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--sx-muted); }
@media (min-width: 900px) {
  .sx-why { padding: 56px 0; }
  .sx-why__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .sx-why__stats { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
  .sx-why__num { font-size: 28px; }
  .sx-why__steps { padding: 28px 30px; }
}
/* END shoopy-gen:why-1 */

/* BEGIN shoopy-gen:help-1 */
.sx-help { width: 100%; padding: 26px 0 34px; background: #fff; }
.sx-help__card { display: grid; gap: 20px; padding: 28px 22px; border-radius: 22px; background: var(--sx-deep); background-image: radial-gradient(circle at 92% 8%, rgba(136, 206, 72, .22), rgba(136, 206, 72, 0) 46%); color: #FBF6E4; }
.sx-help__eyebrow { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-leaf); }
.sx-help__title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #FBF6E4; }
.sx-help__p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #D5E2CE; max-width: 52ch; }
.sx-help__actions { display: flex; flex-direction: column; gap: 10px; }
.sx-help__wa { background: var(--sx-wa); color: #06260F; }
.sx-help__wa:hover { background: #3BE07A; }
.sx-help__ghost { border: 1.5px solid rgba(251, 246, 228, .5); color: #FBF6E4; }
.sx-help__ghost:hover { background: rgba(251, 246, 228, .1); }
.sx-help__note { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #B9CBB3; }
@media (min-width: 768px) {
  .sx-help { padding: 34px 0 52px; }
  .sx-help__card { grid-template-columns: 1.3fr auto; align-items: center; gap: 40px; padding: 44px 48px; }
  .sx-help__title { font-size: 30px; }
  .sx-help__actions { min-width: 270px; }
}
/* END shoopy-gen:help-1 */

/* 13. Overrides for this store.
   - --sx-action reads the theme's --secondary-main, which is still leaf #88CE48 here (theme_color kept for the header palette): pin the approved #1B5E2F.
   - Column: native rows run full width with a 20px gutter (measured 20..1094 at 1114px; desktop_width FULL); the mock capped at 1320. Match the store, 16px on phones.
   - Two-up campaign pair (promo-pair): native BANNER collections are always 12 columns, so the pair is an HTML section. */
.sx { --sx-action: #1B5E2F; --sx-max: none; --sx-gutter: 20px; font-family: inherit; }
@media (max-width: 767px) { .sx { --sx-gutter: 16px; } }
@media (min-width: 768px) { .sx { --sx-gutter: 20px; } }
@media (min-width: 1280px) { .sx { --sx-gutter: 20px; } .sx-title { font-size: 28px; } }
.sx a { text-decoration: none; }
.sx-promo2 { width: 100%; padding: 8px 0; }
.sx-promo2__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sx-promo2__item { display: block; border-radius: 16px; overflow: hidden; background: #F1EBD6; transition: transform .15s, box-shadow .15s; }
.sx-promo2__item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 54, 26, .12); }
.sx-promo2__item picture, .sx-promo2__item img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .sx-promo2__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
/* why-1 stats: "3–7 days" wrapped to two lines in the 4-up stat boxes between 900 and 1279px. */
.sx-why__num { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1279px) { .sx-why__num { font-size: 22px; } }

/* 14. Step-5 rhythm and alignment (measured live 30 Oct at 1114px).
   - Vaidban BANNER ran edge to edge with square corners while every other section sits on the 20px gutter with 16px corners.
   - Content gaps: digestive→brands 83, hair&skin→why 119, why→help 157 against ~45-60 elsewhere; trim the HTML sections' own padding.
   - "View All" was #1A1A1A 600; the preview's section links are green 700. */
.BannerCollection-component .sh-banner-collection-card { margin: 0 20px; width: calc(100% - 40px); }
.BannerCollection-component .sh-banner-collection-card > .overflow-hidden { border-radius: 16px; }
@media (max-width: 767px) { .BannerCollection-component .sh-banner-collection-card { margin: 0 16px; width: calc(100% - 32px); } }
.section-heading-viewall { color: var(--ap-green) !important; font-weight: 700 !important; }
.sx-help { padding-top: 0; }
@media (min-width: 768px) { .sx-help { padding: 0 0 32px; } }
@media (min-width: 900px) { .sx-why { padding: 24px 0 8px; } }
@media (min-width: 1024px) { .sx-brands { padding-top: 16px; } }

/* 15. Step-6 fixes.
   - Under 360px the PDP header (back arrow 42 + logo 154 + three icons 122) is wider than the 288px row, so the icons wrapped under the logo
     (measured at 320). A 104px logo keeps one row.
   - Cart drawer qty stepper stayed leaf #88CE48 with white text (drawer-specific theme rule beats §2). */
@media (max-width: 359px) { .app-bar-main .logo-ctn img { max-width: 104px !important; height: auto; } }
.cart-side-drawer .sh-product-plus-minus-button,
.cart-side-drawer .sh-product-plus-minus-button:hover {
  background-color: #1B5E2F !important;
  border-color: #1B5E2F !important;
  color: #FFFFFF !important;
}
.cart-side-drawer .sh-product-plus-minus-button * { color: #FFFFFF !important; }

/* 16. Content column = the preview's 1320px wrap (32px padding → 1256px of content), centred; the hero stays full-bleed (mock: up to 1920).
   The store runs desktop_width FULL and Section.jsx:74 forces max-width:unset on every row, so BOXED can't do it: CSS.
   - HTML sections keep their full-bleed bands; only .sx-wrap is capped (reverts the §13 full-width override to the mock's values).
   - Native rows (categories, product rows, Vaidban banner) carry 20px item padding: cap the row at 1296px so their content edges meet .sx-wrap's (both at 1256px).
   - Header toolbar and footer columns follow the same column on desktop (the phone header is untouched: >768px only).
   Trust strip: under the categories row its top edge vanished white-on-white (mock has it under the hero): add the hairline. */
@media (min-width: 1280px) { .sx { --sx-max: 1320px; --sx-gutter: 32px; } }
@media (min-width: 769px) {
  main .grid.grid-cols-12.section:not(:has(.HtmlRenderer-component)):not(:has(.StoreBanner-component)) {
    max-width: 1296px !important; margin-left: auto !important; margin-right: auto !important;
  }
  main .grid.grid-cols-12.section:has(.StoreBanner-component) { max-width: 1920px !important; margin-left: auto !important; margin-right: auto !important; }
  .app-bar-main .toobar-regular { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 32px !important; padding-right: 32px !important; }
  .three-col-footer__flex { max-width: 1256px; margin-left: auto !important; margin-right: auto !important; }
  .copyright { padding-left: max(64px, calc((100% - 1256px) / 2)) !important; padding-right: max(64px, calc((100% - 1256px) / 2)) !important; }
}
.sx-usp { border-top: 1px solid var(--sx-line); }
/* Listing / category / search / collection / about pages use .page-container (1600px, 32px padding) and the PDP a 1280px wrapper:
   same 1320px column so their content starts where the header's does (measured 208px at 1685 on every template; cart-detail is a centred form, left as is). */
@media (min-width: 769px) {
  main .page-container { max-width: 1320px !important; }
  main > div:has(> .product-component-container) { max-width: 1320px !important; }
}
/* Capped rows showed the theme's row background (inline --sec-bg-color:white on hero/categories) as a white box on the #FDFCFB page. */
main .grid.grid-cols-12.section { background-color: transparent !important; }

/* 17. (30 Oct fix: wrapper sets left/right padding only — a `padding: 0 32px` shorthand at ≥1280 had zeroed the top padding.)
   17. Footer = the preview's footer as a Custom HTML footer (footer_settings type=html, payloads/footer-ayush.html, classes .sx-ftr*).
   Values from the preview's page.tpl.html footer block; column on the same 1320/32 wrap as §16. */
.sx-ftr { background: #10361A; color: #D5E2CE; font-size: 14.5px; font-family: inherit; }
.sx-ftr a { color: #D5E2CE; text-decoration: none; }
.sx-ftr a:hover { color: #FFFFFF; text-decoration: underline; }
.sx-ftr__wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.sx-ftr__top { display: grid; gap: 28px; padding-top: 38px; padding-bottom: 30px; }
.sx-ftr__brand { display: flex; align-items: center; gap: 12px; }
.sx-ftr__brand img { width: 46px; height: 46px; border-radius: 10px; }
.sx-ftr__brand b { display: block; font-size: 21px; line-height: 1.1; font-weight: 800; color: #FFFFFF; letter-spacing: -.01em; }
.sx-ftr__brand small { display: block; font-size: 12.5px; font-weight: 500; color: #A9C19F; }
.sx-ftr__about { margin: 14px 0 0; line-height: 1.55; max-width: 44ch; }
.sx-ftr__social { display: flex; gap: 8px; margin-top: 16px; }
.sx-ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #FFFFFF; }
.sx-ftr__social a:hover { background: #88CE48; color: #10361A; text-decoration: none; }
.sx-ftr__social svg { width: 18px; height: 18px; }
.sx-ftr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.sx-ftr__col--contact { grid-column: 1 / -1; }
.sx-ftr__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #88CE48; }
.sx-ftr__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sx-ftr__line { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.sx-ftr__ico { width: 18px; height: 18px; margin-top: 2px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #88CE48; }
.sx-ftr__app { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 16px 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); color: #FFFFFF !important; }
.sx-ftr__app small { display: block; font-size: 11px; line-height: 1.1; color: #A9C19F; }
.sx-ftr__app b { display: block; font-size: 15px; line-height: 1.2; color: #FFFFFF; }
.sx-ftr__pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sx-ftr__pay span { padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 600; color: #FFFFFF; }
.sx-ftr__bar { border-top: 1px solid rgba(255,255,255,.12); }
.sx-ftr__bar .sx-ftr__wrap { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; padding-bottom: 88px; font-size: 13px; color: #A9C19F; }
@media (min-width: 768px) {
  .sx-ftr__wrap { padding-left: 20px; padding-right: 20px; }
  .sx-ftr__top { grid-template-columns: 1fr; gap: 34px; padding-top: 48px; }
  .sx-ftr__cols { grid-template-columns: 1.5fr 1fr 1fr; }
  .sx-ftr__col--contact { grid-column: auto; }
  .sx-ftr__bar .sx-ftr__wrap { flex-direction: row; justify-content: space-between; padding-bottom: 20px; }
}
@media (min-width: 1024px) { .sx-ftr__top { grid-template-columns: 1fr 2fr; gap: 60px; padding-top: 56px; padding-bottom: 40px; } }
@media (min-width: 1280px) { .sx-ftr__wrap { padding-left: 32px; padding-right: 32px; } }

/* 18. Desktop header actions as in the preview: line icons in ink (theme SVGs hidden, the preview's drawn as masks), "Account"/"Cart" labels,
   amber count badge (was leaf text on white), WhatsApp as an ink glyph + number placed first. >768px only (phone header unchanged except the badge). */
.sh-header-cart-badge.MuiBadge-badge { background: #F2A900 !important; color: #2E2100 !important; font-weight: 800; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; }
@media (min-width: 769px) {
  .app-bar-main .toobar-regular > div:last-child { gap: 22px; }
  .app-bar-main .toobar-regular > div:last-child { margin-left: 28px; }
  .app-bar-main .toobar-regular > div:last-child > * { margin-left: 0 !important; height: 26px; display: flex; align-items: center; }
  .app-bar-main .toobar-regular > div:last-child > .header-wishlist { display: flex !important; order: 1; }
  .header-wishlist a { display: inline-flex; align-items: center; color: var(--ap-ink); }
  .header-wishlist svg { display: none !important; }
  .header-wishlist a::before { content: ""; width: 22px; height: 22px; background: currentColor; -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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain 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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .header-wishlist a:hover { color: var(--ap-green); }
  .app-bar-main .toobar-regular > div:last-child > div:has(> a[href="/cart-detail"]) { order: 2; }
  .account-popup > div > div:first-child { transform: translateY(3px); }
  .app-bar-main a[href="/cart-detail"] { margin-left: 0 !important; }
  .app-bar-main .toobar-regular > div:last-child > .ml-8 { order: -1; }
  .app-bar-main a[aria-label="Contact over Whatsapp"] { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: 26px !important; color: var(--ap-ink); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
  .app-bar-main .toobar-regular > div:last-child > .ml-8 { width: auto !important; }
  .app-bar-main a[aria-label="Contact over Whatsapp"] svg { display: none !important; }
  .app-bar-main a[aria-label="Contact over Whatsapp"]::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .app-bar-main a[aria-label="Contact over Whatsapp"]::after { content: "+91 90269 50005"; }
  .app-bar-main a[aria-label="Contact over Whatsapp"]:hover { color: var(--ap-green); }
  .account-popup > div > div:first-child { display: inline-flex; align-items: center; height: 26px; gap: 8px; cursor: pointer; color: var(--ap-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
  .account-popup > div > div:first-child svg { display: none !important; }
  .account-popup > div > div:first-child::before { content: ""; width: 22px; height: 22px; background: var(--ap-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain 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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat; }
  .account-popup > div > div:first-child::after { content: "Account"; }
  .account-popup > div > div:first-child:hover { color: var(--ap-green); }
  .account-popup > div > div:first-child:hover::before { background: var(--ap-green); }
  .app-bar-main a[href="/cart-detail"] { display: inline-flex; align-items: center; gap: 4px; color: var(--ap-ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .app-bar-main a[href="/cart-detail"]::after { content: "Cart"; }
  .app-bar-main a[href="/cart-detail"] svg.sh-header-cart-icon { display: none !important; }
  .app-bar-main a[href="/cart-detail"] .MuiBadge-root::before { content: ""; display: block; width: 22px; height: 22px; background: var(--ap-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.6 12h10.6l2-8.5H6.6'/%3E%3C/svg%3E") center / contain 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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.6 12h10.6l2-8.5H6.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .app-bar-main a[href="/cart-detail"]:hover { color: var(--ap-green); }
  .app-bar-main a[href="/cart-detail"]:hover .MuiBadge-root::before { background: var(--ap-green); }
}
/* 18b. Header fit (measured 769-1440): the logo block carried the store-name/"WhatsApp Support…" title-ctn in white-on-white on desktop
   (invisible but 260px wide), squeezing search to ~160px at 900. Hidden everywhere (§1 did phones; the h1 stays in the HTML).
   Search gets a 24px gap after the logo; the WhatsApp number shows from 1100px (icon only below, so search stays usable). */
.app-bar-main .logo-ctn .title-ctn { display: none !important; }
@media (min-width: 769px) { .app-bar-main .sh-header-searchbar-slot { margin-left: 24px; } }
@media (min-width: 769px) and (max-width: 1099px) { .app-bar-main a[aria-label="Contact over Whatsapp"]::after { content: none; } }

/* 19. Page background = the preview's cream #FAF6EA (was the theme's #FDFCFB). Rows are transparent (§16), so only the intended bands remain:
   white trust strip / Why us / help, sand concerns; cards (products, categories, PDP image + reviews) stay white. Seam scan 30 Oct on home, /products,
   PDP, cart-detail, about-us: clean. */
body.sh-body, body { background-color: #FAF6EA !important; }