:root {
  --cream: #FBF7F0;
  --cream-deep: #F3ECDD;
  --ink: #1C1A17;
  --ink-soft: #4A453D;
  --ink-mute: #8B8378;
  --line: #E2D9C6;
  --line-strong: #CDBFA3;
  --orange: #F7931A;
  --orange-deep: #C96E0A;
  --orange-wash: #FDF2E3;
  --white: #FFFFFF;
  --green: #2D6A4F;
  --green-wash: #EBF3EE;

  --f-title: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: 1rem;
  --radius: 10px;
  --max: 1180px;
}

@media (min-width: 700px) { :root { --gut: 1.5rem; } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height: auto e obligatoriu: atributele width/height din HTML (puse pentru
   layout stabil la incarcare) ar fixa altfel inaltimea si ar anula aspect-ratio. */
img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* ---------- antet ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--gut);
  display: grid;
  gap: .85rem;
}

/* Marca se scrie cu litera mica, ca in macheta de brand. Transformarea o face
   CSS-ul, nu textul din HTML: in document ramane "Tejghea", cum se cuvine unui
   nume propriu, pentru cititoarele de ecran si pentru titlul paginii. */
.site-logo {
  font-family: var(--f-title);
  font-weight: 800;
  font-size: 1.65rem;
  text-transform: lowercase;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--ink);
  justify-self: start;
}
.site-logo::after { content: "."; color: var(--orange); }

.site-nav { display: flex; gap: 1.25rem; font-size: .9rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--orange-deep); }

.site-search { display: flex; gap: .5rem; }
.site-search label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.site-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .95rem;
  padding: .6rem .8rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.site-search input::placeholder { color: var(--ink-mute); }
.site-search input:focus { border-color: var(--orange); outline: none; }
.site-search button {
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1.1rem;
  background: var(--orange);
  color: var(--ink);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  cursor: pointer;
}
.site-search button:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--white); }

@media (min-width: 800px) {
  .site-header {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1.1rem 2rem;
  }
  /* Latime explicita, nu doar max-width: justify-self: end scoate intinderea
     implicita a elementului de grid, deci acesta se strange la continutul lui -
     adica la latimea implicita a unui <input>, vreo 20 de caractere - iar
     max-width nu face decat sa plafoneze. Asa se taia textul din placeholder. */
  .site-search { width: 26rem; max-width: 100%; justify-self: end; }
}

/* ---------- pagina ---------- */

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--gut) 5rem;
}

.page-title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
.page-intro { color: var(--ink-soft); margin: .6rem 0 0; font-size: .95rem; }

.page > section { margin-top: 3rem; }
.shop-sect { margin-top: 2.25rem; }
.page > section > h2, .shop section > h2 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-mute);
  margin: 0 0 .85rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
}

.breadcrumb { font-size: .85rem; color: var(--ink-mute); margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-deep); }

.empty {
  color: var(--ink-mute);
  font-size: .95rem;
  padding: 1.25rem;
  background: var(--cream-deep);
  border-radius: var(--radius);
  margin: 0;
}

/* ---------- placuta de stand ---------- */


/* ---------- starea de program ---------- */

.stare {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .88rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green);
}
.stare.este-inchis { background: var(--cream-deep); color: var(--ink-soft); }
.stare::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.stare-mica { font-size: .76rem; padding: .18rem .55rem; gap: .35rem; }
.stare-mica::before { width: 6px; height: 6px; }

/* ---------- norul de cuvinte ---------- */
/* Cuvintele au inlocuit arborele de categorii in septembrie 2026. Marimea vine
   din cate magazine poarta cuvantul, ordinea e alfabetica: un nor sortat dupa
   numar devine un clasament, iar oamenii cauta in el un cuvant anume. */

.cloud-section { margin-bottom: 2.6rem; }
.cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  line-height: 1.9;
}
.cloud-word {
  display: inline-block;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.cloud-word:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* Cinci trepte. Saltul de la o treapta la alta e destul de mare cat sa se vada
   din prima privire care sunt lucrurile de care complexul e plin. */
.cloud-w1 { font-size: .82rem; color: var(--ink-mute); }
.cloud-w2 { font-size: .95rem; }
.cloud-w3 { font-size: 1.15rem; }
.cloud-w4 { font-size: 1.45rem; font-weight: 500; color: var(--ink); }
.cloud-w5 { font-size: 1.9rem; font-weight: 600; color: var(--ink); }

.cloud-near { margin-top: 2.4rem; }

/* ---------- lista alfabetica de cuvinte ---------- */

.word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.word-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
}
.word-item:hover { border-color: var(--ink-mute); }
.word-item a { text-decoration: none; font-weight: 500; }
.word-count { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-mute); }

.page-back { margin-top: 1.2rem; font-size: .88rem; }

/* Cuvintele din fisa magazinului: aceleasi pastile, dar mai mici. */
.fisa-cuvinte { display: flex; flex-wrap: wrap; gap: .35rem; }
.fisa-cuvinte a {
  padding: .2rem .55rem;
  background: var(--cream-deep);
  border-radius: 999px;
  font-size: .8rem;
  text-decoration: none;
}
.fisa-cuvinte a:hover { background: var(--line); }

/* ---------- grila de magazine ---------- */

.shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 620px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 940px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

.shop-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.shop-card:hover { border-color: var(--ink-mute); transform: translateY(-2px); }

.shop-card-link { text-decoration: none; display: flex; flex-direction: column; }
.shop-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cream-deep);
}
.shop-card-thumb.is-empty {
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(139,131,120,.11) 9px, rgba(139,131,120,.11) 10px);
}
.shop-card-corp { padding: .75rem .85rem 1rem; display: grid; gap: .4rem; }
.shop-card-nume {
  font-family: var(--f-title);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.06rem;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
/* Headline-ul: doua randuri cel mult, ca toate cartonasele din grila sa ramana
   de aceeasi inaltime chiar cand o propozitie iese mai lunga. */
.shop-card-headline {
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card-loc { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-mute); }
.shop-card-categorie { font-size: .78rem; color: var(--ink-mute); text-decoration: none; }
.shop-card-categorie:hover { color: var(--orange-deep); }

/* ---------- pagina de magazin ---------- */

/* Pe telefon, o singura coloana in ordinea din HTML: partea de sus, fisa,
   restul. Pe ecran lat, fisa trece in coloana din dreapta si ramane lipita,
   iar cele doua parti de continut se leaga la loc in coloana din stanga. */
.shop { display: block; }
@media (min-width: 900px) {
  .shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: 2.5rem;
    align-items: start;
  }
  .shop-sus { grid-column: 1; grid-row: 1; min-width: 0; }
  .shop-jos { grid-column: 1; grid-row: 2; min-width: 0; }
  .fisa { grid-column: 2; grid-row: 1 / span 2; }
}

.shop-hero { margin: 0 0 1.25rem; }
.shop-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
@media (min-width: 620px) { .shop-hero img { aspect-ratio: 16 / 9; } }

/* Logoul si numele stau pe acelasi rand. Marimea numelui e declarata pe
   containerul .shop-titlu, iar logoul si monograma se masoara in em, deci se
   potrivesc singure la inaltimea literelor, pe orice latime de ecran. */
.shop-titlu {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: clamp(1.9rem, 1.25rem + 3vw, 3rem);
  margin-bottom: .1rem;
}
.shop-titlu .page-title {
  font-size: 1em;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-logo {
  flex: none;
  height: 1em;
  width: auto;
  max-width: 3.2em;
  object-fit: contain;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* Tine locul logoului cand nu exista unul folosibil. Acelasi limbaj cu
   placuta de stand: litera mono, pe fond inchis. */
/* Cutia monogramei e 1.7em din propriul font-size de .62em, adica aproximativ
   1.05em din marimea numelui de alaturi. Asa litera si numele au aceeasi
   inaltime optica, fara sa fixam pixeli. */
.monograma {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  font-size: .62em;
  border-radius: 7px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-mono);
  font-weight: 700;
  line-height: 1;
}
.shop-ce-face { color: var(--ink-soft); font-size: 1rem; margin: .4rem 0 .9rem; max-width: 52ch; }
.shop-stari { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }

.shop-category a {
  display: inline-block;
  font-size: .8rem;
  font-weight: 500;
  padding: .25rem .7rem;
  background: var(--cream-deep);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
}
.shop-category a:hover { color: var(--orange-deep); }

.shop-description p { max-width: 62ch; color: var(--ink-soft); margin: 0 0 1rem; }

/* Punctele forte: afirmatii verificabile, scanate dintr-o privire. */
.motive { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .motive { grid-template-columns: 1fr 1fr; gap: .6rem 1.75rem; } }
.motive li { display: flex; gap: .6rem; font-size: .95rem; line-height: 1.45; }
.motive .bif { color: var(--green); font-weight: 700; flex: none; }

/* Butonul de WhatsApp, pe toate ecranele: merge si din aplicatia de desktop,
   si din web. Sunatul sta separat, in bara de jos, doar pe telefon. */
.actiune-lata { display: grid; margin: 2rem 0 0; }
.buton-mare {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--orange-deep);
  background: var(--orange);
  color: var(--ink);
}
.buton-wa {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------- galerie si filme ---------- */

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
@media (min-width: 620px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: .65rem; } }
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream-deep);
}
.gallery-item a { display: block; }
.gallery-item a:hover img { opacity: .92; }

.video-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) { .video-list { grid-template-columns: repeat(2, 1fr); } }
.video-item video { width: 100%; border-radius: var(--radius); background: var(--ink); }

/* ---------- vizualizatorul de poze ---------- */
/* Fundal inchis indiferent de tema: o fotografie se vede pe intuneric. */

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: rgba(20, 18, 16, .96);
}
.lb-bara {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  padding-top: calc(.8rem + env(safe-area-inset-top));
}
.lb-nr { color: var(--cream); font-size: .9rem; opacity: .8; }
.lb-inchide {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #1C1A17;
  background: #FBF7F0;
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.3rem;
  cursor: pointer;
}
/* Navigarea sta jos, in butoane late cu text, nu in sageti mici pe margini.
   Motivul e practic: pe telefon, o tinta rotunda lipita de marginea ecranului
   cade fix in zona in care sistemul asteapta gestul de "inapoi", iar o atingere
   care aluneca un pixel devine altceva decat un click. Butoanele de jos sunt
   departe de ambele margini, se ating cu degetul mare si se citesc. */
.lb-scena {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
}
.lb-poza {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}
.lb-jos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.lb-jos[hidden] { display: none; }
.lb-nav {
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  min-height: 54px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(251, 247, 240, .14);
  box-shadow: inset 0 0 0 1px rgba(251, 247, 240, .32);
  color: #FBF7F0;
  cursor: pointer;
}
.lb-nav:hover { background: rgba(251, 247, 240, .26); }

a.poza-mare { display: block; cursor: zoom-in; }

/* ---------- program ---------- */

.orar { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.orar li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .9rem; font-size: .92rem; border-bottom: 1px solid var(--line); }
.orar li:last-child { border-bottom: 0; }
.orar li.azi { background: var(--orange-wash); font-weight: 700; }
.orar .zi { color: var(--ink-soft); }
.orar li.azi .zi { color: var(--ink); }
.orar .inchis-azi { color: var(--ink-mute); }

.hours { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0; line-height: 1.8; }

/* ---------- unde il gasesti ---------- */

/* Pe telefon fisa vine imediat dupa butonul de WhatsApp, in curgerea paginii,
   si pana acum se lipea de el - aside nu are marja implicita. Aceeasi distanta
   ca intre sectiunile de mai jos, ca ritmul paginii sa fie unul singur.
   Pe ecran lat fisa trece in coloana din dreapta, unde marja n-are ce cauta,
   si regula de mai jos o anuleaza. */
.fisa { margin-top: 2.25rem; }

@media (min-width: 900px) {
  .fisa { position: sticky; top: 1.25rem; margin: 0; }
}
.fisa h2 {
  font-family: var(--f-title);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.fisa dl { margin: 0; display: grid; gap: 1.05rem; }

/* Un rand: pastila cu pictograma, apoi eticheta peste valoare. Alinierea la
   inceput tine pictograma langa eticheta si cand valoarea trece pe doua randuri. */
.fisa-rand { display: flex; align-items: flex-start; gap: .8rem; }
.fisa-text { min-width: 0; }
.fisa dt { color: var(--ink-mute); font-size: .74rem; letter-spacing: .01em; margin-bottom: .1rem; }
.fisa dd { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }

.fisa-ic {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .7rem;
  display: grid;
  place-items: center;
}
.fisa-ic svg { width: 1.15rem; height: 1.15rem; display: block; }
.fisa-ic.is-loc { background: var(--orange-wash); color: var(--orange-deep); }
.fisa-ic.is-neutru { background: var(--cream-deep); color: var(--ink-soft); }

/* Legaturile din fisa arata ca valori, nu ca linkuri albastre: se disting prin
   linia de dedesubt, care se ingroasa la atingere. */
.fisa dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .18em; }
.fisa dd a:hover { text-decoration-color: var(--orange); }

/* "Cum ajung": sta sub adresa, nu langa ea, ca sa se citeasca intai unde e
   magazinul si abia apoi sa se ofere drumul. Are chenar, nu fundal plin: e o
   actiune, dar nu concureaza cu butonul de sunat. */
.fisa-directii {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .3rem;
  margin-top: .45rem;
  padding: .25rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.fisa-directii::before { content: "→"; font-weight: 700; }
.fisa-directii:hover { border-color: var(--orange); color: var(--orange-deep); }
.fisa dd a.fisa-directii { text-decoration: none; }

/* Butonul "Arata": are greutatea unei valori, nu a unui buton mare - sta pe
   randul unde altfel ar fi scris numarul, deci nu trebuie sa tipe.
   Nu mai e legat de .fisa: acelasi buton apare si pe pagina complexului, la
   contact si la inchiriere. */
.arata {
  font: inherit;
  font-weight: 700;
  color: var(--orange-deep);
  background: var(--orange-wash);
  border: 0;
  border-radius: .5rem;
  padding: .18rem .6rem;
  margin: .1rem 0 0;
  cursor: pointer;
}
.arata:hover { background: var(--orange); color: var(--ink); }
.arata[disabled] { opacity: .6; cursor: default; }
.fara-js { color: var(--ink-mute); font-weight: 400; font-size: .85rem; }


/* Programul intra in fisa fara chenarul si fundalul pe care le are cand sta
   singur intr-o sectiune - cartonasul e deja chenarul. */
.fisa .orar { border: 0; background: none; border-radius: 0; margin-top: .1rem; }
.fisa .orar li { padding: .16rem 0; border-bottom: 0; font-size: .86rem; gap: .7rem; font-weight: 500; }
.fisa .orar li.azi { background: none; font-weight: 700; }
.fisa .orar .zi { color: var(--ink-mute); }
.fisa .orar li.azi .zi { color: var(--ink); }

/* ---------- bara fixa de contact, pe telefon ---------- */

.bara-jos {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .bara-jos { display: none; } }
.bara-jos a {
  font-weight: 700;
  font-size: 1.05rem;
  padding: .95rem .6rem;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--orange-deep);
}
.jos-suna {
  background: var(--orange);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Randul de complex din fisa magazinului: sigla mica, apoi numele, tot
   ansamblul fiind legatura catre pagina complexului. Sigla e decorativa (alt
   gol), fiindca numele scris alaturi spune acelasi lucru cititorului de ecran.
   Sublinierea nu se seteaza aici: regula casei pentru legaturile din fisa
   (.fisa dd a) e mai specifica si oricum castiga, deci linkul arata ca toate
   celelalte valori din fisa. */
.fisa-complex { display: inline-flex; align-items: center; gap: .5rem; }
.fisa-complex-logo {
  display: block;
  width: auto;
  height: 22px;
  flex: 0 0 auto;
}

/* ---------- pagina complexului ---------- */
/* Sectiunile de prezentare de pe /egros, care au preluat continutul vechiului
   site egros.ro. Titlurile de sectiune folosesc regula generala .page > section
   > h2; aici sunt doar blocurile proprii: coperta, meniul de ancore, cifrele,
   orarul si listele de date. */

/* Sigla complexului e chiar h1-ul paginii, deci ii anulam marimea si greutatea
   de titlu. Fundalul i-a fost scos la import, deci sta direct pe crem. */
.cx-logo { margin: 0 0 .7rem; font-size: 0; line-height: 0; }
.cx-logo img {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
}
@media (min-width: 700px) { .cx-logo img { height: 88px; } }

.cx-coperta { margin: 1.4rem 0 0; }
.cx-coperta img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Meniul de salt. Pe telefon se deruleaza pe orizontala, ca sa nu manance un
   ecran intreg: cine vrea programul il gaseste fara sa treaca prin tot. */
.cx-sari {
  margin-top: 1.4rem;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.cx-sari::-webkit-scrollbar { display: none; }
.cx-sari a {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--white);
}
.cx-sari a:hover { border-color: var(--orange); color: var(--ink); }

.cx-sect p { max-width: 68ch; color: var(--ink-soft); }
.cx-sect h3 {
  font-family: var(--f-title);
  font-size: 1rem;
  margin: 1.6rem 0 .3rem;
  color: var(--ink);
}
.cx-sub { color: var(--ink-mute); font-size: .9rem; margin: -.4rem 0 1rem; }

.cx-orar { border-collapse: collapse; margin: 0 0 1.4rem; }
.cx-orar th, .cx-orar td {
  text-align: left;
  padding: .35rem 1.2rem .35rem 0;
  font-weight: 500;
  font-size: .95rem;
}
.cx-orar th { color: var(--ink-soft); font-weight: 600; }

.cx-date { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) {
  .cx-date { grid-template-columns: 9rem 1fr; column-gap: 1rem; }
}
.cx-date dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-mute);
  padding-top: .6rem;
}
.cx-date dd {
  margin: 0;
  padding: .1rem 0 .6rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
@media (min-width: 620px) { .cx-date dt { border-bottom: 1px solid var(--line); padding-bottom: .6rem; } }

.cx-directii {
  display: inline-block;
  margin-left: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--orange-deep);
}

/* Galeria complexului: benzi late, nu patrate. Pe telefon una sub alta, pe
   ecran mare doua pe rand. */
/* Pe telefon galeria e o banda pe care o tragi cu degetul. Zece benzi late una
   sub alta faceau singure o treime din drumul pana la magazine, iar cine voia
   sa vada pozele le vede la fel de bine glisand. Pe ecran lat e loc, deci
   ramane grila cu doua coloane. */
.cx-galerie {
  list-style: none;
  margin: 0;
  padding: 0 0 .4rem;
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.cx-galerie > li {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 760px) {
  .cx-galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    overflow: visible;
  }
  .cx-galerie > li { flex: none; }
}
.cx-galerie a { display: block; }
.cx-galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* "Mai multe despre complex": textul ramane in pagina, dar nu in drum. */
.cx-mai-mult { margin-top: .9rem; }
.cx-mai-mult > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--orange-deep);
  list-style: none;
}
.cx-mai-mult > summary::-webkit-details-marker { display: none; }
.cx-mai-mult > summary::after { content: " ↓"; }
.cx-mai-mult[open] > summary::after { content: " ↑"; }
.cx-mai-mult > summary:hover { text-decoration: underline; }

.cx-acte { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.cx-acte li { margin-bottom: .4rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .shop-card:hover { transform: none; }
}