[hidden]{display:none!important} .category-breadcrumb{display:flex;align-items:center;gap:11px;padding-block:14px;font-size:13px;color:var(--muted)}.category-breadcrumb a{min-height:32px;display:flex;align-items:center}.category-breadcrumb [aria-current]{color:var(--blue)}.category-hero{background:var(--cream);border-block:1px solid var(--line)}.category-hero-inner{display:grid;grid-template-columns:1.7fr 1fr;gap:64px;align-items:center;padding-block:36px}.category-hero .eyebrow{font-size:12px;margin-bottom:13px}.category-hero h1{font-size:51px;line-height:1.08;margin:0 0 18px;letter-spacing:-.045em}.category-description{font-size:17px;line-height:1.6;color:var(--muted)}.system-note{display:inline-flex;align-items:center;gap:9px;margin-top:18px;min-height:38px;font-size:13px;color:var(--blue)}.system-note>svg{width:18px;height:18px}.system-note>span>span{color:var(--muted)}.system-note>svg:last-child{margin-left:4px;width:16px}.system-note:hover{text-decoration:underline;text-underline-offset:4px}.category-visual{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--blue)}.category-visual img{width:210px;height:210px;object-fit:contain;transform:scale(1.65);mix-blend-mode: normal}.category-visual>span{font-size:14px;line-height:1.6;position:relative;max-width:145px}.category-visual em{font-family:var(--display);font-size:19px;line-height:1.3;display:block;margin-top:4px} .system-navigation{display:flex;gap:30px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0}.system-navigation>span{font-size:13px;color:var(--muted);white-space:nowrap}.system-navigation>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.system-navigation a{display:flex;align-items:center;min-height:42px;padding:9px 17px;border:1px solid transparent;border-radius:3px;font-size:14px;color:var(--blue)}.system-navigation a[aria-current]{border-color:var(--blue);background:var(--blue);color:white}@media(hover:hover){.system-navigation a:not([aria-current]):hover{border-color:var(--line);background:var(--cream)}}.catalog-section{padding:40px 0 42px}.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.catalog-heading .eyebrow{font-size:12px;margin-bottom:8px}.catalog-heading h2{font-size:38px}.catalog-count{font-size:14px;color:var(--muted);white-space:nowrap}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px}.filter-chips{display:flex;gap:8px;flex-wrap:wrap}.system-chips{margin-bottom:14px}.filter-chips a{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:3px;background:white;color:var(--muted);font-size:14px;padding:10px 16px}.filter-chips a>span{font-size:12px;opacity:.8}.filter-chips a[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:var(--cream);font-weight:600}@media(hover:hover){.filter-chips a:hover{border-color:var(--blue)}}.sort-control{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted)}.sort-control select{font-family:var(--font);font-size:15px;min-height:44px;border:1px solid var(--line);border-radius:3px;color:var(--blue);background:white;padding:9px 12px;max-width:220px;cursor:pointer}.active-filter{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:-8px 0 20px;padding:9px 14px;background:var(--cream);border:1px solid var(--line);font-size:13px;color:var(--blue)}.active-filter a{display:flex;align-items:center;gap:7px;min-height:36px;border:0;background:none;color:var(--blue);font-size:13px;text-decoration:underline;text-underline-offset:3px}.active-filter svg{width:15px;height:15px} .listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 28px}.listing-card{min-width:0}.listing-photo{height:265px;position:relative;display:block;overflow:hidden;background:var(--cream);border:1px solid var(--line);border-radius:3px}.listing-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode: normal;transform:scale(1.07);transition:transform .2s}@media(hover:hover){.listing-photo:hover img{transform:scale(1.11)}}.pack-tag{position:absolute;z-index:1;top:16px;left:17px;font-size:12px;color:var(--blue)}.decaf-tag{position:absolute;bottom:14px;left:16px;z-index:1;border:1px solid var(--line);background:white;padding:5px 8px;color:var(--blue);font-size:12px}.listing-info{padding:18px 0 0}.listing-info .product-brand{font-size:12px;letter-spacing:.07em;margin-bottom:4px}.listing-info h2,.listing-info h3{font-size:29px;letter-spacing:-.035em;line-height:1.17;overflow-wrap:break-word}.listing-info h2 a,.listing-info h3 a:hover{text-decoration:underline;text-underline-offset:5px}.listing-flavor{font-size:15px;color:var(--muted);margin-top:9px;min-height:23px}.card-rating{display:flex;align-items:center;gap:8px;min-height:35px;font-size:13px;color:var(--blue);margin-top:6px}.card-rating>span>span{color:var(--muted)}.rating-stars{position:relative;display:inline-block;width:85px;height:15px;flex-shrink:0}.rating-stars svg{width:15px;height:15px;fill:currentColor;stroke-width:1;flex-shrink:0}.star-base,.star-fill{display:flex;gap:2px;position:absolute;top:0;left:0;height:15px;overflow:hidden;white-space:nowrap}.star-base{color:var(--line);width:100%}.star-fill{color:var(--cb-star)!important}.no-rating{color:var(--muted);font-size:12px}.listing-price{display:flex;align-items:baseline;gap:13px;margin:12px 0 14px}.listing-price>strong{font-size:26px;font-weight:600;color:var(--blue);letter-spacing:-.025em;font-variant-numeric:tabular-nums}.listing-price>span{font-size:13px;color:var(--muted)}.listing-add{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:49px;width:100%;border:1px solid var(--blue);border-radius:3px;padding:11px 16px;background:white;color:var(--blue);font-weight:600;font-size:15px;transition:background .18s,color .18s}.listing-add.added{background:var(--blue);color:white}@media(hover:hover){.listing-add:hover{background:var(--blue);color:white}}.listing-add svg{width:19px;height:19px}.choice-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:38px;min-height:360px}.choice-card>svg{width:34px;height:34px;color:var(--blue);margin-bottom:25px;stroke-width:1.3}.choice-card .eyebrow{font-size:12px;margin-bottom:12px}.choice-card h2{font-size:35px;line-height:1.1;margin-bottom:20px}.choice-card>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--muted);max-width:270px}.choice-card .text-link{font-size:15px;margin-top:24px}.catalog-shipping{display:flex;justify-content:center;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-top:32px}.catalog-shipping svg{width:21px;height:21px;color:var(--blue)} .category-guide{background:var(--cream);border-block:1px solid var(--line);padding:56px 0}.guide-copy>*{max-width:720px}.guide-copy>.eyebrow{font-size:12px;margin-bottom:13px}.guide-copy h2{font-size:32px;margin:28px 0 16px;letter-spacing:-.03em}.guide-copy h2:first-of-type{margin-top:0;font-size:40px}.guide-copy .guide-intro{font-size:18px;line-height:1.6;color:var(--blue);margin-bottom:6px}.guide-copy p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:14px}.guide-copy ul{margin:0 0 18px;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.7}.guide-copy li{margin-bottom:6px}.guide-copy li strong{color:var(--blue)}.guide-copy .cb-tm-note{font-size:13px;margin-top:22px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.guide-grid .eyebrow{font-size:12px;margin-bottom:13px}.guide-grid h2{font-size:40px;margin-bottom:22px}.guide-grid>div>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.7;max-width:490px}.guide-grid .text-link{margin-top:18px;font-size:15px}.category-faq details{border-bottom:1px solid var(--line);scroll-margin-top:24px}.category-faq details:first-child{border-top:1px solid var(--line)}.category-faq summary{list-style:none;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--blue);font-size:17px;font-weight:600;cursor:pointer}.category-faq summary::-webkit-details-marker{display:none}.category-faq summary svg{width:18px;height:18px}.category-faq details[open] summary svg{transform:rotate(45deg)}.category-faq details>p{font-size:15px;color:var(--muted);margin-bottom:15px;line-height:1.65}.category-faq details>a,.show-decaf{display:inline-flex;min-height:44px;align-items:center;gap:12px;border:0;background:none;padding:0;margin-bottom:12px;color:var(--blue);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.show-decaf svg{width:18px;height:18px}.added-bar{position:fixed;z-index:35;bottom:20px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);display:flex;align-items:center;gap:24px;background:white;border:1px solid var(--line);border-radius:3px;box-shadow:0 5px 35px #002a5225;padding:14px 16px 14px 22px;color:var(--blue)}.added-bar>div{display:flex;gap:12px;align-items:center;font-size:15px}.added-bar>div>svg{width:21px;height:21px}.added-bar .button{min-height:46px;font-size:14px;padding:10px 16px;gap:20px}.added-bar .button svg{width:19px;height:19px}.added-bar>.icon-button{width:44px;height:44px}.added-bar>.icon-button svg{width:19px;height:19px}.has-added .preview-label{bottom:112px}.preview-label{font-size:12px} @media(max-width:1100px){.category-hero-inner{grid-template-columns:1.8fr 1fr;gap:28px}.category-hero h1{font-size:44px}.category-visual{gap:0}.category-visual img{width:160px;height:180px}.category-visual>span{font-size:12px}.category-visual em{font-size:16px}.system-navigation{gap:14px}.system-navigation a{padding-inline:12px;font-size:13px}.listing-photo{height:230px}.listing-grid{gap:36px 22px}.listing-info h2,.listing-info h3{font-size:26px}.listing-price{display:block}.listing-price>span{display:block;font-size:12px}.choice-card{padding:28px}.choice-card h2{font-size:30px}.choice-card>p:not(.eyebrow){font-size:15px}.guide-grid{gap:60px}} @media(max-width:850px){.category-hero h1{font-size:38px}.category-hero-inner{grid-template-columns:2fr 1fr;gap:20px}.category-visual>span{display:none}.category-description{font-size:16px}.category-description br{display:none}.system-navigation>span{display:none}.system-navigation>div{gap:6px}.catalog-toolbar{align-items:start;gap:16px}.filter-chips a{font-size:13px;padding:10px 12px}.sort-control{flex-direction:column;align-items:start;gap:4px;margin-top:-20px}.sort-control label{font-size:12px}.sort-control select{font-size:14px;max-width:190px}.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}.listing-photo{height:260px}.listing-info h2,.listing-info h3{font-size:28px}.listing-price{display:flex;gap:12px}.catalog-heading h2{font-size:34px}.choice-card h2{font-size:34px}.choice-card>p:not(.eyebrow){font-size:16px}.guide-grid{gap:40px}.guide-grid h2{font-size:34px}.guide-copy h2:first-of-type{font-size:34px}.category-faq summary{font-size:15px}.added-bar{gap:12px}.added-bar>div{font-size:14px}} @media(max-width:600px){.category-breadcrumb{padding-block:8px;gap:7px;font-size:12px}.category-breadcrumb>a:nth-child(3),.category-breadcrumb>span:nth-child(4){display:none}.category-hero-inner{display:block;padding-block:26px 20px}.category-hero .eyebrow{font-size:12px;margin-bottom:10px}.category-hero h1{font-size:35px;line-height:1.08;margin-bottom:14px}.category-description{font-size:15px;line-height:1.5;max-width:360px}.category-visual{display:none}.system-note{font-size:12px;gap:7px;margin-top:12px;min-height:40px}.system-note>svg:last-child{display:none}.system-note>svg{width:16px;height:16px}.system-note>span>span{font-size:12px}.system-navigation{padding:12px 0}.system-navigation>div{flex-wrap:nowrap;gap:8px;overflow-x:auto;width:100%;padding:3px 2px 6px;scrollbar-width:thin}.system-navigation a{flex-shrink:0;white-space:nowrap;padding:8px 12px;min-height:42px;border-color:var(--line);font-size:12px}.catalog-section{padding-top:26px;padding-bottom:28px}.catalog-heading{margin-bottom:20px;gap:12px;align-items:center}.catalog-heading .eyebrow{font-size:12px;margin-bottom:6px}.catalog-heading h2{font-size:28px;max-width:250px}.catalog-count{font-size:12px;white-space:nowrap;text-align:right;line-height:1.4}.catalog-toolbar{display:block;padding-bottom:20px}.filter-chips{gap:7px;flex-wrap:nowrap}.system-chips{flex-wrap:wrap;margin-bottom:12px}.system-chips a{flex:0 1 auto}.filter-chips a{font-size:12px;gap:6px;padding:10px 12px;flex:1;justify-content:center;white-space:nowrap}.filter-chips a>span{font-size:12px}.sort-control{flex-direction:row;align-items:center;justify-content:space-between;margin:12px 0 0;gap:12px}.sort-control label{font-size:12px}.sort-control select{font-size:14px;max-width:none;min-width:185px;padding:8px 10px;min-height:42px}.listing-grid{gap:27px 14px}.listing-photo{height:204px;display:flex;flex-direction:column;padding-top:7px}.listing-photo img{transform:scale(1.07)}.pack-tag{position:static;margin:0 10px 3px;font-size:12px;line-height:1.35;flex-shrink:0}.woocommerce ul.products li.product a.listing-photo img{height:auto;flex:1;min-height:0}.decaf-tag{bottom:9px;left:8px;padding:3px 5px;font-size:12px}.listing-info{padding-top:12px}.listing-info .product-brand{font-size:12px;letter-spacing:.04em}.listing-info h2,.listing-info h3{font-size:23px;min-height:54px}.listing-flavor{font-size:12px;line-height:1.5;min-height:36px;margin-top:4px}.card-rating{gap:6px;font-size:12px;min-height:30px;margin-top:4px;flex-wrap:wrap}.rating-stars{width:70px;height:12px}.rating-stars svg{width:12px;height:12px}.star-base,.star-fill{height:12px;gap:2px}.no-rating{font-size:12px}.listing-price{display:block;margin:9px 0 12px}.listing-price>strong{font-size:23px}.listing-price>span{font-size:12px;display:block;margin-top:1px}.listing-add{font-size:12px;min-height:46px;padding:9px 9px;gap:5px}.listing-add svg{width:15px;height:15px}.choice-card{padding:20px 16px;min-height:0;justify-content:center}.choice-card>svg{width:27px;height:27px;margin-bottom:18px}.choice-card .eyebrow{font-size:8px;letter-spacing:.06em;line-height:1.5}.choice-card h2{font-size:25px;margin-bottom:14px}.choice-card>p:not(.eyebrow){font-size:13px;line-height:1.6}.choice-card .text-link{font-size:13px;gap:10px;margin-top:14px}.choice-card .text-link svg{width:17px;height:17px}.catalog-shipping{align-items:flex-start;font-size:12px;margin-top:26px;text-align:left;line-height:1.6;gap:9px}.catalog-shipping svg{margin-top:2px;width:19px;height:19px}.active-filter{font-size:12px;gap:12px;padding:7px 10px}.active-filter a{font-size:12px}.category-guide{padding:36px 0}.guide-grid{display:block}.guide-grid h2{font-size:34px;margin-bottom:18px}.guide-copy h2:first-of-type{font-size:29px}.guide-copy .guide-intro{font-size:16px}.guide-grid>div>p:not(.eyebrow){font-size:15px}.guide-grid .text-link{font-size:14px;margin-top:15px}.category-faq{margin-top:26px}.category-faq summary{font-size:15px;min-height:65px;gap:16px}.category-faq details>p{font-size:14px}.added-bar{left:12px;right:12px;bottom:12px;transform:none;width:auto;max-width:none;flex-wrap:wrap;gap:10px;padding:14px 48px 14px 16px}.added-bar>div{font-size:13px;gap:9px;width:100%}.added-bar>.icon-button{position:absolute;right:4px;top:4px}.added-bar>.button{font-size:13px;min-height:44px}.has-added .preview-label{bottom:145px}.preview-label{font-size:8px}} @media(max-width:370px){.category-hero h1{font-size:32px}.filter-chips a{padding-inline:9px;gap:4px}.listing-photo{height:189px}.listing-info h2,.listing-info h3{font-size:21px;min-height:50px}.listing-add{font-size:12px;padding-inline:8px}.listing-add svg{width:14px}.choice-card{padding:18px 13px}.choice-card h2{font-size:23px}.listing-price>strong{font-size:22px}} /* Compact category opening: keep the first products close to the top. */ .category-hero-inner{padding-block:26px}.category-hero h1{font-size:46px;margin-bottom:14px}.system-navigation{padding-block:12px}.catalog-section{padding-top:28px}.catalog-heading{margin-bottom:20px}.catalog-heading h2{font-size:35px}.rating-stars .star-base{color:var(--line)} @media(max-width:850px){.category-hero h1{font-size:39px}.catalog-heading h2{font-size:32px}} @media(max-width:600px){.category-hero-inner{padding-block:22px 17px}.category-hero h1{font-size:33px;margin-bottom:12px}.category-description{font-size:14px}.catalog-section{padding-top:22px}.catalog-heading{margin-bottom:17px}.catalog-heading .eyebrow{display:none}.catalog-heading h2{font-size:27px;max-width:none}.catalog-count{white-space:nowrap}.system-navigation{padding-block:10px}} @media(max-width:370px){.category-hero h1{font-size:30px}.catalog-heading h2{font-size:25px}} /* * Sopra: copia invariata di "DESIGN BY CODEX/shop/v1/listing.css" (identico * a "category/v1/category.css" — un solo componente condiviso). Sotto: * innesto in WooCommerce (Task 3), non nel prototipo. */ /* * Audit design 2026-09-19, followup (R07, Nespresso — testo SEO conservato): * cb_category_guide() (inc/shop-archive.php) stampa per Nespresso due * ".category-guide" adiacenti (griglia guida+FAQ, poi testo SEO esteso) — * ognuna ha già "border-block" sopra (riga 5): tra le due il bordo inferiore * della prima e quello superiore della seconda si sommerebbero in una riga * doppia mai vista altrove nel sito. Non tocca ".category-guide" da solo * (le altre 6 categorie restano una sezione sola, bordo invariato). */ .category-guide + .category-guide { border-top: 0; } /* woocommerce.css/woocommerce-layout.css mettono su ::before/::after un vecchio clearfix (content:" ";display:table) e su
  • float/width fissi (anche da woocommerce-smallscreen.css sotto 768px, con selettore più specifico del nostro: da qui l'!important) — sostituiti dalla griglia CSS di .listing-grid sopra. Stessa necessità già documentata nel vecchio css/shop.css. */ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; min-width: 0; } /* * Revisione Codex 20.09.2026, R03: il "margin:0 !important" qui sopra serve a * spegnere il margine di WooCommerce (ul.products li.product{margin:0 0 2.992em}) * che sfalserebbe la griglia, ma azzerava anche il margine sotto la card * previsto dal layout subgrid (32px desktop / 28px mobile in questo file e in * css/shop.css). Risultato misurato: separazione 0px fra una riga di prodotti * e la successiva, su negozio, ricerca e categoria. * * La card riprende il margine da una variabile, così non serve rincorrere la * specificità con altri !important: il valore lo imposta il blocco @supports * del layout a subgrid, e fuori da lì resta 0 perché la spaziatura la dà il * row-gap della griglia. */ .woocommerce ul.products li.product.listing-card { margin-bottom: var(--cb-card-gap, 0) !important; } /* Prezzo nativo (WC_Product::get_price_html()) al posto del statico del mockup: stessa taglia/peso, il markup interno resta quello di WooCommerce (necessario per il prezzo scontato "Sale!"). */ .listing-price .price { font-size: 26px; font-weight: 600; color: var(--blue); letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .listing-price del { opacity: .6; font-size: 16px; margin-right: 8px; } @media (max-width: 1100px) { .listing-price .price { font-size: 23px; } } @media (max-width: 600px) { .listing-price .price { font-size: 23px; } } /* Valutazione (cb_loop_rating_with_count(), inc/loop-card.php): stesse stelle native già in uso sul resto del sito (wc_get_rating_html(), colorate in var(--gold) da qui) invece delle SVG statiche del mockup — stesso risultato visivo (stelle oro, media e conteggio), un solo componente stelle in tutto il tema invece di due. */ .cb-loop-rating { display: flex; align-items: center; gap: 8px; min-height: 21px; font-size: 13px; color: var(--blue); margin-top: 6px; } .cb-loop-rating .star-rating { margin: 0; float: none; font-size: 13px; color: var(--line); } .cb-loop-rating .star-rating span { color: var(--cb-star); } .cb-loop-rating__meta { color: var(--muted); } /* Disponibilità (cb_loop_availability()/wc_get_stock_html()): non prevista dal mockup nella scheda, resta discreta sotto il prezzo. */ .listing-info .stock { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .listing-info .stock.out-of-stock { color: #c62828; } /* Paginazione nativa (paginate_links()): pagina corrente è uno , non un — il mockup styla "a[aria-current]", qui in più ".current". */ #pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--blue); font-size: 14px; }@media(hover:hover){#pagination a.page-numbers:hover{ border-color: var(--blue); }} #pagination .page-numbers.current, #pagination .page-numbers.dots { border: 1px solid var(--line); } #pagination .page-numbers.current { background: var(--blue); color: white; border-color: var(--blue); } #pagination .page-numbers.dots { border-color: transparent; } #pagination .previous svg { transform: rotate(180deg); } /* Ordinamento senza "filter-chips" (Maschinen/Zubehör, il filtro Koffein non ha senso lì — vedi taxonomy-product_cat.php): .sort-control resta spinto a destra come nel mockup anche da solo. */ .catalog-toolbar-solo .sort-control { margin-left: auto; } /* Pulsante "In den Warenkorb" bianco a contorno (mockup), non blu pieno: .woocommerce a.add_to_cart_button{background:var(--cb-brand)...} di css/main.css è pensata per le pagine WooCommerce vere (negozio/categoria/ correlati hanno la classe body "woocommerce", la home no — per questo lì il pulsante di piu-venduti.php resta bianco senza bisogno di questa regola) — qui la scheda vuole il contorno come sulla home, quindi la scavalchiamo con la stessa specificità aumentata di un'altra classe. */ .woocommerce a.add_to_cart_button.listing-add { background: var(--white); color: var(--blue); border: 1px solid var(--blue); font-weight: 600; font-size: 15px; padding: 11px 16px; } /* * Stato "aggiunto al carrello": deve avere la STESSA specificita' della regola * WooCommerce qui sopra, altrimenti non si vede. * Trovato il 20.09.2026 proteggendo gli stati hover: il blu del pulsante dopo * l'aggiunta non veniva da ".added" (0,2,0), che perdeva contro * ".woocommerce a.add_to_cart_button." (0,3,1) — veniva dall'hover. * Su desktop spariva appena si spostava il mouse (misurato: sfondo bianco con * la classe "added" addosso); su telefono restava solo perche' iOS lascia * l'hover attaccato dopo il tocco. Cioe' la conferma visiva dell'aggiunta era * un effetto collaterale, non una regola. */ .woocommerce a.add_to_cart_button.listing-add.added { background: var(--blue); color: var(--white); } @media(hover:hover){.woocommerce a.add_to_cart_button.listing-add:hover{ background: var(--blue); color: var(--white); }} /* * Fedeltà 4 (§2.1 bottoni): la regola sopra fissava solo lo sfondo/colore * outline, non bastava a battere ".woocommerce a.button{border:2px;font- * weight:700}" (css/main.css) né la regola WooCommerce nativa * ".woocommerce:where(...) a.button{font-size:100%;padding:.618em 1em}" * (entrambe stessa specificità o più): bordo restava 2px, peso 700, font-size * 17px ereditato dal body, padding 10.506px 17px invece di 11px 16px del * prototipo. Aggiunti border/font-weight/font-size/padding qui, stessa * classe già usata per lo scavalco di colore. */ /* * Fedeltà 4 (§2.3 "immagine dentro il riquadro"): ".listing-photo img{width: * 100%;height:100%}" qui sopra perdeva la sola proprietà "height" contro * WooCommerce nativo (".woocommerce ul.products li.product a img{width:100%; * height:auto}", specificità 0,3,4 contro 0,1,1 di ".listing-photo img"): * l'immagine tornava alta quanto larga (proporzione nativa del file, non del * riquadro), il riquadro croppava (overflow:hidden) mostrando solo la fascia * centrale della capsula invece dell'intera foto centrata. Selettore * rinforzato per pareggiare la specificità nativa e lasciar vincere * l'ultimo dichiarato (questo file carica dopo il core WooCommerce). */ .woocommerce ul.products li.product a.listing-photo img { height: 100%; } /* * Fedeltà 4 (stesso bug di ".shop-breadcrumb a", css/shop.css): il link * "Startseite" della categoria prendeva il blu generale invece di ereditare * il grigio-caldo di ".category-breadcrumb". L'ultima briciola (pagina * corrente) resta blu per conto suo (".category-breadcrumb [aria-current]"). */ .category-breadcrumb a { color: inherit; } /* * Audit design 2026-09-19 (R09, negozio + categoria — "+" attaccato al * testo): ".woocommerce ul.products li.product .button{display:inline- * block;margin-top:1em}" nativo (woocommerce.css, specificità 0,4,2) batte * ".listing-add{display:flex;justify-content:space-between}" qui sopra * (0,1,0): il pulsante torna inline-block (il "+" segue il testo invece di * andare a destra) e guadagna un margine superiore mai previsto (14px sul * negozio, 15px in categoria — 1em del proprio font-size). Verificato sullo * staging reale su entrambe le pagine. Stesso selettore nativo, specificità * pareggiata — non un !important generico. */ .woocommerce ul.products li.product a.add_to_cart_button.listing-add { display: flex; margin-top: 0; } /* * Card categoria più compatte (estensione 20.09.2026 della rifinitura * 19.09.2026 di css/shop.css per negozio/ricerca, commit af0af02): stesso * problema segnalato da Stefan — card a 457px invece di ~406px a 390px — * ma il fix di af0af02 non arrivava qui perché css/shop.css non carica * affatto sulla pagina categoria. functions.php enqueue "cb-shop" solo per * is_shop() (e per is_search(), che riusa il layout negozio); per * is_product_taxonomy() carica solo "cb-listing" (verificato sullo * staging reale: assente sull'HTML della * categoria, presente sul negozio). Aggiungere qui, non in shop.css che * non verrebbe letto, ed è comunque il file giusto: è già il CSS * condiviso negozio/categoria (commento in testa al file). * * Selettori adattati alla struttura reale della categoria * (taxonomy-product_cat.php), diversa da quella di shop.php/search.php: * - Contenitore .catalog-section, non .shop-results (quella classe non * esiste in questo template). * - Riga compatibilità/gusto: .listing-flavor, non .product-system. * content-product.php stampa classi E dati diversi quando * is_product_taxonomy() è vero — qui l'attributo "geschmack" (gusto), * non "system" (compatibilità, già implicita nella categoria) — scelta * di contenuto preesistente e invariata, cambia solo lo spazio * riservato, stesso principio del fix R01 per .product-system. * - Titolo: h2, non h3 ($cb_heading = is_product_taxonomy() ? 'h2' : * 'h3', content-product.php) — .listing-info h3 (css/shop.css, riga 129 * di questo tema) non tocca mai la categoria. * * .listing-price resta a riga singola (display:flex, gap) su questa * pagina anche da desktop — diverso da .shop-results (display:block * fisso, scelta presa altrove in shop.css): differenza preesistente del * template categoria, non toccata qui (Fedeltà: non cambiare dimensioni/ * aspetto di titoli e prezzi). Lo spazio "prezzo -> prezzo unitario" del * prototipo si applica quindi solo nel fallback impilato sotto 600px, * dove il layout è davvero a due righe come nel negozio. */ .catalog-section .listing-info { padding-top: 16px; } .catalog-section .listing-info h2,.listing-info h3 { min-height: 0; overflow-wrap: break-word; } .catalog-section .listing-flavor { min-height: 0; margin-top: 6px; } .catalog-section .card-rating { min-height: 20px; margin-top: 8px; } .catalog-section .listing-price { margin: 12px 0; } .catalog-section .listing-price > strong { display: block; line-height: 1.2; } .catalog-section .listing-add { min-height: 48px; } /* * Layout a subgrid, stessa tecnica di css/shop.css (af0af02): ogni card * condivide due righe con la griglia (foto, .listing-info), così le card * della stessa riga visiva sono alte uguali. Dentro .listing-info il testo * scorre naturale e .card-rating spinge prezzo+pulsante in fondo: prezzi e * pulsanti restano allineati fra card vicine SENZA che un titolo corto * erediti il riquadro a due righe del titolo lungo accanto (20.09.2026: * con .listing-info a sua volta subgrid a sei righe, «Miscela Blu» accanto * a «ESE Pads Cremosa» mostrava 26px vuoti sotto il titolo e 19px sotto il * gusto — misurato a 402px, identico su iPhone). */ @supports (grid-template-rows: subgrid) { .catalog-section .listing-grid { row-gap: 0; } .catalog-section .listing-card:not([hidden]):not(.choice-card) { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; --cb-card-gap: 32px; margin-bottom: 32px; } /* * .choice-card ("Welche Mischung passt zu Ihnen?", solo in * taxonomy-product_cat.php) è un item di .listing-grid ma non ha la * struttura foto+info delle vere card prodotto: niente .listing-info/ * .listing-photo dentro, solo icona/eyebrow/h2/testo/link impilati * (vedi .choice-card più sopra in questo file). Farla diventare * subgrid sposterebbe quel contenuto nelle righe condivise (es. il * suo h2 nella riga "titolo" delle card vicine), facendole crescere * per un contenuto che non è un titolo di card — non testato da * af0af02 perché negozio/ricerca non hanno questa card. Riceve solo * lo stesso grid-row/margine delle altre per restare alta quanto la * riga (allineamento già garantito prima di questa modifica dallo * stretch di default della griglia, misurato uguale su staging); * l'allineamento interno resta il suo, invariato (flex, sopra in * questo file). */ .catalog-section .listing-card.choice-card { grid-row: span 2; margin-bottom: 32px; } .catalog-section .listing-info { display: flex; flex-direction: column; min-width: 0; } .catalog-section .card-rating { margin-bottom: auto; } /* * Stessi due :not() della regola base qui sopra: con la sola * ":not([hidden])" questa regola aveva specificità più bassa e non * vinceva nemmeno dentro il @media, lasciando 32px anche su telefono * (misurato a 390px: categoria 32px contro i 28px di negozio e ricerca). */ @media (max-width: 600px) { .catalog-section .listing-card:not([hidden]):not(.choice-card) { --cb-card-gap: 28px; margin-bottom: 28px; } .catalog-section .listing-card.choice-card { margin-bottom: 28px; } } } @media (max-width: 600px) { .catalog-section .listing-flavor { margin-top: 4px; } .catalog-section .listing-price { margin: 10px 0 12px; } .catalog-section .listing-price > span { margin-top: 3px; } } /* ---------- Stato "nessun risultato" (revisione Codex R08) ---------- */ /* * Le stesse regole stanno in css/shop.css, che però è caricato solo su * negozio e ricerca: sulle categorie il blocco sarebbe arrivato senza stile. * Qui vale per tutti e tre, perché css/listing.css è il foglio condiviso * (vedi cb_enqueue in functions.php). */ #empty-results { background: var(--cream); padding: 55px 25px; text-align: center; } #empty-results h3 { font: 34px/1.2 var(--display); color: var(--blue); letter-spacing: -.035em; } #empty-results p { margin: 20px 0 26px; color: var(--muted); font-size: 16px; } #empty-results .empty-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center; } #empty-results .button svg { width: 20px; height: 20px; } #empty-results .inline-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; } #empty-results .inline-link svg { width: 16px; height: 16px; } /* 20.09.2026 — ingrandimento della foto nelle card. Il riquadro della card e' piu largo che alto: l'immagine quadrata ci entra in altezza e questo scale la ingrandisce oltre la finestra visibile, che ha overflow:hidden. Col prodotto all'82% del file (normalizzazione delle foto, foto-prodotti/_report/normalizza.py) il prodotto risultava piu alto della finestra e veniva tagliato — si vedeva sulla Maxi-Tasse. Valore abbassato perche' il prodotto stia dentro con un margine: le foto NON sono state rimpicciolite, perche' sulla scheda prodotto la dimensione va bene (decisione di Stefan). */ /* 20.09.2026 — il fondo crema sta DIETRO la foto, non fuso con essa. Finche' molte foto prodotto avevano lo sfondo bianco cotto nel file, il "multiply" serviva a farlo sparire nel crema. Ora tutte le foto prodotto sono scontornate (WebP con trasparenza, foto-prodotti/04-consigliate) e quel trucco non serve piu': anzi moltiplicava anche i colori del prodotto, e i bianchi — tazze e confezioni — viravano al beige. Il crema resta dove stava, sul contenitore; l'immagine ci si appoggia sopra senza fusione. Restano in multiply solo le foto editoriali (chi siamo, aziende, 404, ricerca vuota), che non sono passate dallo scontorno. */ /* Chip del filtro caffeina senza risultati (collaudo C100): visibile, non cliccabile. */ .filter-chips .filter-chip-empty{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:3px;background:white;color:var(--muted);font-size:14px;padding:10px 16px;opacity:.45;cursor:default} /* Collaudo C102: griglia con la sola scheda «Rocco fragen» sotto lo stato vuoto. */ .listing-grid-leer{margin-top:28px} /* * Testi piu' leggibili su telefono: +2px su tutto quello che stava sotto i * 16px nelle pagine categoria, negozio e ricerca (decisione di Stefan del * 21.09.2026, dopo averle guardate da telefono). * * Misurati prima a 390px e riportati qui nel commento, cosi' si vede da dove * si parte senza doverli ricercare. I titoli grossi (H1 33px, titolo sezione * 27px) restano come sono: due pixel li' non si vedono, e allungherebbero * solo le righe. Sopra gli 850px non cambia nulla. */ @media (max-width: 850px) { .category-breadcrumb, .category-breadcrumb a { font-size: 13px; } /* era 11 */ .category-hero .eyebrow, .catalog-heading .eyebrow, .choice-card .eyebrow { font-size: 12px; } /* era 10 */ .category-description { font-size: 16px; } /* era 14 */ .system-note, .system-note > span, .system-note > span > span { font-size: 14px; } /* era 12 */ .system-navigation a { font-size: 14px; } /* era 12 */ .catalog-count { font-size: 14px; } /* era 12 */ .catalog-shipping { font-size: 14px; } /* era 12 */ .filter-chips a, .filter-chips .filter-chip-empty { font-size: 14px; } /* era 12 */ .filter-chips a > span, .filter-chips .filter-chip-empty > span { font-size: 12px; } /* era 10 */ .active-filter, .active-filter span, .active-filter a { font-size: 14px; } /* era 12 */ .sort-control, .sort-control label, .sort-control select { font-size: 16px; } /* era 12 / 14 */ /* «.listing-info .product-brand» vinceva sulla classe sola */ .listing-info .product-brand { font-size:12px; } /* era 9 */ .pack-tag { font-size: 12px; } /* era 10 */ .card-rating, .card-rating.no-rating { font-size: 12px; } /* era 10 */ .listing-flavor { font-size: 14px; } /* era 12 */ /* il prezzo al pezzo e' figlio diretto di «.listing-price», e «.listing-price>span» vinceva sulla classe sola */ .listing-price > .listing-unit-price, .listing-unit-price .woocommerce-Price-amount { font-size: 13px; } /* era 11 */ /* Il bottone «Aggiungi al carrello» resta a 15px, l'unico non toccato: e' gia' il testo piu' grande della scheda, e sia a 16 sia a 17px l'etichetta va a capo su due righe (misurato: bottone da 46px a 56px di altezza). Un bottone piu' alto e spezzato si legge peggio, non meglio. */ /* * Gerarchia degli spazi dentro la scheda (riferimento di Stefan del * 21.09.2026): i margini erano gia' piccoli (4-16px misurati), l'aria * veniva dalle INTERLINEE — un titolo a 23px con interlinea 1.17 e un * gusto a 14px con interlinea 1.5 lasciano piu' spazio di quanto dica il * margine. Qui si stringono le due cose insieme, e i blocchi ad altezza * fissa (min-height su titolo, gusto e stelle, nati per allineare i * bottoni fra due schede affiancate) lasciano il posto a un allineamento * vero: la scheda diventa una colonna flessibile e il bottone si incolla * in fondo. Cosi' i bottoni restano allineati QUALUNQUE sia la lunghezza * del nome, senza riservare spazio vuoto quando il nome e' corto. */ /* * Misurato elemento per elemento il 21.09.2026 (Stefan: «lo vedo come * prima»): il primo giro di queste regole aveva selettori troppo deboli, e * WooCommerce (".woocommerce ul.products li.product …", 0,3,2) vinceva su * gusto, stelle, prezzo e bottone — i margini erano rimasti quelli vecchi. * E il titolo porta in dote da WooCommerce "padding:.5em 0": 8,5px sopra e * 8,5px sotto di aria invisibile, la vera origine dello stacco fra marca, * titolo e gusto. Qui ogni selettore ripete il prefisso di WooCommerce, * cosi' vince davvero. * * Il ritmo segue il riferimento di Stefan: righe vicine dentro lo stesso * gruppo (marca-titolo-gusto, prezzo-prezzo al pezzo), uno stacco appena * piu' largo fra un gruppo e l'altro (stelle, prezzo, bottone). */ .woocommerce ul.products li.product.listing-card:not(.choice-card) { display: flex; flex-direction: column; } .woocommerce ul.products li.product.listing-card:not(.choice-card) .listing-info { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 10px; } .woocommerce ul.products li.product .listing-info .product-brand { margin: 0 0 1px; line-height: 1.3; } .woocommerce ul.products li.product .listing-info h2, .woocommerce ul.products li.product .listing-info h3 { padding: 0; margin: 0; min-height: 0; line-height: 1.15; } .woocommerce ul.products li.product .listing-flavor { min-height: 0; margin: 2px 0 0; line-height: 1.3; } .woocommerce ul.products li.product .card-rating { min-height: 0; margin: 5px 0 0; } .woocommerce ul.products li.product .listing-price { margin: 7px 0 0; line-height: 1.15; } .woocommerce ul.products li.product .listing-price > strong, .woocommerce ul.products li.product .listing-price .price { line-height: 1.15; } .woocommerce ul.products li.product .listing-price > .listing-unit-price { margin-top: 0; line-height: 1.3; } .woocommerce ul.products li.product a.add_to_cart_button.listing-add { margin-top: auto; } .woocommerce ul.products li.product .listing-info > .listing-price { margin-bottom: 11px; } .choice-card p:not(.eyebrow) { font-size: 15px; } /* era 13 */ .choice-card .text-link, .catalog-section .text-link { font-size: 15px; } /* era 13 */ }