/*
Theme Name: Doseschop
Theme URI: https://doseschop.ch/
Author: Julian Senn
Description: Standalone WooCommerce-Theme im Look von doseschop.ch: schwarzer Header, weisser Rahmen mit 4px schwarzer Kontur, rote Buttons (#FE0000) mit schwarzem Rand, Poppins in lowercase-Navigation. Keine Page-Builder, keine Parent-Theme-Abhaengigkeit.
Version: 1.19.4
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doseschop
Tags: e-commerce, two-columns, custom-menu, custom-logo, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 10.8
*/

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
	/* Farben */
	--ds-black: #000000;
	--ds-white: #ffffff;
	--ds-red: #fe0000;
	--ds-red-dark: #d40000;
	--ds-grey: #333333;
	--ds-grey-light: #eeeeee;

	--ds-body-bg: var(--ds-white);
	--ds-text: var(--ds-black);
	--ds-link: var(--ds-black);
	--ds-link-hover: var(--ds-grey);

	--ds-header-bg: var(--ds-black);
	--ds-site-title: var(--ds-white);
	--ds-nav-text: var(--ds-white);
	--ds-subnav-bg: var(--ds-black);
	--ds-subnav-bg-hover: var(--ds-grey);
	--ds-subnav-text: var(--ds-white);

	--ds-footer-bg: var(--ds-black);
	--ds-footer-text: var(--ds-white);
	--ds-footer-link-hover: var(--ds-grey-light);
	--ds-footer-muted: #9a9a9a;
	--ds-footer-line: rgba(255, 255, 255, 0.15);

	/* Buttons */
	--ds-btn-bg: var(--ds-red);
	--ds-btn-bg-hover: var(--ds-black);
	/* Warenkorb-Knopf der Farbtabelle (Varianten-Raster). Eigene Tokens, damit
	 * eine Marke ihn neutral faerben kann, ohne die Farbfelder zu stoeren. */
	--ds-variant-btn-bg: var(--ds-red);
	--ds-variant-btn-bg-hover: var(--ds-red-dark);
	--ds-variant-btn-border: var(--ds-black);
	--ds-btn-text: var(--ds-white);
	--ds-btn-text-hover: var(--ds-white);
	--ds-btn-border-color: var(--ds-black);
	--ds-btn-border: 3px;
	--ds-btn-radius: 10px;
	--ds-btn-padding: 10px 20px;

	/* Schwarze Variante – Produktlisten und Kategorie-Kacheln. */
	--ds-btn-dark-bg: var(--ds-black);
	--ds-btn-dark-bg-hover: var(--ds-red);

	/* Formulare */
	--ds-form-bg: var(--ds-white);
	--ds-form-text: var(--ds-black);
	--ds-form-border-color: var(--ds-black);
	--ds-form-border-width: 3px;
	--ds-form-radius: 0px;
	--ds-form-padding: 0.8rem 1rem;

	/* Typografie */
	--ds-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Groessen in rem, damit sie der im Browser eingestellten Grundschrift
	 * folgen. In px taten sie das nicht - wer die Schrift groesser stellt,
	 * sah trotzdem 22px. 1rem = 16px, die Werte entsprechen den alten.
	 * Gewicht 400 statt 300: Light ist auf laengeren Texten schwer zu lesen. */
	--ds-body-size: 1.375rem;
	--ds-body-weight: 400;
	--ds-body-line-height: 1.5;

	--ds-site-title-size: 3vw;
	--ds-nav-size: 2vw;
	--ds-btn-size: 1.1875rem;
	--ds-footer-size: 1.125rem;

	--ds-h1-size: 3.75rem;
	--ds-h2-size: 2rem;
	--ds-h3-size: 1.5625rem;
	--ds-h4-size: 1.25rem;
	--ds-h5-size: 1.25rem;
	--ds-h6-size: 1.25rem;
	--ds-heading-line-height: 1.2em;

	/* Layout */
	--ds-side-space: 34px;          /* weisser Rahmen aussen  */
	--ds-header-padding: 0.6vw 2.6vw;
	--ds-content-padding: 4vw 3.2vw;
	--ds-content-border: 4px;
	--ds-nav-item-gap: 0.5vw;
	--ds-nav-item-padding: 1vw;
	--ds-subnav-width: 250px;
	--ds-block-gap: 24px;
	--ds-scrollbar-width: 12px;
}

@media (max-width: 1024px) {
	:root { --ds-nav-size: 1.3vw; }
}

@media (max-width: 768px) {
	:root {
		--ds-side-space: 18px;
		--ds-site-title-size: 5vw;
		--ds-nav-size: 14px;
		--ds-header-padding: 1.4vw 3vw;
		--ds-content-padding: 6vw 5vw;
		--ds-h1-size: 30px;
		--ds-h2-size: 25px;
		--ds-h3-size: 25px;
	}
}

/* =====================================================================
   2. RESET / GRUNDGERUEST
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/* Doppeltippen zoomt auf dem Handy sonst in die Seite hinein – besonders
   stoerend an den Mengenfeldern, wo man schnell mehrmals hintereinander
   tippt. "manipulation" erlaubt weiterhin Scrollen und Zoomen mit zwei
   Fingern, schaltet aber Doppeltipp-Zoom und die alte Tippverzoegerung ab.
   Bewusst NICHT ueber user-scalable=no geloest: das wuerde auch den
   Zwei-Finger-Zoom sperren, den manche zum Lesen brauchen. */
html,
body {
	touch-action: manipulation;
}

a,
button,
label,
summary,
select,
textarea,
input,
[role="button"],
.wp-block-button__link,
.ds-variation-row,
.quantity-wrapper,
.quantity-wrapper button,
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button {
	touch-action: manipulation;
}

body {
	margin: 0;
	padding: var(--ds-side-space);
	background-color: var(--ds-body-bg);
	color: var(--ds-text);
	font-family: var(--ds-font);
	font-size: var(--ds-body-size);
	font-weight: var(--ds-body-weight);
	line-height: var(--ds-body-line-height);
	overflow-x: hidden;
}

img,
video,
iframe,
embed,
object { max-width: 100%; height: auto; }

figure { margin: 0 0 var(--ds-block-gap); }

a {
	color: var(--ds-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover,
a:focus-visible { color: var(--ds-link-hover); }

:focus-visible {
	outline: 3px solid var(--ds-red);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ds-font);
	line-height: var(--ds-heading-line-height);
	margin: 0 0 var(--ds-block-gap);
	overflow-wrap: break-word;
}

h1 { font-size: var(--ds-h1-size); font-weight: 700; }
h2 { font-size: var(--ds-h2-size); font-weight: 700; }
h3 { font-size: var(--ds-h3-size); font-weight: 700; }
h4 { font-size: var(--ds-h4-size); font-weight: 700; line-height: 1em; }
h5 { font-size: var(--ds-h5-size); font-weight: 400; line-height: 1em; }
h6 { font-size: var(--ds-h6-size); font-weight: 400; line-height: 1em; }

p, ul, ol, dl, table, pre, blockquote { margin: 0 0 var(--ds-block-gap); }

blockquote {
	border-left: var(--ds-content-border) solid var(--ds-black);
	padding-left: 1rem;
	font-style: normal;
}

hr {
	border: 0;
	border-top: 3px solid var(--ds-black);
	margin: calc(var(--ds-block-gap) * 2) 0;
}

table { width: 100%; border-collapse: collapse; }

th, td {
	border: 1px solid var(--ds-black);
	padding: 0.6rem 0.8rem;
	text-align: left;
}

th { font-weight: 700; }

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
}

pre {
	background: var(--ds-grey-light);
	padding: 1rem;
	overflow-x: auto;
	border: 3px solid var(--ds-black);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--ds-red);
	color: var(--ds-white);
	padding: 12px 20px;
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: var(--ds-side-space);
	color: var(--ds-white);
}

/* Scrollbar wie im Original: schwarze Bahn, roter Daumen */
::-webkit-scrollbar { width: var(--ds-scrollbar-width); height: var(--ds-scrollbar-width); }
::-webkit-scrollbar-track { background: var(--ds-black); border-radius: 0; }
::-webkit-scrollbar-thumb { background: var(--ds-red); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-white); }

html { scrollbar-color: var(--ds-red) var(--ds-black); }

/* =====================================================================
   3. HEADER
   ===================================================================== */
.site-header {
	background-color: var(--ds-header-bg);
	position: relative;
	z-index: 100;
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--ds-header-padding);
}

.site-branding { min-width: 0; }

.site-title,
.main-title {
	margin: 0;
	font-size: var(--ds-site-title-size);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
}

.site-title a,
.main-title a {
	color: var(--ds-site-title);
	text-decoration: none;
	white-space: nowrap;
}

.site-title a:hover,
.main-title a:hover { color: var(--ds-site-title); opacity: 0.85; }

.custom-logo-link { display: block; }

.custom-logo {
	width: 15vw;
	max-width: 100%;
	height: auto;
	display: block;
}

.site-description {
	margin: 0;
	color: var(--ds-nav-text);
	font-size: 0.7rem;
	font-weight: 300;
}

/* --- Navigation --- */
.main-navigation { display: flex; }

.main-nav ul {
	display: flex;
	align-items: center;
	gap: var(--ds-nav-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav li { position: relative; }

.main-nav a {
	display: block;
	padding: 0 var(--ds-nav-item-padding);
	color: var(--ds-nav-text);
	font-size: var(--ds-nav-size);
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none;
	line-height: 1.8em;
	white-space: nowrap;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--ds-nav-text);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Untermenues */
.main-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	width: var(--ds-subnav-width);
	background: var(--ds-subnav-bg);
	border: 3px solid var(--ds-black);
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 200;
}

.main-nav ul ul li { width: 100%; }

.main-nav ul ul a {
	padding: 10px 16px;
	font-size: 16px;
	color: var(--ds-subnav-text);
	line-height: 1.4;
	white-space: normal;
}

.main-nav ul ul a:hover,
.main-nav ul ul .current-menu-item > a {
	background: var(--ds-subnav-bg-hover);
	text-decoration: none;
}

.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav ul ul ul { top: 0; left: 100%; }

/* --- Warenkorb im Menue --- */
.menu-item-cart a.cart-contents {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	position: relative;
}

.menu-item-cart .cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.menu-item-cart .cart-icon svg {
	width: 22px;
	height: 22px;
	display: block;
	stroke: var(--ds-white);
	color: var(--ds-white);
}

.menu-item-cart .cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ds-red);
	color: var(--ds-white);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

/* --- Mobile Toggle --- */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 3px solid var(--ds-white);
	color: var(--ds-white);
	font-family: var(--ds-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: lowercase;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 0;
}

.menu-toggle .bars {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
}

.menu-toggle .bars span {
	display: block;
	width: 20px;
	height: 3px;
	background: var(--ds-white);
}

.menu-toggle[aria-expanded="true"] {
	background: var(--ds-red);
	border-color: var(--ds-black);
}

@media (max-width: 768px) {
	.menu-toggle { display: inline-flex; }

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--ds-header-bg);
		border-top: 3px solid var(--ds-red);
	}

	.main-navigation.toggled { display: block; }

	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-nav a {
		padding: 12px 2vw;
		border-bottom: 1px solid var(--ds-grey);
	}

	.main-nav ul ul {
		position: static;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-left: 3px solid var(--ds-red);
	}

	.menu-item-cart a.cart-contents { border-bottom: 0; }
}

/* =====================================================================
   4. CONTENT-RAHMEN
   ===================================================================== */
#page { display: block; }

#content.site-content {
	border: var(--ds-content-border) solid var(--ds-black);
	margin-top: var(--ds-side-space);
	padding: var(--ds-content-padding);
}

#primary { width: 100%; }

.entry-header .entry-title,
.page-header .page-title {
	margin-bottom: var(--ds-block-gap);
}

.entry-content > *:last-child { margin-bottom: 0; }

.entry-meta {
	font-size: 16px;
	margin-bottom: var(--ds-block-gap);
}

.post-thumbnail { display: block; margin-bottom: var(--ds-block-gap); }

.post-thumbnail img { width: 100%; height: auto; display: block; }

article.post,
article.page {
	margin-bottom: calc(var(--ds-block-gap) * 2);
}

.entry-separator {
	border: 0;
	border-top: 3px solid var(--ds-black);
	margin: calc(var(--ds-block-gap) * 1.5) 0;
}

/* Pagination
 *
 * Ein zusammenhaengender schwarz gerahmter Block, wie die Farbtabelle auf der
 * Produktseite. Die Zellen stehen mit 3px Fuge nebeneinander, die Fuge ist der
 * durchscheinende Rahmen - keine zweite Linie.
 *
 * Rot traegt hier keinen Text: Weiss auf #fe0000 ergibt 4.03:1 und reicht erst
 * ab 18.7px Bold. Die aktuelle Seite ist deshalb schwarz gefuellt (21:1) und
 * bekommt Rot als 6px-Balken - Flaeche statt Schrift. Gleiche Entscheidung wie
 * bei den Buttons: Rot nur fuer den einen grossen Kaufknopf und den
 * Warenkorb-Zaehler.
 *
 * Gesperrte Pfeile bekommen eine eigene Farbe statt opacity, wie die
 * ausverkauften Zeilen in der Farbtabelle - opacity dimmt die Schrift mit.
 *
 * Warum die langen Selektoren: das Stylesheet von WooCommerce stylt
 * ".woocommerce nav.woocommerce-pagination ul li a" und setzt dort display:
 * block, float, eine eigene Schriftgroesse und ein lila Aktiv-Feld. Das ist
 * spezifischer als ".woocommerce-pagination .page-numbers". Die alte Fassung
 * hat sich mit !important dagegen gestemmt; hier gewinnt stattdessen die
 * Spezifitaet, damit spaetere Regeln wieder normal ueberschreiben koennen. */
.pagination,
.woocommerce nav.woocommerce-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	margin-top: calc(var(--ds-block-gap) * 2);
}

.pagination .nav-links,
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 3px solid var(--ds-black);
	background: var(--ds-black);
	white-space: normal;
}

.woocommerce nav.woocommerce-pagination ul li {
	display: flex;
	float: none;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 3.25rem;
	min-height: 3.25rem;
	padding: 0 0.75rem;
	border: 0;
	background: var(--ds-white);
	color: var(--ds-black);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	border-radius: 0;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.12s linear, color 0.12s linear;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	background: var(--ds-black);
	color: var(--ds-white);
}

.pagination a.page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	outline: 3px solid var(--ds-red);
	outline-offset: 3px;
}

/* Aktuelle Seite: schwarz gefuellt, roter Balken als Markenzeichen. */
.pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	position: relative;
	background: var(--ds-black);
	color: var(--ds-white);
	cursor: default;
}

.pagination .page-numbers.current::after,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--ds-red);
}

/* zurueck / weiter - ein Knopf soll sagen, was passiert. */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next {
	padding: 0 1.125rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: lowercase;
	white-space: nowrap;
}

/* Erste bzw. letzte Seite erreicht. #6b6b6b auf #f2f1ef ergibt 5.3:1. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.is-off {
	background: #f2f1ef;
	color: #6b6b6b;
	cursor: default;
}

.pagination .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	min-width: 2.5rem;
	padding: 0 0.25rem;
	color: #6b6b6b;
	font-weight: 600;
	cursor: default;
}

/* Wo bin ich - bei ueber 200 Farben pro Dose die haeufigste Frage im Raster. */
.ds-pagination-count {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #3d3d3d;
	text-transform: lowercase;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.pagination .page-numbers,
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0 0.5rem;
		font-size: 1rem;
	}

	.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev,
	.woocommerce nav.woocommerce-pagination ul li .page-numbers.next { padding: 0 0.75rem; }

	/* Das Wort weicht, der Pfeil bleibt - fuer Screenreader bleibt beides da. */
	.woocommerce nav.woocommerce-pagination ul li .page-numbers .ds-page-word {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pagination a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers { transition: none; }
}
/* =====================================================================
   5. BUTTONS & FORMULARE
   ===================================================================== */
/* Bewusst NICHT das nackte <button>: WooCommerce baut Warenkorb und Kasse aus
   Bloecken, deren Bedienelemente (Mengensteuerung, Entfernen, Aufklappen) auch
   <button> sind. Die wurden sonst rot eingefaerbt und mit weisser Schrift
   unlesbar. Getroffen werden nur echte Aktionsbuttons. */
.wp-block-button__link,
.wp-element-button,
.button,
button[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"],
.ds-button {
	display: inline-block;
	background-color: var(--ds-btn-bg);
	color: var(--ds-btn-text) !important;
	border: var(--ds-btn-border) solid var(--ds-btn-border-color);
	border-radius: var(--ds-btn-radius);
	padding: var(--ds-btn-padding);
	font-family: var(--ds-font);
	font-size: var(--ds-btn-size);
	font-weight: 700;
	text-transform: lowercase;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	text-decoration: underline;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,
button[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.ds-button:hover {
	background-color: var(--ds-btn-bg-hover);
	color: var(--ds-btn-text-hover) !important;
	border-color: var(--ds-btn-border-color);
}

.menu-toggle,
.qty-btn { text-transform: lowercase; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	background: var(--ds-form-bg);
	color: var(--ds-form-text);
	border: var(--ds-form-border-width) solid var(--ds-form-border-color);
	border-radius: var(--ds-form-radius);
	padding: var(--ds-form-padding);
	font-family: var(--ds-font);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
}

input:focus,
select:focus,
textarea:focus {
	background: var(--ds-black);
	color: var(--ds-white);
	border-color: var(--ds-black);
	outline: none;
}

label { font-size: 18px; font-weight: 700; display: inline-block; margin-bottom: 6px; }

.search-form { display: flex; gap: 10px; flex-wrap: wrap; }

.search-form label { flex: 1 1 240px; margin: 0; }

/* Back to top */
.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--ds-red);
	color: var(--ds-black) !important;
	border: 3px solid var(--ds-black);
	border-radius: 0;
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}

.back-to-top.is-visible { display: flex; }

.back-to-top:hover {
	background: var(--ds-black);
	color: var(--ds-white) !important;
}

/* =====================================================================
   6. FOOTER – einheitlich fuer beide Marken (23.10.2026)
   Marken-Unterschiede nur ueber Tokens (--ds-footer-*).
   ===================================================================== */
.site-footer {
	background: var(--ds-footer-bg);
	color: var(--ds-footer-text);
	font-size: 1rem;
	font-weight: 400;
	margin-top: var(--ds-side-space);
	padding: 3vw 2vw;
}

.site-footer a { color: var(--ds-footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--ds-footer-link-hover); text-decoration: underline; }

.footer-spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem 3rem;
	padding-bottom: 2rem;
}

.footer-spalte p { margin: 0 0 0.5rem; }

.footer-markenname {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.footer-tagline {
	font-size: 1rem;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--ds-footer-muted);
}

.footer-titel {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ds-footer-muted);
}

.footer-nav ul,
.footer-zahlung,
.footer-legal-nav ul,
.footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav li { margin-bottom: 0.35rem; }

.footer-nav a {
	display: inline-block;
	padding-block: 4px;
	font-weight: 700;
	text-transform: lowercase;
}

.footer-hinweis { color: var(--ds-footer-muted); }

.footer-zahlung {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0.75rem;
}

.footer-zahlung li {
	border: 1px solid var(--ds-footer-muted);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.8125rem;
	color: var(--ds-footer-muted);
}

.footer-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 1rem;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 3px solid var(--ds-footer-text);
	color: var(--ds-footer-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.footer-social-link svg { width: 32px; height: 32px; }

.footer-social-link:hover {
	background: var(--ds-red);
	border-color: var(--ds-red);
	color: var(--ds-white);
	text-decoration: none;
}

/* Rechtszeile: bewusst zurueckhaltend. */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	border-top: 1px solid var(--ds-footer-line);
	padding-top: 0.5rem;
}

.footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
}

.footer-legal-nav a,
.footer-copyright,
.footer-schwester {
	font-size: 0.875rem;
	color: var(--ds-footer-muted);
	text-transform: lowercase;
	letter-spacing: 0.01em;
}

.footer-legal-nav a { display: inline-block; padding-block: 10px; }

.footer-copyright,
.footer-schwester { margin: 0; }

.footer-schwester a { color: var(--ds-footer-text); font-weight: 700; }

@media (max-width: 600px) {
	.footer-spalten { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
	.footer-marke, .footer-kontakt { grid-column: 1 / -1; }
	.footer-legal { justify-content: flex-start; }
}
/* =====================================================================
   7. WORDPRESS BLOCK-DEFAULTS
   ===================================================================== */
.alignwide, .alignfull { max-width: 100%; }

.alignfull {
	margin-left: calc(-1 * var(--ds-content-padding-x, 2vw));
	margin-right: calc(-1 * var(--ds-content-padding-x, 2vw));
	width: auto;
}

.alignleft { float: left; margin: 0 var(--ds-block-gap) var(--ds-block-gap) 0; }
.alignright { float: right; margin: 0 0 var(--ds-block-gap) var(--ds-block-gap); }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }

.wp-block-columns { gap: var(--ds-block-gap); }

.wp-block-cover { min-height: 300px; }

.wp-block-cover .wp-block-button__link { text-decoration: underline; }

/* --- Kategorie-Kacheln auf der Startseite ---
   Die Cover-Bloecke richten ihre Hoehe sonst nach dem Seitenverhaeltnis des
   jeweiligen Bildes, was bei vier unterschiedlichen Motiven unruhig wirkt.
   Hier: gleiches Quadrat, Bild formatfuellend, Button unten mittig. */
/* Die Vorlage laesst Gruppe und Spalten schmaler als den Inhaltsbereich und
   linksbuendig stehen – das ergab rechts deutlich mehr Luft als links. */
.home .entry-content .wp-block-group,
.home .entry-content .wp-block-columns {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Darstellung wie auf doseschop.ch: vier gleich hohe Kacheln (430px), ohne
   Abstand und ohne Rahmen aneinander, Bild formatfuellend, Schleier bei 30%.
   Einziger Unterschied: der Button ist schwarz statt rot. */
.home .entry-content .wp-block-columns {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.home .entry-content .wp-block-columns > .wp-block-column {
	margin: 0 !important;
	min-width: 0;
}

.home .entry-content .wp-block-cover {
	min-height: 430px;
	height: 100%;
	border: 0;
	padding: 22px 22px 56px !important;
}

.home .entry-content .wp-block-cover__image-background {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.home .entry-content .wp-block-cover__inner-container { width: 100%; }

/* Gleiche schwarze Variante wie die Buttons in den Produktlisten. */
.home .entry-content .wp-block-cover .wp-block-button__link {
	background: var(--ds-btn-dark-bg);
	border: var(--ds-btn-border) solid var(--ds-btn-border-color);
	border-radius: var(--ds-btn-radius);
	color: var(--ds-white) !important;
	font-size: clamp(15px, 1.3vw, 19px);
	padding: 9px 18px;
	text-decoration: none;
}

.home .entry-content .wp-block-cover .wp-block-button__link:hover {
	background: var(--ds-btn-dark-bg-hover);
	color: var(--ds-white) !important;
}

@media (max-width: 900px) {
	.home .entry-content .wp-block-columns { flex-wrap: wrap; }
	.home .entry-content .wp-block-columns > .wp-block-column { flex-basis: 50% !important; }
	.home .entry-content .wp-block-cover { min-height: 320px; }
}

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 16px;
	text-align: center;
}

.sticky .entry-title::after {
	content: " ★";
	color: var(--ds-red);
}

/* =====================================================================
   8. WOOCOMMERCE
   ===================================================================== */
/* Meldungen (Erfolg, Hinweis, Fehler): Abschnitt "Meldungen, Knopf-Bewegung,
   Warenkorb-Toast" am Ende dieser Datei. */

/* --- Produktraster --- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
	list-style: none;
	margin: 0 0 var(--ds-block-gap);
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1rem;
	display: block;
	border: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	padding: 0 0 8px;
	margin: 0;
}

.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { text-decoration: underline; }

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--ds-black);
	font-size: 19px;
	font-weight: 400;
	margin: 0 0 10px;
}

.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; }

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
	background: var(--ds-btn-dark-bg);
	color: var(--ds-white) !important;
	border: var(--ds-btn-border) solid var(--ds-btn-border-color);
	border-radius: var(--ds-btn-radius);
	padding: 12px 22px;
	font-size: clamp(17px, 1.7vw, 22px);
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--ds-btn-dark-bg-hover);
	border-color: var(--ds-btn-border-color);
	color: var(--ds-white) !important;
}

.woocommerce span.onsale {
	background: var(--ds-black);
	color: var(--ds-white);
	border-radius: 0;
	font-weight: 700;
	font-size: 15px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 8px 12px;
	top: 0;
	left: 0;
	right: auto;
	margin: 0;
}

@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 18px; }
	.woocommerce ul.products li.product .button { font-size: 17px; padding: 10px 16px; }
}

/* --- Block-Variante des Produktrasters (wp:woocommerce/product-collection) ---
   Die Startseite nutzt die Block-Bausteine statt des klassischen Loops. Ohne
   diese Regeln rendert WooCommerce sie als Flow-Layout, also untereinander. */
.wp-block-woocommerce-product-template,
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2.5rem 1.5rem;
	list-style: none;
	margin: 0 0 var(--ds-block-gap);
	padding: 0;
}

.wc-block-product-template li.wc-block-product,
.wp-block-woocommerce-product-template li {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	text-align: left;
	list-style: none;
}

/* Auf dem Handy zweispaltig wie das klassische Shop-Raster – sonst steht der
   Block einspaltig, waehrend die Kategorieseiten zwei Produkte nebeneinander
   zeigen. */
@media (max-width: 768px) {
	.wp-block-woocommerce-product-template,
	.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1rem;
	}

	.wc-block-product-template .wp-block-post-title { font-size: 18px; }
}

.wc-block-product-template .wc-block-components-product-image { margin: 0 0 1rem; }

.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.wc-block-product-template .wp-block-post-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px;
}

.wc-block-product-template .wp-block-post-title a { text-decoration: none; }
.wc-block-product-template .wp-block-post-title a:hover { text-decoration: underline; }

.wc-block-product-template .wc-block-components-product-price {
	display: block;
	color: var(--ds-black);
	font-size: 19px;
	font-weight: 400;
	margin: 0 0 10px;
}

.wc-block-product-template .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 700;
}

.wc-block-product-template .wp-block-woocommerce-product-button { margin-top: auto; }

/* Gilt bewusst ohne den Vorfahren .wc-block-product-template: die Startseite
 * nutzt einen anderen Produktblock, dort griff die Regel frueher nicht. Der
 * Knopf blieb deshalb im Woo-Standard - rot, 13px und unterstrichen, also zu
 * klein und mit zu wenig Kontrast. Rot bleibt der grossen Kaufleiste
 * vorbehalten, kleine Knoepfe sind schwarz. */
.wc-block-components-product-button .wc-block-components-button,
.wc-block-components-product-button .wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ds-btn-dark-bg) !important;
	color: var(--ds-white) !important;
	border: var(--ds-btn-border) solid var(--ds-btn-border-color) !important;
	border-radius: var(--ds-btn-radius) !important;
	padding: 12px 22px;
	font-family: var(--ds-font);
	font-size: clamp(16px, 1.5vw, 20px) !important;
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none !important;
	width: auto;
}

.wc-block-components-product-button .wc-block-components-button:hover,
.wc-block-components-product-button .wc-block-components-product-button__button:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background: var(--ds-red) !important;
	color: var(--ds-white) !important;
}

/* Blocksatz-Ueberschriften an die Theme-Groessen binden */
.wp-block-heading { font-family: var(--ds-font); }
h2.wp-block-heading { font-size: var(--ds-h2-size); font-weight: 700; }
h3.wp-block-heading { font-size: var(--ds-h3-size); font-weight: 700; }

/* WooCommerce druckt inline eine eigene Regel mit gleicher Spezifitaet, die
   Ueberschriften im Produkt-Block auf die "small"-Groesse zwingt (13px).
   !important ist hier der einzige verlaessliche Weg, unabhaengig davon,
   in welcher Reihenfolge die Stylesheets landen. */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
	font-size: var(--ds-h2-size) !important;
	font-weight: 700;
}

.wp-block-woocommerce-product-collection h3.wp-block-heading {
	font-size: var(--ds-h3-size) !important;
	font-weight: 700;
}

/* --- Shop-Kopf / Sortierung --- */
.woocommerce .woocommerce-result-count { font-size: 17px; margin: 0 0 1rem; }

.woocommerce .woocommerce-ordering { margin: 0 0 1.5rem; max-width: 100%; }

/* Das Auswahlfeld richtet sich nach seinem laengsten Eintrag ("Sortieren nach
   Beliebtheit"). Ohne Deckel wurde es auf dem Handy 396px breit und ragte,
   weil WooCommerce das Formular rechts floaten laesst, links aus dem Bild. */
.woocommerce .woocommerce-ordering select {
	width: auto;
	min-width: 240px;
	max-width: 100%;
}

@media (max-width: 768px) {
	.woocommerce .woocommerce-ordering,
	.woocommerce .woocommerce-result-count {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
	}
}

.woocommerce-products-header__title,
.woocommerce-loop-category__title { font-size: var(--ds-h1-size); }

.term-description { margin-bottom: var(--ds-block-gap); }

/* --- Einzelprodukt --- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }

.single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }

.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.single-product div.product .woocommerce-product-gallery + .summary + * { grid-column: 1 / -1; }

.single-product div.product .product_title { font-size: 40px; font-weight: 700; margin-bottom: 1rem; }

.single-product div.product p.price,
.single-product div.product span.price {
	color: var(--ds-black);
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 1.2rem;
}

.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.single-product .flex-control-thumbs li { width: 100% !important; margin: 0 !important; }

.single-product .quantity input.qty {
	width: 90px;
	text-align: center;
	font-weight: 700;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.5rem;
}

.single-product form.cart .single_add_to_cart_button {
	background: var(--ds-red);
	border: 3px solid var(--ds-black);
	color: var(--ds-white) !important;
	border-radius: 10px;
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	padding: 18px 36px;
}

.single-product form.cart .single_add_to_cart_button:hover { background: var(--ds-red-dark); }

.single-product .product_meta { font-size: 16px; }

.woocommerce-tabs {
	margin-top: 3rem;
	border-top: 4px solid var(--ds-black);
	padding-top: 2rem;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border-bottom: 3px solid var(--ds-black);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after { content: none !important; }

.woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; border: 0 !important; box-shadow: none !important; }

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 14px !important;
	margin-bottom: -3px;
	color: var(--ds-black) !important;
	font-weight: 700;
	font-size: 22px;
	text-transform: lowercase;
	text-decoration: none;
	border-bottom: 6px solid transparent;
}

.woocommerce-tabs ul.tabs li a:hover { border-bottom-color: var(--ds-grey-light); }

.woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--ds-red); }

.woocommerce-tabs .panel {
	border: 0;
	padding: 0;
	margin: 0;
	max-width: 70ch;
	font-size: 19px;
	line-height: 1.65;
}

.woocommerce-tabs .panel > h2:first-child { display: none; }

.woocommerce-tabs .panel table.shop_attributes {
	border: 3px solid var(--ds-black);
	max-width: 520px;
}

.woocommerce-tabs .panel table.shop_attributes th {
	background: var(--ds-grey-light);
	width: 40%;
}

.woocommerce-tabs .panel table.shop_attributes td { font-style: normal; }

@media (max-width: 600px) {
	.woocommerce-tabs ul.tabs { gap: 0 1.4rem; }
	.woocommerce-tabs ul.tabs li a { font-size: 18px; }
}

.related > h2,
.upsells > h2,
.cross-sells > h2 { font-size: var(--ds-h2-size); margin-top: 2rem; }

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.single-product div.product .product_title { font-size: 30px; }
}

/* --- Varianten-Liste (wie im Shop) --- */
.ds-variation-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 18px 0;
}

.ds-variation-item {
	border: 3px solid var(--ds-black);
	border-radius: 12px;
	overflow: hidden;
}

.ds-variation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	border-radius: 10px;
	background: var(--ds-row-bg, var(--ds-grey-light));
	color: var(--ds-black);
}

.ds-variation-row.is-dark { color: var(--ds-white); }

.ds-variation-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Keine Deckkraft mehr: opacity senkt den Kontrast auf hellen Dosenfarben
 * unter das Lesbare. Die Abstufung zum Farbnamen traegt jetzt Gewicht und
 * Laufweite. 12px lagen unter der Mindestgroesse. */
.ds-variation-sku { font-size: 14px; font-weight: 600; opacity: 1; letter-spacing: 0.04em; line-height: 1.15; }

.ds-variation-name { font-size: 18px; font-weight: 900; text-transform: uppercase; line-height: 1.15; word-break: break-word; }

.ds-variation-price { font-size: 15px; font-weight: 700; }

.ds-variation-price .amount { color: inherit; }

/* Sattigung statt Deckkraft: opacity hat auch den Text mitgedimmt und den
 * Kontrast unter das Lesbare gezogen. saturate() laesst die Leuchtdichte
 * stehen, Schwarz und Weiss bleiben unberuehrt - die Farbe wird blass, die
 * Schrift bleibt scharf. Erkennbar ist der Zustand ohnehin am Wort
 * "ausverkauft", nicht an der Farbe allein. */
/* Ausverkaufte Farbe: der Farbton bleibt voll erhalten. Ihn zu entsaettigen
   waere falsch - dann sieht man gerade nicht mehr, um welche Farbe es geht.
   Zurueckgenommen wird nur die Schrift, dazu kommt das Kennzeichen. */
.ds-variation-row.is-disabled {
	opacity: 1;
	filter: none;
	cursor: not-allowed;
}

.ds-variation-row.is-disabled .ds-variation-sku,
.ds-variation-row.is-disabled .ds-variation-name,
.ds-variation-row.is-disabled .ds-variation-price {
	opacity: 0.5;
}

/* Das Kennzeichen selbst bleibt kraeftig und traegt seinen eigenen
   Hintergrund, damit es auf jedem Farbton lesbar ist. */
.ds-variation-row.is-disabled .ds-variation-oos {
	opacity: 1;
	background: rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	padding: 5px 10px;
}

.ds-variation-row.is-dark.is-disabled .ds-variation-oos {
	background: rgba(255, 255, 255, 0.22);
}

.ds-variation-oos {
	font-size: 14px;
	font-weight: 900;
	text-transform: lowercase;
	white-space: nowrap;
}

.ds-qty { flex: 0 0 auto; }

/* Fusszeile mit Zaehler und Absenden-Button */
.ds-variation-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
}

.ds-variation-summary {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	min-height: 1.5em;
}

.single-product form.cart.ds-variation-table-form .single_add_to_cart_button {
	background: var(--ds-variant-btn-bg);
	border: 3px solid var(--ds-variant-btn-border);
	color: var(--ds-white) !important;
	border-radius: 10px;
	font-size: 24px;
	font-weight: 900;
	text-transform: uppercase;
	padding: 20px 40px;
	width: 100%;
	max-width: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.single-product form.cart.ds-variation-table-form .single_add_to_cart_button:hover { background: var(--ds-variant-btn-bg-hover); }

.single-product form.cart.ds-variation-table-form .single_add_to_cart_button[disabled] {
	background: var(--ds-grey);
	cursor: not-allowed;
}

.quantity-wrapper {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	overflow: hidden;
}

.ds-variation-row.is-dark .quantity-wrapper { border-color: rgba(255, 255, 255, 0.7); }

.quantity-wrapper button {
	appearance: none;
	border: 0;
	width: 46px;
	height: 40px;
	font-size: 22px;
	font-weight: 900;
	cursor: pointer;
	background: transparent;
	color: inherit !important;
	padding: 0;
	border-radius: 0;
}

.quantity-wrapper button:hover { background: rgba(0, 0, 0, 0.08); color: inherit !important; }

.quantity-wrapper input[type="number"] {
	width: 58px;
	height: 40px;
	border: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 900;
	background: transparent;
	color: inherit;
	padding: 0;
}

.quantity-wrapper input[type="number"]:focus { background: transparent; color: inherit; }

@media (max-width: 480px) {
	.ds-variation-row { padding: 12px; }
	.ds-variation-name { font-size: 16px; }

	/* Nicht unter 44px: darunter wird das Treffen mit dem Daumen unzuverlaessig. */
	.quantity-wrapper button { width: 44px; height: 44px; font-size: 20px; }
	.quantity-wrapper input[type="number"] { width: 52px; height: 44px; font-size: 15px; }
}

/* --- Sticky Add-to-Cart Leiste --- */
.ds-sticky-cartbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(235, 235, 235, 0.96);
	backdrop-filter: blur(8px);
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.1);
	display: none;
}

.ds-sticky-cartbar.is-visible { display: block; }

.ds-sticky-cartbar .ds-sticky-cartbtn {
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ds-red);
	border: 3px solid var(--ds-black);
	color: var(--ds-white) !important;
	border-radius: 12px;
	min-height: 64px;
	padding: 18px 28px;
	font-size: 22px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.ds-sticky-cartbar .ds-sticky-cartbtn:hover { background: var(--ds-red-dark); }

.ds-sticky-cartbar .ds-sticky-count {
	display: inline-flex;
	align-items: center;
	margin-left: 12px;
	padding: 4px 10px;
	background: var(--ds-black);
	color: var(--ds-white);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 900;
	text-transform: lowercase;
	white-space: nowrap;
}

.ds-sticky-cartbar .ds-sticky-count[hidden] { display: none; }

/* --- Warenkorb / Kasse --- */
.woocommerce table.shop_table {
	border: 3px solid var(--ds-black);
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 1px solid var(--ds-black);
	font-size: 18px;
}

.woocommerce table.shop_table thead th { background: var(--ds-black); color: var(--ds-white); }

.woocommerce-cart table.cart img { width: 80px; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 480px; float: right; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--ds-red);
	color: var(--ds-white) !important;
	border: 3px solid var(--ds-black);
	border-radius: var(--ds-btn-radius);
	font-family: var(--ds-font);
	font-size: var(--ds-btn-size);
	font-weight: 700;
	text-transform: lowercase;
	padding: 10px 20px;
	text-decoration: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ds-black);
	color: var(--ds-white) !important;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--ds-red);
	color: var(--ds-white) !important;
	border: 3px solid var(--ds-black);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--ds-black); }

.woocommerce .checkout h3,
.woocommerce-checkout h3 { font-size: var(--ds-h3-size); }

.woocommerce form .form-row { margin-bottom: 1rem; }

.woocommerce form .form-row label { font-size: 17px; }

.woocommerce-checkout #payment {
	background: var(--ds-white);
	border: 3px solid var(--ds-black);
	border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--ds-grey-light);
	border-radius: 0;
	color: var(--ds-black);
}

.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ds-grey-light); }

.woocommerce .quantity .qty { border-radius: 0; }

/* --- Block-Warenkorb und Block-Kasse ---
   Warenkorb und Kasse sind bei WooCommerce 11 Bloecke, die per JavaScript
   rendern. Ihre Bedienelemente brauchen eigene Regeln, sonst erben sie
   entweder nichts oder das Falsche. */
/* Der Block gibt der Box eine feste Breite (107px) und schneidet Ueberlauf ab.
   Zusammen mit groesseren Tastflaechen fiel das Plus dadurch aus dem Rahmen –
   die Box muss sich am Inhalt orientieren, nicht umgekehrt. */
.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	border: 3px solid var(--ds-black);
	border-radius: var(--ds-btn-radius);
	overflow: visible;
	background: var(--ds-white);
}

.wc-block-components-quantity-selector::after { content: none !important; }

.wc-block-components-quantity-selector__button {
	background: transparent !important;
	color: var(--ds-black) !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* Der Block gibt eine schmalere Breite vor – fuer Touch zu klein. */
	flex: 0 0 46px;
	width: 46px !important;
	min-width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	font-family: var(--ds-font);
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	opacity: 1 !important;
	cursor: pointer;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--ds-grey-light) !important;
	color: var(--ds-black) !important;
}

.wc-block-components-quantity-selector__button:disabled { opacity: 0.35 !important; }

.wc-block-components-quantity-selector__input {
	background: transparent;
	border: 0;
	/* Feste Breite: sonst schrumpft das Feld je nach Titellaenge unterschiedlich. */
	flex: 0 0 58px;
	width: 58px;
	min-width: 58px;
	height: 42px;
	text-align: center;
	font-size: 17px;
	font-weight: 900;
	color: var(--ds-black);
	padding: 0;
}

.wc-block-components-quantity-selector__input:focus {
	background: transparent;
	color: var(--ds-black);
}

/* Entfernen-Link und andere Textbuttons der Bloecke bleiben Text. */
.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata__description button,
.wc-block-components-panel__button {
	background: transparent !important;
	color: var(--ds-black) !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 15px;
	font-weight: 400;
	text-decoration: underline;
	text-transform: none;
}

.wc-block-components-panel__button {
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
}

/* Die echten Aktionsbuttons der Bloecke dagegen im Shop-Look. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
	background: var(--ds-red) !important;
	color: var(--ds-white) !important;
	border: var(--ds-btn-border) solid var(--ds-btn-border-color) !important;
	border-radius: var(--ds-btn-radius) !important;
	font-family: var(--ds-font);
	font-weight: 700;
	text-transform: lowercase;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover {
	background: var(--ds-black) !important;
	color: var(--ds-white) !important;
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-form input {
	border-radius: var(--ds-form-radius);
}

/* Breadcrumb */
.woocommerce-breadcrumb {
	font-size: 16px;
	font-weight: 300;
	margin-bottom: 1.5rem !important;
	color: var(--ds-black);
}

.woocommerce-breadcrumb a { text-decoration: none; font-weight: 700; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Konto */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 8px 14px;
	border: 3px solid var(--ds-black);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ds-red);
	color: var(--ds-white);
}

/* =====================================================================
   9. WIDGETS / SIDEBAR
   ===================================================================== */
.widget { margin-bottom: 2rem; }

.widget-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }

.widget ul { list-style: none; margin: 0; padding: 0; }

.widget ul li { margin-bottom: 6px; }

/* =====================================================================
   10. PRINT
   ===================================================================== */
@media print {
	.site-header, .site-footer, .back-to-top, .ds-sticky-cartbar { display: none !important; }
	body { padding: 0; }
	#content.site-content { border: 0; padding: 0; }
}


/* =====================================================================
 * Doseschop Anpassungen
 * Aus dem Customizer hierher gezogen, damit alles im Theme liegt.
 * ================================================================== */

/* --- Produktseite: Farbtabelle als mitwachsendes Raster --------------- */

@media (min-width: 1024px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
	}

	.single-product div.product > .summary.entry-summary {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
	}
}

.ds-variation-list {
	display: grid !important;
	/* 2 Spalten erst, wenn neben dem Mengenfeld genug Platz fuer Nummer und
	   Farbnamen bleibt. Keine gleich hohen Zeilen (grid-auto-rows: 1fr): eine
	   lange Nummer machte sonst alle Kacheln so hoch wie die hoechste. Kacheln
	   in derselben Zeile bleiben dank stretch gleich hoch. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	align-items: stretch;
	gap: 10px;
	width: 100%;
	flex: 1 1 100%;
}

.ds-variation-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	height: 100%;
}

.ds-variation-row {
	height: 100%;
}

.ds-variation-row .ds-variation-info {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-variation-row .ds-variation-name {
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	/* Nur umbrechen, wenn ein Wort allein nicht passt - nicht "COPPERCHROM-E". */
	overflow-wrap: break-word;
	word-break: normal;
}

.ds-variation-row .ds-variation-info { gap: 3px; }

/* Nummer kleiner und ruhiger; bricht bei den Bindestrichen um. */
.ds-variation-row .ds-variation-sku {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/* Mengenfeld auf dem Desktop schmaler, damit der Farbname Platz hat.
   Auf dem Handy bleiben die Knoepfe bei 44px fuer sichere Treffer. */
@media (min-width: 1024px) {
	.ds-variation-row .ds-qty .quantity-wrapper button {
		width: 36px !important;
		min-width: 0 !important;
	}

	.ds-variation-row .ds-qty .quantity-wrapper input {
		width: 44px !important;
		min-width: 0 !important;
	}
}

/* --- Kopfbereich: Warenkorb rechts vom Menue ------------------------- */

.ds-header-cart {
	list-style: none;
	margin: 0 0 0 4px;
	padding: 0;
	display: flex;
	align-items: center;
}

.inside-header .main-navigation { order: 2; }
.inside-header .menu-toggle     { order: 3; }
.inside-header .ds-header-cart  { order: 4; }

/* Der Zaehler erscheint nur, wenn wirklich etwas im Korb liegt. */
.cart-count[hidden] { display: none !important; }

/* --- Startseite: Kachel-Beschriftungen bleiben einzeilig -------------- */

.wp-block-cover .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.wp-block-cover .wp-block-button__link {
		font-size: 13px;
		padding: 8px 12px;
	}
}

/* --- Warenkorbseite --------------------------------------------------- */

/* WooCommerce haengt an die Gesamtsumme zusaetzlich den Waehrungscode an.
   Weil unser Waehrungssymbol bereits "CHF" ist, stand dort "45.20 CHF CHF".
   Die Schriftgroesse 0 blendet den angehaengten Textknoten aus, der Betrag
   im span bekommt seine Groesse zurueck. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 0;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value > span {
	font-size: 20px;
}

/* Die Artikeltabelle ist eine echte <table> und wuchs auf schmalen Displays
   ueber ihren Container hinaus (361px statt 307px), wodurch der Zeilenpreis
   rechts abgeschnitten wurde. Als Block statt Tabelle gerendert haelt sie sich
   an die Breite; das Zeilenlayout macht WooCommerce ohnehin per Grid. */
@media (max-width: 700px) {
	.wc-block-cart-items {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.wc-block-cart-items > tbody {
		display: block;
		width: 100%;
	}

	.wc-block-cart-items__row,
	.wc-block-cart-item__image,
	.wc-block-cart-item__product,
	.wc-block-cart-item__total {
		min-width: 0;
	}

	/* Bild links, Produktangaben rechts, Zeilenpreis darunter. Ohne eigenes
	   Raster quetscht WooCommerce die Preisspalte auf 24px zusammen, dann
	   ueberlappen Titel und Preis. */
	/* WooCommerce laedt seine Blocks-CSS nach dem Theme, deshalb hier
	   ausnahmsweise !important - sonst greift das Raster nicht. */
	.wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr) !important;
		column-gap: 12px;
	}

	.wc-block-cart-item__image {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
	}

	.wc-block-cart-item__product {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	.wc-block-cart-item__total {
		grid-column: 2 !important;
		grid-row: 2 !important;
		text-align: right !important;
		margin-top: 4px;
	}
}

/* --- Kopfbereich faehrt beim Hochscrollen wieder ein ------------------
 * Gilt auf allen Breiten. Frueher stand das in @media (max-width: 900px),
 * deshalb war der Kopfbereich auf dem Desktop nach dem Scrollen weg.
 * -------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.28s ease;
	will-change: transform;
}

.site-header.is-hidden {
	transform: translateY(-115%);
}

/* Die Adminleiste steht fest oben und wuerde den Kopfbereich sonst verdecken. */
@media (min-width: 601px) {
	body.admin-bar .site-header { top: 46px; }
}

@media (min-width: 783px) {
	body.admin-bar .site-header { top: 32px; }
}

/* Sprungmarken duerfen nicht unter dem Kopfbereich landen.
   --ds-header-h setzt theme.js auf die gemessene Hoehe. */
html {
	scroll-padding-top: calc(var(--ds-header-h, 0px) + 12px);
}

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}

/* --- Kopfbereich: Menue und Warenkorb als Gruppe rechts ---------------- */

.inside-header .main-navigation {
	margin-left: auto;
}

/* --- Warenkorb: Darstellung der Position ------------------------------- */

/* Die Produktbeschreibung gehoert nicht in den Warenkorb, dort zaehlt nur,
   welche Variante gewaehlt wurde. */
.wc-block-components-product-metadata__description {
	display: none !important;
}

/* Farbpunkt vor dem Variantenwert, gesetzt von doseschop_cart_color_dots(). */
.ds-cart-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
	margin-right: 6px;
	vertical-align: -1px;
}


/* --- Kategorieansicht: Farbauswahl-Punkte -----------------------------
 * Die feste Regenbogenreihe ist raus. Die Punkte kommen jetzt aus den
 * echten Farben des Produkts, siehe doseschop-shopansicht.php
 * (Plugin "Doseschop Erweiterungen"). Die Gestaltung steht dort im gleichen Modul.
 * -------------------------------------------------------------------- */

/* --- Produktseite: Farbkacheln ------------------------------------------
 * Farbkacheln stehen seit 13.10.2026 immer unter Bild und Produkttext
 * (functions.php, doseschop_farbkacheln_unter_bild), ueber die ganze Breite.
 * -------------------------------------------------------------------- */
.single-product div.product > .ds-produkt-farben { grid-column: 1 / -1; min-width: 0; }
.single-product div.product > .ds-produkt-farben .ds-variation-list { margin-top: 0; }

/* --- Produktseite: eigene Bildergalerie (.ds-galerie) ------------------
 * Ersatz fuer die Plugin-Galerie, Code in inc/galerie.php und
 * assets/js/galerie.js. Seit 23.10.2026 fuer alle (vorher Reno Product Gallery).
 * Farben nur ueber Tokens: auf farbeschop.ch setzt der Farbeschop-Look
 * --ds-red usw. auf Ultramarin, darum braucht es dort keine eigene Regel.
 * -------------------------------------------------------------------- */

.single-product div.product > .ds-galerie {
	min-width: 0;
	margin: 0 0 var(--ds-block-gap);
}

.ds-galerie-buehne {
	position: relative;
}

/* Wischen ohne Bibliothek: eine waagrechte Spur, jedes Bild rastet ein. */
.ds-galerie-spur {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	background: var(--ds-white);
}
.ds-galerie-spur::-webkit-scrollbar { display: none; }
.ds-galerie-spur:focus-visible { outline-offset: -3px; }

/* Bildflaeche immer quadratisch wie im Produktraster; Hochformat wird
   eingepasst statt beschnitten, damit auf Detailaufnahmen nichts fehlt. */
.ds-galerie-bild {
	flex: 0 0 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.ds-galerie-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.ds-galerie-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
}

/* Zoom 2x beim Darueberfahren (nur Maus, siehe galerie.js). */
.ds-galerie-link.is-zoom img { transform: scale(2); }

/* Pfeile: weisses Feld mit schwarzem Rahmen wie die Knoepfe des Shops. */
.ds-galerie-pfeil {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	background: var(--ds-white);
	color: var(--ds-black);
	border: 3px solid var(--ds-black);
	border-radius: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ds-galerie-pfeil.is-zurueck { left: 10px; }
.ds-galerie-pfeil.is-vor { right: 10px; }

.ds-galerie-buehne:hover .ds-galerie-pfeil,
.ds-galerie-pfeil:focus-visible { opacity: 1; }

.ds-galerie-pfeil:hover {
	background: var(--ds-red);
	color: var(--ds-white);
}

.ds-galerie-zaehler {
	position: absolute;
	right: 10px;
	bottom: 10px;
	margin: 0;
	padding: 4px 8px;
	background: var(--ds-black);
	color: var(--ds-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	pointer-events: none;
}

/* Vorschaubilder: fuenf pro Reihe, mehr laufen seitlich weiter. */
.ds-galerie-daumen {
	position: relative;
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.ds-galerie-daumen::-webkit-scrollbar { display: none; }

.ds-galerie-daumen-knopf {
	flex: 0 0 calc((100% - 4 * 8px) / 5);
	aspect-ratio: 1 / 1;
	padding: 0;
	background: var(--ds-white);
	border: 3px solid transparent;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
}

/* Angeschnitten wie im Raster; Farbeschop setzt --ds-galerie-daumen-fit auf
   contain, weil seine Produktbilder freigestellt sind. */
.ds-galerie-daumen-knopf img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ds-galerie-daumen-fit, cover);
}

.ds-galerie-daumen-knopf:hover { border-color: var(--ds-black); }
.ds-galerie-daumen-knopf[aria-current="true"] { border-color: var(--ds-red); }
.ds-galerie-daumen-knopf:focus-visible { outline-offset: 0; }

/* Hinweis fuer Admins, solange die Galerie nur Vorschau ist. */
.ds-galerie-vorschau {
	margin: 10px 0 0;
	font-size: 14px;
}

/* Touch: Pfeile immer sichtbar ab Tablet, auf dem Handy wischen. */
@media (hover: none) {
	.ds-galerie-pfeil { opacity: 1; }
	.ds-galerie-link { cursor: pointer; }
}
@media (max-width: 768px) {
	.ds-galerie-pfeil { display: none; }
}

/* --- Grossansicht --- */
.ds-galerie-box {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.94);
	color: var(--ds-white);
	overscroll-behavior: contain;
}
.ds-galerie-box::backdrop { background: rgba(0, 0, 0, 0.94); }

html.ds-galerie-offen { overflow: hidden; }

.ds-galerie-box-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 64px 16px;
	box-sizing: border-box;
}

.ds-galerie-box-bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: var(--ds-white);
	touch-action: pan-y pinch-zoom;
}

.ds-galerie-box-knopf {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--ds-black);
	color: var(--ds-white);
	border: 3px solid var(--ds-white);
	border-radius: 0;
	cursor: pointer;
}
.ds-galerie-box-knopf:hover {
	background: var(--ds-red);
	border-color: var(--ds-red);
}
.ds-galerie-box-knopf:focus-visible { outline-color: var(--ds-white); }

.ds-galerie-box-knopf.is-zu { top: 12px; right: 12px; }
.ds-galerie-box-knopf.is-zurueck,
.ds-galerie-box-knopf.is-vor { top: 50%; margin-top: -24px; display: none; }
.ds-galerie-box-knopf.is-zurueck { left: 12px; }
.ds-galerie-box-knopf.is-vor { right: 12px; }
.ds-galerie-box.hat-mehrere .ds-galerie-box-knopf.is-zurueck,
.ds-galerie-box.hat-mehrere .ds-galerie-box-knopf.is-vor { display: inline-flex; }

.ds-galerie-box-zaehler {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}

@media (max-width: 768px) {
	.ds-galerie-box-knopf.is-zurueck,
	.ds-galerie-box-knopf.is-vor { top: auto; bottom: 8px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-galerie-bild img,
	.ds-galerie-pfeil { transition: none; }
}
/* --- Farbtabellen-Seiten und -Uebersicht: assets/css/farbkarte.css, wird nur
 * auf diesen Seiten geladen (functions.php, doseschop_assets). --- */
/* --- Produktseite: Verweis auf die komplette Farbtabelle der Reihe --- */
.ds-farbkarte-verweis { margin: 12px 0 20px; font-size: 16px; }
.ds-farbkarte-verweis a { color: var(--ds-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ds-farbkarte-verweis a:hover,
.ds-farbkarte-verweis a:focus-visible { color: var(--ds-red); }
/* =====================================================================
   STARTSEITE-REVIEW 21.09.2026
   ===================================================================== */

/* --- Warenkorb: Tippflaeche 44x44 statt 22x22. Das Symbol bleibt gleich
       gross, nur die klickbare Flaeche waechst. --- */
.ds-header-cart .menu-item-cart a.cart-contents {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

/* --- Suche im Kopfbereich --- */
.ds-header-search { position: static; }

.ds-header-search > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ds-white);
	cursor: pointer;
}
.ds-header-search > summary::-webkit-details-marker { display: none; }
.ds-header-search > summary:hover { opacity: 0.8; }
.ds-header-search[open] > summary { outline: 3px solid var(--ds-white); outline-offset: -3px; }
.ds-header-search > summary:focus-visible { outline: 3px solid var(--ds-white); outline-offset: 2px; }

.ds-header-search-form {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: flex;
	gap: 10px;
	padding: 12px var(--ds-side-space, 18px);
	background: var(--ds-header-bg);
	border-top: 3px solid var(--ds-white);
	z-index: 101;
}
.ds-header-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 18px;
	min-height: 48px;
}
.ds-header-search-form button {
	background: var(--ds-white) !important;
	color: var(--ds-black) !important;
	border: 3px solid var(--ds-white);
	border-radius: 0;
	font-family: var(--ds-font);
	font-weight: 700;
	font-size: 18px;
	text-transform: lowercase;
	padding: 0 18px;
	min-height: 48px;
	cursor: pointer;
}
.ds-header-search-form button:hover { background: var(--ds-black) !important; color: var(--ds-white) !important; }

.inside-header .ds-header-search { order: 3; }
.inside-header .ds-header-cart   { order: 4; }

/* Handy: Logo links, dann Suche und Warenkorb, das Menue ganz aussen. */
@media (max-width: 768px) {
	.inside-header { gap: 4px; }
	.inside-header .site-branding-container { margin-right: auto; }
	.inside-header .ds-header-search { order: 2; }
	.inside-header .ds-header-cart   { order: 3; margin: 0; }
	.inside-header .menu-toggle      { order: 4; margin-left: 6px; }
}

/* --- Schwarzer Rahmen bleibt, auf kleinen Handys nur schlanker.
       Vorher ~41 px pro Seite, jetzt ~26 px. --- */
@media (max-width: 480px) {
	:root {
		--ds-side-space: 12px;
		--ds-content-border: 3px;
		--ds-content-padding: 20px 11px;
	}
}

/* --- Startseiten-Produkte: 4 Spalten Desktop (seit 21.10.2026, vorher 3 – zu gross), 2 Spalten Handy.
       Die hoehere Spezifitaet schlaegt das Flex-Layout von WooCommerce,
       das die Produkte auf dem Handy einspaltig stellte. --- */
.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.25rem 1.5rem;
}
.home .wc-block-product-template .wp-block-post-title { font-size: 16px; }
.home .wp-block-woocommerce-product-collection ul.wc-block-product-template > li {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}
@media (max-width: 768px) {
	.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 0.875rem;
	}
	.home .wc-block-product-template .wp-block-post-title { font-size: 17px !important; }
	.home .wc-block-product-template .wc-block-components-product-button__button {
		padding: 10px 6px;
		width: 100%;
		white-space: nowrap;
		font-size: 15px !important;
	}
}

/* --- Preise lesbar: 17 px statt 13 px. WooCommerce setzt per Klasse
       has-small-font-size, deshalb !important. --- */
.wc-block-product-template .wc-block-components-product-price,
.wc-block-product-template .wc-block-components-product-price * {
	font-size: 17px !important;
}
.wc-block-product-template .wc-block-components-product-price { font-weight: 700; }

/* --- Kategorie-Kacheln auf dem Handy 4:5 statt 146x320 --- */
@media (max-width: 600px) {
	.home .entry-content .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 4 / 5;
	}
	.home .entry-content .wp-block-columns > .wp-block-column {
		flex: 0 0 50% !important;
		min-width: 0;
	}
}

/* --- Nach-oben-Knopf schwarz: Rot bleibt Kaufknopf und Zaehler --- */
.back-to-top {
	background: var(--ds-black);
	color: var(--ds-white) !important;
	border-color: var(--ds-white);
}
.back-to-top:hover {
	background: var(--ds-white);
	color: var(--ds-black) !important;
	border-color: var(--ds-black);
}

/* --- 21.09.2026 Nachtrag ---------------------------------------------- */

/* Kopfbalken: Schrift schrumpft nicht mehr linear mit der Fensterbreite.
   Vorher 2vw bzw. 1.3vw unter 1024 px, also 13 px bei 1000 px Breite,
   obwohl Platz da war. clamp() haelt eine Untergrenze. */
:root {
	--ds-site-title-size: clamp(22px, 2.6vw, 44px);
	--ds-nav-size: clamp(16px, 1.7vw, 24px);
	--ds-nav-item-padding: clamp(6px, 0.9vw, 14px);
}
@media (max-width: 1024px) {
	:root { --ds-nav-size: clamp(16px, 1.7vw, 24px); }
}
@media (max-width: 768px) {
	:root { --ds-site-title-size: clamp(18px, 5vw, 28px); --ds-nav-size: 16px; }
}

/* Abstand zwischen Kategorie-Kacheln und "Beliebte Graffiti-Produkte" */
.home .wp-block-woocommerce-product-collection {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* --- Knopfschrift (21.09.2026) ----------------------------------------
   Titel und Text bleiben Poppins. Alle Knoepfe bekommen Sofia Sans Semi
   Condensed: rund wie Poppins, aber schmaler, damit "in den warenkorb"
   auch in 2 Handyspalten in voller Groesse einzeilig bleibt. */
:root { --ds-btn-font: "Sofia Sans Semi Condensed", "Arial Narrow", var(--ds-font); }

.button, button, input[type="submit"], input[type="button"],
.wp-block-button__link, .wp-element-button,
.wc-block-components-button, .wc-block-components-product-button__button,
.single_add_to_cart_button, .checkout-button, .added_to_cart,
.ds-sticky-cartbtn, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.ds-header-search-form button {
	font-family: var(--ds-btn-font) !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
}

/* Menue-Knopf und Mengensteller bleiben Poppins: sie sind Bedienelemente,
   keine Handlungsaufforderungen. */
.menu-toggle, .ds-qty-btn, .quantity button { font-family: var(--ds-font) !important; }

/* Handy: die Notloesung mit 15 px faellt weg, volle Groesse. */
@media (max-width: 768px) {
	.home .wc-block-product-template .wc-block-components-product-button__button {
		font-size: 17px !important;
		padding: 10px 8px;
	}
}

/* --- Produktraster ausrichten (21.09.2026) -----------------------------
   Titel sind 1 bis 3 Zeilen lang. Vorher hing der Preis direkt am Titel
   und sprang von Karte zu Karte (744 / 771 px), und die Knoepfe waren je
   nach Text 185 oder 212 px breit. Jetzt: Titel oben buendig, Preis und
   Knopf unten buendig, alle Knoepfe gleich breit. */
.woocommerce ul.products li.product,
.wc-block-product-template > li {
	display: flex !important;
	flex-direction: column;
}
.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-components-product-price {
	margin-top: auto !important;
}
.woocommerce ul.products li.product .button,
.wc-block-product-template .wc-block-components-product-button__button {
	width: 100%;
	max-width: 260px;
	text-align: center;
	justify-content: center;
}
.wc-block-product-template .wp-block-woocommerce-product-button { margin-top: 0; }

/* Titel und Preis liegen im klassischen Raster innerhalb des Produktlinks.
   Der Link muss deshalb selbst die Hoehe fuellen, sonst greift margin-top:auto nicht. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}


/* Konto: Bestellungen-Tabelle passt in die Spalte, ohne Seitenscroll */
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; max-width: 100%; }
.woocommerce-account table.woocommerce-orders-table { width: 100%; max-width: 100%; table-layout: fixed; }
.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td { padding: 8px; font-size: 15px; overflow-wrap: anywhere; hyphens: auto; }
.woocommerce-account table.woocommerce-orders-table .button { display: inline-block; max-width: 100%; padding: 6px 10px; font-size: 14px; margin: 0; white-space: normal; }
@media (max-width: 768px) {
.woocommerce-account table.woocommerce-orders-table thead { display: none; }
.woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.woocommerce-orders-table tbody, .woocommerce-account table.woocommerce-orders-table tr, .woocommerce-account table.woocommerce-orders-table td { display: block; width: 100%; }
.woocommerce-account table.woocommerce-orders-table tr { border-bottom: 3px solid var(--ds-black); }
.woocommerce-account table.woocommerce-orders-table td { border: 0; text-align: left !important; }
.woocommerce-account table.woocommerce-orders-table td::before { content: attr(data-title) ': '; font-weight: 700; }
}


/* =====================================================================
   Warenkorb-Knopf: schwebend ohne Band, mit Farbpunkten (23.09.2026)
   Das hellgraue Band ueber die ganze Breite lag ueber Seitenrahmen und
   Farbzeilen. Jetzt schwebt nur noch der Knopf.
   ===================================================================== */
.ds-sticky-cartbar {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	padding: 0 16px calc(16px + env(safe-area-inset-bottom));
	pointer-events: none;
}

.ds-sticky-cartbar .ds-sticky-cartbtn {
	box-sizing: border-box;
	pointer-events: auto;
	flex-wrap: wrap;
	gap: 6px 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Nach-oben-Knopf ueber die Leiste, solange sie sichtbar ist. */
body:has(.ds-sticky-cartbar.is-visible) .back-to-top {
	bottom: calc(100px + env(safe-area-inset-bottom));
}

.single-product form.cart.ds-variation-table-form .single_add_to_cart_button {
	box-sizing: border-box;
	flex-wrap: wrap;
	gap: 6px 0;
}

.ds-cart-colors {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 12px;
}

.ds-cart-colors:empty { display: none; }

.ds-cart-colors .ds-cart-color {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--ds-black);
	border-radius: 50%;
	box-sizing: border-box;
}

.ds-cart-colors .ds-cart-color.is-unknown {
	background: repeating-linear-gradient(45deg, var(--ds-white) 0 3px, var(--ds-grey-light) 3px 6px);
}

.ds-cart-colors .ds-cart-more {
	margin-left: 2px;
	font-size: 15px;
	font-weight: 900;
	text-transform: none;
}

@media (max-width: 560px) {
	.ds-sticky-cartbar { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }

	.ds-sticky-cartbar .ds-sticky-cartbtn {
		min-height: 56px;
		padding: 12px 14px;
		font-size: 18px;
	}

	.ds-sticky-cartbar .ds-sticky-count { margin-left: 8px; font-size: 13px; }
	.ds-cart-colors { margin-left: 8px; gap: 3px; }
	.ds-cart-colors .ds-cart-color { width: 16px; height: 16px; }

	body:has(.ds-sticky-cartbar.is-visible) .back-to-top {
		bottom: calc(84px + env(safe-area-inset-bottom));
	}
}

/* --- Glanzfarben: Gold, Silber/Chrom und Kupfer als Verlauf (12.10.2026) ---
 * Welche Variante glaenzt, bestimmt das Plugin am Farbnamen
 * (doseschop_variation_metallic, nur Doseschop-Produkte). Inline steht weiter
 * der flache Farbwert als Rueckfall; der Verlauf liegt darueber, darum
 * !important gegen das Inline-"background". Die Verlaeufe sind hell genug
 * fuer schwarze Schrift. */
:root {
	--ds-metal-gold: linear-gradient(125deg, #e9cf7d 0%, #c9a23f 28%, #fff3c4 50%, #b8902f 72%, #e2c46c 100%);
	--ds-metal-silber: linear-gradient(125deg, #d9dce0 0%, #a9adb3 28%, #ffffff 50%, #9ea2a8 72%, #d3d6da 100%);
	--ds-metal-kupfer: linear-gradient(125deg, #e8ab84 0%, #b87333 28%, #f7d0b6 50%, #b9713d 72%, #dd9a76 100%);
}

.ds-variation-row.is-metallic-gold,
.ds-loop-farbe.is-metallic-gold,
.ds-cart-color.is-metallic-gold,
.ds-cart-dot.is-metallic-gold { background-image: var(--ds-metal-gold) !important; }

.ds-variation-row.is-metallic-silber,
.ds-loop-farbe.is-metallic-silber,
.ds-cart-color.is-metallic-silber,
.ds-cart-dot.is-metallic-silber { background-image: var(--ds-metal-silber) !important; }

.ds-variation-row.is-metallic-kupfer,
.ds-loop-farbe.is-metallic-kupfer,
.ds-cart-color.is-metallic-kupfer,
.ds-cart-dot.is-metallic-kupfer { background-image: var(--ds-metal-kupfer) !important; }

/* Kupfer weicht je Hersteller stark ab (Loop Copper rotbraun #aa6255, Montana
   Copperchrome #b87333). Darum Verlauf aus dem eigenen Farbwert, wie ihn auch
   Montana und Loop zeigen (13.10.2026). Der feste Verlauf oben bleibt Rueckfall. */
@supports (background: color-mix(in srgb, red 50%, white)) {
	.ds-variation-row.is-metallic-kupfer { background-image: linear-gradient(125deg, color-mix(in srgb, var(--ds-row-bg) 70%, #fff) 0%, var(--ds-row-bg) 28%, color-mix(in srgb, var(--ds-row-bg) 35%, #fff) 50%, color-mix(in srgb, var(--ds-row-bg) 88%, #000) 72%, color-mix(in srgb, var(--ds-row-bg) 75%, #fff) 100%) !important; }
	/* Farbpunkte in Shopliste und Warenkorb: Farbwert steht in --ds-swatch. */
	.ds-loop-farbe.is-metallic-kupfer,
	.ds-cart-color.is-metallic-kupfer,
	.ds-cart-dot.is-metallic-kupfer { background-image: linear-gradient(125deg, color-mix(in srgb, var(--ds-swatch) 70%, #fff) 0%, var(--ds-swatch) 28%, color-mix(in srgb, var(--ds-swatch) 35%, #fff) 50%, color-mix(in srgb, var(--ds-swatch) 88%, #000) 72%, color-mix(in srgb, var(--ds-swatch) 75%, #fff) 100%) !important; }
}

/* ------------------------------------------------------------------
 * Farbtabelle: Farbaufstrich als Hintergrund (14.10.2026)
 * Bild aus den Talens-Farbkarten (Variante: _ds_color_img). Der Farbwert
 * bleibt Rueckfall und farbt das Schild hinter Name und Menge, damit die
 * Schrift auf jeder Textur lesbar bleibt (is-dark gilt weiter).
 * ------------------------------------------------------------------ */
.ds-variation-row.has-texture {
	background-color: var(--ds-row-bg, var(--ds-grey-light));
	background-image: var(--ds-row-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ds-variation-row.has-texture .ds-variation-info {
	flex: 0 1 auto;
	margin-right: auto;
	padding: 5px 9px;
	border-radius: 7px;
	background: var(--ds-row-bg, var(--ds-white));
}
.ds-variation-row.has-texture .ds-qty .quantity-wrapper,
.ds-variation-row.has-texture .ds-variation-oos {
	background: var(--ds-row-bg, var(--ds-white));
}
.ds-variation-row.has-texture .ds-variation-oos {
	padding: 5px 9px;
	border-radius: 7px;
}
@supports (background: color-mix(in srgb, red 50%, white)) {
	.ds-variation-row.has-texture .ds-variation-info,
	.ds-variation-row.has-texture .ds-qty .quantity-wrapper {
		background: color-mix(in srgb, var(--ds-row-bg, #fff) 86%, transparent);
	}
}

/* =====================================================================
   Meldungen, Knopf-Bewegung, Warenkorb-Toast (16.10.2026)
   Eine Sprache fuer alle Rueckmeldungen: Erfolg schwarz mit rotem Haken,
   Hinweis weiss mit schwarzem i, Fehler weiss mit rotem Ausrufezeichen.
   Rahmen eckig wie Seitenrahmen und Formulare, Knoepfe 10px rund.
   Bewegung nur ueber transform und opacity.
   ===================================================================== */
:root {
	--ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ds-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ds-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='2' fill='%23fff'/%3E%3Cpath d='M12 11v7.5' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
	--ds-icon-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5v8' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18.2' r='2' fill='%23fff'/%3E%3C/svg%3E");
}

/* --- Meldungen --- */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	display: flow-root;
	box-sizing: border-box;
	margin: 0 0 var(--ds-block-gap) !important;
	padding: 18px 20px 18px 70px !important;
	background: var(--ds-white) !important;
	color: var(--ds-black) !important;
	border: 3px solid var(--ds-black) !important;
	border-radius: 0 !important;
	font-family: var(--ds-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	list-style: none;
	animation: ds-meldung-rein 0.45s var(--ds-ease-out) both;
}

/* WooCommerce setzt den Fokus auf die Meldung (Screenreader). Der Rahmen
   dazu lag als zweiter, roter Rand aussen herum. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus { outline: none; }

.woocommerce-message {
	background: var(--ds-black) !important;
	color: var(--ds-white) !important;
	border-color: var(--ds-black) !important;
}

.woocommerce-message strong,
.woocommerce-info strong,
.woocommerce-error strong { font-weight: 700; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 20px;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0;
	border-radius: 50%;
	background: var(--ds-red) var(--ds-icon-check) center / 22px no-repeat;
	color: transparent;
	animation: ds-marke-rein 0.55s var(--ds-ease-spring) 0.12s both;
}
.woocommerce-info::before { background-color: var(--ds-black); background-image: var(--ds-icon-info); }
.woocommerce-error::before { background-image: var(--ds-icon-bang); top: 15px; margin-top: 0; }

/* Meldung mit Knopf: Text links, Knopf rechts, auf dem Handy darunter.
   Eigene Meldungen packen den Text in .ds-meldung-text, sonst wuerde jedes
   Textstueck (fett, normal) zu einem eigenen Flex-Element mit Luecke. */
.woocommerce-message:has(> .button),
.woocommerce-info:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
.ds-meldung-text { flex: 1 1 260px; }

/* Fehlerliste: mehrere Zeilen untereinander. */
.woocommerce-error { border-color: var(--ds-red) !important; }
.woocommerce-error li { margin: 0; }
.woocommerce-error li + li { margin-top: 6px; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto !important;
	padding: 9px 18px !important;
	background: var(--ds-red) !important;
	color: var(--ds-white) !important;
	border: 3px solid var(--ds-red) !important;
	border-radius: var(--ds-btn-radius) !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.woocommerce-message .button::after,
.woocommerce-info .button::after {
	content: "\2192";
	display: inline-block;
	transition: transform 0.3s var(--ds-ease-out);
}
.woocommerce-message .button:hover {
	background: var(--ds-white) !important;
	color: var(--ds-black) !important;
	border-color: var(--ds-white) !important;
}
.woocommerce-info .button,
.woocommerce-error .button { border-color: var(--ds-black) !important; }
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { background: var(--ds-black) !important; }
.woocommerce-message .button:hover::after,
.woocommerce-info .button:hover::after { transform: translateX(4px); }

@media (max-width: 600px) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 15px 15px 15px 58px !important;
		font-size: 16px;
		gap: 12px;
	}
	.woocommerce-message::before,
	.woocommerce-info::before,
	.woocommerce-error::before {
		left: 15px;
		top: 14px;
		width: 30px;
		height: 30px;
		margin: 0;
		background-size: 19px;
	}
	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		flex: 1 1 100%;
		justify-content: center;
		margin: 0 !important;
	}
}

@keyframes ds-meldung-rein {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}
@keyframes ds-marke-rein {
	from { opacity: 0; transform: scale(0.3) rotate(-25deg); }
	to { opacity: 1; transform: none; }
}

/* --- Warenkorb-Toast in Produktlisten ---
   WooCommerce haengte nach dem Hinzufuegen "Warenkorb anzeigen" unter den
   Knopf. Die Karte wurde hoeher und die ganze Zeile sprang. Der Link ist
   weg, die Rueckmeldung schwebt unten (assets/js/theme.js, Abschnitt
   doseschop-warenkorb-toast). */
.woocommerce ul.products li.product .added_to_cart,
.wc-block-product-template .added_to_cart { display: none !important; }

.ds-toast {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 1000;
	width: min(600px, calc(100vw - 32px));
	margin: 0 !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translate(-50%, calc(100% + 40px));
	animation: none;
	transition: transform 0.5s var(--ds-ease-spring), opacity 0.2s ease;
}
.ds-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ds-toast.is-leaving {
	opacity: 0;
	transform: translate(-50%, 24px);
	transition: transform 0.3s var(--ds-ease-out), opacity 0.25s ease;
}
.ds-toast:not(.is-visible)::before { animation: none; opacity: 0; }

/* --- Knoepfe: Bewegung beim Druecken ---
   Farben gleiten statt zu springen, beim Druecken gibt der Knopf kurz nach
   und federt beim Loslassen zurueck. */
.button,
.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
input[type="button"],
.ds-button,
.ds-sticky-cartbtn,
.wc-block-components-button,
.quantity-wrapper button,
.menu-toggle {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		opacity 0.2s ease,
		transform 0.4s var(--ds-ease-spring);
}

.button:active,
.wp-element-button:active,
.wp-block-button__link:active,
button[type="submit"]:active,
input[type="submit"]:active,
input[type="button"]:active,
.ds-button:active,
.ds-sticky-cartbtn:active,
.wc-block-components-button:active,
.menu-toggle:active {
	transform: scale(0.96);
	transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.08s;
}
.quantity-wrapper button:active {
	transform: scale(0.86);
	transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.08s;
}
.button:disabled:active,
button[disabled]:active { transform: none; }

/* Laden und Erfolg beim Knopf in der Produktliste (statt WooCommerce-Icons).
   Der Zustand sitzt als Abzeichen auf der Ecke des Knopfs und veraendert
   weder Breite noch Hoehe: kein Umbruch auf dem Handy, keine springende Zeile. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce a.button.add_to_cart_button { position: relative; overflow: visible; }

.woocommerce ul.products li.product .button.loading,
.woocommerce a.button.loading {
	opacity: 1;
	padding-right: 22px;
	pointer-events: none;
}
.woocommerce ul.products li.product .button.loading::after,
.woocommerce a.button.loading::after,
.woocommerce ul.products li.product .button.added::after,
.woocommerce a.button.added::after {
	content: "" !important;
	position: absolute !important;
	top: -11px !important;
	right: -11px !important;
	left: auto !important;
	width: 26px;
	height: 26px;
	margin: 0;
	box-sizing: border-box;
	border-radius: 50%;
	font-family: inherit !important;
}
.woocommerce ul.products li.product .button.loading::after,
.woocommerce a.button.loading::after {
	background: var(--ds-white);
	border: 3px solid var(--ds-black);
	border-right-color: transparent;
	animation: ds-drehen 0.7s linear infinite !important;
}
.woocommerce ul.products li.product .button.added,
.woocommerce a.button.added {
	background: var(--ds-red);
	border-color: var(--ds-black);
}
.woocommerce ul.products li.product .button.added::after,
.woocommerce a.button.added::after {
	background: var(--ds-black) var(--ds-icon-check) center / 16px no-repeat;
	border: 2px solid var(--ds-white);
	animation: ds-marke-rein 0.5s var(--ds-ease-spring) both !important;
}

@keyframes ds-drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-message::before,
	.woocommerce-info::before,
	.woocommerce-error::before,
	.woocommerce ul.products li.product .button.added::after,
	.woocommerce a.button.added::after { animation: none !important; }
	.ds-toast,
	.ds-toast.is-leaving { transition: opacity 0.2s ease; }
	.button:active,
	.wp-element-button:active,
	.wp-block-button__link:active,
	button[type="submit"]:active,
	input[type="submit"]:active,
	.ds-sticky-cartbtn:active,
	.quantity-wrapper button:active { transform: none; }
}

/* =====================================================================
   Produktseite: Mengensteller und Warenkorb-Knopf (16.10.2026)
   Vorher: Zahlenfeld mit Browser-Pfeilen, niedriger und eckig neben dem
   hohen, runden Knopf. Jetzt derselbe -/+ Steller wie in der Farbtabelle,
   gleich hoch und gleich gerahmt wie der Knopf. Die Knoepfe kommen aus
   functions.php (doseschop_mengen_knoepfe_*), damit beim Laden nichts springt.
   ===================================================================== */
.single-product form.cart:not(.ds-variation-table-form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.single-product form.cart .quantity:has(.ds-mengen-knopf) {
	display: inline-flex;
	align-items: stretch;
	height: 64px;
	margin: 0;
	border: 3px solid var(--ds-black);
	border-radius: var(--ds-btn-radius);
	overflow: hidden;
	background: var(--ds-white);
	box-sizing: border-box;
}
.single-product form.cart .quantity:has(input[type="hidden"]) .ds-mengen-knopf { display: none; }
.single-product form.cart .quantity .ds-mengen-knopf {
	appearance: none;
	width: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ds-black) !important;
	font-family: var(--ds-font) !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.4s var(--ds-ease-spring);
}
.single-product form.cart .quantity .ds-mengen-knopf:hover { background: var(--ds-grey-light); }
.single-product form.cart .quantity .ds-mengen-knopf:disabled { opacity: 0.25; cursor: default; background: transparent; }
.single-product form.cart .quantity .ds-mengen-knopf:active:not(:disabled) { transform: scale(0.86); transition-duration: 0.2s, 0.2s, 0.08s; }
.single-product form.cart .quantity:has(.ds-mengen-knopf) input.qty {
	width: 48px;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ds-black);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.single-product form.cart .quantity:has(.ds-mengen-knopf) input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity:has(.ds-mengen-knopf) input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart .quantity:has(.ds-mengen-knopf) input.qty:focus { background: transparent; color: var(--ds-black); outline: none; }
.single-product form.cart .quantity:has(.ds-mengen-knopf):focus-within { box-shadow: 0 0 0 3px var(--ds-white), 0 0 0 6px var(--ds-black); }

/* Knopf in der Zeile neben dem Mengensteller. Die Farbtabelle hat keine
 * solche Zeile (Knopf steht in .ds-variation-footer, Spalte), darum dort nicht. */
.single-product form.cart:not(.ds-variation-table-form) .single_add_to_cart_button {
	flex: 1 1 240px;
	max-width: 420px;
	height: 64px;
	margin: 0;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 22px;
	line-height: 1;
}

/* Handy: Steller und Knopf je volle Breite, Plus und Minus an den Rand. */
@media (max-width: 480px) {
	.single-product form.cart .quantity:has(.ds-mengen-knopf) { flex: 1 1 100%; justify-content: space-between; }
	.single-product form.cart .quantity .ds-mengen-knopf { width: 64px; }
	.single-product form.cart:not(.ds-variation-table-form) .single_add_to_cart_button { flex-basis: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.single-product form.cart .quantity .ds-mengen-knopf:active:not(:disabled) { transform: none; }
}

/* =====================================================================
   Groessenauswahl auf der Produktseite (16.10.2026)
   Kleider liefen durch dieselbe breite Farbtabelle wie Dosen: Artikelnummer,
   Zeile in Kleiderfarbe (meist schwarz), viel Flaeche fuer ein "M". Jetzt
   kompakte Kacheln im Querformat: Groesse links, Mengensteller rechts. Gewaehlte Groessen
   kippen auf Schwarz, ausverkaufte sind durchgestrichen wie in der Shopliste.
   Markup: Plugin, Vorlage doseschop-variation-table.php (Klasse is-art-groesse).
   ===================================================================== */
/* Zwei Spalten, damit nichts allein haengt (4 Groessen = 2 x 2). Drei Groessen
   passen in eine Reihe. */
.ds-variation-table-form.is-art-groesse .ds-variation-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 460px;
	gap: 10px;
}
.ds-variation-table-form.is-art-groesse .ds-variation-list:has(> .ds-variation-item:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 660px;
}
.is-art-groesse .ds-variation-item { border-radius: var(--ds-btn-radius); }
.is-art-groesse .ds-variation-row {
	flex-direction: row;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 10px 10px 16px;
	border-radius: 0;
	background: var(--ds-white);
	color: var(--ds-black);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.is-art-groesse .ds-variation-row .ds-variation-info { flex: 0 1 auto; align-items: flex-start; text-align: left; }
.is-art-groesse .ds-variation-row .ds-variation-name {
	font-family: var(--ds-btn-font);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
}
.is-art-groesse .ds-variation-row .ds-variation-price { font-size: 14px; }
.is-art-groesse .ds-variation-row .quantity-wrapper { border: 2px solid currentColor; }
.is-art-groesse .ds-variation-row .ds-qty .quantity-wrapper button { width: 38px !important; height: 36px; font-size: 20px; }
.is-art-groesse .ds-variation-row .ds-qty .quantity-wrapper input { width: 36px !important; height: 36px; font-size: 16px; }

/* Gewaehlt: die Kachel kippt auf Schwarz. */
.is-art-groesse .ds-variation-row.is-gewaehlt { background: var(--ds-black); color: var(--ds-white); }
.is-art-groesse .ds-variation-row.is-gewaehlt .quantity-wrapper button:hover { background: rgba(255, 255, 255, 0.16); }

/* Ausverkauft: blass und rot durchgestrichen, wie die Kaestchen im Shop. */
.is-art-groesse .ds-variation-item:has(.is-disabled) { border-color: rgba(0, 0, 0, 0.25); }
.is-art-groesse .ds-variation-row.is-disabled {
	background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(254, 0, 0, 0.6) calc(50% - 1px), rgba(254, 0, 0, 0.6) calc(50% + 1px), transparent calc(50% + 1px)) var(--ds-white);
}
.is-art-groesse .ds-variation-row.is-disabled .ds-variation-oos { background: var(--ds-white); border: 1px solid rgba(0, 0, 0, 0.2); }

@media (max-width: 480px) {
	.ds-variation-table-form.is-art-groesse .ds-variation-list,
	.ds-variation-table-form.is-art-groesse .ds-variation-list:has(> .ds-variation-item:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
	.is-art-groesse .ds-variation-row .ds-qty .quantity-wrapper button { width: 42px !important; height: 42px; }
	.is-art-groesse .ds-variation-row .ds-qty .quantity-wrapper input { width: 38px !important; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.is-art-groesse .ds-variation-row { transition: none; }
}

/* --- Produktkarten ruhig (21.10.2026, Julian: 1- und 2-zeilige Namen
   stoerten). Wie in grossen Shops: jeder Name hat immer genau 2 Zeilen
   Platz, laengere werden mit "..." gekuerzt; jedes Bild steht in einem
   quadratischen Feld. Damit liegen Bild, Name, Preis und Knopf in jeder
   Reihe auf derselben Hoehe. Gilt fuer Startseite und Kategorieseiten. */
.wc-block-product-template .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	line-height: 1.3 !important;
	min-height: 2.6em;
	max-height: 2.6em;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: content-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.wc-block-product-template .wc-block-components-product-image a,
.wc-block-product-template .wc-block-components-product-image > img,
.woocommerce ul.products li.product .ds-loop-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.wc-block-product-template .wc-block-components-product-image img,
.woocommerce ul.products li.product .ds-loop-media img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
}
/* Preis direkt unter dem Namen, Knopf darunter; die feste Namenshoehe
   sorgt fuer die gleiche Linie. */
.wc-block-product-template .wc-block-components-product-price {
	margin-top: .35rem !important;
}

/* Abstand Produkte -> Textabschnitt auf den Startseiten (21.10.2026, Julian:
   der Text klebte an den Knoepfen). Gilt fuer doseschop.ch und farbeschop.ch. */
.home .ds-starttext,
.home .ds-fs-starttext {
	margin-top: clamp(4rem, 8vw, 6.5rem) !important;
	padding-top: 0;
}