:root {
  --paper: #f7f1e7;
  --paper-soft: #fbf7f0;
  --paper-bright: #fffdf9;
  --ink: #171411;
  --muted: #736b62;
  --faint: #a39a90;
  --wine: #681727;
  --wine-dark: #4d101d;
  --gold: #a77e32;
  --green: #147d4f;
  --line: rgba(23, 20, 17, .15);
  --line-strong: rgba(23, 20, 17, .28);
  --display: "Instrument Serif", Georgia, serif;
  --body: "Manrope", Arial, sans-serif;
  --arabic: "Noto Kufi Arabic", Arial, sans-serif;
  --page: min(1440px, calc(100% - 7vw));
  --header-height: 76px;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,.72), transparent 28rem),
    var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { font-family: var(--arabic); }
body.has-dialog { overflow: hidden; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

::selection { color: var(--paper-bright); background: var(--wine); }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 1000;
  padding: 11px 15px;
  color: white;
  background: var(--ink);
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.announcement {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 6px 4vw;
  color: #fff8ee;
  background: var(--wine);
  text-align: center;
}

.announcement p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

[dir="rtl"] .announcement p { letter-spacing: 0; }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  width: 100%;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3.5vw;
  border-bottom: 1px solid transparent;
  background: rgba(247, 241, 231, .93);
  backdrop-filter: blur(18px);
  transition: min-height .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}

.site-header.is-scrolled {
  min-height: 64px;
  border-color: var(--line);
  box-shadow: 0 10px 35px rgba(40, 28, 18, .045);
}

.wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
}

.wordmark img {
  width: 58px;
  height: 40px;
  object-fit: contain;
}

.wordmark span {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
}

[dir="rtl"] .wordmark span { font-family: var(--arabic); font-size: 22px; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(25px, 3vw, 52px);
}

.primary-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 15.5px;
  font-weight: 600;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button,
.language-button,
.bag-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100px;
  background: transparent;
}

.icon-button svg { width: 21px; height: 21px; stroke-width: 1.6; }

.language-button {
  gap: 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.language-button__opt { color: var(--faint); transition: color .2s ease; }
.language-button__opt.is-active { color: var(--ink); }
.language-button:hover .language-button__opt:not(.is-active) { color: var(--ink-soft); }
.language-button__sep { color: var(--line-strong); font-weight: 400; }

.bag-button {
  position: relative;
  gap: 8px;
  padding: 0 8px;
  color: var(--ink);
  background: transparent;
  transition: color .2s ease;
}
.bag-button:hover { color: var(--wine); }

.bag-button svg { width: 18px; height: 18px; stroke-width: 1.45; }
.bag-button__label { font-size: 12px; font-weight: 600; }

.bag-button__count {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-inline-start: 1px;
  padding: 0 5px;
  border-radius: 100px;
  color: white;
  background: var(--wine);
  font-size: 10px;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

[dir="rtl"] .eyebrow { letter-spacing: 0; }

.hero {
  width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
  grid-template-areas:
    "copy visual"
    "trust trust";
  column-gap: clamp(36px, 5vw, 86px);
}

.hero__copy {
  grid-area: copy;
  align-self: center;
  max-width: 720px;
  padding: clamp(72px, 8vw, 122px) 0 clamp(62px, 7vw, 100px);
}

.hero h1 {
  max-width: 790px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 5.45vw, 88px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}

[dir="rtl"] .hero h1 {
  font-family: var(--arabic);
  font-size: clamp(39px, 4.6vw, 68px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}

.hero__intro {
  max-width: 610px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.18vw, 17px);
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 32px;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.button:hover { transform: translateY(-2px); }
.button--wine { color: white; background: var(--wine); }
.button--wine:hover { background: var(--wine-dark); }
.button--outline { border-color: var(--line-strong); background: transparent; }
.button--outline:hover { color: white; border-color: var(--ink); background: var(--ink); }
.button--light { color: var(--ink); background: var(--paper-bright); }
.button--whatsapp { color: white; background: var(--green); }
.button--full { width: 100%; }

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
}

.text-link img { width: 18px; height: 18px; }

.hero__visual {
  grid-area: visual;
  position: relative;
  min-height: 590px;
  overflow: hidden;
  isolation: isolate;
}

.hero__visual::after {
  content: "";
  position: absolute;
  inset: 12% 4% 13%;
  z-index: -2;
  background: radial-gradient(circle at 52% 50%, rgba(255,255,255,.94), rgba(224,212,196,.45) 53%, transparent 74%);
}

.hero__panel {
  position: absolute;
  z-index: -3;
  background-color: rgba(226, 215, 199, .55);
  background-image: url("../assets/images/ui/noise.svg");
  background-size: 165px;
}

/* Was two rectangles split down the middle (46%/54%) with different
   opacity — that seam is exactly the "two shades of grey" behind the
   bottle. One continuous panel instead. */
.hero__panel--one,
.hero__panel--two { inset: 0 0 18% 0; }

.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 5% 7% 13%;
  width: 86%;
  height: 82%;
}

.hero__poster {
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 30px 24px rgba(29, 20, 14, .16));
  transition: opacity .5s ease;
}

.hero__canvas {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}

.hero__visual.has-3d .hero__canvas { opacity: 1; }
.hero__visual.has-3d .hero__poster { opacity: 0; }

.hero__product {
  position: absolute;
  inset-inline: 7%;
  inset-block-end: 4%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.hero__product span { font-family: var(--display); font-size: 22px; }
.hero__product small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
[dir="rtl"] .hero__product span { font-family: var(--arabic); font-size: 17px; }
[dir="rtl"] .hero__product small { letter-spacing: 0; }

.trust-row {
  grid-area: trust;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}

.trust-row > div {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px clamp(12px, 2.2vw, 34px);
}

.trust-row > div + div { border-inline-start: 1px solid var(--line); }
.trust-row svg { flex: 0 0 26px; width: 26px; height: 26px; color: var(--gold); stroke-width: 1.35; }
.trust-row p { display: grid; gap: 2px; margin: 0; }
.trust-row strong { font-size: 12px; }
.trust-row span { color: var(--muted); font-size: 11px; }

.catalog,
.reviews,
.order-steps {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(100px, 10vw, 160px) 0 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .55fr);
  align-items: end;
  gap: 8vw;
  margin-bottom: 48px;
}

.section-heading h2,
.gift-feature h2,
.origin h2,
.concierge h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(46px, 5vw, 78px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1;
}

.section-heading h2 em,
.gift-feature h2 em,
.origin h2 em,
.concierge h2 em { color: var(--wine); font-weight: 400; }

[dir="rtl"] .section-heading h2,
[dir="rtl"] .gift-feature h2,
[dir="rtl"] .origin h2,
[dir="rtl"] .concierge h2 {
  font-family: var(--arabic);
  font-size: clamp(35px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.5;
}

[dir="rtl"] .section-heading h2 em,
[dir="rtl"] .gift-feature h2 em,
[dir="rtl"] .origin h2 em,
[dir="rtl"] .concierge h2 em { font-style: normal; }

.section-heading > p {
  max-width: 390px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.catalog-bar {
  min-height: 70px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  border-block: 1px solid var(--line);
}

.category-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 3vw, 44px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 68px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.category-tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--wine);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}

.category-tab.is-active { color: var(--wine); }
.category-tab.is-active::after { transform: scaleX(1); }

.catalog-search-toggle {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
}

.catalog-search-toggle svg { width: 19px; height: 19px; stroke-width: 1.6; }

.catalog-search {
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--line);
}

.catalog-search label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.catalog-search__field {
  max-width: 720px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}

.catalog-search input {
  min-width: 0;
  flex: 1;
  height: 54px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 25px;
}

[dir="rtl"] .catalog-search input { font-family: var(--arabic); font-size: 17px; }
.catalog-search input::placeholder { color: var(--faint); opacity: 1; }

.catalog-search__field button,
.catalog-status button {
  min-height: 44px;
  padding: 0 5px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.catalog-status {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.catalog-status p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

[dir="rtl"] .catalog-status p { letter-spacing: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(22px, 3.3vw, 58px);
  row-gap: clamp(64px, 8vw, 118px);
}

.product-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  text-align: start;
  transition: border-color .35s ease;
}

.product-card:hover,
.product-card:focus-within { border-color: var(--line-strong); }

.product-card__open {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: inherit;
  cursor: pointer;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border-block-end: 1px solid var(--line);
}

/* Scent-family label, framed into the top corner of the image */
.product-card__vibe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  padding: 13px 17px;
  background: var(--paper-soft);
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

[dir="rtl"] .product-card__vibe { letter-spacing: 0; font-size: 11.5px; }

.product-card__image {
  width: 84%;
  height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .55s var(--ease);
}

.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image { transform: scale(1.045); }

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.product-card__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 400;
  line-height: 1.12;
  transition: color .25s ease;
}

[dir="rtl"] .product-card__name { font-family: var(--arabic); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6; }

.product-card:hover .product-card__name,
.product-card:focus-within .product-card__name { color: var(--gold); }

.product-card__size {
  margin-block-start: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

[dir="rtl"] .product-card__size { letter-spacing: 0; font-size: 12.5px; }

/* "Opens with — Aquatic Notes · Cranberry · Resin" */
.product-card__notes {
  margin-block-start: 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.product-card__notes > span {
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

[dir="rtl"] .product-card__notes > span { letter-spacing: 0; font-size: 12px; }

.product-card__meta {
  margin-block-start: auto;
  padding-block-start: 18px;
  padding-block-end: 2px;
  border-block-start: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 11px;
}

/* Leaves room for the absolutely-positioned Add control on the same line */
.product-card__meta { padding-inline-end: 74px; }
[dir="rtl"] .product-card__meta { padding-inline-end: 0; padding-inline-start: 74px; }

.product-card__price {
  font-family: var(--display);
  font-size: clamp(21px, 1.5vw, 26px);
  font-weight: 400;
  letter-spacing: .01em;
}

.product-card__add {
  position: absolute;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  padding: 0 0 4px;
  border: 0;
  border-block-end: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

[dir="rtl"] .product-card__add { letter-spacing: 0; font-size: 12.5px; }

.product-card__add:hover,
.product-card__add:focus-visible { color: var(--gold); border-block-end-color: var(--gold); }

.product-card__sold {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  padding: 13px 17px;
  color: white;
  background: var(--wine);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

[dir="rtl"] .product-card__sold { letter-spacing: 0; }

.product-card.is-sold .product-card__image { opacity: .46; filter: grayscale(.4); }

.catalog-more { display: flex; justify-content: center; margin-top: 88px; }

.empty-state {
  max-width: 560px;
  margin: 70px auto 0;
  text-align: center;
}

.empty-state h3 { margin: 0; font-family: var(--display); font-size: 36px; font-weight: 400; }
.empty-state p { margin: 12px 0 22px; color: var(--muted); }

.gift-feature {
  width: var(--page);
  margin: clamp(120px, 13vw, 210px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  min-height: 660px;
  color: #fff8ef;
  background: var(--wine-dark);
}

.gift-feature__image {
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e9dfd0;
}

.gift-feature__image img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 30px 24px rgba(0,0,0,.18));
  transition: transform .7s var(--ease);
}

.gift-feature:hover .gift-feature__image img { transform: scale(1.035); }

.gift-feature__copy {
  align-self: center;
  max-width: 720px;
  padding: clamp(60px, 7vw, 112px);
}

.gift-feature .eyebrow { color: #d5b36b; }
.gift-feature h2 em { color: #e0c17e; }
.gift-feature__copy > p:not(.eyebrow) { max-width: 570px; margin: 28px 0 34px; color: rgba(255,248,239,.72); line-height: 1.8; }

.origin {
  width: var(--page);
  margin: clamp(120px, 13vw, 210px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  padding-block: clamp(75px, 8vw, 120px);
  border-block: 1px solid var(--line);
}

.origin__body > p { max-width: 580px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }

.origin__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 50px;
}

.origin__facts div { padding-top: 18px; border-top: 1px solid var(--line); }
.origin__facts strong { display: block; font-family: var(--display); font-size: 52px; font-weight: 400; line-height: 1; }
.origin__facts span { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; }

.review-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 23vw, 330px);
  gap: 18px;
  overflow-x: auto;
  padding: 0 0 22px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--line-strong) transparent;
}

.review-card {
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.review-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.review-card:hover img { transform: scale(1.02); }

.review-card::after {
  content: "+";
  position: absolute;
  inset-inline-end: 12px;
  inset-block-end: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: white;
  background: rgba(23,20,17,.86);
  font-size: 19px;
}

.order-steps { padding-bottom: clamp(100px, 11vw, 170px); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.steps li { min-height: 230px; padding: 25px clamp(18px, 3vw, 46px) 32px; }
.steps li + li { border-inline-start: 1px solid var(--line); }
.steps li > span { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.steps strong { display: block; margin-top: 60px; font-family: var(--display); font-size: 27px; font-weight: 400; }
[dir="rtl"] .steps strong { font-family: var(--arabic); font-size: 18px; }
.steps p { max-width: 290px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.concierge {
  width: min(1060px, calc(100% - 9vw));
  margin: 0 auto clamp(100px, 11vw, 170px);
  padding: clamp(60px, 8vw, 105px);
  text-align: center;
  background: var(--paper-bright);
  box-shadow: 0 30px 90px rgba(39, 25, 15, .065);
}

.concierge h2 { max-width: 760px; margin-inline: auto; }
.concierge > p:not(.eyebrow) { max-width: 580px; margin: 24px auto 30px; color: var(--muted); }
.concierge .button { margin-inline: auto; }
.concierge .button img { filter: brightness(0) invert(1); }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  padding: 64px 4vw 30px;
  color: rgba(255,255,255,.82);
  background: var(--ink);
}

.wordmark--footer span { color: white; font-size: 34px; }
.site-footer__brand p { margin: 13px 0 0; color: rgba(255,255,255,.48); font-size: 11px; }
.site-footer nav { display: flex; align-items: start; gap: clamp(22px, 3vw, 45px); padding-top: 8px; font-size: 12px; }
.site-footer nav a:hover { color: white; }
.site-footer__legal { grid-column: 1 / -1; margin: 48px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.58); font-size: 10px; }

.dialog-veil {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 3vw;
  overflow: auto;
  background: rgba(18, 13, 10, .68);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .28s ease;
}

.dialog-veil.is-open { opacity: 1; }

.product-dialog {
  position: relative;
  width: min(1080px, 100%);
  max-height: 92svh;
  overflow: auto;
  background: var(--paper-bright);
  box-shadow: 0 35px 100px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(20px) scale(.99);
  transition: opacity .28s ease, transform .35s var(--ease);
}

.dialog-veil.is-open .product-dialog { opacity: 1; transform: none; }

.dialog-close {
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper-bright);
}

.dialog-close svg { width: 18px; height: 18px; stroke-width: 1.35; }
.product-dialog > .dialog-close { position: sticky; inset-block-start: 14px; float: inline-end; margin: 14px 14px -60px; }

.product-view { display: grid; grid-template-columns: 1.04fr .96fr; min-height: 680px; }
.product-view__gallery { min-width: 0; padding: 66px 45px 42px; background: #eee5d8; }
.product-view__main { width: 100%; height: 480px; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(34,23,16,.14)); }
.product-view__thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.product-view__thumb { width: 64px; height: 64px; padding: 4px; border: 1px solid transparent; background: rgba(255,255,255,.5); }
.product-view__thumb[aria-pressed="true"] { border-color: var(--ink); }
.product-view__thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-view__info { align-self: center; padding: 75px clamp(35px, 5vw, 72px) 55px; }
.product-view__vibe { margin: 0 0 12px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
[dir="rtl"] .product-view__vibe { letter-spacing: 0; }
.product-view__name { margin: 0; font-family: var(--display); font-size: clamp(45px, 4.5vw, 68px); font-weight: 400; line-height: .95; }
[dir="rtl"] .product-view__name { font-family: var(--arabic); font-size: clamp(30px, 3.5vw, 49px); line-height: 1.5; }
.product-view__size { margin: 13px 0 0; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
[dir="rtl"] .product-view__size { letter-spacing: 0; }
.product-view__price { margin: 22px 0 0; font-family: var(--display); font-size: 32px; }

.note-pyramid { margin-top: 32px; border-top: 1px solid var(--line); }
.note-pyramid__row { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.note-pyramid__label { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.note-pyramid__value { color: var(--muted); font-size: 12px; line-height: 1.7; }
[dir="rtl"] .note-pyramid__label { letter-spacing: 0; }
.product-view__description { margin: 25px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; white-space: pre-line; }

.product-view__purchase { margin-top: 32px; }
.quantity { width: 138px; height: 46px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1px solid var(--line-strong); }
.quantity button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 18px; }
.quantity output { text-align: center; font-size: 12px; font-weight: 700; }
.product-view__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.product-view__sold { color: var(--wine); font-size: 12px; font-weight: 700; }

.dialog-veil--drawer {
  place-items: stretch end;
  padding: 0;
  background: rgba(18,13,10,.52);
}

.bag-drawer {
  width: min(470px, 100vw);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--paper-bright);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
}

[dir="rtl"] .bag-drawer { transform: translateX(-100%); }
.dialog-veil.is-open .bag-drawer { transform: translateX(0); }

.bag-drawer__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
  padding: 30px 26px 24px;
  border-bottom: 1px solid var(--line);
}

.bag-drawer__header .eyebrow { margin-bottom: 7px; }
.bag-drawer__header h2 { margin: 0; font-family: var(--display); font-size: 38px; font-weight: 400; line-height: 1; }
[dir="rtl"] .bag-drawer__header h2 { font-family: var(--arabic); font-size: 27px; line-height: 1.4; }

.bag-drawer__items { min-height: 0; overflow-y: auto; padding: 8px 26px; }

.bag-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.bag-item__image { width: 88px; height: 104px; object-fit: contain; }
.bag-item__name { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.1; }
[dir="rtl"] .bag-item__name { font-family: var(--arabic); font-size: 14px; line-height: 1.6; }
.bag-item__meta { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.bag-item__controls { display: grid; justify-items: end; gap: 12px; }
.bag-item__quantity { display: grid; grid-template-columns: 40px 28px 40px; align-items: center; }
.bag-item__quantity button { width: 40px; height: 44px; border: 1px solid var(--line); background: transparent; }
.bag-item__quantity span { text-align: center; font-size: 11px; font-weight: 700; }
.bag-item__remove { min-height: 32px; padding: 0; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; }

.bag-empty { height: 100%; display: grid; place-content: center; justify-items: center; padding: 45px; text-align: center; }
.bag-empty svg { width: 46px; height: 46px; color: var(--gold); stroke-width: 1.1; }
.bag-empty h3 { margin: 20px 0 7px; font-family: var(--display); font-size: 30px; font-weight: 400; }
.bag-empty p { max-width: 290px; margin: 0 0 22px; color: var(--muted); font-size: 12px; }

.bag-drawer__footer { padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.bag-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 12px; }
.bag-total strong { font-family: var(--display); font-size: 28px; font-weight: 400; }
.bag-drawer__footer > p { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; text-align: center; }
.bag-drawer__footer .button img { filter: brightness(0) invert(1); }

.lightbox-veil { padding: 28px; }
.lightbox { position: relative; max-width: min(660px, 92vw); max-height: 90svh; margin: 0; padding: 14px; background: var(--paper-bright); opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .3s var(--ease); }
.dialog-veil.is-open .lightbox { opacity: 1; transform: none; }
.lightbox .dialog-close { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; }
.lightbox > img { max-width: 100%; max-height: calc(90svh - 28px); object-fit: contain; }

.whatsapp-fab {
  position: fixed;
  inset-inline-end: max(20px, env(safe-area-inset-right));
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 12px 30px rgba(9,75,45,.23);
  transition: transform .25s var(--ease);
}

.whatsapp-fab:hover { transform: translateY(-3px); }
.whatsapp-fab img { width: 23px; height: 23px; filter: brightness(0) invert(1); }

.toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: 24px;
  z-index: 700;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  color: white;
  background: var(--ink);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .25s ease, transform .3s var(--ease);
}

[dir="rtl"] .toast { transform: translate(50%, 18px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .toast.is-visible { transform: translate(50%, 0); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --page: min(100% - 48px, 1180px); }
  .primary-nav { gap: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr); column-gap: 30px; }
  .hero__visual { min-height: 540px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gift-feature { min-height: 590px; }
  .gift-feature__copy { padding: 58px; }
}

@media (max-width: 820px) {
  :root { --header-height: 68px; --page: calc(100% - 36px); }
  .site-header { grid-template-columns: 1fr auto; min-height: var(--header-height); padding-inline: 18px; }
  .primary-nav { display: none; }
  .header-actions { grid-column: 2; }
  .header-search { display: none; }
  .wordmark img { width: 48px; height: 34px; }
  .wordmark span { font-size: 25px; }
  .bag-button__label { display: none; }
  .bag-button { padding-inline: 12px; }

  .hero {
    width: 100%;
    grid-template-columns: minmax(0, 1.05fr) minmax(155px, .95fr);
    column-gap: 0;
  }
  .hero__copy { padding: 56px 0 42px 18px; }
  [dir="rtl"] .hero__copy { padding: 56px 18px 42px 0; }
  .hero h1 { font-size: clamp(38px, 9.5vw, 59px); line-height: .98; }
  [dir="rtl"] .hero h1 { font-size: clamp(29px, 7vw, 43px); line-height: 1.55; }
  .hero__intro { margin-top: 20px; font-size: 13px; line-height: 1.65; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 24px; }
  .hero__actions .button { min-width: 175px; }
  .hero__visual { min-height: 520px; }
  .hero__poster, .hero__canvas { inset: 7% 0 17%; width: 100%; height: 76%; }
  .hero__product { inset-inline: 9%; flex-direction: column; align-items: flex-start; gap: 1px; }
  .hero__product span { font-size: 18px; }
  .hero__product small { font-size: 7px; letter-spacing: .1em; }
  .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-row > div { min-height: 90px; align-items: flex-start; gap: 8px; padding: 18px 10px; }
  .trust-row svg { flex-basis: 20px; width: 20px; height: 20px; }
  .trust-row strong { font-size: 9px; line-height: 1.35; }
  .trust-row span { font-size: 8px; line-height: 1.45; }

  .catalog, .reviews, .order-steps { padding-top: 95px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .section-heading h2, .gift-feature h2, .origin h2, .concierge h2 { font-size: clamp(42px, 11vw, 60px); }
  [dir="rtl"] .section-heading h2, [dir="rtl"] .gift-feature h2, [dir="rtl"] .origin h2, [dir="rtl"] .concierge h2 { font-size: clamp(30px, 8vw, 44px); }
  .section-heading > p { font-size: 12px; }
  .catalog-bar { min-height: 62px; }
  .category-tab, .catalog-search-toggle { min-height: 60px; }
  .category-tabs { gap: 25px; }
  .catalog-search-toggle { min-width: 82px; }
  .catalog-search-toggle span { display: none; }
  .catalog-status { min-height: 54px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 60px; }
  .product-card__media { aspect-ratio: .84 / 1; }
  .product-card__name { font-size: clamp(19px, 5.6vw, 24px); }
  [dir="rtl"] .product-card__name { font-size: clamp(13px, 4vw, 17px); }
  .product-card__add {
    inset-inline-start: auto;
    inset-inline-end: 3px;
    inset-block-end: 55px;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    opacity: 1;
    transform: none;
  }
  [dir="rtl"] .product-card__add { transform: none; }
  .product-card__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .product-card:hover .product-card__add, .product-card:focus-within .product-card__add,
  [dir="rtl"] .product-card:hover .product-card__add, [dir="rtl"] .product-card:focus-within .product-card__add { transform: none; }
  .product-card__price { font-size: 13px; }
  .product-card__size { font-size: 8px; }

  .gift-feature { width: 100%; grid-template-columns: 1fr; min-height: 0; }
  .gift-feature__image { min-height: 460px; }
  .gift-feature__copy { padding: 66px 24px 72px; }
  .origin { grid-template-columns: 1fr; gap: 44px; }
  .origin__facts strong { font-size: 43px; }
  .review-rail { grid-auto-columns: min(76vw, 300px); }
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 170px; padding-inline: 8px; }
  .steps li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .steps strong { margin-top: 36px; }
  .concierge { width: calc(100% - 36px); padding: 60px 24px; }
  .site-footer { grid-template-columns: 1fr; gap: 35px; padding-inline: 24px; }
  .site-footer nav { flex-wrap: wrap; }
  .site-footer__legal { margin-top: 10px; }

  .dialog-veil { padding: 12px; align-items: end; }
  .product-dialog { width: 100%; max-height: 94svh; }
  .product-view { grid-template-columns: 1fr; min-height: 0; }
  .product-view__gallery { padding: 50px 24px 25px; }
  .product-view__main { height: min(40svh, 350px); }
  .product-view__info { padding: 40px 24px 35px; }
  .product-view__name { font-size: 48px; }
  [dir="rtl"] .product-view__name { font-size: 31px; }
  .product-view__buttons { grid-template-columns: 1fr; }
  .product-dialog > .dialog-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; margin: 0; float: none; }
  .dialog-veil--drawer { padding: 0; align-items: stretch; }
  .bag-item { grid-template-columns: 72px minmax(0, 1fr); }
  .bag-item__image { width: 72px; height: 92px; }
  .bag-item__controls { grid-column: 2; grid-row: 2; grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .bag-item__remove { justify-self: end; }
  .whatsapp-fab { width: 48px; height: 48px; inset-inline-end: 16px; inset-block-end: 16px; }
}

@media (max-width: 520px) {
  .announcement p { font-size: 9px; letter-spacing: .09em; }
  .language-button { min-width: 48px; padding-inline: 8px; font-size: 10px; }
  .wordmark { gap: 5px; }
  .wordmark img { width: 29px; height: 24px; }
  .wordmark span { font-size: 23px; }
  .header-actions { gap: 4px; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(145px, .9fr); }
  .hero__copy { padding-top: 43px; }
  .hero__eyebrow { max-width: 190px; }
  .hero h1 { font-size: clamp(35px, 9vw, 44px); }
  .hero__intro { max-width: 235px; }
  .hero__visual { min-height: 475px; }
  .hero__poster, .hero__canvas { inset-block-start: 9%; inset-block-end: 20%; height: 71%; }
  .hero__product { inset-block-end: 5%; }
  .hero__product small { display: none; }
  .trust-row p { gap: 4px; }
  .trust-row > div { flex-direction: column; }
  .catalog, .reviews, .order-steps { width: calc(100% - 32px); }
  .product-grid { column-gap: 12px; }
  .product-card__image { width: 96%; height: 96%; }
  .product-card__name { font-size: 20px; }
  .product-card__meta { gap: 8px; }
  .product-card__size { padding-inline-start: 9px; letter-spacing: .09em; }
  .catalog-more { margin-top: 64px; }
  .origin { width: calc(100% - 32px); }
  .origin__facts { gap: 12px; }
  .origin__facts span { font-size: 9px; }
}

@media (hover: none) {
  .product-card__add { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__canvas { display: none; }
  .hero__poster { opacity: 1 !important; }
}

/* ── Product dialog: match the framed card language ────────────────────────
   Vibe gets the same boxed treatment as the card badge; the purchase
   buttons stack full-width with uppercase labels, and "Add to bag" is the
   primary black action (WhatsApp keeps its brand green as the secondary). */
.product-view__vibe {
  display: inline-block;
  margin: 0 0 20px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  color: var(--ink);
  line-height: 1;
}

.product-view__buttons {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.product-view__buttons .button {
  min-height: 56px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

[dir="rtl"] .product-view__buttons .button { letter-spacing: 0; font-size: 13px; }

/* Primary action reads as ink, not wine, so it doesn't compete with the
   WhatsApp green sitting directly beneath it. */
.product-view__buttons .button--wine { background: var(--ink); }
.product-view__buttons .button--wine:hover { background: #000; }
.product-view__buttons .button:hover { transform: none; }

/* ── Hero 3D: drag-to-spin cursor + ingredient note labels ─────────────────
   Uses the same small-caps/hairline language as the product cards so the
   3D scene reads as part of the site rather than an embedded widget. */
.hero__visual.has-3d .hero__canvas { cursor: grab; touch-action: pan-y; }
.hero__visual.has-3d.is-grabbing .hero__canvas { cursor: grabbing; }

.hero__note-label {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, calc(-100% - 16px));
  padding: 10px 14px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}

.hero__note-label.is-visible { opacity: 1; }

.hero__note-label strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
}

[dir="rtl"] .hero__note-label strong { font-family: var(--arabic); font-size: 14px; }

.hero__note-label span {
  display: block;
  margin-block-start: 3px;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

[dir="rtl"] .hero__note-label span { letter-spacing: 0; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .hero__note-label { transition: none; }
}

/* ═══ Card compaction ═══════════════════════════════════════════════════════
   Notes line and the card-level Add button are gone — adding happens inside
   the product dialog. Price and size now share one row so each card is much
   shorter, which is what makes the grid workable on a phone. */
.product-card__notes { display: none; }
.product-card__add { display: none; }

.product-card__body { padding: 16px 18px 18px; }

.product-card__meta {
  margin-block-start: 12px;
  padding-block-start: 0;
  padding-inline-end: 0;
  border-block-start: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

[dir="rtl"] .product-card__meta { padding-inline-start: 0; }

.product-card__price { font-size: clamp(18px, 1.25vw, 22px); }

.product-card__size {
  margin-block-start: 0;
  position: relative;
  padding-inline-start: 11px;
  font-size: 10px;
}

/* hairline divider between price and size */
.product-card__size::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 2px;
  width: 1px;
  background: var(--line-strong);
}

.product-card__vibe { padding: 10px 13px; font-size: 9px; }

/* Tighter still on phones */
@media (max-width: 620px) {
  .product-grid { column-gap: 12px; row-gap: 16px; }
  .product-card__body { padding: 12px 13px 14px; }
  .product-card__name { font-size: 16px; }
  .product-card__meta { margin-block-start: 9px; gap: 8px; }
  .product-card__price { font-size: 16px; }
  .product-card__size { font-size: 9px; padding-inline-start: 9px; }
  .product-card__vibe { padding: 7px 10px; font-size: 8px; letter-spacing: .1em; }
}

/* ═══ Gift feature slideshow ════════════════════════════════════════════════
   Cross-fades Irth Box → Tobacco Box → Musk Box 12. Slides are stacked, so
   the container keeps the height of the first (in-flow) image. */
#giftSlideshow { position: relative; }

#giftSlideshow .gift-slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}

#giftSlideshow .gift-slide:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#giftSlideshow .gift-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #giftSlideshow .gift-slide { transition: none; }
}

/* ── Larger wordmark ───────────────────────────────────────────────────────
   Scaled up across every breakpoint. The header uses min-height rather than a
   fixed height, so it absorbs the taller mark without clipping. */
.wordmark img { width: 74px; height: 52px; }
.wordmark span { font-size: 42px; }
[dir="rtl"] .wordmark span { font-size: 34px; }

@media (max-width: 900px) {
  .wordmark img { width: 63px; height: 44px; }
  .wordmark span { font-size: 36px; }
  [dir="rtl"] .wordmark span { font-size: 29px; }
}

@media (max-width: 620px) {
  .wordmark { gap: 8px; }
  .wordmark img { width: 53px; height: 37px; }
  .wordmark span { font-size: 31px; }
  [dir="rtl"] .wordmark span { font-size: 25px; }
}

/* Very small phones: keep the mark prominent but let the header breathe */
@media (max-width: 400px) {
  .wordmark { gap: 6px; }
  .wordmark img { width: 41px; height: 29px; }
  .wordmark span { font-size: 24px; }
  [dir="rtl"] .wordmark span { font-size: 20px; }
  .header-actions { gap: 3px; }
}

/* ── Phone hero: stack instead of side-by-side ─────────────────────────────
   The two-column hero left the 3D canvas ~176px wide (aspect 0.42) on a
   390px phone — too narrow to drag, and the ingredient notes had nowhere to
   sit without clipping. Stacking gives the scene the full column width. */
@media (max-width: 620px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "trust";
    row-gap: 0;
  }

  .hero__copy { padding: 40px 22px 30px; max-width: none; }
  .hero__intro { max-width: none; }
  .hero__eyebrow { max-width: none; }
  .hero h1 { font-size: clamp(34px, 8.6vw, 46px); }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 22px;
  }
  .hero__actions .button { min-width: 0; }

  .hero__visual {
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: 100%;
    margin-inline: auto;
  }

  .hero__poster,
  .hero__canvas {
    inset: 4% 0 12%;
    width: 100%;
    height: 84%;
  }

  .hero__product {
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .hero__product small { display: block; font-size: 8px; letter-spacing: .12em; }
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME WHEEL — first-visit offer
   Same dialog language as product/bag dialogs: hairline border,
   no rounded corners, no glow. The wheel itself is the one place a
   conic-gradient is structural (drawing a wheel), not decorative.
   ═══════════════════════════════════════════════════════════════ */

.wheel-dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: 92svh;
  overflow: auto;
  padding: 48px 36px 40px;
  background: var(--paper-bright);
  text-align: center;
  box-shadow: 0 35px 100px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(20px) scale(.99);
  transition: opacity .28s ease, transform .35s var(--ease);
}
.wheel-veil.is-open .wheel-dialog { opacity: 1; transform: none; }
.wheel-dialog > .dialog-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }

.wheel-dialog h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 400;
  line-height: 1.1;
}
[dir="rtl"] .wheel-dialog h2 { font-family: var(--arabic); font-size: clamp(21px, 2.8vw, 26px); font-weight: 500; }
.wheel-dialog > .wheel-dialog__intro > p:not(.eyebrow),
.wheel-dialog__result > p:not(.eyebrow) {
  margin: 0 auto 28px;
  max-width: 34ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.wheel-stage {
  position: relative;
  width: 232px;
  height: 232px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
}

.wheel__label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform-origin: 0 0;
  margin-inline-start: -22px;
  margin-block-start: -14px;
  width: 44px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--ink);
  text-align: center;
  pointer-events: none;
}
.wheel__label--small { font-size: 8.5px; letter-spacing: 0; }

.wheel-pointer {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -4px;
  z-index: 3;
  width: 0;
  height: 0;
  margin-inline-start: -9px;
  border-inline-start: 9px solid transparent;
  border-inline-end: 9px solid transparent;
  border-block-start: 16px solid var(--wine);
}

.wheel-hub {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  margin-inline-start: -36px;
  margin-block-start: -36px;
  border-radius: 50%;
  border: 3px solid var(--paper-bright);
  background: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  color: var(--paper-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
[dir="rtl"] .wheel-hub { letter-spacing: 0; font-size: 13px; }
.wheel-hub:hover { transform: scale(1.05); background: var(--wine); }
.wheel-hub:active { transform: scale(.97); }

.wheel-dialog__result { padding-top: 4px; }
.wheel-code {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 26px;
  padding: 12px 22px;
  border: 1px dashed var(--line-strong);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .06em;
}

/* ── Bag drawer discount line ── */
.bag-discount {
  margin: -8px 0 16px;
  color: var(--wine);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 620px) {
  .wheel-dialog { padding: 40px 22px 32px; }
  .wheel-stage { width: 200px; height: 200px; }
  .wheel-hub { width: 62px; height: 62px; margin-inline-start: -31px; margin-block-start: -31px; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel { transition-duration: .01ms !important; }
}

/* ── "$44 → $40" sale pricing — same treatment everywhere it appears ── */
.price-was {
  color: var(--muted);
  font-weight: 500;
  font-size: .78em;
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.price-now {
  color: var(--wine);
  font-weight: 800;
  text-decoration: none;
}
.product-view__price .price-was,
.product-view__price .price-now { font-family: var(--body); font-size: .5em; vertical-align: middle; }
.product-view__price .price-now { font-size: .62em; }

/* ── Wheel reminder — bottom-left, opposite the WhatsApp FAB ──
   Shown only when the visitor closed the wheel without spinning: the
   offer is still theirs, this is the way back in. Disappears the moment
   they actually spin (win or soft outcome — the decision is made either
   way, nothing left to remind them of). */
.wheel-reminder {
  position: fixed;
  inset-inline-start: max(20px, env(safe-area-inset-left));
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 4px;
  background: var(--paper-bright);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  transition: transform .25s var(--ease);
}
.wheel-reminder:hover { transform: translateY(-3px); }

.wheel-reminder__dial {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: conic-gradient(
    var(--paper-bright) 0deg 42deg, var(--gold) 42deg 45deg,
    var(--paper-bright) 45deg 87deg, var(--gold) 87deg 90deg,
    var(--paper-bright) 90deg 132deg, var(--gold) 132deg 135deg,
    var(--paper-bright) 135deg 177deg, var(--gold) 177deg 180deg,
    var(--paper-bright) 180deg 222deg, var(--gold) 222deg 225deg,
    var(--paper-bright) 225deg 267deg, var(--gold) 267deg 270deg,
    var(--paper-bright) 270deg 312deg, var(--gold) 312deg 315deg,
    var(--paper-bright) 315deg 357deg, var(--gold) 357deg 360deg
  );
  animation: wheelReminderSpin 6s linear infinite;
}
/* Center hub dot — rides along on the dial so it rotates too, but a
   centered circle looks identical at any rotation, so that's invisible. */
.wheel-reminder__dial::after {
  content: '';
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--wine);
}

@keyframes wheelReminderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-reminder__dial { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO OFFER CAROUSEL
   Replaces the 3D bottle. The offer art is a finished landscape
   banner, so it's never cropped — the frame takes the image's own
   3:2 ratio and `contain` guarantees the text stays readable.
   ═══════════════════════════════════════════════════════════════ */

.hero__visual--offers {
  /* override the tall square-bottle frame from every breakpoint */
  min-height: 0;
  aspect-ratio: 3 / 2;
  align-self: center;
  overflow: visible;
}
.hero__visual--offers::after { content: none; } /* kill the bottle's radial glow */

.offers {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper-soft);
  touch-action: pan-y;
}

.offers__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .7s var(--ease);
  pointer-events: none;
}
.offers__slide.is-active { opacity: 1; pointer-events: auto; }
.offers__slide img { width: 100%; height: 100%; object-fit: contain; }

.offers__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.offers__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: .45;
  transition: opacity .25s ease, transform .25s var(--ease);
}
.offers__dot.is-active { opacity: 1; transform: scale(1.3); background: var(--wine); }

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

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — promo strip + header as ONE sticky unit
   Previously the wine promo bar and the header were two separate
   stacked bars, which read as "two headers" at the top of the page.
   Now they stick together, and the strip collapses to nothing once
   scrolling starts, leaving a single compact bar.
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}

/* the header no longer sticks on its own — the wrapper does */
.site-header { position: static; }

/* Slimmer strip so it reads as a ribbon attached to the header,
   not a second header competing with it. */
.announcement {
  min-height: 0;
  padding: 7px 4vw;
  overflow: hidden;
  transition: max-height .32s var(--ease), padding .32s var(--ease), opacity .22s ease;
  max-height: 40px;
}
.announcement p { font-size: 10.5px; }

/* Collapsed once the visitor scrolls — one bar from here down. */
.topbar.is-scrolled .announcement {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
}

@media (max-width: 620px) {
  .announcement { padding-inline: 16px; max-height: 44px; }
  .announcement p { font-size: 9.5px; letter-spacing: .08em; }
}

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

/* ── Catalog filter tabs ──────────────────────────────────────────
   These sit right above the product grid and were styled as a small
   secondary control (12px, thin). Scaled up and given a clearer
   active state so the row reads as a deliberate filter bar rather
   than a faint afterthought. */
.catalog-bar { min-height: 78px; }

.category-tab {
  min-height: 76px;
  font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--muted);
  transition: color .22s ease;
}
[dir="rtl"] .category-tab {
  font-family: var(--arabic);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 500;
}

.category-tab:hover { color: var(--ink); }
.category-tab.is-active { color: var(--ink); }
.category-tab::after { height: 2px; background: var(--wine); }

.catalog-search-toggle { font-size: 13px; }

@media (max-width: 620px) {
  .catalog-bar { min-height: 62px; }
  .category-tab { min-height: 60px; font-size: 17px; }
  [dir="rtl"] .category-tab { font-size: 14px; }
}