/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:19 Unexpected "("
Line 19:76 Unterminated string token
Line 20:74 Unterminated string token
Line 22:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
{%- comment -%}
    The bar itself (espresso ribbon, gold hairlines, type) is owned solely by
    base.css. This block used to redeclare it with `display: block`, fighting
    base.css's `display: flex` for the same element — whichever stylesheet
    happened to load last won, so the bar's layout depended on load order.
    One owner only.
  {%- endcomment -%}

  .announcement-bar__inner {
    position: relative;
    height: 100%;
    /* width:100% is load-bearing, not cosmetic. base.css makes .announcement-bar
       a flex container, so this is a flex ITEM — without an explicit width it is
       shrink-to-fit, sized by its in-flow children. Every message is
       position:absolute EXCEPT the one holding .announcement--active, and the
       rotator drops that class from the outgoing message a full fade before it
       lands on the incoming one. In that window nothing is in flow, the box
       collapses to ~0, and the messages (inset:0) collapse with it — which is
       how a 13px promo line rendered as a clipped "Eas". Pinning the width makes
       the layout independent of which classes the rotator is mid-way through. */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:cro-bestsellers (INDEX:4) */
.cro-bestsellers {
  padding-block: var(--spacing-2xl, 64px);
  /* Contain the track's horizontal scroll extent so it cannot give the whole page
     a sideways scrollbar (the bug fixed for .section-new-arrivals in f7b8556).
     `clip`, not `hidden`: hidden would make this a scroll container and force
     overflow-y to auto, breaking position:sticky in descendants. The arrows sit
     within the container's inline padding, so they are not cut off. */
  overflow-x: clip;
}

.cro-bestsellers__header {
  text-align: center;
  margin-bottom: var(--spacing-lg, 32px);
}

.cro-bestsellers__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-label, 13px);
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
  margin: 0 0 var(--spacing-2xs, 8px);
}

.cro-bestsellers__heading {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg, 28px);
  font-weight: var(--weight-heading, 500);
  line-height: var(--leading-heading-lg, 1.2);
  color: var(--color-text-heading, #1F1913);
  margin: 0;
}

.cro-bestsellers__carousel {
  display: block;
  position: relative;
}

/* Scrollable track: flex row with scroll-snap. The negative inline margins let the
   cards bleed to the viewport edge while the heading stays on the container line. */
.cro-bestsellers__track {
  display: flex;
  gap: var(--grid-gutter, 20px);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--container-padding, 20px);
  scrollbar-width: none;
  padding-left: var(--container-padding, 20px);
  padding-right: 40px;
  margin-left: calc(-1 * var(--container-padding, 20px));
  margin-right: -40px;
}

.cro-bestsellers__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cro-bestsellers__track {
    scroll-behavior: auto;
  }
}

/* Mobile: ~1.5 cards visible so the next one peeks and invites a swipe */
.cro-bestsellers__item {
  flex: 0 0 calc(65vw - 12px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Desktop: 4 cards + ~40px peek of the 5th */
@media (min-width: 990px) {
  .cro-bestsellers__item {
    flex: 0 0 calc((100% - (3 * var(--grid-gutter, 20px)) - 40px) / 4);
  }
}

/* Chevron arrows: hidden on phones (swipe is the natural affordance there),
   shown from tablet up where there is no swipe and the scrollbar is hidden. */
.cro-bestsellers__arrow {
  display: none;
}

@media (min-width: 750px) {
  .cro-bestsellers__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--carousel-arrow-size, 40px);
    height: var(--carousel-arrow-size, 40px);
    background-color: var(--color-button-bg, #000000);
    color: var(--color-button-text, #FFFFFF);
    border: none;
    border-radius: 0;
    cursor: pointer;
    z-index: var(--layer-raised, 2);
  }

  @media (prefers-reduced-motion: no-preference) {
    .cro-bestsellers__arrow {
      transition: background-color 200ms ease;
    }
  }

  .cro-bestsellers__arrow:hover {
    background-color: var(--color-button-hover, #1A1A1A);
  }

  .cro-bestsellers__arrow[aria-disabled="true"] {
    cursor: default;
  }

  .cro-bestsellers__arrow--prev {
    left: calc(-1 * var(--carousel-arrow-size, 40px) / 2);
  }

  .cro-bestsellers__arrow--next {
    right: calc(-1 * var(--carousel-arrow-size, 40px) / 2);
  }

  .cro-bestsellers__arrow--prev svg {
    transform: rotate(180deg);
  }
}

.cro-bestsellers__arrow:focus-visible {
  outline: 2px solid var(--color-button-bg, #000000);
  outline-offset: 2px;
}

.cro-bestsellers__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg, 32px);
}

.cro-bestsellers__view-all {
  min-height: 48px;
  padding-inline: var(--spacing-xl, 48px);
  width: auto;
}
/* END_SECTION:cro-bestsellers */

/* START_SECTION:cro-frequently-bought (INDEX:5) */
.cro-fbt {
  background-color: var(--color-background, #FBF8F2);
  border-top: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
}

.cro-fbt__inner {
  padding-block: var(--spacing-2xl, 64px);
}

/* ---- Section head: gold eyebrow → serif heading → ornament (theme pattern) ---- */
.cro-fbt__head {
  text-align: center;
  margin-bottom: var(--spacing-lg, 32px);
}

.cro-fbt__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-label, 13px);
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
  margin: 0 0 var(--spacing-2xs, 8px);
}

.cro-fbt__heading {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg, 28px);
  font-weight: var(--weight-heading, 500);
  line-height: var(--leading-heading-lg, 1.2);
  color: var(--color-text-heading, #1F1913);
  margin: 0;
}

/* ---- Body: bundle strip + summary plate ---- */
.cro-fbt__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 32px);
}

.cro-fbt__bundle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Stretch, not flex-start: every card is the height of the tallest, so the cards
     read as one row of plates rather than three ragged columns of text. */
  align-items: stretch;
  gap: var(--spacing-lg, 32px);
  flex: 1 1 auto;
  min-width: 0;
}

/* Each item is a card in the theme's card language — image, title, price and link all
   live INSIDE the ivory plate, framed by the same gold hairline as a product card. */
.cro-fbt__tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-surface, #FAF6EF);
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
}

/* The whole card is the toggle — image, title and price all flip the checkbox.
   Positioned: it is the containing block for .cro-fbt__check, which is the checkbox's
   SIBLING, not a child of the plate. Without this the checkboxes escape the card
   entirely and pile up in the page's top-left corner. */
.cro-fbt__pick {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Flex children default to min-width:auto, which floors the card at the width of its
     longest word and pushes the row wider than its container on narrow desktops. */
  min-width: 0;
  cursor: pointer;
}

.cro-fbt__plate {
  position: relative;
  display: block;
  aspect-ratio: var(--card-image-ratio, 3 / 4);
  border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.22));
  transition: opacity var(--duration-normal, 250ms) var(--ease-default, ease);
}

/* The "+" that makes a row of products read as one bundle. Anchored to the plate,
   not to a separate connector element, so it stays centred on the image row no
   matter how tall the titles below run. */
.cro-fbt__tile + .cro-fbt__tile .cro-fbt__plate::before {
  content: '+';
  position: absolute;
  top: 50%;
  left: calc(-0.5 * var(--spacing-lg, 32px));
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1;
  color: var(--color-gold, #9C7A3C);
  pointer-events: none;
}

.cro-fbt__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cro-fbt__check {
  position: absolute;
  top: var(--spacing-2xs, 8px);
  left: var(--spacing-2xs, 8px);
  z-index: var(--layer-raised, 2);
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
  background-color: var(--color-background, #FBF8F2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  transition:
    background-color var(--duration-fast, 150ms) var(--ease-default, ease),
    border-color var(--duration-fast, 150ms) var(--ease-default, ease);
}

.cro-fbt__check:checked {
  background-color: var(--color-cta, #6E1D2C);
  border-color: var(--color-cta, #6E1D2C);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FBF6EC' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M2 6.2 4.8 9 10 3.2'/%3E%3C/svg%3E");
}

.cro-fbt__check:focus-visible {
  outline: 2px solid var(--color-gold, #9C7A3C);
  outline-offset: 2px;
}

/* The anchor is checked and disabled: it reads as locked-in, not as broken. */
.cro-fbt__check:disabled {
  cursor: default;
  opacity: 1;
}

/* Deselected → the plate recedes and the price greys out. :has() is the whole reason
   the checkbox lives inside the tile; browsers without it simply skip the dimming. */
.cro-fbt__tile:has(.cro-fbt__check:not(:checked)) .cro-fbt__plate {
  opacity: 0.4;
}

.cro-fbt__tile:has(.cro-fbt__check:not(:checked)) .cro-fbt__title,
.cro-fbt__tile:has(.cro-fbt__check:not(:checked)) .cro-fbt__price-current {
  color: var(--color-text-secondary, #6B6B6B);
}

.cro-fbt__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-sm, 16px);
}


/* Two lines, always — clamped like the product card's title, and the height reserved
   even for one-line titles so the variant, price and link rows stay on the same
   baseline across all three tiles instead of stepping down under the longest name. */
.cro-fbt__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2em * var(--leading-heading-sm, 1.3));
  font-family: var(--font-heading);
  font-size: var(--font-heading-sm, 18px);
  font-weight: 500;
  line-height: var(--leading-heading-sm, 1.3);
  color: var(--color-text, #26201A);
  transition: color var(--duration-fast, 150ms) var(--ease-default, ease);
}

.cro-fbt__variant {
  font-family: var(--font-body);
  font-size: var(--font-body-sm, 13px);
  color: var(--color-text-secondary, #6B6B6B);
}

/* margin-top:auto pins the price to the bottom of the card's text block, so it lands on
   the same line in every card however the titles above it break. */
.cro-fbt__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-2xs, 8px);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: auto;
  padding-top: var(--spacing-2xs, 8px);
}

.cro-fbt__price-current {
  font-weight: 600;
  color: var(--color-text, #26201A);
}

.cro-fbt__price-compare {
  font-size: var(--font-body-sm, 13px);
  color: var(--color-text-secondary, #6B6B6B);
}

/* Every card ends on the same foot rule: "View product" for companions, "this item" for
   the anchor. Identical height in both, which is what keeps the prices above them on one
   line and the bottom edges of the cards flush. */
.cro-fbt__foot {
  display: block;
  padding: var(--spacing-2xs, 8px) var(--spacing-sm, 16px);
  border-top: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.22));
  font-family: var(--font-body);
  font-size: var(--font-body-sm, 13px);
  line-height: var(--leading-body-sm, 1.5);
  color: var(--color-gold-deep, #7A5E2C);
  text-decoration: none;
}

.cro-fbt__view:hover {
  background-color: var(--color-gold-tint, rgba(156, 122, 60, 0.12));
}

.cro-fbt__foot--anchor {
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-text-secondary, #6B6B6B);
}

/* The anchor wears a second, tighter gold frame — the shopper's own product, held. */
.cro-fbt__tile--anchor {
  box-shadow: inset 0 0 0 1px var(--color-gold-line, rgba(156, 122, 60, 0.32));
}

/* ---- Summary plate ---- */
.cro-fbt__summary {
  flex: none;
  /* Hug the content. `stretch` matched the plate to the full height of the bundle
     column, leaving a tall empty pane under the button. */
  align-self: flex-start;
  padding: var(--spacing-md, 24px);
  background-color: var(--color-card-surface, #FAF6EF);
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
}

.cro-fbt__count {
  margin: 0 0 var(--spacing-xs, 12px);
  font-family: var(--font-body);
  font-size: var(--font-label, 13px);
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
}

/* Label above, figures below. Side-by-side (label | compare | amount) put three
   competing runs of text in a 300px column: "Combined total" broke over two lines and
   an Indian-format total ("Rs. 12,028.00") wrapped mid-figure. A stack cannot wrap. */
.cro-fbt__total {
  margin: 0;
  padding-bottom: var(--spacing-xs, 12px);
  border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.22));
  font-family: var(--font-body);
}

.cro-fbt__total-label {
  display: block;
  font-size: var(--font-label, 13px);
  color: var(--color-text-secondary, #6B6B6B);
}

.cro-fbt__total-figures {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-2xs, 8px);
  margin-top: var(--spacing-3xs, 4px);
  font-variant-numeric: lining-nums tabular-nums;
}

.cro-fbt__total-amount {
  font-size: var(--font-heading-md, 22px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text-heading, #1F1913);
}

.cro-fbt__total-compare {
  font-size: var(--font-body-sm, 13px);
  white-space: nowrap;
  color: var(--color-text-secondary, #6B6B6B);
}

/* Same savings language as the product card: gold-tint ground, sale-red ink. */
.cro-fbt__savings {
  display: inline-block;
  margin: var(--spacing-xs, 12px) 0 0;
  padding: 4px var(--spacing-2xs, 8px);
  background-color: var(--color-gold-tint, rgba(156, 122, 60, 0.12));
  font-family: var(--font-body);
  font-size: var(--font-body-sm, 13px);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-sale, #9A2A2A);
}

.cro-fbt__add {
  width: 100%;
  min-height: 50px;
  margin-top: var(--spacing-md, 24px);
}

.cro-fbt__error {
  margin: var(--spacing-2xs, 8px) 0 0;
  font-family: var(--font-body);
  font-size: var(--font-body-sm, 13px);
  color: var(--color-error, #C41E3A);
}

/* ---- Mobile: the bundle becomes a swipe strip, summary below ----
   Three cards cannot shrink to a phone's width: they are flex containers themselves, so
   their contents impose a min-content floor (min-width:auto) that no amount of flex-shrink
   gets under. Left as a squeezed row it overflowed the viewport and dragged the summary
   panel off-screen with it. So on phones the cards keep an honest width and the STRIP
   scrolls — the scroll container absorbs the overflow, and the page never scrolls
   sideways (the bug fixed for the carousels in f7b8556). */
@media (max-width: 749px) {
  .cro-fbt__bundle {
    gap: var(--spacing-md, 24px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--container-padding, 20px);
    scrollbar-width: none;
    padding-bottom: var(--spacing-3xs, 4px);
  }

  .cro-fbt__bundle::-webkit-scrollbar {
    display: none;
  }

  /* 42%, not 50%: the next card peeks past the edge, which is the only honest signal
     that the strip scrolls. */
  .cro-fbt__tile {
    flex: 0 0 42%;
    min-width: 150px;
    scroll-snap-align: start;
  }

  .cro-fbt__tile + .cro-fbt__tile .cro-fbt__plate::before {
    left: calc(-0.5 * var(--spacing-md, 24px));
    font-size: 20px;
  }

  .cro-fbt__title {
    font-size: var(--font-body-size, 15px);
  }

  .cro-fbt__price,
  .cro-fbt__price-current {
    font-size: var(--font-body-sm, 13px);
  }

  .cro-fbt__check {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 750px) {
  .cro-fbt__body {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-xl, 48px);
  }

  .cro-fbt__summary {
    width: 300px;
    /* Follows the shopper down the bundle on tall rows; the PDP already uses
       sticky columns, and --announcement-bar-height keeps it clear of the bar. */
    position: sticky;
    top: calc(var(--announcement-bar-height, 0px) + var(--spacing-md, 24px));
  }
}

/* Tablet: three cards AND a 300px summary on one line squeeze the cards to ~115px.
   Give the summary less and the gaps less, so the products stay the hero. Must come
   AFTER the min-width:750 block — same specificity, so source order decides. */
@media (min-width: 750px) and (max-width: 989px) {
  .cro-fbt__body,
  .cro-fbt__bundle {
    gap: var(--spacing-md, 24px);
  }

  .cro-fbt__tile + .cro-fbt__tile .cro-fbt__plate::before {
    left: calc(-0.5 * var(--spacing-md, 24px));
  }

  .cro-fbt__summary {
    width: 240px;
  }
}
/* END_SECTION:cro-frequently-bought */

/* START_SECTION:cro-shop-by-price (INDEX:7) */
.cro-price-nav {
  padding-block: var(--spacing-2xl, 64px) 0;
}

.cro-price-nav__header {
  text-align: center;
  margin-bottom: var(--spacing-lg, 32px);
}

.cro-price-nav__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-label, 13px);
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
  margin: 0 0 var(--spacing-2xs, 8px);
}

.cro-price-nav__heading {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg, 28px);
  font-weight: var(--weight-heading, 500);
  color: var(--color-text-heading, #1F1913);
  margin: 0;
}

.cro-price-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm, 16px);
}

@media (min-width: 750px) {
  .cro-price-nav__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cro-price-nav__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs, 4px);
  min-height: 132px;
  padding: var(--spacing-md, 24px);
  text-align: center;
  text-decoration: none;
  background: var(--color-card-surface, #FAF6EF);
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
  transition: border-color var(--duration-fast, 150ms) ease;
}

.cro-price-nav__tile:hover {
  border-color: var(--color-gold, #9C7A3C);
}

/* Prices never render in the serif (Design Invariant 5) — body font,
   lining/tabular numerals, weight for presence. */
.cro-price-nav__range {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text-heading, #1F1913);
  font-variant-numeric: lining-nums tabular-nums;
}

.cro-price-nav__detail {
  font-size: var(--font-body-sm, 13px);
  color: var(--color-text-secondary, #6B6B6B);
}

.cro-price-nav__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-2xs, 8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.06em);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
}

@media (prefers-reduced-motion: reduce) {
  .cro-price-nav__tile {
    transition: none;
  }
}
/* END_SECTION:cro-shop-by-price */

/* START_SECTION:footer (INDEX:8) */
/* =========================================================
     FOOTER — BASE LAYOUT
     Deep espresso panel (announcement-bar family) with a gold
     hairline crown — the heritage bookend to every page.
     ========================================================= */
  .site-footer {
    position: relative;
    background-color: #241A0F;
    /* Warm bloom under the crown so the panel has depth instead of reading as
       a flat black slab where the page ends. */
    background-image:
      radial-gradient(110% 90% at 50% 0%, rgba(194, 160, 90, 0.10) 0%, transparent 60%),
      linear-gradient(180deg, #2A1F12 0%, #1F1609 100%);
    color: #F5EFE4;
    border-top: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
    padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-lg);
  }

  .footer__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
  }

  /* =========================================================
     FOOTER — MAIN GRID
     ========================================================= */
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  /* =========================================================
     FOOTER — BRAND COLUMN
     ========================================================= */
  .footer__brand-name {
    position: relative;
    font-family: var(--font-heading);
    font-size: var(--font-heading-md);
    font-weight: var(--weight-heading, 500);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F5EFE4;
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
  }

  /* Gold hairline beneath the wordmark */
  .footer__brand-name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 1px;
    background: linear-gradient(to right, var(--color-gold-soft, #C2A05A), transparent);
  }

  .footer__brand-text {
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    font-weight: 400;
    line-height: var(--leading-body);
    color: #B3A489;
    margin: 0;
    max-width: 32ch;
  }

  .footer__contact-email {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    line-height: var(--leading-body-sm);
    color: var(--color-gold-soft, #C2A05A);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .footer__contact-email:hover,
  .footer__contact-email:focus-visible {
    border-bottom-color: currentColor;
  }

  /* =========================================================
     FOOTER — SOCIAL (inside the brand column)
     ========================================================= */
  .footer__social {
    margin-top: var(--spacing-lg);
  }

  .footer__social-heading {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--tracking-label, 0.06em);
    text-transform: uppercase;
    color: #8A7A61;
    margin: 0 0 var(--spacing-2xs) 0;
  }

  .footer__social-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-2xs);
  }

  /* Gold-ringed medallions: the icons read as a deliberate set rather than
     three loose glyphs, and the ring carries the 44px tap target for free. */
  .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
    border-radius: 50%;
    color: #C9BBA1;
    text-decoration: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .footer__social-link {
      transition:
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        background-color var(--duration-fast) ease;
    }
  }

  .footer__social-link:hover,
  .footer__social-link:focus-visible {
    color: #1F1609;
    background-color: var(--color-gold-soft, #C2A05A);
    border-color: var(--color-gold-soft, #C2A05A);
  }

  .footer__social-link svg {
    display: block;
    flex-shrink: 0;
  }

  /* Focus styles on dark background */
  .footer__social-link:focus-visible,
  .footer__link:focus-visible,
  .footer__contact-email:focus-visible {
    outline: 2px solid #F5EFE4;
    outline-offset: 2px;
  }

  /* =========================================================
     FOOTER — COLUMN HEADINGS
     ========================================================= */
  .footer__col-heading {
    font-family: var(--font-body);
    font-size: var(--font-label, 13px);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-soft, #C2A05A);
    margin: 0 0 var(--spacing-md) 0;
  }

  /* =========================================================
     FOOTER — LINK LISTS
     ========================================================= */
  .footer__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer__link-item {
    margin-bottom: var(--spacing-xs);
  }

  .footer__link-item:last-child {
    margin-bottom: 0;
  }

  .footer__link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    font-weight: 400;
    line-height: var(--leading-body-sm);
    color: #B3A489;
    text-decoration: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .footer__link {
      transition:
        color var(--duration-fast) ease,
        transform var(--duration-fast) ease;
    }
  }

  .footer__link:hover,
  .footer__link:focus-visible {
    color: #F5EFE4;
    transform: translateX(2px);
  }

  /* =========================================================
     FOOTER — NEWSLETTER FORM
     ========================================================= */
  .footer__newsletter-text {
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    line-height: var(--leading-body);
    color: #B3A489;
    margin: calc(-1 * var(--spacing-2xs)) 0 var(--spacing-sm) 0;
    max-width: 34ch;
  }

  .footer__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  /* Input and button share one bordered field so the pair reads as a single
     control, the way the header search does — two detached boxes looked unfinished. */
  .footer__newsletter-fields {
    display: flex;
    align-items: stretch;
    background-color: rgba(251, 248, 242, 0.04);
    border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.4));
    border-radius: var(--border-radius);
  }

  @media (prefers-reduced-motion: no-preference) {
    .footer__newsletter-fields {
      transition: border-color var(--duration-fast) ease;
    }
  }

  .footer__newsletter-fields:focus-within {
    border-color: var(--color-gold-soft, #C2A05A);
  }

  .footer__newsletter-input {
    flex: 1 1 auto;
    /* Without this a flex item refuses to shrink below its intrinsic width and
       the button gets pushed out of the panel on narrow phones. */
    min-width: 0;
    height: var(--tap-target-min);
    padding: 0 var(--spacing-sm);
    background-color: transparent;
    border: 0;
    color: #F5EFE4;
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    font-weight: 400;
    box-sizing: border-box;
    appearance: none;
  }

  .footer__newsletter-input::placeholder {
    color: #8A7A61;
  }

  /* The ring is inset (negative offset) because the input sits flush inside the
     group's border — a positive offset would draw the ring on top of the button. */
  .footer__newsletter-input:focus-visible,
  .footer__newsletter-submit:focus-visible {
    outline: 2px solid #F5EFE4;
    outline-offset: -2px;
  }

  .footer__newsletter-input:focus:not(:focus-visible) {
    outline: none;
  }

  .footer__newsletter-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-md);
    height: var(--tap-target-min);
    background-color: var(--color-gold, #9C7A3C);
    color: #1F1609;
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: var(--font-label, 13px);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    .footer__newsletter-submit {
      transition: background-color var(--duration-fast) ease;
    }
  }

  .footer__newsletter-submit:hover {
    background-color: var(--color-gold-soft, #C2A05A);
  }

  .footer__newsletter-note {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: var(--leading-body-sm);
    color: #8A7A61;
    margin: 0;
  }

  .footer__newsletter-success {
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    color: var(--color-gold-soft, #C2A05A);
    margin: 0;
  }

  .footer__newsletter-error {
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    color: #E8879A;
    margin: 0 0 var(--spacing-2xs) 0;
  }

  /* =========================================================
     FOOTER — BOTTOM ROW (payment marks + copyright)
     ========================================================= */
  .footer__bottom {
    margin-top: var(--spacing-xl);
  }

  .footer__bottom-separator {
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-gold-line, rgba(156, 122, 60, 0.35)) 20%,
      var(--color-gold-line, rgba(156, 122, 60, 0.35)) 80%,
      transparent
    );
    margin-bottom: var(--spacing-lg);
  }

  .footer__bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  /* The shared payment row (cro-payment-icons) is authored for cream surfaces:
     its plates already carry a white field for the brand marks, but the caption
     and plate hairline need to be re-tuned for the espresso panel. */
  .site-footer .cro-payments__row {
    justify-content: center;
  }

  .site-footer .cro-payments__heading {
    color: #8A7A61;
  }

  .site-footer .cro-payments__plate {
    border-color: rgba(245, 239, 228, 0.16);
  }

  /* Chips keep their white field on the dark panel — they sit in the same row as
     the brand plates and must belong to it, not float as ghost outlines. */
  .site-footer .cro-payments__chip {
    border-color: rgba(245, 239, 228, 0.16);
  }

  .footer__copyright {
    font-family: var(--font-body);
    font-size: var(--font-body-sm);
    font-weight: 400;
    color: #8A7A61;
    margin: 0;
    text-align: center;
  }

  /* =========================================================
     FOOTER — RESPONSIVE: TABLET (750px+)
     ========================================================= */
  @media (min-width: 750px) {
    .site-footer {
      padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-lg);
    }

    .footer__container {
      padding: 0 var(--spacing-xl);
    }

    /* Brand spans the full row above the link/newsletter pair — at this width a
       4-up grid squeezes the newsletter field down to a stub. */
    .footer__grid {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--spacing-2xl);
      row-gap: var(--spacing-xl);
    }

    .footer__col--brand {
      grid-column: 1 / -1;
    }

    .footer__bottom-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .site-footer .cro-payments__row {
      justify-content: flex-start;
    }

    .footer__copyright {
      text-align: right;
    }
  }

  /* =========================================================
     FOOTER — RESPONSIVE: DESKTOP (990px+)
     ========================================================= */
  @media (min-width: 990px) {
    .site-footer {
      padding: var(--spacing-3xl) 0 var(--spacing-xl);
    }

    .footer__container {
      padding: 0 var(--spacing-3xl);
    }

    /* Brand and newsletter get the wide tracks — they hold prose and a control;
       the two link lists only ever hold short labels. */
    .footer__grid {
      grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
      column-gap: var(--spacing-2xl);
      align-items: start;
    }

    .footer__col--brand {
      grid-column: auto;
    }
  }

  /* =========================================================
     UTILITY — VISUALLY HIDDEN (accessibility)
     ========================================================= */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:9) */
/* ===== HEADER WRAPPER =====
     Sticky positioning lives on #header-group (layout/theme.liquid) so the
     announcement bar + header pin to the top together; this wrapper is static. */
  .header-wrapper {
    display: block;
    position: relative;
    background-color: var(--color-background, #ffffff);
  }

  .header {
    display: block;
    border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
  }

  .header__inner {
    position: relative;
    max-width: var(--container-max-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--container-padding, 20px);
  }

  /* ===== UPPER PORTION =====
     Empty spacer reserving room for the centered brand. Collapses to 0 height
     in the compact state (the "slide up"); the traveling brand handles the
     visible motion. */
  .header__top {
    height: var(--header-top-height, 48px);
    transition: height 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-wrapper.header--scrolled .header__top {
    height: 0;
  }

  /* ===== TRAVELING BRAND =====
     Absolutely positioned over the inner so it can travel between the upper
     portion and the middle slot without being clipped by either layout box. */
  .header__brand {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-top-height, 48px);
    /* X-centering + scale; vertical center follows `height` above.
       Scale kept modest so an image logo never clips the short upper portion. */
    transform: translateX(-50%) scale(var(--brand-scale, 1.15));
    transform-origin: center center;
    transition:
      height 350ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Compact: drop into the middle slot (height grows to the bar) and shrink to
     the lower portion's wordmark size (scale 1 = clamped to its limits). */
  .header-wrapper.header--scrolled .header__brand {
    height: var(--header-height, 72px);
    transform: translateX(-50%) scale(1);
  }

  .header__brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text, #000000);
    text-decoration: none;
    transition: opacity var(--duration-fast, 150ms) var(--ease-default);
  }

  .header__brand-link:hover {
    opacity: 0.7;
  }

  .header__brand-link:focus-visible {
    outline: 2px solid var(--color-text, #000000);
    outline-offset: 2px;
  }

  /* Primary logo image — travels between the top center and the nav slot.
     Same intrinsic size in both states; only its position (and a subtle scale)
     changes, so the handoff with the lower image reads as a clean replace. */
  .header__brand-img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(60vw, 320px);
    /* Emblem nearly fills its square, so height-sizing works. Sized to most of
       the upper bar for presence; clamped so it still fits the nav slot when it
       travels down on scroll. */
    max-height: calc(var(--header-top-height, 48px) - 10px);
    object-fit: contain;
  }

  /* Wordmark fallback shown only when no primary logo image is uploaded. */
  .header__brand-text {
    font-family: var(--font-heading);
    font-size: var(--font-logo, 24px);
    font-weight: 500;
    letter-spacing: var(--tracking-logo, 0.12em);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text-heading, #1F1913);
  }

  /* ===== 3-COLUMN BAR (lower portion) =====
     Three equal-width columns: left nav | image logo | right nav. */
  .header__bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    min-height: var(--header-height, 72px);
  }

  .header__col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
  }

  /* Reserve symmetric horizontal space at the outer edges (desktop) so the two
     centered nav groups line up and never collide with the pinned hamburger /
     action icons that sit in those edge zones. */
  @media (min-width: 750px) {
    .header__col--start {
      padding-inline-start: var(--header-utility-width, 96px);
    }
    .header__col--end {
      padding-inline-end: var(--header-utility-width, 96px);
    }
  }

  /* ===== IMAGE LOGO (middle slot) ===== */
  .header__logo-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height, 72px);
    max-width: 100%;
    /* Crop the wordmark's transparent top/bottom padding (see .header__logo-img). */
    overflow: hidden;
    transition:
      opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header__logo-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-decoration: none;
  }

  .header__logo-img {
    display: block;
    width: auto;
    /* The secondary wordmark ("MIRAI") is a thin band centered in a padded
       2048² square. Sizing by HEIGHT would render the letters tiny, so we zoom
       the square up (--navlogo-zoom) and let the slot's overflow:hidden crop the
       empty margins — the letters land at a readable size, centered.
       Tuned for ~2048² art; nudge --navlogo-zoom if a logo's padding differs. */
    height: var(--navlogo-zoom, 200px);
    max-width: min(80vw, 360px);
    object-fit: contain;
  }

  /* Compact: the traveling brand takes over the slot, so fade the image out
     (with a slight upward drift to read as "replaced"). */
  .header-wrapper.header--scrolled .header__logo-image {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* ===== UTILITY ACTIONS (search + cart) — pinned far right ===== */
  .header__actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs, 8px);
  }

  /* ===== ICON BUTTONS ===== */
  .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text, #000000);
    border-radius: 0;
    transition: opacity var(--duration-fast, 150ms) var(--ease-default);
  }

  .icon-btn:hover {
    opacity: 0.7;
  }

  .icon-btn:focus-visible {
    outline: 2px solid var(--color-text, #000000);
    outline-offset: 2px;
  }

  .header__cart {
    position: relative;
  }

  /* ===== HAMBURGER (mobile only) — pinned far left ===== */
  .header__hamburger {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Compound selector (.header .header__hamburger) so it out-specifies base.css's
     `.icon-btn { display: inline-flex }`, which loads after this section's
     stylesheet via content_for_header and would otherwise show it on desktop. */
  @media (min-width: 750px) {
    .header .header__hamburger {
      display: none;
    }
  }

  /* ===== NAV GROUPS (desktop/tablet only) ===== */
  .header__nav {
    display: none;
    width: 100%;
  }

  @media (min-width: 750px) {
    .header__nav {
      display: block;
    }
  }

  .header__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Layout-neutral wrapper: the component needs a host element, not a box. */
  mega-menu {
    display: contents;
  }

  /* Deliberately NOT position:relative. The mega-menu panel is absolutely
     positioned with left:0/right:0 and must resolve against .header__inner
     (the full-width positioned ancestor) so it spans the header. Making the
     <li> a containing block would crush the panel to the width of one nav item
     and clip its contents. */
  .header__nav-item {
    position: static;
  }

  .header__nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height, 72px);
    padding-inline: var(--spacing-sm, 16px);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-nav, 13px);
    font-weight: 500;
    letter-spacing: var(--tracking-nav, 0.08em);
    text-transform: uppercase;
    color: var(--color-text, #26201A);
    text-decoration: none;
    transition: color var(--duration-fast, 150ms) var(--ease-default);
    white-space: nowrap;
  }

  /* Gold underline draws in from center on hover */
  .header__nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: calc(100% - 2 * var(--spacing-sm, 16px));
    height: 1px;
    background-color: var(--color-gold, #9C7A3C);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-normal, 250ms) var(--ease-default);
  }

  .header__nav-link:hover {
    color: var(--color-gold-deep, #7A5E2C);
  }

  .header__nav-link:hover::after,
  .header__nav-link[aria-expanded="true"]::after {
    transform: translateX(-50%) scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .header__nav-link::after {
      transition: none;
    }
  }

  .header__nav-link:focus-visible {
    outline: 2px solid var(--color-text, #000000);
    outline-offset: 2px;
  }

  @media (min-width: 990px) {
    .header__nav-link {
      padding-inline: var(--spacing-md, 24px);
    }
  }

  /* ===== MEGA MENU LINK STYLES ===== */
  .mega-menu__inner {
    padding: var(--spacing-xl, 48px) var(--spacing-3xl, 80px);
    max-height: 400px;
    overflow: hidden;
  }

  .mega-menu__columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-xl, 48px);
  }

  .mega-menu__column {
    min-width: 0;
  }

  .mega-menu__column-heading {
    position: relative;
    font-family: var(--font-heading);
    font-size: var(--font-heading-sm, 18px);
    font-weight: 500;
    letter-spacing: var(--tracking-heading-sm, 0.01em);
    color: var(--color-text-heading, #1F1913);
    margin-bottom: var(--spacing-sm, 16px);
    padding-bottom: var(--spacing-2xs, 8px);
    line-height: var(--leading-heading-sm, 1.3);
    border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
  }

  .mega-menu__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mega-menu__link {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-body-size, 15px);
    font-weight: 400;
    color: var(--color-text, #000000);
    line-height: 2.0;
    text-decoration: none;
    transition: color var(--duration-fast, 150ms) var(--ease-default);
  }

  .mega-menu__link:hover {
    color: var(--color-gold-deep, #7A5E2C);
  }

  .mega-menu__link:focus-visible {
    outline: 2px solid var(--color-text, #000000);
    outline-offset: 2px;
  }

  /* ===== REDUCED MOTION ===== */
  @media (prefers-reduced-motion: reduce) {
    .header__top,
    .header__brand,
    .header__logo-image {
      transition: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:main-404 (INDEX:10) */
.not-found__inner {
  text-align: center;
  padding-block: var(--spacing-3xl) var(--spacing-4xl);
}
.not-found__code {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg);
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  margin: 0 0 var(--spacing-sm);
}
.not-found__title {
  font-family: var(--font-heading);
  font-size: var(--font-heading-md);
  margin: 0 0 var(--spacing-sm);
}
.not-found__body {
  color: var(--color-text-secondary);
  margin: 0 auto var(--spacing-lg);
  max-width: 36ch;
}
.not-found__cta {
  display: inline-flex;
  width: auto;
  padding-inline: var(--spacing-xl);
}
/* END_SECTION:main-404 */

/* START_SECTION:main-cart (INDEX:11) */
/* Warm ivory canvas carries the ethnic-luxury system onto the cart page. */
.cart-page {
  background-color: #FBF8F2;
}
.cart-page__inner {
  padding-block: calc(var(--spacing-lg) * 2) var(--spacing-3xl);
}
/* Centered editorial head: serif title + gold flourish */
.cart-page__head {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}
.cart-page__title {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-heading-lg, 0.03em);
  margin: 0;
}
.cart-page__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}
.cart-page__ornament-line {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(to right, var(--color-gold, #9C7A3C), transparent);
}
.cart-page__ornament-line:last-child {
  background: linear-gradient(to left, var(--color-gold, #9C7A3C), transparent);
}
.cart-page__ornament-gem {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--color-gold, #9C7A3C);
  transform: rotate(45deg);
  flex: none;
}
.cart-page__empty {
  text-align: center;
  padding-block: var(--spacing-2xl);
}
.cart-page__empty-title {
  font-family: var(--font-heading);
  font-size: var(--font-heading-md);
  margin: 0 0 var(--spacing-2xs);
}
.cart-page__empty-body {
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg);
}
.cart-page__empty-cta {
  display: inline-flex;
  width: auto;
  padding-inline: var(--spacing-xl);
}
.cart-page__form {
  max-width: 900px;
  margin-inline: auto;
}
.cart-page__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
}
.cart-page__item {
  display: flex;
  gap: var(--spacing-md);
  padding-block: var(--spacing-md);
  border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.22));
}
/* Ivory plate + hairline gold frame on the thumbnail */
.cart-page__item-image-link {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  background-color: var(--color-card-surface, #FAF6EF);
  box-shadow: inset 0 0 0 1px var(--color-gold-line, rgba(156, 122, 60, 0.32));
}
.cart-page__item-image {
  display: block;
  width: 100px;
  height: auto;
  object-fit: cover;
}
.cart-page__item-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}
.cart-page__item-title {
  font-family: var(--font-heading);
  font-size: var(--font-heading-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.cart-page__item-title:hover {
  color: var(--color-gold-deep, #7A5E2C);
}
.cart-page__item-variant {
  color: var(--color-text-secondary);
  margin: 0;
}
.cart-page__item-price {
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
}
.cart-page__item-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-2xs);
}
.cart-page__qty-label {
  font-size: var(--font-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cart-page__qty-input {
  width: 64px;
  height: 40px;
  padding-inline: var(--spacing-2xs);
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.4));
  background: var(--color-background);
  color: var(--color-text);
  text-align: center;
}
.cart-page__qty-input:focus-visible {
  outline: 2px solid var(--color-gold, #9C7A3C);
  outline-offset: -1px;
}
.cart-page__remove:hover {
  color: var(--color-gold-deep, #7A5E2C);
}
.cart-page__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
/* Summary as a framed ivory card */
.cart-page__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 380px;
  margin-left: auto;
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-card-surface, #FAF6EF);
  border: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
}
.cart-page__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-heading);
  font-size: var(--font-heading-sm);
}
.cart-page__subtotal-price {
  /* Body font with lining/tabular figures so the amount reads as a clean,
     evenly-aligned price — the serif heading font renders oldstyle numerals
     that bounce up and down. Matches the PDP .pdp-price__current treatment. */
  font-family: var(--font-body);
  font-size: var(--font-heading-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cart-page__tax-note {
  color: var(--color-text-secondary);
  font-size: var(--font-body-sm);
  margin: 0;
}
/* Gilded checkout CTA, consistent with the PDP / drawer */
.cart-page__checkout {
  box-shadow: inset 0 0 0 3px var(--color-cta, #6E1D2C),
    inset 0 0 0 4px var(--color-gold-soft, #C2A05A);
  transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.cart-page__checkout:hover {
  box-shadow: inset 0 0 0 3px var(--color-cta-hover, #591724),
    inset 0 0 0 4px var(--color-gold-soft, #C2A05A);
}
.cart-page__continue {
  text-align: center;
  color: var(--color-gold-deep, #7A5E2C);
}
.cart-page__continue:hover {
  color: var(--color-gold-deep, #7A5E2C);
}
@media (min-width: 750px) {
  .cart-page__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cart-page__item-title,
  .cart-page__checkout {
    transition: none;
  }
}
/* END_SECTION:main-cart */

/* START_SECTION:main-page (INDEX:13) */
.page__inner {
  padding-block: var(--spacing-2xl) var(--spacing-3xl);
  max-width: 72ch;
}
.page__title {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg);
  margin: 0 0 var(--spacing-lg);
}
.page__body {
  color: var(--color-text);
  line-height: 1.7;
}
.page__body > * + * {
  margin-top: var(--spacing-md);
}
.page__body a {
  color: var(--color-text);
  text-decoration: underline;
}
/* END_SECTION:main-page */

/* START_SECTION:section-virtual-tryon (INDEX:32) */
/* Mirrors the PDP reviews section (.section-reviews) so the try-on module reads
   as part of the same family: centered header, gold eyebrow, light serif heading
   with a hairline gold underline.

   The section spans full width on the SAME warm ivory canvas as .main-product
   (#FBF8F2 in component-product.css) instead of the body's stark white — so it
   reads as a continuation of the product page, with no abrupt cream→white edge
   above it. A single delicate gold hairline closes the section at the bottom
   (the product area already supplies the rule above), framing the module as
   intentional rhythm rather than a hard colour break. */
.section-virtual-tryon {
  background-color: #FBF8F2;
  border-bottom: 1px solid var(--color-gold-line, rgba(156, 122, 60, 0.32));
  text-align: center;
}

.tryon__inner {
  padding-top: clamp(var(--spacing-3xl, 80px), 10vw, var(--spacing-4xl, 120px));
  padding-bottom: clamp(var(--spacing-3xl, 80px), 10vw, var(--spacing-4xl, 120px));
}

.tryon__header {
  max-width: 640px;
  margin-inline: auto;
}

.tryon__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E2C);
  margin: 0 0 var(--spacing-2xs, 8px);
}

.tryon__heading {
  font-family: var(--font-heading);
  font-size: var(--font-heading-lg);
  font-weight: 300;
  line-height: var(--leading-heading-lg, 1.2);
  letter-spacing: var(--tracking-heading-lg, 0.03em);
  color: var(--color-text, #000000);
  margin: 0;
}

/* Subtle gold hairline under the heading — same motif as .product-reviews__heading. */
.tryon__heading::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin: var(--spacing-sm) auto 0;
  background: var(--color-gold, #9C7A3C);
}

.tryon__description {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--color-text-secondary, #6B6B6B);
  margin: var(--spacing-md) auto 0;
  max-width: 52ch;
}

.tryon__description > :first-child { margin-top: 0; }
.tryon__description > :last-child { margin-bottom: 0; }

.tryon__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

.tryon__placeholder {
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--color-gold-deep, #7A5E2C);
  border: 1px dashed var(--color-gold-line, rgba(156, 122, 60, 0.32));
  padding: var(--spacing-md) var(--spacing-lg);
  /* Match the description's measure so the box edges align with the copy above
     instead of stretching wider; the hint text wraps within it. */
  max-width: 52ch;
  margin: 0 auto;
}

@media (min-width: 990px) {
  .tryon__heading {
    font-size: var(--font-heading-lg-desktop, 36px);
  }
}
/* END_SECTION:section-virtual-tryon */