/* =========================================================
   CAMERE.MD — market.css

   Structura vine din felul in care se cumpara echipament tehnic: raft de
   filtre in stanga, care ramane pe ecran, si grila in dreapta. Identitatea
   ramane a site-ului — aceiasi tokeni, acelasi portocaliu, aceleasi fonturi.
   Nicio regula per tema: totul trece prin tokenii semantici, deci pagina merge
   in ambele teme fara duplicate.
   ========================================================= */

.market{padding-top:calc(var(--nav-h) + var(--sp-64))}

/* ---------- dalele de categorie ---------- */
.mk-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-12);
  margin-top:var(--sp-32);
}
.mk-tile{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-16);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.mk-tile:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.mk-tile[aria-pressed="true"]{
  border-color:var(--accent-strong);
  /* umplutura, nu doar chenar: la 7 dale, un chenar singur nu se vede */
  box-shadow:inset 0 0 0 1px var(--accent-strong);
}
.mk-tile__name{font-family:var(--f-head);font-size:var(--fs-h4);font-weight:600;line-height:1.15}
/* Numele au 1 sau 2 randuri; fara `auto`, numaratorile ar sta la inaltimi
   diferite si randul de dale ar parea strambat. */
.mk-tile__count{
  margin-top:auto;
  padding-top:var(--sp-8);
  font-size:var(--fs-micro);
  color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}

/* ---------- asezarea: raft + grila ---------- */
.mk-layout{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:var(--sp-32);
  margin-top:var(--sp-32);
  align-items:start;
}

.mk-rail{
  position:sticky;
  top:calc(var(--nav-h) + var(--sp-16));
  /* raftul isi deruleaza propriul continut cand e mai inalt decat ecranul,
     altfel ultimele fatete ar deveni inaccesibile */
  max-height:calc(100dvh - var(--nav-h) - var(--sp-32));
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.mk-rail__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12);
  margin-bottom:var(--sp-16);
}
.mk-rail__title{font-family:var(--f-head);font-size:var(--fs-h4);font-weight:700;color:var(--text)}
.mk-rail__reset{
  padding:var(--sp-4) 0;
  color:var(--accent-text);
  font-size:var(--fs-label);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.mk-rail__reset:hover{color:var(--accent-press)}
.mk-rail__reset:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}

/* Inchiderea panoului si intoarcerea la rezultate exista numai cand raftul
   chiar e un panou. Pe desktop nu se inchide nimic: raftul e parte din pagina. */
.mk-rail__close,
.mk-rail__done{display:none}

.mk-rail__cta{
  margin-top:var(--sp-24);
  padding-top:var(--sp-16);
  border-top:1px solid var(--border);
}
.mk-rail__cta p{margin-bottom:var(--sp-12);font-size:var(--fs-label);color:var(--text-muted)}

/* ---------- cautare ---------- */
.mk-search{position:relative;margin-bottom:var(--sp-16)}
.mk-search__ic{
  position:absolute;left:var(--sp-12);top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-faint);pointer-events:none;
}
.mk-search input{
  width:100%;
  min-height:44px;
  padding:var(--sp-8) var(--sp-12) var(--sp-8) 38px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--fs-label);
}
.mk-search input::placeholder{color:var(--text-faint)}
.mk-search input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* ---------- fatete pliabile ---------- */
.mk-facet{border-top:1px solid var(--border)}
.mk-facet__title{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  min-height:44px;
  font-family:var(--f-head);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text);
  cursor:pointer;
}
/* Sageata e desenata din chenar: o pictograma in plus pentru 5 fatete ar fi
   cinci cereri de sprite pentru un triunghi. */
.mk-facet__title::after{
  content:"";
  width:8px;height:8px;
  margin-left:var(--sp-8);
  border-right:1.75px solid currentColor;
  border-bottom:1.75px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-ui) var(--e-out);
}
.mk-facet[open] .mk-facet__title::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mk-facet__body{padding-bottom:var(--sp-16)}
.mk-facet:not([open]) .mk-facet__body{display:none}

/* ---------- optiunile din fatete ---------- */
.mk-opt{
  display:flex;align-items:center;gap:var(--sp-8);
  width:100%;
  min-height:36px;
  padding:var(--sp-4) 0;
  color:var(--text-muted);
  font-size:var(--fs-label);
  text-align:left;
  cursor:pointer;
}
.mk-opt:hover{color:var(--text)}
.mk-opt[aria-pressed="true"]{color:var(--accent-text);font-weight:600}
.mk-opt:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;border-radius:var(--r-xs)}
.mk-opt__box{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:17px;height:17px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-xs);
  color:transparent;
}
.mk-opt[aria-pressed="true"] .mk-opt__box{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
  color:var(--on-accent);
}
.mk-opt__box svg{width:11px;height:11px}
.mk-opt__name{flex:1 1 auto;min-width:0}
.mk-opt__n{
  flex:0 0 auto;
  color:var(--text-faint);
  font-size:var(--fs-micro);
  font-variant-numeric:tabular-nums;
}

/* ---------- benzi de pret + interval exact ---------- */
.mk-band{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-12)}
.mk-band button{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  padding:var(--sp-4) var(--sp-8);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text-muted);
  font-size:var(--fs-micro);
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.mk-band button:hover{border-color:var(--border-strong);color:var(--text)}
.mk-band button[aria-pressed="true"]{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
  color:var(--on-accent);
}
.mk-minmax{display:flex;align-items:center;gap:var(--sp-8);color:var(--text-faint)}
.mk-minmax input{
  width:100%;min-width:0;
  min-height:40px;
  padding:var(--sp-4) var(--sp-8);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-mono);
  font-size:var(--fs-label);
}
.mk-minmax input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

.mk-check{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  min-height:36px;color:var(--text-muted);font-size:var(--fs-label);cursor:pointer;
}
.mk-check input{width:17px;height:17px;accent-color:var(--accent-strong);cursor:pointer}

/* ---------- bara de deasupra grilei ---------- */
.mk-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-12);
  padding-bottom:var(--sp-12);
  border-bottom:1px solid var(--border);
}
.mk-count{font-size:var(--fs-label);color:var(--text-muted);font-variant-numeric:tabular-nums}
.mk-bar select{
  min-height:40px;
  padding:var(--sp-4) var(--sp-12);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--fs-label);
}
.mk-bar select:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* ---------- filtrele active, ca sa se poata scoate una cate una ---------- */
.mk-chips{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-12)}
.mk-chips:empty{display:none}
.mk-chip{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  min-height:32px;
  padding:var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12);
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  background:var(--chip-bg);
  color:var(--text);
  font-size:var(--fs-micro);
  cursor:pointer;
}
.mk-chip:hover{border-color:var(--accent-strong)}
.mk-chip__x{
  display:grid;place-items:center;
  width:16px;height:16px;
  color:var(--text-faint);
  font-size:var(--fs-label);line-height:1;
}
.mk-chip:hover .mk-chip__x{color:var(--accent-text)}

/* ---------- grila de produse ---------- */
.mk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:var(--sp-16);
  margin-top:var(--sp-16);
}

.pc{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:var(--sp-12);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.pc:hover{border-color:var(--border-strong);transform:translateY(-2px)}

/* Panoul alb nu e o alegere estetica: pozele din catalog vin decupate pe alb.
   Pe fundal inchis, fara panou, ar aparea un dreptunghi alb oricum — mai bine
   unul intentionat, cu colturi rotunjite si aceeasi inaltime peste tot. */
.pc__ph{
  position:relative;
  display:grid;place-items:center;
  aspect-ratio:4/3;
  margin-bottom:var(--sp-12);
  border-radius:var(--r-sm);
  background:#fff;
  overflow:hidden;
}
.pc__ph img{max-width:86%;max-height:86%;width:auto;height:auto;object-fit:contain}
/* Cele 11 produse fara poza primesc semnul categoriei, nu o casuta rupta. */
.pc__ph--gol{background:var(--surface-sunken)}
.pc__ph--gol svg{width:34px;height:34px;color:var(--text-faint)}

.pc__flag{
  position:absolute;top:var(--sp-8);left:var(--sp-8);
  padding:2px var(--sp-8);
  border-radius:var(--r-pill);
  background:var(--surface-sunken);
  border:1px solid var(--border-strong);
  color:var(--text-muted);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
}

.pc__eyebrow{
  font-size:var(--fs-micro);
  color:var(--text-faint);
  letter-spacing:.03em;
  /* o categorie lunga nu are voie sa impinga cardul pe doua randuri */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc__name{
  margin-top:2px;
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.2;
  color:var(--text);
  /* doua randuri fixe: altfel randurile grilei ar sari cu 20px unul fata de
     altul si preturile n-ar mai fi pe aceeasi linie */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.2em);
  overflow-wrap:anywhere;
}
.pc__specs{
  margin-top:var(--sp-8);
  font-family:var(--f-mono);
  font-size:var(--fs-micro);
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc__specs:empty{display:none}

.pc__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-8);
  margin-top:auto;
  padding-top:var(--sp-12);
}
.pc__price{
  font-family:var(--f-mono);
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pc__unit{font-size:var(--fs-micro);color:var(--text-faint);font-weight:400}

.pc.is-off{opacity:.66}
.pc.is-off .pc__ph{filter:grayscale(1)}

/* ---------- stari ---------- */
.pc--skeleton{pointer-events:none}
.pc--skeleton .pc__ph{background:var(--surface-sunken)}
.sk{display:block;height:12px;margin-top:var(--sp-8);border-radius:var(--r-xs);background:var(--surface-sunken)}
.sk--lg{height:18px;width:76%}
.sk--sm{width:44%}
.sk--half{width:58%}

.mk-empty{
  margin-top:var(--sp-24);
  padding:var(--sp-32) var(--sp-20);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
  text-align:center;
  color:var(--text-muted);
}
.mk-empty__title{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  color:var(--text);
  margin-bottom:var(--sp-4);
}
.mk-empty .btn{margin-top:var(--sp-16)}

.mk-note{
  margin-top:var(--sp-32);
  padding-top:var(--sp-16);
  border-top:1px solid var(--border);
  max-width:var(--maxw-text);
  font-size:var(--fs-label);
  color:var(--text-faint);
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Butonul de filtre exista doar pe ecrane mici; pe desktop raftul e mereu acolo. */
.mk-fab{display:none}

/* ---------- ecrane mici ---------- */
@media (max-width:1023px){
  .mk-layout{grid-template-columns:minmax(0,1fr)}

  /* Raftul devine un panou peste pagina. Pe telefon, filtrele deasupra grilei
     ar impinge primul produs sub ecran: omul ar deschide o pagina de magazin
     si ar vedea numai controale. */
  .mk-rail{
    position:fixed;
    inset:auto 0 0 0;
    z-index:var(--z-drawer);
    max-height:82dvh;
    border-radius:var(--r-md) var(--r-md) 0 0;
    border-bottom:0;
    box-shadow:var(--sh-lg);
    transform:translateY(101%);
    visibility:hidden;
    transition:transform var(--t-comp) var(--e-out),visibility 0s linear var(--t-comp);
  }
  .mk-rail.is-open{transform:none;visibility:visible;transition-delay:0s}

  /* Fundalul: inchide panoul la atingere si opreste apasarile pe grila de
     dedesubt. Fara el, un card apasat „prin" panou schimba pagina in spatele
     unui panou care ramanea deschis. */
  .mk-scrim{
    position:fixed;inset:0;
    z-index:calc(var(--z-drawer) - 1);
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  }

  .mk-rail__head{align-items:center}
  .mk-rail__close{
    display:inline-flex;align-items:center;justify-content:center;
    /* 44px e minimul pe care un deget il nimereste din prima */
    width:44px;height:44px;
    margin:calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) 0;
    border-radius:var(--r-sm);
    color:var(--text-muted);
    cursor:pointer;
  }
  .mk-rail__close:hover{color:var(--text);background:var(--surface-sunken)}
  .mk-rail__close:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
  .mk-rail__close svg{width:20px;height:20px}

  .mk-rail__done{
    display:block;width:100%;
    margin-top:var(--sp-20);
    min-height:48px;
    padding:var(--sp-12) var(--sp-20);
    border-radius:var(--r-pill);
    background:var(--accent-strong);
    color:var(--on-accent);
    font-family:var(--f-head);
    font-size:var(--fs-label);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .mk-rail__done:focus-visible{outline:2px solid var(--text);outline-offset:3px}

  /* Cu panoul deschis, butonul plutitor ar fi ramas deasupra lui: doua controale
     pentru acelasi lucru, unul dintre ele mincinos. */
  .mk-rail.is-open ~ .mk-fab,
  body.mk-filtre-deschise .mk-fab{display:none}

  .mk-fab{
    position:fixed;
    left:50%;bottom:var(--sp-20);
    transform:translateX(-50%);
    z-index:var(--z-dock);
    display:inline-flex;align-items:center;gap:var(--sp-8);
    min-height:48px;
    padding:var(--sp-12) var(--sp-20);
    border-radius:var(--r-pill);
    background:var(--accent-strong);
    color:var(--on-accent);
    font-family:var(--f-head);
    font-size:var(--fs-label);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:var(--sh-lg);
    cursor:pointer;
  }
  .mk-fab svg{width:18px;height:18px}
  .mk-fab:focus-visible{outline:2px solid var(--text);outline-offset:3px}
}

@media (max-width:560px){
  .mk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-12)}
  .mk-tiles{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .pc{padding:var(--sp-8)}
  .pc__name{font-size:var(--fs-label)}
}

@media (prefers-reduced-motion:reduce){
  .mk-tile:hover,.pc:hover{transform:none}
  .mk-rail{transition:none}
}


/* =========================================================
   CAUTAREA SI CATEGORIILE, IMPREUNA

   Doua feluri de a ajunge la un produs: scrii ce vrei, sau te uiti pe
   categorii. Stateau in doua locuri diferite — cautarea intr-o coloana
   laterala care pe telefon e ascunsa intr-un panou. Acum sunt unul sub altul,
   in acelasi bloc.
   ========================================================= */
.mk-find{margin-top:var(--sp-32)}
.mk-find .mk-tiles{margin-top:var(--sp-16)}

/* Cautarea mare: e prima actiune a paginii, deci arata ca o actiune, nu ca un
   camp de formular pierdut intr-un raft. */
.mk-search--lg{margin-bottom:0}
.mk-search--lg input{
  width:100%;
  min-height:52px;
  padding:var(--sp-12) var(--sp-16) var(--sp-12) 48px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  background:var(--surface-raised);
  color:var(--text);
  font-size:var(--fs-body);
}
.mk-search--lg input::placeholder{color:var(--text-faint)}
.mk-search--lg input:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:2px;
  border-color:var(--accent-strong);
}
.mk-search--lg .mk-search__ic{left:var(--sp-16);width:20px;height:20px}

/* =========================================================
   BANNERUL CATRE CONFIGURATOR

   Nu e un card de produs si nu trebuie sa arate ca unul: se aseaza pe toata
   latimea, cu fundalul accentuat, ca sa se citeasca drept alta cale — nu al
   noualea produs din grila.
   ========================================================= */
.mk-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-24);
  margin-top:var(--sp-32);
  padding:var(--sp-24) var(--sp-32);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  background:var(--accent-wash);
}
.mk-banner__text{max-width:56ch}
.mk-banner h3{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:700;
  color:var(--text);
}
.mk-banner p{
  margin-top:var(--sp-8);
  font-size:var(--fs-small);
  color:var(--text-muted);
}
.mk-banner .btn{flex-shrink:0}

@media (max-width:640px){
  .mk-banner{padding:var(--sp-20);flex-direction:column;align-items:stretch}
  .mk-banner .btn{width:100%;justify-content:center}
  .mk-search--lg input{min-height:48px;font-size:var(--fs-small)}
}


/* Butonul de trimis, pe fiecare card din grila.
   Sta in coltul pozei, deasupra legaturii care acopera cardul: fara text, ca
   la patru carduri pe rand nu incape un cuvant in plus. Numele produsului e in
   `aria-label`, deci cine il aude stie ce trimite.

   Pe ecran mare intra in pagina la trecerea mausului peste card — o grila de
   produse e despre produse. Pe telefon nu exista „peste", deci ramane. */
.pc__share{
  position:absolute;
  top:var(--sp-8);
  right:var(--sp-8);
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text-muted);
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),
             color var(--t-ui) var(--e-out),
             opacity var(--t-ui) var(--e-out);
}
.pc__share .icon{width:16px;height:16px}
.pc__share:hover{border-color:var(--accent-line);color:var(--accent-text)}
.pc__share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pc__share.is-copiat{border-color:var(--success);color:var(--success)}

@media (hover:hover) and (min-width:700px){
  .pc__share{opacity:0}
  .pc:hover .pc__share,
  .pc__share:focus-visible{opacity:1}
}

/* Pe fisa produsului, langa pret si langa butonul de cos. */
.pd-share{margin-top:var(--sp-12)}
.pd-share .btn{width:100%}

@media (min-width:560px){
  .pd-share .btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .pc__share{transition:none}
}


/* ---------------------------------------------------------
   SUBCATEGORIILE — al doilea nivel al raftului din stanga
   Stau sub categoria deschisa si se vad ca fiind ale ei: indentate, cu o
   linie care le leaga, si fara patratul de bifa al nivelului de deasupra.
--------------------------------------------------------- */
.mk-sub{
  margin:2px 0 var(--sp-8,8px) 10px;padding-left:10px;
  border-left:2px solid var(--border,rgba(0,0,0,.12));
  display:flex;flex-direction:column;
}
.mk-opt--sub{padding-top:5px;padding-bottom:5px}
.mk-opt--sub .mk-opt__name{font-size:var(--fs-small);color:var(--text-muted)}
.mk-opt--sub[aria-pressed="true"] .mk-opt__name{color:var(--accent-text,var(--accent));font-weight:600}
.mk-opt--sub .mk-opt__n{font-size:var(--fs-small);opacity:.7}