/*
 * Dulce y Fragancia. "Paper and ink": a perfume house's printed catalogue, on screen.
 * Palette approved by the client: espresso black, garnet and leather set in antique gold, green for calling. Packshots
 * (shot on white) sit on a champagne-light stage; Rafahia and the boutique sit on umber. Noto Serif Display only from about 2rem up (its hairlines vanish below);
 * Ysabeau Office for everything smaller. Logical properties only, so Arabic mirrors without overrides.
 * No inline styles: the Content-Security-Policy allows this file only.
 */

:root {
  --paper: #14100d;                 /* espresso: the page */
  --paper-2: #1c1612;               /* raised espresso: index, basket panel, fields */
  --stage: #ebe3d6;                 /* champagne-light stage under packshots shot on white */
  --ink: #f6f0e7;                   /* text */
  --ink-2: #e4dacc;
  --ink-3: #c9bdac;                 /* 10.2:1 on espresso */
  --line: rgba(246, 240, 231, 0.18);
  --line-2: rgba(246, 240, 231, 0.36);
  --night: #201813;                 /* umber: Rafahia and the boutique */
  --night-2: #2a2019;
  --deep: #0c0a08;                  /* footer */
  --on-night: #f6f0e7;
  --on-night-2: #ddd2c3;
  --line-n: rgba(246, 240, 231, 0.22);
  --on-stage: #1a1410;              /* text on the light stage and the card backs */
  --on-stage-2: #5c5248;
  --garnet: #a3233a;                /* every choice you make: buy, the open section, the chosen filter (white on it 7.3:1) */
  --garnet-hi: #b8344a;
  --garnet-lo: #8c1c31;
  --leather: #4a372a;               /* the other buttons (ink on it 8.0:1) */
  --leather-hi: #5b4434;
  --leather-line: rgba(255, 236, 218, 0.16);
  --leaf: #1a6d43;                  /* call and WhatsApp */
  --leaf-hi: #1f7f4d;
  --cream: #fbf4ea;                 /* prices and the scent headings */
  --gold: #d4aa5a;                  /* antique gold: small lights only (edges, stars, pin, music, today), never a fill */
  --gold-hi: #e6c47c;
  --glow: 212, 170, 90;             /* the gold as numbers, for rgba() glows */
  --fam-floral: #a8365a;            /* card backs, one fill per scent family (white on each 5.3:1 or more) */
  --fam-warm_spiced: #9e5420;
  --fam-woody: #7a5638;
  --fam-citrus_fruity: #64721e;
  --fam-gourmand: #8c5530;
  --rose: #d98c97;                  /* soft Côte Noire rose: state only, 7.3:1 on espresso */
  --open: #86c596;
  --display: "Tenor Sans", Amiri, "Noto Serif SC", Georgia, serif;
  --text: "Ysabeau Office", "IBM Plex Sans Arabic", "Noto Sans SC", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-flip: cubic-bezier(0.22, 1, 0.3, 1);
  --wrap: 1360px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(3.5rem, 6vw, 6rem);            /* one section gap; never stacked with a margin of the same size */
  --hd: 4.25rem;
  --tb: 2.75rem;                              /* top bar (call, WhatsApp, socials) above the main bar */
  --r: 4px;
  color-scheme: dark;
  accent-color: var(--garnet);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 1rem); scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-wrap: break-word; font: 400 1.0625rem/1.6 var(--text); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-inline-size: 100%; block-size: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.16; letter-spacing: 0; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }   /* a long Polish, Lithuanian or German word breaks (hyphenated where the browser knows the language) instead of pushing the page wide */
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: var(--r); }
.skip:focus { inset-block-start: 1rem; }
/* The boutique's name, traced from its street sign (design/brand). The letters are a mask: CSS colours them and the film's light crosses them.
   The SVG is cached for a year, so a new drawing (the owner's own file) needs a new file name. */
.wm { display: block; inline-size: 100%; aspect-ratio: 1000 / 268; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .wm { background: currentColor; -webkit-mask: url("../img/wordmark-sign.svg") center / contain no-repeat; mask: url("../img/wordmark-sign.svg") center / contain no-repeat; }
}
@media (forced-colors: active) { .wm { forced-color-adjust: none; background: CanvasText; } }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num, .price, [href^="tel"] { font-variant-numeric: lining-nums tabular-nums; unicode-bidi: isolate; }
.price { white-space: nowrap; direction: ltr; }   /* "99 €" reads the same way in Arabic */
.ico { inline-size: 1.15em; block-size: 1.15em; flex: none; }
[dir="rtl"] .ico--arrow { transform: scaleX(-1); }

/* ---------- buttons, links, pills ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-block-size: 3.125rem; padding: 0 1.5rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 1rem/1 var(--text); letter-spacing: 0.005em; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn--light { background: var(--on-night); border-color: var(--on-night); color: var(--ink); }
.btn--quiet { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--sm { min-block-size: 2.5rem; padding: 0 1.05rem; font-size: 0.9375rem; }
.btn--block { inline-size: 100%; }
.btn--grow { flex: 1 1 12rem; }
.btn.is-done { background: var(--rose); border-color: var(--rose); color: var(--paper); }
.link { display: inline-block; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--line-2); transition: text-decoration-color 200ms ease, color 200ms ease, text-underline-offset 220ms var(--ease-out); background: none; border: 0; padding: 0; cursor: pointer; }
.link--light { color: var(--on-night); text-decoration-color: var(--line-n); }
.pill { min-block-size: 2.5rem; padding: 0 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 0.9375rem/1 var(--text); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.pill:active { transform: scale(0.97); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #2e2620; border-color: #2e2620; }
  .btn--light:hover { background: #fff; border-color: #fff; }
  .btn--quiet:hover { background: rgba(23, 19, 15, 0.05); border-color: var(--ink); }
  .link:hover { text-decoration-color: currentColor; text-underline-offset: 0.42em; }
  .pill:hover { border-color: var(--ink); color: var(--ink); }
  .pill[aria-pressed="true"]:hover { color: var(--paper); }
}

/* ---------- header ---------- */
.hd { position: sticky; inset-block-start: 0; z-index: 40; background: var(--paper); border-block-end: 1px solid var(--line); transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.hd__in { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gut); block-size: var(--hd); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.hd__mark { display: block; inline-size: 11.5rem; transition: opacity 240ms ease; }
.hd--over:not(.is-solid) .hd__mark { opacity: 0; pointer-events: none; }
.hd__nav { display: flex; justify-content: center; gap: 1.6rem; min-inline-size: 0; overflow: hidden; }   /* clipped, never wider: site.js reads the clip */
.hd__nav a { flex: none; white-space: nowrap; font-weight: 500; font-size: 0.98rem; color: var(--ink-2); padding-block: 0.5rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.55em; text-decoration-color: transparent; transition: color 200ms ease, text-decoration-color 200ms ease; }
.hd__nav a[aria-current] { color: var(--ink); text-decoration-color: currentColor; }
.hd__tools { display: flex; align-items: center; gap: 0.5rem; }
.hd__icon, .hd__menu { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.hd__menu { display: none; }
.hd__bag { display: inline-flex; align-items: center; gap: 0.45rem; block-size: 2.75rem; min-inline-size: 2.75rem; justify-content: center; padding-inline: 0.6rem 0.75rem; border: 0; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.hd__icon:active, .hd__bag:active, .hd__menu:active { transform: scale(0.96); }
.hd__count { min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--rose); color: var(--paper); font: 700 0.75rem/1 var(--text); }
@media (hover: hover) and (pointer: fine) {
  .hd__nav a:hover { color: var(--ink); text-decoration-color: var(--line-2); }
  .hd__icon:hover, .hd__bag:hover, .hd__menu:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
  .hd__icon:active, .hd__bag:active, .hd__menu:active { transform: scale(0.96); }
}
/* ---------- top bar: open-now, address, call, WhatsApp, socials. It slides up out of view once the page scrolls
   (or a panel opens), so only the main bar stays: transform only, the page never jumps. ---------- */
.hd { transition: transform 320ms var(--ease-out), background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.hd.is-up, html.is-locked .hd { transform: translateY(calc(-1 * var(--tb))); }
.tb { border-block-end: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-2); transition: opacity 240ms ease; }
.hd.is-up .tb, html.is-locked .tb { opacity: 0; }
.tb__in { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gut); block-size: var(--tb); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tb__info { display: flex; align-items: center; gap: 1.5rem; min-inline-size: 0; }
.tb .status { font-size: 0.875rem; }
.tb__addr { display: inline-flex; align-items: center; gap: 0.4rem; block-size: 2.125rem; white-space: nowrap; transition: color 200ms ease; }
.tb__links { display: flex; align-items: center; gap: 0.4rem; margin-inline-start: auto; }
.tb__call { display: inline-flex; align-items: center; gap: 0.45rem; block-size: 2.125rem; padding-inline: 0.8rem 0.95rem; border-radius: 999px; font-weight: 600; color: var(--ink); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.tb__ico { display: inline-grid; place-items: center; inline-size: 2.125rem; block-size: 2.125rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.tb__ico .ico { inline-size: 1.05rem; block-size: 1.05rem; }
.tb__call:active, .tb__ico:active { transform: scale(0.95); }
.hd--over:not(.is-solid) .tb { border-color: rgba(239, 232, 222, 0.14); color: rgba(239, 232, 222, 0.82); }
.hd--over:not(.is-solid) .tb__ico { border-color: rgba(239, 232, 222, 0.34); }
@media (hover: hover) and (pointer: fine) {
  .tb__addr:hover { color: var(--ink); }
  .tb__call:hover { background: var(--line); }
  .tb__ico:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
}
/* a long language: first the basket word and the language name make room for the categories (snug);
   if they still do not fit, the bar works like a phone's (compact). Both set by site.js */
.hd--snug .lang__name { display: none; }
.hd--snug .hd__nav a { padding-inline: 0.68rem; }
.hd--snug .hd__bag-t, .hd--compact .hd__bag-t { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* out of sight, still the link's name for screen readers */
.hd--compact .hd__in { grid-template-columns: 1fr auto; gap: 1rem; }
.hd--compact .hd__nav, .hd--compact .lang__name { display: none; }
.hd--compact .hd__menu { display: inline-grid; }
/* the two menu lines turn into an x while the sheet is open */
.ico--menu path { transition: transform 260ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.hd__menu[aria-expanded="true"] .ico__l1 { transform: translateY(3px) rotate(45deg); }
.hd__menu[aria-expanded="true"] .ico__l2 { transform: translateY(-3px) rotate(-45deg); }
/* frosted glass over the page on desktop, solid on touch screens (cheaper) and for reduced transparency */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-transparency: no-preference) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hd:not(.hd--over), .hd--over.is-solid { background: rgba(20, 16, 13, 0.76); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
    .drawer__veil { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  }
}
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; block-size: 2.75rem; padding-inline: 0.8rem 0.7rem; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 500; font-size: 0.95rem; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0; z-index: 50; list-style: none; margin: 0; padding: 0.75rem; display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: 0.1rem 0.5rem; background: var(--stage); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 44px rgba(23, 19, 15, 0.14); }
.lang a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 6px; font-size: 0.95rem; }
.flag { display: block; flex: none; inline-size: 1.375rem; block-size: 1rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(239, 231, 219, 0.18); }   /* drawn flags (Windows shows emoji flags as letters); the hairline keeps white bands off the black */
.lang summary .ico--chevron { inline-size: 0.9rem; block-size: 0.9rem; opacity: 0.7; transform: rotate(90deg); transition: transform 200ms var(--ease-out); }   /* the drawn chevron points right: turned to point down */
.lang[open] summary .ico--chevron { transform: rotate(-90deg); }
.lang a[aria-current] { background: var(--paper-2); font-weight: 600; }
.lang:not([open]) > ul { display: none; }   /* closed, it must not take room off-screen (it widened every page) */
.lang[open] ul { animation: pop 180ms var(--ease-out); transform-origin: top right; }
/* 18 languages are taller than a sideways phone: the list stops at the screen's foot and scrolls inside itself
   (the header is fixed, so scrolling the page never brought Lietuvių or Suomi into view) */
.lang ul { max-block-size: calc(100dvh - var(--tb) - var(--hd) - 1.25rem); overflow-y: auto; overscroll-behavior: contain; }
[dir="rtl"] .lang[open] ul { transform-origin: top left; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }

/* header over the film (home): transparent and light until the film scrolls away */
.hd--over { position: fixed; inset-inline: 0; background: transparent; border-color: transparent; color: var(--on-night); }
.hd--over .hd__nav a { color: rgba(239, 232, 222, 0.82); }
.hd--over .hd__nav a[aria-current] { color: var(--on-night); }
.hd--over .lang summary { border-color: rgba(239, 232, 222, 0.34); }
.hd--over.is-solid { background: var(--paper); border-color: var(--line); color: var(--ink); }
.hd--over.is-solid .hd__nav a { color: var(--ink-2); }
.hd--over.is-solid .lang summary { border-color: var(--line-2); }

/* phone menu sheet */
.sheet { position: fixed; inset: var(--hd) 0 0; z-index: 39; background: var(--paper); padding: 1.5rem var(--gut) 2.5rem; display: flex; flex-direction: column; opacity: 0; transform: translateY(-0.5rem); transition: opacity 220ms ease, transform 240ms var(--ease-out); }
.sheet.is-open { opacity: 1; transform: none; }
.sheet__nav { display: grid; }
.sheet__nav a { font: 400 clamp(1.25rem, 5.4vw, 1.55rem)/1.3 var(--display); padding-block: 0.7rem; border-block-end: 1px solid var(--line); }
.sheet__foot { display: grid; gap: 0.4rem; margin-block-start: auto; padding-block-start: 2rem; color: var(--ink-2); }

/* ---------- opening film ---------- */
.film { position: relative; block-size: 100vh; block-size: 100svh; min-block-size: 560px; max-block-size: 1100px; overflow: hidden; background: #000; color: var(--on-night); }
.film__reel { position: absolute; inset: 0; z-index: 0; isolation: isolate; } /* clips climb z-index inside, never over the title */
.film__clip { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.4s ease; }
.film__clip.is-on { opacity: 1; }
.film__clip:first-child.is-on { animation: clip-in 1.8s var(--ease-out) both; }
.film__clip video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.film__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72) 100%); }
.film__copy { position: absolute; z-index: 2; inset-inline: var(--gut); inset-block-end: clamp(2rem, 6vh, 4.5rem); max-inline-size: var(--wrap); margin-inline: auto; filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.55)); }
.film__h { inline-size: min(100%, clamp(19rem, 44vw, 42rem)); color: #fff; }
.film__pause { position: absolute; z-index: 2; inset-inline-end: var(--gut); inset-block-end: clamp(2rem, 6vh, 4.5rem); min-block-size: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: var(--on-night); font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: rgba(239, 232, 222, 0.45); }
@keyframes clip-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
/* the name arrives out of a soft blur, then the pause control (Home Sushi's hero) */
.js .film__h { animation: rise-in 1.2s var(--ease-out) 0.3s both; }
.js .film__pause { animation: fade-in 0.8s ease 1.1s both; }
@keyframes rise-in { from { translate: 0 18px; filter: blur(8px); } }   /* no fade: at opacity 0 Chrome times the page's main content at the end of this animation, 3.5 s instead of 1.8 s on a slow phone. A blurred hairline is invisible anyway */
@keyframes fade-in { from { opacity: 0; } }

/* ---------- home: opening line ---------- */
.intro { padding-block: clamp(4rem, 8vw, 7.5rem) clamp(2rem, 4vw, 3rem); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.intro__text { font: 400 clamp(1.35rem, 2.3vw, 1.95rem)/1.36 var(--display); letter-spacing: 0; max-inline-size: 30em; text-wrap: pretty; }
.intro__aside { display: grid; gap: 0.75rem; padding-inline-start: 1.75rem; border-inline-start: 1px solid var(--line-2); color: var(--ink-2); }
.intro__links { margin-block-start: 0.25rem; }

/* ---------- live status ---------- */
.status { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; }
.status__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--ink-3); flex: none; }
.status.is-open .status__dot { background: var(--open); box-shadow: 0 0 0 3px rgba(63, 125, 80, 0.16); }

/* ---------- belts of flip cards (from Home Sushi, calmer) ---------- */
.row { padding-block: clamp(2.5rem, 5vw, 4rem) 0.5rem; }
.row__head { display: flex; align-items: center; gap: 0.9rem; }
.row__h { flex: 1 1 auto; min-inline-size: 0; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.row__pause { flex: none; display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; transition: transform 160ms var(--ease-out), border-color 200ms ease, color 200ms ease; }
.row__pause:active { transform: scale(0.95); }
.row__pause .ico--play, .row__pause[aria-pressed="true"] .ico--pause { display: none; }
.row__pause[aria-pressed="true"] .ico--play { display: block; }
.row__all { flex: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .row__pause:hover { border-color: var(--ink); color: var(--ink); } }
.belt { overflow-x: auto; overflow-y: hidden; direction: ltr; padding-block: 1.5rem 1.75rem; padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-behavior: auto; }
.belt::-webkit-scrollbar { display: none; }
.belt.is-live { cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); }
@media (hover: none) { .belt.is-live { -webkit-mask-image: none; mask-image: none; } }   /* the mask costs a repaint per frame on phones */
.belt.is-dragging { cursor: grabbing; }
.belt.is-static { -webkit-mask-image: none; mask-image: none; cursor: auto; }
.belt.is-dragging .fc { pointer-events: none; }
.belt__track { display: flex; gap: 1.25rem; inline-size: max-content; perspective: 1600px; will-change: transform; }
[dir="rtl"] .belt__track > * { direction: rtl; }   /* the belt runs left to right in every language; the cards read in theirs */
.belt .fc { inline-size: clamp(13.5rem, 18vw, 16.25rem); flex: none; }

/* Home Sushi's plate: it flips and rises 6px on hover with a deeper shadow, gives a little when pressed, and the
   card passing the middle of a belt stands forward ("is-now", set by site.js) */
.fc { position: relative; perspective: 1100px; transform: translateY(var(--lift, 0px)) rotateY(var(--tilt, 0deg)); transition: transform 450ms var(--ease-out); }
.fc.is-now { --lift: -6px; }
.fc__in { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); transform-style: preserve-3d; transition: transform 640ms var(--ease-flip), box-shadow 450ms ease; }
.fc.is-now .fc__in { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); }
/* keyboard focus turns the card; a mouse click that leaves focus on it does not (own rule: no :has(), no drop) */
.fc:has(:focus-visible) .fc__in { transform: rotateY(180deg); }
/* touch: no hover turn; a tap opens the quick view, so the card only answers the press */
@media (hover: none) { .fc:active .fc__in { transform: scale(0.97); transition-duration: 160ms; } }
@media (hover: hover) and (pointer: fine) {
  .fc:hover .fc__in { transform: rotateY(180deg) translateY(-6px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55); }
  .fc:active .fc__in { transform: rotateY(180deg) translateY(-2px) scale(0.97); transition-duration: 160ms; }
  .fc__in { cursor: pointer; }
}
.fc__front, .fc__back { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc__front { display: block; background: var(--stage); }
.fc__front img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 1.4rem; user-select: none; -webkit-user-drag: none; }
.fc__flag { position: absolute; inset-block-start: 0.85rem; inset-inline-start: 0.9rem; color: var(--ink); font: 600 0.82rem/1 var(--text); }
.fc--out .fc__front img { opacity: 0.55; }
.fc__back { transform: rotateY(180deg); background: var(--ink); color: var(--on-night); padding: 1.2rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fc__back > * { opacity: 0; transform: translateY(6px); transition: opacity 280ms ease, transform 320ms var(--ease-out); }
.fc:has(:focus-visible) .fc__back > * { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .fc:hover .fc__back > * { opacity: 1; transform: none; } }
.fc__back > :nth-child(1) { transition-delay: 160ms; } .fc__back > :nth-child(2) { transition-delay: 200ms; }
.fc__back > :nth-child(3) { transition-delay: 240ms; } .fc__back > :nth-child(4) { transition-delay: 280ms; } .fc__back > :nth-child(5) { transition-delay: 310ms; }
.fc__fam { font-size: 0.85rem; color: var(--on-night-2); }
.fc__name { font: 400 1.25rem/1.16 var(--display); letter-spacing: 0; }
.fc__line { font-size: 0.92rem; line-height: 1.45; color: var(--on-night-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fc__act { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fc__price { font-weight: 600; font-size: 1.05rem; }
/* "Ver el producto": its line draws in once the back has turned (Home Sushi's "Ver el plato") */
.fc__more { align-self: flex-start; padding-block-end: 2px; font-size: 0.9rem; font-weight: 500; color: var(--on-night-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease-out) 260ms, color 200ms ease; }
[dir="rtl"] .fc__more { background-position: 100% 100%; }
.fc:has(:focus-visible) .fc__more { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) { .fc:hover .fc__more { background-size: 100% 1px; } }
.fc__title { margin-block-start: 0.85rem; font: 600 1.02rem/1.3 var(--text); letter-spacing: 0; }
/* the type wraps instead of being cut; the price stays on the first line, or starts the line when there is no type */
.fc__sub { margin-block-start: 0.2rem; font-size: 0.95rem; color: var(--ink-2); display: flex; align-items: baseline; gap: 0.2rem 0.75rem; }
.fc__kind { color: var(--ink-3); min-inline-size: 0; }
.fc__sub .price { flex: none; margin-inline-start: auto; }
.fc__sub > .price:only-child { margin-inline-start: 0; }
.fc__out { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .fc__title a:hover { color: var(--rose); } .fc__more:hover { color: var(--on-night); } }

/* ---------- Rafahia (dark) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--night); color: var(--on-night); margin-block-start: clamp(3rem, 6vw, 5rem); }
.feature__img { min-block-size: clamp(32rem, 62vw, 50rem); overflow: hidden; }
.feature__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.feature__txt { padding: clamp(3rem, 6vw, 6rem) var(--gut); display: flex; flex-direction: column; justify-content: center; max-inline-size: 38rem; }
.feature__kind { color: var(--on-night-2); font-size: 0.98rem; margin-block-end: 1.5rem; }
.feature__h { font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 1.04; margin-block: 0 0.75rem; }
.feature__desc { font-size: 1.2rem; line-height: 1.5; max-inline-size: 28rem; margin-block-end: 1.75rem; }
.feature__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-block-start: 2rem; }
.feature__price { font-size: 1.6rem; font-weight: 300; }
.feature__also { margin-block-start: 1.75rem; color: var(--on-night-2); font-size: 0.95rem; }
.feature__also a { color: var(--on-night); text-decoration: underline; text-underline-offset: 0.28em; text-decoration-color: var(--line-n); }

/* scent pyramid */
.notes { margin: 0; display: grid; }
.notes > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-block: 0.8rem; border-block-start: 1px solid var(--line); }
.notes > div:last-child { border-block-end: 1px solid var(--line); }
.notes dt { font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.notes dd { margin: 0; }
.notes__source { margin-block-start: 0.6rem; font-size: 0.85rem; color: var(--ink-3); }
.feature .notes > div { border-color: var(--line-n); }
.feature .notes dt, .feature .notes__source { color: var(--on-night-2); }

/* ---------- scent index ---------- */
.index { background: var(--paper-2); padding-block: var(--sec); margin-block-start: clamp(2rem, 4vw, 3.5rem); }
.index__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-block-end: 2.25rem; }
.index__h { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.index__p { color: var(--ink-2); max-inline-size: 30rem; }

/* ---------- Côte Noire ---------- */
.cn { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-block-start: var(--sec); }
/* a block with its own background already ends the one before it: no extra margin on top of its padding */
.row + .index, .index + .cn { margin-block-start: 0; }
.cn__img { background: var(--stage); min-block-size: clamp(24rem, 38vw, 34rem); display: grid; place-items: center; }
.cn__img img { inline-size: 100%; block-size: 100%; max-block-size: 34rem; object-fit: contain; mix-blend-mode: multiply; padding: clamp(1rem, 2.5vw, 2rem); }
.cn__txt { padding: var(--sec) var(--gut); display: flex; flex-direction: column; justify-content: center; max-inline-size: 36rem; }
.cn__h { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-block-end: 1.25rem; }
.cn__txt > p { color: var(--ink-2); max-inline-size: 26rem; }
.cn__list { list-style: none; margin: 2rem 0; padding: 0; }
.cn__list a { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; border-block-start: 1px solid var(--line); font-weight: 500; transition: color 200ms ease; }
.cn__list li:last-child a { border-block-end: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .cn__list a:hover { color: var(--rose); } }
.cn__txt .btn { align-self: flex-start; }

/* ---------- Rūta ---------- */
.sweets { padding-block: var(--sec) 0; }
.sweets__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sweets__h { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-block-end: 1rem; }
.sweets__txt > p { color: var(--ink-2); max-inline-size: 26rem; margin-block-end: 1.5rem; }
.sweets__img { background: var(--paper-2); border-radius: var(--r); aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; }
.sweets__img img { max-block-size: 100%; object-fit: contain; mix-blend-mode: multiply; padding: clamp(1.5rem, 5vw, 3.5rem); }

/* ---------- the boutique (dark) ---------- */
.visit { background: var(--night); color: var(--on-night); padding-block: var(--sec); margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2.5rem clamp(2rem, 5vw, 5rem); }
.visit__h { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.visit__addr { font: 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.3 var(--display); color: var(--on-night-2); margin-block: 1rem 1.5rem; }
.visit .status__dot { background: var(--on-night-2); }
.visit .status.is-open .status__dot { background: #6fbf86; box-shadow: 0 0 0 3px rgba(111, 191, 134, 0.18); }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; }
.visit__cta { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.visit .btn { background: var(--on-night); border-color: var(--on-night); color: var(--ink); }
.visit .btn--quiet { background: transparent; border-color: var(--line-n); color: var(--on-night); }
@media (hover: hover) and (pointer: fine) { .visit .btn:hover { background: #fff; border-color: #fff; } .visit .btn--quiet:hover { background: rgba(239, 232, 222, 0.08); border-color: var(--on-night); } }

/* ---------- footer ---------- */
.ft { background: var(--ink); color: var(--on-night-2); padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; font-size: 0.98rem; }
.visit + .ft, main:has(> .visit:last-child) + .ft { border-block-start: 1px solid var(--line-n); }
.ft a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ft a:hover { color: var(--on-night); } }
.ft__top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; padding-block-end: 2.5rem; border-block-end: 1px solid var(--line-n); }
.ft__mark { inline-size: clamp(11rem, 17vw, 14rem); color: var(--on-night); }
.ft__contact { display: grid; gap: 0.35rem; text-align: end; }
.ft__contact .status { justify-content: flex-end; color: var(--on-night); }
.ft__contact .status__dot { background: var(--on-night-2); }
.ft__contact .status.is-open .status__dot { background: #6fbf86; }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 2.5rem; }
.ft__h { font: 600 0.98rem/1.2 var(--text); letter-spacing: 0; color: var(--on-night); margin-block-end: 0.8rem; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li a { display: inline-block; padding-block: 0.25rem; }
.ft__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line-n); font-size: 0.88rem; }

/* ---------- inner pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 1.5rem 0; font-size: 0.92rem; color: var(--ink-3); }
.crumbs a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }
.page { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec); }
.page__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-block-end: 2rem; }
.prose { max-inline-size: 42rem; color: var(--ink-2); }
.prose p + p { margin-block-start: 1rem; }
.prose h2 { margin-block: 2.25rem .75rem; font-size: 1.5rem; font-weight: 400; color: var(--ink); }
.prose h2:first-child { margin-block-start: 0; }
.empty { color: var(--ink-2); padding-block: 2rem; }
.notfound__go { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; }
.page + .row { padding-block-start: 0; }          /* the page's own bottom space is enough above the belt */

/* category + scent pages */
.shop { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.shop__head { padding-block: 2rem 2.25rem; display: grid; gap: 0.75rem; }
.shop__h { font-size: clamp(2rem, 4vw, 3.2rem); }
.shop__n { color: var(--ink-3); }
.shop__desc { color: var(--ink-2); max-inline-size: 40rem; }
.shop__sub { font: 600 1.1rem/1.3 var(--text); letter-spacing: 0; margin-block: 2.5rem 1.5rem; }
.scent { grid-template-columns: 1fr minmax(0, 28rem); align-items: end; gap: 2rem 4rem; }
.scent__fam { color: var(--ink-3); margin-block-end: 0.5rem; }
.filters { display: grid; gap: 0.6rem; margin-block-end: 2.5rem; }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters__label { inline-size: 5.5rem; color: var(--ink-3); font-size: 0.92rem; }
.filters__empty { padding-block: 1rem 2rem; color: var(--ink-2); }
.filters__empty .link { margin-inline-start: 0.35rem; }
/* each card is three rows of the grid (photo, name, type and price), so names of one, two or three lines still
   leave every price in a row on the same line */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); column-gap: 1.25rem; }
.grid > .fc { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 0; margin-block-end: 2.75rem; }   /* the card never grows past its column: a long product type ("Autoverzorgingsset") wraps instead of pushing a 320 px phone wide */

/* product */
.product__main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: 1.5rem clamp(3rem, 6vw, 5rem); }
.gallery { position: sticky; inset-block-start: calc(var(--hd) + 1.25rem); }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--stage); }
.gallery__main img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; padding: clamp(1.5rem, 4vw, 3rem); }
.gallery__thumbs { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.gallery__thumbs a { display: block; aspect-ratio: 1; border-radius: var(--r); background: var(--stage); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 200ms ease; }
.gallery__thumbs a[aria-current] { box-shadow: inset 0 0 0 1px var(--ink); }
.gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 0.35rem; opacity: 0.6; transition: opacity 200ms ease; }
.gallery__thumbs a[aria-current] img { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .gallery__thumbs a:hover img { opacity: 1; } }
.product__info { padding-block-start: 0.5rem; }
.product__meta { color: var(--ink-3); margin-block-start: 0.5rem; }
.product__h { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-block: 0.75rem 1rem; }
.product__price { font-size: 1.7rem; font-weight: 300; }
.product__price small { font-size: 0.85rem; color: var(--ink-3); margin-inline-start: 0.35rem; font-weight: 500; }
.product__price del { color: var(--ink-3); margin-inline-end: 0.5rem; font-size: 1.2rem; }
.product__short { color: var(--ink-2); margin-block: 1.25rem 1.75rem; max-inline-size: 34rem; }
.product__short p + p, .product__desc p + p { margin-block-start: 0.9rem; }
.buy { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.buy__out { color: var(--ink-2); font-weight: 500; }
.buy__ask { margin-block: 1rem 2.25rem; }
.buy__ask a { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--line-2); }
.qty { display: inline-flex; align-items: stretch; block-size: 3.125rem; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.qty button { inline-size: 2.75rem; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; transition: background-color 200ms ease; }
.qty input { inline-size: 2.5rem; background: transparent; border: 0; text-align: center; font: 600 1rem var(--text); color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty__n { display: grid; place-items: center; min-inline-size: 1.75rem; font-weight: 600; }
.qty--sm { block-size: 2.25rem; }
.qty--sm button { inline-size: 2.1rem; }
@media (hover: hover) and (pointer: fine) { .qty button:hover { background: rgba(23, 19, 15, 0.06); } }
.product__desc { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; margin-block: 2rem; color: var(--ink-2); max-inline-size: 36rem; }
.product__shop { display: grid; gap: 0.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: 0.98rem; }
.product__info .notes { margin-block-start: 0.5rem; }
.product > .row { border-block-start: 1px solid var(--line); }
.food { border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.25rem; margin-block: 2rem; max-inline-size: 36rem; }
.food h2 { font: 600 1.1rem/1.3 var(--text); letter-spacing: 0; margin-block-end: 0.75rem; }
.food dl { margin: 0; }
.food dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: 0.5rem; border-block-start: 1px solid var(--line); }
.food dt { font-weight: 600; color: var(--ink-2); }
.food dd { margin: 0; }
.food__missing { color: var(--rose); font-weight: 500; }

/* basket lines (panel + page) */
.line { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: start; padding-block: 1rem; border-block-start: 1px solid var(--line); }
.line__img { inline-size: 4.5rem; block-size: 5.6rem; object-fit: contain; background: var(--stage); border-radius: var(--r); mix-blend-mode: multiply; padding: 0.3rem; }
.line__name { font: 600 1rem/1.3 var(--text); }
.line__warn { color: var(--rose); font-size: 0.9rem; margin-block-start: 0.25rem; }
.line__row { display: flex; align-items: center; gap: 0.9rem; margin-block-start: 0.6rem; }
.line__rm { background: none; border: 0; padding: 0.4rem 0; color: var(--ink-3); font-size: 0.9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.line__sum { font-weight: 600; padding-block-start: 0.15rem; }

/* slide-in basket */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__veil { position: absolute; inset: 0; background: rgba(20, 17, 15, 0.36); opacity: 0; transition: opacity 260ms ease; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(27rem, 100vw); background: var(--paper); display: flex; flex-direction: column; padding: 1.25rem 1.5rem 1.5rem; transform: translateX(100%); transition: transform 300ms var(--ease-drawer); box-shadow: -24px 0 60px rgba(23, 19, 15, 0.16); outline: none; }
[dir="rtl"] .drawer__panel { transform: translateX(-100%); box-shadow: 24px 0 60px rgba(23, 19, 15, 0.16); }
.drawer.is-open .drawer__veil { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding-block-end: 1rem; }
.drawer__head h2 { font-size: 2rem; font-weight: 400; }
.drawer__x { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer; transition: transform 160ms var(--ease-out); }
.drawer__x:active { transform: scale(0.95); }
.drawer__empty { color: var(--ink-2); padding-block: 1rem; }
.drawer__items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.drawer__foot { padding-block-start: 1.25rem; border-block-start: 1px solid var(--line-2); display: grid; gap: 0.75rem; }
.drawer__total { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.1rem; }
.drawer__note { color: var(--ink-3); font-size: 0.9rem; }
.drawer__keep { justify-self: center; font-weight: 500; }

/* basket page + order form */
.basket__items { list-style: none; margin: 0; padding: 0; max-inline-size: 48rem; }
.basket__total { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; max-inline-size: 48rem; padding-block: 1.25rem 2.5rem; border-block-start: 1px solid var(--line-2); font-weight: 600; }
.basket__total b { font-size: 1.5rem; }
.basket__total small { color: var(--ink-3); font-weight: 500; }
.order { max-inline-size: 34rem; display: grid; gap: 1.1rem; padding-block-start: 2rem; border-block-start: 1px solid var(--line); }
.order h2 { font-size: 2.2rem; font-weight: 400; }
.order__text { color: var(--ink-2); }
.field { display: grid; gap: 0.45rem; border: 0; padding: 0; margin: 0; }
.field > span, .field legend { font-weight: 600; font-size: 0.95rem; color: var(--ink-2); padding: 0; }
.field input, .field textarea { inline-size: 100%; background: var(--stage); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; padding: 0.8rem 0.95rem; font: 400 1rem/1.5 var(--text); transition: border-color 200ms ease, box-shadow 200ms ease; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 19, 15, 0.08); }
.choice { display: flex; align-items: center; gap: 0.65rem; min-block-size: 2.75rem; cursor: pointer; }
.choice input { inline-size: 1.15rem; block-size: 1.15rem; }
.order__error { color: var(--rose); font-weight: 600; }
.order__privacy { font-size: 0.9rem; color: var(--ink-3); }
.order__privacy a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.basket .btn--fill { background: var(--ink); color: var(--paper); }

/* ---------- Arabic and Chinese ---------- */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .intro__text, :lang(ar) .fc__name, :lang(ar) .visit__addr { line-height: 1.3; letter-spacing: 0; }
:lang(ar) body { line-height: 1.85; }
:lang(ar) *, :lang(zh-Hans) * { font-style: normal; }
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) .intro__text { line-height: 1.25; letter-spacing: 0; }

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .hd__bag-t { display: none; }                 /* the bag icon and its count are enough beside seven links */
  .tb__addr { display: none; }
  .hd__nav { gap: 1.1rem; }
  .hd__nav a { font-size: 0.92rem; }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --hd: 3.75rem; }
  body { font-size: 1rem; }
  .hd__in { grid-template-columns: 1fr auto; gap: 1rem; }
  .hd__nav, .hd__bag-t, .lang__name { display: none; }
  /* phones: the flag stays in the bar; its list opens across the bar, not off the edge */
  .hd__in { position: relative; }
  .lang { position: static; }
  .lang summary { block-size: 2.5rem; padding-inline: 0.6rem 0.5rem; gap: 0.35rem; }
  .lang ul { inset-inline: var(--gut); inset-block-start: calc(100% - 0.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd__menu { display: inline-grid; }
  .hd__bag { padding-inline: 0.7rem; }
  .film__pause { inset-block-end: auto; inset-block-start: calc(var(--tb) + var(--hd) + 1rem); }
  .tb__info { display: none; }                  /* phones: call on the left, WhatsApp and socials on the right */
  .tb__links { inline-size: 100%; margin-inline-start: 0; }
  .tb__call { margin-inline-end: auto; padding-inline-start: 0.2rem; }
  .tb__ico { inline-size: 2.375rem; block-size: 2.375rem; }
  .intro__grid, .feature, .cn, .sweets__grid, .visit__grid, .product__main, .index__head, .scent { grid-template-columns: 1fr; }
  .intro__aside { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line-2); }
  .feature__img { min-block-size: 0; block-size: 26rem; }
  .cn__img { min-block-size: 22rem; }
  .cn__txt { padding-block: 3.5rem; }
  .sweets__img { order: -1; }
  .belt { padding-block: 1rem 1.25rem; }
  .belt .fc { inline-size: 12.5rem; }
  .belt__track { gap: 0.9rem; }
  .row { padding-block-start: 2.25rem; }
  .row__head { gap: 0.6rem; }
  .feature { margin-block-start: 2rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.9rem; }
  .grid > .fc { margin-block-end: 2rem; }
  /* filters: one row per group that slides under the finger, so the products start on the first screen */
  .filters { margin-inline: calc(-1 * var(--gut)); gap: 0.5rem; margin-block-end: 1.75rem; }
  .filters__group { flex-wrap: nowrap; overflow-x: auto; padding-inline: var(--gut) 2.5rem; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  [dir="rtl"] .filters__group { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 2.5rem), transparent); }
  .filters__group::-webkit-scrollbar { display: none; }
  .filters__label { inline-size: auto; flex: none; margin-inline-end: 0.35rem; }
  .filters__group .pill { flex: none; white-space: nowrap; }
  .fc__back { padding: 0.95rem; }
  .fc__name { font-size: 1.05rem; }
  .fc__line { -webkit-line-clamp: 3; font-size: 0.85rem; }
  .fc__title { font-size: 1.05rem; }
  .gallery { position: static; }
  .ft__top { flex-direction: column; align-items: flex-start; }
  .ft__contact { text-align: start; }
  .ft__contact .status { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fc__back .btn--sm { padding-inline: 0.8rem; }
}
/* the smallest phones (320 px): the WhatsApp link moves to the menu sheet so name, basket and menu fit */
@media (max-width: 359px) {
  .hd__in { gap: 0.5rem; }
  .hd__tools { gap: 0.15rem; }
  .hd__icon { display: none; }
  .tb__num { display: none; }                   /* the call button keeps its handset and its spoken label */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- product scenes: the product standing in a photo of one of its notes ---------- */
.fc__front--photo, .gallery__main.is-photo, .cn__img.is-photo { background: var(--paper-2); }
.fc__front--photo img, .gallery__main.is-photo img, .cn__img.is-photo img,
.gallery__thumbs a[data-kind="photo"] img, .line__img--photo { object-fit: cover; mix-blend-mode: normal; padding: 0; }
.gallery__main.is-photo { aspect-ratio: 4 / 5; }
.gallery__thumbs a[data-kind="photo"] { aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; }
.cn__img.is-photo { display: block; overflow: hidden; }
.cn__img.is-photo img { max-block-size: none; }
.line__img--photo { background: var(--paper-2); }
.fc__front--photo .fc__flag { color: var(--ink); background: rgba(20, 16, 13, 0.72); padding: 0.35rem 0.5rem; border-radius: 3px; }
.sweets__img.is-photo { aspect-ratio: 4 / 5; display: block; max-inline-size: 30rem; justify-self: center; inline-size: 100%; }
.sweets__img.is-photo img { inline-size: 100%; block-size: 100%; max-block-size: none; object-fit: cover; mix-blend-mode: normal; padding: 0; }

/* ---------- from Home Sushi: the quick view, the photo viewer, reveals, small details ---------- */
/* quick view: a belt card comes forward into this panel (motion.js runs the spring) */
.qv { inline-size: min(56rem, calc(100vw - 2rem)); max-inline-size: none; max-block-size: calc(100dvh - 2rem); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.qv::backdrop, .lb::backdrop { background: rgba(8, 6, 5, 0.62); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: fade-in 320ms var(--ease-out); }
.qv__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-block-size: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7); }
.qv__img { position: relative; min-block-size: min(70dvh, 35rem); background: var(--stage); overflow: hidden; }   /* fills its column, however tall the text */
.qv__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 2rem; }
.qv__img.is-photo { background: var(--paper); }
.qv__img.is-photo img { object-fit: cover; mix-blend-mode: normal; padding: 0; }
.qv__body { padding: clamp(1.5rem, 3vw, 2.5rem); padding-block-start: clamp(3.5rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 0.7rem; min-inline-size: 0; }
.qv__fam { color: var(--ink-3); font-size: 0.92rem; }
.qv__name { font-size: clamp(1.5rem, 2.2vw, 1.9rem); overflow-wrap: break-word; }   /* a long name ("Descubrimiento") fits the column whole */
.qv__kind { color: var(--ink-2); }
.qv__notes { margin-block: 0.4rem 0; }
.qv__line { color: var(--ink-2); }
.qv__buy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: auto; padding-block-start: 1rem; }
.qv__price { font-size: 1.6rem; font-weight: 300; }
.qv__out { color: var(--ink-2); }
.qv__more { align-self: flex-start; }
.qv__nav, .lb__nav { display: flex; align-items: center; gap: 0.75rem; }
.qv__nav { padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.qv__step, .qv__x { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(20, 16, 13, 0.6); color: var(--ink); cursor: pointer; transition: transform 160ms var(--ease-out), border-color 200ms ease; }
.qv__step:active, .qv__x:active { transform: scale(0.95); }
.qv__step[data-qv-step="-1"] .ico, .qv__step[data-lb-step="-1"] .ico, [dir="rtl"] .qv__step[data-qv-step="1"] .ico, [dir="rtl"] .qv__step[data-lb-step="1"] .ico { transform: scaleX(-1); }
[dir="rtl"] .qv__step[data-qv-step="-1"] .ico, [dir="rtl"] .qv__step[data-lb-step="-1"] .ico { transform: none; }
.qv__count { min-inline-size: 3.5rem; text-align: center; color: var(--ink-3); font-size: 0.92rem; }
.qv__x { position: absolute; inset-block-start: 0.85rem; inset-inline-end: 0.85rem; z-index: 2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) and (pointer: fine) { .qv__step:hover, .qv__x:hover { border-color: var(--ink); } }
@media (max-width: 700px) {
  .qv { inline-size: calc(100vw - 1.5rem); max-block-size: calc(100dvh - 1.5rem); }
  .qv__box { grid-template-columns: 1fr; max-block-size: calc(100dvh - 1.5rem); border-radius: 14px; }
  .qv__img { min-block-size: 0; block-size: min(50dvh, 27rem); }
  .qv__body { padding: 1.25rem 1.25rem 1.1rem; }
  .qv__name { font-size: 1.55rem; }
}

/* photo viewer (product page) */
.gallery__open { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lb { inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.lb::backdrop { background: rgba(8, 6, 5, 0.9); }
.lb__box { position: absolute; inset: 4.5rem 1rem 5.25rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lb__box img { pointer-events: auto; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 6px; touch-action: pan-y; user-select: none; }
.lb__x { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
.lb__nav { position: absolute; inset-block-end: 1.25rem; inset-inline: 0; justify-content: center; }

/* reveals: motion.js adds .rv to sections below the first screen and .is-in when they arrive */
.js .rv { opacity: 0; translate: 0 22px; transition: opacity 550ms var(--ease-out), translate 900ms var(--spring, var(--ease-out)); }
.js .rv.is-in { opacity: 1; translate: none; }
@media print { .js .rv { opacity: 1; translate: none; } }

/* photos breathe in a little under the mouse */
@media (hover: hover) and (pointer: fine) {
  .gallery__main img, .feature__img img, .cn__img.is-photo img, .sweets__img.is-photo img { transition: transform 900ms var(--ease-out); }
  .gallery__main:hover img, .feature__img:hover img, .cn__img.is-photo:hover img, .sweets__img.is-photo:hover img { transform: scale(1.035); }
}

/* copy the address */
.visit__copy.is-done { border-color: var(--open); }

/* la boutique page: the dark block starts under the header, no empty band above it */
.v-boutique .visit { margin-block-start: 0; }

/* shop search: a panel that drops from the top */
.find { inline-size: min(40rem, calc(100vw - 1.5rem)); max-inline-size: none; margin: clamp(0.75rem, 9vh, 6rem) auto auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.find::backdrop { background: rgba(8, 6, 5, 0.62); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: fade-in 260ms var(--ease-out); }
.find__box { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65); overflow: hidden; }
.find__bar { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem; padding-inline: 1.1rem 0.6rem; border-block-end: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.find__bar:focus-within { box-shadow: inset 0 0 0 2px rgba(var(--glow), 0.55); }   /* the field has no outline of its own */
.find__bar > .ico { color: var(--ink-3); }
.find__q { flex: 1 1 auto; min-inline-size: 0; block-size: 2.75rem; border: 0; background: transparent; color: var(--ink); font: 400 1.0625rem/1.2 var(--text); outline: none; }
.find__q::placeholder { color: var(--ink-3); }
.find__q::-webkit-search-cancel-button { -webkit-appearance: none; }
.find__x { position: static; flex: none; background: transparent; }
.find__list { list-style: none; margin: 0; padding: 0.4rem; max-block-size: min(60dvh, 30rem); overflow-y: auto; overscroll-behavior: contain; }
.find__list:empty { display: none; }
.find__list a { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.5rem 0.6rem; border-radius: 10px; transition: background-color 160ms ease; }
.find__list [aria-selected="true"] a { background: rgba(239, 231, 219, 0.07); }
.find__list img { inline-size: 3.4rem; block-size: 4.25rem; border-radius: 4px; object-fit: contain; background: var(--stage); mix-blend-mode: normal; padding: 0.2rem; }
.find__list img.is-photo { object-fit: cover; padding: 0; background: var(--paper); }
.find__t { display: grid; gap: 0.1rem; min-inline-size: 0; }
.find__t b { font-weight: 600; }
.find__t span { color: var(--ink-3); font-size: 0.92rem; }
.find__p { color: var(--ink-2); }
.find__none { padding: 1.25rem 1.25rem 1.4rem; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .find__list a:hover { background: rgba(239, 231, 219, 0.07); } }
.sheet__find { display: flex; align-items: center; gap: 0.7rem; inline-size: 100%; min-block-size: 3.25rem; padding: 0 1.1rem; margin-block-end: 1.5rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper-2); color: var(--ink-3); font: 400 1rem/1.2 var(--text); text-align: start; cursor: pointer; }
@media (max-width: 900px) { .hd__find { display: none; } }
@media (min-width: 901px) { .sheet__find { display: none; } }

/* every text link at least 24 px tall (WCAG 2.5.8 without leaning on the spacing exception) */
.hd__mark { padding-block: 0.3rem; }
.fc__title a, a.num, .crumbs a { display: inline-block; padding-block: 0.12rem; }
.ft li a { padding-block: 0.32rem; }

/* ---------- la boutique: contact cards, map card, review QR (Home Sushi's visit page, in this shop's style) ---------- */
.contact { padding-block: var(--sec); }
.contact__h { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.contact__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.ccard { display: flex; align-items: center; gap: 0.9rem; inline-size: 100%; block-size: 100%; min-block-size: 4.75rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper-2); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.ccard:active { transform: scale(0.98); }
.ccard__i { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: rgba(var(--glow), 0.12); color: var(--gold); }
.ccard--chat .ccard__i { background: var(--gold); color: var(--paper); }          /* WhatsApp: how orders arrive */
.ccard--star .ccard__i { background: rgba(217, 140, 151, 0.16); color: var(--rose); }
.ccard__t { display: grid; gap: 0.15rem; min-inline-size: 0; }
.ccard__t b { font-weight: 600; }
.ccard__t span { color: var(--ink-3); font-size: 0.92rem; overflow-wrap: anywhere; }
.ccard--copy.is-done { border-color: var(--open); }
@media (hover: hover) and (pointer: fine) { .ccard:hover { transform: translateY(-2px); border-color: var(--gold); } .ccard:active { transform: scale(0.98); } }

.contact__pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0.75rem; margin-block-start: 0.75rem; }
/* the map: OpenStreetMap streets saved once on this site (no request to any map company), toned to the palette */
.mapcard { position: relative; display: block; overflow: hidden; min-block-size: clamp(16rem, 30vw, 23rem); border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(120% 90% at 50% 45%, var(--night-2), var(--night) 70%); }
.mapcard__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.mapcard__pin { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -100%); pointer-events: none; }
[dir="rtl"] .mapcard__pin { transform: translate(50%, -100%); }
.mapcard__pin svg { display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65)); }
.mapcard__pin path { fill: var(--gold); }
.mapcard__pin circle { fill: var(--paper); }
.mapcard__ring { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 16px; block-size: 16px; margin: -8px 0 0 -8px; border-radius: 999px; border: 2px solid var(--gold); opacity: 0; animation: ping 3.4s ease-out infinite; }
/* the pin's tip is the middle of the picture: the shop's exact spot (scripts/make_map.py) */
[dir="rtl"] .mapcard__ring { margin: -8px -8px 0 0; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.75; } 70% { transform: scale(4.6); opacity: 0; } 100% { opacity: 0; } }
.mapcard__over { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1rem 1.15rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem; background: linear-gradient(180deg, transparent, rgba(12, 10, 8, 0.9)); }
.mapcard__addr { display: grid; gap: 0.1rem; color: var(--ink-2); font-size: 0.95rem; }
.mapcard__addr b { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--text); font-weight: 600; color: var(--ink); }
.mapcard__go { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.75rem; padding: 0 1.15rem; border-radius: 999px; background: var(--gold); color: var(--paper); font-weight: 600; transition: background-color 200ms ease; }
.mapcard__cred { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(12, 10, 8, 0.6); color: var(--ink-3); font-size: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .mapcard:hover .mapcard__img { transform: scale(1.03); } .mapcard:hover .mapcard__go { background: var(--gold-hi); } }

.qrcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper-2); }
.qrcard__img { inline-size: 9.5rem; block-size: 9.5rem; border-radius: 8px; }
.qrcard__stars { display: flex; gap: 0.15rem; color: var(--gold); margin-block-end: 0.5rem; }
.qrcard__stars .ico { fill: currentColor; inline-size: 1.05rem; block-size: 1.05rem; }
.qrcard__h { font: 600 1.2rem/1.3 var(--text); letter-spacing: 0; }
.qrcard__p { color: var(--ink-2); margin-block: 0.35rem 1rem; }
.qrcard__p--tap { display: none; }
/* a phone cannot scan its own screen: there the card is a button */
@media (pointer: coarse), (max-width: 700px) {
  .qrcard { grid-template-columns: 1fr; }
  .qrcard__img, .qrcard__p--scan, .qrcard--route { display: none; }
  .qrcard__p--tap { display: block; }
}

/* today's row in the hours, marked by site.js in Torrevieja time */
.hours li.is-today { position: relative; color: var(--ink); font-weight: 600; }
.hours li.is-today::before { content: ""; position: absolute; inset-inline-start: -0.95rem; inset-block-start: 0.62em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gold); }

@media (max-width: 1100px) { .contact__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__pair { grid-template-columns: 1fr; }
  .ccard { padding: 0.8rem 0.85rem; gap: 0.7rem; }
}
/* phones: one slim card per row, so handles and labels never break mid-word */
@media (max-width: 600px) {
  .contact__cards { grid-template-columns: 1fr; gap: 0.45rem; }
  .ccard { min-block-size: 3.4rem; padding-block: 0.55rem; }
  .ccard__i { inline-size: 2.35rem; block-size: 2.35rem; }
  .mapcard { min-block-size: 20rem; }          /* tall enough that the pin stays clear of the address and button */
}
@media (prefers-reduced-motion: reduce) { .mapcard__ring { animation: none; opacity: 0.5; } }

/* background music: a small round button at the edge (Home Sushi's orb); bars move while it plays */
.music { position: fixed; z-index: 35; inset-inline-end: 1rem; inset-block-end: 1rem; display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(20, 16, 13, 0.78); color: var(--gold); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 160ms var(--ease-out), border-color 200ms ease; }
.music:active { transform: scale(0.95); }
.music .ico { inline-size: 1.25rem; block-size: 1.25rem; }
.music__eq { display: none; align-items: flex-end; gap: 3px; block-size: 1rem; }
.music__eq i { inline-size: 3px; block-size: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.music__eq i:nth-child(2) { animation-delay: -0.35s; }
.music__eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.music.is-on { border-color: var(--gold); }
.music.is-on .ico { display: none; }
.music.is-on .music__eq { display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .music:hover { border-color: var(--gold); transform: translateY(-2px); } .music:active { transform: scale(0.95); } }
@media print { .music { display: none; } }

/* soft page changes (nav.js): a thin line along the top, only when the next page takes a moment to arrive */
.navbar { position: fixed; z-index: 70; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--gold); opacity: 0; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
[dir="rtl"] .navbar { transform-origin: 100% 50%; }
.navbar.is-on { opacity: 1; transform: scaleX(0.85); transition: opacity 150ms ease, transform 8s cubic-bezier(0.1, 0.6, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .navbar.is-on { transform: none; transition: opacity 150ms ease; } }
@media print { .navbar { display: none; } }
main[tabindex="-1"]:focus { outline: none; }   /* focus moves to the new content after a soft change; it is not a control */

/* ---------- "garnet and leather" palette (approved 2026-10-31): garnet for every choice you make (buy, the open
   section, the chosen filter), set in a thin gold edge like a stone in its mount; warm leather brown for the other
   buttons; green for calling. Every text and background pair here is 4.5:1 or better. No coloured markers: flags
   appear only in the language menu. ---------- */
.btn, .btn--light, .visit .btn, .mapcard__go {
  background: linear-gradient(180deg, var(--garnet-hi) 0%, var(--garnet) 55%, var(--garnet-lo) 100%);
  border: 1px solid rgba(var(--glow), 0.5); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 225, 215, 0.25), 0 10px 26px -10px rgba(163, 35, 58, 0.85);
}
.btn .ico, .mapcard__go .ico { color: #fff; }
.btn.is-done { background: linear-gradient(180deg, var(--leaf-hi), var(--leaf)); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
/* on the wine wall behind Rafahia: dark espresso with a gold edge, so it stands off the red */
.feature .btn, .feature .btn--light { background: #150e0b; border-color: rgba(var(--glow), 0.7); color: var(--cream); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9); }
.feature .btn .ico { color: var(--cream); }
.btn--quiet, .visit .btn--quiet { background: var(--leather); border-color: var(--leather-line); color: var(--ink); box-shadow: none; }
.basket .btn--fill { background: linear-gradient(180deg, var(--garnet-hi) 0%, var(--garnet) 55%, var(--garnet-lo) 100%); color: #fff; }

/* the section menu: a leather capsule, the open section in garnet */
.hd__nav { justify-self: center; max-inline-size: 100%; gap: 0.15rem; padding: 0.3rem; border-radius: 999px; background: #241b16; box-shadow: inset 0 0 0 1px var(--line); }
.hd__nav a { display: inline-flex; align-items: center; block-size: 2.35rem; padding: 0 0.85rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.hd__nav a[aria-current] { background: linear-gradient(180deg, var(--garnet-hi), var(--garnet-lo)); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 225, 215, 0.25), inset 0 0 0 1px rgba(var(--glow), 0.45); }
.hd--over:not(.is-solid) .hd__nav { background: rgba(20, 14, 11, 0.62); box-shadow: inset 0 0 0 1px rgba(246, 240, 231, 0.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang summary, .hd__bag { border: 0; background: #241b16; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.hd--over .lang summary { border: 0; }
@media (min-width: 901px) { .hd__bag { padding-inline: 0.85rem 1rem; } }
.hd__count { background: var(--garnet); color: #fff; box-shadow: 0 0 0 1px rgba(var(--glow), 0.55); }
.lang ul { background: #221a15; border-color: var(--line-2); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
.lang a[aria-current] { background: rgba(163, 35, 58, 0.3); color: #fff; }

/* top bar: call and WhatsApp in green */
.tb { background: #0e0a08; }
.tb__call { background: linear-gradient(180deg, var(--leaf-hi), var(--leaf)); color: #fff; padding-inline: 0.85rem 1rem; }
.tb__call .ico { color: #fff; }
.tb__ico { border-color: var(--line-2); color: var(--ink); }
.tb__ico--wa { background: linear-gradient(180deg, var(--leaf-hi), var(--leaf)); border-color: transparent; color: #fff; }
.hd--over:not(.is-solid) .tb { background: rgba(14, 10, 8, 0.6); }
.hd--over:not(.is-solid) .tb__ico--wa { border-color: transparent; }

/* filters: leather pills, the chosen one in garnet */
.pill[aria-pressed="true"] { background: linear-gradient(180deg, var(--garnet-hi), var(--garnet-lo)); border-color: rgba(var(--glow), 0.6); color: #fff; }
.filters { padding-block: 1.1rem; border-block: 1px solid var(--line); gap: 0.75rem; }
.filters__label { font: italic 400 1.05rem/1 var(--text); color: var(--ink-2); }
.filters .pill { min-block-size: 2.6rem; padding-inline: 1.15rem; border: 1px solid var(--leather-line); background: linear-gradient(180deg, var(--leather-hi), var(--leather)); color: var(--ink); font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 236, 218, 0.1); }
.filters .pill[aria-pressed="true"] { background: linear-gradient(180deg, var(--garnet-hi), var(--garnet-lo)); border-color: rgba(var(--glow), 0.6); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 225, 215, 0.25), 0 8px 20px -10px rgba(163, 35, 58, 0.9); }

/* cards: the back takes the colour of its scent family (a fill, not a marker) */
.fc { --fam: #7a2a3a; }
.fc[data-family="floral"] { --fam: var(--fam-floral); }
.fc[data-family="warm_spiced"] { --fam: var(--fam-warm_spiced); }
.fc[data-family="woody"] { --fam: var(--fam-woody); }
.fc[data-family="citrus_fruity"] { --fam: var(--fam-citrus_fruity); }
.fc[data-family="gourmand"] { --fam: var(--fam-gourmand); }
.fc__back { background: linear-gradient(150deg, var(--fam) 0%, color-mix(in oklab, var(--fam), black 30%) 100%); color: #fff; }
.fc__fam { color: rgba(255, 255, 255, 0.88); }
.fc__name, .fc__line, .fc__more { color: #fff; }
.fc__more { text-decoration-color: rgba(255, 255, 255, 0.55); }
.fc__back .btn { background: #150e0b; border-color: rgba(var(--glow), 0.55); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9); }
.fc__back .btn .ico { color: #fff; }
.fc__flag { color: var(--on-stage); }
.fc__front--photo .fc__flag { background: var(--garnet); color: #fff; }

/* prices, links, small controls */
.price, .fc__price, .qv__price, .product__price, .feature__price { color: var(--cream); font-weight: 600; }
.link, .row__all { color: var(--ink); text-decoration-color: rgba(214, 92, 110, 0.85); }
.qty, .row__pause, .music, .qv__step, .qv__x, .drawer__x { border-color: var(--line-2); color: var(--ink); }
.gallery__thumbs a[aria-current] { box-shadow: inset 0 0 0 2px var(--gold); }
.field input, .field textarea { background: var(--paper-2); color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--garnet-hi); box-shadow: 0 0 0 3px rgba(184, 52, 74, 0.3); }
.status.is-open .status__dot, .visit .status.is-open .status__dot { background: var(--open); box-shadow: 0 0 0 3px rgba(134, 197, 150, 0.18); }
.drawer__veil { background: rgba(0, 0, 0, 0.55); }
.drawer__panel { box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5); }
[dir="rtl"] .drawer__panel { box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); }


/* sections: mid-dark wood and cloth, so each one stands off the black page */
.feature { background: radial-gradient(120% 100% at 25% 45%, #6a1a2c 0%, #4e1322 55%, #2e0a14 100%); }
.feature .notes > div { border-color: rgba(251, 244, 234, 0.24); }
.index { background: linear-gradient(180deg, #3d2a1d, #2e2016); border-block: 1px solid var(--line); }
.cn { background: #40202a; }
.sweets { background: linear-gradient(180deg, #40281a, #2e1c12); padding-block: var(--sec); }
.sweets__img { background: var(--stage); }
.visit { background: linear-gradient(180deg, #3a281b, #2b1e15); }
.ccard { background: linear-gradient(180deg, #3a2a1f, #30231a); border-color: var(--line); }
.ccard__i { background: rgba(var(--glow), 0.14); border-color: var(--line-2); color: var(--gold-hi); }
.ccard--chat .ccard__i, .ccard--phone .ccard__i { background: linear-gradient(180deg, var(--leaf-hi), var(--leaf)); color: #fff; border-color: transparent; }
.ft { background: #0e0a08; border-block-start: 1px solid var(--line); }
.qv__box, .drawer__panel { background: linear-gradient(180deg, #2c2119, #241a14); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn--light:hover, .visit .btn:hover, .mapcard__go:hover, .mapcard:hover .mapcard__go { background: linear-gradient(180deg, #c63e55 0%, var(--garnet-hi) 55%, var(--garnet) 100%); border-color: rgba(var(--glow), 0.8); color: #fff; }
  .feature .btn:hover, .feature .btn--light:hover { background: #000; border-color: var(--gold-hi); color: var(--cream); }
  .btn--quiet:hover, .visit .btn--quiet:hover { background: var(--leather-hi); border-color: rgba(255, 236, 218, 0.3); color: var(--ink); }
  .fc__back .btn:hover { background: #000; border-color: var(--gold-hi); }
  .fc__more:hover { color: #fff; }
  .qty button:hover { background: rgba(246, 240, 231, 0.08); }
  .hd__nav a:not([aria-current]):hover { background: var(--leather); color: #fff; }
  .pill:not([aria-pressed="true"]):hover, .filters .pill:not([aria-pressed="true"]):hover { background: linear-gradient(180deg, #6a503d, var(--leather-hi)); border-color: rgba(255, 236, 218, 0.28); color: #fff; }
  .pill[aria-pressed="true"]:hover { color: #fff; }
  .tb__call:hover, .tb__ico--wa:hover { background: linear-gradient(180deg, #208551, var(--leaf-hi)); color: #fff; }
  .tb__ico:not(.tb__ico--wa):hover, .lang summary:hover, .hd__bag:hover, .hd__icon:hover, .hd__menu:hover { background: var(--leather); border-color: var(--line-2); color: var(--ink); }
}
/* long names (Lithuanian, Russian) wrap onto a second line of pills, kept under the pills, not under the label */
@media (min-width: 901px) {
  .filters__group { position: relative; padding-inline-start: 7.25rem; }
  .filters__label { position: absolute; inset-inline-start: 0; inset-block-start: 0; display: flex; align-items: center; inline-size: 6.75rem; min-block-size: 2.6rem; }
}

/* ---------- gold light: a few warm glows where something matters, never a fill and never a constant show ---------- */
/* the card passing the middle of a belt, and the card under the mouse, stand in a soft gold light */
.fc.is-now .fc__in { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--glow), 0.42), 0 16px 46px -12px rgba(var(--glow), 0.45); }
@media (hover: hover) and (pointer: fine) {
  .fc:hover .fc__in { box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--glow), 0.5), 0 18px 50px -12px rgba(var(--glow), 0.5); }
}
/* Rafahia: its name glows a little on the wine wall */
.feature__h { text-shadow: 0 0 42px rgba(var(--glow), 0.3); }
/* the shop's opening hours: today's row is lit */
.hours li.is-today::before { box-shadow: 0 0 9px 1px rgba(var(--glow), 0.75); }
/* the page-change line along the top */
.navbar { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow: 0 0 10px rgba(var(--glow), 0.7); }
/* the phone menu: the section you are in is marked in gold */
.sheet__nav a[aria-current] { color: var(--gold-hi); }
@media (hover: hover) and (pointer: fine) { .ccard:hover { box-shadow: 0 12px 30px -16px rgba(var(--glow), 0.6); } }

/* every main button and the chosen filter carry a band of light, parked off their edge (and clipped) until it
   moves: ::after for the pass when it comes into view or is chosen, ::before for the pass under the mouse.
   Not on the small buttons on card backs: those turn in 3D, where a moving layer can show through. */
.btn:not(.btn--quiet):not(.btn--sm), .pill[aria-pressed="true"] { position: relative; isolation: isolate; overflow: hidden; }
.btn:not(.btn--quiet):not(.btn--sm)::before, .btn:not(.btn--quiet):not(.btn--sm)::after, .pill[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 32%, rgba(var(--glow), 0.36) 46%, rgba(255, 238, 205, 0.5) 50%, rgba(var(--glow), 0.36) 54%, transparent 68%); }

/* the music button wears a gold halo while it plays */
.music::before { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(closest-side, transparent 64%, rgba(var(--glow), 0.5) 80%, transparent 100%); }
.music.is-on::before { opacity: 1; }

/* ---------- signature motion (none of it under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the boutique's name rises out of the blur, then one band of gold light crosses its letters, left to right */
  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .js .film__h .wm { background: linear-gradient(105deg, #fff 0 40%, #f2d48f 47%, #fff6e2 50%, #f2d48f 53%, #fff 60% 100%) 100% 0 / 260% 100% no-repeat;
      animation: sheen-text 3s cubic-bezier(0.4, 0, 0.3, 1) 1.5s both; }
  }
  /* a main button's light crosses it once when it first comes fully into view (motion.js adds .is-lit), and
     again under the mouse; a filter's light crosses it each time it is chosen */
  .btn.is-lit::after { animation: sheen 1.15s cubic-bezier(0.45, 0, 0.2, 1) 0.45s both; }
  .pill[aria-pressed="true"]::after { animation: sheen 0.85s cubic-bezier(0.45, 0, 0.2, 1) 0.05s both; }
  @media (hover: hover) and (pointer: fine) { .btn:not(.btn--quiet):not(.btn--sm):hover::before { animation: sheen 0.85s cubic-bezier(0.45, 0, 0.2, 1) both; } }
  /* Rafahia: a slow warm haze drifts behind its words, like a scent hanging in the air */
  .feature { position: relative; isolation: isolate; overflow: clip; }
  .feature__txt { position: relative; }
  .feature__txt::before { content: ""; position: absolute; inset: -18% -30%; z-index: -1; pointer-events: none; will-change: transform;
    background: radial-gradient(36% 30% at 34% 36%, rgba(var(--glow), 0.2), transparent 70%), radial-gradient(30% 26% at 70% 72%, rgba(var(--glow), 0.13), transparent 70%);
    animation: haze 19s ease-in-out infinite alternate; }
  /* the music halo breathes */
  .music.is-on::before { animation: breathe 3.4s ease-in-out infinite; }
  /* the phone menu: its sections arrive one after another */
  .sheet.is-open .sheet__nav a { animation: rise-soft 480ms var(--ease-out) both; }
  .sheet.is-open .sheet__nav a:nth-child(2) { animation-delay: 40ms; } .sheet.is-open .sheet__nav a:nth-child(3) { animation-delay: 80ms; }
  .sheet.is-open .sheet__nav a:nth-child(4) { animation-delay: 120ms; } .sheet.is-open .sheet__nav a:nth-child(5) { animation-delay: 160ms; }
  .sheet.is-open .sheet__nav a:nth-child(6) { animation-delay: 200ms; } .sheet.is-open .sheet__nav a:nth-child(n + 7) { animation-delay: 240ms; }
  /* the big photos open from a framed window to full size as they scroll in (browsers without scroll-driven
     animation simply show them full) */
  @supports (animation-timeline: view()) {
    .feature__img, .cn__img, .sweets__img { animation: unframe linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  }
}
@keyframes sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
/* the gold band starts past the left edge and ends past the right one; positions stay within 0-100% so the
   wide light always covers every letter (outside that range the start of the name had no paint and vanished) */
@keyframes sheen-text { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes haze { from { transform: translate3d(-5%, 3%, 0) scale(1); } to { transform: translate3d(6%, -4%, 0) scale(1.14); } }
@keyframes breathe { 0%, 100% { transform: scale(0.94); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(10px); } }
@keyframes unframe { from { clip-path: inset(6% 5% round 14px); } to { clip-path: inset(0 round 0); } }

/* ---------- phones of every shape ---------- */
/* a short or sideways phone: the menu sheet scrolls instead of cutting off its last sections */
.sheet { overflow-y: auto; overscroll-behavior: contain; }
/* the phone bar: the name, the language flag, the basket and the menu fit on one line on a 320 px phone even
   with a two-digit basket, so the page can never be pushed sideways; the count sits on the bag like a jewel */
@media (max-width: 900px) {
  .hd__in { grid-template-columns: minmax(0, 1fr) auto; }
  .hd__mark { inline-size: clamp(7.5rem, 40vw, 10.5rem); max-inline-size: 100%; }
  .hd__bag { position: relative; inline-size: 2.75rem; padding: 0; }
  .hd__count { position: absolute; inset-block-start: -0.2rem; inset-inline-end: -0.3rem; min-inline-size: 1.25rem; block-size: 1.25rem; font-size: 0.7rem; }
  .lang summary { inline-size: 2.75rem; block-size: 2.75rem; padding: 0; justify-content: center; }
  .lang summary .ico--chevron { display: none; }
}
/* basket lines on a narrow phone: the name and the quantity row wrap, the price never leaves the panel */
.line { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
.line__row { flex-wrap: wrap; row-gap: 0.35rem; }
@media (max-width: 420px) {
  .drawer__panel { padding-inline: 1.1rem; }
  .line { grid-template-columns: 3.75rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .line__img { inline-size: 3.75rem; block-size: 4.7rem; }
}
/* a phone on its side: the opening film fits the screen, so the shop name is seen without scrolling */
@media (orientation: landscape) and (max-height: 560px) { .film { min-block-size: 0; } }
/* the menu open over the home film: the bar turns solid and shows the name, no strip of film behind it */
.hd--over:has(+ .sheet.is-open) { background: var(--paper); border-color: var(--line); color: var(--ink); }
.hd--over:has(+ .sheet.is-open) .hd__mark { opacity: 1; pointer-events: auto; }

/* ---------- the gallery: a private salon, room by room ----------
   Each room is a wall in one of the shop's colours, lit from the ceiling. Every photo hangs in a black lacquer
   frame with a thin gilt fillet (lit from above: bright on top, dark below) and a leather mat with a cream cut
   edge, under its own brass picture light. The light falls on the wall and the frame; the photo itself is never
   covered, tinted or darkened. Frames in a row hang on one centre line. */
:root {
  --wall-boutique: radial-gradient(120% 55% at 50% 0%, rgba(255, 230, 190, 0.07), transparent 65%), linear-gradient(180deg, #3f2b1e 0%, #34251a 45%, #2b1e15 100%);
  --wall-fragancias: radial-gradient(120% 55% at 50% 0%, rgba(255, 220, 200, 0.07), transparent 65%), linear-gradient(180deg, #5e1b2c 0%, #4c1524 45%, #3c101c 100%);
  --wall-joyas: radial-gradient(120% 55% at 50% 0%, rgba(255, 222, 210, 0.07), transparent 65%), linear-gradient(180deg, #4a2532 0%, #3e1f2a 45%, #311821 100%);
  --wall-moda: radial-gradient(120% 55% at 50% 0%, rgba(255, 232, 200, 0.07), transparent 65%), linear-gradient(180deg, #503b2c 0%, #443226 45%, #37291f 100%);
}
.salon-intro { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.25rem, 4vw, 3.25rem); text-align: center; }
.salon-intro__h { font-size: clamp(2rem, 4vw, 3.2rem); }
.salon-intro__p { max-inline-size: 36rem; margin: 1.1rem auto 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.salon-intro__rooms { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-block-start: clamp(1.75rem, 3vw, 2.25rem); }
.salon-intro__rooms a { display: inline-flex; align-items: center; gap: 0.6rem; min-block-size: 2.75rem; padding: 0 1.15rem; border: 1px solid var(--leather-line); border-radius: 999px; background: linear-gradient(180deg, var(--leather-hi), var(--leather)); color: var(--ink); font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 236, 218, 0.1); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.salon-intro__rooms a:active { transform: scale(0.97); }
.salon-intro__rooms .num { color: var(--gold-hi); font-size: 0.85rem; }
@media (hover: hover) and (pointer: fine) { .salon-intro__rooms a:hover { background: linear-gradient(180deg, #6a503d, var(--leather-hi)); color: #fff; } }

/* the wall light under each frame is wider than the frame: the room keeps it inside its own wall (on phones a frame
   fills the column and the light would widen the page); clip, not hidden, so the room never becomes a scroll box */
.salon { overflow-x: hidden; overflow-x: clip; padding-block: var(--sec) calc(var(--sec) + 1rem); box-shadow: inset 0 1px 0 rgba(var(--glow), 0.24), inset 0 18px 26px -18px rgba(0, 0, 0, 0.6); scroll-margin-block-start: calc(var(--hd) + var(--tb)); }
.salon--boutique, .vr[data-room="boutique"], .front { background: var(--wall-boutique); }
.salon--fragancias, .vr[data-room="fragancias"] { background: var(--wall-fragancias); }
.salon--joyas, .vr[data-room="joyas"] { background: var(--wall-joyas); }
.salon--moda, .vr[data-room="moda"] { background: var(--wall-moda); }
.salon__head { text-align: center; margin-block-end: clamp(2.25rem, 4.5vw, 3.75rem); }
.salon__h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.salon__count { margin-block-start: 0.7rem; color: var(--ink-3); font-size: 0.95rem; font-variant-numeric: lining-nums tabular-nums; }
.salon__head::after { content: ""; display: block; inline-size: 4rem; block-size: 1px; margin: 1.1rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.salon__wall { max-inline-size: 72rem; margin-inline: auto; display: grid; row-gap: clamp(3rem, 5.5vw, 4.75rem); }
.salon__row { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 3.4vw, 3.25rem); }
.salon__item { --hang: 1.6rem; position: relative; isolation: isolate; padding-block-start: var(--hang); }
.salon__item--s { flex: 0 1 18%; }
.salon__item--m { flex: 0 1 24%; }
.salon__item--l { flex: 0 1 33%; }
.salon__item--w { flex: 0 1 64%; }

/* the frame */
.frame { position: relative; display: block; padding: clamp(7px, 3.6%, 15px); border-radius: 2px; color: inherit;
  background: linear-gradient(180deg, #33261c 0%, #160f0b 9%, #0d0907 60%, #070504 100%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 196, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.35),
    0 16px 26px -10px rgba(0, 0, 0, 0.7), 0 40px 70px -30px rgba(0, 0, 0, 0.65); }
.frame__mat { display: block; padding: clamp(8px, 5.5%, 24px); border: 2px solid; border-color: #e3c27a #b38a40 #7d5d26 #b38a40;
  background: linear-gradient(180deg, #3d2e22 0%, #2e2219 35%, #251b14 100%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4); }
.frame picture { display: block; }
.frame img { inline-size: 100%; background: #1b140f; box-shadow: 0 0 0 1px rgba(246, 236, 220, 0.62); }
a.frame { cursor: zoom-in; transition: translate 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
a.frame:active { scale: 0.99; }
a.frame:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; border-radius: 3px; }

/* the brass picture light above each frame, its arm, and the warm light under it */
.lamp { position: absolute; z-index: 1; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: clamp(2.75rem, 34%, 7.5rem); block-size: 0.5rem; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #f4dfa8 0%, #d1a554 42%, #8a6428 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.lamp::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; margin-inline: auto; inline-size: 2px; block-size: calc(var(--hang, 1.6rem) - 0.5rem); background: linear-gradient(90deg, #6f5024, #d9b46a 50%, #6f5024); }
.lamp::before { content: ""; position: absolute; inset-inline: -40%; inset-block-start: 55%; block-size: 2.1rem; border-radius: 50%; opacity: 0.85;
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 228, 170, 0.62), rgba(255, 214, 140, 0.16) 55%, transparent 76%); }
/* the light it throws on the wall around the frame */
/* (it starts a little above the lamp and fades in from there, so the light has no edge) */
.salon__item::before, .vr__fig::before, .front__hang::before { content: ""; position: absolute; z-index: -1; inset: -2.5rem -24% 12%; pointer-events: none; opacity: 0.8;
  background: radial-gradient(52% 58% at 50% 2.5rem, rgba(var(--glow), 0.34), rgba(var(--glow), 0.12) 48%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 3.25rem); mask-image: linear-gradient(180deg, transparent, #000 3.25rem); transition: opacity 500ms ease; }

/* the plaque under each frame */
.plaque { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.6rem; inline-size: fit-content; max-inline-size: 100%; margin: 1.05rem auto 0; padding-block-start: 0.55rem; border-block-start: 1px solid rgba(var(--glow), 0.5); text-align: center; font-size: 0.92rem; line-height: 1.4; }
.plaque__n { color: var(--gold-hi); font-size: 0.8rem; letter-spacing: 0.06em; }
.plaque__t { color: var(--ink-2); }

@media (hover: hover) and (pointer: fine) {
  .salon__item:hover a.frame { translate: 0 -4px; box-shadow: inset 0 1px 0 rgba(255, 232, 196, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.35), 0 24px 34px -12px rgba(0, 0, 0, 0.75), 0 52px 84px -32px rgba(0, 0, 0, 0.7); }
  .salon__item:hover::before { opacity: 1; }
  .salon__item .lamp::before { transition: opacity 500ms ease; }
  .salon__item:hover .lamp::before { opacity: 1; }
}

/* the lights come on: the first screen as the page opens, every other frame as it scrolls into view (motion.js
   marks those .is-dark until then). The light warms up to its resting level; under reduced motion it is simply on. */
@media (prefers-reduced-motion: no-preference) {
  .salon__item::before, .salon__item .lamp::before { animation: light-on 1.4s var(--ease-out) var(--d, 0ms) backwards; }
  .salon__row > :nth-child(2) { --d: 140ms; } .salon__row > :nth-child(3) { --d: 280ms; } .salon__row > :nth-child(4) { --d: 420ms; }
  .salon__item.is-dark::before, .salon__item.is-dark .lamp::before { animation: none; opacity: 0; }
}
@keyframes light-on { from { opacity: 0; } 30% { opacity: 0.55; } }

/* phones and tablets: two columns; one photo across, then two pairs (Gallery::phoneRhythm) */
@media (max-width: 900px) {
  .salon__wall { max-inline-size: 44rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 2.5rem 1rem; }   /* a pair's frames level, whatever their captions' length */
  .salon__row { display: contents; }
  .salon__item--across { grid-column: 1 / -1; }
  .salon__item--across:not(.salon__item--w) { justify-self: center; inline-size: min(100%, 22rem); }
  .plaque { font-size: 0.85rem; }
}

/* the viewing room: one photo large, on its room's wall, under its light */
.vr { position: fixed; inset: 0; inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; color: var(--ink); overflow: hidden; background: var(--wall-boutique); }
.vr::backdrop { background: #0c0a08; }
.vr__stage { position: absolute; inset: 4rem 1rem 5rem; display: grid; place-items: center; }
.vr__fig { --hang: 2rem; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding-block-start: var(--hang); touch-action: pan-y; user-select: none; }
.vr__fig::before { inset: -2.5rem -30% 10%; opacity: 1; }
.vr__frame { padding: 14px; }
.vr__frame .frame__mat { padding: clamp(10px, 2.2vmin, 22px); }
.vr__frame img { inline-size: auto; max-inline-size: none; }
.vr__plaque { max-inline-size: min(36rem, 100%); font-size: 1rem; }
.vr__x { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
.vr__nav { position: absolute; inset-inline: 0; inset-block-end: 1.1rem; display: flex; justify-content: center; align-items: center; gap: 0.75rem; }
.qv__step[data-vr-step="-1"] .ico, [dir="rtl"] .qv__step[data-vr-step="1"] .ico { transform: scaleX(-1); }
[dir="rtl"] .qv__step[data-vr-step="-1"] .ico { transform: none; }
@media (max-width: 700px) {
  .vr__stage { inset: 3.75rem 0.75rem 4.6rem; }
  .vr__frame { padding: 9px; }
  .vr__plaque { font-size: 0.92rem; }
}

/* la boutique: the shop front, framed under its light beside the map */
.front { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.front__wall { flex: 1; display: grid; place-items: center; padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem); box-shadow: inset 0 1px 0 rgba(var(--glow), 0.2); }
.front__hang { --hang: 1.6rem; position: relative; isolation: isolate; inline-size: 100%; max-inline-size: 30rem; padding-block-start: var(--hang); }
.front__cap { display: grid; justify-items: start; gap: 0.6rem; padding: 1rem clamp(1.1rem, 2.4vw, 1.5rem) 1.2rem; border-block-start: 1px solid var(--line); background: rgba(12, 10, 8, 0.28); }
.front__cap p { color: var(--ink-2); }
.front__cap .link { display: inline-flex; align-items: center; gap: 0.45rem; }

/* the scent index: one card per scent with something online (its photo, three notes, how many products), family
   pills above; without JavaScript every card shows and the pills stay hidden */
.index__fams { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.5rem; }
.index__fams .pill { min-block-size: 2.6rem; padding-inline: 1.15rem; border: 1px solid var(--leather-line); background: linear-gradient(180deg, var(--leather-hi), var(--leather)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 236, 218, 0.1); }
.index__fams .pill[aria-pressed="true"] { background: linear-gradient(180deg, var(--garnet-hi), var(--garnet-lo)); border-color: rgba(var(--glow), 0.6); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 225, 215, 0.25), 0 8px 20px -10px rgba(163, 35, 58, 0.9); }
.scents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 0.75rem; }
.sc { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: 1.15rem; block-size: 100%; padding: 0.8rem 1.1rem 0.8rem 0.8rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 236, 218, 0.06), rgba(12, 10, 8, 0.14)); color: var(--ink); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 236, 218, 0.07); transition: transform 160ms var(--ease-out), border-color 200ms ease, background-color 200ms ease; }
[dir="rtl"] .sc { padding: 0.8rem 0.8rem 0.8rem 1.1rem; }
.sc:active { transform: scale(0.985); }
.sc__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 11px; background: var(--stage); outline: 1px solid rgba(var(--glow), 0.3); outline-offset: 3px; }
.sc__img img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 9%; mix-blend-mode: multiply; transition: transform 500ms var(--ease-out); }
.sc__img.is-photo { background: var(--paper-2); }
.sc__img.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.sc__t { display: grid; gap: 0.2rem; min-inline-size: 0; }
.sc__fam { font: italic 400 0.95rem/1.2 var(--text); color: var(--ink-3); }
.sc__name { font: 400 1.2rem/1.16 var(--display); letter-spacing: 0; color: var(--cream); overflow-wrap: anywhere; }
.sc__notes { color: var(--ink-2); font-size: 0.92rem; line-height: 1.35; }
.sc__n { display: inline-flex; align-items: center; gap: 0.35rem; margin-block-start: 0.3rem; color: var(--gold-hi); font-size: 0.875rem; font-weight: 600; }
.sc__n .ico { inline-size: 1em; block-size: 1em; transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sc:hover { border-color: rgba(var(--glow), 0.45); background-color: rgba(255, 236, 218, 0.04); }
  .sc:hover .sc__img img { transform: scale(1.05); }
  .sc:hover .sc__n .ico { translate: 3px 0; }
  [dir="rtl"] .sc:hover .sc__n .ico { translate: -3px 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .sc-i { transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
  @starting-style { .sc-i { opacity: 0; transform: translateY(0.4rem); } }
}
@media (max-width: 700px) {
  .index__fams { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut) 2.5rem; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  [dir="rtl"] .index__fams { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 2.5rem), transparent); }
  .index__fams::-webkit-scrollbar { display: none; }
  .index__fams .pill { flex: none; white-space: nowrap; }
  .scents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .sc, [dir="rtl"] .sc { grid-template-columns: 1fr; align-items: start; gap: 0.75rem; padding: 0.55rem 0.55rem 0.85rem; border-radius: 14px; }
  .sc__img { border-radius: 10px; outline-offset: 2px; }
  .sc__t { padding-inline: 0.3rem; }
  .sc__fam { font-size: 0.85rem; }
  .sc__name { font-size: 1.05rem; }
  .sc__notes { font-size: 0.82rem; }
  .sc__n { font-size: 0.8rem; }
}

/* Home in the bar: a round button with a drawn house, right beside the name, on every screen (its word is on hover
   and for screen readers; the phone menu says it in words). On a narrow phone the name gives way, never the button */
.hd__brand { display: flex; align-items: center; gap: 0.4rem; min-inline-size: 0; }
.hd__brand .hd__mark { flex: 0 1 auto; min-inline-size: 0; }
.hd__home { flex: none; display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: #241b16; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: opacity 240ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.hd__home .ico { inline-size: 1.25rem; block-size: 1.25rem; }
.hd__home:active { transform: scale(0.96); }
.hd__home[aria-current] { background: linear-gradient(180deg, var(--garnet-hi), var(--garnet-lo)); color: #fff; }
.hd--over:not(.is-solid) .hd__home { opacity: 0; pointer-events: none; }
.hd--over:has(+ .sheet.is-open) .hd__home { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .hd__home:not([aria-current]):hover { background: var(--leather); color: #fff; }
}
@media (max-width: 359px) {
  .hd__brand { gap: 0.2rem; }
  .hd__home { inline-size: 2.4rem; block-size: 2.4rem; }
}

/* the boutique block: line, address, three ways there, the hours card; the shop front framed beside it */
.visit__front { align-self: center; }
.btn--leaf, .visit .btn--leaf { background: linear-gradient(180deg, var(--leaf-hi), var(--leaf)); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--leaf:hover, .visit .btn--leaf:hover { background: linear-gradient(180deg, #23925a, var(--leaf-hi)); border-color: rgba(255, 255, 255, 0.32); color: #fff; } }
.week { margin-block-start: clamp(1.75rem, 3vw, 2.25rem); max-inline-size: 36rem; padding: 1rem 1.35rem 1.1rem; border: 1px solid var(--line-n); border-radius: 18px; background: linear-gradient(180deg, rgba(12, 10, 8, 0.34), rgba(12, 10, 8, 0.2)); box-shadow: inset 0 1px 0 rgba(var(--glow), 0.16); }
.week__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; padding-block-end: 0.8rem; border-block-end: 1px solid var(--line-n); }
.week__h { font: italic 400 1.15rem/1.2 var(--text); color: var(--on-night-2); }
.week .status { font-size: 0.95rem; }
/* today: the opening day as a bar from the week's first opening to its last closing, gold where the door is open,
   a light mark at the time it is now (site.js, Torrevieja time); SVG attributes only, so the strict CSP holds */
.today { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.5rem 1.1rem; padding-block: 0.95rem 0.55rem; }
.today__k { font-weight: 600; line-height: 20px; color: var(--cream); }
.today__bar { display: block; overflow: visible; }
.today__track, .today__open { stroke-width: 8px; stroke-linecap: round; }
.today__track { stroke: rgba(246, 240, 231, 0.13); }
.today__open { stroke: var(--gold); filter: drop-shadow(0 0 5px rgba(var(--glow), 0.5)); }
.today__t { fill: var(--on-night-2); font: 500 12.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.today__now { stroke: var(--cream); stroke-width: 2.5px; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 244, 222, 0.95)); }
.week .hours { gap: 0.3rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line-n); font-size: 0.95rem; }
.week__head + .hours { border-block-start: 0; }
.hours__sep { color: var(--on-night-2); margin-inline: 0.1rem; }
.week__tel { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line-n); color: var(--on-night-2); font-size: 0.95rem; }
.week__tel a { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .week { max-inline-size: none; } }
@media (max-width: 420px) { .week { padding-inline: 1.1rem; } .today { gap: 0.4rem 0.8rem; } }

/* la boutique: the route QR sits over the review QR beside the map */
.contact__side { display: grid; gap: 0.75rem; align-content: start; }
.qrcard--route .qrcard__p { margin-block-end: 0; }

/* before you visit: short answers made of facts the site already shows */
.faq { padding-block: 0 var(--sec); }
.faq__h { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-block-end: clamp(1.25rem, 2.5vw, 2rem); }
.faq__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.faq__i { padding-block: 1.2rem 1.35rem; border-block-start: 1px solid var(--line); }
.faq__i dt { margin-block-end: 0.45rem; font: 400 clamp(1.1rem, 1.4vw, 1.25rem)/1.3 var(--display); color: var(--cream); }
.faq__i dd { margin: 0; max-inline-size: 38rem; color: var(--ink-2); }
.faq__i dd .link { margin-inline-start: 0.2rem; }
@media (max-width: 800px) { .faq__list { grid-template-columns: 1fr; } }

/* ---------- the questions page: every answer in the page the server sends, folded under its question ---------- */
.qa { padding-block-end: var(--sec); }
.qa__head { padding-block-end: 1.5rem; }
.qa__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0 clamp(2rem, 4vw, 3rem); }
.qa__topics .pill { display: inline-flex; align-items: center; text-decoration: none; }
.qa__group { max-inline-size: 46rem; margin-block-end: clamp(2rem, 4vw, 3rem); scroll-margin-block-start: calc(var(--hd) + 1rem); }
.qa__gh { font-size: clamp(1.4rem, 2vw, 1.8rem); padding-block-end: 0.6rem; border-block-end: 1px solid rgba(var(--glow), 0.4); }
.qa__i { border-block-end: 1px solid var(--line); scroll-margin-block-start: calc(var(--hd) + 1rem); }
.qa__i summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-block: 1.1rem; cursor: pointer; }
.qa__i summary::-webkit-details-marker { display: none; }
.qa__i summary h3 { font: 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.35 var(--display); letter-spacing: 0; color: var(--cream); text-wrap: pretty; }
:lang(ar) .qa__i summary h3, :lang(zh-Hans) .qa__i summary h3 { letter-spacing: 0; }   /* the Arabic and Chinese resets above weigh less than this rule */
/* a small gold chevron, drawn from two borders, turns up while the answer is open */
.qa__i summary::after { content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem; margin-block-start: 0.6rem; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg);   /* physical sides on purpose: the rotated corner points down in both writing directions */ transition: transform 220ms var(--ease-out); }
.qa__i[open] summary::after { transform: rotate(-135deg); }
.qa__a { padding-block: 0 1.4rem; color: var(--ink-2); max-inline-size: 40rem; }
.qa__a p + p { margin-block-start: 0.75rem; }
.qa__a a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgba(var(--glow), 0.6); transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .qa__i summary:hover h3 { color: var(--gold-hi); }
  .qa__a a:hover { text-decoration-color: var(--gold-hi); }
}
.ft__qa { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; text-decoration-color: var(--line-n); }