/* Theme Name: Vonteq LZ Theme URI: https://vonteq.ro Author: Vonteq Description: Tema proprie LED-Zone.ro — scrisa de la zero, fara constructor de pagini, cu accent pe viteza si pe numarul mic de cereri. Un singur fisier CSS, un singur fisier JS, fonturi de sistem. Version: 0.1.0 Requires at least: 6.5 Requires PHP: 8.1 Text Domain: vonteq-lz */ /* Outfit (font variabil), servit local: un singur fisier acopera toate grosimile. */ @font-face{font-family:Outfit;font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Outfit;font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} /* --------------------------------------------------------------- 1. Variabile si resetare --------------------------------------------------------------- */ :root{ /* Culorile luate direct din live (Woodmart): verde #439665, accent galben, titluri #333. */ --verde:#439665; --verde-inchis:#357a52; --galben:#fbbc34; --rosu:#dd3333; --text:#3d4548; --titlu:#15191b; --text-slab:#8a8a8a; --linie:#e8e8e8; --fundal-slab:#f7f7f7; --alb:#fff; --raza:10px; --raza-card:22px; --pilula:999px; --umbra:0 2px 8px rgba(0,0,0,.035); --umbra-hover:0 8px 24px rgba(0,0,0,.08); --lat:1354px; --font:Outfit,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text);background:var(--alb)} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--verde)} h1,h2,h3,h4{line-height:1.3;margin:0 0 .6em;font-weight:600;color:var(--titlu)} h1{font-size:40px;font-weight:700;letter-spacing:-.5px} h2{font-size:28px;font-weight:700;letter-spacing:-.3px} h3{font-size:19px;font-weight:600} button,input,select,textarea{font:inherit;color:inherit} .container{max-width:var(--lat);margin:0 auto;padding:0 20px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --------------------------------------------------------------- 2. Antet --------------------------------------------------------------- */ .bara-sus{background:var(--fundal-slab);border-bottom:1px solid var(--linie);font-size:13px;color:var(--text-slab)} .bara-sus .container{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:34px} .bara-sus ul{display:flex;gap:16px;margin:0;padding:0;list-style:none;flex-wrap:wrap} .antet{border-bottom:1px solid var(--linie);background:var(--alb);position:sticky;top:0;z-index:50} .antet .container{display:flex;align-items:center;gap:16px;min-height:64px} .sigla{font-weight:800;font-size:20px;letter-spacing:-.4px;white-space:nowrap} .sigla span{color:var(--verde)} .sigla img{max-height:40px;width:auto} .cautare{flex:1;display:flex;min-width:0} .cautare input[type=search]{flex:1;min-width:0;border:1px solid var(--linie);border-right:0;border-radius:var(--raza) 0 0 var(--raza);padding:12px 14px;height:46px;outline:0} .cautare input[type=search]:focus{border-color:var(--verde)} .cautare button{border:0;background:var(--verde);color:#fff;padding:0 18px;border-radius:0 var(--raza) var(--raza) 0;cursor:pointer;font-weight:600} .cautare button:hover{background:var(--verde-inchis)} .unelte{display:flex;align-items:center;gap:18px;white-space:nowrap} .unelte a{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500} .unelte .numar{background:var(--verde);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} /* --------------------------------------------------------------- 3. Navigatie --------------------------------------------------------------- */ .nav-principal{background:var(--alb);border-bottom:1px solid var(--linie)} .nav-principal .container{display:flex;align-items:center;gap:24px} .meniu{display:flex;gap:22px;margin:0;padding:0;list-style:none;flex-wrap:wrap} .meniu > li > a{display:block;padding:12px 0;font-weight:600;font-size:13px;text-transform:uppercase;color:rgba(51,51,51,.7);letter-spacing:.2px} .meniu .current-menu-item > a{color:var(--verde)} .categorii{position:relative} .categorii > button{display:flex;align-items:center;gap:8px;background:var(--verde);color:#fff;border:0;padding:11px 16px;font-weight:600;cursor:pointer;border-radius:var(--raza) var(--raza) 0 0} .buton-meniu{display:none;background:none;border:1px solid var(--linie);border-radius:var(--raza);padding:8px 12px;cursor:pointer;font-weight:600} /* --------------------------------------------------------------- 4. Grile de produse --------------------------------------------------------------- */ /* .products este carcasa pusa de WooCommerce in arhive; .grila e a noastra, pe prima pagina */ .grila,ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:0;padding:0;list-style:none} .card{position:relative;border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:18px;display:flex;flex-direction:column;box-shadow:var(--umbra);transition:box-shadow .18s,transform .18s} .card:hover{box-shadow:var(--umbra-hover);transform:translateY(-2px)} .card .poza{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;border-radius:calc(var(--raza-card) - 8px);background:#fcfcfc} .card .poza img{width:100%;height:100%;object-fit:contain} .card .titlu{font-size:16px;line-height:1.35;margin:0 0 10px;font-weight:400;color:var(--titlu);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card .pret{margin-top:auto;font-weight:700;font-size:21px;color:var(--titlu);letter-spacing:-.3px} .card .pret del{color:var(--text-slab);font-weight:400;font-size:15px;margin-right:8px} .card .pret ins{text-decoration:none} .eticheta{position:absolute;top:18px;left:18px;z-index:2;background:var(--rosu);color:#fff;font-size:13px;font-weight:600;padding:5px 12px;border-radius:var(--pilula);line-height:1.3} .stoc-mic{font-size:12px;color:var(--text-slab)} .buton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--verde);color:#fff;border:0;border-radius:var(--pilula);padding:13px 24px;font-weight:600;font-size:16px;cursor:pointer;text-align:center;transition:background .15s} .buton:hover{background:var(--verde-inchis);color:#fff} .buton.secundar{background:var(--alb);color:var(--text);border:1px solid var(--linie)} /* --------------------------------------------------------------- 5. Pagina principala --------------------------------------------------------------- */ .hero{background:linear-gradient(120deg,#0f172a,#1f3b2d);color:#fff;border-radius:14px;padding:40px 28px;margin:22px 0;display:grid;gap:10px} .hero h1,.hero .hero-titlu{font-size:30px;margin:0;color:#fff} .hero p{margin:0;opacity:.85;max-width:60ch} .hero .buton{margin-top:10px;width:fit-content} .avantaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:26px 0} .avantaj{border:1px solid var(--linie);border-radius:var(--raza);padding:14px;font-size:14px} .avantaj b{display:block} .sectiune{margin:34px 0} .sectiune-cap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px} .sectiune-cap a{font-size:14px;color:var(--verde);font-weight:600} .categorii-grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .categorii-grila a{border:1px solid var(--linie);border-radius:var(--raza);padding:14px;text-align:center;font-weight:550;font-size:14px;background:var(--fundal-slab)} .categorii-grila a:hover{border-color:var(--verde);color:var(--text)} /* --------------------------------------------------------------- 6. Arhive / magazin --------------------------------------------------------------- */ .pagina{display:grid;grid-template-columns:250px 1fr;gap:26px;margin:22px 0 40px} .pagina.fara-bara{grid-template-columns:1fr} .bara-laterala{font-size:14px} .bara-laterala h3{font-size:15px;margin-bottom:8px} .bara-laterala ul{list-style:none;margin:0 0 20px;padding:0} .bara-laterala li{padding:4px 0} .firimituri{font-size:13px;color:var(--text-slab);margin:14px 0} .firimituri a:hover{color:var(--verde)} .rezultate{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;font-size:14px;color:var(--text-slab);flex-wrap:wrap} .paginare{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0} .paginare .page-numbers{border:1px solid var(--linie);border-radius:8px;padding:7px 12px;font-size:14px} .paginare .current{background:var(--verde);color:#fff;border-color:var(--verde)} /* --------------------------------------------------------------- 7. Pagina de produs --------------------------------------------------------------- */ .produs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;margin:20px 0 40px} .produs .galerie img{border:1px solid var(--linie);border-radius:var(--raza)} .produs .pret-mare{font-size:26px;font-weight:700;margin:12px 0} .produs .pret-mare del{font-size:16px;color:var(--text-slab);font-weight:400;margin-right:8px} .produs .pret-mare ins{text-decoration:none} .produs form.cart{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0} .produs .quantity input{width:70px;padding:9px;border:1px solid var(--linie);border-radius:var(--raza);text-align:center} .produs .variations{width:100%;border-collapse:collapse;margin-bottom:10px} .produs .variations td{padding:4px 0} .produs select{padding:9px;border:1px solid var(--linie);border-radius:var(--raza);max-width:100%} .meta{font-size:13px;color:var(--text-slab);margin-top:10px} .tab-uri{margin:30px 0} .tab-uri h2{font-size:18px;border-bottom:1px solid var(--linie);padding-bottom:8px} .woocommerce-tabs ul.tabs{display:flex;gap:18px;list-style:none;margin:0 0 16px;padding:0;border-bottom:1px solid var(--linie)} .woocommerce-tabs ul.tabs li{padding:10px 0;font-weight:600;font-size:14px} .woocommerce-tabs ul.tabs li.active{box-shadow:inset 0 -2px 0 var(--verde);color:var(--verde)} /* --------------------------------------------------------------- 8. Mesaje WooCommerce, cos, finalizare --------------------------------------------------------------- */ .woocommerce-message,.woocommerce-info,.woocommerce-error{border:1px solid var(--linie);border-left:3px solid var(--verde);background:var(--fundal-slab);padding:12px 14px;border-radius:var(--raza);list-style:none;margin:16px 0} .woocommerce-error{border-left-color:var(--rosu)} table.shop_table{width:100%;border-collapse:collapse;font-size:14px} table.shop_table th,table.shop_table td{border-bottom:1px solid var(--linie);padding:10px;text-align:left} .woocommerce form .form-row{margin-bottom:12px;display:grid;gap:5px} /* Bifele si butoanele radio nu intra aici: pe ele width:100% insemna ca bifa ia toata latimea randului, iar textul de langa ea ramanea cu zero — se rupea cate o litera pe rand si impingea pagina in jos (vazut la acordul cu termenii, in finalizare). */ .woocommerce form .form-row input:not([type=checkbox]):not([type=radio]),.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:9px;border:1px solid var(--linie);border-radius:var(--raza);width:100%} .woocommerce form .form-row input[type=checkbox],.woocommerce form .form-row input[type=radio]{width:auto;flex:0 0 auto} #add_payment_method .wc-proceed-to-checkout,.woocommerce-cart .wc-proceed-to-checkout{margin-top:14px} .woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{background:var(--verde);color:#fff;border:0;border-radius:var(--raza);padding:10px 16px;font-weight:600;cursor:pointer} .woocommerce .button:hover{background:var(--verde-inchis);color:#fff} /* --------------------------------------------------------------- 9. Subsol --------------------------------------------------------------- */ .subsol{background:var(--fundal-slab);border-top:1px solid var(--linie);margin-top:40px;padding:30px 0;font-size:14px;color:var(--text-slab)} .subsol .coloane{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px} .subsol h3{font-size:15px;color:var(--text)} .subsol ul{list-style:none;margin:0;padding:0} .subsol li{padding:3px 0} .subsol .jos{border-top:1px solid var(--linie);margin-top:22px;padding-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px} /* --------------------------------------------------------------- 10. Ecrane mici --------------------------------------------------------------- */ @media(max-width:1024px){ .pagina{grid-template-columns:1fr} .produs{grid-template-columns:1fr;gap:20px} } @media(max-width:768px){ .grila,ul.products{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .bara-sus{display:none} .antet .container{flex-wrap:wrap;min-height:0;padding-top:10px;padding-bottom:10px;gap:10px} .cautare{order:3;flex-basis:100%} .buton-meniu{display:block} .meniu{display:none;flex-direction:column;gap:0;width:100%} .meniu.deschis{display:flex} .meniu > li > a{padding:10px 0;border-bottom:1px solid var(--linie)} .nav-principal .container{flex-wrap:wrap;gap:10px;padding-top:8px;padding-bottom:8px} .categorii{width:100%} .categorii > button{width:100%;justify-content:space-between;border-radius:var(--raza)} .hero{padding:26px 18px} .hero h1,.hero .hero-titlu{font-size:23px} .grila{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} } /* --------------------------------------------------------------- 11. Filtre (widget-uri WooCommerce randate de tema) --------------------------------------------------------------- */ /* Stilul barei de filtre e in sectiunea 41; aici raman doar lucrurile comune. */ .numar-filtru{color:var(--text-slab);font-size:12px} .woocommerce-ordering select{padding:8px;border:1px solid var(--linie);border-radius:8px} /* --------------------------------------------------------------- 12. Pagina de produs --------------------------------------------------------------- */ .produs .rezumat h1{font-size:24px;margin-bottom:6px} .produs .stare-instock{color:var(--verde);font-weight:600} .produs .stare-onbackorder{color:#b26a00;font-weight:600} .produs .stare-outofstock{color:var(--rosu);font-weight:600} .produs .descriere-scurta{font-size:14.5px;color:var(--text-slab)} .produs .livrare{list-style:none;margin:18px 0;padding:14px;border:1px solid var(--linie);border-radius:var(--raza);font-size:14px;background:var(--fundal-slab)} .produs .livrare li{padding:3px 0} .specificatii table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px} .specificatii th{text-align:left;font-weight:600;color:var(--text-slab);padding:7px 10px 7px 0;border-bottom:1px solid var(--linie);width:42%;vertical-align:top} .specificatii td{padding:7px 0;border-bottom:1px solid var(--linie)} .specificatii h2{font-size:17px;margin-top:22px} .descriere-lunga{margin:10px 0 30px;max-width:80ch} .descriere-lunga h2{font-size:19px} .woocommerce-product-gallery__wrapper{display:grid;gap:10px} .flex-control-thumbs{display:flex;gap:8px;list-style:none;padding:0;margin:10px 0 0;flex-wrap:wrap} .flex-control-thumbs li{width:72px} .flex-control-thumbs img{border:1px solid var(--linie);border-radius:8px;cursor:pointer} /* --------------------------------------------------------------- 13. Cos si finalizare --------------------------------------------------------------- */ .woocommerce-cart-form__cart-item img{width:60px;height:auto} .cart_totals,.woocommerce-checkout-review-order{border:1px solid var(--linie);border-radius:var(--raza);padding:14px;margin-top:18px} .woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:24px} #customer_details h3,#order_review_heading{font-size:17px} .woocommerce-checkout #payment{border:1px solid var(--linie);border-radius:var(--raza);padding:14px;margin-top:14px} .woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 12px;padding:0} .woocommerce-checkout #payment ul.payment_methods li{padding:6px 0;border-bottom:1px solid var(--linie)} @media(max-width:768px){ .woocommerce-checkout .col2-set{grid-template-columns:1fr} .specificatii th{width:50%} } /* --------------------------------------------------------------- 14. Potriviri cu designul de pe live --------------------------------------------------------------- */ .bara-sus-dreapta{display:flex;gap:18px;align-items:center} .bara-sus-dreapta ul{display:flex;gap:16px;margin:0;padding:0;list-style:none} .antet .container{min-height:90px} .unelte{gap:22px} .unealta{display:flex;flex-direction:column;gap:0;line-height:1.3} .unealta-titlu{font-weight:600;color:var(--titlu);font-size:13px} .unealta-sub{font-size:12px;color:var(--text-slab)} .unealta.cos .unealta-sub{color:var(--verde);font-weight:600} .sigla img{max-height:64px} /* Pagina principala: coloana de categorii in stanga + hero in dreapta, ca pe live */ .acasa-sus{display:grid;grid-template-columns:270px 1fr;gap:20px;margin:18px 0} /* Lista de categorii de pe prima pagina foloseste ACELEASI reguli ca meniul din header (.categorii-panou, sectiunea 62). Inainte avea un set propriu: alt padding, alt font si un border-top pe link peste border-bottom-ul randului — adica doua linii lipite una de alta. Nu mai suprascriem nimic aici; ramane doar chenarul cutiei si titlul ei. */ .lista-categorii-acasa{border:1px solid var(--linie);border-radius:var(--raza);overflow:hidden} .lista-categorii-acasa h2{background:var(--verde);color:#fff;font-size:14px;text-transform:uppercase;margin:0;padding:12px 14px;letter-spacing:.3px} .lista-categorii-acasa .numar-filtru{color:var(--text-slab)} .hero{margin:0;border-radius:var(--raza);padding:46px 34px} .hero h1,.hero .hero-titlu{font-size:28px} .sectiune-cap h2{text-transform:uppercase;font-size:18px;letter-spacing:.3px} .sectiune-cap{border-bottom:1px solid var(--linie);padding-bottom:10px} .avantaje{gap:12px} .avantaj{border-radius:var(--raza);background:var(--fundal-slab);border-color:transparent} .avantaj b{color:var(--titlu)} .categorii-grila a{border-radius:var(--raza);color:var(--titlu)} .buton,.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{border-radius:var(--pilula);padding:12px 22px} .cautare button{border-radius:0 var(--raza) var(--raza) 0} .cautare input[type=search]{border-radius:var(--raza) 0 0 var(--raza)} .categorii > button{border-radius:var(--raza) var(--raza) 0 0;text-transform:uppercase;font-size:13px;letter-spacing:.3px} .produs .pret-mare{color:var(--verde);font-size:24px} .card .pret del{color:var(--text-slab)} .card .pret ins{color:var(--verde)} @media(max-width:1024px){ .acasa-sus{grid-template-columns:1fr} .lista-categorii-acasa{display:none} } /* --------------------------------------------------------------- 15. Cos si finalizare — asezare pe doua coloane --------------------------------------------------------------- */ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start} .woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1} .woocommerce-cart-form{grid-column:1} .cart-collaterals{grid-column:2;position:sticky;top:90px} .cart-collaterals .cart_totals{margin-top:0} .cart-collaterals h2{font-size:16px;text-transform:uppercase;letter-spacing:.3px} .woocommerce-cart-form__cart-item .product-thumbnail img{width:64px;border:1px solid var(--linie);border-radius:var(--raza)} .woocommerce-cart-form .product-name a{color:var(--titlu);font-weight:600} .woocommerce-cart-form .quantity input{width:70px;padding:8px;border:1px solid var(--linie);border-radius:var(--raza);text-align:center} .woocommerce-cart-form .actions .button{background:var(--alb);color:var(--titlu);border:1px solid var(--linie)} .woocommerce-cart-form .actions .button:hover{border-color:var(--verde);color:var(--verde);background:var(--alb)} .wc-proceed-to-checkout .checkout-button{display:block;text-align:center;font-size:15px;padding:13px} .cart_totals table.shop_table th{color:var(--text-slab);font-weight:600} .cart_totals .order-total .amount{color:var(--verde);font-size:18px} .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start} .woocommerce-checkout #customer_details{grid-column:1} .woocommerce-checkout #customer_details.col2-set{grid-template-columns:1fr} .woocommerce-checkout h3#order_review_heading{grid-column:2;margin:0} .woocommerce-checkout #order_review{grid-column:2;position:sticky;top:90px;border:1px solid var(--linie);border-radius:var(--raza);padding:16px} .woocommerce-checkout #order_review table.shop_table{margin-bottom:12px} .woocommerce-checkout .form-row label{font-size:13px;color:var(--titlu);font-weight:600} .woocommerce-checkout .place-order .button{width:100%;padding:14px;font-size:15px} .woocommerce-checkout .woocommerce-shipping-methods{list-style:none;margin:0;padding:0} .woocommerce-checkout .woocommerce-shipping-methods li{padding:4px 0} @media(max-width:1024px){ .woocommerce-cart .woocommerce,.woocommerce-checkout form.checkout{grid-template-columns:1fr} .cart-collaterals,.woocommerce-checkout #order_review,.woocommerce-checkout h3#order_review_heading{grid-column:1;position:static} } /* Bannerul cu imagine de fundal (imaginea vine din Personalizare) */ .hero.cu-imagine{background-size:cover;background-position:center;min-height:330px;align-content:center} .hero.cu-imagine h1{text-shadow:0 1px 3px rgba(0,0,0,.35)} .hero.cu-imagine p{opacity:.95;max-width:46ch} /* --------------------------------------------------------------- 16. Slider (fara biblioteci: derulare cu scroll-snap) --------------------------------------------------------------- */ .slider{position:relative;border-radius:var(--raza);overflow:hidden} .slider-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none} .slider-pista::-webkit-scrollbar{display:none} .slider-pista > .hero{flex:0 0 100%;scroll-snap-align:start;border-radius:0;margin:0} .slider-sageata{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:0;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--titlu);display:none} .slider:hover .slider-sageata{display:block} .slider-sageata.stanga{left:12px} .slider-sageata.dreapta{right:12px} .slider-puncte{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:7px;justify-content:center} .slider-puncte button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0} .slider-puncte button[aria-current=true]{background:#fff;width:22px;border-radius:5px} @media(max-width:768px){.slider-sageata{display:none!important}} /* --------------------------------------------------------------- 17. Zona editabila din admin (blocuri Gutenberg pe prima pagina) --------------------------------------------------------------- */ .continut-editabil{margin:34px 0} .continut-editabil > *{max-width:100%} .continut-editabil h2{font-size:21px;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--linie);padding-bottom:10px} .continut-editabil h3{font-size:19px;font-weight:600} .continut-editabil p{margin:0 0 14px} .continut-editabil img{border-radius:var(--raza)} .continut-editabil .wp-block-columns{display:flex;gap:20px;flex-wrap:wrap} .continut-editabil .wp-block-column{flex:1 1 220px;min-width:0} .continut-editabil .wp-block-button__link{display:inline-block;background:var(--verde);color:#fff;border-radius:var(--raza);padding:11px 18px;font-weight:600;text-decoration:none} .continut-editabil .wp-block-button__link:hover{background:var(--verde-inchis);color:#fff} .continut-editabil .wp-block-image{margin:0 0 16px} .continut-editabil ul,.continut-editabil ol{padding-left:20px;margin:0 0 14px} .continut-editabil .alignwide{width:100%} .continut-editabil .wp-block-cover{border-radius:var(--raza);overflow:hidden} /* --------------------------------------------------------------- 18. Aerisire generala (inspirat din iperinox: mai mult spatiu, colturi mari) --------------------------------------------------------------- */ .antet .container{min-height:96px;gap:24px} .cautare input[type=search]{height:50px;border-radius:var(--pilula) 0 0 var(--pilula);padding:12px 22px;border-color:var(--linie)} .cautare button{border-radius:0 var(--pilula) var(--pilula) 0;padding:0 26px} .unealta-titlu{font-size:15px} .unealta-sub{font-size:13px} .meniu > li > a{font-size:14px;padding:14px 0;text-transform:none;letter-spacing:0;color:var(--titlu)} .categorii > button{border-radius:var(--raza) var(--raza) 0 0;font-size:14px;text-transform:none;padding:13px 20px} .bara-sus .container{min-height:40px} .bara-sus,.bara-sus ul{font-size:14px} .hero{border-radius:var(--raza-card);padding:60px 44px} .hero h1,.hero .hero-titlu{font-size:44px;line-height:1.1} .hero p{font-size:17px;line-height:1.5} .slider{border-radius:var(--raza-card)} .hero.cu-imagine{min-height:420px} .lista-categorii-acasa{border-radius:var(--raza-card)} .lista-categorii-acasa h2{font-size:15px;padding:15px 18px;text-transform:none;font-weight:600} .acasa-sus{grid-template-columns:300px 1fr;gap:22px;margin:24px 0} .avantaje{gap:18px;margin:34px 0} .avantaj{border-radius:var(--raza-card);padding:20px;font-size:15px;background:var(--fundal-slab)} .avantaj b{font-size:16px;color:var(--titlu);margin-bottom:2px} .sectiune{margin:48px 0} .sectiune-cap{border-bottom:0;padding-bottom:0;margin-bottom:20px} .sectiune-cap h2{text-transform:none;font-size:28px;letter-spacing:-.3px} .sectiune-cap a{font-size:15px} .categorii-grila{gap:18px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .categorii-grila a{border-radius:var(--raza-card);padding:20px 16px;font-size:15px;background:var(--alb);border:1px solid var(--linie);box-shadow:var(--umbra)} .categorii-grila a:hover{box-shadow:var(--umbra-hover);border-color:var(--linie)} .grup-filtru{border-radius:var(--raza-card);padding:16px 18px} .grup-filtru h3{font-size:15px;text-transform:none;color:var(--titlu);font-weight:600} .grup-filtru li{font-size:15px} .pagina{grid-template-columns:290px 1fr;gap:32px} .produs{gap:44px} .produs .rezumat h1{font-size:30px} .produs .pret-mare{font-size:32px;color:var(--titlu);font-weight:700} .produs .pret-mare ins{color:var(--verde)} .produs .livrare{border-radius:var(--raza-card);padding:18px 20px;font-size:15px} .produs .galerie img{border-radius:var(--raza-card)} .specificatii table{font-size:15px} .subsol{font-size:15px;padding:40px 0} .card .poza img{mix-blend-mode:multiply} .woocommerce-cart-form__cart-item .product-thumbnail img{border-radius:var(--raza)} .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{border-radius:var(--raza-card);padding:20px} @media(max-width:1024px){ .acasa-sus{grid-template-columns:1fr} h1{font-size:30px} .hero h1,.hero .hero-titlu{font-size:30px} .produs .rezumat h1{font-size:24px} } @media(max-width:768px){ .grila,ul.products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px} .card{padding:12px;border-radius:16px} .eticheta{top:12px;left:12px} .hero{padding:32px 22px} .sectiune-cap h2{font-size:22px} } /* --------------------------------------------------------------- 19. Bara de sus cu iconite --------------------------------------------------------------- */ .bara-sus-stanga{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex-wrap:wrap} .bara-sus-stanga li{display:flex;align-items:center;gap:7px} .bara-sus svg{width:17px;height:17px;fill:none;stroke:var(--verde);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* --------------------------------------------------------------- 20. Buton de adaugare in cos, pe card --------------------------------------------------------------- */ .card{overflow:hidden} .card-actiuni{margin-top:12px} .card-actiuni .button,.card-actiuni .buton-card{display:block;width:100%;text-align:center;background:var(--verde);color:#fff;border:0;border-radius:var(--pilula);padding:11px 16px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none} .card-actiuni .button:hover{background:var(--verde-inchis);color:#fff} .card-actiuni .added_to_cart{display:block;text-align:center;margin-top:8px;font-size:14px;color:var(--verde);font-weight:600} .card-actiuni .button.loading{opacity:.7} @media(hover:hover){ .card-actiuni{opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s} .card:hover .card-actiuni,.card:focus-within .card-actiuni{opacity:1;transform:none} } /* --------------------------------------------------------------- 21. Meniul de categorii pe coloane (mega-meniu) --------------------------------------------------------------- */ @media(max-width:1024px){ } /* --------------------------------------------------------------- 22. Finalizare comanda — asezare pe doua coloane, in carduri --------------------------------------------------------------- */ .woocommerce-checkout .continut-magazin > .woocommerce{max-width:100%} .woocommerce-checkout h1{margin-bottom:4px} .woocommerce-checkout .pagina{margin-top:10px} .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:26px;align-items:start} .woocommerce-checkout .woocommerce-form-coupon-toggle{grid-column:1/-1;margin:0} .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{grid-column:1/-1} .woocommerce-checkout #customer_details{grid-column:1;grid-row:2/span 2} .woocommerce-checkout h3#order_review_heading{grid-column:2;grid-row:2;font-size:19px;margin:0 0 12px} .woocommerce-checkout #order_review{grid-column:2;grid-row:3;position:sticky;top:100px} /* Cardul cu datele clientului */ .woocommerce-checkout #customer_details{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:26px;box-shadow:var(--umbra)} .woocommerce-checkout #customer_details.col2-set{display:block} .woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2{width:100%;float:none} .woocommerce-checkout #customer_details h3{font-size:20px;margin:0 0 18px;color:var(--titlu)} .woocommerce-checkout #customer_details .col-2 h3{margin-top:26px;padding-top:22px;border-top:1px solid var(--linie)} /* Campurile: doua coloane, cu cele lungi pe toata latimea */ .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .woocommerce-checkout .form-row{margin:0;display:grid;gap:6px} #billing_company_field,#billing_country_field,#billing_address_1_field,#billing_address_2_field, #shipping_company_field,#shipping_country_field,#shipping_address_1_field,#shipping_address_2_field, .woocommerce-additional-fields .form-row{grid-column:1/-1} /* Campurile puse de SmartBill (Tip client, CIF, Denumire companie, Nr. reg. com.) stau tot pe toata latimea. Nu ne luam dupa clasa `form-row-wide`, desi o au: pe site-ul asta o are aproape fiecare camp, iar formularul ar ajunge pe o singura coloana. Le prindem dupa numele lor, ca sa nu mai fie nevoie sa adaugam manual fiecare camp nou al pluginului. */ .woocommerce-checkout [id^="smartbill_"][id$="_field"]{grid-column:1/-1} .woocommerce-checkout .form-row label{font-size:14px;font-weight:600;color:var(--titlu)} .woocommerce-checkout .form-row .required{color:var(--rosu);text-decoration:none} .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single{height:48px;padding:12px 14px;border:1px solid var(--linie);border-radius:var(--raza);background:var(--alb);font-size:15px} .woocommerce-checkout .form-row textarea{height:96px;resize:vertical} .woocommerce-checkout .form-row input.input-text:focus,.woocommerce-checkout .form-row select:focus,.woocommerce-checkout .form-row textarea:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 3px rgba(67,150,101,.12)} .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:24px;padding-left:0} .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px} .woocommerce-additional-fields h3{font-size:18px} /* Cardul cu sumarul comenzii */ .woocommerce-checkout #order_review{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:22px;box-shadow:var(--umbra)} .woocommerce-checkout #order_review table.shop_table{border:0;font-size:15px} .woocommerce-checkout #order_review table.shop_table thead{display:none} .woocommerce-checkout #order_review table.shop_table th,.woocommerce-checkout #order_review table.shop_table td{border:0;border-bottom:1px solid var(--linie);padding:12px 0;vertical-align:top} .woocommerce-checkout #order_review .product-name{color:var(--titlu);line-height:1.4} .woocommerce-checkout #order_review .product-total{text-align:right;white-space:nowrap;font-weight:600;color:var(--titlu)} .woocommerce-checkout #order_review .cart-subtotal th,.woocommerce-checkout #order_review .cart-subtotal td{color:var(--text-slab);font-weight:500} .woocommerce-checkout #order_review .order-total th{font-size:17px;color:var(--titlu)} .woocommerce-checkout #order_review .order-total td{text-align:right;font-size:21px;font-weight:700;color:var(--titlu)} .woocommerce-checkout #order_review .order-total .amount{color:var(--titlu)} .woocommerce-checkout #order_review tr.shipping th{padding-top:16px} /* Metodele de livrare si de plata: optiuni in chenar, ca la magazinele moderne */ #shipping_method{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px} #shipping_method li{border:1px solid var(--linie);border-radius:var(--raza);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;cursor:pointer;transition:border-color .15s,background .15s} #shipping_method li:hover{border-color:var(--verde)} #shipping_method li:has(input:checked){border-color:var(--verde);background:rgba(67,150,101,.06)} #shipping_method li label{font-weight:500;color:var(--titlu);cursor:pointer} #shipping_method li .amount{font-weight:600} .woocommerce-shipping-destination{font-size:13px;color:var(--text-slab);margin-top:8px} .woocommerce-checkout #payment{background:transparent;border:0;padding:0;margin-top:18px} .woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:0;display:grid;gap:10px} .woocommerce-checkout #payment ul.payment_methods li{border:1px solid var(--linie);border-radius:var(--raza);padding:14px;list-style:none;transition:border-color .15s,background .15s} .woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--verde)} .woocommerce-checkout #payment ul.payment_methods li:has(input:checked){border-color:var(--verde);background:rgba(67,150,101,.06)} .woocommerce-checkout #payment ul.payment_methods li label{font-weight:600;color:var(--titlu);cursor:pointer;display:inline-flex;align-items:center;gap:8px} .woocommerce-checkout #payment .payment_box{background:transparent;margin:8px 0 0;padding:0;font-size:14px;color:var(--text-slab)} .woocommerce-checkout #payment .payment_box::before{display:none} .woocommerce-checkout #payment .woocommerce-privacy-policy-text{font-size:13px;color:var(--text-slab);margin-top:14px} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:12px;font-size:14px} .woocommerce-checkout .validate-required.woocommerce-validated input{border-color:var(--verde)} .woocommerce-checkout .place-order{padding-top:14px} .woocommerce-checkout #place_order{width:100%;padding:16px;font-size:17px;border-radius:var(--pilula)} .woocommerce-checkout .plata-sigura{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px;color:var(--text-slab)} .woocommerce-checkout .plata-sigura svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:1.8} @media(max-width:1024px){ .woocommerce-checkout form.checkout{grid-template-columns:1fr} .woocommerce-checkout #customer_details,.woocommerce-checkout h3#order_review_heading,.woocommerce-checkout #order_review{grid-column:1;grid-row:auto;position:static} .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr} } /* --------------------------------------------------------------- 23. Cosul — acelasi limbaj vizual ca finalizarea --------------------------------------------------------------- */ .woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1fr) 380px;gap:26px} .woocommerce-cart-form{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:22px;box-shadow:var(--umbra)} .woocommerce-cart-form table.shop_table{border:0;font-size:15px} .woocommerce-cart-form table.shop_table thead th{border:0;border-bottom:1px solid var(--linie);color:var(--text-slab);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.3px;padding:0 10px 12px} .woocommerce-cart-form table.shop_table td{border:0;border-bottom:1px solid var(--linie);padding:16px 10px;vertical-align:middle} .woocommerce-cart-form__cart-item .product-thumbnail img{width:74px;border-radius:var(--raza);border:1px solid var(--linie)} .woocommerce-cart-form .product-name a{font-size:15px;line-height:1.35} .woocommerce-cart-form .product-price,.woocommerce-cart-form .product-subtotal{white-space:nowrap;color:var(--titlu);font-weight:600} .woocommerce-cart-form .product-remove a{color:var(--text-slab);font-size:20px;text-decoration:none} .woocommerce-cart-form .product-remove a:hover{color:var(--rosu)} .woocommerce-cart-form .quantity input{height:44px;border-radius:var(--raza)} .woocommerce-cart-form .actions{padding-top:18px!important;display:flex;gap:12px;flex-wrap:wrap;align-items:center} .woocommerce-cart-form .coupon{display:flex;gap:10px;flex:1;min-width:260px} .woocommerce-cart-form .coupon input{height:46px;border:1px solid var(--linie);border-radius:var(--pilula);padding:0 18px;flex:1;min-width:0} .cart-collaterals .cart_totals{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:22px;box-shadow:var(--umbra)} .cart-collaterals h2{font-size:19px;text-transform:none;margin-bottom:14px} .cart_totals table.shop_table{border:0;font-size:15px} .cart_totals table.shop_table th,.cart_totals table.shop_table td{border:0;border-bottom:1px solid var(--linie);padding:12px 0} .cart_totals table.shop_table td{text-align:right;font-weight:600;color:var(--titlu)} .cart_totals .order-total th{font-size:17px} .cart_totals .order-total td{font-size:21px;font-weight:700} .cart_totals .shipping td{text-align:left;font-weight:400} .wc-proceed-to-checkout{margin-top:16px} .wc-proceed-to-checkout .checkout-button{border-radius:var(--pilula);padding:15px;font-size:16px} .woocommerce-cart .cart-empty{font-size:18px;color:var(--titlu)} /* --------------------------------------------------------------- 24. Container mai lat + bara de categorii in doua nuante de verde --------------------------------------------------------------- */ :root{--lat:1480px;--verde-bara:#2f6b4a} .nav-principal{background:var(--verde-bara);border-bottom:0} .nav-principal .container{gap:0;align-items:stretch} .categorii > button{background:var(--verde);color:#fff;border-radius:0;height:100%;padding:15px 22px;font-size:15px;font-weight:600;min-width:250px;justify-content:space-between} .categorii > button:hover{background:var(--verde-inchis)} .meniu{margin-left:26px} .meniu > li > a{color:#fff;opacity:.92;font-size:15px;padding:15px 0} .meniu > li > a:hover{opacity:1;color:#fff} .meniu > li{display:flex;align-items:center;margin-right:26px} .meniu .current-menu-item > a{color:#fff;opacity:1;font-weight:600} @media(max-width:768px){ .nav-principal .container{flex-direction:column;align-items:stretch;padding-top:0;padding-bottom:0} .categorii > button{min-width:0;width:100%;padding:13px 16px} .meniu{margin-left:0;padding-bottom:8px} .meniu > li > a{border-bottom:1px solid rgba(255,255,255,.15)} } /* --------------------------------------------------------------- 25. Articole de blog pe prima pagina --------------------------------------------------------------- */ .articole-grila{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .articol-card{border:1px solid var(--linie);border-radius:var(--raza-card);overflow:hidden;background:var(--alb);box-shadow:var(--umbra);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s} .articol-card:hover{box-shadow:var(--umbra-hover);transform:translateY(-2px)} .articol-poza{display:block;aspect-ratio:16/9;background:var(--fundal-slab);overflow:hidden} .articol-poza img{width:100%;height:100%;object-fit:cover} .articol-text{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1} .articol-data{font-size:13px;color:var(--text-slab)} .articol-card h3{font-size:17px;line-height:1.35;margin:0} .articol-card h3 a{color:var(--titlu)} .articol-card h3 a:hover{color:var(--verde)} .articol-card p{margin:0;font-size:15px;color:var(--text)} .articol-link{margin-top:auto;color:var(--verde);font-weight:600;font-size:15px} /* --------------------------------------------------------------- 26. Subsol modern --------------------------------------------------------------- */ .subsol{background:#0f1b15;border-top:0;color:rgba(255,255,255,.72);margin-top:56px;padding:48px 0 26px} .subsol h3{color:#fff;font-size:16px;margin-bottom:14px} .subsol h4{color:#fff;font-size:14px;margin:0 0 10px;font-weight:600} .subsol a{color:rgba(255,255,255,.72)} .subsol a:hover{color:#fff} .subsol .coloane{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px} .subsol .sigla-subsol{max-height:54px;width:auto;background:#fff;border-radius:var(--raza);padding:8px 10px;margin-bottom:14px} .coloana-brand p{font-size:14.5px;line-height:1.6;margin:0 0 16px;max-width:42ch} .retele{display:flex;gap:10px;list-style:none;margin:0;padding:0} .retele a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22)} .retele a:hover{background:var(--verde);border-color:var(--verde)} .retele svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .subsol li{padding:4px 0;font-size:14.5px} .subsol .contact a{font-weight:600;color:#fff;font-size:16px} .banda-servicii{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:36px;padding:24px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)} .etichete{display:flex;flex-wrap:wrap;gap:8px} .etichete span{border:1px solid rgba(255,255,255,.22);border-radius:var(--pilula);padding:5px 12px;font-size:13px} .anpc{display:flex;flex-wrap:wrap;gap:8px} .anpc a{border:1px solid rgba(255,255,255,.22);border-radius:var(--pilula);padding:5px 12px;font-size:13px} .anpc a:hover{border-color:var(--verde);background:var(--verde);color:#fff} .subsol .jos{border-top:0;margin-top:18px;padding-top:6px;font-size:13.5px;color:rgba(255,255,255,.55)} @media(max-width:1024px){.subsol .coloane{grid-template-columns:1fr 1fr}} @media(max-width:600px){.subsol .coloane{grid-template-columns:1fr}} /* --------------------------------------------------------------- 27. Categorii cu imagine, avantaje cu iconite --------------------------------------------------------------- */ .categorii-grila{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .categorie-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 14px 20px} .categorie-poza{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--fundal-slab);border-radius:calc(var(--raza-card) - 8px);overflow:hidden;margin-bottom:8px} .categorie-poza img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .categorie-nume{font-weight:600;color:var(--titlu);font-size:15px;line-height:1.3} .avantaj{display:flex;align-items:flex-start;gap:14px} .avantaj-icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(67,150,101,.1);display:flex;align-items:center;justify-content:center} .avantaj-icon svg{width:22px;height:22px;fill:none;stroke:var(--verde);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* --------------------------------------------------------------- 28. Sugestii la cautare --------------------------------------------------------------- */ .cautare{position:relative} .sugestii{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;background:var(--alb);border:1px solid var(--linie);border-radius:var(--raza-card);box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;max-height:70vh;overflow-y:auto} .sugestii.deschis{display:block} .sugestie{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--linie)} .sugestie:last-child{border-bottom:0} .sugestie:hover{background:var(--fundal-slab)} .sugestie img,.sugestie-gol{width:44px;height:44px;border-radius:8px;object-fit:contain;background:var(--fundal-slab);flex:0 0 auto} .sugestie-text{display:flex;flex-direction:column;gap:2px;min-width:0} .sugestie-titlu{font-size:14.5px;color:var(--titlu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sugestie-pret{font-size:14px;font-weight:600;color:var(--verde)} /* --------------------------------------------------------------- 29. Bara de jos, pe telefon --------------------------------------------------------------- */ .bara-mobil{display:none} @media(max-width:768px){ .bara-mobil{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--alb);border-top:1px solid var(--linie);box-shadow:0 -2px 12px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom)} .bara-mobil a,.bara-mobil button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;font-size:11.5px;color:var(--titlu);background:none;border:0;cursor:pointer;font-weight:500} .bara-mobil svg{width:22px;height:22px;fill:none;stroke:var(--titlu);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .bara-mobil .numar{position:absolute;transform:translate(14px,-4px);background:var(--verde);color:#fff;border-radius:999px;font-size:10px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px} body{padding-bottom:64px} .subsol{margin-bottom:0} } .sugestie-pret del{color:var(--text-slab);font-weight:400;font-size:13px;margin-left:4px} /* --------------------------------------------------------------- 30. Ecrane mici — aceste reguli stau la FINAL, ca sa bata regulile de mai sus adaugate ulterior (ordinea conteaza in CSS). --------------------------------------------------------------- */ @media(max-width:1024px){ .pagina,.pagina.fara-bara{grid-template-columns:1fr;gap:20px} .produs{grid-template-columns:1fr;gap:20px} .acasa-sus{grid-template-columns:1fr} .woocommerce-cart .woocommerce,.woocommerce-checkout form.checkout{grid-template-columns:1fr} .woocommerce-checkout #customer_details,.woocommerce-checkout h3#order_review_heading,.woocommerce-checkout #order_review, .cart-collaterals{grid-column:1;grid-row:auto;position:static} .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr} .bara-laterala{order:2} .continut-magazin{order:1} } @media(max-width:768px){ .grila,ul.products{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px} .card{padding:12px;border-radius:16px} .card .titlu{font-size:14px} .card .pret{font-size:17px} .card-actiuni{opacity:1;transform:none} .categorii-grila{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px} .avantaje{grid-template-columns:1fr 1fr;gap:10px} .avantaj{padding:14px;font-size:13.5px;gap:10px} .avantaj-icon{width:36px;height:36px} .hero{padding:28px 20px} .hero h1,.hero .hero-titlu{font-size:26px} .hero.cu-imagine{min-height:300px} .articole-grila{grid-template-columns:1fr} .rezultate{flex-direction:column;align-items:flex-start;gap:8px} .banda-servicii{gap:18px} } html,body{overflow-x:hidden;max-width:100%} /* --------------------------------------------------------------- 31. Cardul de produs: colturi si spatiere mai mici, pret + buton pe un rand --------------------------------------------------------------- */ :root{--raza-card:14px} .card{padding:12px;border-radius:var(--raza-card)} .card .poza{margin-bottom:10px;border-radius:8px} .card .titlu{font-size:14.5px;margin:0 0 10px;line-height:1.35} .eticheta{top:12px;left:12px;font-size:12px;padding:4px 10px} .card-jos{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .card .pret{margin:0;display:flex;flex-direction:column;line-height:1.15;min-width:0} .pret-vechi{font-size:13px;color:var(--rosu);text-decoration:line-through;margin-bottom:2px} .pret-nou{font-size:20px;font-weight:700;color:var(--titlu);letter-spacing:-.3px} .pret-sufix{font-size:11.5px;color:var(--text-slab);margin-top:2px} .buton-cos{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s} .buton-cos:hover{background:var(--verde-inchis);transform:translateY(-1px)} .buton-cos svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .buton-cos.buton-vezi{background:var(--alb);border:1px solid var(--linie)} .buton-cos.buton-vezi svg{stroke:var(--titlu)} .buton-cos.buton-vezi:hover{border-color:var(--verde);background:var(--alb)} .buton-cos.buton-vezi:hover svg{stroke:var(--verde)} .buton-cos.loading{opacity:.6} .buton-cos.added::after{content:"\2713";color:#fff;font-weight:700} .card .added_to_cart{display:none} .card .stoc-mic{margin-top:8px} /* --------------------------------------------------------------- 32. Bara de promotii de sub banner --------------------------------------------------------------- */ .bara-promo{display:flex;align-items:center;gap:16px;margin:18px 0 0;padding:14px 18px;border-radius:var(--raza-card); /* Era un gradient rosu-portocaliu, acelasi registru cu al concurentei. Acum e inchis, din familia subsolului, cu verdele casei pe eticheta si pe iconita. */ background:linear-gradient(100deg,#0f1b15 0%,#183227 52%,#21503a 100%);color:#fff; box-shadow:0 6px 18px rgba(15,27,21,.2)} .bara-promo:hover{color:#fff;filter:brightness(1.03)} .promo-icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center} .promo-icon svg{width:24px;height:24px;fill:none;stroke:var(--verde);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .promo-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .promo-eticheta{font-size:11.5px;letter-spacing:1.4px;font-weight:700;color:#7fd6a4} .promo-titlu{font-size:17px;font-weight:700;line-height:1.25} .promo-buton{flex:0 0 auto;background:var(--verde);color:#fff;border-radius:var(--pilula);padding:10px 22px;font-weight:600;font-size:15px} @media(max-width:768px){ .bara-promo{gap:12px;padding:12px 14px} .promo-icon{width:38px;height:38px;border-radius:10px} .promo-titlu{font-size:15px} .promo-buton{padding:8px 14px;font-size:14px} } /* --------------------------------------------------------------- 33. Widgetul de categorii de pe prima pagina: mai inalt, cu separatoare fine --------------------------------------------------------------- */ .acasa-sus{align-items:stretch} .acasa-sus .slider{height:100%} .acasa-sus .slider-pista > .hero{height:100%} /* --------------------------------------------------------------- 34. Popup dupa adaugarea in cos --------------------------------------------------------------- */ .popup-cos{position:fixed;inset:0;z-index:200;background:rgba(15,25,20,.45);display:flex;align-items:center;justify-content:center;padding:20px;animation:vq-aparitie .14s ease-out} @keyframes vq-aparitie{from{opacity:0}to{opacity:1}} .popup-cutie{background:var(--alb);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.22);width:100%;max-width:620px;padding:22px 24px 24px;animation:vq-urca .16s ease-out} @keyframes vq-urca{from{transform:translateY(8px)}to{transform:none}} .popup-cap{display:flex;align-items:center;gap:12px;margin-bottom:18px} .popup-cap strong{font-size:19px;color:var(--titlu);flex:1} .popup-bifa{width:36px;height:36px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .popup-bifa svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .popup-inchide{width:36px;height:36px;border-radius:50%;border:1px solid var(--linie);background:var(--alb);font-size:20px;line-height:1;cursor:pointer;color:var(--text-slab)} .popup-inchide:hover{border-color:var(--titlu);color:var(--titlu)} .popup-produs{display:flex;gap:16px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--linie)} .popup-produs img{width:72px;height:72px;object-fit:contain;border:1px solid var(--linie);border-radius:10px;background:var(--fundal-slab);flex:0 0 auto} .popup-detalii{display:flex;flex-direction:column;gap:3px;min-width:0} .popup-titlu{font-size:16px;color:var(--titlu);font-weight:600;line-height:1.35} .popup-pret-vechi{font-size:13px;color:var(--text-slab);text-decoration:line-through} .popup-pret{font-size:19px;font-weight:700;color:var(--verde)} .popup-cantitate{font-size:14px;color:var(--text-slab)} .popup-butoane{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px} .popup-butoane .buton{width:100%} .popup-cos-link{display:inline-flex;align-items:center;justify-content:center;gap:9px} .popup-cos-link svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .popup-numar{background:rgba(255,255,255,.25);border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:0 7px} body.popup-deschis{overflow:hidden} @media(max-width:600px){ .popup-cutie{padding:18px} .popup-butoane{grid-template-columns:1fr} .popup-cap strong{font-size:17px} } /* Taburile de pe pagina de produs (inclusiv cele adaugate de pluginuri) */ .tab-uri{margin:36px 0} .woocommerce-tabs ul.tabs{display:flex;gap:26px;list-style:none;margin:0 0 20px;padding:0;border-bottom:1px solid var(--linie);flex-wrap:wrap} .woocommerce-tabs ul.tabs li{padding:0 0 12px;font-weight:600;font-size:16px} .woocommerce-tabs ul.tabs li a{color:var(--text-slab)} .woocommerce-tabs ul.tabs li.active{box-shadow:inset 0 -2px 0 var(--verde)} .woocommerce-tabs ul.tabs li.active a{color:var(--titlu)} .woocommerce-tabs .panel{max-width:80ch;font-size:15.5px} .woocommerce-tabs .panel h2{font-size:20px;margin-bottom:12px} .woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse;font-size:15px} .woocommerce-tabs table.shop_attributes th{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--linie);color:var(--text-slab);font-weight:600;width:40%} .woocommerce-tabs table.shop_attributes td{padding:8px 0;border-bottom:1px solid var(--linie)} .woocommerce-tabs table.shop_attributes p{margin:0} @media(max-width:768px){.woocommerce-tabs ul.tabs{gap:16px}.woocommerce-tabs ul.tabs li{font-size:14.5px}} /* --------------------------------------------------------------- 35. Pagina de produs — aranjare --------------------------------------------------------------- */ .produs{align-items:start} .produs .galerie{position:relative} .produs .galerie .onsale{position:absolute;top:14px;left:14px;z-index:3;background:var(--rosu);color:#fff;border-radius:var(--pilula);padding:6px 14px;font-size:13px;font-weight:600;line-height:1.3} .produs .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Pretul: vechi mic si taiat, nou mare, "TVA inclus" discret */ .produs .pret-mare{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 6px} .produs .pret-mare del{font-size:17px;color:var(--text-slab);font-weight:400;opacity:1} .produs .pret-mare ins{font-size:32px;font-weight:700;color:var(--verde);text-decoration:none} .produs .pret-mare > .amount{font-size:32px;font-weight:700;color:var(--titlu)} .produs .pret-mare .woocommerce-price-suffix{font-size:14px;font-weight:400;color:var(--text-slab)} .produs .descriere-scurta{font-size:15px;margin-bottom:18px} .produs .descriere-scurta p{margin:0} /* Variante: eticheta langa selector, selector mare */ .produs table.variations{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 14px} .produs table.variations tr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px} .produs table.variations th.label{padding:0;font-weight:600;color:var(--titlu);white-space:nowrap;min-width:90px;text-align:left} .produs table.variations td.value{padding:0;flex:1;min-width:220px;display:flex;align-items:center;gap:10px} .produs table.variations select{width:100%;max-width:360px;height:48px;border:1px solid var(--linie);border-radius:var(--raza);padding:0 14px;font-size:15px;background:var(--alb)} .produs .reset_variations{font-size:13px;color:var(--text-slab)} .produs .woocommerce-variation-price{width:100%;margin-bottom:12px} .produs .woocommerce-variation-price .amount{font-size:26px;font-weight:700;color:var(--verde)} .produs .woocommerce-variation-availability p{margin:0 0 10px;font-size:14px;color:var(--text-slab)} /* Cantitate + buton pe acelasi rand */ .produs form.cart,.produs .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0} .produs form.cart.variations_form{display:block} .produs .quantity{flex:0 0 auto;margin:0} .produs .quantity input.qty{height:52px;width:104px;border:1px solid var(--linie);border-radius:var(--raza);text-align:center;font-size:16px;font-weight:600;padding:0 8px} .produs .single_add_to_cart_button{height:52px;padding:0 32px;font-size:16px;font-weight:600;border-radius:var(--pilula);background:var(--verde);color:#fff;border:0;cursor:pointer} .produs .single_add_to_cart_button:hover{background:var(--verde-inchis)} .produs .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed} .produs .livrare{margin:22px 0 0} .produs .meta{font-size:14px;margin-bottom:6px} .produs .meta .stare-stoc{font-weight:600} @media(max-width:768px){ .produs .pret-mare ins,.produs .pret-mare > .amount{font-size:26px} .produs .single_add_to_cart_button{flex:1;padding:0 18px} .produs table.variations th.label{min-width:0} } /* --------------------------------------------------------------- 36. Galeria de produs fara slider (poza mare + miniaturi) --------------------------------------------------------------- */ .produs .galerie,.woocommerce-product-gallery{width:100%;max-width:100%;overflow:hidden} .woocommerce-product-gallery__wrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;width:100%!important;transform:none!important;margin:0} .woocommerce-product-gallery__image{margin:0} .woocommerce-product-gallery__image:first-child{grid-column:1/-1} .woocommerce-product-gallery__image img{width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb)} .woocommerce-product-gallery__image:not(:first-child) img{aspect-ratio:1;object-fit:contain;cursor:pointer;border-radius:10px;padding:4px} .woocommerce-product-gallery__image:not(:first-child) img:hover,.woocommerce-product-gallery__image img.activa{border-color:var(--verde)} .woocommerce-product-gallery .flex-viewport,.woocommerce-product-gallery .flex-control-thumbs{max-width:100%} .woocommerce-product-gallery__trigger{display:none} @media(max-width:768px){ .woocommerce-product-gallery__wrapper{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))} } /* --------------------------------------------------------------- 37. Taburi moderne, cu iconite --------------------------------------------------------------- */ .woocommerce-tabs{margin-top:10px} .woocommerce-tabs ul.tabs{display:flex;gap:10px;list-style:none;margin:0 0 18px;padding:0;border-bottom:0;flex-wrap:wrap} .woocommerce-tabs ul.tabs li{padding:0;margin:0;border:1px solid var(--linie);border-radius:var(--pilula);background:var(--alb);transition:border-color .15s,background .15s} .woocommerce-tabs ul.tabs li::before{content:"";display:inline-block;width:18px;height:18px;background-repeat:no-repeat;background-size:contain;vertical-align:-4px;margin:0 8px 0 16px} .woocommerce-tabs ul.tabs li a{display:inline-block;padding:11px 18px 11px 0;font-size:15px;font-weight:600;color:var(--text-slab)} .woocommerce-tabs ul.tabs li:hover{border-color:var(--verde)} .woocommerce-tabs ul.tabs li.active{border-color:var(--verde);background:rgba(67,150,101,.07);box-shadow:none} .woocommerce-tabs ul.tabs li.active a{color:var(--verde)} .woocommerce-tabs .panel{border:1px solid var(--linie);border-radius:var(--raza-card);padding:26px 28px;max-width:100%;box-shadow:var(--umbra)} .woocommerce-tabs .panel > h2:first-child{margin-top:0;font-size:20px} @media(max-width:768px){ .woocommerce-tabs ul.tabs{gap:8px} .woocommerce-tabs ul.tabs li a{padding:9px 14px 9px 0;font-size:14px} .woocommerce-tabs ul.tabs li::before{margin-left:12px;width:16px;height:16px} .woocommerce-tabs .panel{padding:18px} } /* --------------------------------------------------------------- 38. Tabelele scrise de client in admin (tabul "Specificatii") Normalizam marimile si spatierea, indiferent ce stiluri are HTML-ul introdus. --------------------------------------------------------------- */ .woocommerce-tabs .panel table{width:100%;border-collapse:collapse;margin:0;border:0} .woocommerce-tabs .panel table tr{border-bottom:1px solid var(--linie)} .woocommerce-tabs .panel table tr:last-child{border-bottom:0} .woocommerce-tabs .panel table tr:nth-child(odd){background:#fbfcfc} .woocommerce-tabs .panel table td,.woocommerce-tabs .panel table th{padding:11px 16px;border:0;vertical-align:top;text-align:left} .woocommerce-tabs .panel table td:first-child,.woocommerce-tabs .panel table th:first-child{width:38%;font-weight:600;color:var(--titlu)} .woocommerce-tabs .panel table td:last-child{color:var(--text)} /* HTML-ul din admin vine cu marimi de font amestecate (unele randuri mari, altele mici) */ .woocommerce-tabs .panel table,.woocommerce-tabs .panel table *{font-size:15px!important;line-height:1.5!important;font-family:inherit!important} .woocommerce-tabs .panel table b,.woocommerce-tabs .panel table strong{font-weight:600!important} .woocommerce-tabs .panel table p{margin:0!important} .woocommerce-tabs .panel table[border],.woocommerce-tabs .panel table td[style],.woocommerce-tabs .panel table th[style]{border:0!important;background:transparent!important} .woocommerce-tabs .panel ul{padding-left:20px} .woocommerce-tabs .panel li{padding:2px 0} @media(max-width:600px){ .woocommerce-tabs .panel table td:first-child,.woocommerce-tabs .panel table th:first-child{width:45%} .woocommerce-tabs .panel table td,.woocommerce-tabs .panel table th{padding:9px 10px} } .woocommerce-tabs ul.tabs li.description_tab::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.description_tab.active::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.sdx_specificatii_extra_tab::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.sdx_specificatii_extra_tab.active::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.additional_information_tab::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.additional_information_tab.active::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.sdx_aplicatii_extra_tab::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.sdx_aplicatii_extra_tab.active::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.reviews_tab::before{background-image:url("data:image/svg+xml,")} .woocommerce-tabs ul.tabs li.reviews_tab.active::before{background-image:url("data:image/svg+xml,")} /* --------------------------------------------------------------- 39. Carusele de produse (upsell / similare) --------------------------------------------------------------- */ .carusel-sectiune .sectiune-cap{align-items:center} .carusel-sageti{display:flex;gap:8px} .carusel-sageata{width:38px;height:38px;border-radius:50%;border:1px solid var(--linie);background:var(--alb);font-size:20px;line-height:1;color:var(--titlu);cursor:pointer;transition:border-color .15s,opacity .15s} .carusel-sageata:hover:not(:disabled){border-color:var(--verde);color:var(--verde)} .carusel-sageata:disabled{opacity:.35;cursor:default} .grila.carusel{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:18px;padding:4px 2px 10px;scrollbar-width:thin;scroll-behavior:smooth} .grila.carusel::-webkit-scrollbar{height:6px} .grila.carusel::-webkit-scrollbar-thumb{background:var(--linie);border-radius:3px} .grila.carusel > .card{flex:0 0 250px;scroll-snap-align:start} @media(max-width:768px){ .grila.carusel{gap:12px} .grila.carusel > .card{flex:0 0 185px} .carusel-sageti{display:none} } /* --------------------------------------------------------------- 40. Coloanele nu se mai lasa largite de continut In CSS Grid, un element are implicit min-width:auto, adica nu poate deveni mai ingust decat continutul lui. Cand galeria a ramas fara slider, imaginile si-au impus latimea naturala si au intins toata pagina. min-width:0 opreste asta. --------------------------------------------------------------- */ .pagina > *,.continut-magazin,.produs > *,.grila > *,.acasa-sus > *,.woocommerce-cart .woocommerce > *,.woocommerce-checkout form.checkout > *{min-width:0} .produs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .woocommerce-product-gallery,.woocommerce-product-gallery__wrapper{min-width:0;max-width:100%} .woocommerce-product-gallery__image:first-child img{max-height:620px;object-fit:contain} .woocommerce-tabs,.woocommerce-tabs .panel{min-width:0;max-width:100%} .woocommerce-tabs .panel img{max-width:100%;height:auto} /* --------------------------------------------------------------- 41. Bara de filtre: grupuri pliabile, bife, numere aliniate --------------------------------------------------------------- */ .bara-laterala{display:flex;flex-direction:column;gap:0;border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);box-shadow:var(--umbra);overflow:hidden;align-self:start} .filtre-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linie);background:var(--fundal-slab)} .filtre-cap h2{font-size:15px;margin:0;text-transform:none;letter-spacing:0} .filtre-cap .curata{font-size:13px;color:var(--rosu);font-weight:600} .filtre-cap .curata:hover{text-decoration:underline} .bara-laterala .grup-filtru{border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:0;margin:0;box-shadow:none;background:var(--alb)} .bara-laterala .grup-filtru:last-child{border-bottom:0} .bara-laterala .grup-filtru > summary{list-style:none;cursor:pointer;padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--titlu);display:flex;align-items:center;justify-content:space-between;text-transform:none;margin:0;user-select:none} .bara-laterala .grup-filtru > summary::-webkit-details-marker{display:none} .bara-laterala .grup-filtru > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--text-slab);border-bottom:2px solid var(--text-slab);transform:rotate(45deg);transition:transform .15s;margin-left:10px;flex:0 0 auto} .bara-laterala .grup-filtru[open] > summary::after{transform:rotate(-135deg)} .bara-laterala .grup-filtru > summary:hover{background:var(--fundal-slab)} .bara-laterala .grup-filtru ul{list-style:none;margin:0;padding:0 8px 12px;max-height:260px;overflow-y:auto} .bara-laterala .grup-filtru li{padding:0} /* Optiunile de filtru: bifa + nume + numar, ca sa se vada ca se pot alege mai multe */ .bara-laterala .filtru,.bara-laterala .categorie-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--text)} .bara-laterala .filtru:hover,.bara-laterala .categorie-link:hover{background:var(--fundal-slab);color:var(--titlu)} .bara-laterala .filtru .bifa{flex:0 0 auto;width:17px;height:17px;border:1.5px solid #cfd4d6;border-radius:5px;background:var(--alb);position:relative} .bara-laterala .filtru.ales .bifa,.bara-laterala li.chosen .filtru .bifa{border-color:var(--verde);background:var(--verde)} .bara-laterala .filtru.ales .bifa::after,.bara-laterala li.chosen .filtru .bifa::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .bara-laterala .filtru-nume{flex:1;min-width:0} .bara-laterala .count{color:var(--text-slab);font-size:12.5px;flex:0 0 auto} .bara-laterala li.chosen .filtru,.bara-laterala .filtru.ales{color:var(--titlu);font-weight:600} .grup-categorii .categorie-link{font-weight:500} /* Filtrele active, ca niste etichete de sters */ .grup-active ul{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px} .grup-active li{list-style:none} .grup-active a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);border-radius:var(--pilula);padding:5px 12px;font-size:13px;color:var(--titlu)} .grup-active a::after{content:"\00d7";color:var(--text-slab);font-size:15px} .grup-active a:hover{border-color:var(--rosu);color:var(--rosu)} .grup-active a:hover::after{color:var(--rosu)} /* Pretul */ .filtru-pret{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px} .filtru-pret input{width:calc(50% - 4px);height:44px;padding:0 12px;border:1px solid var(--linie);border-radius:var(--raza);font-size:14px} .filtru-pret .aplica-pret{width:100%;background:var(--alb);color:var(--titlu);border:1px solid var(--linie);padding:11px;font-size:14px} .filtru-pret .aplica-pret:hover{border-color:var(--verde);color:var(--verde);background:var(--alb)} @media(max-width:1024px){ .bara-laterala .grup-filtru ul{max-height:220px} } /* --------------------------------------------------------------- 42. Filtrele pe telefon: panou peste pagina, deschis de un buton --------------------------------------------------------------- */ .deschide-filtre,.inchide-filtre,.filtre-jos,.filtre-fundal{display:none} .rezultate-actiuni{display:flex;align-items:center;gap:10px} @media(max-width:1024px){ .deschide-filtre{display:inline-flex;align-items:center;gap:8px;background:var(--alb);border:1px solid var(--linie);border-radius:var(--pilula);padding:10px 16px;font-size:14px;font-weight:600;color:var(--titlu);cursor:pointer;font-family:inherit} .deschide-filtre .punct{width:7px;height:7px;border-radius:50%;background:var(--verde)} /* Inaltime explicita: cu top/bottom panoul lua inaltimea continutului si nu se mai derula. */ .bara-laterala{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:min(86vw,360px);z-index:70;border-radius:0;border:0;transform:translateX(-102%);transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 40px rgba(0,0,0,.18)} body.filtre-deschise,html:has(body.filtre-deschise){overflow:hidden} body.filtre-deschise .bara-laterala{transform:none} .filtre-fundal{display:block;position:fixed;inset:0;background:rgba(17,24,28,.45);z-index:69} .filtre-fundal[hidden]{display:none} .filtre-cap{position:sticky;top:0;z-index:2} .inchide-filtre{display:block;background:none;border:0;font-size:26px;line-height:1;color:var(--text-slab);cursor:pointer;padding:0 2px;font-family:inherit} .filtre-jos{display:block;position:sticky;bottom:0;background:var(--alb);border-top:1px solid var(--linie);padding:12px 18px} .filtre-jos .buton{width:100%} /* Bara de jos de pe telefon sta peste panou (z 80): o ascundem cat filtram. */ body.filtre-deschise .bara-mobil{display:none} .bara-laterala .grup-filtru ul{max-height:none} } /* --------------------------------------------------------------- 43. Text scris de client (descrieri de categorie, ghiduri) Clientul scrie in admin cu marimi si stiluri amestecate, deci normalizam aici, ca la tabelele din taburile de produs. --------------------------------------------------------------- */ .text-bogat{color:var(--text);font-size:15.5px;line-height:1.7} .text-bogat > *:first-child{margin-top:0} .text-bogat > *:last-child{margin-bottom:0} .text-bogat p{margin:0 0 14px} .text-bogat h2{font-size:21px;color:var(--titlu);margin:28px 0 12px} .text-bogat h3{font-size:17.5px;color:var(--titlu);margin:22px 0 10px} .text-bogat h4{font-size:16px;color:var(--titlu);margin:18px 0 8px} .text-bogat a{color:var(--verde);text-decoration:underline;text-underline-offset:2px} .text-bogat ul,.text-bogat ol{margin:0 0 14px;padding-left:20px} .text-bogat li{margin:0 0 6px} .text-bogat img{max-width:100%;height:auto;border-radius:var(--raza)} .text-bogat strong{color:var(--titlu)} .text-bogat table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px;border:1px solid var(--linie);border-radius:var(--raza);overflow:hidden} .text-bogat table th{background:var(--fundal-slab);color:var(--titlu);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie)} .text-bogat table td{padding:10px 12px;border-bottom:1px solid var(--linie)} .text-bogat table tr:last-child td{border-bottom:0} .text-bogat table td,.text-bogat table th,.text-bogat table p,.text-bogat table span{font-size:14.5px!important;font-family:inherit!important} /* Descrierea scurta, sub titlu — pe toata latimea containerului */ .descriere-categorie{margin:0 0 24px} /* Ghidul de sub produse: card cu umbra, taiat pana ceri mai mult */ .descriere-jos{position:relative;margin:36px 0 0;padding:30px 32px;background:var(--alb);border:1px solid var(--linie);border-radius:var(--raza-card);box-shadow:0 6px 24px rgba(17,24,28,.07)} .descriere-jos .mai-mult{display:none;margin:18px auto 0;padding:11px 26px;border:1px solid var(--linie);border-radius:var(--pilula);font-family:inherit;font-size:14.5px;font-weight:600;color:var(--titlu);background:var(--alb);cursor:pointer;transition:border-color .15s,color .15s} .descriere-jos .mai-mult:hover{border-color:var(--verde);color:var(--verde)} .descriere-jos .mai-mult::after{content:"";display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:9px;vertical-align:1px} .descriere-jos.deschis .mai-mult::after{transform:rotate(-135deg) translate(-2px,-2px)} /* Clasa vine din JavaScript: fara el textul ramane intreg, nu blocat. */ .descriere-jos.colapsabil .mai-mult{display:block} .descriere-jos.colapsabil:not(.deschis) .text-bogat{max-height:190px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 110px,transparent);mask-image:linear-gradient(#000 110px,transparent)} @media(max-width:768px){ .descriere-jos{padding:20px 18px;margin-top:26px;border-radius:var(--raza)} .descriere-jos.colapsabil:not(.deschis) .text-bogat{max-height:160px} .text-bogat{font-size:15px} .text-bogat h2{font-size:19px} /* Tabelele scrise de client pot fi late: le lasam sa se deruleze, nu sa sparga pagina. */ .text-bogat table{display:block;overflow-x:auto;white-space:nowrap} } /* --------------------------------------------------------------- 44. Paginatia de pe categorii --------------------------------------------------------------- */ .woocommerce-pagination,.paginare{margin:34px 0 0} .woocommerce-pagination ul.page-numbers,.paginare ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0;border:0} .woocommerce-pagination ul.page-numbers li,.paginare ul.page-numbers li{list-style:none;margin:0;padding:0;border:0} .woocommerce-pagination .page-numbers,.paginare .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--linie);border-radius:12px;background:var(--alb);color:var(--titlu);font-size:15px;font-weight:600;transition:border-color .15s,color .15s,background .15s} .woocommerce-pagination a.page-numbers:hover,.paginare a.page-numbers:hover{border-color:var(--verde);color:var(--verde)} .woocommerce-pagination .page-numbers.current,.paginare .page-numbers.current{background:var(--verde);border-color:var(--verde);color:#fff} .woocommerce-pagination .page-numbers.dots,.paginare .page-numbers.dots{border-color:transparent;background:none;min-width:24px;padding:0;color:var(--text-slab)} .woocommerce-pagination .page-numbers.next,.woocommerce-pagination .page-numbers.prev,.paginare .next,.paginare .prev{font-size:18px;line-height:1} @media(max-width:768px){ .woocommerce-pagination,.paginare{margin-top:26px} .woocommerce-pagination .page-numbers,.paginare .page-numbers{min-width:38px;height:38px;font-size:14px;border-radius:10px} } /* --------------------------------------------------------------- 45. Blog: lista de articole, articolul in sine, pagini simple --------------------------------------------------------------- */ .articole-lista{margin:8px 0 0} .articole-lista .articol-card h3{font-size:18px} /* Articolul: latime de citit, nu tot ecranul */ .articol-singur{max-width:820px;margin:0 auto} .articol-cap{margin:6px 0 22px} .articol-eticheta{display:inline-block;margin-bottom:12px;padding:5px 14px;border-radius:var(--pilula);background:var(--verde-slab,#eef6f1);color:var(--verde);font-size:13px;font-weight:600} .articol-eticheta:hover{background:var(--verde);color:#fff} .articol-singur h1{font-size:32px;line-height:1.25;margin:0 0 14px} .articol-meta{display:flex;align-items:center;gap:10px;color:var(--text-slab);font-size:14px} .articol-imagine{margin:0 0 26px;border-radius:var(--raza-card);overflow:hidden;background:var(--fundal-slab)} .articol-imagine img{display:block;width:100%;height:auto} .articol-continut{font-size:16.5px} .articol-continut h2{font-size:23px;margin:32px 0 12px} .articol-continut h3{font-size:19px;margin:26px 0 10px} .articol-continut blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--verde);background:var(--fundal-slab);border-radius:0 var(--raza) var(--raza) 0;color:var(--titlu)} .articol-continut figure{margin:22px 0} .articol-continut figcaption{margin-top:8px;font-size:13.5px;color:var(--text-slab);text-align:center} .articol-singur + .sectiune{margin-top:44px;padding-top:34px;border-top:1px solid var(--linie)} .paginare-articol{margin:26px 0 0} /* Pagini simple: aceeasi latime de citit */ .pagina-simpla{max-width:820px;margin:0 auto} .pagina-simpla h1{margin:6px 0 18px} /* Cand nu s-a gasit nimic */ .gol{padding:40px 0 60px;text-align:center;color:var(--text-slab)} .gol .buton{margin-top:14px} @media(max-width:768px){ .articol-singur h1{font-size:25px} .articol-continut{font-size:16px} .articol-continut h2{font-size:20px} .articol-singur + .sectiune{margin-top:32px;padding-top:26px} } /* --------------------------------------------------------------- 46. Cosul: latimi de coloana si cardul de total Poza statea la 28px pentru ca `img{max-width:100%}` o stranje la latimea celulei, iar celula nu avea latime data. --------------------------------------------------------------- */ .woocommerce-cart-form table.shop_table{table-layout:auto} .woocommerce-cart-form td.product-remove,.woocommerce-cart-form th.product-remove{width:44px} .woocommerce-cart-form td.product-thumbnail,.woocommerce-cart-form th.product-thumbnail{width:96px} .woocommerce-cart-form__cart-item .product-thumbnail img{width:74px;height:74px;max-width:none;object-fit:contain;background:var(--alb);padding:4px} .woocommerce-cart-form td.product-price,.woocommerce-cart-form td.product-subtotal{width:110px;text-align:right} .woocommerce-cart-form th.product-price,.woocommerce-cart-form th.product-subtotal{text-align:right} .woocommerce-cart-form td.product-quantity,.woocommerce-cart-form th.product-quantity{width:120px;text-align:center} .woocommerce-cart-form .quantity input{width:86px;margin:0 auto} .woocommerce-cart-form th.product-name{padding-left:0} .woocommerce-cart-form .product-name a{display:block} .woocommerce-cart-form .product-remove a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--fundal-slab)} .woocommerce-cart-form .product-remove a:hover{background:rgba(221,51,51,.1)} /* Cardul de total: eticheta stanga, suma dreapta, livrarea pe toata latimea */ .cart_totals .woocommerce-shipping-destination{margin:10px 0 0;font-size:13.5px;color:var(--text-slab);text-align:left} .cart_totals .woocommerce-shipping-destination strong{color:var(--titlu)} .cart_totals .shipping-calculator-button{display:inline-block;margin-top:4px;color:var(--verde);font-weight:600;font-size:13.5px} .cart_totals .includes_tax,.cart_totals small{display:block;font-size:12.5px;font-weight:400;color:var(--text-slab)} /* Textul optiunii si pretul pe acelasi rand: grid, pentru ca numele e text simplu, nu un element — cu flex ajungea lipit de pret. */ #shipping_method li label{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;width:100%;font-size:14.5px;line-height:1.35;text-align:left} #shipping_method li .amount{white-space:nowrap} #shipping_method li{align-items:center} @media(max-width:768px){ .woocommerce-cart-form table.shop_table thead{display:none} .woocommerce-cart-form table.shop_table tr{display:grid;grid-template-columns:74px 1fr auto;gap:4px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linie)} .woocommerce-cart-form table.shop_table td{border:0;padding:0} .woocommerce-cart-form td.product-thumbnail{grid-row:1/3;width:74px} .woocommerce-cart-form td.product-name{grid-column:2/4;padding-right:42px} .woocommerce-cart-form td.product-price{display:none} .woocommerce-cart-form td.product-quantity{grid-column:2;width:auto;text-align:left} .woocommerce-cart-form .quantity input{margin:0} .woocommerce-cart-form td.product-subtotal{grid-column:3;width:auto} .woocommerce-cart-form td.product-remove{position:absolute;top:14px;right:0;width:auto} .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{position:relative} .woocommerce-cart-form tr.actions{display:block;padding-bottom:0} } /* Rezumatul comenzii: numele ia spatiul, suma sta pe un rand */ .woocommerce-checkout #order_review table.shop_table td.product-name, .woocommerce-checkout #order_review table.shop_table th{width:auto;text-align:left;padding-right:12px} /* Doar pretul produsului sta pe un rand. In subsol, "Total ... (include TVA)" e lung: daca il tinem pe un rand, intinde tot tabelul peste marginea cardului. */ .woocommerce-checkout #order_review table.shop_table td.product-total{width:96px;text-align:right;white-space:nowrap} .woocommerce-checkout #order_review table.shop_table tfoot td{text-align:right} /* Rezumatul comenzii, ca si totalurile din cos: randuri grid, nu tabel. Cu tabel adevarat, randul de livrare ramanea la latimea unei coloane. */ .woocommerce-checkout #order_review table.shop_table td.product-name{word-break:normal;overflow-wrap:anywhere} .woocommerce-checkout #order_review .product-name .product-quantity{color:var(--text-slab);font-weight:600} /* Rand de livrare pe toata latimea cardului: coloana de sume are 96px, in care lista de curieri nu incape (la fel ca in cos). */ .woocommerce-checkout #order_review .woocommerce-shipping-destination{font-size:13.5px;color:var(--text-slab);margin:10px 0 0} /* --------------------------------------------------------------- 47. Contul meu: autentificare/inregistrare si paginile din cont --------------------------------------------------------------- */ .woocommerce-account .container > article{max-width:1000px;margin:0 auto} .woocommerce-account .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} .woocommerce-account .u-column1,.woocommerce-account .u-column2{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:24px;box-shadow:var(--umbra)} .woocommerce-account .u-columns h2{font-size:19px;margin:0 0 16px} .woocommerce-account .woocommerce-form-row{margin:0 0 14px} .woocommerce-account .woocommerce-form label{display:block;margin-bottom:6px;font-size:14px;color:var(--text-slab)} .woocommerce-account .woocommerce-form input[type=text], .woocommerce-account .woocommerce-form input[type=email], .woocommerce-account .woocommerce-form input[type=password]{width:100%;height:46px;padding:0 14px;border:1px solid var(--linie);border-radius:var(--raza);font-size:15px;font-family:inherit} .woocommerce-account .woocommerce-form button{width:100%;margin-top:4px} /* label.rememberme: cu selectorul scurt pierdea in fata regulii de mai sus (label{display:block}). */ .woocommerce-account .woocommerce-form label.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px} .woocommerce-account .woocommerce-form-login__rememberme input{width:auto} .woocommerce-account .lost_password{margin:12px 0 0;font-size:14px} .woocommerce-account .lost_password a{color:var(--verde);font-weight:600} .woocommerce-account .woocommerce-privacy-policy-text{font-size:13.5px;color:var(--text-slab)} /* Dupa autentificare: meniul contului in stanga, continutul in dreapta */ .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--linie);border-radius:var(--raza-card);overflow:hidden;background:var(--alb)} .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--linie)} .woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0} .woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:13px 18px;color:var(--titlu);font-size:14.5px;font-weight:500} .woocommerce-account .woocommerce-MyAccount-navigation a:hover{background:var(--fundal-slab);color:var(--verde)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--verde);color:#fff;font-weight:600} .woocommerce-account .woocommerce-MyAccount-content{border:1px solid var(--linie);border-radius:var(--raza-card);background:var(--alb);padding:24px;box-shadow:var(--umbra)} @media(min-width:1025px){ .woocommerce-account:not(.logged-out) .woocommerce{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start} .woocommerce-account .woocommerce-notices-wrapper{grid-column:1/-1} } @media(max-width:768px){ .woocommerce-account .u-columns.col2-set{grid-template-columns:1fr} .woocommerce-account .u-column1,.woocommerce-account .u-column2{padding:18px} } /* --------------------------------------------------------------- 48. Cosul, a doua trecere: coloane fixe, cupon in sumar, incredere --------------------------------------------------------------- */ /* Fara latimi fixe, coloana cu "x" inghitea tot spatiul ramas. */ .woocommerce-cart-form table.shop_table{table-layout:fixed} .woocommerce-cart-form td.product-remove,.woocommerce-cart-form th.product-remove{width:56px;padding-left:0;text-align:center} .woocommerce-cart-form td.product-thumbnail,.woocommerce-cart-form th.product-thumbnail{width:98px;padding-left:0} .woocommerce-cart-form td.product-price,.woocommerce-cart-form th.product-price{width:104px} .woocommerce-cart-form td.product-quantity,.woocommerce-cart-form th.product-quantity{width:116px} .woocommerce-cart-form td.product-subtotal,.woocommerce-cart-form th.product-subtotal{width:116px} .woocommerce-cart-form td.product-name{overflow-wrap:anywhere} /* Coloana din dreapta, putin mai lata: acolo se uita clientul. */ .woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1fr) 420px} /* Cuponul nativ statea sub produse; il aratam pe al nostru, din sumar. */ .woocommerce-cart-form .actions .coupon{display:none} .cupon-sumar{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--linie)} .cupon-sumar label{display:block;margin-bottom:8px;font-size:14px;color:var(--text-slab)} .cupon-rand{display:flex;gap:8px} .cupon-rand input{flex:1;min-width:0;height:46px;padding:0 16px;border:1px solid var(--linie);border-radius:var(--pilula);font-size:14.5px;font-family:inherit} .cupon-rand .buton-contur{flex:0 0 auto;background:var(--alb);color:var(--titlu);border:1px solid var(--linie);padding:0 22px;height:46px} .cupon-rand .buton-contur:hover{border-color:var(--verde);color:var(--verde);background:var(--alb)} /* Livrarea: randul ocupa toata latimea cardului, nu doar coloana de sume. */ #shipping_method li{padding:13px 16px} #shipping_method li label{font-size:15px} /* Zona de incredere, sub butonul de finalizare */ .incredere{margin-top:18px;padding-top:18px;border-top:1px solid var(--linie)} .incredere ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .incredere li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text-slab)} .incredere li svg{flex:0 0 auto;color:var(--verde);margin-top:1px} .incredere li strong{display:block;color:var(--titlu);font-size:14px;font-weight:600} .incredere-carduri{margin-top:16px} .incredere-carduri img{width:163px;height:auto} .woocommerce-checkout .incredere{margin-top:20px} @media(max-width:1024px){ .woocommerce-cart .woocommerce{grid-template-columns:1fr} } @media(max-width:768px){ /* Pe telefon randul e grila (sectiunea 46), deci latimile de coloana de mai sus nu mai au sens — le anulam, altfel numele si pretul ies din card. */ .woocommerce-cart-form table.shop_table{table-layout:auto} .woocommerce-cart-form td.product-remove,.woocommerce-cart-form td.product-price, .woocommerce-cart-form td.product-quantity,.woocommerce-cart-form td.product-subtotal{width:auto} .woocommerce-cart-form td.product-thumbnail{width:74px} .woocommerce-cart-form td.actions{display:block;text-align:right} .cupon-rand{flex-wrap:wrap} .cupon-rand .buton-contur{width:100%} } /* Butonul "Actualizeaza cosul": td-ul ramane celula de tabel (cu flex iesea din tabel) */ .woocommerce-cart-form td.actions{display:table-cell;text-align:right;padding:18px 0 0} .woocommerce-cart-form td.actions .button{display:inline-block;border-radius:var(--pilula);padding:12px 22px} /* Siglele reale din subsol (curieri, EuPlatesc, ANPC) */ .banda-servicii .sigle{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px} .banda-servicii .sigle img{height:auto;max-width:100%;background:#fff;border-radius:6px;padding:6px} .banda-servicii .sigle.anpc{gap:10px} .banda-servicii .sigle.anpc img{padding:0;background:transparent;border-radius:0} .banda-servicii .sigle a{display:inline-flex} .banda-servicii .sigle a:hover{opacity:.85} @media(max-width:768px){ .banda-servicii .sigle img{max-width:150px} } /* --------------------------------------------------------------- 50. Sumarul (cos si finalizare): zone clare, poze, stergere Sablonul nostru (woocommerce/checkout/review-order.php si cart/cart-totals.php) inlocuieste tabelul WooCommerce cu sectiuni, ca sa nu mai apara un Sub-total la produse si inca un Total dupa livrare. --------------------------------------------------------------- */ .sumar{display:flex;flex-direction:column;gap:20px} .sumar-zona + .sumar-zona{padding-top:20px;border-top:1px solid var(--linie)} .sumar-titlu{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-slab)} .sumar-numar{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:var(--pilula);background:var(--fundal-slab);color:var(--titlu);font-size:11.5px} .sumar-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-height:340px;overflow-y:auto} .sumar-produs{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:12px;align-items:center} .sumar-poza{position:relative;display:block;width:56px;height:56px;border:1px solid var(--linie);border-radius:10px;overflow:hidden;background:var(--alb)} .sumar-poza img{width:100%;height:100%;object-fit:contain;padding:4px} .sumar-cantitate{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--pilula);background:var(--verde);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .sumar-nume{font-size:13.8px;line-height:1.35;color:var(--titlu);overflow-wrap:anywhere} .sumar-nume a{color:var(--titlu)} .sumar-nume a:hover{color:var(--verde)} .sumar-nume dl{margin:4px 0 0;font-size:12.5px;color:var(--text-slab)} .sumar-pret{font-size:14px;font-weight:700;color:var(--titlu);white-space:nowrap} .sumar-scoate{width:26px;height:26px;border:0;border-radius:50%;background:var(--fundal-slab);color:var(--text-slab);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;transition:background .15s,color .15s} .sumar-scoate:hover{background:rgba(221,51,51,.12);color:var(--rosu)} .sumar-scoate[disabled]{opacity:.5;cursor:default} .sumar-rand{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;font-size:14.5px;color:var(--text)} .sumar-rand > span:last-child{font-weight:600;color:var(--titlu);text-align:right} .sumar-rand.reducere > span:last-child{color:var(--verde)} .sumar-final{margin-top:6px;padding-top:12px;border-top:1px solid var(--linie);font-size:16px} .sumar-final > span:first-child{font-weight:700;color:var(--titlu)} .sumar-final > span:last-child{font-size:21px;font-weight:700;color:var(--verde)} .sumar-final small,.sumar-final .includes_tax{display:block;font-size:12px;font-weight:400;color:var(--text-slab)} /* Livrarea, in zona ei */ .livrare-zona .livrare-eticheta{display:none} .woocommerce-shipping-destination{margin:10px 0 0;font-size:13px;color:var(--text-slab)} .shipping-calculator-button{color:var(--verde);font-weight:600;font-size:13px} /* Titlul de deasupra metodelor de plata */ .titlu-plata{margin:22px 0 12px;padding-top:20px;border-top:1px solid var(--linie)} /* La finalizare, coloana de formular nu mai trebuie sa fie atat de lata */ .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr) 460px} @media(max-width:1024px){ .woocommerce-checkout form.checkout{grid-template-columns:1fr} .sumar-lista{max-height:none} } /* Acordul cu termenii: caseta langa text, nu deasupra */ .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13.8px;line-height:1.45;color:var(--text)} .woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox{width:auto;flex:0 0 auto;margin:3px 0 0} .woocommerce-privacy-policy-text p{font-size:12.8px;color:var(--text-slab);line-height:1.5} .woocommerce-terms-and-conditions-checkbox-text{flex:1;min-width:0;overflow-wrap:anywhere} /* --------------------------------------------------------------- 51. Mini-cosul din antet (se deschide la hover) --------------------------------------------------------------- */ .unealta-cos{position:relative} .mini-cos{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:360px;background:var(--alb);border:1px solid var(--linie);border-radius:var(--raza-card);box-shadow:0 18px 40px rgba(17,24,28,.16);padding:18px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;text-align:left} /* Punte invizibila intre buton si panou, ca sa nu se inchida cand cobori cu mouse-ul */ .mini-cos::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .mini-cos::after{content:"";position:absolute;top:-7px;right:34px;width:12px;height:12px;background:var(--alb);border-left:1px solid var(--linie);border-top:1px solid var(--linie);transform:rotate(45deg)} .unealta-cos:hover .mini-cos,.unealta-cos:focus-within .mini-cos{opacity:1;visibility:visible;transform:translateY(0)} .mini-cos-cap{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--linie)} .mini-cos-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--fundal-slab);color:var(--verde);flex:0 0 auto} .mini-cos-cap strong{display:block;font-size:15.5px;color:var(--titlu)} .mini-cos-cap span{font-size:13px;color:var(--text-slab)} .mini-cos-lista{list-style:none;margin:0;padding:6px 0;max-height:280px;overflow-y:auto} .mini-cos-lista li{display:grid;grid-template-columns:52px minmax(0,1fr) 24px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linie)} .mini-cos-lista li:last-child{border-bottom:0} .mini-cos-poza{width:52px;height:52px;border:1px solid var(--linie);border-radius:8px;overflow:hidden;background:var(--alb)} .mini-cos-poza img{width:100%;height:100%;object-fit:contain;padding:3px} /* Linkurile din bara de unelte au white-space:nowrap; in mini-cos numele trebuie sa se rupa. */ .mini-cos-text a,.mini-cos-text > span:first-child{display:block;font-size:13.5px;line-height:1.35;color:var(--titlu);white-space:normal;overflow-wrap:anywhere} .mini-cos-total,.mini-cos-cap span,.mini-cos-pret{white-space:normal} .mini-cos-butoane .buton{white-space:normal} .mini-cos-text a:hover{color:var(--verde)} .mini-cos-pret{display:block;margin-top:4px;font-size:14px;font-weight:700;color:var(--titlu)} .mini-cos-cantitate{color:var(--text-slab);font-weight:500;font-size:13px} .mini-cos-scoate{width:24px;height:24px;border:0;border-radius:50%;background:var(--fundal-slab);color:var(--text-slab);font-size:16px;line-height:1;cursor:pointer;font-family:inherit} .mini-cos-scoate:hover{background:rgba(221,51,51,.12);color:var(--rosu)} .mini-cos-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;margin-top:2px;border-top:1px solid var(--linie);font-size:15px;color:var(--titlu);font-weight:700} .mini-cos-total > span:last-child{color:var(--verde);font-size:17px} .mini-cos-butoane{display:grid;gap:8px} .mini-cos-butoane .buton{width:100%;text-align:center;padding:12px} .mini-cos-butoane .buton-contur{background:var(--alb);color:var(--titlu);border:1px solid var(--linie)} .mini-cos-butoane .buton-contur:hover{border-color:var(--verde);color:var(--verde);background:var(--alb)} .mini-cos-gol{margin:16px 0;font-size:14px;color:var(--text-slab);text-align:center} /* Pe telefon ramane linkul simplu spre cos: acolo avem bara de jos. */ @media(max-width:1024px){ .mini-cos{display:none} } /* --------------------------------------------------------------- 53. Meniul de pe telefon: panou peste pagina, pe niveluri --------------------------------------------------------------- */ .panou-meniu{position:fixed;top:0;left:0;bottom:0;width:min(92vw,420px);z-index:95;background:var(--alb); display:flex;flex-direction:column;box-shadow:0 0 50px rgba(17,24,28,.22); transform:translateX(-100%);transition:transform .22s ease} .panou-meniu.deschis{transform:none} .panou-meniu[hidden]{display:none} .panou-fundal{position:fixed;inset:0;z-index:94;background:rgba(17,24,28,.45)} .panou-fundal[hidden]{display:none} body.meniu-deschis{overflow:hidden} .panou-cap{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px; padding:14px 16px;border-bottom:1px solid var(--linie)} .panou-inapoi,.panou-inchide{width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--linie);border-radius:12px;background:var(--alb);color:var(--titlu);cursor:pointer;padding:0} .panou-inapoi[hidden]{visibility:hidden;display:flex} .panou-inapoi svg,.panou-inchide svg{width:20px;height:20px} .panou-titlu{text-align:center;font-size:16px;font-weight:700;color:var(--titlu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .panou-corp{flex:1;overflow-y:auto;overscroll-behavior:contain} .panou-nivel{display:none;list-style:none;margin:0;padding:8px 0} .panou-nivel.activ{display:block} .panou-nivel li{border-bottom:1px solid var(--linie)} .panou-nivel li:last-child{border-bottom:0} .panou-intrare{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0; font-family:inherit;font-size:15px;font-weight:600;color:var(--titlu);text-align:left;cursor:pointer;line-height:1.3} .panou-intrare:hover,.panou-intrare:active{background:var(--fundal-slab)} .panou-intrare .mega-ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center; border:1px solid var(--linie);border-radius:12px;color:var(--verde)} .panou-intrare .mega-ic svg{width:22px;height:22px} .panou-text{flex:1;min-width:0} .panou-numar{margin-left:8px;font-size:12.5px;font-weight:500;color:var(--text-slab)} .panou-sageata{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-slab);border-top:2px solid var(--text-slab);transform:rotate(45deg)} .panou-toate{background:var(--fundal-slab);color:var(--verde)} .panou-toate .panou-sageata{border-color:var(--verde)} .panou-jos{border-top:1px solid var(--linie);padding:14px 16px;display:grid;gap:10px;background:var(--alb)} .panou-ajutor,.panou-cont{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--linie); border-radius:14px;color:var(--titlu);font-size:14px} .panou-ajutor{background:var(--fundal-slab);border-color:transparent;box-shadow:inset 3px 0 0 var(--verde)} .panou-ajutor strong,.panou-cont strong{display:block;font-size:15px;color:var(--titlu)} .panou-ajutor span span,.panou-ajutor > span:nth-child(2){display:block;font-size:13px;color:var(--text-slab)} .panou-ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--alb);border:1px solid var(--linie);color:var(--verde)} .panou-ic svg{width:20px;height:20px} .panou-ajutor > span:nth-child(2),.panou-cont > span:nth-child(2){flex:1;min-width:0} .panou-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px} .panou-buton{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--linie); border-radius:14px;color:var(--titlu);font-size:13px} .panou-buton svg{width:20px;height:20px;flex:0 0 auto;color:var(--verde)} .panou-buton strong{display:block;font-size:14px} .panou-buton span span{display:block} .panou-buton > span{min-width:0;font-size:12px;color:var(--text-slab);line-height:1.3} .panou-buton-plin{background:var(--verde);border-color:var(--verde);color:#fff} .panou-buton-plin svg{color:#fff} .panou-buton-plin strong,.panou-buton-plin > span{color:#fff} /* Pe desktop panoul nu exista; meniul mare din antet ramane cum e. */ @media(min-width:1025px){ .panou-meniu,.panou-fundal{display:none!important} /* Semnul categoriei apare si in meniul mare, in coloana din stanga. */ } /* --------------------------------------------------------------- 54. Pagina de produs: pret la variante, contact, repere, livrare --------------------------------------------------------------- */ /* Pretul variantei alese. Intervalul de sus ("205 - 235 lei") nu mai are rost odata ce s-a ales o varianta, deci il ascundem. */ .produs:has(.woocommerce-variation-price .amount) .pret-mare{display:none} .woocommerce-variation-price{margin:0 0 4px} .woocommerce-variation-price .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:15px} /* .amount are stilul lui de pret (26px, verde) mai jos in fisier, deci il fixam aici explicit. */ .woocommerce-variation-price .price del{order:2;color:var(--rosu);font-size:16px;font-weight:600;text-decoration:line-through;opacity:1} .woocommerce-variation-price .price del .amount{color:var(--rosu);font-size:16px;font-weight:600} .woocommerce-variation-price .price ins .amount{color:var(--titlu);font-size:30px;font-weight:700} .woocommerce-variation-price .price ins{order:1;text-decoration:none;font-size:30px;font-weight:700;color:var(--titlu)} .woocommerce-variation-price .price > .amount{font-size:30px;font-weight:700;color:var(--titlu)} .woocommerce-variation-price .price small,.woocommerce-variation-price .woocommerce-price-suffix{order:3;font-size:12.5px;font-weight:400;color:var(--text-slab)} .produs .variations .reset_variations{font-size:13px;color:var(--text-slab)} /* WhatsApp (de la plugin) si telefon: pe un rand al lor, sub butonul de cos. Le asezam cu grid, pentru ca in flex ramaneau lipite de buton. */ .produs .woocommerce-variation-add-to-cart, .produs form.cart:not(.variations_form){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px;align-items:center} .produs .woocommerce-variation-add-to-cart .quantity, .produs form.cart:not(.variations_form) .quantity{grid-column:1;grid-row:1;justify-self:start} .produs .woocommerce-variation-add-to-cart .single_add_to_cart_button, .produs form.cart:not(.variations_form) .single_add_to_cart_button{grid-column:2;grid-row:1} .produs .sdx-whatsapp-product-wrap{grid-column:1;grid-row:2;width:auto;margin:8px 0 0} .produs .vonteq-telefon-wrap{grid-column:2;grid-row:2;width:auto;margin:8px 0 0} .produs .vonteq-telefon-btn{display:inline-flex;align-items:center;gap:12px;width:100%;padding:14px 16px; border:1px solid var(--linie);border-radius:12px;background:var(--alb);color:var(--titlu);box-sizing:border-box; transition:border-color .15s,background .15s} .produs .vonteq-telefon-btn:hover{border-color:var(--verde);background:var(--fundal-slab)} .vonteq-telefon-icon{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--fundal-slab);color:var(--verde)} .vonteq-telefon-text strong{display:block;font-size:14.5px;line-height:1.2} .vonteq-telefon-text span{font-size:13px;color:var(--text-slab)} /* Reperele, ca niste casete cu semn */ .produs .repere{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0;padding:0} .produs .repere li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--linie); border-radius:14px;background:var(--alb);font-size:12.8px;color:var(--text-slab);line-height:1.35} .produs .repere strong{display:block;font-size:13.8px;color:var(--titlu)} .reper-icon{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center; border-radius:10px;background:var(--fundal-slab);color:var(--verde)} .reper-icon svg{width:20px;height:20px} /* Bara de transport gratuit (produs, cos, finalizare) */ .bara-livrare{margin:18px 0 0;padding:13px 16px;border:1px solid var(--linie);border-radius:14px;background:var(--alb)} .bara-livrare-text{display:flex;align-items:center;gap:10px;font-size:13.8px;color:var(--text);line-height:1.4} .bara-livrare-text strong{color:var(--titlu)} .bara-livrare-icon{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--fundal-slab);color:var(--verde)} .bara-livrare-icon svg{width:19px;height:19px} .bara-livrare-progres{position:relative;height:6px;margin-top:10px;border-radius:99px;background:var(--fundal-slab);overflow:hidden} .bara-livrare-progres span{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--verde);transition:width .25s} .bara-livrare.gata{border-color:rgba(67,150,101,.4);background:rgba(67,150,101,.06)} .bara-livrare.gata .bara-livrare-icon{background:var(--verde);color:#fff} .woocommerce-cart .bara-livrare,.woocommerce-checkout .bara-livrare{margin:0 0 18px} @media(max-width:768px){ /* Nu e destul sa schimbam template-ul: butonul are grid-column:2 pus explicit mai sus, iar grid-ul isi face oricum a doua coloana. Rescriem si pozitiile. */ .produs .woocommerce-variation-add-to-cart,.produs form.cart:not(.variations_form){grid-template-columns:104px minmax(0,1fr)} .produs .woocommerce-variation-add-to-cart .quantity, .produs form.cart:not(.variations_form) .quantity{grid-column:1;grid-row:1} .produs .woocommerce-variation-add-to-cart .single_add_to_cart_button, .produs form.cart:not(.variations_form) .single_add_to_cart_button{grid-column:2;grid-row:1;width:100%} .produs .sdx-whatsapp-product-wrap{grid-column:1/-1;grid-row:2;margin-top:10px} .produs .vonteq-telefon-wrap{grid-column:1/-1;grid-row:3;margin-top:0} .produs .repere{grid-template-columns:1fr} .woocommerce-variation-price .price ins,.woocommerce-variation-price .price > .amount{font-size:26px} } /* --------------------------------------------------------------- 55. Pagina de produs pe telefon Regula de grid din sectiunea 40 (adaugata dupa media query-uri) tinea pagina pe doua coloane si pe ecrane mici: galeria si textul erau turtite. --------------------------------------------------------------- */ @media(max-width:1024px){ .produs{grid-template-columns:minmax(0,1fr)} .produs .variations{width:100%} .produs .variations td.value{display:block;width:100%} .produs .variations select{width:100%} .produs .reset_variations{display:inline-block;margin-top:6px} .produs .single_add_to_cart_button{width:100%} .produs .quantity input{width:100%;min-width:90px} } .livrare-gratuit{color:var(--verde);font-weight:700} /* --------------------------------------------------------------- 52. Meniul de categorii (unul singur, in tot site-ul) Pe prima pagina sta deschis, langa banner; pe restul paginilor se lasa in jos de sub butonul "Toate categoriile", la trecerea cu mouse-ul. Subcategoriile vin intr-un panou lateral, cerut la hover. --------------------------------------------------------------- */ .categorii-panou{list-style:none;margin:0;padding:0} .categorii-panou > li{position:static;border-bottom:1px solid var(--linie)} .categorii-panou > li:last-child{border-bottom:0} .categorii-panou > li > a{display:flex;align-items:center;gap:10px;padding:12px 16px; font-size:14px;color:var(--titlu);line-height:1.25} /* Semnul categoriei il foloseste meniul de pe telefon; pe desktop nu-l aratam. */ .categorii-panou > li > a .mega-ic{display:none} .categorii-panou > li > a .cat-nume{min-width:0} .categorii-panou > li.are-copii > a::after{content:"";width:7px;height:7px;margin-left:auto;flex:0 0 auto; border-right:2px solid #b9c0c2;border-top:2px solid #b9c0c2;transform:rotate(45deg)} .categorii-panou > li:hover > a{background:var(--fundal-slab);color:var(--verde)} .categorii-panou > li:hover.are-copii > a::after{border-color:var(--verde)} /* Panoul cu subcategorii: lipit de lista, fara chenar dublu intre ele. */ /* Latimea: cat tine containerul, minus lista din stanga. Asa incap mai multe coloane si nu mai trebuie derulat nimic. */ .panou-cat{display:none;position:absolute;left:100%;top:0;z-index:70; /* latimea utila a containerului (minus cele doua paduri de 20px) fara lista din stanga */ width:calc(min(100vw, var(--lat)) - 40px - 300px);min-height:100%; padding:22px 26px;background:var(--alb); border:1px solid var(--linie);border-left:0;border-radius:0; box-shadow:0 18px 40px rgba(17,24,28,.14)} .panou-cat[hidden]{display:none!important} .categorii-panou > li:hover > .panou-cat:not([hidden]), .categorii-panou > li:focus-within > .panou-cat:not([hidden]){display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px;align-content:start} @media(max-width:1300px){ .categorii-panou > li:hover > .panou-cat:not([hidden]), .categorii-panou > li:focus-within > .panou-cat:not([hidden]){grid-template-columns:repeat(3,minmax(0,1fr))} } .panou-cat-bloc{margin:0 0 16px} .panou-cat a{display:block;padding:0;border:0;background:none} .panou-cat-titlu{font-size:13.5px;font-weight:700;color:var(--titlu);line-height:1.3;margin:0 0 5px} .panou-cat-titlu:hover{color:var(--verde)} .panou-cat-bloc ul{list-style:none;margin:0;padding:0} .panou-cat li{border:0;padding:0;background:none} .panou-cat-bloc li a{padding:2px 0;font-size:13px;color:var(--text-slab);line-height:1.4} .panou-cat-bloc li a:hover{color:var(--verde)} @media(min-width:1025px){ .categorii{position:relative} .categorii > button{border-radius:0} /* Dropdown-ul din bara verde, pe paginile interioare */ .categorii-lista{display:none;position:absolute;left:0;top:100%;z-index:60;width:304px;min-width:0; background:var(--alb);border:1px solid var(--linie);border-radius:0; box-shadow:0 18px 40px rgba(17,24,28,.14);max-height:none;overflow:visible;columns:auto} .categorii:hover .categorii-lista, .categorii:focus-within .categorii-lista, .categorii[open] .categorii-lista, .categorii-lista.deschis{display:block} /* Pe prima pagina: aceeasi lista, dar deschisa in pagina, lipita de bara verde. */ .home .acasa-sus{margin-top:0} .lista-categorii-acasa{position:relative;overflow:visible;background:var(--alb); border:1px solid var(--linie);border-top:0;border-radius:0;align-self:start} /* Butonul si lista au aceeasi latime, ca sa arate ca un singur bloc. */ .categorii > button{min-width:300px;justify-content:space-between} .categorii.este-deschis > button{background:var(--verde-inchis)} } /* Pe telefon: panoul nu are sens, acolo e meniul cu niveluri. */ @media(max-width:1024px){ .panou-cat{display:none!important} .categorii-panou > li.are-copii > a::after{display:none} .categorii-lista{columns:auto;min-width:0;width:100%} .lista-categorii-acasa{display:none} } /* --------------------------------------------------------------- 57. Antetul pe telefon Meniu in stanga, logo la mijloc, cont si cos ca semne in dreapta. Bara de categorii nu se mai vede: pe telefon meniul e panoul cu niveluri. --------------------------------------------------------------- */ /* Semnele de langa "Contul meu" si "Cos" — aceleasi pe desktop si pe telefon, doar ca pe telefon raman singure, fara text. */ /* Regula veche punea .unealta pe coloana (titlu peste subtitlu). Acum totul e pe un rand: semnul, apoi textul. Subtitlul "Comenzi si date" nu-l mai aratam. */ .unelte .unealta{display:flex;flex-direction:row;align-items:center;gap:10px} .unelte .unealta-text{display:flex;flex-direction:row;align-items:baseline;gap:7px;line-height:1.3} /* Doar subtitlul contului ("Comenzi si date") dispare; totalul cosului are aceeasi clasa, dar ramane, langa cuvantul "Cos". */ .unelte .unealta:not(.cos) .unealta-sub{display:none} .unelte .vonteq-cos-total{color:var(--verde);font-weight:700} .unelte .unealta-titlu{font-size:14px} .unealta-ic{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto; width:40px;height:40px;border:1px solid var(--linie);border-radius:12px;color:var(--titlu); transition:border-color .15s,color .15s} .unealta-ic svg{width:20px;height:20px} .unealta:hover .unealta-ic{border-color:var(--verde);color:var(--verde)} .unealta-ic .vonteq-cos-numar{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px; padding:0 5px;border-radius:999px;background:var(--verde);color:#fff;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center} @media(max-width:1024px){ .antet .container{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"meniu sigla unelte" "cautare cautare cautare"; align-items:center;gap:10px 12px;padding-top:12px;padding-bottom:12px} .buton-meniu{grid-area:meniu;display:block} .antet .sigla{grid-area:sigla;justify-self:center;margin:0} .antet .unelte{grid-area:unelte;gap:6px} .antet .cautare{grid-area:cautare;width:100%} /* Cont si cos: doar semnul, fara text. */ .unelte .unealta-text{display:none} .unelte .unealta{padding:0} .unealta-ic{width:42px;height:42px} .unealta-ic svg{width:21px;height:21px} /* Bara verde cu "Toate categoriile" si lista ei nu au ce cauta pe telefon. */ .nav-principal{display:none} .lista-categorii-acasa{display:none} } /* --------------------------------------------------------------- 58. Blocurile de pe prima pagina cu banner langa produse --------------------------------------------------------------- */ .bloc-banner-corp{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start} /* Bannerele au text scris in poza, deci nu le taiem. Fara chenar si fara fundal: asa nu se mai vede un card gol cand poza e mai scunda decat grila de produse. */ .bloc-banner-poza{position:relative;display:block;border-radius:var(--raza-card);overflow:hidden} .bloc-banner-poza img{width:100%;height:auto;display:block;transition:transform .35s} .bloc-banner-poza:hover img{transform:scale(1.02)} .bloc-banner-eticheta{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:var(--pilula); background:var(--rosu);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px} /* Produsele sunt carusel: se vad patru, restul prin glisare. Asa aratam mai multe fara sa creasca inaltimea blocului si fara sa ramana gol sub banner. */ .bloc-banner-produse.carusel{margin:0} .bloc-banner-produse .card{padding:12px} .bloc-banner-produse .card .titlu{font-size:14px} .bloc-banner-produse .card .pret-nou{font-size:18px} .sectiune-cap-dreapta{display:flex;align-items:center;gap:14px} /* Bannerele de categorie, banda pe toata latimea (nu mai stau intr-o coloana ingusta) */ .bannere-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0 0 34px} .bannere-duo .banner-categorie{flex-direction:row;align-items:stretch} .bannere-duo .banner-categorie-poza{flex:0 0 46%;aspect-ratio:auto} .bannere-duo .banner-categorie-text{justify-content:center;padding:22px 24px} .bannere-duo .banner-categorie-text h3{font-size:19px} /* Noutati: produse in stanga, doua bannere in dreapta */ .banner-categorie{border:1px solid var(--linie);border-radius:var(--raza-card);overflow:hidden; background:var(--alb);box-shadow:var(--umbra);display:flex;flex-direction:column} .banner-categorie-poza{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--fundal-slab)} .banner-categorie-poza img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} .banner-categorie:hover .banner-categorie-poza img{transform:scale(1.04)} .banner-categorie-text{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .banner-categorie-text h3{margin:0;font-size:17px;color:var(--titlu)} .banner-categorie-text p{margin:0;font-size:14px;color:var(--text-slab);line-height:1.45} .banner-categorie-text .buton{margin-top:auto;align-self:flex-start;background:var(--alb);color:var(--titlu); border:1px solid var(--linie);padding:10px 20px} .banner-categorie-text .buton:hover{border-color:var(--verde);color:var(--verde);background:var(--alb)} /* Bara de ofertare, ca separator intre zone */ .bara-oferta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; margin:34px 0;padding:20px 26px;border:1px solid var(--linie);border-radius:var(--raza-card); background:linear-gradient(90deg,var(--fundal-slab),var(--alb))} .bara-oferta-text strong{display:block;font-size:17px;color:var(--titlu)} .bara-oferta-text span{font-size:14px;color:var(--text-slab)} .bara-oferta-actiuni{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .bara-oferta-tel{font-size:14px;color:var(--text-slab)} .bara-oferta-tel:hover{color:var(--verde)} @media(max-width:1024px){ .bloc-banner-corp{grid-template-columns:1fr} .bloc-banner-poza{min-height:0;aspect-ratio:16/7} .bannere-duo{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .bannere-duo{grid-template-columns:1fr;gap:14px} .bannere-duo .banner-categorie{flex-direction:column} .bannere-duo .banner-categorie-poza{flex:0 0 auto;aspect-ratio:16/9} .bara-oferta{padding:18px;margin:26px 0} .bara-oferta-actiuni{width:100%} .bara-oferta-actiuni .buton{flex:1;text-align:center} } /* --------------------------------------------------------------- 59. Randuri mai stranse in meniul de pe telefon si bara de sortare --------------------------------------------------------------- */ @media(max-width:1024px){ /* Meniul: randuri mai mici, ca sa incapa mai multe categorii fara derulare. */ .panou-cap{padding:10px 14px} .panou-inapoi,.panou-inchide{width:38px;height:38px;border-radius:10px} .panou-nivel{padding:2px 0} .panou-intrare{padding:9px 14px;font-size:14px;gap:10px} .panou-intrare .mega-ic{width:32px;height:32px;border-radius:9px} .panou-intrare .mega-ic svg{width:17px;height:17px} .panou-jos{padding:10px 14px;gap:8px} .panou-ajutor{padding:10px 12px} .panou-ajutor strong{font-size:14px} .panou-buton{padding:9px 10px} /* Numarul de rezultate, sortarea si butonul de filtre: un singur rand, sus de tot. */ .rezultate{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin:0 0 14px} .rezultate .woocommerce-result-count{margin:0;font-size:12.5px;color:var(--text-slab);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .rezultate-actiuni{display:flex;align-items:center;gap:8px;flex:0 0 auto} .rezultate .woocommerce-ordering{margin:0} .rezultate .woocommerce-ordering select{max-width:150px;height:40px;font-size:13px;padding:0 28px 0 10px} .deschide-filtre{padding:9px 14px;font-size:13.5px} .continut-magazin > .woocommerce-notices-wrapper:empty{display:none} .pagina{gap:0} } @media(max-width:420px){ .rezultate .woocommerce-result-count{display:none} .rezultate{justify-content:flex-start} .rezultate-actiuni{flex:1;justify-content:space-between} .rezultate .woocommerce-ordering select{max-width:none;width:100%} } /* Descrierea categoriei pe telefon: trei randuri, cu "Citeste tot" */ @media(max-width:768px){ .descriere-categorie{font-size:14.5px;margin-bottom:12px} .descriere-categorie.colapsabil:not(.deschis){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .descriere-categorie + .mai-mult{display:inline-block;margin:0 0 14px;padding:6px 0;border:0;background:none; font-family:inherit;font-size:13.5px;font-weight:600;color:var(--verde);cursor:pointer} .continut-magazin h1,.container > h1{font-size:25px;margin-bottom:10px} .firimituri{font-size:12.5px;margin-bottom:8px} } /* --------------------------------------------------------------- 60. Antet: cautare mai stramta si "Comenzi telefonice" --------------------------------------------------------------- */ .antet .cautare{max-width:560px} /* Telefonul are doua randuri (titlu + numar), spre deosebire de cont si cos. */ .unelte .unealta-telefon .unealta-text{flex-direction:column;align-items:flex-start;gap:0} .unelte .unealta-telefon .unealta-sub{display:block;font-size:13.5px;font-weight:700;color:var(--verde)} .unelte .unealta-telefon .unealta-titlu{font-size:12.5px;color:var(--text-slab);font-weight:500} @media(max-width:1200px){ .unelte .unealta-telefon .unealta-text{display:none} } @media(max-width:1024px){ /* Pe telefon numarul e in meniu si in bara de jos; in antet ar incarca degeaba. */ .unelte .unealta-telefon{display:none} } /* --------------------------------------------------------------- 61. Antet: cautarea la mijloc, uneltele lipite de marginea dreapta --------------------------------------------------------------- */ @media(min-width:1025px){ .antet .container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px} .antet .sigla{grid-column:1} .antet .cautare{grid-column:2;justify-self:center;width:100%;max-width:560px;margin:0} .antet .unelte{grid-column:3;justify-self:end;margin-left:0} } /* Numarul de telefon trebuie sa se vada: regula care ascunde subtitlurile (pentru "Comenzi si date") are aceeasi greutate, deci o intrecem aici. */ .unelte .unealta.unealta-telefon .unealta-sub{display:block;font-size:13.5px;font-weight:700;color:var(--verde)} .unelte .unealta.unealta-telefon .unealta-text{flex-direction:column;align-items:flex-start;gap:0} /* Banda de avantaje: cinci carduri incap pe un rand pe ecrane mari */ @media(min-width:1200px){ .avantaje{grid-template-columns:repeat(5,minmax(0,1fr))} .avantaj{padding:14px 16px;font-size:13.5px} .avantaj b{font-size:14.5px} } /* --------------------------------------------------------------- 62. Titlul prima pagina (H1) si bara de sus --------------------------------------------------------------- */ /* Titlul sta sub banda de avantaje, ca o linie de introducere. */ .titlu-acasa{margin:18px auto 14px;max-width:1000px;text-align:center;font-size:19px;line-height:1.45;font-weight:600;color:var(--titlu)} @media(max-width:1024px){ .titlu-acasa{font-size:15px;line-height:1.45;margin:4px 0 16px} /* Pe ecrane mici pastram doar mesajul cel mai important din bara de sus. */ .bara-sus-stanga li.doar-lat{display:none} } @media(max-width:640px){ .bara-sus-stanga li:nth-child(n+2){display:none} } /* Tabelele scrise de client in taburi au latimi fixe (ex. width="640px"): le aducem la o latime de citit, egala pentru toate produsele. */ .woocommerce-Tabs-panel table{width:100%!important;max-width:900px!important;height:auto!important} .woocommerce-Tabs-panel table td,.woocommerce-Tabs-panel table th{width:auto!important} .woocommerce-Tabs-panel img,.woocommerce-Tabs-panel iframe{max-width:100%;height:auto} .woocommerce-Tabs-panel iframe{aspect-ratio:16/9;width:100%;max-width:760px} @media(max-width:768px){ .woocommerce-Tabs-panel table{display:block;overflow-x:auto} } /* --------------------------------------------------------------- 63. Pagina de produs pe telefon: titlul si pretul sus --------------------------------------------------------------- */ @media(max-width:768px){ /* Firimiturile pe un rand, derulabile, in loc de trei randuri de text. */ .firimituri{white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:6px} .firimituri::-webkit-scrollbar{display:none} /* Poza mare, dar nu cat tot ecranul; miniaturile pe un rand care se deruleaza. */ .produs .woocommerce-product-gallery__image:first-child img{max-height:280px;object-fit:contain} .produs .woocommerce-product-gallery__wrapper{display:grid;grid-template-columns:repeat(5,60px); gap:8px;justify-content:start} .produs .woocommerce-product-gallery__image:first-child{grid-column:1/-1} .produs .woocommerce-product-gallery__image:not(:first-child){height:60px} .produs .woocommerce-product-gallery__image:not(:first-child) img{height:100%;object-fit:cover} .produs .galerie{margin-bottom:8px} .produs h1{font-size:21px;line-height:1.3} .produs .meta{font-size:12.5px} } /* 64. Pagina 404 — cautare, categorii mari, doua actiuni */ .pagina-404{max-width:720px} .pagina-404 .cautare{max-width:520px;margin:0 0 26px} .pagina-404 h2{font-size:18px;margin:0 0 12px} .categorii-404{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 26px;padding:0} .categorii-404 a{display:block;padding:8px 14px;border:1px solid var(--linie);border-radius:999px;font-size:14px;color:var(--titlu);background:#fff} .categorii-404 a:hover{border-color:var(--verde);color:var(--verde)} .actiuni-404{display:flex;flex-wrap:wrap;gap:10px;margin:0} /* --------------------------------------------------------------- 65. Contul clientului, dupa autentificare Tabelul de comenzi, adresele si detaliile unei comenzi foloseau doar regula generala de tabel, deci aratau ca un tabel gol de HTML. --------------------------------------------------------------- */ .woocommerce-account .woocommerce-MyAccount-content > h2, .woocommerce-account .woocommerce-MyAccount-content > h3, .woocommerce-account .woocommerce-order-details__title{font-size:18px;margin:0 0 14px;color:var(--titlu)} .woocommerce-account .woocommerce-MyAccount-content > p:first-child{margin-top:0} /* Comenzile mele */ table.woocommerce-orders-table{border:1px solid var(--linie);border-radius:var(--raza-card);overflow:hidden;font-size:14.5px} table.woocommerce-orders-table th{background:var(--fundal-slab);color:var(--text-slab);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.3px;padding:11px 12px} table.woocommerce-orders-table td{padding:13px 12px;vertical-align:middle} table.woocommerce-orders-table tr:last-child td{border-bottom:0} .woocommerce-orders-table__cell-order-number a{font-weight:600;color:var(--titlu)} .woocommerce-orders-table__cell-order-status{color:var(--text-slab)} .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{color:var(--verde);font-weight:600} .woocommerce-orders-table__cell-order-actions{text-align:right} .woocommerce-orders-table__cell-order-actions .button{padding:8px 16px;font-size:13.5px} .woocommerce-account .woocommerce-pagination{margin:18px 0 0} /* Adresele */ .woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .woocommerce-Address{border:1px solid var(--linie);border-radius:var(--raza-card);padding:18px;background:var(--fundal-slab)} .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px} .woocommerce-Address-title h2,.woocommerce-Address-title h3{font-size:15.5px;margin:0} .woocommerce-Address-title .edit{font-size:13.5px;color:var(--verde);font-weight:600} .woocommerce-Address address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--text)} /* O comanda in detaliu */ .woocommerce-order-details,.woocommerce-customer-details{margin:0 0 26px} table.woocommerce-table--order-details{border:1px solid var(--linie);border-radius:var(--raza-card);overflow:hidden;font-size:14.5px} table.woocommerce-table--order-details th{background:var(--fundal-slab);color:var(--text-slab);font-weight:600;padding:11px 12px} table.woocommerce-table--order-details td{padding:12px} table.woocommerce-table--order-details tfoot th{background:none;color:var(--text-slab);text-transform:none} table.woocommerce-table--order-details tfoot td{font-weight:600;color:var(--titlu)} .woocommerce-table__product-total,table.woocommerce-table--order-details tfoot td{text-align:right} .woocommerce-order-details .product-quantity{color:var(--text-slab)} .woocommerce-order-details .shipped_via,.woocommerce-order-details .includes_tax{display:block;font-size:12.5px;color:var(--text-slab);font-weight:400} /* Numarul, data si starea comenzii vin in , adica galben de browser. */ .woocommerce-order mark,.woocommerce-MyAccount-content mark{background:none;color:var(--titlu);font-weight:600} /* Istoricul comenzii (WooCommerce il scrie ca
    , nu