/* ==========================================================================
   STOREFRONT — design system
   Mobile-first. Two breakpoints only: 640px (grids) and 900px (layout).
   ========================================================================== */

:root {
  /* Rivayat BLACK & GOLD palette. The whole site is dark now, so the meanings
     are flipped: --pearl is the dark PAGE, and --charcoal (kept for its old
     name so nothing breaks) is now a LIGHT ink used for text on that dark page.
     Every rule already written against these names picks up the new look. */
  --pearl:      #12100E;   /* Page — near-black */
  --pearl-2:    #1A1712;   /* Quiet band — slightly lighter black */
  --charcoal:   #EDE7DA;   /* "Ink": light text/cards on the dark page */
  --charcoal-2: #C9C2B2;
  --grey:       #9A927E;   /* Secondary text — muted gold-grey */
  --gold:       #C9A24A;   /* Gold — rings, rules, buttons, accents */
  --gold-ink:   #D9B968;   /* Gold as TEXT on dark — brighter for contrast */
  --gold-wash:  #221C14;   /* Image/placeholder backgrounds — dark gold-black */
  --line:       #2E2820;   /* Hairlines on the dark page */
  --red:        #C46A6A;   /* Errors — softened so it reads on black */

  /* Reserved accents (header/hero on the home page). */
  --maroon:     #1A1712;
  --maroon-d:   #12100E;

  --display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --card:       #1A1712;   /* content boxes on the dark page */

  --gutter: 18px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--charcoal);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

button { font: inherit; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.section__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
}

.section__link { font-size: 14px; color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

.section { padding: 46px 0; }

.section--band { background: var(--pearl-2); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pearl);
  color: var(--charcoal);
  box-shadow: 0 1px 0 var(--line);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Only added on the home page, where the header sits on top of the photo
   until the visitor scrolls past it. Every other page is never given this
   class, so it is always the plain solid header above — safe by default.
   Position never changes here (still normal sticky flow) — only colour
   does. The hero is what moves, pulling itself up underneath this header
   via .hero--under-header below, so there is no risk of the header
   overlapping the announcement strip that sits above it. */
.header--overlay {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.header--overlay.is-solid {
  background: var(--pearl);
  color: var(--charcoal);
  box-shadow: 0 1px 0 var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--header-h);
  padding: 10px 0;
}

.header__brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.header__brandName {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;   /* optically re-centres letter-spaced caps */
}

.header__brandSub {
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  margin-top: 4px;
  opacity: 0.85;
}

.header__nav { display: none; }

.header__actions { display: flex; align-items: center; gap: 2px; }

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.iconbtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.iconbtn__count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--charcoal);
  color: var(--pearl);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

/* Announcement strip — a real offer, not decoration. */
.strip {
  background: var(--charcoal);
  color: var(--pearl);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding: 7px 12px;
}

/* --- Search overlay -------------------------------------------------------- */

.search {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--pearl);
  padding: 20px var(--gutter);
}

.search__form { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--charcoal); padding-bottom: 10px; }

.search__input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--display);
  font-size: 24px;
  color: inherit;
}

.search__input:focus { outline: none; }

.search__hint { margin: 16px 0 8px; font-size: 13px; color: var(--grey); }

.search__terms { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Mobile menu ----------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: min(84vw, 320px);
  background: var(--pearl);
  padding: 18px var(--gutter) 28px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.26s ease;
}

.menu.is-open { transform: none; }

.menu__link {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  text-decoration: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--pearl-2);
}

/* The header overlays this photo on the home page, so the top of the image
   sits behind it rather than being pushed down. */
.hero--under-header { margin-top: calc(-1 * var(--header-h)); }

/*
 * Sized by ASPECT RATIO, not by viewport height.
 *
 * The old `height: 82vh` forced a wide photo into a tall portrait box, so
 * the browser had to blow it up around 3x to fill — which is what made it
 * look soft. Holding a landscape ratio close to the photo's own means the
 * browser scales it DOWN instead of up, and it stays sharp.
 */
.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% center;   /* keeps the model in frame when cropped */
  display: block;
  background: var(--pearl-2);
}

@media (min-width: 560px) { .hero__img { aspect-ratio: 16 / 9; } }
@media (min-width: 900px) { .hero__img { aspect-ratio: 1.9 / 1; object-position: center; } }

.hero__cap { text-align: center; padding: 26px var(--gutter) 34px; background: var(--pearl); }

.hero__rule { width: 46px; height: 1px; background: var(--gold); margin: 0 auto 14px; }

.hero__welcome {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--gold-ink);
  margin-bottom: 10px;
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.14;
  letter-spacing: 0.02em;
}

.hero__text { margin: 12px auto 20px; max-width: 40ch; font-size: 14.5px; color: var(--charcoal-2); }

@media (min-width: 640px) {
  .hero__cap { padding: 34px var(--gutter) 44px; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--pearl);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn:hover { background: transparent; color: var(--charcoal); }

.btn--light { background: var(--gold); border-color: var(--gold); color: #12100E; }
.btn--light:hover { background: var(--pearl); color: var(--charcoal); border-color: var(--pearl); }

.btn--outline { background: transparent; color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: var(--pearl); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: #12100E; }
.btn--gold:hover { background: transparent; color: var(--gold-ink); border-color: var(--gold-ink); }

.btn--full { width: 100%; }
.btn--sm { padding: 9px 16px; font-size: 12.5px; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   CATEGORY INDEX — a jeweller's catalogue index, not photo bubbles
   ========================================================================== */

/* Category tiles — a photo, a name, a count. Replaces the old text list. */
.cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cat {
  display: block;
  border: 1px solid var(--line);
  background: var(--pearl);
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.cat:hover { border-color: var(--gold); transform: translateY(-2px); }

.cat__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--gold-wash);
}

.cat__name {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cat__meta { display: block; color: var(--grey); font-size: 11.5px; margin-top: 2px; }

@media (min-width: 640px) { .cats { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .cats { grid-template-columns: repeat(5, 1fr); } }

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

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 12px;
}

.card { position: relative; }

.card__link { text-decoration: none; display: block; }

.card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--gold-wash);
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card__link:hover .card__img { transform: scale(1.035); }

.card__flag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background: var(--charcoal);
  color: var(--pearl);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.card__flag--out { background: var(--pearl); color: var(--grey); border: 1px solid var(--line); }

.card__tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(252,251,248,0.92);
  color: var(--charcoal);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(30,70,54,0.12);
  position: relative;
}

.card__tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.card__quick:active { transform: scale(0.88); }

/*
 * Stays 34px to the eye — a bigger white box would sit heavily on the photo.
 * This invisible pad extends the tap area to 46px so a fingertip still lands.
 */
.card__heart::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.card__heart.is-saved svg { fill: var(--gold); stroke: var(--gold-ink); }

.card__body { padding-top: 10px; }

.card__name {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 4px;
  /* Two lines max, so the grid stays even. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__price { font-size: 15px; }
.card__was { font-size: 13px; color: var(--grey); text-decoration: line-through; }
.card__off { font-size: 12px; color: var(--gold-ink); }

.card__rating { font-size: 12.5px; color: var(--grey); margin-top: 3px; }
.card__stars { color: var(--gold); letter-spacing: 1px; }

/* ==========================================================================
   SHOP: filters
   ========================================================================== */

.shophead { padding: 26px 0 16px; }

.shophead__title { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 30px; }
.shophead__count { margin: 0; font-size: 14px; color: var(--grey); }

.shopbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 10px 0;
  background: var(--pearl);
  border-bottom: 1px solid var(--line);
}

.shopbar .btn { flex: 1; }

.shopbar__select {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: var(--pearl);
  color: inherit;
  font-size: 16px;
}

.filters { display: none; }

/* When the mobile Filter button opens it, .drawer is added by shop.js
   and these turn it into a scrolling left-hand panel. */
.filters.drawer {
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  overflow-y: auto;
}

.filters.drawer .drawer__head { margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); }
.filters.drawer #filtersScroll { padding-bottom: 30px; }

.filters__group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filters__group:last-of-type { border-bottom: 0; }

.filters__title { margin: 0 0 11px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

.check { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--gold-ink); }

.chipset { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pearl);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.chip.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--pearl); }

.range { display: flex; align-items: center; gap: 9px; }
.range input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--pearl);
  color: inherit;
  font: inherit;
  font-size: 16px;
}

/* Active filter summary — always visible, always removable. */
.applied { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 0 0; }

.applied__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--line);
  background: var(--gold-wash);
  font-size: 13px;
}

.applied__x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--grey); }

/* ==========================================================================
   DRAWER (cart) + SHEET (filters on mobile)
   ========================================================================== */

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(26,24,28,0.5); }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(94vw, 420px);
  height: 100dvh;
  background: var(--pearl);
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.drawer.is-open { transform: none; }

.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer--left.is-open { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 12px 15px 18px;
  border-bottom: 1px solid var(--line);
}

.drawer__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 21px; }

.drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px; }

.drawer__foot { border-top: 1px solid var(--line); padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }

/* Free-delivery progress — your Rs. 5,000 rule, made visible. */
.ship { margin-bottom: 14px; }
.ship__text { margin: 0 0 7px; font-size: 13.5px; }
.ship__text strong { color: var(--gold-ink); }
.ship__track { height: 2px; background: var(--line); }
.ship__fill { height: 2px; background: var(--gold); transition: width 0.3s ease; }

.lines { display: grid; }

.line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line:first-child { padding-top: 0; }

.line__img { width: 66px; height: 84px; object-fit: cover; background: var(--gold-wash); flex: 0 0 auto; }
.line__body { flex: 1; min-width: 0; }
.line__name { font-family: var(--display); font-size: 16px; margin: 0 0 2px; }
.line__meta { font-size: 12.5px; color: var(--grey); margin: 0 0 8px; }
.line__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.line__price { font-size: 14.5px; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.stepper button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; }
.stepper button:disabled { color: var(--line); cursor: not-allowed; }
.stepper span { min-width: 26px; text-align: center; font-size: 14px; }

.line__remove { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--grey); text-decoration: underline; cursor: pointer; }

.totals { display: grid; gap: 5px; margin-bottom: 14px; }
.totals__row { display: flex; justify-content: space-between; font-size: 14.5px; }
.totals__row--sum { padding-top: 9px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 19px; }

/* ==========================================================================
   STATES
   ========================================================================== */

.empty { padding: 52px 20px; text-align: center; }
.empty__title { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 22px; }
.empty__text { margin: 0 0 18px; color: var(--grey); font-size: 14.5px; }

/* Loading placeholders keep the layout still while data arrives. */
.ghost { background: var(--pearl-2); animation: pulse 1.3s ease-in-out infinite; }
.ghost--card { aspect-ratio: 3 / 4; }
.ghost--line { height: 12px; margin-top: 9px; }

@keyframes pulse { 50% { opacity: 0.55; } }

.more { display: flex; justify-content: center; padding: 32px 0 8px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 95;
  transform: translateX(-50%);
  max-width: 92vw;
  padding: 12px 20px;
  background: var(--charcoal);
  color: var(--pearl);
  font-size: 14px;
}

.toast--error { background: var(--red); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer { background: #0C0A08; color: #9A927E; margin-top: 56px; padding: 42px 0 30px; border-top: 1px solid var(--line); }

.footer__brand { font-family: var(--display); font-size: 24px; letter-spacing: 0.16em; color: var(--gold); }
.footer__text { max-width: 34ch; font-size: 14px; margin: 10px 0 24px; }

.footer__cols { display: grid; gap: 26px; }
.footer__title { margin: 0 0 9px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.footer__link { display: block; padding: 5px 0; font-size: 14px; color: #B8AE97; }
.footer__link:hover { color: var(--pearl); }

.footer__note { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 12.5px; }

/* ==========================================================================
   640px — roomier grids
   ========================================================================== */

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .hero__cap { padding-bottom: 40px; }
}

/* ==========================================================================
   900px — desktop layout
   ========================================================================== */

@media (min-width: 900px) {
  :root { --gutter: 30px; --header-h: 84px; }

  .header__bar { padding: 14px 0; gap: 16px; }

  /* No hamburger on desktop — the full nav is visible instead. */
  .header__menuBtn { display: none; }

  /* Brand no longer stretches; it sits at the left at its natural width so
     the three columns line up: brand | nav | actions. */
  .header__brand { flex: 0 0 auto; align-items: flex-start; }
  .header__brandName { font-size: 26px; }
  .header__brandSub { align-self: flex-start; }

  /* The nav takes the middle and centres its links. */
  .header__nav {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 30px;
  }

  .header__navLink {
    font-size: 14px;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
  }

  .header__navLink:hover,
  .header__navLink.is-on { border-bottom-color: var(--gold); }

  .section { padding: 66px 0; }
  .section__title { font-size: 34px; }

  .grid { grid-template-columns: repeat(4, 1fr); gap: 40px 22px; }

  .cat__name { font-size: 14px; }

  /* Shop becomes sidebar + grid. */
  .shoplayout { display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start; }

  .filters { display: block; position: sticky; top: calc(var(--header-h) + 22px); }

  .shopbar { position: static; border-bottom: 0; padding: 0 0 18px; justify-content: flex-end; }
  .shopbar__filterBtn { display: none; }
  .shopbar__select { flex: 0 0 auto; min-width: 210px; }

  .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   Sits above everything except the drawers, on every page.
   ========================================================================== */

.wafloat {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 55;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  box-shadow: 0 4px 16px rgba(26, 24, 28, 0.28);
  transition: transform 0.2s ease;
}

.wafloat:hover { transform: scale(1.06); }
.wafloat svg { width: 27px; height: 27px; fill: currentColor; stroke: none; }

/* On the product page the sticky Add-to-cart bar owns the bottom of the
   screen, so the button steps up out of its way. */
body.has-stickybar .wafloat { bottom: calc(78px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   SIMPLE CONTENT PAGES (contact, policies, account, tracking)
   ========================================================================== */

.page { max-width: 760px; margin: 0 auto; padding: 34px 0 60px; }

.page__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.1;
}

.page__lead { margin: 0 0 26px; color: var(--grey); font-size: 15px; }

.prose { font-size: 15px; line-height: 1.75; color: var(--charcoal-2); }
.prose p { margin: 0 0 14px; }

.cardbox {
  border: 1px solid var(--line);
  background: var(--card, #fff);
  padding: 20px;
  margin-bottom: 16px;
}

.cardbox__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
}

.linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 15px;
}

.linkrow:last-child { border-bottom: 0; }
.linkrow span:last-child { color: var(--grey); }

.tabsrow { display: flex; gap: 8px; margin-bottom: 22px; }

.tabbtn {
  flex: 1;
  padding: 11px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--grey);
  font-size: 14.5px;
  cursor: pointer;
}

.tabbtn.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--pearl); }

.orderbox { border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; }
.orderbox__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.orderbox__num { font-family: var(--display); font-size: 19px; }
.orderbox__meta { font-size: 13px; color: var(--grey); margin: 4px 0 10px; }
.orderbox__items { font-size: 14px; }

.steps { display: flex; gap: 4px; margin: 14px 0 0; }
.stepdot { flex: 1; text-align: center; font-size: 11px; color: var(--grey); }
.stepdot i { display: block; height: 3px; background: var(--line); margin-bottom: 6px; }
.stepdot.done i { background: var(--gold); }
.stepdot.done { color: var(--gold-ink); }

/* ==========================================================================
   SPECIAL OFFER BAND
   Charcoal so it cuts through the pearl page without shouting.
   ========================================================================== */

.offer {
  position: relative;
  display: block;
  background: var(--maroon);   /* the one place maroon appears as a surface */
  color: var(--pearl);
  overflow: hidden;
}

.offer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

.offer__inner {
  position: relative;
  padding: 44px var(--gutter) 48px;
  text-align: center;
}

.offer__clock {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.offer__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 8vw, 46px);
  line-height: 1.08;
}

.offer__text { margin: 12px auto 22px; max-width: 42ch; font-size: 15px; color: #E7D2D5; }

/* ==========================================================================
   BULK DEALS
   ========================================================================== */

/* Small line on the product card. */
.card__deal {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--gold-ink);
}

/* The chooser on the product page. Tapping a row sets the quantity. */
.deal { margin-top: 26px; border: 1px solid var(--gold); }

.deal__title {
  margin: 0;
  padding: 11px 14px;
  background: var(--gold-wash);
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.deal__rows { display: grid; }

.deal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--pearl);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.deal__row:hover { background: var(--pearl); }

.deal__row.is-on {
  background: var(--charcoal);
  color: var(--pearl);
}

.deal__row.is-on .deal__price small,
.deal__row.is-on .deal__save { color: var(--gold); }

.deal__save {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--gold-ink);
  margin-top: 2px;
}

.deal__price { text-align: right; font-size: 16px; white-space: nowrap; }
.deal__price small { display: block; font-size: 12px; color: var(--grey); margin-top: 2px; }

.deal__live {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--charcoal-2);
}

/* In the cart drawer. */
.line__deal { margin: 0 0 8px; font-size: 12px; color: var(--gold-ink); }

.totals__row--save { color: var(--gold-ink); }

/* A long product name, email or tracking number should wrap rather than
   push the layout sideways on a narrow phone. */
body, .card__name, .row__name, .line__name, .prose, .page, td, th {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   GRID / LIST VIEW TOGGLE
   ========================================================================== */

.viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

.viewtoggle__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 0;
  background: var(--pearl);
  color: var(--grey);
  cursor: pointer;
  padding: 0;
}

.viewtoggle__btn + .viewtoggle__btn { border-left: 1px solid var(--line); }
.viewtoggle__btn svg { width: 17px; height: 17px; fill: currentColor; }
.viewtoggle__btn.is-on { background: var(--charcoal); color: var(--pearl); }

/* --------------------------------------------------------------------------
   LIST VIEW — one product per row: photo left, details right.
   Only changes layout; the same card markup is reused.
   -------------------------------------------------------------------------- */

.grid--list { grid-template-columns: 1fr !important; gap: 14px !important; }

.grid--list .card { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
.grid--list .card__frame { aspect-ratio: 1; }
.grid--list .card__body { padding-top: 0; }
.grid--list .card__name { font-size: 18px; }

/* The wishlist heart and quick-view button sit over the photo, so keep them
   pinned to that first column in list view. */
.grid--list .card__frame { position: relative; }

@media (min-width: 560px) {
  .grid--list .card { grid-template-columns: 160px 1fr; gap: 20px; }
}

/* ==========================================================================
   QUICK VIEW POPUP
   Opens from the eye icon on a product card. Photo + buy options without
   leaving the shop grid. Full page is one tap away for 360° and reviews.
   ========================================================================== */

.quick {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.quick.is-open { display: block; }

.quick__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 49, 37, 0.5);
  animation: quickFade 0.25s ease;
}

@keyframes quickFade { from { opacity: 0; } to { opacity: 1; } }

.quick__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--pearl);
  border-radius: 16px 16px 0 0;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  animation: quickUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes quickUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.quick__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.quick__close svg { width: 20px; height: 20px; fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-linecap: round; }

.quick__loading { padding: 60px 0; text-align: center; color: var(--grey); }

.quick__media {
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gold-wash);
  margin-bottom: 16px;
}

.quick__media img { width: 100%; height: 100%; object-fit: cover; }

.quick__name { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; }

.quick__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.quick__price { font-size: 22px; color: var(--charcoal); }
.quick__was { font-size: 14px; color: var(--grey); text-decoration: line-through; }
.quick__off { font-size: 12px; color: var(--gold-ink); border: 1px solid var(--gold); padding: 1px 8px; }

.quick__group { margin-bottom: 16px; }
.quick__label { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.quick__opts { display: flex; flex-wrap: wrap; gap: 8px; }

.quick__opt {
  min-width: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--pearl);
  color: inherit;
  font-size: 14.5px;
  cursor: pointer;
  border-radius: 6px;
}

.quick__opt.is-on { border-color: var(--charcoal); background: var(--charcoal); color: var(--pearl); }

.quick__opt--photo { padding: 4px; width: 52px; height: 52px; }
.quick__opt--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.quick__opt--photo.is-on { box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); }

.quick__opt.is-out { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }

.quick__err { margin: 0 0 12px; font-size: 13px; color: var(--red); }

.quick__full {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--gold-ink);
  border-bottom: 1px solid transparent;
}

.quick__full:hover { border-bottom-color: var(--gold); }

/* On a wider screen, photo and info sit side by side. */
@media (min-width: 620px) {
  .quick__panel { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 16px; }
  @keyframes quickUp { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
  .quick__body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .quick__media { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .quick__scrim, .quick__panel { animation: none; }
}

/* ==========================================================================
   CATEGORY CIRCLES — round photos, Instagram-highlight style
   ========================================================================== */

.catcircles { padding: 22px 0 8px; background: var(--pearl); }

.catcircles__row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.catcircles__row::-webkit-scrollbar { display: none; }

.circle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 76px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* The gold ring around each photo. */
.circle__ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold), #E8D9A8);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.circle__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;         /* force a square so nothing stretches */
  display: block;
  border: 2px solid var(--pearl);
  background: var(--gold-wash);
}

.circle__all {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--pearl);
  background: #221C14;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 18px;
}

.circle__name {
  font-size: 11.5px;
  color: var(--grey);
  text-align: center;
  line-height: 1.2;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chosen circle: darker ring + bold name. */
.circle.is-on .circle__ring { transform: scale(1.05); background: var(--charcoal); }
.circle.is-on .circle__name { color: var(--charcoal); font-weight: 500; }

.circle:active .circle__ring { transform: scale(0.94); }

/* Centre the "Our Collection" title on the front page. */
.section__head--center { justify-content: center; text-align: center; }