/* ==========================================================================
   COS — structura Amazon, dupa captura reala din amazon.de/cart/view.html
   Se incarca DOAR pe pagina de cos (vezi functions.php).

   Ce reproduce captura:
     - titlu mare "Cosul tau", fara chenar
     - fiecare produs pe un rand: miniatura, titlu, stare stoc in verde,
       informatia de livrare, iar PRETUL aliniat la dreapta randului
     - actiunile produsului pe un rand orizontal, marunte si discrete
     - subtotalul REPETAT jos, la dreapta coloanei
     - in dreapta: caseta lipita, cu totalul si butonul galben
     - coloana dreapta e stramta; coloana stanga ia restul

   Principiul de fond: cosul nu cere nicio decizie de completat. Doar
   confirmare si cantitate. Cuponul si calculatorul de livrare raman
   in pagina, dar coborate sub produse, ca sa nu concureze cu butonul.

   ---------------------------------------------------------------------------
   DESPRE MARIMI. Fisierul a avut multa vreme doua straturi: unul scris la
   inceput, „din cap", si unul adaugat dupa, sub titlul „DIMENSIUNI — masurate
   din capturile Amazon", care redeclara 18 dintre aceiasi selectori cu alte
   valori si cu `!important`. Primul strat nu se vedea nicaieri: fiecare marime
   era scrisa de doua ori, iar valoarea adevarata statea la o suta de randuri
   de comentariul care o explica.

   Acum fiecare selector apare O SINGURA data, cu valoarea masurata din
   captura — cea care castiga si azi. Rezultatul randat e neschimbat: stilurile
   calculate ale celor 446 de elemente de pe pagina de cos sunt identice
   inainte si dupa (verificat, nu presupus).

   `!important`-urile au ramas exact unde erau. Nu sunt podoaba: bat reguli
   ale Elementor Pro si ale WooCommerce, care tintesc aceleasi elemente cu
   selectori mai specifici decat ai nostri.
   ========================================================================== */

:root{
  --cart-line:rgba(0,0,0,.14);  /* doar linii de separare, neutre */
}

/* ---------- 1. Grila ----------------------------------------------------
   Proportia coloanelor NU se stabileste aici: e 70/30, aleasa explicit si
   scrisa in functions.php. Daca as fi pus-o si aici, am fi avut doua reguli
   care se contrazic, iar cea care castiga ar fi depins de ordinea in care
   WordPress tipareste stilurile — exact genul de lucru care se strica peste
   trei luni fara motiv aparent. Aici doar lipim caseta la derulare. */
.woocommerce-cart .e-cart__column-inner{ position:sticky;top:14px; }

/* ---------- 2. Antetul cosului ------------------------------------------ */
.cart-antet-sus{ display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap; }

/* 28px e marimea din captura Amazon. `!important` pentru ca titlul e un
   heading, iar Elementor ii impune marimea din setarile globale de tipografie. */
.cart-titlu{ font-size:28px !important;line-height:1.2;margin:0; }

.cart-antet-jos{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:4px;font-size:13px;flex-wrap:wrap;
}
.cart-actiuni-masa i,.cart-legaturi i{ color:var(--cart-line);font-style:normal;margin:0 8px; }
.cart-eticheta-pret{
  text-align:right;font-size:13px;opacity:.7;
  border-bottom:1px solid var(--cart-line);padding-bottom:8px;margin-top:2px;
  /* deplasata spre stanga, ca sa cada deasupra coloanei de pret,
     nu lipita de marginea din dreapta a casetei */
  padding-right:30px;
}

/* ---------- 2b. Randul unui produs -------------------------------------- */
.woocommerce-cart table.shop_table.cart{ border:0;margin:0; }
.woocommerce-cart table.shop_table.cart thead{ display:none; }

/* 24px sus si jos — atat respira randul in captura Amazon. `!important`
   fiindca WooCommerce isi pune propriul padding pe celulele din shop_table. */
.woocommerce-cart table.shop_table.cart td{
  border:0;border-bottom:1px solid var(--cart-line);
  padding:24px 0 !important;vertical-align:top;
}
.woocommerce-cart table.shop_table.cart tr.cart_item:last-child td{ border-bottom:0; }

/* bifa de selectie, in fata miniaturii; coloana are latime fixa,
   ca randurile sa fie aliniate intre ele */
.woocommerce-cart td.product-thumbnail{
  display:flex;align-items:flex-start;gap:10px;width:220px;
}
.cart-bifa{ flex:0 0 auto;padding-top:2px; }
.cart-bifa input{ width:17px;height:17px; }

/* Elementor Pro impune width:55px printr-un selector cu trei clase
   (.elementor-widget-woocommerce-cart .woocommerce table.cart img).
   Il repetam si adaugam .product-thumbnail, ca sa avem patru clase —
   plus `!important`, fiindca nici asa nu era de ajuns. */
.elementor-widget-woocommerce-cart .woocommerce table.cart td.product-thumbnail img{
  width:180px !important;height:auto !important;max-width:none !important;
}

.woocommerce-cart td.product-name a{ font-size:18px !important;line-height:1.35; }

/* pretul: valoarea mare, mentiunea de TVA dedesubt */
.woocommerce-cart td.product-subtotal{
  text-align:right;font-size:20px !important;font-weight:700;white-space:nowrap;
}
.woocommerce-cart td.product-price{ display:none; }

.cart-detalii{ margin-top:5px; }
.cart-stoc{ font-size:14px; }  /* culoarea o da tema */
.cart-atribut{ font-size:13px;margin-top:2px; }
.cart-atribut strong{ font-weight:700; }

/* pastila de cantitate + legaturile, pe acelasi rand */
.cart-bara{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px; }
.cart-pastila{
  display:inline-flex;align-items:center;
  border:1px solid currentColor;border-radius:22px;
  overflow:hidden;opacity:.85;
  min-height:38px;   /* inaltimea din captura */
}
.cart-pastila .quantity{ margin:0; }
.cart-pastila input.qty{
  width:42px;border:0 !important;box-shadow:none !important;text-align:center;
  padding:4px 0 !important;font-size:15px;background:transparent;
}
.cart-q{
  background:none;border:0;cursor:pointer;font-size:16px;line-height:1;padding:8px 13px;
}
.cart-q:hover{ opacity:.7; }

.cart-legaturi{ font-size:14px;display:flex;align-items:center;flex-wrap:wrap; }
.cart-legaturi a{ text-decoration:none; }
.cart-legaturi a:hover{ text-decoration:underline; }

/* ascundem coloana veche de stergere: actiunea traieste acum in randul de legaturi */
.woocommerce-cart td.product-remove{ display:none; }
.woocommerce-cart td.product-quantity{ display:none; }

/* subtotalul repetat jos, la dreapta */
.cart-subtotal-jos{
  text-align:right;font-size:20px;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--cart-line);
}
.cart-subtotal-jos strong{ font-weight:700; }
.cart-tva{ font-size:13px;opacity:.75; }

/* ---------- 3. Caseta din dreapta ---------------------------------------
   Continut identic cu captura: linia de informare despre livrarea gratuita,
   subtotalul mare, bifa de cadou, butonul pe toata latimea.
   Randurile WooCommerce de livrare si total NU apar in cosul Amazon —
   ele se vad abia la finalizare. */
.woocommerce-cart .e-cart-totals{
  padding:16px;
}
.woocommerce-cart .e-cart-totals h2,
.woocommerce-cart .cart_totals > h2{ display:none; }

.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals table.shop_table tr.order-total,
.woocommerce-cart .cart_totals table.shop_table tr.fee,
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal{ display:none; }

.cart-info-livrare{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14px;line-height:1.45;margin-bottom:16px;
}

/* `justify-content`, `align-items` si `gap` nu fac nimic aici: elementul e
   `display:block`. Sunt ramase de pe cand randul era flex, cu totalul si suma
   la capete opuse. Nu le-am scos ca sa nu schimb nimic odata cu rescrierea —
   de sters cand se atinge oricum bucata asta. */
.cart-total-sus{
  display:block;font-size:21px;font-weight:700;margin:0 0 12px;
  justify-content:space-between;align-items:baseline;gap:8px;
}
.cart-total-sus strong{ font-weight:700; }
.cart-total-sus .cart-tva{ font-size:13px;font-weight:400; }

/* Butonul de finalizare NU se coloreaza: pastram aspectul temei.
   Aici tinem doar de forma — pastila pe toata latimea, ca in captura. */
.woocommerce-cart .checkout-button,
.woocommerce-cart a.checkout-button{
  display:block;width:100%;box-sizing:border-box;
  min-height:46px;line-height:30px;
  border-radius:24px;
  font-size:16px;
  padding:8px 16px;
  text-align:center;
}

/* bifa "comanda contine un cadou" — la Amazon e aici, sub buton */
.cart-cadou{ font-size:14px;margin:0 0 14px;display:flex;gap:7px;align-items:center; }
.cart-cadou input{ width:17px;height:17px;margin:0; }

/* ---------- 4. Cupon si calculator, coborate sub produse ---------------- */
/* La Amazon nu exista niciunul in cos. Le pastram — sunt utile — dar sub
   lista, ca sa nu concureze cu butonul de finalizare. */
.woocommerce-cart .e-cart__column-start .coupon,
.woocommerce-cart .shipping-calculator-form{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--cart-line);
}

/* ---------- 5. Eticheta pentru ce nu putem sustine ----------------------
   Marcajul "in curand" ramane, dar discret: la marimea de dinainte concura
   vizual cu textul insusi si strica ritmul randului. */
.cart-indisponibil{
  font-size:12px;cursor:default;opacity:.55;
  display:inline-flex;align-items:center;gap:6px;
}
.cart-indisponibil::after{
  content:"·";margin-left:4px;opacity:.5;
}
.cart-indisponibil:hover::after{ content:"· în curând";font-size:11px; }

/* ---------- 6. Recomandari si lista de salvate --------------------------
   Amandoua ies din grila si se aseaza sub cos, pe toata latimea.
   Doar asezare; culorile si fontul vin din tema. */
.cart-upsell-wrapper{ max-width:1501px;margin:28px auto 0; }

.rp-salvate{ max-width:1501px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--cart-line); }
.rp-salvate-titlu{ font-size:20px;margin:0 0 14px; }
.rp-salvate-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px; }
.rp-salvat{ display:flex;flex-direction:column;gap:5px; }
.rp-salvat-poza img{ width:100%;height:auto; }
.rp-salvat-nume{ font-size:14px;line-height:1.35;text-decoration:none; }
.rp-salvat-pret{ font-size:15px;font-weight:700; }
.rp-salvat-stoc{ font-size:12px;opacity:.75; }
.rp-salvat-actiuni{ display:flex;gap:12px;font-size:13px;margin-top:4px; }
.rp-salvat-actiuni a{ text-decoration:none; }
.rp-salvat-actiuni a:hover{ text-decoration:underline; }

/* ---------- 7. Sub 1024px -----------------------------------------------
   ATENTIE, aici era o capcana. Blocul asta continea si trei reguli pentru
   ecrane mici care NU au functionat niciodata:

       .cart-titlu{ font-size:21px }                 — batuta de 28px !important
       ...product-thumbnail img{ width:84px }        — batuta de 180px !important
       .woocommerce-cart td.product-thumbnail{ width:auto }  — batuta de 220px,
                                                       scris mai jos in fisier

   Cu alte cuvinte, pe telefon titlul ramanea la 28px si miniatura la 180px,
   desi cineva scrisese anume altceva. Le-am scos: erau moarte oricum, iar
   lasate aici dadeau impresia ca telefonul e rezolvat. Daca marimile alea
   chiar se doresc, se pun la loc CU `!important` — altfel se intampla iar
   exact acelasi lucru. */
@media(max-width:1024px){
  .woocommerce-cart .e-cart__column-inner{ position:static; }
  .woocommerce-cart .e-cart__column-end{ order:-1; }
  .rp-salvate-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}