/* * Shop-Archiv im Organic-Design (siehe wp/mockup und * wp/mockup/_ds/organic-.../readme.md). * * Diese Datei traegt das Seitenlayout und alles, was auf WooCommerce-Markup * zielt (Produktraster, Karten). Die Tokens stehen in * src/pages/design/design.css, das Aussehen der eigenen Bloecke bei den * Bloecken selbst in style-index.css. * * Zwei Umschaltpunkte, beide rein an der Fensterbreite und nicht an einer * Geraeteklasse: bei 960px wird die Sidebar zum Drawer, bei 600px geht das * Produktraster auf zwei feste Spalten. Die Toolbar-Bloecke nutzen dieselben * Werte. */ /* Am haengen die Klassen nur im Frontend; in der Leinwand des Site-Editors erkennt man die Vorlage stattdessen an der Layout-Klasse darin -- sonst staende das Design dort auf Weiss. */ body.woocommerce-shop, body.tax-product_cat, body.tax-product_brand, .editor-styles-wrapper:has(.c-shop-layout) { background : var(--color-bg); color : var(--color-text); font-family : var(--font-body); } .woocommerce-shop :focus-visible, .tax-product_cat :focus-visible, .tax-product_brand :focus-visible { outline : 2px solid var(--color-accent); outline-offset : 2px; } /* ── Seitenlayout ──────────────────────────────────────────────────────── Zwei Spalten wie im Mockup. Die Klassen kommen aus dem Template (archive-product), das dafuer reine Core-Group-Bloecke nutzt. */ .c-shop-layout { display : grid; grid-template-columns : 260px 1fr; gap : var(--space-6); align-items : start; max-width : var(--page-width); margin-inline : auto; padding : 0 var(--space-4) var(--space-6); } .c-shop-sidebar { display : flex; flex-direction: column; gap : var(--space-4); padding : var(--space-4); border-radius : calc(var(--radius-lg) * 1.15); background : var(--color-surface); box-shadow : var(--shadow-sm); position : sticky; /* Unter dem fixierten Seitenkopf parken. Wo der endet, misst main.ts -- das haengt an Fensterbreite und Admin-Bar. */ top : calc(var(--site-header-offset, 0px) + var(--space-4)); } /* Die Sidebar ist ein Core-Group-Block im Flow-Layout. WordPress gibt jedem Kind daraus `margin-block: 1.2rem 0` mit -- zusammen mit dem gap oben stuende zwischen den Filtergruppen der doppelte Abstand. Zwei Klassen, weil die Kernregel `:root :where(.is-layout-flow) > *` sonst gleich stark ist. */ .c-shop-sidebar > .c-product-filter { margin-block : 0; } /* Trennlinie zwischen den Filtergruppen, die .hr aus dem Mockup. Sie haengt an der zweiten Gruppe, damit der gap der Sidebar sie oben und das padding hier sie unten mit demselben Abstand einfasst. */ .c-shop-sidebar > .c-product-filter + .c-product-filter { padding-block-start : var(--space-4); border-block-start : 1px solid var(--color-divider); } /* min-width:0 verhindert, dass das Raster die Spalte aufzieht. */ .c-shop-main { min-width : 0; } /* Die Ueberschrift der Suchergebnisse ("Suchergebnisse fuer: ..."). Sie steht nur in der Vorlage product-search-results; im Raster selbst gibt es keinen Titel. Groesse und Schrift wie die Seitentitel des Mockups. */ .c-shop-main > .wp-block-query-title { margin : 0 0 var(--space-4); font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 32px; line-height : 1.15; color : var(--color-text); } /* ── Produktraster ───────────────────────────────────────────────────── */ /* 200px statt der 220px aus dem Mockup: dort steht das Raster in einem 1280px-Container, hier sind es die 1200px von Spectra -- so bleiben es auf dem Desktop vier Spalten. */ ul.wc-block-product-template.wc-block-product-template__responsive { grid-template-columns : repeat(auto-fill, minmax(200px, 1fr)); gap : var(--space-4); margin : 0; padding : 0; } /* ── Produktkarte ──────────────────────────────────────────────────────── Das DOM liefert Bild, Titel, Kategorie, Marke, Preis. Das Mockup will die beiden Tags nebeneinander ueber dem Titel -- deshalb umsortiertes Flex statt der Quellreihenfolge. Flex und nicht Grid, weil lange Begriffe wie "Nesspresso Kapseln" sonst die Spalte aufziehen und die Karte sprengen; so brechen die beiden Tags einfach um. */ .wc-block-product-template > li.wc-block-product { display : flex; flex-wrap : wrap; align-content : flex-start; gap : var(--space-2); margin : 0; padding : var(--space-3); /* Nicht der .card-Default des Design-Systems: das Mockup dreht die Karten im Produktraster auf --radius-md herunter. */ border-radius : var(--radius-md); background : var(--color-surface); box-shadow : var(--shadow-sm); transition : box-shadow 0.2s ease, transform 0.2s ease; } /* Muss direkt neben der display-Regel stehen: das display:flex oben schlaegt sonst das display:none, das der Browser [hidden] von Haus aus gibt -- die ausgefilterten Produkte blieben dann sichtbar und nur die Treffer wanderten nach oben. */ .wc-block-product-template > li.wc-block-product[hidden] { display : none; } .wc-block-product-template > li.wc-block-product:hover { box-shadow : var(--shadow-md); transform : translateY(-2px); } .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image { order : 1; width : 100%; margin : 0; aspect-ratio : 1; overflow : hidden; border-radius : var(--radius-sm); background : var(--color-neutral-200); } .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image a, .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image img { display : block; width : 100%; height : 100%; } /* .washed aus dem Design-System: Fotos sollen in die warme Flaeche zurueckfallen. */ .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-image img { object-fit : cover; filter : saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); } /* Der Produktname traegt seit dem neuen Mockup die Titel-Schrift. */ .wc-block-product-template > li.wc-block-product .wp-block-post-title { order : 4; width : 100%; margin : 0; font-family : var(--font-title); font-weight : var(--font-title-weight); font-size : 17px; line-height : 1.2; } .wc-block-product-template > li.wc-block-product .wp-block-post-title a { color : var(--color-text); text-decoration : none; } .wc-block-product-template > li.wc-block-product .wp-block-post-title a:hover { color : var(--color-accent-700); } /* Die beiden Taxonomien werden zu Tags -- Kategorie terracotta, Marke salbei. */ .wc-block-product-template > li.wc-block-product .wp-block-post-terms { width : fit-content; margin : 0; padding : 3px 10px; border-radius : 999px; font-size : 11px; letter-spacing: 0.02em; line-height : 1.5; } .wc-block-product-template > li.wc-block-product .wp-block-post-terms a { text-decoration : none; color : inherit; } .wc-block-product-template > li.wc-block-product .taxonomy-product_cat { order : 2; background : var(--color-accent-100); color : var(--color-accent-800); } .wc-block-product-template > li.wc-block-product .taxonomy-product_brand { order : 3; background : var(--color-accent-2-100); color : var(--color-accent-2-800); } /* margin-top schiebt den Preis nach unten, damit er in einer Reihe unterschiedlich hoher Karten trotzdem auf einer Linie sitzt. */ .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-price { order : 5; width : 100%; margin : auto 0 0; font-weight : 600; color : var(--color-accent-700); } /* Der Preis je Stueck unter dem Preis (src/functions/pieces.php). Er tritt bewusst zurueck -- kleiner, leichter und in einem gedeckten Braun --, damit der Packungspreis darueber der Betrag bleibt, den das Auge zuerst findet. */ .wc-block-product-template > li.wc-block-product .c-unit-price { margin : 2px 0 0; font-size : 12px; font-weight : 400; line-height : 1.3; color : var(--color-neutral-600); } /* ── Mobil: aus der Sidebar wird ein Drawer ────────────────────────────── Erst wenn main.ts den Drawer-Rahmen wirklich gebaut und .c-drawer-ready gesetzt hat -- sonst waeren die Filter unerreichbar, weil der Oeffnen-Knopf ebenfalls vom Skript kommt. */ /* Der Umschaltpunkt liegt bei 960px, nicht bei einer Geraeteklasse: neben der 260px-Sidebar bleiben darunter nur noch zwei Produktspalten uebrig. Als Drawer gibt die Sidebar dem Raster die volle Breite zurueck. Derselbe Wert steht in product-toolbar/style-index.css. */ @media (max-width: 959px) { .c-shop-layout { grid-template-columns : 1fr; gap : var(--space-4); padding : 0 var(--space-3) var(--space-4); } .c-drawer-ready .c-shop-sidebar { position : fixed; z-index : 1000; inset : auto 0 0 0; height : var(--drawer-height); transform : translateY(100%); transition : transform 0.3s ease; border-radius : var(--radius-lg) var(--radius-lg) 0 0; box-shadow : var(--shadow-lg); overflow-y : auto; /* pan-y laesst die Liste scrollen und haelt gleichzeitig die horizontale Zurueck-Geste des Browsers vom Panel fern; contain verhindert, dass am oberen Anschlag die Seite dahinter mitzieht (Pull-to-Refresh). */ touch-action : pan-y; overscroll-behavior: contain; } .c-drawer-ready.c-filter-open .c-shop-sidebar { transform : translateY(0); } /* Waehrend gewischt wird, setzt main.ts das transform Bild fuer Bild -- die Transition wuerde dem Finger sichtbar hinterherlaufen. */ .c-drawer-ready .c-shop-sidebar.is-dragging { transition : none; } /* Sperrt das Scrollen der Seite hinter dem offenen Drawer. */ .c-drawer-ready.c-filter-open { overflow : hidden; } } /* Telefonbreite: zwei feste Spalten und kompaktere Karten. Dazwischen (600 bis 959px) fuellt das auto-fill-Raster von oben die volle Breite -- dort sind je nach Fenster drei oder vier Spalten sinnvoll. */ @media (max-width: 600px) { ul.wc-block-product-template.wc-block-product-template__responsive { grid-template-columns : 1fr 1fr; gap : var(--space-3); } .wc-block-product-template > li.wc-block-product { padding : var(--space-2); gap : var(--space-1); } .wc-block-product-template > li.wc-block-product .wp-block-post-title { font-size : 14px; } } @media (prefers-reduced-motion: reduce) { .wp-block-uagb-container:has(> .wp-block-group > .c-product-filter), .wc-block-product-template > li.wc-block-product { transition : none; } }