/* ==========================================================================
   EU ORIGINS — sistem de design
   Haine croite din istoria vestimentară europeană.
   Paletă: cerneală / hârtie / auriu stins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Culori de bază */
  --ink:        #0E1726;
  --ink-soft:   #1C2941;
  --paper:      #F8F5F0;
  --paper-2:    #F1EBE1;
  --paper-3:    #E6DED1;
  --gold:       #A87F35;
  --gold-soft:  #D9BE7E;
  --wine:       #7A2E3B;

  /* Roluri semantice (tema deschisă) */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --surface:     #FFFFFF;
  --surface-2:   #FBF9F5;
  --text:        var(--ink);
  --text-muted:  #6B6659;
  --text-faint:  #918B7E;
  --line:        rgba(14, 23, 38, 0.12);
  --line-strong: rgba(14, 23, 38, 0.28);
  --accent:      var(--gold);
  --accent-ink:  #FFFFFF;
  --on-ink:      #EFEAE1;
  --shadow-sm:   0 1px 2px rgba(14, 23, 38, 0.06);
  --shadow-md:   0 8px 30px rgba(14, 23, 38, 0.10);
  --shadow-lg:   0 24px 60px rgba(14, 23, 38, 0.16);
  --success:     #2F6B4F;
  --danger:      #A33A2E;

  /* Tipografie */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-micro: 0.6875rem;   /* 11px — etichete versale */
  --fs-xs:    0.75rem;
  --fs-sm:    0.8125rem;
  --fs-base:  0.9375rem;
  --fs-md:    1.0625rem;
  --fs-lg:    clamp(1.15rem, 0.9rem + 0.8vw, 1.4rem);
  --fs-xl:    clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --fs-2xl:   clamp(2rem, 1.3rem + 3vw, 3.2rem);
  --fs-3xl:   clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem);

  /* Ritm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container: 1280px;
  --container-narrow: 820px;
  --header-h: 76px;

  /* ---------------------------------------------------------------- Motion
     Curbele sunt echivalentele CSS ale easing-urilor GSAP din presetele de
     motion, ca specificația să fie aceeași indiferent de implementare:

       power1.out → easeOutQuad     power2.out → easeOutCubic
       power3.out → easeOutQuart    expo.out   → easeOutExpo

     `--ease-back` aproximează back.out(1.4): un cubic-bezier nu poate reda
     exact un overshoot parametric, dar la 1.45 pe axa Y diferența nu se vede.

     Duratele urmează ghidul: 150–300 ms pentru micro-interacțiuni, 400–600 ms
     pentru intrări la scroll, iar ieșirea mai scurtă decât intrarea — un
     element care pleacă nu trebuie așteptat. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-power2: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-power3: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-back: cubic-bezier(0.34, 1.45, 0.64, 1);

  --dur: 260ms;
  --dur-micro: 200ms;
  --dur-enter: 460ms;
  --dur-exit: 240ms;
  --dur-slow: 620ms;
  --stagger: 70ms;

  --z-header: 60;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-toast: 100;
}

[data-theme="dark"] {
  --bg:          #0B111C;
  --bg-alt:      #101827;
  --surface:     #141C2B;
  --surface-2:   #18212F;
  --text:        #ECE7DE;
  --text-muted:  #A29B8D;
  --text-faint:  #7C7669;
  --line:        rgba(236, 231, 222, 0.14);
  --line-strong: rgba(236, 231, 222, 0.32);
  --accent:      #D9BE7E;
  --accent-ink:  #0B111C;
  --on-ink:      #ECE7DE;
  --ink:         #05090F;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.6);
  --success:     #6FBF95;
  --danger:      #E2705F;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

body.is-locked { overflow: hidden; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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

/* --------------------------------------------------------------------------
   3. Utilitare de layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .eyebrow { color: var(--gold-soft); }
.section--ink .text-muted { color: rgba(239, 234, 225, 0.66); }

.stack > * + * { margin-top: var(--sp-4); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* --------------------------------------------------------------------------
   4. Tipografie utilitară
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.display { font-size: var(--fs-3xl); }
.h1 { font-size: var(--fs-2xl); }
.h2 { font-size: var(--fs-xl); }
.h3 { font-size: var(--fs-lg); }

.lede {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 58ch;
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.section-head p { max-width: 52ch; }

/* --------------------------------------------------------------------------
   5. Butoane
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); }

.btn--gold { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }

.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-micro); }
.btn--lg { padding: 1em 2.2em; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.link-underline:hover { gap: 0.75em; opacity: 0.7; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  position: relative;
  color: inherit;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn svg { width: 20px; height: 20px; }

.count-badge {
  position: absolute;
  top: 3px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  line-height: 1;
}
.count-badge[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. Formulare
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.field__hint { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-1); }
.field__error { display: block; font-size: var(--fs-xs); color: var(--danger); margin-top: var(--sp-1); min-height: 1.2em; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 140px; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6659' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 11px;
}

.checkbox, .radio-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input, .radio-row input { margin-top: 0.25em; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

.form-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: repeat(2, 1fr); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   7. Antet
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.55rem var(--sp-4);
}
.announce strong { color: var(--gold-soft); font-weight: 600; }

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  margin-right: auto;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.brand__text b { font-weight: 600; }
.brand__text span { font-weight: 400; font-style: italic; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }

/* Selectoarele de limbă și monedă --------------------------------------------
   Butonul rămâne cât un cod de două-trei litere; lista lungă stă într-un
   popover, ca antetul să nu crească odată cu numărul de limbi. */
.picker { position: relative; }

.picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.36rem 0.5rem 0.36rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.picker__btn:hover,
.picker__btn[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); }
.picker__chev { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.picker__btn[aria-expanded="true"] .picker__chev { transform: rotate(180deg); }

.picker__pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--z-drawer);
  width: 17.5rem;
  max-width: calc(100vw - 2rem);
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.picker__pop[hidden] { display: none; }

.picker__search {
  width: 100%;
  padding: 0.5rem 0.65rem;
  margin-bottom: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
}

.picker__list {
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 0;
}
.picker__list li[hidden] { display: none; }

.picker__opt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "main note tick" "sub note tick";
  align-items: center;
  gap: 0 var(--sp-2);
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.picker__opt:hover { background: var(--surface-2); }
.picker__main { grid-area: main; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.picker__sub  { grid-area: sub;  font-size: var(--fs-xs); color: var(--text-faint); }
.picker__note {
  grid-area: note;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.picker__tick { grid-area: tick; width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
.picker__tick svg { width: 100%; height: 100%; display: block; }
.picker__opt[aria-selected="true"] { background: var(--surface-2); }
.picker__opt[aria-selected="true"] .picker__tick { visibility: visible; }
.picker__opt[aria-selected="true"] .picker__note { color: var(--accent); }

.picker__empty,
.picker__foot {
  margin: 0;
  padding: var(--sp-2) 0.55rem 0.35rem;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.picker__foot { margin-top: var(--sp-2); border-top: 1px solid var(--line); }
.picker__empty[hidden] { display: none; }

/* În meniul mobil lista se deschide spre dreapta, ca să nu iasă din ecran. */
.mobile-menu__foot .picker__pop { right: auto; left: 0; }
.mobile-menu__foot .picker__btn { padding: 0.5rem 0.7rem 0.5rem 0.9rem; }

.nav-toggle { display: none; }

/* Sub 1200px antetul nu mai încape cu meniul complet, așa că trecem pe meniul
   hamburger. Selectoarele rămân în antet — sunt doar două butoane mici. */
@media (max-width: 1200px) {
  .nav--main { display: none; }
  .nav-toggle { display: inline-grid; }
}

/* Pe ecrane înguste rămân doar căutarea, coșul și meniul: tema, favoritele și
   selectoarele se mută în meniul mobil, altfel antetul depășește ecranul. */
@media (max-width: 640px) {
  .header__inner { gap: var(--sp-2); }
  .brand__mark { width: 26px; height: 26px; }
  .brand__text { font-size: 1.12rem; }
  .header__optional { display: none; }
  .header__actions > .picker { display: none; }
  .icon-btn { width: 38px; height: 38px; }
}

/* Meniu mobil */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.mobile-menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__foot { margin-top: auto; padding-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Overlay + sertare
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(14, 23, 38, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-exit) var(--ease-power1), visibility var(--dur-exit);
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-micro) var(--ease-power1), visibility 0s;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: min(440px, 100vw);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  /* Regula de pe starea de bază e cea care rulează la ÎNCHIDERE, deci aici stă
     durata de ieșire. Un panou care pleacă nu trebuie așteptat: la 620 ms în
     ambele sensuri, închiderea coșului se simțea ca o pauză. */
  transition: transform var(--dur-exit) var(--ease-power2),
              visibility var(--dur-exit);
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-enter) var(--ease-expo), visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__title { font-family: var(--font-display); font-size: 1.35rem; margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.drawer__foot { flex: none; padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2); }

.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: none; margin-bottom: 0; }
.cart-line__img { aspect-ratio: 4 / 5; background: var(--bg-alt); border-radius: var(--radius-sm); overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 2px; }
.cart-line__meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cart-line__price { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.cart-line__remove { font-size: var(--fs-xs); color: var(--text-faint); text-decoration: underline; }
.cart-line__remove:hover { color: var(--danger); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.qty button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease);
}
.qty button:hover { background: var(--bg-alt); color: var(--text); }
.qty output { min-width: 26px; text-align: center; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

.summary-row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.summary-row--total {
  font-size: var(--fs-md);
  font-weight: 700;
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.summary-row--total span:last-child { font-variant-numeric: tabular-nums; }

.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted); }
.empty-state svg { width: 44px; height: 44px; margin: 0 auto var(--sp-4); opacity: 0.35; }

.free-ship-bar { margin-bottom: var(--sp-4); }
.free-ship-bar__track { height: 4px; background: var(--paper-3); border-radius: var(--radius-pill); overflow: hidden; }
[data-theme="dark"] .free-ship-bar__track { background: rgba(236, 231, 222, 0.14); }
/* scaleX în loc de width: bara se schimbă la fiecare adăugare în coș, iar
   lățimea animată declanșează layout pe tot sertarul de fiecare dată. */
.free-ship-bar__fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: inherit;
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  transition: transform var(--dur-enter) var(--ease-power2);
}
.free-ship-bar p { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }

/* Căutare */
.search-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  max-height: 100vh;
  overflow-y: auto;
}
.search-panel.is-open { transform: none; visibility: visible; }
.search-panel__form { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-5); }
.search-panel__input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.search-panel__input:focus { outline: none; border-bottom-color: var(--accent); }
.search-results { padding-bottom: var(--sp-6); }
.search-hit {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.search-hit img { width: 56px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-alt); }
.search-hit__name { font-weight: 600; font-size: var(--fs-sm); }
.search-hit__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.search-suggest { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-6); }

/* Toast */
.toast-region {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  max-width: min(360px, calc(100vw - 2.5rem));
  animation: toast-in 320ms var(--ease-out) both;
}
.toast svg { width: 18px; height: 18px; flex: none; color: var(--gold-soft); }
.toast.is-out { animation: toast-out 260ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) { .toast-region { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); } }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 0;
  min-height: min(86vh, 760px);
  background: var(--bg-alt);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem);
}
.hero__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__lede { max-width: 46ch; margin-bottom: var(--sp-6); font-size: var(--fs-md); color: var(--text-muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; margin-bottom: 4px; }
.hero__stat span { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.hero__media { position: relative; overflow: hidden; min-height: 380px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag {
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-sm);
  max-width: 260px;
}
.hero__tag b { display: block; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
}

/* Bandă derulantă */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: 0.9rem;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after { content: "◆"; color: var(--gold-soft); font-size: 8px; letter-spacing: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   10. Grile de produse + carduri
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .product-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
}

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.card__media img.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__media img.card__img--alt { opacity: 1; }
.card:hover .card__media img { transform: scale(1.045); }

.card__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32em 0.72em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.4;
}
.badge--gold { background: var(--gold); color: #fff; }
.badge--sale { background: var(--wine); color: #fff; }
.badge--soft { background: var(--paper); color: var(--ink); }

.card__wish {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  color: var(--text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card:hover .card__wish, .card__wish:focus-visible, .card__wish[aria-pressed="true"] { opacity: 1; transform: none; }
.card__wish svg { width: 17px; height: 17px; }
.card__wish[aria-pressed="true"] { color: var(--wine); }
.card__wish[aria-pressed="true"] svg { fill: currentColor; }

.card__quick {
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { display: none; } .card__wish { opacity: 1; transform: none; } }

.card__origin {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.card__name { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.card__name a::after { content: ""; position: absolute; inset: 0; }
.card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: auto; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price s { color: var(--text-faint); font-weight: 400; margin-right: 0.4em; }
.price--sale { color: var(--wine); }
[data-theme="dark"] .price--sale { color: #E08497; }

.swatches { display: flex; gap: 5px; }
.swatch-dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  flex: none;
}

/* --------------------------------------------------------------------------
   11. Categorii + editorial
   -------------------------------------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 820px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  /* Gradient generos: descrierea se poate rupe pe două rânduri fără să iasă din umbră. */
  background: linear-gradient(to top,
    rgba(14, 23, 38, 0.92) 0%,
    rgba(14, 23, 38, 0.66) 55%,
    rgba(14, 23, 38, 0) 100%);
  color: #fff;
}
.cat-tile__body h3 { font-size: 1.7rem; margin-bottom: 2px; color: #fff; }
.cat-tile__body span { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.82; }
@media (max-width: 820px) { .cat-tile { aspect-ratio: 16 / 10; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-alt); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .value-grid { grid-template-columns: 1fr; } }
.value { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.section--ink .value { border-top-color: rgba(255, 255, 255, 0.18); }
.value svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--sp-3); }
.value h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.value p { font-size: var(--fs-sm); color: var(--text-muted); }
.section--ink .value p { color: rgba(239, 234, 225, 0.66); }

/* Nota de sub metodele de plată */
.pay-note {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 56ch;
}

/* Ecranul de eșec împrumută structura celui de succes, dar nu și bifa verde:
   un semn de confirmare pe o plată nereușită e exact genul de detaliu care
   face un client să creadă că a plătit. */
.success-box--warn .success-box__icon { display: none; }
.success-box--warn .eyebrow { color: var(--danger); }

/* Colecții */
.collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.coll {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.coll:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.coll__media { aspect-ratio: 7 / 5; overflow: hidden; background: var(--surface-2); }
.coll__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-enter) var(--ease-power2);
}
.coll:hover .coll__media img { transform: scale(1.04); }

.coll__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}
.coll__era {
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.coll__body h3 { font-size: var(--fs-lg); margin: 0; }
.coll__body p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.coll__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
}
.coll__count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

@media (max-width: 900px) { .collections { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .collections { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .coll:hover { transform: none; }
  .coll:hover .coll__media img { transform: none; }
}

/* Testimoniale */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.quote__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.quote blockquote { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.5; }
.quote figcaption { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.06em; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .newsletter { grid-template-columns: 1fr; } }
.newsletter__form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter__form .input { flex: 1; min-width: 220px; background: transparent; border-color: rgba(255, 255, 255, 0.28); color: inherit; }
.newsletter__form .input::placeholder { color: rgba(239, 234, 225, 0.5); }

/* --------------------------------------------------------------------------
   12. Pagina de catalog
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) var(--sp-5); border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--text-faint); }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }

.shop-layout { display: grid; grid-template-columns: 244px 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-block: var(--sp-6) var(--sp-9); }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; } }

.filters { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 900px) {
  .filters {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--bg);
    padding: var(--sp-5);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  }
  .filters.is-open { transform: none; visibility: visible; }
}
.filters__mobile-head { display: none; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .filters__mobile-head { display: flex; } }

.filter-group { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
.filter-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--sp-1) 0;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.filter-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filter-group__body { padding-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }

.filter-check { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); cursor: pointer; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.filter-check:hover { color: var(--text); }
.filter-check input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.filter-check .count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.size-chips, .color-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: transparent;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-block; }

.price-range { padding-top: var(--sp-4); }
.price-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.price-range__out { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.shop-toolbar__count { font-size: var(--fs-sm); color: var(--text-muted); }
.shop-toolbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.shop-toolbar .select { width: auto; min-width: 190px; padding-block: 0.5rem; font-size: var(--fs-sm); }
.filters-open-btn { display: none; }
@media (max-width: 900px) { .filters-open-btn { display: inline-flex; } }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.active-filters:empty { display: none; }
.pill-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3rem 0.7rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
}
.pill-remove:hover { border-color: var(--line-strong); }
.pill-remove::after { content: "×"; font-size: 14px; line-height: 1; color: var(--text-muted); }

.load-more { text-align: center; margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   13. Pagina de produs
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-block: var(--sp-6) var(--sp-8); }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-3); align-items: start; }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 560px) { .gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; } }
.gallery__thumb {
  aspect-ratio: 4 / 5;
  width: 76px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  flex: none;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0.62;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--text); opacity: 1; }
.gallery__thumb:hover { opacity: 1; }
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-alt);
  cursor: zoom-in;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.gallery__main.is-zoomed img { transform: scale(1.9); }

.pdp__info { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 900px) { .pdp__info { position: static; } }
.pdp__origin { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-3); }
.pdp__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.pdp__rating { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.pdp__rating .stars { color: var(--gold); letter-spacing: 1px; }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-xl); font-family: var(--font-display); margin-bottom: var(--sp-5); }
.pdp__price s { font-size: var(--fs-md); color: var(--text-faint); }

.option-block { margin-bottom: var(--sp-5); }
.option-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.option-block__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.option-block__value { font-size: var(--fs-sm); color: var(--text-muted); }
.option-block__link { font-size: var(--fs-xs); text-decoration: underline; color: var(--text-muted); }
.option-block__link:hover { color: var(--text); }

.color-options { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.color-swatch {
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  position: relative;
  transition: transform var(--dur) var(--ease);
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--text);
  border-radius: inherit;
}

.size-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.size-option {
  min-width: 52px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  transition: all var(--dur) var(--ease);
}
.size-option:hover { border-color: var(--line-strong); }
.size-option[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.size-option[disabled] { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

.pdp__actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.pdp__actions .btn { flex: 1; }
.pdp__wish {
  width: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  flex: none;
  transition: all var(--dur) var(--ease);
}
.pdp__wish svg { width: 19px; height: 19px; }
.pdp__wish[aria-pressed="true"] { color: var(--wine); border-color: var(--wine); }
.pdp__wish[aria-pressed="true"] svg { fill: currentColor; }

.usp-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.usp-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.usp-list svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 18px; color: var(--text-muted); line-height: 1; }
.accordion details[open] summary::after { content: "–"; }
.accordion__body { padding-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.accordion__body li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; }
.accordion__body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 1px; background: var(--accent); }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.spec-table th { font-weight: 500; color: var(--text-muted); width: 45%; }

/* --------------------------------------------------------------------------
   14. Finalizare comandă
   -------------------------------------------------------------------------- */
.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-block: var(--sp-6) var(--sp-9); }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
.checkout__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: var(--sp-5); }
.checkout__panel h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.checkout__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 900px) { .checkout__aside { position: static; } }

.radio-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.radio-card input { margin-top: 0.3em; accent-color: var(--accent); flex: none; }
.radio-card b { display: block; font-size: var(--fs-sm); }
.radio-card span { font-size: var(--fs-xs); color: var(--text-muted); }
.radio-card .price { margin-left: auto; font-size: var(--fs-sm); }

.order-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: center; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.order-line img { width: 56px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-alt); }
.order-line span { font-size: var(--fs-xs); color: var(--text-muted); display: block; }

.promo-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.promo-row .input { padding-block: 0.6rem; }

.success-box { text-align: center; padding: var(--sp-8) var(--sp-5); }
.success-box__icon { width: 64px; height: 64px; margin: 0 auto var(--sp-5); border-radius: 50%; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); display: grid; place-items: center; }
.success-box__icon svg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   15. Pagini de conținut
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.prose ul { margin-bottom: var(--sp-4); }
.prose ul li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; color: var(--text-muted); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--accent); }

.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); }
.info-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.info-card p, .info-card a { font-size: var(--fs-sm); color: var(--text-muted); }
.info-card a:hover { color: var(--accent); }

.faq-list { max-width: 760px; }

/* --------------------------------------------------------------------------
   16. Subsol
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-ink); padding-block: var(--sp-8) var(--sp-5); }
.footer a:hover { color: var(--gold-soft); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-6) var(--sp-5); padding-bottom: var(--sp-7); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { font-size: var(--fs-sm); color: rgba(239, 234, 225, 0.62); max-width: 34ch; margin-top: var(--sp-4); }
.footer h4 { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: var(--sp-4); }
.footer__links li { margin-bottom: 0.55rem; }
.footer__links a { font-size: var(--fs-sm); color: rgba(239, 234, 225, 0.72); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  color: rgba(239, 234, 225, 0.52);
}
.socials { display: flex; gap: var(--sp-2); }
/* Proprietăți enumerate, nu `all`: `all` prinde și lățimea, și marginea, deci
   orice schimbare de layout devine din greșeală o animație. */
.socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; transition: background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.socials a:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.socials svg { width: 16px; height: 16px; }
.pay-marks { display: flex; gap: var(--sp-2); align-items: center; opacity: 0.7; }
.pay-mark { font-size: 10px; letter-spacing: 0.1em; padding: 0.25rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-xs); }

/* --------------------------------------------------------------------------
   17. Capitale europene — linia timpului
   -------------------------------------------------------------------------- */
.eras { overflow: hidden; }
.eras__head { align-items: flex-end; }
.eras__head .lede { margin-top: var(--sp-3); max-width: 56ch; }
.era-nav { display: flex; gap: var(--sp-2); }
.era-nav .icon-btn { border: 1px solid var(--line-strong); }
.era-nav .icon-btn:disabled { opacity: 0.28; pointer-events: none; }
.era-nav svg { width: 19px; height: 19px; }
/* Cât timp caruselul merge singur, butonul de pauză poartă culoarea de accent —
   ca să se vadă dintr-o privire că ceva se mișcă din proprie inițiativă. */
.era-nav__toggle { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.era-nav__toggle svg { width: 16px; height: 16px; }
.era-nav__toggle[aria-pressed="true"] { color: var(--text-muted); border-color: var(--line-strong); }

/* Șina se întinde dincolo de container ca ultimul card să nu pară tăiat:
   marginile ei sunt exact cât marginea containerului, deci cardul activ
   rămâne centrat pe orice lățime. */
.era-track {
  /* Marginea șinei = marginea containerului, ca primul card să se alinieze cu
     titlul de deasupra. `scroll-padding` trebuie să fie aceeași valoare: fără
     ea snap-ul lipește cardul de marginea ecranului și mănâncă tot padding-ul. */
  --rail-gutter: max(var(--sp-4), calc((100vw - var(--container)) / 2 + var(--sp-4)));
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0.5rem var(--rail-gutter) var(--sp-2);
  scroll-padding-inline: var(--rail-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.era-track::-webkit-scrollbar { display: none; }
.era-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--radius-md); }

.era-card {
  flex: 0 0 min(31rem, 84vw);
  /* Aliniere la început, nu la centru: primul card se așază exact pe marginea
     containerului, în loc să se lupte cu derularea inițială pentru centru. */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0.58;
  transform: scale(0.975);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out),
              box-shadow 560ms var(--ease-out), border-color 560ms var(--ease-out);
}
.era-card.is-active {
  opacity: 1;
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.era-card__art { position: relative; margin: 0; overflow: hidden; background: var(--bg-alt); }
.era-card__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 25 / 16;
  object-fit: cover;
  transform: scale(1.07);
  /* Schimbare de scenă, nu micro-interacțiune: caruselul stă 5,2 s pe un card,
     deci o așezare de 720 ms se citește ca o mișcare de aparat, nu ca lag. */
  transition: transform 720ms var(--ease-power3);
}
.era-card.is-active .era-card__art img { transform: none; }
.era-card__year {
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

.era-card__body { display: grid; gap: 0.6rem; padding: var(--sp-5); }
.era-card__city {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.05rem);
  line-height: 1.05;
}
.era-card__place {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.era-card__when {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.era-card__lede { color: var(--text-muted); }
.era-card__thread {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.era-card__thread b {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

/* Rigla: o linie cu opt opriri, plus o bandă aurie care arată cât ai parcurs. */
.era-ruler {
  /* Raport, nu procent: valoarea intră în scaleX(), care nu acceptă procente.
     Rămăsese „0%" de pe vremea când banda se desena cu `width`, iar un
     `scaleX(0%)` invalidează toată declarația în tăcere. */
  --era-progress: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.era-ruler::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  /* scaleX, nu width: lățimea animată forțează layout la fiecare cadru.
     `--era-progress` e un raport 0–1, scris din eras.js. */
  transform: scaleX(var(--era-progress, 0));
  transform-origin: left;
  transition: transform var(--dur-enter) var(--ease-power2);
}
.era-dot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  padding-top: 1.35rem;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}
.era-dot::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.era-dot:hover { color: var(--text); }
.era-dot:hover::before { border-color: var(--accent); }
.era-dot[aria-current="true"] { color: var(--text); }
.era-dot[aria-current="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.45);
}
.era-dot__year { font-family: var(--font-display); font-size: var(--fs-sm); }
.era-dot__city { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .era-dot__city { display: none; }
  .era-dot__year { font-size: var(--fs-xs); }
}
@media (max-width: 600px) {
  .era-dot { padding-top: 1rem; }
  .era-dot__year { display: none; }
  .era-card__body { padding: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   18. Arhiva fotografică
   -------------------------------------------------------------------------- */
.archive { overflow: hidden; }

/* Fotografiile au proporții amestecate: panorame photochrom late și tiraje pe
   carton, în picioare. În loc să le forțez într-un chenar comun și să le tai,
   șina are înălțime fixă și fiecare placă își păstrează raportul — așa arată
   un contact sheet real, iar diferența de format devine intenție, nu accident. */
.plate-rail {
  --rail-gutter: max(var(--sp-4), calc((100vw - var(--container)) / 2 + var(--sp-4)));
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0.5rem var(--rail-gutter) var(--sp-2);
  scroll-padding-inline: var(--rail-gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.plate-rail::-webkit-scrollbar { display: none; }
/* Cardurile se sting la marginile șinei în loc să fie retezate. Masca lasă
   o fâșie opacă cât marginea containerului, ca prima placă să rămână întreagă
   când șina e la început. */
.plate-rail {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--rail-gutter) * 0.55),
                      #000 calc(100% - var(--sp-6)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--rail-gutter) * 0.55),
              #000 calc(100% - var(--sp-6)), transparent 100%);
}
.plate-rail:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: var(--radius-md);
}

.plate { flex: 0 0 auto; scroll-snap-align: start; max-width: 88vw; }
.plate figure { margin: 0; }

.plate__frame {
  height: clamp(15rem, 30vw, 24rem);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.plate__frame img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: transform var(--dur-enter) var(--ease-power2),
              filter var(--dur-enter) var(--ease-power2);
}
.plate:hover .plate__frame img { transform: scale(1.03); }

.plate__cap {
  display: grid;
  gap: 0.15rem;
  padding-top: var(--sp-3);
  max-width: 34rem;
}
.plate__where {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}
.plate__year {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--accent);
  font-size: var(--fs-sm);
}
.plate__what { color: var(--text-muted); font-size: var(--fs-sm); }
.plate__credit {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  opacity: 0.78;
  padding-top: 0.35rem;
}
.plate__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plate__credit a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .plate__frame { height: 13rem; }
}

/* Fiecare placă se ridică pe măsură ce intră în șină și se retrage când iese.
   Legat de `view(inline)`, deci de poziția reală în derulare, nu de un prag pe
   care l-ar declanșa un ascultător: mișcarea urmărește degetul, în ambele
   sensuri, și rulează pe compozitor.

   Scara și opacitatea, nimic care să miște layoutul — o placă de 1400 px care
   și-ar recalcula poziția la fiecare cadru ar face șina să tresară. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate {
      animation: plate-enter linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 85%;
    }
    @keyframes plate-enter {
      from { opacity: 0.35; transform: translate3d(0, 14px, 0) scale(0.965); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* Filmul stă separat de șină: e o singură piesă, nu una dintr-un șir, iar
   controalele de player n-au ce căuta într-un carusel care se derulează. */
.film-block { margin-top: var(--sp-7); max-width: 56rem; }
.film-block .h2 { margin-bottom: var(--sp-5); }
.film { margin: 0; }
.film__player {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.film__cap { max-width: none; }
.film__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-style: italic;
  padding-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   19. Tranziții între pagini
   --------------------------------------------------------------------------
   Siteul are peste două sute de pagini statice, iar fiecare navigare era un
   ecran alb urmat de un salt. View Transitions le leagă: pagina veche se stinge,
   cea nouă intră, iar antetul și subsolul rămân pe loc în loc să clipească.

   Nativ, fără bibliotecă și fără single-page app. Unde browserul nu îl are,
   navigarea rămâne exact ce era — nu se strică nimic, doar nu se leagă. */
@view-transition { navigation: auto; }

/* Antetul și subsolul își primesc propriul nume, deci nu intră în tranziția
   rădăcină: rămân fixe cât timp conținutul se schimbă sub ele. */
.header { view-transition-name: site-header; }
.footer { view-transition-name: site-footer; }

/* Ieșirea mai scurtă decât intrarea, ca peste tot în foaia asta. */
::view-transition-old(root) {
  animation: vt-fade-out var(--dur-exit) var(--ease-power1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in var(--dur-enter) var(--ease-power2) both;
}
@keyframes vt-fade-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* Imaginea produsului își păstrează identitatea între pagini: cardul apăsat
   se transformă în fotografia mare, în loc să dispară și să reapară. Numele e
   pus din JS pe cardul apăsat, ca să existe o singură pereche în tranziție. */
.gallery__main img { view-transition-name: product-hero; }
::view-transition-group(product-hero) {
  animation-duration: var(--dur-enter);
  animation-timing-function: var(--ease-power3);
}

/* --------------------------------------------------------------------------
   20. Animații
   -------------------------------------------------------------------------- */
/* Scroll Reveal — tier „Standard": 400–600 ms, power2.out, deplasare mică.
   Era la 700 ms și 18 px; peste 500 ms o intrare nu se mai citește ca eleganță,
   ci ca așteptare. Offsetul e acum 24 px, cât să se simtă direcția. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-enter) var(--ease-power2),
              transform var(--dur-enter) var(--ease-power2);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* `will-change` ține un strat de compozitor viu. După intrare nu mai are ce
   păzi, iar pe o pagină cu douăzeci de secțiuni memoria GPU contează. */
[data-reveal].is-settled { will-change: auto; }

/* Stagger List — tier „Standard": back.out(1.4), scale 0.92, 60–80 ms între
   elemente. Overshoot-ul e ce dă senzația de mână de designer, dar numai pe
   carduri: pe tabele dense ar arăta neîngrijit. */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.94);
  transition: opacity var(--dur-enter) var(--ease-power2),
              transform var(--dur-enter) var(--ease-back);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Peste opt elemente ultimul ar intra la peste jumătate de secundă după
   primul, ceea ce se simte ca lag. Restul intră odată cu al optulea. */
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: var(--stagger); }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: calc(var(--stagger) * 6); }
[data-stagger].is-visible > *:nth-child(n + 8) { transition-delay: calc(var(--stagger) * 7); }

/* Intrarea de pe prima ecranare — nu așteaptă scroll, se joacă la încărcare.
   expo.out, pentru că o intrare care pornește repede și se așază lin e ce
   face diferența între „a apărut" și „a fost pus acolo". */
.hero__copy > * { animation: rise 620ms var(--ease-expo) both; }
.hero__copy > *:nth-child(1) { animation-delay: 40ms; }
.hero__copy > *:nth-child(2) { animation-delay: 110ms; }
.hero__copy > *:nth-child(3) { animation-delay: 180ms; }
.hero__copy > *:nth-child(4) { animation-delay: 250ms; }
.hero__copy > *:nth-child(5) { animation-delay: 320ms; }
.hero__tag { animation: rise 620ms var(--ease-expo) 460ms both; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }

/* Fără intrare separată pentru <em> din titlu: `transform` cere `inline-block`,
   iar asta transformă cuvintele în italic într-o cutie atomică — punctul de la
   final rămâne orfan pe rândul următor. Titlul intră oricum, ca parte din
   secvența de mai sus, și ghidul cere maximum 1–2 elemente animate pe ecran. */

/* Titlurile celorlalte pagini nu aveau nicio intrare — apăreau pur și simplu.
   Se descoperă acum de jos în sus, ca un rând de literă turnată care se așază.

   `clip-path`, nu `transform` pe un element interior: aici am mai greșit o dată.
   Un <em> făcut inline-block ca să poată fi transformat devine o cutie atomică
   și lasă punctul final orfan pe rândul următor. Tăierea nu atinge fluxul. */
.page-head .display,
.page-head .h1 {
  clip-path: inset(0 0 -0.15em 0);
  animation: title-set 700ms var(--ease-expo) 80ms both;
}
@keyframes title-set {
  from { clip-path: inset(0 0 100% 0); transform: translate3d(0, 14px, 0); }
}
.page-head .eyebrow { animation: rise 620ms var(--ease-expo) both; }
.page-head .breadcrumbs { animation: rise 620ms var(--ease-expo) both; }

.hero__media img { animation: hero-zoom 900ms var(--ease-power3) both; }
@keyframes hero-zoom { from { opacity: 0; transform: scale(1.06); } }

/* Bara de progres a citirii */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: calc(var(--z-header) + 1);
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-soft), var(--accent));
  pointer-events: none;
}

/* Numărătorul din antetul de secțiune */
.section-head .eyebrow { position: relative; }
.section-head .eyebrow::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  margin-top: 0.55rem;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-enter) var(--ease-power3) 140ms;
}
[data-reveal].is-visible .eyebrow::after { transform: scaleX(1); }

/* ------------------------------------------------- Progresul șinei de plăci
   Șina are douăzeci și trei de fotografii și nicio bară de derulare, deci
   nimic nu spune cât a mai rămas. Bara se leagă direct de derularea șinei
   prin `scroll-timeline`, nu de un ascultător: rămâne exactă și când cineva
   trage cu degetul, cu shift+rotiță sau cu săgețile. */
.rail-progress {
  height: 2px;
  margin-top: var(--sp-4);
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.rail-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--accent));
  transform: scaleX(0.12);
  transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .plate-rail { scroll-timeline: --plate-rail x; }
  .archive { timeline-scope: --plate-rail; }
  .rail-progress__fill {
    animation: rail-fill linear both;
    animation-timeline: --plate-rail;
  }
  @keyframes rail-fill {
    from { transform: scaleX(0.12); }
    to { transform: scaleX(1); }
  }
}
/* Fără suport pentru scroll-timeline bara ar sta înghețată la 12% și ar minți.
   Mai bine lipsește. */
@supports not (animation-timeline: scroll()) {
  .rail-progress { display: none; }
}

/* Coșul pulsează scurt când i se schimbă numărul */
.count-badge.is-bumped { animation: bump 420ms var(--ease-out); }
@keyframes bump {
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Butoanele capătă adâncime la hover, nu doar deplasare */
.btn { box-shadow: 0 0 0 0 transparent; }
.btn:hover { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 60%, transparent); }

/* Imaginile editoriale se descoperă de jos în sus. Doar `clip-path` — trans-
   formarea rămâne liberă pentru parallax, altfel cele două s-ar suprascrie. */
.split__media { overflow: hidden; }
.split__media img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 720ms var(--ease-power3);
}
[data-reveal].is-visible .split__media img { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------------------- Parallax
   Tier „Subtle": deplasare de 5–15%, doar pe straturi decorative, niciodată pe
   text. Legat de `view()`, deci rulează pe compozitor și nu costă niciun
   ascultător de scroll — un handler în JS ar face aceeași mișcare cu jank pe
   telefoanele de mijloc.

   Se aplică numai la hero și la cele două imagini editoriale. Ghidul cere
   maximum 1–2 elemente animate pe ecran; parallax pe fiecare card ar fi zgomot,
   nu profunzime. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media { overflow: hidden; }
    .hero__media img {
      animation: hero-zoom 900ms var(--ease-power3) both, media-drift linear both;
      animation-timeline: auto, view();
      animation-range: normal, cover 0% cover 100%;
    }
    .split__media img {
      animation: media-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* Scala compensează deplasarea: fără ea, translația ar descoperi
       marginea de sus și de jos a chenarului. */
    @keyframes media-drift {
      from { transform: translate3d(0, -4.5%, 0) scale(1.1); }
      to   { transform: translate3d(0, 4.5%, 0) scale(1.1); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
  .hero__copy > *, .hero__media img, .hero__tag { animation: none; }
  .marquee__track { animation: none; }
  .scroll-progress { display: none; }
  .split__media img { clip-path: none; transform: none; animation: none; }
  .section-head .eyebrow::after { transform: scaleX(1); }
  .era-card { opacity: 1; transform: none; }
  .era-card__art img { transform: none; }
  /* Parallaxul e exact efectul pe care setarea îl vizează: nicio deplasare
     legată de scroll, nici măcar subtilă. */
  .hero__media img { animation: none; transform: none; }
  /* Bara de progres a șinei rămâne — nu se mișcă singură, doar reflectă unde
     ai ajuns, ceea ce e informație, nu animație. */
  .rail-progress__fill { transition: none; }

  /* Titlurile de pagină apar întregi, fără tăiere. */
  .page-head .display, .page-head .h1 {
    animation: none;
    clip-path: none;
  }
  .page-head .eyebrow, .page-head .breadcrumbs { animation: none; }

  /* Plăcile stau pe loc, complet vizibile. */
  .plate { animation: none; opacity: 1; transform: none; }

  /* Tranzițiile între pagini se dezactivează la nivelul pseudo-elementelor:
     `@view-transition` nu are un comutator, dar o animație de durată zero
     lasă navigarea să se întâmple instantaneu, ca înainte. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Schelet de încărcare */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--surface-2) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   20. Tipărire
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .drawer, .overlay, .announce, .marquee, .toast-region, .card__quick { display: none !important; }
  body { background: #fff; color: #000; }
}