/* ════════════════════════════════════════════════════════════════════ BV CART — layout personalizzato pagina Carrello WooCommerce Namespace: tutte le classi iniziano con bv-cart- ════════════════════════════════════════════════════════════════════ */ :root { --bv-cart-green: #2d6a4f; --bv-cart-green-light: #EDF6F0; --bv-cart-text: #234D38; --bv-cart-text-muted: #4A6357; --bv-cart-border: #E1EBE4; --bv-cart-radius: 20px; --bv-cart-radius-sm: 12px; --bv-cart-shadow: 0 4px 24px rgba(35, 77, 56, .06); --bv-cart-shadow-sm: 0 2px 10px rgba(35, 77, 56, .05); --bv-cart-t: .18s ease; } .bv-cart-layout { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; color: var(--bv-cart-text); font-size: 15px; } .bv-cart-main { min-width: 0; grid-column: 1; } /* ── HERO ─────────────────────────────────────────────────────────────── */ .bv-cart-hero { grid-column: 1 / -1; background: transparent; padding: 1.75rem 0 1rem; text-align: left; } .bv-cart-hero__title { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .375rem; color: var(--bv-cart-text); } .bv-cart-hero__text { font-size: .9375rem; color: var(--bv-cart-text-muted); margin: 0; max-width: 60ch; } /* ── STEPPER ──────────────────────────────────────────────────────────── */ .bv-cart-stepper { grid-column: 1 / -1; list-style: none; display: flex; align-items: center; gap: .5rem; margin: 0 0 2rem; padding: 0; } .bv-cart-stepper__step { display: flex; align-items: center; gap: .625rem; font-size: .875rem; font-weight: 700; color: var(--bv-cart-text-muted); } .bv-cart-stepper__step:not(:last-child)::after { content: ''; width: 32px; height: 2px; background: var(--bv-cart-border); margin-left: .5rem; } .bv-cart-stepper__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; background: #fff; border: 2px solid var(--bv-cart-border); color: var(--bv-cart-text-muted); flex-shrink: 0; } .bv-cart-stepper__dot svg { width: 12px; height: 12px; } .bv-cart-stepper__step--active .bv-cart-stepper__dot { background: var(--bv-cart-green); border-color: var(--bv-cart-green); color: #fff; } .bv-cart-stepper__step--active .bv-cart-stepper__label { color: var(--bv-cart-text); } .bv-cart-stepper__label { white-space: nowrap; } .bv-cart-stepper__step--done .bv-cart-stepper__dot { background: var(--bv-cart-green-light); border-color: var(--bv-cart-green); color: var(--bv-cart-green); } .bv-cart-stepper__step--done .bv-cart-stepper__label, .bv-cart-stepper__step--done ~ .bv-cart-stepper__step::after { color: var(--bv-cart-text); } /* ── TABELLA CARRELLO — wrapper leggero attorno al markup nativo WC ──── */ .bv-cart-table-wrap { background: #fff; border: 1px solid var(--bv-cart-border); border-radius: var(--bv-cart-radius); padding: 1.75rem; box-shadow: var(--bv-cart-shadow-sm); } .bv-cart-table-heading { font-size: 1.125rem; font-weight: 800; color: var(--bv-cart-text); margin: 0 0 1.25rem; } .bv-cart-table-wrap .cart-collaterals { margin-top: 1.5rem; } .bv-cart-table-wrap table.cart th, .bv-cart-table-wrap table.cart td { border: none; padding: 1rem .5rem; } .bv-cart-table-wrap table.cart { border-collapse: collapse; } .bv-cart-table-wrap table.cart tbody tr:not(:last-child) td { border-bottom: 1px solid var(--bv-cart-border); } .bv-cart-table-wrap .button { border-radius: var(--bv-cart-radius-sm) !important; } .bv-cart-table-wrap .quantity input.qty { border-radius: var(--bv-cart-radius-sm); border-color: var(--bv-cart-border); } /* "Aggiorna carrello": il carrello si aggiorna già automaticamente via AJAX al cambio quantità, quindi il pulsante è ridondante. Il coupon viene invece disattivato "a monte" tramite il filtro ufficiale woocommerce_coupons_enabled (vedi cart-hooks.php), non con CSS. */ .bv-cart-table-wrap button[name="update_cart"] { display: none !important; } /* Cross Sell — solo stile: la logica resta gestita da WooCommerce o dal plugin di terze parti già in uso, tramite le classi standard che WooCommerce genera di default (cross-sells / products / product). */ .bv-cart-table-wrap .cross-sells { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--bv-cart-border); } .bv-cart-table-wrap .cross-sells > h2 { font-size: 1.1875rem; font-weight: 800; margin: 0 0 1.125rem; color: var(--bv-cart-text); } .bv-cart-table-wrap .cross-sells ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; } .bv-cart-table-wrap .cross-sells ul.products li.product { background: #fff; border: 1px solid var(--bv-cart-border); border-radius: var(--bv-cart-radius-sm); padding: 1rem; text-align: center; transition: box-shadow var(--bv-cart-t), transform var(--bv-cart-t); } .bv-cart-table-wrap .cross-sells ul.products li.product:hover { box-shadow: var(--bv-cart-shadow); transform: translateY(-2px); } .bv-cart-table-wrap .cross-sells ul.products li.product a img { border-radius: var(--bv-cart-radius-sm); margin: 0 0 .75rem; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; } .bv-cart-table-wrap .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .375rem; color: var(--bv-cart-text); } .bv-cart-table-wrap .cross-sells ul.products li.product .price { font-size: 1.1875rem; font-weight: 800; color: var(--bv-cart-green); display: block; margin-bottom: .625rem; } .bv-cart-table-wrap .cross-sells ul.products li.product .price del { color: var(--bv-cart-text-muted); font-weight: 500; font-size: .875rem; opacity: .8; margin-right: .3rem; } .bv-cart-table-wrap .cross-sells ul.products li.product .price ins { text-decoration: none; color: #C43D3D; font-weight: 800; } .bv-cart-table-wrap .cross-sells ul.products li.product a.button { display: inline-flex; align-items: center; justify-content: center; background: var(--bv-cart-green) !important; color: #fff !important; border-radius: var(--bv-cart-radius-sm) !important; padding: .75rem 1.375rem !important; font-weight: 700 !important; font-size: .9375rem !important; text-decoration: none !important; box-shadow: var(--bv-cart-shadow-sm); transition: filter var(--bv-cart-t), transform var(--bv-cart-t); } .bv-cart-table-wrap .cross-sells ul.products li.product a.button:hover { filter: brightness(.9); transform: translateY(-2px); } /* ── SIDEBAR ──────────────────────────────────────────────────────────── */ .bv-cart-sidebar { grid-column: 2; min-width: 0; } .bv-cart-sidebar__sticky { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 30px; } .bv-cart-sidebar__sticky > * { background: #fff; border: 1px solid var(--bv-cart-border); border-radius: var(--bv-cart-radius); padding: 1.5rem; box-shadow: var(--bv-cart-shadow-sm); } /* Totali WooCommerce nativi — solo rifinitura leggera, nessuna riscrittura del markup */ .bv-cart-totals-wrap .cart_totals { background: transparent; border: none; padding: 0; } .bv-cart-totals-wrap .cart_totals table.shop_table { border: none; } .bv-cart-totals-wrap .cart_totals table.shop_table th, .bv-cart-totals-wrap .cart_totals table.shop_table td { border: none; padding: .625rem 0; } .bv-cart-totals-wrap .cart_totals table.shop_table tr:not(:last-child) { border-bottom: 1px solid var(--bv-cart-border); } .bv-cart-totals-wrap .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; height: 56px; background: var(--bv-cart-green) !important; color: #fff !important; text-decoration: none !important; border: none !important; border-radius: var(--bv-cart-radius-sm) !important; padding: 0 1.75rem !important; font-weight: 700 !important; font-size: 1.0625rem !important; box-shadow: var(--bv-cart-shadow-sm); transition: filter var(--bv-cart-t), transform var(--bv-cart-t), box-shadow var(--bv-cart-t); } .bv-cart-totals-wrap .wc-proceed-to-checkout a.checkout-button:hover, .bv-cart-totals-wrap .wc-proceed-to-checkout a.checkout-button:focus { filter: brightness(.88); color: #fff !important; transform: translateY(-2px); box-shadow: var(--bv-cart-shadow); } .bv-cart-totals__microcopy { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .75rem 0 0; font-size: .75rem; color: var(--bv-cart-text-muted); } .bv-cart-totals__microcopy svg { width: 13px; height: 13px; flex-shrink: 0; } /* ── TRUST BAR ────────────────────────────────────────────────────────── */ .bv-cart-trust { display: flex; flex-direction: column; gap: 1rem; border: none !important; } .bv-cart-trust__card { display: flex; align-items: flex-start; gap: .875rem; padding: .5rem; border-radius: var(--bv-cart-radius-sm); transition: background var(--bv-cart-t); } .bv-cart-trust__card:hover { background: var(--bv-cart-green-light); } .bv-cart-trust__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--bv-cart-green-light); color: var(--bv-cart-green); display: flex; align-items: center; justify-content: center; } .bv-cart-trust__icon svg { width: 19px; height: 19px; } .bv-cart-trust__text { display: flex; flex-direction: column; gap: .1rem; } .bv-cart-trust__title { font-size: .875rem; font-weight: 700; color: var(--bv-cart-text); } .bv-cart-trust__sub { font-size: .75rem; color: var(--bv-cart-text-muted); } /* ── PAGAMENTI ────────────────────────────────────────────────────────── */ .bv-cart-payment__title { font-size: .9375rem; font-weight: 800; margin: 0 0 .375rem; color: var(--bv-cart-text); } .bv-cart-payment__text { font-size: .8125rem; color: var(--bv-cart-text-muted); margin: 0 0 1rem; } .bv-cart-payment__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.25rem; } .bv-cart-payment__logo { display: flex; align-items: center; justify-content: center; border: 1px solid var(--bv-cart-border); border-radius: var(--bv-cart-radius-sm); padding: .5rem; background: #fff; } .bv-cart-payment__logo svg, .bv-cart-payment__logo img { width: 100%; height: auto; max-height: 30px; } .bv-cart-payment__footer { display: flex; flex-direction: column; gap: .625rem; } .bv-cart-payment__badge { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--bv-cart-text-muted); } .bv-cart-payment__badge svg { width: 16px; height: 16px; color: var(--bv-cart-green); flex-shrink: 0; } /* ── TESTIMONIANZA ────────────────────────────────────────────────────── */ .bv-cart-review__stars { display: flex; gap: .2rem; margin-bottom: .75rem; color: var(--bv-cart-border); } .bv-cart-review__star svg { width: 16px; height: 16px; } .bv-cart-review__star.is-filled { color: #F5B942; } .bv-cart-review__quote { margin: 0 0 1.125rem; font-style: italic; font-size: .9375rem; line-height: 1.8; color: var(--bv-cart-text); } .bv-cart-review__quote p { margin: 0; } .bv-cart-review__footer { display: flex; align-items: center; gap: .75rem; } .bv-cart-review__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bv-cart-review__author { font-style: normal; font-weight: 700; font-size: .8125rem; display: flex; flex-direction: column; gap: .1rem; } .bv-cart-review__meta { font-weight: 500; color: var(--bv-cart-text-muted); font-size: .75rem; } /* ── GARANZIA — larghezza piena, sotto entrambe le colonne ───────────── */ .bv-cart-guarantee { max-width: 1280px; margin: 0 auto 3rem; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: linear-gradient(135deg, var(--bv-cart-green-light), #fff); border: 1px solid var(--bv-cart-border); border-radius: var(--bv-cart-radius); box-shadow: var(--bv-cart-shadow); padding-block: 2.25rem; } .bv-cart-guarantee__body { max-width: 60ch; } .bv-cart-guarantee__badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bv-cart-green); margin-bottom: .625rem; } .bv-cart-guarantee__badge svg { width: 14px; height: 14px; } .bv-cart-guarantee__title { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: 800; margin: 0 0 .5rem; color: var(--bv-cart-text); line-height: 1.25; } .bv-cart-guarantee__text { font-size: .9375rem; color: var(--bv-cart-text-muted); margin: 0; line-height: 1.65; } .bv-cart-guarantee__badge-circle { flex-shrink: 0; width: 124px; height: 124px; border-radius: 50%; background: var(--bv-cart-green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 28px -6px rgba(45, 106, 79, .45); border: 4px solid #fff; } .bv-cart-guarantee__days { font-size: 2.375rem; font-weight: 900; line-height: 1; } .bv-cart-guarantee__days-label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; margin-top: .25rem; } /* ── MICRO-ANIMAZIONI — hover leggerissimo, mai invasivo ─────────────── */ .bv-cart-trust, .bv-cart-payment, .bv-cart-review, .bv-cart-guarantee { transition: transform .25s ease; } .bv-cart-trust:hover, .bv-cart-payment:hover, .bv-cart-review:hover, .bv-cart-guarantee:hover { transform: translateY(-2px); } /* ── ACCESSIBILITÀ — focus visibile per navigazione da tastiera ──────── */ .bv-cart-layout a:focus-visible, .bv-cart-layout button:focus-visible, .bv-cart-layout input:focus-visible, .bv-cart-topbar a:focus-visible, .bv-cart-legal-footer a:focus-visible, .bv-cart-guarantee a:focus-visible { outline: 3px solid var(--bv-cart-green, #2d6a4f); outline-offset: 2px; } /* ── FADE-IN LEGGERO (IntersectionObserver in cart.js) ───────────────── */ .bv-cart-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .bv-cart-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bv-cart-reveal { opacity: 1; transform: none; transition: none; } .bv-cart-trust, .bv-cart-payment, .bv-cart-review, .bv-cart-guarantee, .bv-cart-table-wrap .cross-sells ul.products li.product, .bv-cart-totals-wrap .wc-proceed-to-checkout a.checkout-button, .bv-cart-table-wrap .cross-sells ul.products li.product a.button { transition: none; } .bv-cart-trust:hover, .bv-cart-payment:hover, .bv-cart-review:hover, .bv-cart-guarantee:hover, .bv-cart-table-wrap .cross-sells ul.products li.product:hover, .bv-cart-totals-wrap .wc-proceed-to-checkout a.checkout-button:hover, .bv-cart-table-wrap .cross-sells ul.products li.product a.button:hover { transform: none; } } /* ── TOPBAR (logo) ────────────────────────────────────────────────────── */ .bv-cart-topbar { background: #fff; border-bottom: 1px solid #EDEEF0; padding: 1.25rem 1.5rem; text-align: center; } .bv-cart-topbar__logo-link { display: inline-block; } .bv-cart-topbar__logo { display: block !important; height: 34px !important; width: auto !important; max-width: 160px !important; object-fit: contain !important; } @media (max-width: 600px) { .bv-cart-topbar { padding: .875rem 1rem; } .bv-cart-topbar__logo { height: 26px !important; max-width: 120px !important; } } /* ── FOOTER LEGALE (sostituisce il footer completo del tema) ─────────── */ .bv-cart-legal-footer { background: #fff; border-top: 1px solid #EDEEF0; padding: 1.75rem 1.5rem; } .bv-cart-legal-footer__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; } .bv-cart-legal-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .8125rem; } .bv-cart-legal-footer__links a { color: var(--bv-cart-text-muted, #4A6357); text-decoration: none; } .bv-cart-legal-footer__links a:hover { color: #2d6a4f; text-decoration: underline; } .bv-cart-legal-footer__sep { color: #C7D1CB; } .bv-cart-legal-footer__vat { margin: 0; font-size: .75rem; color: var(--bv-cart-text-muted, #4A6357); } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════════ */ /* Tablet — due colonne ridotte */ @media (max-width: 1024px) { .bv-cart-layout { grid-template-columns: 1fr 300px; gap: 1.75rem; padding: 0 1.25rem 2.5rem; } .bv-cart-sidebar__sticky > * { padding: 1.25rem; } .bv-cart-guarantee { flex-direction: column; text-align: center; padding: 1.75rem 1.25rem; } .bv-cart-guarantee__body { max-width: none; } .bv-cart-guarantee__badge-circle { width: 104px; height: 104px; } .bv-cart-guarantee__days { font-size: 2rem; } } /* Mobile — una colonna. L'ordine naturale del markup (Hero, Stepper, Tabella, Cross Sell dentro
, poi