@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@500;600;700;800&display=swap");
.section-heading-container {
  align-items: center;
  margin: 36px 0px 10px 0px !important;
}

.cat-card {
  padding: 0px;
}

.cat-card-img-container {
  border: 0px;
  box-shadow: 0px 0px 0px;
}

.cat-card-img {
  border: 0px;
  border-radius: 4px !important;
  object-fit: contain;
}

.cat-card-title {
  font-weight: 600;
  margin-top: -10px;
  font-size: 16px;
}

.sh-ge-collect-689c4598dcd143107242a259 .sh-banner-img-ctn,
.sh-ge-collect-6893166dd6b03035777fa902 .sh-banner-img-ctn {
  border-radius: 15px;
}

.ban-cont-text {
  font-weight: 500;
}

.section-item {
  padding: 0px !important;
}

.section:last-child {
  margin: 0px;
}

.pr-long-card {
  border: 1px solid e6e6e6;
  border-radius: 12px;
  padding: 0px;
}

.pr-outlined-button {
  border: 0px;
  color: white;
  background-color: var(--button-main);
}

.pr-card-content {
  padding: 8px;
}

.pr-image {
  border: 0px;
}

.pr-long-card .pr-image {
  border-radius: 0px;
  border: 0px;
}

.pr-outlined-button:hover {
  background-color: #db6404;
}

.universal-btn-style {
  border-radius: 5px;
}

.pr-title {
  font-weight: 600;
}

.app-bar .logo {
  height: 80px;
}

.sh-header-search-icon {
  stroke: #f6740c !important;
}
.sh-header-location-icon {
  stroke: #f6740c;
}
.sh-header-cart-icon {
  stroke: #f6740c !important;
}

a.links {
  font-weight: 600;
  /* margin: 5px 5px; */
  /* border-radius: 4px; */
  color: #f6740c;
  background-color: #ffd8b8;
}

a.links:hover {
  color: white !important;
  background-color: #f6740c;
}

.app-bar-main {
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3);
}

.app-bar {
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.3);
}

.menu-bar {
  border-top: 0px;
}

body {
  margin-top: 0px !important;
}

.section-5 {
  padding: 0px 20px;
}

@media (min-width: 768px) {
  .section-5 {
    padding: 0px 40px;
  }
}

.sh-footer-main {
  color: #b92012 !important;
  background-color: #ffd8b8 !important;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1) !important;
}

.footer-type-3 .copyright {
  background-color: #D17402;
}

.three-col-footer__rights {
  color: black !important;
}

.footer-row-title {
  color: #b92012;
}

.sh-footer-icon {
  fill: #b92012;
  color: #b92012;
}

.sh-shoopy-html-page h1.text-zinc-900.text-2xl.font-bold.mb-6 {
  display: none;
}
.sh-shoopy-html-page .w-full.mx-auto.md\:w-\[80vw\].lg\:w-\[64vw\] {
  max-width: 1400px !important;
  width: 100% !important;
  padding-left: 34px !important;
  padding-right: 34px !important;
  margin-left: auto;
  margin-right: auto;
}
.sh-shoopy-html-page .bg-accent {
  background-color: var(--accent);
}
.sh-shoopy-html-page .text-accent-foreground {
  color: var(--accent-foreground);
}

.ban-cont-content {
  position: unset;
  color: black !important;
  font-size: 16px !important;
  margin: auto;
  margin-top: 12px;
}
.ban-cont-content h2 {
  font-size: 16px !important;
  text-align: center;
}


/* ==========================================================================
   Phoolcart (458089) — refine layer, appended after live_backup/phoolcart-live.css
   Target: ~/playground/theme-preview2/preview/phoolcart (preview.css tokens).
   @import lines are hoisted to the top of custom-combined.css by build.sh.
   ========================================================================== */

/* 1. Tokens. Live used #F6740C behind white text (2.7:1, fails AA);
      the mock moves CTAs to the logo's burnt saffron #C85008 (4.6:1). */
html:root {
  --pc-brand: #F6740C;
  --pc-cta: #C85008;
  --pc-cta-dark: #A84206;
  --pc-deal: #9E1B12;
  --pc-wa: #1FAF54;
  --pc-gold: #E8B038;
  --pc-bg: #FFFDF9;
  --pc-surface: #FFF6EA;
  --pc-line: #EFE3D3;
  --pc-ink: #2A1F14;
  --pc-ink-2: #5A4B3C;
  --pc-muted: #7A6A5B;
  --pc-head: "Fraunces", Georgia, serif;
  --pc-body: "Manrope", system-ui, -apple-system, sans-serif;
  /* theme variables: body font was Trebuchet MS, buttons #F6740C, header icons #000 */
  --typography-font-family: var(--pc-body);
  --button-main: var(--pc-cta);
  --header-accent: var(--pc-ink);
  --header-badge-main: var(--pc-cta);
}

/* 2. Base type. Theme set body text to Trebuchet MS / rgba(0,0,0,.87). */
body, .sh-body, button, input, select, textarea { font-family: var(--pc-body) !important; }
body { color: var(--pc-ink); }
/* one page surface: white sections sat on an off-white #FDFCFB body (seams at every section edge) */
body, .sh-body { background-color: var(--pc-bg) !important; }
main .grid.section, main [class^="section-title-"], main [class*=" section-title-"] { background-color: transparent !important; }
/* a section with no title of its own sat 0–10px under the previous one (USP strip under the tile labels) */
main style + .grid.section:not(.section-0):not(:has(.section-heading)) { margin-top: 40px; }

/* 3. Buttons. Live CSS forced 5px corners on .universal-btn-style; mock uses 8–10px. */
.universal-btn-style { border-radius: 8px !important; }

/* 4. Header. Icons were #F6740C strokes, nav was peach pills with red text. */
.app-bar-main, .app-bar { background: #fff; box-shadow: none !important; border-bottom: 1px solid var(--pc-line); }
/* live CSS set the logo to 80px; with notice + nav the sticky header took ~200px */
.app-bar .logo { height: 64px !important; width: auto; }
.sh-header-search-icon, .sh-header-location-icon, .sh-header-cart-icon { stroke: var(--pc-ink) !important; }
/* search box (desktop slot and the phone header both wrap .search-field in a MUI Paper) */
.sh-header-searchbar-slot .MuiPaper-root,
.MuiPaper-root:has(> .search-field) {
  border: 1.5px solid var(--pc-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  overflow: hidden;
}
.MuiPaper-root:has(> .search-field):focus-within,
.sh-header-searchbar-slot .MuiPaper-root:focus-within { border-color: var(--pc-brand) !important; box-shadow: 0 0 0 4px #FFF1D6 !important; }
.menu-bar.sh-header-menu { background: #fff !important; border-top: 1px solid var(--pc-line) !important; }
.menu-bar.sh-header-menu a.links {
  background: transparent !important;
  color: var(--pc-ink-2) !important;
  font-weight: 600;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}
.menu-bar.sh-header-menu a.links:hover { color: var(--pc-cta) !important; border-bottom-color: var(--pc-cta); background: transparent !important; }
.menu-bar.sh-header-menu .updown-arrow svg { color: var(--pc-ink-2); fill: currentColor; }
/* phone bottom nav: slate #3A3E46 bar with #999 icons → white bar, ink icons, burnt-saffron active */
.sh-bottom-nav-main { background: #fff !important; border-top: 1px solid var(--pc-line); box-shadow: 0 -2px 10px rgba(60, 35, 10, .06) !important; }
.sh-bottom-nav-main .sh-bottom-nav-unselected, .sh-bottom-nav-main .sh-bottom-nav-unselected * { color: var(--pc-muted) !important; }
.sh-bottom-nav-main .sh-bottom-nav-selected, .sh-bottom-nav-main .sh-bottom-nav-selected * { color: var(--pc-cta) !important; }
.sh-bottom-nav-main .MuiBottomNavigationAction-label { font-family: var(--pc-body) !important; font-weight: 700; }

/* 5. Section headings. Live mixed red #C12222, black and #1A1A1A, all Trebuchet 24px. */
.section-heading, h5.related-products-heading {
  font-family: var(--pc-head) !important;
  font-weight: 600 !important;
  color: var(--pc-ink) !important;
  letter-spacing: -.01em;
}
.section-heading { font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.15; }
h5.related-products-heading { font-size: clamp(20px, 2vw, 26px) !important; }

/* 6. Product card (home grid, listing, category, related). Mock .pc anatomy:
      white card, 14px corners, warm line border, square image, ink title,
      bold ink price + muted MRP, maroon deal tag, outlined burnt-saffron CTA. */
.sh-product-card.pr-long-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pc-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.sh-product-card.pr-long-card:hover { box-shadow: 0 6px 20px rgba(60, 35, 10, .08); transform: translateY(-2px); }
.sh-product-card .pr-image-ctn { position: relative; background: #fff; border-bottom: 1px solid var(--pc-line); }
.sh-product-card .pr-discount {
  left: 10px !important;
  right: auto !important;
  top: 10px !important;
  background: var(--pc-deal) !important;
  color: #fff !important;
  font-family: var(--pc-body);
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}
.sh-product-card .pr-card-content { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px !important; }
.sh-product-card .pr-title {
  color: var(--pc-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
}
.sh-product-card .pr-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 0; }
.sh-product-card .pr-sale-price { color: var(--pc-ink) !important; font-size: 17px !important; font-weight: 800 !important; }
.sh-product-card .pr-mrp-price { color: var(--pc-muted) !important; font-size: 13.5px !important; font-weight: 500; }
.sh-product-card .pr-two-col-vatext { color: var(--pc-muted) !important; font-size: 12.5px !important; margin: 0; }
.sh-product-card .pr-card-content > .my-2 { margin: 0 !important; }
/* actions sit on the card's bottom edge whether or not the variant line exists */
.sh-product-card .pr-card-content > .flex.w-full.flex-col { margin-top: auto; }
/* + Add and WhatsApp on one row at every width (at 320px the WhatsApp button wrapped to its own line) */
.sh-product-card .pr-card-content .flex.w-full.flex-wrap { flex-wrap: nowrap !important; gap: 6px; }
.sh-product-card .pr-card-content .flex.w-full.flex-wrap > .pr-outlined-button { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.sh-product-card .pr-card-content .flex.w-full.flex-wrap > .pr-card-action-enquiry { flex: 0 0 40px; margin: 0 !important; }
@media (max-width: 360px) {
  .sh-product-card .pr-card-content { padding: 10px !important; }
  .sh-product-card .pr-title { font-size: 14px !important; }
  .sh-product-card .pr-card-content .flex.w-full.flex-wrap > .pr-card-action-enquiry { flex-basis: 36px; }
}
.sh-product-card .pr-outlined-button {
  height: 40px;
  background: #fff !important;
  color: var(--pc-cta) !important;
  border: 1.5px solid var(--pc-cta) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: background .15s, color .15s;
}
.sh-product-card .pr-outlined-button:hover { background: var(--pc-cta) !important; color: #fff !important; }
.sh-product-card .pr-outlined-button:disabled,
.sh-product-card .pr-outlined-button[disabled] { border-color: var(--pc-line) !important; color: var(--pc-muted) !important; background: #fff !important; }
/* WhatsApp enquiry: green outline + green icon (success/WhatsApp role), was #F6740C */
.sh-product-card .pr-card-action-enquiry {
  border: 1.5px solid var(--pc-wa) !important;
  color: var(--pc-wa) !important;
  background: #fff !important;
  border-radius: 8px !important;
}
.sh-product-card .pr-card-action-enquiry svg, .sh-product-card .pr-card-action-enquiry path { fill: var(--pc-wa) !important; color: var(--pc-wa) !important; }
.sh-product-card .pr-card-action-enquiry:hover { background: var(--pc-wa) !important; }
.sh-product-card .pr-card-action-enquiry:hover svg, .sh-product-card .pr-card-action-enquiry:hover path { fill: #fff !important; }

/* 7. Card image crops (1:1 cover). 16:9 art with baked text: anchor the crop on
      the text side. Keyed on file names; revisit when the images change. */
.sh-product-card img.pr-image { object-fit: cover; }
/* per-image rules: crops.css (generated by build_crops.py from crops.json), appended by build.sh */

/* 8. Category / service tiles (BannerCollection). Mixed 4px/15px corners → 14px. */
.cat-card-img, .sh-banner-img-ctn, .sh-banner-img-ctn img { border-radius: 14px !important; }
.ban-cont-content, .ban-cont-content h2 { color: var(--pc-ink) !important; font-family: var(--pc-body) !important; font-weight: 700 !important; }

/* 9. PDP. Add and Buy were both solid #F6740C; discount pill green #1F7A3D. */
.product-component-name {
  font-family: var(--pc-head) !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  color: var(--pc-ink) !important;
  letter-spacing: -.01em;
}
.product-pricing-discount { background: var(--pc-deal) !important; color: #fff !important; border-radius: 6px !important; }
.product-pricing-primary { color: var(--pc-ink) !important; }
.product-pricing-secondary { color: var(--pc-muted) !important; }
.product-component-container .pr-outlined-button,
.product-footer-root .pr-outlined-button {
  background: #fff !important;
  color: var(--pc-cta) !important;
  border: 1.5px solid var(--pc-cta) !important;
  font-weight: 800 !important;
}
.product-component-container .pr-outlined-button:hover,
.product-footer-root .pr-outlined-button:hover { background: var(--pc-cta) !important; color: #fff !important; }
.sh-product-buy-now-button {
  background: var(--pc-cta) !important;
  border-color: var(--pc-cta) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.sh-product-buy-now-button:hover { background: var(--pc-cta-dark) !important; border-color: var(--pc-cta-dark) !important; }

/* Trusted Badges plugin: icons were white on a 60% #F6740C disc → brand icon on a pale tint */
.shoopy-trusted-badge-icon { background: #FFF1D6 !important; color: var(--pc-cta) !important; }
.shoopy-trusted-badge-icon svg, .shoopy-trusted-badge-icon svg path { color: var(--pc-cta) !important; fill: var(--pc-cta) !important; }
.shoopy-trusted-badge-label { color: var(--pc-ink) !important; font-weight: 600 !important; }

/* 10. Footer. Peach #FFD8B8 with red #B92012 text → mock's warm-ink footer. */
.sh-footer-main {
  background-color: var(--pc-ink) !important;
  color: #D8CDBD !important;
  box-shadow: none !important;
}
.sh-footer-main .footer-row-title, .footer-row-title {
  color: var(--pc-gold) !important;
  font-family: var(--pc-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sh-footer-main .three-col-footer__link,
.sh-footer-main .contact-info-ctn,
.sh-footer-main .contact-info_heading,
.sh-footer-main strong,
.sh-footer-main span,
.sh-footer-main a { color: #D8CDBD !important; }
.sh-footer-main a:hover { color: #fff !important; }
.sh-footer-main svg, .sh-footer-main svg path, .sh-footer-icon { fill: var(--pc-gold) !important; color: var(--pc-gold) !important; }
.footer-type-3 .copyright { background-color: #1F160E !important; color: #A99C8B !important; }
.footer-type-3 .copyright *, .three-col-footer__rights { color: #A99C8B !important; }
/* small logo on dark: white chip like the mock's footer logo */
.footer-type-3 .copyright img.footer-logo { background: #fff; border-radius: 8px; padding: 4px; }
/* phone: "GET ANDROID APP" and "GET IOS APP" ran into each other (no gap in the row) */
.sh-footer-main .flex.flex-wrap:has(> div img[alt="Play Store"]) { column-gap: 20px; row-gap: 12px; }

/* 11. Custom HTML footer (footer-phoolcart.html, footer_settings.type = "html").
       Ported from the mock's .footer rules (preview.css "Footer"), namespaced .pcf.
       Section 10 stays so the theme footer is still on-palette if the type is switched back. */
.pcf { background: var(--pc-ink); color: #EADFD0; font-family: var(--pc-body); margin-top: 48px; }
.pcf a { color: inherit; text-decoration: none; }
.pcf a:hover { color: #fff; text-decoration: underline; }
.pcf .ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; margin: 0 !important; vertical-align: middle; }
.pcf-top {
  max-width: 1280px; margin: 0 auto; padding: 56px 20px 44px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px;
}
.pcf-logo img { height: 64px; width: auto; display: block; background: #fff; border-radius: 12px; padding: 6px; box-sizing: content-box; }
.pcf-about p { color: #C9BBA8; font-size: 14.5px; line-height: 1.6; margin: 16px 0 0; max-width: 40ch; }
.pcf-contact { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.pcf-contact a { display: inline-flex; align-items: center; gap: 10px; }
.pcf-contact .ico { color: var(--pc-gold); }
.pcf h4 {
  font-family: var(--pc-body); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pc-gold); margin: 0 0 14px;
}
.pcf h4.pcf-sub { margin-top: 26px; }
.pcf ul { list-style: none; margin: 0; padding: 0; }
.pcf li { margin: 0 0 9px; font-size: 14.5px; color: #D8CDBD; line-height: 1.4; }
.pcf-apps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pcf-app {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--pc-ink) !important;
  border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 700; line-height: 1.1;
}
.pcf-app:hover { text-decoration: none !important; background: var(--pc-surface); }
.pcf-app .ico { width: 20px; height: 20px; }
.pcf-app small { display: block; font-size: 10px; font-weight: 600; color: var(--pc-muted); letter-spacing: .03em; }
.pcf-social { display: flex; gap: 8px; margin-top: 16px; }
.pcf-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.pcf-social a:hover { background: var(--pc-cta); text-decoration: none; }
.pcf-bottom {
  max-width: 1280px; margin: 0 auto; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: #A99C8B;
}
.pcf-bottom img { height: 28px; width: auto; border-radius: 4px; }
/* keep the payment icons clear of the fixed WhatsApp bubble (bottom-right, ~64px) */
.pcf-bottom { padding-right: 96px; }
@media (max-width: 900px) { .pcf-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .pcf-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
  .pcf-bottom { flex-direction: column; align-items: flex-start; }
}
/* phones: keep the last lines clear of the fixed bottom nav */
body:has(.sh-bottom-nav-main) .pcf { padding-bottom: 72px; }

/* 12. Trust strip (usp-strip.html, HTML_COLLECTION inline, right under the hero).
       From the mock's usp-1; tokens mapped to --pc-*. Copy is limited to what the
       store's delivery zones, wallet and payment settings prove (runbook round 4). */
.sx-usp { width: 100%; background: var(--pc-surface); border-top: 1px solid var(--pc-line); border-bottom: 1px solid var(--pc-line); font-family: var(--pc-body); }
.sx-usp, .sx-usp * { box-sizing: border-box; }
.sx-usp__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  list-style: none; margin: 0 auto; padding: 18px 20px; max-width: 1280px;
}
.sx-usp__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-usp__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #FFF1D6; color: var(--pc-cta); display: grid; place-items: center; }
.sx-usp__ico .sx-ico { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-usp__title { margin: 0; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--pc-ink); }
.sx-usp__sub { margin: 2px 0 0; color: var(--pc-muted); font-size: 13px; line-height: 1.3; }
.sx-usp .sx-nw { white-space: nowrap; } /* "2–6" broke after the dash on phones */
@media (max-width: 900px) {
  .sx-usp__list { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding: 14px 16px; }
  .sx-usp__ico { width: 38px; height: 38px; }
  .sx-usp__ico .sx-ico { width: 20px; height: 20px; }
  .sx-usp__title { font-size: 13.5px; }
  .sx-usp__sub { font-size: 12px; }
}
/* the strip sits flush under the hero, like the mock (section 2's title-less rule gave it a 40px gap) */
main .grid.section:has(.sx) { margin-top: 0 !important; } /* .sx sections set their own spacing; the title-less 40px rule stacked on top (76px / 120px gaps) */

/* 13. Home HTML sections: "Why Phoolcart" (why-phoolcart.html) and the app box (app-box.html).
       From the mock's theme.css base / why-1 / app-1, on the store column (1280px, 20px gutter). */
.sx {
  --sx-cta: #C85008; --sx-cta-dark: #A84206; --sx-gold: #E8B038; --sx-leaf: #3E7A1E; --sx-leaf-soft: #E8F3DF; --sx-wa: #1FAF54;
  --sx-ink: #2A1F14; --sx-ink-2: #5A4B3C; --sx-muted: #7A6A5B; --sx-surface: #FFF6EA; --sx-surface-2: #FBEFDF; --sx-line: #EFE3D3; --sx-radius: 14px;
  color: var(--sx-ink); font-family: var(--pc-body); line-height: 1.5;
}
.sx, .sx * { box-sizing: border-box; }
.sx-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.sx-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sx-cta); margin-bottom: 10px; }
.sx-h2 { font-family: var(--pc-head); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin: 0; letter-spacing: -.01em; color: var(--sx-ink); }
.sx-lead { margin: 12px 0 0; color: var(--sx-ink-2); font-size: 16px; max-width: 56ch; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 8px; background: var(--sx-cta); color: #fff; font-weight: 800; font-size: 15px; line-height: 1; text-decoration: none; transition: background .2s; white-space: nowrap; }
.sx-btn:hover { background: var(--sx-cta-dark); color: #fff; }
.sx-btn--outline { background: #fff; color: var(--sx-cta); border: 1.5px solid var(--sx-cta); }
.sx-btn--outline:hover { background: var(--sx-cta); color: #fff; }
.sx-btn--wa { background: var(--sx-wa); }
.sx-btn--wa:hover { background: #168f43; }
.sx-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sx-why { width: 100%; background: var(--sx-surface-2); padding: 56px 0; margin-top: 36px; }
.sx-why__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.sx-why__img { margin: 0; border-radius: var(--sx-radius); overflow: hidden; box-shadow: 0 14px 40px rgba(60, 35, 10, .14); }
.sx-why__img img { width: 100%; height: auto; display: block; }
.sx-why__pillars { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.sx-why__pillar { display: flex; gap: 14px; align-items: flex-start; }
.sx-why__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--sx-line); color: var(--sx-cta); display: grid; place-items: center; }
.sx-why__pillar b { display: block; font-size: 16px; }
.sx-why__pillar p { margin: 2px 0 0; color: var(--sx-ink-2); font-size: 14.5px; line-height: 1.45; }
.sx-why__green { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--sx-leaf-soft); border: 1px solid #CFE3C0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sx-why__green .sx-why__ico { color: var(--sx-leaf); border-color: #CFE3C0; }
.sx-why__green p { margin: 0; flex: 1 1 220px; font-size: 14.5px; color: var(--sx-ink-2); }
.sx-why__green b { color: var(--sx-leaf); }

.sx-app { width: 100%; padding: 0 0 8px; } /* sits under the gallery tiles, which already leave 40px */
.sx-app__box { background: linear-gradient(120deg, #C85008 0%, #F6740C 60%, #F39A2B 100%); color: #fff; border-radius: var(--sx-radius); padding: 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.sx-app__box .sx-eyebrow { color: #FFE7C2; }
.sx-app__box .sx-h2 { color: #fff; }
.sx-app__box p { margin: 10px 0 0; color: #FFF3E3; font-size: 15.5px; max-width: 52ch; }
.sx-app__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sx-app__badge { display: inline-flex; align-items: center; gap: 9px; background: var(--sx-ink); color: #fff; border-radius: 10px; padding: 9px 14px; font-size: 14px; font-weight: 700; line-height: 1.1; text-decoration: none; }
.sx-app__badge small { display: block; font-weight: 600; font-size: 10px; opacity: .75; letter-spacing: .03em; }
.sx-app__badge .sx-ico, .sx-app__badge svg { width: 22px; height: 22px; stroke: #fff; }
.sx-app__wa { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; padding: 18px 20px; }
.sx-app__wa b { display: block; font-size: 17px; margin-bottom: 4px; }
.sx-app__wa p { margin: 0 0 14px; font-size: 14.5px; color: #FFF3E3; }
.sx-app__wa .sx-btn { width: 100%; }
@media (max-width: 900px) {
  .sx-why { padding: 36px 0; }
  .sx-why__grid, .sx-app__box { grid-template-columns: 1fr; gap: 24px; }
  .sx-why__img { max-width: 520px; }
  .sx-app__box { padding: 24px; }
}

/* 14. One content column for the home rows (round 10). Collection sections come with inline
       max-width:unset, so product rows ran edge to edge (cards at 0px) while tile rows sat 40px in
       and the trust strip 20px. Full-width bands (hero, .sx sections) keep their own layout. */
main .grid.section:not(:has(.StoreBanner-component)):not(:has(.sx)) {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}
/* row subtitles (collection.description) and "View All": were theme #1A1A1A */
.section-heading-container .section-description {
  color: var(--pc-muted) !important;
  font-size: 15px !important;
  line-height: 1.45;
  max-width: 62ch;
  margin: 6px auto 0 !important;
  text-align: center;
}
.section-heading-container a.section-heading-viewall {
  color: var(--pc-cta) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-decoration: none;
}
.section-heading-container a.section-heading-viewall:hover { text-decoration: underline; }
/* product-row arrows: black 48% circles → white discs with ink chevrons (size stays the theme's 48px) */
.ProductGridCollection-component .swiper-button-next,
.ProductGridCollection-component .swiper-button-prev {
  border-radius: 50%;
  background: #fff !important; color: var(--pc-ink) !important;
  border: 1px solid var(--pc-line); box-shadow: 0 6px 18px rgba(60, 35, 10, .12);
}
.ProductGridCollection-component .swiper-button-next::after,
.ProductGridCollection-component .swiper-button-prev::after { font-size: 14px !important; font-weight: 800; color: var(--pc-ink); }
.ProductGridCollection-component .swiper-button-next svg,
.ProductGridCollection-component .swiper-button-prev svg { color: var(--pc-ink); fill: currentColor; width: 16px; height: 16px; }

/* 15. Hero slides with live text (round 11): offers carry title + cta_text over text-free art
       (BannerImage.jsx → div.relative > img + .ban-cont-content). The merchant's tile rule
       (.ban-cont-content { position: unset; color: black }) is meant for the category tiles, so
       everything here is scoped to the hero. Values from the mock's .slide / .scrim / .caption. */
.StoreBanner-component .swiper-slide .relative:has(> .ban-cont-content)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(28, 14, 4, .62) 0%, rgba(28, 14, 4, .42) 38%, rgba(28, 14, 4, 0) 62%);
}
.StoreBanner-component .ban-cont-content {
  position: absolute !important; z-index: 2;
  top: 50% !important; bottom: auto !important; right: auto !important;
  left: max(40px, calc((100% - 1240px) / 2)) !important;
  transform: translateY(-50%) !important;
  max-width: 560px !important; margin: 0 !important;
  color: #fff !important; font-size: 16px !important; text-align: left;
}
.StoreBanner-component .ban-cont-content .ban-cont-text {
  font-family: var(--pc-head) !important; font-weight: 600 !important;
  font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.1 !important; letter-spacing: -.01em !important;
  color: #fff !important; text-align: left !important; margin: 0 0 20px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.StoreBanner-component .ban-cont-content .ban-cont-button {
  display: inline-flex; align-items: center;
  background: var(--pc-cta) !important; color: #fff !important; border: 0 !important;
  padding: 15px 26px !important; border-radius: 8px !important;
  font-family: var(--pc-body) !important; font-weight: 800 !important; font-size: 16px !important; letter-spacing: 0 !important;
}
.StoreBanner-component .ban-cont-content .ban-cont-button:hover { background: var(--pc-cta-dark) !important; transform: none; }
/* hero arrows like the product-row ones (were black 48% discs) */
.StoreBanner-component .swiper-button-next,
.StoreBanner-component .swiper-button-prev {
  border-radius: 50%; background: rgba(255, 255, 255, .92) !important; color: var(--pc-ink) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.StoreBanner-component .swiper-button-next::after,
.StoreBanner-component .swiper-button-prev::after { color: var(--pc-ink); font-size: 14px !important; font-weight: 800; }
.StoreBanner-component .swiper-button-next svg,
.StoreBanner-component .swiper-button-prev svg { color: var(--pc-ink); fill: currentColor; }
/* phones get the 3:4 art (server picks offer.url by user agent): text at the bottom */
body:has(.mobile-app-bar) .StoreBanner-component .swiper-slide .relative:has(> .ban-cont-content)::after {
  background: linear-gradient(180deg, rgba(28, 14, 4, 0) 30%, rgba(28, 14, 4, .3) 55%, rgba(28, 14, 4, .78) 100%);
}
body:has(.mobile-app-bar) .StoreBanner-component .ban-cont-content {
  top: auto !important; bottom: 44px !important; left: 20px !important; right: 20px !important;
  transform: none !important; max-width: none !important;
}
body:has(.mobile-app-bar) .StoreBanner-component .ban-cont-content .ban-cont-text {
  font-size: clamp(26px, 7.2vw, 34px) !important; margin-bottom: 14px !important;
}
body:has(.mobile-app-bar) .StoreBanner-component .ban-cont-content .ban-cont-button { padding: 13px 22px !important; font-size: 15px !important; }

/* 16. Compact phone header (round 12). The fixed .mobile-app-bar was 235px tall (notice 43 +
       logo row 88 + search 52 + location 52), ~30% of a phone screen. Search is now an icon in the
       logo row (header.search_view = "icon"); logo 64 → 44px, notice and location rows tightened. */
.mobile-app-bar .notice { padding-top: 6px !important; padding-bottom: 6px !important; }
.mobile-app-bar .navbar { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
.mobile-app-bar .logo-ctn img, .mobile-app-bar .logo { height: 44px !important; width: auto !important; }
.mobile-app-bar .app-bar-main > .px-4.pb-3.flex { padding-bottom: 10px !important; }
.mobile-app-bar .app-bar-main > .px-4.pb-3.flex button { padding: 0 12px !important; font-size: 14px !important; color: var(--pc-ink-2) !important; }
.mobile-app-bar .app-bar-main > .px-4.pb-3.flex button svg { width: 16px; height: 16px; flex: none; color: var(--pc-muted); }
/* row subtitles read heavy on phones */
.section-heading-container .section-description { font-weight: 500 !important; }

/* 17. One field shape for every search box and the phone location field (round 12). There were
       three: desktop pill (999px), phone search panel (theme 6px, grey #E8E8E8, black icons) and the
       phone location box (8px). All are now 40px, 10px corners, warm border, muted 18px icons. */
.sh-header-search-box,
.MuiPaper-root:has(> .search-field),
.sh-header-searchbar-slot .MuiPaper-root,
.mobile-app-bar .app-bar-main > .px-4.pb-3.flex button {
  height: 40px !important;
  border: 1.5px solid var(--pc-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden;
}
.sh-header-search-box:focus-within,
.MuiPaper-root:has(> .search-field):focus-within { border-color: var(--pc-brand) !important; box-shadow: 0 0 0 3px #FFF1D6 !important; }
/* the input was 53px tall inside the 40px box and got clipped */
.sh-header-search-box .search-field, .MuiPaper-root:has(> .search-field) .search-field,
.sh-header-search-box .MuiInputBase-root, .MuiPaper-root:has(> .search-field) .MuiInputBase-root { height: 100% !important; display: flex; align-items: center; }
.sh-header-search-box input, .MuiPaper-root:has(> .search-field) input {
  height: 100% !important; padding: 0 !important; font-family: var(--pc-body) !important; font-size: 15px !important; color: var(--pc-ink) !important;
}
.sh-header-search-box input::placeholder, .MuiPaper-root:has(> .search-field) input::placeholder { color: var(--pc-muted); opacity: 1; }
.sh-header-search-box svg, .MuiPaper-root:has(> .search-field) svg,
.sh-header-search-box .material-icons, .MuiPaper-root:has(> .search-field) .material-icons {
  width: 18px !important; height: 18px !important; font-size: 18px !important;
  color: var(--pc-muted) !important; fill: var(--pc-muted) !important; stroke: var(--pc-muted) !important; /* outline glyph: keep the stroke */
}
/* header search toggle: was 28px, larger than account/cart (24px) */
.app-bar-main .cursor-pointer > svg.sh-header-search-icon { width: 24px !important; height: 24px !important; }
.mobile-app-bar svg.sh-header-search-icon { width: 22px !important; height: 22px !important; }
/* in-box magnifier sat flush against the placeholder text */
.sh-header-search-box .material-icons, .MuiPaper-root:has(> .search-field) .material-icons {
  display: flex !important; align-items: center; justify-content: center;
  width: auto !important; padding: 0 10px 0 14px !important; margin: 0 !important; flex: none;
}

/* 18. Header icons and style, desktop + phone (round 13).
       The theme draws filled glyphs and also sets stroke="var(--header-accent)" on them (the old
       merchant CSS forced the stroke too), so search/account/cart looked heavy; the phone back arrow
       was theme-default #000; sizes ran 20–28px. */
.sh-header-main svg.sh-header-search-icon,
.sh-header-main svg.sh-header-cart-icon,
.sh-header-main svg.sh-header-arrow-icon,
.sh-header-main .account-popup svg,
.sh-header-main .mobile-sidemenu-button-wrapper svg {
  stroke-width: 0 !important;
  color: var(--pc-ink) !important;
  fill: var(--pc-ink) !important;
}
.app-bar:not(.mobile-app-bar) svg.sh-header-search-icon,
.app-bar:not(.mobile-app-bar) svg.sh-header-cart-icon,
.app-bar:not(.mobile-app-bar) .account-popup svg { width: 24px !important; height: 24px !important; }
.mobile-app-bar svg.sh-header-search-icon,
.mobile-app-bar svg.sh-header-cart-icon { width: 22px !important; height: 22px !important; }
.mobile-app-bar svg.sh-header-arrow-icon,
.mobile-app-bar .mobile-sidemenu-button-wrapper svg { width: 24px !important; height: 24px !important; }
.sh-header-cart-badge { font-weight: 700 !important; font-family: var(--pc-body) !important; }
/* phone inner-page title (category name etc.) was theme #000 regular */
.mobile-app-bar h1.title { color: var(--pc-ink) !important; font-family: var(--pc-body) !important; font-size: 16px !important; font-weight: 700 !important; }
/* desktop location control was cool grey (#374151 text, #6B7280 icons) */
.app-bar-main button:has(.lucide-map-pin) { color: var(--pc-ink-2) !important; font-weight: 600; }
.app-bar-main button:has(.lucide-map-pin) svg { stroke: var(--pc-muted) !important; }
/* sticky desktop header had no edge under the nav row */
.menu-bar.sh-header-menu { border-bottom: 1px solid var(--pc-line) !important; }

/* 19. Product page polish (round 14). */
/* desktop button row sat 12px inside the content column on both sides (.product-footer-root padding) */
@media (min-width: 960px) {
  .product-footer-root.sh-pf-desk { padding-left: 0 !important; padding-right: 0 !important; }
}
/* discount pill read "20%"; cards say "22% off" */
.product-pricing-discount::after { content: " off"; }
/* fields (variant dropdown, Date & Time, Select Pandit ji, pincode): theme 4–8px corners with
   dark 23% / #E5E5E5 borders → the 10px warm field used in the header */
.product-component-container .MuiOutlinedInput-root,
.product-component-container .MuiInputBase-root:has(input[placeholder*="pincode" i]) { border-radius: 10px !important; background: #fff; }
.product-component-container .MuiOutlinedInput-notchedOutline { border: 1.5px solid var(--pc-line) !important; border-radius: 10px !important; }
.product-component-container .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--pc-brand) !important; }
.product-component-container .MuiInputBase-root:has(input[placeholder*="pincode" i]) { border: 1.5px solid var(--pc-line) !important; }
.product-component-container .MuiInputBase-root:has(input[placeholder*="pincode" i]):focus-within { border-color: var(--pc-brand) !important; }
.product-component-container .MuiInputBase-root:has(input[placeholder*="pincode" i]) button { color: var(--pc-cta) !important; font-weight: 800 !important; }
/* share icon: stroke forced to #F6740C by old CSS; action icons are ink */
.product-component-container button.flex-center svg.MuiSvgIcon-root { stroke: var(--pc-ink) !important; fill: none !important; color: var(--pc-ink) !important; } /* outline glyph: stroke only */
/* brand line above the name (e.g. "Saraswati") was ink 16px like body text */
.product-component-brand-name { color: var(--pc-muted) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .02em; }
/* theme forced text-transform: capitalize on the PDP name ("Mix flowers" → "Mix Flowers", "100 grams" → "100 Grams");
   the card shows the real name, so the page now matches it. Fix casing in the product data, not CSS. */
.product-component-name { text-transform: none !important; }

/* 20. PDP "Order on WhatsApp" (product_page_settings.show_whatsapp_cta + label_settings.product_page_enquire_cta,
       round 15). The theme puts it first in one nowrap row with + Add / Buy Now (three cramped buttons, saffron).
       Desktop: + Add | Buy Now, then a full-width solid green WhatsApp button (mock). Phones (fixed bar <960px):
       compact green icon button in the same row, so the bar stays one row. */
.product-footer-buttons > .sh-product-enquiry {
  background: var(--pc-wa) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important;
  font-family: var(--pc-body) !important; font-weight: 800 !important; text-transform: none !important; box-shadow: none !important;
}
.product-footer-buttons > .sh-product-enquiry:hover { background: #168f43 !important; }
.product-footer-buttons > .sh-product-enquiry svg { color: #fff !important; fill: #fff !important; }
@media (min-width: 960px) {
  .product-footer-buttons:has(> .sh-product-enquiry) { flex-wrap: wrap !important; row-gap: 12px; }
  .product-footer-buttons:has(> .sh-product-enquiry) > * { flex: 1 1 0 !important; min-width: 0 !important; }
  .product-footer-buttons > .sh-product-enquiry {
    order: 3; flex: 1 1 100% !important; width: 100% !important; max-width: none !important; justify-content: center; height: 48px;
  }
}
@media (max-width: 959px) {
  .product-footer-buttons > .sh-product-enquiry {
    flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important;
    padding: 0 !important; justify-content: center; font-size: 0 !important;
  }
  .product-footer-buttons > .sh-product-enquiry a { font-size: 0 !important; justify-content: center; }
  .product-footer-buttons > .sh-product-enquiry svg { width: 22px !important; height: 22px !important; }
}

.sh-product-card img.pr-image[src*="navgraha-samidha-sacred-wood-sticks-1755090768382_SKU-0020_0"] { object-fit: contain; object-position: 50% 50%; } /* navgraha-samidha-sacred-wood-sticks */
.sh-product-card img.pr-image[src*="Untitleddesign-1757131661051"] { object-position: 0% 50%; } /* astro-talk */
.sh-product-card img.pr-image[src*="ShrimatBhagwatGeeta-1759131736939"] { object-position: 100% 50%; } /* shrimad-bhagwat-katha */
.sh-product-card img.pr-image[src*="RamCharitaManas-1759131758926"] { object-position: 100% 50%; } /* shri-ram-charitra-manas-24993 */
.sh-product-card img.pr-image[src*="DurgaSapshati-Edited-1769805404877"] { object-position: 0% 50%; } /* durga-saptashati-path */
.sh-product-card img.pr-image[src*="KaalSarpYogShantiPooja-1770901376035"] { object-position: 0% 50%; } /* kaal-sarp-yog-shanti-pooja */
.sh-product-card img.pr-image[src*="MahaMritunjayaJaap-1770901568712"] { object-position: 0% 50%; } /* maha-mrityunjaya-jaap */
.sh-product-card img.pr-image[src*="ManglikDoshNivaranPooja-1770901785096"] { object-position: 0% 50%; } /* manglik-dosh-nivaran-pooja */
.sh-product-card img.pr-image[src*="PitraDoshNivaranPooja-1770902168441"] { object-position: 100% 50%; } /* pitra-dosh-shanti-pooja */
.sh-product-card img.pr-image[src*="IchchhamiDhoopSticks-2-1771316216851"] { object-fit: contain; object-position: 50% 50%; } /* ichchhami-dhoop-sticks-combo-box-combo-box-of-12-fragrances */