/* Audit design 2026-09-19, followup (R02 — tessere Maschinen/Bohnen tagliate): sotto, ".shop-system[data-category]" puntava agli slug del prototipo ("machines"/"beans"), mai uguali agli slug WooCommerce reali ("maschinen"/"bohnen-gemahlen") — nessuna eccezione scattava mai, tutte le immagini restavano a scale(1.38) di ".system-art img" dentro overflow:hidden. Corretti sugli slug reali (verificati: shop-css-experiment.json), scale invariate (1.08/1.1 come nel prototipo). */ .shop-breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);padding-block:15px}.shop-breadcrumb a{min-height:28px;display:flex;align-items:center}.shop-breadcrumb a:hover{text-decoration:underline}.shop-intro{background:var(--cream);border-block:1px solid var(--line)}.shop-intro-inner{display:flex;align-items:center;justify-content:space-between;gap:50px;padding-block:36px}.shop-intro .eyebrow{font-size:11px;margin-bottom:12px}.shop-intro h1{font-size:clamp(38px,4vw,58px);line-height:1.08;margin:0 0 18px;letter-spacing:-.045em}.shop-intro-inner>div>p:last-child{font-size:17px;color:var(--muted);line-height:1.6}.intro-note{position:relative;padding:16px 0 16px 38px;border-left:1px solid var(--line);width:260px;flex-shrink:0}.intro-mark{display:block;font:italic 72px/1 var(--display);color:var(--blue);margin-bottom:14px}.intro-note p{font:20px/1.35 var(--display);color:var(--blue);letter-spacing:-.02em}.intro-note a{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--blue);min-height:44px;margin-top:7px;font-weight:600}.intro-note svg{width:18px}.system-section{padding-block:27px 30px;border-bottom:1px solid var(--line)}.systems-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}.systems-heading h2{font-size:25px;letter-spacing:-.03em}.systems-heading>span{font-size:13px;color:var(--muted)}.shop-systems{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.shop-system{position:relative;border:1px solid var(--line);border-radius:3px;padding:8px 12px 14px;min-width:0;transition:border-color .18s,background .18s}.shop-system[aria-current]{border-color:var(--blue);background:var(--cream)}@media(hover:hover){.shop-system:hover{border-color:var(--blue);background:var(--cream)}}.system-art{height:78px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}.system-art img{object-fit:contain;max-width:130px;width:100%;height:100%;mix-blend-mode: normal;transform:scale(1.38)}.shop-system[data-category="maschinen"] img{transform:scale(1.08)}.shop-system[data-category="bohnen-gemahlen"] img{transform:scale(1.1)}.system-title{display:block;font-size:15px;font-weight:600;color:var(--blue);line-height:1.2}.system-caption{display:block;font-size:11px;color:var(--muted);margin-top:5px;padding-right:13px}.shop-system>svg{position:absolute;right:10px;bottom:14px;width:14px;height:14px;color:var(--blue)}.shop-catalog{padding-block:38px 52px;scroll-margin-top:24px}.shop-catalog-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.shop-catalog-heading .eyebrow{font-size:10px;margin-bottom:9px}.shop-catalog-heading h2{font-size:39px}.shop-catalog-heading .catalog-count{font-size:14px;max-width:none}.shop-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px}.filter-sidebar{padding-right:25px;border-right:1px solid var(--line)}.filter-sidebar-title{font-size:16px;font-weight:600;color:var(--blue);padding:12px 0 20px}[id^="filters-form"] fieldset{padding:0 0 20px;margin:0 0 22px;border:0;border-bottom:1px solid var(--line);min-width:0}[id^="filters-form"] legend{font-weight:600;font-size:14px;color:var(--blue);margin-bottom:10px;padding:0}.filter-radio,.filter-checkbox{display:flex;align-items:center;gap:9px;min-height:42px;font-size:14px;color:var(--muted);cursor:pointer}.filter-radio input,.filter-checkbox input{accent-color:var(--blue);width:15px;height:15px;margin:0;flex-shrink:0}.filter-radio small{font-size:11px;margin-left:auto}.filter-radio:has(input:checked){color:var(--blue);font-weight:600}.filter-hint{font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}[id^="filters-form"] select{font:15px var(--font);width:100%;height:46px;padding:0 9px;border:1px solid var(--line);border-radius:3px;color:var(--blue);background:white}.reset-filters{border:0;background:none;padding:0;min-height:44px;color:var(--blue);font-size:13px;text-decoration:underline;text-underline-offset:4px}.filter-help{padding:24px 17px;margin-top:32px;background:var(--cream)}.filter-help>svg{color:var(--blue);width:24px;height:24px;margin-bottom:12px}.filter-help h3{font:25px var(--display);color:var(--blue);letter-spacing:-.035em}.filter-help p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:12px}.filter-help a{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--blue);font-size:12px;font-weight:600;margin-top:13px}.filter-help a svg{width:17px}.shop-results{min-width:0}.shop-toolbar{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-bottom:22px}#catalog-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:3px;max-width:380px;flex:1}#catalog-query{width:100%;min-width:0;border:0;background:none;padding:12px 13px;font:15px var(--font);color:var(--ink);height:48px}#catalog-query::placeholder{color:var(--muted)}.sort-control{gap:9px}.sort-control select{font-size:14px;max-width:180px;min-height:49px}.sort-control label{font-size:12px}.mobile-filter-button{display:none}#active-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}#active-filters button{display:inline-flex;align-items:center;gap:9px;min-height:40px;background:var(--cream);color:var(--blue);border:1px solid var(--line);padding:8px 11px;font:13px var(--font);border-radius:3px;max-width:100%;overflow-wrap:anywhere}#active-filters button svg{width:14px;height:14px;flex-shrink:0}#active-filters .clear-all{background:none;border:0;text-decoration:underline;text-underline-offset:4px}#compatibility-note{padding:12px 15px;background:var(--cream);border-left:2px solid var(--blue);font-size:13px;color:var(--blue);margin-bottom:22px}.shop-results .listing-grid{gap:32px 24px}.shop-results .listing-photo{height:235px}.shop-results .listing-photo img{transform:scale(1.07)}@media(hover:hover){.shop-results .listing-photo:hover img{transform:scale(1.11)}}.listing-card[data-id="334"] img,.listing-card[data-id="326"] img{transform:scale(.94)!important}.listing-card[data-id="319"] img,.listing-card[data-id="320"] img,.listing-card[data-id="321"] img{transform:scale(1.07)!important}.listing-info h3{font:500 27px/1.16 var(--display);letter-spacing:-.035em;color:var(--blue);min-height:63px}.listing-info h3 a:hover{text-decoration:underline;text-underline-offset:4px}.product-system{font-size:13px;color:var(--muted);min-height:21px;margin-top:7px}.listing-info .product-brand{font-size:10px}.shop-results .listing-price{display:block;margin:10px 0 14px}.shop-results .listing-price>strong{font-size:25px}.shop-results .listing-price>span{display:block;font-size:12px;min-height:18px;margin-top:1px}.shop-results .listing-add{font-size:14px;padding:11px 13px}.shop-results .pack-tag{font-size:11px;left:13px;top:12px}.catalog-bottom{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:30px 0 20px;margin-top:28px;border-top:1px solid var(--line)}#range-label{color:var(--muted);font-size:13px}#pagination{display:flex;gap:7px}#pagination a{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}#pagination a[aria-current]{background:var(--blue);color:white;border-color:var(--blue)}@media(hover:hover){#pagination a:hover{border-color:var(--blue)}}#pagination svg{width:18px;height:18px}#pagination .previous svg{transform:rotate(180deg)}.catalog-shipping{margin-top:9px;font-size:12px}#empty-results{background:var(--cream);padding:55px 25px;text-align:center}#empty-results>div{color:var(--blue);margin-bottom:15px}#empty-results svg{width:30px;height:30px}#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 .button svg{width:20px;height:20px}.shop-help{background:var(--cream);border-block:1px solid var(--line)}.shop-help-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:110px;align-items:center;padding-block:48px}.shop-help .eyebrow{font-size:11px}.shop-help h2{font-size:40px}.shop-help p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65;max-width:435px;margin-bottom:22px}.shop-help .button{font-size:15px}#filter-dialog{width:min(440px,100%);height:100dvh;max-height:100dvh;max-width:100%;margin:0 0 0 auto;padding:0;border:0;border-left:1px solid var(--line);border-radius:0;overflow:hidden}#filter-dialog[open]{display:flex;flex-direction:column}#filter-dialog .dialog-header{padding:23px 24px;border-bottom:1px solid var(--line);margin:0;gap:10px}#filter-dialog h2{font-size:27px}#mobile-filter-slot{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:24px}.filter-dialog-footer{padding:16px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:white}.filter-dialog-footer .button{width:100%;font-size:15px}.filter-dialog-footer svg{width:19px}body:has(#filter-dialog[open]){overflow:hidden} @media(max-width:1200px){.shop-layout{grid-template-columns:180px minmax(0,1fr);gap:25px}.filter-sidebar{padding-right:18px}.shop-systems{gap:8px}.shop-system{padding-inline:9px}.system-title{font-size:13px}.system-caption{font-size:10px}.shop-results .listing-grid{gap:30px 18px}.shop-results .listing-photo{height:200px}.listing-info h3{font-size:24px;min-height:56px}.shop-results .listing-add{font-size:12px;padding-inline:10px}.shop-toolbar{gap:12px}.sort-control label{display:none}.shop-results .pack-tag{font-size:10px}.product-system{font-size:12px;min-height:36px}.shop-catalog-heading h2{font-size:35px}.intro-note{width:215px}.shop-help-inner{gap:60px}} @media(max-width:950px){.shop-layout{grid-template-columns:170px minmax(0,1fr);gap:22px}.shop-results .listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-systems{display:flex;overflow-x:auto;gap:10px;padding:2px 2px 10px;scrollbar-width:thin}.shop-system{flex:0 0 137px}.system-title{font-size:14px}.system-caption{font-size:11px}.systems-heading>span{display:none}.shop-intro h1{font-size:43px}.shop-intro-inner{gap:28px}.intro-note{width:180px;padding-left:25px}.intro-note p{font-size:18px}.intro-note a{font-size:12px}.shop-toolbar{flex-wrap:wrap}.sort-control{flex-direction:row;align-items:center;margin:0}.shop-toolbar #catalog-search{max-width:none;flex-basis:100%}.sort-control label{display:block}.shop-results .listing-photo{height:225px}.product-system{min-height:21px}.shop-results .listing-add{font-size:14px}.shop-help h2{font-size:34px}} @media(max-width:800px){.shop-layout{display:block}.filter-sidebar{display:none}.shop-intro-inner{padding-block:28px}.shop-intro h1{font-size:41px}.shop-intro-inner>div>p:last-child{font-size:16px}.intro-mark{font-size:59px}.system-section{padding-block:24px 20px}.shop-catalog{padding-top:28px}.shop-catalog-heading{margin-bottom:23px}.shop-catalog-heading h2{font-size:33px}.shop-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.shop-toolbar #catalog-search{grid-column:1/-1;width:100%;max-width:none}#catalog-query{font-size:16px}.mobile-filter-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--blue);border-radius:3px;min-height:46px;background:white;color:var(--blue);font:600 15px var(--font)}.mobile-filter-button svg{width:18px;height:18px}.mobile-filter-button>span{background:var(--blue);color:white;border-radius:50%;font-size:11px;min-width:18px;height:18px;line-height:18px}.sort-control{margin:0;display:block}.sort-control label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sort-control select{width:100%;max-width:none;min-width:0;min-height:46px;font-size:14px}.shop-results .listing-photo{height:260px}.listing-info h3{font-size:28px;min-height:65px}.shop-results .listing-add{font-size:15px}.filter-radio,.filter-checkbox{min-height:46px;font-size:16px}.filter-radio input,.filter-checkbox input{width:18px;height:18px}[id^="filters-form"] select{font-size:16px}[id^="filters-form"] legend{font-size:16px}.reset-filters{font-size:14px}.shop-results .pack-tag{font-size:12px}.shop-help-inner{gap:38px}} @media(max-width:600px){.shop-breadcrumb{padding-block:7px;font-size:11px}.shop-intro-inner{display:block;padding-block:23px}.shop-intro .eyebrow{font-size:10px;margin-bottom:11px}.shop-intro h1{font-size:37px;margin-bottom:14px;line-height:1.09}.shop-intro-inner>div>p:last-child{font-size:14px;line-height:1.55}.shop-intro br{display:none}.shop-intro h1 br{display:block}.intro-note{display:none}.system-section{padding-block:21px 16px}.systems-heading{margin-bottom:15px}.systems-heading h2{font-size:23px}.shop-systems{gap:9px;padding-bottom:7px}.shop-system{flex-basis:116px;padding:7px 9px 12px}.system-art{height:61px;margin-bottom:7px}.system-title{font-size:13px}.system-caption{font-size:10px;min-height:30px;line-height:1.5}.shop-system>svg{bottom:12px;right:8px;width:12px;height:12px}.shop-catalog{padding-block:24px 32px}.shop-catalog-heading{align-items:center;gap:12px;margin-bottom:20px}.shop-catalog-heading .eyebrow{display:none}.shop-catalog-heading h2{font-size:28px;max-width:230px}.shop-catalog-heading .catalog-count{font-size:12px;max-width:65px;white-space:normal;text-align:right}.shop-toolbar{gap:10px}.shop-results .listing-grid{gap:28px 14px}.shop-results .listing-photo{height:207px;display:flex;flex-direction:column;padding-top:7px}.shop-results .pack-tag{position:static;margin:0 9px 3px;font-size:10px;line-height:1.4;max-width:none;flex-shrink:0}.listing-info h3{font-size:23px;min-height:54px}.listing-info .product-brand{font-size:9px}.product-system{font-size:12px;min-height:36px;margin-top:6px}.shop-results .listing-price>strong{font-size:23px}.shop-results .listing-price>span{font-size:11px;min-height:32px;max-width:145px}.shop-results .listing-price{margin:9px 0 9px}.shop-results .listing-add{font-size:12px;gap:5px;padding:9px}.shop-results .listing-add svg{width:15px;height:15px}.catalog-bottom{flex-direction:column;gap:17px;margin-top:26px;padding-top:24px}#pagination{justify-content:center}#range-label{font-size:12px}.catalog-shipping{font-size:12px;margin-top:15px}#active-filters{gap:7px}#active-filters button{font-size:12px;min-height:44px;padding:8px 10px}#compatibility-note{font-size:12px}.shop-help-inner{display:block;padding-block:32px}.shop-help h2{font-size:35px;margin-bottom:22px}.shop-help .eyebrow{font-size:10px}.shop-help p:not(.eyebrow){font-size:15px;margin-bottom:20px}.shop-help .button{font-size:14px}#empty-results{padding:38px 20px}#empty-results h3{font-size:29px}#empty-results p{font-size:14px}#empty-results .button{font-size:14px;padding-inline:16px}.added-bar{padding-bottom:max(14px,env(safe-area-inset-bottom))}} @media(max-width:370px){.shop-intro h1{font-size:33px}.systems-heading h2{font-size:21px}.shop-catalog-heading h2{font-size:26px}.shop-results .listing-photo{height:191px}.listing-info h3{font-size:22px;min-height:51px}.shop-results .listing-add{font-size:11px;padding-inline:8px}.shop-results .listing-price>strong{font-size:22px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}} /* Keep browsing close to the opening, especially on phones. */ .shop-intro-inner{padding-block:25px}.shop-intro h1 br{display:none}.shop-intro h1{font-size:55px;margin-bottom:14px}.intro-note{padding-block:0}.intro-mark{font-size:49px;margin-bottom:6px}.intro-note p{font-size:18px}.intro-note a{min-height:36px;margin-top:5px}.system-section{padding-block:23px}.system-art{height:65px}.systems-heading{margin-bottom:15px}.shop-catalog{padding-top:28px}.shop-catalog-heading{margin-bottom:22px}.shop-catalog-heading h2{font-size:36px} @media(max-width:950px){.shop-intro h1{font-size:44px}.shop-intro h1 br{display:block}.intro-note{width:160px}.system-art{height:63px}} @media(max-width:600px){.shop-intro-inner{padding-block:21px}.shop-intro h1{font-size:36px;margin-bottom:12px}.shop-intro h1 br{display:block}.system-section{padding-block:18px 13px}.systems-heading{margin-bottom:12px}.systems-heading h2{font-size:21px}.shop-system{flex-basis:116px;padding-bottom:10px}.system-art{height:48px;margin-bottom:5px}.system-caption{min-height:15px;padding-right:0;font-size:9px}.shop-system>svg{display:none}.shop-catalog{padding-top:23px}.shop-catalog-heading{margin-bottom:17px}.shop-catalog-heading h2{font-size:29px;max-width:none}} @media(max-width:370px){.shop-intro h1{font-size:34px}.systems-heading h2{font-size:20px}.shop-catalog-heading h2{font-size:27px}} /* * Sopra: copia invariata di "DESIGN BY CODEX/shop/v1/shop.css" (solo negozio). * Sotto: innesto in WooCommerce (Task 3), non nel prototipo. */ /* Pulsanti del form filtri (inc/shop-filters-form.php): il mockup li invia solo via JavaScript al cambio di un campo (qui riprodotto in js/shop.js, piccola estensione non invasiva) — "Filter anwenden" resta comunque visibile per chi non ha JavaScript. Non c'era nel disegno desktop. */ .filters-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; } .filters-form-actions .button { min-height: 44px; padding: 10px 18px; font-size: 14px; } /* Dentro il mobile lo stesso form non ha il pannello fisso in fondo ("N Produkte anzeigen") del mockup: qui il pulsante "Filter anwenden" resta dentro l'area che scorre, più semplice da un solo form condiviso fra le due copie (sidebar/dialogo) invece di spostarne una via JavaScript. */ #filter-dialog .filters-form-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } #filter-dialog .filters-form-actions .button { width: 100%; } /* * Fedeltà 4 (§2.1 bottoni, §3.2 shop): stessa causa di * css/listing.css (".woocommerce a.add_to_cart_button.listing-add") — qui la * variante più stretta dello shop (14px/11px 13px, non 15px/11px 16px della * categoria) perdeva contro ".woocommerce:where(...) a.button{font-size: * 100%;padding:.618em 1em}" nativo di WooCommerce, stessa specificità di * ".shop-results .listing-add" (0,2,0 contro 0,2,1): bordo/padding/font-size * restavano quelli generici. Selettore rinforzato per pareggiare. * * Audit design 2026-09-19, followup (R06 — interlinea 14px invece di 21px): * stesso selettore, manca "line-height" — resta l'1 nativo WooCommerce * (".woocommerce a.button{line-height:1}", main.css/woocommerce.css), * misurato 14px invece dei 21px del prototipo (line-height:1.5 sul * font-size:14px qui sopra). */ .woocommerce .shop-results a.add_to_cart_button.listing-add { font-size: 14px; padding: 11px 13px; line-height: 1.5; } /* * Fedeltà 4 (§2.1 bottoni, §3.2 "Rocco kontaktieren"): in * .shop-help (woocommerce/archive-product.php) prende ".woocommerce a.button" * di css/main.css (bianco/contorno, pensato per i bottoni secondari nativi di * WooCommerce) invece di "body a.button" (blu pieno, Fedeltà 2): stessa * specificità (0,2,1) ma ".woocommerce a.button" è dentro un file caricato * dopo. Nel prototipo questo bottone è la CTA piena della sezione di aiuto, * come su Über uns/Für Unternehmen/Kontakt. Selettore rinforzato con * ".shop-help" per riportarlo pieno e alle misure del prototipo (15px/600, * padding 15px 23px, 1px di bordo). * * Audit design 2026-09-19, followup (R06 — pulsante "Rocco kontaktieren" * disallineato): la regola sopra non toccava "display"/"line-height", quindi * ".woocommerce a.button{display:inline-block;line-height:1}" nativo restava * — un inline-block non usa gap/align-items del design (".button" di * base.css), icona e testo appiccicati, riga bassa (misurato 197.12×57px, * line-height 15px invece di 222.12×54.5px/22.5px del prototipo). Provato * in browser: "inline-flex"+"line-height:1.5" riportano le misure esatte. */ .woocommerce .shop-help a.button { display: inline-flex; line-height: 1.5; background: var(--blue); color: #fff; border: 1px solid var(--blue); font-weight: 600; font-size: 15px; padding: 15px 23px; }@media(hover:hover){.woocommerce .shop-help a.button:hover{ background: var(--blue-dark); }} /* * Fedeltà 4 (§3.2 "colore link breadcrumb Startseite"): "a{color:var(--cb- * brand)}" di main.css (Fedeltà 1, generale a tutto il sito) vince * sull'eredità del grigio-caldo di ".shop-breadcrumb{color:var(--muted)}" * (qualunque regola esplicita sull'elemento batte l'eredità, a prescindere * dalla specificità) — stesso motivo già corretto per ".footer-bottom a" * in main.css. */ .shop-breadcrumb a { color: inherit; } /* * Audit design 2026-09-19 (R08, negozio — nomi prodotto troppo piccoli): * ".woocommerce ul.products li.product h3{padding:.5em 0;margin:0; * font-size:1em}" nativo (woocommerce.css, specificità 0,3,3) batteva sia * il "font-size" del nostro ".listing-info h3{font:500 27px/1.16 var( * --display)}" qui sopra (0,1,1 — la sola proprietà font-size perde, le * altre del rullo "font" restano nostre) sia il "padding": titolo a 17px * (1em del corpo) con 8,5px di padding verticale mai dichiarato qui. * Verificato sullo staging reale (computed style, non solo il file CSS). * Stesso schema già in uso sopra per foto/bottoni della card: selettore * rinforzato allo stesso pattern nativo, non un !important generico. */ .woocommerce ul.products li.product .listing-info h3 { font-size: 27px; padding: 0; margin: 0; } @media (max-width: 1200px) { .woocommerce ul.products li.product .listing-info h3 { font-size: 24px; } } @media (max-width: 800px) { .woocommerce ul.products li.product .listing-info h3 { font-size: 28px; } } @media (max-width: 600px) { .woocommerce ul.products li.product .listing-info h3 { font-size: 23px; } } @media (max-width: 370px) { .woocommerce ul.products li.product .listing-info h3 { font-size: 22px; } } /* * Card più compatte (rifinitura 19.09.2026, richiesta dopo gli screenshot * delle 19:17): le altezze minime sopra riservavano due righe a titolo/ * compatibilità/recensioni/prezzo unitario anche quando bastava una riga, * separando troppo informazioni dello stesso blocco. Riferimento: * DESIGN BY CODEX/shop/v1/CARD-SPAZI-PER-CLAUDE.md + assets/catalog-card- * spacing.css — stessa idea, selettori adattati al tema reale (h3 non h2, * .product-system non .listing-flavor, nessun markup toccato: content- * product.php stampa già sempre compatibilità/recensioni/prezzo unitario * anche senza dato, R01 sopra, e sul catalogo reale (35 prodotti) la marca * è sempre presente — nessuno slot manca mai su shop/ricerca). * * Layout a subgrid: ogni card condivide due righe con la griglia (foto, * .listing-info), così le card della stessa riga visiva sono alte uguali — * l'altezza resta quella del contenuto più alto SOLO fra le card della * stessa riga, non una riserva fissa uguale per tutte. Dentro .listing-info * il testo scorre naturale e .card-rating spinge prezzo+pulsante in fondo, * che restano allineati fra card vicine. Vedi la nota in css/listing.css * (20.09.2026) sul perché non è più un subgrid annidato a sei righe. */ .shop-results .listing-info { padding-top: 16px; } .shop-results .listing-info h3 { min-height: 0; overflow-wrap: break-word; } .shop-results .product-system { min-height: 0; margin-top: 6px; } .shop-results .card-rating { min-height: 20px; margin-top: 8px; } .shop-results .listing-price { margin: 12px 0; } .shop-results .listing-price > strong { display: block; line-height: 1.2; } .shop-results .listing-price > span { min-height: 0; max-width: none; margin-top: 4px; } .shop-results .listing-add { min-height: 48px; } @supports (grid-template-rows: subgrid) { .shop-results .listing-grid { row-gap: 0; } .shop-results .listing-card:not([hidden]) { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; --cb-card-gap: 32px; margin-bottom: 32px; } .shop-results .listing-info { display: flex; flex-direction: column; min-width: 0; } .shop-results .card-rating { margin-bottom: auto; } .shop-results .catalog-bottom { margin-top: 0; } /* * Il margine sotto la card sostituisce il row-gap (azzerato sopra) solo * quando il subgrid è attivo: fuori da @supports il row-gap di * .listing-grid (28px/14px qui sotto, invariato) resta l'unica fonte di * spaziatura verticale nel fallback a flusso normale — annidato qui * invece che nel @media isolato del prototipo per non sommare le due * spaziature nei browser senza subgrid. */ @media (max-width: 600px) { .shop-results .listing-card:not([hidden]) { --cb-card-gap: 28px; margin-bottom: 28px; } } } @media (max-width: 600px) { .shop-results .listing-info { padding-top: 12px; } .shop-results .product-system { margin-top: 4px; } .shop-results .listing-price { margin: 10px 0 12px; } .shop-results .listing-price > span { margin-top: 3px; } } /* 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. */