/* ===========================================================================
   BITS brand palette
   ---------------------------------------------------------------------------
   Ported from BITS-PRODUCT/client/src/index.css so the storefront and the
   admin dashboard read as one product. The theme shipped green (#629D23);
   the house colour is the orange from the Black I mark.

   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 seven house colours ------------------------------------------
     Named by what they are, then assigned to roles below. Everything in this
     stylesheet reads the ROLE, never the raw colour, so a future change to the
     palette happens here and nowhere else.

       --plum    #39132D  darkest, for headings and pressed states
       --wine    #67113A  the brand colour: header, buttons, links
       --berry   #962A4F  a lift on wine, for fills that need to read brighter
       --rose    #C04C73  the loudest of the seven; accents and focus rings
       --gold    #B98D61  the warm counterpart, for prices and highlights
       --bronze  #9E7145  gold's darker state
       --blush   #D4A38E  the light one, for tints and soft borders          */
  --plum: #39132d;
  --wine: #67113a;
  --berry: #962a4f;
  --rose: #c04c73;
  --gold: #b98d61;
  --bronze: #9e7145;
  --blush: #d4a38e;

  /* --- Accent ----------------------------------------------------------- */
  --color-primary: var(--wine);
  --color-primary-fill: var(--berry);
  --color-primary-hover: var(--plum);
  /* DERIVED, not one of the seven: this paints whole section backgrounds and
     input fills, and the lightest house colour (blush) is still far too strong
     behind body text. It is blush taken to a 4% tint of white, so it belongs to
     the palette without competing with anything set on it. */
  --color-primary-soft: #fbf4f1;
  --color-primary-ring: rgb(192 76 115 / 45%);

  /* --- Text ------------------------------------------------------------- */
  --color-heading-1: var(--plum);
  --color-secondary: var(--wine);
  /* Body copy stays a warm neutral. Running paragraphs in plum costs contrast
     against a tinted page for no gain -- the palette shows in the headings,
     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. Info is the
     one that carries no such convention, so it takes the rose. */
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: var(--rose);

  /* --- Surfaces --------------------------------------------------------- */
  --color-bg: #fdf9f8;
  --color-surface: #ffffff;
  --color-border: #ecdfd9;

  /* 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;
}

/* The theme paints several section backgrounds with a pale green tint that is
   not exposed as a variable. Retinted warm so they sit under the orange
   rather than fighting it. */
.bg_light-1 {
  background-color: var(--color-primary-soft);
}

/* 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(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* --- 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 -- both header bars stick together: 6px + an 84px logo + 6px
   for bar one, plus the wine nav strip. 141px, which is the figure the
   header's own note quotes for how far `fixed` would have dropped the page.

   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: 141px;
}

@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;
}

/* 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: #ffffff;
  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: #ffffff;
}

.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: #fff;
  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: #ffffff;
  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: #ffffff;
  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 banner --------------------------------------------------
   Placeholder in place of the theme's contact/01.jpg. Overridden here rather
   than edited in style.css, so the original path survives for when real
   photography arrives. */
.rts-contact-main-wrapper-banner {
  background-image: url(/assets/images/contact/placeholder-banner.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- 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(--plum);
  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;
  }
}

/* Shop Now in white, to match the title over the darkened image.
   The plus icons are covered too -- the theme colours them separately, so
   leaving them would give a white label with dark chevrons beside it. */
.single-feature-card .shop-now-goshop-btn,
.single-feature-card .shop-now-goshop-btn .text,
.single-feature-card .shop-now-goshop-btn i {
  color: #ffffff;
}

/* Text stays selectable and the hover state still reads as a link. */
.single-feature-card:hover .shop-now-goshop-btn .text {
  text-decoration: underline;
}

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

/* Gold, 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);
}

/* ---------------------------------------------------------------------------
   Deepam Boutique logo sizing.

   The theme's logo was a wide wordmark SVG with no height cap -- it was sized
   by its own aspect ratio. The Deepam mark is a 447x447 square, so unconstrained
   it renders as a large block and pushes the header rows apart. Height is
   capped and width left auto so the square 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.

   The theme's /assets/images/contact/01.jpg is a photograph of a woman in a
   supermarket -- the grocery template's stock image, and nothing to do with a
   saree boutique. Replaced with a branded band in the logo's maroon and gold.

   The heading sits on top of this, so the artwork stays dark and low-contrast
   deliberately: a busy image behind "Ask Us Question" would compete with it.
--------------------------------------------------------------------------- */
.rts-contact-main-wrapper-banner {
  background-image: url(/assets/images/contact/deepam-contact-banner.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The title and body text were dark, written for the light photograph. */
.rts-contact-main-wrapper-banner .contact-banner-content .title,
.rts-contact-main-wrapper-banner .contact-banner-content .disc {
  color: #ffffff;
}

.rts-contact-main-wrapper-banner .contact-banner-content .disc {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   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(103 17 58 / 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(--color-primary);
}

.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(--color-primary);
  box-shadow: 0 0 0 0.2rem rgb(103 17 58 / 25%);
}

/* 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(--color-primary);
  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.
--------------------------------------------------------------------------- */
/* TRIMMED FROM THE BOTTOM, NOT FROM BOTH ENDS.
   The artwork is background-size: cover, so a shorter box crops it vertically --
   and with the default centred position the crop comes off the top and the
   bottom equally, which walks the subject up out of frame as the band gets
   shorter. Anchored to the top, the height that was removed is removed from the
   bottom, which is the empty half of these banners. */
.rts-banner-area-one .banner-bg-image {
  min-height: 420px;
  background-position: center top;
}

@media only screen and (max-width: 1199px) {
  .rts-banner-area-one .banner-bg-image {
    min-height: 348px;
  }
}

@media only screen and (max-width: 991px) {
  .rts-banner-area-one .banner-bg-image {
    min-height: 292px;
  }
}

/* The step down is steeper here than between the widths above it: the artwork
   is cropped to fill (background-size: cover), so on a narrow screen a tall
   band shows a narrow vertical slice of a wide photograph rather than more of
   it. 280px is about where the crop still reads as the picture. */
@media only screen and (max-width: 575px) {
  .rts-banner-area-one .banner-bg-image {
    min-height: 222px;
  }
}

/* ---------------------------------------------------------------------------
   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(--wine);
}

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

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

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

/* 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: #ffffff;
  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(--color-primary-hover);
  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.
--------------------------------------------------------------------------- */
.filter-select-area {
  margin-bottom: 24px;
}

/* 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: #ffffff;
    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: #fffdf8;
  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;
}

/* --- 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: white on cream is barely a boundary, and the
   field lost its shape when the bar stopped being a strong colour behind it. */
.deepam-search {
  position: relative;
  flex: 0 1 560px;
  max-width: 560px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #57534e;
  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: var(--color-heading-1);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

.deepam-suggestions {
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  background: #fff;
  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%;
  z-index: 200;

  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. #57534e is the body
   text colour, so the outline sits at the same weight as the words beside it
   rather than adding a third tone to the bar. */
.deepam-actions .btn-border-only {
  border: 1px solid #57534e;
  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);
  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 #fffdf8;
  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: #ffffff;
    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: #ffffff;
  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 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.

   Both bars travel together: the whole .deepam-header sticks, not each bar
   separately, so the logo/search row and the nav row never separate mid-scroll.

   position: sticky rather than fixed -- fixed would take the header out of the
   flow and drop the page 141px upward under it, needing a spacer to compensate.
   Sticky keeps its space in the layout and simply stops at the top.
--------------------------------------------------------------------------- */
.deepam-header {
  position: sticky;
  top: 0;
  /* Above the page content and the hero's swiper arrows, below the delivery
     dialog (1200). */
  z-index: 1000;
  /* Matches bar one, which is what the page sees at the top of the header. */
  background: #fffdf8;
}

/* Only once it has actually stuck: a shadow drawn at rest would sit over the
   banner from the first paint. */
.deepam-header-secondary {
  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) {
  .deepam-header {
    position: static;
    z-index: auto;
  }

  .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(103 17 58 / 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(103 17 58 / 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: #ffffff;
  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: #ffffff;
}

/* 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: #fff;
  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: #ffffff;
  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: #ffffff;
  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, warm amber into the house orange, running
     corner to corner so no two cards' borders look identical in the row. */
  background-image:
    linear-gradient(168deg, #fff 0%, #fefbfa 46%, var(--color-primary-soft) 100%),
    linear-gradient(
      135deg,
      rgb(253 186 116 / 85%) 0%,
      rgb(255 237 213 / 70%) 40%,
      rgb(251 146 60 / 75%) 70%,
      rgb(103 17 58 / 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(249 115 22 / 10%) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.rts-feature-area .single-feature-area:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 4px rgb(28 25 23 / 5%),
    0 26px 44px -22px rgb(57 19 45 / 34%);
}

.rts-feature-area .single-feature-area:hover::before {
  opacity: 1;
}

.rts-feature-area .single-feature-area:hover::after {
  opacity: 1;
}

/* --- 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(57 19 45 / 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);
}

.rts-feature-area .single-feature-area:hover .icon {
  background-image: linear-gradient(135deg, var(--color-primary-fill), var(--color-primary));
  color: #fff;
  box-shadow:
    inset 0 0 0 4px rgb(255 255 255 / 20%),
    0 10px 22px -8px rgb(103 17 58 / 45%);
  transform: scale(1.06);
}

/* 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(57 19 45 / 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: #ffffff;
  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: #ffffff;
  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. */
.product-colours__thumb.is-chosen {
  border-color: #1c1917;
  box-shadow: 0 0 0 2px #1c1917;
}

.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: #fff;
  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(--color-primary);
  color: var(--color-primary);
  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(--color-primary);
  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(--color-primary);
  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, #6d1f3a);
  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: #ffffff;
  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: #ffffff;
  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: #ffffff;
  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: #fff;
  text-align: center;
}

.pay-qr-live > i {
  font-size: 30px;
  color: var(--color-primary, #6d1f3a);
  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: #ffffff;
  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: #fff;
  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: #fff;
}

/* 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: #ffffff;
  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(--color-primary);
  border-radius: 6px;
  background: var(--color-primary);
  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(--color-primary-hover);
  border-color: var(--color-primary-hover);
  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(57 19 45 / 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(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}

.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(--bronze);
}

.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(57 19 45 / 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;
}