/*
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.8.9
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);

	/* Buttons */
	--ds-btn-bg: var(--ds-red);
	--ds-btn-bg-hover: 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;
	--ds-body-size: 22px;
	--ds-body-weight: 300;
	--ds-body-line-height: 1.5;

	--ds-site-title-size: 3vw;
	--ds-nav-size: 2vw;
	--ds-btn-size: 19px;
	--ds-footer-size: 18px;

	--ds-h1-size: 60px;
	--ds-h2-size: 32px;
	--ds-h3-size: 25px;
	--ds-h4-size: 20px;
	--ds-h5-size: 20px;
	--ds-h6-size: 20px;
	--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;
}

.site-header.is-sticky {
	position: sticky;
	top: var(--ds-side-space);
}

.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 */
.pagination,
.woocommerce-pagination {
	margin-top: calc(var(--ds-block-gap) * 2);
}

.pagination .nav-links,
.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
}

.woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; }

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 8px 14px;
	border: 3px solid var(--ds-black);
	background: var(--ds-white);
	color: var(--ds-black);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
	background: var(--ds-red) !important;
	color: var(--ds-white) !important;
}

/* =====================================================================
   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
   ===================================================================== */
.site-footer {
	background: var(--ds-footer-bg);
	color: var(--ds-footer-text);
	font-size: var(--ds-footer-size);
	font-weight: 300;
	margin-top: var(--ds-side-space);
	padding: 3vw 2vw;
}

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

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-widgets .widget-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: lowercase;
	margin-bottom: 12px;
	color: var(--ds-footer-text);
}

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

.footer-widgets li { margin-bottom: 8px; }

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 2rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.footer-nav a {
	font-size: 16px;
	text-transform: lowercase;
	font-weight: 700;
	text-decoration: none;
}

.footer-nav a:hover { text-decoration: underline; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.5rem;
}

.footer-tagline {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	text-transform: lowercase;
}

.footer-social {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

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

/* Rechtszeile: bewusst zurueckhaltend – klein, duenn, grau. */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.5rem;
	margin-top: 1.75rem;
}

.footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal-nav a,
.footer-copyright {
	font-size: 13px;
	font-weight: 300;
	color: #8a8a8a;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.footer-legal-nav a:hover {
	color: var(--ds-white);
	text-decoration: underline;
}

.footer-copyright { margin: 0; }

@media (max-width: 600px) {
	.footer-bottom,
	.footer-legal { justify-content: flex-start; }
	.footer-social-link { width: 56px; height: 56px; }
	.footer-social-link svg { width: 30px; height: 30px; }
}

/* =====================================================================
   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
   ===================================================================== */
/* WooCommerce positioniert in seinen Meldungen ein Icon absolut und setzt
   eigene Rahmen. Beides wird hier vollstaendig ersetzt: eine Zeile, Text
   links, Button rechts, kein ueberlappendes Icon. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--ds-white) !important;
	color: var(--ds-black) !important;
	border: 3px solid var(--ds-black) !important;
	border-left: 10px solid var(--ds-red) !important;
	border-radius: 0 !important;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
	list-style: none;
	margin: 0 0 var(--ds-block-gap);
	padding: 1.1rem 1.3rem !important;
}

.woocommerce-error { border-left-color: var(--ds-black) !important; }

/* Das Standard-Icon von WooCommerce abschalten – es lag ueber dem Text. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none !important;
	display: none !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin: 0 !important;
	flex: 0 0 auto;
	font-size: 17px;
	padding: 10px 20px;
}

.woocommerce-error li { margin: 0; }

/* --- 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 ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
}

.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; }

.wc-block-product-template .wc-block-components-product-button .wc-block-components-button {
	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);
	font-weight: 700;
	text-transform: lowercase;
	text-decoration: none;
	width: auto;
}

.wc-block-product-template .wc-block-components-product-button .wc-block-components-button:hover {
	background: var(--ds-red);
	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; }

.ds-variation-sku { font-size: 12px; font-weight: 600; opacity: 0.72; letter-spacing: 0.01em; line-height: 1.1; }

.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; }

.ds-variation-row.is-disabled { opacity: 0.55; }

.ds-variation-oos {
	font-size: 13px;
	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;
}

.ds-variation-table-form .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: 20px 40px;
	width: 100%;
	max-width: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.ds-variation-table-form .single_add_to_cart_button:hover { background: var(--ds-red-dark); }

.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: 0;
	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. */
	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;
	width: 58px;
	min-width: 48px;
	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, 38%) minmax(0, 62%) !important;
	}

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

.ds-variation-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-auto-rows: 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: 16px;
	overflow-wrap: anywhere;
}

/* 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 ------------------ */

@media (max-width: 900px) {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		transition: transform 0.28s ease;
		will-change: transform;
	}

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

/* --- 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 (Variante B2) ---------------
 * Punktreihe ueber dem Titel bei Produkten mit Farbauswahl.
 * Nur in Produktlisten (Shop, Kategorie, Suche) - auf der Produktseite
 * greift body.single-product und blendet sie aus.
 * Groesse und Rahmen wie .ds-cart-dot, damit es zum Warenkorb passt.
 * -------------------------------------------------------------------- */

body:not(.single-product) ul.products li.product.product-type-variable h2.woocommerce-loop-product__title::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 0 10px 1px;
	border-radius: 50%;
	background: #E8232A;
	box-shadow:
		16px 0 0 0 #F58220,
		32px 0 0 0 #FFD400,
		48px 0 0 0 #3DAE49,
		64px 0 0 0 #0074C8,
		80px 0 0 0 #6B2E8E,
		96px 0 0 0 #EC5FA0,
		0 0 0 1px rgba(0, 0, 0, 0.25),
		16px 0 0 1px rgba(0, 0, 0, 0.25),
		32px 0 0 1px rgba(0, 0, 0, 0.25),
		48px 0 0 1px rgba(0, 0, 0, 0.25),
		64px 0 0 1px rgba(0, 0, 0, 0.25),
		80px 0 0 1px rgba(0, 0, 0, 0.25),
		96px 0 0 1px rgba(0, 0, 0, 0.25);
}