@font-face {
  font-family: "Viola Arabic";
  src: url("assets/fonts/noto-sans-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Viola Serif";
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #241914;
  --ink-soft: #5c5048;
  --ink-muted: #75685f;
  --paper: #faf7f0;
  --paper-deep: #eee6d9;
  --surface: #fffdf9;
  --surface-strong: #ffffff;
  --chocolate: #21150f;
  --chocolate-2: #35221a;
  --plum: #4a243c;
  --plum-deep: #2c1725;
  --brass: #b48642;
  --brass-dark: #76501c;
  --brass-light: #ead2a2;
  --gold: var(--brass);
  --gold-dark: var(--brass-dark);
  --line: rgba(61, 42, 31, 0.16);
  --line-strong: rgba(61, 42, 31, 0.28);
  --success: #315d49;
  --danger: #8a342d;
  --shadow-soft: 0 18px 50px rgba(38, 25, 17, 0.1);
  --shadow-high: 0 28px 80px rgba(31, 18, 12, 0.2);
  --container: min(100% - 2rem, 88rem);
  --header-height: 4.5rem;
  --dock-height: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-arabic-display: "Viola Arabic", system-ui, sans-serif;
}

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

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-width: 20rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.72), transparent 25rem),
    var(--paper);
  color: var(--ink);
  font-family: "Viola Arabic", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  color: inherit;
}

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

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

::selection {
  background: var(--brass-light);
  color: var(--chocolate);
}

:focus-visible {
  outline: 3px solid #8b5f22;
  outline-offset: 3px;
}

.site-header :focus-visible,
.mobile-dock :focus-visible {
  outline-color: #76501c;
}

.site-footer :focus-visible {
  outline-color: #f3d69c;
}

dialog .button--primary:focus-visible {
  outline-color: #f3d69c;
  box-shadow: 0 0 0 2px var(--chocolate);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

html.brand-intro-eligible,
html.brand-intro-eligible body {
  overflow: hidden;
}

.brand-intro {
  --intro-duration: 12.8s;
  position: fixed;
  z-index: 5000;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  display: none;
  background: #032f25;
  color: #fffaf0;
  clip-path: inset(0);
}

html.brand-intro-eligible .brand-intro,
.brand-intro[open] {
  display: grid;
}

.brand-intro[open] {
  animation: none;
}

.brand-intro::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.brand-intro__stage,
.brand-intro__backdrop,
.brand-intro__atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-intro__stage {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 56%, rgba(202, 158, 82, 0.24), transparent 32%),
    linear-gradient(135deg, #021d17, #064a38 46%, #021d17);
}

.brand-intro__backdrop {
  z-index: -3;
  border: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0.76;
  transform: scale(1.055);
  filter: saturate(0.94) contrast(1.04);
}

.brand-intro[data-state="playing"] .brand-intro__backdrop {
  animation: brand-intro-camera var(--intro-duration) cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.brand-intro__stage::before,
.brand-intro__stage::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.brand-intro__stage::before {
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(1, 21, 16, 0.54), transparent 24%),
    linear-gradient(to top, rgba(1, 18, 14, 0.78), transparent 31%),
    radial-gradient(circle at 50% 47%, transparent 0 23%, rgba(1, 22, 17, 0.1) 52%, rgba(1, 16, 12, 0.42) 100%);
}

.brand-intro__stage::after {
  inset: -28% -12%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 232, 177, 0.16) 49%, transparent 59%);
  transform: translateX(-65%) rotate(-4deg);
  opacity: 0;
}

.brand-intro[data-state="playing"] .brand-intro__stage::after {
  animation: brand-intro-light-sweep 4.8s 1.1s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}

.brand-intro__atmosphere {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand-intro__atmosphere i {
  --particle-x: 50%;
  --particle-y: 50%;
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #f1d49b;
  box-shadow: 0 0 1rem rgba(241, 212, 155, 0.9);
  opacity: 0;
}

.brand-intro__atmosphere i:nth-child(1) { --particle-x: 34%; --particle-y: 65%; --drift: -1.8rem; }
.brand-intro__atmosphere i:nth-child(2) { --particle-x: 42%; --particle-y: 34%; --drift: 1.2rem; }
.brand-intro__atmosphere i:nth-child(3) { --particle-x: 57%; --particle-y: 58%; --drift: -0.8rem; }
.brand-intro__atmosphere i:nth-child(4) { --particle-x: 64%; --particle-y: 27%; --drift: 1.7rem; }
.brand-intro__atmosphere i:nth-child(5) { --particle-x: 48%; --particle-y: 76%; --drift: 1rem; }
.brand-intro__atmosphere i:nth-child(6) { --particle-x: 72%; --particle-y: 69%; --drift: -1.2rem; }

.brand-intro[data-state="playing"] .brand-intro__atmosphere i {
  animation: brand-intro-particle 5.4s calc(1.1s + var(--particle-delay, 0s)) ease-in-out infinite;
}

.brand-intro__atmosphere i:nth-child(2) { --particle-delay: 0.7s; }
.brand-intro__atmosphere i:nth-child(3) { --particle-delay: 1.4s; }
.brand-intro__atmosphere i:nth-child(4) { --particle-delay: 2.1s; }
.brand-intro__atmosphere i:nth-child(5) { --particle-delay: 2.8s; }
.brand-intro__atmosphere i:nth-child(6) { --particle-delay: 3.5s; }

.brand-intro__composition {
  position: absolute;
  z-index: 2;
  inset: max(5.2rem, 9vh) max(1.5rem, 5vw) max(8.6rem, 15vh);
  width: min(69rem, calc(100% - max(3rem, 10vw)));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 0.9fr);
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 5.5rem);
  direction: ltr;
}

.brand-intro__emblem {
  position: relative;
  width: min(100%, clamp(20rem, 34vw, 29rem));
  aspect-ratio: 1.2;
  justify-self: end;
  opacity: 0;
  transform: translateY(1.35rem) scale(0.94);
}

.brand-intro[data-state="playing"] .brand-intro__emblem {
  animation: brand-intro-emblem-in 1.15s 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.brand-intro__map {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1.2rem 2rem rgba(0, 18, 12, 0.38));
}

.brand-intro__map-fill {
  fill: rgba(0, 72, 51, 0.72);
  opacity: 0;
}

.brand-intro[data-state="playing"] .brand-intro__map-fill {
  animation: brand-intro-map-fill 2.1s 1.15s ease-out both;
}

.brand-intro__map-outline,
.brand-intro__route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.brand-intro__map-outline {
  stroke: #efd298;
  stroke-width: 3.1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 0.45rem rgba(239, 210, 152, 0.65));
}

.brand-intro[data-state="playing"] .brand-intro__map-outline {
  animation: brand-intro-line-draw 2.7s 1.05s cubic-bezier(0.33, 0.1, 0.27, 1) both;
}

.brand-intro__route {
  stroke: rgba(238, 202, 132, 0.66);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.brand-intro[data-state="playing"] .brand-intro__route--one {
  animation: brand-intro-line-draw 1.55s 2.65s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__route--two {
  animation: brand-intro-line-draw 1.6s 3.05s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__route--three {
  animation: brand-intro-line-draw 1.65s 3.4s ease-out both;
}

.brand-intro__nodes circle {
  fill: #fff1c9;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 0.55rem rgba(255, 235, 184, 0.95));
}

.brand-intro[data-state="playing"] .brand-intro__nodes circle {
  animation: brand-intro-node-in 0.75s calc(3s + (var(--node) * 0.22s)) ease-out both;
}

.brand-intro__national-seal {
  position: absolute;
  left: 50%;
  top: 51%;
  width: clamp(6.9rem, 10.5vw, 9rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 0.08rem;
  border: 1px solid rgba(239, 210, 152, 0.82);
  border-radius: 50%;
  background: rgba(3, 72, 52, 0.88);
  color: #f8dfac;
  box-shadow:
    inset 0 0 0 0.32rem rgba(4, 58, 43, 0.72),
    inset 0 0 0 0.4rem rgba(239, 210, 152, 0.36),
    0 1.1rem 2.8rem rgba(0, 20, 14, 0.34);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72) rotate(-5deg);
}

.brand-intro__national-seal span {
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.brand-intro__national-seal strong {
  font-family: "Viola Arabic", "Viola Sans", sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 0.88;
}

.brand-intro[data-state="playing"] .brand-intro__national-seal {
  animation: brand-intro-seal-in 1.35s 4.15s cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.brand-intro__story {
  direction: rtl;
  align-self: center;
  text-align: right;
}

.brand-intro__kicker,
.brand-intro__wordmark,
.brand-intro__headline,
.brand-intro__message {
  opacity: 0;
  transform: translateY(1.1rem);
}

.brand-intro__kicker {
  margin: 0 0 0.9rem;
  color: #ead19c;
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-intro__wordmark {
  display: inline-grid;
  justify-items: center;
  min-width: clamp(13rem, 21vw, 18rem);
  margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
  color: #f4dba8;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0.55rem 1.8rem rgba(1, 25, 18, 0.55);
}

.brand-intro__wordmark span {
  font-family: "Viola Serif", Georgia, serif;
  font-size: clamp(2.6rem, 5.2vw, 4.9rem);
  letter-spacing: 0.13em;
}

.brand-intro__wordmark small {
  margin-top: 0.5rem;
  font-family: "Viola Serif", Georgia, serif;
  font-size: clamp(0.66rem, 1.1vw, 0.9rem);
  letter-spacing: 0.6em;
  transform: translateX(0.3em);
}

.brand-intro__headline {
  margin: 0;
  color: #fffaf0;
  font-family: "Viola Arabic", "Viola Sans", sans-serif;
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 0.45rem 1.75rem rgba(0, 18, 12, 0.58);
}

.brand-intro__message {
  margin: 0.8rem 0 0;
  color: rgba(255, 250, 240, 0.84);
  font-size: clamp(0.9rem, 1.45vw, 1.15rem);
}

.brand-intro__message b {
  margin-inline-start: 0.35rem;
  color: #f3d89f;
  font-family: "Viola Arabic", "Viola Sans", sans-serif;
  font-size: 1.45em;
  font-weight: 600;
}

.brand-intro[data-state="playing"] .brand-intro__kicker {
  animation: brand-intro-copy-in 0.95s 4.75s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__wordmark {
  animation: brand-intro-copy-in 1.15s 5.15s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__headline {
  animation: brand-intro-copy-in 1.15s 5.7s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__message {
  animation: brand-intro-copy-in 1s 6.2s ease-out both;
}

.brand-intro__skip {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(1rem + env(safe-area-inset-top));
  inset-inline-end: 1rem;
  min-width: 7.5rem;
  min-height: 2.85rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(239, 210, 152, 0.54);
  border-radius: 999px;
  background: rgba(2, 45, 34, 0.5);
  color: #fffaf0;
  font-size: 0.82rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.brand-intro[data-state="playing"] .brand-intro__skip {
  animation: brand-intro-skip-in 0.55s 0.35s ease-out both;
}

.brand-intro__skip:hover {
  border-color: #f3d69f;
  background: rgba(2, 54, 40, 0.84);
}

.brand-intro__welcome {
  position: absolute;
  z-index: 4;
  inset-inline: 1rem;
  inset-block-end: calc(1.45rem + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  text-align: center;
  opacity: 0;
  transform: translateY(1rem);
}

.brand-intro__welcome p {
  margin: 0;
  color: rgba(255, 250, 240, 0.78);
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 600;
}

.brand-intro[data-state="playing"] .brand-intro__welcome {
  animation: brand-intro-welcome-in 1s 6.75s ease-out both;
}

.button--intro {
  min-width: 12.5rem;
  min-height: 3.25rem;
  border-color: #ecd39d;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e1b3, #c79345);
  color: #10231b;
  box-shadow: 0 0.9rem 2.6rem rgba(0, 18, 12, 0.34), inset 0 1px rgba(255, 255, 255, 0.58);
}

.button--intro:hover {
  border-color: #fff0c5;
  background: #fff0c5;
}

.brand-intro :focus-visible {
  outline-color: #fff4cf;
  box-shadow: 0 0 0 2px #043d2e;
}

.brand-intro__progress {
  position: absolute;
  z-index: 5;
  inset-inline: clamp(1rem, 4vw, 4rem);
  inset-block-end: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.11);
}

.brand-intro__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #9e6e2c, #f9e7b9 56%, #b98538);
  transform-origin: left;
}

.brand-intro__progress i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #ffecc0;
  box-shadow: 0 0 0.9rem rgba(255, 231, 174, 0.9);
  transform: translate(-50%, -50%);
}

.brand-intro[data-state="playing"] .brand-intro__progress span {
  animation: brand-intro-progress var(--intro-duration) linear both;
}

.brand-intro[data-state="playing"] .brand-intro__progress i {
  animation: brand-intro-progress-marker var(--intro-duration) linear both;
}

.brand-intro[data-state="closing"] {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 720ms cubic-bezier(0.72, 0, 0.2, 1);
}

@keyframes brand-intro-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes brand-intro-progress-marker {
  from { left: 0; }
  to { left: 100%; }
}

@keyframes brand-intro-camera {
  0% { opacity: 0.38; transform: scale(1.055); }
  14% { opacity: 0.78; }
  72%, 100% { opacity: 0.9; transform: scale(1); }
}

@keyframes brand-intro-light-sweep {
  0% { opacity: 0; transform: translateX(-65%) rotate(-4deg); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(68%) rotate(-4deg); }
}

@keyframes brand-intro-particle {
  0%, 100% { opacity: 0; transform: translate3d(0, 1.2rem, 0) scale(0.6); }
  35%, 72% { opacity: 0.62; }
  75% { transform: translate3d(var(--drift), -2.2rem, 0) scale(1); }
}

@keyframes brand-intro-emblem-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brand-intro-map-fill {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes brand-intro-line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes brand-intro-node-in {
  0% { opacity: 0; transform: scale(0); }
  65% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes brand-intro-seal-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(-5deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes brand-intro-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes brand-intro-skip-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes brand-intro-welcome-in {
  to { opacity: 1; transform: translateY(0); }
}

.skip-link {
  position: fixed;
  z-index: 2000;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--brass);
  transform: translateY(-160%);
}

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

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
}

.button {
  min-height: 3rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms var(--ease);
}

.button--primary {
  background: var(--brass);
  color: var(--chocolate);
  border-color: var(--brass);
}

.button--primary:hover {
  background: #c69a58;
  border-color: #c69a58;
}

.button--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.button--quiet:hover {
  border-color: var(--brass-dark);
  background: rgba(255, 255, 255, 0.45);
}

.button:active {
  transform: scale(0.985);
}

.text-button {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--brass-dark);
  font-weight: 700;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: var(--header-height);
  background: rgba(255, 253, 249, 0.95);
  color: var(--ink);
  border-bottom: 1px solid rgba(180, 134, 66, 0.34);
  backdrop-filter: blur(14px);
}

.header-shell {
  width: var(--container);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "actions wordmark menu";
  align-items: center;
  gap: 1.25rem;
  direction: ltr;
}

.menu-button {
  grid-area: menu;
  justify-self: end;
}

.wordmark {
  grid-area: wordmark;
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  line-height: 0.78;
  letter-spacing: 0.11em;
}

.wordmark span {
  font-size: 1.78rem;
  font-weight: 500;
}

.wordmark small {
  margin-top: 0.45rem;
  font-size: 0.64rem;
  letter-spacing: 0.42em;
}

.icon-button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
}

.header-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 0.15rem;
  direction: rtl;
}

.action-count {
  position: absolute;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.22rem;
  display: grid;
  place-items: center;
  inset-block-start: 0.1rem;
  inset-inline-end: 0;
  border: 1px solid var(--chocolate);
  border-radius: 999px;
  background: var(--brass-light);
  color: var(--chocolate);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.desktop-nav {
  grid-area: nav;
  display: none;
}

.commerce-hero {
  position: relative;
  width: 100%;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-areas:
    "visual"
    "copy";
  grid-template-rows: minmax(20rem, 52svh) auto;
  overflow: hidden;
  background: #fbf8f1;
  color: var(--ink);
  isolation: isolate;
  direction: ltr;
}

.commerce-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(210, 170, 103, 0.2), transparent 23rem),
    linear-gradient(135deg, #fffdf9, #f5efe4 68%);
  pointer-events: none;
}

.hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  width: var(--container);
  max-width: none;
  margin-inline: auto;
  padding: 1.65rem 0 2.35rem;
  align-self: center;
  direction: rtl;
}

.commerce-hero .eyebrow {
  margin-bottom: 0.8rem;
  color: var(--brass-dark);
}

.hero-copy h1 {
  margin: 0;
  max-width: 9ch;
  color: var(--ink);
  font-family: var(--font-arabic-display);
  font-size: clamp(2.55rem, 11vw, 3.6rem);
  font-weight: 390;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-copy h1 span {
  display: block;
}

.hero-lead {
  max-width: 31rem;
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.94rem, 3.8vw, 1.12rem);
  line-height: 1.75;
}

.hero-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.commerce-hero .button--primary {
  border-color: #e8ca91;
  background: #e8ca91;
  color: #24150f;
}

.commerce-hero .button--primary:hover {
  border-color: #fff0c5;
  background: #fff0c5;
}

.commerce-hero .button--quiet {
  border-color: rgba(118, 80, 28, 0.42);
  color: var(--ink);
}

.commerce-hero .button--quiet:hover {
  border-color: var(--brass-dark);
  background: rgba(255, 255, 255, 0.72);
}

.hero-proof {
  margin-top: 1.35rem;
  padding-top: 1rem;
  max-width: 27rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(118, 80, 28, 0.24);
}

.hero-proof span {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

.hero-proof strong {
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}

.hero-proof small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.45;
}

.hero-proof i {
  width: 1px;
  height: 1.7rem;
  background: rgba(118, 80, 28, 0.28);
}

/* Official payment marks stay on a quiet white field so their supplied colours remain intact. */
.payment-assurance {
  --payment-logo-height: 1.75rem;
  margin-top: 1rem;
  padding: 0.72rem 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem 0.85rem;
  border: 1px solid rgba(118, 80, 28, 0.2);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 9px 24px rgba(54, 35, 18, 0.07);
}

.payment-assurance__lead {
  flex: 1 1 10rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.55;
}

.payment-assurance__logos {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.68rem;
  direction: ltr;
}

.payment-assurance__logos img {
  width: auto;
  height: var(--payment-logo-height);
  max-width: min(8.75rem, 34vw);
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.payment-assurance__logos span {
  width: 1px;
  height: 1.15rem;
  display: block;
  flex: 0 0 auto;
  background: rgba(36, 21, 15, 0.16);
}

.payment-assurance small {
  flex: 0 0 100%;
  color: #6b5c52;
  font-size: 0.62rem;
  line-height: 1.55;
}

.payment-assurance--hero {
  max-width: 27rem;
}

.payment-assurance--product {
  max-width: 32rem;
  margin-top: 0.85rem;
}

.payment-assurance--guarantee {
  margin-top: 1.15rem;
}

@media (min-width: 48rem) {
  .payment-assurance {
    --payment-logo-height: 2rem;
  }
}

.hero-maison {
  grid-area: visual;
  position: relative;
  min-width: 0;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 202, 145, 0.36);
  isolation: isolate;
}

.hero-maison::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(33, 16, 29, 0.26), transparent 30%),
    linear-gradient(to bottom, rgba(33, 16, 29, 0.08), transparent 22%);
}

.hero-maison img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 49%;
  transform: scale(1.01);
}

.hero-maison figcaption {
  position: absolute;
  z-index: 2;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: #fff8ec;
  direction: ltr;
  text-shadow: 0 2px 15px rgba(34, 18, 12, 0.45);
}

.hero-maison figcaption span {
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
}

.hero-maison figcaption small {
  color: rgba(255, 248, 236, 0.72);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.hero-maison__index {
  position: absolute;
  z-index: 2;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 236, 0.5);
  border-radius: 50%;
  color: #fff8ec;
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 500;
}

.category-shortcuts {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-inline: auto;
  padding: 1rem max(1rem, calc((100vw - 40rem) / 2));
  border: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 42vw);
  gap: 0.65rem;
  overflow-x: auto;
  background: rgba(252, 250, 246, 0.98);
  box-shadow: none;
  scroll-padding-inline: max(1rem, calc((100vw - 40rem) / 2));
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

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

.category-shortcuts a,
.category-shortcuts button {
  position: relative;
  min-height: 6.4rem;
  padding: 1rem 1.1rem;
  display: grid;
  align-content: center;
  gap: 0.08rem;
  border: 1px solid rgba(113, 80, 34, 0.18);
  background: transparent;
  text-align: start;
  scroll-snap-align: start;
  transition:
    color 180ms ease,
    background 180ms ease;
}

.category-shortcuts a:hover,
.category-shortcuts button:hover {
  background: var(--brass);
  color: var(--chocolate);
}

.category-shortcuts button[data-open-advisor] {
  border-color: var(--brass);
  background: var(--brass);
  color: var(--chocolate);
}

.category-shortcuts button[data-open-advisor] span,
.category-shortcuts button[data-open-advisor] small {
  color: var(--chocolate);
}

.category-shortcuts span {
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.76rem;
}

.category-shortcuts strong {
  font-size: 1.04rem;
}

.category-shortcuts small {
  color: var(--ink-muted);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.category-shortcuts a:hover span,
.category-shortcuts a:hover small,
.category-shortcuts button:hover span,
.category-shortcuts button:hover small {
  color: var(--chocolate);
}

.scent-atlas {
  width: var(--container);
  margin-inline: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.scent-atlas__heading {
  margin-bottom: 1.6rem;
  display: grid;
  gap: 0.85rem;
}

.scent-atlas__heading h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-arabic-display);
  font-size: clamp(2.25rem, 6vw, 4.8rem);
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.scent-atlas__heading > p {
  max-width: 37rem;
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}

.scent-atlas__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line-strong);
}

.scent-route {
  position: relative;
  min-height: 8.4rem;
  padding: 1rem;
  overflow: hidden;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.15rem;
  border: 0;
  background: rgba(255, 253, 249, 0.96);
  text-align: start;
  isolation: isolate;
  transition: background 220ms ease, color 220ms ease, transform 220ms var(--ease);
}

.scent-route::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -12% -38% auto;
  width: 7.5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(180, 134, 66, 0.22);
  border-radius: 50%;
  transition: transform 320ms var(--ease), background 220ms ease;
}

.scent-route > span {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.75rem;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.64rem;
}

.scent-route strong {
  max-width: 11ch;
  font-size: clamp(1rem, 3vw, 1.35rem);
  line-height: 1.35;
}

.scent-route small {
  color: var(--ink-muted);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.scent-route:hover,
.scent-route[aria-pressed="true"] {
  background: #efe1c6;
  color: var(--chocolate);
}

.scent-route:hover::before,
.scent-route[aria-pressed="true"]::before {
  background: rgba(180, 134, 66, 0.14);
  transform: scale(1.2);
}

.scent-route:active {
  transform: scale(0.985);
}

.scent-route--violet {
  grid-column: 1 / -1;
  min-height: 10rem;
  padding-inline-end: 47%;
  background:
    linear-gradient(90deg, rgba(38, 18, 31, 0.04) 0 42%, rgba(38, 18, 31, 0.94) 70%),
    url("assets/generated/concierge/violet-grecian-v2-thumb.jpg") left 23% / 49% auto no-repeat,
    var(--plum-deep);
  color: #fff8ed;
}

.scent-route--gift {
  grid-column: 1 / -1;
}

.scent-route--violet::before {
  border-color: rgba(234, 210, 162, 0.35);
}

.scent-route--violet > span,
.scent-route--violet small {
  color: #ead2a2;
}

.scent-route--violet:hover,
.scent-route--violet[aria-pressed="true"] {
  background:
    linear-gradient(90deg, rgba(38, 18, 31, 0.02) 0 42%, rgba(70, 34, 57, 0.95) 70%),
    url("assets/generated/concierge/violet-grecian-v2-thumb.jpg") left 23% / 49% auto no-repeat,
    var(--plum);
  color: #fff8ed;
}

@media (min-width: 48rem) {
  .scent-atlas__heading {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr);
    align-items: end;
  }

  .scent-atlas__heading > p {
    justify-self: end;
  }

  .scent-atlas__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .scent-route {
    min-height: 11.5rem;
    grid-column: span 3;
    padding: 1.2rem;
  }

  .scent-route--gourmand {
    grid-column: span 4;
  }

  .scent-route--daily {
    grid-column: span 2;
  }

  .scent-route--gift,
  .scent-route--violet {
    grid-column: span 3;
  }

  .scent-route--violet {
    min-height: 11.5rem;
    padding-inline-start: 1.2rem;
    padding-inline-end: 46%;
    background:
      linear-gradient(90deg, rgba(38, 18, 31, 0.08) 0 43%, rgba(38, 18, 31, 0.96) 66%),
      url("assets/generated/concierge/violet-grecian-v2-thumb.jpg") left 20% / 55% auto no-repeat,
      var(--plum-deep);
  }
}

.featured-section,
.shop-section,
.service-section {
  width: var(--container);
  margin-inline: auto;
}

.featured-section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section-heading,
.shop-heading {
  margin-bottom: 1.65rem;
}

.section-heading h2,
.shop-heading h2,
.service-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.section-heading > p,
.shop-heading > div > p:last-child {
  max-width: 34rem;
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
}

.counter-frame {
  position: relative;
  padding-bottom: 2.1rem;
}

.featured-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 19rem);
  gap: 1px;
  padding: 0 1px 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) transparent;
}

.featured-rail .product-card {
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.38);
}

.counter-marble {
  position: absolute;
  height: 2.3rem;
  inset: auto 0 0;
  border-block: 1px solid rgba(79, 57, 42, 0.2);
  background:
    linear-gradient(100deg, transparent 20%, rgba(74, 68, 63, 0.17) 21%, transparent 22% 61%, rgba(74, 68, 63, 0.13) 62%, transparent 63%),
    linear-gradient(#fff, #e9e1d6);
  box-shadow: 0 0.38rem 0 var(--brass);
}

.shop-section {
  padding-block: 1rem clamp(5.5rem, 10vw, 9rem);
}

.shop-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.advisor-inline {
  display: none;
}

.catalog-toolbar {
  position: sticky;
  z-index: 30;
  top: calc(var(--header-height) + 0.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  background: rgba(244, 239, 231, 0.94);
  box-shadow: 0 0.6rem 1.8rem rgba(40, 27, 19, 0.07);
  backdrop-filter: blur(14px);
}

.search-field {
  min-width: 0;
  height: 3rem;
  padding-inline: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-strong);
}

.search-field > svg {
  flex: 0 0 auto;
  color: var(--brass-dark);
}

.search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
}

.search-field input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.search-field:focus-within,
.sort-control:focus-within {
  outline: 3px solid var(--brass-dark);
  outline-offset: 2px;
}

.search-field button {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.toolbar-button,
.sort-control {
  min-width: 4.9rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-strong);
}

.toolbar-button {
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.toolbar-button span {
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--plum);
  color: #fff;
  font-size: 0.65rem;
}

.sort-control {
  position: relative;
  min-width: 5rem;
}

.sort-control select {
  width: 100%;
  height: 100%;
  padding: 0 0.6rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  appearance: none;
}

.sort-control svg {
  position: absolute;
  width: 0.95rem;
  height: 0.95rem;
  inset-block-start: 50%;
  inset-inline-end: 0.35rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.catalog-tabs {
  margin-top: 0.9rem;
  padding-bottom: 0.3rem;
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.catalog-tabs button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  font-size: 0.82rem;
  white-space: nowrap;
}

.catalog-tabs button[aria-pressed="true"] {
  border-color: var(--chocolate);
  background: var(--chocolate);
  color: #fff9ef;
}

.catalog-tabs span {
  margin-inline-start: 0.25rem;
  color: var(--brass-dark);
}

.catalog-tabs button[aria-pressed="true"] span {
  color: var(--brass-light);
}

.active-filters {
  margin-top: 0.6rem;
  padding-block: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.active-filter-chip {
  display: inline-flex;
}

.active-filter-chip button {
  min-height: 2.5rem;
  padding: 0.42rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(151, 104, 46, 0.46);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease;
}

.active-filter-chip button:hover {
  border-color: var(--brass-dark);
  background: #fff8e9;
}

.active-filter-chip button:focus-visible {
  outline: 3px solid var(--brass-dark);
  outline-offset: 2px;
}

.active-filter-chip svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.catalog-status {
  min-height: 3.6rem;
  padding-block: 1rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.catalog-status p {
  margin: 0;
}

.catalog-status button {
  min-height: 2.5rem;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--brass-dark);
  font-weight: 700;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.6rem;
  row-gap: 2rem;
}

.product-card {
  position: relative;
  min-width: 0;
}

.product-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(71, 50, 36, 0.12);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.76), rgba(222, 208, 190, 0.72)),
    #e9dfd2;
}

.product-card__visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  height: 0.42rem;
  inset: auto 0 0;
  background: linear-gradient(90deg, #8d632c, #e4c88f 48%, #8d632c);
  box-shadow: 0 -0.32rem 0 rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

.product-card--comparison .product-card__visual {
  border-color: rgba(162, 117, 50, 0.28);
  background: #f5efe5;
}

.product-card__comparison-key {
  position: absolute;
  z-index: 3;
  inset-inline: 0.55rem;
  inset-block-end: 0.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  direction: ltr;
  pointer-events: none;
}

.product-card__comparison-key span {
  min-width: 0;
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(34, 23, 18, 0.76);
  color: #fffdf8;
  font-size: clamp(0.58rem, 2.3vw, 0.72rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  direction: rtl;
  backdrop-filter: blur(9px);
}

.product-card__comparison-key span:last-child {
  border-color: rgba(255, 244, 214, 0.7);
  background: rgba(166, 116, 44, 0.91);
  color: #fffdf8;
}

.product-card__visual:has(> .product-card__open:focus-visible)::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0.25rem;
  border: 3px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--chocolate);
  pointer-events: none;
}

.product-card__open {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-card__open:focus-visible {
  outline: 0;
}

.product-card__open img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: transform 340ms var(--ease);
}

.product-card:hover .product-card__open img,
.product-card:focus-within .product-card__open img {
  transform: scale(1.018);
}

.favorite-button {
  position: absolute;
  z-index: 4;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(48, 32, 24, 0.15);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.9);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.favorite-button[aria-pressed="true"] {
  background: var(--plum);
  color: #fff;
}

.favorite-button[aria-pressed="true"] svg {
  fill: currentColor;
}

.product-card__copy {
  padding: 0.8rem 0.15rem 0;
}

.product-card__alternative-for {
  margin: 0 0 0.5rem;
  padding-inline-start: 0.55rem;
  border-inline-start: 2px solid var(--brass);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}

.product-card__alternative-for span {
  display: inline;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-weight: 700;
}

.product-card__brand {
  margin: 0;
  color: var(--brass-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.product-card__name-en {
  margin: 0.22rem 0 0;
  min-height: 2.1em;
  overflow: hidden;
  display: -webkit-box;
  color: var(--ink);
  font-family: "Viola Serif", Georgia, serif;
  font-size: clamp(1.02rem, 4vw, 1.32rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card__name-ar {
  margin: 0.3rem 0 0;
  min-height: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 550;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.product-card__meta {
  margin: 0.35rem 0 0;
  min-height: 1.45rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.product-card__footer {
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.product-card__price {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.product-card__pricing {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.product-card__pricing .product-card__price {
  display: block;
}

.product-card__offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-muted);
  font-size: 0.66rem;
  line-height: 1.2;
}

.product-card__offer del {
  text-decoration-thickness: 1px;
}

.product-card__offer b {
  padding: 0.12rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line));
  color: var(--gold-dark);
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.product-card__price--request {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.quick-add {
  min-width: 3.9rem;
  height: 2.75rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  border: 1px solid var(--chocolate);
  border-radius: 0;
  background: var(--chocolate);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 750;
}

.quick-add svg {
  width: 0.9rem;
  height: 0.9rem;
}

.quick-add[disabled] {
  border-color: var(--line);
  background: transparent;
  color: var(--ink-muted);
  opacity: 0.75;
}

.featured-rail .product-card__visual {
  aspect-ratio: 1;
}

.featured-rail .product-card__copy {
  padding: 0.9rem 0.8rem 3rem;
}

.catalog-empty {
  min-height: 24rem;
  padding: 4rem 1rem;
  place-items: center;
  align-content: center;
  text-align: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.34);
}

.catalog-empty:not([hidden]) {
  display: grid;
}

.catalog-empty > span {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
}

.catalog-empty h3 {
  margin: 1rem 0 0;
  font-size: 1.5rem;
}

.catalog-empty p {
  max-width: 28rem;
  margin: 0.4rem 0 1.2rem;
  color: var(--ink-muted);
}

.pagination {
  margin-top: 3rem;
  padding-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.pagination button {
  min-height: 2.9rem;
  padding: 0.55rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-weight: 700;
}

.pagination button:last-child {
  justify-self: end;
}

.pagination button:last-child svg {
  transform: rotate(180deg);
}

.pagination button:disabled {
  opacity: 0.45;
}

.pagination p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

/* Gold assurance — a quiet editorial pause between the collection and service. */
.gold-guarantee {
  position: relative;
  isolation: isolate;
  width: var(--container);
  margin: 0 auto clamp(5rem, 10vw, 9rem);
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(168, 121, 61, 0.42);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-high);
}

.gold-guarantee__visual {
  position: relative;
  height: clamp(16rem, 76vw, 22rem);
  overflow: hidden;
  background: #0d4c35;
}

.gold-guarantee__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left 38%;
}

.gold-guarantee__copy {
  position: relative;
  z-index: 1;
  padding: 2rem 1.15rem 2.25rem;
  background:
    linear-gradient(145deg, rgba(234, 210, 162, 0.2), transparent 55%),
    var(--surface);
}

.gold-guarantee__copy::before {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 1px;
  inset-block-start: 0;
  inset-inline-start: 1.15rem;
  background: var(--brass);
}

.gold-guarantee__copy .eyebrow {
  margin-bottom: 0.85rem;
  color: var(--brass-dark);
}

.gold-guarantee__copy h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.05rem, 9vw, 3.15rem);
  font-weight: 430;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.gold-guarantee__copy > p {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.85;
}

.gold-guarantee__copy ul {
  margin: 1.35rem 0 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.gold-guarantee__copy li {
  min-height: 2.9rem;
  padding: 0.72rem 0;
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.55;
}

.gold-guarantee__copy li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid var(--brass-dark);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--surface);
  background: var(--brass);
}

.gold-guarantee__copy li strong {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--ink);
  font-size: 0.93rem;
}

.gold-guarantee__copy .button {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 1.45rem;
  border-color: var(--brass);
  background: var(--brass);
  color: var(--chocolate);
  box-shadow: 0 14px 34px rgba(75, 51, 20, 0.16);
}

.gold-guarantee__copy .button:hover {
  border-color: #c69a58;
  background: #c69a58;
}

.gold-guarantee__copy .button:focus-visible {
  outline-color: var(--brass-dark);
  box-shadow: 0 0 0 2px var(--surface);
}

.gold-guarantee__terms {
  width: fit-content;
  margin: 0.85rem auto 0;
  padding-block: 0.35rem;
  border-bottom: 1px solid currentColor;
  color: var(--brass-dark);
  font-size: 0.78rem;
  font-weight: 750;
}

.gold-guarantee__terms:hover {
  color: var(--chocolate);
}

@media (min-width: 64rem) {
  .gold-guarantee {
    min-height: clamp(32rem, 45vw, 42rem);
    display: block;
    background: var(--surface);
  }

  .gold-guarantee::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(90deg, transparent 0 47%, rgba(252, 250, 246, 0.74) 49.5%, rgba(252, 250, 246, 0.98) 52% 100%),
      repeating-linear-gradient(105deg, transparent 0 4.8rem, rgba(96, 82, 71, 0.035) 4.85rem 4.92rem);
    pointer-events: none;
  }

  .gold-guarantee__image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: left 38%;
  }

  .gold-guarantee__visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .gold-guarantee__copy {
    z-index: 2;
    width: min(49%, 38rem);
    min-height: clamp(32rem, 45vw, 42rem);
    margin-left: auto;
    padding: clamp(3rem, 5vw, 5.25rem) clamp(2.5rem, 5vw, 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    color: var(--ink);
  }

  .gold-guarantee__copy::before {
    inset-block-start: clamp(3rem, 5vw, 5.25rem);
    inset-inline-start: clamp(2.5rem, 5vw, 5.5rem);
    background: var(--brass);
  }

  .gold-guarantee__copy .eyebrow {
    color: var(--brass-dark);
  }

  .gold-guarantee__copy h2 {
    color: var(--ink);
    font-size: clamp(2.8rem, 4vw, 4.5rem);
  }

  .gold-guarantee__copy > p {
    color: var(--ink-soft);
    font-size: 1rem;
  }

  .gold-guarantee__copy ul {
    border-top-color: var(--line-strong);
  }

  .gold-guarantee__copy li {
    border-bottom-color: var(--line);
    color: var(--ink);
  }

  .gold-guarantee__copy li strong {
    color: var(--ink);
  }

  .gold-guarantee__copy li::before {
    border-color: var(--brass-dark);
    box-shadow: inset 0 0 0 1px var(--surface);
    background: var(--brass);
  }

  .gold-guarantee__copy .button {
    width: fit-content;
    min-width: 12rem;
    align-self: flex-start;
    border-color: var(--brass);
    background: var(--brass);
    color: var(--chocolate);
  }

  .gold-guarantee__copy .button:hover {
    border-color: #c69a58;
    background: #c69a58;
  }

  .gold-guarantee__terms {
    margin-inline: 0;
    align-self: flex-start;
  }
}

.service-section {
  margin-bottom: clamp(5rem, 10vw, 9rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  gap: 2.8rem;
  background: var(--chocolate);
  color: #fff8ed;
}

.service-copy .eyebrow {
  color: var(--brass-light);
}

.service-copy p:last-child {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: rgba(255, 248, 237, 0.72);
}

.service-list {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.service-list li {
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.service-list span {
  grid-row: 1 / 3;
  color: var(--brass-light);
  font-family: "Viola Serif", Georgia, serif;
}

.service-list strong {
  font-size: 1.05rem;
}

.service-list p {
  margin: 0.1rem 0 0;
  color: rgba(255, 248, 237, 0.64);
  font-size: 0.86rem;
}

.site-footer {
  padding: clamp(3rem, 7vw, 6rem) max(1rem, calc((100vw - 88rem) / 2));
  background: #160e0a;
  color: #fff7eb;
}

.wordmark--footer {
  align-items: flex-start;
}

.wordmark--footer span {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.wordmark--footer small {
  font-size: 0.75rem;
}

.footer-brand p {
  max-width: 28rem;
  color: rgba(255, 247, 235, 0.62);
}

.footer-links {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.footer-links h2 {
  margin: 0 0 0.8rem;
  color: var(--brass-light);
  font-size: 0.82rem;
}

.footer-links a,
.footer-links button {
  width: fit-content;
  min-height: 2.5rem;
  padding: 0.3rem 0;
  display: block;
  border: 0;
  background: transparent;
  color: rgba(255, 247, 235, 0.8);
  text-align: start;
}

.footer-links p {
  max-width: 18rem;
  margin: 0.35rem 0 0;
  color: rgba(255, 247, 235, 0.58);
  font-size: 0.75rem;
  line-height: 1.7;
}

.footer-phone {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.footer-official-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.footer-links .footer-official-link {
  min-height: 3.35rem;
  padding: 0.55rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(255, 247, 235, 0.14);
  color: rgba(255, 247, 235, 0.88);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.footer-links .footer-official-link:hover {
  border-color: rgba(210, 169, 92, 0.56);
  background: rgba(255, 247, 235, 0.05);
  color: #fff7eb;
}

.footer-official-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: var(--brass-light);
}

.footer-official-link > span {
  display: grid;
  gap: 0.06rem;
  font-size: 0.72rem;
  line-height: 1.25;
}

.footer-official-link small {
  color: rgba(255, 247, 235, 0.42);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
}

.footer-note {
  margin: 3rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 247, 235, 0.5);
  font-size: 0.78rem;
}

.footer-copyright {
  margin: 1rem 0 0;
  color: rgba(255, 247, 235, 0.42);
  font-family: "Viola Serif", Georgia, serif;
  letter-spacing: 0.08em;
}

.footer-verification {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 247, 235, 0.48);
}

.footer-verification__title {
  margin: 0;
  color: rgba(255, 247, 235, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
}

.footer-verification__records {
  margin: 0.65rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

.footer-verification__records > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
}

.footer-verification__records dt,
.footer-verification__records dd {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.6;
}

.footer-verification__records dt::after {
  content: ":";
}

.footer-verification__records dd {
  color: rgba(255, 247, 235, 0.78);
  font-family: "Viola Serif", Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.07em;
  unicode-bidi: isolate;
}

.mobile-dock {
  display: none;
}

dialog {
  color: var(--ink);
  font-family: "Viola Arabic", system-ui, sans-serif;
}

dialog::backdrop {
  background: rgba(18, 10, 7, 0.66);
  backdrop-filter: blur(5px);
}

dialog[open] {
  animation: dialog-in 280ms var(--ease);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.sheet {
  width: min(29rem, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow-high);
}

.sheet-header {
  min-height: 6rem;
  margin: 0;
  padding: 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.sheet-header .eyebrow {
  margin-bottom: 0.2rem;
}

.sheet-header h2 {
  margin: 0;
  font-size: 1.65rem;
}

.dialog-close,
.product-dialog__close button,
.advisor-close button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
}

.menu-links {
  padding: 0.5rem 1.2rem;
  display: grid;
}

.menu-links a,
.menu-links button {
  min-height: 4.25rem;
  padding: 0.85rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 1.08rem;
  font-weight: 650;
  text-align: start;
}

.menu-links span {
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.75rem;
}

.filter-content {
  height: calc(100dvh - 12rem);
  padding: 1.2rem;
  overflow-y: auto;
}

.filter-content fieldset {
  margin: 0;
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.filter-content legend,
.select-field > span {
  margin-bottom: 0.75rem;
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.choice-grid label {
  min-height: 3rem;
  position: relative;
}

.choice-grid input {
  position: absolute;
  opacity: 0;
}

.choice-grid span {
  height: 100%;
  padding: 0.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}

.choice-grid input:checked + span {
  border-color: var(--chocolate);
  background: var(--chocolate);
  color: #fff;
}

.choice-grid input:focus-visible + span {
  outline: 3px solid var(--brass-dark);
  outline-offset: 2px;
}

.check-row {
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.check-row input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--plum);
}

.check-row span {
  display: grid;
}

.check-row small {
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.select-field {
  padding-top: 1.25rem;
  display: block;
}

.select-field select {
  width: 100%;
  height: 3.2rem;
  padding-inline: 0.8rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.select-field select:focus-visible {
  outline: 3px solid var(--brass-dark);
  outline-offset: 2px;
}

.filter-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
}

.filter-content__hint {
  margin: 1rem 0 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.7;
}

.sheet-actions {
  min-height: 6rem;
  padding: 0.9rem 1.2rem;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.product-dialog {
  width: min(70rem, calc(100% - 2rem));
  max-width: none;
  max-height: min(54rem, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow-high);
}

.product-dialog__close {
  position: absolute;
  z-index: 8;
  margin: 0;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
}

.product-dialog__close button {
  background: rgba(255, 253, 249, 0.9);
  backdrop-filter: blur(8px);
}

.product-dialog__layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  height: min(54rem, calc(100dvh - 2rem));
  max-height: inherit;
}

.product-dialog__visual {
  position: relative;
  min-height: 38rem;
  overflow: hidden;
  background: #e7d9ca;
}

.product-dialog__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, 0.5) 45%, transparent 62%) 150% 0 / 220% 100% no-repeat,
    radial-gradient(circle at 50% 43%, rgba(255, 253, 248, 0.92), rgba(231, 217, 202, 0.68) 48%, rgba(208, 185, 160, 0.46));
  animation: product-visual-loading 1.45s ease-in-out infinite;
}

.product-dialog__visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  height: 0.55rem;
  inset: auto 0 0;
  background: linear-gradient(90deg, #8e652f, #e5cd9a, #8e652f);
}

.product-dialog__visual > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

@keyframes product-visual-loading {
  from {
    background-position: 150% 0, center;
  }

  to {
    background-position: -110% 0, center;
  }
}

.favorite-button--dialog {
  inset-block: auto 1rem;
  inset-inline: auto 1rem;
  width: auto;
  padding-inline: 0.8rem;
  border-radius: 999px;
  display: inline-flex;
  gap: 0.4rem;
}

.product-dialog__content {
  min-height: 0;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow-y: auto;
}

.product-brand {
  margin: 0;
  color: var(--brass-dark);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.product-dialog__content h2 {
  margin: 0.45rem 0 0;
  font-family: "Viola Serif", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4.3rem);
  font-weight: 500;
  line-height: 0.95;
  text-align: left;
}

.product-name-ar {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-weight: 600;
}

.product-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.product-meta span {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.product-price {
  margin: 1.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 1.5rem;
  font-weight: 850;
}

.product-price strong {
  color: var(--ink);
}

.product-price del {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.product-price > span {
  padding: 0.2rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  color: var(--gold-dark);
  font-size: 0.7rem;
  font-weight: 800;
}

.product-status {
  margin: 0.35rem 0 0;
  color: var(--success);
  font-size: 0.82rem;
  font-weight: 700;
}

.product-whatsapp-direct {
  min-height: 2.75rem;
  margin-top: 0.7rem;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid var(--brass-dark);
  background: transparent;
  color: var(--brass-dark);
  font-size: 0.78rem;
  font-weight: 750;
}

.product-whatsapp-direct:hover {
  color: var(--chocolate);
}

.product-description {
  max-width: 58ch;
  margin: 1.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.9;
}

.product-notes,
.product-facts {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.product-notes h3 {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
}

.product-notes ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
}

.product-notes li {
  padding: 0.35rem 0.55rem;
  background: var(--paper);
  font-size: 0.76rem;
}

.product-pyramid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.product-pyramid section {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(245, 237, 224, 0.58));
}

.product-pyramid h4 {
  margin: 0 0 0.55rem;
  color: var(--brass-dark);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.product-pyramid ul {
  display: grid;
  gap: 0.32rem;
}

.product-pyramid li {
  padding: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.55;
}

.product-research-notice {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-inline-start: 3px solid var(--brass);
  background: rgba(184, 137, 62, 0.08);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.8;
}

.product-research-source {
  width: max-content;
  max-width: 100%;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brass-dark);
  font-size: 0.75rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.product-research-source:hover {
  color: var(--plum);
}

.product-facts {
  display: grid;
  gap: 0.75rem;
}

.product-facts div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.product-facts dt {
  color: var(--ink-muted);
}

.product-facts dd {
  margin: 0;
  font-weight: 650;
}

.product-actions {
  margin-top: 1.7rem;
  display: grid;
  gap: 0.55rem;
}

.commerce-disclosure {
  margin: 0.8rem 0 0;
  color: var(--ink-muted);
  font-size: 0.73rem;
}

.cart-sheet[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.cart-content {
  min-height: 0;
  overflow-y: auto;
}

.cart-empty {
  min-height: 100%;
  padding: 2rem;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.cart-empty > span {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass-dark);
  font-family: "Viola Serif", Georgia, serif;
}

.cart-empty h3 {
  margin: 1rem 0 0;
  font-size: 1.4rem;
}

.cart-empty p {
  margin: 0.35rem 0 1.2rem;
  color: var(--ink-muted);
}

.cart-items {
  padding-inline: 1.2rem;
}

.cart-item {
  padding-block: 1rem;
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.cart-item__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-deep);
}

.cart-item__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.cart-item__copy {
  min-width: 0;
}

.cart-item__copy h3 {
  margin: 0;
  overflow: hidden;
  font-family: "Viola Serif", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item__copy > p {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
  font-size: 0.76rem;
}

.cart-item__copy > .cart-item__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
}

.cart-item__pricing > span {
  font-size: 0.84rem;
  font-weight: 850;
}

.cart-item__pricing del {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.cart-item__pricing b {
  color: var(--gold-dark);
  font-size: 0.66rem;
}

.cart-item__footer {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
}

.quantity-control button {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.quantity-control span {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.cart-item__remove {
  min-height: 2.5rem;
  padding: 0.35rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--danger);
  font-size: 0.72rem;
}

.cart-summary {
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.cart-summary > div {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
}

.cart-summary > p {
  margin: 0.4rem 0 0.8rem;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.cart-summary > .payment-assurance--cart {
  width: 100%;
  margin: 0.75rem 0 0.35rem;
  padding: 0.62rem 0.7rem;
  justify-content: flex-start;
  gap: 0.35rem 0.7rem;
  font-size: inherit;
}

.payment-assurance--cart .payment-assurance__lead {
  font-size: 0.73rem;
}

.payment-assurance--cart small {
  font-size: 0.58rem;
}

.cart-summary .button {
  width: 100%;
}

.advisor-dialog {
  width: min(70rem, calc(100% - 2rem));
  max-width: none;
  max-height: min(48rem, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow-high);
}

.advisor-close {
  position: absolute;
  z-index: 7;
  margin: 0;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
}

.advisor-close button {
  background: rgba(255, 253, 249, 0.88);
}

.advisor-dialog[open] {
  display: grid;
  grid-template-columns: minmax(21rem, 0.86fr) minmax(0, 1.14fr);
}

.advisor-portrait {
  position: relative;
  min-height: 38rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(44, 23, 37, 0.08), rgba(44, 23, 37, 0.2)),
    url("assets/generated/concierge/violet-grecian-v2-thumb.jpg") center 28% / cover no-repeat,
    var(--plum-deep);
}

.advisor-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}

.advisor-portrait > span {
  position: absolute;
  inset: auto 1rem 1rem;
  padding: 0.6rem 0.7rem;
  background: rgba(24, 13, 19, 0.82);
  color: #fff7ec;
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.advisor-portrait i {
  width: 0.55rem;
  height: 0.55rem;
  margin-inline-end: 0.35rem;
  display: inline-block;
  border-radius: 50%;
  background: #8ee0aa;
}

.violet-pin {
  position: absolute;
  z-index: 2;
  top: 65.5%;
  left: 65%;
  width: 1.65rem;
  height: 1.65rem;
  border: 2px solid #d7b46d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--plum-deep);
  color: #f7ddb0;
  box-shadow: 0 0.2rem 0.65rem rgba(24, 13, 19, 0.28);
  font-family: "Viola Serif", Georgia, serif;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.advisor-content {
  padding: clamp(1.75rem, 4vw, 3.5rem);
  overflow-y: auto;
}

.advisor-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.advisor-kicker .eyebrow {
  margin: 0;
}

.advisor-back {
  min-width: 4.4rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.74rem;
}

.advisor-back:hover {
  border-color: var(--brass-dark);
  color: var(--brass-dark);
}

.advisor-meter {
  --advisor-progress: 20%;
  position: relative;
  height: 2px;
  margin-top: 1.15rem;
  overflow: hidden;
  background: var(--line);
}

.advisor-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--advisor-progress);
  background: linear-gradient(90deg, var(--plum), var(--brass));
  transition: width 320ms var(--ease);
}

.advisor-progress {
  margin: 0.65rem 0 0;
  color: var(--ink-muted);
  font-size: 0.76rem;
}

.advisor-content h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.25;
}

#advisorTitle:focus {
  outline: none;
}

.advisor-content > p:not(.eyebrow, .advisor-progress) {
  margin: 0.7rem 0 0;
  color: var(--ink-muted);
}

.advisor-options {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.advisor-options button {
  min-height: 4.8rem;
  padding: 0.82rem 0.9rem;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.38);
  text-align: start;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.advisor-options button span {
  font-weight: 750;
}

.advisor-options button small {
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.45;
}

.advisor-options button:hover {
  border-color: var(--brass-dark);
  background: #fffaf0;
  transform: translateY(-2px);
}

.advisor-options button:active {
  transform: translateY(0);
}

.advisor-summary {
  margin-top: 1.2rem;
  padding-bottom: 0.8rem;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.advisor-summary::-webkit-scrollbar {
  display: none;
}

.advisor-summary button {
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.45rem 0.65rem;
  display: grid;
  gap: 0.05rem;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: start;
}

.advisor-summary button small {
  color: var(--ink-muted);
  font-size: 0.58rem;
}

.advisor-summary button span {
  font-size: 0.7rem;
  font-weight: 750;
}

.advisor-results {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.65rem;
}

.advisor-results[hidden] {
  display: none;
}

.advisor-result {
  min-height: 7.7rem;
  padding: 0.65rem;
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
  text-align: start;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.advisor-result:hover {
  border-color: var(--brass-dark);
  background: #fffaf0;
  transform: translateY(-2px);
}

.advisor-result__image {
  position: relative;
  width: 5.8rem;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-deep);
}

.advisor-result__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.advisor-result h3 {
  margin: 0;
  font-family: "Viola Serif", Georgia, serif;
  font-size: 1rem;
  line-height: 1.1;
  text-align: left;
}

.advisor-result__copy {
  min-width: 0;
  display: grid;
}

.advisor-result__role {
  margin-bottom: 0.25rem;
  color: var(--brass-dark);
  font-size: 0.62rem;
  font-weight: 800;
}

.advisor-result p {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.advisor-result__why,
.advisor-result__notes {
  margin-top: 0.25rem;
  display: block;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.64rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advisor-result__notes {
  color: var(--ink-muted);
}

.advisor-result__price {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
  white-space: nowrap;
}

.advisor-result__price small {
  color: var(--brass-dark);
  font-size: 0.6rem;
}

.advisor-result strong {
  font-size: 0.8rem;
}

.toast-region {
  position: fixed;
  z-index: 1600;
  inset: auto 1rem calc(1rem + var(--dock-height) + env(safe-area-inset-bottom)) auto;
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  background: var(--chocolate);
  color: #fff8ed;
  box-shadow: var(--shadow-high);
  font-size: 0.82rem;
  animation: toast-in 260ms var(--ease);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (min-width: 48rem) {
  :root {
    --container: min(100% - 4rem, 88rem);
  }

  .commerce-hero {
    min-height: calc(100svh - var(--header-height));
    grid-template-rows: minmax(26rem, 60svh) auto;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(3.2rem, 7vw, 4.4rem);
  }

  .section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .section-heading > p {
    margin: 0;
    padding-bottom: 0.45rem;
  }

  .featured-rail {
    grid-auto-columns: minmax(15.5rem, 24%);
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 3.2rem;
  }

  .product-card__copy {
    padding-top: 0.9rem;
  }

  .advisor-inline {
    display: inline-flex;
  }

  .service-section {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .footer-links {
    max-width: 54rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .header-shell {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "actions wordmark nav";
  }

  .menu-button {
    display: none;
  }

  .wordmark {
    justify-self: center;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: clamp(0.65rem, 1.35vw, 1.45rem);
    direction: rtl;
  }

  .desktop-nav a,
  .desktop-nav button {
    min-height: 2.75rem;
    padding: 0.4rem 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .desktop-nav a:hover,
  .desktop-nav button:hover {
    color: var(--brass-dark);
  }

  .commerce-hero {
    min-height: calc(100svh - var(--header-height));
    padding: clamp(2rem, 4vw, 4rem) max(2rem, calc((100vw - 88rem) / 2));
    grid-template-areas: "visual copy";
    grid-template-columns: minmax(29rem, 1.08fr) minmax(27rem, 0.92fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 7rem);
  }

  .hero-copy {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(3.55rem, 4.6vw, 4.75rem);
    line-height: 1.06;
  }

  .hero-lead {
    margin-top: 1.2rem;
    font-size: 1.08rem;
  }

  .hero-actions {
    margin-top: 1.65rem;
  }

  .hero-maison {
    height: min(74svh, 48rem);
    min-height: 36rem;
    border: 1px solid rgba(232, 202, 145, 0.38);
    box-shadow: 0 35px 90px rgba(8, 4, 7, 0.32);
  }

  .hero-maison img {
    object-position: center 56%;
  }

  .category-shortcuts {
    width: var(--container);
    margin-top: -2.3rem;
    padding: 0;
    border: 1px solid rgba(113, 80, 34, 0.2);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    background: rgba(252, 250, 246, 0.98);
    box-shadow: 0 22px 60px rgba(44, 27, 18, 0.14);
  }

  .category-shortcuts a,
  .category-shortcuts button {
    min-height: 7.6rem;
    border: 0;
    border-inline-end: 1px solid var(--line);
  }

  .category-shortcuts > :last-child {
    border-inline-end: 0;
  }

  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.2rem;
  }

  .catalog-toolbar {
    grid-template-columns: minmax(22rem, 1fr) auto auto;
  }

  .site-footer {
    display: grid;
    grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.45fr);
    column-gap: 4rem;
  }

  .footer-links {
    margin-top: 0;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-note,
  .footer-copyright,
  .footer-verification {
    grid-column: 1 / -1;
  }
}

@media (max-width: 35rem) {
  .footer-verification__records {
    display: grid;
    gap: 0.75rem;
  }

  .footer-verification__records > div {
    display: grid;
    gap: 0.1rem;
  }
}

@media (min-width: 48rem) and (max-width: 67.999rem) {
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.999rem) {
  :root {
    --container: min(100% - 2rem, 40rem);
    --header-height: 4rem;
    --dock-height: 4.3rem;
  }

  body {
    padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom));
  }

  .brand-intro__backdrop {
    object-position: center;
  }

  .brand-intro__composition {
    inset: max(4.9rem, 9vh) 1rem max(8.4rem, 16vh);
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.12fr) auto;
    align-content: center;
    gap: clamp(0.55rem, 2vh, 1rem);
  }

  .brand-intro__emblem {
    width: min(73vw, 17rem);
    align-self: end;
    justify-self: center;
  }

  .brand-intro__story {
    align-self: start;
    text-align: center;
  }

  .brand-intro__kicker {
    margin-bottom: 0.42rem;
  }

  .brand-intro__wordmark {
    min-width: 12rem;
    margin-bottom: 0.65rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(2.45rem, 12vw, 3.3rem);
  }

  .brand-intro__headline {
    font-size: clamp(1.85rem, 8.4vw, 2.45rem);
  }

  .brand-intro__message {
    margin-top: 0.35rem;
  }

  .brand-intro__skip {
    inset-block-start: calc(0.8rem + env(safe-area-inset-top));
    inset-inline-end: 0.8rem;
    min-height: 2.75rem;
  }

  .brand-intro__welcome {
    inset-inline: 1rem;
    inset-block-end: calc(1.35rem + env(safe-area-inset-bottom));
  }

  .button--intro {
    width: min(100%, 20rem);
  }

  .site-header {
    height: var(--header-height);
  }

  .header-shell {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "actions wordmark menu";
    gap: 0.5rem;
  }

  .wordmark span {
    font-size: 1.55rem;
  }

  .saved-button {
    display: none;
  }

  .commerce-hero {
    min-height: calc(100svh - var(--header-height));
    padding: 0;
    gap: 0;
    grid-template-rows: minmax(18.5rem, 47svh) auto;
  }

  .hero-copy {
    padding-block: 1.35rem 1.75rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.55rem, 11.5vw, 3.1rem);
  }

  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 0.65rem;
    font-size: 0.8rem;
  }

  .hero-maison {
    min-height: clamp(18.5rem, 47svh, 24rem);
  }

  .featured-section {
    width: 100%;
  }

  .featured-section .section-heading {
    width: var(--container);
    margin-inline: auto;
  }

  .featured-rail {
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
  }

  .counter-marble {
    inset-inline: 0;
  }

  .shop-heading {
    display: block;
  }

  .catalog-toolbar {
    position: relative;
    top: auto;
    margin-inline: -0.3rem;
    padding: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-field {
    grid-column: 1 / -1;
    padding-inline: 0.55rem;
  }

  .search-field input {
    font-size: 0.82rem;
  }

  .toolbar-button {
    width: 100%;
    min-width: 0;
    padding-inline: 0.5rem;
  }

  .toolbar-button svg {
    width: 1.1rem;
  }

  .sort-control {
    width: 100%;
    min-width: 0;
  }

  .sort-control select {
    padding-inline: 0.4rem 1.05rem;
    font-size: 0.72rem;
  }

  .active-filters {
    margin-inline: -0.15rem;
    padding: 0.2rem 0.15rem 0.35rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-padding-inline: 0.15rem;
    scrollbar-width: none;
  }

  .active-filters::-webkit-scrollbar {
    display: none;
  }

  .active-filter-chip button {
    min-height: 2.4rem;
    padding-inline: 0.65rem;
    font-size: 0.72rem;
  }

  .filter-select-grid {
    grid-template-columns: 1fr;
  }

  .filter-content__hint {
    padding-bottom: 0.6rem;
  }

  .product-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
  }

  .product-dialog__layout {
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(17rem, 43dvh) 1fr;
  }

  .product-dialog__visual {
    min-height: 0;
  }

  .product-dialog__content {
    padding: 1.35rem 1rem calc(6.3rem + env(safe-area-inset-bottom));
  }

  .product-dialog__content h2 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .product-description {
    font-size: 0.9rem;
    line-height: 1.82;
  }

  .product-pyramid {
    grid-template-columns: 1fr;
  }

  .product-actions {
    position: sticky;
    z-index: 5;
    bottom: calc(-6.3rem - env(safe-area-inset-bottom));
    margin-inline: -1rem;
    padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    grid-template-columns: 1.25fr 0.75fr;
    background: rgba(252, 250, 246, 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
  }

  .product-actions .button {
    min-height: 3.2rem;
    padding-inline: 0.7rem;
    font-size: 0.78rem;
  }

  .advisor-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
  }

  .advisor-dialog[open] {
    grid-template-columns: 1fr;
    grid-template-rows: min(17rem, 34dvh) 1fr;
  }

  .advisor-portrait {
    min-height: 0;
  }

  .advisor-portrait img {
    object-position: center 42%;
  }

  .advisor-portrait > span {
    inset: auto auto 0.7rem 0.7rem;
  }

  .violet-pin {
    top: auto;
    bottom: 0.2rem;
    left: 65%;
    transform: translateX(-50%);
  }

  .advisor-content {
    padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  }

  .mobile-dock {
    position: fixed;
    z-index: 90;
    height: calc(var(--dock-height) + env(safe-area-inset-bottom));
    inset: auto 0 0;
    padding: 0.35rem 0.5rem env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(180, 134, 66, 0.34);
    background: rgba(255, 253, 249, 0.97);
    color: var(--ink);
    box-shadow: 0 -10px 30px rgba(57, 39, 24, 0.08);
    backdrop-filter: blur(14px);
  }

  .mobile-dock a,
  .mobile-dock button {
    position: relative;
    min-height: 3.5rem;
    padding: 0.25rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.18rem;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.72rem;
  }

  .mobile-dock svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .mobile-dock b {
    position: absolute;
    min-width: 1.05rem;
    height: 1.05rem;
    padding-inline: 0.18rem;
    inset-block-start: 0.05rem;
    inset-inline-end: 20%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brass);
    color: var(--chocolate);
    font-size: 0.58rem;
  }

  .sheet {
    width: 100%;
  }
}

@media (max-width: 47.999rem) and (max-height: 32rem) {
  .brand-intro__composition {
    inset: max(3.6rem, 13vh) 1rem max(3.8rem, 18vh);
    grid-template-columns: minmax(10rem, 0.82fr) minmax(14rem, 1fr);
    grid-template-rows: 1fr;
    gap: 1rem;
  }

  .brand-intro__emblem {
    width: min(29vw, 12.5rem);
    align-self: center;
    justify-self: end;
  }

  .brand-intro__story {
    align-self: center;
    text-align: right;
  }

  .brand-intro__kicker,
  .brand-intro__message {
    display: none;
  }

  .brand-intro__wordmark {
    min-width: 10rem;
    margin-bottom: 0.4rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  .brand-intro__headline {
    font-size: clamp(1.55rem, 4.8vw, 2.15rem);
  }

  .brand-intro__welcome {
    inset-inline-start: 1rem;
    inset-inline-end: auto;
    inset-block-end: calc(0.85rem + env(safe-area-inset-bottom));
    justify-items: start;
  }

  .brand-intro__welcome p {
    display: none;
  }

  .button--intro {
    width: auto;
    min-width: 10.5rem;
    min-height: 2.85rem;
  }

  .commerce-hero {
    min-height: calc(100svh - var(--header-height));
    padding: 0;
    grid-template-areas: "visual copy";
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0;
  }

  .hero-maison {
    height: 100%;
    min-height: 0;
    border-inline-end: 1px solid rgba(232, 202, 145, 0.36);
    border-bottom: 0;
  }

  .hero-maison figcaption {
    display: none;
  }

  .hero-copy {
    width: auto;
    padding: 0.8rem 1rem;
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(1.9rem, 5vw, 2.25rem);
    line-height: 1.02;
  }

  .hero-lead {
    margin-top: 0.45rem;
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hero-actions {
    margin-top: 0.6rem;
    gap: 0.4rem;
  }

  .hero-actions .button {
    min-height: 2.7rem;
    padding-inline: 0.65rem;
    font-size: 0.72rem;
  }

  .product-dialog__layout {
    grid-template-columns: 0.92fr 1.08fr;
    grid-template-rows: 1fr;
  }

  .product-dialog__visual {
    min-height: 0;
  }

  .product-dialog__close {
    right: 0.65rem;
    left: auto;
  }

  .product-dialog__content {
    padding: 1rem 0.85rem;
  }

  .product-dialog__content h2 {
    font-size: clamp(1.55rem, 5vw, 2.25rem);
    line-height: 1;
  }

  .product-name-ar {
    margin-top: 0.55rem;
    font-size: 0.9rem;
  }

  .product-price {
    margin-top: 0.8rem;
    font-size: 1.35rem;
  }

  .product-notes,
  .product-facts {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
  }

  .product-actions {
    bottom: -1rem;
    margin-inline: -0.85rem;
    padding: 0.55rem 0.85rem 0.8rem;
    grid-template-columns: 1.2fr 0.8fr;
  }

  .product-actions .button {
    min-height: 2.75rem;
  }

  .advisor-content {
    padding-top: 0.9rem;
  }

  .advisor-portrait img {
    object-position: center 30%;
  }

  .advisor-content h2 {
    font-size: 1.65rem;
  }

  .advisor-options {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.45rem;
  }

  .advisor-options button {
    min-height: 3.6rem;
  }
}

@media (max-width: 23rem) {
  :root {
    --container: min(100% - 1.35rem, 40rem);
  }

  .header-actions {
    gap: 0;
  }

  .icon-button {
    width: 2.55rem;
  }

  .wordmark span {
    font-size: 1.38rem;
  }

  .hero-copy h1 {
    font-size: 2.35rem;
  }

  .hero-actions {
    display: grid;
  }

  .hero-maison {
    min-height: 18.5rem;
  }

  .category-shortcuts a,
  .category-shortcuts button {
    min-height: 6.8rem;
    padding: 0.85rem;
  }

  .product-grid {
    column-gap: 0.45rem;
  }

  .product-card__name-en {
    font-size: 0.96rem;
  }

  .product-card__name-ar {
    font-size: 0.9rem;
  }

  .product-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisor-dialog[open] {
    transition: none;
  }
}

/* National Day 96 — restored marble portal, original story rhythm, clearer copy. */
.brand-intro__stage {
  background: #031c15;
}

.brand-intro__backdrop {
  opacity: 0.93;
  object-position: center;
  transform: scale(1.04);
  filter: saturate(0.9) contrast(1.06) brightness(0.86);
}

.brand-intro[data-state="playing"] .brand-intro__backdrop {
  animation: brand-intro-camera-portal-restored var(--intro-duration) cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.brand-intro__stage::before {
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(0, 12, 9, 0.45), transparent 24%),
    linear-gradient(to top, rgba(0, 12, 9, 0.68), transparent 32%),
    linear-gradient(90deg, rgba(0, 15, 11, 0.05) 0 37%, rgba(0, 16, 12, 0.28) 55%, rgba(0, 15, 11, 0.78) 82%, rgba(0, 13, 10, 0.86) 100%);
}

.brand-intro__stage::after {
  background: linear-gradient(105deg, transparent 39%, rgba(255, 231, 178, 0.17) 49.5%, transparent 59%);
}

.brand-intro__atmosphere i {
  width: 0.22rem;
  height: 0.22rem;
  background: #f4d99e;
}

.brand-intro__composition {
  inset: max(5.2rem, 9vh) max(1.5rem, 5vw) max(8.7rem, 15vh);
  width: min(72rem, calc(100% - max(3rem, 10vw)));
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 0.9fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  place-items: initial;
  gap: clamp(2rem, 5vw, 5.5rem);
  direction: ltr;
}

.brand-intro__emblem {
  position: relative;
  inset: auto;
  width: min(100%, clamp(20rem, 34vw, 29rem));
  aspect-ratio: 1.2;
  align-self: center;
  justify-self: end;
  opacity: 0;
  transform: translateY(1.35rem) scale(0.94);
}

.brand-intro[data-state="playing"] .brand-intro__emblem {
  animation: brand-intro-emblem-in 1.15s 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.brand-intro__map {
  filter: drop-shadow(0 1.2rem 2.1rem rgba(0, 15, 10, 0.5));
}

.brand-intro__map-fill {
  fill: rgba(0, 72, 51, 0.72);
}

.brand-intro__map-outline {
  stroke: rgba(246, 215, 153, 0.96);
  stroke-width: 3.1;
  filter: drop-shadow(0 0 0.6rem rgba(239, 210, 152, 0.68));
}

.brand-intro__route {
  stroke: rgba(242, 207, 138, 0.74);
  stroke-width: 1.15;
}

.brand-intro__nodes circle {
  fill: #fff1c9;
  filter: drop-shadow(0 0 0.6rem rgba(255, 235, 184, 0.95));
}

.brand-intro__national-seal {
  position: absolute;
  left: 50%;
  top: 51%;
  width: clamp(7.25rem, 10.5vw, 9.25rem);
  margin: 0;
  gap: 0.12rem;
  border: 2px solid #ebcc8c;
  background: rgba(2, 65, 47, 0.96);
  color: #fff0c8;
  box-shadow:
    inset 0 0 0 0.32rem rgba(3, 48, 36, 0.94),
    inset 0 0 0 0.4rem rgba(239, 210, 152, 0.42),
    0 1.1rem 2.8rem rgba(0, 15, 10, 0.48),
    0 0 2rem rgba(224, 179, 96, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72) rotate(-5deg);
}

.brand-intro__national-seal strong {
  font-size: clamp(2.9rem, 4.8vw, 4.25rem);
  font-weight: 800;
  line-height: 0.86;
}

.brand-intro__national-seal span {
  color: #fff9e9;
  font-size: clamp(0.6rem, 0.82vw, 0.74rem);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-intro[data-state="playing"] .brand-intro__national-seal {
  animation: brand-intro-seal-in 1.35s 4.15s cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.brand-intro__story {
  position: relative;
  z-index: 2;
  width: auto;
  padding: clamp(1.35rem, 3vh, 2.2rem) clamp(1.2rem, 2.5vw, 2rem);
  display: block;
  align-self: center;
  justify-items: initial;
  align-content: initial;
  direction: rtl;
  text-align: right;
  background: linear-gradient(270deg, rgba(0, 18, 13, 0.9), rgba(0, 18, 13, 0.7) 66%, transparent 100%);
  box-shadow: 2.5rem 0 4.5rem rgba(0, 14, 10, 0.26);
}

.brand-intro__kicker,
.brand-intro__wordmark,
.brand-intro__headline,
.brand-intro__message {
  opacity: 0;
  transform: translateY(1.1rem);
}

.brand-intro__kicker {
  margin: 0 0 0.9rem;
  color: #f0d7a2;
  font-size: clamp(0.78rem, 1.08vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 0.3rem 1rem rgba(0, 8, 6, 0.96);
}

.brand-intro__wordmark {
  display: inline-grid;
  justify-items: center;
  min-width: clamp(13rem, 21vw, 18rem);
  margin: 0 0 clamp(1rem, 2.5vh, 1.7rem);
  color: #f5dca8;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0.55rem 1.8rem rgba(0, 8, 6, 0.88);
}

.brand-intro__wordmark span {
  font-size: clamp(2.8rem, 5.2vw, 4.9rem);
  font-weight: 500;
  letter-spacing: 0.13em;
}

.brand-intro__wordmark small {
  margin-top: 0.5rem;
  color: #fff3d4;
  font-size: clamp(0.68rem, 1.1vw, 0.92rem);
  font-weight: 650;
  letter-spacing: 0.6em;
}

.brand-intro__headline {
  margin: 0;
  color: #fffdf7;
  font-size: clamp(2.25rem, 4.35vw, 4.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-shadow: 0 0.45rem 1.5rem rgba(0, 8, 6, 0.98);
}

.brand-intro__message {
  margin: 0.72rem 0 0;
  color: rgba(255, 250, 240, 0.96);
  font-size: clamp(0.92rem, 1.5vw, 1.18rem);
  font-weight: 750;
  text-shadow: 0 0.3rem 1rem rgba(0, 8, 6, 0.98);
}

.brand-intro__message b {
  margin-inline-start: 0.35rem;
  color: #f5d696;
  font-size: 1.52em;
  font-weight: 800;
}

.brand-intro[data-state="playing"] .brand-intro__kicker {
  animation: brand-intro-copy-in 0.95s 4.75s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__wordmark {
  animation: brand-intro-copy-in 1.15s 5.15s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__headline {
  animation: brand-intro-copy-in 1.15s 5.7s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__message {
  animation: brand-intro-copy-in 1s 6.2s ease-out both;
}

.brand-intro__skip {
  border-color: rgba(244, 220, 168, 0.76);
  background: rgba(0, 30, 22, 0.78);
  color: #fffdf6;
  box-shadow: 0 0.7rem 2rem rgba(0, 8, 6, 0.3);
}

.brand-intro__welcome p {
  color: #fff8e9;
  font-weight: 700;
  text-shadow: 0 0.25rem 1rem rgba(0, 8, 6, 0.96);
}

.brand-intro[data-state="playing"] .brand-intro__welcome {
  animation: brand-intro-welcome-in 1s 6.75s ease-out both;
}

@keyframes brand-intro-camera-portal-restored {
  0% { opacity: 0.44; transform: scale(1.04); }
  14% { opacity: 0.9; }
  72%, 100% { opacity: 0.96; transform: scale(1); }
}

@media (max-width: 47.999rem) {
  .brand-intro__stage::before {
    background:
      linear-gradient(to bottom, rgba(0, 12, 9, 0.4), transparent 24%),
      linear-gradient(to top, rgba(0, 12, 9, 0.84), rgba(0, 14, 10, 0.34) 44%, transparent 70%),
      radial-gradient(ellipse at 50% 55%, transparent 0 28%, rgba(0, 14, 10, 0.22) 72%, rgba(0, 12, 9, 0.46) 100%);
  }

  .brand-intro__backdrop {
    object-position: center;
    filter: saturate(0.9) contrast(1.06) brightness(0.82);
  }

  .brand-intro__composition {
    inset: max(4.25rem, 8vh) 0.8rem max(8.2rem, 16vh);
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(13.5rem, 0.92fr) auto;
    place-items: initial;
    align-content: center;
    gap: 0.35rem;
    direction: rtl;
  }

  .brand-intro__emblem {
    position: relative;
    inset: auto;
    width: min(82vw, 20rem);
    align-self: end;
    justify-self: center;
  }

  .brand-intro__national-seal {
    width: clamp(6.5rem, 28vw, 7.6rem);
  }

  .brand-intro__national-seal strong {
    font-size: clamp(3.15rem, 13.5vw, 3.75rem);
  }

  .brand-intro__story {
    width: min(100%, 23rem);
    padding: 0.85rem 1rem 1rem;
    align-self: start;
    justify-self: center;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(0, 18, 13, 0.9) 0 28%, rgba(0, 18, 13, 0.7) 62%, transparent 100%);
    box-shadow: none;
  }

  .brand-intro__kicker {
    margin-bottom: 0.45rem;
    font-size: clamp(0.77rem, 3.4vw, 0.9rem);
    letter-spacing: 0;
  }

  .brand-intro__wordmark {
    min-width: 0;
    margin-bottom: 0.68rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(2.35rem, 11vw, 3.05rem);
  }

  .brand-intro__wordmark small {
    margin-top: 0.26rem;
    font-size: 0.62rem;
  }

  .brand-intro__headline {
    font-size: clamp(1.95rem, 8.8vw, 2.45rem);
    line-height: 1.08;
  }

  .brand-intro__message {
    margin-top: 0.36rem;
    font-size: clamp(0.86rem, 3.8vw, 0.98rem);
  }
}

@media (max-width: 47.999rem) and (max-height: 32rem) {
  .brand-intro__composition {
    inset: max(3.35rem, 12vh) 1rem max(3.4rem, 17vh);
    width: min(53rem, calc(100% - 2rem));
    grid-template-columns: minmax(11rem, 0.82fr) minmax(15rem, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.8rem, 3vw, 2rem);
    direction: ltr;
  }

  .brand-intro__emblem {
    width: min(38vw, 14.5rem);
    align-self: center;
    justify-self: end;
  }

  .brand-intro__national-seal {
    width: min(21vh, 5.8rem);
  }

  .brand-intro__national-seal strong {
    font-size: min(10vh, 2.9rem);
  }

  .brand-intro__national-seal span {
    font-size: 0.44rem;
  }

  .brand-intro__story {
    width: min(54vw, 25rem);
    padding: 0.45rem 0.75rem 0.55rem;
    align-self: center;
    justify-self: start;
    text-align: right;
    background: linear-gradient(270deg, rgba(0, 18, 13, 0.86), rgba(0, 18, 13, 0.62) 70%, transparent);
  }

  .brand-intro__kicker {
    margin-bottom: 0.16rem;
    font-size: 0.62rem;
  }

  .brand-intro__wordmark {
    margin-bottom: 0.2rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(1.65rem, 5vw, 2.25rem);
  }

  .brand-intro__wordmark small {
    margin-top: 0.08rem;
    font-size: 0.46rem;
  }

  .brand-intro__headline {
    font-size: clamp(1.35rem, 4.3vw, 1.9rem);
  }

  .brand-intro__message {
    margin-top: 0.1rem;
    font-size: 0.62rem;
  }
}

/* National Day 96 — clarity-first ceremonial opening. */
.brand-intro__stage {
  background: #021b15;
}

.brand-intro__backdrop {
  opacity: 0.68;
  object-position: center;
  transform: scale(1.025);
  filter: saturate(0.92) contrast(1.08) brightness(0.78);
}

.brand-intro[data-state="playing"] .brand-intro__backdrop {
  animation: brand-intro-camera-clarity var(--intro-duration) cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.brand-intro__stage::before {
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(0, 10, 8, 0.62), transparent 25%),
    linear-gradient(to top, rgba(0, 11, 8, 0.82), transparent 34%),
    radial-gradient(ellipse at 50% 46%, rgba(1, 28, 21, 0.2) 0 20%, rgba(0, 14, 10, 0.72) 73%);
}

.brand-intro__stage::after {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 225, 164, 0.12) 49.5%, transparent 57%);
}

.brand-intro__atmosphere i {
  width: 0.2rem;
  height: 0.2rem;
  background: #f3d99f;
}

.brand-intro__composition {
  inset: max(4.8rem, 8vh) 1rem max(8.8rem, 16vh);
  width: min(42rem, calc(100% - 2rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  direction: rtl;
}

.brand-intro__emblem {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(88vw, 36rem);
  aspect-ratio: 1.2;
  justify-self: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.brand-intro[data-state="playing"] .brand-intro__emblem {
  animation: brand-intro-emblem-clarity 1.6s 0.45s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.brand-intro__map {
  filter: drop-shadow(0 1rem 2.2rem rgba(0, 10, 7, 0.55));
}

.brand-intro__map-fill {
  fill: rgba(0, 92, 57, 0.22);
}

.brand-intro__map-outline {
  stroke: rgba(237, 205, 139, 0.5);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 0.4rem rgba(239, 210, 152, 0.28));
}

.brand-intro__route {
  stroke: rgba(238, 202, 132, 0.3);
  stroke-width: 0.9;
}

.brand-intro__nodes circle {
  fill: #f8e4b3;
  filter: drop-shadow(0 0 0.45rem rgba(255, 235, 184, 0.7));
}

.brand-intro__story {
  position: relative;
  z-index: 2;
  width: min(100%, 35rem);
  padding: clamp(1rem, 3vh, 2rem) 1rem;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  direction: rtl;
  background: radial-gradient(ellipse at center, rgba(0, 20, 15, 0.88) 0 15%, rgba(0, 20, 15, 0.68) 48%, transparent 76%);
}

.brand-intro__wordmark {
  min-width: 0;
  margin: 0 0 0.55rem;
  color: #f2d79f;
  text-shadow: 0 0.55rem 1.8rem rgba(0, 8, 6, 0.8);
}

.brand-intro__wordmark span {
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 500;
  letter-spacing: 0.15em;
}

.brand-intro__wordmark small {
  margin-top: 0.32rem;
  color: #fff2d0;
  font-size: clamp(0.72rem, 1.15vw, 0.96rem);
  font-weight: 600;
  letter-spacing: 0.62em;
}

.brand-intro__kicker {
  margin: 0 0 clamp(0.65rem, 1.7vh, 1rem);
  color: #fff8e8;
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0.25rem 1rem rgba(0, 8, 6, 0.94);
}

.brand-intro__national-seal {
  position: relative;
  left: auto;
  top: auto;
  width: clamp(8.25rem, 15vw, 10.5rem);
  margin: 0 0 clamp(0.7rem, 1.7vh, 1rem);
  gap: 0.25rem;
  border: 2px solid #e7c680;
  background: rgba(1, 41, 30, 0.96);
  color: #fff2cc;
  box-shadow:
    inset 0 0 0 0.38rem rgba(1, 29, 22, 0.96),
    inset 0 0 0 0.46rem rgba(239, 210, 152, 0.42),
    0 1.2rem 3.2rem rgba(0, 8, 6, 0.68),
    0 0 2.4rem rgba(201, 151, 67, 0.13);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.92);
}

.brand-intro__national-seal strong {
  font-size: clamp(4rem, 7.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.78;
}

.brand-intro__national-seal span {
  color: #fff9e9;
  font-size: clamp(0.67rem, 0.9vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-intro__headline {
  margin: 0;
  color: #fffdf6;
  font-size: clamp(2.3rem, 4.8vw, 4.35rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-shadow: 0 0.4rem 1.5rem rgba(0, 8, 6, 0.94);
}

.brand-intro__message {
  margin: 0.55rem 0 0;
  color: #f4dca8;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 800;
  text-shadow: 0 0.25rem 1rem rgba(0, 8, 6, 0.96);
}

.brand-intro[data-state="playing"] .brand-intro__wordmark {
  animation: brand-intro-copy-in 0.85s 0.65s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__kicker {
  animation: brand-intro-copy-in 0.85s 1.05s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__national-seal {
  animation: brand-intro-seal-clarity 1.1s 1.55s cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.brand-intro[data-state="playing"] .brand-intro__headline {
  animation: brand-intro-copy-in 0.9s 2.25s ease-out both;
}

.brand-intro[data-state="playing"] .brand-intro__message {
  animation: brand-intro-copy-in 0.85s 2.75s ease-out both;
}

.brand-intro__skip {
  border-color: rgba(244, 220, 168, 0.78);
  background: rgba(0, 27, 20, 0.82);
  color: #fffdf6;
  box-shadow: 0 0.7rem 2rem rgba(0, 8, 6, 0.36);
}

.brand-intro__welcome {
  gap: 0.55rem;
}

.brand-intro__welcome p {
  color: #fff8e9;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 750;
  text-shadow: 0 0.25rem 1rem rgba(0, 8, 6, 0.9);
}

.brand-intro[data-state="playing"] .brand-intro__welcome {
  animation: brand-intro-welcome-in 0.85s 3.25s ease-out both;
}

.button--intro {
  min-width: 13.5rem;
  border: 1px solid #efd8a5;
  background: #f0d59b;
  color: #08241b;
  font-weight: 850;
  box-shadow: 0 1rem 2.7rem rgba(0, 8, 6, 0.48), inset 0 1px rgba(255, 255, 255, 0.62);
}

@keyframes brand-intro-camera-clarity {
  0% { opacity: 0.25; transform: scale(1.025); }
  16% { opacity: 0.68; }
  100% { opacity: 0.78; transform: scale(1); }
}

@keyframes brand-intro-emblem-clarity {
  to { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
}

@keyframes brand-intro-seal-clarity {
  0% { opacity: 0; transform: translateY(0.75rem) scale(0.92); }
  70% { opacity: 1; transform: translateY(0) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Generated campaign images remain complete; blurred or neutral fill absorbs any spare frame space. */
.hero-maison {
  background: #2b211b;
}

.hero-maison::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1.5rem;
  background: url("assets/generated/hero/viola-bloom-maison-la-belle-v2.jpg") center 56% / cover no-repeat;
  filter: blur(18px) saturate(0.8) brightness(0.72);
  opacity: 0.58;
  transform: scale(1.06);
}

.hero-maison::after {
  z-index: 2;
}

.hero-maison img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 1.2rem 2rem rgba(17, 8, 5, 0.34));
}

.hero-maison figcaption,
.hero-maison__index {
  z-index: 3;
}

.gold-guarantee__visual {
  background: #f2ede4;
}

.gold-guarantee__image {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 64rem) {
  .gold-guarantee {
    min-height: clamp(32rem, 45vw, 42rem);
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(27rem, 0.86fr);
    grid-template-areas: "visual copy";
    direction: ltr;
  }

  .gold-guarantee::after {
    display: none;
  }

  .gold-guarantee__visual {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
    min-height: clamp(32rem, 45vw, 42rem);
    grid-area: visual;
  }

  .gold-guarantee__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .gold-guarantee__copy {
    width: auto;
    min-height: clamp(32rem, 45vw, 42rem);
    margin: 0;
    grid-area: copy;
    direction: rtl;
    background:
      linear-gradient(145deg, rgba(234, 210, 162, 0.2), transparent 55%),
      var(--surface);
  }

  .commerce-hero {
    grid-template-columns: minmax(25rem, 0.82fr) minmax(29rem, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

@media (max-width: 47.999rem) {
  .brand-intro__composition {
    inset: max(4.3rem, 8vh) 0.75rem max(8.3rem, 16vh);
    width: auto;
    display: grid;
    place-items: center;
  }

  .brand-intro__emblem {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(91vw, 24rem);
    align-self: auto;
    justify-self: auto;
  }

  .brand-intro__story {
    align-self: center;
    padding-inline: 0.5rem;
    text-align: center;
  }

  .brand-intro__wordmark {
    min-width: 0;
    margin-bottom: 0.38rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(2.65rem, 13vw, 3.35rem);
  }

  .brand-intro__wordmark small {
    font-size: 0.67rem;
  }

  .brand-intro__kicker {
    margin-bottom: 0.65rem;
    font-size: clamp(0.84rem, 3.7vw, 0.96rem);
  }

  .brand-intro__national-seal {
    width: clamp(7.4rem, 34vw, 8.7rem);
    margin-bottom: 0.75rem;
  }

  .brand-intro__national-seal strong {
    font-size: clamp(3.55rem, 16vw, 4.25rem);
  }

  .brand-intro__headline {
    font-size: clamp(2rem, 9.5vw, 2.55rem);
  }

  .brand-intro__message {
    margin-top: 0.35rem;
    font-size: clamp(0.86rem, 3.8vw, 1rem);
  }

  .brand-intro__welcome {
    inset-block-end: calc(1.25rem + env(safe-area-inset-bottom));
  }

  .commerce-hero {
    grid-template-rows: minmax(30rem, 70svh) auto;
  }

  .hero-maison {
    min-height: min(70svh, 36rem);
  }
}

@media (max-width: 47.999rem) and (max-height: 32rem) {
  .brand-intro__composition {
    inset: max(3.4rem, 12vh) 1rem max(3.5rem, 17vh);
    display: grid;
    place-items: center;
  }

  .brand-intro__emblem {
    width: min(47vw, 16rem);
    opacity: 0.36;
  }

  .brand-intro__story {
    width: min(70vw, 28rem);
    align-self: center;
    text-align: center;
  }

  .brand-intro__kicker,
  .brand-intro__message {
    display: block;
  }

  .brand-intro__wordmark {
    margin-bottom: 0.18rem;
  }

  .brand-intro__wordmark span {
    font-size: clamp(1.85rem, 5.4vw, 2.4rem);
  }

  .brand-intro__wordmark small {
    margin-top: 0.08rem;
    font-size: 0.5rem;
  }

  .brand-intro__kicker {
    margin-bottom: 0.2rem;
    font-size: 0.66rem;
  }

  .brand-intro__national-seal {
    width: min(18vh, 5.2rem);
    margin-bottom: 0.2rem;
  }

  .brand-intro__national-seal strong {
    font-size: min(9vh, 2.8rem);
  }

  .brand-intro__national-seal span {
    font-size: 0.45rem;
  }

  .brand-intro__headline {
    font-size: clamp(1.4rem, 4.3vw, 1.95rem);
  }

  .brand-intro__message {
    margin-top: 0.12rem;
    font-size: 0.62rem;
  }

  .brand-intro__welcome {
    inset-block-end: calc(0.65rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.brand-intro-eligible,
  html.brand-intro-eligible body {
    overflow: auto;
  }

  .brand-intro {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Violet v2 — a compact, explainable consultation rather than a decorative quiz. */
.advisor-result__open {
  width: 5.8rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.advisor-result__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
}

.advisor-result__actions button {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.58rem;
  white-space: nowrap;
}

.advisor-result__actions button:hover {
  border-color: var(--brass-dark);
  color: var(--brass-dark);
}

.advisor-whatsapp {
  width: 100%;
  margin-top: 1rem;
}

.advisor-clear {
  margin-top: 0.65rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.66rem;
}

@media (max-width: 47.999rem) {
  .advisor-dialog[open] {
    transition: grid-template-rows 280ms var(--ease);
  }

  .advisor-dialog[data-advisor-view="compact"][open] {
    grid-template-rows: 6rem 1fr;
  }

  .advisor-dialog[data-advisor-view="results"][open] {
    grid-template-rows: 4.75rem 1fr;
  }

  .advisor-dialog[data-advisor-view="compact"] .advisor-portrait img,
  .advisor-dialog[data-advisor-view="results"] .advisor-portrait img {
    object-position: center 35%;
  }

  .advisor-dialog[data-advisor-view="compact"] .advisor-portrait > span,
  .advisor-dialog[data-advisor-view="results"] .advisor-portrait > span {
    padding: 0.35rem 0.5rem;
    font-size: 0.55rem;
  }

  .advisor-content {
    padding-top: 1rem;
  }

  .advisor-options button {
    min-height: 4.25rem;
  }

  .advisor-results {
    gap: 0.55rem;
  }

  .advisor-result {
    min-height: 0;
    grid-template-columns: 4.7rem minmax(0, 1fr);
    grid-template-areas:
      "image copy"
      "price price";
    gap: 0.55rem 0.7rem;
  }

  .advisor-result__open {
    grid-area: image;
    width: 4.7rem;
  }

  .advisor-result__image {
    width: 4.7rem;
  }

  .advisor-result__copy {
    grid-area: copy;
  }

  .advisor-result__price {
    grid-area: price;
    width: 100%;
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .advisor-result__actions button {
    min-height: 2.5rem;
    font-size: 0.62rem;
  }
}

@media (max-width: 23rem) {
  .advisor-options {
    grid-template-columns: 1fr;
  }

  .advisor-result__actions button {
    padding-inline: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisor-dialog[open] {
    transition: none;
  }

  .product-dialog__visual::before {
    animation: none;
  }
}