/* ===========================================================================
   SG Creation brand palette
   ---------------------------------------------------------------------------
   The colours are taken from the SG Creation mark -- rose, ruby, emerald,
   ink -- and defined once in :root below; see the note there. The theme
   shipped green (#629D23) and the file first carried the previous boutique's
   plum and wine; the roles and variable names date from then, the values do
   not.

   Loaded from layout.tsx with a <link> AFTER assets/css/style.css. That order
   is what makes these win -- same specificity, so the later sheet decides.
   Do not move this into globals.css: Next injects imported CSS ahead of the
   <link> tags in <head>, and the theme would overwrite every value here.

   The theme uses var(--color-primary) in 218 places, so redefining the
   variables covers nearly everything. The handful of spots that hardcoded the
   green hex were converted to use these variables instead -- see the note in
   style.css.
   ========================================================================= */

:root {
  /* --- The house colours -----------------------------------------------------
     ROSE IS THE BRAND COLOUR: #C2185B, the shop's pick, on a cream page
     (#F5F1E8). The site was gold before this; every gold has been replaced
     by the matching step of a rose scale, so the same roles keep the same
     lightness steps and every contrast ratio still holds: the brand rose is
     5.6:1 under white text, the mid-tone stays a highlight.

       --rose-dark    #C2185B  the brand colour: header, buttons, links
       --rose         #D81B60  the mid-tone: prices, highlights, rules, eyebrows
       --rose-light   #F48FB1  the highlight: lettering and accents on dark
       --wine         #8E0F40  rose's pressed and hover state
       --wine-deep    #4A0A24  the shadow, deep wine: dark panels
       --blush        #F8D0DF  the tint: soft borders, text on dark
       --ruby         #96193A  the one loud accent, and "info"
       --emerald      #1F7A45  success only
       --ink          #1C1614  the lettering: headings

     Everything below reads a ROLE (--color-primary and friends), never a raw
     colour, so the next change to the palette happens here and nowhere else.
     The one exception is the handful of shadows and gradients written as
     rgb() literals, which cannot take a var() with an alpha; they are listed
     in the note at "Literal colours" at the very end of this file.       */
  --rose-dark: #c2185b;
  --rose: #d81b60;
  --rose-light: #f48fb1;
  --wine: #8e0f40;
  --wine-deep: #4a0a24;
  --blush: #f8d0df;
  --ruby: #96193a;
  --emerald: #1f7a45;
  --ink: #1c1614;

  /* --- Buttons ------------------------------------------------------------
     Every filled CTA (Buy Now, Add to cart, Checkout, Pay, Add address, Shop
     Now, Download) reads these. They are the brand rose and its wine, named
     for the job so the buttons can move on their own if they ever need to.
     The gradient that goes over them is --rose-metal at the end of this file. */
  --btn: var(--rose-dark);
  --btn-dark: var(--wine);
  --btn-deep: #6b0a30;
  --btn-light: #e8478a;
  --btn-ring: rgb(194 24 91 / 30%);

  /* --- Accent ----------------------------------------------------------- */
  --color-primary: var(--rose-dark);
  --color-primary-fill: var(--rose);
  --color-primary-hover: var(--wine);
  /* DERIVED, not one of the house colours: this paints whole section
     backgrounds and input fills, and even champagne is too strong behind
     body text. A soft blush, rose taken to a 5% tint of the page, so it
     belongs to the palette without competing with anything set on it. */
  --color-primary-soft: #faedf2;
  --color-primary-ring: rgb(194 24 91 / 45%);

  /* --- Text ------------------------------------------------------------- */
  /* Headings in the ink, as the lettering in the mark is -- not in rose.
     Rose serif headings over rose buttons on a cream page is one colour
     shouting, and rose text on cream is low-contrast besides; black type
     lets the rose around it do the work. */
  --color-heading-1: var(--ink);
  --color-secondary: var(--rose-dark);
  /* Body copy stays a warm neutral. Running paragraphs in a house colour costs
     contrast against a tinted page for no gain -- the palette shows in the
     controls and the surfaces around it. */
  --color-body: #57534e;

  /* --- Status ------------------------------------------------------------
     Success, danger and warning are NOT house colours: they mean "this
     worked", "this failed", "be careful", and a shopper reads those from the
     usual green/red/amber before they read anything about a brand. Success
     takes the mark's emerald, a green like any other to a shopper. Warning
     is deliberately NOT the brand colour: a warning that looked
     like the brand would not read as a warning. Info takes the ruby. */
  --color-success: var(--emerald);
  --color-danger: #ef4444;
  --color-warning: #d97706;
  --color-info: var(--ruby);

  /* --- Surfaces --------------------------------------------------------- */
  --color-bg: #F5F1E8;
  --color-surface: #F5F1E8;
  --color-border: #eadfcc;

  /* Swiper draws its own chevron with this, falling back to --swiper-theme-color
     -- which is its stock #007aff BLUE. The hero's arrows were showing that blue
     glyph behind their Font Awesome icon because nothing ever set it. */
  --swiper-navigation-color: #ffffff;
  --swiper-theme-color: var(--color-primary);
}

/* ===========================================================================
   TYPE

   Cormorant Garamond for headings, Inter for everything else. The theme sets
   Barlow on `body` and on h1-h6 -- both bare-element selectors, so these win on
   source order alone; brand.css is linked after style.css.

   --font-primary and --font-secondary are redefined as well, because the theme
   reads them in a handful of places this file does not name individually.
   =========================================================================== */
:root {
  --font-primary: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-secondary: "Cormorant Garamond", "Times New Roman", serif;

  /* h4 was 18px in the theme's scale, which is where most of the Cormorant on
     this site was set. A high-contrast serif with a small x-height reads a size
     down from the sans beside it at the best of times, and at 18px it was
     landing barely above body text -- so these headings did not read as
     headings at all. 22px is where the face starts to carry.

     Overridden here rather than edited in style.css: brand.css is linked after
     the theme, so redefining the variable moves every h4 and .h4 at once, and
     the theme file stays untouched for the next update. */
  --h4: 22px;
}

body,
button,
input,
select,
textarea,
.rts-btn {
  font-family: var(--font-primary);
}

/* 600, not 700: Cormorant is a high-contrast serif and its bold is heavy
   enough to look like a different typeface. The slight negative tracking is
   what keeps a display serif from reading as loose at large sizes. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.title-left,
.section-title {
  font-family: var(--font-secondary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Section headings get the size a display serif is drawn for. Cormorant has a
   small x-height, so matched pixel-for-pixel against Barlow it reads a size
   smaller than whatever sits beside it. */
.title-left {
  font-size: 34px;
}

/* SMALL HEADINGS STAY IN THE SANS.
   These are h4s and h6s by markup, but they are interface labels, not display
   type: a product name at 13.5px, a cart row, a search suggestion, a drawer
   section. A high-contrast serif at that size loses its thin strokes on an
   ordinary screen -- the hairlines are below one device pixel -- and the whole
   grid starts to look blurred rather than elegant. The serif earns its place
   above roughly 20px. */
.single-shopping-card-one .body-content .title,
.single-cart-area-list .information .title,
.hsearch-name,
.deepam-drawer-title,
.rec-drill-bar,
.product-discription-tab-shop button,
.cart-total-area-start-right .subtotal span,
.single-short-service-area-start .information .title,
.single-feature-area .information .title {
  font-family: var(--font-primary);
  letter-spacing: 0;
}

/* Prices read as data, not prose: tabular figures keep the rupee columns in a
   grid aligned to each other whatever the digits are. */
.single-shopping-card-one .price-area,
.cart-total-area-start-right .price,
.single-cart-area-list .price p,
.single-cart-area-list .subtotal p {
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
}

/* EVERY .bg_light-1 BAND IS THE PAGE CREAM, #F5F1E8.
   The theme paints this class grey -- `background: #F3F4F6 !important`
   (style.css:17029) -- and it is on the home hero band, the footer, every
   breadcrumb bar and its separator, and the cart, wishlist, login, register,
   product and contact sections. Nothing without !important can beat that
   rule, which is why the plain override that used to sit here did nothing.

   One rule for all of them rather than one per section: the grey was a
   single decision by the theme, so the cream is a single decision here, and
   a section added later with this class cannot come out grey by accident. */
.bg_light-1 {
  background: var(--color-surface) !important;
}

/* Primary buttons: the theme sets the background from --color-primary, but
   its hover state hardcoded a darker green. */
.rts-btn.btn-primary:hover {
  background-color: var(--btn-dark);
  border-color: var(--btn-dark);
}

/* --- position: sticky, made to work ---------------------------------------
   THE BLOCKER: the theme sets `body { overflow-x: hidden }` (style.css) and,
   between 992px and 1199px, `body { overflow: hidden }` outright.
   Per spec, when one axis of overflow is not `visible` the other computes to
   `auto` -- so body becomes a scroll container. Every position:sticky
   descendant then resolves against body's box, which is as tall as the whole
   page and never scrolls, so sticky silently does nothing. No error, no
   warning; the rules just have no effect.

   `clip` is the fix rather than `visible`: it still prevents sideways scroll
   from an overflowing element, which is why the theme set hidden, but it does
   NOT establish a scroll container, so sticky keeps working. */
html,
body {
  overflow-x: clip;
}

body {
  overflow-y: visible;
}

/* Undoes the three breakpoint rules that set `body { overflow: hidden }`.
   The sticky sidebar is only active from 992px up, but the 992-1199 band is
   inside that range. */
@media only screen and (max-width: 1199px) {
  body {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* --- HOW TALL THE STICKY HEADER IS, in one place --------------------------
   Everything that pins below the header has to clear it, and every one of them
   was clearing it BY EYE -- three separate `top: 100px` declarations against a
   header that is 141px. The account sidebar showed what that costs: its first
   41px, all of the Dashboard row, sat underneath the header and the menu
   looked like it began at Order. The shop's filter sidebar and the checkout
   summary had the same 41px tucked away, less visibly.

   A named value cannot be right in one place and 41px out in another.

   1200px AND UP -- only the wine nav strip sticks; the logo/search row scrolls
   away. So it is .deepam-nav-row's 56px min-height and nothing else: the bar
   has no vertical padding of its own.

   BELOW THAT -- only .deepam-header-primary sticks and the search row scrolls
   away, so it is the brand row alone: a 74px logo in 6px of padding. (The logo
   drops to 64px under 480px, which no sticky element on the site is alive at --
   they all stop at 992px.) */
:root {
  --sticky-header: 56px;
}

@media only screen and (max-width: 1199px) {
  :root {
    --sticky-header: 86px;
  }
}

/* --- List-view card actions -----------------------------------------------
   Cart is icon-only, Buy Now carries the label. */
.list-cart-icon-btn {
  /* width:auto defeats the theme's global `button { width: 100% }`; without it
     this claims the whole row and Buy Now drops beneath it. */
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Square, and it compresses before Buy Now does -- there is no label to
     protect, so padding is the first thing that can give. */
  padding: 12px clamp(10px, 1vw, 14px);
  min-width: 40px;
  font-size: 15px;
}

.list-buy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px clamp(12px, 1.6vw, 24px);
  font-size: 14px;
  /* The label must never break across two lines. */
  white-space: nowrap;
}

/* ONE ROW AT EVERY WIDTH.
   The theme sets, at style.css:18572:
     .single-shopping-card-one .cart-counter-action {
       justify-content: space-between; flex-wrap: wrap;
     }
   TWO classes -- specificity (0,2,0). An earlier attempt here used a bare
   `.cart-counter-action` (0,1,0), which loses regardless of source order, so
   nothing changed. Every selector below therefore carries the same ancestor.

   flex-wrap: wrap is what made 90% and 100% browser zoom differ -- zoom
   changes how many CSS pixels the column is, and at the narrower one Buy Now
   no longer fitted and dropped to a second line. nowrap removes the reflow;
   the row compresses instead.

   For that to work something must be allowed to shrink. Both buttons are
   flex: 0 0 auto, so the quantity stepper gives -- hence min-width: 0, because
   a flex item's default min-width is auto, which refuses to shrink past its
   content and would push the overflow back out. */
.single-shopping-card-one .cart-counter-action {
  display: flex;
  align-items: center;
  /* flex-start, not space-between: the theme's setting pushed the stepper and
     the cart icon to opposite ends with a gap between them. */
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.single-shopping-card-one .cart-counter-action .quantity-edit {
  flex: 0 1 auto;
  min-width: 0;
  /* The theme fixes this at 92px; allow it to be the element that compresses. */
  width: auto;
  max-width: 92px;
}

/* The theme sets `padding: 8px 16px !important` on buttons in this row, so
   these need !important purely to reach it. */
.single-shopping-card-one .cart-counter-action .list-cart-icon-btn {
  padding: 10px clamp(10px, 1vw, 13px) !important;
}

.single-shopping-card-one .cart-counter-action .list-buy-btn {
  padding: 10px clamp(12px, 1.4vw, 20px) !important;
}

.list-cart-icon-btn:disabled,
.list-buy-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Equal-height product cards -------------------------------------------
   Cards in a row were different heights for three reasons, all fixed here:
     1. titles wrapping to one line or two,
     2. images of differing aspect ratios,
     3. the card sizing to its content rather than to the row.

   Scoped with :not(.discount-offer) because the list view reuses this class
   for a horizontal card -- forcing that into a full-height flex column would
   break it. */
.single-shopping-card-one:not(.discount-offer) {
  /* Bootstrap columns already stretch to the tallest in the row; this makes
     the card fill the column it sits in rather than stopping at its content. */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.single-shopping-card-one:not(.discount-offer) .body-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Actions sit on the card's bottom edge, so they line up across the row even
   when the text above them differs in length. */
.single-shopping-card-one:not(.discount-offer) .cart-counter-action {
  margin-top: auto;
}

/* Titles occupy two lines whether or not they need two. Without this a
   one-line name makes its card shorter than its neighbours, and a very long
   name pushes everything below it down. */
.single-shopping-card-one:not(.discount-offer) .body-content .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

/* One aspect ratio for every thumbnail. Product photography arrives at
   whatever shape it was shot in, and a portrait next to a square is the
   largest single source of ragged card heights.

   COVER, SO THE CARD IS FILLED EDGE TO EDGE. This was briefly `contain` on
   white, so that no photograph was ever cropped; the cost was a band of white
   around every picture and a grid that read as stamps rather than as
   photographs. The crop is bounded instead: uploads are stored square
   (mediaSpec.js targets 1200 x 1200) and the frame here is square, so a current
   photograph loses nothing to it. */
.single-shopping-card-one:not(.discount-offer) .thumbnail-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Card wishlist heart --------------------------------------------------
   Pinned to the top-right of the product image and always visible. The theme
   kept wishlist inside .action-share-option, which only appears on hover --
   unreachable on a touchscreen, where there is no hover state at all.

   The wrapper is not positioned by the theme, so position:relative is set here
   to give this something to anchor to. */
.image-and-action-area-wrapper {
  position: relative;
}

.card-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: var(--color-heading-1);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  transition: 0.2s;
}

.card-wishlist-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* The discount badge is top-LEFT, so the two never collide. */

/* --- Checkout: Review -> Payment ------------------------------------------ */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 36px;
}

.checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.checkout-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--color-border);
  color: var(--color-body);
  background: var(--color-surface);
}

.checkout-step.is-active .checkout-step-dot,
.checkout-step.is-done .checkout-step-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.checkout-step-label {
  font-size: 13px;
  color: var(--color-body);
}

.checkout-step.is-active .checkout-step-label {
  color: var(--color-primary);
  font-weight: 600;
}

.checkout-step-line {
  width: clamp(80px, 22vw, 260px);
  height: 2px;
  background: var(--color-border);
  /* Sits on the dots' centre line, not the labels'. */
  margin: 0 12px 22px;
}

.checkout-step-line.is-done {
  background: var(--color-primary);
}

.checkout-heading {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--color-heading-1);
}

.checkout-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.checkout-delivery-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading-1);
}

.checkout-line {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--color-border);
}

.checkout-line img {
  width: 74px;
  height: 88px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.checkout-line-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--color-heading-1);
}

.checkout-line-price {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.checkout-line-price s {
  color: var(--color-body);
  opacity: 0.7;
}

.checkout-off {
  color: var(--color-success);
  font-weight: 600;
}

.checkout-line-meta {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
}

.checkout-sold-by {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--color-body);
}

.checkout-address {
  padding: 18px;
}

.checkout-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.checkout-address p {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-body);
}

.checkout-change {
  width: auto;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.checkout-address-form {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.checkout-field-wide,
.checkout-save-address {
  grid-column: 1 / -1;
}

.checkout-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-heading-1);
}

.checkout-field input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.checkout-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.checkout-save-address {
  justify-self: start;
}

/* Payment options */
.checkout-pay {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 20px;
  margin-bottom: 14px;
  cursor: pointer;
}

.checkout-pay.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.checkout-pay-amount {
  display: flex;
  flex-direction: column;
  min-width: 110px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-heading-1);
}

.checkout-pay-amount s {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-body);
}

.checkout-save-tag {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success);
}

.checkout-pay-name {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-heading-1);
}

.checkout-pay-tick {
  color: var(--color-primary);
  font-size: 20px;
}

.checkout-back {
  width: auto;
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* The login card centres everything; the Back control sits top-left of it
   like a page's own back arrow, not centred over the logo. It is pulled up
   into the card's top padding rather than pushing the logo down. */
.login-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 16px;
  left: 22px;
  margin: 0;
}

.registration-wrapper-1 {
  position: relative;
}

/* --- THE WHOLE LOGIN CARD FITS THE SCREEN --------------------------------
   Back, logo, title, both fields and the button, with no scrolling, on a
   laptop -- which is what most people sign in on.

   The theme built this page for a tall desktop and it did not fit one: 60px
   of section gap, then a card padded 100px top and bottom, a 90px logo with
   30px under it, 30px between fields and 50px-tall inputs. The password
   field was below the fold before anything had been typed.

   Nothing is removed. Every gap is cut to roughly its half, which is still
   comfortable spacing for six elements. The numbers below come to about
   620px from the top of the page to the bottom of the card -- the 142px
   header included -- which clears the ~660px a 1366x768 laptop shows. The
   REGISTER page shares these classes and has more fields, so it may still
   scroll; it is shorter than it was either way.
   ------------------------------------------------------------------------- */
.rts-register-area.rts-section-gap {
  padding: 24px 0;
}

.rts-register-area .registration-wrapper-1 {
  padding: 40px 60px 30px;
}

.rts-register-area .registration-wrapper-1 .logo-area img {
  max-width: 56px;
  margin-bottom: 10px;
}

.rts-register-area .registration-wrapper-1 .title {
  margin-bottom: 14px;
  font-size: 26px;
}

/* The fields are a COLUMN, not the width of the card. The theme let them
   run the full 800px of the card, so an email address sat in a box wide
   enough for a paragraph -- a shape that reads as a search bar rather than a
   form. 420px is about as wide as a long address needs, and the button and
   the sign-up line follow it so the whole form reads as one stack. */
.rts-register-area .registration-form {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.rts-register-area .registration-form .input-wrapper {
  margin-bottom: 16px;
}

.rts-register-area .registration-form .input-wrapper label {
  margin-bottom: 6px;
}

.rts-register-area .registration-form .input-wrapper input {
  height: 46px;
}

.rts-register-area .registration-form .another-way-to-registration p {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .login-back {
    top: 14px;
    left: 18px;
  }

  .rts-register-area .registration-wrapper-1 {
    padding: 44px 24px 30px;
  }
}

/* --- "Only 3 in stock" -------------------------------------------------------
   Shown under the stepper on the cart and beside it on the checkout, and ONLY
   once the shopper is actually at the limit -- a running count under every row
   turns a basket into a stock report. Amber rather than the danger red: this is
   a boundary, not an error, and the line they have is still perfectly orderable. */
/* The checkout's "Only 3 left", beside the stepper on its row. The cart had
   one of these under its own stepper and it is gone: the quantity column is
   12% wide, and any wording there crowded the SubTotal beside it. The cart
   still stops at the stock -- the plus button is simply disabled. */
.checkout-qty-cap {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-warning);
}

/* Price panel */
.checkout-summary {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 22px;
  position: sticky;
  /* --sticky-header, not the 100px this used to say: the header is 141px, so
     the panel's top 41px -- its "Price Details" heading -- pinned underneath
     it. Only live from 1200px up (see below), where the token is the full
     two-bar height. */
  top: calc(var(--sticky-header) + 16px);
}

/* Below 1200px the columns stack, so the panel is simply the last thing on the
   page -- sticky would pin it over the address form it is meant to follow. The
   only sticky element at these widths is the header's brand row. */
@media only screen and (max-width: 1199px) {
  .checkout-summary {
    position: static;
  }
}

.checkout-summary-title {
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--color-heading-1);
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  color: var(--color-body);
}

/* The line under Delivery Charges that says what the parcel weighed and which
   band it fell in. Subordinate to the row above rather than a row of its own:
   it explains a figure, it does not add one, so it sits tight under it, smaller
   and quieter, with no amount on the right to line up with. */
.checkout-summary-note {
  padding: 0 0 8px;
  margin-top: -4px;
  font-size: 12px;
  color: var(--color-body);
  opacity: 0.75;
}

/* The coupon box in Price Details. Separated from the rows around it by a rule
   above and below, because it is the one thing in that column a shopper acts on
   rather than reads. */
/* The saved-address chips at checkout -- "Address 1", "Address 2".
   Pill-shaped, and the chosen one takes the SITE's primary colour rather than
   the orange that was hardcoded here. */
/* The "Delivered Across India / Track Your Order / Handpicked Weaves / Offers
   On Now" band, on CHECKOUT only.
   Wrapped rather than styled on the component, because the same band is wanted
   on every other page it appears on -- the rule is about where it sits, not
   about what it is. 767px is the breakpoint the rest of this file already uses
   for phones. */
@media (max-width: 767px) {
  .checkout-service-band {
    display: none;
  }
}

.checkout-address-chip {
  width: auto;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-body);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.checkout-address-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.checkout-address-chip.is-chosen {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

/* Hover must not repaint the chosen chip back to an outline -- it is already
   the strongest state there is. */
.checkout-address-chip.is-chosen:hover {
  color: #ffffff;
}

.checkout-coupon {
  padding: 10px 0;
  margin: 4px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.checkout-coupon__entry {
  display: flex;
  gap: 8px;
  /* Nothing in here may reach past the summary column it sits in. */
  max-width: 100%;
}

/* WIDTH: AUTO IS LOAD-BEARING, on the input and on the buttons below.
   The theme sets `width: 100%` on every input, button, select and textarea
   (style.css, "Forms Styles"). In a flex row that becomes each child's
   flex-basis, so the button asked for the full width of the column and -- being
   flex-shrink: 0 so it would not squash its label -- kept it, leaving the input
   a sliver and pushing the pair out of the panel. Resetting the width lets
   flex-grow and flex-basis mean what they say. */
.checkout-coupon__entry input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.checkout-coupon__entry input::placeholder {
  text-transform: none;
}

.checkout-coupon__entry button,
.checkout-coupon__applied button {
  flex: 0 0 auto;
  /* See the note above: without this the theme's 100% makes the button the
     whole row. */
  width: auto;
  height: 38px;
  padding: 0 16px;
  /* The label is two words; wrapping it would make the button taller than the
     input beside it. */
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-heading-1);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.checkout-coupon__entry button:disabled,
.checkout-coupon__applied button:disabled {
  opacity: 0.6;
  cursor: default;
}

.checkout-coupon__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  font-size: 14px;
}

/* The code and its status. Allowed to shrink and wrap so a long coupon name --
   an auto-applied offer carries its NAME here, not a short code -- pushes
   nothing out of the panel. */
.checkout-coupon__applied span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Quieter than Apply: removing a discount is not the action being encouraged. */
.checkout-coupon__applied button {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body);
  background: transparent;
  border: 1px solid var(--color-border);
}

/* The "an offer is already applied" line under the code box. Quieter than an
   error and quieter than the box itself -- it is context, not a problem. */
.checkout-coupon__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-body);
  opacity: 0.8;
}

.checkout-coupon__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #c62828;
}

.checkout-neg {
  color: var(--color-success);
}

.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading-1);
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
  padding-top: 14px;
}

.checkout-saved {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
}

.checkout-note {
  margin: 14px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-body);
}

.checkout-warn {
  color: var(--color-danger);
}

.checkout-cta {
  width: 100%;
  max-width: none;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 575px) {
  .checkout-address-form {
    grid-template-columns: 1fr;
  }
}

/* --- Buy Now verification modal -------------------------------------------
   Deliberately self-contained: the theme's modal styles are tied to its own
   markup, and reusing them would couple this to components being removed. */
.buynow-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgb(0 0 0 / 55%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.buynow-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: 12px;
  padding: 32px 28px 28px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
  /* A short viewport (or the on-screen keyboard on a phone) must not trap the
     submit button off-screen. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.buynow-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-body);
  cursor: pointer;
  font-size: 12px;
}

.buynow-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.buynow-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.buynow-item-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading-1);
}

.buynow-item-price {
  margin: 0;
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 700;
}

.buynow-title {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--color-heading-1);
}

.buynow-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-body);
}

.buynow-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-heading-1);
}

.buynow-phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.buynow-phone-row:focus-within {
  border-color: var(--color-primary);
}

.buynow-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--color-primary-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-body);
}

.buynow-input {
  width: 100%;
  border: 0;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  background: transparent;
}

/* Standalone fields (email, OTP) need their own border, since they are not
   inside .buynow-phone-row. */
.buynow-text,
.buynow-code {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.buynow-code {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.buynow-text:focus,
.buynow-code:focus {
  border-color: var(--color-primary);
}

.buynow-fineprint {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-body);
  opacity: 0.75;
}

.buynow-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-danger);
}

.buynow-submit {
  width: 100%;
  max-width: none;
  margin-top: 18px;
  justify-content: center;
}

.buynow-linkbtn {
  width: auto;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.buynow-linkbtn:disabled {
  color: var(--color-body);
  cursor: default;
}

.buynow-resend {
  display: block;
  margin: 14px auto 0;
}

.buynow-done {
  text-align: center;
}

/* Auto side margins, not text-align: the panel above already centres its text,
   but .rts-btn.btn-primary is `display: block; max-width: max-content`, so the
   Continue button shrink-wraps to its label and a block-level box cannot be
   moved by the parent's text-align -- it stayed hard left of centred text. */
.buynow-done .buynow-submit {
  margin: 18px auto 0;
}

.buynow-done i {
  font-size: 44px;
  color: var(--color-success);
  margin-bottom: 12px;
  display: block;
}

/* --- Shop pagination ------------------------------------------------------
   One centred row. text-center alone left this to inline flow, which depends
   on the buttons staying inline-level -- and the theme's global
   `button { width: 100% }` (style.css) means any button that escapes
   .rts-btn's max-width:max-content claims a whole line. An explicit flex row
   does not care either way.

   align-items:center keeps the "Page 1 of 3" text on the buttons' centre line
   rather than their baseline, which sits low against a padded button. */
.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.shop-pagination-status {
  font-size: 14px;
  color: var(--color-body);
  white-space: nowrap;
}

/* A round, quiet control rather than a filled button the width of the word
   "Previous". The count between the two says which way each one goes, so the
   arrow only has to be pressable -- and a grid of products should be the
   loudest thing on the page it is on. */
.shop-pagination-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shop-pagination-arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Disabled arrows should look disabled: at the first and last page one of the
   two can do nothing, and an arrow that looks pressable and is not is the
   control people click twice and then report as broken. */
.shop-pagination-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Header sizing --------------------------------------------------------
   The Black I mark is a wide wordmark (371x136), so at its natural size it
   dominates the bar. Capped by width with height:auto so the aspect ratio is
   preserved -- setting both would squash it. */
.logo-area .logo,
.logo-area img {
  max-width: 150px;
  height: auto;
}

/* Equal space either side of the logo.
   The two sides are NOT symmetric by default, so equal padding does not give
   equal space:
     right -- .logo-search-category-wrapper sets gap: 35px between the logo and
              the Categories button.
     left  -- nothing but the container's own padding (--bs-gutter-x, 12px).
   The artwork adds none of its own either; its content spans x 0..360 of a 371
   canvas, so the mark sits hard against whatever edge precedes it.

   So the left padding is the SHORTFALL against that 35px gap, not a matching
   value. Written as a calc against the same variables rather than a magic 23px,
   so it stays correct if either the gap or the container gutter changes.
   --logo-gap is the knob: it must match the wrapper's gap. */
:root {
  --logo-gap: 35px;
}

.logo-area {
  display: inline-flex;
  align-items: center;
  padding-left: calc(var(--logo-gap) - var(--bs-gutter-x, 0.75rem));
  /* Zero, because the 35px gap already provides the right-hand space --
     padding here would be added on top of it and overshoot. */
  padding-right: 0;
}

/* The wrapper drops to gap: 10px under 1199px, so the left inset follows it
   down; otherwise the logo keeps a 23px inset while its right side has 10px. */
@media only screen and (max-width: 1199px) {
  :root {
    --logo-gap: 10px;
  }
}

/* The logo/search bar. Its 31px top and bottom padding was sized around the
   theme's much smaller logo. */
.search-header-area-main {
  padding: 14px 0;
}

/* --- Active nav item ------------------------------------------------------
   Replaces the "Home > All Products" breadcrumb bar as the indicator of where
   you are. */
.parent-nav .nav-link.is-active {
  color: var(--color-primary);
}

/* --- Page breadcrumb ------------------------------------------------------
   Hidden rather than deleted from 13 page files. The active nav item now says
   which page you are on, so this repeated it.
   Note this is the PAGE breadcrumb only. The category trail inside the shop
   strip (.shop-category-trail) is a different thing -- it tracks the drill-down
   position, which nothing else shows -- and stays. */
.rts-navigation-area-breadcrumb {
  display: none;
}

/* The theme puts a separator rule directly under that bar; with the bar gone
   it became a stray line above the page content. */
.rts-navigation-area-breadcrumb + .section-seperator {
  display: none;
}

/* --- Homepage banner ------------------------------------------------------
   Placeholders in place of the theme's grocery photography (banner/01.webp
   and 08.webp). Overridden here rather than in style.css, which declares
   .bg_one-banner twice; editing one of the two would have left the other
   winning depending on order. Swap these two URLs for real photography.

   The artwork keeps its right side busy and its left side clear, because
   .banner-one-inner-content overlays the left third. */
.bg_one-banner {
  background-image: url(/assets/images/banner/placeholder-01.svg);
  background-size: cover;
  background-position: center;
}

.bg_one-banner.two {
  background-image: url(/assets/images/banner/placeholder-02.svg);
}

/* --- Popular Picks cards --------------------------------------------------
   The four cards under "Popular Picks" (FeatureDiscount). The theme pointed
   these at category/01-04.jpg, which are grocery photographs; they now use
   the boutique shots in assets/images/trendy.

   background-size and position are restated because the theme's rule sets
   them alongside its own image -- without them a portrait-shaped photo sits
   top-left instead of filling the card. */
.single-feature-card,
.single-feature-card.two,
.single-feature-card.three,
.single-feature-card.four {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Each card takes TWO background layers: a darkening gradient over the photo.
   The gradient was originally a ::before overlay, but that had to be pinned
   above the image and below the text, which meant giving .content-area its own
   z-index -- and a positioned .content-area becomes the containing block for
   the stretched link below, so the click target could only ever cover the text
   rather than the whole card. As a background layer it needs no stacking
   context at all.

   The scrim is transparent above ~72% so the photo still reads as the subject;
   the text sits in the darkened band at the bottom. */
.single-feature-card {
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 30%) 40%, rgb(0 0 0 / 0%) 72%),
    url(/assets/images/trendy/kanchipuram-silk.webp);
}

.single-feature-card.two {
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 30%) 40%, rgb(0 0 0 / 0%) 72%),
    url(/assets/images/trendy/kuthas.webp);
}

.single-feature-card.three {
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 30%) 40%, rgb(0 0 0 / 0%) 72%),
    url(/assets/images/trendy/night-wear.jpg);
}

.single-feature-card.four {
  background-image:
    linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 30%) 40%, rgb(0 0 0 / 0%) 72%),
    url(/assets/images/trendy/children-wear.webp);
}

/* Content sits at the BOTTOM of the card rather than the top.
   The theme gave .content-area no rules at all, so it simply flowed from the
   top of a fixed-height box. A flex column pinned to the end moves it down
   without hardcoding offsets that would break at the card's smaller
   responsive heights (400px -> 300px under 1199px). */
.single-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* THE WHOLE CARD IS THE LINK.
   The card cannot simply be wrapped in an <a>: it already contains one (Shop
   Now), and nesting anchors is invalid HTML -- browsers silently close the
   outer one, so the markup that renders is not the markup written. Instead the
   real link inside grows an invisible layer covering the card, the standard
   "stretched link" pattern.

   This is why the "Weekend Discount" pill became a <span>: it was a second
   <a>, and a link sitting on top of a stretched link swallows those clicks.
   It pointed at /shop, the same destination as Shop Now, so nothing was lost.

   The card is the containing block because it is position: relative and
   nothing between it and the anchor is positioned. */
.single-feature-card .shop-now-goshop-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
}

/* --- Product details gallery ----------------------------------------------
   The main image keeps its natural size, as the theme intended -- it was
   briefly capped at 380px and that cap has been removed. The only rules left
   on it are max-width:100% and height:auto, so an image wider than its column
   scales down instead of overflowing the layout.

   Worth knowing: because nothing constrains it, page layout follows whatever
   dimensions get uploaded. If product photography is not a consistent size,
   this section is where to fix it.

   The thumbnail strip IS still sized (--pdp-thumb). Six unconstrained
   thumbnails at full resolution would each be as large as the main image. */
:root {
  /* One fixed box for the main image on every product page.
     min() so it also fits the viewport on a short screen: 60vh keeps the whole
     image, the price and the buttons visible without scrolling, which a tall
     portrait photo at its natural height does not. */
  --pdp-image: min(520px, 60vh);
  /* Width as well as height, so the card is the same rectangle on every
     product -- a portrait photo and a square one now sit in an identical box
     instead of the box shrinking to fit a narrow image.
     100% is the second term so the card still fits its column on a laptop and
     on mobile, where a flat 440px would overflow. */
  --pdp-image-width: min(460px, 100%);
  --pdp-thumb: 72px;
}

/* .details-product-area is a flex row, but neither child had a flex rule --
   both defaulted to flex: 0 1 auto, meaning "size to your content". So
   narrowing the image did not widen the text beside it; it just left a gap.
   The image column is now fixed and the content column takes everything else.
   Its gap is set further down, with the rest of the spacing decisions. */

/* The image column, sized by the box above rather than by whatever was
   uploaded. Without this the page changed shape per product -- a 479x639
   portrait made a tall column, a square SVG a short one. */
.rts-product-details-section2 .product-thumb-area {
  flex: 0 0 auto;
  /* Matches the card, so the thumbnail strip underneath wraps within the same
     width instead of running wider than the image it belongs to. */
  width: var(--pdp-image-width);
  max-width: 100%;
}

/* min-width: 0 matters. A flex item's default minimum is its content size, so
   a long product name or an unbroken word would push this column wider than
   its share and squeeze the image instead of wrapping. */
.rts-product-details-section2 .contents {
  flex: 1 1 auto;
  min-width: 0;
}

/* Fixed height AND width, identical on every product.

   object-fit: COVER, so the picture reaches the frame's rounded edges on all
   four sides. It was `contain`, which scales the image until it fits entirely
   -- a 479x639 portrait in a 560x520 box scaled to its height and left about
   85px of white down each side, inside the border. That band read as a gap
   between the photo and the text beside it.

   The trade: cover fills the frame by cropping whatever overflows, centred. A
   photo much taller or wider than the frame loses its edges. */
.rts-product-details-section2 .product-thumb-area .product-thumb {
  width: var(--pdp-image-width);
  height: var(--pdp-image);
  padding: 0;
  background: var(--color-surface);
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* A CLIP IS SIZED EXACTLY LIKE A PHOTOGRAPH.
   Product videos now sit in the same gallery as the pictures, so `video` is
   named alongside `img` in both rules rather than given a block of its own --
   one set of declarations, so the two cannot drift apart and the big frame
   stays the same size whichever kind of thing was picked from the strip. */
.rts-product-details-section2 .product-thumb-area .product-thumb img,
.rts-product-details-section2 .product-thumb-area .product-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Matches the frame, so the corners are not square underneath its radius. */
  border-radius: 6px;
}

.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter img,
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter video {
  width: var(--pdp-thumb);
  height: var(--pdp-thumb);
  /* cover, like the main frame above: a thumbnail has to be framed the same way
     as the picture it opens, or it reads as the wrong thumbnail rather than as
     a smaller one. */
  object-fit: cover;
  border-radius: 4px;
  /* A <video> is inline by default and sits on the text baseline, which leaves
     a few pixels of gap beneath it that the images beside it do not have. */
  display: block;
}

/* The play marker over a video thumbnail.
   Without it the strip is indistinguishable: a clip's first frame is just one
   more photograph, and nothing says there is a video until it is clicked. */
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter {
  position: relative;
}

.pdp-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Off, so the marker never swallows the click meant for the thumbnail it
     is sitting on top of. */
  pointer-events: none;
  border-radius: 4px;
  /* A wash rather than a solid disc -- the frame underneath still has to read
     as a picture of the product. */
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
   THE LIGHTBOX -- the product photograph, opened to the full window.

   The frame on the page is about 460px wide, which is enough to choose by and
   not enough to inspect a weave, a border or a print by. Clicking the picture
   opens it here at whatever size the window allows.
--------------------------------------------------------------------------- */

/* The magnifier in the corner of the big frame.
   The photograph itself is clickable and that is how nearly everyone will open
   this -- but a click on an <img> is reachable by a mouse and nothing else, so
   this button is what gives the same thing to a keyboard and a screen reader.
   It doubles as the hint that the picture opens at all. */
.pdp-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  /* Not solid white: it sits ON the photograph, and a white disc over a pale
     garment disappears. */
  background: rgb(255 255 255 / 88%);
  color: var(--color-heading-1);
  font-size: 14px;
  cursor: zoom-in;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pdp-zoom:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  transform: scale(1.06);
}

.pdp-lightbox {
  position: fixed;
  inset: 0;
  /* Above the sticky header and the drawer, which sit at 999 and 1000. The Buy
     Now dialog uses 9999 for the same reason; these two are never up at once. */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Room for the controls at the edges, so a portrait photograph on a laptop
     does not sit underneath the close button. */
  padding: 64px 72px;
  background: rgb(0 0 0 / 88%);
  animation: pdp-lightbox-in 0.18s ease-out;
}

@keyframes pdp-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bounded by the viewport rather than given a size: whatever shape the
   photograph is, it grows until one of its sides reaches the edge of the space
   left by the padding, and never overflows the other way. object-fit has
   nothing to do here -- the box IS the picture. */
.pdp-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  /* A white garment on a black backdrop would otherwise bleed into it. */
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
  animation: pdp-lightbox-in 0.18s ease-out;
}

.pdp-lightbox__close,
.pdp-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Focus has to be VISIBLE here. Everything behind is dimmed to near black, so
   the browser's default outline on a white glyph is the only thing telling a
   keyboard user where they are. */
.pdp-lightbox__close:focus-visible,
.pdp-lightbox__nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.pdp-lightbox__close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.pdp-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.pdp-lightbox__nav--prev { left: 18px; }
.pdp-lightbox__nav--next { right: 18px; }

/* "2 / 5" under the picture. Only rendered when there is more than one, so it
   never states the obvious. */
.pdp-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* On a phone the controls move OFF the sides of the picture and onto the bottom
   edge. At 48px each, a pair of side arrows over a 360px-wide screen covers a
   quarter of the photograph -- which is the thing that was opened to be looked
   at. */
@media only screen and (max-width: 767px) {
  .pdp-lightbox {
    padding: 56px 12px 84px;
  }

  .pdp-lightbox__nav {
    top: auto;
    bottom: 16px;
    transform: none;
    width: 42px;
    height: 42px;
  }

  .pdp-lightbox__nav--prev { left: 22%; }
  .pdp-lightbox__nav--next { right: 22%; }

  .pdp-lightbox__counter {
    bottom: 27px;
  }
}

/* Six thumbnails at 72px plus gaps overflow the narrowed column, so the strip
   wraps instead of pushing the layout wider. */
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group {
  flex-wrap: wrap;
  gap: 10px;
}

/* The theme spaces thumbnails with margin-right; with gap doing that job the
   margin would double the spacing on every one. */
.rts-product-details-section2 .product-thumb-area .product-thumb-filter-group .thumb-filter {
  margin-right: 0;
}

/* Wishlist heart, over the top-right of the main product image.
   Replaces the "Add To Wishlist" row that sat beside "Share On social". */
.rts-product-details-section2 .product-thumb.pdp-thumb-wrap {
  position: relative;
}

.pdp-wishlist {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-body);
  cursor: pointer;
  padding: 0;
  transition: 0.25s;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.pdp-wishlist:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Filled and branded once the item is in the wishlist, so the control shows
   state rather than just being a button that was pressed. */
.pdp-wishlist.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.pdp-wishlist i {
  font-size: 17px;
  line-height: 1;
}

/* Add to Cart: equal padding either side.
   The real cause of the imbalance was the duplicated .arrow-icon in the markup
   (opacity 0, order:-2) putting an invisible icon to the left of the label.
   That is removed, so the theme's symmetric 25px now actually reads as
   symmetric; this restates it so a theme change cannot silently undo it. */
.product-bottom-action .rts-btn.with-icon {
  padding-inline-start: 25px;
  padding-inline-end: 25px;
  justify-content: center;
}

/* --- Contact page FAQ accordion -------------------------------------------
   Sits where the decorative image used to, beside the contact form. */
.contact-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.contact-faq-item:last-child {
  border-bottom: 0;
}

/* width:100% here is deliberate -- the row should span the column so the
   +/- sits hard right, which is the opposite of the icon-strip button
   further down this file. */
.contact-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading-1);
  cursor: pointer;
  transition: 0.2s;
}

.contact-faq-q:hover {
  color: var(--color-primary);
}

.contact-faq-item.is-open .contact-faq-q {
  color: var(--color-primary);
}

.contact-faq-q i {
  flex: 0 0 auto;
  font-size: 13px;
}

.contact-faq-a {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-body);
}

.contact-faq-a a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- Cart in the card hover strip -----------------------------------------
   The strip's other actions are <span>s. The cart one is a <button> so it can
   be tabbed to and disabled, which means undoing the browser's button defaults
   and the theme's global `button { width: 100% }` -- without the width reset
   it claims the whole strip and pushes Quick View onto its own line. */
.action-share-option button.single-action {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* The theme centres its spans by line-height; a button needs to be told. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-share-option button.single-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* --- Footer ---------------------------------------------------------------
   The rebuilt footer has five columns where the theme laid out four plus a
   newsletter block, so the widths need restating. */
.footer-main-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.footer-main-content-wrapper .single-footer-wized {
  flex: 1 1 180px;
  min-width: 0;
}

/* The contact column carries an address and an email, so it needs more room
   than a list of short links. */
.footer-main-content-wrapper .single-footer-wized:first-child {
  flex: 1 1 280px;
}

.footer-main-content-wrapper .footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-main-content-wrapper .footer-nav li {
  margin-bottom: 10px;
}

.footer-main-content-wrapper .footer-nav a:hover {
  color: var(--color-primary);
}

/* Sign Out is a <button> because it performs an action rather than navigating,
   but it sits in a list of links and has to READ as one.

   Two separate jobs here, and the first attempt only did the first:

   1. Strip what a button carries by default -- background, border, padding,
      centred text, and the browser's own control font.
   2. Then give it what the ANCHORS get. `font: inherit` and `color: inherit`
      were not enough: they inherit from the <li>, whereas the links beside it
      are styled by their own rule in style.css:20205, which sets a size and a
      colour the <li> never had. The button came out a different size and a
      different grey.

   The three values below MIRROR that rule -- .single-footer-wized .footer-nav
   ul li a { font-size: 16px; color: #74787C; transition: 0.3s }. Restated
   rather than inherited because there is nothing to inherit them from; if the
   theme's footer link colour is ever changed, change it here too.

   The selector matches the theme's specificity (0,4,1 against its 0,3,2) so it
   wins without !important. */
.single-footer-wized .footer-nav ul li .footer-signout {
  /* 1 -- undo the button */
  padding: 0;
  border: none;
  background: none;
  width: auto;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;

  /* 2 -- match the links */
  font-size: 16px;
  color: #74787C;
  transition: 0.3s;
}

.single-footer-wized .footer-nav ul li .footer-signout:hover {
  color: var(--color-primary);
}

/* Email addresses are long and unbreakable; without this the contact column
   pushes the whole row wider on a narrow screen. */
.footer-main-content-wrapper .opening-hour a {
  word-break: break-word;
}

.rts-copyright-area {
  border-top: 1px solid var(--color-border);
  padding: 20px 0;
}

/* space-between was for the two lines that used to sit here -- copyright on
   the left, GSTIN on the right. With a single credit line left, that pushed it
   to the left edge; centred is what one line wants. */
.copyright-area-inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-size: 14px;
}

/* --- Stock + quantity on one row ------------------------------------------
   The stepper moved out of .cart-counter-action and up beside the stock text.
   It previously shared that row with the cart icon and Buy Now, so three
   controls competed for one line; the buttons now have it to themselves.

   The stepper keeps its own width and the stock text takes the rest, so a
   long "120 in stock" and a short "Out of stock" both leave the stepper in
   the same place across a row of cards. */
.single-shopping-card-one .stock-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.single-shopping-card-one .stock-qty-row .availability {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Overrides the width the theme fixes on .quantity-edit inside
   .cart-counter-action; here it sizes to its own content instead. */
.single-shopping-card-one .stock-qty-row .quantity-edit {
  flex: 0 0 auto;
  width: auto;
  max-width: 92px;
  margin: 0;
}

/* --- Feature / service strip icons ----------------------------------------
   "Wide Assortment", "Easy Return Policy", "Best Prices & Offers",
   "Support 24/7" -- and the same strip on the product page (ShortService).

   These are INLINE SVGs in the JSX with fill="#629D23" written into each path,
   not CSS. That is why they stayed green through the whole palette change:
   converting style.css never touched them. All 44 paths now use
   fill="currentColor", so they inherit whatever colour is set here and follow
   the palette from now on.

   Applied to the wrapper rather than the svg so a future icon using stroke
   instead of fill picks it up too. */
.single-feature-area .icon,
.single-short-service-area-start .icon-area {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Product page: cart, Buy Now and Share on ONE row below 1200px.

   All three were already on one row in the markup; what broke it was the words
   "Share On social" beside the icon. Together with a padded cart button and
   Buy Now holding its label's width, the three came to more than a phone is
   wide, and the row wrapped -- one control per line, three deep.

   The label goes and the icon stays. A share glyph is understood on its own,
   and it is the third of three controls here, not something anyone has to
   read to find. The button padding comes down with it; both of those need
   !important only because the page writes its own padding inline, and an
   inline style cannot be reached any other way.
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  .product-bottom-action {
    gap: 8px !important;
  }

  .product-bottom-action .share-option-shop-details .single-share-option span {
    display: none;
  }

  .product-bottom-action .share-option-shop-details .single-share-option {
    gap: 0;
  }

  /* Matches the 35px share icon beside it, so the three controls read as one
     set rather than two sizes. */
  .product-bottom-action .rts-btn {
    padding: 12px 16px !important;
    font-size: 14px;
  }

  .product-bottom-action .share-option-shop-details .single-share-option .icon {
    height: 44px;
    width: 44px;
  }
}

/* THE BAND IS NOT SHOWN BELOW 1200px ON THE PAGES THAT OPT OUT.
   The wrapper is added by the product, cart and wishlist pages; every other
   page keeps the band at every width, and all three keep it above 1200px where
   the four cards cost a single line rather than four.

   Those three have in common that they are the end of a task -- reading about
   one product, or checking what you are about to pay for. Four general
   reassurances stacked one per row underneath is a screen of scrolling between
   the thing being decided and the footer. */
@media only screen and (max-width: 1199px) {
  .service-strip-lg-only {
    display: none;
  }
}

/* The band's icons are no longer those inline SVGs: ShortService reads the
   admin's Site Features now, and an entry there carries either a Font Awesome
   class or an uploaded image. Both have to fill the same 70px white disc the
   SVGs did, or the four cards sit at four different heights. */
.single-short-service-area-start .icon-area .short-service-icon {
  font-size: 30px;
  line-height: 1;
}

.single-short-service-area-start .icon-area .short-service-icon-img {
  width: 40px;
  height: 40px;
  /* contain, not cover: these are logos and glyphs, and cropping one to fill a
     circle would cut the mark rather than frame it. */
  object-fit: contain;
}

/* --- Cart & wishlist: choosing what to buy --------------------------------
   Both pages previously offered one action for the whole table -- checkout, or
   Buy Now -- with no way to leave anything behind. These are the per-row and
   select-all controls that fixed that. */
.cart-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
}

.cart-select-count {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: var(--color-body);
  opacity: 0.75;
}

/* Shown when the shopper arrives from "Add More Products" on an order that was
   already buying a named set. Rows from before that errand start unticked, and
   this is what says so -- a quiet correction that happens without a sentence
   reads as the cart losing things.

   A rule down the left rather than a filled panel: it is an aside about the
   list beneath it, not a warning, and a block of colour above the products
   would compete with them. */
/* THE PAYMENT GATEWAY PANEL, under Pay Online.
   A placeholder while Razorpay's keys are pending, and it has to read as one.
   Bordered rather than filled: a solid card looks like a live payment surface,
   and this one settles nothing. */
.checkout-gateway {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px dashed var(--color-primary);
  border-radius: 10px;
}

.checkout-gateway__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

/* Said in a chip beside the heading, not buried in the paragraph. It is the
   one fact somebody must not miss. */
.checkout-gateway__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--wine-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.checkout-gateway__body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.checkout-gateway__qr {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
}

.checkout-gateway__text p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-body);
}

/* Breaks anywhere: a payment URL is long and must not push the panel wider
   than the phone it is being read on. */
.checkout-gateway__link {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

@media (max-width: 480px) {
  .checkout-gateway__body {
    align-items: flex-start;
  }
}

.cart-errand-note {
  margin: 0 0 14px;
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--color-primary);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-body);
}

/* accent-color paints the browser's own checkbox in the house colour, which
   keeps the native control -- and its keyboard behaviour and platform styling --
   rather than rebuilding one out of divs. */
.cart-select-all input[type="checkbox"],
.cart-row-select {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* The row's checkbox sits before the remove X, which is already first in the
   flex row; both need to stay put while the thumbnail and title take the space. */
.cart-row-select {
  margin-right: 12px;
}

/* An unticked row is still there and still editable -- it is simply not part of
   this order. Dimmed rather than hidden, so nothing appears to have vanished. */
.single-cart-area-list.is-unselected {
  opacity: 0.45;
}

/* The controls stay at full strength: a row you cannot see well enough to
   re-tick, or whose remove button looks disabled, is a trap. */
.single-cart-area-list.is-unselected .cart-row-select,
.single-cart-area-list.is-unselected .close {
  opacity: 1;
}

/* --- Anchor targets -------------------------------------------------------
   The header is sticky, so a jump to #popular-picks would otherwise scroll the
   section's top edge to y=0 -- directly underneath the header, hiding the
   heading. scroll-margin-top reserves that height so the section lands below
   it. Set on the element, not html{scroll-padding}, so it applies wherever the
   section is used. */
#popular-picks {
  scroll-margin-top: 120px;
}

/* --- All Products: horizontal category strip ------------------------------
   Categories run across the top instead of down a sidebar, so the grid keeps
   the full container width.

   The strip wraps onto as many lines as it needs -- no sideways scrolling, so
   every category is visible at once with nothing hidden off-screen. */
.shop-category-strip {
  display: flex;
  align-items: center;
  /* Wrapping IS the intended behaviour here, not a fallback. The pills are
     sized generously, so eleven of them take two lines at container width --
     which is what the reference does. Centring means the shorter last line
     sits under the middle of the one above rather than trailing off to the
     left with a ragged gap. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 22px;
  margin-bottom: 10px;
}

.shop-category-strip.is-sub {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

/* Each pill is exactly as wide as its label plus padding -- flex: 0 0 auto
   means "do not grow, do not shrink, size to content", so "Jeans" stays narrow
   and "Leggings & Jeggings" gets only the room it needs. white-space: nowrap
   stops a two-word label breaking inside its own pill.

   border-radius: 999px is the capsule: any value past half the height rounds
   the ends fully, so it stays a capsule whatever the text size. */
.shop-category-pill {
  flex: 0 0 auto;
  /* REQUIRED. The theme sets `button, select, textarea { width: 100% }`
     globally (style.css). flex-basis:auto then resolves to that 100%, so every
     pill claimed a full row and the strip became a vertical stack -- flex-wrap
     was doing exactly what it was told. Resetting width is what makes
     "size to content" mean size to content. */
  width: auto;
  padding: 13px 28px;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}

.shop-category-pill:hover {
  background: var(--color-primary-soft);
}

.shop-category-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* The Back pill is a control, not a category, so it is muted -- otherwise it
   competes with the categories for attention at the head of every row. */
.shop-category-pill.is-back {
  border-color: var(--color-border);
  color: var(--color-body);
}

.shop-category-pill.is-back:hover {
  border-color: var(--color-body);
  background: transparent;
}

/* Breadcrumb above the strip. Once the strip replaces itself on drill-down,
   this is the only thing showing where you are. */
.shop-category-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-body);
}

.shop-category-trail i {
  font-size: 10px;
  opacity: 0.6;
}

.shop-category-crumb {
  width: auto;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  color: var(--color-body);
  font-size: 13px;
  font-weight: 500;
}

.shop-category-crumb:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Sub-category pills, kept for any strip that still renders a second row:
   same capsule shape, scaled down, lighter border. */
.shop-category-pill.is-sub {
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-width: 1px;
  border-color: var(--color-primary-fill);
  background: var(--color-primary-soft);
}

.shop-category-pill.is-sub.is-active {
  background: var(--color-primary);
  color: #fff;
}

/* --- Recommended Picks sidebar --------------------------------------------
   Sticky, and at least four card-rows tall.

   THE GOTCHA: Bootstrap's .row is display:flex, so its columns stretch to the
   height of the tallest one by default. A stretched element has no room to
   move within its container, and position:sticky silently does nothing.
   align-self:flex-start is what shrinks the column back to its content height
   and lets sticky engage -- without it the rules below have no visible effect.

   One knob controls the height: --recommended-row, roughly the height of one
   product card including its gutter. Four of those is the minimum box height.
   Adjust that single value rather than the calc(). */
:root {
  --recommended-row: 420px;
}

@media (min-width: 992px) {
  .recommended-sidebar-col {
    align-self: flex-start;
    position: sticky;
    /* Clears the sticky site header so the box does not slide under it. The
       measurement is --sticky-header, not the 100px that used to be written
       here: the header is 141px, so the top 41px of the filter box -- its
       heading -- was pinned underneath it. */
    top: calc(var(--sticky-header) + 16px);
  }

  /* The height goes on .single-filter-box, NOT its .sidebar-filter-main
     wrapper. The wrapper has no styling of its own -- no border, no
     background -- so making it tall just added invisible space below a box
     that stayed the same size. The bordered box is the thing you see.

     min() caps it at the viewport. Four card-rows is taller than most
     screens, and a sticky element taller than the viewport can never be fully
     seen: it pins at the top and its lower half sits permanently below the
     fold, so those categories become unreachable while the grid scrolls past.
     Four rows OR one screenful, whichever is smaller. */
  .recommended-sidebar .single-filter-box {
    min-height: min(
      calc(var(--recommended-row) * 4),
      calc(100vh - var(--sticky-header) - 40px)
    );
    display: flex;
    flex-direction: column;
  }

  /* The category list stretches to fill whatever height the box ends up with,
     spreading the entries down it rather than bunching them at the top above
     a large empty area. */
  .recommended-sidebar .filterbox-body {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  .recommended-sidebar .category-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* flex-start, NOT space-between. Spreading the rows down the box looked
       even with ten placeholder categories, but the slack is divided between
       whatever rows exist -- so three real ones put a large gap between "All
       Products" and the first category. Rows stay their own height and the
       leftover space simply sits at the bottom.

       No overflow-y here. min-height is a floor, not a cap, so the box grows
       when enough sub-categories are expanded -- nothing is clipped. */
    justify-content: flex-start;
  }
}

/* --- Sidebar accordion ----------------------------------------------------
   Styled after the Meesho filter rail: no box around the whole thing, just
   rows separated by hairlines, roomy vertical padding, a chevron on the right.
   The theme's own sidebar look (a rounded 1px border wrapping everything,
   30px of internal padding, a heading bar) is overridden below. */
.recommended-sidebar .single-filter-box {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.recommended-sidebar .filterbox-body {
  padding: 0;
}

.recommended-sidebar .category-wrapper {
  padding: 0;
}

/* One accordion entry: the row plus whatever it expands to. */
.rec-cat {
  border-bottom: 1px solid #ececec;
}

.rec-cat:last-child {
  border-bottom: 0;
}

.rec-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 18px top and bottom made a ten-category rail taller than the product grid
     beside it, and most of that height was empty. Enough to keep the rows from
     reading as a nav list, no more. */
  padding: 11px 2px;
}

/* An open group is the one being read, so it gets the room instead: the parent
   sits closer to its children, and the children clear the next category. */
.rec-cat.is-open > .rec-cat-row {
  padding-bottom: 6px;
}

/* The label takes the free space so the count and chevron sit hard right. */
.rec-cat-name {
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading-1);
  transition: color 0.2s;
  /* One line per category. "Leggings & Jeggings" and "Children's Wear" would
     otherwise wrap and make their rows twice the height of the others, which
     breaks the even rhythm down the rail. 16px rather than 17px so the longest
     label still clears the count and chevron in the narrow column. */
  white-space: nowrap;
}

.rec-cat-name:hover {
  color: var(--color-primary);
}

.rec-cat-name.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

/* Fixed width, right aligned. Without it a two-digit count is wider than a
   one-digit one and every chevron after it sits at a slightly different x --
   the whole column of arrows looks crooked. */
.rec-cat-count {
  font-size: 13px;
  color: var(--color-body);
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fixed width for the same reason, so rows without a chevron (All Products)
   still line up with rows that have one. */
.rec-cat-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-body);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.rec-cat-toggle:hover {
  color: var(--color-primary);
}

/* Expanded children: indented, tighter, and quieter than their parent so the
   hierarchy is readable without another divider line per child. */
.rec-cat-children {
  padding: 2px 2px 18px 14px;
}

.rec-cat-child-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.rec-cat-child-row .rec-cat-name {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-body);
}

.rec-cat-child-row .rec-cat-name:hover,
.rec-cat-child-row .rec-cat-name.is-active {
  color: var(--color-primary);
}

.rec-cat-child-row .rec-cat-name.is-active {
  font-weight: 600;
}

/* ===========================================================================
   THE SAME RAIL AS ONE BAR  --  components/shop/CategoryDrilldown.tsx

   Rendered instead of the rail above below 1200px, where the column of every
   category stacked on top of the products rather than beside them. Closed, it
   is one row naming the current category; open, it lists one level at a time.

   No media query in here. The component swaps itself on matchMedia, so this
   markup only ever exists on the widths it is for -- and these class names
   appear nowhere else.
   =========================================================================== */
/* NOT THE FULL WIDTH OF THE COLUMN. The bar is a control, and a control that
   runs the whole width of the screen reads as a section heading instead -- the
   rail it replaces was full-width because it WAS the column.

   A cap rather than a percentage: the bar stays the same size whatever the
   screen, so it does not creep toward heading-width on a tablet. The panel is
   inside it and takes the same width.

   190px is about as narrow as this goes while the rows still work -- the name
   ellipses rather than wraps, so a long category is readable only as far as the
   bar is wide, and the count and chevron still need their columns on the right.
   The bar names the selection, so cutting it much shorter would stop it doing
   that. */
.rec-drill {
  max-width: 190px;
  margin-bottom: 4px;
}

/* The bar. Deliberately the size of a form control rather than a heading: it
   is the thing you tap, and it has to read as one. */
.rec-drill-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-heading-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.rec-drill.is-open .rec-drill-bar {
  border-color: var(--color-primary);
  /* Square where the panel meets it, so the two read as one control. */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rec-drill-bar i {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-primary);
}

/* A long category name ellipsis rather than wrapping -- the bar's height is
   what makes it read as a control, and a two-line one does not. */
.rec-drill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-drill-panel {
  border: 1px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--color-surface);
  /* A deep catalogue must not push the products off the screen: the panel
     scrolls on its own once it is taller than about half a phone screen. */
  max-height: 52vh;
  overflow-y: auto;
}

.rec-drill-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-heading-1);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

/* The name takes the free space, so counts and chevrons line up down the right
   edge however long the labels are. */
.rec-drill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-drill-count {
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-body);
  font-variant-numeric: tabular-nums;
}

.rec-drill-into {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--color-body);
}

.rec-drill-row.is-active {
  color: var(--color-primary);
  font-weight: 700;
  background: var(--color-primary-soft);
}

/* Up one level. Tinted and set apart from the rows below it, because it moves
   through the tree rather than choosing anything in it. */
.rec-drill-back {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--color-primary-soft);
  border: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.rec-drill-back i {
  font-size: 11px;
}

.rec-drill-empty {
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-body);
}

/* Deliberately NOT max-height + overflow-y on the column. That was the first
   attempt, but the box is four rows tall while the category list only fills
   the top of it -- so it produced a scrollbar over empty space, which reads
   as a bug. The categories all sit at the top and stay visible while pinned;
   the extra height below them is just the box.
   Revisit if the list ever grows past the viewport. */

/* Below 992px the sidebar sits above the grid in normal flow. Sticky there
   would pin a full-width block over the products as you scroll. */
@media (max-width: 991px) {
  .recommended-sidebar {
    min-height: 0;
  }
}

/* Buy Now on the category cards is the SAME BUTTON as Buy Now on the product
   page: the theme draws .shop-now-goshop-btn as a bare text link with two
   plus-icon circles, and painting the button sweep straight onto that gave a
   gradient slab behind loose text with no padding or shape. So the link gets
   exactly what .rts-btn.btn-primary has -- 14px 25px padding, 16px/700 type,
   line-height 1.5, a 1px border, 6px radius -- and the sweep over it. The
   plus circles are not rendered (FeatureDiscount.tsx), so the width is the
   label plus padding, like every other Buy Now. */
.single-feature-card .shop-now-goshop-btn {
  display: inline-flex;
  align-items: center;
  max-width: max-content;
  padding: 14px 25px;
  border: 1px solid var(--btn-dark);
  border-radius: 6px;
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s;
}

.single-feature-card .shop-now-goshop-btn .text,
.single-feature-card .shop-now-goshop-btn span {
  color: #ffffff;
}

.single-feature-card .shop-now-goshop-btn:hover,
.single-feature-card:hover .shop-now-goshop-btn {
  background-color: var(--btn-dark);
  background-position: 100% center;
  box-shadow: 0 6px 16px -8px rgb(74 10 36 / 60%);
}

.single-feature-card .title {
  color: #ffffff;
}

/* Rose, not a lighter version of the tile's own colour. These four cards are
   painted in wine, berry, plum and rose now, so an accent drawn from the same
   family disappears into whichever one it lands on; the warm half of the
   palette is what reads on all four. */
.single-feature-card .title span {
  color: var(--blush);
}

/* ---------------------------------------------------------------------------
   SG Creation logo sizing.

   The theme's logo was a wide wordmark SVG with no height cap -- it was sized
   by its own aspect ratio. The SG Creation mark is about 5:4, so unconstrained
   it renders as a large block and pushes the header rows apart. Height is
   capped and width left auto so the mark is never squashed.
--------------------------------------------------------------------------- */
.logo-search-category-wrapper .logo-area .logo {
  height: 62px;
  width: auto;
  max-width: none;
}

@media (max-width: 991px) {
  .logo-search-category-wrapper .logo-area .logo {
    height: 50px;
  }
}

@media (max-width: 575px) {
  .logo-search-category-wrapper .logo-area .logo {
    height: 44px;
  }
}

/* Login and register cards: the theme's 57px cap assumed a wordmark. A square
   mark at that width is tiny, so it gets a little more room. */
.registration-wrapper-1 .logo-area img {
  max-width: 90px;
}

/* Invoice header and its "Powerby" footer stamp. */
.invoice-main-wrapper-1 .logo-top-area .logo img {
  max-width: 110px;
  height: auto;
}

.invoice-area-bottom .powerby img {
  max-width: 70px;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Popular Picks carousel, aligned with the Shop by Category tiles below it.

   Two sections of cards sitting one above the other looked unrelated: the
   carousel's slides took their height from their own content, so a two-line
   product name made one card taller than its neighbour and the row of prices
   stopped lining up. The category tiles have a fixed height and never do that.

   Swiper sets an explicit height on each slide only when told not to; with
   height:auto plus a flex row the slides stretch to the tallest in view, and
   the card inside fills its slide.
--------------------------------------------------------------------------- */
.mySwiper-category-1 .swiper-wrapper {
  align-items: stretch;
}

.mySwiper-category-1 .swiper-slide {
  height: auto;
  display: flex;
}

.mySwiper-category-1 .single-shopping-card-one {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* The image box is what makes cards agree at a glance -- a portrait saree and a
   square swatch would otherwise set two different card heights.

   cover, not contain: contain fits the whole picture inside the box and leaves
   blank strips down either side of anything that is not the box's shape, which
   is what the empty space in these cards was. cover fills the width and trims
   the overflowing edge instead. */
/* THIS RULE NO LONGER SETS THE HEIGHT.
   It used to pin the picture at 220px, and because it names three classes it
   beat the card rules further down the file -- so a carousel was the one place
   left with a landscape frame after everywhere else had gone square, and a
   full-length garment lost half its height to it. Only the width is restated
   now, which is what the theme needed overriding for. */
.mySwiper-category-1 .single-shopping-card-one .thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body grows to fill the stretched card, so the price and Add to Cart sit on
   the same line across every card in the row. */
.mySwiper-category-1 .single-shopping-card-one .body-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mySwiper-category-1 .single-shopping-card-one .body-content .cart-counter-action {
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Categories dropdown.

   Top-level categories only, as plain links -- the nested-submenu rules that
   used to live here (per-level indent, a chevron repositioned to follow it) had
   nothing left to style once the dropdown stopped rendering children. The
   nesting is browsed in the shop sidebar instead.

   What remains is the row itself: a long category name wraps rather than
   sliding under anything, since the theme lays these out as a flex line.
--------------------------------------------------------------------------- */
#category-active-four .category-sub-menu li a span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Contact page banner.

   A finished piece of artwork -- the heading and the "Explore our handmade
   jewellery..." line are painted into the picture -- so nothing is drawn over
   it and nothing is cropped from it: full width, height auto.

   The height is decided by the FILE, not by CSS. The artwork is exported at
   2064x512 (4:1), so it stands about 360px tall on a 1440px screen and 480px
   on a 1920px one -- the About banner's height -- with the whole composition
   in view. An earlier 1467x720 export of the same design was 720px tall at
   full width, and capping that in CSS could only crop it; the shape had to
   change in the artwork, and it did.
--------------------------------------------------------------------------- */
.sg-contact-banner {
  border-bottom: 3px solid var(--rose);
  background: #f4ece6;
}

.sg-contact-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Autofilled fields.

   Once the browser fills a field -- from a saved address, email or card -- it
   paints its own background over whatever CSS asked for: a grey-blue in Chrome
   and Edge, and there was no rule anywhere overriding it. So a form went from
   white boxes to grey ones the moment autofill touched it.

   Background-color is ignored on an autofilled input; an inset box-shadow the
   height of the field is the one property that still paints, which is why this
   looks indirect. The absurd transition delay stops the browser fading its own
   colour back in a moment later.
--------------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fbf1f0 inset;
  box-shadow: 0 0 0 1000px #fbf1f0 inset;
  /* The text itself is drawn by the browser too, so colour alone would not
     take -- it needs the -webkit-text-fill-color property. */
  -webkit-text-fill-color: var(--color-heading-1);
  caret-color: var(--color-heading-1);
  transition: background-color 100000s ease-in-out 0s;
  border-color: #ecd3cb;
}

/* Firefox uses its own selector and does respect background-color. */
input:autofill,
textarea:autofill,
select:autofill {
  background-color: #fbf1f0;
  border-color: #ecd3cb;
}

/* ---------------------------------------------------------------------------
   Product page: space around the image.

   The white card behind the whole section carries `padding: 60px` on every
   side, which is where most of the empty space to the left of the image came
   from -- 60px of it before the picture even starts, and another 60px past the
   text on the right. Halved horizontally; the vertical padding is left alone
   because that spacing reads as intentional between sections.
--------------------------------------------------------------------------- */
.shopdetails-style-1-wrapper {
  /* Less on the left than the right: the image starts at the left edge, and
     the space in front of it was the most obvious. The right side keeps its
     breathing room because text ends there. */
  padding: 60px 30px 60px 16px;
}

@media only screen and (max-width: 991px) {
  .shopdetails-style-1-wrapper {
    padding: 30px 16px;
  }
}

@media only screen and (max-width: 767px) {
  .shopdetails-style-1-wrapper {
    padding: 20px 12px;
  }
}

/* Nothing between the card's edge and the picture. The image is sized to fill
   this box exactly (object-fit: contain), so side padding here would shrink it
   and reintroduce the gap the width was widened to remove. */
.rts-product-details-section2 .product-thumb-area .product-thumb {
  padding-left: 0;
  padding-right: 0;
}

/* The image column sits flush against the card edge rather than inheriting the
   theme's 30px right margin on top of the flex gap below. */
.rts-product-details-section2 .product-thumb-area,
.rts-product-details-section .product-thumb-filter-group.left {
  margin-left: 0;
  margin-right: 0;
}

/* Gap between the image and the details beside it. 30px -> 14px -> 6px -> 0:
   now that the photo fills its frame edge to edge, the frame's own border is
   the separation, and any gap on top of it reads as a stray column of space.
   The text block carries its own internal padding, so nothing touches. */
.rts-product-details-section2 .details-product-area {
  gap: 0;
}

/* Nothing of its own in front of the text: the gap above is the only spacing
   between the image and this column, so a stray padding or margin here would
   add to it invisibly. */
.rts-product-details-section2 .contents {
  padding-left: 0;
  margin-left: 0;
}

/* The left column's own gutter, on top of the card padding above.
   `.row.g-5` gives every column 24px of horizontal padding, so the image sat
   16px + 24px = 40px in from the card edge. Trimming the left gutter on the
   image column alone brings the picture closer without pulling the details
   column or the row's right edge with it. */
.shopdetails-style-1-wrapper > .row > [class*="col-"]:first-child {
  padding-left: 6px;
}

@media only screen and (max-width: 991px) {
  .shopdetails-style-1-wrapper > .row > [class*="col-"]:first-child {
    padding-left: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Focus rings, in the brand orange rather than Bootstrap's blue.

   bootstrap.min.css ships `--bs-primary: #0d6efd` and paints every focused
   button, input and select with `box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)`.
   On this site that reads as a stray blue outline on an otherwise orange page,
   most visibly after clicking a button.

   The ring is KEPT, not removed: it is the only thing telling a keyboard user
   where they are. Only its colour changes.
--------------------------------------------------------------------------- */
.btn:focus,
.btn.focus,
.btn:focus-visible,
.rts-btn:focus,
.rts-btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(194 24 91 / 25%);
}

/* Everything else that takes focus -- links, custom buttons, the star rating,
   the sidebar rows -- gets the same colour from the browser's own outline.
   :focus-visible, so a mouse click does not leave a ring behind; only keyboard
   navigation shows it. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Native checkboxes and radios are painted by the browser, and Chrome's default
   accent is the same blue. accent-color is the one property that reaches them
   without rebuilding the control. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

/* Bootstrap's own checked state, for the places using .form-check-input. */
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Buttons: the blue that was not ours.

   bootstrap.min.css is loaded before the theme, and its `.btn-primary` sets
   `border-color: #0d6efd` -- Bootstrap's own blue. The theme restyles the
   background of `.rts-btn.btn-primary` but never touches the border, so the
   blue stayed, most visibly on the cart and Buy Now buttons.

   Focus is the same story: Bootstrap rings a focused button with a blue glow
   (rgba(49,132,253,.5)). Keeping a visible focus ring matters for anyone using
   a keyboard, so it is recoloured rather than removed.
--------------------------------------------------------------------------- */
.btn-primary,
.rts-btn.btn-primary {
  border-color: var(--btn-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.rts-btn.btn-primary:hover,
.rts-btn.btn-primary:focus,
.rts-btn.btn-primary:active {
  border-color: var(--btn-dark);
  box-shadow: 0 0 0 0.2rem var(--btn-ring);
}

/* Disabled buttons -- an out-of-stock Buy Now -- keep the border in step with
   the faded background rather than showing a full-strength orange outline. */
.btn-primary:disabled,
.rts-btn.btn-primary:disabled {
  border-color: var(--btn-dark);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Product page tabs: Product Details / Additional Information / Customer Reviews.

   The image column's left gutter was trimmed to 6px to bring the picture close
   to the card edge, and this block sits in that same column -- so the tab
   labels and everything under them ended up flush against it too. The image is
   a framed box and reads fine hard against the edge; running text does not.
--------------------------------------------------------------------------- */
/* The image + details row gets the SAME indent, so the picture's left edge
   lines up with the tab labels underneath it. They are siblings in one column;
   indenting only the lower half left the image sticking out to its left. */
.product-details-popup-wrapper.in-shopdetails,
.product-discription-tab-shop {
  padding-left: 24px;
  padding-right: 24px;
}

@media only screen and (max-width: 767px) {
  .product-details-popup-wrapper.in-shopdetails,
  .product-discription-tab-shop {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* THE GAP ABOVE THE TABS.
   Two rules stacked to make it: the block is written with the theme's `mt--50`
   utility -- `margin-top: 50px !important` -- and the tab strip itself adds
   `padding-bottom: 20px !important` under the labels. Fifty pixels of nothing
   between the Buy Now row and the first tab, on a page where everything above
   it is tightly set.

   .product-discription-tab-shop.mt--50 is (0,2,0) against the utility's
   (0,1,0), and !important on both sides means the more specific one wins --
   which is the only way to reach a `!important` utility class without editing
   the markup that uses it. */
.product-discription-tab-shop.mt--50 {
  margin-top: 24px !important;
}

.product-discription-tab-shop ul.nav-tabs {
  padding-bottom: 14px !important;
}

/* MEASURED, NOT GUESSED. The gap between the Buy Now row and the first tab was
   76px on a 390px screen, and only 16px of it belonged to the tabs:

     30px  .product-bottom-action margin-bottom   (theme, for a wrapped row)
     30px  .details-product-area  margin-bottom   (theme, image + text block)
     16px  .product-discription-tab-shop margin-top

   Reducing the tab block's own margin alone could therefore never fix it -- it
   was the smallest of the three. The two theme margins are what go. */
@media only screen and (max-width: 1199px) {
  .product-discription-tab-shop.mt--50 {
    margin-top: 16px !important;
  }

  .product-discription-tab-shop ul.nav-tabs {
    padding-bottom: 10px !important;
  }

  .rts-product-details-section .details-product-area .product-bottom-action {
    margin-bottom: 8px;
  }

  /* Zero, not smaller: the row above already carries the 8px, and this margin
     sits between the same two things. */
  .rts-product-details-section .details-product-area {
    margin-bottom: 0;
  }
}

/* THE TABS TOUCH ON A PHONE because the theme sets `gap: 0` on this list below
   576px -- its own answer to three labels not fitting one line. Bordered
   buttons with no space between them read as one control split by a hairline,
   which is exactly what you do not want of a tab strip.

   The gap comes back and the row is allowed to wrap instead, with the labels
   set smaller so two still fit a line before the third drops. ul.nav-tabs is
   (0,3,0) against the theme's (0,2,0), which is what lets it through. */
@media only screen and (max-width: 575px) {
  .product-discription-tab-shop ul.nav-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }

  .product-discription-tab-shop ul.nav-tabs button {
    padding: 10px 13px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   Hero banner height.

   The theme never gave this slide a height -- it was as tall as its content
   plus 120px of padding top and bottom. That worked while a heading and a
   button sat inside it; with the text removed the content is empty and the
   slide collapsed to the padding alone, roughly half its old height.

   An explicit height puts it back and, unlike the old arrangement, keeps it
   the same whether a slide has text in it or not.
--------------------------------------------------------------------------- */
/* SHAPED TO THE ARTWORK, NOT TO A FIXED HEIGHT.
   The band is full-bleed and the picture is background-size: cover, so any
   height that does not match the file's own proportions is a crop. The earlier
   fixed 420px band was 3.4:1 on a 1440px screen; the designed hero (2064 x 512,
   about 4:1) lost "Unique" off the left edge and the bracelet off the right.
   The aspect ratio makes the box the same shape as the file, so the whole
   design shows edge to edge at every desktop and tablet width and nothing has
   to be centred or trimmed. A new banner of a different shape means changing
   this one figure. */
.rts-banner-area-one .banner-bg-image {
  aspect-ratio: 2064 / 512;
  min-height: 0;
  background-position: center top;
}

/* On a phone the same ratio gives a band under 100px tall, which turns the
   headline into a smear. For the theme's placeholder slides (background
   images, no admin banner yet) a floor is kept and the crop accepted. */
@media only screen and (max-width: 575px) {
  .rts-banner-area-one .banner-bg-image {
    aspect-ratio: auto;
    min-height: 222px;
  }
}

/* THE ADMIN'S SLIDES ARE PICTURES, NOT BOXES. BannerOne renders an uploaded
   banner as an <img> inside <picture>, so the slide is whatever height the
   picture is: the ratio rule and the phone floor above would only fight it
   (a floor taller than the picture leaves a strip of empty band; a ratio that
   differs from the mobile image crops it). Both are switched off here, along
   with the theme's ptb-- padding, and the picture sets the height.

   On a phone the <picture> swaps to the banner's mobile image when the admin
   has uploaded one -- a taller crop drawn for the purpose -- and otherwise
   shows the desktop file whole. Either way nothing is cut off. */
.rts-banner-area-one .sg-hero-slide {
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  background: none;
}

.rts-banner-area-one .sg-hero-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Page banners on a phone -------------------------------------------------
   The three banners (home hero, About, Contact) are cut 4:1 for a laptop. At a
   phone's width that shape is under 100px tall and the lettering painted into
   the artwork cannot be read, so the band is given a floor and the picture
   fills it with object-fit: cover.

   ANCHORED LEFT, NOT CENTRE. All three designs carry their wording on the
   left and the jewellery on the right; a centre crop at this height would
   lose the first word of the headline. Left keeps the whole message and
   trims the product side, which is the half that can go.

   ONLY WHEN THERE IS NO MOBILE IMAGE. The admin's "Mobile image" is drawn
   for a phone -- the ones uploaded are square -- and is shown whole at its
   own height; a fixed height on that would crop the very artwork made to
   avoid cropping. The component marks a <picture> that carries one with
   .sg-banner--has-mobile, and the crop below is scoped to the ones without.
   The height rule sits on the <img>, so the fallback stays a picture that
   fills its band rather than a band with a small picture in it. */
@media only screen and (max-width: 575px) {
  /* `picture img`, not `img`: the About and Contact rules that set height:
     auto come later in this file at (0,1,1), and this has to outrank them. */
  .rts-banner-area-one .sg-hero-slide picture:not(.sg-banner--has-mobile) img,
  .sg-about-banner picture:not(.sg-banner--has-mobile) img,
  .sg-contact-banner picture:not(.sg-banner--has-mobile) img {
    height: 270px;
    object-fit: cover;
    /* At this height only about 40% of the picture's width fits on a phone,
       so the window is placed over each design's text block. The figure is
       per banner because the wording sits at a different spot in each file:
       the home hero's starts well in from the edge, the About and Contact
       ones nearly touch it. A shared value framed one and clipped the others. */
    object-position: 12% center;
  }

  .sg-about-banner picture:not(.sg-banner--has-mobile) img {
    object-position: 3% center;
  }

  .sg-contact-banner picture:not(.sg-banner--has-mobile) img {
    object-position: 6% center;
  }
}

/* ---------------------------------------------------------------------------
   Shop by Category tiles, without artwork.

   The theme gives each card a background photograph (category/01-04.jpg --
   groceries, from the original template). Those are switched off; the cards are
   flat brand colour instead, so the four read as navigation rather than as four
   competing promotions.

   The title is already white (set further up, for the old dark photos), so the
   ground has to stay dark enough for it. Each card gets a slightly different
   shade so the row is not one solid block.
--------------------------------------------------------------------------- */
/* Four of the seven house colours, so the row reads as a set rather than as
   four near-misses of the same maroon -- these were hand-mixed shades before
   the palette existed. Ordered dark to light left to right. */
.single-feature-card,
.single-feature-card.one,
.single-feature-card.two,
.single-feature-card.three,
.single-feature-card.four {
  background-image: none;
  background-color: var(--rose-dark);
}

.single-feature-card.two {
  background-color: var(--rose);
}

.single-feature-card.three {
  background-color: var(--wine-deep);
}

.single-feature-card.four {
  background-color: var(--ruby);
}

/* Back to the theme's own height -- 400px, and 300px below 1200px -- so the
   cards keep the proportions the row was designed around. The content sits at
   the bottom, which is where the photograph used to leave room for it.

   Padding trimmed from the theme's 40px: it was equal on both sides already,
   but 40px pushed a short heading a long way in from the edge on a card only
   a quarter of the row wide. 24px all round, so left and right still match. */
.single-feature-card {
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

/* ===========================================================================
   SHOP BY CATEGORY ON A PHONE OR TABLET -- a scrolling strip, like the
   product rows above it.

   The four tiles are a Bootstrap row: col-12 on a phone, so they stacked into
   four 300px-tall blocks, roughly three screens of scrolling to see a set of
   four shortcuts. Two sections of the same page, both rows of cards, behaved
   differently -- one swiped sideways, this one did not.

   NO SWIPER HERE. The product rows need one for their arrows, autoplay and
   loop; this is four static tiles, and `overflow-x: auto` is the browser's own
   version of the same gesture -- it takes touch, trackpad and shift-wheel
   without a library, and it cannot fall out of step with the markup the way a
   carousel re-initialising on a resize can.
   =========================================================================== */
@media only screen and (max-width: 1199px) {
  .single-feature-card {
    padding: 18px;
    /* Down from the theme's 300px. These are shortcuts, not artwork: at 300px
       barely two fitted a phone screen. */
    height: 210px;
  }

  .single-feature-card .title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* The row itself. flex-wrap: nowrap is the whole trick -- Bootstrap's own
     `flex-wrap: wrap` is what stacked them. */
  .category-feature-area .row.g-4 {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Momentum on iOS, and a resting point per tile rather than mid-card. */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* The scrollbar is not the affordance here -- the part-visible next tile
       is -- and a permanent grey bar under the row reads as a mistake. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Room for the tile shadows, which a clipped scroll container would cut. */
    padding-bottom: 4px;
  }

  .category-feature-area .row.g-4::-webkit-scrollbar {
    display: none;
  }

  /* Bootstrap's col-* widths are percentages of the row, which mean nothing
     once the row scrolls -- every tile has to be given a fixed share of the
     VIEWPORT instead. 76vw leaves the next one showing, which is what says the
     row continues. */
  .category-feature-area .row.g-4 > [class*="col-"] {
    flex: 0 0 auto;
    width: 76vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

@media only screen and (min-width: 576px) and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 46vw;
    max-width: 340px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 32vw;
  }
}

/* The content block fills the card's width, so the heading and the Shop Now
   link start at the same left edge and neither is indented past the other. */
.single-feature-card .content-area {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
}

/* Popular Picks / Related Products cards: less frame around the picture.
   The theme pads the whole card by 15px, which sat as a margin down both sides
   of the image on top of the letterboxing above. */
.mySwiper-category-1 .single-shopping-card-one {
  padding: 10px;
}

.mySwiper-category-1 .single-shopping-card-one .thumbnail-preview {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Wishlist / cart table: the Products column.

   The theme centres the "Products" heading over a 64%-wide column while the row
   beneath it starts at the left edge -- so the label floated in the middle of
   the row with the picture and name nowhere near it. Left-aligned, and the
   heading is inset by the width of the row's remove (x) control so it sits over
   the thumbnail rather than over that button.
--------------------------------------------------------------------------- */
.single-cart-area-list.head .product-main {
  text-align: left;
  padding-left: 46px;
}

/* The picture, the name and the x on one line, vertically centred against each
   other rather than each sitting at its own height. */
.single-cart-area-list.main .product-main-cart {
  display: flex;
  align-items: center;
  gap: 14px;
}

.single-cart-area-list.main .product-main-cart .thumbnail {
  flex: 0 0 auto;
}

/* min-width: 0 lets a long product name wrap instead of pushing the price and
   quantity columns out of their share of the row. */
.single-cart-area-list.main .product-main-cart .information {
  min-width: 0;
}

.single-cart-area-list.main .product-main-cart .information .title {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

@media only screen and (max-width: 767px) {
  .single-cart-area-list.head .product-main {
    padding-left: 0;
  }
}

/* ===========================================================================
   CART AND WISHLIST ROWS ON A PHONE  --  one product, one row.

   The theme's answer to a narrow screen is `flex-direction: column` on both the
   row and the product cell, so every field landed on a line of its own:
   checkbox, picture, name, price, stepper, subtotal -- six lines and 351px of
   height per product, with the remove control floated off the top corner as a
   red disc. Four items came to most of three screens.

   A grid instead, two lines deep and fixed:

     [x] [img] name .................... (x)
     [x] [img] price   stepper      subtotal

   .product-main-cart carries `display: contents` so its four children join the
   same grid as the price, quantity and subtotal cells -- otherwise they are
   trapped in a flex box of their own and cannot line up with the columns
   beside it. That is the whole reason this can be one grid rather than a row
   of nested boxes.
   =========================================================================== */
@media only screen and (max-width: 767px) {
  /* The header keeps the select-all -- it is the only place it exists -- and
     loses the three column labels, which named columns that no longer sit
     under them. */
  .single-cart-area-list.head {
    padding: 12px 12px;
  }

  .single-cart-area-list.head .price,
  .single-cart-area-list.head .quantity,
  .single-cart-area-list.head .subtotal {
    display: none;
  }

  .single-cart-area-list.head .product-main {
    flex-basis: auto;
  }

  .single-cart-area-list.main {
    display: grid;
    grid-template-columns: auto 56px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "check thumb info  info close"
      "check thumb price qty  total";
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    padding: 12px;
  }

  .single-cart-area-list.main .product-main-cart {
    display: contents;
  }

  .single-cart-area-list.main .cart-row-select {
    grid-area: check;
  }

  .single-cart-area-list.main .product-main-cart .thumbnail {
    grid-area: thumb;
    max-width: 56px;
  }

  .single-cart-area-list.main .product-main-cart .information {
    grid-area: info;
    min-width: 0;
  }

  .single-cart-area-list.main .product-main-cart .information .title {
    font-size: 13.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Back into the flow. The theme pulls this out to `position: absolute` at
     -13px/-14px below 576px, which is what put a red disc over the corner of
     the picture; in a grid there is a cell for it. */
  .single-cart-area-list.main .product-main-cart .close {
    grid-area: close;
    position: static;
    justify-self: end;
  }

  .single-cart-area-list.main .product-main-cart .close i {
    height: 24px;
    width: 24px;
    font-size: 11px;
  }

  .single-cart-area-list.main .price {
    grid-area: price;
    flex-basis: auto;
  }

  .single-cart-area-list.main .quantity {
    grid-area: qty;
    flex-basis: auto;
  }

  .single-cart-area-list.main .subtotal {
    grid-area: total;
    flex-basis: auto;
    justify-self: end;
  }

  .single-cart-area-list.main .price p,
  .single-cart-area-list.main .subtotal p {
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
  }

  .single-cart-area-list.main .subtotal p {
    font-weight: 700;
  }

  /* 92px of stepper is a quarter of a 360px screen. */
  .single-cart-area-list.main .quantity-edit {
    width: 74px;
    padding: 1px 6px;
  }

  /* --- Coupon and Clear All on one row ------------------------------------
     The theme stacks all three below 992px -- field, button, Clear All, each on
     its own line. The field is the only part that needs width, so it takes what
     is left and the two buttons keep their labels. The validation message drops
     to a line of its own rather than squeezing the row it belongs to. */
  .bottom-cupon-code-cart-area {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
  }

  .bottom-cupon-code-cart-area form {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .bottom-cupon-code-cart-area form input {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
    height: 42px;
  }

  .bottom-cupon-code-cart-area form .rts-btn,
  .bottom-cupon-code-cart-area > .rts-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 11px 14px;
    font-size: 13px;
    white-space: nowrap;
    /* Clear All carries mr--50 -- 50px of margin against a screen edge. */
    margin-right: 0 !important;
  }

  .bottom-cupon-code-cart-area form p {
    flex: 1 1 100%;
    margin: 0 !important;
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------------------------
   "Shop on App" strip on the product page.

   Measured against the band Meesho runs above its product details:
     - white ground, 2px coloured rule, ~10px radius, ~64px tall
     - gift illustration hard left of a centred content cluster
     - copy at ~22px with the discount at ~34px/800 beside it
     - solid button in a CONTRASTING brand colour, right of the copy
     - a notched ribbon closing the right edge
   Everything here is that geometry in this shop's colours: orange for the rule,
   icon and figure; the logo's maroon for the button, where the original uses
   magenta against its green.
--------------------------------------------------------------------------- */
/* THE SPACE ABOVE THE STRIP IS NOT THE STRIP'S.

   Above it is the product section's own `rts-section-gap` padding; below it is
   this margin. Two different properties on two different elements, which is why
   they drifted apart -- 60px above against 26px below, so the strip sat low in
   a band of empty page and then crowded the gallery under it.

   Both are set to the same figure here so the strip is centred in its own
   space. They have to be written twice; there is no single box whose padding
   this is.

   Two classes on the section rule (0,2,0) against the theme utility's (0,1,0),
   so it wins without needing !important. */
.app-promo-strip {
  margin-bottom: 26px;
}

.rts-chop-details-area.rts-section-gap {
  padding-top: 26px;
}

/* On phone and tablet the pair tightens to 16px -- still equal, just less of
   it. 60px under the header is the most expensive space on a handset. */
@media only screen and (max-width: 1199px) {
  .rts-chop-details-area.rts-section-gap {
    padding-top: 16px;
  }

  .app-promo-strip {
    margin-bottom: 16px;
  }
}

.app-promo-inner {
  position: relative;
  display: flex;
  align-items: center;
  /* Centred as one group. Spreading these three apart is what made the first
     attempt read as a toolbar rather than a single message. */
  justify-content: center;
  gap: 20px;
  min-height: 64px;
  padding: 8px 26px;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  overflow: hidden;
}

/* The notched ribbon at the right edge. */
.app-promo-inner::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 34px;
  height: calc(100% + 4px);
  background: var(--color-primary);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%);
}

.app-promo-gift {
  flex: 0 0 auto;
  width: 52px;
  height: 46px;
}

.app-promo-text {
  flex: 0 1 auto;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-heading-1);
  white-space: nowrap;
}

/* The figure is the whole point of the band; in the original it towers over
   the words on either side of it. */
.app-promo-text strong {
  font-size: 34px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.5px;
  /* "40% off" from the coupon renders as "40% OFF" here, matching the
     reference, without the API storing shouty copy. */
  text-transform: uppercase;
}

.app-promo-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  /* Clears the ribbon so the button never sits under it. */
  margin-right: 26px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.3s;
}

/* Darker orange on hover: the button now shares its colour with the rule and
   the figure, so the hover state has to come from shade rather than hue. */
.app-promo-btn:hover,
.app-promo-btn:focus {
  background: var(--btn-dark);
  color: #ffffff;
}

@media only screen and (max-width: 1199px) {
  .app-promo-text {
    font-size: 17px;
    white-space: normal;
  }

  .app-promo-text strong {
    font-size: 26px;
  }

  .app-promo-gift {
    width: 42px;
    height: 38px;
  }

  .app-promo-btn {
    padding: 11px 22px;
    font-size: 15px;
    margin-right: 22px;
  }
}

/* ONE ROW ON A PHONE TOO: gift, message, button.

   This used to wrap -- the message centred on one line and a full-width
   Download Now beneath it -- which turned a strip into a block three rows deep
   sitting between the price and the description on every product page. The
   ribbon and the button were the reason: both were sized for a desktop band and
   neither would give.

   So everything gives instead. The type comes down, the gift mark halves, the
   button loses its padding and its label stays on one line, and .app-promo-text
   gets min-width: 0 -- without that a flex item refuses to shrink below its
   content and pushes the button off the end however small everything else
   gets. */
@media only screen and (max-width: 767px) {
  .app-promo-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: left;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
  }

  .app-promo-inner::after {
    /* No room for the notch beside a button that now sits at the right edge. */
    display: none;
  }

  .app-promo-gift {
    width: 30px;
    height: 28px;
  }

  .app-promo-text {
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .app-promo-text strong {
    font-size: 15px;
  }

  .app-promo-btn {
    width: auto;
    flex: 0 0 auto;
    margin-right: 0;
    padding: 9px 13px;
    font-size: 12.5px;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Product reviews: the score and its stars.

   The theme lays this block out as a flex ROW with a 60px gap -- written for a
   score sitting beside a star-count breakdown. With the breakdown gone, that
   60px landed between "4.0 out of 5" and the stars underneath it. A column with
   a small gap is what the two lines actually need.
--------------------------------------------------------------------------- */
.product-details-review-product-style {
  flex-direction: column;
  gap: 4px;
}

.product-details-review-product-style .title {
  margin-bottom: 0;
}

/* Related Products on the product page: room above the heading. The carousel's
   section class is gapBottom only -- padding underneath, nothing on top -- so
   this heading butted against the details block above it. */
.related-products-section .rts-grocery-feature-area {
  padding-top: 60px;
}

@media only screen and (max-width: 767px) {
  .related-products-section .rts-grocery-feature-area {
    padding-top: 36px;
  }
}

/* ---------------------------------------------------------------------------
   All Products / Offers: space above the first row of cards.

   The toolbar (count, sort, grid-list switch) has no bottom margin, so the grid
   began immediately beneath it -- the first four cards sat flush while every row
   after them was separated by the row's own 24px gutter. 24px here matches that
   gutter exactly, so the first row is spaced like the rest.
--------------------------------------------------------------------------- */
/* The same cream as the footer and every other .bg_light-1 band, in place of
   the theme's grey (#F3F4F6, style.css:22427). */
.filter-select-area {
  margin-bottom: 24px;
  background: var(--color-surface);
}

/* A shorter toolbar. The theme pads it 15px and gives the sort <select> the
   global 50px input height, which makes an 80px band for one line of text and
   one control -- taller than a product card's title block. 10px of padding
   round a 40px select brings it to 60px, still comfortably tappable. */
.filter-select-area .top-filter {
  padding: 10px 15px;
}

.filter-select-area .top-filter .single-select select {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 38px;
}

/* The offer ribbon on the product page's main image.
   INSIDE the frame, not hanging above it: .product-thumb clips its overflow so
   the fixed image box crops cleanly, and the theme's top:-10px put the top of
   the pill outside that box -- where it was cut off. */
.pdp-thumb-wrap .badge.pdp-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
}

/* ---------------------------------------------------------------------------
   Offer ribbon.

   The theme's badge is a bookmark ICON with the text absolutely positioned on
   top of it, sized for exactly two short lines ("25%" / "Off"). The ribbon now
   carries whatever the vendor typed -- "5% Off", or "Buy 1 Get 1" -- and a
   single line of that is wider than the icon, so it hung off the edge.

   Replaced with a pill that sizes to its own text: the icon is hidden and the
   badge itself becomes the shape. Any wording fits, and nothing overflows.
--------------------------------------------------------------------------- */
/* Specificity has to match the theme's own selectors, which are
   `.single-shopping-card-one .thumbnail-preview .badge …`. A shorter selector
   here lost, so the label kept the theme's absolute position, left the pill
   with no content, and the pill collapsed to nothing -- an invisible ribbon. */
.single-shopping-card-one .thumbnail-preview .badge i,
.thumbnail-preview .badge i,
.pdp-thumb-wrap .badge i {
  display: none;
}

.single-shopping-card-one .thumbnail-preview .badge,
.thumbnail-preview .badge,
.pdp-thumb-wrap .badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  border-radius: 4px;
  padding: 4px 10px;
  /* The theme places the bookmark 30px in and hanging 10px above the frame;
     a pill reads better tucked inside the corner. */
  left: 12px;
  top: 12px;
}

.single-shopping-card-one .thumbnail-preview .badge span,
.thumbnail-preview .badge span,
.pdp-thumb-wrap .badge span {
  position: static;
  top: auto;
  left: auto;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Quick-view modal (the View button on a product card).

   .rts-product-details-section is padded 100px top / 30px bottom -- written for
   the full product PAGE, where 100px separates it from the header. Inside a
   modal that reads as a large gap above the content and almost none below it.
   Even padding, sized for a dialog.
--------------------------------------------------------------------------- */
.product-details-popup-wrapper.popup .rts-product-details-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Room above the cart/buy row: the description runs straight into it. */
.product-details-popup-wrapper.popup .product-bottom-action {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* THE CLOSE CROSS, WHICH WAS OFF THE SCREEN ON A PHONE.
   The theme parks it at `right: -50px; top: -50px` -- OUTSIDE the popup's
   top-right corner, which works only while there is 50px of empty backdrop up
   there. Its own <=1200px rule brings `right` back to 0 and says nothing about
   `top`, so the button stayed 50px above the dialog: on a phone, where the
   dialog opens near the top of the viewport, that is above the fold entirely.
   The quick view opened with no visible way out of it.

   Moved inside the corner instead, over the product image, with a shadow so it
   reads as sitting on top rather than as part of the picture. */
@media only screen and (max-width: 1199px) {
  .product-details-popup .product-details-close-btn {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    /* Above the image and the thumbnail strip, both of which the popup gives
       their own stacking. */
    z-index: 10;
    background: var(--color-surface);
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
  }

  .product-details-popup .product-details-close-btn i {
    font-size: 18px;
  }
}

/* ===========================================================================
   HEADER -- two bars.

   Bar one is brand orange and carries the logo, the search field and the three
   account icons. Bar two is white and carries the ALL categories button, the
   page links and whatever offer is running.

   The theme's own header rules assumed three bars and a sticky nav; everything
   below is scoped to .deepam-header so none of that is disturbed elsewhere.
   =========================================================================== */
/* The bar keeps its height: the logo grows past it and the padding shrinks to
   match, so a bigger mark does not push the bar taller. */
/* THE TWO BARS HAVE SWAPPED GROUNDS.
   Bar one is the cream, bar two carries the wine. Everything that was white
   here because it sat on a coloured bar now has to be dark, and everything in
   bar two the other way round -- the colour is one line each, the legibility is
   the rest of it. */
.deepam-header-primary {
  background: var(--color-surface);
  padding: 6px 0;
}

/* space-between, not auto margins on one child: it spreads the leftover width
   equally between EVERY pair, so the gap before the delivery control, before
   the search and before the icons are all the same. Auto margins on the search
   alone made its own two sides even but left the delivery control hard against
   the logo. */
.deepam-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The theme puts 27.5px of left padding on .logo-area (it centred the logo in
   the old three-bar layout). That pushed the mark to 52px while the ALL button
   in bar two starts at the container's own 24px -- so the two bars visibly
   began in different places. */
.deepam-header-row .logo-area {
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* THE MARK SITS DIRECTLY ON THE BAR -- no white plate behind it.
   The artwork is already transparent (88% of its pixels are), so it needs
   nothing to sit on; the plate was a white rectangle drawn by CSS, not part of
   the logo.

   The min-width that went with it is gone too: its only job was to keep the
   plate wider than the artwork, and without a plate it would pad the mark with
   empty space and push the search field along. Height and object-fit are all
   that is left -- the mark is sized, never stretched. */
.deepam-header-row .logo-area .logo {
  height: 84px;
  width: auto;
  object-fit: contain;
  background: transparent;
}

/* --- Small-screen fixtures, off by default --------------------------------
   The hamburger beside the logo and the search bar under the header only exist
   below 1200px. Above it the ALL button in bar two and the inline field do the
   same jobs, so both are rendered but hidden -- see the 1199px block further
   down, which is the single place the mobile header is described. */
.deepam-menu-btn,
.deepam-header-searchbar {
  display: none;
}

/* The wrapper the inline search now sits in. It takes over the flex behaviour
   .hsearch had when it was the row's own child -- grow into the space between
   the delivery control and the icons, and be allowed to shrink -- so the
   desktop row measures exactly as it did before the wrapper existed. */
.deepam-search-inline {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* EQUAL AIR EITHER SIDE OF THE FIELD.
   Three boxes deep, and the middle one is why this was not obvious:

     .deepam-search-inline   grows into all the space between the delivery
                             control and the account icons
     .hsearch                flex: 1 1 auto -- so it STRETCHES to fill that
     .deepam-search (form)   capped at 560px

   A 560px box inside a stretched parent sits against its left edge, so every
   spare pixel piled up on the right: about 40px before the field and 250px
   after it. justify-content on the outer wrapper cannot fix that, because the
   wrapper holds exactly one child and that child already fills the line -- the
   slack is INSIDE .hsearch, not around it.

   Auto margins on the form are what actually splits it, and they are scoped to
   the desktop wrapper: the phone's search row reuses .deepam-search in a
   container of its own, where it is meant to fill the width rather than sit in
   the middle of it. */
.deepam-search-inline .deepam-search {
  margin-left: auto;
  margin-right: auto;
}

/* --- search ---------------------------------------------------------------
   min-width: 0 is what lets this shrink inside the flex row; without it the
   field keeps its content width and pushes the icons off the end. */
/* Not flex: 1 -- that let the field swallow every spare pixel between the logo
   and the icons. A capped width keeps it a search box rather than a bar across
   the header.

   auto margins on BOTH sides, so the leftover space splits evenly and the field
   sits centred between the location control and the account icons. margin-right
   alone pushed the icons to the far edge, leaving 24px on one side and 121px on
   the other. */
/* The border is not decoration: cream on cream is barely a boundary, and the
   field lost its shape when the bar stopped being a strong colour behind it.
   In the brand rose: it runs round the Search button at the right-hand end,
   and a dark grey line there read as a black border on a pink button. */
.deepam-search {
  position: relative;
  flex: 0 1 560px;
  max-width: 560px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
}

.deepam-search-icon {
  position: absolute;
  left: 16px;
  color: #9e9e9e;
  font-size: 15px;
  pointer-events: none;
}

.deepam-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  padding: 0 14px 0 42px;
  font-size: 15px;
}

.deepam-search input:focus {
  outline: none;
  border: 0;
}

/* The right end of the bar. It carries its own corner radii because the form no
   longer clips: `overflow: hidden` there rounded this button by cutting it off,
   and cut the suggestions dropdown off with it -- the panel is a child of the
   form, so nothing below the input could ever be seen. */
.deepam-search-submit {
  width: auto;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

/* The Search button was the heading ink; it is a button, so it takes the same
   rose sweep as every other one. */
.deepam-search-submit:hover,
.deepam-search-submit:focus-visible {
  background-color: var(--btn-dark);
  background-position: 100% center;
}

.deepam-suggestions {
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
}

.deepam-suggestions li a {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--color-heading-1);
}

.deepam-suggestions li a:hover {
  background: #fbf1f0;
}

/* --- Header search suggestions --------------------------------------------
   Shared by both headers (components/header/HeaderSearch.tsx). The old
   .deepam-suggestions list is left above for anything still using it; these
   rows carry a thumbnail and a price, so they are their own thing.

   The wrapper exists to give the absolutely-positioned panel something to
   anchor to that is not the form itself -- the sticky header's form is a flex
   row, and positioning against it put the panel beside the input rather than
   under it. */
.hsearch {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.hsearch > form {
  position: relative;
  width: 100%;
}

.hsearch-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  /* ABOVE THE WINE NAV BAR.
     The panel hangs out of the cream search row and straight over bar two,
     which is sticky at z-index 1000. The search row is an ordinary block on
     desktop, so it makes no stacking context of its own and this number is
     compared against the nav's in the root context -- at 200 the suggestions
     were painted UNDER the bar and all that showed of them was a sliver above
     it and the "See all results" line below.

     1050 clears the nav and the categories dropdown that hangs off it (1001),
     which is right while someone is typing, and stays under the drawer
     backdrop (1100) and the delivery dialog (1200), both of which are modal.
     Below 1200px the nav is display:none and the panel is inside
     .deepam-header-searchbar, whose own 999 caps it -- that row is meant to
     slide under the pinned brand row, and does. */
  z-index: 1050;

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow:
    0 2px 4px rgb(28 25 23 / 5%),
    0 18px 40px -18px rgb(28 25 23 / 22%);

  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.hsearch-note {
  margin: 0;
  padding: 14px 12px;
  font-size: 13px;
  color: var(--color-body);
}

.hsearch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-heading-1);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* One highlight state for both the mouse and the arrow keys, so keyboard
   users see exactly what a hover would show rather than a second style. */
.hsearch-row.is-active,
.hsearch-row:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-heading-1);
}

.hsearch-thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background-color: var(--color-primary-soft);
}

.hsearch-thumb-icon {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-size: 16px;
}

/* min-width: 0 so a long product name can ellipsis instead of stretching the
   row past the panel. */
.hsearch-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hsearch-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsearch-meta {
  font-size: 12px;
  color: var(--color-body);
}

.hsearch-all {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.hsearch-all:hover {
  background-color: var(--color-primary-soft);
}

/* --- account icons -------------------------------------------------------- */
.deepam-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* 8px rather than 6: outlined controls need a little more air between them
     than bare icons did, or two borders 6px apart read as one divided box. */
  gap: 8px;
}

/* Outlined, at last living up to the class name -- the theme calls these
   btn-border-only and then gave them no border at all. The outline is the
   brand rose, like the icon and label inside it: a dark grey line here read
   as a black border round a pink button. Hover fills it with the soft tint
   and deepens the line to the wine. */
.deepam-actions .btn-border-only {
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  background: transparent;
  color: var(--color-primary);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.deepam-actions .btn-border-only:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-soft);
}

.deepam-actions .btn-border-only i {
  font-size: 20px;
  color: var(--color-primary);
}

/* Labels beside the icons -- Account, Wishlist, Cart. They were hidden while
   this bar was icons-only; visible now, so the controls read at a glance
   rather than relying on the icon alone. */
.deepam-actions .btn-border-only .text {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* A DOT, not a count.
   The number is still in the markup -- a screen reader announces "Wishlist 2" --
   but visually it is a white dot on the icon's corner saying only "there is
   something in here". text-indent pushes the digits out of view rather than
   display:none, which would take the announcement with them.

   The element is rendered only when the count is above zero (see Cart.tsx), so
   an untouched wishlist shows no marker at all. */
.deepam-actions .btn-border-only {
  position: relative;
}

/* The icon and its dot travel together, so the dot lands on the glyph's own
   top-right corner -- the heart and the trolley are different widths, and an
   offset measured from the control's edge sits differently on each. */
.deepam-actions .deepam-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* span.number, not just .number: the theme's own rule is
   `.accont-wishlist-cart-area-header .cart span.number` -- three classes plus a
   tag, which outranks a three-class selector however late it loads. Matching
   that shape is what lets the dot win. */
.deepam-actions .btn-border-only span.number {
  position: absolute;
  top: -2px;
  right: -4px;
  left: auto;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-primary);
  /* A ring in the bar colour, so the dot reads as a marker on the icon rather
     than as part of the glyph. Both halves invert with the bar: a wine dot on
     a cream ring, where it used to be a white dot on a wine one. */
  box-shadow: 0 0 0 2px var(--color-surface);
  overflow: hidden;
  text-indent: -9999px;
}

/* Below the large breakpoint the labels go again -- three words plus a search
   field do not fit a tablet header. */
@media only screen and (max-width: 1199px) {
  .deepam-actions .btn-border-only .text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .deepam-actions .btn-border-only span.number {
    left: auto;
    right: -4px;
  }
}

/* --- bar two -------------------------------------------------------------- */
.deepam-header-secondary {
  background: var(--color-primary);
  /* No hairline: it separated a white bar from a white page. Against the cream
     bar above and whatever is below, the colour is the separation. */
  border-bottom: 0;
}

/* One gap value for the whole row, and the nav inherits it -- so ALL sits the
   same distance from Home as Home does from All Products. Two different values
   (28 and 26) read as a mistake even at a glance. */
/* THE ROW STARTS WHERE THE LOGO DOES, NOT WHERE ITS BOX DOES.
   Both bars sit in the same container, so the logo element and the ALL button
   already share a left edge at the container's 24px gutter. They did not LOOK
   aligned, because the mark is drawn inside a square canvas with transparent
   margin around it: the artwork is 447px wide and the ink starts at pixel 59,
   so at an 84px logo the visible mark begins 11px further in than its box.

   That 11px is what this padding is. It is written against the two numbers it
   comes from rather than as a magic value, so re-exporting the logo with
   different margins, or changing the logo height, only means updating the
   figures here.

   Bar two is not rendered below 1200px, so this needs no responsive variant. */
.deepam-nav-row {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 56px;
  /* 84px logo x (59px of transparent margin / 447px canvas) */
  padding-left: calc(84px * 59 / 447);
}

/* width: auto is not decoration -- the theme sets `button { width: 100% }`
   globally, so turning this control into a <button> made it 535px wide and
   pushed the links along with it. */
.deepam-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  padding: 16px 0;
  position: relative;
}

.deepam-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1 1 auto;
}

.deepam-nav a {
  white-space: nowrap;
}

.deepam-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-weight: 500;
  padding: 8px 0;
}

/* The icon takes the link's colour, so it turns orange on hover with the label
   rather than staying grey beside it. */
.deepam-nav a i {
  font-size: 15px;
  color: inherit;
}

/* Blush, not the brand colour: hovering a wine link into wine leaves it
   looking disabled rather than active. The warm half of the palette is what
   lifts off this ground. */
.deepam-nav a:hover {
  color: var(--blush);
}

/* The offer sits at the right end and keeps its own type size. */
.deepam-nav-row .discount-area {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  /* On wine now, like the links beside it. */
  color: #ffffff;
}

.deepam-nav-row .discount-area .disc,
.deepam-nav-row .discount-area p,
.deepam-nav-row .discount-area span {
  color: #ffffff;
}

.deepam-nav-row .discount-area .disc {
  margin: 0;
  white-space: nowrap;
}

/* THE COUNTDOWN WAS INVISIBLE: the theme colours these digits white, for the
   dark promo strip this used to live on. On the white nav bar that is white on
   white -- the element was there, sized and positioned, just unreadable.

   Each unit also gets a tinted chip so the clock reads as a clock rather than
   as four loose numbers after the sentence. */
.deepam-nav-row .countdown,
.deepam-nav-row .countDown {
  display: flex;
  align-items: center;
  gap: 6px;
}

.deepam-nav-row .countDown .container {
  width: auto;
  max-width: none;
  /* The theme reserves 43px on the right of each unit for a "Days"/"Hour"
     label it draws as ::after -- in near-white, which on this bar sat as a
     faint smear over the digits. */
  padding: 0;
  margin: 0;
}

/* Those labels are hidden, not recoloured: OfferBar already renders the unit
   with the number ("01d", "02h"), so showing them would read "01d Days".

   Every nth-child variant is listed because that is how the theme writes them,
   and a pseudo-class counts toward specificity -- a plain ::after selector
   loses to `.container:first-child::after` no matter how late it loads. */
.deepam-nav-row .countDown .container::after,
.deepam-nav-row .countDown .container:first-child::after,
.deepam-nav-row .countDown .container:nth-child(2)::after,
.deepam-nav-row .countDown .container:nth-child(3)::after,
.deepam-nav-row .countDown .container:nth-child(4)::after {
  content: none;
}

.deepam-nav-row .countDown .container .a div {
  color: var(--color-primary);
  background: #f8eee9;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===========================================================================
   PHONE AND TABLET HEADER  (< 1200px)

   A different header, not a squeezed version of the desktop one. Two rows:

     row 1   hamburger + logo  ............  wishlist  cart      (sticky)
     row 2   search, full width                                  (scrolls away)

   Everything else -- the delivery control, Account, Download App, the whole
   nav bar and its offer -- moves into the drawer behind the hamburger. Trying
   to keep those on screen is what broke this: five controls, a 560px field and
   a second bar of links do not fit 390px, so they wrapped into a header four
   rows tall that pushed the page below the fold.

   1199px, not 991px: a 1024px tablet is on the wrong side of 991 and got the
   desktop header, which is the width it fitted worst.
   =========================================================================== */
@media only screen and (max-width: 1199px) {
  /* --- Row 1 ------------------------------------------------------------- */
  /* nowrap is the rule this whole layout rests on: with wrap, any item that
     did not fit started a new line, which is where the extra rows came from.
     Nothing may wrap -- the pieces that do not fit are hidden below instead. */
  .deepam-header-row {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .deepam-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The theme's global `button { width: 100% }` would otherwise give this
       the whole row. */
    width: 44px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 20px;
    cursor: pointer;
  }

  /* Takes the leftover width so the icons stay pinned right, and min-width: 0
     lets the mark shrink rather than push them off the edge. */
  .deepam-header-row .logo-area {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The mark is square (447x447), so height is its width too -- 74px of logo
     costs 74px of row, which the four-item row has to spare. The ceiling here
     is not width but the sticky bar's height: everything below it scrolls under
     this, so every pixel is taken off every screen of the site. */
  .deepam-header-row .logo-area .logo {
    height: 74px;
    max-width: 100%;
  }

  /* Into the drawer, all of it: the delivery control, the inline search, and
     the whole nav bar with its offer. Row one is left with four things --
     hamburger, logo, wishlist, cart -- and nothing else.

     .deepam-header-row prefixes the delivery control deliberately: its own
     `display: inline-flex` is written LOWER DOWN in this file, and a media
     query adds no specificity -- so a bare `.deepam-delivery` here (0,1,0)
     loses the tie to a later (0,1,0) and the control stayed on the bar. */
  .deepam-header-row .deepam-delivery,
  .deepam-search-inline,
  .deepam-header-secondary {
    display: none;
  }

  /* Account and Download App need the ancestor and both classes on the same
     element to reach `.deepam-actions .btn-border-only { display: inline-flex }`
     -- (0,2,0). A bare `.deepam-desktop-only` is (0,1,0) and loses to it however
     late it appears, which is why these two were still on the bar. */
  .deepam-actions .btn-border-only.deepam-desktop-only {
    display: none;
  }

  .deepam-actions {
    gap: 2px;
  }

  .deepam-actions .btn-border-only {
    padding: 8px;
  }

  .deepam-actions .btn-border-only i {
    font-size: 21px;
  }

  /* --- Row 2: the search, and nothing else -------------------------------
     White, so the orange bar above reads as the header and this reads as part
     of the page -- which is what it behaves like: it scrolls away and the bar
     above does not. */
  .deepam-header-searchbar {
    display: block;
    position: relative;
    /* Above the page but below the sticky row, so the suggestions panel covers
       the content it hangs over. */
    z-index: 999;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 0;
  }

  /* The field is white too, so on a white bar it needs an outline of its own --
     on the orange bar the contrast did that job. */
  .deepam-header-searchbar .deepam-search {
    flex: 1 1 auto;
    max-width: none;
    border: 1px solid var(--color-border);
  }

  .deepam-header-searchbar .deepam-search input {
    height: 42px;
    padding-left: 38px;
    font-size: 14px;
  }

  .deepam-header-searchbar .deepam-search-icon {
    left: 13px;
  }

  .deepam-header-searchbar .deepam-search-submit {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
  }
}

/* On a small phone the word "Search" costs more room than it is worth: the
   magnifier inside the field already says what the box does, and the keyboard's
   own return key submits it. */
@media only screen and (max-width: 479px) {
  .deepam-header-searchbar .deepam-search-submit {
    padding: 0 14px;
    font-size: 0;
  }

  .deepam-header-searchbar .deepam-search-submit::before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 400;
    font-size: 15px;
  }

  .deepam-header-row .logo-area .logo {
    height: 64px;
  }
}

/* --- Delivery location, between the logo and the search -------------------- */
.deepam-delivery {
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  max-width: 210px;
}

.deepam-delivery i {
  font-size: 20px;
  flex: 0 0 auto;
}

.deepam-delivery-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  /* min-width: 0 lets a long state name ellipsis rather than stretching the
     control and squeezing the search field beside it. */
  min-width: 0;
}

.deepam-delivery-text small {
  font-size: 11px;
  opacity: 0.85;
}

.deepam-delivery-text strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Centred dialog -------------------------------------------------------- */
.deepam-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Above the sticky header and the toast container. */
  z-index: 1200;
}

.deepam-modal {
  position: relative;
  background: var(--color-surface);
  border-radius: 10px;
  padding: 34px 30px 30px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.deepam-modal-icon {
  font-size: 38px;
  color: var(--color-primary);
  margin-bottom: 14px;
  display: block;
}

.deepam-modal h4 {
  margin-bottom: 10px;
}

.deepam-modal p {
  color: var(--color-body);
  margin-bottom: 22px;
}

.deepam-modal .rts-btn {
  width: auto;
  display: inline-flex;
}

.deepam-modal-alt {
  font-size: 13px;
  margin: 16px 0 0;
}

.deepam-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: auto;
  padding: 6px 9px;
  background: transparent;
  border: 0;
  color: #7d7d7d;
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  .deepam-delivery {
    max-width: none;
  }
}

/* ===========================================================================
   PAGE GUTTERS

   The theme's .container is 1696px wide with 12px of side padding, and
   .container-2 / .container-3 are different widths again -- so content ran
   almost edge to edge on a laptop, and sections did not line up with each
   other.

   One width and one gutter for all three: content sits in a column with real
   margins either side, the way the big marketplaces lay out, and every section
   shares the same left and right edge.
   =========================================================================== */
.container,
.container-2,
.container-3 {
  max-width: 1440px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 991px) {
  .container,
  .container-2,
  .container-3 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media only screen and (max-width: 575px) {
  .container,
  .container-2,
  .container-3 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Bootstrap rows pull their own gutter back with negative margins. With the
   container padding above that is what keeps a row's first column flush with
   the section heading rather than sitting 12px further in. */
.container > .row,
.container-2 > .row,
.container-3 > .row {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

/* Home hero: full bleed, like the contact page's banner.

   The gutters above apply to every .container, which boxed the hero into the
   same column as the product grids. A hero image is the one thing that should
   run to the edges of the screen, so its container is released -- and the
   rounded corners go with it, since a radius on a full-bleed band reads as a
   mistake. The category strip underneath keeps its gutters. */
.rts-banner-area-one > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.rts-banner-area-one > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

.rts-banner-area-one > .container > .row > [class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}

/* Both the slide AND its wrapper: the wrapper carries the theme's 6px and
   clips the slide, so zeroing only the slide left the corners still rounded.
   The round prev/next arrows inside are deliberate and untouched. */
.rts-banner-area-one .banner-bg-image,
.rts-banner-area-one .category-area-main-wrapper-one,
.rts-banner-area-one .swiper,
.rts-banner-area-one .swiper-slide {
  border-radius: 0;
}

/* The same rule under the hero as under the About and Contact banners: a 3px
   line carrying the rose sweep (the border-image is set with the other
   hairlines at the end of this file). It goes on the wrapper, not the slide,
   so it is one line under the carousel rather than one per slide moving with
   the swipe. */
.rts-banner-area-one .category-area-main-wrapper-one {
  border-bottom: 3px solid var(--rose);
}

/* The hero starts immediately under the second header bar. rts-section-gap pads
   60px top and bottom; the top half put a strip of grey between the nav and the
   banner. pt_sm--20 does the same on small screens, so that is zeroed too.

   THE BOTTOM HALF IS CUT TO 30px, WHICH IS A CHOSEN FIGURE, NOT A COPY OF THE
   TOP. The air above the category cards is the banner's mb--40; the 60px that
   used to sit below their labels left the row visibly high in its own band, and
   30px is what settles it. The two numbers are deliberately close but separate
   -- nothing here needs to track mb--40.

   Nothing downstream re-adds to it either: the section that follows the hero is
   rts-section-gapBottom, which pads underneath itself only. */
.deepam-hero-wrap.rts-section-gap,
.deepam-hero-wrap.pt_sm--20 {
  /* !important is here to reach exactly one rule: the theme writes
     `.pt_sm--20 { padding-top: 20px !important }` inside its <=767px block, and
     nothing without !important can beat that however specific it is. On a phone
     that 20px was a band of grey between the search bar and the banner. */
  padding-top: 0 !important;
}


.deepam-hero-wrap.rts-section-gap {
  padding-bottom: 30px;
}

/* ---------------------------------------------------------------------------
   Sticky header.

   ON DESKTOP ONLY THE NAV STRIP STICKS. The logo/search row scrolls away with
   the page and the wine bar (ALL, Home, All Products, Offers, Contact) pins to
   the top on its own.

   THE WRAPPER HAS TO GET OUT OF THE WAY. A sticky element only travels within
   its parent's box, and .deepam-header is exactly as tall as the header -- so
   a sticky bar inside it has nowhere to go and never sticks. `display:
   contents` removes the wrapper's box from layout while keeping the DOM, so
   the bars become laid out as direct children of the page and the nav bar's
   sticky range is the whole page. (Simply making the wrapper `static` is not
   enough: it is still a block, still header-height.)

   position: sticky rather than fixed -- fixed would take the bar out of the
   flow and drop the page under it, needing a spacer to compensate. Sticky
   keeps its space in the layout and simply stops at the top.
--------------------------------------------------------------------------- */
.deepam-header {
  display: contents;
}

/* Bar one carries its own background; the wrapper used to paint it. */
.deepam-header-primary {
  background: var(--color-surface);
}

.deepam-header-secondary {
  position: sticky;
  top: 0;
  /* Above the page content and the hero's swiper arrows, below the delivery
     dialog (1200). */
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* BELOW 1200px ONLY THE BRAND ROW STICKS.
   The search bar underneath it has to scroll away, and a sticky ancestor takes
   every descendant with it -- so the stickiness moves down one level, from the
   header to the row that is meant to stay. `static` on the wrapper is the
   important half: leaving it sticky would pin both rows however the child is
   styled.

   Nothing else on the site is sticky at these widths; the two that are on
   desktop (the checkout summary and the shop's recommended sidebar) are both
   released below their own breakpoints. */
@media only screen and (max-width: 1199px) {
  /* The wrapper is already display: contents (above), so the brand row's
     sticky range is the page, not a header-height box. */
  .deepam-header-primary {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
}

/* The categories dropdown hangs off bar two, so it has to clear the bars. */
.deepam-header .category-sub-menu {
  z-index: 1001;
}

/* ---------------------------------------------------------------------------
   ALL drawer.

   The theme ships .side-bar.header-two off-canvas and slides it in on .show;
   what is added here is the backdrop, the section styling, and a z-index above
   the sticky header (1000) so the drawer covers it rather than sliding under.
--------------------------------------------------------------------------- */
.deepam-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
}

#side-bar.side-bar.header-two {
  z-index: 1101;
  /* Up and down only. Something inside -- the category tree, or the email
     address in the contact block, which is one long unbreakable word -- was
     wider than the panel and put a scrollbar along the bottom. A drawer is a
     column of links; there is nothing to the right of it worth scrolling to. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* The reason the content overflowed, rather than just clipping the symptom
   above: long words wrap instead of forcing the panel wide. The contact email
   is the usual culprit -- a 40-character address with no space in it. */
#side-bar.side-bar.header-two,
#side-bar.side-bar.header-two a {
  overflow-wrap: anywhere;
}

/* OPENS FROM THE LEFT.
   The theme parks the drawer at `right: -100%` and slides it to `right: 0`, so
   it came in from the right-hand edge. The ALL button that opens it sits at the
   far left of the header, and a panel that flies in from the opposite side of
   the screen to the control that summoned it reads as a different thing
   entirely. Both the parked and the open position have to be flipped, and
   `right` explicitly returned to auto -- leaving it set would pin both edges and
   stretch the drawer across the whole viewport. */
#side-bar.side-bar,
#side-bar.side-bar.header-two {
  right: auto;
  left: -100%;
}

#side-bar.side-bar.show,
#side-bar.side-bar.header-two.show {
  right: auto;
  left: 0;
}

/* The theme's close tab is no longer rendered -- see Sidebar.tsx. This hides it
   defensively in case the theme's own script ever injects one: two crosses on
   one panel is two answers to "how do I shut this". */
#side-bar.side-bar button.close-icon-menu {
  display: none;
}

/* THE close, inside the panel's top-right corner -- where people look for an X.

   Positioned against the drawer's own padding rather than at 0, so it lines up
   with the content below it instead of hugging the corner. */
.deepam-drawer-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;

  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-heading-1);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.deepam-drawer-close:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* On a phone the drawer's top padding opens up so the first heading is not
   underneath the close button.

   The inner X used to be hidden here, because the theme's tab took its place
   below 768px. With that tab gone, hiding this one would leave a phone with no
   close button at all -- only the backdrop and Escape, and a handset has no
   Escape key. */
@media (max-width: 767px) {
  #side-bar.side-bar {
    padding-top: 66px;
  }
}

.deepam-drawer-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.deepam-drawer-title {
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-body);
  margin-bottom: 10px;
}

.deepam-drawer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deepam-drawer-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  color: var(--color-heading-1);
  font-weight: 500;
}

.deepam-drawer-links li a:hover {
  color: var(--color-primary);
}

.deepam-drawer-links li a i {
  width: 18px;
  text-align: center;
}

.deepam-drawer-actions {
  display: flex;
  gap: 10px;
  padding: 18px 0;
}

.deepam-drawer-actions .rts-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.deepam-drawer-contact {
  padding-top: 6px;
  font-size: 13px;
}

.deepam-drawer-contact .phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  /* The address is long; let it wrap rather than push the drawer wider. */
  overflow-wrap: anywhere;
}

/* Inside the drawer the category list is a plain list, not a floating panel --
   the theme positions .category-sub-menu absolutely for the header dropdown. */
#side-bar .menu-category .category-sub-menu {
  position: static;
  box-shadow: none;
  border: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------------------------------------------------------------------------
   Category strip under the hero: image only.

   The theme's card is a 161px white box with a border and 25px of padding, and
   the picture sat small inside it. Here the picture IS the card: no background,
   no border, no padding, and a square that sizes itself to the slide Swiper
   gives it.
--------------------------------------------------------------------------- */
/* WIDTH IS SWIPER'S TO DECIDE, not this stylesheet's.
   The slide was pinned to 200px, which is what forced slidesPerView="auto" and
   left a half-cut card at the right edge. With an integer slidesPerView Swiper
   writes an inline width that divides the track evenly, so a fixed width here
   would either fight it or bring the slicing back. */
.rts-caregory-area-one .swiper-slide {
  width: auto;
  /* Without this Swiper stretches every slide to the tallest one; the cards are
     the same height anyway, and it keeps the row from shifting while images
     load. */
  height: auto;
}

/* Nothing may spill past the slide edge -- overflow here is the other way a
   card ends up looking cut. */
.rts-caregory-area-one .swiper {
  overflow: hidden;
}

.rts-caregory-area-one .single-category-one {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  height: auto;
  gap: 10px;
}

/* max-width/max-height must be released too: the theme caps this image at
   70x94, which silently wins over a plain width/height and is why the picture
   stayed thumbnail-sized. */
/* Fills whatever width Swiper gave the slide, and stays square via
   aspect-ratio rather than a hardcoded height -- a fixed 200px height against a
   fluid width would stretch or squash the photo at every breakpoint.

   The max-* caps must be released too: the theme caps this image at 70x94,
   which silently wins over a plain width/height and is why the picture stayed
   thumbnail-sized. */
.rts-caregory-area-one .single-category-one img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin: 0;
  object-fit: cover;
  /* One rounded corner, top left. Written longhand rather than as the
     four-value shorthand so it is obvious which corner is which. */
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  /* A hairline instead of the old box: it separates a pale product photo from
     the page without putting a card back around it. */
  border: 1px solid var(--color-border);
}

.rts-caregory-area-one .single-category-one p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--color-heading-1);
}

.rts-caregory-area-one .single-category-one:hover p {
  color: var(--color-primary);
}

/* --- Carousel arrows: ONE treatment, every carousel -----------------------
   White glyph on the house orange, everywhere there are arrows at all.

   THE HERO HAS NONE. It advances on its own and can be swiped, and a pair of
   80px controls over the artwork competed with the offer printed on it. Its
   buttons are gone from the markup rather than hidden here, so there is nothing
   left to style -- see components/banner/BannerOne.tsx.

   That leaves two: the product rows, which were an orange glyph on nothing, and
   the category strip. Same control, same job, so one appearance.

   The selectors are long because the theme's own rule for the product row is
   specific (0-3-0), and a bare .swiper-button-next would lose to it. Each group
   here matches or beats the rule it replaces.

   SIZES ARE LEFT ALONE -- 33px beside a product heading, 40px on the category
   strip, and those are deliberate for where they sit. Only the colours are
   unified. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev,
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
  background-color: var(--color-primary);
  background-image: none;
  border: 1px solid var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgb(194 24 91 / 45%);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* The Font Awesome icon inside the hero and product arrows. The theme turns
   this one primary-coloured on hover against a white background; here the
   background stays orange, so the glyph stays white. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-next:hover i,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:hover i {
  color: #fff;
}

/* THE CHEVRON IS DRAWN IN CSS, NOT IN A FONT.
   Swiper's own arrow is `content: "next"` set in its `swiper-icons` webfont,
   which maps that string to a single glyph. That font is not loading here --
   document.fonts.check('14px swiper-icons') is false -- so the button was
   rendering the four literal letters n-e-x-t in white, which at 14px inside a
   40px circle reads as a smudge rather than an arrow.

   Two borders on an empty box, rotated: no font, no icon library, nothing to
   fail to load, and it stays crisp at any size. */
.rts-caregory-area-one .swiper-button-next::after,
.rts-caregory-area-one .swiper-button-prev::after {
  content: "";
  /* REQUIRED. A pseudo-element is display: inline by default, and width and
     height are simply ignored on an inline box -- so the chevron collapsed to
     nothing and the button rendered as a plain orange disc. */
  display: block;
  width: 9px;
  height: 9px;
  border-style: solid;
  border-color: #fff;
  /* Top and right only -- the two edges that form a chevron once rotated. */
  border-width: 2px 2px 0 0;
  /* The letters are gone, but the pseudo-element still inherits text metrics
     that would offset the box. */
  font-size: 0;
  line-height: 0;
}

/* A rotated square sits visually off-centre in its box, so each is nudged back
   towards the middle by roughly half its border width. */
.rts-caregory-area-one .swiper-button-next::after {
  transform: rotate(45deg);
  margin-left: -3px;
}

.rts-caregory-area-one .swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-right: -3px;
}

/* DOUBLE ARROWS. Where the markup already supplies a Font Awesome icon, Swiper
   still draws its own chevron on top -- two arrows in one button, which is what
   put a blue glyph over the hero's white one. Suppressed for those two, kept
   for the category strip, whose buttons have no icon of their own. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next::after,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev::after {
  content: none;
}

.title-area-between .next-prev-swiper-wrapper .swiper-button-next:hover,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:hover,
.rts-caregory-area-one .swiper-button-next:hover,
.rts-caregory-area-one .swiper-button-prev:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 8px 20px -8px rgb(194 24 91 / 60%);
  transform: scale(1.06);
}

/* Keyboard focus gets the same ring the rest of the site uses. */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next:focus-visible,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:focus-visible,
.rts-caregory-area-one .swiper-button-next:focus-visible,
.rts-caregory-area-one .swiper-button-prev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* NO ARROWS ON THE PRODUCT ROWS BELOW 1200px.
   There the row is dragged with a finger and Swiper is built with navigation
   turned off (components/product/ProductCarousel.tsx), so these two would be
   live-looking buttons that do nothing. The part-visible card at the right edge
   is what says the row continues. */
@media only screen and (max-width: 1199px) {
  .title-area-between .next-prev-swiper-wrapper {
    display: none;
  }
}

/* --- Category strip arrows: size and placement only ---------------------- */
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* THE ARROWS APPEAR ONLY WHEN THERE IS SOMEWHERE TO GO, and that decision is
   Swiper's, not this stylesheet's.

   Swiper adds `swiper-button-lock` to both buttons whenever every slide already
   fits -- five categories in a five-wide row, say -- and its own CSS hides that
   class. So the controls disappear when the strip is not a carousel and come
   back on their own the moment another category makes it one. Nothing here
   should second-guess that: a width-based rule cannot know how many cards there
   are.

   `swiper-button-disabled` is a different state -- the end of a non-looping run.
   Hidden rather than greyed, because a visible control that does nothing is
   worse than none. */
.rts-caregory-area-one .swiper-button-disabled:not(.swiper-button-lock) {
  opacity: 0;
  pointer-events: none;
}

/* Set by the component from Swiper's own isLocked state, because the
   swiper-button-lock class it is supposed to add does not appear at every
   width. See components/banner/CategoryBb.tsx. */
.category-area-main-wrapper-one.is-locked .swiper-button-next,
.category-area-main-wrapper-one.is-locked .swiper-button-prev {
  display: none;
}

/* Smaller on a phone so the controls do not crowd a narrow strip -- but still
   PRESENT. They used to be display: none below 768px, which broke the rule
   above: at that width only two of five cards fit, so the strip genuinely is a
   carousel and hiding its only control left swiping as the sole way to know the
   rest existed. */
@media (max-width: 767px) {
  .rts-caregory-area-one .swiper-button-next,
  .rts-caregory-area-one .swiper-button-prev {
    width: 32px;
    height: 32px;
  }

  .rts-caregory-area-one .swiper-button-next::after,
  .rts-caregory-area-one .swiper-button-prev::after {
    width: 7px;
    height: 7px;
    border-width: 2px 2px 0 0;
  }
}

/* ===========================================================================
   PRODUCT CARD

   The theme's card is a flat grey tile: no elevation, images on grey, titles of
   different lengths pushing the price and buttons to different heights on every
   card, and outlined buttons that read as secondary actions.

   What this does:
     - white card on a hairline border, with a lift on hover
     - one fixed image box, white behind the photo, gentle zoom on hover
     - the title reserved two lines, so prices and buttons line up across a row
     - price as the loudest thing on the card, MRP and saving beside it
     - a filled Buy Now with the cart as a square icon button next to it
   All of it is scoped to .single-shopping-card-one, which every card variant
   uses -- grid, list, carousels and Recommended Picks.
   =========================================================================== */
.single-shopping-card-one {
  background: var(--color-surface);
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.single-shopping-card-one:hover {
  border-color: #e3d5cb;
  box-shadow: 0 14px 30px rgba(31, 31, 37, 0.1);
  transform: translateY(-3px);
}

/* --- image ---------------------------------------------------------------- */
.single-shopping-card-one .image-and-action-area-wrapper,
.single-shopping-card-one > .thumbnail-preview {
  position: relative;
  background: var(--color-surface);
}

/* No radius of its own. The theme rounds all four corners by 6px: the top two
   are hidden behind the card's own 14px clip, but the bottom two curved inward
   and left white notches where the image meets the text below it.

   Square here, and the card's overflow:hidden supplies the rounded top.

   A SQUARE FRAME, NOT A FIXED PIXEL HEIGHT.
   The frame used to be --card-image-height tall against whatever width the
   column happened to be: 225 x 260 in the shop grid, 428 x 220 in a carousel.
   Three different shapes, none of them the shape of the photograph -- and the
   wide carousel frame was the worst, cropping half the height off every
   full-length garment, which is how Popular Picks ended up showing a dhoti with
   no head on it.

   One square everywhere instead, which is the shape the server now stores every
   upload in (mediaSpec.js targets 1200 x 1200). Stored shape and displayed
   shape being the same number is what makes the picture fill the card edge to
   edge AND keep all of itself -- neither is possible while the two disagree.

   It follows the column width, so there is no per-breakpoint height to keep in
   step and the responsive rules that used to set one are gone with it.

   :not(.discount-offer) because the shop's list view reuses this class for a
   horizontal card whose picture sits BESIDE the text rather than above it. A
   square there would take the row's height from the column width and make each
   result a screen tall; that variant keeps the theme's own 186px frame. */
.single-shopping-card-one:not(.discount-offer) .thumbnail-preview {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: 0;
}

.single-shopping-card-one .thumbnail-preview img {
  width: 100%;
  height: 100%;
  /* cover, so every card is the same shape whatever the photograph's aspect --
     contain left pale bars down the sides of portrait shots. */
  object-fit: cover;
  transition: transform 0.45s ease;
}

.single-shopping-card-one:hover .thumbnail-preview img {
  transform: scale(1.06);
}

/* --- wishlist ------------------------------------------------------------- */
.single-shopping-card-one .action-share-option,
.single-shopping-card-one .pdp-wishlist,
.single-shopping-card-one .rec-wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.single-shopping-card-one .action-share-option .single-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--color-heading-1);
  transition: 0.25s;
}

.single-shopping-card-one .action-share-option .single-action:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* THE GLYPHS WERE INVISIBLE UNTIL YOU HOVERED EACH CIRCLE.
   The theme paints these icons white -- `... .action-share-option
   .single-action i { color: #fff }` -- because its strip has a coloured ground
   and no discs on it. Here each action IS a white disc, so white-on-white left
   three blank circles, and only the one under the pointer showed its icon (the
   theme's own :hover rule recolours it). Hovering the card is meant to reveal
   the actions, not to start a guessing game about which of three blanks is
   Quick View.

   Both ancestor forms are listed for the same reason as everywhere else in
   this file: the theme writes the rule twice, at (0,4,1) each, and a shorter
   selector loses to whichever one applies. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action i,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action i {
  color: var(--color-primary);
}

/* And the hover state inverts properly: the disc fills with wine and the glyph
   turns white, rather than both staying white. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action:hover,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action:hover {
  background: var(--color-primary);
}

.single-shopping-card-one .image-and-action-area-wrapper .action-share-option .single-action:hover i,
.single-shopping-card-one .thumbnail-preview .action-share-option .single-action:hover i {
  color: #ffffff;
}

/* --- body ----------------------------------------------------------------- */
.single-shopping-card-one .body-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 14px 16px;
  gap: 6px;
}

/* The theme puts margins on each of these; with a flex gap doing that job they
   stack, which is where the airy space between the name, the stock line and
   the price came from. */
.single-shopping-card-one .body-content > *,
.single-shopping-card-one .body-content .title,
.single-shopping-card-one .body-content .stock-qty-row,
.single-shopping-card-one .body-content .price-area {
  margin-bottom: 0;
  margin-top: 0;
}

.single-shopping-card-one .body-content > a {
  text-decoration: none;
}

.single-shopping-card-one .body-content .title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  /* Two lines reserved whether the name needs them or not: without it a
     one-line title and a two-line title put their prices at different heights
     and the row looks broken. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

.single-shopping-card-one .body-content .title:hover {
  color: var(--color-primary);
}

/* NO RESERVED SECOND LINE, AT ANY WIDTH.
   The theme keeps `min-height: 2.6em` here so a one-line name and a two-line
   name leave their prices at the same height. Measured on a card titled
   "Jewel": the text is 21px tall inside a 42px box, so 21px of nothing sat
   between the name and "120 in stock", and another 10px of margin under it.

   The reserve buys an alignment that is already paid for -- .cart-counter-action
   is pinned to the bottom of the card by `margin-top: auto`, so the buttons end
   level however tall the title is. Removing it closes the gap on every card that
   has a short name, and changes nothing about the ones that wrap.

   :not(.discount-offer) is required, not decoration: that is how the theme
   writes the rule, at (0,4,0), and a three-class selector loses to it. */
.single-shopping-card-one:not(.discount-offer) .body-content .title {
  min-height: 0;
  margin-bottom: 0;
}

.single-shopping-card-one .availability-list,
.single-shopping-card-one .stock-qty-row {
  font-size: 12px;
  color: var(--color-body);
}

/* --- price ---------------------------------------------------------------- */
.single-shopping-card-one .price-area {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* .current / .previous are the theme's own class names on these two spans.
   The selector has to include .body-content: the theme writes
   `.single-shopping-card-one .body-content .price-area .current` and colours it
   --color-danger (red), which outranks a shorter selector. */
.single-shopping-card-one .body-content .price-area .current,
.single-shopping-card-one .price-area .current {
  font-size: 19px;
  font-weight: 700;
  /* Heading colour, not the brand orange: on a card that already has an orange
     ribbon and an orange button, an orange price is a third thing shouting. */
  color: var(--color-heading-1);
}

.single-shopping-card-one .body-content .price-area .previous,
.single-shopping-card-one .price-area .previous,
.single-shopping-card-one .price-area del,
.single-shopping-card-one .price-area s {
  font-size: 13px;
  font-weight: 400;
  color: #9e9e9e;
  text-decoration: line-through;
}

/* Stock reads as a status, not as body copy: green when it is in, red when it
   is not, and small either way. */
.single-shopping-card-one .stock-qty-row .availability {
  font-size: 12px;
  color: #26a541;
  font-weight: 500;
}

.single-shopping-card-one .stock-qty-row .availability:only-child:not(:empty) {
  display: inline-block;
}

/* The heart on the image, matching the round action buttons. */
.single-shopping-card-one .card-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--color-heading-1);
  cursor: pointer;
  transition: 0.25s;
}

.single-shopping-card-one .card-wishlist-btn:hover,
.single-shopping-card-one .card-wishlist-btn.is-active {
  background: var(--color-primary);
  color: #ffffff;
}

/* Quick View and the hover cart sit bottom-left of the image, out of the
   heart's way. */
.single-shopping-card-one .image-and-action-area-wrapper .action-share-option {
  top: auto;
  right: auto;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.25s;
}

.single-shopping-card-one:hover .image-and-action-area-wrapper .action-share-option {
  opacity: 1;
  transform: translateY(0);
}

/* --- actions -------------------------------------------------------------- */
.single-shopping-card-one .cart-counter-action {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.single-shopping-card-one .cart-counter-action .rts-btn,
.single-shopping-card-one .cart-counter-action button {
  height: 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

/* The cart is a square icon button; Buy Now fills what is left, so the primary
   action is unmistakably the primary one. */
.single-shopping-card-one .cart-counter-action .list-cart-icon-btn,
.single-shopping-card-one .cart-counter-action button:first-child {
  flex: 0 0 46px;
  width: 46px;
  padding: 0;
  background: #fbf3f1;
  color: var(--color-primary);
  border: 1px solid #ecd3cb;
}

.single-shopping-card-one .cart-counter-action .list-cart-icon-btn:hover,
.single-shopping-card-one .cart-counter-action button:first-child:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.single-shopping-card-one .cart-counter-action .list-buy-btn,
.single-shopping-card-one .cart-counter-action button:last-child {
  flex: 1 1 auto;
  background: var(--color-primary);
  color: #ffffff;
  border: 1px solid var(--color-primary);
}

.single-shopping-card-one .cart-counter-action button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Grid / list toggle: the icon colour the theme forgot -------------------
   style.css turns the selected button orange and recolours the icon with
   `.single-button.active svg rect { stroke: #fff }` -- STROKE ONLY. That is
   enough for the grid icon, which is four outlined squares, but the list icon is
   two outlined squares plus two solid bars, and a solid bar is painted by `fill`.
   So the bars kept whatever colour they inherited and sat dark on the orange.

   Fixing it on the BUTTON rather than adding a fill rule: both icons draw with
   currentColor, so one declaration carries stroke and fill together, and any
   third icon added later is right by default. */
.filter-select-area .top-filter .right-end .button-tab-area .single-button {
  color: var(--color-heading-1);
}

.filter-select-area .top-filter .right-end .button-tab-area .single-button.active,
.filter-select-area .top-filter .right-end .button-tab-area .single-button:hover {
  color: #ffffff;
}

/* ===========================================================================
   SHOP LIST VIEW

   The other half of the grid/list toggle in the All Products toolbar: a
   horizontal card, picture on the left, and one column of text beside it --
   name, details, stock, price, buttons, in that order.

   The details were briefly a second column beside that one, mirroring the
   template's "Nutritional Values" panel. They read as a separate thing that had
   to be looked up rather than as part of the product, so they now continue
   straight on under the name and the card is a single column of reading.

   WHY THIS IS NOT THE THEME'S OWN LIST CSS. style.css has a full set of rules
   for exactly this card, scoped under
   `.product-area-wrapper-shopgrid-list.with-list`. Adding that class would also
   buy a grocery-grey #F3F4F6 fill on the body and a 238px thumbnail cap tuned
   to a packet of biscuits rather than a saree. Everything needed is a handful of
   rules, so the class is ours and the theme's stay dormant.

   DESKTOP ONLY. The toggle is not rendered below 1200px -- see
   app/(inner)/shop/page.tsx -- so nothing here needs a mobile case. The one
   exception is col-xl-6 dropping to full width, which Bootstrap handles.
   =========================================================================== */
.shop-list-view .single-shopping-card-one.discount-offer {
  /* flex-direction: row is THE declaration that makes this a list card at all.
     The card's own frame rule (`.single-shopping-card-one`, further up) is a
     flex COLUMN -- that is what puts the picture above the text in the grid --
     and the theme's `.discount-offer` rule sets `display: flex` and
     `align-items: center` without ever touching the direction. So the horizontal
     card was inheriting `column` and stacking exactly like the grid one. */
  flex-direction: row;
  /* align-items: center from the theme centres a short card's picture against
     tall text. Stretch keeps the image the full height of the card, which is
     what makes a row of them line up. */
  align-items: stretch;
  height: 100%;
  /* The theme spaces these with margin-bottom: 15px, from when they were a
     plain stack. They are grid columns now and g-4 owns the gutter. */
  margin-bottom: 0;
}

/* A third of the card, and no more: the picture is the least informative part
   of a list row -- the point of the view is the text beside it.

   Sized on the WRAPPER, not the anchor inside it. The wrapper exists so the
   wishlist heart has a positioned ancestor to sit against (see ShopMainList.tsx),
   which makes it the flex item -- putting the width on the anchor would leave the
   wrapper to size itself and the heart would drift with it. */
.shop-list-view .single-shopping-card-one.discount-offer .image-and-action-area-wrapper {
  flex: 0 0 34%;
  max-width: 34%;
  align-self: stretch;
}

.shop-list-view .single-shopping-card-one.discount-offer .thumbnail-preview {
  display: block;
  height: 100%;
}

.shop-list-view .single-shopping-card-one.discount-offer .thumbnail-preview img {
  width: 100%;
  height: 100%;
  /* The theme pins this at 186px, which crops a full-length garment to its
     middle. Filling the card's own height instead keeps the whole piece in
     frame however tall the text column turns out. */
  min-height: 100%;
  object-fit: cover;
}

/* ONE COLUMN, NOT TWO. The details started life as a panel beside the buying
   column, mirroring the template's "Nutritional Values"; they now run straight on
   under the product name instead, so .body-content keeps the shared flex COLUMN
   from further up this file and there is no direction to override here.

   MORE TOP PADDING THAN THE GRID CARD'S 14px. In the grid the picture sits
   directly above this box and its edge reads as the top of the text; here the
   picture is beside it, so the product name is the first thing at the top of the
   card and 14px left it sitting on the edge. */
.shop-list-view .single-shopping-card-one .body-content {
  padding: 22px 16px 16px;
}

.shop-list-view .single-shopping-card-one .body-content .title-area-left {
  min-width: 0;
  /* flex: 1, so this fills the card's height and .cart-counter-action's
     `margin-top: auto` has an axis to push the buttons to the bottom against --
     without it the stack sizes to its content and the buttons sit wherever the
     text ends, at a different height on every card in the row. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* 4px, not the grid card's 6px: there are more things in this stack, and at
     6px the gaps added up to more height than any of the lines. */
  gap: 4px;
}

/* NO RESERVED SECOND LINE -- this is where most of the card's height was going.
   The shared `.body-content .title` rule keeps `min-height: calc(1.35em * 2)` so a
   one-line name and a two-line name leave their prices level across a grid row.
   On a one-line name that reserve is a blank line of about 20px sitting between
   the product name and the "Brand:" line under it, which is the gap that made
   these cards look padded out.

   Nothing is lost by dropping it here. The buttons are pinned to the bottom of
   the card by .cart-counter-action's `margin-top: auto`, and the columns stretch
   to the tallest in the row, so the alignment the reserve buys is already paid
   for -- the same reasoning as the grid card's `:not(.discount-offer)` override
   further up. The clamp itself stays: a long name still stops at two lines.

   Four classes deep because the rule it has to beat is three (0,3,0). */
.shop-list-view .single-shopping-card-one .body-content .title {
  min-height: 0;
}

/* ONE LINE, ALWAYS. "120 in stock" is short enough to fit and long enough to
   break after "in" when the column narrows, which puts "stock" on a line of its
   own and shifts everything below it down by a row -- on some cards in a row and
   not others. Nothing competes for the width now that the stepper is gone. */
.shop-list-view .single-shopping-card-one .stock-qty-row,
.shop-list-view .single-shopping-card-one .stock-qty-row .availability {
  white-space: nowrap;
}

/* --- Details, continuing under the product name ---------------------------
   No border, no panel, no heading. These lines are part of the same reading
   column as the name above them, so the only thing separating them from the
   description is a slightly wider gap than the 6px rhythm. */
.shop-list-view .product-detail-values {
  margin-top: 0;
}

/* Label then value on one line, LEFT-ALIGNED AS A PAIR -- not pushed to opposite
   edges. Spreading them with space-between is a column layout: it works when the
   panel is a fixed width and the eye can follow a right-hand edge down. In a
   single column that edge is the whole card, so "Brand" and "Deepam" ended up
   half a card apart with nothing between them.

   The value is allowed to wrap. "Colours: Maroon, Bottle Green, Off White" is a
   normal answer, and clamping it would hide the thing the line exists to say. */
.shop-list-view .product-detail-values .single {
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* 1px, and the line-height does the rest. Five of these stack up, so every
     pixel of margin here is five pixels of card. */
  margin: 1px 0;
  font-size: 13px;
  line-height: 1.45;
}

.shop-list-view .product-detail-values .label {
  flex: 0 0 auto;
  color: var(--color-body);
}

.shop-list-view .product-detail-values .value {
  min-width: 0;
  font-weight: 500;
  color: var(--color-heading-1);
}

/* The carousel card is the same square as every other; only its padding differs.
   It used to force a shorter 220px image so more cards fit a row, which is what
   cropped a full-length garment down to its middle. */
.mySwiper-category-1 .single-shopping-card-one {
  padding: 0;
}

/* ===========================================================================
   SHORTER CARDS ON A PHONE OR TABLET

   WIDTH IS UNCHANGED -- how many cards fit a row is set in
   components/product/ProductCarousel.tsx and by the grid's own columns, and
   nothing here touches it. This is height only.

   Where the height went:
     title        two lines reserved whether the name needs them or not
     stock line   "12 in stock" on a row of its own
     buttons      42px tall with 46px of square cart beside them
     padding      14px all round, plus a 6px gap between every one of the four

   Each is defensible on a desktop grid; stacked on a phone they made a card
   most of a screen tall, so two products filled the viewport and the row below
   never announced itself.

   THE IMAGE IS NO LONGER IN THAT LIST. It is square and follows the column
   width, so it shrinks with the card on its own and there is no per-breakpoint
   height left to set. What follows is the text and the buttons only.

   Scoped to .single-shopping-card-one, which every variant uses -- carousels,
   shop grid, Recommended Picks -- so the same product is not one height here
   and another two sections down.
   =========================================================================== */
@media only screen and (max-width: 1199px) {
  .single-shopping-card-one {
    border-radius: 10px;
  }

  /* 14px of air on all four sides plus a 6px gap between four children is 62px
     of the card spent on nothing. */
  .single-shopping-card-one .body-content {
    padding: 9px 10px 10px;
    gap: 3px;
  }

  /* THE BLANK SECOND LINE GOES; THE SECOND LINE ITSELF STAYS.
     `min-height: 2.6em` reserves two lines under every name whether it needs
     them or not, so a short title carries an empty line beneath it -- the most
     visible of the wasted space inside these cards. Dropping the reserve (not
     the two-line clamp) means a short name takes one line and a long one still
     takes two, with nothing truncated either way.

     Nothing is lost by it: the actions row is pinned to the card's bottom edge
     by its own margin-top:auto, so the buttons still line up across the row
     however tall the title is. The reserve was buying an alignment that was
     already paid for.

     :not(.discount-offer) is not decoration -- the rule it has to beat is
     written that way at (0,4,0), and a plain three-class selector loses to it
     however late it appears. */
  .single-shopping-card-one:not(.discount-offer) .body-content .title {
    font-size: 13.5px;
    line-height: 1.3;
    min-height: 0;
  }

  .single-shopping-card-one .body-content .price-area .current,
  .single-shopping-card-one .price-area .current {
    font-size: 16px;
  }

  .single-shopping-card-one .body-content .price-area .previous,
  .single-shopping-card-one .price-area .previous,
  .single-shopping-card-one .price-area del,
  .single-shopping-card-one .price-area s {
    font-size: 12px;
  }

  .single-shopping-card-one .price-area {
    gap: 6px;
  }

  /* The stock count keeps its own row -- it is the one line that tells someone
     they cannot buy the thing -- but at 11px with the line-height pulled in it
     costs 13px rather than 20.

     The bare .availability is Recommended Picks: its card writes the count as a
     plain span in the body rather than inside a .stock-qty-row, so the two
     selectors above missed it entirely and that card kept a full-size line. */
  .single-shopping-card-one .availability-list,
  .single-shopping-card-one .stock-qty-row,
  .single-shopping-card-one .body-content > .availability,
  .single-shopping-card-one .stock-qty-row .availability {
    font-size: 11px;
    line-height: 1.2;
  }

  /* 38px still clears the 36-40px a fingertip needs; the desktop 42/46 was room
     for a label, not for the touch. */
  .single-shopping-card-one .cart-counter-action {
    gap: 6px;
  }

  .single-shopping-card-one .cart-counter-action .rts-btn,
  .single-shopping-card-one .cart-counter-action button {
    height: 38px;
    font-size: 13px;
    border-radius: 7px;
  }

  .single-shopping-card-one .cart-counter-action .list-cart-icon-btn,
  .single-shopping-card-one .cart-counter-action button:first-child {
    flex: 0 0 40px;
    width: 40px;
  }

  .single-shopping-card-one .card-wishlist-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .single-shopping-card-one .card-wishlist-btn,
  .single-shopping-card-one .pdp-wishlist,
  .single-shopping-card-one .rec-wishlist {
    top: 8px;
    right: 8px;
  }

  /* THE HOVER STRIP IS NOT RENDERED ON A TOUCH SCREEN.
     Cart and Quick View live in a bar that fades in on :hover -- a state a
     finger cannot enter and cannot leave. In practice a tap sets it, so the
     icons appear over the image AFTER the tap that was meant for the product,
     and stay there until something else is tapped.

     Nothing is lost by removing them: the wishlist heart is a separate,
     always-visible control on the image, and Add to Cart is a button in the
     card body. Quick View is the one thing that goes -- tapping the card opens
     the full product page, which is the same information with room for it.

     Both three-class forms are listed because the theme styles the strip twice
     over -- once under .image-and-action-area-wrapper and once under
     .thumbnail-preview, each at (0,3,0). A shorter selector loses to whichever
     of them applies. */
  .single-shopping-card-one .action-share-option,
  .single-shopping-card-one .image-and-action-area-wrapper .action-share-option,
  .single-shopping-card-one .thumbnail-preview .action-share-option {
    display: none;
  }
}

/* A phone gets the same card again, a little tighter still. The image needs no
   entry here either -- square and following the column, it is already smaller. */
@media only screen and (max-width: 575px) {
  .single-shopping-card-one .body-content {
    padding: 8px 9px 9px;
  }

  .single-shopping-card-one:not(.discount-offer) .body-content .title {
    font-size: 13px;
  }

  .single-shopping-card-one .cart-counter-action .rts-btn,
  .single-shopping-card-one .cart-counter-action button {
    height: 36px;
    font-size: 12.5px;
  }

  .single-shopping-card-one .cart-counter-action .list-cart-icon-btn,
  .single-shopping-card-one .cart-counter-action button:first-child {
    flex: 0 0 38px;
    width: 38px;
  }
}

/* ===========================================================================
   HOME SECTION RHYTHM

   Recommended Picks sits on rts-section-gap -- 60px above and below -- and that
   is the spacing to match. The others were each half-padded: Popular Picks had
   a bottom gap and no top, Shop by Category the reverse, and the category strip
   neither. Read down the page it made some sections look glued together and
   others adrift.

   One value for all of them, so the page has a single rhythm.
   =========================================================================== */
/* Less above than below: a heading sits at the top of each section, and the
   space under the previous section's content already separates them. 60px on
   both sides made the headings drift away from what they label.

   42px, not 60: on the category strip that 60 was the bulk of the gap under the
   labels, and with the hero wrapper's own 30px beneath it the row was framed
   far more heavily below than above. The other three sections take the same
   value so the page keeps one rhythm. */
.rts-caregory-area-one,
.rts-grocery-feature-area,
.category-feature-area,
.top-tranding-product {
  padding-top: 24px;
  padding-bottom: 42px;
}

/* The strip sits directly under the hero, which supplies its own separation --
   a full 60px there would leave the banner floating away from the page. */
.rts-caregory-area-one {
  padding-top: 34px;
}

@media only screen and (max-width: 991px) {
  .rts-caregory-area-one,
  .rts-grocery-feature-area,
  .category-feature-area,
  .top-tranding-product {
    padding-top: 18px;
    padding-bottom: 40px;
  }

  .rts-caregory-area-one {
    padding-top: 24px;
  }
}

/* --- Trust strip: even air above and below the four cards -----------------
   THE GAP UNDER THESE CARDS IS NOT THIS SECTION'S PADDING ALONE. rts-section-gap
   gives the strip a symmetric 60px, which looks correct in the stylesheet and
   wrong on the page: above the cards that 60px is the whole distance to the
   grey hero band, but below it Popular Picks adds its own padding-top from the
   rule above, so the cards sat 84px clear of the next heading against 60px
   clear of the band.

   The two numbers are made to sum to the 60px above instead of each being 60.
   That is why this is expressed as a subtraction of the following section's
   padding-top and has to be kept in step with it -- 36 + 24 here, 42 + 18 on
   small screens. */
.rts-feature-area.rts-section-gap {
  padding-bottom: 36px;
}

@media only screen and (max-width: 991px) {
  .rts-feature-area.rts-section-gap {
    padding-bottom: 42px;
  }
}

/* NOT SHOWN ON A PHONE OR TABLET.
   Four promises about the shop, none of which is a thing to buy, sitting
   between the banner and the first products -- on a narrow screen that is most
   of a scroll's worth of reading before the catalogue starts. The strip is
   rendered rather than dropped in the component so it is still there for the
   desktop layout it was designed for, where it costs one band across a wide
   row. The same content is on the About page for anyone who wants it. */
@media only screen and (max-width: 1199px) {
  .rts-feature-area {
    display: none;
  }
}

/* Feature cards centred.

   The columns are col-xl-20 -- a fifth of the row each -- because the theme
   shipped five. With four coming from the admin the row filled 80% and sat hard
   against the left, leaving a 281px hole on the right. Centring means any
   number reads as deliberate: four sit centred, five still fill the row, three
   would centre too. */
.rts-feature-area .row {
  justify-content: center;
}

/* --- Feature cards: one row from md up ------------------------------------
   "Wide Assortment", "Easy Return Policy", "Best Prices and Offers",
   "Support 24/7" belong on a single line -- they read as one promise about the
   shop, and split across two rows of two they read as two unrelated pairs.

   The theme's classes gave 20% each only at xl (1200px+); from 992-1199px
   col-lg-6 took over and broke them into 2x2, on exactly the laptop widths
   most people browse at.

   GRID, NOT FLEX. The obvious fix is flex: 1 1 0 on the columns, but .row is
   flex-wrap: wrap and a flex item's default min-width: auto refuses to shrink
   below its own content -- so as soon as four cards' min-content widths exceed
   the container they wrap anyway, which is the very thing being fixed. Grid
   with grid-auto-flow: column cannot wrap: the track count is the child count,
   full stop.

   minmax(0, 1fr) rather than 1fr for the same reason -- 1fr floors at
   min-content, minmax(0, 1fr) genuinely allows equal division.

   Column flow also means this does not care how many cards the admin
   configures: four sit at 25%, five at 20%, three at a third each. */
@media (min-width: 992px) {
  .rts-feature-area .row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  /* The Bootstrap width/flex rules are meaningless once the parent is a grid,
     but they are cleared so nothing here depends on which classes the markup
     happens to carry. */
  .rts-feature-area .row > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

/* --- Feature cards: the premium treatment ---------------------------------
   The theme's card is a 1px grey box with a flat white fill -- correct, and
   completely anonymous. For a boutique the trust strip is the first thing that
   says what kind of shop this is, so it earns more than a border.

   The vocabulary here is deliberately restrained rather than decorative: warm
   paper instead of pure white, a hairline that warms on approach, layered
   shadow rather than one heavy drop, and an icon that lives in a ring instead
   of floating loose. Restraint IS the premium signal -- glow and gloss read as
   cheap, and would fight the product photography further down the page.

   Everything is built from the palette variables at the top of this file, so a
   change of house colour carries through here without edits. */
.rts-feature-area .single-feature-area {
  position: relative;
  overflow: hidden;

  /* Centred, so the icon sits level with its heading rather than above it.
     Never flex-direction: column -- stacking the icon over the label is the
     specific thing this replaced. */
  align-items: center;
  gap: 18px;
  padding: 26px 24px;

  /* GRADIENT BORDER. border-image cannot do this -- it ignores border-radius
     outright, so a gradient border applied that way comes out square with
     rounded content inside it. The working technique is two background layers:
     the paper fill clipped to the PADDING box, the gradient clipped to the
     BORDER box, with the border itself transparent so the second layer shows
     through exactly where the border would be. Radius applies to both, because
     it is one element's background rather than a real border.

     background-color must stay transparent: a colour fills the border box and
     would paint straight over the gradient ring. */
  border: 2px solid transparent;
  border-radius: 16px;

  background-color: transparent;
  /* Layer 1 -- warm paper, not flat white: a barely-there wash towards the
     house tint, which stops four identical rectangles reading as a wireframe.
     Layer 2 -- the border gradient, blush into the house rose, running
     corner to corner so no two cards' borders look identical in the row. */
  background-image:
    linear-gradient(168deg, var(--color-surface) 0%, #f8f0f0 46%, var(--color-primary-soft) 100%),
    linear-gradient(
      135deg,
      rgb(244 143 177 / 85%) 0%,
      rgb(252 228 236 / 70%) 40%,
      rgb(216 27 96 / 75%) 70%,
      rgb(194 24 91 / 60%) 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Two shadows doing different jobs -- a tight one to seat the card on the
     page, a wide soft one for depth. One heavy shadow just looks like a drop
     shadow; this reads as a lit surface. */
  box-shadow:
    0 1px 2px rgb(28 25 23 / 4%),
    0 12px 28px -16px rgb(28 25 23 / 14%);

  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.4s ease;
}

/* The same ring again, saturated, fading in over the resting one on hover.
   background-image cannot be transitioned -- it swaps instantly -- so the bright
   state is a separate layer whose OPACITY animates, which can.

   The mask is what turns a filled rounded rectangle into a ring: two mask
   layers, one clipped to the content box and one covering the whole element,
   composited so they cancel everywhere they overlap. What survives is the 2px
   frame. -webkit- prefixes included for Safari, which still needs them. */
.rts-feature-area .single-feature-area::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;

  background-image: linear-gradient(
    135deg,
    var(--color-primary-fill) 0%,
    var(--blush) 35%,
    var(--color-primary) 70%,
    var(--color-primary-hover) 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* A soft bloom in the far corner. pointer-events: none so it can never sit
   between the cursor and the card's own link. */
.rts-feature-area .single-feature-area::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgb(194 24 91 / 10%) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* --- THESE CARDS ARE STATIC ------------------------------------------------
   They say what the shop is -- handmade, Kundan, bangles and earrings -- and
   they go nowhere: the admin's Site Features rows carry no link, and
   FeatureOne.tsx only wraps a card in an anchor when one is set.

   So every hover response is removed. A card that lifts, brightens its ring
   and lights its icon under the cursor is making a promise about what a click
   will do, and the click does nothing -- which reads as the site being broken
   rather than as decoration. The resting treatment is untouched; it is the
   MOVEMENT that claimed to be a control.

   Written as :hover rules set back to the resting values rather than deleted,
   so the base rules above stay the single description of how the card looks
   and this block is plainly "and it does not change". */
.rts-feature-area .single-feature-area,
.rts-feature-area .single-feature-area:hover {
  transform: none;
  cursor: default;
}

.rts-feature-area .single-feature-area:hover::before,
.rts-feature-area .single-feature-area:hover::after {
  opacity: 0;
}

/* --- The icon, as a medallion ---------------------------------------------
   Previously a bare glyph inheriting 16px body text, which is why it read as
   an afterthought. Now it has a fixed ring of its own: the card's anchor, and
   the one element that changes state decisively on hover.

   grid + place-items centres the glyph optically whatever its shape -- a
   headset and a tag have very different bounding boxes, and line-height alone
   would leave each sitting at a slightly different height. */
.rts-feature-area .single-feature-area .icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;

  background-color: var(--color-surface);
  border: 1px solid var(--color-primary-ring);
  /* The inset ring is what makes this look like a medallion rather than a
     circle with an icon in it. */
  box-shadow:
    inset 0 0 0 4px rgb(255 247 237 / 90%),
    0 6px 14px -8px rgb(74 10 36 / 36%);

  color: var(--color-primary);
  font-size: 24px;
  line-height: 1;

  transition:
    background-color 0.4s ease,
    background-image 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The medallion held the most decisive hover state of the lot -- it filled
   with rose and grew. Left exactly as it rests, for the reason above. */
.rts-feature-area .single-feature-area:hover .icon {
  background-image: none;
  color: var(--color-primary);
  box-shadow:
    inset 0 0 0 4px rgb(255 247 237 / 90%),
    0 6px 14px -8px rgb(74 10 36 / 36%);
  transform: none;
}

/* An admin-uploaded image is sized here rather than trusting the width/height
   attributes in the JSX, so a picture and a glyph come out the same size
   instead of the card changing shape depending on which was configured. */
.rts-feature-area .single-feature-area .icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* --- The words ------------------------------------------------------------ */
.rts-feature-area .single-feature-area .information {
  min-width: 0;
}

.rts-feature-area .single-feature-area .title {
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 600;
  /* Slightly tightened: at this size the theme's default tracking makes a
     two-word label look loosely set. */
  letter-spacing: -0.01em;
  color: var(--color-heading-1);
}

.rts-feature-area .single-feature-area .information p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-body);
}

/* --- Linked cards ---------------------------------------------------------
   A card with a linkUrl is wrapped in an <a>. An inline anchor gives the card
   nothing to resolve height: 100% against, so linked and unlinked cards would
   end up different heights in the same row. */
.rts-feature-area .row > [class*="col-"] > a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Keyboard users get the same affordance as the mouse, on the ring rather than
   the default outline so it follows the card's radius. */
.rts-feature-area .row > [class*="col-"] > a:focus-visible {
  outline: none;
}

/* Matches the hover treatment -- the bright gradient ring plus an outer halo --
   rather than setting border-color, which is transparent by design here and
   would paint a flat band over the gradient. */
.rts-feature-area .row > [class*="col-"] > a:focus-visible .single-feature-area {
  box-shadow:
    0 0 0 3px var(--color-primary-ring),
    0 26px 44px -22px rgb(74 10 36 / 34%);
}

.rts-feature-area .row > [class*="col-"] > a:focus-visible .single-feature-area::before {
  opacity: 1;
}

/* Below xl each card's share of the row is narrow, so the roomier padding and
   type would crowd. Restored above 1400px where there is width for it. */
@media (min-width: 992px) and (max-width: 1399px) {
  .rts-feature-area .single-feature-area {
    padding: 22px 16px;
    gap: 13px;
  }

  .rts-feature-area .single-feature-area .icon {
    width: 50px;
    height: 50px;
    font-size: 21px;
  }

  .rts-feature-area .single-feature-area .icon img {
    width: 26px;
    height: 26px;
  }

  .rts-feature-area .single-feature-area .title {
    font-size: 15px;
  }

  .rts-feature-area .single-feature-area .information p {
    font-size: 12px;
  }
}

/* Motion is decoration here, so it goes first for anyone who has asked for
   less of it. The colour and shadow changes stay -- they carry the hover
   meaning; only the movement is dropped. */
@media (prefers-reduced-motion: reduce) {
  .rts-feature-area .single-feature-area,
  .rts-feature-area .single-feature-area::before,
  .rts-feature-area .single-feature-area::after,
  .rts-feature-area .single-feature-area .icon {
    transition-duration: 0.01ms;
  }

  .rts-feature-area .single-feature-area:hover {
    transform: none;
  }

  .rts-feature-area .single-feature-area:hover .icon {
    transform: none;
  }
}

/* ---- Product colours -------------------------------------------------------
   The shades a product comes in, in their own row under the title: name, then
   which one of it you are looking at, then the price -- the order a shopper
   reads a product page in, and the order every marketplace prints it.

   Fed from the admin's variant rows: staff pick a shade off the colour wheel
   and it is stored as a hex, which is what lets these be painted at all. A
   colour recorded as a name with no shade still appears, as an initial in a
   neutral chip, so it is never silently missing.
-------------------------------------------------------------------------- */

.product-colours-block {
  margin: 4px 0 18px;
}

/* Says in words which shade is showing. The strip says which TILE is picked;
   only this says what it is called, and the name is what a shopper quotes back
   when they ask for it. */
.product-colours__label {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
}

.product-colours__label span {
  font-weight: 400;
  color: #57534e;
}

/* The rail holds the arrows OUTSIDE the scrolling row rather than floating them
   over it, so neither ever covers a tile the shopper is trying to judge. */
.product-colours-rail {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ONE ROW THAT SLIDES, not a block that wraps: wrapping pushed the price and
   the buy buttons down the page with every extra shade. The scrollbar is
   hidden because the arrows and the drag do the same job without taking a
   permanent 12px out of the tiles. */
.product-colours {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Room for the chosen tile's ring, which is drawn outside its border. */
  padding: 3px;
  margin: -3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-colours::-webkit-scrollbar {
  display: none;
}

/* Round, bordered, and the size of a real button: these sit at the edge of a
   row of pictures, where a bare chevron reads as decoration. */
.product-colours__nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: #1c1917;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.product-colours__nav:hover {
  background: #f5f5f4;
  border-color: #d6d3d1;
}

/* A COLOUR AS A PHOTOGRAPH, the marketplace pattern: a strip of small product
   pictures under the title, one per shade, and picking one repaints the main
   image and the thumbnail rail below it.

   Square and larger than the dots it replaces -- a 28px circle of fabric shows
   nothing, and the point of a picture here is that it can be read. Sits beside
   the dots without a fight: a colour with no photograph keeps its circle, so a
   half-photographed product looks unfinished rather than broken. */
.product-colours__thumb {
  /* Portrait, and bigger than the square they were beside the title: a garment
     photographed on a person is taller than it is wide, and a square crop of
     one shows a face and a wall rather than the clothes. */
  flex: 0 0 auto;
  width: 72px;
  height: 92px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.product-colours__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-colours__thumb:hover {
  transform: translateY(-1px);
}

/* The chosen one, said twice -- border AND ring -- so it still reads on a
   picture whose own edges happen to be dark. In the brand rose, not black:
   a black ring round a swatch read as a black-bordered button. */
.product-colours__thumb.is-chosen {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.product-colours__thumb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);
}

/* Faded, not hidden: a shade that is out of stock is still information about
   what the shop carries, and it stays pickable so the gallery can show it. */
.product-colours__thumb.is-soldout img {
  opacity: 0.45;
}

.product-colours__thumb.is-soldout::after {
  content: '';
  position: absolute;
  inset: 0;
  /* One diagonal, the same mark the dots use for sold out. */
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.35) 50%,
    transparent calc(50% + 1px)
  );
}

.product-colours__dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.product-colours__dot:hover {
  transform: scale(1.08);
}

/* A ring OUTSIDE the swatch, not a border on it: a border eats into the circle
   and changes the amount of colour on screen, which is the one thing a shopper
   is judging. */
.product-colours__dot.is-chosen {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1917;
}

.product-colours__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2626;
}

/* Struck through rather than hidden. A colour the shop stocks but has sold out
   of is information -- removing it makes the range look smaller than it is,
   and the customer may want to ask when it is back. */
.product-colours__dot.is-soldout {
  opacity: 0.45;
  cursor: not-allowed;
}

.product-colours__dot.is-soldout::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.65) calc(50% - 1px),
    rgba(0, 0, 0, 0.65) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* Named but never given a shade on the wheel. */
.product-colours__initial {
  font-size: 12px;
  font-weight: 700;
  color: #57534e;
  background: #f5f5f4;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-colours__chosen {
  margin: 10px 0 0;
  font-size: 14px;
  color: #57534e;
}

.product-colours__out {
  color: #dc2626;
  font-weight: 600;
}

/* Smaller tiles on a phone, so more than two shades are visible at once
   without paging -- the strip is how the range is judged. */
@media (max-width: 575px) {
  .product-colours__thumb {
    width: 60px;
    height: 78px;
  }

  .product-colours__nav {
    width: 28px;
    height: 28px;
  }
}

/* =========================================================================
   Size picker
   -------------------------------------------------------------------------
   Chips rather than a dropdown: the sizes a boutique stocks are few, and a
   shopper comparing "is their M my M" needs to see every measurement at once
   rather than opening a list and reading them one at a time.

   A required choice, so it is drawn as one -- see the asterisk on the label
   and the disabled buttons behind it in shop/[slug]/page.tsx.
   ========================================================================= */

.product-sizes__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading-1);
}

/* The site's danger colour, which is what it means everywhere else here. */
.product-sizes__required {
  color: #dc2626;
}

/* ONE ROW, always, and no scrollbar. The sizes are a scale -- S, M, L read as a
   sequence, and both a wrap and a scroller hide part of it: the first breaks
   the line, the second puts XXL somewhere the shopper has to go looking for.

   So the chips shrink to fit instead. Every size stays on screen whatever the
   column width, which is the whole point of showing them as a row. */
.product-sizes__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

/* Shrinkable, and no wider than they need to be. min-width: 0 is what lets a
   flex item go below its content width -- without it "Free size" would hold the
   row open and push the rest off the end. */
.product-sizes__chip {
  flex: 1 1 auto;
  min-width: 0;
}

/* The labels are what actually has to fit, so they lose their padding first and
   then ellipsis rather than spilling out of the chip. */
.product-sizes__name,
.product-sizes__measure {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-sizes__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.25;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.product-sizes__chip:hover:not(:disabled) {
  border-color: var(--color-primary);
}

/* A ring, not a thicker border: a border that grows on selection shifts every
   chip beside it by a pixel, and the whole row twitches as you click along. */
.product-sizes__chip.is-chosen {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.product-sizes__chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Marked, not disabled. Every size is pickable -- a shop that will cut one to
   order still wants the request -- so this only says "not on the shelf". Muted
   rather than struck through, because a struck-through chip that is also
   selected reads as two contradictory things at once. */
.product-sizes__chip.is-soldout .product-sizes__name,
.product-sizes__chip.is-soldout .product-sizes__measure {
  opacity: 0.55;
}

/* The chosen one is fully legible again whatever its stock: it is what they
   are buying, and half-faded selected text reads as a rendering fault. */
.product-sizes__chip.is-soldout.is-chosen .product-sizes__name,
.product-sizes__chip.is-soldout.is-chosen .product-sizes__measure {
  opacity: 1;
}

.product-sizes__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading-1);
}

/* The measurement is the answer to "is their M my M", so it sits under the
   letter rather than in a tooltip nobody on a phone can open. */
.product-sizes__measure {
  font-size: 10px;
  color: var(--color-body);
  opacity: 0.75;
}

.product-sizes__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: #dc2626;
}

/* =========================================================================
   Product page on phone and tablet
   -------------------------------------------------------------------------
   Below 1200px the image column and the text column stack. Three things then
   have to be said explicitly, because stacking does not imply any of them:

     1. the image centres in the width it is given
     2. the text does NOT centre with it -- a centred paragraph of description
        and a centred price read as a poster, not a product
     3. nothing is allowed to be wider than the screen

   (3) is the one that bites. The page scrolls sideways if ANY descendant
   overflows, and the offender is usually a flex row of buttons whose items are
   all fixed width -- there is nothing to give, so the row grows instead.
   ========================================================================= */
@media only screen and (max-width: 1199px) {
  /* 1. THE IMAGE, CENTRED -- and it takes two rules, not one.

     The theme stacks the columns here and sets `margin: 0` on the image column
     at (0,3,0):

       .rts-product-details-section2 .details-product-area .product-thumb-area

     A shorter selector loses to that no matter where it sits in the file, which
     is why an earlier attempt at this did nothing. Matched depth for depth. */
  .rts-product-details-section2 .details-product-area .product-thumb-area {
    margin-left: auto;
    margin-right: auto;
  }

  /* The second rule is the one that actually moves the picture. The theme
     widens the COLUMN to 100%, while the image box inside it keeps its fixed
     --pdp-image-width -- so on a tablet a 460px frame sat at the left edge of a
     900px column. Centring the column achieves nothing while the box inside is
     still left-aligned. */
  .rts-product-details-section2 .details-product-area .product-thumb-area .product-thumb {
    margin-left: auto;
    margin-right: auto;
  }

  /* The thumbnail strip belongs under the middle of the image it describes. */
  .rts-product-details-section2 .details-product-area .product-thumb-area .product-thumb-filter-group {
    justify-content: center;
  }

  /* 2. TEXT STAYS LEFT.
     Below 768px the theme centres this whole block -- `align-items: center` and
     `text-align: center` on `.rts-product-details-section .contents`. Both have
     to be undone, not just the text-align: the block is a flex column, so
     align-items is what actually pulls the price and the buttons to the middle.

     Two classes on the same element (0,3,0) to outrank the theme's (0,2,0). */
  .rts-product-details-section.rts-product-details-section2 .contents {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .rts-product-details-section.rts-product-details-section2 .contents .product-title,
  .rts-product-details-section.rts-product-details-section2 .contents p,
  .rts-product-details-section.rts-product-details-section2 .contents .product-price {
    text-align: left;
  }

  /* 3. NOTHING WIDER THAN THE SCREEN.
     min-width: 0 on the columns is the actual fix -- a flex or grid item
     refuses to shrink below its content by default, which is how one long
     button row drags the whole page wide. The overflow-x guard on the section
     is the backstop for anything not thought of here. */
  .rts-product-details-section2 .details-product-area,
  .rts-product-details-section2 .contents,
  .rts-product-details-section2 .product-thumb-area {
    min-width: 0;
    max-width: 100%;
  }

  .rts-chop-details-area {
    overflow-x: hidden;
  }

  /* The buttons themselves: allowed to wrap, and allowed to shrink. The cart
     icon keeps its size, Buy Now takes the room that is left, and Share drops
     to the next line rather than off the edge. */
  .rts-product-details-section .details-product-area .product-bottom-action {
    flex-wrap: wrap;
  }

  .rts-product-details-section .details-product-area .product-bottom-action
    .share-option-shop-details {
    margin-top: 0;
  }
}

/* Post Review: white label, in every state.
   -------------------------------------------------------------------------
   The theme sets `.rts-btn { color: #fff }` (0,1,0) and Bootstrap sets
   `.btn-primary:hover { color: #fff }` (0,2,0) -- yet the label still changed
   on hover, so something between them was winning. Three classes on the same
   element (0,3,0) settles it without reaching for !important, and every state
   is listed so none of them can be picked up by a rule elsewhere.

   :disabled is included on purpose: the label reads "Posting..." while the
   review is in flight, and a greyed-out word on the faded background is the
   one moment the button most needs to stay readable. */
.rts-btn.btn-primary.review-post-btn,
.rts-btn.btn-primary.review-post-btn:link,
.rts-btn.btn-primary.review-post-btn:visited,
.rts-btn.btn-primary.review-post-btn:hover,
.rts-btn.btn-primary.review-post-btn:focus,
.rts-btn.btn-primary.review-post-btn:focus-visible,
.rts-btn.btn-primary.review-post-btn:active,
.rts-btn.btn-primary.review-post-btn:disabled {
  color: #ffffff;
}

/* Review headings, sized to be read.
   -------------------------------------------------------------------------
   The theme's scale sets --h5 to 16px and --h6 to 15px, which is barely above
   body text -- so "5.0 out of 5" and "Write a review" both read as ordinary
   sentences rather than as the headings they are.

   Scoped to the reviews block rather than raising --h5/--h6 globally: those two
   variables are used across the whole theme, and moving them would resize
   headings on every page to fix two lines on one tab. */
.product-details-review-product-style .title {
  font-size: 22px;
  line-height: 1.3;
}

.review-form-title {
  font-size: 22px;
  line-height: 1.3;
}

/* Panel headings at the size the serif is drawn for.
   -------------------------------------------------------------------------
   "Cart Totals", "Wishlist Totals" and "Available offers" are the headings of
   the three summary panels, and they sat at the theme's --h5 (16px) and --h6
   (15px). In Cormorant that is barely above the body text underneath, so each
   panel read as one undifferentiated block.

   Named individually rather than by raising --h5/--h6: those two variables set
   every small heading on the site, including the interface labels that are
   deliberately kept in the sans at 13-14px. */
.cart-total-area-start-right > .title,
.shop-sight-sticky-sidevbar > .title {
  font-size: 22px;
  line-height: 1.3;
}

/* Checkout button, centred on a phone.
   -------------------------------------------------------------------------
   TWO rules are needed, and the second is the one that matters. The theme sets

     .cart-total-area-start-right .bottom .rts-btn { width: 100%; max-width: 100% }

   so the button spans the whole panel. That is why it looked over-long, and
   also why centring the row alone did nothing: an item already filling its
   container has no free space left to be centred in. The width has to come off
   first, then the centring has something to work with.

   justify-content on the row rather than `margin: 0 auto` on the button: the
   disabled "Select an item to continue" state is a <button> and the live one is
   an <a>, and centring the container works the same for both. */
@media only screen and (max-width: 767px) {
  .cart-total-area-start-right .bottom .button-area {
    display: flex;
    justify-content: center;
  }

  .cart-total-area-start-right .bottom .rts-btn {
    width: auto;
    /* max-content, so the button is exactly as wide as its label -- and the
       100% ceiling stays as a guard for the longest label, "Select an item to
       continue", on the narrowest handset. */
    max-width: max-content;
    text-align: center;
  }
}

/* Shop by Category: the whole tile is the link.
   -------------------------------------------------------------------------
   The card only responded to its small "Shop Now" button, while everything
   about it -- the artwork, the heading, the hover -- said the whole thing was
   clickable. This stretches an invisible link over the card.

   z-index 1 puts it above the background but BELOW .content-area (raised to 2),
   so the heading stays selectable and Shop Now keeps its own hover and focus
   ring rather than being swallowed by the cover. */
.single-feature-card {
  position: relative;
}

.feature-card-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.single-feature-card .content-area {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Review lightbox

   Bootstrap's .modal-content is a white rounded card with a border, which
   around a full-bleed photograph shows as a pale frame with light corners
   poking past the image. Blacked out here so the picture meets the edge, which
   is the whole visual point of a lightbox.

   Scoped to .review-lightbox (the dialogClassName) so no other modal on the
   site -- the quick view, the cancel-order confirmation -- is affected. */
.review-lightbox .modal-content {
  background: #000000;
  border: none;
  border-radius: 8px;
  overflow: hidden;
}

/* Bootstrap caps .modal-lg at 800px, which on a wide screen leaves a portrait
   phone photo small in the middle of a lot of black. */
@media (min-width: 992px) {
  .review-lightbox {
    max-width: 920px;
  }
}

/* Edge to edge on a phone, where 800px of dialog inside a 390px screen is all
   margin. */
@media (max-width: 575.98px) {
  .review-lightbox {
    margin: 0;
    max-width: 100%;
  }

  .review-lightbox .modal-content {
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------------
   "Add More Products" on the cart

   The way back to browsing. Styled as an OUTLINE button rather than a third
   solid primary one: the row already holds Apply Coupon and Clear All, and
   three identical filled buttons give a shopper no idea which one the page
   wants them to press. Outline reads as "available, not urgent", which is
   exactly what continuing to shop is.

   .rts-btn.btn-primary is the theme's filled style, so every one of these has
   to outrank it -- hence the doubled class on the selector rather than a bare
   .cart-add-more. */
.cart-add-more.rts-btn.btn-primary {
  background: transparent;
  border: 1px solid var(--btn);
  color: var(--btn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cart-add-more.rts-btn.btn-primary:hover,
.cart-add-more.rts-btn.btn-primary:focus-visible {
  background: var(--btn-dark);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 100% center;
  border-color: var(--btn-dark);
  color: #ffffff;
}

/* The icon inherits the label's colour through both states, so it does not
   stay primary-coloured on a filled hover background. */
.cart-add-more.rts-btn.btn-primary i {
  color: inherit;
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Loading spinners

   Every one of them is markup'd as `.spinner-border .text-primary`, and
   .text-primary is Bootstrap's OWN utility -- #0d6efd, a blue that appears
   nowhere else on this site. brand.css never overrode it, so seven spinners
   across the cart, checkout, shop, product page and wishlist were flashing
   Bootstrap blue on a wine-coloured shop.

   Targeted at .spinner-border rather than by redefining .text-primary: that
   utility is Bootstrap's to mean "the framework's primary", and rewriting it
   would recolour every element anywhere that happens to carry the class. This
   changes the spinners and only the spinners.

   !important because Bootstrap's utilities carry it themselves -- .text-primary
   sets `color: ... !important`, so nothing without it can win, whatever the
   specificity or the source order. */
.spinner-border,
.spinner-grow {
  color: var(--color-primary) !important;
}

/* ---------------------------------------------------------------------------
   Checkout: quantity stepper and "Add More Products"

   The cart's stepper could not be reused: its styling is scoped to
   .single-shopping-card-one .cart-counter-action in the theme sheet, so the
   markup alone carries none of it. These follow the checkout-* naming the rest
   of that page uses instead of borrowing a container it does not have. */
.checkout-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
}

.checkout-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: #f7f7f7;
  color: var(--color-primary);
  font-size: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.checkout-qty-btn:hover:not(:disabled) {
  background: var(--btn);
  background-image: var(--rose-metal);
  color: #fff;
}

/* Greyed rather than hidden at a quantity of 1: a control that vanishes moves
   the plus button under the cursor, and the next click removes a line the
   shopper meant to keep. Removing is the cart's job, not this page's. */
.checkout-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.checkout-qty-value {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
}

/* Outline, matching the cart's own Add More Products: continuing to shop is
   available but not what this page is asking for -- Place Order is. */
.checkout-add-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px dashed #c9c9c9;
  border-radius: 6px;
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s;
}

.checkout-add-more:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.checkout-add-more i {
  color: inherit;
  font-size: 12px;
}

/* A pincode that cannot belong to the state typed beside it. Red because it
   blocks the address being saved -- it is a refusal, not advice. */
.checkout-field-hint {
  display: block;
  margin-top: 5px;
  color: #e02b2b;
  font-size: 12px;
  line-height: 1.45;
}

/* ---- Filtered-grid counts and the active-search chip -------------------- */

/* A count that no longer matches the grid beside it.
   The tallies come from the categories endpoint and describe a category's
   whole contents; the grid runs a filtered query. Dimmed rather than hidden --
   "what is actually in this category" is exactly what someone staring at an
   empty result wants to know, it just must not look like the grid's own
   figure. Both rails carry it so the desktop rail and the mobile drilldown
   never disagree. */
.rec-cat-count.is-stale,
.rec-drill-count.is-stale {
  opacity: 0.45;
  font-style: italic;
  cursor: help;
}

/* The active search, stated where the heading is rather than only in the
   address bar. Sits under the title on narrow screens, since title-area-between
   is a flex row that would otherwise squeeze the term. */
.shop-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.shop-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--color-border, #e6e6e6);
  border-radius: 999px;
  background: var(--color-light-1, #f7f7f7);
  font-size: 13px;
  line-height: 1.4;
  max-width: 100%;
}

.shop-filter-chip__label {
  color: var(--color-body);
  opacity: 0.7;
  flex-shrink: 0;
}

/* The term itself is the part worth reading, so it gets the weight -- and the
   truncation, since a long search must not push the × off the chip. */
.shop-filter-chip__value {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-body);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.shop-filter-chip__clear:hover,
.shop-filter-chip__clear:focus-visible {
  background: var(--color-primary, #c2185b);
  color: #fff;
}

/* The line under the two pay options, telling an online shopper where Place
   Order takes them. */
.checkout-pay-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #78716c;
  line-height: 1.6;
}

/* =========================================================================
   Complete Payment -- /checkout/payment
   -------------------------------------------------------------------------
   The layout every Indian marketplace uses, which is the reason for it: a
   shopper arrives at a payment screen already knowing where to look, and this
   is not the page to teach them somewhere new. A bar carrying the shop's mark,
   then ONE card holding everything -- ways to pay down the left, the chosen one
   in the middle, what is owed on the right.

   The two left columns scroll together INSIDE the card while the third stays
   put. A list of methods long enough to push the amount off screen is how
   somebody ends up paying without rechecking what for.

   The house wine where the marketplaces put their brand blue, and white left as
   white. A payment page borrowing another shop's colours is the version of this
   that gets mistaken for that shop.

   The site's own header sits above all this -- see the route's page.tsx. What
   the page still provides for itself is the thin policy strip at the bottom,
   which is what a payment screen is expected to carry.
   ========================================================================= */

.pay-page {
  /* Not 100vh: the site header sits above this now, and a full viewport under
     it would push the policy strip a header's height below the fold on every
     visit. Enough to keep a short page from ending halfway up the screen. */
  min-height: 60vh;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.pay-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.pay-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  overflow: hidden;
}

.pay-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
}

.pay-head__back {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #1c1917;
  font-size: 17px;
  cursor: pointer;
}

.pay-head__back:hover {
  background: #f5f5f4;
}

.pay-head__title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: #1c1917;
}

/* Pushed right by the auto margin, the way a padlock sits on a payment page. */
.pay-head__secure {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #f5f5f4;
  color: #57534e;
  font-size: 13px;
  font-weight: 600;
}

/* Said before any of the machinery below it: nothing here takes money yet, and
   a shopper has to know that before they go looking for a QR. */
.pay-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 24px 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 14px;
  line-height: 1.5;
}

.pay-notice--warn {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

.pay-notice a {
  color: inherit;
  text-decoration: underline;
}

/* The scrolling half and the fixed half. The summary is a fixed width because a
   column of figures reads badly stretched; the rest takes what is left. */
.pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  border-top: 1px solid var(--color-border);
}

/* THE INNER SCROLLER. Methods and the chosen panel move together; the summary
   beside them does not move at all.

   A height rather than max-height, so the two columns inside can fill it and
   the divider between them runs the whole way down -- a rule that stops short
   of the bottom of the box reads as an unfinished layout. */
.pay-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: 620px;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  /* A slim, quiet bar. The default on Windows is a 17px grey slab, which on a
     card this size reads as a second border. */
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 transparent;
}

.pay-body::-webkit-scrollbar {
  width: 10px;
}

.pay-body::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 999px;
  border: 3px solid #fff;
}

.pay-methods {
  border-right: 1px solid var(--color-border);
  /* The rail runs to the bottom of the scroller even when the list is short --
     five methods against a tall middle column would otherwise leave the divider
     hanging in mid air. */
  align-self: stretch;
}

.pay-method {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  background: var(--color-surface);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

/* The chosen one is tinted and marked on its leading edge -- a border alone is
   lost between two rows that already have one. */
.pay-method.is-active {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.pay-method.is-disabled {
  cursor: not-allowed;
  color: #a8a29e;
}

.pay-method__icon {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-primary);
  font-size: 14px;
  flex: 0 0 auto;
}

.pay-method.is-disabled .pay-method__icon {
  color: #a8a29e;
  opacity: 0.6;
}

.pay-method__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pay-method__title {
  font-size: 15.5px;
  font-weight: 600;
  color: inherit;
}

.pay-method__note {
  font-size: 12.5px;
  color: #78716c;
  line-height: 1.45;
}

.pay-method.is-disabled .pay-method__note {
  color: #a8a29e;
}

.pay-method__flag {
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #78716c;
  white-space: nowrap;
}

.pay-panel {
  padding: 28px 24px;
  text-align: center;
}

.pay-panel__title {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 600;
  color: #1c1917;
}

/* The card the amount and the code sit on. Tinted in the house colour, where
   the marketplaces tint theirs blue -- it is the one thing on the page being
   acted on, and it should not read as more of the panel behind it. */
.pay-qr-card {
  max-width: 340px;
  margin: 0 auto;
  padding: 22px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-primary-soft);
}

.pay-qr-card__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #78716c;
  font-weight: 600;
}

.pay-qr-card__amount {
  display: block;
  margin-top: 4px;
  font-size: 27px;
  font-weight: 700;
  color: #1c1917;
}

/* What sits where the placeholder QR used to, once the gateway is live.
   The real code lives in Razorpay's modal and cannot be drawn here, so this
   space says where to find it rather than showing something that looks
   scannable and is not. Same footprint as .pay-qr so the panel does not jump
   when the gateway's state resolves. */
.pay-qr-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 22px 18px;
  max-width: 260px;
  min-height: 190px;
  border: 1px dashed var(--color-border, #d6d3d1);
  border-radius: 10px;
  background: var(--color-surface);
  text-align: center;
}

.pay-qr-live > i {
  font-size: 30px;
  color: var(--color-primary, #c2185b);
  margin-bottom: 2px;
}

.pay-qr-live__lead {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #1c1917;
}

.pay-qr-live__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #78716c;
}

.pay-qr {
  position: relative;
  margin: 18px auto 14px;
  width: 210px;
  height: 210px;
  background: var(--color-surface);
  border-radius: 8px;
  padding: 6px;
}

/* BLURRED UNTIL ASKED FOR, as the marketplaces do it. A request for money
   sitting open on a screen is one a passer-by, a shared desk or a screen-share
   can photograph. */
.pay-qr svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(4px);
  transition: filter 0.18s ease;
}

.pay-qr.is-shown svg {
  filter: none;
}

.pay-qr__reveal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
  color: #1c1917;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

.pay-qr__reveal:hover {
  border-color: var(--color-primary);
}

/* Said once the code is on screen, because that is the moment somebody is about
   to point a phone at it. */
.pay-qr__stamp {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b45309;
  line-height: 1.5;
}

/* The app marks, drawn rather than shipped -- see UpiApps.tsx. */
.upi-apps {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* The supplied logo and the drawn stand-in are sized and framed identically,
   so a row that is half files and half drawings still lines up. */
.upi-app img,
.upi-app svg {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  /* The app icons are square; contain rather than cover, so one supplied with
     padding around it is not cropped into its own edges. */
  object-fit: contain;
  background: var(--color-surface);
}

/* A supplied logo is a finished icon already; a border around it turns it into
   a chip. The drawn stand-ins keep their frame, which is part of what makes
   them read as stand-ins. */
.upi-app img {
  border: 0;
  background: transparent;
}

.pay-apps__note {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: #78716c;
}

.pay-panel__hold {
  margin: 18px auto 0;
  max-width: 340px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #57534e;
}

.pay-card-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-primary-soft);
}

.pay-card-form__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #57534e;
}

/* THE SAME BLOCK THE QR CARD OCCUPIES -- 340px, centred -- so the button's
   left edge lines up with the card's above it. Sized to its own text before,
   it started further left than everything it belonged to and read as a control
   for the whole panel rather than for the payment. */
.pay-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin: 20px auto 0;
}

.pay-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pay-panel__foot {
  margin: 14px auto 0;
  max-width: 420px;
  font-size: 13px;
  color: #78716c;
  line-height: 1.6;
}

.pay-panel__foot a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* HELD IN PLACE while the methods scroll. `top` clears nothing above it inside
   the card, so 0 is right -- the card itself is what scrolls past on a short
   window. */
.pay-summary {
  position: sticky;
  top: 0;
  padding: 22px 20px;
  background: var(--color-primary-soft);
}

.pay-summary__items {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13.5px;
  font-weight: 600;
  color: #1c1917;
}

.pay-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 14.5px;
  color: #57534e;
}

/* A line inside an expanded section, set back from the heading above it. */
.pay-summary__row--sub {
  padding-left: 2px;
  font-size: 14px;
}

.pay-summary__row--off span:last-child {
  color: #16794c;
  font-weight: 600;
}

.pay-summary__free {
  color: #16794c;
  font-weight: 600;
}

/* "Fees ^" / "Discounts ^" -- a heading that happens to fold. Styled as text,
   not as a button, because it is not an action on the order. */
.pay-summary__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0 4px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: #1c1917;
  cursor: pointer;
}

.pay-summary__toggle i {
  font-size: 11px;
  color: #78716c;
}

.pay-summary__row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-primary);
}

.pay-summary__saved {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef7f0;
  border: 1px solid #cfe9d8;
  color: #16794c;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* The links a payment screen is expected to carry, and who is being paid. Not
   the site footer -- that is four columns of shop navigation on the one screen
   where leaving is the wrong move. */
.pay-foot {
  border-top: 1px solid var(--color-border);
  padding: 18px 20px;
  font-size: 13px;
  color: #78716c;
}

.pay-foot__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.pay-foot a {
  color: #57534e;
  text-decoration: none;
}

.pay-foot a:hover {
  text-decoration: underline;
}

.pay-foot__copy {
  margin-left: auto;
}

/* THE INNER SCROLLER IS A DESKTOP DEVICE. On a narrow screen the page itself is
   the scroller, and a box that scrolls inside a page that also scrolls is the
   thing people cannot get out of on a phone. */
@media (max-width: 1100px) {
  .pay-grid {
    grid-template-columns: 1fr;
  }

  .pay-body {
    height: auto;
    overflow: visible;
    border-right: 0;
  }

  .pay-summary {
    position: static;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 767px) {
  .pay-body {
    grid-template-columns: 1fr;
  }

  .pay-methods {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .pay-shell {
    padding: 16px 12px 28px;
  }

  .pay-head {
    padding: 16px;
  }

  .pay-head__title {
    font-size: 18px;
  }

  .pay-notice {
    margin: 0 16px 14px;
  }

  .pay-panel {
    padding: 20px 14px;
  }

  .pay-foot__copy {
    margin-left: 0;
  }
}

/* ===========================================================================
   QUICK VIEW -- the way out, and room at the sides.

   TWO FAULTS, BOTH INHERITED FROM THE THEME.

   1. NO CROSS ON DESKTOP. style.css puts the close button at
      `right: -50px; top: -50px` -- fifty pixels OUTSIDE the popup, on the
      assumption of empty page around it. Inside a Bootstrap modal there is no
      such room: it lands beyond the dialog and is clipped away, so the quick
      view opened with no visible way out and only Escape or a backdrop click
      closed it -- and the modal is `backdrop="static"` with `keyboard={false}`,
      so NEITHER of those works either. It was a dead end.

      A fix for this already existed and was scoped to `max-width: 1199px`, so
      only phones and tablets got it. This is the same placement, unscoped.

   2. NO SIDE MARGIN. `.product-details-popup` is centred by a fixed-position
      wrapper and never told to stay inside the viewport, so on a narrow window
      the card runs edge to edge with the image touching both sides.
   =========================================================================== */

.product-details-popup .product-details-close-btn {
  /* Inside the corner, over the image, with a shadow so it reads as sitting on
     top of the picture rather than as part of it. */
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  /* Above the image and the thumbnail strip, which the popup stacks itself. */
  z-index: 10;
  background: var(--color-surface);
  box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
  cursor: pointer;
  border: 0;
}

.product-details-popup .product-details-close-btn i {
  font-size: 18px;
  color: #000;
}

.product-details-popup {
  /* Never wider than the window, and never touching its edges. The 32px is
     16px of air on each side -- enough to read as a card floating over the
     page rather than as a page of its own. */
  max-width: min(1100px, calc(100vw - 32px));
}

/* ===========================================================================
   MY ADDRESS -- the account tab.

   The theme ships NOTHING for `.manage-address-account`, so every rule the tab
   had lived in a `style={{...}}` on the element: nine hardcoded greys the
   palette never sees, a full-width bar for "add", and cards stacked one per row
   down a nine-column layout, each one a band of white with a paragraph adrift
   in the middle of it.

   It is a page for RECOGNISING an address, not reading one -- you come here to
   find the right one and act on it. So: a grid of cards you can scan, the
   default one visibly the default, and the three things you can do to one on
   the card itself.

   THE KEBAB MENU IS GONE. Three actions behind a "..." is two clicks to reach
   any of them, and the dropdown it opened had no click-away handler -- it
   closed only when one of its own buttons was pressed or another card's kebab
   was, so it followed you around the page. The actions are on the card.
   =========================================================================== */

.addr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.addr-head__title {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--color-heading-1);
}

.addr-head__count {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
}

/* Buttons need `width` said out loud everywhere in this file: style.css sets
   `input, button, select, textarea { width: 100% }` on the bare elements, so
   anything not carrying .rts-btn stretches across its whole row. */
.addr-add {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  flex-shrink: 0;
  padding: 11px 20px;
  border: 1px solid var(--btn-dark);
  border-radius: 6px;
  background: var(--btn);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.addr-add:hover {
  background: var(--btn-dark);
  border-color: var(--btn-dark);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   THE CARDS

   auto-fill rather than a fixed column count: this tab sits in a col-lg-9 that
   is a full-width column on a phone and roughly 800px on a desktop, so the
   number of columns is a question about the space, not about the breakpoint.
   Two up where there is room, one where there is not, and a shopper with a
   single saved address gets a card the size of a card rather than a banner.
   --------------------------------------------------------------------------- */

.addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.addr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 18px 20px 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.addr-card:hover {
  border-color: var(--blush);
  box-shadow: 0 6px 18px rgb(74 10 36 / 7%);
}

/* THE DEFAULT ONE, at a glance. It is the address checkout prefills with, so
   which one it is has to survive being skimmed -- the old card said so in a
   chip and was otherwise identical to the rest. The rail down the left is the
   part that reads from across the grid; the chip stays for anyone who needs it
   named. */
.addr-card--default {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* The one currently open in the form above. Without it, pressing Edit scrolls a
   form into view with no sign of which card it belongs to. */
.addr-card--editing {
  border-color: var(--rose);
  box-shadow: inset 3px 0 0 var(--rose);
}

.addr-card__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.addr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.addr-chip--default {
  border-color: transparent;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.addr-chip--editing {
  border-color: transparent;
  background: rgb(185 141 97 / 16%);
  color: var(--wine);
}

.addr-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-heading-1);
  margin: 0 0 3px;
}

.addr-card__phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--color-body);
  margin: 0 0 10px;
}

.addr-card__phone i {
  color: var(--blush);
  font-size: 12px;
}

.addr-card__lines {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-body);
  /* Pushes the action row to the bottom, so cards of different address lengths
     still line their buttons up across a row of the grid. */
  margin: 0 0 18px;
  flex-grow: 1;
}

.addr-card__pin {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  color: var(--color-heading-1);
}

.addr-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 4px 12px;
  border-top: 1px solid var(--color-border);
}

.addr-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex-shrink: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.addr-action:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Pushed to the far end, away from Edit and Set as default -- it is the one
   action here that cannot be undone, and it should not sit under a thumb
   travelling towards the other two. */
.addr-action--danger {
  margin-left: auto;
  color: var(--color-danger);
}

.addr-action--danger:hover {
  background: rgb(239 68 68 / 10%);
  color: var(--color-danger);
}

/* ASKED BEFORE IT HAPPENS. Delete used to be one item in a dropdown and took
   the address the moment it was pressed, with no confirmation anywhere. Now it
   is a button on the face of the card, which is easier to reach by accident,
   so the row turns into the question instead of doing the thing. */
.addr-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: rgb(239 68 68 / 6%);
  border-radius: 0 0 9px 9px;
}

.addr-confirm__ask {
  font-size: 13px;
  color: var(--color-heading-1);
  font-weight: 500;
  margin: 0 auto 0 0;
}

.addr-confirm__yes,
.addr-confirm__no {
  width: auto;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.addr-confirm__yes {
  border: 1px solid var(--color-danger);
  background: var(--color-danger);
  color: #fff;
}

.addr-confirm__no {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-body);
}

/* ---------------------------------------------------------------------------
   EMPTY, AND THE FORM
   --------------------------------------------------------------------------- */

/* A sentence in grey was the whole of the empty state. It reads as a page that
   failed to load rather than as one waiting to be used, and the only way on
   from it was a button sitting somewhere above. */
.addr-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.addr-empty i {
  font-size: 30px;
  color: var(--blush);
  margin-bottom: 14px;
  display: block;
}

.addr-empty__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-heading-1);
  margin: 0 0 6px;
}

.addr-empty__disc {
  font-size: 14px;
  color: var(--color-body);
  margin: 0 0 20px;
}

.addr-form {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  margin-bottom: 24px;
  overflow: hidden;
}

.addr-form__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.addr-form__body {
  padding: 22px;
}

/* Two columns that collapse on their own. `minmax(0, 1fr)` rather than `1fr`:
   a grid track's default minimum is its content, and a long placeholder in a
   fixed-height input would otherwise push the column wider than the panel. */
.addr-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Spans whatever the row has, for the street line and the label chooser. */
.addr-field--wide {
  grid-column: 1 / -1;
}

.addr-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* LABELS, NOT JUST PLACEHOLDERS. Every field was a placeholder alone, which
   disappears the moment anything is typed -- so a half-filled form is a column
   of unlabelled boxes, and a screen reader gets a text input called nothing.
   The placeholder stays where it says something the label does not, like the
   shape of a pincode. */
.addr-field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-heading-1);
}

.addr-field__label span {
  color: var(--color-danger);
  margin-left: 2px;
}

.addr-form input[type='text'] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-heading-1);
  font-size: 14px;
  margin: 0;
}

.addr-form input[type='text']:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
  outline: none;
}

.addr-types {
  display: flex;
  gap: 10px;
}

/* The radio is drawn by the chip around it rather than beside it -- two bare
   radios inherited `width: 100%` from the global input rule and sat a whole
   column apart from the words naming them. */
.addr-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.addr-type input {
  width: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.addr-type--on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.addr-form__error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  padding: 11px 14px;
  border-radius: 6px;
  background: rgb(239 68 68 / 8%);
  color: var(--color-danger);
  font-size: 13px;
  line-height: 1.5;
}

.addr-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.addr-form__cancel {
  width: auto;
  flex-shrink: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--color-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.addr-form__cancel:hover {
  color: var(--color-primary);
}

@media only screen and (max-width: 575px) {
  .addr-head {
    align-items: stretch;
  }

  /* Full width down here, where there is no second column for it to sit
     beside and a right-aligned button reads as stranded. */
  .addr-add {
    width: 100%;
    justify-content: center;
  }

  .addr-card {
    padding: 16px 16px 0;
  }

  .addr-card__actions,
  .addr-confirm {
    margin: 0 -16px;
  }

  .addr-card__actions {
    padding: 4px 8px;
  }

  .addr-confirm {
    padding: 12px 16px;
  }

  .addr-form__body {
    padding: 18px 16px;
  }
}

/* "SAVE ADDRESS" DID NOT REACH THE ACCOUNT.

   Shown only on a failure. A save that works says nothing: the address is on
   screen and in the order, and the shopper pressed the button themselves. One
   that does not work is indistinguishable from that unless it speaks up --
   which is what it failed to do when the error was caught and dropped. */
.checkout-save-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgb(239 68 68 / 8%);
  color: var(--color-danger);
  font-size: 13px;
  line-height: 1.5;
}

.checkout-save-note i {
  /* Nudged onto the first line's baseline rather than its box top. */
  margin-top: 2px;
  flex-shrink: 0;
}

/* The Save / Cancel row, spanning the address form's two columns.

   `.checkout-save-address` already declared `grid-column: 1 / -1` and it never
   took: the button sits inside this wrapper div, and the wrapper is the grid
   item. So the actions were laid out in the left column with the right one
   empty beside them. */
.checkout-address-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===========================================================================
   ACCOUNT DETAILS -- the account tab.

   Same starting point as MY ADDRESS above: the theme styles `.account-details-area`
   with four rules and nothing else, so the rest was written inline, in greys
   (#7d7d7d, #5c5c5c, #e5e5e5, #f7f7f7) that belong to no palette.

   Two things on one screen that should not look like one thing: editing your
   name, and deleting your account. They were separated by a 1px hairline. Each
   is a panel now, and the second one is red.
   =========================================================================== */

.acct-head {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.acct-head__title {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--color-heading-1);
}

.acct-head__disc {
  margin: 0;
  font-size: 13px;
  color: var(--color-body);
}

.acct-panel {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  overflow: hidden;
}

.acct-panel + .acct-panel {
  margin-top: 22px;
}

.acct-panel__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.acct-panel__body {
  padding: 22px;
}

/* Two columns where there is room. `minmax(0, 1fr)` rather than `1fr`: a grid
   track's default minimum is its content, so a long placeholder in a fixed
   input would otherwise push its column wider than the panel. */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.acct-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.acct-field--wide {
  grid-column: 1 / -1;
}

/* REAL LABELS. These were <p> tags sitting above their inputs -- they looked
   like labels and were not ones: nothing tied them to a field, so clicking one
   did nothing and a screen reader announced a text box with no name. */
.acct-field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-heading-1);
}

.acct-field__label span {
  color: var(--color-danger);
  margin-left: 2px;
}

.acct-field__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-body);
}

.acct-panel input[type='text'],
.acct-panel input[type='tel'],
.acct-panel input[type='email'] {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-heading-1);
  font-size: 14px;
  /* The theme's `.account-details-area input` puts 15px under every input, for
     a layout that stacked them. The grid owns the spacing now. */
  margin: 0;
}

.acct-panel input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
  outline: none;
}

/* The sign-in identifier. Changing it needs an ownership check on the new
   address that does not exist yet, so it reads as locked rather than as a field
   somebody typed into and lost. */
.acct-panel input[readonly] {
  background: var(--color-bg);
  color: var(--color-body);
  cursor: not-allowed;
}

.acct-panel input[readonly]:focus {
  border-color: var(--color-border);
  box-shadow: none;
}

/* The radio is drawn inside the chip naming it. Two bare radios took
   `width: 100%` from the theme's global input rule and sat a column away from
   their own words. */
.acct-genders {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.acct-gender {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.acct-gender input {
  width: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.acct-gender--on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.acct-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* The theme puts `margin-top: 30px` on every button inside
   .account-details-area, for the stacked layout this replaces. */
.acct-actions .rts-btn {
  margin-top: 0;
}

.acct-saved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success);
}

/* ---- Deleting the account ------------------------------------------------
   Its own panel, in the colour of what it does. It used to be a red link under
   a hairline rule at the bottom of the same form -- the one irreversible
   control on the page, styled more quietly than the Save button above it. */

.acct-panel--danger {
  border-color: rgb(239 68 68 / 35%);
}

.acct-panel--danger .acct-panel__head {
  background: rgb(239 68 68 / 7%);
  border-bottom-color: rgb(239 68 68 / 22%);
  color: var(--color-danger);
}

.acct-danger__disc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-body);
}

.acct-delete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  flex-shrink: 0;
  padding: 10px 18px;
  border: 1px solid rgb(239 68 68 / 45%);
  border-radius: 6px;
  background: transparent;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0;
  transition: background 0.2s ease;
}

.acct-delete:hover {
  background: rgb(239 68 68 / 8%);
  color: var(--color-danger);
}

.acct-confirm__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.acct-confirm__yes,
.acct-confirm__no {
  width: auto;
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0;
}

.acct-confirm__yes {
  border: 1px solid var(--color-danger);
  background: var(--color-danger);
  color: #fff;
}

.acct-confirm__yes:disabled {
  opacity: 0.7;
  cursor: wait;
}

.acct-confirm__no {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-body);
}

@media only screen and (max-width: 575px) {
  .acct-panel__body {
    padding: 18px 16px;
  }

  .acct-panel__head {
    padding: 13px 16px;
  }
}

/* ===========================================================================
   DASHBOARD -- the account tab, and what it does on a phone.

   THE ORDER ROW WAS A DESKTOP ROW WITH NO MOBILE ANSWER. A flex row of a 70px
   thumbnail, the product name, a price at `minWidth: 80px` and a status block
   at `minWidth: 180px`, with 18px between each -- 366px of hard minimums before
   the product name is given a single pixel, and `flex-wrap` was never set. On a
   360px phone the name was crushed to nothing and the row overflowed the card.

   THE STATUS FILTER WRAPPED INTO A WALL. Six pills that do wrap, at ~120px
   each: three rows of them on a phone, so the orders they filter started below
   the fold.

   Both are laid out from the same markup at both sizes now -- a grid that
   changes shape, and one scrolling strip.
   =========================================================================== */

.dash-greet {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--color-heading-1);
}

/* Was `font: inherit` inside an h2, so "(Not you? Sign out.)" rendered at the
   heading's size and weight -- as loud as the greeting, and on a phone it took
   a line of its own at 24px. */
.dash-signout {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.dash-signout:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.dash-disc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-body);
}

/* ---- The status filter --------------------------------------------------
   ONE ROW THAT SCROLLS, at every width. Wrapping is what turned six pills into
   a three-row block on a phone; scrolling keeps the orders where they were and
   is the pattern a thumb already expects from a filter strip. */

.dash-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  /* Momentum on iOS, and a scrollbar that does not steal a row of height on
     the desktops that draw one. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 26px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.dash-filters::-webkit-scrollbar {
  display: none;
}

.dash-pill {
  width: auto;
  /* Without this a flex item shrinks to fit and every pill loses its right
     half instead of the strip scrolling. */
  flex-shrink: 0;
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: var(--color-surface);
  color: var(--color-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dash-pill:hover {
  border-color: var(--blush);
  color: var(--color-primary);
}

.dash-pill--on,
.dash-pill--on:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* A count of zero, dimmed rather than hidden: "Returned (0)" is an answer, and
   removing the pill would move the others under a thumb mid-tap. */
.dash-pill__count {
  opacity: 0.65;
}

/* ---- An order ------------------------------------------------------------ */

.dash-order {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto minmax(150px, 190px);
  grid-template-areas: 'img info price status';
  align-items: center;
  gap: 6px 18px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--color-surface);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dash-order:hover {
  border-color: var(--blush);
  box-shadow: 0 6px 18px rgb(74 10 36 / 7%);
}

.dash-order__img {
  grid-area: img;
  align-self: start;
  width: 72px;
  height: 72px;
  /* contain, like every other product picture on the site -- see the note
     further up this file. */
  object-fit: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.dash-order__info {
  grid-area: info;
  min-width: 0;
}

.dash-order__name {
  display: block;
  font-weight: 500;
  color: var(--color-heading-1);
  line-height: 1.4;
  /* Two lines, then an ellipsis. A saree's full name plus its colour and size
     runs to four lines in a phone's column and pushes the status off screen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-order__id {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--color-body);
}

.dash-order__price {
  grid-area: price;
  font-weight: 600;
  color: var(--color-heading-1);
  white-space: nowrap;
}

.dash-order__status {
  grid-area: status;
}

.dash-order__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

.dash-order__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Painted from STATUS_COLORS on the element -- the status palette is data,
     not a fixed set this stylesheet could name. */
  background: currentColor;
}

.dash-order__date {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-body);
}

.dash-empty {
  text-align: center;
  padding: 44px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-body);
  font-size: 14px;
}

.dash-empty i {
  display: block;
  font-size: 28px;
  color: var(--blush);
  margin-bottom: 12px;
}

/* ---- The phone ----------------------------------------------------------
   The thumbnail spans both rows; name and price share the first, status and
   date take the second. Nothing has a fixed minimum any more, so the name gets
   whatever is left rather than what 366px of other people's minimums allow. */

@media only screen and (max-width: 767px) {
  .dash-greet {
    font-size: 20px;
  }

  .dash-order {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    grid-template-areas:
      'img info   price'
      'img status status';
    align-items: start;
    gap: 10px 12px;
    padding: 14px;
  }

  .dash-order__img {
    width: 60px;
    height: 60px;
  }

  .dash-order__price {
    text-align: right;
  }

  .dash-order__status {
    /* Clear of the thumbnail's column when the name runs to two lines. */
    align-self: end;
  }
}

/* ===========================================================================
   THE ACCOUNT SIDEBAR, PINNED.

   Dashboard / Order / Track / My Address / Account Details / Log Out sat at the
   top of a nine-column layout and scrolled away with it, so switching tabs from
   the bottom of a long order list meant scrolling back to the top first.

   IT STICKS UNTIL THE CONTENT RUNS OUT, THEN GOES WITH IT. The nav's containing
   block is `.col-lg-3`, which Bootstrap stretches to the height of the tallest
   column in the row -- the content beside it. So the pin holds for exactly as
   long as there is content to scroll past, and the moment the row ends the nav
   travels up with the page instead of hanging over the footer.

   That stretch is why sticky goes on the NAV and not on the column. A stretched
   element fills its container and has no room to move, and position:sticky on
   it silently does nothing -- the mistake documented on
   .recommended-sidebar-col further up, which solves the same problem the other
   way round with align-self: flex-start.

   Both depend on the `overflow-x: clip` fix at the top of this file. The theme
   sets `body { overflow-x: hidden }`, which per spec makes the other axis
   compute to `auto` and turns body into a scroll container -- and every sticky
   descendant then resolves against a box as tall as the page, which never
   scrolls. */

@media (min-width: 992px) {
  .accout-dashborard-nav {
    position: sticky;
    /* The header, plus a little air so the first item does not touch it. */
    top: calc(var(--sticky-header) + 16px);
    /* A laptop in landscape can be shorter than six 60px rows plus the header
       offset. A sticky element taller than the viewport pins at the top and
       leaves its lower half permanently below the fold -- Log Out would become
       unreachable while the page scrolled past it. */
    max-height: calc(100vh - var(--sticky-header) - 40px);
    overflow-y: auto;
  }
}

/* ===========================================================================
   CART AND WISHLIST TOTALS, PINNED.

   Cart Totals and Wishlist Totals scrolled away with the list they total, so a
   basket of a dozen sarees meant scrolling back to the top to read what it came
   to or to press Checkout -- on the one panel that answers "how much is this?",
   which is the question being asked the whole way down.

   HELD UNTIL THE LIST RUNS OUT, THEN IT GOES WITH IT. Same mechanism as the
   account sidebar: sticky on the PANEL, whose containing block is the
   `.col-xl-3` beside the list -- and Bootstrap stretches that column to the
   height of the tallest in the row. So the pin lasts exactly as long as there
   are rows to scroll past, and the panel travels up with the page once the row
   ends rather than hanging over the footer.

   Sticky on the column instead would do nothing: a stretched element fills its
   container and has no room to move. See .recommended-sidebar-col, which solves
   the same thing from the other side with align-self: flex-start.

   1200px, NOT 992px. The column is col-xl-3, so below xl it is full width and
   sits under the list -- pinning it there would park the totals over the items
   they describe. The checkout's own panel (.checkout-summary) is col-lg-4 and
   is already sticky, released at its own breakpoint.

   NO max-height AND NO INNER SCROLLBAR. These panels are short enough to sit
   on a screen, and a scrollbar inside a bordered box reads as a fault rather
   than as a feature. The account sidebar keeps its guard -- six nav rows plus
   the header offset genuinely can outrun a laptop in landscape, and Log Out
   being unreachable is a different order of problem to a total sitting a
   little low.
   =========================================================================== */

@media (min-width: 1200px) {
  .cart-total-area-start-right {
    position: sticky;
    top: calc(var(--sticky-header) + 16px);
  }
}

/* ===========================================================================
   CART / WISHLIST TOTALS -- the figures line up in a column.

   THE FAULT: style.css lays out every row of this panel as
   `display: flex; gap: 94px` and never sets justify-content. So a value is
   placed 94px after the END OF ITS OWN LABEL, not against the panel's right
   edge -- and the labels are all different lengths:

     Items          6
     Subtotal            Rs 12,340
     Not selected             Rs 890
     Opening Sale               -Rs 500
     Delivery         ...

   Five rows, five different right edges, in a bordered box 330px wide -- and
   94px of fixed gap inside it is most of the width, so the longer labels were
   also pushing their figures against the border.

   space-between is the whole fix: the label takes the left, the figure takes
   the right, and the gap becomes a minimum rather than the thing deciding the
   layout. The figures already carry tabular-nums (see the type section near the
   top of this file), so once they share an edge the digits line up too.
   =========================================================================== */

.cart-total-area-start-right .subtotal,
.cart-total-area-start-right .shipping,
.cart-total-area-start-right .bottom .wrapper {
  justify-content: space-between;
  /* A floor, not a fixed distance. Only reached when a label and its figure
     are long enough to meet in the middle. */
  gap: 16px;
}

/* Right-aligned in its own right: a figure that wraps -- a long total, a
   discount with a minus -- must stay flush with the ones above it rather than
   starting a new line hard left. */
.cart-total-area-start-right .subtotal .price,
.cart-total-area-start-right .bottom .wrapper .price {
  text-align: right;
  white-space: nowrap;
}

/* The label may shrink; the figure never does. Without this, flex shrinks both
   in proportion and a long label wraps to two lines while its figure is still
   being squeezed. */
.cart-total-area-start-right .subtotal span {
  min-width: 0;
}

.cart-total-area-start-right .subtotal .price,
.cart-total-area-start-right .bottom .wrapper .price {
  flex-shrink: 0;
}

/* DELIVERY STACKS AT EVERY WIDTH. It is the one row whose right-hand side is a
   paragraph rather than a figure -- the destination, the basket's weight, then
   the rate -- and prose has no business in a 120px column beside a 55px label.
   The theme already stacked it between 1200 and 1599 and left it side by side
   above that, which is the width where this panel is widest and the text still
   did not fit. */
.cart-total-area-start-right .shipping {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* The theme's 15px above the delivery text and 20px below it were spacing a
   block that sat BESIDE the label. Stacked, they add to the row's own gap and
   padding -- 25px between "Delivery" and its first line, and 20px of nothing
   above the border. The gap on .shipping is the spacing now. */
.cart-total-area-start-right .shipping ul li:first-child p:first-child {
  margin-top: 0;
}

.cart-total-area-start-right .shipping ul li:last-child p:last-child {
  margin-bottom: 0;
}

/* ===========================================================================
   ABOUT US PAGE (/about)

   The theme dressed this page for a supermarket: a photograph of a shopper
   among fruit crates behind the banner, a trolley of vegetables beside the
   copy. Both are replaced here; the copy itself is in
   components/banner/AboutBanner.tsx and components/about/AboutOne.tsx.
   =========================================================================== */

/* --- Banner ------------------------------------------------------------------
   A finished piece of artwork with the heading painted into it, shown whole
   at full width and its own height -- nothing drawn over it. The gradient
   band that used to be here, with the theme's white h1 on top, is gone with
   the markup that needed it (see components/banner/AboutBanner.tsx). Same
   treatment as the Contact banner. */
.sg-about-banner {
  background: #f4ece6;
  border-bottom: 3px solid var(--rose);
  border-image: var(--rose-metal) 1;
}

.sg-about-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Our Story ---------------------------------------------------------------
   Three photographs in a loose stack on the left: one tall picture anchoring
   the composition, two smaller ones overlapping its corners. Each drifts up
   and down by a few pixels on its own timing, so the group never moves as one
   block -- that is what "floating" means here, not a bounce.

   The stage is a fixed-ratio box; the photos are placed in it by percentage
   so the arrangement scales with the column rather than breaking at one
   width. nth-child places them, and the --1 / --2 modifiers re-centre the
   arrangement when fewer photos came back from the catalogue. */
.sg-story {
  background: var(--color-primary-soft);
  overflow: hidden;
}

.sg-story-photos {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4.6;
  margin: 0 auto;
}

.sg-story-photo {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  /* Two shadows: a tight one for the edge and a long soft one for the lift.
     A single shadow either looks like a border or like a fog. */
  box-shadow:
    0 2px 6px rgb(74 10 36 / 12%),
    0 24px 48px -18px rgb(74 10 36 / 35%);
  /* A white frame, as prints in a stack have. */
  border: 6px solid #ffffff;
  animation: sg-float 6s ease-in-out infinite;
  will-change: transform;
}

.sg-story-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The anchor: tall, left. */
.sg-story-photo:nth-child(1) {
  left: 0;
  top: 4%;
  width: 62%;
  height: 84%;
  z-index: 1;
}

/* Top right, overlapping the anchor's shoulder. */
.sg-story-photo:nth-child(2) {
  right: 0;
  top: 0;
  width: 46%;
  height: 46%;
  z-index: 2;
  /* Out of phase with the first so they never rise together. */
  animation-delay: -2s;
  animation-duration: 7s;
}

/* Bottom right, tucked under the anchor's corner. */
.sg-story-photo:nth-child(3) {
  right: 6%;
  bottom: 0;
  width: 42%;
  height: 40%;
  z-index: 3;
  animation-delay: -4s;
  animation-duration: 8s;
}

/* Fewer photos: the single one fills the stage; two split it. */
.sg-story-photos--1 .sg-story-photo:nth-child(1) {
  left: 10%;
  top: 8%;
  width: 80%;
  height: 84%;
}

.sg-story-photos--2 .sg-story-photo:nth-child(1) {
  width: 66%;
  height: 90%;
}

.sg-story-photos--2 .sg-story-photo:nth-child(2) {
  top: auto;
  bottom: 0;
  width: 48%;
  height: 52%;
}

/* "Very lightly": eight pixels over six seconds, with a hint of tilt so the
   movement reads as drifting rather than as a straight elevator. */
@keyframes sg-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(-0.4deg);
  }
}

/* Anyone who has asked their OS for less motion gets a still stack. */
@media (prefers-reduced-motion: reduce) {
  .sg-story-photo {
    animation: none;
  }
}

/* --- Story copy ------------------------------------------------------------ */
/* A small caps label above the heading names the section, so the heading
   itself is free to say something rather than "Our Story" twice. */
.sg-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 12px;
}

.sg-story-content .title {
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 22px;
}

.sg-story-content .disc {
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.sg-story-content .rts-btn {
  margin-top: 10px;
}

@media only screen and (max-width: 991px) {
  .sg-story-content .title {
    font-size: 32px;
  }

  .sg-story-photos {
    max-width: 440px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-story-content .title {
    font-size: 28px;
  }

  .sg-story-photo {
    border-width: 4px;
    border-radius: 10px;
  }
}

/* --- Our Promise ---------------------------------------------------------------
   One dark rounded panel, after the manner of a poster: the photograph fills
   the left two-fifths and dissolves into the panel colour, the copy sits in
   the right three-fifths in white. Plum rather than a photo-matched colour,
   so the panel belongs to the site whatever picture is in it.

   THE FADE IS WHAT MAKES ANY PHOTO WORK. Product shots come on white; a hard
   edge between a white-backed picture and a plum panel would look like a
   mistake. The ::after gradient runs from transparent to the panel colour
   across the right third of the picture, and the photo is darkened a touch
   underneath so its own background never reads brighter than the copy. */
.sg-promise__panel {
  display: grid;
  grid-template-columns: 42fr 58fr;
  min-height: 560px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wine-deep) 0%, #2e0616 100%);
  box-shadow: 0 30px 60px -30px rgb(74 10 36 / 55%);
}

.sg-promise__panel--no-photo {
  grid-template-columns: 1fr;
}

.sg-promise__media {
  position: relative;
  min-height: 100%;
}

.sg-promise__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Warmed and dimmed slightly so the rose reads as rose against the plum, and a
     white studio background does not glare. */
  filter: brightness(0.92) saturate(1.08);
}

.sg-promise__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(74 10 36 / 0%) 55%, var(--wine-deep) 100%),
    linear-gradient(to top, rgb(74 10 36 / 35%) 0%, rgb(74 10 36 / 0%) 40%);
  pointer-events: none;
}

.sg-promise__body {
  padding: 56px 56px 56px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sg-promise__panel--no-photo .sg-promise__body {
  padding: 56px;
  max-width: 820px;
}

/* The eyebrow is rose on the soft section; on plum it stays rose, which is
   the one house colour that carries on both. */
.sg-eyebrow--on-dark {
  color: var(--rose);
}

.sg-promise__body .title {
  color: #ffffff;
  font-size: 46px;
  line-height: 1.1;
  margin-bottom: 18px;
}

/* The promise itself, set a size up from the paragraphs and in the serif, so
   it reads as the line the rest of the panel is explaining. */
.sg-promise__body .lead {
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--blush);
  margin-bottom: 22px;
}

.sg-promise__body .disc {
  color: rgb(255 255 255 / 86%);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 14px;
}

/* An underlined text link, as on the poster. White with a rose underline that
   thickens on hover; a filled button here would shout over the copy. */
.sg-promise__link {
  align-self: flex-start;
  margin-top: 12px;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-thickness 0.2s, color 0.2s;
}

.sg-promise__link:hover {
  color: var(--blush);
  text-decoration-thickness: 3px;
}

.sg-promise__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 40%);
  border-radius: 3px;
}

@media only screen and (max-width: 1199px) {
  .sg-promise__body .title {
    font-size: 38px;
  }

  .sg-promise__body {
    padding: 44px 40px 44px 24px;
  }
}

/* Stacked below tablet width: the picture becomes a band across the top and
   the fade runs downward into the copy instead of sideways. */
@media only screen and (max-width: 767px) {
  .sg-promise__panel {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 16px;
  }

  .sg-promise__media {
    height: 260px;
    min-height: 0;
  }

  .sg-promise__media::after {
    background: linear-gradient(to bottom, rgb(74 10 36 / 0%) 45%, var(--wine-deep) 100%);
  }

  .sg-promise__body,
  .sg-promise__panel--no-photo .sg-promise__body {
    padding: 8px 24px 36px;
  }

  .sg-promise__body .title {
    font-size: 30px;
  }

  .sg-promise__body .lead {
    font-size: 19px;
  }
}

/* --- Follow Us on Instagram ---------------------------------------------------
   Twelve squares, six across and two down, edge to edge inside the container
   with a hairline gutter -- the reference design and Instagram's own grid.
   Every tile is a link to its post; reels wear a play badge in the centre so
   the video tiles are known before they are clicked. */
.sg-insta__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}

.sg-insta__head .title {
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 12px;
}

.sg-insta__head .disc {
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.sg-insta__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-insta__tile {
  margin: 0;
  padding: 0;
}

.sg-insta__tile a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-primary-soft);
}

/* cover, so the portrait reel stills and the square posts all fill the same
   square. A reel thumbnail loses its top and bottom, which on Instagram's own
   grid it also does. */
.sg-insta__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sg-insta__tile a:hover img,
.sg-insta__tile a:focus-visible img {
  transform: scale(1.06);
}

/* The play badge: a white disc on a dark ring, as on the reference. Kept
   small -- it labels the tile, it is not the button. */
.sg-insta__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 25%), 0 4px 12px rgb(0 0 0 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wine-deep);
  font-size: 14px;
  /* Nudged right: a play triangle sits optically left of centre otherwise. */
  padding-left: 3px;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* A plum wash with the Instagram glyph on hover; the play badge yields to it
   so the two never sit on top of each other. */
.sg-insta__hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(74 10 36 / 55%);
  color: #ffffff;
  font-size: 34px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.sg-insta__tile a:hover .sg-insta__hover,
.sg-insta__tile a:focus-visible .sg-insta__hover {
  opacity: 1;
}

.sg-insta__tile a:hover .sg-insta__play,
.sg-insta__tile a:focus-visible .sg-insta__play {
  opacity: 0;
}

.sg-insta__tile a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}


@media only screen and (max-width: 991px) {
  .sg-insta__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sg-insta__head .title {
    font-size: 32px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-insta__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .sg-insta__head .title {
    font-size: 28px;
  }

  .sg-insta__play {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

/* --- Collections band (CollectionHighlights) ----------------------------------
   The promise strip's cards, but each one is an <a> into the shop. The theme
   styles .single-short-service-area-start as a div, so the anchor has to be
   told to keep the card's white text and its flex layout, and it gets a hover
   the static strip never needed: the icon disc lifts and the title warms to
   the house rose, which is what says "this goes somewhere". */
.sg-highlight,
.sg-highlight:hover,
.sg-highlight:focus-visible {
  color: inherit;
  text-decoration: none;
}

.sg-highlight .icon-area {
  transition: transform 0.25s, box-shadow 0.25s;
}

.sg-highlight .information .title {
  transition: color 0.2s;
}

.sg-highlight:hover .icon-area,
.sg-highlight:focus-visible .icon-area {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 45%);
}

.sg-highlight:hover .information .title,
.sg-highlight:focus-visible .information .title {
  color: var(--blush);
}

.sg-highlight:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
}

/* ===========================================================================
   Literal colours.

   A few shadows and gradients above are written as rgb() with an alpha, which
   a var() cannot supply. They are the palette in RGB and must move with it:
     rgb(74 10 36 / ...)    is --wine-deep   #4a0a24
     rgb(194 24 91 / ...)   is --rose-dark   #c2185b
     rgb(80 6 34 / ...)     the text shadow under white lettering on rose
     #2e0616                is the Our Promise panel's far end, a shade below
                            wine-deep, used once in its gradient
   =========================================================================== */

/* ===========================================================================
   THE ROSE SWEEP.

   A flat fill reads as paint. What makes a surface read as METAL is light on
   a curve: a bright band across the middle falling away to shadow at the
   edges. These three gradients are that, built from the brand rose -- its
   shadow (#6b0a30), the rose itself (#c2185b) and its highlight (#e8478a) --
   and they replace the flat --color-primary wherever the brand colour is a
   SURFACE: buttons, the nav bar, the bands, the carousel arrows, the
   hairlines. Flat rose stays for text and small marks, where a gradient would
   be too small to read as anything but noise.

   Two strengths. --rose-metal has the full highlight and goes on things
   without text on them or with large bold text (buttons, arrows, rules).
   --rose-metal-deep keeps the highlight down where white text sits on the
   surface -- the nav bar, the bands -- so the lettering never crosses a
   stripe pale enough to swallow it.

   These sit at the END of the file on purpose: they override rules above,
   including the theme's own !important on .bg_primary, by matching it.
   =========================================================================== */
:root {
  --rose-metal: linear-gradient(
    135deg,
    #6b0a30 0%,
    #8e0f40 15%,
    #c2185b 38%,
    #e8478a 50%,
    #c2185b 62%,
    #8e0f40 85%,
    #6b0a30 100%
  );
  --rose-metal-deep: linear-gradient(
    100deg,
    #6b0a30 0%,
    #8e0f40 30%,
    #c2185b 50%,
    #8e0f40 70%,
    #6b0a30 100%
  );
  --rose-metal-text: linear-gradient(
    100deg,
    #8e0f40 0%,
    #d8477f 40%,
    #f48fb1 50%,
    #d8477f 60%,
    #8e0f40 100%
  );
}

/* --- Buttons --------------------------------------------------------------
   The sweep is drawn at twice the button's width and slid across on hover, so
   the highlight travels over the surface -- the shimmer of turning a ring in
   the light -- rather than the button simply going darker. The text shadow is
   what keeps white lettering legible where it crosses the highlight. */
.rts-btn.btn-primary,
.btn-primary {
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  border-color: var(--btn-dark);
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s;
}

.rts-btn.btn-primary:hover,
.rts-btn.btn-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
/* The theme's with-icon hover paints the button black with a `background`
   shorthand; restated here at higher specificity so the rose stays. */
.rts-btn.btn-primary.with-icon:hover {
  background-color: var(--btn-dark);
  background-image: var(--rose-metal);
  background-position: 100% center;
}

.rts-btn.btn-primary:disabled,
.btn-primary:disabled {
  background-image: none;
  text-shadow: none;
}

/* Buttons the site inverts to white on a dark ground (the About banner's
   Shop Collection) keep their white: their own rules win on specificity and
   set the `background` shorthand, which clears the image. Nothing to do. */

/* --- The other solid buttons take the same sweep -----------------------------
   These are not .btn-primary -- each has its own class and its own flat
   `background: var(--color-primary)` above -- so they sat flat next to the
   metallic Buy Now on the product page and read as a different, cheaper
   button. Same gradient, same slide on hover, restated here so the sweep is
   one thing across the site:

     .app-promo-btn        Download Now, in the app strip on every inner page
     .addr-add             Add address, in the account and checkout
     card add-to-cart      the cart button on every product card
     .checkout-qty-btn     the +/- on checkout lines, on hover

   Shop Now on the category cards (.shop-now-goshop-btn) has its own block
   with the card styles: the theme draws it as a text link, not a fill, so
   it needs a button's shape before the sweep makes sense on it.

   `background` shorthand in the flat rules clears any image, so both halves
   are restated: the colour under it and the image over it. */
.app-promo-btn,
.addr-add,
.single-shopping-card-one .cart-counter-action button:last-child {
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  border-color: var(--btn-dark);
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s;
}

.app-promo-btn:hover,
.app-promo-btn:focus,
.addr-add:hover,
.single-shopping-card-one .cart-counter-action button:last-child:hover {
  background-color: var(--btn-dark);
  background-image: var(--rose-metal);
  background-position: 100% center;
}

.single-shopping-card-one .cart-counter-action button:last-child:disabled {
  background-image: none;
  text-shadow: none;
}

/* --- The nav bar and the rose bands ----------------------------------------
   The NAV BAR takes the full button sweep, at the shop's request: the same
   highlight as Buy Now, so the bar and the buttons read as one metal. It
   runs at 100deg rather than the buttons' 135deg because the bar is very
   wide and shallow -- a diagonal across it would be a single slanted stripe.
   The white lettering gets a heavier shadow than the buttons' to survive
   where it crosses the highlight.

   The BANDS keep the deep sweep: they carry paragraphs of small white text,
   and the full highlight would swallow a line of it.

   The theme's .bg_primary carries !important; matching it is the only way
   past it. */
.deepam-header-secondary {
  background-color: var(--rose-dark);
  /* The highlight is kept to a narrower, less pale band than the buttons':
     across a bar this wide the buttons' stops made a broad pale patch in the
     middle. Peaks at #d8477f rather than #e8478a, and only between 44% and
     56%. */
  background-image: linear-gradient(
    100deg,
    #6b0a30 0%,
    #8e0f40 20%,
    #c2185b 40%,
    #d8477f 50%,
    #c2185b 60%,
    #8e0f40 80%,
    #6b0a30 100%
  );
}

.deepam-nav a,
.deepam-all-btn,
.deepam-nav-row .discount-area .disc,
.deepam-nav-row .discount-area p,
.deepam-nav-row .discount-area span {
  text-shadow: 0 1px 2px rgb(80 6 34 / 70%), 0 0 1px rgb(80 6 34 / 50%);
}

.bg_primary {
  background-color: var(--rose-dark) !important;
  background-image: var(--rose-metal-deep) !important;
}

.rts-shorts-service-area .information .title,
.rts-shorts-service-area .information .disc {
  text-shadow: 0 1px 1px rgb(80 6 34 / 35%);
}

/* --- Carousel arrows and the category strip's --------------------------- */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev,
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
  background-image: var(--rose-metal);
  border-color: var(--wine);
}

.title-area-between .next-prev-swiper-wrapper .swiper-button-next:hover,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev:hover,
.rts-caregory-area-one .swiper-button-next:hover,
.rts-caregory-area-one .swiper-button-prev:hover {
  background-image: var(--rose-metal-deep);
}

/* --- Rose hairlines -------------------------------------------------------
   The rule under the home hero, the About and Contact banners and beside
   "Our Promise" were flat rose lines; border-image lets a line carry the
   same sweep. */
.rts-banner-area-one .category-area-main-wrapper-one,
.sg-about-banner,
.sg-contact-banner {
  border-image: var(--rose-metal) 1;
}

.sg-about-promise {
  border-image: var(--rose-metal) 1;
}

/* --- Eyebrow labels ---------------------------------------------------------
   Small caps in metallic rose: the gradient is clipped to the letters. The
   fallback colour stays declared for anything that cannot clip. */
.sg-eyebrow {
  color: var(--rose);
  background-image: var(--rose-metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The Instagram handle is an eyebrow that is also a link. The letters are
   transparent with the gradient clipped to them, so an underline cannot be
   drawn through the fill -- text-decoration paints in the colour underneath,
   which is the flat rose, and that is exactly what is wanted on hover. */
.sg-insta__profile {
  text-decoration: none;
  cursor: pointer;
}

.sg-insta__profile:hover,
.sg-insta__profile:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sg-insta__profile:focus-visible {
  outline: 2px solid var(--rose-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the dark Our Promise panel the eyebrow's darker stops vanish into the
   wine; the light rose, flat, is what reads there. */
.sg-eyebrow--on-dark {
  background-image: none;
  -webkit-text-fill-color: currentcolor;
  color: var(--rose-light);
}

/* Anyone who has asked their OS for less motion gets the sweep without the
   slide. */
@media (prefers-reduced-motion: reduce) {
  .rts-btn.btn-primary,
  .btn-primary {
    transition: none;
  }
}



/* ===========================================================================
   Our Promise panel: shorter, same width -- about 460px from about 570px.

   The panel is a grid whose height is its taller cell, the text column, and
   the picture stretches to match; so the panel is exactly as tall as the
   copy plus its padding. The copy stays (all three paragraphs) and steps
   down a little in size and spacing -- padding, heading, lead, paragraph
   leading -- together, so it reads as the same composition slightly closer
   set rather than one thing squeezed. A harder cut to 400px was tried and
   read as cramped; this is the moderate version.
   =========================================================================== */
.sg-promise__panel {
  min-height: 0;
}

.sg-promise__body {
  padding: 38px 48px 38px 30px;
}

.sg-promise__body .title {
  font-size: 40px;
  margin-bottom: 12px;
}

.sg-promise__body .lead {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 16px;
}

.sg-promise__body .disc {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.sg-promise__link {
  margin-top: 8px;
}

@media only screen and (max-width: 1199px) {
  .sg-promise__body {
    padding: 32px 36px 32px 24px;
  }

  .sg-promise__body .title {
    font-size: 34px;
  }
}

@media only screen and (max-width: 767px) {
  .sg-promise__media {
    height: 220px;
  }

  .sg-promise__body {
    padding: 8px 22px 30px;
  }

  .sg-promise__body .title {
    font-size: 28px;
  }

  .sg-promise__body .lead {
    font-size: 18px;
  }
}


/* ===========================================================================
   COLOUR DEPTH -- colours only.

   The shop asked for a richer page WITHOUT moving or redesigning anything, so
   everything in this block is a colour: backgrounds, borders, text fills.
   No size, spacing, position or layout is touched.

   What read as "plain" was one cream (#F5F1E8) under everything -- page,
   sections, cards and card photos alike -- so nothing stood off anything
   else. This gives the page three tones from the existing palette:

     cream     the page, as before
     blush     #faedf2 (--color-primary-soft), alternate sections
     white     the product cards, so they lift off both

   Section washes fade back to cream at both edges, so no band starts or ends
   on a hard line.
   =========================================================================== */
:root {
  --sg-card: #ffffff;
  --sg-card-border: #f1dbe4;
  --sg-blush-wash: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-primary-soft) 22%,
    var(--color-primary-soft) 78%,
    var(--color-surface) 100%
  );
}

/* --- Product cards: white, with a blush edge -------------------------------- */
.single-shopping-card-one {
  background: var(--sg-card);
  border-color: var(--sg-card-border);
}

.single-shopping-card-one .image-and-action-area-wrapper,
.single-shopping-card-one > .thumbnail-preview,
.single-shopping-card-one:not(.discount-offer) .thumbnail-preview {
  background: var(--sg-card);
}

.single-shopping-card-one:hover {
  border-color: var(--rose-light);
  box-shadow: 0 14px 30px rgb(194 24 91 / 14%);
}

/* --- Alternate sections take the blush wash --------------------------------
   The trust strip and Shop by Category sit between cream sections, so the
   home page now runs cream / blush / cream / blush / cream. */
.rts-feature-area,
.category-feature-area {
  background-image: var(--sg-blush-wash);
}

/* --- Section headings in the house wine ------------------------------------
   Ink to wine across the words, clipped to the lettering -- the same metallic
   idea as the eyebrows, kept dark enough to read as a heading. Sized in
   pixels, not percent, so a heading that spans the whole row still shows the
   sweep across its words rather than only the first, darkest stop. */
.title-left {
  color: var(--wine-deep);
  background-image: linear-gradient(
    100deg,
    var(--ink) 0px,
    var(--wine-deep) 120px,
    var(--wine) 260px,
    var(--rose-dark) 420px
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Footer: blush, with wine headings and a wine credit bar --------------- */
.rts-footer-area.bg_light-1 {
  background: var(--color-primary-soft) !important;
}

.single-footer-wized .footer-title {
  color: var(--wine);
}

.rts-copyright-area {
  background-color: var(--wine-deep);
  background-image: var(--rose-metal-deep);
  border-top-color: var(--wine-deep);
  color: var(--blush);
}

.rts-copyright-area p,
.rts-copyright-area a {
  color: var(--blush);
}

.rts-copyright-area a:hover,
.rts-copyright-area a:focus-visible {
  color: #ffffff;
}


/* ===========================================================================
   GOLD AND FINISHING TOUCHES -- colours only, like the block above.

   Gold is the second colour of the SG Creation mark (the lettering's leaf
   and the thread spool), and until now the site carried only the rose.
   Gold comes in two strengths:

     --gold       #b8862b  decorative: rules, stars, card edges -- never text
     --gold-text  #7a5410  prices and small lettering: 6.9:1 on white,
                           6.0:1 on cream, so it reads as text and not as tint
   =========================================================================== */
:root {
  --gold: #b8862b;
  --gold-light: #e9cf8f;
  --gold-text: #7a5410;
}

/* --- Product cards: a gold top edge, a gold price, a blush-to-white body ---
   The top border is the card's existing 1px edge, recoloured -- no width
   added. The body wash is barely there: white at the photo, warming to a
   trace of blush at the buttons, so the card reads as one warm object. */
.single-shopping-card-one {
  border-top-color: var(--gold-light);
}

.single-shopping-card-one:hover {
  border-top-color: var(--gold);
}

.single-shopping-card-one .body-content {
  background-image: linear-gradient(180deg, #ffffff 0%, #fdf4f7 100%);
}

.single-shopping-card-one .body-content .price-area .current,
.single-shopping-card-one .price-area .current {
  color: var(--gold-text);
}

/* --- Stock: emerald when in, wine when out ---------------------------------
   Was a stock web green (#26a541) for both states. The palette's emerald for
   "in stock"; the house wine for "out of stock", which reads as unavailable
   without the alarm of the danger red. */
.single-shopping-card-one .availability,
.single-shopping-card-one .stock-qty-row .availability {
  color: var(--emerald);
}

.single-shopping-card-one .availability.is-out,
.single-shopping-card-one .stock-qty-row .availability.is-out {
  color: var(--wine);
}

/* --- Review stars in gold --------------------------------------------------- */
.stars .fa-solid.fa-star {
  color: var(--gold);
}

.stars .fa-regular.fa-star {
  color: var(--gold-light);
}

/* --- The top header: cream warming to blush --------------------------------
   The logo bar was flat cream above the rose nav bar. A light wash towards
   blush at its foot carries the eye down into the rose. */
.deepam-header-primary {
  background-image: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-primary-soft) 100%
  );
}

/* --- Selected text, scrollbars, focus rings in the house colours ---------- */
::selection {
  background: var(--blush);
  color: var(--wine-deep);
}

html {
  scrollbar-color: var(--rose-dark) var(--color-primary-soft);
}

::-webkit-scrollbar-thumb {
  background-color: var(--rose-dark);
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-primary-soft);
}

:focus-visible {
  outline-color: var(--rose-dark);
}


/* ===========================================================================
   STRONGER TONES -- the two colour blocks above, turned up.

   Seen on the page, the first pass was too faint to notice: a 5% blush and a
   1px gold edge disappear on a laptop screen. Same idea, same places, colours
   only -- deep enough now that each section and card visibly stands apart.

     blush band      #f9e1ea  (was #faedf2, fading at the edges)
     champagne band  #f7ecd9  the product rows, gold's counterpart to blush
     card edge       gold-light all round, gold on top
   =========================================================================== */
:root {
  --sg-blush-band: #f9e1ea;
  --sg-champagne-band: #f7ecd9;
}

/* Sections: blush and champagne in turn, edge to edge. */
.rts-feature-area,
.category-feature-area {
  background-color: var(--sg-blush-band);
  background-image: none;
}

.rts-grocery-feature-area,
.top-tranding-product {
  background-color: var(--sg-champagne-band);
}

/* Cards: a gold frame instead of a pale pink one. */
.single-shopping-card-one {
  border-color: var(--gold-light);
  border-top-color: var(--gold);
  box-shadow: 0 6px 18px rgb(122 84 16 / 10%);
}

.single-shopping-card-one:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 34px rgb(194 24 91 / 20%);
}

.single-shopping-card-one .body-content {
  background-image: linear-gradient(180deg, #ffffff 0%, #fbe9ef 100%);
}

/* Headings: straight into the wine and rose, no black at the start. */
.title-left {
  background-image: linear-gradient(
    100deg,
    var(--wine-deep) 0px,
    var(--wine) 140px,
    var(--rose-dark) 300px
  );
}

/* Header: a clear blush at the foot of the logo bar. */
.deepam-header-primary {
  background-image: linear-gradient(180deg, #fbf3f6 0%, #f6d6e2 100%);
}

/* Footer: the deeper blush. */
.rts-footer-area.bg_light-1 {
  background: var(--sg-blush-band) !important;
}


/* ===========================================================================
   READABILITY AND STATE -- colours only.
   =========================================================================== */

/* --- Shop by Category: a shade under the label ------------------------------
   The tile's photo is an inline background-image, and its white label sat
   straight on it -- unreadable over a pale photo (the chain on white). An
   INSET shadow paints over the background and under the content, so the
   bottom of every tile darkens towards wine behind the words, whatever the
   photo, without adding an element or touching the stacking of the stretched
   link and the button. */
.single-feature-card {
  box-shadow: inset 0 -150px 90px -50px rgb(46 6 22 / 78%);
}

.single-feature-card .title {
  text-shadow: 0 2px 6px rgb(46 6 22 / 70%);
}

/* --- Sold-out cards read as sold out ----------------------------------------
   The card's own stock label carries .is-out (see the card components), and
   :has() lets the whole card react to it. The photo dims and loses most of
   its colour, and the disabled buttons turn a neutral grey instead of a pale
   rose that still looked like an invitation. */
.single-shopping-card-one:has(.availability.is-out) .thumbnail-preview img {
  filter: grayscale(0.6) opacity(0.7);
}

.single-shopping-card-one:has(.availability.is-out):hover .thumbnail-preview img {
  filter: grayscale(0.3) opacity(0.85);
}

.single-shopping-card-one .cart-counter-action button:disabled,
.single-shopping-card-one .cart-counter-action button:last-child:disabled,
.single-shopping-card-one .action-share-option button:disabled {
  background-color: #e6dfe2;
  background-image: none;
  border-color: #d6ccd0;
  color: #8a7f83;
  text-shadow: none;
  opacity: 1;
}

.single-shopping-card-one .cart-counter-action button:disabled i {
  color: #8a7f83;
}

/* --- Offer ribbon: rose metal edged in gold ---------------------------------
   The admin's "Additional offer" ribbon was a flat rose pill, the same colour
   as every button beside it. The deep sweep plus a gold hairline sets it
   apart as the one thing on the card that is a deal. */
.single-shopping-card-one .thumbnail-preview .badge,
.thumbnail-preview .badge,
.pdp-thumb-wrap .badge {
  background-color: var(--rose-dark);
  background-image: var(--rose-metal-deep);
  box-shadow:
    0 0 0 1px var(--gold-light),
    0 4px 10px rgb(74 10 36 / 30%);
}

.single-shopping-card-one .thumbnail-preview .badge span,
.thumbnail-preview .badge span,
.pdp-thumb-wrap .badge span {
  text-shadow: 0 1px 1px rgb(80 6 34 / 50%);
}

/* --- Trust cards: filled icons in rose gold ---------------------------------
   The glyphs were Font Awesome's light weight, a hairline in rose that barely
   showed. 900 is the same icon in its solid cut; the rose-to-gold sweep is
   clipped to it, and the medallion behind warms from white to blush inside a
   gold ring. */
.rts-feature-area .single-feature-area .icon {
  background-color: #ffffff;
  background-image: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--color-primary-soft) 100%);
  border-color: var(--gold-light);
}

.rts-feature-area .single-feature-area .icon i {
  font-weight: 900;
  color: var(--rose-dark);
  background-image: linear-gradient(135deg, var(--rose-dark) 0%, var(--rose) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ===========================================================================
   GOLD THROUGHOUT -- colours only.

   Rose stays the brand's FILL colour (buttons, nav bar, bands). Gold becomes
   its EDGE: the frames, rings, rules and small marks around the rose, the
   way a setting holds a stone. Nothing here changes a size or a position.

   --gold-metal is the sweep for gold surfaces and lines, built like the rose
   one: shadow, body, highlight, body, shadow.
   =========================================================================== */
:root {
  --gold-metal: linear-gradient(
    135deg,
    #7a5410 0%,
    #b8862b 30%,
    #f3dca0 50%,
    #b8862b 70%,
    #7a5410 100%
  );
}

/* --- Header ----------------------------------------------------------------- */
/* Account / Wishlist / Cart: gold outline, gold icon. */
.deepam-actions .btn-border-only {
  border-color: var(--gold);
}

.deepam-actions .btn-border-only i {
  color: var(--gold-text);
}

.deepam-actions .btn-border-only:hover {
  border-color: var(--gold-text);
}

/* Search: gold frame around the field. */
.deepam-search-inline .deepam-search {
  border-color: var(--gold-light);
}

.deepam-search-submit {
  box-shadow: inset 0 0 0 1px var(--gold-light);
}

/* Nav bar: gold hairlines along both edges of the rose, gold on hover. */
.deepam-header-secondary {
  box-shadow:
    inset 0 1px 0 var(--gold-light),
    inset 0 -2px 0 var(--gold);
}

.deepam-nav a:hover,
.deepam-nav a.active,
.deepam-all-btn:hover {
  color: var(--gold-light);
}

/* --- Hero: the rule under the banner turns gold ---------------------------- */
.rts-banner-area-one .category-area-main-wrapper-one {
  border-image: var(--gold-metal) 1;
}

/* --- Trust cards: gold ring instead of pink ---------------------------------
   Layer 1 is the paper fill, unchanged; layer 2 -- the visible border -- is
   now the gold sweep. The hover ring (::before) brightens it. */
.rts-feature-area .single-feature-area {
  background-image:
    linear-gradient(168deg, var(--color-surface) 0%, #fbf5ee 46%, #fbefe0 100%),
    var(--gold-metal);
}

.rts-feature-area .single-feature-area::before {
  background-image: linear-gradient(
    135deg,
    var(--gold) 0%,
    #f3dca0 35%,
    var(--gold) 70%,
    var(--gold-text) 100%
  );
}

.rts-feature-area .single-feature-area .information .title {
  color: var(--wine-deep);
}

/* --- Section headings: wine, through rose, into gold ----------------------- */
.title-left {
  background-image: linear-gradient(
    100deg,
    var(--wine-deep) 0px,
    var(--wine) 110px,
    var(--rose-dark) 210px,
    #a8761f 330px
  );
}

/* --- Carousel arrows: rose metal set in gold ------------------------------- */
.title-area-between .next-prev-swiper-wrapper .swiper-button-next,
.title-area-between .next-prev-swiper-wrapper .swiper-button-prev,
.rts-caregory-area-one .swiper-button-next,
.rts-caregory-area-one .swiper-button-prev {
  border-color: var(--gold);
}

/* --- Buttons: every rose button gets a gold edge --------------------------- */
.rts-btn.btn-primary,
.btn-primary,
.single-shopping-card-one .cart-counter-action button:last-child,
.single-feature-card .shop-now-goshop-btn {
  border-color: var(--gold);
}

/* The card's square cart button is outlined, not filled: gold outline. */
.single-shopping-card-one .cart-counter-action button:first-child:not(:disabled) {
  border-color: var(--gold);
}

/* --- Shop by Category: a gold frame round each tile ------------------------ */
.single-feature-card {
  box-shadow:
    inset 0 -150px 90px -50px rgb(46 6 22 / 78%),
    inset 0 0 0 2px var(--gold-light);
}

/* --- Wishlist heart on cards ------------------------------------------------ */
.single-shopping-card-one .card-wishlist-btn {
  border-color: var(--gold-light);
}

/* --- Footer ------------------------------------------------------------------ */
.single-footer-wized .footer-title {
  color: var(--gold-text);
}

.rts-footer-area.bg_light-1 {
  box-shadow: inset 0 2px 0 var(--gold-light);
}

.rts-copyright-area {
  border-top: 2px solid var(--gold);
}

.rts-copyright-area a {
  color: var(--gold-light);
}


/* ===========================================================================
   LAYOUT ENHANCEMENTS -- approved by the shop after the colour passes.
   =========================================================================== */

/* --- Category strip: round medallions in a gold setting ---------------------
   The strip under the hero was square photos with one rounded corner and a
   hairline -- small, and the plainest thing on the page. Each category is now
   a circle: a white mat inside a gold ring, like a stone in a bezel, lifting
   on hover with the ring turning rose. The label moves to the display serif.

   The Swiper track clips its overflow (so no card is ever cut at the edge),
   which would also clip the ring and the shadow; the padding gives them room
   inside the clip. */
.rts-caregory-area-one .swiper {
  padding: 8px 6px 6px;
}

.rts-caregory-area-one .single-category-one {
  gap: 14px;
}

.rts-caregory-area-one .single-category-one img {
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow:
    0 0 0 2px var(--gold),
    0 12px 26px -12px rgb(74 10 36 / 40%);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s ease;
}

.rts-caregory-area-one .single-category-one:hover img,
.rts-caregory-area-one .single-category-one:focus-visible img {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px var(--rose-dark),
    0 18px 30px -12px rgb(194 24 91 / 40%);
}

.rts-caregory-area-one .single-category-one p {
  font-family: var(--font-secondary);
  font-size: 19px;
  font-weight: 600;
  color: var(--wine-deep);
}

.rts-caregory-area-one .single-category-one:hover p {
  color: var(--rose-dark);
}

@media only screen and (max-width: 575px) {
  .rts-caregory-area-one .single-category-one p {
    font-size: 16px;
  }
}

/* --- Section heading ornament ----------------------------------------------
   A small jeweller's mark under every display heading: a gold diamond, a rose
   dot, and a rule running off them from gold into nothing. Inline SVG on
   ::after -- no markup, no request. A data URI cannot read var(), so the
   palette is written out: #b8862b gold, #e9cf8f gold-light, #c2185b rose. */
.title-left::after,
.sg-insta__head .title::after {
  content: "";
  display: block;
  height: 12px;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.title-left::after {
  width: 130px;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='12' viewBox='0 0 130 12'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b8862b'/%3E%3Cstop offset='.5' stop-color='%23e9cf8f'/%3E%3Cstop offset='1' stop-color='%23e9cf8f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 1l5 5-5 5-5-5z' fill='%23b8862b'/%3E%3Ccircle cx='17' cy='6' r='1.8' fill='%23c2185b'/%3E%3Crect x='23' y='5.25' width='107' height='1.5' fill='url(%23r)'/%3E%3C/svg%3E");
}

.sg-insta__head .title::after {
  width: 170px;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='12' viewBox='0 0 170 12'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23b8862b'/%3E%3Cstop offset='1' stop-color='%23e9cf8f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b8862b'/%3E%3Cstop offset='1' stop-color='%23e9cf8f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.25' width='66' height='1.5' fill='url(%23l)'/%3E%3Ccircle cx='72' cy='6' r='1.8' fill='%23c2185b'/%3E%3Cpath d='M85 1l5 5-5 5-5-5z' fill='%23b8862b'/%3E%3Ccircle cx='98' cy='6' r='1.8' fill='%23c2185b'/%3E%3Crect x='104' y='5.25' width='66' height='1.5' fill='url(%23r)'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 575px) {
  .title-left::after {
    width: 100px;
    margin-top: 8px;
  }
}


/* ===========================================================================
   EVERY PAGE -- the home page's treatment carried through the inner pages.

   Same rules as before: existing sections only, restyled -- colour, frames,
   medallions, and the scroll-in (ScrollReveal is now mounted in the root
   layout, so it runs on every page). No section is added or removed.
   =========================================================================== */

/* --- Shop page ---------------------------------------------------------------
   The page sat on bare white. It takes the champagne of the home page's
   product rows; the toolbar and the category rail become white panels in
   gold frames, and the active category gets a rose pill. */
.shop-page .shop-grid-sidebar-area {
  background-color: var(--sg-champagne-band);
}

.filter-select-area .top-filter {
  background: #ffffff;
  border: 1px solid var(--gold-light);
  box-shadow: 0 6px 16px -10px rgb(122 84 16 / 30%);
}

.filter-select-area .top-filter .right-end .button-tab-area .single-button.active,
.filter-select-area .top-filter .right-end .button-tab-area .single-button:hover {
  background-image: var(--rose-metal);
  border-color: var(--gold);
}

/* Not a filled panel: this box carries a min-height for the sticky rail (see
   "Recommended Picks sidebar"), so a white fill showed as a long empty card.
   A gold rule on top marks the rail instead. */
.recommended-sidebar .single-filter-box {
  border-top: 3px solid var(--gold);
  padding-top: 6px;
}

.rec-cat {
  border-bottom-color: #f3e6d0;
}

.rec-cat:last-child {
  border-bottom: 0;
}

.rec-cat-name:hover {
  color: var(--rose-dark);
}

/* --- Product page ------------------------------------------------------------
   White panel on cream, as before, now set in gold; the price in the gold of
   the cards; the photo framed like the category medallions; the tabs gold
   outlines with the active one in rose metal. */
.shopdetails-style-1-wrapper {
  border: 1px solid var(--gold-light);
  border-top: 3px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 18px 40px -24px rgb(74 10 36 / 30%);
}

/* The colour is an inline style on the element (shop/[slug]/page.tsx), which
   only !important can override. */
.rts-product-details-section .product-price {
  color: var(--gold-text) !important;
}

.rts-product-details-section .product-thumb-area .thumb-wrapper img {
  box-shadow:
    0 0 0 1px var(--gold-light),
    0 16px 32px -18px rgb(74 10 36 / 40%);
}

.rts-product-details-section .product-thumb-filter-group img {
  border: 2px solid var(--gold-light);
}

/* The theme sets these with !important (style.css), so they must match it. */
.product-discription-tab-shop button {
  background: #ffffff !important;
  border: 1px solid var(--gold-light) !important;
}

.product-discription-tab-shop button:hover {
  background: var(--color-primary-soft) !important;
  border: 1px solid var(--gold) !important;
  color: var(--rose-dark) !important;
}

.product-discription-tab-shop button.active,
.product-discription-tab-shop button.active:hover {
  background: var(--rose-metal-deep) !important;
  border: 1px solid var(--gold) !important;
  color: #ffffff !important;
}

/* The product page's own content band takes the blush. */
.rts-chop-details-area.bg_light-1 {
  background: var(--sg-blush-band) !important;
}

/* --- Contact page ------------------------------------------------------------
   The two info cards were theme grey (#F3F4F6) on white. White cards in gold
   frames now, the icon in the trust cards' rose-gold medallion; the form
   panel likewise. */
.contact-left-area-main-wrapper .location-single-card {
  background: #ffffff;
  border: 1px solid var(--gold-light);
  border-left: 3px solid var(--gold);
  box-shadow: 0 8px 22px -14px rgb(122 84 16 / 35%);
}

.contact-left-area-main-wrapper .location-single-card .icon i {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--color-primary-soft) 100%);
  box-shadow: 0 0 0 2px var(--gold-light);
  color: var(--rose-dark);
  font-weight: 900;
}

.contact-form-wrapper-bg.bg_light-1 {
  background: #ffffff !important;
  border: 1px solid var(--gold-light);
  border-top: 3px solid var(--gold);
  box-shadow: 0 18px 40px -26px rgb(74 10 36 / 30%);
}

.rts-contact-form-area {
  background-color: var(--sg-blush-band);
}

/* --- Login and register ------------------------------------------------------
   The card stays where it is; the page behind it warms to blush and the card
   is set in gold. */
.rts-register-area.bg_light-1 {
  background: var(--sg-blush-wash) !important;
}

.rts-register-area .registration-wrapper-1 {
  border: 1px solid var(--gold-light);
  border-top: 3px solid var(--gold);
  box-shadow: 0 22px 48px -28px rgb(74 10 36 / 35%);
}

/* --- Form fields everywhere: a gold focus ring ------------------------------ */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgb(184 134 43 / 18%);
}

/* --- The rose service band on inner pages ------------------------------------
   Its icons sat in plain white discs. Now the same medallion as the trust
   cards: a gold ring, and the glyph filled rose to gold. */
.single-short-service-area-start .icon-area {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fbeef3 100%);
  box-shadow:
    0 0 0 3px var(--gold-light),
    0 10px 22px -12px rgb(46 6 22 / 60%);
}

.single-short-service-area-start .icon-area .short-service-icon {
  font-weight: 900;
  color: var(--rose-dark);
  background-image: linear-gradient(135deg, var(--rose-dark) 0%, var(--rose) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Cart and checkout summaries in gold frames ----------------------------- */
.checkout-summary,
.cart-total-area-start-right {
  border-color: var(--gold-light);
  box-shadow: 0 14px 32px -22px rgb(122 84 16 / 40%);
}


/* ===========================================================================
   SHOP BY CATEGORY -- jewellery-box arches (components/product/FeatureDiscount).

   Each category is a tall photo under an arched top, set in the gold sweep
   like a stone in a bezel: an outer gold band, a thin white mat, then the
   picture. Name below in the display serif, a small "Shop now" line under
   it. On hover the arch lifts, the photo eases in, the arrow steps forward.
   =========================================================================== */
.sg-cat-arch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.sg-cat-arch__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 5px;
  margin-bottom: 12px;
  /* 999px on the top corners makes a true semicircle whatever the width. */
  border-radius: 999px 999px 18px 18px;
  background-image: var(--gold-metal);
  box-shadow: 0 20px 40px -22px rgb(74 10 36 / 55%);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.45s ease;
}

.sg-cat-arch__frame img,
.sg-cat-arch__fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 14px 14px;
  border: 3px solid #ffffff;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The picture zooms INSIDE the arch, not past it. */
.sg-cat-arch__frame {
  overflow: hidden;
  isolation: isolate;
}

.sg-cat-arch__fill {
  background-image: var(--rose-metal-deep);
}

.sg-cat-arch__name {
  font-family: var(--font-secondary);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--wine-deep);
  transition: color 0.25s;
}

.sg-cat-arch__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-light);
  transition: color 0.25s, border-color 0.25s;
}

.sg-cat-arch__cta i {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-arch:hover .sg-cat-arch__frame,
.sg-cat-arch:focus-visible .sg-cat-arch__frame {
  transform: translateY(-6px);
  box-shadow: 0 28px 46px -22px rgb(194 24 91 / 55%);
}

.sg-cat-arch:hover .sg-cat-arch__frame img,
.sg-cat-arch:focus-visible .sg-cat-arch__frame img {
  transform: scale(1.06);
}

.sg-cat-arch:hover .sg-cat-arch__name,
.sg-cat-arch:focus-visible .sg-cat-arch__name {
  color: var(--rose-dark);
}

.sg-cat-arch:hover .sg-cat-arch__cta,
.sg-cat-arch:focus-visible .sg-cat-arch__cta {
  color: var(--rose-dark);
  border-color: var(--rose-dark);
}

.sg-cat-arch:hover .sg-cat-arch__cta i,
.sg-cat-arch:focus-visible .sg-cat-arch__cta i {
  transform: translateX(4px);
}

.sg-cat-arch:focus-visible {
  outline: none;
}

.sg-cat-arch:focus-visible .sg-cat-arch__frame {
  outline: 2px solid var(--rose-dark);
  outline-offset: 4px;
}

/* Room under the row before the next section. */
.category-feature-area .row.g-4 {
  padding-bottom: 46px;
}

@media only screen and (max-width: 991px) {
  .sg-cat-arch__name {
    font-size: 22px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-arch__frame {
    padding: 4px;
    margin-bottom: 8px;
  }

  .sg-cat-arch__frame img,
  .sg-cat-arch__fill {
    border-width: 2px;
  }

  .sg-cat-arch__name {
    font-size: 19px;
  }

  .sg-cat-arch__cta {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .category-feature-area .row.g-4 {
    padding-bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cat-arch__frame,
  .sg-cat-arch__frame img,
  .sg-cat-arch__cta i {
    transition: none;
  }
}

/* Below 1200px the row is a swipe strip (see "Shop by Category" tiles above),
   sized for the old wide poster cards. Arches are tall for their width, so the
   strip shows more of them: about two and a half on a phone. The top padding
   keeps the hover lift from being clipped by the strip's overflow. */
@media only screen and (max-width: 1199px) {
  .category-feature-area .row.g-4 {
    padding-top: 10px;
  }

  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 40vw;
    max-width: 220px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 28vw;
    max-width: 240px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 23vw;
  }
}


/* ===========================================================================
   SHOP BY CATEGORY, PRESENTED -- the arches above, finished like a showcase.
   =========================================================================== */

/* --- The section: blush with a faint gold lattice, like a woven ground ----- */
.category-feature-area {
  background-color: var(--sg-blush-band);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 14l4 4-4 4-4-4z' fill='%23b8862b' fill-opacity='.16'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='36' cy='0' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='0' cy='36' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='36' cy='36' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3C/svg%3E");
  background-size: 36px 36px;
  padding-top: 64px;
}

/* --- Heading: centred, eyebrow above, ornament centred under ---------------- */
.sg-cat-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 44px;
}

.sg-cat-head .sg-eyebrow {
  margin-bottom: 6px;
}

.sg-cat-head .title-left {
  font-size: 44px;
}

.sg-cat-head .title-left::after {
  width: 170px;
  margin: 12px auto 0;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='12' viewBox='0 0 170 12'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23b8862b'/%3E%3Cstop offset='1' stop-color='%23e9cf8f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23b8862b'/%3E%3Cstop offset='1' stop-color='%23e9cf8f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.25' width='66' height='1.5' fill='url(%23l)'/%3E%3Ccircle cx='72' cy='6' r='1.8' fill='%23c2185b'/%3E%3Cpath d='M85 1l5 5-5 5-5-5z' fill='%23b8862b'/%3E%3Ccircle cx='98' cy='6' r='1.8' fill='%23c2185b'/%3E%3Crect x='104' y='5.25' width='66' height='1.5' fill='url(%23r)'/%3E%3C/svg%3E");
}

/* --- The arch: a finial on top, a gold hairline inside, a shade at the foot - */
.sg-cat-arch {
  position: relative;
  padding-top: 14px;
  gap: 4px;
}

/* The finial: a gold diamond set on the crown of the arch. */
.sg-cat-arch::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 3;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  background-image: var(--gold-metal);
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px -2px rgb(122 84 16 / 50%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-arch:hover::before,
.sg-cat-arch:focus-visible::before {
  transform: translate(-50%, -6px) rotate(45deg);
}

/* Inside the frame: the shade (::before), the hairline (::after), the shine. */
.sg-cat-arch__frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(to top, rgb(46 6 22 / 38%) 0%, transparent 38%);
  pointer-events: none;
}

.sg-cat-arch__frame::after {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgb(243 220 160 / 85%);
  border-radius: 999px 999px 8px 8px;
  pointer-events: none;
  transition: inset 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.3s;
}

.sg-cat-arch:hover .sg-cat-arch__frame::after,
.sg-cat-arch:focus-visible .sg-cat-arch__frame::after {
  inset: 12px;
  border-color: rgb(255 255 255 / 95%);
}

/* A band of light crossing the photo on hover -- jewellery catching the light. */
.sg-cat-arch__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(255 255 255 / 0%) 38%,
    rgb(255 255 255 / 45%) 50%,
    rgb(255 255 255 / 0%) 62%,
    transparent 70%
  );
  transform: translateX(-130%);
}

.sg-cat-arch:hover .sg-cat-arch__shine,
.sg-cat-arch:focus-visible .sg-cat-arch__shine {
  transform: translateX(130%);
  transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1);
}

/* --- Under the arch: name, count, and a pill ------------------------------- */
.sg-cat-arch__name {
  font-size: 28px;
}

.sg-cat-arch__count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-text);
}

.sg-cat-arch__count::before,
.sg-cat-arch__count::after {
  content: "\2022";
  margin: 0 8px;
  font-style: normal;
  color: var(--gold);
}

.sg-cat-arch__cta {
  margin-top: 10px;
  padding: 8px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background-color: rgb(255 255 255 / 70%);
  background-image: none;
  color: var(--wine);
  transition:
    color 0.25s,
    border-color 0.25s,
    background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sg-cat-arch:hover .sg-cat-arch__cta,
.sg-cat-arch:focus-visible .sg-cat-arch__cta {
  background-color: var(--rose-dark);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  border-color: var(--gold);
  color: #ffffff;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
}

@media only screen and (max-width: 991px) {
  .sg-cat-head .title-left {
    font-size: 36px;
  }

  .sg-cat-arch__name {
    font-size: 23px;
  }
}

@media only screen and (max-width: 575px) {
  .category-feature-area {
    padding-top: 44px;
  }

  .sg-cat-head {
    margin-bottom: 26px;
  }

  .sg-cat-head .title-left {
    font-size: 30px;
  }

  .sg-cat-arch::before {
    width: 14px;
    height: 14px;
  }

  .sg-cat-arch__frame::after {
    inset: 11px;
  }

  .sg-cat-arch__name {
    font-size: 19px;
  }

  .sg-cat-arch__count {
    font-size: 14px;
  }

  .sg-cat-arch__cta {
    padding: 6px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cat-arch::before,
  .sg-cat-arch__frame::after,
  .sg-cat-arch__shine {
    transition: none;
  }
}

/* --- Arch geometry, exact --------------------------------------------------
   "999px" corners on a box with small bottom corners makes the browser scale
   ALL four radii down together (the top pair overflows the width), which
   flattened the crown into a wide oval and squared the foot. Stated exactly
   instead: the frame is 3:4, so a true semicircle on top is 50% across and
   37.5% down (half the width, as a share of the height). The inner layers are
   near enough the same shape to share it. */
.sg-cat-arch__frame,
.sg-cat-arch__frame img,
.sg-cat-arch__fill,
.sg-cat-arch__frame::before {
  border-radius: 50% 50% 16px 16px / 37.5% 37.5% 16px 16px;
}

.sg-cat-arch__frame::after {
  border-radius: 50% 50% 10px 10px / 37.5% 37.5% 10px 10px;
}

/* A tile with no count keeps the line, invisibly, so the pills align. */
.sg-cat-arch__count.is-empty {
  visibility: hidden;
}

/* --- Smaller arches, and the site's own button ------------------------------
   1. SIZE. The arches filled their whole column -- over 400px wide and 550px
      tall on a desktop, larger than anything else on the page. Capped now,
      centred in the column, about the height of a product card's photo.

   2. THE BUTTON. "Shop Now" carries .rts-btn.btn-primary (see
      FeatureDiscount.tsx), so it is the same rose-metal button as Buy Now on
      the product cards; the sizes below are the cards' own (42px, 8px corners,
      14px/600). Hovering anywhere on the tile slides its sheen, as hovering the
      button itself would.

   3. NO PHOTO ZOOM. Scaling the photo inside the frame pushed it over the gold
      band, so the hovered arch lost its frame. The lift, the light sweep and
      the hairline still mark the hover. */
.sg-cat-arch {
  max-width: 260px;
  margin: 0 auto;
}

.sg-cat-arch__frame img,
.sg-cat-arch:hover .sg-cat-arch__frame img,
.sg-cat-arch:focus-visible .sg-cat-arch__frame img {
  transform: none;
}

.sg-cat-arch__name {
  font-size: 24px;
}

.sg-cat-arch .sg-cat-arch__cta.rts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 10px;
  padding: 0 26px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
}

.sg-cat-arch:hover .sg-cat-arch__cta.rts-btn,
.sg-cat-arch:focus-visible .sg-cat-arch__cta.rts-btn {
  color: #ffffff;
  background-color: var(--btn-dark);
  background-image: var(--rose-metal);
  background-position: 100% center;
  border-color: var(--gold);
}

@media only screen and (max-width: 991px) {
  .sg-cat-arch__name {
    font-size: 21px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-arch__name {
    font-size: 18px;
  }

  .sg-cat-arch .sg-cat-arch__cta.rts-btn {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: 7px;
  }
}

/* --- Shop by Category: the same spacing as every other section -------------
   The showcase pass gave this section 64px over its heading (44px on a phone)
   and 46px of extra room under the arches, so it sat in far more air than the
   product rows around it. Back to the shared rhythm from "Trust strip / section
   gaps" -- 24px above the heading and 42px below the last item on a desktop,
   18px and 40px below 992px.

   Below 1200px the arch row is a scroll strip that clips its overflow, so it
   keeps 4px under the arches for their shadow; the section gives those 4px
   back so the total is still the shared 40px. */
.category-feature-area {
  padding-top: 24px;
  padding-bottom: 42px;
}

.category-feature-area .row.g-4 {
  padding-bottom: 0;
}

@media only screen and (max-width: 1199px) {
  .category-feature-area .row.g-4 {
    padding-bottom: 4px;
  }

  .category-feature-area {
    padding-bottom: 38px;
  }
}

@media only screen and (max-width: 991px) {
  .category-feature-area {
    padding-top: 18px;
    padding-bottom: 36px;
  }
}


/* ===========================================================================
   THE BAND UNDER THE HERO -- the category medallions' ground.

   It was the flat page cream (.bg_light-1, forced with !important by the
   theme, hence the !important here). Now, from the back forward:

     1. champagne at the top warming to blush at the foot, so the band leads
        into the blush trust strip below it rather than stopping dead;
     2. a jaali -- the diamond lattice of a carved screen -- in hairline gold
        at very low strength, the same vocabulary as the arches further down;
     3. a soft white glow centred behind the medallions, which fades the
        lattice out where the photographs sit so they stay the subject.

   A gold hairline closes the band at the bottom. The hero artwork covers the
   top of this wrapper, so all of this shows only around and under the
   medallions.
   =========================================================================== */
.deepam-hero-wrap.bg_light-1 {
  background-color: #f8efe2 !important;
  background-image:
    radial-gradient(ellipse 55% 60% at 50% 62%, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 55%) 45%, rgb(255 255 255 / 0%) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 1L43 22 22 43 1 22Z' fill='none' stroke='%23b8862b' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M22 17l5 5-5 5-5-5z' fill='%23b8862b' fill-opacity='.14'/%3E%3Ccircle cx='22' cy='1' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='22' cy='43' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='1' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='43' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f8efe2 0%, #f9ebe6 55%, var(--sg-blush-band) 100%) !important;
  background-size: auto, 44px 44px, auto !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  box-shadow: inset 0 -1px 0 var(--gold-light);
}

/* The medallions' white mat reads crisply against the lattice; a touch more
   lift so they sit above it rather than in it. */
.rts-caregory-area-one .single-category-one img {
  box-shadow:
    0 0 0 2px var(--gold),
    0 16px 30px -12px rgb(74 10 36 / 45%);
}


/* --- The band under the hero, richer ----------------------------------------
   Three additions over the jaali above:

   1. MANDALAS at both edges -- a twelve-petal gold rosette, large and faint,
      half off the page on each side, the way a jewellery box's lining is
      printed. Drawn as inline SVG (petals and dots are one shape each,
      rotated with <use>), at 32% strength inside the file, since a background
      image cannot take an opacity of its own.
   2. A DEEPER CHAMPAGNE-TO-BLUSH sweep, so the band reads as its own ground
      rather than as more page.
   3. A DOUBLE BEZEL on every medallion: the gold ring, a white band, and a
      second fine gold ring outside it. The Swiper track clips its overflow, so
      its padding grows to fit the outer ring. */
.deepam-hero-wrap.bg_light-1 {
  background-color: #f6e9d6 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cdefs%3E%3Cpath%20id%3D%27p%27%20d%3D%27M120%2034c14%2018%2014%2042%200%2058c-14-16-14-40%200-58z%27%2F%3E%3Ccircle%20id%3D%27d%27%20cx%3D%27120%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%27.32%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b8862b%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27112%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27104%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2786%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2716%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23b8862b%27%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(15%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(45%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(75%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(105%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(135%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(165%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(195%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(225%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(255%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(285%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(315%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(345%20120%20120)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23c2185b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cdefs%3E%3Cpath%20id%3D%27p%27%20d%3D%27M120%2034c14%2018%2014%2042%200%2058c-14-16-14-40%200-58z%27%2F%3E%3Ccircle%20id%3D%27d%27%20cx%3D%27120%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%27.32%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b8862b%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27112%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27104%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2786%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2716%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23b8862b%27%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(15%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(45%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(75%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(105%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(135%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(165%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(195%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(225%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(255%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(285%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(315%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(345%20120%20120)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23c2185b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(ellipse 50% 58% at 50% 62%, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 50%) 45%, rgb(255 255 255 / 0%) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 1L43 22 22 43 1 22Z' fill='none' stroke='%23b8862b' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M22 17l5 5-5 5-5-5z' fill='%23b8862b' fill-opacity='.14'/%3E%3Ccircle cx='22' cy='1' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='22' cy='43' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='1' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3Ccircle cx='43' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f6e9d6 0%, #f7e4e0 50%, #f6d9e3 100%) !important;
  background-size: 340px 340px, 340px 340px, auto, 44px 44px, auto !important;
  background-position: left -170px bottom -30px, right -170px bottom -30px, center, 0 0, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
}

.rts-caregory-area-one .swiper {
  padding: 14px 12px 10px;
}

.rts-caregory-area-one .single-category-one img {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 7px rgb(255 255 255 / 75%),
    0 0 0 8px var(--gold-light),
    0 18px 32px -12px rgb(74 10 36 / 45%);
}

.rts-caregory-area-one .single-category-one:hover img,
.rts-caregory-area-one .single-category-one:focus-visible img {
  box-shadow:
    0 0 0 2px var(--rose-dark),
    0 0 0 7px rgb(255 255 255 / 85%),
    0 0 0 8px var(--rose-light),
    0 22px 36px -12px rgb(194 24 91 / 40%);
}

/* The labels pick up the gold: a fine diamond rule under each name. */
.rts-caregory-area-one .single-category-one p::after {
  content: "";
  display: block;
  width: 46px;
  height: 8px;
  margin: 6px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8' viewBox='0 0 46 8'%3E%3Crect x='0' y='3.4' width='17' height='1.2' fill='%23e9cf8f'/%3E%3Cpath d='M23 0l4 4-4 4-4-4z' fill='%23b8862b'/%3E%3Crect x='29' y='3.4' width='17' height='1.2' fill='%23e9cf8f'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media only screen and (max-width: 767px) {
  .deepam-hero-wrap.bg_light-1 {
    background-size: 220px 220px, 220px 220px, auto, 44px 44px, auto !important;
    background-position: left -120px bottom -20px, right -120px bottom -20px, center, 0 0, center !important;
  }
}



/* ===========================================================================
   ABOUT PAGE GROUNDS -- the home page's vocabulary behind each section.

   Backgrounds only: no section, copy or picture moves. The same three
   motifs as the home page -- the jaali lattice, the twelve-petal gold
   mandala (inline SVG, strength baked into the file since a background image
   takes no opacity of its own), and the champagne/blush washes.
   =========================================================================== */

/* --- Our Story: blush, the jaali, a glow behind the photos, a mandala ------- */
.sg-story {
  background-color: var(--sg-blush-band);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cdefs%3E%3Cpath%20id%3D%27p%27%20d%3D%27M120%2034c14%2018%2014%2042%200%2058c-14-16-14-40%200-58z%27%2F%3E%3Ccircle%20id%3D%27d%27%20cx%3D%27120%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%270.3%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b8862b%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27112%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27104%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2786%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2716%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23b8862b%27%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(15%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(45%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(75%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(105%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(135%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(165%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(195%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(225%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(255%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(285%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(315%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(345%20120%20120)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23c2185b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(ellipse 40% 60% at 25% 50%, rgb(255 255 255 / 85%) 0%, rgb(255 255 255 / 0%) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 1L43 22 22 43 1 22Z' fill='none' stroke='%23b8862b' stroke-opacity='.2' stroke-width='1'/%3E%3Cpath d='M22 17l5 5-5 5-5-5z' fill='%23b8862b' fill-opacity='.12'/%3E%3Ccircle cx='22' cy='1' r='1.5' fill='%23c2185b' fill-opacity='.16'/%3E%3Ccircle cx='22' cy='43' r='1.5' fill='%23c2185b' fill-opacity='.16'/%3E%3Ccircle cx='1' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.16'/%3E%3Ccircle cx='43' cy='22' r='1.5' fill='%23c2185b' fill-opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fbeef2 0%, var(--sg-blush-band) 100%);
  background-size: 380px 380px, auto, 44px 44px, auto;
  background-position: right -150px top -150px, center, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: inset 0 -1px 0 var(--gold-light);
}

/* --- Instagram: blush into cream, the fine lattice, mandalas at the edges --- */
.sg-insta {
  padding-top: 70px;
  background-color: #fbf3ee;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cdefs%3E%3Cpath%20id%3D%27p%27%20d%3D%27M120%2034c14%2018%2014%2042%200%2058c-14-16-14-40%200-58z%27%2F%3E%3Ccircle%20id%3D%27d%27%20cx%3D%27120%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%270.3%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b8862b%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27112%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27104%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2786%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2716%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23b8862b%27%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(15%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(45%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(75%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(105%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(135%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(165%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(195%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(225%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(255%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(285%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(315%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(345%20120%20120)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23c2185b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cdefs%3E%3Cpath%20id%3D%27p%27%20d%3D%27M120%2034c14%2018%2014%2042%200%2058c-14-16-14-40%200-58z%27%2F%3E%3Ccircle%20id%3D%27d%27%20cx%3D%27120%27%20cy%3D%2710%27%20r%3D%272.4%27%2F%3E%3C%2Fdefs%3E%3Cg%20opacity%3D%270.3%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b8862b%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27112%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%27104%27%20stroke-dasharray%3D%272%205%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2786%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2726%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%2716%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23p%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23b8862b%27%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(0%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(15%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(30%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(45%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(60%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(75%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(90%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(105%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(120%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(135%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(150%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(165%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(180%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(195%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(210%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(225%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(240%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(255%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(270%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(285%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(300%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(315%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(330%20120%20120)%27%2F%3E%3Cuse%20href%3D%27%23d%27%20transform%3D%27rotate(345%20120%20120)%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%27120%27%20r%3D%276%27%20fill%3D%27%23c2185b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M18 14l4 4-4 4-4-4z' fill='%23b8862b' fill-opacity='.16'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='36' cy='0' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='0' cy='36' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3Ccircle cx='36' cy='36' r='1.4' fill='%23c2185b' fill-opacity='.12'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--sg-blush-band) 0%, #fbf3ee 60%, var(--color-surface) 100%);
  background-size: 300px 300px, 300px 300px, 36px 36px, auto;
  background-position: left -150px top 20px, right -150px top 20px, 0 0, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

/* Instagram tiles get the gold edge every other photo on the site now has. */
.sg-insta a img,
.sg-insta__tile img {
  box-shadow: 0 0 0 1px var(--gold-light);
}

@media only screen and (max-width: 767px) {
  .sg-story {
    background-size: 240px 240px, auto, 44px 44px, auto;
    background-position: right -110px top -110px, center, 0 0, center;
  }

  .sg-insta {
    padding-top: 44px;
    background-size: 200px 200px, 200px 200px, 36px 36px, auto;
    background-position: left -110px top 10px, right -110px top 10px, 0 0, center;
  }
}

/* --- Trust strip: the same champagne as Popular Picks ----------------------
   It was the blush band; the shop asked for it to match the product row
   beneath it, so the two read as one warm ground under the medallion band. */
.rts-feature-area {
  background-color: var(--sg-champagne-band);
  background-image: none;
}

/* --- About: Our Promise, as much air above the panel as below ---------------
   The section carries only rts-section-gapBottom (60px under the panel at
   every width), so the panel sat hard against Our Story above it. The same
   60px on top centres it in its own ground. */
.sg-promise {
  padding-top: 60px;
}

/* --- About: Our Promise on the champagne of Popular Picks -------------------
   Plain colour only, the shop's choice -- the earlier lattice-and-mandala
   ground for this section was asked to be removed. */
.sg-promise {
  background-color: var(--sg-champagne-band);
}

/* --- Account page on the champagne of Popular Picks -------------------------
   Both states -- "Please sign in" and the signed-in dashboard -- render inside
   .account-tab-area-start, which sat on plain white. */
.account-tab-area-start {
  background-color: var(--sg-champagne-band);
}

/* --- Cart and Wishlist on the same champagne --------------------------------
   Both pages render their main area (full, empty and loading states alike) in
   .rts-cart-area.bg_light-1. .bg_light-1 forces the page cream with
   !important, so only !important reaches it. */
.rts-cart-area.bg_light-1 {
  background: var(--sg-champagne-band) !important;
}

/* --- Terms, Privacy and Contact on the same champagne -----------------------
   Terms & Conditions and Privacy Policy share .rts-pricavy-policy-area (the
   theme's spelling). Contact has two areas: the info cards and map, and the
   form and FAQ -- the latter was blush from the all-pages pass; it moves to
   champagne with the rest. The white form panel keeps its gold frame. */
.rts-pricavy-policy-area,
.rts-map-contact-area,
.rts-contact-form-area {
  background-color: var(--sg-champagne-band);
}

/* --- Category cards: the photo's own shape ----------------------------------
   The strip banners are 1920x800 (12:5). The tall arches cropped two-thirds
   of each away, so the card now takes the banner's ratio and the photo fills
   it exactly -- nothing cut, nothing letterboxed. Two across on a desktop
   (col-lg-6), one per swipe on a phone.

   The jewellery-box finish carries over: the gold sweep as the frame, the
   white mat, the inner gold hairline, the gold finial on top, the light
   sweep and lift on hover. The crown becomes a gentle rounded top -- a full
   semicircle across a wide card would clip the photo's corners. */
.sg-cat-arch {
  max-width: none;
}

.sg-cat-arch__frame {
  aspect-ratio: 12 / 5;
}

.sg-cat-arch__frame,
.sg-cat-arch__frame::before {
  border-radius: 28px 28px 16px 16px;
}

.sg-cat-arch__frame img,
.sg-cat-arch__fill {
  border-radius: 24px 24px 12px 12px;
  object-fit: cover;
  object-position: center;
}

.sg-cat-arch__frame::after {
  border-radius: 18px 18px 8px 8px;
}

@media only screen and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 82vw;
    max-width: 520px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .category-feature-area .row.g-4 > [class*="col-"] {
    width: 60vw;
  }
}



/* ===========================================================================
   SHOP BY CATEGORY -- collection cards (components/product/FeatureDiscount).

   Replaces the arches (their .sg-cat-arch rules above are no longer used).
   One white card per category in a gold frame:

     media   the photo at the banners' own 12:5, filling the frame exactly,
             with gold corner brackets top-left and bottom-right
     body    gold index numeral | name + design count | Shop Now

   Hover lifts the card, deepens the frame to gold, runs a band of light
   across the photo and slides the button's sheen.
   =========================================================================== */
.sg-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--gold-light);
  border-radius: 20px;
  box-shadow: 0 16px 36px -24px rgb(74 10 36 / 45%);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.45s ease,
    border-color 0.3s ease;
}

.sg-cat-card:hover,
.sg-cat-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 26px 46px -24px rgb(194 24 91 / 45%);
  outline: none;
}

.sg-cat-card:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-primary-ring),
    0 26px 46px -24px rgb(194 24 91 / 45%);
}

/* --- Media ------------------------------------------------------------------ */
.sg-cat-card__media {
  position: relative;
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: var(--color-primary-soft);
}

.sg-cat-card__media img,
.sg-cat-card__fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-cat-card__fill {
  background-image: var(--rose-metal-deep);
}

/* Gold corner brackets, inset from the photo's edge. */
.sg-cat-card__media::before,
.sg-cat-card__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 34px;
  pointer-events: none;
  transition: width 0.4s ease, height 0.4s ease;
}

.sg-cat-card__media::before {
  top: 12px;
  left: 12px;
  border-top: 2px solid #f3dca0;
  border-left: 2px solid #f3dca0;
  border-top-left-radius: 6px;
}

.sg-cat-card__media::after {
  right: 12px;
  bottom: 12px;
  border-right: 2px solid #f3dca0;
  border-bottom: 2px solid #f3dca0;
  border-bottom-right-radius: 6px;
}

.sg-cat-card:hover .sg-cat-card__media::before,
.sg-cat-card:hover .sg-cat-card__media::after,
.sg-cat-card:focus-visible .sg-cat-card__media::before,
.sg-cat-card:focus-visible .sg-cat-card__media::after {
  width: 52px;
  height: 52px;
}

.sg-cat-card__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(255 255 255 / 0%) 40%,
    rgb(255 255 255 / 42%) 50%,
    rgb(255 255 255 / 0%) 60%,
    transparent 70%
  );
  transform: translateX(-130%);
}

.sg-cat-card:hover .sg-cat-card__shine,
.sg-cat-card:focus-visible .sg-cat-card__shine {
  transform: translateX(130%);
  transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1);
}

/* --- Body: index | text | button ------------------------------------------- */
.sg-cat-card__body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 10px 8px;
}

.sg-cat-card__index {
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid var(--gold-light);
  font-family: var(--font-secondary);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  background-image: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sg-cat-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.sg-cat-card__name {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wine-deep);
  transition: color 0.25s;
}

.sg-cat-card:hover .sg-cat-card__name,
.sg-cat-card:focus-visible .sg-cat-card__name {
  color: var(--rose-dark);
}

.sg-cat-card__count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-text);
}

/* The product cards' Buy Now, exactly: 42px, 8px corners, 14px/600, rose
   metal with a gold edge, sheen sliding on hover of the whole card. */
.sg-cat-card .sg-cat-card__cta.rts-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-left: auto;
  padding: 0 26px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sg-cat-card:hover .sg-cat-card__cta.rts-btn,
.sg-cat-card:focus-visible .sg-cat-card__cta.rts-btn {
  background-position: 100% center;
}

/* --- Smaller screens --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .sg-cat-card__index {
    font-size: 32px;
    padding-right: 14px;
  }

  .sg-cat-card__name {
    font-size: 23px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-card {
    padding: 8px;
    border-radius: 16px;
  }

  .sg-cat-card__media {
    border-radius: 10px;
  }

  .sg-cat-card__media::before,
  .sg-cat-card__media::after {
    width: 22px;
    height: 22px;
  }

  .sg-cat-card__body {
    gap: 12px;
    padding: 12px 6px 4px;
  }

  .sg-cat-card__index {
    font-size: 26px;
    padding-right: 12px;
  }

  .sg-cat-card__name {
    font-size: 20px;
  }

  .sg-cat-card__count {
    font-size: 15px;
  }

  .sg-cat-card .sg-cat-card__cta.rts-btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cat-card,
  .sg-cat-card__media::before,
  .sg-cat-card__media::after,
  .sg-cat-card__shine {
    transition: none;
  }
}



/* ===========================================================================
   SHOP BY CATEGORY -- overlay showcase (supersedes the collection cards
   block above; same markup in FeatureDiscount.tsx).

   The photo IS the card: it fills a metallic gold frame edge to edge, and
   the name, design count and Shop Now ride on a frosted-glass bar across
   the foot of the photo -- white glass with wine lettering, so it reads over
   a pale photo and a dark one alike. No white strip under the picture.

   The gold index numerals are dropped; the corner brackets move to the top
   corners, clear of the glass bar.
   =========================================================================== */
.sg-cat-card {
  position: relative;
  padding: 4px;
  border: 0;
  border-radius: 22px;
  background: var(--gold-metal);
  box-shadow: 0 20px 40px -24px rgb(74 10 36 / 55%);
}

.sg-cat-card:hover,
.sg-cat-card:focus-visible {
  box-shadow: 0 30px 50px -24px rgb(194 24 91 / 50%);
}

.sg-cat-card__media {
  border-radius: 18px;
  border: 3px solid #ffffff;
}

/* Darken the foot of the photo slightly so the glass bar has a ground. */
.sg-cat-card__media img {
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-card__media::after {
  top: 12px;
  bottom: auto;
  right: 12px;
  border-bottom: 0;
  border-top: 2px solid #f3dca0;
  border-right: 2px solid #f3dca0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 6px;
}

/* --- The glass bar ------------------------------------------------------- */
.sg-cat-card__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  gap: 14px;
  padding: 10px 10px 10px 20px;
  border-radius: 14px;
  background: rgb(255 255 255 / 80%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgb(233 207 143 / 90%);
  box-shadow: 0 10px 24px -12px rgb(46 6 22 / 45%);
  transition: background-color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-card:hover .sg-cat-card__body,
.sg-cat-card:focus-visible .sg-cat-card__body {
  background: rgb(255 255 255 / 92%);
  transform: translateY(-3px);
}

.sg-cat-card__index {
  display: none;
}

.sg-cat-card__name {
  font-size: 26px;
}

.sg-cat-card__count {
  font-size: 16px;
}

@media only screen and (max-width: 991px) {
  .sg-cat-card__name {
    font-size: 22px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-card {
    padding: 3px;
    border-radius: 18px;
  }

  .sg-cat-card__media {
    border-radius: 15px;
    border-width: 2px;
  }

  .sg-cat-card__body {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 10px;
    padding: 7px 7px 7px 12px;
    border-radius: 11px;
  }

  .sg-cat-card__name {
    font-size: 18px;
  }

  .sg-cat-card__count {
    font-size: 13px;
  }

  .sg-cat-card .sg-cat-card__cta.rts-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* --- The glass bar floats on the frame's lower edge --------------------------
   Across the foot of the photo it hid the subject (the pendant, the second
   hair clip). It is now a compact label centred on the card's bottom edge,
   half over the photo and half below it, so only a sliver of the picture is
   covered. The row leaves room under each card for the half that hangs. */
.sg-cat-card__body {
  left: 50%;
  right: auto;
  bottom: -26px;
  width: max-content;
  max-width: calc(100% - 40px);
  transform: translateX(-50%);
}

.sg-cat-card:hover .sg-cat-card__body,
.sg-cat-card:focus-visible .sg-cat-card__body {
  transform: translate(-50%, -3px);
}

.sg-cat-card__text {
  min-width: 150px;
}

.category-feature-area .row.g-4 > [class*="col-"] {
  padding-bottom: 34px;
}

.category-feature-area .row.g-4 {
  --bs-gutter-y: 0.5rem;
}

@media only screen and (max-width: 575px) {
  .sg-cat-card__body {
    bottom: -20px;
    max-width: calc(100% - 20px);
  }

  .sg-cat-card__text {
    min-width: 110px;
  }

  .category-feature-area .row.g-4 > [class*="col-"] {
    padding-bottom: 26px;
  }
}



/* ===========================================================================
   SHOP BY CATEGORY -- the stacked showcase (FeatureDiscount.tsx).

   Supersedes the arch, collection-card and overlay blocks above, none of
   whose classes are rendered any more.

   Swiper's creative effect does the stacking: the centre card full size,
   each neighbour shifted 58% of a card sideways, 84% the size and a little
   fainter, two on each side. The slides are a fixed share of the page width
   (slidesPerView: "auto"), so the stack is wider than the container -- the
   outer cards run towards the page edges, as in the reference.
   =========================================================================== */
.sg-cat-show {
  position: relative;
  padding: 6px 0 0;
  overflow: hidden;
}

.sg-cat-show .swiper {
  overflow: visible;
  padding-bottom: 46px;
}

.sg-cat-show__slide {
  width: min(56vw, 860px);
  transition-property: transform, opacity;
}

.sg-cat-show__card {
  position: relative;
  display: block;
  padding: 4px;
  border-radius: 24px;
  background: var(--gold-metal);
  box-shadow: 0 26px 50px -26px rgb(74 10 36 / 55%);
  text-decoration: none;
  color: inherit;
}

.sg-cat-show__media {
  position: relative;
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: 20px;
  border: 3px solid #ffffff;
  background: var(--color-primary-soft);
}

.sg-cat-show__media img,
.sg-cat-show__fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-cat-show__fill {
  background-image: var(--rose-metal-deep);
}

/* Side cards: a blush veil, so the centre is unmistakably the subject. */
.sg-cat-show__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(248 225 234 / 45%);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.swiper-slide-active .sg-cat-show__media::after {
  opacity: 0;
}

/* --- The label: only on the centre card, floating on its lower edge ----------- */
.sg-cat-show__label {
  position: absolute;
  left: 50%;
  bottom: -26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 10px 10px 10px 22px;
  border-radius: 14px;
  background: rgb(255 255 255 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold-light);
  box-shadow: 0 12px 26px -12px rgb(46 6 22 / 45%);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.swiper-slide-active .sg-cat-show__label {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.sg-cat-show__text {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.sg-cat-show__name {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wine-deep);
}

.sg-cat-show__count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-text);
}

/* The product cards' Buy Now, exactly. */
.sg-cat-show .sg-cat-show__cta.rts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 26px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--btn);
  background-image: var(--rose-metal);
  background-size: 200% auto;
  background-position: 0% center;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
  transition: background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sg-cat-show__card:hover .sg-cat-show__cta.rts-btn {
  background-position: 100% center;
}

/* --- Dots ---------------------------------------------------------------------- */
.sg-cat-show .swiper-pagination {
  bottom: 0;
}

.sg-cat-show .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--gold);
  opacity: 0.4;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.sg-cat-show .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 5px;
  opacity: 1;
  background: var(--rose-dark);
}

/* --- Smaller screens --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .sg-cat-show__slide {
    width: 70vw;
  }

  .sg-cat-show__name {
    font-size: 22px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-show__slide {
    width: 80vw;
  }

  .sg-cat-show__card {
    padding: 3px;
    border-radius: 18px;
  }

  .sg-cat-show__media {
    border-radius: 15px;
    border-width: 2px;
  }

  .sg-cat-show__label {
    bottom: -22px;
    gap: 10px;
    max-width: calc(100% - 16px);
    padding: 7px 7px 7px 12px;
    border-radius: 11px;
  }

  .sg-cat-show__text {
    min-width: 100px;
  }

  .sg-cat-show__name {
    font-size: 18px;
  }

  .sg-cat-show__count {
    font-size: 13px;
  }

  .sg-cat-show .sg-cat-show__cta.rts-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .sg-cat-show .swiper {
    padding-bottom: 40px;
  }
}

/* Swiper's creative effect clips each slide (overflow: hidden on
   .swiper-creative .swiper-slide), which cut the centre card's label off
   where it hangs below the frame. The card clips its own photo already. */
.sg-cat-show .swiper-slide {
  overflow: visible;
}

/* No dots (the reference has none, and with the four tiles run twice there
   would be eight dots for four categories): the room they took goes. */
.sg-cat-show .swiper {
  padding-bottom: 34px;
}

/* --- Showcase inside the page container, with dots ---------------------------
   It ran edge to edge; now it sits in .container like every other section,
   so its left and right edges line up with the headings and product rows.
   The slide width is a share of that container instead of the viewport. */
.sg-cat-show {
  overflow: hidden;
  border-radius: 24px;
}

.sg-cat-show__slide {
  width: 62%;
}

@media only screen and (max-width: 991px) {
  .sg-cat-show__slide {
    width: 74%;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-show__slide {
    width: 84%;
  }
}

.sg-cat-show__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.sg-cat-show__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--gold);
  opacity: 0.45;
  cursor: pointer;
  transition: width 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
}

.sg-cat-show__dot:hover {
  opacity: 0.8;
}

.sg-cat-show__dot.is-active {
  width: 30px;
  opacity: 1;
  background: var(--rose-dark);
}

.sg-cat-show__dot:focus-visible {
  outline: 2px solid var(--rose-dark);
  outline-offset: 3px;
}

/* --- Every visible card whole --------------------------------------------------
   The outer cards ran past the container and were cut at its edges. The
   geometry now fits exactly: one card each side (limitProgress: 1 tucks any
   further card behind them), each side card 80% scale and shifted 50% of a
   card. Its outer edge then sits at 0.5W + 0.4W = 0.9W from the centre, so a
   centre card 55% of the container wide (0.9 x 55% = 49.5%) keeps both side
   cards inside the container at every width. */
.sg-cat-show__slide {
  width: 55%;
}

@media only screen and (max-width: 991px) {
  .sg-cat-show__slide {
    width: 55%;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-show__slide {
    width: 55%;
  }

  .sg-cat-show__label {
    gap: 6px;
    padding: 5px 5px 5px 9px;
  }

  .sg-cat-show__text {
    min-width: 0;
  }

  .sg-cat-show__name {
    font-size: 15px;
  }

  .sg-cat-show__count {
    display: none;
  }

  .sg-cat-show .sg-cat-show__cta.rts-btn {
    height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }
}

/* --- Only three cards, all at full clarity ------------------------------------
   1. A fourth card showed at the far left: cards beyond the neighbours are
      clamped to the neighbours' place but still painted, and peeked out
      during and between moves. Anything that is not the centre or a direct
      neighbour is now hidden outright (!important beats the opacity Swiper
      writes inline), fading as it leaves.
   2. The side cards were veiled in blush and dimmed; both are gone, so all
      three photos show in their true colours. */
.sg-cat-show .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
  opacity: 0 !important;
  pointer-events: none;
}

.sg-cat-show__media::after {
  display: none;
}



/* ===========================================================================
   SHOP BY CATEGORY -- the collection menu (FeatureDiscount.tsx).

   Replaces the carousel (the .sg-cat-show rules above are no longer used).
   No slider: a list on the left, a stage on the right.

     list    each category a row -- gold numeral, name, design count, arrow.
             The chosen row lifts into a white card with a rose rule down its
             left edge; the others sit quietly on the section's blush.
     stage   the chosen photo, whole, at the banners' 12:5, in the gold
             frame and white mat; under it a caption bar with the name, the
             count and Shop Now. Photos crossfade when the choice changes.
   =========================================================================== */
.sg-cat-menu {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 36px;
  align-items: center;
}

/* --- The list ------------------------------------------------------------- */
.sg-cat-menu__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-cat-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-menu__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--rose-metal);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.sg-cat-menu__item:hover {
  background: rgb(255 255 255 / 55%);
}

.sg-cat-menu__item.is-active {
  background: #ffffff;
  border-color: var(--gold-light);
  box-shadow: 0 14px 30px -20px rgb(74 10 36 / 45%);
  transform: translateX(6px);
}

.sg-cat-menu__item.is-active::before {
  opacity: 1;
}

.sg-cat-menu__item:focus-visible {
  outline: 2px solid var(--rose-dark);
  outline-offset: 2px;
}

.sg-cat-menu__num {
  flex: 0 0 auto;
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  background-image: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sg-cat-menu__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sg-cat-menu__name {
  font-family: var(--font-secondary);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--wine-deep);
  transition: color 0.3s;
}

.sg-cat-menu__item.is-active .sg-cat-menu__name {
  color: var(--rose-dark);
}

.sg-cat-menu__count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-text);
}

.sg-cat-menu__arrow {
  flex: 0 0 auto;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sg-cat-menu__item.is-active .sg-cat-menu__arrow {
  opacity: 1;
  transform: none;
  color: var(--rose-dark);
}

/* --- The stage ------------------------------------------------------------ */
.sg-cat-menu__stage {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 24px;
  background: var(--gold-metal);
  box-shadow: 0 28px 54px -28px rgb(74 10 36 / 55%);
}

.sg-cat-menu__frame {
  position: relative;
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  border: 3px solid #ffffff;
  border-bottom: 0;
  background: var(--color-primary-soft);
}

.sg-cat-menu__frame img,
.sg-cat-menu__fill {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-menu__fill {
  background-image: var(--rose-metal-deep);
}

.sg-cat-menu__frame img.is-active,
.sg-cat-menu__fill.is-active {
  opacity: 1;
  transform: none;
}

.sg-cat-menu__caption {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 24px;
  border-radius: 0 0 20px 20px;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-top: 1px solid var(--gold-light);
}

.sg-cat-menu__caption-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sg-cat-menu__caption-name {
  font-family: var(--font-secondary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wine-deep);
}

.sg-cat-menu__caption-count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-text);
}

/* The product cards' Buy Now, exactly. */
.sg-cat-menu .sg-cat-menu__cta.rts-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 26px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

/* --- Tablet and phone: chips above the stage -------------------------------- */
@media only screen and (max-width: 991px) {
  .sg-cat-menu {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .sg-cat-menu__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .sg-cat-menu__item {
    width: auto;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--gold-light);
    border-radius: 999px;
    background: rgb(255 255 255 / 60%);
  }

  .sg-cat-menu__item.is-active {
    transform: none;
    background-color: var(--rose-dark);
    background-image: var(--rose-metal-deep);
    border-color: var(--gold);
  }

  .sg-cat-menu__item::before,
  .sg-cat-menu__count,
  .sg-cat-menu__arrow,
  .sg-cat-menu__num {
    display: none;
  }

  .sg-cat-menu__name {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
  }

  .sg-cat-menu__item.is-active .sg-cat-menu__name {
    color: #ffffff;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-menu__stage {
    padding: 3px;
    border-radius: 18px;
  }

  .sg-cat-menu__frame {
    border-radius: 15px 15px 0 0;
    border-width: 2px;
  }

  .sg-cat-menu__caption {
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-radius: 0 0 15px 15px;
    border-width: 2px;
  }

  .sg-cat-menu__caption-name {
    font-size: 21px;
  }

  .sg-cat-menu__caption-count {
    font-size: 14px;
  }

  .sg-cat-menu .sg-cat-menu__cta.rts-btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cat-menu__item,
  .sg-cat-menu__frame img,
  .sg-cat-menu__fill,
  .sg-cat-menu__arrow {
    transition: none;
  }
}



/* ===========================================================================
   SHOP BY CATEGORY -- photo tiles (FeatureDiscount.tsx).

   Replaces the collection menu (.sg-cat-menu rules above no longer used).
   A plain grid: two across on a desktop and tablet, one on a phone. Each tile
   IS its photo, at the banners' 12:5 so nothing is cropped, rounded, with a
   soft wine fade at its foot carrying the design count, the name large in
   white serif, and a gold "Shop Now". Hover: a gold hairline appears inside
   the edge, the fade deepens, the arrow steps forward, the tile lifts.
   =========================================================================== */
.sg-cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.sg-cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  background: var(--color-primary-soft);
  box-shadow: 0 18px 36px -22px rgb(74 10 36 / 50%);
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.45s ease;
}

.sg-cat-tile img,
.sg-cat-tile__fill {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-cat-tile__fill {
  background-image: var(--rose-metal-deep);
}

/* The fade at the foot, under the words. */
.sg-cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(46 6 22 / 82%) 0%,
    rgb(46 6 22 / 45%) 28%,
    rgb(46 6 22 / 0%) 55%
  );
  transition: opacity 0.45s ease;
}

/* The gold hairline inside the edge, on hover. */
.sg-cat-tile::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgb(243 220 160 / 0%);
  border-radius: 10px;
  pointer-events: none;
  transition: border-color 0.45s ease, inset 0.45s ease;
}

.sg-cat-tile:hover,
.sg-cat-tile:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -22px rgb(194 24 91 / 45%);
  outline: none;
}

.sg-cat-tile:hover::after,
.sg-cat-tile:focus-visible::after {
  inset: 14px;
  border-color: rgb(243 220 160 / 95%);
}

.sg-cat-tile:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-primary-ring),
    0 26px 44px -22px rgb(194 24 91 / 45%);
}

/* --- The words ------------------------------------------------------------- */
.sg-cat-tile__content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sg-cat-tile__count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.sg-cat-tile__name {
  font-family: var(--font-secondary);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 10px rgb(46 6 22 / 50%);
}

.sg-cat-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-bottom: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3dca0;
  border-bottom: 1px solid rgb(243 220 160 / 60%);
}

.sg-cat-tile__cta i {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sg-cat-tile:hover .sg-cat-tile__cta i,
.sg-cat-tile:focus-visible .sg-cat-tile__cta i {
  transform: translateX(5px);
}

/* --- Smaller screens --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .sg-cat-tiles {
    gap: 16px;
  }

  .sg-cat-tile__content {
    left: 20px;
    bottom: 16px;
  }

  .sg-cat-tile__name {
    font-size: 28px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sg-cat-tile {
    border-radius: 14px;
  }

  .sg-cat-tile__name {
    font-size: 26px;
  }

  .sg-cat-tile__cta {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cat-tile,
  .sg-cat-tile::after,
  .sg-cat-tile__cta i {
    transition: none;
  }
}

/* Over a pale photo (the hair clips on marble) the small gold count line was
   lost: a deeper fade at the foot, and a shadow under all the lettering. */
.sg-cat-tile::before {
  background: linear-gradient(
    to top,
    rgb(46 6 22 / 88%) 0%,
    rgb(46 6 22 / 62%) 32%,
    rgb(46 6 22 / 0%) 62%
  );
}

.sg-cat-tile__count,
.sg-cat-tile__cta {
  text-shadow: 0 1px 4px rgb(46 6 22 / 80%);
}

.sg-cat-tile__count {
  color: #f3dca0;
}

/* --- Category strip arrows: under the medallions on phone and tablet --------
   Below 1200px the strip is narrow enough that the arrows sat on top of the
   photos. They move to a pair centred under the row; the track grows at the
   foot to make room. Desktop keeps them at the sides. */
@media only screen and (max-width: 1199px) {
  .rts-caregory-area-one .swiper {
    padding-bottom: 58px;
  }

  .rts-caregory-area-one .swiper-button-prev,
  .rts-caregory-area-one .swiper-button-next {
    top: auto;
    bottom: 8px;
    margin-top: 0;
    transform: none;
  }

  .rts-caregory-area-one .swiper-button-prev {
    left: calc(50% - 46px);
    right: auto;
  }

  .rts-caregory-area-one .swiper-button-next {
    left: calc(50% + 6px);
    right: auto;
  }
}

@media only screen and (max-width: 767px) {
  .rts-caregory-area-one .swiper {
    padding-bottom: 50px;
  }

  .rts-caregory-area-one .swiper-button-prev {
    left: calc(50% - 38px);
  }
}

/* When every category already fits there are no arrows (see .is-locked), so
   the room kept for them under the row goes too. */
@media only screen and (max-width: 1199px) {
  .category-area-main-wrapper-one.is-locked .swiper {
    padding-bottom: 10px;
  }
}

/* ===========================================================================
   SHOP BY CATEGORY -- one line (overrides the photo-tile block above).

   All four categories in a single row on a desktop. Below 992px the row
   stays one line and scrolls sideways, snapping card by card.

   Each card: white, gold hairline frame, the photo whole at 12:5 on top,
   then the name in the display serif, the count in gold italic, and the
   site's Shop Now button. The fade and white lettering over the photo are
   gone -- the words sit under it.
   =========================================================================== */
.sg-cat-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.sg-cat-tile {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--gold-light);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 30px -22px rgb(74 10 36 / 45%);
}

.sg-cat-tile::before {
  display: none;
}

.sg-cat-tile::after {
  inset: -1px;
  border-radius: 16px;
}

.sg-cat-tile:hover::after,
.sg-cat-tile:focus-visible::after {
  inset: -1px;
  border-color: var(--gold);
}

.sg-cat-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-primary-soft);
}

.sg-cat-tile__content {
  position: static;
  align-items: center;
  gap: 2px;
  padding: 14px 6px 6px;
  text-align: center;
}

.sg-cat-tile__name {
  font-size: 24px;
  color: var(--wine-deep);
  text-shadow: none;
}

.sg-cat-tile:hover .sg-cat-tile__name {
  color: var(--rose-dark);
}

.sg-cat-tile__count {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-text);
  text-shadow: none;
}

/* The product cards' Buy Now, exactly. */
.sg-cat-tile .sg-cat-tile__cta.rts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 10px;
  padding: 0 24px;
  border: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgb(80 6 34 / 45%);
}

.sg-cat-tile:hover .sg-cat-tile__cta.rts-btn {
  background-position: 100% center;
}

/* --- Below 992px: still one line, swiped ------------------------------------ */
@media only screen and (max-width: 991px) {
  .sg-cat-tiles {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 14px;
  }

  .sg-cat-tiles::-webkit-scrollbar {
    display: none;
  }

  .sg-cat-tile {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }

  .sg-cat-tile:hover,
  .sg-cat-tile:focus-visible {
    transform: none;
  }

  .sg-cat-tile__name {
    font-size: 21px;
  }
}

@media only screen and (max-width: 575px) {
  .sg-cat-tile {
    flex-basis: 72%;
  }

  .sg-cat-tile__name {
    font-size: 20px;
  }

  .sg-cat-tile .sg-cat-tile__cta.rts-btn {
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
  }
}

/* --- Category cards, a little taller ----------------------------------------
   More room inside the card rather than a taller photo frame: the photo keeps
   its own 12:5, so nothing is cropped. */
.sg-cat-tile {
  padding: 10px;
}

.sg-cat-tile__content {
  gap: 4px;
  padding: 22px 8px 14px;
}

.sg-cat-tile .sg-cat-tile__cta.rts-btn {
  height: 42px;
  margin-top: 14px;
}

@media only screen and (max-width: 575px) {
  .sg-cat-tile__content {
    padding: 18px 6px 10px;
  }

  .sg-cat-tile .sg-cat-tile__cta.rts-btn {
    height: 38px;
    margin-top: 12px;
  }
}

/* --- Category cards: taller photos ------------------------------------------
   2:1 instead of the banners' 12:5, at the shop's request -- 20% taller. The
   photo is centred, so the subject stays in view and about 8% is trimmed
   from each side. */
.sg-cat-tile__media {
  aspect-ratio: 2 / 1;
}

.sg-cat-tile__media img {
  object-position: center;
}

/* Taller again, at the shop's request: 16:9 (about 35% taller than the
   banners' own 12:5). Centred, so roughly 13% is trimmed from each side. */
.sg-cat-tile__media {
  aspect-ratio: 16 / 9;
}

/* --- Category cards: light gold, not white ------------------------------------
   The cards take the champagne of the product rows; the section keeps its
   blush. */
.sg-cat-tile {
  background: var(--sg-champagne-band);
}

/* Square (boxed) photos, at the shop's request. Centred, so the middle of
   each wide banner -- where the jewellery sits -- is what shows. */
.sg-cat-tile__media {
  aspect-ratio: 1 / 1;
}

/* The photo covers the whole top of the card -- no inset border of card
   colour around it. The card clips it to its own rounded corners. */
.sg-cat-tile {
  padding: 0;
  overflow: hidden;
}

.sg-cat-tile__media {
  border-radius: 0;
}

.sg-cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-cat-tile__content {
  padding: 20px 14px 22px;
}

/* --- Category cards: the photo fills the square, like Recommended Picks ------
   No blurred backdrop, no letterboxing: one image, object-fit: cover, edge
   to edge -- the same treatment as the product cards' square photos. */
.sg-cat-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
}

.sg-cat-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Category cards: back to the inset 16:9 photo -----------------------------
   As the shop approved it: the card's padding frames the photo, which is
   16:9 with its own rounded corners, then the name, count and Shop Now. */
.sg-cat-tile {
  padding: 10px;
  overflow: visible;
}

.sg-cat-tile__media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}

.sg-cat-tile__content {
  padding: 22px 8px 14px;
}

@media only screen and (max-width: 575px) {
  .sg-cat-tile__content {
    padding: 18px 6px 10px;
  }
}

/* Shop by Category: the inset photo filling its box (cover), no zoom.
   4:3 -- taller than the approved 16:9, at the shop's request. */
.sg-cat-tile__media {
  aspect-ratio: 4 / 3;
}

.sg-cat-tile__media img,
.sg-cat-tile:hover .sg-cat-tile__media img,
.sg-cat-tile:focus-visible .sg-cat-tile__media img {
  object-fit: cover;
  object-position: center;
  transform: none;
}