/* ==========================================================================
   Luly Mode - prototip privat
   Cromatica este preluata integral de pe mainecooncafe.ro (crem cald, maro
   foarte inchis, portocaliu-auriu si degradeul "sunset"). Bannerul din hero
   ramane neatins. Verdele #25D366 apare exclusiv la butonul WhatsApp.
   Un singur token este derivat: --gold-text, obtinut din --gold-deep prin
   coborarea luminozitatii, pentru ca textul mic sa atinga 4,5:1.
   ========================================================================== */

:root {
  /* --- paleta preluata de pe mainecooncafe.ro --- */
  --bg: #FDF4E8;                 /* fundal principal */
  --bg-warm: #FAE6D0;            /* suprafata deschisa secundara */
  --cream: #FCE8D3;              /* carduri; text pe fundal inchis */
  --bg-deep: #1D120A;            /* sectiuni inchise si footer */
  --bg-deep-2: #2A1810;          /* hover si carduri pe fundal inchis */
  --ink: #251309;                /* text principal */
  --ink-soft: #5D4233;           /* text secundar */
  --ink-mute: #9C8270;           /* doar decorativ, nu pentru text mic */
  --gold: #EF8A2B;               /* accente pe fundal inchis */
  --gold-light: #FBB145;         /* etichete pe fundal inchis */
  --gold-deep: #C2521A;          /* accente si contururi pe fundal deschis */
  --line: #ECCFAE;               /* delimitari fine pe deschis */
  --line-soft: #F5E2CB;
  --sunset: linear-gradient(135deg, #FCC24D 0%, #F6A21E 38%, #F4791E 70%, #DE531A 100%);
  --sunset-v: linear-gradient(180deg, #FCC24D 0%, #F4791E 55%, #DE531A 100%);
  --sunset-ink: #2A1206;         /* text pe butonul cu degrade */

  /* Derivat din --gold-deep: aceeasi nuanta si saturatie, luminozitate mai mica,
     pentru textul mic care are nevoie de 4,5:1 pe suprafetele deschise. */
  --gold-text: #A64616;

  /* Culori masurate pixel cu pixel in "Logo Luly Mode.png", nuanta dominanta
     a fiecarui text din sigla. Nu sunt aproximari si nu se folosesc altundeva. */
  --logo-luly: #FDFDFD;          /* literele "LU LY" */
  --logo-mode: #FC177F;          /* literele "MODE" */
  --logo-subtitlu: #FFFFFF;      /* textul "CLOTHING STORE" */

  --whatsapp: #25D366;           /* marca WhatsApp, nemodificata */
  --whatsapp-ring: #1F5C36;
  --white: #FFFFFF;              /* exclusiv pictograma WhatsApp */

  /* --- aliasuri catre rolurile deja folosite in foaia de stil --- */
  --ivory: var(--bg);
  --burgundy-dark: var(--bg-deep);
  --burgundy-hover: var(--bg-deep-2);
  --button-brown: var(--ink);
  --muted-text: var(--ink-soft);
  --gold-on-dark: var(--gold-light);
  --ivory-dim: rgba(252, 232, 211, 0.74);
  --line-on-dark: rgba(252, 232, 211, 0.24);   /* delimitari decorative */
  --edge-on-dark: rgba(255, 255, 255, 0.6);    /* contururi de control pe inchis */

  /* --- tipografie: exclusiv fonturi de sistem, zero cereri externe --- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Liberation Mono", monospace;

  --header-h: 68px;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}
img, video, picture { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, [tabindex], video, summary):focus-visible {
  outline: 2px solid var(--button-brown);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :where(a, button, [tabindex]):focus-visible { outline-color: var(--gold-on-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; text-decoration: none; font-family: var(--font-mono); font-size: 13px;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); scroll-margin-top: calc(var(--header-h) + 12px); }
.section--light { background: var(--ivory); color: var(--ink); }
.section--dark { background: var(--burgundy-dark); color: var(--ivory); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .eyebrow::after { background: var(--line-on-dark); }

.h-section { font-size: clamp(30px, 4.4vw, 50px); max-width: 20ch; }
.h-section em { font-style: italic; color: var(--gold-deep); }  /* text mare, >=30px */
.section--dark .h-section em { color: var(--gold-on-dark); }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted-text); max-width: 62ch; }
.section--dark .lead { color: var(--ivory-dim); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--dark .rule { background: var(--line-on-dark); }

/* ------------------------------------------------------------- butoane --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.btn--primary { background: var(--sunset); color: var(--sunset-ink); border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(222, 83, 26, 0.55); }
.btn--primary:hover { background: var(--sunset-v); box-shadow: 0 10px 28px -8px rgba(222, 83, 26, 0.7); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--gold-deep); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.section--dark .btn--ghost { color: var(--cream); border-color: var(--edge-on-dark); }
.section--dark .btn--ghost:hover { background: rgba(252, 232, 211, 0.10); border-color: var(--cream); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: var(--bg); }

.link-arrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.link-arrow::after { content: "\2192"; transition: transform 200ms var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--gold-on-dark); }

/* -------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  /* Exact culoarea casetelor de categorie din sectiunea Colectii: regula .tab
     foloseste tot var(--burgundy-dark). Nicio valoare noua introdusa. */
  background: var(--burgundy-dark);
  border-bottom: 1px solid var(--line-on-dark);
}
/* Conturul de focalizare, pe fundal inchis, ca in sectiunile intunecate. */
.site-header :where(a, button, [tabindex]):focus-visible { outline-color: var(--gold-on-dark); }
.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* Sigla oficiala plus denumirea, un singur grup si un singur link. Fisierul
   siglei este patrat, iar regula fixeaza acelasi numar de pixeli pe ambele
   laturi, deci nu poate fi nici turtita, nici decupata. */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; padding-block: 6px; min-width: 0;
}
.brand__logo { display: block; width: 52px; height: 52px; flex: none; }
.brand__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.brand__name {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.brand__name-luly { color: var(--logo-luly); }
.brand__name-mode { color: var(--logo-mode); }
.brand__tag {
  font-family: var(--font-mono);
  font-size: 9.5px; line-height: 1; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--logo-subtitlu); white-space: nowrap;
}
@media (max-width: 860px) {
  .brand { gap: 10px; }
  .brand__logo { width: 42px; height: 42px; }
  .brand__name { font-size: 18px; }
  .brand__tag { font-size: 8px; letter-spacing: 0.16em; }
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); }
.nav__link {
  position: relative; text-decoration: none; color: var(--ivory);
  font-size: 15px; padding: 11px 0; display: inline-block;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--gold); }
.nav__cta { white-space: nowrap; }

.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--gold); border-radius: 2px; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1px; background: var(--ivory); position: relative; transition: background-color 150ms; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: var(--ivory);
  transition: transform 220ms var(--ease), top 220ms var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- hero --- */
/* Trei straturi separate, niciunul "ars" in celalalt:
   1. decorul, pus ca fundal CSS (pur decorativ, deci nu ajunge la cititoarele
      de ecran si nu are nevoie de text alternativ);
   2. textul, HTML curat, in jumatatea stanga;
   3. fotografia detourata a echipei, in jumatatea dreapta.
   Fundalul nu primeste filtru, gradient sau voal: nuanta ivoire a decorului
   ramane exact cea din fisier. background-attachment ramane "scroll". */
/* O singura imagine in Hero: ilustratia panoramica. Sectiunea nu mai are
   fundal-imagine propriu, deci nu exista doua straturi suprapuse si nicio
   cusatura. Culoarea de dedesubt este acelasi ivoire ca al ilustratiei. */
.hero {
  position: relative;
  display: grid;
  background-color: var(--bg);
}

/* Banda panoramica. Raportul sursei este 1983/793 = 2,5; personajele ating
   marginea de sus si pe cea de jos, deci orice fereastra mai lata de 2,5 le-ar
   taia capetele sau incaltamintea. Sectiunea nu depaseste niciodata acest
   raport: cand textul cere mai multa inaltime, decuparea se face doar lateral. */
.hero__bg { display: block; }
.hero__bg-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(20px, 4vw, 40px);
  padding-block: clamp(28px, 5vw, 48px) 0;
}

/* --- coloana de text --- */
.hero__copy { max-width: 36rem; }
/* Continutul sta deasupra ilustratiei. */
.hero__inner { position: relative; z-index: 1; }

.hero__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 0.45vw + 12.5px, 18px);
  line-height: 1.2;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Separator discret, desenat integral din CSS: un romb mic si o linie care
   se stinge spre dreapta. Fara imagine, fara font decorativ. */
.hero__rule {
  display: block; position: relative;
  width: clamp(72px, 9vw, 108px); height: 1px;
  margin: clamp(16px, 1.8vw, 24px) 0 clamp(18px, 2vw, 26px);
  background: linear-gradient(90deg, var(--ink-soft), rgba(93, 66, 51, 0));
}
.hero__rule::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  background: var(--ink-soft); transform: rotate(45deg);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(33px, 3.4vw + 12px, 62px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--burgundy-dark);          /* grena foarte inchis */
  /* Ruperea randurilor e controlata mai jos, deci echilibrarea automata nu are
     ce face; ramane doar ca plasa de siguranta daca un segment nu incape. */
  text-wrap: balance;
}

/* Titlul e un singur text, taiat in patru segmente. Un "\A" pus prin ::after,
   intr-un context white-space: pre, forteaza trecerea pe randul urmator; spatiul
   normal dintre etichete ramane in HTML, deci textul se citeste si se copiaza
   corect. Asa nu exista doua titluri si nici <br> fix pentru toate ecranele.

   Telefon:  Tinute care / iti pun stilul / in valoare   -> rupere dupa 1 si 3
   Desktop:  Tinute care iti pun / stilul in valoare     -> rupere dupa 2        */
.hero__seg { white-space: nowrap; }      /* niciun cuvant nu se desparte */
.hero__seg:nth-child(1)::after,
.hero__seg:nth-child(3)::after { content: "\A"; white-space: pre; }

@media (min-width: 900px) {
  .hero__seg:nth-child(1)::after,
  .hero__seg:nth-child(3)::after { content: none; }
  .hero__seg:nth-child(2)::after { content: "\A"; white-space: pre; }
}

.hero__lead {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(15.5px, 0.32vw + 14.6px, 18px);
  line-height: 1.65;
  color: var(--ink-soft);               /* maro */
  max-width: 44ch;
}

/* Mentiunea despre marimile mari. Fara caseta, fara fundal si fara umbra: doar
   o linie verticala de 2 px in portocaliul deja folosit pe site. Eticheta preia
   stilul monospatiat al etichetelor existente, iar explicatia ramane maro
   inchis. Latimea e limitata in "ch" ca explicatia sa stea pe doua randuri si
   pe ecran ingust, fara sa scada dimensiunea sub pragul de lizibilitate. */
.hero__sizes {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding-left: clamp(12px, 1.1vw, 16px);
  border-left: 2px solid var(--gold-deep);
  /* 38ch: atat cat eticheta ingrosata de 22 px sa incapa pe un rand si pe
     desktop, iar explicatia sa ramana pe doua randuri. */
  max-width: 38ch;
  font-size: clamp(15.5px, 0.2vw + 14.8px, 16.5px);
  line-height: 1.55;
  color: var(--ink);                    /* maro inchis */
  text-wrap: pretty;
}
.hero__sizes-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  /* 18 px la 360 px, 22 px de la 1440 px in sus */
  font-size: clamp(18px, 0.37vw + 16.67px, 22px);
  line-height: 1.25;
  /* spatiere redusa fata de 0.16em, ca textul sa ramana pe un rand la 360 px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);              /* portocaliul lizibil pe ivoire */
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* --- coloana cu fotografia echipei --- */
/* max-width si max-height impreuna cu dimensiunile "auto" lasa browserul sa
   pastreze raportul: fotografia nu se intinde si nu se decupeaza niciodata. */
/* Ilustratia este o scena completa, dreptunghiulara, nu un decupaj asezat pe
   linia podelei din decor: se centreaza in coloana ei. */
.hero__figure {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
/* Sursa are 3:2; fereastra patrata taie din laterale, nu din inaltime, deci
   capetele, mainile, gentile si incaltamintea raman intregi. La 55% cele doua
   femei cad in centrul ferestrei, buchetul din stanga si suportul cu haine din
   dreapta raman vizibile partial. */
.hero__people {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 560px);
  object-fit: cover;
  object-position: 55% center;
}

/* Pe ecrane inguste textul vine primul, fotografia sub el; titlul se rupe
   natural, deci taieturile fixe de pe desktop se dezactiveaza. */
@media (max-width: 899px) {
  .hero__copy { margin-inline: auto; }
  .hero__lead { max-width: 52ch; }
  /* Fereastra aproape patrata, centrata pe cele doua femei: pe toata inaltimea
     imaginii, deci fetele si incaltamintea raman intregi, iar personajele nu se
     micsoreaza intr-o banda joasa. */
  .hero__bg { margin-top: clamp(24px, 4vw, 36px); }
  .hero__bg-img {
    aspect-ratio: 1 / 1;
    height: auto; max-height: 420px;
    object-position: 83% center;
  }
  /* Aici sectiunea se termina exact sub grup; nicio deplasare in jos, ca sa nu
     ajunga incaltamintea sub sectiunea urmatoare. */
  .hero__people { transform: none; }
}

/* Iesirea in stanga si culoarul rezervat butonului plutitor erau facute pentru
   decupajul de dinainte, care se termina in coltul din dreapta-jos. Ilustratia
   este o imagine incadrata: se aliniaza cu restul coloanei de text. Butonul
   plutitor oricum nu se afiseaza sub 768 px. */
@media (max-width: 700px) {
  .hero__inner { padding-bottom: clamp(10px, 2.5vw, 18px); }
}

@media (min-width: 900px) {
  /* Inaltimea urmeaza raportul ilustratiei: 100/2,5 = 40vw. Pragul de 560 px
     intervine pe ecranele inguste, unde textul are nevoie de mai mult loc, si
     face sectiunea mai inalta decat raportul - niciodata mai lata. Asa raportul
     ramane mereu <= 2,5, deci decuparea e doar laterala si nu taie capete sau
     incaltaminte. (aspect-ratio nu se foloseste: impreuna cu min-height umfla
     latimea sectiunii peste cea a ferestrei.) */
  .hero { height: max(560px, 40vw); }
  .hero__bg {
    position: absolute; inset: 0; z-index: 0;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: 0;
  }
  /* Textul sta peste zona ivoire libera din stanga ilustratiei. */
  .hero__copy {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(28px, 4vh, 64px);
    max-width: 45%;
  }
}

@media (min-width: 1100px) {
  .hero__inner { max-width: 1280px; padding-inline: 52px; }
  .hero__actions .btn { min-height: 54px; padding: 16px 32px; }
}

@media (min-width: 1700px) {
  .hero__inner { max-width: 1480px; }
}

/* --------------------------------------------------------------- banda --- */
/* Banda editoriala dintre hero si Colectii. Acelasi maro inchis ca antetul si
   ca tab-urile de categorie (var(--burgundy-dark)), text ivoire, separatoare in
   portocaliul existent. Fara imagini, fara pictograme, fara culori noi.

   Bucla: pista contine doua copii identice ale textului si se deplaseaza de la
   0 la -50%. Dupa -50% a doua copie ajunge exact unde a pornit prima, deci
   reluarea este continua, fara salt. Se anima doar transform, deci compozitorul
   o poate duce fara sa reaseze pagina. */
.ticker {
  background: var(--ivory);              /* --bg = #FDF4E8, ivoirul site-ului */
  color: var(--burgundy-dark);           /* maroul antetului si al tab-urilor */
  overflow: hidden;                      /* ce iese din banda nu se vede */
  /* Nicio inaltime fixa: banda se ridica exact cat cele doua randuri plus
     padding-ul, iar randurile raman centrate pe verticala. */
  height: auto;
  padding-block: clamp(13px, 1.25vw, 19px);
  scroll-margin-top: calc(var(--header-h) + 12px);
  /* Linii foarte fine, portocaliul existent (--gold-deep) la 22% opacitate. */
  border-block: 1px solid rgba(194, 82, 26, 0.22);
}
.ticker__inner {
  display: grid; align-content: center;
  gap: clamp(8px, 0.65vw, 10px);
}

.ticker__row { overflow: hidden; }
.ticker__track {
  display: flex; width: max-content;
  will-change: transform;
  animation: ticker-stanga 46s linear infinite;
}
.ticker__row--b .ticker__track { animation-duration: 64s; }   /* putin mai lent, pentru profunzime */

.ticker__text {
  flex: none; white-space: nowrap;       /* niciun cuvant nu se desparte */
  padding-right: 2.2em;                  /* distanta dintre cele doua copii */
  font-family: var(--font-mono);
  font-size: clamp(11.5px, 0.52vw + 9.6px, 15px);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ticker__row--b .ticker__text {
  font-size: clamp(10.5px, 0.46vw + 8.9px, 13.5px);
  letter-spacing: 0.2em;
}
/* Portocaliul pentru suprafete deschise, cel folosit deja de .eyebrow si
   .contact-list__label. --gold ar cobori sub pragul de contrast pe ivoire. */
.ticker__sep { color: var(--gold-text); }

/* Cursorul peste banda opreste miscarea. */
.ticker:hover .ticker__track { animation-play-state: paused; }

@keyframes ticker-stanga {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Fara miscare: textul se aseaza static, intreg si lizibil, pe mai multe randuri
   daca e nevoie. Copiile de repetare dispar, ca sa nu se citeasca de doua ori. */
@media (prefers-reduced-motion: reduce) {
  .ticker { padding-inline: var(--gutter); }
  .ticker__row { overflow: visible; }
  .ticker__track { animation: none; width: auto; display: block; }
  .ticker__text[aria-hidden="true"] { display: none; }
  .ticker__text {
    display: block; white-space: normal; padding-right: 0;
    max-width: var(--wrap); margin-inline: auto; text-align: center;
  }
}

/* -------------------------------------------------------------- despre --- */
.about { display: grid; grid-template-columns: 1fr 0.86fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.quote {
  margin: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--cream);
}
.quote__mark { font-family: var(--font-display); font-size: 44px; line-height: 0.6; color: var(--gold-deep); display: block; margin-bottom: 12px; }
.quote p { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.4; }
.quote footer { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-text); }
.facts { margin-top: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts div { background: var(--ivory); padding: 16px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.facts dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-text); }
.facts dd { margin: 0; font-size: 15.5px; }
/* Tinta de click de minimum 24 px inaltime pentru linkurile din liste. */
.facts dd a, .info dd a, .footer-contact a, .contact-list__value a {
  display: inline-block; padding-block: 3px; min-height: 24px;
}

/* ------------------------------------------------------------ colectii --- */
.collections { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 72px); align-items: start; margin-top: 46px; }
.tabs { display: grid; gap: 1px; background: var(--line-on-dark); border-block: 1px solid var(--line-on-dark); }
.tab {
  background: var(--burgundy-dark); border: 0; text-align: left; cursor: pointer;
  padding: 20px 4px; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline;
  transition: background-color 220ms var(--ease), padding-left 220ms var(--ease);
}
.tab:hover { background: var(--burgundy-hover); padding-left: 14px; }
.tab__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--gold-on-dark); }
.tab__name { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); color: var(--ivory);
             line-height: 1.25; text-wrap: balance; }   /* numele lungi se rup echilibrat, fara cuvinte razlete */
.tab__hint {
  grid-column: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ivory-dim);
}
.tab[aria-selected="true"] { background: var(--burgundy-hover); padding-left: 14px; }
.tab[aria-selected="true"] .tab__hint { color: var(--gold-on-dark); }

.panel[hidden] { display: none; }
.panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--line-on-dark); background: var(--bg-deep-2); }
.section--light .shot img { border-color: var(--line); background: var(--cream); }
.shot figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ivory-dim); line-height: 1.6;
}
.panel__note { margin-top: 24px; font-size: 15px; color: var(--ivory-dim); max-width: 54ch; }

/* Panourile cu galerie: doua coloane pe telefon, trei de la 560 px in sus.
   Folosesc aceleasi distante si contururi ca restul panourilor. Regula e comuna
   celor trei galerii, ca sa nu existe doua seturi de stiluri. */
.panel__grid--six,
.panel__grid--galerie { grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 560px) {
  .panel__grid--six,
  .panel__grid--galerie { grid-template-columns: repeat(3, 1fr); }
}

.shot--zoom .shot__open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; color: inherit;
}
.shot--zoom .shot__open img {
  display: block; transition: opacity 220ms var(--ease);
}
.shot--zoom .shot__open:hover img { opacity: 0.82; }

/* ------------------------------------------------ galerie modala (lightbox) -- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  /* Randul are inaltime explicita (minmax(0,1fr)), nu una dedusa din continut.
     Altfel panoul nu are un reper pentru height:100% si fotografia creste
     pana isi impinge butoanele in afara ecranului. */
  display: grid; grid-template-rows: minmax(0, 1fr); justify-items: center;
  padding: clamp(12px, 3vw, 28px);
}
.lightbox__scrim { position: absolute; inset: 0; background: rgba(29, 18, 10, 0.92); border: 0; }
.lightbox__panel {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px; width: min(100%, 980px); height: 100%;
}
/* Randul fotografiei primeste o inaltime reala (minmax(0,1fr) + min-height:0),
   altfel procentele de pe imagine nu se pot rezolva si fotografia depaseste
   ecranul pe verticala. Latimea maxima de 980 px tine imaginea sub cei
   1080 px nativi, deci nu se mareste niciodata artificial. */
.lightbox__figure { margin: 0; min-height: 0; }
.lightbox__img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;                   /* fotografia ramane intreaga */
}
.lightbox__bar {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 34px);
}
.lightbox__count {
  margin: 0; min-width: 5.5ch; text-align: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  color: var(--gold-on-dark);
}
.lightbox__nav, .lightbox__close {
  display: grid; place-items: center;
  width: 52px; height: 52px;             /* tinta tactila confortabila */
  padding: 0; border: 1px solid var(--edge-on-dark); border-radius: 50%;
  /* Fundal opac: altfel textul paginii de dedesubt se vede prin butoane. */
  background: var(--bg-deep-2); color: var(--cream); cursor: pointer;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.lightbox__nav svg, .lightbox__close svg { width: 24px; height: 24px; }
.lightbox__nav:hover, .lightbox__close:hover {
  background: #3A2418; border-color: var(--cream);
}
.lightbox__close { position: absolute; top: 0; right: 0; z-index: 2; }
.lightbox__caption {
  margin: 0; text-align: center; font-size: 15px; color: var(--ivory-dim);
  max-width: 60ch; justify-self: center;
}
.lightbox :where(button):focus-visible { outline: 2px solid var(--gold-on-dark); outline-offset: 3px; }

@media (max-width: 560px) {
  .lightbox { padding: 10px; }
  .lightbox__panel { gap: 10px; }
  .lightbox__close { top: -2px; right: -2px; width: 48px; height: 48px; }
  .lightbox__nav { width: 56px; height: 56px; }
  .lightbox__caption { font-size: 14px; }
}

/* ------------------------------------------------------------- poveste --- */
/* Traseu de citire in trei registre: stanga titlul si deschiderea, dreapta
   povestea care curge neintrerupt in aceeasi coloana, apoi concluzia pornind
   de la aceeasi margine din stanga - deci se citeste ca incheiere, nu ca
   element separat. Fara carduri, chenare sau fundaluri de separare. */
/* Padding propriu, ca sectiunea sa nu ramana cu spatiu gol exagerat.
   Regula generala .section nu se atinge, ca sa nu afecteze restul paginii. */
#poveste { padding-block: clamp(50px, 5.8vw, 96px); }
.story { display: grid; row-gap: clamp(26px, 3.4vw, 40px); }

.story__lead {
  margin-top: clamp(18px, 2vw, 28px);
  font-family: var(--font-display);
  /* Putin mai mic decat inainte, ca sa apropie inaltimea coloanei din stanga
     de cea din dreapta si sa nu ramana gol sub una dintre ele. */
  font-size: clamp(19px, 1.1vw + 9px, 25px);
  line-height: 1.5; color: var(--ink); max-width: 32ch;
}

.story__body p {
  color: var(--muted-text);
  font-size: clamp(16px, 1.15vw, 17px);
  line-height: 1.65; max-width: 60ch;
}
.story__body p + p { margin-top: clamp(16px, 1.5vw, 22px); }

/* Concluzia: al treilea registru. Mai mare decat corpul, aliniata la marginea
   din stanga a grilei, ca sa nu pluteasca. Nu e citat, deci fara ghilimele. */
.story__close {
  margin-top: clamp(32px, 4vw, 56px);
  padding-block: clamp(22px, 2.6vw, 34px);
  /* Doua linii fine, portocaliul existent (--gold-deep) la 30% opacitate.
     Fara fundal, fara chenar masiv, fara umbra. */
  border-block: 1px solid rgba(194, 82, 26, 0.3);
  font-family: var(--font-display); color: var(--ink);
  font-size: clamp(20px, 1.6vw + 12px, 30px);
  line-height: 1.45; text-wrap: pretty;
}
.story__close p { margin: 0; max-width: 66ch; }
.story__close-mark {
  display: block; margin-bottom: clamp(10px, 1.2vw, 16px);
  font-size: clamp(13px, 0.9vw, 17px); line-height: 1;
  color: var(--gold-text);
}

/* Pregatit pentru fotografia care va veni; nefolosit deocamdata, deci nu ocupa
   spatiu si nu lasa gol vizibil in pagina. */
.story__photo { margin: 0; }
.story__photo img { width: 100%; border: 1px solid var(--line); }
.story__photo figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text);
}

/* De la 900 px in sus: doua coloane echilibrate, aliniate sus. Sub acest prag
   totul curge pe o singura coloana, in ordinea din cod. */
@media (min-width: 900px) {
  .story {
    grid-template-columns: 42fr 58fr;
    column-gap: clamp(64px, 5.4vw, 80px);
    align-items: start;
    row-gap: 0;
  }
  .story__intro { grid-column: 1; }
  .story__body  { grid-column: 2; }
  .story__photo { grid-column: 2; margin-top: clamp(28px, 3vw, 40px); }
  .story__close { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- magazin --- */
/* Containerul pastreaza ancora #magazin. Inauntru, doua sectiuni de magazin:
   prima pe ivoire, a doua pe acelasi maro inchis ca antetul si casetele de
   categorie. Nicio culoare noua. */
.stores { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Titlul sectiunii pe doua randuri. Randurile sunt doua <span> in acelasi h2,
   deci textul citit de cititoarele de ecran ramane continuu: "Vizitează
   magazinele Luly Mode". Nu exista o a doua varianta pentru telefon; daca un
   rand nu incape, text-wrap: balance il imparte echilibrat. */
.stores__title {
  max-width: 24ch;
  font-size: clamp(32px, 1.6vw + 26.2px, 46px);
  line-height: 1.1;
}
.stores__title-line { display: block; text-wrap: balance; }

.stores__lead {
  margin: clamp(16px, 1.5vw, 20px) 0 0;   /* titlu -> subtitlu */
  max-width: 60ch;                        /* ~58-62 semne pe rand */
  font-size: clamp(16px, 0.095vw + 15.66px, 17px);
  line-height: 1.65; color: var(--muted-text);
}
.section--dark .stores__lead { color: var(--ivory-dim); }

/* Ordinea din cod este cea de pe telefon: eticheta, titlu, video, text,
   adresa, program, buton. Desktopul doar reaseaza coloanele.
   Ritmul vertical vine din margini explicite pe fiecare bloc, nu dintr-un
   row-gap unic, fiindca pasii ceruti difera intre ei. */
.store {
  display: grid; row-gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.store:first-child { margin-top: 0; }     /* al doilea magazin isi deschide propria banda */

.store__eyebrow { margin-bottom: 0; }
.store__title {
  margin: clamp(12px, 1.1vw, 16px) 0 0;   /* eticheta -> titlu */
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 0.71vw + 24.44px, 36px);
  line-height: 1.14; color: var(--ink);
}
/* Doua randuri fixate din markup, ca "Obor" si "Moșilor" sa nu ramana singure. */
.store__title-line { display: block; text-wrap: balance; }
.section--dark .store__title { color: var(--ivory); }

.store__media { margin-top: clamp(28px, 3vw, 36px); }    /* titlu -> video */
.store__body  { margin-top: clamp(24px, 2.6vw, 30px); }  /* video -> descriere */

.store__text {
  margin: 0; font-size: clamp(16px, 0.095vw + 15.66px, 17px);
  line-height: 1.65; color: var(--muted-text);
  max-width: 56ch; text-wrap: pretty;
}
.section--dark .store__text { color: var(--ivory-dim); }

/* Eticheta deasupra valorii, aliniate la stanga. De la 1200 px coloana de text
   este destul de lata cat adresa sa nu se inghesuie, deci eticheta si valoarea
   trec pe acelasi rand, cu etichetele aliniate pe aceeasi verticala. */
.store__meta {
  margin: clamp(22px, 2.4vw, 28px) 0 0;   /* descriere -> informatii */
  display: grid; gap: clamp(18px, 1.6vw, 22px);
}
.store__meta > div { display: grid; gap: 8px; }
.store__meta dt {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-text); margin: 0;
}
.section--dark .store__meta dt { color: var(--gold-on-dark); }
.store__meta dd { margin: 0; font-size: 16px; line-height: 1.55; }
.store__meta address { font-style: normal; }
.store__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.store__meta a:hover { border-bottom-color: var(--gold-deep); }
.section--dark .store__meta a { border-bottom-color: var(--line-on-dark); }
.section--dark .store__meta a:hover { border-bottom-color: var(--gold-on-dark); }
.store__map { margin-top: clamp(22px, 2.6vw, 30px); align-self: start; justify-self: start; }

@media (max-width: 519px) {
  .store__map { width: 100%; }
}

@media (min-width: 900px) {
  /* Doua coloane egale: intr-una filmul, in cealalta eticheta, titlul si restul.
     Filmul se centreaza pe inaltimea coloanei de text, deci nici coloana video,
     nici cea de text nu ramane suspendata. */
  .store {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(56px, 4.6vw, 80px);
    align-items: start;
  }
  .store__media   { grid-column: 1; grid-row: 1 / -1; align-self: center; margin-top: 0; }
  .store__eyebrow { grid-column: 2; grid-row: 1; }
  .store__title   { grid-column: 2; grid-row: 2; }
  .store__body    { grid-column: 2; grid-row: 3; margin-top: clamp(18px, 1.6vw, 24px); }
  /* Al doilea magazin: continutul in stanga, filmul in dreapta. */
  .store--reverse .store__media { grid-column: 2; }
  .store--reverse .store__eyebrow,
  .store--reverse .store__title,
  .store--reverse .store__body { grid-column: 1; }
}

@media (min-width: 1200px) {
  .store__meta > div { grid-template-columns: 104px minmax(0, 1fr); gap: 6px 16px; }
}

/* ----------------------------------------------------- redarea filmelor --- */
/* Raportul este fixat din CSS, deci spatiul e rezervat inainte de incarcare si
   pagina nu sare. Filmul se vede intreg: object-fit: contain, fara decupare. */
.video-play {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--bg-deep); overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(29, 18, 10, 0.55);
}
.video-play__el {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--bg-deep);
}
.video-play__btn {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: rgba(29, 18, 10, 0.18);
  transition: background-color 220ms var(--ease);
}
.video-play__btn:hover { background: rgba(29, 18, 10, 0.3); }
.video-play__icon {
  display: grid; place-items: center;
  width: clamp(64px, 9vw, 86px); height: clamp(64px, 9vw, 86px);
  border-radius: 50%; background: var(--sunset); color: var(--sunset-ink);
  box-shadow: 0 10px 26px -10px rgba(222, 83, 26, 0.75);
  transition: transform 220ms var(--ease);
}
.video-play__icon svg { width: 44%; height: 44%; margin-left: 6%; }
.video-play__btn:hover .video-play__icon { transform: scale(1.06); }
.video-play__btn:focus-visible { outline: 3px solid var(--gold-on-dark); outline-offset: -4px; }
.video-play[data-playing] .video-play__btn { display: none; }

.video-play__err {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.45;
  background: rgba(29, 18, 10, 0.86); color: var(--cream);
}
.video-play__err[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .video-play__btn:hover .video-play__icon { transform: none; }
}

/* Recenziile au sectiunea lor, dupa containerul #magazin. Stilul cartonaselor
   ramane cel dinainte; aici se seteaza doar introducerea sectiunii. */
.reviews-intro { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.reviews-intro__lead {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(15.5px, 0.143vw + 14.95px, 17px);
  line-height: 1.62; color: var(--muted-text);
}

.card {
  border: 1px solid var(--line-on-dark); border-radius: 2px; padding: clamp(22px, 3vw, 32px);
  background: var(--bg-deep-2);
}
.section--light .card { border-color: var(--line); background: var(--cream); }
.card__title { font-size: 22px; margin-bottom: 6px; }
.info { display: grid; gap: 1px; background: var(--line-on-dark); margin-top: 20px; }
.info > div { background: var(--burgundy-dark); padding: 14px 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.info dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-on-dark); }
.info dd { margin: 0; font-size: 15.5px; }
.hours { display: grid; gap: 8px; margin-top: 4px; }
.hours li { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dotted var(--line-on-dark); padding-bottom: 7px; font-size: 15.5px; }
.hours li span:last-child { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--gold-on-dark); }
.hours li.is-closed span:last-child { color: var(--ivory-dim); }

.map { margin-top: 26px; }
.map__facade {
  width: 100%; min-height: 190px; display: grid; place-content: center; gap: 12px; justify-items: center;
  border: 1px dashed var(--edge-on-dark); background: var(--bg-deep-2); color: var(--cream);
  cursor: pointer; padding: 26px; text-align: center;
}
.map__facade:hover { background: #331E13; }
.map__facade small { color: var(--ivory-dim); font-size: 13px; max-width: 40ch; }
.map iframe { width: 100%; height: 300px; border: 1px solid var(--line-on-dark); display: block; }


/* --- harta si retelele sociale din cardul de Contact (sectiune deschisa) --- */
.map--card { margin-top: 0; margin-bottom: 26px; }
.section--light .map__facade {
  border-color: var(--gold-deep); background: var(--bg-warm); color: var(--ink);
  min-height: 170px;
}
.section--light .map__facade:hover { background: var(--line-soft); }
.section--light .map__facade small { color: var(--muted-text); }
.section--light .map iframe { border-color: var(--line); height: 240px; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.socials a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--gold-deep); border-radius: 2px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.socials svg { width: 17px; height: 17px; fill: var(--gold-deep); flex: none; transition: fill 220ms var(--ease); }
.socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.socials a:hover svg { fill: var(--gold-light); }

/* ------------------------------------------------------------ recenzii --- */
.reviews { display: grid; gap: 16px; }
.review {
  background: var(--bg-deep-2); border: 1px solid var(--line-on-dark);
  border-radius: 2px; padding: 20px 22px;
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.review__stars { color: var(--gold-light); font-size: 14px; letter-spacing: 0.18em; line-height: 1; }
.review__source {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory-dim); border: 1px solid var(--line-on-dark); border-radius: 2px;
  padding: 4px 9px; margin-left: auto;
}
.review__text { margin: 0; color: var(--cream); font-size: 15.5px; line-height: 1.65; }
.review__text p + p { margin-top: 10px; }
.review__author {
  margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light);
}
.review__author span { color: var(--ivory-dim); }

/* ------------------------------------------------------------- contact --- */
/* Sectiunea reprezinta exclusiv magazinul de pe strada Mihai Eminescu. In stanga
   eticheta, titlul, datele si butoanele; in dreapta harta si retelele sociale.
   Titlul este in coloana din stanga, deci partea de sus a celor doua coloane
   porneste de la aceeasi linie. */
.contact {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* Doua randuri fixate din markup, in acelasi h2. Textul semantic ramane
   continuu: "Ne găsești pe Calea Moșilor". Fara titluri duplicate. */
.contact__title {
  font-size: clamp(30px, 4.4vw, 50px);   /* aceeasi scara ca celelalte titluri */
  max-width: 20ch; line-height: 1.15;
}
.contact__title-line { display: block; text-wrap: balance; }

.contact-list {
  margin-top: clamp(22px, 2.6vw, 32px);  /* titlu -> date */
  display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line);
}
.contact-list__row { background: var(--ivory); padding: 18px 0; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
.contact-list__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
/* overflow-wrap tine adresa de e-mail in container si o rupe doar cand chiar
   nu incape; pana atunci se imparte normal, la spatii. */
.contact-list__value { font-size: 17.5px; line-height: 1.6; overflow-wrap: break-word; }
.contact-list__value a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.contact-list__value a:hover { border-bottom-color: var(--gold-text); color: var(--gold-text); }
/* Programul pe trei randuri distincte, la fel pe desktop si pe telefon.
   Grila evita blocurile intr-un element inline. */
.contact-hours { display: grid; row-gap: 2px; }

.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.contact__actions .btn { min-height: 49px; }
/* Butonul de WhatsApp din Contact foloseste stilul .btn existent; primeste doar
   pictograma si culorile marcii pe contur, fara sa introduca un stil nou. */
.btn--whatsapp { gap: 9px; border-color: var(--whatsapp-ring); }
.btn--whatsapp svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn--whatsapp:hover { background: var(--whatsapp-ring); border-color: var(--whatsapp-ring); color: var(--cream); }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--burgundy-dark); color: var(--ivory); padding-block: clamp(48px, 6vw, 76px) 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); }
.footer-grid h2, .footer-grid h3 { font-size: 15px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
/* Sigla din subsol: aceeasi imagine patrata, la o dimensiune echilibrata.
   Discul crem al siglei ramane lizibil pe fundalul inchis al subsolului. */
.footer__logo { display: block; width: 118px; height: 118px; margin-bottom: 16px; }
@media (max-width: 860px) { .footer__logo { width: 96px; height: 96px; } }
.footer__desc { color: var(--ivory-dim); font-size: 15.5px; max-width: 42ch; }
.footer-nav li + li { margin-top: 9px; }
.footer-nav a, .footer-contact a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-nav a:hover, .footer-contact a:hover { border-bottom-color: var(--gold-on-dark); }
.footer-contact li + li { margin-top: 9px; }
.footer-contact { font-size: 15.5px; }
.footer-hours { margin-top: 18px; color: var(--ivory-dim); font-size: 14.5px; }
.footer-bottom {
  margin-top: clamp(34px, 5vw, 54px); padding-top: 22px; border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-dim);
}

/* ------------------------------------------------------------ whatsapp --- */
.wa-fab {
  position: fixed; z-index: 95;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--whatsapp);
  /* Inelul inchis asigura conturul vizibil al controlului (>=3:1 fata de fundal). */
  border: 2px solid var(--whatsapp-ring);
  box-shadow: 0 2px 10px rgba(29, 18, 10, 0.28);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), bottom 260ms var(--ease);
}
.wa-fab svg { width: 28px; height: 28px; fill: var(--white); }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(29, 18, 10, 0.34); }
.wa-fab:focus-visible { outline: 3px solid var(--button-brown); outline-offset: 3px; }
.wa-fab.is-raised { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* Pana la 768 px butonul plutitor nu mai exista: acopera textele in timpul
   derularii. Contactarea prin WhatsApp ramane disponibila din sectiunea Contact
   si din lista de contact a subsolului. */
@media (max-width: 768px) {
  .wa-fab { display: none; }
}
.wa-fab__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 2px; opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.wa-fab:hover .wa-fab__tip, .wa-fab:focus-visible .wa-fab__tip { opacity: 1; }

/* ------------------------------------------------------------ aparitii --- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1000px) {
  /* .store isi are propriul prag, la 900 px, in blocul sectiunii de magazine;
     daca ar aparea si aici ar fi anulat intre 900 si 1000 px. */
  .about, .collections, .contact, .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__list {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Acelasi maro inchis ca banda antetului si ca tab-urile de categorie. */
    background: var(--burgundy-dark); border-bottom: 1px solid var(--line-on-dark);
    padding: 8px var(--gutter) 22px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  /* Inchis implicit pe mobil, inclusiv fara JavaScript; se deschide din buton. */
  .nav__list { display: none; }
  .nav__list[data-open="true"] { display: flex; }
  .nav__list[hidden] { display: none; }
  .nav__list li { border-bottom: 1px solid var(--line-on-dark); }
  .nav__link { display: block; padding: 15px 0; font-size: 17px; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="true"]::before { content: "\2014  "; color: var(--gold); }
  .burger { display: inline-flex; }
  .nav__cta { display: none; }
  .info > div, .contact-list__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  /* Pe ecran ingust butoanele de contact se apasa mai usor pe toata latimea
     si niciunul nu ramane taiat sau imperecheat ciudat pe rand. */
  .contact__actions { flex-direction: column; align-items: stretch; }
  .contact__actions .btn { width: 100%; }
  /* Nicio eticheta monospatiata sub 12 px pe ecran mic. */
  .store__photo figcaption, .shot figcaption,
  .tab__hint, .tab__num, .info dt, .contact-list__label, .socials a,
  .review__source, .review__author,
  .facts dt, .quote footer, .footer-bottom { font-size: 12px; }
  .wa-fab { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .wa-fab.is-raised { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .tab { padding: 17px 4px; }
}

/* Pe mobil, sectiunile ivoire alaturate aduna paddingul vertical al ambelor
   sectiuni. Pastram 48px intre continuturile indicate, fara sa schimbam
   spatierea celorlalte sectiuni sau aspectul pe desktop. */
@media (max-width: 768px) {
  #poveste { padding-bottom: 24px; }
  /* Grila ofera deja 26px intre poveste si concluzie; eliminam marja suplimentara. */
  .story__close { margin-top: 0; }
  #magazin > .section:first-child { padding-top: 24px; }
  #recenzii { padding-bottom: 24px; }
  #contact { padding-top: 24px; }
}

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

/* ==========================================================================
   Paginile discrete „Datele firmei" si „Confidentialitate"
   (date-firma.html, confidentialitate.html).
   Bloc adaugat la sfarsit, ca sa nu atinga nicio regula a paginii principale.
   Foloseste numai variabilele existente din :root, fara culori noi.
   ========================================================================== */

/* Legatura de intoarcere din antet, pe fundalul inchis al acestuia. */
.link-arrow--pe-inchis { color: var(--gold-on-dark); }

/* Coloana de text: latime de lectura, nu toata pagina. */
.legal { max-width: 74ch; }
.legal h2 {
  margin-top: clamp(32px, 4vw, 46px); margin-bottom: 12px;
  font-size: clamp(22px, 2.2vw, 27px); text-wrap: balance;
}
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.legal p + p { margin-top: 14px; }
/* Resetul global scoate marcatorii de la toate listele (ul { list-style: none }),
   fiindca listele din navigatie nu ii vor. Aici insa lista chiar este o lista de
   citit, asa ca marcatorii se pun la loc, in portocaliul de accent. */
.legal ul { margin: 14px 0 0; padding-left: 22px; list-style: disc; }
.legal li::marker { color: var(--gold-deep); }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--gold-text); }
.legal .lead { margin-top: 18px; }

/* Caseta care spune deschis in ce stadiu este pagina. */
.legal-nota {
  margin-top: clamp(26px, 3.4vw, 36px);
  padding: 18px clamp(18px, 2vw, 24px);
  background: var(--cream); border-left: 3px solid var(--gold-deep); border-radius: 2px;
}
.legal-nota p { margin: 0; }

/* Lista de date: eticheta si valoare, pe doua coloane pe ecrane late. */
.legal-dl {
  display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: 14px clamp(20px, 3vw, 40px);
  margin-top: clamp(26px, 3.4vw, 36px);
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal-dl dt {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-text);
}
.legal-dl dd { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.legal-dl a { color: var(--gold-text); }
@media (max-width: 640px) {
  .legal-dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .legal-dl dd + dt { margin-top: 16px; }
}

/* Marcaj vizibil pentru ce nu este inca confirmat: contur intrerupt, ca sa nu
   poata fi confundat cu o informatie reala. */
.legal-marcaj {
  display: inline-block; padding: 3px 9px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-text); border: 1px dashed var(--gold-deep); border-radius: 2px;
}
.legal-lipsa { margin-top: 14px; color: var(--muted-text); }
.legal-lipsa .legal-marcaj { margin-right: 8px; }
.legal-cod { font-family: var(--font-mono); font-size: 0.92em; }

/* Subsol redus: paginile acestea nu repeta datele magazinului. */
.site-footer--simplu { padding-block: clamp(34px, 4vw, 48px) 30px; }
.site-footer--simplu .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* Legaturile discrete din subsol, pe ambele pagini si pe pagina principala. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { color: var(--ivory-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-legal a:hover { color: var(--ivory); border-bottom-color: var(--gold-on-dark); }
.footer-legal a[aria-current="page"] { color: var(--ivory); }

/* ------------------------------------------------------- pictograma SAL ---
   Ordinul ANPC nr. 449/2022, modificat prin OPANPC nr. 270/2026, cere un
   spatiu de 250 (L) x 50 (H) px pe prima pagina, cu link catre platforma SAL.
   Fisierul oficial de pe anpc.ro are insa 201x50 px (raport 4,02:1, la fel ca
   varianta vectoriala). Intins la 250 px ar fi deformat, deci legatura ocupa
   exact 250x50 px, iar emblema sta centrata in ea, la dimensiunea ei reala. */
.footer-sal { margin-top: clamp(28px, 4vw, 40px); }
.sal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 250px; height: 50px; border-radius: 3px;
}
.sal img { display: block; width: 201px; height: 50px; }
.sal:focus-visible { outline: 2px solid var(--gold-on-dark); outline-offset: 3px; }

/* --------------------------------------------------- blocul juridic din subsol ---
   Sta in prima coloana, imediat sub descrierea magazinului. Randuri scurte,
   aliniate la stanga, in tipografia Luly Mode: aceeasi familie mono ca restul
   subsolului, fara chenar si fara culoare noua. Telefonul si e-mailul nu se
   repeta aici, sunt in coloana „Contact". Din sediul social apar doar orasul
   si sectorul; adresa completa este pe pagina „Datele firmei". */
.footer-firma { margin-top: clamp(18px, 2.2vw, 24px); max-width: 46ch; text-align: left; }
.footer-firma__nume {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.footer-firma__rand { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--ivory-dim); }
.footer-firma__nume + .footer-firma__rand { margin-top: 9px; }
/* Emblema SAL urmeaza imediat blocului juridic: fara gol pe verticala. */
.footer-firma + .footer-sal { margin-top: clamp(16px, 2vw, 20px); }

/* ------------------------------------------ zone de atingere pe ecrane mici ---
   Linkurile din subsol aveau 21-23 px inaltime, iar numarul de telefon din
   blocul magazinului 22 px: sub pragul confortabil de atingere pe telefon.
   Zona clicabila creste la ~45 px printr-un strat invizibil asezat peste link,
   nu prin padding: literele, culorile si sublinierea de langa text raman exact
   unde erau. La lista de navigare distanta dintre randuri creste odata cu zona,
   ca zonele vecine sa se atinga, nu sa se suprapuna. */
@media (max-width: 860px) {
  .footer-nav a,
  .footer-legal a,
  .store__meta a[href^="tel:"] { position: relative; }

  .footer-nav a::after,
  .footer-legal a::after,
  .store__meta a[href^="tel:"]::after {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px;
  }

  /* 23 px de text + 24 px distanta = pas de 47 px, exact cat zona marita. */
  .footer-nav li + li { margin-top: 24px; }

  /* Randul cu legaturile juridice primeste loc pentru zona marita. */
  .footer-legal { margin-block: 12px; }
}

/* Întâmpinare Luly Mode: pălării miniaturale, ca petalele. */
.luly-splash { display: none; }
.luly-splash-active .luly-splash {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000;
  background: #FDF4E8; color: #693445; overflow: hidden;
  animation: luly-splash-exit 3.2s ease forwards;
}
.luly-splash__rain { position: absolute; inset: 0; pointer-events: none; }
.luly-splash__hat {
  position: absolute; top: -100px; left: var(--x); width: var(--size);
  color: var(--hat); opacity: .75;
  animation: luly-hat-fall var(--duration) linear var(--delay) infinite;
}
.luly-splash__hat svg { display: block; width: 100%; height: auto; }
.luly-splash__brand { position: relative; text-align: center; padding: 24px; }
.luly-splash__brand img { width: 144px; height: 144px; object-fit: contain; border-radius: 50%; }
.luly-splash__brand p { margin: 20px 0; font-size: 15px; letter-spacing: .08em; }
.luly-splash__line { display: block; width: 64px; height: 1px; margin: auto; background: #B99478; }
.luly-splash__skip {
  position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); padding: 12px 20px; border: 1px solid #B99478;
  border-radius: 999px; background: #FDF4E8; color: #693445; font: inherit;
  white-space: nowrap; cursor: pointer;
}
.luly-splash__skip:focus-visible { outline: 2px solid #693445; outline-offset: 4px; }
@keyframes luly-hat-fall {
  0% { transform: translate3d(0, -20px, 0) rotate(-25deg); opacity: 0; }
  12% { opacity: .75; }
  50% { transform: translate3d(calc(var(--drift) * -.4), 55vh, 0) rotate(calc(var(--turn) * .4)); }
  90% { opacity: .65; }
  100% { transform: translate3d(var(--drift), calc(100vh + 140px), 0) rotate(var(--turn)); opacity: 0; }
}
@keyframes luly-splash-exit {
  0%, 82% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 600px) {
  .luly-splash__hat { width: calc(var(--size) * .8); }
  .luly-splash__brand img { width: 128px; height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .luly-splash-active:not(.luly-splash-preview) .luly-splash { display: none; animation: none; }
  .luly-splash__hat { animation: none; transform: none; top: 15%; }
}

/* Accente calde pentru întâmpinare. */
.luly-splash-active .luly-splash {
  background: radial-gradient(ellipse at 20% 25%, #F3D5C180, transparent 55%),
              radial-gradient(ellipse at 85% 70%, #EEC4CC70, transparent 55%), #FDF4E8;
}
.luly-splash__brand { max-width: 680px; animation: luly-brand-in .7s ease both; }
.luly-splash__brand img {
  width: 176px; height: 176px;
  box-shadow: 0 12px 44px #A9684920;
}
.luly-splash__brand .luly-splash__welcome {
  font-family: Georgia, 'Times New Roman', serif; font-size: clamp(26px, 4vw, 44px);
  line-height: 1.2; letter-spacing: -.025em; color: #693445; margin: 24px 0 12px;
}
.luly-splash__brand p:not(.luly-splash__welcome) {
  font-size: clamp(15px, 2vw, 18px); letter-spacing: .015em; line-height: 1.6;
  color: #795E50; margin: 0 0 20px;
}
.luly-splash__skip {
  color: #FFF8F0; background: #693445; border-color: #693445;
  box-shadow: 0 6px 20px #69344520; transition: background .2s;
}
.luly-splash__skip:hover { background: #813F56; }
@keyframes luly-brand-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .luly-splash__brand { padding: 20px; }
  .luly-splash__brand img { width: 144px; height: 144px; }
}
@media (max-height: 540px) {
  .luly-splash__brand img { width: 90px; height: 90px; }
  .luly-splash__brand .luly-splash__welcome { margin-top: 12px; font-size: 26px; }
  .luly-splash__skip { bottom: 12px; padding: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .luly-splash__brand { animation: none; }
}

/* Logo centrat și petale de trandafir printre pălărioare. */
.luly-splash__brand img { margin-inline: auto; }
.luly-splash__petal {
  position: absolute; top: -100px; left: var(--x); width: var(--size);
  color: var(--petal); opacity: .9;
  animation: luly-hat-fall var(--duration) linear var(--delay) infinite;
}
.luly-splash__petal svg { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .luly-splash__petal { width: calc(var(--size) * .85); }
}
@media (prefers-reduced-motion: reduce) {
  .luly-splash__petal { animation: none; top: 75%; transform: none; }
}

.luly-splash__hat img { display: block; width: 100%; height: auto; }

/* Cădere lentă, petale late și legănare delicată. */
.luly-splash__petal { animation-name: luly-petal-fall; }
@keyframes luly-petal-fall {
  0% { transform: translate3d(0, -20px, 0) rotate(-20deg) scaleX(.85); opacity: 0; }
  12% { opacity: .8; }
  30% { transform: translate3d(var(--drift), 32vh, 0) rotate(25deg) scaleX(1); }
  55% { transform: translate3d(calc(var(--drift) * -.7), 60vh, 0) rotate(-30deg) scaleX(.7); }
  78% { transform: translate3d(calc(var(--drift) * .8), 82vh, 0) rotate(35deg) scaleX(1); opacity: .8; }
  100% { transform: translate3d(0, calc(100vh + 140px), 0) rotate(-15deg) scaleX(.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .luly-splash__petal { animation: none; }
}

/* Reper vizual pentru magazinul din Eminescu. */
.storefront-guide { margin: 0 0 28px; }
.storefront-guide img { display: block; width: 100%; height: auto; border-radius: 12px; }
.storefront-guide figcaption { margin-top: 12px; color: var(--muted-text); font-size: 15.5px; line-height: 1.6; }