/* ============================================================
   ZHYAR PERFUMES — storefront

   Three colours and no more: near-black ground, cream text, gold.

   Gold is split into two tokens because they do two different jobs. --gold is
   the structural one — borders, rules, small caps — a deep, slightly bronzed
   tone that reads as metal rather than as yellow, and that survives being
   drawn one pixel wide on black. --gold-bright is the shine, used only where
   something is being lit: a hover, a gradient sweep, an active chip. Using
   the bright tone for hairlines makes the page look like it is highlighting
   errors; using the deep tone for hovers makes nothing appear to happen.
   ============================================================ */

:root {
  --ink:          #050505;
  --ink-raised:   #0b0b0b;
  --ink-sunken:   #000;

  --cream:        #f2ead9;
  --cream-soft:   rgba(242, 234, 217, 0.66);
  --cream-faint:  rgba(242, 234, 217, 0.38);

  --gold:         #b8963c;
  --gold-bright:  #edd489;
  --gold-line:    rgba(184, 150, 60, 0.30);
  --gold-glow:    rgba(184, 150, 60, 0.16);

  --display: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap:  1180px;
  --rail:  clamp(18px, 5vw, 48px);
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* An element given `hidden` in JS must actually disappear. The UA rule is
   `[hidden] { display: none }`, which any class that sets its own `display`
   silently outranks — and that is a real bug rather than a nicety: the bag
   badge, the bag footer and the clipboard fallback all set one, and all three
   were visible while "hidden". One !important here is cheaper than
   remembering it at every future call site. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rail); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ink-sunken);
  padding: 10px 18px; font-size: 13px; letter-spacing: 0.08em;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------
   Wordmark

   Real text, not an image: it scales, it is selectable, it is the accessible
   name of the home link, and it costs no request. The character of the mark
   comes from the tracking and the thin display weight rather than from a
   logo file — swap in assets/logo.png if the drawn mark is wanted instead.
   ------------------------------------------------------------ */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.logo__img { height: 42px; width: auto; }

.logo__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: 0.30em;
  text-indent: 0.30em;          /* tracking adds space after the last letter; recentre */
  color: var(--cream);
}
.logo__name--small { font-size: 22px; }

.logo__sub {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  color: var(--cream-soft);
  margin-top: 5px;
}

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--rail);
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-line);
}

.topbar__actions { display: flex; align-items: center; gap: clamp(10px, 3vw, 26px); }

.topbar__link {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.topbar__link:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

.topbar__bag {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--gold-line);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.topbar__bag:hover { border-color: var(--gold); color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-glow); }

.bag-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--gold); color: var(--ink-sunken);
  font-size: 10px; letter-spacing: 0; border-radius: 999px;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  min-height: min(82vh, 720px);
  display: grid; place-items: center;
  padding: clamp(60px, 12vh, 120px) var(--rail);
  text-align: center;
  /* A single soft gold bloom behind the mark. No image: the point of the
     black is that nothing competes with the wordmark. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, var(--gold-glow), transparent 70%),
    var(--ink);
  border-bottom: 1px solid var(--gold-line);
}

.hero__inner { max-width: 640px; }

.hero__eyebrow {
  margin: 0 0 clamp(24px, 5vh, 44px);
  font-size: 10px; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--gold);
}

.hero__mark { margin: 0; display: flex; flex-direction: column; align-items: center; }

.hero__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 13vw, 104px);
  line-height: 1;
  letter-spacing: 0.16em; text-indent: 0.16em;
  /* The one place the bright gold is allowed to touch the cream: a slow
     vertical sheen, the way light falls on a polished letter. */
  background: linear-gradient(178deg, #fffaf0 6%, var(--cream) 42%, var(--gold-bright) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: clamp(10px, 2vh, 18px);
  font-size: clamp(9px, 2.2vw, 12px);
  letter-spacing: 0.62em; text-indent: 0.62em;
  color: var(--cream-soft);
}

.hero__line {
  margin: clamp(26px, 5vh, 42px) auto clamp(30px, 5vh, 40px);
  max-width: 34ch;
  font-family: var(--display);
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--cream-soft);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 11px; font-weight: 400;
  letter-spacing: 0.20em; text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-bright);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn--block { display: flex; width: 100%; }

/* The gold fill arrives from the left rather than the border simply changing
   colour — a flat colour swap on a black page reads as a repaint, not as a
   response. ::before rather than a background-position trick so the text
   colour can cross over independently. */
.btn--gold { isolation: isolate; }
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, #8d6d24, var(--gold) 42%, var(--gold-bright));
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
}
.btn--gold:hover::before, .btn--gold:focus-visible::before { transform: translateX(0); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--ink-sunken); }

.btn--outline { color: var(--cream); border-color: var(--gold-line); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--gold); color: var(--gold-bright); }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------
   Catalogue section
   ------------------------------------------------------------ */
.catalogue { padding: clamp(56px, 10vh, 96px) 0 clamp(70px, 12vh, 120px); }

.notice {
  margin: 0 0 32px;
  padding: 13px 18px;
  border: 1px solid var(--gold-line);
  border-left: 2px solid var(--gold);
  background: rgba(184, 150, 60, 0.05);
  color: var(--cream-soft);
  font-size: 13px;
}

.section-head { text-align: center; margin-bottom: clamp(28px, 5vh, 44px); }

.section-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.06em;
}
/* A short gold rule under the heading — the only ornament on the page. */
.section-title::after {
  content: ""; display: block; width: 54px; height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.section-sub { margin: 14px auto 0; max-width: 46ch; color: var(--cream-faint); font-size: 14px; }

.controls {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-bottom: 28px;
}

.search { position: relative; width: min(420px, 100%); }

.search__input {
  width: 100%;
  font: inherit; font-size: 14px;
  color: var(--cream);
  background: var(--ink-raised);
  border: 1px solid var(--gold-line);
  padding: 12px 40px 12px 16px;
  transition: border-color 0.25s var(--ease);
}
.search__input::placeholder { color: var(--cream-faint); }
.search__input:hover, .search__input:focus { border-color: var(--gold); outline: none; }
.search__input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: none; border: 0; color: var(--cream-soft);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.search__clear:hover { color: var(--gold-bright); }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.chip {
  font: inherit; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-soft);
  background: transparent;
  border: 1px solid var(--gold-line);
  padding: 9px 20px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.chip:hover { color: var(--gold-bright); border-color: var(--gold); }
.chip[aria-pressed="true"] {
  color: var(--ink-sunken);
  background: linear-gradient(100deg, var(--gold), var(--gold-bright));
  border-color: var(--gold-bright);
}

/* "More filters", and the panel it opens. The button carries the current
   selection as its label — "Niche · Dior" rather than "More filters" — so a
   filter that is on is never hidden by the control that hides it. */
.more {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-soft);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--gold-line);
  padding: 7px 4px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.more:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }
.more[data-active="true"] { color: var(--gold-bright); border-bottom-color: var(--gold); }
.more__mark {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.more[aria-expanded="true"] .more__mark { transform: translateY(1px) rotate(225deg); }

.morepanel {
  width: min(560px, 100%);
  padding: 20px 18px 18px;
  border: 1px solid var(--gold-line);
  display: flex; flex-direction: column; gap: 18px;
}
.morepanel__group { display: flex; flex-direction: column; gap: 11px; }
.morepanel__title {
  margin: 0; text-align: center;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-faint);
}
.filters--wrap { flex-wrap: wrap; }

.linkclear {
  align-self: center;
  font: inherit; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-faint);
  background: none; border: 0; border-bottom: 1px solid var(--gold-line);
  padding: 3px 2px; cursor: pointer;
}
.linkclear:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

.result-count { margin: 0 0 22px; text-align: center; font-size: 12px; color: var(--cream-faint); letter-spacing: 0.08em; }

/* ------------------------------------------------------------
   Grid and cards
   ------------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 2.4vw, 26px);
}

.card {
  display: flex; flex-direction: column;
  text-align: left;
  font: inherit;
  background: var(--ink-raised);
  border: 1px solid var(--gold-line);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover, .card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-glow);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink-sunken);
  overflow: hidden;
  border-bottom: 1px solid var(--gold-line);
}
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__img { transform: scale(1.04); }

/* No photo yet: a gold monogram on black rather than a grey placeholder box.
   A shop adding stock in the evening should not have holes in its grid. */
.card__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(184, 150, 60, 0.10), transparent 68%), var(--ink-sunken);
}
.card__monogram {
  font-family: var(--display);
  font-size: 54px; font-weight: 300;
  letter-spacing: 0.08em; text-indent: 0.08em;
  color: transparent;
  background: linear-gradient(170deg, var(--gold-bright), #7a5c18);
  -webkit-background-clip: text; background-clip: text;
}

.card__tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid var(--gold-line);
  padding: 4px 9px;
}

.card__soldout {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(5, 5, 5, 0.72);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream);
}

.card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__brand { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint); }
.card__name {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: 20px; line-height: 1.25; color: var(--cream);
}
.card__price { margin: auto 0 0; padding-top: 10px; font-size: 13px; color: var(--gold-bright); letter-spacing: 0.04em; }
.card__price small { color: var(--cream-faint); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }

.empty { text-align: center; color: var(--cream-faint); padding: 50px 0; font-family: var(--display); font-size: 19px; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer { border-top: 1px solid var(--gold-line); padding: clamp(40px, 7vh, 66px) 0 34px; background: var(--ink-sunken); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; align-items: flex-start; }
.footer__brand { display: flex; flex-direction: column; }
.footer__contact { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--cream-soft); }
.footer__contact a { transition: color 0.25s var(--ease); }
.footer__contact a:hover { color: var(--gold-bright); }
.footer__label { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.footer__note { width: 100%; margin: 8px 0 0; font-size: 11px; color: var(--cream-faint); letter-spacing: 0.04em; }

/* ------------------------------------------------------------
   Drawer
   ------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(420px, 100%); height: 100dvh;
  background: var(--ink-raised);
  border-left: 1px solid var(--gold-line);
  transform: translateX(101%);
  transition: transform 0.35s var(--ease);
  display: flex; flex-direction: column;
}
.drawer[aria-hidden="false"] { transform: translateX(0); }
/* Hidden from the tree AND from the tab order while closed — a drawer whose
   buttons are still focusable is a keyboard trap that appears to do nothing. */
.drawer[aria-hidden="true"] { visibility: hidden; }
.drawer[aria-hidden="false"] { visibility: visible; }

.drawer__view { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gold-line);
}
.drawer__title {
  margin: 0; flex: 1;
  font-family: var(--display); font-weight: 400; font-size: 20px;
  letter-spacing: 0.04em;
}
.drawer__close, .drawer__back {
  background: none; border: 0; color: var(--cream-soft);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.drawer__close:hover, .drawer__back:hover { color: var(--gold-bright); }

.drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.drawer__foot { border-top: 1px solid var(--gold-line); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer__empty { color: var(--cream-faint); text-align: center; padding: 34px 0; font-family: var(--display); font-size: 18px; }

.product__media { aspect-ratio: 4 / 5; background: var(--ink-sunken); border: 1px solid var(--gold-line); position: relative; overflow: hidden; margin-bottom: 18px; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__brand { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.product__blurb { color: var(--cream-soft); font-size: 14px; margin: 0 0 22px; }

.field-label { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 10px; }

.sizes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.size {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--gold-line);
  padding: 12px 15px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.size:hover { border-color: var(--gold); }
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size__label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.size__price { font-size: 13px; color: var(--gold-bright); }
.size:has(input:checked) { border-color: var(--gold); background: rgba(184, 150, 60, 0.08); }
.size:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.qty { display: flex; align-items: center; gap: 0; width: fit-content; border: 1px solid var(--gold-line); }
.qty button {
  width: 40px; height: 38px;
  background: none; border: 0; color: var(--cream); font-size: 17px; cursor: pointer;
}
.qty button:hover { color: var(--gold-bright); }
.qty output { min-width: 42px; text-align: center; font-size: 14px; }

.bag-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bag-item { display: flex; gap: 13px; align-items: flex-start; border-bottom: 1px solid rgba(184, 150, 60, 0.14); padding-bottom: 14px; }
.bag-item__thumb { width: 58px; height: 72px; flex: none; object-fit: cover; border: 1px solid var(--gold-line); background: var(--ink-sunken); }
.bag-item__thumb--empty { display: grid; place-items: center; font-family: var(--display); font-size: 22px; color: var(--gold); }
.bag-item__main { flex: 1; min-width: 0; }
.bag-item__name { font-family: var(--display); font-size: 16px; margin: 0 0 3px; }
.bag-item__meta { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint); }
.bag-item__price { font-size: 13px; color: var(--gold-bright); margin-top: 6px; }
.bag-item__remove { background: none; border: 0; color: var(--cream-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 4px; }
.bag-item__remove:hover { color: var(--gold-bright); }

.bag-total { display: flex; justify-content: space-between; margin: 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.bag-total span:last-child { color: var(--gold-bright); }
.bag-note, .bag-hint { margin: 0; font-size: 11px; color: var(--cream-faint); line-height: 1.55; }

.fallback { display: flex; flex-direction: column; gap: 8px; }
.fallback__label { margin: 0; font-size: 11px; color: var(--gold); letter-spacing: 0.1em; }
.fallback__text {
  width: 100%; font: inherit; font-size: 12px; line-height: 1.5;
  color: var(--cream); background: var(--ink-sunken);
  border: 1px solid var(--gold-line); padding: 10px; resize: vertical;
}

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 80;
  background: var(--ink-raised);
  border: 1px solid var(--gold);
  color: var(--cream);
  padding: 12px 22px;
  font-size: 13px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.7);
  max-width: calc(100vw - 32px);
}

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .topbar { padding-inline: 16px; }
  .topbar__link { display: none; }      /* the footer and the bag still reach both channels */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card__name { font-size: 17px; }
  .card__monogram { font-size: 40px; }
  .drawer { width: 100%; }
}