/*
 * WooCommerce-Styling für das Zweisam-Theme (PDP, Archiv, Warenkorb-Basis).
 * Nutzt die Design-Tokens aus style.css; ruhige, wertige Optik gemäß
 * UI/UX-Grundsätzen; Layout laut pdp_blueprint_2026-07-08.md.
 * Nur geladen, wenn WooCommerce-Kontext (siehe functions.php).
 */

/* =========================================================================
   Produktdetailseite: Grid — mobil gestapelt, ab 900px zweispaltig
   (Galerie links, Kaufbox rechts; alles Weitere volle Breite darunter)
   ========================================================================= */
.woocommerce div.product{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	gap:var(--gap);
	position:relative;
}
@media (min-width:900px){
	.woocommerce div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-auto-rows:min-content}
	.woocommerce div.product .woocommerce-product-gallery{grid-column:1;grid-row:1}
	/* Kaufbox darf über zwei Zeilen laufen — die Tabs rücken unter die Galerie
	   und füllen den vorher leeren Raum (Nutzerfeedback 2026-07-08). */
	.woocommerce div.product .summary{grid-column:2;grid-row:1 / span 2}
	.woocommerce div.product .woocommerce-tabs{grid-column:1;grid-row:2;margin:0}
	.woocommerce div.product .zwcl-partner-look{grid-row:3}
	.woocommerce div.product .zwcl-pdp-sections{grid-row:4}
	.woocommerce div.product .up-sells{grid-row:5}
	.woocommerce div.product .related{grid-row:6}
}
.woocommerce div.product .zwcl-partner-look,
.woocommerce div.product .zwcl-pdp-sections,
.woocommerce div.product .up-sells,
.woocommerce div.product .related{grid-column:1/-1}
@media (max-width:899.98px){
	.woocommerce div.product .woocommerce-tabs{grid-column:1/-1}
}

/* Breadcrumb: kleiner + fett (Nutzerwunsch 2026-07-09) — dezent, aber klar
   als Orientierung lesbar. Home/Shop werden serverseitig entfernt (functions.php). */
.woocommerce-breadcrumb{
	font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:1rem;
}
.woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce-breadcrumb a:hover{color:var(--ink)}

/* =========================================================================
   Galerie: 1:1-Rahmen (kein Layout-Springen), Thumbs als ruhige Leiste
   ========================================================================= */
.woocommerce-product-gallery{position:relative}
/* object-fit:contain statt cover: das Produkt muss IMMER vollständig sichtbar
   sein (Nutzerfeedback 2026-07-08: cover schnitt die Teile ab). Der 1:1-Rahmen
   bleibt für ruhiges Layout; Freiraum füllt der weiße Kartenhintergrund. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
	width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
	border-radius:var(--radius);border:1px solid var(--line);background:var(--white);
}
/* Thumbnails (Bild-/Farbwahl): mittig zentriert und deutlich größer —
   wachsen von der Mitte nach außen, statt links zu kleben (Nutzerfeedback). */
.woocommerce-product-gallery .flex-control-thumbs{
	list-style:none;margin:.8rem 0 0;padding:0;
	display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0}
.woocommerce-product-gallery .flex-control-thumbs img{
	width:clamp(72px,12vw,104px);height:auto;
	border-radius:6px;border:2px solid var(--line);cursor:pointer;opacity:.8;
	aspect-ratio:1/1;object-fit:contain;background:var(--white);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1;border-color:var(--accent)}

/* Sale-/Status-Badge: ruhige Bronze-Pille statt greller Störer */
.woocommerce span.onsale{
	position:absolute;top:12px;left:12px;z-index:5;
	background:var(--accent);color:var(--white);
	font-size:.8rem;font-weight:600;line-height:1;
	padding:.45rem .7rem;border-radius:999px;min-height:0;min-width:0;
}

/* =========================================================================
   Kaufbox (summary): Titel → Preis (+ Einzelpreis-Kontext) → Varianten → CTA
   ========================================================================= */
/* Zurückgenommen (Nutzerfeedback): Der Produktname führt die Kaufbox an, soll
   sie aber nicht dominieren — Preis und Auswahl brauchen den Fokus. */
.woocommerce div.product .summary .product_title{
	font-size:clamp(1.3rem,2.4vw,1.65rem);margin-bottom:.35rem;
}
.woocommerce div.product .summary .price{
	font-size:1.35rem;font-weight:600;color:var(--ink);margin-bottom:.15rem;
}
.woocommerce div.product .summary .price del{color:var(--muted);font-weight:400;margin-right:.4rem}
.woocommerce div.product .summary .price ins{text-decoration:none}
.woocommerce .woocommerce-price-suffix{font-size:.85rem;font-weight:400;color:var(--muted)}

/* Einzelpreis-Kontext (Ausgabe aus dem Commerce-Layer-Plugin) —
   positiv formuliert direkt am Preis (Blueprint/Guardrail 5) */
.zwcl-price-context{
	font-size:.95rem;color:var(--muted);
	margin:.2rem 0 1.1rem;max-width:44ch;
}

/* Variationsformular: gestapelte, klar beschriftete Auswahl (Phase 1: Selects;
   Swatches folgen iterativ laut Blueprint) */
.woocommerce div.product form.cart{margin-top:.4rem}
.woocommerce div.product form.cart table.variations{border:0;margin:0 0 .6rem;width:100%}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th{
	display:block;padding:0;border:0;text-align:left;
}
.woocommerce div.product form.cart table.variations label{
	font-weight:600;font-size:.92rem;display:block;margin:.7rem 0 .25rem;
}
.woocommerce div.product form.cart table.variations select{
	width:100%;min-height:48px;padding:.5rem .75rem;
	border:1px solid var(--line);border-radius:var(--radius);
	background:var(--white);color:var(--ink);font-size:1rem;
}
/* "Zurücksetzen"-Link ausblenden (Nutzerfeedback): Farbe lässt sich per
   erneutem Swatch-Klick abwählen, Größe einfach umstellen — der Link ist
   nur Rauschen im Formular. Funktional bleibt er im DOM (Woo-Logik nutzt ihn).
   !important, weil WooCommerce den Link bei gewählter Variante per Inline-Style
   (jQuery .show()/visibility) wieder einblendet — ohne !important gewinnt der
   Inline-Style und der Link taucht doch auf (Nutzerbefund 2026-07-09). */
.woocommerce div.product form.cart .reset_variations{
	display:none !important;
}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.2rem}
.woocommerce div.product .woocommerce-variation-availability{font-size:.92rem;color:var(--muted)}
.woocommerce div.product p.stock.in-stock{color:var(--ok);font-size:.92rem}
.woocommerce div.product p.stock.out-of-stock{color:var(--zcf-terracotta);font-size:.92rem}

/* Menge + CTAs: Menge klein oben, darunter beide Buttons in voller Breite und
   EXAKT gleicher Größe (Nutzerfeedback: nicht versetzt, gleich groß). */
.woocommerce div.product form.cart .quantity .qty{
	min-height:48px;width:5.2rem;padding:.4rem;text-align:center;
	border:1px solid var(--line);border-radius:var(--radius);
	background:var(--white);font-size:1rem;
}
.woocommerce div.product form.cart{display:block}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
	display:flex;flex-direction:column;align-items:stretch;gap:.6rem;margin-top:.8rem;
}
/* Hover-Hinweis am Warenkorb-Button, solange keine vollständige Auswahl getroffen
   ist (Nutzerwunsch 2026-07-10). WooCommerce setzt dann am Container die Klasse
   .woocommerce-variation-add-to-cart-disabled. Der Trigger sitzt am Container
   (der Button selbst ist disabled und feuert :hover unzuverlässig), der Tooltip
   ist am Button verankert — gleiche Optik wie die Teilen-/Farb-Tooltips. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{
	position:relative;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled:hover .single_add_to_cart_button::after{
	content:"Bitte zuerst eine Größe wählen";
	position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px);
	z-index:20;padding:.3rem .6rem;border-radius:6px;
	background:var(--ink);color:var(--paper);
	font-size:.8rem;font-weight:600;line-height:1.2;
	white-space:nowrap;pointer-events:none;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .zwcl-quote-cta{
	width:100%;margin:0;min-height:52px;justify-content:center;
}
/* Warenkorb-Icon am Kauf-Button: Inline-SVG als Maske, erbt die Textfarbe. */
.woocommerce div.product form.cart .single_add_to_cart_button::before{
	content:"";width:19px;height:19px;flex:none;background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 4h2l2.4 11h10.2l2.4-8H6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='17' cy='20' r='1.5'/%3E%3Cpath d='M3 4h2l2.4 11h10.2l2.4-8H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button{
	display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	min-height:48px;padding:.7rem 1.4rem;border-radius:var(--radius-pill);
	font-weight:600;font-size:1rem;border:1px solid transparent;cursor:pointer;
	background:var(--paper-2);color:var(--ink);text-decoration:none;
	transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.woocommerce button.button.alt,
.woocommerce button.single_add_to_cart_button{
	background:var(--zcf-petrol);color:var(--zcf-white);border-color:var(--zcf-petrol);
}
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover{background:var(--zcf-ink);border-color:var(--zcf-ink)}
.woocommerce button.button:disabled,
.woocommerce button.button.disabled{
	opacity:.55;cursor:not-allowed;
}
/* Deaktivierter Kauf-Button (keine Größe gewählt): WooCommerce setzt hier mit
   der spezifischeren Regel .button.alt.disabled sein Standard-Lila (#a46497)
   durch — deshalb erschien der Button lavendel statt Petrol (Nutzerbefund
   2026-07-10). Gleiche Spezifität + spätere Ladung = Marken-Petrol gewinnt. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled{
	background:var(--zcf-petrol);border-color:var(--zcf-petrol);color:var(--zcf-white);
}

/* Produkt-Meta (Art.-Nr., Kategorien) dezent unter der Kaufbox */
.woocommerce div.product .product_meta{
	font-size:.85rem;color:var(--muted);margin-top:1rem;
	padding-top:.8rem;border-top:1px solid var(--line);
}
.woocommerce div.product .product_meta>span{display:block;margin-bottom:.2rem}

/* =========================================================================
   Beschreibung / Material / Pflege: ruhige Tabs, mobil volle Breite
   ========================================================================= */
.woocommerce div.product .woocommerce-tabs ul.wc-tabs{
	list-style:none;display:flex;flex-wrap:wrap;gap:0 1.4rem;
	margin:0 0 1rem;padding:0;border-bottom:1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.wc-tabs li{margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.wc-tabs li a{
	display:inline-block;padding:.7rem 0;color:var(--muted);text-decoration:none;
	border-bottom:2px solid transparent;font-weight:600;font-size:.95rem;
}
.woocommerce div.product .woocommerce-tabs ul.wc-tabs li.active a{
	color:var(--ink);border-bottom-color:var(--accent);
}
.woocommerce div.product .woocommerce-tabs .panel{
	max-width:70ch;color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-child{
	font-size:1.15rem;font-family:var(--font);font-weight:700;margin-bottom:.5rem;
}

/* =========================================================================
   Empfehlungen (Upsells/Related/Cross-Sells) + Archiv: Kachel-Grid
   Kacheln 1:1 laut Bildstrategie; 2 Spalten mobil, bis 4 Desktop
   ========================================================================= */
.woocommerce ul.products{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
}
@media (min-width:768px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}}
/* width/float/margin überschreiben Woos eigenes Layout-CSS (columns-N nutzt
   Floats mit Prozentbreiten) — sonst quetschen sich die Kacheln schmal
   zusammen und Buttons ragen heraus (Nutzerfeedback 2026-07-08). */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product{
	width:auto;float:none;margin:0;clear:none;
	background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
	padding: .75rem;display:flex;flex-direction:column;gap:.35rem;position:relative;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product a{text-decoration:none;color:inherit}
.woocommerce ul.products li.product img{
	/* contain statt cover: Produkt vollständig zeigen, nie abschneiden
	   (Nutzerbefund 2026-07-10: Bild in „Ähnliche Produkte" war beschnitten).
	   Der 1:1-Rahmen bleibt fürs ruhige Raster; Freiraum füllt der weiße Grund. */
	width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:6px;background:var(--white);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font);font-size:.95rem;line-height:1.35;font-weight:400;
}
.woocommerce ul.products li.product .price{font-weight:600;color:var(--ink);font-size:.95rem}
.woocommerce ul.products li.product .button{margin-top:auto;font-size:.9rem;min-height:44px}
.woocommerce ul.products li.product span.onsale{top:8px;left:8px}

/* Sektionstitel der Empfehlungsblöcke im Serif-Stil des Themes */
.woocommerce .up-sells>h2,
.woocommerce .related>h2,
.woocommerce .cross-sells>h2{
	font-size:1.25rem;margin-bottom:.8rem;
}

/* Archiv-Kopf: Titel + Sortierung ruhig nebeneinander */
.woocommerce .woocommerce-products-header__title{margin-bottom:1rem}
.woocommerce .woocommerce-result-count{color:var(--muted);font-size:.9rem}
.woocommerce .woocommerce-ordering select{
	min-height:44px;padding:.4rem .6rem;border:1px solid var(--line);
	border-radius:var(--radius);background:var(--white);
}

/* =========================================================================
   Hinweise/Notices: ruhig, klar, im Token-Farbraum
   ========================================================================= */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
	list-style:none;margin:0 0 1.2rem;padding: .9rem 1.1rem;
	border:1px solid var(--line);border-left:4px solid var(--accent);
	border-radius:var(--radius);background:var(--white);color:var(--ink);
}
.woocommerce-error{border-left-color:var(--zcf-terracotta)}
.woocommerce-message a.button,.woocommerce-info a.button,.woocommerce-error a.button{
	float:right;margin-left:1rem;min-height:40px;padding:.4rem .9rem;
}

/* =========================================================================
   Warenkorb-Basis (Partnerlook + Cross-Sells erben Grid oben;
   ausführlicher Warenkorb-/Checkout-Pass folgt als eigener Schritt)
   ========================================================================= */
.woocommerce table.shop_table{
	width:100%;border-collapse:collapse;border:1px solid var(--line);
	border-radius:var(--radius);overflow:hidden;background:var(--white);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
	padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left;
}
.woocommerce table.shop_table img{width:56px;height:56px;object-fit:cover;border-radius:6px}

/* =========================================================================
   Mobile Sticky-CTA (nur Produktseite, nur Mobil): hält den Weg zur
   Auswahl immer im Daumenbereich (Blueprint: Zalando-Niveau Mobile-Basics)
   ========================================================================= */
.zw-sticky-cta{
	position:fixed;left:0;right:0;bottom:0;z-index:60;
	display:none;align-items:center;justify-content:space-between;gap:.8rem;
	background:var(--white);border-top:1px solid var(--line);
	padding:.6rem clamp(12px,4vw,20px);
	padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0));
}
.zw-sticky-cta.is-visible{display:flex}
.zw-sticky-cta__name{
	font-size:.9rem;line-height:1.3;color:var(--ink);
	overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.zw-sticky-cta .btn{flex:none}
body.zw-has-sticky{padding-bottom:76px}
@media (min-width:900px){
	.zw-sticky-cta{display:none !important}
	body.zw-has-sticky{padding-bottom:0}
}

/* =========================================================================
   Kategorieseiten-Ausbau (inc/category-page.php)
   Banner full-width VOR dem Container (Hook-Prio 5, Wrapper öffnet bei 10).
   aspect-ratio fest, damit beim Laden nichts springt (Bildstrategie);
   21:9 auf Desktop, 16:9 mobil.
   ========================================================================= */
.zw-cat-banner{position:relative;overflow:hidden;background:var(--zcf-sand)}
.zw-cat-banner img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.zw-cat-banner{aspect-ratio:21/9;max-height:420px;display:flex;align-items:flex-end}
.zw-cat-banner__overlay{
  position:absolute;inset:0;
  /* Abdunkelung unten: weiße H1 bleibt auf jedem Motiv lesbar (Kontrast). */
  background:linear-gradient(180deg,rgba(30,37,45,0) 45%,rgba(30,37,45,.55) 100%);
}
.zw-cat-banner__title{position:relative;z-index:2;width:100%;padding-block:clamp(14px,3vw,28px)}
.zw-cat-banner__title h1{color:var(--zcf-white);font-size:clamp(1.8rem,4vw,3rem);text-shadow:0 1px 12px rgba(30,37,45,.35)}
@media (max-width:768px){.zw-cat-banner{aspect-ratio:16/9;max-height:300px}}

/* Vorbereitete Filterfläche — erscheint erst, wenn der Merkmal-Import
   läuft und zweisam_category_filters_enabled true liefert. */
.zw-cat-filters{
  background:var(--zcf-white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:clamp(14px,2vw,22px);
  margin-bottom:var(--gap);
}
.zw-cat-filters__title{font-size:1.05rem;font-weight:750;margin-bottom:.6rem}

/* =========================================================================
   Marken-Header (product_brand) — zentriertes Logo statt Foto-Banner.
   Markup in inc/brand-page.php; erscheint nur auf /Marke/<slug>/.
   ========================================================================= */
.zw-brand-header{
  background:var(--zcf-white);
  border-bottom:1px solid var(--line);
  padding:clamp(20px,3vw,34px) 0 clamp(16px,2.4vw,26px);
}
.zw-brand-header__inner{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;
}
.zw-brand-header__logo-wrap{
  width:100%;max-width:280px;
}
.zw-brand-header__logo{
  display:block;width:100%;height:auto;max-height:110px;object-fit:contain;
}
.zw-brand-header__title{
  margin:0;font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;color:var(--ink);
}
/* Logo trägt den Markennamen bereits sichtbar — der H1-Text bleibt für
   SEO/Screenreader erhalten, wird bei vorhandenem Logo aber visuell dezenter. */
.zw-brand-header__logo-wrap + .zw-brand-header__title{
  font-size:1rem;font-weight:600;color:var(--muted);
}