@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Marcellus&display=swap");

/* ==========================================================================
   Rani Raga — preview page CSS v2 (inlined into index.html by build_page.py)
   Style reference: nishorama.com — soft grey canvas, rounded media (24px),
   extra-round blocks (44px), pill controls, Archivo UI, floating header.
   Simulates the Shoopy `classic` theme + our CSS customisations for:
   tokens, Tier-C notice/header, and native (Tier-A) sections — StoreBanner,
   ProductCategoriesV2, ProductGridCollection (TWO_CARD), BannerCollection.
   Tier-B blocks + the custom footer are styled by theme.css (.sx- namespaced).
   ========================================================================== */
:root {
  --secondary-main: #013319;           /* logo-extracted bottle green — brand + primary action */
  --rr-ivory: #FAF5EE;                 /* logo-extracted ivory */
  --rr-bg: #F4F3EF;                    /* soft warm-grey canvas (ref: #F5F5F5) */
  --rr-well: #E8E5DE;                  /* image wells / panels */
  --rr-white: #FFFFFF;
  --rr-ink: #1F1E1B;
  --rr-text: #45433E;
  --rr-muted: #666259;
  --rr-line: #DDD9D0;
  --rr-deal: #9C3D2B;                  /* discount text — never the CTA colour */
  --rr-display: "Marcellus", "Times New Roman", serif;
  --rr-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rr-r: 24px;                        /* card / tile radius */
  --rr-r-xl: 28px;                     /* big blocks (44px from tablet) */
  --rr-gutter: 14px;
  --rr-sec: 44px;
  --rr-head-h: 64px;
}
body {background: #f4f3ef;}
@media (min-width: 768px) { :root { --rr-gutter: 22px; --rr-sec: 64px; --rr-r-xl: 44px; --rr-head-h: 72px; } }


button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--secondary-main); outline-offset: 2px; }
.rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- pills (the reference's core control) */
.rr-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--rr-white);
  color: var(--rr-ink); font: 500 13px/1 var(--rr-sans); white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: background .2s, color .2s; }
.rr-pill:hover { background: var(--secondary-main); color: var(--rr-ivory); }
.rr-pill--lg { height: 44px; padding: 0 22px; font-size: 14.5px; font-weight: 600; }
.rr-pill--line { background: transparent; box-shadow: inset 0 0 0 1px var(--rr-line); font-size: 12.5px; height: 32px; }
.rr-pill--dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rr-deal); }
.rr-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--rr-white); color: var(--rr-ink); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rr-circle svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- shared section chrome */
.rr-sec { padding: var(--rr-sec) var(--rr-gutter) 0; }
.rr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rr-h2 { margin: 0; font: 700 clamp(21px, 4.8vw, 30px)/1.15 var(--rr-sans); letter-spacing: -.01em; color: var(--secondary-main); }
.rr-script { font-family: var(--rr-display); font-weight: 400; font-size: 1.12em; }

/* ---------------------------------------------------------------- notice (Tier C) */
.rr-notice { background: var(--secondary-main); color: var(--rr-ivory); text-align: center; }
.rr-notice p { margin: 0; padding: 8px var(--rr-gutter); font: 500 11.5px/1.3 var(--rr-sans); letter-spacing: .06em; }
.rr-notice__more { display: none; }
@media (min-width: 768px) { .rr-notice__more { display: inline; } }

/* ---------------------------------------------------------------- header (Tier C) — floats over the hero */
.rr-header { position: sticky; top: 0; z-index: 50; height: var(--rr-head-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 0 var(--rr-gutter); transition: background .25s, box-shadow .25s; }
.rr-header.is-scrolled { background: rgba(244,243,239,.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rr-line); }
.rr-header__left, .rr-header__right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rr-header__right { justify-content: flex-end; }
.rr-pill--menu { background: var(--secondary-main); color: var(--rr-ivory); padding: 0 12px; }
.rr-pill--menu svg { width: 16px; height: 16px; }
.rr-pill--menu span { display: none; }
.rr-header__nav { display: none; }
.rr-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.rr-logo { background: var(--rr-white); border-radius: 999px; padding: 6px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.rr-logo img { height: 26px; width: auto; }
.rr-hide-sm { display: none; }
.rr-cartpill { gap: 10px; padding: 0 12px; }
.rr-cartpill span { border-left: 1px solid var(--rr-line); padding-left: 10px; }
@media (min-width: 768px) {
  .rr-pill--menu span { display: inline; }
  .rr-logo { padding: 7px 18px; } .rr-logo img { height: 34px; }
  .rr-hide-sm { display: grid; }
}
@media (min-width: 1280px) {
  .rr-pill--menu { display: none; }
  .rr-header__nav { display: block; }
  .rr-logo img { height: 38px; }
}

/* ---------------------------------------------------------------- hero · StoreBanner (Tier A) — full bleed under the floating header */
.rr-hero { position: relative; margin-top: calc(-1 * var(--rr-head-h)); overflow: hidden; background: var(--rr-well); }
.rr-hero__track { display: grid; }
.rr-hero__slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.rr-hero__slide.is-on { opacity: 1; visibility: visible; }
.rr-hero__slide img { width: 100%; height: calc(100svh - 34px); min-height: 560px; max-height: 820px; object-fit: cover; object-position: 50% 12%; }
.rr-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(1,24,12,.72) 100%); pointer-events: none; }
.rr-hero__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(15vw + 30px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 var(--rr-gutter); text-align: center; }
.rr-hero__cap { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: rgba(15,20,16,.5); backdrop-filter: blur(6px); color: var(--rr-ivory); font: 500 12.5px/1 var(--rr-sans); }
.rr-hero__word { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; pointer-events: none;
  font: 400 15.4vw/0.86 var(--rr-display); letter-spacing: .01em; color: var(--rr-ivory); white-space: nowrap; }
.rr-hero__dots { position: absolute; z-index: 3; right: var(--rr-gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.rr-hero__dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(250,245,238,.5); }
.rr-hero__dots button.is-on { background: var(--rr-white); height: 22px; border-radius: 6px; }
@media (min-width: 768px) {
  .rr-hero__slide img { height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: none; object-position: 50% 10%; }
  .rr-hero__copy { bottom: calc(14.6vw + 22px); }
  .rr-hero__word { font-size: 14.6vw; bottom: 4px; }
}
@media (min-width: 1024px) {
  .rr-hero__slide img { aspect-ratio: 1920 / 800; min-height: 560px; }
  .rr-hero__word { font-size: min(14.6vw, 230px); }
  .rr-hero__copy { bottom: calc(min(14.6vw, 230px) + 18px); }
}

/* ---------------------------------------------------------------- product rows · ProductGridCollection (Tier A) + TWO_CARD, reference card style */
.rr-row { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--rr-gutter)); padding: 0 var(--rr-gutter) 4px; scrollbar-width: none; }
.rr-row::-webkit-scrollbar { display: none; }
.rr-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .rr-row { grid-auto-columns: 40%; } }
@media (min-width: 768px) { .rr-row { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); gap: 12px; } }
@media (min-width: 1024px) { .rr-row { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; margin: 0; padding: 0 0 4px; } }

.rr-card { min-width: 0; }
.rr-card__img { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--rr-r); background: var(--rr-well); }
.rr-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .8s ease; }
.rr-card__alt { opacity: 0; }
@media (hover: hover) { .rr-card__img:hover .rr-card__alt { opacity: 1; } .rr-card__img:hover img { transform: scale(1.03); } }
.rr-card__tag, .rr-card__off { position: absolute; z-index: 2; left: 10px; height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 600; box-shadow: none; }
.rr-card__tag { top: 10px; }
.rr-card__off { top: 10px; color: var(--rr-deal); }
.rr-card__tag + .rr-card__off { top: 40px; }
.rr-card__wish { position: absolute; z-index: 2; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--rr-ink); }
.rr-card__wish svg { width: 16px; height: 16px; }
.rr-card__dots { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; }
.rr-card__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); }
.rr-card__dots i:first-child { background: #fff; }
.rr-card__body { display: flex; align-items: flex-start; gap: 8px; padding: 10px 4px 0 8px; }
.rr-card__meta { flex: 1; min-width: 0; }
.product-card-name { font-weight: 800px !important; color: var(--rr-ink) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.product-card-sale-price { font-size: 18px !important; color: var(--rr-muted) !important; }
.product-card-mrp-price { font-size: 16px !important; color: var(--rr-ink) !important; font-weight: 600 !important; }
.rr-card__price s { margin-left: 4px; }
.rr-card__var { margin-top: 2px; font-size: 12px; color: var(--rr-muted); }
.rr-card__add { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px 0 8px; border-radius: 999px; background: var(--rr-white);
  color: var(--rr-ink); font: 600 12.5px/1 var(--rr-sans); box-shadow: 0 1px 2px rgba(0,0,0,.08); flex-shrink: 0; transition: background .2s, color .2s; }
.rr-card__add svg { width: 14px; height: 14px; }
.rr-card__add:hover { background: var(--secondary-main); color: var(--rr-ivory); }

/* ---------------------------------------------------------------- categories · ProductCategoriesV2 (Tier A) — rounded tiles + pill labels */
.rr-cat__row { list-style: none; margin: 0 calc(-1 * var(--rr-gutter)); padding: 0 var(--rr-gutter) 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 46%;
  gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rr-cat__row::-webkit-scrollbar { display: none; }
.rr-cat__tile { scroll-snap-align: start; }
.rr-cat__tile a { position: relative; display: block; overflow: hidden; border-radius: var(--rr-r); background: var(--rr-well); }
.rr-cat__tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.rr-cat__tile a:hover img { transform: scale(1.04); }
.rr-cat__label { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); font-weight: 600; }
@media (min-width: 640px) { .rr-cat__row { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .rr-cat__row { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; overflow: visible; } }

/* ---------------------------------------------------------------- promo · BannerCollection (Tier A) — extra-round block */
.rr-promo { padding: var(--rr-sec) var(--rr-gutter) 0; }
.rr-promo__link { position: relative; display: block; overflow: hidden; border-radius: var(--rr-r-xl); }
.rr-promo__link img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.rr-promo__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(1,24,12,.6) 100%); }
.rr-promo__copy { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rr-promo__h { margin: 0; color: var(--rr-ivory); font: 400 clamp(30px, 6vw, 56px)/1 var(--rr-display); }
@media (min-width: 768px) { .rr-promo__link img { aspect-ratio: 1560 / 620; } .rr-promo__copy { padding: 36px 40px; } }

/* ---------------------------------------------------------------- jewellery row · ProductGridCollection (Tier A, background #013319)
   Bottom half of the green "Rani Raga Jewels" panel (top half = Tier-B jewel-intro-1). Store CSS customisation. */
.sx.rr-jewel-grid { width: auto; }   /* .sx sets width:100%; the side margins would overflow */
.rr-jewel-grid { margin: 0 var(--rr-gutter); padding: 18px 18px 26px; background: var(--secondary-main); border-radius: 0 0 var(--rr-r-xl) var(--rr-r-xl); }
.rr-jewel-grid .rr-h2 { color: var(--rr-ivory); font-size: clamp(19px, 3.6vw, 24px); }
.rr-jewel-grid .rr-pill--line { color: var(--rr-ivory); box-shadow: inset 0 0 0 1px rgba(250,245,238,.4); }
.rr-jewel-grid .rr-pill--line:hover { background: var(--rr-ivory); color: var(--secondary-main); }
.rr-jewel-grid .rr-row { margin: 0 -18px; padding: 0 18px 4px; }
.rr-jewel-grid .rr-card__img { background: #0A3D22; }
.rr-jewel-grid .product-card-name { color: var(--rr-ivory); }
.rr-jewel-grid .rr-card__price, .rr-jewel-grid .rr-card__var { color: rgba(250,245,238,.72); }
.rr-jewel-grid .rr-card__price b { color: var(--rr-ivory); }
@media (min-width: 640px) { .rr-jewel-grid .rr-row { grid-auto-columns: 34%; } }
@media (min-width: 768px) { .rr-jewel-grid { padding: 18px 44px 40px; } .rr-jewel-grid .rr-row { margin: 0 -44px; padding: 0 44px 4px; grid-auto-columns: calc((100% - 2 * 12px) / 2.7); } }
@media (min-width: 1024px) { .rr-jewel-grid .rr-row { margin: 0; padding: 0 0 4px; grid-auto-columns: calc((100% - 4 * 14px) / 5); } }

/* Rani Raga — generated Tier-B CSS (uploads to site_settings.sx_css_location).
   Style reference: nishorama.com — rounded media, pill controls, soft grey canvas.
   Every selector is namespaced under .sx; brand colour comes from the theme var
   --secondary-main (#013319 on this store) and the store font (Archivo). */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-green: var(--secondary-main, #013319);
  --sx-ivory: #FAF5EE;
  --sx-white: #FFFFFF;
  --sx-well: #E8E5DE;
  --sx-ink: #1F1E1B;
  --sx-muted: #666259;
  --sx-line: #DDD9D0;
  --sx-deal: #9C3D2B;
  --sx-display: "Marcellus", "Times New Roman", serif;
  --sx-r: 24px;
  --sx-r-xl: 28px;
  --sx-gap: 14px;
  --sx-sec: 44px;
  width: 100%;
}
@media (min-width: 768px) { .sx { --sx-gap: 22px; --sx-sec: 64px; --sx-r-xl: 44px; } }
.sx .sx-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sx .sx-h2 { margin: 0; font-size: clamp(21px, 4.8vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--sx-green); }
.sx .sx-script { font-family: var(--sx-display); font-weight: 400; font-size: 1.12em; }
.sx .sx-pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line); color: var(--sx-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background .2s, color .2s; }
.sx .sx-pill-btn:hover { background: var(--sx-green); color: var(--sx-ivory); box-shadow: none; }
.sx .sx-pill-btn--solid { background: var(--sx-green); color: var(--sx-ivory); box-shadow: none; }
.sx .sx-pill-btn--solid:hover { background: #0B4A2A; }
.sx .sx-pill-btn--ivory { background: var(--sx-ivory); color: var(--sx-green); box-shadow: none; height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; }
.sx .sx-pill-btn--ivory:hover { background: var(--sx-white); color: var(--sx-green); }
.sx .sx-pill-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp { padding: 14px 0 0; }
.sx-usp .sx-usp__list { list-style: none; margin: 0; padding: 0 var(--sx-gap); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sx-usp .sx-usp__list::-webkit-scrollbar { display: none; }
.sx-usp .sx-usp__pill { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--sx-white); color: var(--sx-ink); font-size: 12.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sx-usp .sx-usp__pill svg { width: 18px; height: 18px; fill: none; stroke: var(--sx-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) { .sx-usp .sx-usp__list { justify-content: center; } }
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:collage-1 */
/* Endless marquee, mirrors nishorama "home-gallery-move": 2 unique blocks + 2 duplicates,
   translated -50% linearly forever. Pure CSS; pauses on hover; still for reduced-motion. */
.sx-collage { padding: var(--sx-sec) 0 0; }
.sx-collage .sx-row-head { padding: 0 var(--sx-gap); }
.sx-collage .sx-collage__viewport { overflow: hidden; container-type: inline-size; }
.sx-collage .sx-collage__track { display: flex; width: max-content; animation: sx-collage-move 60s linear infinite; will-change: transform; }
.sx-collage .sx-collage__viewport:hover .sx-collage__track,
.sx-collage .sx-collage__viewport:focus-within .sx-collage__track { animation-play-state: paused; }
.sx-collage .sx-collage__block { flex: none; box-sizing: border-box; width: 175cqw; height: 112cqw; padding-right: 10px;
  display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 10px; }
.sx-collage .sx-collage__stack { display: grid; gap: 10px; min-height: 0; }
.sx-collage .sx-collage__stack:first-of-type { grid-template-rows: 0.9fr 1.4fr; }
.sx-collage .sx-collage__stack:last-of-type { grid-template-rows: 1.4fr 0.9fr; }
.sx-collage .sx-collage__tile { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: var(--sx-r); background: var(--sx-well); }
.sx-collage .sx-collage__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .8s ease; }
.sx-collage .sx-collage__tile:hover img { transform: scale(1.04); }
.sx-collage .sx-collage__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--sx-white); color: var(--sx-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
@keyframes sx-collage-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .sx-collage .sx-collage__block { width: 100cqw; height: min(52cqw, 780px); padding-right: 18px; gap: 18px; }
  .sx-collage .sx-collage__stack { gap: 18px; }
  .sx-collage .sx-collage__tile { border-radius: 40px; }
  .sx-collage .sx-collage__tag { left: 22px; bottom: 22px; height: 34px; padding: 0 16px; font-size: 13px; }
}
@media (min-width: 1280px) { .sx-collage .sx-collage__tile { border-radius: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-collage .sx-collage__track { animation: none; }
  .sx-collage .sx-collage__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .sx-collage .sx-collage__block { scroll-snap-align: start; }
  .sx-collage .sx-collage__block[aria-hidden="true"] { display: none; }
}
/* END shoopy-gen:collage-1 */

/* BEGIN shoopy-gen:jewel-intro-1 */
/* Top half of the green "Rani Raga Jewels" panel; the Artificial Jewellery product row
   (native ProductGridCollection, background #013319) continues it underneath. The jewellery
   photography is shot on the same bottle green, so images melt into the panel. */
.sx-jewel { padding: var(--sx-sec) var(--sx-gap) 0; }
.sx-jewel .sx-jewel__panel { display: grid; gap: 22px; padding: 26px 18px 10px; border-radius: var(--sx-r-xl) var(--sx-r-xl) 0 0;
  background: var(--sx-green); color: rgba(250, 245, 238, .88); }
.sx-jewel .sx-jewel__eyebrow { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(250, 245, 238, .12); color: var(--sx-ivory); font-size: 12px; font-weight: 600; }
.sx-jewel .sx-jewel__h { margin: 14px 0 10px; font-family: var(--sx-display); font-weight: 400; font-size: clamp(40px, 9vw, 78px); line-height: .98; color: var(--sx-ivory); }
.sx-jewel .sx-jewel__h em { font-style: normal; color: #D9BE86; }
.sx-jewel .sx-jewel__p { margin: 0 0 18px; max-width: 42ch; font-size: 14.5px; line-height: 1.55; }
.sx-jewel .sx-jewel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sx-jewel .sx-jewel__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(250, 245, 238, .35); color: var(--sx-ivory); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.sx-jewel .sx-jewel__chip span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(250, 245, 238, .14); display: grid; place-items: center; font-size: 11.5px; }
.sx-jewel .sx-jewel__chip:hover { background: var(--sx-ivory); color: var(--sx-green); }
.sx-jewel .sx-jewel__chip:hover span { background: rgba(1, 51, 25, .1); }
.sx-jewel .sx-jewel__media { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; align-items: end; }
.sx-jewel .sx-jewel__img { position: relative; display: block; overflow: hidden; border-radius: var(--sx-r); text-decoration: none; }
.sx-jewel .sx-jewel__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .8s ease; }
.sx-jewel .sx-jewel__img:hover img { transform: scale(1.04); }
.sx-jewel .sx-jewel__img--b { margin-bottom: 28px; }
.sx-jewel .sx-jewel__tag { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border-radius: 999px; background: var(--sx-white); color: var(--sx-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
@media (min-width: 768px) {
  .sx-jewel .sx-jewel__panel { gap: 30px; padding: 44px 44px 14px; }
  .sx-jewel .sx-jewel__h { font-size: 64px; }
  .sx-jewel .sx-jewel__media { gap: 16px; }
  .sx-jewel .sx-jewel__img { border-radius: 40px; }
  .sx-jewel .sx-jewel__img--b { margin-bottom: 56px; }
  .sx-jewel .sx-jewel__tag { left: 16px; bottom: 16px; height: 32px; padding: 0 14px; font-size: 12.5px; }
}
@media (min-width: 1024px) {
  .sx-jewel .sx-jewel__panel { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; padding: 48px 44px 14px; }
  .sx-jewel .sx-jewel__h { font-size: clamp(56px, 5.4vw, 78px); }
}
/* END shoopy-gen:jewel-intro-1 */

/* BEGIN shoopy-gen:shade-1 */
.sx-shade { padding: var(--sx-sec) var(--sx-gap) 0; }
.sx-shade .sx-shade__box { background: var(--sx-well); border-radius: var(--sx-r-xl); padding: 24px 16px 18px; }
.sx-shade .sx-shade__radio { position: absolute; opacity: 0; pointer-events: none; }
.sx-shade .sx-shade__tabs { display: flex; gap: 8px; margin: 14px 0 16px; overflow-x: auto; scrollbar-width: none; }
.sx-shade .sx-shade__tabs::-webkit-scrollbar { display: none; }
.sx-shade .sx-shade__tab { flex-shrink: 0; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--sx-white);
  color: var(--sx-ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.sx-shade .sx-shade__panel { display: none; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sx-shade .sx-shade__panel::-webkit-scrollbar { display: none; }
.sx-shade #sx-shade-silk:checked ~ .sx-shade__tabs .sx-shade__tab--silk,
.sx-shade #sx-shade-muslin:checked ~ .sx-shade__tabs .sx-shade__tab--muslin,
.sx-shade #sx-shade-viscose:checked ~ .sx-shade__tabs .sx-shade__tab--viscose,
.sx-shade #sx-shade-prints:checked ~ .sx-shade__tabs .sx-shade__tab--prints { background: var(--sx-green); color: var(--sx-ivory); }
.sx-shade #sx-shade-silk:checked ~ .sx-shade__panels .sx-shade__panel--silk,
.sx-shade #sx-shade-muslin:checked ~ .sx-shade__panels .sx-shade__panel--muslin,
.sx-shade #sx-shade-viscose:checked ~ .sx-shade__panels .sx-shade__panel--viscose,
.sx-shade #sx-shade-prints:checked ~ .sx-shade__panels .sx-shade__panel--prints { display: grid; }
.sx-shade .sx-shade__radio:focus-visible ~ .sx-shade__tabs { outline: 2px solid var(--sx-green); outline-offset: 4px; border-radius: 999px; }
.sx-shade .sx-shade__tile { position: relative; display: block; overflow: hidden; border-radius: var(--sx-r); scroll-snap-align: start; text-decoration: none; }
.sx-shade .sx-shade__tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s ease; }
.sx-shade .sx-shade__tile:hover img { transform: scale(1.04); }
.sx-shade .sx-shade__cap { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); height: 28px;
  padding: 0 10px 0 6px; border-radius: 999px; background: var(--sx-white); color: var(--sx-ink); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sx-shade .sx-shade__cap i { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
@media (min-width: 640px) { .sx-shade .sx-shade__panel { grid-auto-columns: 30%; } }
@media (min-width: 1024px) {
  .sx-shade .sx-shade__box { padding: 40px 40px 36px; }
  .sx-shade .sx-shade__panel { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); gap: 14px; overflow: visible; }
  .sx-shade .sx-shade__cap { left: 12px; bottom: 12px; height: 32px; font-size: 13px; }
}
/* END shoopy-gen:shade-1 */

/* BEGIN shoopy-gen:offer-1 */
.sx-offer { padding: var(--sx-sec) var(--sx-gap) 0; display: flex; flex-direction: column; align-items: center; }
.sx-offer .sx-offer__rig { width: min(100%, 640px); transform-origin: 50% 0; animation: sx-offer-sway 4s ease-in-out infinite; }
.sx-offer .sx-offer__hang { position: relative; width: 100%; height: 64px; }
.sx-offer .sx-offer__hang i { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(#bdb8ad, #d6d2c8); transform-origin: 50% 0; animation: sx-offer-rope 4s ease-in-out infinite; }
.sx-offer .sx-offer__hang i:last-child { animation-delay: -.4s; }
.sx-offer .sx-offer__hang i::after { content: ""; position: absolute; left: -6px; bottom: -4px; width: 14px; height: 10px; border-radius: 3px; background: #a9a497; }
.sx-offer .sx-offer__hang i:first-child { left: 22%; }
.sx-offer .sx-offer__hang i:last-child { right: 22%; }
.sx-offer .sx-offer__sign { width: 100%; display: grid; gap: 10px; padding: 12px; border-radius: 26px; background: var(--sx-white);
  box-shadow: 0 3px 0 #e1ddd3, 0 6px 0 #d4cfc3, 0 26px 40px -18px rgba(0, 0, 0, .35); }
.sx-offer .sx-offer__lead { border-radius: 18px; background: var(--sx-well); padding: 18px 18px 16px; }
.sx-offer .sx-offer__lead b { display: block; font-size: clamp(26px, 6vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--sx-green); }
.sx-offer .sx-offer__lead em { font-family: var(--sx-display); font-style: normal; font-weight: 400; }
.sx-offer .sx-offer__lead span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--sx-deal); }
.sx-offer .sx-offer__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sx-offer .sx-offer__stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 14px;
  background: var(--sx-white); box-shadow: inset 0 0 0 1px var(--sx-line); text-align: center; }
.sx-offer .sx-offer__stats b { font-size: 20px; font-weight: 700; line-height: 1; color: var(--sx-ink); }
.sx-offer .sx-offer__stats span { font-size: 10.5px; line-height: 1.2; color: var(--sx-muted); background: var(--sx-well); border-radius: 6px; padding: 3px 6px; }
.sx-offer .sx-offer__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.sx-offer .sx-offer__cta .sx-pill-btn { height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; }
@media (min-width: 768px) {
  .sx-offer .sx-offer__sign { grid-template-columns: 1.2fr 1fr; align-items: stretch; padding: 14px; }
  .sx-offer .sx-offer__lead { display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; }
  .sx-offer .sx-offer__stats { grid-template-columns: repeat(2, 1fr); }
}
/* gentle swing, mirrors nishorama "move-banner" / "move-rope-*" (4s ease-in-out) */
@keyframes sx-offer-sway {
  0%, 100% { transform: perspective(900px) rotateY(3deg) translateX(-8px) rotate(1.6deg); }
  50% { transform: perspective(900px) rotateY(3deg) translateX(8px) rotate(-1.6deg); }
}
@keyframes sx-offer-rope { 0%, 100% { transform: rotate(1.5deg); } 50% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .sx-offer .sx-offer__rig, .sx-offer .sx-offer__hang i { animation: none; } }
/* END shoopy-gen:offer-1 */

/* BEGIN shoopy-gen:footer */
.sx-footer { padding: var(--sx-sec) var(--sx-gap) 18px; }
.sx-footer .sx-footer__panel { position: relative; overflow: hidden; border-radius: var(--sx-r-xl); background: var(--sx-green); color: rgba(250, 245, 238, .86); padding: 30px 20px 0; }
.sx-footer .sx-footer__top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.sx-footer .sx-footer__brand, .sx-footer .sx-footer__contact { grid-column: 1 / -1; }
.sx-footer .sx-footer__brand img { height: 44px; width: auto; display: block; }
.sx-footer .sx-footer__brand p { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.5; max-width: 40ch; }
.sx-footer .sx-footer__social { display: flex; gap: 8px; }
.sx-footer .sx-footer__social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(250, 245, 238, .12); display: grid; place-items: center; color: var(--sx-ivory); }
.sx-footer .sx-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sx-footer .sx-footer__col h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--sx-ivory); }
.sx-footer .sx-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.sx-footer .sx-footer__col a { color: inherit; text-decoration: none; }
.sx-footer .sx-footer__col a:hover { color: var(--sx-white); text-decoration: underline; }
.sx-footer .sx-footer__contact b { color: var(--sx-ivory); font-weight: 600; }
.sx-footer .sx-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sx-footer .sx-footer__pay i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(250, 245, 238, .12); color: var(--sx-ivory); }
.sx-footer .sx-footer__word { font-family: var(--sx-display); font-size: 18.5vw; line-height: .78; text-align: center; white-space: nowrap; color: rgba(250, 245, 238, .1);
  margin: 20px -20px -2px; pointer-events: none; user-select: none; }
.sx-footer .sx-footer__copy { margin: 12px 0 14px; text-align: center; font-size: 12px; color: var(--sx-muted); }
.sx-footer .sx-footer__popular { border-radius: var(--sx-r-xl); background: var(--sx-well); padding: 20px; display: grid; gap: 14px; }
.sx-footer .sx-footer__pop h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--sx-ink); }
.sx-footer .sx-footer__pop p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--sx-muted); }
.sx-footer .sx-footer__pop a { color: inherit; text-decoration: none; }
.sx-footer .sx-footer__pop a:hover { color: var(--sx-green); text-decoration: underline; }
.sx-footer .sx-footer__pop span { margin: 0 8px; color: var(--sx-line); }
@media (min-width: 768px) {
  .sx-footer .sx-footer__panel { padding: 44px 44px 0; }
  .sx-footer .sx-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; }
  .sx-footer .sx-footer__brand, .sx-footer .sx-footer__contact { grid-column: auto; }
  .sx-footer .sx-footer__word { font-size: 17vw; margin: 28px -44px -4px; }
  .sx-footer .sx-footer__popular { padding: 26px 32px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .sx-footer .sx-footer__top { grid-template-columns: repeat(3, 1fr); }
  .sx-footer .sx-footer__brand, .sx-footer .sx-footer__contact { grid-column: span 3; }
}
/* END shoopy-gen:footer */
.sx-usp .sx-usp__list {
    list-style: none;
    margin: 0;
    bottom-padding: 10px !important;
}
.desktop-header-main {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
 .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 34px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;

  background: white !important;
  color: var(--rr-ink) !important;

  font: 500 13px/1 var(--rr-sans) !important;
  white-space: nowrap !important;
  text-decoration: none !important;

  transition: background .2s ease, color .2s ease !important;
}

 .nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  background: var(--secondary-main) !important;
  color: var(--rr-ivory) !important;
}
.header-container {
        padding: 7px 0 !important;
         }
.nav-item {
padding:5px !important;
}
.sx-import-wrap
{
max-width:1500px !important;
}
.sx-usp .sx-usp__pill
{
 background: var(--secondary-main) !important;
  color: var(--rr-ivory) !important;
}
.sx-usp .sx-usp__pill:hover
{

 color: var(--secondary-main) !important;
  background-color: var(--rr-ivory) !important;
box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;

}
.product-card-image
{
border-radius:20px !important;
}
.header-transparent {
    --blur-width: 0px !important;
}
.logo {
    height: 52px;
    width: auto;
    background-color: white;
    padding: 8px;
    border-radius: 29px;
}
/* =========================================================
   Rani Raga — header to match design (desktop + mobile)
   Paste into the store's Custom CSS.
   ========================================================= */

/* ---------- Solid / scrolled state (.header-solid, .luxury-header): ivory bar like the design ---------- */
header:is(.header-solid,.luxury-header){
  background:rgba(244,243,239,.9)!important;
  backdrop-filter:blur(10px)!important;
  border-bottom:0!important;
  box-shadow:0 1px 0 #DDD9D0;
}

/* ---------- Desktop (1280px and up) ---------- */
@media (min-width:1280px){
  header:is(.header-transparent,.header-solid,.luxury-header){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:16px;
    padding:0 22px!important;
    height:80px!important;
    --blur-width:0px!important;
  }
  header.header-transparent{background:transparent!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .header-container{display:contents!important}

  /* logo: centre column */
  header:is(.header-transparent,.header-solid,.luxury-header) .main-header{grid-column:2;grid-row:1;padding:0!important;margin:0!important}

  /* menu: left column */
  header:is(.header-transparent,.header-solid,.luxury-header) .desktop-nav-wrapper{grid-column:1;grid-row:1;padding:0!important;min-width:0}
  header:is(.header-transparent,.header-solid,.luxury-header) .desktop-nav{display:flex!important;flex-wrap:nowrap;gap:6px;justify-content:flex-start}
  header:is(.header-transparent,.header-solid,.luxury-header) .nav-item{padding:0!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .nav-link{padding:0 10px!important;font-size:12px!important}

  /* icons: right column, white circles */
  header:is(.header-transparent,.header-solid,.luxury-header) .utility-bar{display:block!important;position:static!important;grid-column:3;grid-row:1;padding:0!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .utility-bar-content{padding:0!important;height:auto!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .utility-icons{gap:6px!important;justify-content:flex-end}
  header:is(.header-transparent,.header-solid,.luxury-header) .icon-button,
  header:is(.header-transparent,.header-solid,.luxury-header) .search-icon{
    width:38px;height:38px;padding:0!important;border-radius:50%;
    background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.06);
    display:grid!important;place-items:center;cursor:pointer;
  }
  header:is(.header-transparent,.header-solid,.luxury-header) .icon-button svg,
  header:is(.header-transparent,.header-solid,.luxury-header) .search-icon svg{width:17px;height:17px;stroke:var(--rr-ink,#1F1E1B)!important}
}

/* Wide screens: full-size menu pills like the design */
@media (min-width:1760px){
  header:is(.header-transparent,.header-solid,.luxury-header) .nav-link{padding:0 14px!important;font-size:13px!important}
}

/* ---------- Mobile / tablet (below 1280px) ---------- */
@media (max-width:1279px){
  header:is(.header-transparent,.header-solid,.luxury-header){--blur-width:0px!important}
  header.header-transparent{background:transparent!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .header-container{width:100%;padding:0!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .main-header{width:100%!important;margin:0!important;padding:0 14px!important;height:72px;justify-content:space-between}

  /* below 1280px use the hamburger layout (hide desktop menu + utility icons) */
  header:is(.header-transparent,.header-solid,.luxury-header) .desktop-nav-wrapper,
  header:is(.header-transparent,.header-solid,.luxury-header) .utility-bar{display:none!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-buttons,
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-header-icons{display:flex!important}
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-buttons,
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-header-icons{gap:6px!important}

  /* icon buttons: white circles */
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-button,
  header:is(.header-transparent,.header-solid,.luxury-header) .icon-button-mobile,
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-header-icons .icon-button{
    width:34px!important;height:34px!important;padding:0!important;border-radius:50%;
    background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.06);
    display:grid!important;place-items:center;
  }
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-button svg,
  header:is(.header-transparent,.header-solid,.luxury-header) .icon-button-mobile svg,
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-header-icons .icon-button svg{
    width:17px;height:17px;stroke:var(--rr-ink,#1F1E1B)!important;
  }

  /* menu button: green pill, ivory icon */
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-button:first-child{
    width:40px!important;border-radius:999px;background:var(--secondary-main,#013319)!important;
  }
  header:is(.header-transparent,.header-solid,.luxury-header) .mobile-menu-button:first-child svg{
    width:16px;height:16px;stroke:var(--rr-ivory,#FAF5EE)!important;
  }
}

/* ---------- Logo: white pill, ONE fixed size at every screen width ---------- */
header:is(.header-transparent,.header-solid,.luxury-header) .beauty-link{
  display:flex!important;align-items:center;flex:none;
  background:none!important;padding:0!important;box-shadow:none!important;
  width:auto!important;height:auto!important;
}
header:is(.header-transparent,.header-solid,.luxury-header) .sh-header-logo{
  box-sizing:border-box;
  height:52px!important;width:auto!important;
  background-color:#fff;padding:8px;border-radius:29px!important;
}
.product-swiper-slide {
    --product-in-row: 5 !important;
}

/* Large desktop */
@media (max-width: 1200px) {
    .product-swiper-slide {
        --product-in-row: 4.5 !important;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .product-swiper-slide {
        --product-in-row: 3.5 !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .product-swiper-slide {
        --product-in-row: 2.2 !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .product-swiper-slide {
        --product-in-row: 2 !important;
    }
}
.heading-title {
    
    padding-bottom: 18px !important;
}
.sx-import-wrap:has(> section.sx-collage[data-sx-slug="collage-1"]){
  padding:0!important;
  margin:0!important;
}
section.sx-collage[data-sx-slug="collage-1"]{
  padding:0!important;
}
section.sx-collage[data-sx-slug="collage-1"] .sx-collage__block{
  padding-right:0!important;
}
.product-card-discount-amount
{
display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--rr-white);
    color: var(--rr-ink);
    font: 500 13px / 1 var(--rr-sans);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background .2s, color .2s;
}
.HtmlRenderer-component { background: #f4f3ef !important;}
.product-card-info {background: #f4f3ef; !important}
.product-card {    background-color: #f4f3ef !important}
.product-card:hover .product_slide-cta {
    background-color: #f4f3ef !important;
    outline: 12px solid #f4f3ef !important;
}
.product-info {
    background-color: unset !important;
}
@media (max-width: 480px) {
    .product-swiper-slide {
        width: calc((100% - var(--gap-between-cards) * (var(--product-in-row) - 1)) / var(--product-in-row)) !important;
    }
}