/* Mumbai Shopping — generated CSS.
   Uploaded to site_settings.sx_css_location (the dedicated generated-CSS slot,
   separate from the merchant's own css_location). Authored per-segment and
   concatenated into one file — do NOT @import or minify: the BEGIN/END markers
   are comments and must survive.

   Every selector is namespaced under .sx so nothing leaks into the theme's
   header, footer or product cards. Brand colour comes from the theme's own
   --secondary-main var, so these sections re-skin with the store.

   Covers ONLY the Tier-B (HtmlRenderer) sections. Tier-A sections are styled by
   the easy-checkout theme itself; the preview's approximation of them lives in
   index.html's <style> block and is NOT published. */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-brand: var(--secondary-main, #9e1b2f);
  --sx-navy: #0e2f62;
  --sx-ink: #17131a;
  --sx-muted: #6b6570;
  --sx-line: #e7e2de;
  --sx-surface: #faf8f6;
  --sx-gap: 16px;
  --sx-radius: 14px;
  --sx-pad: clamp(16px, 4vw, 24px);
}
.sx, .sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx { width: 100%; color: var(--sx-ink); }
.sx-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--sx-pad); }
.sx-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-brand);
}
.sx-h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sx-ink);
  text-wrap: balance;
}
.sx-sub { margin: 0; color: var(--sx-muted); font-size: 15px; text-wrap: pretty; }
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-strip-1 */
.sx-usp { background: var(--sx-surface); border-block: 1px solid var(--sx-line); }
.sx-usp__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px var(--sx-gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px var(--sx-pad);
  list-style: none;
}
.sx-usp__item { display: flex; gap: 11px; align-items: center; padding: 8px 0; }
.sx-usp__icon { flex: none; width: 26px; height: 26px; color: var(--sx-brand); }
.sx-usp__icon svg { display: block; width: 100%; height: 100%; }
.sx-usp__label { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.sx-usp__note { margin: 1px 0 0; font-size: 12px; color: var(--sx-muted); line-height: 1.3; }
@media (min-width: 768px) {
  .sx-usp__list { grid-template-columns: repeat(4, 1fr); padding-block: 20px; }
  .sx-usp__item { justify-content: center; }
}
/* END shoopy-gen:usp-strip-1 */

/* BEGIN shoopy-gen:trust-1 */
.sx-trust { padding: clamp(36px, 6vw, 56px) 0; background: var(--sx-surface); }
.sx-trust__head { max-width: 620px; margin: 0 auto 26px; text-align: center; }
/* Mobile: a swipeable rail rather than three stacked cards — three full-width
   testimonials cost ~700px of scroll on a page that is already long. CSS-only
   scroll-snap, no JS: Tier-B inline <script> runs globally on the store page
   (HtmlScriptExcuter re-injects it on document.body), so it is not worth the risk
   for a carousel that scroll-snap does natively. The 84% card width leaves the next
   card peeking, which is the affordance that says "swipe me". */
.sx-trust__grid {
  display: grid;
  gap: var(--sx-gap);
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--sx-pad) * -1);
  padding: 2px var(--sx-pad) 10px;
  /* Without this the snap aligns card 1 flush to the scrollport edge and eats the
     padding-inline, so the rail starts ~16px left of every other section's content.
     scroll-padding moves the snap line in to match the page gutter. */
  scroll-padding-inline: var(--sx-pad);
  scrollbar-width: none;
}
.sx-trust__grid::-webkit-scrollbar { display: none; }
.sx-trust__card {
  /* margin:0 is load-bearing — these cards are <figure>, and the UA stylesheet
     gives figure `margin: 1em 40px`. That silently inset every card 40px inside
     its own grid track: cards rendered 80px narrower than their column and the
     gaps came out at 96px instead of 16px (desktop measured 292px cards / 96px
     gaps against a 373px track). It looked "evenly spaced", so it survived
     unnoticed until the mobile rail made the maths obvious. Reset here rather
     than with a bare `figure {}` selector, which the CSS contract forbids. */
  margin: 0;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  padding: 20px;
}
.sx-trust__stars { color: #e8a33d; font-size: 14px; letter-spacing: 2px; line-height: 1; }
.sx-trust__quote {
  margin: 10px 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sx-ink);
  text-wrap: pretty;
}
.sx-trust__who { display: flex; align-items: center; gap: 10px; }
.sx-trust__avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.sx-trust__name { margin: 0; font-size: 13px; font-weight: 700; }
.sx-trust__city { margin: 0; font-size: 12px; color: var(--sx-muted); }
.sx-trust__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sx-gap);
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--sx-line);
  text-align: center;
}
.sx-trust__stat { margin: 0; font-size: clamp(20px, 4vw, 26px); font-weight: 800; color: var(--sx-navy); }
.sx-trust__statlabel { margin: 2px 0 0; font-size: 12px; color: var(--sx-muted); }
/* Desktop: back to a static 3-up. Every rail property must be reset, not just the
   columns — setting grid-template-columns while grid-auto-flow:column and
   grid-auto-columns are still live collapses the cards (this exact mistake shipped
   once already in the product swiper). */
@media (min-width: 768px) {
  .sx-trust__grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }
}
/* END shoopy-gen:trust-1 */


/* Extracted from index.html */

/* ------------------------------------------------------------------
   PREVIEW-ONLY CSS. Approximates the easy-checkout theme's chrome and
   its native (Tier-A) sections so the page can be judged. None of this
   is published — the real store renders these from the theme itself.
   Only theme.css ships. See preview-notes.md.
   ------------------------------------------------------------------ */
:root {
  --brand: #9e1b2f;          /* MOM "maroon", reconciled with logo red #cc1414 */
  --brand-dark: #7e1426;
  --navy: #0e2f62;           /* logo-extracted secondary — also the CTA colour */
  --navy-ink: #0a2247;
  --deal: #c4431c;           /* discount badges + % text only — never a CTA.
                                #e4572e read nicer but only hit 3.68:1 on white */
  --success: #1f8a4c;
  --ink: #17131a;
  --muted: #6b6570;
  --line: #e7e2de;
  --surface: #faf8f6;
  --cream: #fbf3f2;
  --radius: 14px;
  --pad: clamp(16px, 4vw, 24px);
  /* the theme injects this; sections.json + theme.css read it */
  --secondary-main: #9e1b2f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing — without it the width/height attrs make both
   dimensions definite, CSS drops aspect-ratio, and object-fit crops the sides. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Archivo, Inter, system-ui, sans-serif; letter-spacing: -.02em; margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--pad); }

/* --- Tier C: notice bar ------------------------------------------- */
.notice {
  background:#0E2F62 !important;
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: .01em;
}
.notice b { font-weight: 600; }

/* --- Tier C: header ----------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hdr__bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hdr__burger { display: grid; gap: 4px; padding: 6px; margin-left: -6px; }
.hdr__burger i { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.hdr__logo { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.hdr__logo img { width: 38px; height: 38px; border-radius: 8px; }
.hdr__name { font-family: Archivo, sans-serif; font-weight: 800; font-size: 15px; line-height: 1.05; white-space: nowrap; }
.hdr__tag { font-size: 9.5px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.hdr__search { display: none; }
.nav-link { display: none; }
.hdr__icons { display: flex; align-items: center; gap: 2px; }
.iconbtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ink);
}
.iconbtn:hover { background: var(--surface); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--cart { position: relative; }
.cartdot {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 3px;
}
@media (min-width: 900px) {
  .hdr__burger { display: none; }
  .hdr__logo { margin-right: 20px; }
  .hdr__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 420px;
    margin-right: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--muted);
    font-size: 13.5px;
  }
  .hdr__search svg { width: 16px; height: 16px; flex: none; }
  .nav-link { display: flex !important; gap: 20px !important; font-size: 13.5px !important; font-weight: 500 !important; margin-right: 6px !important; }
  .nav-link a { padding: 6px 0 !important; border-bottom: 2px solid transparent !important; }
  .nav-link a:hover { border-color: var(--brand); color: var(--brand); }
  .iconbtn--search { display: none; }
}

/* --- Tier A: StoreBanner (hero) ----------------------------------- */
.hero { position: relative; background: var(--brand); }
.hero img { width: 100%; height: auto; }
.hero__copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--pad) clamp(22px, 6vw, 34px);
  color: #fff;
  max-width: 560px;
}
.hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f0c78f;
  margin-bottom: 8px;
}
.hero h1 {
  font-size: clamp(27px, 7.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 10px;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(13.5px, 3.4vw, 15px);
  color: #f3dade;
  margin-bottom: 18px;
  max-width: 42ch;
  text-wrap: pretty;
}
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: Archivo, sans-serif;
  white-space: nowrap;
}
.btn--primary { background: #fff; color: var(--brand); }
.btn--primary:hover { background: #f6e9eb; }
.btn--ghost { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 900px) {
  .hero__copy {
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 max(var(--pad), calc((100vw - 1200px) / 2 + var(--pad)));
    max-width: 46%;
  }
  .hero__sub { margin-bottom: 22px; }
}

/* --- Tier A: category tiles --------------------------------------- */
.sec { padding: clamp(34px, 5.5vw, 52px) 0; }
.sec--tint { background: var(--surface); }
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sechead h2 { font-size: clamp(20px, 3.2vw, 27px); font-weight: 800; }
.section-heading-container{ font-size: clamp(20px, 3.2vw, 27px); font-weight: 800; }
.sechead p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.viewall { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.viewall:hover { color: var(--brand); }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat { text-align: center; }
.cat img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cream);
  transition: transform .18s ease;
}
.cat:hover img { transform: translateY(-3px); }
.cat span { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.section-heading
{
font-size: clamp(20px, 3.2vw, 27px) !important; font-weight: 800 !important;
font-family: Archivo, Inter, system-ui, sans-serif !important;
    letter-spacing: -.02em !important;
}
.section-heading-container
{
flex-direction: row-reverse !important;
justify-content: center !important;
}

/* --- Tier A: ProductGridCollection (TWO_CARD) --------------------- */
.prow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prow--scroll { grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
.prow--scroll::-webkit-scrollbar { display: none; }
.prow--scroll > * { scroll-snap-align: start; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pcard__media { position: relative; background: var(--cream); }
.pcard__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pcard__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--deal);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: .02em;
}
.pcard__wish {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.pcard__wish svg { width: 14px; height: 14px; }
.pcard__body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pr-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pr-sale-price { font-size: 15px; font-weight: 800; font-family: Archivo, sans-serif; }
.pr-mrp-price { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.pr-discount  { font-size: 11.5px; font-weight: 700; background-color: var(--deal);  color:#fff;}
.pr-outlined-button {
  margin-top: 2px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 8px;
  padding: 7px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  font-family: Archivo, sans-serif;
}
.pr-outlined-button:hover { background: var(--navy); color: #fff; }
/* re-assert `none` on the scroller: .prow's explicit columns are declared later
   at equal specificity and would otherwise win, collapsing the swiper's cards */
@media (min-width: 640px) { .prow { grid-template-columns: repeat(3, 1fr); gap: 16px; } .prow--scroll { grid-template-columns: none; grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .prow { grid-template-columns: repeat(5, 1fr); } .prow--scroll { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* --- Tier A: BannerCollection ------------------------------------- */
/* Title + CTA are live text (props), not baked into the image — so the copy
   stays editable, indexable, and survives swapping the photo underneath.
   content_position "bottom-left": both crops leave that corner empty.
   BannerCollection renders NO eyebrow and NO subtitle — title + cta_text are the
   only copy props it has, and there is no centre-left content_position. The empty
   top-left is therefore intentional negative space. Don't "fix" it by baking words
   into the photo: that breaks admin editing, SEO, and double-prints on a re-roll. */
.promo { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.promo img { width: 100%; }
.promo__content { position: absolute; left: 0; bottom: 0; padding: clamp(20px, 4vw, 44px); color: #fff; max-width: 100%; }
.promo__title { font-size: clamp(23px, 5.6vw, 40px); font-weight: 800; line-height: 1.08; margin-bottom: 14px; text-wrap: balance; max-width: 16ch; }
.promo__cta { display: inline-flex; padding: 11px 22px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; font-family: Archivo, sans-serif; }
.promo--partywear .promo__cta { color: var(--brand); }
.promo--gadgets .promo__cta { color: var(--navy); }
.promo--lifestyle .promo__cta { color: var(--brand); }
@media (min-width: 640px) { .promo__content { max-width: 50%; } }

/* --- Tier A: LargeCollectionCard (3-across) ----------------------- */
/* Title + CTA are live props, same rule as the promo banners — the photos leave
   the lower-left empty for them. NOTE: LargeCollectionCard has no
   content_position prop, so the real overlay placement is theme-fixed; this
   bottom-left rendering needs confirming against the live easy-checkout theme. */
.feats { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feat { position: relative; border-radius: var(--radius); overflow: hidden; display: block; }
.feat img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s ease; }
.feat:hover img { transform: scale(1.03); }
.feat__content { position: absolute; left: 0; bottom: 0; padding: clamp(16px, 2.4vw, 26px); color: #fff; }
.feat__title { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; line-height: 1.08; margin-bottom: 11px; max-width: 9ch; text-wrap: balance; }
.feat__cta { display: inline-flex; padding: 8px 17px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; font-family: Archivo, sans-serif; }
.feat--u999 .feat__cta { color: #7e1426; }
.feat--new .feat__cta { color: var(--navy); }
.feat--office .feat__cta { color: #3a3640; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(3, 1fr); } }

/* Photographic banners need a scrim; flat brand-field banners do not.
   Measured p95 contrast for white text in the copy area:
     desktop crop  2.51:1 bare -> 6.91:1 at 45%
     mobile  crop  1.80:1 bare -> 5.40:1 at 45%  (her cream outfit fills the
                                                  copy area, so mobile is the
                                                  brighter of the two — 35%
                                                  passed desktop but failed here)
   One value has to serve both, so 45%.
   NOTE: this mirrors BannerCollection's native `overlay: "true"`, but that prop is
   a boolean — the THEME picks the actual opacity. If the live theme's overlay is
   lighter than this, the headline needs re-checking against the real render. */
.promo__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }

/* --- Tier C: footer ----------------------------------------------- */
/* No margin-top: the trust band above is tinted, so a margin here rendered as a
   stray white stripe between two coloured blocks — it read as a bug, not spacing. */
.ftr { background: var(--navy-ink); color: #c9d3e4; }
.ftr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: clamp(32px, 5vw, 46px) var(--pad) 26px; max-width: 1200px; margin: 0 auto; }
.ftr__brand { grid-column: 1 / -1; max-width: 34ch; }
.ftr__logo { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ftr__logo img { width: 40px; height: 40px; border-radius: 8px; background: #fff; }
.ftr__logo b { font-family: Archivo, sans-serif; font-size: 16px; color: #fff; }
.ftr__brand p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.ftr__social { display: flex; gap: 8px; }
.ftr__social a { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .09); display: grid; place-items: center; color: #fff; }
.ftr__social a:hover { background: var(--brand); }
.ftr__social svg { width: 15px; height: 15px; }
.ftr h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 11px; font-family: Inter, sans-serif; font-weight: 700; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.ftr ul a:hover { color: #fff; }
.ftr__contact li { display: flex; gap: 9px; line-height: 1.45; }
/* first-child only — a bare `span` here also hit the address text and crushed it to 15px */
.ftr__contact li > span:first-child { flex: none; width: 16px; height: 16px; margin-top: 1px; opacity: .65; }
.ftr__contact li > span:first-child svg { display: block; width: 100%; height: 100%; }
.ftr__contact li > :last-child { min-width: 0; }
.ftr__paylabel { margin: 16px 0 7px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8fa2bf; }
.ftr__pay { display: flex; gap: 6px; flex-wrap: wrap; }
.ftr__pay i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  padding: 5px 8px;
  color: #b9c6dc;
  line-height: 1;
}
.ftr__bar { border-top: 1px solid rgba(255, 255, 255, .1); padding: 15px var(--pad); text-align: center; font-size: 11.5px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 768px) {
  .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .ftr__brand { grid-column: auto; }
}
.notice
{
padding:3px !important;
color:#fff !important;
}
.search-container {
  padding: 0px 10px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
 display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        max-width: 420px;
        margin-right: auto;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 14px;
        color: var(--muted);
        font-size: 13.5px;
        height:40px !important;
}
.search-container .input-container {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  width: 280px !important;
}

#desktop-search-bar {
  color: #000 !important;
}
.input-container .search-box {
        border-bottom: 1px solid transparent !important;
}
.nav-link
{
font-weight:600 !important;
}
.nav-link:hover
{
color:#EA403F !important;
}
}
.cat-card-img
{
border-radius:20px !important;
}
.app-bar .title
{
color:#000;
font-size:16px !important;
}
.app-bar .punchline a
{
color:#000;
font-size:14px !important;
}
.sec {
    padding: clamp(0px, 2.5vw, 1px) 0;
}
.app-bar-main {
        background-color: white;
    }
:root {
--header-accent: #000000;
}
.badge
{    
color: var(--header-badge-main);
    background-color: var(--header-badge-contrast-text);
    }
.cat-card-img {
    border-radius:20px !important;
}
.product-card {
  border: 1px solid #e2d9cb !important;
  border-radius: 16px;
  overflow: hidden;
}
/* ===== Product card alignment and button polish ===== */

.product-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2d9cb !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(23, 19, 26, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 47, 98, 0.28) !important;
  box-shadow: 0 12px 28px rgba(23, 19, 26, 0.14);
}

/* Product title */
.product-card-name,
.pr-title {
  width: 100%;
  margin: 10px auto 6px !important;
  padding: 0 10px;
  text-align: center !important;
  font-weight: 600;
  line-height: 1.4;
}

/* Price wrapper */
.product-card-price,
.pcard__price {
  width: 100%;
  display: flex !important;
  align-items: baseline;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  text-align: center !important;
}

/* Sale price */
.product-card-price,
.pr-sale-price {
  text-align: center !important;
  font-weight: 800;
}

/* MRP price */
.product-card-mrp-price,
.pr-mrp-price {
  text-align: center !important;
  color: #6b6570;
  text-decoration: line-through;
}

/* Product action button */
.product-card-action-btn,
.pr-outlined-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: calc(100% - 24px);
  min-height: 42px;
  margin: 12px auto 14px !important;
  padding: 10px 18px !important;

  border: 1.5px solid #0e2f62 !important;
  border-radius: 999px !important;

  background: #ffffff;
  color: #0e2f62 !important;

  text-align: center !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  box-shadow: 0 4px 12px rgba(14, 47, 98, 0.14);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.product-card-action-btn:hover,
.pr-outlined-button:hover {
  background: #0e2f62 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(14, 47, 98, 0.22);
}

/* Mobile */
@media (max-width: 600px) {
  .product-card-name,
  .pr-title {
    padding: 0 7px;
    font-size: 12.5px;
  }

  .product-card-action-btn,
  .pr-outlined-button {
    width: calc(100% - 16px);
    min-height: 40px;
    margin: 10px 10px !important;
    padding: 9px 12px !important;
    font-size: 12px;
  }
}
.product-card-action-row
{
padding-left:10px;
padding-right:10px;
}
.flex {
    display: flex;
    justify-content: center;
}
/* ===== FIX: SALE PRICE + MRP IN ONE ROW ===== */

/* Parent containing sale price and MRP */
.product-card .flex:has(.product-card-price):has(.product-card-mrp-price),
.product-card :has(> .product-card-price):has(> .product-card-mrp-price) {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;

  width: 100% !important;
  margin: 8px 0 16px !important;
  padding: 0 10px !important;
}

/* Keep ₹ symbol and amount together */
.product-card .product-card-price,
.product-card .product-card-mrp-price {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;

  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Sale price */
.product-card .product-card-price {
  color: #201c24 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  gap: 3px !important;
}

/* MRP directly next to sale price */
.product-card .product-card-mrp-price {
  color: #79737d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  gap: 2px !important;
}

/* Prevent inner ₹ and amount elements from wrapping */
.product-card .product-card-price *,
.product-card .product-card-mrp-price * {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
  .product-card .flex:has(.product-card-price):has(.product-card-mrp-price),
  .product-card :has(> .product-card-price):has(> .product-card-mrp-price) {
    gap: 7px !important;
    margin-bottom: 12px !important;
    padding-inline: 6px !important;
  }

  .product-card .product-card-price {
    font-size: 16px !important;
  }

  .product-card .product-card-mrp-price {
    font-size: 12px !important;
  }
}
.lucide-search
{
display:none;
}
.lucide-menu
{
display:none;
}
.mob-notice-bar
{
display:none;
}