/* ==========================================================================
   SRI BALAAJI JEWELS & GEMS — components.css
   Minimal premium jewellery retail. No hard borders, no offset shadows,
   no ornament under running text. Air, hairlines and one accent.
   ========================================================================== */

/* ==========================================================================
   1. ANNOUNCEMENT BAR + RATE STRIP
   ========================================================================== */

.announce {
  background: linear-gradient(90deg, var(--gold) 0%, var(--accent-lt) 42%, var(--gold) 100%);
  color: var(--ink);
  font-weight: 500;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: 8px var(--s1);
}
.announce a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.announce a:hover { color: var(--maroon-dk); }

/* The rate strip: quiet, informational, sits under the announcement bar.
   A jeweller's customer wants the day's rate; it does not need to shout. */
.ratestrip {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ratestrip__inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  font-size: .76rem;
}
.ratestrip__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dk);
  white-space: nowrap;
}
.ratestrip__label::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.ratestrip__list {
  display: flex;
  align-items: center;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  padding-block: 6px;
}
.ratestrip__list::-webkit-scrollbar { display: none; }
.ratestrip__i { display: inline-flex; align-items: baseline; gap: 7px; }
.ratestrip__k { color: var(--muted); font-size: .72rem; }
.ratestrip__v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ratestrip__up   { color: var(--ok); font-size: .68rem; }
.ratestrip__down { color: var(--danger); font-size: .68rem; }
.ratestrip__note { margin-left: auto; flex: none; color: var(--faint); font-size: .7rem; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,253,247,.94);
  backdrop-filter: saturate(170%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__bar {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  gap: var(--s2);
  min-height: 74px;
}

/* --- Wordmark --- */
.brand { display: inline-flex; align-items: center; gap: var(--s0); text-decoration: none; }
.brand:hover { text-decoration: none; }

.brand__mark {
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--maroon);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 3px;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--display);
  font-size: 1.44rem;
  font-weight: 600;
  color: var(--maroon);
  letter-spacing: .012em;
  white-space: nowrap;
}
.brand__sub {
  font-size: .53rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}
.brand__kn { font-family: var(--kannada); font-size: .64rem; color: var(--faint); margin-top: 1px; }

/* --- Nav --- */
.nav { display: flex; justify-content: center; }
.nav__list { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--body);
  text-decoration: none;
  padding: 8px 1px;
  position: relative;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-mid);
}
.nav__link:hover { color: var(--accent); text-decoration: none; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); }

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

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--body);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--cream); color: var(--accent); text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.icon-btn__count {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1;
}
.icon-btn__count[hidden] { display: none; }

.nav-toggle { display: none; }

/* --- Drawer ---
   The panel slides inside a viewport-sized shell with `overflow: hidden`,
   rather than being translated out past the right edge of the document. A
   fixed element translated off-screen still enlarges the scrollable area —
   it stretched a 390px phone page to 1773px — because its containing block
   is the viewport, so no clip on <body> can reach it. Clipping it inside its
   own shell removes the phantom area at the source. */
.offcanvas {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* the scrim underneath takes the backdrop clicks */
  z-index: 90;
}
.offcanvas > * { pointer-events: auto; }

.drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  background: var(--white);
  z-index: 90;
  transform: translateX(101%);
  /* visibility, not just the transform: an off-screen panel that is still
     `visible` keeps its links in the tab order, so a keyboard user tabs into
     a menu they cannot see. The delay lets the slide finish before it hides. */
  visibility: hidden;
  transition: transform var(--t-mid), visibility 0s linear var(--t-mid);
  overflow-y: auto;
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--t-mid), visibility 0s;
}
.drawer__link {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: var(--s0) 0;
  border-bottom: 1px solid var(--line);
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--accent); text-decoration: none; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(37,28,12,.44);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid);
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   3. BUTTONS — outline is the default, solid is reserved for the one
   primary action on a page. This is what keeps the page calm.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 13px var(--s3);
  background: transparent;
  color: var(--accent-dk);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--ink); text-decoration: none; box-shadow: var(--glow); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--solid { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--ink); font-weight: 600; box-shadow: var(--glow); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 8px 26px rgba(201,138,10,.4); }

.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink:hover { background: #000; border-color: #000; color: #fff; }

.btn--gold { background: transparent; color: var(--gold-dk); border-color: var(--gold-lt); }
.btn--gold:hover { background: var(--gold-pale); border-color: var(--gold); color: var(--gold-dk); }

.btn--quiet { border-color: var(--line-2); color: var(--body); }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--wa { background: #128C4A; border-color: #128C4A; color: #fff; }
.btn--wa:hover { background: #0E6F3B; border-color: #0E6F3B; color: #fff; }

.btn--onDark { border-color: rgba(235,203,124,.55); color: var(--accent-glow); }
.btn--onDark:hover { background: var(--accent-glow); border-color: var(--accent-glow); color: var(--ink); }

.btn--sm { min-height: 40px; padding: 9px var(--s2); font-size: .7rem; letter-spacing: .13em; }
.btn--lg { min-height: 54px; padding: 16px var(--s4); }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Understated text link with a hairline underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.tlink:hover { color: var(--accent-dk); text-decoration: none; }
.tlink::after { content: "→"; transition: transform var(--t-fast); }
.tlink:hover::after { transform: translateX(4px); }
.tlink--gold { color: var(--gold-dk); }
.tlink--onDark { color: var(--gold-lt); }

/* ==========================================================================
   4. TAGS & CHIPS
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--honey);
  color: var(--body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.7;
}
.tag--accent { background: var(--accent-lt); color: var(--ink); font-weight: 600; }
.tag--gold    { background: var(--gold-pale); color: var(--gold-dk); }
.tag--ink     { background: var(--ink); color: #fff; }
.tag--sold    { background: var(--mist); color: var(--muted); }
.tag--open    { background: #E8F4ED; color: var(--ok); }
.tag--shut    { background: var(--mist); color: var(--muted); }
.tag--open::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px var(--s2);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip.is-on, .chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.chip__n { font-size: .68rem; color: var(--faint); }
.chip.is-on .chip__n { color: rgba(255,255,255,.65); }

.chip-rail {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scrollbar-width: none;
}
.chip-rail::-webkit-scrollbar { display: none; }

/* ==========================================================================
   5. PRODUCT CARD — the single most repeated object on the site.
   No border. The tile ground does the framing.
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--honey);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__flags {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
}

.card__fav {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255,253,247,.92);
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.card__fav:hover { color: var(--accent); background: #fff; }
.card__fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.card__fav[aria-pressed="true"] { color: var(--accent); }
.card__fav[aria-pressed="true"] svg { fill: currentColor; }

.card__body { padding: var(--s0) 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.card__cat { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

.card__name {
  font-family: var(--ui);
  font-size: .94rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
}
.card__name a { color: inherit; text-decoration: none; }
.card__name a:hover { color: var(--accent); text-decoration: none; }

/* Purity and weight stay visible on the card — for a jeweller that is the
   spec that decides whether a customer clicks at all. */
.card__spec {
  font-size: .72rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-variant-numeric: tabular-nums;
}

.card__price { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.card__amt { font-size: 1.02rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.card__was { font-size: .8rem; color: var(--faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.card__poa { font-size: .85rem; font-weight: 500; color: var(--gold-dk); letter-spacing: .02em; }
.card__off { font-size: .7rem; color: var(--ok); font-weight: 500; }
.card__note { font-size: .64rem; color: var(--faint); letter-spacing: .03em; }

/* ==========================================================================
   6. PLACEHOLDER — a designed empty slot, never a broken image
   ========================================================================== */

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: var(--s2);
  text-align: center;
  background: var(--honey);
  color: var(--gold);
}
.ph::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(176,141,63,.24);
  border-radius: 2px;
  pointer-events: none;
}
.ph svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1; opacity: .8; }
.ph__label {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  max-width: 20ch;
  line-height: 1.7;
}

/* ==========================================================================
   7. PRICE BREAKUP TABLE
   ========================================================================== */

.breakup { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.breakup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s0);
  padding: var(--s0) var(--s2);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
}
.breakup__scroll { overflow-x: auto; }

.breakup table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.breakup th, .breakup td {
  padding: 11px var(--s1);
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.breakup th:first-child, .breakup td:first-child {
  text-align: left; white-space: normal; min-width: 140px; color: var(--body);
}
.breakup thead th {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--white);
}
.breakup .row--sub td { background: var(--cream); font-weight: 600; color: var(--ink); }
.breakup .row--total td {
  background: linear-gradient(90deg, var(--gold) 0%, var(--accent-lt) 100%);
  color: var(--ink);
  font-weight: 600;
  font-size: .98rem;
  border-bottom: 0;
}
.breakup .row--total td:first-child { color: var(--ink); }
.breakup .cell-off { color: var(--ok); }
.breakup__foot {
  padding: var(--s0) var(--s2);
  background: var(--cream);
  border-top: 1px solid var(--line);
  font-size: .72rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s2); }
.field > label, .lbl {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .hint { font-size: .78rem; color: var(--faint); letter-spacing: 0; text-transform: none; font-weight: 400; }

.input, select.input, textarea.input {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s1);
  background: var(--white);
  color: var(--body);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: .94rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--faint); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,138,10,.16);
}
textarea.input { min-height: 128px; resize: vertical; line-height: 1.65; padding-top: 13px; }
select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input--num { font-variant-numeric: tabular-nums; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }

.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--s-1); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--accent); flex: none; }
.check span { font-size: .88rem; color: var(--body); }

.form-note {
  font-size: .78rem;
  line-height: 1.7;
  color: var(--muted);
  border-left: 2px solid var(--gold-lt);
  padding-left: var(--s1);
}

/* ==========================================================================
   9. NOTICES & EMPTY STATES
   ========================================================================== */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  background: var(--white);
  padding: var(--s2);
  box-shadow: var(--shadow);
}
.notice h4 { margin: 0 0 5px; color: var(--ink); font-weight: 500; }
.notice p { font-size: .9rem; margin-bottom: 0; }
.notice p + p { margin-top: 8px; }
.notice--info   { border-left-color: var(--sapphire); }
.notice--warn   { border-left-color: var(--warn); }
.notice--danger { border-left-color: var(--danger); }

/* The Turnstile widget the guard script drops above a form's submit button.
   Cloudflare draws its own box; this just gives it consistent breathing room
   and stops its iframe overflowing a narrow phone screen. */
.guard { margin: var(--s1) 0; min-width: 0; }
.guard iframe { max-width: 100%; }
.notice--ok     { border-left-color: var(--ok); }

.empty {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
  padding: var(--s5) var(--s2);
  text-align: center;
}
.empty h3 { color: var(--ink); margin-bottom: 8px; font-weight: 500; }
.empty p { margin-inline: auto; color: var(--muted); max-width: 46ch; }

/* ==========================================================================
   10. MODAL & TOAST
   ========================================================================== */

dialog.modal {
  width: min(94vw, 680px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--body);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: rgba(37,28,12,.52); backdrop-filter: blur(2px); }
.modal__head {
  position: sticky; top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.modal__head h3 { margin: 0; font-size: 1.15rem; font-weight: 500; }
.modal__close {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
}
.modal__close:hover { background: var(--cream); color: var(--accent); }
.modal__body { padding: var(--s2); overflow-y: auto; max-height: calc(88vh - 66px); }

.toast-host {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(92vw, 440px);
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 13px var(--s2);
  font-size: .84rem;
  letter-spacing: .02em;
  text-align: center;
  width: 100%;
}
.toast--bad { background: var(--danger); }

/* ==========================================================================
   11. WHATSAPP FLOAT
   ========================================================================== */

.wa-float {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px var(--s2);
  background: #128C4A;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(18,140,74,.34);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(18,140,74,.42); color: #fff; text-decoration: none; }
.wa-float svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.wa-float__t { display: none; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer { background: var(--ink); color: #CBBFA6; border-top: 3px solid var(--accent-lt); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s3);
  padding-block: var(--s5) var(--s3);
}
.site-footer h4 {
  font-family: var(--ui);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: var(--s2);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__list a { color: #CBBFA6; text-decoration: none; font-size: .86rem; transition: color var(--t-fast); }
.footer__list a:hover { color: var(--accent-glow); text-decoration: none; }
.site-footer p { color: #AB9E85; font-size: .86rem; }

.footer__brand .brand__name { color: var(--accent-glow); }
.footer__brand .brand__sub  { color: #948872; }
.footer__brand .brand__mark { border-color: rgba(235,203,124,.4); background: transparent; color: var(--accent-glow); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s2);
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  color: #8E8269;
}
.footer__bottom a { color: #8E8269; }
.footer__bottom a:hover { color: var(--gold-lt); }

.social { display: flex; gap: var(--s-1); }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(235,203,124,.26);
  border-radius: 50%;
  color: #CBBFA6;
  transition: all var(--t-fast);
}
.social a:hover { background: var(--accent-glow); border-color: var(--accent-glow); color: var(--ink); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1120px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .header__bar { grid-template-columns: auto 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
}

@media (min-width: 700px) { .wa-float__t { display: inline; } }

/* The wordmark's tagline is 48 characters and set `nowrap`. Below the nav
   breakpoint it is wider than the whole header grid can afford, which pushed
   the action icons past the wrap and gave the page a real 16px horizontal
   overflow. It is dropped here rather than truncated — a half-shown tagline
   reads as a bug, an absent one reads as a decision. */
@media (max-width: 780px) {
  .brand__sub { display: none; }
  .brand__text { min-width: 0; }
}

/* Four 44px icons plus the wordmark are 51px wider than the wrap on a 390px
   phone, which pushed the action row past the page edge. Search and the
   account link are both reachable from the drawer, so they leave the bar
   rather than the wordmark being truncated. */
@media (max-width: 700px) {
  .icon-btn--opt { display: none; }
}

@media (max-width: 640px) {
  :root { --header-h: 92px; }
  body { font-size: 15.5px; }
  .brand__mark { width: 38px; height: 38px; font-size: 1.35rem; }
  .brand__name { font-size: 1.1rem; }
  .brand__kn   { display: none; }
  .header__bar { gap: var(--s0); min-height: 62px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s2); padding-block: var(--s4) var(--s2); }
  .field-row { grid-template-columns: 1fr; }
  .section { padding-block: var(--s4); }
  .wrap, .wrap--narrow, .wrap--mid { width: min(100% - 1.75rem, var(--page)); }
  .ratestrip__note { display: none; }
  .btn { padding-inline: var(--s2); }
}

/* ==========================================================================
   14. NAV SUBMENUS
   Built from the shop's own counters, so adding a category adds a menu entry.
   ========================================================================== */

.nav__item { position: relative; }
.nav__caret {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}
.nav__item.has-sub:hover .nav__caret { transform: translateY(0) rotate(225deg); }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 70;
  min-width: 254px;
  padding-top: 14px;             /* a forgiving gap between link and panel */
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,.61,.36,1),
              visibility 0s linear 240ms;
}
.nav__item.has-sub:hover .submenu,
.nav__item.has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,.61,.36,1), visibility 0s;
}

.submenu ul {
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent-lt);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
/* a small gold nib pointing back at the parent link */
.submenu ul::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: var(--accent-lt);
  transform: rotate(45deg);
}
.submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  padding: 9px var(--s1);
  border-radius: 2px;
  color: var(--body);
  font-size: .84rem;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: none;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.submenu a:hover {
  background: var(--gold-pale);
  color: var(--accent-dk);
  padding-left: calc(var(--s1) + 5px);
  text-decoration: none;
}
.submenu em { font-style: normal; font-size: .7rem; color: var(--faint); }

/* --- drawer accordions --- */
.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__group > summary { list-style: none; cursor: pointer; border-bottom: 0;
  display: flex; align-items: center; justify-content: space-between; }
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary::after {
  content: "+"; font-size: 1.3rem; color: var(--gold); font-weight: 300; line-height: 1;
}
.drawer__group[open] > summary::after { content: "\2013"; }
.drawer__group[open] > summary { color: var(--accent-dk); }
.drawer__sub { display: flex; flex-direction: column; padding: 0 0 var(--s1) var(--s1);
  border-left: 1px solid var(--line); margin-left: 4px; }
.drawer__sub a {
  padding: 9px 0;
  color: var(--muted);
  font-size: .92rem;
  text-decoration: none;
  transition: color var(--t-fast), transform var(--t-fast);
}
.drawer__sub a:hover { color: var(--accent-dk); transform: translateX(4px); text-decoration: none; }