/* =========================================================
   CAMERE.MD — shop.css
   Fisa de produs, cosul, comenzile. Peste market.css, cu aceiasi tokeni:
   nicio culoare noua, nicio regula per tema.
   ========================================================= */

/* ---------- firul Ariadnei ---------- */
.pd-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);
  margin-bottom:var(--sp-20);
  font-size:var(--fs-label);
  color:var(--text-faint);
}
.pd-breadcrumb a{color:var(--text-muted)}
.pd-breadcrumb a:hover{color:var(--accent-text)}
.pd-breadcrumb [aria-current]{color:var(--text)}

.pd,.cs,.ct{padding-top:calc(var(--nav-h) + var(--sp-64))}

.pd-h2{
  font-family:var(--f-head);font-size:var(--fs-h3);font-weight:700;
  color:var(--text);margin-bottom:var(--sp-16);
}
.pd-h3{
  font-family:var(--f-head);font-size:var(--fs-h4);font-weight:700;
  color:var(--text);margin-bottom:var(--sp-12);
}

/* ---------- fisa: partea de sus ---------- */
.pd-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-40);
  align-items:start;
}
.pd-photo{
  display:grid;place-items:center;
  aspect-ratio:4/3;
  border-radius:var(--r-md);
  background:#fff;                    /* pozele vin decupate pe alb */
  overflow:hidden;
}
.pd-photo img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.pd-photo--gol{background:var(--surface-sunken)}
.pd-photo--gol svg{width:64px;height:64px;color:var(--text-faint)}

.pd-eyebrow{font-size:var(--fs-label);color:var(--text-faint);letter-spacing:.03em}
.pd-title{
  margin-top:var(--sp-4);
  font-family:var(--f-head);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  color:var(--text);
  overflow-wrap:anywhere;
}
.pd-sku{
  margin-top:var(--sp-8);
  font-family:var(--f-mono);font-size:var(--fs-micro);color:var(--text-faint);
}
.pd-summary{
  margin-top:var(--sp-16);
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.pd-summary:empty{display:none}

.pd-pricebox{
  margin-top:var(--sp-24);
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.pd-pricerow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-12)}
.pd-price{
  font-family:var(--f-mono);font-size:var(--fs-stat);font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.pd-stock{font-size:var(--fs-label);color:var(--success)}
.pd-stock--off{color:var(--text-faint)}
.pd-vat{margin-top:var(--sp-8);font-size:var(--fs-micro);color:var(--text-faint)}

.pd-actions{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-16)}
.pd-actions .btn{flex:1 1 180px}

.qty{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.qty__btn{
  width:44px;min-height:50px;
  display:grid;place-items:center;
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-lead);
  cursor:pointer;
}
.qty__btn:hover{background:var(--surface-sunken)}
.qty__btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}
.qty__val{
  width:56px;
  border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-mono);font-size:var(--fs-body);
  text-align:center;
  -moz-appearance:textfield;
}
.qty__val::-webkit-outer-spin-button,.qty__val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty__val:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}

.pd-added{
  margin-top:var(--sp-12);
  font-size:var(--fs-label);
  color:var(--accent-text);
}

.pd-assure{margin-top:var(--sp-20);display:grid;gap:var(--sp-8);list-style:none;padding:0}
.pd-assure li{
  display:flex;align-items:flex-start;gap:var(--sp-8);
  font-size:var(--fs-label);color:var(--text-muted);
}
.pd-assure svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--accent-text)}

/* ---------- fisa: specificatii ---------- */
.pd-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--sp-40);
  margin-top:var(--sp-64);
  align-items:start;
}

.spec{width:100%;border-collapse:collapse}
/* Fara chenar pe fiecare rand: la 13 randuri, o grila plina de linii se citeste
   mai greu decat una cu linii doar intre perechi. */
.spec tr + tr{border-top:1px solid var(--border)}
.spec th,.spec td{padding:var(--sp-12) 0;text-align:left;vertical-align:top}
.spec th{
  width:44%;
  font-weight:400;
  font-size:var(--fs-label);
  color:var(--text-muted);
}
.spec td{
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.pd-none{margin-top:var(--sp-12);font-size:var(--fs-label);color:var(--text-faint)}

.pd-tags{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-12);padding:0;list-style:none}
.pd-tags li{
  padding:var(--sp-4) var(--sp-12);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  font-size:var(--fs-micro);
  color:var(--text-muted);
}

.pd-raw{margin-top:var(--sp-24);font-size:var(--fs-label);color:var(--text-muted)}
.pd-raw summary{cursor:pointer;color:var(--accent-text);min-height:44px;display:flex;align-items:center}
.pd-raw summary:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:var(--r-xs)}
.pd-raw p{margin-top:var(--sp-8);font-family:var(--f-mono);font-size:var(--fs-micro);line-height:1.7}

.pd-help{
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.pd-help p{font-size:var(--fs-label);color:var(--text-muted);margin-bottom:var(--sp-16)}
.pd-help__tel{margin-top:var(--sp-12);margin-bottom:0;text-align:center;font-size:var(--fs-micro)}
.pd-help__tel a{color:var(--accent-text)}

.pd-related{margin-top:var(--sp-64)}

/* ---------- cos ---------- */
.cs-title{font-family:var(--f-head);font-size:var(--fs-h2);font-weight:700;color:var(--text)}

.cs-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:var(--sp-40);
  margin-top:var(--sp-32);
  align-items:start;
}
.cs-lines{display:grid;gap:var(--sp-12)}

.cl{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:var(--sp-16);
  align-items:center;
  padding:var(--sp-12);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.cl__ph{
  display:grid;place-items:center;
  aspect-ratio:1;
  border-radius:var(--r-sm);
  background:#fff;
  overflow:hidden;
}
.cl__ph img{max-width:86%;max-height:86%;width:auto;height:auto;object-fit:contain}
.cl__ph--gol{background:var(--surface-sunken)}
.cl__ph--gol svg{width:26px;height:26px;color:var(--text-faint)}
.cl__name{font-family:var(--f-head);font-size:var(--fs-h4);font-weight:600;color:var(--text);line-height:1.2}
.cl__name a{color:inherit}
.cl__name a:hover{color:var(--accent-text)}
.cl__meta{margin-top:var(--sp-4);font-size:var(--fs-micro);color:var(--text-faint)}
.cl__right{display:grid;justify-items:end;gap:var(--sp-8)}
.cl__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}
.cl__drop{font-size:var(--fs-micro);color:var(--text-faint);cursor:pointer;min-height:32px}
.cl__drop:hover{color:var(--accent-text)}
.cl .qty__btn{min-height:36px;width:34px}
.cl .qty__val{width:44px;font-size:var(--fs-label)}

.cs-side{display:grid;gap:var(--sp-20);position:sticky;top:calc(var(--nav-h) + var(--sp-16))}
.cs-sum,.cs-form{
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.cs-sumrow{
  display:flex;justify-content:space-between;gap:var(--sp-12);
  padding:var(--sp-8) 0;
  font-size:var(--fs-label);color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.cs-sumrow--total{
  margin-top:var(--sp-8);padding-top:var(--sp-12);
  border-top:1px solid var(--border);
  font-family:var(--f-mono);font-size:var(--fs-lead);font-weight:700;color:var(--text);
}

/* ---------- campuri de formular ---------- */
.fld{display:block;margin-bottom:var(--sp-16)}
.fld__label{
  display:block;margin-bottom:var(--sp-4);
  font-size:var(--fs-label);color:var(--text-muted);
}
.req{color:var(--accent-text);margin-left:2px}
.fld input:not([type="checkbox"]),.fld textarea{
  width:100%;
  min-height:48px;
  padding: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-body);
}
.fld textarea{min-height:88px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--text-faint)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.fld input[aria-invalid="true"]{border-color:var(--error)}
.fld--check{display:flex;align-items:flex-start;gap:var(--sp-12);font-size:var(--fs-label);color:var(--text-muted)}
.fld--check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent-strong)}
fieldset.fld{border:0;padding:0;margin-inline:0}

/* segmente: doua optiuni care se exclud, mai clare decat doua butoane radio */
.seg{display:flex;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.seg__b{
  flex:1 1 0;
  min-height:44px;
  padding:var(--sp-8);
  border-radius:var(--r-xs);
  color:var(--text-muted);
  font-size:var(--fs-label);
  cursor:pointer;
  transition:background-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.seg__b:hover{color:var(--text)}
.seg__b[aria-pressed="true"]{background:var(--accent-strong);color:var(--on-accent);font-weight:600}
.seg__b:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

.cs-err{
  margin-top:var(--sp-16);
  padding:var(--sp-12) var(--sp-16);
  border:1px solid var(--error);
  border-radius:var(--r-sm);
  background:var(--surface-sunken);
  color:var(--text);
  font-size:var(--fs-label);
}

.cs-done{margin-top:var(--sp-32)}
.cs-done .notice{padding:var(--sp-32)}

/* ---------- contul ---------- */
.ct-ways{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-24);
  margin-top:var(--sp-32);
}
.ct-way{
  padding:var(--sp-24);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.ct-way__note{font-size:var(--fs-label);color:var(--text-muted);margin-bottom:var(--sp-16)}

.ord{
  padding:var(--sp-20);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  margin-top:var(--sp-16);
}
.ord__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-12)}
.ord__no{font-family:var(--f-mono);font-size:var(--fs-h4);font-weight:700;color:var(--text)}
.ord__date{font-size:var(--fs-micro);color:var(--text-faint)}
.ord__stat{
  padding:var(--sp-4) var(--sp-12);
  border-radius:var(--r-pill);
  background:var(--chip-bg);
  border:1px solid var(--accent-line);
  font-size:var(--fs-micro);
  color:var(--text);
}
.ord__lines{margin-top:var(--sp-16);display:grid;gap:var(--sp-8)}
.ord__line{
  display:flex;justify-content:space-between;gap:var(--sp-12);
  font-size:var(--fs-label);color:var(--text-muted);
}
.ord__line b{color:var(--text);font-weight:400}
.ord__tot{
  margin-top:var(--sp-16);padding-top:var(--sp-12);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-weight:700;color:var(--text);
}
.ord__meta{margin-top:var(--sp-12);font-size:var(--fs-micro);color:var(--text-faint)}

/* ---------- indicatorul de cos din meniu ---------- */
.cart-link{position:relative}
.cart-count{
  position:absolute;top:-6px;right:-10px;
  min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:var(--accent-strong);
  color:var(--on-accent);
  font-family:var(--f-mono);font-size:var(--fs-micro);font-weight:700;
  line-height:1;
}
.cart-count:empty,.cart-count[hidden]{display:none}

/* ---------- paginare ---------- */
.mk-more{display:grid;place-items:center;gap:var(--sp-16);margin-top:var(--sp-32)}
.mk-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4)}
.mk-page{
  min-width:40px;min-height:40px;
  display:grid;place-items:center;
  padding:0 var(--sp-8);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text-muted);
  font-family:var(--f-mono);font-size:var(--fs-label);
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.mk-page:hover{border-color:var(--border-strong);color:var(--text)}
.mk-page[aria-current="page"]{
  border-color:var(--accent-strong);background:var(--accent-strong);color:var(--on-accent);font-weight:700;
}
.mk-page:disabled{opacity:.4;cursor:default}
.mk-gap{display:grid;place-items:center;min-width:24px;color:var(--text-faint)}

/* butonul „adauga in cos" de pe cardul din grila */
.pc__add{
  margin-top:var(--sp-8);
  width:100%;
  min-height:40px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
  font-family:var(--f-head);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.pc__add:hover{border-color:var(--accent-strong);background:var(--accent-strong);color:var(--on-accent)}
.pc__add:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.pc__add.is-in{border-color:var(--accent-line);color:var(--accent-text)}
.pc__add:disabled{opacity:.5;cursor:default}

/* ---------- slotul de cos de pe card ----------
   Butonul lat se transforma in pasi de cantitate din clipa in care produsul e
   in cos. Nu e doar alt text: e alta forma, si asta e ce se vede dintr-o
   privire pe o grila de douazeci de carduri.

   Inaltimea ramane 40px in ambele stari, ca randul de carduri sa nu salte
   cand un produs intra in cos. */
.pc__cart{margin-top:var(--sp-8);min-height:40px}
.pc__cart .pc__add{margin-top:0}

.pc__qty{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  min-height:40px;
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  background:var(--accent-wash);
  overflow:hidden;
}
.pc__qty-btn{
  min-height:40px;
  font-family:var(--f-head);
  font-size:var(--fs-body);
  font-weight:700;
  line-height:1;
  color:var(--accent-text);
  cursor:pointer;
  transition:background-color var(--t-micro) var(--e-out);
}
.pc__qty-btn:hover{background:var(--accent-strong);color:var(--on-accent)}
.pc__qty-btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}
.pc__qty-val{
  text-align:center;
  font-family:var(--f-mono);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--text);
}
.pc__cart-err{
  min-height:40px;
  display:flex;align-items:center;
  font-size:var(--fs-micro);
  color:var(--error);
}
/* Cardul devine link: numele si poza duc la fisa, butonul ramane buton. */
.pc__link{display:block;color:inherit}
.pc__link:hover .pc__name{color:var(--accent-text)}

@media (max-width:1023px){
  .pd-top,.pd-detail,.cs-layout{grid-template-columns:minmax(0,1fr)}
  .pd-detail,.pd-related{margin-top:var(--sp-40)}
  .cs-side{position:static}
}
@media (max-width:560px){
  .cl{grid-template-columns:72px minmax(0,1fr);row-gap:var(--sp-12)}
  .cl__right{grid-column:1 / -1;justify-items:stretch;
    display:flex;align-items:center;justify-content:space-between}
  .pd-title{font-size:var(--fs-h3)}
}

/* Actiune de text: arata ca un link fiindca e o actiune de text, dar ramane
   buton — o actiune care nu duce nicaieri nu e o legatura. Aceeasi regula si
   in constructor/css/style.css, pentru paginile de acolo. */
.link-btn{
  padding:0;
  color:var(--accent-text);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.link-btn:hover{color:var(--accent-press)}
.link-btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}


/* ---------- etapele comenzii ----------
   Trei pasi numerotati. Numerotarea e justificata aici: comanda CHIAR e o
   secventa — nu aduni produse dupa ce ai platit. */
.cs-steps{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  margin-bottom:var(--sp-24);
  padding:0;
  list-style:none;
}
.cs-step{
  display:flex;align-items:center;gap:var(--sp-8);
  font-family:var(--f-head);
  font-size:var(--fs-label);
  font-weight:600;
  color:var(--text-faint);
}
.cs-step + .cs-step::before{
  content:"";
  width:clamp(16px,4vw,48px);height:1px;
  margin-right:var(--sp-8);
  background:var(--border-strong);
}
.cs-step__n{
  display:grid;place-items:center;
  width:26px;height:26px;
  border:1px solid var(--border-strong);
  border-radius:50%;
  font-size:var(--fs-micro);
}
.cs-step.is-on{color:var(--text)}
.cs-step.is-on .cs-step__n{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
  color:var(--on-accent);
}
.cs-step.is-done{color:var(--text-muted)}
.cs-step.is-done .cs-step__n{
  border-color:var(--accent-line);
  background:var(--accent-wash);
  color:var(--accent-text);
}
.cs-inapoi{margin-bottom:var(--sp-12)}
[data-cs-pas]:focus{outline:none}

@media (max-width:560px){
  /* Pe telefon raman cifrele si eticheta etapei curente: trei etichete pe un
     rand de 320px s-ar rupe in trei randuri. */
  .cs-step:not(.is-on) > span:last-child{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
  .cs-step + .cs-step::before{width:20px}
}