/*
Theme Name: Zefeq
Theme URI: https://zefeq.com
Author: Zefeq
Description: A complete site for Zefeq, a perfume house in the United Arab Emirates. Fifteen fragrances across two lines, with the landing film, all bottle photography and six markets of pricing built in. No plugins needed, and nothing is for sale — the range is in production, so the site publishes it rather than selling it.
Version: 2.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zefeq
Tags: custom-menu, custom-colors, translation-ready, rtl-language-support, featured-images
*/

/* Zefeq storefront
   Layout: editorial, square system. Ivory ground, hairline rules, no shadows except
   the cart drawer. Cormorant Garamond carries the voice; Tenor Sans, tracked, does
   every label. Arabic in Aref Ruqaa (display) and Amiri (text), never letterspaced.
   The nuqta — the diamond pair from the mark — is the only ornament. */

:root {
  color-scheme: light;
  /* house */
  --ivory: #F4F1EA; --ink: #1A1714; --gold: #C9A45C; --gold-deep: #6E5424; --emerald: #0F2E26;

  /* surfaces */
  --bg: #F4F1EA; --bg-raised: #FBFAF6; --bg-sunken: #E9E4D8; --bg-invert: #0F2E26;
  --fg: #1A1714; --fg-muted: #574F45; --fg-faint: #6F6658; --fg-invert: #F4F1EA;
  --accent: #6E5424; --accent-bright: #C9A45C; --accent-hover: #53400F;
  --line: #D9D2C1; --line-strong: #AFA694;
  --sale: #8F3123; --sale-bg: #F6E7E3;
  --ok: #3F6133;

  /* type */
  --display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --ui: "Tenor Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ar-display: "Aref Ruqaa", "Noto Naskh Arabic", serif;
  --ar-body: "Amiri", "Noto Naskh Arabic", serif;

  /* scale */
  --track: .32em;
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --r: 0px; --r-sm: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1714; --bg-raised: #16211C; --bg-sunken: #0A110E; --bg-invert: #F4F1EA;
    --fg: #F4F1EA; --fg-muted: #ADB5AC; --fg-faint: #8D958C; --fg-invert: #0F2E26;
    --accent: #C9A45C; --accent-bright: #DCBB77; --accent-hover: #E6CC92;
    --line: #243029; --line-strong: #3D4F46;
    --sale: #E89A8B; --sale-bg: #33201C;
    --ok: #8FB36B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1714; --bg-raised: #16211C; --bg-sunken: #0A110E; --bg-invert: #F4F1EA;
  --fg: #F4F1EA; --fg-muted: #ADB5AC; --fg-faint: #8D958C; --fg-invert: #0F2E26;
  --accent: #C9A45C; --accent-bright: #DCBB77; --accent-hover: #E6CC92;
  --line: #243029; --line-strong: #3D4F46;
  --sale: #E89A8B; --sale-bg: #33201C;
  --ok: #8FB36B;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; line-height: 1.12; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* band + gutter ------------------------------------------------------- */
.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(48px, 7vw, 96px); }
.band--tight { padding-block: clamp(32px, 4vw, 56px); }
.band--invert { background: var(--bg-invert); color: var(--fg-invert); }
.band--invert h1, .band--invert h2, .band--invert h3 { color: var(--fg-invert); }
.band--sunken { background: var(--bg-sunken); }

/* type helpers -------------------------------------------------------- */
.eyebrow {
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--fg-faint); margin: 0;
}
.eyebrow--gold { color: var(--accent); }
.display-xl { font-size: clamp(44px, 7vw, 92px); letter-spacing: .005em; }
.display-l  { font-size: clamp(34px, 4.6vw, 60px); }
.display-m  { font-size: clamp(26px, 3vw, 38px); }
.display-s  { font-size: clamp(21px, 2.2vw, 27px); }
.scent-name { font-style: italic; font-weight: 500; }
.lede { font-family: var(--display); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.5; color: var(--fg-muted); max-width: 62ch; }
.prose { max-width: 68ch; color: var(--fg-muted); }
.prose p + p { margin-top: 1em; }
.ar {
  font-family: var(--ar-display); direction: rtl; unicode-bidi: isolate;
  letter-spacing: normal !important; line-height: 1.75;
}
/* scent name and its Arabic on one line */
.name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.name-ar { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.name-sep {
  font-family: var(--ui); font-size: .48em; color: var(--fg-faint);
  transform: translateY(-.18em); flex: 0 0 auto;
}
.ar-text { font-family: var(--ar-body); direction: rtl; letter-spacing: normal !important; line-height: 1.9; }
.num { font-variant-numeric: tabular-nums; }

/* the nuqta: the diamond pair from the mark --------------------------- */
.nuqta { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.nuqta i { width: 6px; height: 6px; background: var(--accent-bright); transform: rotate(45deg); display: block; }
.rule-nuqta { display: flex; align-items: center; gap: 14px; color: var(--line); }
.rule-nuqta::before, .rule-nuqta::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* header -------------------------------------------------------------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  background: var(--bg); z-index: 60;
}
.head-in { display: flex; align-items: center; gap: 16px; padding-block: 14px; }
.brand-mark { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark img { height: 26px; width: auto; }
:root[data-theme="dark"] .brand-mark .lm { display: none; }
:root[data-theme="dark"] .brand-mark .dm { display: block; }
.brand-mark .dm { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark .lm { display: none; }
  :root:not([data-theme="light"]) .brand-mark .dm { display: block; }
}
.nav { display: flex; gap: 22px; margin-inline: auto; }
.nav a {
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--fg); padding-block: 4px;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.head-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 12px; box-sizing: border-box;
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: var(--ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1; border-radius: var(--r-sm); color: var(--fg); white-space: nowrap;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-btn { padding: 0 11px; }
.cart-btn svg { width: 18px; height: 18px; display: block; }
.cart-btn .cart-count {
  display: inline-block; min-width: 17px; padding: 0 4px;
  background: var(--accent); color: var(--bg); font-size: 10px; line-height: 17px;
  text-align: center; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.cart-btn[data-empty="1"] .cart-count { display: none; }

/* centred header — landing page only ---------------------------------- */
.head-in--center {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding-block: 18px;
}
.head-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.head-side--l { justify-self: start; }
.head-side--r { justify-self: end; }
.brand-mark--big { justify-self: center; }
.brand-mark--big img { height: clamp(34px, 4.4vw, 52px); }
.head-nav-row { border-top: 1px solid var(--line); }
.head-nav-row .nav {
  justify-content: center; margin-inline: auto; padding-block: 12px; gap: 26px;
}
@media (max-width: 900px) {
  /* Nothing to open: the destinations are on screen, and slide sideways when
     they do not fit. The wrap's gutter is reapplied to the scroller so the
     first and last items are not jammed against the edges. */
  .head-nav-row .wrap { padding-inline: 0; }
  .head-nav-row .nav {
    justify-content: flex-start; gap: 18px; padding-block: 9px;
    padding-inline: max(16px, env(safe-area-inset-left, 0px));
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .head-nav-row .nav::-webkit-scrollbar { display: none; }
  .head-nav-row .nav a { white-space: nowrap; font-size: 10px; letter-spacing: .13em; }
}
@media (max-width: 900px) {
  /* Equal side tracks, so the wordmark sits on the page's centre line and not
     merely in whatever space the market selector and the bag leave over. */
  .head-in--center {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px; padding-block: 10px;
  }
  .brand-mark--big img { height: 30px; }
}

/* the film hero ------------------------------------------------------- */
.film {
  position: relative; overflow: hidden;
  background: #0A0908 url("assets/media/landing-poster.jpg") center/cover no-repeat;
  min-height: clamp(460px, 66vh, 680px);
  display: grid; place-items: center; isolation: isolate;
}
.film-v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.film-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,16,13,.80) 0%, rgba(10,16,13,.46) 42%, rgba(10,16,13,.10) 68%, rgba(10,16,13,.30) 100%),
    linear-gradient(180deg, rgba(10,16,13,.34) 0%, rgba(10,16,13,0) 24%, rgba(10,16,13,0) 62%, rgba(10,16,13,.72) 100%);
}
.film-copy {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; text-align: left; gap: 16px;
  padding-block: clamp(56px, 9vw, 104px); width: 100%;
}
.film-tag {
  font-family: var(--display); font-size: clamp(32px, 5vw, 62px);
  color: var(--ivory); line-height: 1.1; max-width: 15ch; text-wrap: balance;
}
.film-ar { font-size: clamp(19px, 2.6vw, 30px); color: var(--gold); }
.film-rule { color: var(--gold); }
.film-rule span {
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase;
}
.film-cta { margin-top: 8px; }
@media (max-width: 620px) {
  .film-copy { align-items: center; text-align: center; }
  .film-rule::before { display: none; }
  .film-cta { justify-content: center; }
}
.film .btn { background: var(--ivory); border-color: var(--ivory); color: var(--emerald); }
.film .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--emerald); }
.film .btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(244,241,234,.5); }
.film .btn--ghost:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
.film-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px max(16px, env(safe-area-inset-left, 0px));
  text-align: center; color: rgba(244,241,234,.78);
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase;
}
@media (max-width: 620px) {
  .film-foot { font-size: 9.5px; letter-spacing: .12em; padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) { .film-v { display: none; } }

/* card price, made prominent ------------------------------------------ */
.card-price { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 12px; }
.card-price .main {
  font-family: var(--display); font-size: 27px; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.card-price .main .ml {
  font-family: var(--ui); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-faint); margin-left: 7px;
}
.card-price .try {
  display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 6px 10px; width: fit-content; max-width: 100%;
  background: transparent; cursor: pointer; font: inherit; text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.card-price .try:hover { background: var(--sale-bg); }
.card-price .try:active { transform: translateY(1px); }
.card-price .try .lab {
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint);
}
.card-price .try .amt {
  font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card-price .try .cut { font-size: 11px; color: var(--fg-faint); text-decoration: line-through; }
.card-price .try .off {
  font-family: var(--ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sale); background: var(--sale-bg); padding: 2px 5px; border-radius: var(--r-sm);
}
select.cur-select {
  -webkit-appearance: none; appearance: none;
  height: 38px; padding: 0 28px 0 12px; box-sizing: border-box; line-height: 1;
  font-family: var(--ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background-color: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
select.cur-select:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
  .site-head { position: relative; }
  .head-in {
    flex-wrap: wrap; gap: 10px; padding-block: 10px;
    row-gap: 0; padding-bottom: 0;
  }
  .head-in .head-tools { margin-left: auto; }
  .head-in .nav {
    order: 3; flex: 1 0 100%; margin-inline: 0;
    justify-content: flex-start; gap: 18px;
    padding-block: 9px; margin-top: 8px;
    border-top: 1px solid var(--line);
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .head-in .nav::-webkit-scrollbar { display: none; }
  .head-in .nav a { white-space: nowrap; font-size: 10px; letter-spacing: .13em; }
}

/* promo strip --------------------------------------------------------- */
.promo {
  background: var(--emerald); color: #F4F1EA; text-align: center;
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track);
  text-transform: uppercase; padding: 9px 16px;
}
.promo a { color: inherit; }
.promo a:hover { color: var(--gold); }
.promo strong { color: var(--gold); font-weight: 400; }

/* buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase;
  padding: 15px 28px; border-radius: var(--r-sm); border: 1px solid var(--emerald);
  background: var(--emerald); color: var(--ivory); cursor: pointer; text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ivory); }
:root[data-theme="dark"] .btn { background: var(--ivory); border-color: var(--ivory); color: var(--emerald); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: var(--ivory); border-color: var(--ivory); color: var(--emerald); }
}
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* price --------------------------------------------------------------- */
.price { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price .now { font-family: var(--display); font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; }
.price .was { color: var(--fg-faint); text-decoration: line-through; font-size: .95em; font-variant-numeric: tabular-nums; }
.badge-off {
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--sale-bg); color: var(--sale); padding: 3px 7px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.badge-line {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--bg); color: var(--fg); padding: 4px 8px; border: 1px solid var(--line);
}

/* product grid -------------------------------------------------------- */
.grid {
  display: grid; gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.grid > div[data-g] { display: flex; min-width: 0; }
.grid > div[data-g] > .card { width: 100%; }
.card .shot {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.card .shot img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease;
}
.card .shot .alt-shot { position: absolute; inset: 0; opacity: 0; }
.card:hover .shot .alt-shot { opacity: 1; }
.card:hover .shot img { transform: scale(1.03); }
.card-body { padding-top: 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.set-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.card-body .fam { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.card-body h3 { font-size: 23px; }
.card-body h3 a { color: var(--fg); }
.card-body h3 a:hover { color: var(--accent); }
.card-body .ar { font-size: 18px; color: var(--accent); line-height: 1.2; }
.card-body .notes { font-size: 13px; color: var(--fg-muted); }
.card-body .price { margin-top: 3px; font-size: 14px; }

.card-buy { padding-top: 10px; }
.btn--sm { padding: 11px 18px; font-size: 10px; }

/* phones: a list, photo at the side ------------------------------------
   A tall card per scent means one product fills the screen and the next is a
   long thumb away. Laid on its side the whole range can be read by scrolling,
   which is how a list of things to buy is meant to work.                   */
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; gap: 0; }
  .grid > div[data-g] { display: block; }

  .card {
    display: grid; grid-template-columns: 132px minmax(0, 1fr);
    gap: 14px; align-items: start;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .grid > .card:first-child, .grid > div[data-g]:first-child .card { padding-top: 4px; }

  /* The shots are square to begin with, so a square box shows the whole
     bottle instead of cropping its sides. */
  .card .shot { aspect-ratio: 1/1; }
  .card:hover .shot img { transform: none; }
  .card .shot .alt-shot { display: none; }

  .card-body { padding-top: 0; gap: 3px; }
  .name-row, .name-ar { gap: 7px; }
  .card-body .fam { font-size: 9px; letter-spacing: .1em; }
  .card-body h3 { font-size: 18px; }
  .card-body .ar { font-size: 15px; }
  .card-body .notes { font-size: 11.5px; line-height: 1.45; }

  .card-price { gap: 6px; padding-top: 8px; }
  .card-price .main { font-size: 21px; }
  .card-price .main .ml { font-size: 9px; margin-left: 5px; letter-spacing: .1em; }
  .card-price .try {
    width: 100%; justify-content: flex-start; gap: 6px; padding: 7px 9px;
    flex-wrap: nowrap;
  }
  .card-price .try .lab { font-size: 8.5px; letter-spacing: .08em; }
  .card-price .try .amt { font-size: 14px; }
  /* the was-price is the first thing to go: the % off already says it */
  .card-price .try .cut { display: none; }
  .card-price .try .off { font-size: 8.5px; padding: 2px 4px; letter-spacing: .06em; }

  .card-buy { padding-top: 8px; }
  .btn--sm { padding: 11px 12px; font-size: 10px; letter-spacing: .1em; }
  .badge-line { font-size: 8.5px; padding: 3px 6px; top: 7px; left: 7px; letter-spacing: .08em; }

  .sample-picks { padding-top: 10px; gap: 6px; }
  .pick { padding: 8px 10px; }
  .pick .lab { font-size: 9px; letter-spacing: .08em; }
  .pick .amt { font-size: 15px; }

  .set-foot { padding-top: 10px; }
}

/* phones: less air between sections, so less thumb between scents ------ */
@media (max-width: 620px) {
  .band { padding-block: 34px; }
  .band--tight { padding-block: 26px; }
  .stack-lg { gap: 22px; }
  .stack-md { gap: 14px; }
  .display-l { font-size: 29px; }
  .lede { font-size: 16px; line-height: 1.5; }
  .sec-head { align-items: flex-start; gap: 10px; }
}

/* samples: a scent offered as its two small sizes ---------------------- */
.sample-picks { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.pick {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 12px; background: var(--bg-raised); cursor: pointer;
  font: inherit; text-align: left; width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.pick:hover { border-color: var(--accent); background: var(--bg); }
.pick:active { transform: translateY(1px); }
.pick .lab {
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-muted); white-space: nowrap;
}
.pick .amts { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.pick .amt {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.pick .cut { font-size: 11px; color: var(--fg-faint); text-decoration: line-through; }

/* line marks: the arch (Majlis) and the double rule (Atelier) ---------- */
.line-mark { display: block; height: 16px; color: var(--accent-bright); }
.line-mark svg { height: 100%; width: auto; }

/* product page -------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
@media (max-width: 940px) {
  .pdp { grid-template-columns: 1fr; }

  /* Stacked, the description and the notes sat between the title and the size
     selector and pushed the photograph off the top of the screen — so changing
     size changed a picture nobody could see. The choice goes directly under the
     photo; the reading matter follows it. */
  .pdp .buy { display: flex; flex-direction: column; }
  .pdp .buy .pdp-title  { order: 1; }
  .pdp .buy .pdp-sizes  { order: 2; }
  .pdp .buy .buy-row    { order: 3; }
  .pdp .buy .pdp-desc   { order: 4; }
  .pdp .buy .notes-list { order: 5; }
  .pdp .buy .launch-box { order: 6; }
  .pdp .buy .spec       { order: 7; }

}
.gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 96px; }
@media (max-width: 940px) { .gallery { position: static; } }
.gallery .hero-shot {
  aspect-ratio: 1/1; background: var(--bg-sunken); border: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.gallery .hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-label {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-faint); text-align: center;
  margin: -2px 0 0;
}
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.thumbs button {
  aspect-ratio: 1/1; padding: 0; background: var(--bg-sunken); cursor: pointer;
  border: 1px solid var(--line); overflow: hidden;
}
.thumbs button[aria-selected="true"] { border-color: var(--accent); outline: 1px solid var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* On a phone the photograph and the choice of size have to be on screen at the
   same time, or changing size changes a picture nobody can see. Capping the
   shot and shrinking the thumbnails buys back the room. A square shot of a
   bottle loses little by being shorter; not seeing it change loses everything.
   This sits after the rules above because it has to override them.          */
@media (max-width: 940px) {
  .gallery { gap: 8px; }
  .gallery .hero-shot { aspect-ratio: auto; height: min(46vh, 320px); }
  /* contain, not cover: a 5 ml vial and a 100 ml bottle are different shapes,
     and cropping would clip one of them differently from the other. */
  .gallery .hero-shot img { object-fit: contain; }
  .thumbs { grid-template-columns: repeat(4, 54px); gap: 8px; justify-content: center; }
  .shot-label { margin-top: 0; }
  .pdp { padding-top: 0 !important; }
  .pdp-crumbs { padding-block: 10px 6px; }
}

.buy { display: flex; flex-direction: column; gap: 18px; }
.breadcrumb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--fg-faint); }
.breadcrumb a:hover { color: var(--accent); }
.pdp-title { display: flex; flex-direction: column; gap: 8px; }
.pdp-title h1 { font-size: clamp(36px, 4.6vw, 56px); }
.pdp-title .ar { font-size: clamp(24px, 3vw, 34px); color: var(--accent); line-height: 1.2; }
.pdp-title .meaning { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--fg-muted); }

/* format selector ----------------------------------------------------- */
.fmt-list { display: grid; gap: 10px; }
.fmt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; border-radius: var(--r-sm);
  background: var(--bg-raised); transition: border-color .15s ease;
}
.fmt:hover { border-color: var(--line-strong); }
.fmt input { position: absolute; opacity: 0; pointer-events: none; }
.fmt .dotmark { width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 999px; position: relative; flex: 0 0 auto; }
.fmt[data-on="1"] { border-color: var(--accent); background: var(--bg); }
.fmt[data-on="1"] .dotmark { border-color: var(--accent); }
.fmt[data-on="1"] .dotmark::after { content: ""; position: absolute; inset: 3px; background: var(--accent); border-radius: 999px; }
.fmt .fmt-name { font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.fmt .fmt-sub { font-size: 12px; color: var(--fg-faint); letter-spacing: 0; text-transform: none; }
.fmt .fmt-price { text-align: right; font-size: 13px; }
.fmt .fmt-price .now { font-family: var(--display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fmt .fmt-price .was { display: block; font-size: 12px; color: var(--fg-faint); text-decoration: line-through; }

.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 18px; }
.vat-note { font-size: 12px; color: var(--fg-faint); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.qty button { background: none; border: 0; width: 42px; height: 46px; cursor: pointer; font-size: 17px; color: var(--fg); }
.qty button:hover { color: var(--accent); }
.qty output { width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.buy-row { display: flex; gap: 10px; align-items: stretch; }
.buy-row .btn { flex: 1; }
.buy-row .btn span { white-space: nowrap; }
@media (max-width: 620px) {
  /* "Add to bag AED 215" will not sit beside the stepper at this width
     without breaking across two lines, so give it the full row. */
  .buy-row { flex-wrap: wrap; }
  .buy-row .qty { flex: 1 1 100%; justify-content: space-between; }
  .buy-row .qty output { flex: 1; }
  .buy-row .btn { flex: 1 1 100%; padding-inline: 16px; }
}

.spec { border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 38% 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec dt { font-family: var(--ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.spec dd { margin: 0; color: var(--fg); }

.notes-list { display: flex; flex-wrap: wrap; gap: 8px; }
.notes-list span {
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}

/* trial callout ------------------------------------------------------- */
.trial-note {
  border: 1px solid var(--accent); background: var(--bg-raised);
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-sm);
}
.trial-note .big { font-family: var(--display); font-size: 27px; color: var(--accent); line-height: 1; }
.trial-note p { font-size: 14px; color: var(--fg-muted); }
.trial-note strong { color: var(--fg); }

/* faq ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 0; list-style: none; display: flex; justify-content: space-between;
  gap: 18px; align-items: baseline; font-family: var(--display); font-size: 21px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 21px; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 18px; color: var(--fg-muted); max-width: 72ch; }
.faq .answer p + p { margin-top: .8em; }

/* tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 480px; }
table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.data th { font-family: var(--ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); font-weight: 400; }
table.data td { font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* cart ---------------------------------------------------------------- */
.cart-lines { border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line img { width: 92px; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--line); }
.cart-line .meta { min-width: 0; }
.cart-line .meta h3 { font-size: 21px; }
.cart-line .meta .fmt-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.cart-line .right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.link-x { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.link-x:hover { color: var(--sale); }
.totals { display: flex; flex-direction: column; gap: 10px; margin-left: auto; max-width: 380px; width: 100%; }
.totals .row { display: flex; justify-content: space-between; gap: 18px; font-size: 15px; }
.totals .row.grand { border-top: 1px solid var(--line); padding-top: 12px; font-size: 20px; font-family: var(--display); font-weight: 600; }
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line img { width: 72px; }
  .cart-line .right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* toast --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  background: var(--emerald); color: var(--ivory); padding: 13px 20px; border-radius: var(--r-sm);
  font-family: var(--ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.26); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
:root[data-theme="dark"] .toast { background: var(--ivory); color: var(--emerald); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast { background: var(--ivory); color: var(--emerald); }
}

/* hero ---------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-shot-big { border: 1px solid var(--line); aspect-ratio: 1/1; overflow: hidden; background: var(--bg-sunken); }
.hero-shot-big img { width: 100%; height: 100%; object-fit: cover; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.feature { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-md { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.row-wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }

/* footer -------------------------------------------------------------- */
.site-foot { background: var(--emerald); color: #D7D2C4; margin-top: clamp(48px, 7vw, 96px); }
.site-foot a { color: #D7D2C4; }
.site-foot a:hover { color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; padding-block: clamp(40px, 5vw, 64px); }
.foot-grid h4 { font-family: var(--ui); font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.foot-bottom { border-top: 1px solid rgba(215,210,196,.18); padding-block: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #A9A396; }
.site-foot .brand-mark img { height: 30px; }

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

/* ---- WordPress plumbing --------------------------------------------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--bg-raised); clip: auto; clip-path: none; color: var(--accent);
  display: block; font-size: 14px; height: auto; left: 8px; line-height: normal;
  padding: 14px 22px; text-decoration: none; top: 8px; width: auto; z-index: 100000;
}
.cur-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.zefeq-page-body > *:first-child { margin-top: 0; }
.zefeq-page-body h2 { font-family: var(--display); font-size: clamp(26px,3vw,36px); font-weight: 400; margin: 1.4em 0 .5em; color: var(--fg); }
.zefeq-page-body h3 { font-family: var(--display); font-size: clamp(21px,2.2vw,27px); font-weight: 400; margin: 1.2em 0 .4em; color: var(--fg); }
.zefeq-page-body p { margin: 0 0 1em; }
.zefeq-page-body ul, .zefeq-page-body ol { margin: 0 0 1em 1.2em; }
.zefeq-page-body strong { color: var(--fg); }
.pagination, .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; color: var(--fg);
}
.nav-links .page-numbers.current { border-color: var(--accent); color: var(--accent); }

/* ---- the launch notice, where a buy button would be ------------------ */
.launch-box {
  border: 1px solid var(--line); background: var(--bg-raised);
  border-radius: var(--r-sm); padding: clamp(16px, 2vw, 22px);
  display: flex; flex-direction: column; gap: 14px;
}
.launch-head {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ui); font-size: 11px; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--accent);
}
.launch-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 22%, transparent);
  flex: 0 0 auto;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .launch-dot { box-shadow: none; }
}
.launch-note { font-size: 14px; color: var(--fg-muted); margin: 0; max-width: 54ch; }
.launch-actions { display: flex; flex-direction: column; gap: 10px; }
.launch-plain { font-size: 13px; color: var(--fg-faint); margin: 0; }
.launch-copy {
  font-family: var(--ui); color: var(--accent); cursor: pointer;
  border-bottom: 1px dashed currentColor; white-space: nowrap;
}
.launch-copy.copied { color: var(--ok); border-bottom-style: solid; }
.launch-copy.copied::after { content: " \2713"; }

/* ---- payment marks --------------------------------------------------- */
.pay-row { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.pay-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pay-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg);
}
.pay-mark span {
  font-family: var(--ui); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-muted); white-space: nowrap;
}
.pay-mark img { height: 20px; width: auto; display: block; }

/* the three sizes are information here, not a control that buys anything */
.zefeq-prelaunch .fmt { cursor: pointer; }