/* ============================================================ EUFORIA — Cart drawer / slider carrello · CSS File: assets/css/cart-drawer.css · handle: euforia-cart-drawer Server: wp-content/themes/hello-elementor-child/assets/css/cart-drawer.css Carica su tutto il front-end (functions-cart-drawer-APPEND.php). ------------------------------------------------------------ Design "Luce di Sicilia": pastello, lusso sobrio. Stessa lingua visiva dei drawer PDP (fondo chiaro, filo maiolica sottile, CTA a pillola). Il markup è iniettato in da cart-drawer.js. ============================================================ */ /* Token di riserva: se lo style.css del child li definisce già (:root), questi valori identici non cambiano nulla — servono all'autosufficienza. */ :root{ --paper:#FFFFFF; --paper-2:#FCFAF6; --linen:#F6F1E9; --line:#E8E1D5; --grey:#ECECEA; --gold:#BE8F39; --gold-l:#E0BC5A; --fucsia:#C42C7B; --teal:#1C9AA1; --t-sun:#F7EFD6; --ink:#2B2723; --ink-soft:#6E6557; --ink-mut:#9C9486; --font-d:'Cormorant Garamond',Georgia,serif; --font-b:'Quicksand',system-ui,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* z-index alti: il drawer sta SOPRA l'header HFE (z 300) ma sotto il toast della PDP (100000). cart-drawer.js lo sposta in per uscire dai wrapper con transform. */ .euf-cart-backdrop{position:fixed;inset:0;z-index:99990;background:rgba(20,25,25,.45); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;} .euf-cart-backdrop.is-open{opacity:1;visibility:visible;} .euf-cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:99991;width:min(430px,94vw); background:var(--paper);transform:translateX(100%);transition:transform .4s var(--ease); display:flex;flex-direction:column;box-shadow:-24px 0 60px -30px rgba(0,0,0,.4); font-family:var(--font-b);color:var(--ink);} .euf-cart-drawer.is-open{transform:translateX(0);} .euf-cart-drawer,.euf-cart-drawer *{box-sizing:border-box;} .euf-cart-drawer img{display:block;max-width:100%;} /* barra di caricamento sottile in testa quando busy */ .euf-cart-drawer.is-busy::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:5; background:linear-gradient(90deg,transparent,var(--gold-l),transparent);background-size:40% 100%; animation:eufCartBar 1s linear infinite;} @keyframes eufCartBar{from{background-position:-40% 0;}to{background-position:140% 0;}} /* -------- testata -------- */ .euf-cart-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 26px 16px;} .euf-cart-title{font-family:var(--font-d);font-weight:500;text-transform:uppercase;letter-spacing:.03em; font-size:22px;line-height:1;display:inline-flex;align-items:baseline;gap:8px;} .euf-cart-badge{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-mut);} .euf-cart-badge:empty{display:none;} .euf-cart-close{background:none;border:none;cursor:pointer;color:var(--ink);width:36px;height:36px; display:grid;place-items:center;border-radius:100px;transition:background .2s;flex:0 0 auto;line-height:0;padding:0;} .euf-cart-close:hover{background:var(--linen);} /* icone X: dimensioni quadrate bloccate → restano a 45° (niente stretch del tema) */ .euf-cart-close svg{display:block;width:20px;height:20px;} /* filo maiolica: tocco di colore sotto la testata (come nel footer) */ .euf-cart-maiolica{display:block;flex:0 0 auto;height:3px; background:linear-gradient(90deg, var(--teal) 0 20%, var(--t-sun) 20% 40%, var(--fucsia) 40% 60%, var(--gold) 60% 80%, var(--teal) 80% 100%);} /* -------- area scrollabile -------- */ .euf-cart-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;} .euf-cart-body{padding:8px 26px 24px;} .euf-cart-loading{padding:40px 0;text-align:center;font-size:13px;color:var(--ink-mut);} /* -------- righe prodotto -------- */ .euf-cart-items{list-style:none;margin:0;padding:0;} .euf-cart-item{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);} .euf-cart-item:last-child{border-bottom:none;} .euf-ci-media{display:block;width:72px;height:88px;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:3px;} .euf-ci-img{width:100%;height:100%;object-fit:cover;} .euf-ci-main{min-width:0;display:flex;flex-direction:column;} .euf-ci-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .euf-ci-name{font-family:var(--font-d);font-size:17px;font-weight:500;line-height:1.2;color:var(--ink);text-decoration:none;} a.euf-ci-name:hover{color:var(--fucsia);} .euf-ci-remove{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--ink-mut); width:26px;height:26px;display:grid;place-items:center;border-radius:100px;margin:-3px -4px 0 0;transition:color .2s,background .2s;line-height:0;padding:0;} .euf-ci-remove:hover{color:var(--fucsia);background:var(--linen);} .euf-ci-remove svg{display:block;width:15px;height:15px;} /* X quadrata, niente stretch */ .euf-ci-meta{font-size:11.5px;letter-spacing:.01em;color:var(--ink-soft);margin-top:4px;line-height:1.5;} .euf-ci-meta dl,.euf-ci-meta p{margin:0;} .euf-ci-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;} /* stepper quantità a pillola */ .euf-ci-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;} .euf-ci-step{background:none;border:none;cursor:pointer;color:var(--ink);width:30px;height:30px; font-family:var(--font-b);font-size:16px;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s;} .euf-ci-step:hover{background:var(--linen);color:var(--fucsia);} .euf-ci-q{min-width:26px;text-align:center;font-size:13px;font-weight:600;color:var(--ink);} .euf-ci-price{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;} .euf-ci-price .amount{white-space:nowrap;} .euf-ci-price del{color:var(--ink-mut);font-weight:400;margin-right:6px;} /* -------- vuoto -------- */ .euf-cart-empty{padding:56px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;} .euf-cart-empty-ico{color:var(--gold);opacity:.85;margin-bottom:10px;} .euf-cart-empty-t{font-family:var(--font-d);font-size:22px;font-weight:500;color:var(--ink);margin:0;} .euf-cart-empty-s{font-size:13px;color:var(--ink-soft);margin:0 0 18px;line-height:1.6;max-width:260px;} /* -------- piede: barra spedizione + subtotale + CTA (compatto, minimal) -------- */ .euf-cart-foot{flex:0 0 auto;border-top:1px solid var(--line);background:var(--paper-2);padding:15px 26px 18px;} .euf-cart-foot[hidden]{display:none;} /* barra "spedizione gratuita" (soglia reale WooCommerce; assente se non configurata) */ .euf-cart-ship-slot:empty{display:none;} .euf-cart-ship{margin-bottom:13px;} .euf-cart-ship-txt{font-size:11.5px;line-height:1.5;text-align:center;color:var(--ink-soft);margin:0 0 7px;} .euf-cart-ship-txt b{color:var(--ink);font-weight:700;} .euf-cart-ship-txt .amount{white-space:nowrap;color:var(--gold);} .euf-cart-ship-bar{display:block;height:4px;border-radius:100px;background:var(--line);overflow:hidden;} .euf-cart-ship-bar i{display:block;height:100%;border-radius:100px; background:linear-gradient(90deg,var(--gold-l),var(--gold));transition:width .5s var(--ease);} .euf-cart-ship.is-reached .euf-cart-ship-txt, .euf-cart-ship.is-reached .euf-cart-ship-txt b{color:var(--gold);} .euf-cart-ship.is-reached .euf-cart-ship-bar i{background:var(--gold);} .euf-cart-reassure{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-mut);text-align:center;margin-bottom:11px;line-height:1.5;} .euf-cart-sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:2px;} .euf-cart-sub>span:first-child{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-soft);} /* tocco di colore: il subtotale in oro (firma del brand) */ .euf-cart-sub-val{font-family:var(--font-d);font-size:23px;font-weight:600;color:var(--gold);} .euf-cart-sub-val .amount{white-space:nowrap;} .euf-cart-fine{font-size:11px;color:var(--ink-mut);margin:1px 0 12px;line-height:1.45;} /* CTA primaria: pillola compatta, pop fucsia all'hover */ .euf-cart-btn-primary, .euf-cart-btn-primary:link, .euf-cart-btn-primary:visited{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer; font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:14px 22px;border-radius:100px;background:var(--ink);color:#fff;border:1px solid var(--ink); transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);} /* color:#fff anche su :hover, altrimenti l'a:hover del tema lo riporta scuro */ .euf-cart-btn-primary:hover, .euf-cart-btn-primary:focus{background:var(--fucsia);border-color:var(--fucsia);color:#fff;} /* CTA secondaria: link di testo minimal, non più un bottone bordato */ .euf-cart-btn-ghost{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;background:none;border:none; font-family:var(--font-b);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);padding:11px 8px 2px;transition:color .2s var(--ease);} .euf-cart-btn-ghost:hover{color:var(--fucsia);} /* -------- responsive -------- */ @media(max-width:480px){ .euf-cart-drawer{width:100vw;} .euf-cart-head{padding:18px 20px 14px;} .euf-cart-body{padding:6px 20px 20px;} .euf-cart-foot{padding:16px 20px 22px;} } @media(prefers-reduced-motion:reduce){ .euf-cart-drawer,.euf-cart-backdrop{transition:none!important;} .euf-cart-drawer.is-busy::before{animation:none!important;} }