/* ============================================================
   ΜΠΛΕ ΣΤΑΧΥ — Components (editorial luxury, mobile-first safe)
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.65em;
  font-family: var(--font-sans);
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 1.05em 2em; border-radius: var(--radius); border: 1px solid transparent;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .35s var(--ease);
  cursor: pointer; white-space: nowrap; line-height: 1;
}
:lang(he) .btn { letter-spacing: 0.04em; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--midnight-blue); color: var(--ivory); }
.btn--primary:hover { background: var(--midnight-blue-700); color: var(--ivory); }
.btn--ghost { border-color: var(--line-strong); color: var(--midnight-blue); }
.btn--ghost:hover { border-color: var(--midnight-blue); background: var(--midnight-blue); color: var(--ivory); }
.btn--accent { background: var(--accent-ink); color: #fff; }
.btn--accent:hover { color: #fff; filter: brightness(1.08); }
.btn--on-blue { border-color: rgba(247,244,238,.45); color: var(--ivory); }
.btn--on-blue:hover { background: var(--ivory); color: var(--midnight-blue); border-color: var(--ivory); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-ink); padding-block-end: 3px; position: relative;
}
:lang(he) .link-arrow { letter-spacing: 0.04em; }
.link-arrow::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg, .link-arrow .ico { width: 1.1em; height: 1.1em; transition: transform .4s var(--ease); }
.link-arrow:hover svg, .link-arrow:hover .ico { transform: translateX(3px); }
[dir="rtl"] .link-arrow svg, [dir="rtl"] .link-arrow .ico { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg, [dir="rtl"] .link-arrow:hover .ico { transform: scaleX(-1) translateX(3px); }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--warm-white) 82%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid var(--line-soft);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--midnight-blue); flex: 0 0 auto; }
.brand__emblem { width: 30px; height: 40px; flex: 0 0 auto; }
.brand__word { font-family: var(--font-serif); font-size: clamp(1.1rem, 3.4vw, 1.35rem); letter-spacing: 0.2em; line-height: 1; }
.brand__sub { font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); margin-block-start: 4px; }

.nav { display: flex; align-items: center; }
.nav__list { display: flex; gap: clamp(1.1rem, 2.2vw, 2.4rem); align-items: center; }
.nav__link { font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); padding-block: 0.5rem; position: relative; }
.nav__link::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; height:1px; background:var(--accent-ink); transform:scaleX(0); transform-origin:inline-start; transition:transform .35s var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--midnight-blue); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--midnight-blue); }
.nav-toggle svg, .nav-toggle .ico { width: 24px; height: 24px; }

/* ---------- Language switcher ---------- */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--step--1); letter-spacing: 0.04em; font-weight: 500; color: var(--ink-soft); padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.lang__btn:hover { border-color: var(--line-strong); color: var(--midnight-blue); }
.lang__btn .lang__name { display: inline; }
.lang__flag { font-size: 1.05em; line-height: 1; }
.lang__chev { width: 14px; height: 14px; opacity: .6; }
.lang__menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-width: 200px; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0.4rem; display: none; z-index: 200; }
.lang.is-open .lang__menu { display: block; }
.lang__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); font-size: var(--step--1); color: var(--ink-soft); }
.lang__item:hover { background: var(--ivory); color: var(--midnight-blue); }
.lang__item[aria-current="true"] { color: var(--midnight-blue); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(3.5rem, 12vw, 9rem);
  background:
    radial-gradient(90% 70% at 78% 8%, var(--accent-soft) 0%, transparent 60%),
    linear-gradient(178deg, var(--warm-white) 0%, var(--bg-alt) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 17ch; }
.hero__inner .ornament { margin-block-end: var(--space-m); }
.hero h1 { margin-block: 0.12em 0.42em; font-size: var(--step-6); }
.hero__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 38ch; font-style: italic; font-family: var(--font-serif); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-l); }
/* Faint emblem watermark — fully clipped within hero, hidden on small screens */
.hero__mark { position: absolute; inset-block-start: 50%; inset-inline-end: 4%; transform: translateY(-50%); width: clamp(220px, 30vw, 460px); color: var(--stone-beige); opacity: 0.28; pointer-events: none; z-index: 1; }
[dir="rtl"] .hero__mark { transform: translateY(-50%) scaleX(-1); }
@media (max-width: 820px) { .hero__mark { display: none; } .hero__inner { max-width: 26ch; } }

/* ---------- Section heading block ---------- */
.section-head { max-width: 56ch; margin-block-end: var(--space-xl); }
.section-head .ornament { margin-block-end: var(--space-s); }
.section-head .eyebrow { margin-block-end: var(--space-s); }
.section-head h2 { margin-block-start: 0.1em; }
.section-head p { color: var(--ink-soft); margin-block-start: var(--space-s); font-size: var(--step-1); line-height: 1.55; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .ornament { margin-inline: auto; }

/* ---------- Collection cards ---------- */
.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.collection-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.75rem); overflow: hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
  min-height: 320px;
}
.collection-card::before { content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:inline-start; transition:transform .55s var(--ease); }
.collection-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: transparent; }
.collection-card:hover::before { transform: scaleX(1); }
.collection-card__name { font-family: var(--font-serif); font-size: var(--step-3); color: var(--midnight-blue); letter-spacing: 0.04em; }
.collection-card__type { font-size: var(--step--2); color: var(--accent-ink); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-block-start: 0.5rem; }
.collection-card__desc { color: var(--ink-soft); margin-block: var(--space-s) var(--space-m); flex: 1; }
.collection-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block-start: var(--space-s); border-block-start: 1px solid var(--line); }
.collection-card__price { font-family: var(--font-serif); font-size: var(--step-2); color: var(--midnight-blue); }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature { padding: clamp(1.5rem, 2.6vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--warm-white); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.feature__icon { color: var(--accent-ink); margin-block-end: var(--space-s); display: inline-flex; }
.feature__icon svg, .feature__icon .ico { width: 28px; height: 28px; }
.feature__num { font-family: var(--font-serif); font-size: var(--step-2); color: var(--accent-ink); line-height: 1; margin-block-end: var(--space-s); }
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--ink-soft); margin-block-start: var(--space-xs); }

/* ---------- Image slot placeholder ---------- */
.img-slot { display: grid; place-items: center; aspect-ratio: 3 / 4; background: repeating-linear-gradient(45deg, var(--stone-beige-300) 0 12px, var(--ivory) 12px 24px); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-faint); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 1rem; }
.img-slot--wide { aspect-ratio: 16 / 10; }

/* ---------- Product / media figure ---------- */
.product { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.product__media { position: sticky; top: 96px; }
.bottle-figure { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(70% 70% at 50% 30%, var(--accent-soft), transparent 70%); }
.bottle-figure img { max-width: min(78%, 360px); filter: drop-shadow(0 30px 50px rgba(16,45,94,.18)); border-radius: var(--radius); }
.variant-row { display: flex; gap: 0.75rem; justify-content: center; margin-block-start: var(--space-m); flex-wrap: wrap; }
.variant-row img { width: 74px; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.spec-list { border-block-start: 1px solid var(--line); margin-block-start: var(--space-m); }
.spec-list div { display: flex; justify-content: space-between; gap: var(--space-m); padding: 0.9rem 0; border-block-end: 1px solid var(--line); }
.spec-list dt { color: var(--ink-faint); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; flex: 0 0 auto; }
.spec-list dd { color: var(--midnight-blue); text-align: end; font-weight: 500; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 0.95rem 1rem; background: var(--warm-white); border: 1px solid var(--line-strong); border-radius: var(--radius); transition: border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); }
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: var(--step--1); color: var(--ink-faint); }

/* ---------- FAQ accordion ---------- */
.faq { border-block-start: 1px solid var(--line); max-width: 820px; margin-inline: auto; }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); text-align: start; padding: 1.35rem 0; font-family: var(--font-serif); font-size: var(--step-1); color: var(--midnight-blue); }
.faq__q .ico { width: 22px; height: 22px; flex: 0 0 auto; transition: transform .35s var(--ease); color: var(--accent-ink); }
.faq__item[open] .faq__q .ico { transform: rotate(45deg); }
.faq__a { padding-block-end: 1.35rem; color: var(--ink-soft); max-width: 70ch; }
.faq__item summary { list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight-blue); color: var(--ivory); padding-block: var(--space-2xl) var(--space-l); }
.site-footer a { color: var(--ivory); opacity: 0.82; }
.site-footer a:hover { opacity: 1; color: var(--ivory); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-l); }
.footer__brandword { font-family: var(--font-serif); font-size: var(--step-3); letter-spacing: 0.2em; }
.footer__tag { color: var(--stone-beige); margin-block-start: var(--space-s); max-width: 34ch; }
.footer__title { font-size: var(--step--2); letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone-beige); margin-block-end: var(--space-s); }
.footer__list { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l); align-items: center; justify-content: space-between; margin-block-start: var(--space-2xl); padding-block-start: var(--space-m); border-block-start: 1px solid rgba(247,244,238,.16); font-size: var(--step--1); color: var(--stone-beige); }

/* ---------- Icon compatibility (bootstrap-icons font, pending inline-SVG swap) ---------- */
.feature__icon .bi { font-size: 28px; line-height: 1; }
.link-arrow .bi { font-size: 1.05em; transition: transform .4s var(--ease); }
.link-arrow:hover .bi { transform: translateX(3px); }
[dir="rtl"] .link-arrow .bi { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .bi { transform: scaleX(-1) translateX(3px); }
.nav-toggle .bi { font-size: 24px; }
.lang__btn .bi { font-size: 14px; opacity: .6; }
.faq__q .bi { font-size: 20px; color: var(--accent-ink); transition: transform .35s var(--ease); }
.faq__item[open] .faq__q .bi { transform: rotate(45deg); }

/* ---------- Journal cards ---------- */
.journal-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: clamp(1.5rem, 2.6vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--warm-white); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.journal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.journal-card__cat { font-size: var(--step--2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.journal-card__title { font-size: var(--step-2); color: var(--midnight-blue); }
.journal-card__excerpt { color: var(--ink-soft); flex: 1; }
.journal-card .link-arrow { margin-block-start: var(--space-s); }

/* ---------- Host: stay info ---------- */
.stay-dl { margin-block-start: var(--space-s); }
.stay-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); padding: 0.5rem 0; border-block-end: 1px solid var(--line-soft); }
.stay-dl dt { color: var(--ink-faint); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 auto; }
.stay-dl dd { color: var(--midnight-blue); font-weight: 500; text-align: end; word-break: break-word; }
.stay-copy { display: inline-flex; align-items: center; gap: 0.5rem; }
.stay-copy code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.95em; }
.copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--accent-ink); transition: background .25s, border-color .25s; flex: 0 0 auto; }
.copy-btn:hover { background: var(--accent-soft); border-color: var(--accent-ink); }
.copy-btn.is-done { background: var(--accent-soft); }
.add-home .btn .bi { font-size: 1.1em; }

/* ---------- Header tagline (message in the bar) ---------- */
.header-tagline { font-family: var(--font-serif); font-style: italic; font-size: var(--step-0); color: var(--ink-soft); white-space: nowrap; letter-spacing: 0.01em; }
@media (max-width: 900px) { .header-tagline { display: none; } }
:lang(he) .header-tagline { font-style: normal; }

/* ---------- Menu button ---------- */
.menu-btn { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--midnight-blue); padding: 0.5rem 0.25rem; }
:lang(he) .menu-btn { letter-spacing: 0.04em; }
.menu-btn__bars { position: relative; width: 26px; height: 12px; flex: 0 0 auto; }
.menu-btn__bars span { position: absolute; inset-inline: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; }
.menu-btn__bars span:first-child { inset-block-start: 2px; }
.menu-btn__bars span:last-child { inset-block-end: 2px; inset-inline-start: 8px; width: 18px; }
.site-header.nav-open .menu-btn__bars span:first-child { inset-block-start: 50%; transform: rotate(45deg); }
.site-header.nav-open .menu-btn__bars span:last-child { inset-block: 50% auto; inset-inline-start: 0; width: 26px; transform: rotate(-45deg); }
.menu-btn__label { display: inline; }
@media (max-width: 460px) { .menu-btn__label { display: none; } }

/* ---------- Off-canvas side menu (drawer) ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(8,26,56,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s var(--ease); z-index: 300; }
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(460px, 90vw);
  background: radial-gradient(130% 100% at 100% 0%, var(--midnight-blue-700), var(--midnight-blue) 55%, var(--midnight-blue-900));
  color: var(--ivory); transform: translateX(100%); transition: transform .6s var(--ease);
  z-index: 310; box-shadow: -30px 0 80px -30px rgba(8,26,56,.6);
}
[dir="rtl"] .drawer { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); box-shadow: 30px 0 80px -30px rgba(8,26,56,.6); }
.drawer.is-open { transform: none; }
.drawer__inner { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-l); height: 100%; padding: clamp(2.5rem, 7vw, 4.5rem); overflow-y: auto; }
.drawer__close { position: absolute; inset-block-start: 1.5rem; inset-inline-end: 1.5rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ivory); border: 1px solid rgba(247,244,238,.3); border-radius: 50%; transition: background .3s, transform .3s; }
.drawer__close:hover { background: rgba(247,244,238,.12); transform: rotate(90deg); color: var(--ivory); }
.drawer__close .bi { font-size: 1.1rem; }
.drawer__nav ul { display: flex; flex-direction: column; gap: clamp(.4rem, 1.6vw, 1rem); }
.drawer__link { font-family: var(--font-serif); font-size: clamp(1.7rem, 6.5vw, 2.7rem); line-height: 1.1; color: var(--ivory); letter-spacing: -0.01em; opacity: 0.92; display: inline-block; transition: color .35s var(--ease), padding .35s var(--ease); }
:lang(he) .drawer__link { font-family: var(--font-serif-he); }
.drawer__link:hover, .drawer__link[aria-current="page"] { color: #fff; padding-inline-start: 0.7rem; }
.drawer__link[aria-current="page"] { color: var(--stone-beige); }
.drawer__nav li { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i) * 55ms + 150ms); }
.drawer.is-open .drawer__nav li { opacity: 1; transform: none; }
.drawer__foot { display: flex; flex-direction: column; gap: 0.35rem; color: var(--stone-beige); font-size: var(--step--1); }
.drawer__foot .ornament-wrap { display: block; margin-block-end: 0.6rem; }
.drawer__foot .ornament { color: var(--stone-beige); }
.drawer__foot a { color: var(--stone-beige); }
.drawer__foot a:hover { color: var(--ivory); }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop, .drawer__nav li { transition: none; } }

/* ---------- Hero on-load reveal (staggered) ---------- */
html.is-loaded .hero__inner > * { opacity: 0; transform: translateY(28px); animation: heroIn 1.1s var(--ease) both; }
html.is-loaded .hero__inner > *:nth-child(1) { animation-delay: 0.15s; }
html.is-loaded .hero__inner > *:nth-child(2) { animation-delay: 0.30s; }
html.is-loaded .hero__inner > *:nth-child(3) { animation-delay: 0.45s; }
html.is-loaded .hero__inner > *:nth-child(4) { animation-delay: 0.60s; }
html.is-loaded .hero__inner > *:nth-child(5) { animation-delay: 0.75s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.is-loaded .hero__inner > * { animation: none; opacity: 1; transform: none; } }

/* ---------- Age gate (legal 18+) ---------- */
.age-gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 0%, var(--warm-white), var(--bg-alt)); }
html.age-ok .age-gate { display: none; }
html:not(.age-ok) body { overflow: hidden; }
.age-gate__card { max-width: 32rem; text-align: center; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(2rem, 6vw, 3.5rem); box-shadow: var(--shadow-card); }
.age-gate__emblem { display: inline-block; width: 44px; color: var(--midnight-blue); margin-block-end: var(--space-s); }
.age-gate .ornament-wrap { display: block; margin-block: var(--space-xs) var(--space-s); }
.age-gate .ornament { margin-inline: auto; }
.age-gate h2 { font-size: var(--step-2); }
.age-gate__msg { color: var(--ink-soft); margin-block: var(--space-s) var(--space-m); }
.age-gate__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.age-gate__denied { color: #9A2B2B; margin-block-start: var(--space-m); font-weight: 600; }
.age-gate__disclaimer { font-size: var(--step--2); color: var(--ink-faint); margin-block-start: var(--space-m); letter-spacing: 0.04em; }

/* ---------- TODO / placeholder flag ---------- */
.todo-flag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9A6B00; background: #FBF1D8; border: 1px solid #E9D08A; padding: 0.15em 0.5em; border-radius: var(--radius); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .collections-grid, .feature-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .product { grid-template-columns: 1fr; gap: var(--space-l); }
  .product__media { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav {
    position: fixed; inset-block-start: 72px; inset-inline: 0; inset-block-end: auto;
    background: var(--warm-white); border-block-end: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: var(--space-xs) var(--gutter) var(--space-m);
    transform: translateY(-130%); transition: transform .45s var(--ease);
    box-shadow: var(--shadow-soft); max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .site-header.nav-open .nav { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding-block: 1rem; border-block-end: 1px solid var(--line); font-size: var(--step-0); letter-spacing: 0.08em; }
  .nav-toggle { display: inline-flex; }
  .lang__name { display: none; }
  .collections-grid, .feature-grid--3, .feature-grid--2, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer__bottom { gap: var(--space-s); }
}
@media (max-width: 400px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
}