/* DJAHARA — Mini carrello del drawer. * * Sta in un file suo, e non in woocommerce.css, perché è l'unica parte di CSS * store che serve su OGNI pagina: `template-parts/header/drawer-cart.php` * chiama `woocommerce_mini_cart()` inline nell'header, quindi il markup del * mini carrello esiste anche in home, nelle collezioni e nelle pagine * editoriali, dove il resto di woocommerce.css non serve a nulla. * * Estratto da woocommerce.css il 2026-08-03. Le regole sono invariate. */ /* ========================================= Mini carrello nel drawer ========================================= */ /* * La riga la impagina `woocommerce/cart/mini-cart.php`, che è nostro: immagine * come primo figlio, corpo come secondo, «rimuovi» come terzo. Le regole che * stavano qui prima — griglia `84px 1fr` più `order: -1` e `grid-row: span 2` * sull'immagine — presupponevano una struttura che WooCommerce non emette: nel * template originale l'immagine è annidata dentro il link del nome, quindi non è * un elemento della griglia e quelle due proprietà non toccavano nulla. */ .dj-minicart { margin: 0; padding: 0; list-style: none; } .dj-minicart__riga { position: relative; display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--dj-hairline); } .dj-minicart__media { display: block; flex: none; width: 84px; overflow: hidden; } /* * Il selettore è lungo per battere `.woocommerce ul.product_list_widget li img`, * che vale (0,2,2) e impone `width: 32px; float: right`. La `.woocommerce` di * quel selettore è la classe sul `` delle pagine negozio, quindi la regola * raggiunge il drawer anche se il drawer sta nell'header. Qui: tre classi e tre * elementi, (0,3,3), vinta di specificità e non di ordine. */ .dj-drawer--cart ul.dj-minicart li .dj-minicart__media img { display: block; width: 84px; height: 104px; object-fit: cover; margin: 0; float: none; box-shadow: none; } /* `min-width: 0` è ciò che permette al nome lungo di troncare invece di allargare la riga oltre il drawer. */ .dj-minicart__corpo { flex: 1; min-width: 0; /* Spazio per il «×», che è posizionato in assoluto nell'angolo. */ padding-right: 26px; } .dj-minicart__collezione { margin: 0; font-size: 9.5px; letter-spacing: .20em; text-transform: uppercase; color: var(--dj-graphite); } .dj-minicart__nome { margin: 6px 0 0; font-family: var(--dj-display); font-size: 19px; line-height: 1.2; } .dj-minicart__nome a { color: var(--dj-ink); text-decoration: none; } .dj-minicart__variante { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dj-graphite); } .dj-minicart__prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 10px 0 0; font-size: 14px; } .dj-minicart__qta { margin-left: auto; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dj-graphite); white-space: nowrap; } /* * Il «×» di WooCommerce. * * `!important` sul solo colore, e non per pigrizia: WooCommerce dichiara * `.woocommerce a.remove { color: var(--wc-red) !important }`, e contro * `!important` nessuna specificità basta. Le altre proprietà si sovrascrivono * normalmente, quindi non portano il flag. * * Il rosso arrivava fin qui perché quella `.woocommerce` è la classe sul `` * delle pagine negozio: le regole del tema per `a.remove`, tutte scoped * `.woocommerce a.remove`, avevano invece la stessa specificità e perdevano. */ .dj-minicart__riga a.remove { position: absolute; top: 18px; right: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent; font-size: 15px; font-weight: 400; line-height: 1; text-decoration: none; color: var(--dj-graphite) !important; } .dj-minicart__riga a.remove:hover { background: transparent; color: var(--dj-error) !important; } .dj-minicart__nota { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--dj-hairline); font-size: 12.5px; line-height: 1.75; color: var(--dj-graphite); } /* * Il subtotale, che nel prototipo sta nel piede del drawer. * * `mini-cart.php` lo stampa dentro il corpo, e spostarlo vorrebbe dire spezzare * il template in due parti — la lista qui, il totale là — perdendo * `woocommerce_widget_shopping_cart_total` e chi vi si aggancia. Resta quindi nel * corpo, che è una colonna flessibile, e `margin-top: auto` lo spinge in fondo: * finisce appoggiato al filo del piede, dov'è disegnato. Prima galleggiava a metà * drawer con un vuoto di trecento pixel sotto. */ .dj-drawer--cart .dj-drawer__body { display: flex; flex-direction: column; } /* * Nessun filetto sopra il subtotale. * * Ce n'era uno, e con `margin-top: auto` che spinge il subtotale in fondo si * trovava a separarlo dal vuoto: misurati 495px di niente sopra la linea, con * l'ultimo prodotto finito molto più su. A sessanta pixel sotto c'è già il filo * ink del piede, che chiude il blocco per davvero. Due linee per una sola * separazione, e quella in alto non separava nulla. */ .dj-drawer--cart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; margin-top: auto; padding-top: 20px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dj-graphite); } .dj-drawer--cart .woocommerce-mini-cart__total strong { font-weight: 400; } .dj-drawer--cart .woocommerce-mini-cart__total .amount { font-family: var(--dj-display); font-size: 22px; letter-spacing: normal; text-transform: none; color: var(--dj-ink); } /* I due bottoni nativi del mini carrello: nascosti, il drawer ha i propri. */ .dj-drawer--cart .woocommerce-mini-cart__buttons { display: none; } .dj-drawer--cart .woocommerce-mini-cart__empty-message { padding: 24px 0; color: var(--dj-graphite); }