/* Tema „Vitrină”: se pune peste tema de bază și schimbă doar aspectul.
   Luminoasă: sigla la mijloc cu meniul dedesubt, texte centrate sub poze, linii fine, subsol deschis. */
:root {
  --text: #1c1b19;
  --text-2: #4a4843;
  --gri: #7a776f;
  --linie: #e8e5df;
  --fundal: #f5f3ef;
  --raza: 4px;
  --raza-mare: 4px;
  --umbra: 0 1px 2px rgba(28, 27, 25, .06);
}
body { color: var(--text); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; }
.titlu-pagina { font-size: 30px; font-weight: 600; }

/* Butoane: negre, culoarea principală doar la coș */
.buton { font-weight: 600; letter-spacing: .02em; }
.buton--gol { border-color: var(--text); }

/* Prima pagină: avantajele pe un rând, fără casete; titlurile centrate */
.banner-principal img, .bannere a { border-radius: var(--raza); }
.avantaje { gap: 0; margin-top: 40px; padding: 8px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.avantaje div { background: none; border-radius: 0; justify-content: center; text-align: left; padding: 18px 16px; }
.avantaje svg { color: var(--text); }
.vitrina { margin-top: 64px; }
.vitrina__cap { flex-direction: column; gap: 8px; margin-bottom: 28px; text-align: center; }
.vitrina__cap h2 { font-size: 28px; font-weight: 600; }
.vitrina__cap a { border: 0; padding: 0; font-size: 13px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 4px; color: var(--text-2); }

/* Cardul: textul centrat sub poză, marca deasupra numelui */
.grila { gap: 40px 24px; }
/* pozele Joma au fondul lor (gri sau alb); stau pe toată caseta, fără ramă, ca să nu se vadă un pătrat în pătrat */
.card__poza { border-radius: var(--raza); background: #f4f4f4; }
.card__poza img, .galerie__mare img, .galerie__mici img, .linie__poza img { padding: 0; mix-blend-mode: normal; }
.galerie__mare, .galerie__mici button, .linie__poza { background: #f4f4f4; }
.card__text { align-items: center; text-align: center; gap: 3px; padding-top: 14px; }
.card__brand { font-size: 11px; letter-spacing: .14em; }
.card__nume { font-size: 14px; font-weight: 400; min-height: 2.8em; }
.card__marimi { justify-content: center; }
.card__marimi span { background: none; padding: 0 3px; color: var(--gri); }
.pret { justify-content: center; }
.pret__nou { font-weight: 600; font-size: 15.5px; }
.eticheta-red { border-radius: 2px; font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.eticheta-epuizat { border-radius: 2px; box-shadow: none; border: 1px solid var(--linie); }

/* Lista și filtrele */
.filtru summary { font-weight: 600; }
.filtru__cat a.activ { background: var(--fundal); color: var(--text); }
.paginare .activ { background: none; color: var(--text); border-color: var(--text); }
.text-categorie { background: none; border-top: 1px solid var(--linie); border-radius: 0; padding: 32px 0 0; text-align: left; }

/* Pagina produsului */
.produs__nume { font-weight: 600; font-size: 28px; }
.detalii { background: none; border-top: 1px solid var(--linie); border-radius: 0; padding: 40px 0 0; }
.detalii .tabel-detalii { background: var(--fundal); }
.ajutor { background: none; border: 1px solid var(--linie); }

/* Coș și comandă */
.sumar { background: #fff; border: 1px solid var(--linie); }
.pas h2 span { background: none; color: var(--text); border: 1px solid var(--text); }
.contact__bloc { background: none; border: 1px solid var(--linie); }

/* Telefonul: antetul pe un rând, ca la tema de bază */
@media (max-width: 900px) {
  .titlu-pagina { font-size: 23px; }
  .avantaje { padding: 0; }
  .avantaje div { justify-content: flex-start; padding: 14px 6px; }
  .vitrina { margin-top: 44px; }
  .vitrina__cap h2 { font-size: 22px; }
  .grila, .vitrina .grila, .pagina-produs .vitrina .grila { gap: 28px 12px; }
  .card__nume { font-size: 13px; }
  .produs__nume { font-size: 22px; }
  .detalii { margin-left: 0; margin-right: 0; padding: 28px 0 0; }
}

/* Prima pagină „Vitrină” */
.vitrina-mari { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.vitrina-mari__el { display: block; }
.vitrina-mari__el img { width: 100%; border-radius: var(--raza); }
.vitrina-mari__text { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 2px 0; font-size: 17px; font-weight: 600; }
.vitrina-mari__link { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 4px; color: var(--text-2); }
.vitrina-mari__el:hover .vitrina-mari__link { color: var(--accent); }
.vitrina-mici { margin-top: 64px; padding: 48px 0 40px; background: var(--fundal); }
.vitrina-mici__titlu { font-size: 28px; text-align: center; margin-bottom: 28px; }
/* opt bannere mici: patru pe rând pe desktop, pe telefon un rând care se derulează în lateral */
.vitrina-mici__rand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; max-width: var(--latime); margin: 0 auto; padding: 0 var(--margine); }
.vitrina-mici__el { display: flex; flex-direction: column; gap: 10px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vitrina-mici__el img { width: 100%; border-radius: var(--raza); }
.vitrina-mici__el:hover { color: var(--accent); }
.tema-vitrina .avantaje { margin-top: 56px; }
@media (max-width: 900px) {
  .vitrina-mari { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 16px; }
  .vitrina-mari__text { font-size: 15px; padding-top: 10px; }
  .vitrina-mici { margin-top: 44px; padding: 32px 0 28px; }
  .vitrina-mici__titlu { font-size: 22px; margin-bottom: 18px; }
  .vitrina-mici__rand { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vitrina-mici__rand::-webkit-scrollbar { display: none; }
  .vitrina-mici__el { flex: 0 0 42%; scroll-snap-align: start; font-size: 12px; }
  .tema-vitrina .avantaje { margin-top: 36px; }
}

/* Antetul „Vitrină”: alb, sigla la mijloc, acțiunile scrise cu litere mici, meniul centrat dedesubt */
:root { --antet: 129px; }
.v-bara-sus { background: var(--fundal); color: var(--text-2); text-align: center; font-size: 12px; letter-spacing: .04em; padding: 8px 16px; border-bottom: 1px solid var(--linie); }
.v-antet { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--linie); }
.v-antet__rand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.v-antet__stanga, .v-antet__dreapta { display: flex; align-items: center; gap: 22px; }
.v-antet__dreapta { justify-content: flex-end; }
.v-antet__text { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0; cursor: pointer; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.v-antet__text:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.v-antet__meniu { display: none; }
.v-antet__sigla img { width: 178px; }
.v-numar::before { content: "("; }
.v-numar::after { content: ")"; }
.v-meniu { border-top: 1px solid var(--linie); }
.v-meniu__lista { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.v-meniu__link { display: flex; align-items: center; height: 52px; padding: 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.v-meniu__el:hover .v-meniu__link, .v-meniu__el:focus-within .v-meniu__link { color: var(--text); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.v-meniu__link--evidentiat, .v-meniu__link--reduceri, .v-meniu__el:hover .v-meniu__link--reduceri { color: var(--accent); }
.v-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); visibility: hidden; opacity: 0; }
.v-meniu__el:hover .v-mega, .v-meniu__el:focus-within .v-mega { visibility: visible; opacity: 1; }
.v-mega__interior { max-width: 980px; margin: 0 auto; padding: 32px var(--margine) 30px; text-align: center; }
.v-mega__lista { list-style: none; margin: 0 0 22px; padding: 0; columns: 3 200px; column-gap: 40px; text-align: left; }
.v-mega__lista li { padding: 6px 0; break-inside: avoid; font-size: 14.5px; color: var(--text-2); }
.v-mega__lista a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.v-mega__toate { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--text); padding-bottom: 3px; }
/* căutarea: un rând larg sub antet, doar cu linie dedesubt */
.v-cautare { border-top: 1px solid var(--linie); padding: 26px 0 30px; background: #fff; }
.v-cautare__rand { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 0 auto; padding: 0 var(--margine); }
.v-cautare input { flex: 1; min-width: 0; height: 52px; border: 0; border-bottom: 1px solid var(--text); background: none; font-size: 22px; padding: 0 2px; outline: none; }
.v-cautare button { border: 0; background: none; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 10px 0; }

/* Sertarul: din dreapta, alb, cu litere mari și subțiri */
.v-sertar { background: rgba(28, 27, 25, .35); display: flex; justify-content: flex-end; }
.v-sertar[hidden] { display: none; }
.v-sertar__panou { width: min(440px, 92vw); background: #fff; display: flex; flex-direction: column; }
.v-sertar__cap { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--linie); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.v-sertar__lista { list-style: none; margin: 0; padding: 12px 0; flex: 1; }
.v-sertar__lista > li > a, .v-sertar__lista summary { display: block; padding: 12px 24px; font-size: 24px; font-weight: 400; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.v-sertar__lista summary::-webkit-details-marker { display: none; }
.v-sertar__lista details[open] summary { font-weight: 600; }
.v-sertar__sub { display: flex; flex-direction: column; padding: 0 24px 12px 40px; border-left: 1px solid var(--linie); margin-left: 24px; }
.v-sertar__sub a { padding: 6px 0; font-size: 15px; color: var(--text-2); }
.v-sertar__toate { font-weight: 600; color: var(--text) !important; }
.v-sertar__reduceri { color: var(--accent); }
.v-sertar__jos { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 20px 24px 28px; border-top: 1px solid var(--linie); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Subsolul: deschis, centrat */
.v-subsol { margin-top: 80px; background: var(--fundal); border-top: 1px solid var(--linie); color: var(--text-2); font-size: 14px; text-align: center; }
.v-subsol__sus { padding-top: 48px; padding-bottom: 32px; }
.v-subsol__sigla { width: 150px; margin: 0 auto 18px; }
.v-subsol__contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 16px; color: var(--text); }
.v-subsol__contact a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--text); }
.v-subsol__grila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 900px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--linie); }
.v-subsol__grila h2 { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.v-subsol__grila ul { list-style: none; margin: 0; padding: 0; }
.v-subsol__grila li { padding: 3px 0; }
.v-subsol__grila a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.v-subsol__jos { padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--linie); font-size: 12px; color: var(--gri); }
.v-subsol__jos p { margin: 0 0 8px; }
.v-subsol__social { display: flex; justify-content: center; gap: 22px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.v-subsol__social a { color: var(--text); }

@media (max-width: 900px) {
  :root { --antet: 60px; }
  .v-antet__rand { height: 60px; }
  .v-antet__meniu { display: inline-flex; }
  .v-antet__stanga { gap: 14px; }
  .v-antet__stanga .v-antet__text span, .v-antet__cont, .v-antet__cos-text { display: none; }
  .v-antet__sigla img { width: 124px; }
  .v-meniu { display: none; }
  .v-cautare { padding: 14px 0 18px; }
  .v-cautare input { font-size: 18px; height: 46px; }
  .v-subsol { margin-top: 56px; }
  .v-subsol__grila { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (prefers-reduced-motion: no-preference) { .v-mega { transition: opacity .15s, visibility .15s; } }

/* Listele „Vitrină”: produsele pe toată lățimea; filtrele stau într-un panou din stânga, deschis cu butonul „Filtre” */
.lista { display: block; }
.lista__filtre-mobil { display: inline-flex; }
.lista__produse .titlu-pagina { text-align: center; }
.lista__bara { padding: 12px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
@media (min-width: 901px) {
  .filtre { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 400px; height: 100vh; height: 100dvh; max-height: none; align-self: stretch; display: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 24px; background: #fff; box-shadow: 0 0 0 100vmax rgba(28, 27, 25, .35); }
  .filtre.deschis { display: block; }
  .filtre__cap { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; background: #fff; padding: 14px 0; margin-bottom: 8px; border-bottom: 1px solid var(--linie);
    font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
  .filtre__butoane { position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; flex-direction: row; }
  .filtre__butoane .buton { flex: 1; }
}
/* Pagina produsului: pozele mici sub cea mare, informațiile cu mai mult aer */
.galerie { grid-template-columns: minmax(0, 1fr); }
.galerie__mare { grid-column: 1; }
.galerie__mici { grid-column: 1; grid-row: 2; flex-direction: row; max-height: none; overflow-x: auto; }
.galerie__mici button { width: 88px; }
.produs { gap: 72px; }
.produs__info { padding-top: 12px; }
.produs__cod { letter-spacing: .04em; }
.cumpara { border-top: 1px solid var(--linie); }
.marime { border-radius: 2px; font-weight: 500; }
.buton--cos { background: var(--text); border-color: var(--text); }
.buton--cos:hover { background: #000; border-color: #000; }
@media (max-width: 900px) { .produs { gap: 22px; } .galerie__mici button { width: 64px; } }

.v-subsol__jos .sigle-legale { margin-bottom: 14px; }