/* ==========================================================================
   WerkstattWiesel – Produktseite im Kachel-Design (Entwurf kombi-produkt.html)
   ========================================================================== */

/* Preise grün auch in Karten und Kaufbereich (höhere Spezifität als shop.css) */
.woocommerce ul.products li.product .ww-card__preis .price,
.woocommerce div.product .ww-kauf__preis p.price { color: var(--preis); }
.woocommerce ul.products li.product .ww-card__preis .price del,
.woocommerce div.product .ww-kauf__preis p.price del { color: var(--text-2); }

/* Raster: Bild links (mit 360°-Hinweis darunter), Kaufbereich rechts */
.woocommerce div.product { gap: 1rem 2.25rem; }
@media (min-width: 52em) {
	.woocommerce div.product div.images { grid-column: 1; grid-row: 1; align-self: start; }
	.woocommerce div.product { grid-template-rows: auto 1fr; }
	.woocommerce div.product .ww-merkmal { grid-column: 1; grid-row: 2; align-self: start; }
	.woocommerce div.product div.summary { grid-column: 2; grid-row: 1 / span 2; }
}
.woocommerce div.product div.images { background: #fff; border: 1px solid #eeeeea; border-radius: 16px; overflow: hidden; }
.woocommerce div.product div.images img { mix-blend-mode: normal; }

.ww-merkmal { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .9rem 1.1rem; background: var(--flaeche); border-radius: 14px; font-size: .98rem; }
.ww-merkmal svg { flex: none; }

/* Kopf des Kaufbereichs */
.ww-chips-zeile { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.ww-chip { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: .8125rem; font-weight: 600; text-decoration: none; }
a.ww-chip:hover { background: var(--flaeche-2); color: var(--text); }
.ww-chip--rot { background: #fde8e6; color: var(--rot-text); }
.woocommerce div.product .product_title { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: -.01em; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); line-height: 1.15; margin: 0 0 .3rem; }
.ww-artnr-zeile { margin: 0 0 .75rem; font-size: .875rem; color: var(--text-2); }
.woocommerce div.product .summary .ww-gefahr-kurz { margin: 0 0 1rem; }

/* Preis */
.woocommerce div.product .ww-kauf__preis p.price { font-size: 2.4rem; }
.ww-kauf__recht { margin-top: .2rem; }

/* Warenkorb-Formular: Mengen-Pille + roter Pillen-Knopf */
.woocommerce div.product form.cart { background: none; padding: 0; margin: 1.25rem 0; gap: .6rem; }
.woocommerce div.product form.cart div.quantity { display: flex; align-items: center; border: 1.5px solid var(--linie); border-radius: 999px; overflow: hidden; background: #fff; }
.woocommerce div.product form.cart div.quantity .qty { border: 0; width: 3rem; min-height: 50px; padding: 0; font-weight: 600; -moz-appearance: textfield; background: none; }
.woocommerce div.product form.cart div.quantity .qty::-webkit-outer-spin-button, .woocommerce div.product form.cart div.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ww-menge-knopf { width: 42px; min-height: 50px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font: 600 1.3rem var(--schrift); cursor: pointer; }
.ww-menge-knopf:hover { background: var(--flaeche); }
.woocommerce div.product form.cart .button { border-radius: 999px; min-height: 52px; }

/* Kaufinfos */
.ww-kauf__vorteile { gap: .6rem; }

/* Abschnitte unter dem Kaufbereich */
.ww-produkt-abschnitt, .ww-sicherheit { border-top: 1px solid var(--linie); }
.ww-produkt-abschnitt > h2, .ww-sicherheit > h2, .related > h2 { font-style: normal; font-weight: 600; text-transform: none; font-size: 1.45rem; }

/* Sicherheit: Piktogramme groß, H-Sätze als Liste, Datenblätter als große Knöpfe */
.ww-sicherheit { max-width: 56rem; }
.ww-gefahr { border: 0; border-radius: 16px; background: var(--flaeche); padding: 1.25rem 1.4rem; }
.ww-gefahr-piktogramme { gap: 1rem; }
.ww-gefahr-piktogramme .ww-ghs { width: 72px; height: 72px; }
.ww-gefahr .ww-signalwort { display: inline-block; padding: .2rem .6rem; border-radius: 4px; background: var(--rot-text); color: #fff; font-size: .85rem; }
.ww-h-saetze { list-style: none; padding: 0; margin: 0 0 1rem; background: #fff; border-radius: 10px; }
.ww-h-saetze li { display: flex; gap: .75rem; margin: 0; padding: .5rem .8rem; border-top: 1px solid var(--linie); }
.ww-h-saetze li:first-child { border-top: 0; }
.ww-h-saetze li b { flex: none; min-width: 3.6rem; font-variant-numeric: tabular-nums; }

.ww-dokumente { display: grid; gap: .75rem; margin: 1.25rem 0; }
@media (min-width: 40em) { .ww-dokumente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ww-dok { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 2px solid var(--linie); border-radius: 14px; background: #fff; color: var(--text); text-decoration: none; }
.ww-dok:hover { border-color: var(--anthrazit); background: var(--flaeche); color: var(--text); }
.ww-dok__icon { position: relative; flex: none; width: 42px; height: 50px; }
.ww-dok__icon svg { width: 100%; height: 100%; fill: #fff; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; }
.ww-dok__icon b { position: absolute; left: -4px; bottom: 8px; padding: .1rem .3rem; border-radius: 3px; background: var(--rot-text); color: #fff; font-size: .625rem; letter-spacing: .05em; }
.ww-dok__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.ww-dok__text strong { font-size: 1.0625rem; }
.ww-dok__text small { font-size: .8125rem; color: var(--text-2); }
.ww-dok__pfeil { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* „Passt dazu“ */
.woocommerce div.product .related { border-top: 1px solid var(--linie); }