/*
 * emo2026, WooCommerce surfaces (shop archive, single product, cart,
 * checkout).
 *
 * Apple-commerce pattern: white canvas, generous whitespace, large
 * product imagery, restrained typography, monochrome black pill CTAs,
 * small grey muted secondary text. The CSS layers WC's required class
 * vocabulary (.products, .summary, .cart_totals, .form-row…) with our
 * own .shop-* classes, so WC's JS can still latch onto its own classes
 * while the visual layer is fully ours.
 *
 * Tokens come from tokens.css. Page-local custom properties at the top
 * capture geometry that's shop-only, card radius, hero-column ratio,
 * summary-card sticky offset.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 */

:root {
	/* ============================================================
	 * Page-local geometry. Shop-only, none belong in tokens.css.
	 * ============================================================ */

	/* Card chrome. The card carries the warm ground and the media plate is
	 * white, not the other way round: the photography is shot on white, so
	 * a white plate meets the photo seamlessly while still reading as a
	 * distinct surface against the card. */
	--shop-card-radius:        var(--radius-card);
	--shop-card-image-radius:  var(--radius-card);
	--shop-card-bg:            var(--color-bg-elevated);
	--shop-card-image-bg:      var(--color-bg-base);
	--shop-card-gap:           var(--space-7);       /* 40px */
	--shop-card-lift:          3px;

	/* Hero/section padding for shop surfaces. The chrome's sticky nav
	   already eats roughly 48px above the content; pair this top pad
	   with that for an Apple-marketing-page feel. */
	--shop-pad-top:    var(--space-9);    /* 64px */
	--shop-pad-bottom: var(--space-12);   /* 128px */
	--shop-gutter:     var(--layout-gutter);

	/* Single-product hero, two-column ratio. */
	--shop-hero-gap:           var(--space-10);
	--shop-hero-media-radius:  var(--radius-surface);

	/* Cart/checkout summary card */
	--shop-summary-radius:     var(--radius-card);
	--shop-summary-pad:        var(--space-7);   /* 40px */
	--shop-summary-bg:         var(--color-bg-elevated);
	--shop-summary-sticky-top: 88px;             /* clears the sticky nav */

	/* Form input chrome (used everywhere from coupon to checkout fields) */
	--shop-input-radius:       var(--radius-md);
	--shop-input-pad-y:        var(--space-3);
	--shop-input-pad-x:        var(--space-4);
	--shop-input-border:       var(--color-border-hairline);
	--shop-input-bg:           var(--color-bg-base);

	/* Pill button, the monochrome primary CTA. */
	--shop-pill-pad-y:         var(--space-3);
	--shop-pill-pad-x:         var(--space-7);
}

/* ============================================================
 * Shared shop shell. Every WC surface mounts a wrapper <div>
 * with class .woocommerce inside <main>, that's where the
 * cart/checkout shortcodes drop their content, and that's also
 * where WC's wrapper-start.php opens for shop archive / single
 * product. Bind the page-band padding and the type defaults to
 * that inner <div> so they don't leak onto the body-class
 * .woocommerce-page that WC also stamps (which would push the
 * site header down).
 * ============================================================ */

.site-main .woocommerce {
	background-color: var(--color-bg-base);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	padding-top: var(--shop-pad-top);
	padding-bottom: var(--shop-pad-bottom);
}

/* Width-cap every WC region to the same gutter the rest of the theme
   uses. WC ships with no max-width on its outer divs. */
.shop-loop,
.shop-product,
.shop-cart,
.shop-checkout,
.woocommerce-notices-wrapper,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review {
	box-sizing: border-box;
}

.shop-loop,
.shop-product,
.shop-cart,
.shop-checkout {
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding-left: var(--shop-gutter);
	padding-right: var(--shop-gutter);
}

/* When .shop-loop is nested (related products on single-product), the
   parent .shop-product already provides the 22px gutter, drop the
   inner one so we don't end up with 44px. */
.shop-product .shop-loop {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* WC's sale flash badge, subdue and reposition. */
.woocommerce span.onsale {
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-inverse);
	background-color: var(--color-text-primary);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-chip);
	min-height: 0;
	min-width: 0;
	line-height: var(--line-height-tight);
}

/* WC breadcrumb: styled once, in the "Breadcrumb" section further down
   (the quiet uppercase trail). Keep no competing base rule here. */

/* WC notice box (cart updated, coupon applied, error). Quiet card. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	max-width: var(--layout-content-max-width);
	margin: var(--space-6) auto;
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	list-style: none;
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--color-link);
	text-decoration: none;
	margin-left: var(--space-3);
}

/* ============================================================
 * Shop button, the monochrome black pill we use everywhere
 * we'd otherwise see WC's blue ".button". WC's loop and forms
 * stamp the .button class on every CTA, we restyle them all.
 * ============================================================ */

.shop-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--shop-pill-pad-y) var(--shop-pill-pad-x);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-cta-ink);
	background-color: var(--color-cta);
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* The .alt variants must be spelled out for every element type, not just
   button. WooCommerce styles a.button.alt:hover at (0,4,1); our
   a.button:hover was only (0,3,1), so the checkout CTA sat in our own fill
   until the pointer touched it and then flipped to WooCommerce purple.
   Matching .alt on the anchor and the input closes that gap. */
.shop-button:hover,
.shop-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
	background-color: var(--color-cta-hover);
	color: var(--color-cta-ink);
}

.shop-button:focus-visible,
.woocommerce .button:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

/* Ghost variant, used for "Update cart", "Apply coupon", and similar
   secondary actions that share the row with the primary pill. */
.shop-button--ghost,
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce button.button[name="apply_coupon"] {
	background-color: transparent;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-hairline);
}

.shop-button--ghost:hover,
.shop-button--ghost:focus-visible,
.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce button.button[name="apply_coupon"]:hover {
	background-color: var(--color-bg-elevated);
	color: var(--color-text-primary);
}

/* Press on pointer-down (DESIGN-SPEC.md section 1). The duration sits
   inside :active so the press snaps while release keeps the hover ease;
   the ghost variant follows with its own grey step. */
.shop-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce a.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce #respond input#submit.alt:active,
.woocommerce-page a.button.alt:active,
.woocommerce button.button.alt:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

.shop-button--ghost:active,
.woocommerce a.button.wc-backward:active,
.woocommerce button.button[name="update_cart"]:active,
.woocommerce button.button[name="apply_coupon"]:active {
	background-color: var(--grey-100);
	color: var(--color-text-primary);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

/* Block-level primary CTA (used for "Zur Kasse" and "Bestellung abschicken"). */
.shop-button--block,
.shop-cart__summary .checkout-button,
#place_order {
	display: flex;
	width: 100%;
}

/* ============================================================
 * Shop form fields, used by coupon input, checkout fields,
 * shipping calculator. Apple-style: hairline border, subtle
 * focus ring, generous padding, no default placeholder ghost.
 * ============================================================ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.shop-cart__coupon-input,
.shop-checkout input[type="text"],
.shop-checkout input[type="email"],
.shop-checkout input[type="tel"],
.shop-checkout input[type="number"],
.shop-checkout input[type="password"],
.shop-checkout textarea,
.shop-checkout select {
	width: 100%;
	box-sizing: border-box;
	padding: var(--shop-input-pad-y) var(--shop-input-pad-x);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	background-color: var(--shop-input-bg);
	border: 1px solid var(--shop-input-border);
	border-radius: var(--shop-input-radius);
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
		box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.shop-cart__coupon-input:focus,
.shop-checkout input:focus,
.shop-checkout textarea:focus,
.shop-checkout select:focus {
	outline: 0;
	border-color: var(--color-link);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 18%, transparent);
}

.woocommerce form .form-row label,
.shop-checkout label {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-transform: none;
	letter-spacing: var(--letter-spacing-base);
	font-weight: 400;
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
}

.woocommerce form .form-row {
	margin-bottom: var(--space-5);
	padding: 0;
}

/* Required asterisk, quiet, not loud red. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: var(--color-text-secondary);
	text-decoration: none;
	border: 0;
}

/* Validation state (error). */
.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--color-danger);
}

/* ============================================================
 * Shop archive, header strip (sort + count) above the grid.
 * WC fires:
 *   .woocommerce-result-count  , "Ergebnisse 1 to 12 von …"
 *   .woocommerce-ordering      , sort dropdown
 * Both render before the loop start; we restyle them as a single
 * clean header strip (flexbox).
 * ============================================================ */

.woocommerce .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	/* WC's woocommerce-layout.css applies float:left to .woocommerce-result-count
	   with selector specificity .woocommerce-page .woocommerce-result-count.
	   Match that specificity AND kill the float so the shop archive doesn't
	   render a phantom left column. */
	float: none;
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: 0 var(--shop-gutter);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

/* Page header (h1 "Shop" + breadcrumb), width-cap and align so it
   doesn't drift into a side column when WC's defaults try to float
   neighbouring elements. */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
	float: none;
	clear: both;
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: 0 var(--shop-gutter);
	box-sizing: border-box;
}

.woocommerce .woocommerce-products-header__title {
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	/* Was inheriting line-height normal, the only display heading without
	   the tight display leading its siblings declare. */
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	margin: var(--space-9) 0 var(--space-5);
}

.woocommerce .woocommerce-ordering {
	max-width: var(--layout-content-max-width);
	margin: 0 auto var(--space-7);
	padding: 0 var(--shop-gutter);
	display: flex;
	justify-content: flex-end;
}

.woocommerce .woocommerce-ordering select {
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* The result count + ordering normally render on separate lines;
   pull them onto the same row so the strip reads as one band. */
.woocommerce .woocommerce-result-count + .woocommerce-ordering {
	margin-top: calc(-1 * var(--space-5));
}

/* ============================================================
 * Shop archive, product card grid.
 * ============================================================ */

.shop-loop {
	margin-top: var(--space-7);
}

.shop-loop__grid,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shop-card-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Override WC's float-based grid completely, WC ships ul.products
   as a 3-up float layout with negative margins. WC's ul.products.columns-N
   selector has the same specificity as ours WITH an extra class, so it
   wins regardless of cascade order. Body-prefix our rule and match every
   columns modifier explicitly so we beat them all. */
/* Same compound-selector fix as above: body.woocommerce, not body .woocommerce.
   Mostly belt-and-braces since dequeueing woocommerce-layout.css already
   removed the width:30.75% / float:left rules, but keeping these makes the
   theme robust if a plugin or later WC release re-introduces those styles. */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
.shop-loop li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
	padding: 0;
}

body.woocommerce ul.products li.product::before,
body.woocommerce ul.products li.product::after,
.shop-loop li.product::before,
.shop-loop li.product::after {
	content: none !important;
	display: none !important;
}

/* WC's ul.products::before / ::after are clearfix pseudo-elements
   (display: table) for the legacy float layout. When ul.products is a
   grid container they become grid items and steal the first + last cells,
   producing an empty top-left card.
   Bug-fix history: my first attempt used `body .woocommerce ul.products::before`
   which required `.woocommerce` to be an ancestor *element*, but on the
   shop archive `.woocommerce` is only a body class, never a wrapper, so
   the selector never matched. The correct compound selector is `body.woocommerce`. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
.shop-loop ul.products::before,
.shop-loop ul.products::after,
ul.products.shop-loop__grid::before,
ul.products.shop-loop__grid::after {
	content: none !important;
	display: none !important;
}

/* Card */
.shop-card {
	display: flex;
}

.shop-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* A real surface. This was transparent, so the card's radius, its
	 * hover shadow and its focus ring all described a shape that was not
	 * painted: the only thing visible was the media plate, and on the
	 * white page the card had no edge at all. */
	background-color: var(--shop-card-bg);
	/* No overflow: hidden here. The media plate clips itself, and the card
	   clipping would cut the body text against its own 38px corner. */
	color: var(--color-text-primary);
	text-decoration: none;
	border-radius: var(--shop-card-radius);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard),
		box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.shop-card__link:hover,
.shop-card__link:focus-visible {
	transform: translateY(calc(-1 * var(--shop-card-lift)));
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	color: var(--color-text-primary);
}

.shop-card__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

.shop-card__link:active {
	transform: scale(0.985);
	transition-duration: var(--motion-duration-press);
}

.shop-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* TOP corners only. The plate is flush with the card's top and sides,
	 * so up there it is concentric at the card's own radius; its bottom
	 * edge sits mid-card, where there is no parent curve to follow, and
	 * rounding it there turned the plate into a floating pill above the
	 * title. */
	border-radius: var(--shop-card-image-radius) var(--shop-card-image-radius) 0 0;
	background-color: var(--shop-card-image-bg);
}

.shop-card__media img,
.shop-card__media .shop-card__image,
.shop-card .woocommerce-LoopProduct-link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;     /* product photography is product-on-white, contain, not cover */
	padding: var(--space-5); /* breathing room around the product */
	box-sizing: border-box;
	/* Hover micro-feedback caps at 250ms (DESIGN-SPEC.md section 2). */
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.shop-card__link:hover .shop-card__media img,
.shop-card__link:focus-visible .shop-card__media img {
	transform: scale(1.03);
}

.shop-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	/* Clearing the corner is the floor, not the target. A 38px card needs
	   r * (1 - 1/sqrt2), about 11px, for text to miss the arc, but at 16px
	   it still read as crowded against a curve that big: the eye reads the
	   gap at the corner's widest sweep, not at the tangent. 28px gives the
	   body the same breathing room the card's own radius implies. */
	padding: var(--space-6);
}

.shop-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.shop-card__price,
.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 400;
	color: var(--color-text-secondary);
}

.shop-card__price del,
.woocommerce ul.products li.product .price del {
	color: var(--color-text-muted);
	margin-right: var(--space-2);
	opacity: 0.7;
}

.shop-card__price ins,
.woocommerce ul.products li.product .price ins {
	background: transparent;
	font-weight: 500;
	color: var(--color-text-primary);
	text-decoration: none;
}

.shop-card__more {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-link);
}

.shop-card__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-card__link:hover .shop-card__chevron,
.shop-card__link:focus-visible .shop-card__chevron {
	transform: translateX(4px);
}

/* Pagination, match the editorial pagination treatment. */
.woocommerce nav.woocommerce-pagination {
	max-width: var(--layout-content-max-width);
	margin: var(--space-10) auto 0;
	padding: 0 var(--shop-gutter);
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: var(--space-2);
	border: 0;
	margin: 0;
	padding: 0;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	text-decoration: none;
	background-color: transparent;
	border-radius: var(--radius-md);
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
	background-color: var(--color-overlay-hover);
}

.woocommerce nav.woocommerce-pagination ul li a:active {
	background-color: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--color-text-primary);
	color: var(--color-text-inverse);
}

/* ============================================================
 * Single product, two-column hero (gallery / summary), then
 * tabs and related products full width below.
 * ============================================================ */

.shop-product__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--shop-hero-gap);
	align-items: start;
	margin-top: var(--space-7);
}

.shop-product__media {
	position: relative;
	border-radius: var(--shop-hero-media-radius);
	overflow: hidden;
	background-color: var(--color-bg-elevated);
	/* The gallery's one visible frame. It sits on the card, NOT on the
	   slides: everything inside is white on white, so a frame around the
	   slide alone ended above the thumbnail strip and left it floating
	   detached on the page. Framing the card wraps image and thumbnails
	   as one gallery. A border here is also safe territory: Flexslider
	   neither measures this box nor clips against it, so no slide-math
	   drift and no device-pixel snapping can eat the bottom line. */
	border: 1px solid var(--color-border-hairline);
}

/* WC's gallery div is .woocommerce-product-gallery, let it fill. */
.shop-product__media .woocommerce-product-gallery {
	width: 100% !important;   /* WC injects an inline width via JS, neutralize */
	/* !important: woocommerce.css gives div.images a 2em bottom margin
	   with higher specificity (0,2,2 vs our 0,2,0), leaving a dead band
	   inside the media card. */
	margin: 0 !important;
	float: none;
}

.shop-product__media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	/* The catalog photography is square with generous built-in white
	   margins; uncapped it grows with the media column and a wide
	   desktop window turns the gallery into a near full-height wall.
	   Cap the stage and letterbox with contain: the bars land on the
	   same white the photos are shot on, so nothing visibly changes
	   except the size. The 3D slide's stage carries the same cap so
	   Flexslider's smoothHeight never jumps between slides. */
	max-height: 560px;
	object-fit: contain;
	background-color: transparent;
}

/* (The slides' hairline frame is a zero-layout overlay ring, see the
   white-stage rules further down, so Flexslider's content-height math
   needs no compensation here.) */

.shop-product__media .flex-control-thumbs {
	display: flex;
	gap: var(--space-2);
	/* !important: the same woocommerce.css specificity war as overflow-x
	   below zeroes this padding silently. It is the thumbnails' own
	   breathing room; the clearance from the card's rounded corners is
	   the transparent border below, not this. */
	padding: var(--space-4) !important;
	margin: 0;
	background-color: var(--color-bg-base);
	/* Divider between the image stage and the thumbnail tray; with both
	   on white this line is what makes the tray read as part of the
	   gallery card instead of a second floating box. It spans the full
	   card because it sits on the BORDER box, which the transparent
	   side borders below do not shorten. */
	border-top: 1px solid var(--color-border-hairline);
	/* Transparent borders, not padding, because a scrollbar is laid out
	   at the edge of the PADDING box and padding cannot move it. The
	   strip is a scroll container flush with the card's bottom, so its
	   16px scrollbar ran along the very edge, where the 62px corner
	   sweeps 32px inward: the bar drove straight into both curves. These
	   borders pull the whole padding box, scrollbar included, inside the
	   safe rectangle, while background-clip stays border-box so the tray
	   still paints white edge to edge. Coupled to --radius-surface: at
	   radius r a box at inset i clears the arc while i is above
	   r * (1 - 1/sqrt2), about 18px at 62, and --space-5 is 22px. */
	border-right: var(--space-5) solid transparent;
	border-bottom: var(--space-5) solid transparent;
	border-left: var(--space-5) solid transparent;
	/* !important: woocommerce.css hides the strip's overflow with higher
	   specificity (0,3,3 vs our 0,2,0), which made it unscrollable the
	   moment the tiles stopped fitting, no scrollbar, thumbs clipped
	   out of reach. */
	overflow-x: auto !important;
	/* Don't chain into page scroll when the strip hits either end; the
	   handoff reads as the gallery "wrapping around". */
	overscroll-behavior-x: contain;
	list-style: none;
}

.shop-product__media .flex-control-thumbs li {
	flex: 0 0 80px;
	width: 80px;
	margin: 0;
	padding: 0;
}

.shop-product__media .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.6;
	border-radius: var(--radius-block);
	cursor: pointer;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-product__media .flex-control-thumbs img:hover,
.shop-product__media .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* Sale badge inside the hero, corner-pin. The selector needs the element
 * to reach (0,2,1): woocommerce.css pins span.onsale at top/left -0.5em
 * at that specificity, so at (0,2,0) our offsets never applied and the
 * badge started OUTSIDE the card, where the 62px corner swallowed it.
 * 22px, not 16px: a box clears this arc only above 62 * (1 - 1/sqrt2),
 * about 18px, the same constant the thumbnail strip uses. The shared
 * top-left corner is concentric with the card, the free corners keep the
 * chip band. */
.shop-product__media span.onsale {
	position: absolute;
	top: var(--space-5);
	left: var(--space-5);
	border-radius: calc(var(--shop-hero-media-radius) - var(--space-5))
		var(--radius-chip) var(--radius-chip) var(--radius-chip);
	z-index: 2;
}

.shop-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	float: none;
	width: 100% !important;   /* WC's stylesheet sets 48%, override */
	margin: 0;
}

.shop-product__summary .product_title,
.woocommerce div.product .product_title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	/* No mid-word hyphen breaks in the product headline -
	   fit-titles.js scales long names down instead. */
	hyphens: manual;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.shop-product__summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-28);
	font-weight: 400;
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
}

.shop-product__summary .price del {
	color: var(--color-text-muted);
	margin-right: var(--space-3);
	font-size: var(--font-size-21);
}

.shop-product__summary .price ins {
	background: transparent;
	color: var(--color-text-primary);
	text-decoration: none;
	font-weight: 500;
}

/* Stock line ("Vorrätig"). WooCommerce prints it as a bare <p class="stock">
 * that the theme never claimed, so it fell back to woocommerce-general.css:
 * its own font stack and mustard colour. Put it on the theme vocabulary and
 * let availability carry the meaning through colour semantics. */
.shop-product__summary .stock,
.woocommerce div.product p.stock {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-secondary);
}

.shop-product__summary .stock.in-stock,
.woocommerce div.product p.stock.in-stock {
	color: var(--color-success);   /* same green the shop notices use for success */
}

.shop-product__summary .stock.out-of-stock,
.woocommerce div.product p.stock.out-of-stock {
	color: var(--color-danger);
}

.shop-product__summary .woocommerce-product-details__short-description {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.shop-product__summary .woocommerce-product-details__short-description p {
	margin: 0 0 var(--space-3);
}

.shop-product__summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Variations form, clean grid, no WC stripes. */
.shop-product__summary table.variations,
.woocommerce div.product form.cart .variations {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.shop-product__summary table.variations th,
.shop-product__summary table.variations td,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: var(--space-2) 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.shop-product__summary table.variations th.label,
.woocommerce div.product form.cart .variations th.label {
	width: 30%;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.shop-product__summary table.variations select,
.woocommerce div.product form.cart .variations select {
	width: 100%;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
}

.shop-product__summary .reset_variations {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--font-size-14);
	color: var(--color-link);
	text-decoration: none;
}

/* Quantity + add-to-cart row */
.shop-product__summary form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: var(--space-3) 0 0;
}

.shop-product__summary .quantity,
.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.shop-product__summary .quantity label,
.woocommerce div.product form.cart .quantity .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

.shop-product__summary .quantity input.qty,
.woocommerce .quantity input.qty {
	width: 5em;
	padding: var(--space-3) var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	text-align: center;
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
}

.shop-product__summary form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	align-self: flex-start;
	min-width: 220px;
}

/* Single-product meta row (SKU, category, tags). */
.shop-product__summary .product_meta {
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	line-height: var(--line-height-loose);
}

.shop-product__summary .product_meta .sku_wrapper,
.shop-product__summary .product_meta .posted_in,
.shop-product__summary .product_meta .tagged_as {
	display: block;
}

.shop-product__summary .product_meta a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.shop-product__summary .product_meta a:hover,
.shop-product__summary .product_meta a:focus-visible {
	color: var(--color-text-primary);
	text-decoration: underline;
}

/* ============================================================
 * Single product, region below the hero. Tabs + related, both
 * width-capped and stacked with generous vertical rhythm.
 * ============================================================ */

.shop-product__after {
	margin-top: var(--space-12);
}

/* Tabs */
.shop-tabs {
	margin-top: var(--space-9);
	/* Opened from #tab-… (assets/js/product-tabs.js), the strip scrolls
	 * into view; this keeps it clear of the sticky nav. */
	scroll-margin-top: calc(var(--nav-height, 48px) + var(--space-4));
}

/* Pointer to the certifications page, one quiet line above the strip. */
.shop-tabs__certs-note {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.shop-tabs__certs-note a {
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-tabs__certs-note a:hover,
.shop-tabs__certs-note a:focus-visible {
	border-bottom-color: var(--color-link);
}

.shop-tabs__list,
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	list-style: none;
	margin: 0;
	padding: 0;
	/* The strip's hairline as an INSET SHADOW, not a border, and the clip
	 * reset that makes it work. woocommerce.css sets overflow: hidden on
	 * this list at equal specificity, and our rule never reset it, so the
	 * padding box clipped 1px off the bottom of every tab: the active
	 * tab's 2px marker painted as 1px and could not reach the hairline it
	 * is meant to cover, which read as a thin line doubled on a grey one.
	 * A parent's inset shadow paints UNDER its children, so the active
	 * marker now covers it cleanly. */
	overflow: visible;
	box-shadow: inset 0 -1px 0 var(--color-border-hairline);
	background: transparent;
}

.shop-tabs__list::before,
.shop-tabs__list::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
	border: 0;
}

.shop-tabs__tab,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* woocommerce.css paints the ACTIVE tab white at a higher specificity
 * than the rule above, so the tab carried a white plate on the white
 * page: invisible today, and a hard white rectangle the moment the strip
 * sits on any other ground. The active state is the marker, not a fill. */
.shop-tabs__tab.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
}

.shop-tabs__link,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-3) 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	color: var(--color-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	/* 0, not -1px: the strip's rule is an inset shadow on the padding box
	 * now, so the marker no longer has to hang outside the box to reach
	 * it, and hanging out is what the clip above used to cut off. */
	margin-bottom: 0;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-tabs__link:hover,
.shop-tabs__link:focus-visible,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--color-text-primary);
}

/* Underline tabs have no padding box, so the press dims instead of
   painting a background. */
.shop-tabs__link:active,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.shop-tabs__tab.active .shop-tabs__link,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text-primary);
	border-bottom-color: var(--color-text-primary);
}

.shop-tabs__panel,
.woocommerce div.product .woocommerce-tabs .panel {
	margin: var(--space-7) 0 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.shop-tabs__panel h2,
.woocommerce div.product .woocommerce-tabs .panel h2 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.shop-tabs__panel p {
	margin: 0 0 var(--space-3);
}

.shop-tabs__panel table.shop_attributes,
.woocommerce table.shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}

.shop-tabs__panel table.shop_attributes th,
.shop-tabs__panel table.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-bottom: 1px solid var(--color-border-hairline);
	background: transparent;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
}

.shop-tabs__panel table.shop_attributes th,
.woocommerce table.shop_attributes th {
	width: 30%;
	color: var(--color-text-secondary);
	font-weight: 600;
}

.shop-tabs__panel table.shop_attributes td,
.woocommerce table.shop_attributes td {
	color: var(--color-text-primary);
}

/* Related products. Sits inside .shop-product__after which is itself a
   child of the already-width-capped .shop-product wrapper, so no extra
   side padding here, only top spacing + the hairline divider. */
.related.products,
.up-sells.upsells.products {
	margin-top: var(--space-12);
	padding-top: var(--space-9);
	border-top: 1px solid var(--color-border-hairline);
}

.related.products > h2,
.up-sells.upsells.products > h2 {
	margin: 0 0 var(--space-7);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

/* The related products use the same content-product.php override, so
   the .shop-card / .products grid styles already apply. Nothing else
   to do here, just lay them out. */

/* ============================================================
 * Cart, two-column layout, line-item list, summary card.
 * ============================================================ */

.shop-cart {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--shop-hero-gap);
	align-items: start;
}

.shop-cart__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.shop-cart__heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.shop-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border-hairline);
}

.shop-cart__item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--space-5);
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-border-hairline);
	align-items: center;
}

.shop-cart__thumb {
	display: block;
	border-radius: var(--radius-block);
	overflow: hidden;
	background-color: var(--color-bg-elevated);
	aspect-ratio: 1 / 1;
}

.shop-cart__thumb a,
.shop-cart__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-2);
	box-sizing: border-box;
}

.shop-cart__thumb a {
	padding: 0;   /* the inner img already has the padding */
}

/* Aligned three-column row (Apple-cart): name/price/remove stacked left,
   quantity vertically centered, subtotal top-right. The previous 2×3 grid
   let qty and "Entfernen" drift to unrelated heights. */
.shop-cart__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas:
		"name   qty subtotal"
		"price  qty subtotal"
		"remove qty subtotal";
	gap: var(--space-1) var(--space-6);
	align-items: start;
}

.shop-cart__name {
	grid-area: name;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

.shop-cart__name a {
	color: var(--color-text-primary);
	text-decoration: none;
}

.shop-cart__name a:hover,
.shop-cart__name a:focus-visible {
	color: var(--color-link);
}

.shop-cart__price {
	grid-area: price;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

.shop-cart__qty {
	grid-area: qty;
	align-self: center;
}

.shop-cart__qty input.qty {
	width: 4em;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	text-align: center;
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
}

.shop-cart__subtotal {
	grid-area: subtotal;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-1);
}

.shop-cart__subtotal-label {
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.shop-cart__subtotal-value {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 500;
	color: var(--color-text-primary);
}

.shop-cart__remove {
	grid-area: remove;
	justify-self: start;
	margin-top: var(--space-2);
}

/* Shipping-calculator toggle in the totals card: quiet link, and no
   plugin-injected icon glyphs (Germanized appends one that renders as a
   broken box without its icon font). */
.woocommerce-shipping-calculator .shipping-calculator-button {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-shipping-calculator .shipping-calculator-button:hover,
.woocommerce-shipping-calculator .shipping-calculator-button:focus-visible {
	color: var(--color-link);
}

.shipping-calculator-button::before,
.shipping-calculator-button::after,
.shipping-calculator-button .woocommerce-shipping-calculator-icon {
	content: none !important;
	display: none !important;
}

/* The calculator form sits inside the totals table cell, which is
 * right-aligned for the amounts. The form inherited that alignment, so
 * its labels, selects and the update button all hugged the right edge
 * and read as broken. It is a form, not a figure: left-aligned, full
 * width, ordinary field rhythm. */
.woocommerce-shipping-calculator .shipping-calculator-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
	text-align: left;
}

.woocommerce-shipping-calculator .shipping-calculator-form .form-row {
	margin: 0;
	padding: 0;
	width: 100%;
}

.woocommerce-shipping-calculator .shipping-calculator-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.woocommerce-shipping-calculator .shipping-calculator-form input,
.woocommerce-shipping-calculator .shipping-calculator-form select,
.woocommerce-shipping-calculator .shipping-calculator-form .select2-container {
	box-sizing: border-box;
	width: 100%;
	text-align: left;
}

.woocommerce-shipping-calculator .shipping-calculator-form button {
	/* Full width, like the cart's own primary action, instead of a lone
	 * pill floating at the right edge. */
	width: 100%;
	justify-content: center;
}

.shop-cart__remove .remove,
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	height: auto;
	width: auto;
	padding: 0;
	background: transparent !important;
	color: var(--color-text-muted) !important;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 400;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-cart__remove .remove:hover,
.shop-cart__remove .remove:focus-visible,
.woocommerce a.remove:hover {
	color: var(--color-text-primary) !important;
	text-decoration: underline;
}

/* Bare text link, the press dims (the background is pinned transparent
   with !important above). */
.shop-cart__remove .remove:active,
.woocommerce a.remove:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

/* Cart actions row, coupon + update. */
.shop-cart__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-top: var(--space-3);
}

.shop-cart__coupon {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: 420px;
}

.shop-cart__coupon-label {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.shop-cart__coupon-row {
	display: flex;
	gap: var(--space-2);
	align-items: stretch;
}

.shop-cart__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
}

.shop-cart__update {
	align-self: flex-start;
}

/* Cart summary card (right column / cart-collaterals) */
.shop-cart__summary,
.woocommerce-cart .cart-collaterals {
	width: 100%;
	max-width: none;
	float: none;
	padding: var(--shop-summary-pad);
	background-color: var(--shop-summary-bg);
	border-radius: var(--shop-summary-radius);
	position: sticky;
	top: var(--shop-summary-sticky-top);
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart_totals h2,
.shop-cart__summary h2 {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

/* WC's totals table, restyle as a clean key/value list. */
.woocommerce-cart .cart_totals table.shop_table,
.shop-cart__summary table.shop_table {
	width: 100%;
	margin: 0 0 var(--space-5);
	border-collapse: collapse;
	background: transparent;
	border-radius: 0;
	border: 0;
}

.woocommerce-cart .cart_totals table.shop_table tr {
	border: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td,
.shop-cart__summary table.shop_table th,
.shop-cart__summary table.shop_table td {
	padding: var(--space-3) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table th,
.shop-cart__summary table.shop_table th {
	font-weight: 400;
	color: var(--color-text-secondary);
	text-align: left;
}

.woocommerce-cart .cart_totals table.shop_table td,
.shop-cart__summary table.shop_table td {
	text-align: right;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
.shop-cart__summary table.shop_table tr.order-total th,
.shop-cart__summary table.shop_table tr.order-total td {
	border-bottom: 0;
	padding-top: var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	color: var(--color-text-primary);
}

.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	margin: var(--space-2) 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--space-5);
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	font-size: var(--font-size-18);
	padding: calc(var(--shop-pill-pad-y) + 2px) var(--shop-pill-pad-x);
}

/* Empty cart */
.cart-empty,
.wc-empty-cart-message {
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: var(--space-10) var(--shop-gutter);
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	color: var(--color-text-secondary);
	text-align: center;
}

.return-to-shop {
	max-width: var(--layout-content-max-width);
	margin: 0 auto var(--space-12);
	padding: 0 var(--shop-gutter);
	text-align: center;
}

/* ============================================================
 * Checkout, two-column, sticky summary on the right.
 * ============================================================ */

.shop-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--shop-hero-gap);
	align-items: start;
}

.shop-checkout__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}

.shop-checkout__customer {
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
	width: 100%;
}

.shop-checkout__customer .col-1,
.shop-checkout__customer .col-2 {
	width: 100% !important;     /* WC ships 48%, override */
	float: none;
	margin: 0;
}

.shop-checkout__col h3,
.woocommerce-checkout #customer_details h3 {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.shop-checkout__col h3 label,
.woocommerce-checkout #customer_details h3 label {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	margin: 0;
}

/* Summary items link to their product page; they keep the text look. */
.woocommerce-checkout-review-order-table a.emo-checkout-item-link {
	color: inherit;
	text-decoration: none;
}

.woocommerce-checkout-review-order-table a.emo-checkout-item-link:hover,
.woocommerce-checkout-review-order-table a.emo-checkout-item-link:focus-visible {
	text-decoration: underline;
}

/* WooCommerce floats the "Lieferung an eine andere Adresse?" heading, so
   the next heading ran into the same line ("...Adresse?Zusätzliche
   Information"). Each heading gets its own line. */
.woocommerce-checkout #ship-to-different-address {
	float: none;
}

/* "Lieferung an eine andere Adresse?" is a checkbox, not a section: it
   reads as one more line of the billing block. */
.woocommerce-checkout #customer_details h3#ship-to-different-address {
	margin: 0 0 var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
}

.woocommerce-checkout #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
	margin: 0;
}

/* "Zusätzliche Information" starts a section of its own. */
.woocommerce-checkout .woocommerce-additional-fields {
	clear: both;
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-hairline);
}

/* The VAT ID takes its own full row, aligned with the fields above and the
   residence note below (the plugin setting makes it a half-width row). */
.woocommerce form #vat_number_field {
	display: block;
	width: 100%;
	margin-right: 0;
}

/* Aelia EU VAT Assistant: the country of residence confirmation. Its own
   CSS draws a dashed box with "(optional)" pushed off to the side; here
   it reads as one quiet note with the checkbox in front of the sentence. */
.woocommerce form #customer_location_self_certified_field {
	box-sizing: border-box;
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
}

.woocommerce form #customer_location_self_certified-description {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

.woocommerce form #customer_location_self_certified_field label.checkbox {
	display: block;
	margin: 0;
	line-height: 1.45;
}

.woocommerce form #customer_location_self_certified_field input[type="checkbox"] {
	margin: 0 var(--space-2) 0 0;
	vertical-align: -2px;
}

/* The box only appears when the evidence disagrees, and then the plugin
   refuses the order without the tick (required on conflict). It renders
   the field as optional all the same, so the label says "*" here. */
.woocommerce form #customer_location_self_certified_field .optional {
	display: none;
}

.woocommerce form #customer_location_self_certified_field .self_certification_label::after {
	content: " *";
	color: var(--color-text-secondary);
}

/* WC stamps .form-row-first / .form-row-last for two-up rows. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 49%;
	float: none;
	display: inline-block;
	vertical-align: top;
}

.woocommerce form .form-row-first {
	margin-right: 1%;
}

.woocommerce form .form-row-wide {
	clear: both;
	width: 100%;
}

/* Summary card on the right */
.shop-checkout__summary {
	width: 100%;
	box-sizing: border-box;
	padding: var(--shop-summary-pad);
	background-color: var(--shop-summary-bg);
	border-radius: var(--shop-summary-radius);
	position: sticky;
	top: var(--shop-summary-sticky-top);
}

/* Germanized rebuilds the summary flow INSIDE #order_review (its legal
 * payment-before-final-summary sequence): a "Zahlungsart" heading, the
 * payment methods, then the relocated "Ihre Bestellung" heading with the
 * checkboxes, review table and submit. The payment heading arrives
 * UNSTYLED (plain h3), which made the payment group read as a detached
 * orphan and the card as if it had no payment step. Both headings share
 * one treatment so the card reads as two labeled steps of one flow. */
.shop-checkout__summary-heading,
#order_review #order_payment_heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

/* Breathing room between the payment step and the order step. */
#order_review > #payment {
	margin-bottom: var(--space-7);
}

#order_review > #order_review_heading {
	margin-bottom: var(--space-4);
}

/* Germanized's layout.css (loads AFTER this sheet) hides WC's review
   heading wholesale; here it is the summary card's title, bring it
   back with one extra class of specificity. */
.woocommerce-gzd-checkout #order_review_heading.shop-checkout__summary-heading {
	display: block;
}

/* The summary card's interior (payment cards, legal checkboxes,
   receipt table, submit) is styled in ONE consolidated block further
   down: "Checkout order summary, consolidated". Keep it that way ,
   this file used to carry two divergent copies. */

/* ============================================================
 * Responsive, mirror the chrome breakpoints.
 *   1024px : product grid 3 → 2 cols, two-column heroes still 2-col,
 *            product title drops a step so it fits the narrowed
 *            summary column
 *    833px : the two-column LAYOUTS stack (product hero, cart,
 *            checkout); the product grid stays 2-up
 *     640px : phone, product grid single column, checkout name/surname
 *            rows stack
 * ============================================================ */

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

	/* The hero is still two columns here, so the summary track is only
	 * ~340px wide at the bottom of this range. "Netzwerkisolator" set at
	 * 3.5rem needs roughly 450px and has no soft hyphen to break on, so
	 * it overflowed its own track. 2.5rem fits. */
	.shop-product__summary .product_title,
	.woocommerce div.product .product_title {
		font-size: var(--font-size-40);
	}
}

@media (max-width: 833px) {
	:root {
		--shop-pad-top:    var(--space-7);
		--shop-pad-bottom: var(--space-10);
		--shop-card-gap:   var(--space-5);
		--shop-hero-gap:   var(--space-7);
		--shop-summary-pad:var(--space-5);
	}

	/* The product grid stays 2-up here, it goes single column at 640px.
	   The product title already dropped to 2.5rem in the 1024px block. */

	.shop-product__hero {
		grid-template-columns: 1fr;
	}

	.shop-product__summary .price,
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: var(--font-size-21);
	}

	.shop-cart {
		grid-template-columns: 1fr;
	}

	.shop-cart__summary,
	.woocommerce-cart .cart-collaterals {
		position: static;
	}

	.shop-cart__item {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--space-4);
	}

	.shop-cart__details {
		grid-template-areas:
			"name     name"
			"price    price"
			"qty      subtotal"
			"remove   remove";
	}

	.shop-cart__remove {
		justify-self: start;
		padding-top: var(--space-2);
	}

	.shop-checkout {
		/* minmax(0, …), not bare 1fr: 1fr's implicit min-width:auto lets the
		 * review table's non-wrapping price cells inflate the column past the
		 * viewport (50px horizontal scroll at 375px). */
		grid-template-columns: minmax(0, 1fr);
	}

	/* Long "276,08 € (inkl. MwSt.)" totals may wrap instead of widening the
	 * review table. */
	.shop-checkout__review .shop_table td,
	.shop-checkout__review .shop_table th {
		overflow-wrap: anywhere;
	}

	.shop-checkout__summary {
		position: static;
		order: -1;     /* show order summary first on mobile so users see what they're paying for */
	}

	.shop-tabs__list,
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: var(--space-5);
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.shop-tabs__link,
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
	}

}

/* ============================================================
 * Phone, 640px. Declared AFTER the 1024px block so the narrower
 * query wins on source order at equal specificity.
 *
 * The checkout's two-up name rows move here too. Once .shop-checkout
 * stacks at 833px the details column IS the content column, so a
 * 49% .form-row-first was already ~380px at 833px and ~790px when
 * forced to 100%. A full-viewport-width "Vorname" field is a phone
 * treatment, not a tablet one.
 * ============================================================ */

@media (max-width: 640px) {
	.shop-loop__grid,
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
		margin-right: 0;
	}

	/* 28px headings wrapped to two lines per section on a phone. */
	.shop-checkout__col h3,
	.woocommerce-checkout #customer_details h3 {
		margin-bottom: var(--space-4);
		font-size: var(--font-size-21);
	}

	.woocommerce form .form-row label.checkbox,
	.woocommerce form .form-row .woocommerce-form__label-checkbox {
		font-size: var(--font-size-14);
	}
}

/* ============================================================
 * Product certification pills.
 *
 * Each pill is driven by a per-term --shop-cert-bg colour set inline
 * on the <li> from term meta. The visual treatment derives three
 * surfaces from that one value via color-mix() so any colour the
 * editor picks stays readable on the white card / page background:
 *   - soft tinted background (12% of bg over transparent)
 *   - dark text (75% bg blended with --color-text-primary)
 *   - 1px translucent border (30% bg)
 *   - solid leading dot at full saturation, the actual scanning cue.
 *
 * .shop-cert--lg lifts the pill for the single-product summary so it
 * reads at body distance; the card variant stays at 11px to leave the
 * product title as the primary scan target.
 * ============================================================ */

.shop-card__certs,
.shop-product__certs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-product__certs {
	gap: var(--space-2);
	margin: var(--space-3) 0;
}

.shop-cert {
	--shop-cert-bg: var(--grey-500);

	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 3px var(--space-2);
	border-radius: var(--radius-chip);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--letter-spacing-wide);
	background: color-mix(in srgb, var(--shop-cert-bg) 12%, transparent);
	color: color-mix(in srgb, var(--shop-cert-bg) 75%, var(--color-text-primary));
	border: 1px solid color-mix(in srgb, var(--shop-cert-bg) 30%, transparent);
}

.shop-cert--lg {
	padding: 4px var(--space-3);
	font-size: var(--font-size-14);
}

.shop-cert__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--shop-cert-bg);
	flex-shrink: 0;
}

.shop-cert--lg .shop-cert__dot {
	width: 8px;
	height: 8px;
}

/* ============================================================
 * Reduced motion, disable hover-shift transforms.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.shop-card__link,
	.shop-card__media img,
	.shop-card__chevron,
	.shop-tabs__link,
	.shop-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	#place_order {
		transition: none;
	}

	.shop-card__link:hover,
	.shop-card__link:focus-visible {
		transform: none;
	}

	.shop-card__link:hover .shop-card__media img,
	.shop-card__link:focus-visible .shop-card__media img,
	.shop-card__link:hover .shop-card__chevron,
	.shop-card__link:focus-visible .shop-card__chevron {
		transform: none;
	}

	/* Press stays visible without motion: the scale drops, the
	   background/opacity shift keeps pointer-down feedback (spec 7). */
	.shop-button:active,
	.woocommerce a.button:active,
	.woocommerce button.button:active,
	.woocommerce input.button:active,
	.woocommerce #respond input#submit:active,
	.woocommerce button.button.alt:active,
	.shop-button--ghost:active,
	.woocommerce a.button.wc-backward:active,
	.woocommerce button.button[name="update_cart"]:active,
	.woocommerce button.button[name="apply_coupon"]:active {
		transform: none;
	}

	.shop-card__link:active {
		transform: none;
		background-color: var(--grey-100);
	}
}

/* ============================================================
 * Shop hero, editorial header for the shop landing and product
 * category archives (rendered by our archive-product.php).
 * ============================================================ */

.shop-hero {
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: var(--space-11) var(--layout-gutter) var(--space-9);
	text-align: center;
}

.shop-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-accent);
}

.shop-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	font-weight: 600;
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.shop-hero__subhead {
	max-width: 44em;
	margin: var(--space-4) auto 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Category cards, extend the shop-card vocabulary
 * (content-product-cat.php). Count rides as a quiet pill.
 * ============================================================ */

.shop-card__count {
	display: inline-block;
	min-width: 28px;
	margin-left: var(--space-2);
	padding: 2px 9px;
	font-size: var(--font-size-12);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--color-text-secondary);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-chip);
	vertical-align: 2px;
}

/* Gradient placeholder media for categories without an image -
 * same variant-aware family as the blog/product-line placeholders. */
.shop-card__media--placeholder {
	background-image: var(--info-grad-a, var(--emo-grad-a));
}

.shop-loop__grid li:nth-child(3n + 2) .shop-card__media--placeholder {
	background-image: var(--info-grad-b, var(--emo-grad-b));
}

.shop-loop__grid li:nth-child(3n) .shop-card__media--placeholder {
	background-image: var(--info-grad-c, var(--emo-grad-c));
}

/* ============================================================
 * Breadcrumb, the way back from a product (owner 2026-10-19, QM-12
 * and QM-16: no previous and next buttons, the trail carries the way
 * back and gets presence). Body size in sentence case instead of the
 * former 12px uppercase whisper; links in the secondary ink, the page
 * you are on in the primary ink, the "/" stays as a quiet separator.
 * The .woocommerce/.woocommerce-page prefixes give this rule the
 * specificity to beat WC's own float/margin defaults; it is the
 * single authority for breadcrumb geometry + typography.
 * ============================================================ */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
	float: none;
	clear: both;
	box-sizing: border-box;
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--shop-gutter) 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
}

.woocommerce-breadcrumb a {
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard), text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--color-link);
	text-decoration-color: currentColor;
}

.woocommerce-breadcrumb__sep {
	margin: 0 0.35em;
	color: var(--color-text-muted);
	font-weight: 400;
}

.woocommerce-breadcrumb__current {
	color: var(--color-text-primary);
	font-weight: 600;
}

/* Breathing room before the footer: the single-product layout and the
   shop archive otherwise end flush against the site footer. */
.single-product .site-main {
	padding-bottom: var(--space-12);
}

.shop-archive {
	/* Same --space-12 every other page bottoms out on (content.css's
	 * --content-body-pad-bottom, .single-product above): the gap above the
	 * footer must not change when you cross from a content page into the
	 * shop. */
	padding-bottom: var(--space-12);
}

/* ============================================================
 * Single-product gallery, white stage. The catalog photography
 * is shot on white; the previous grey-50 box washed it out.
 * ============================================================ */

/* The slides carry NO frame of their own; the one visible hairline
   lives on .shop-product__media, wrapping image and thumbnail tray as
   one gallery card. Two hard-won reasons a slide may never get one:
   a layout border adds 2px to every slide's outer size that
   Flexslider's slide-step and smoothHeight math doesn't know about
   (each successive slide landed 2px further off), and even a
   zero-layout overlay ring dies on the flex-viewport's fractional
   JS-set overflow-hidden edge, where device-pixel snapping at Windows
   125/150% scaling swallowed its bottom line. */
.shop-product__media .woocommerce-product-gallery__image {
	position: relative;
	background: #ffffff;
}

/* ============================================================
 * Checkout order summary, consolidated ("Ihre Bestellung").
 *
 * Everything inside the right-hand card. Germanized reorders the
 * review DOM to: payment heading → payment method cards → legal
 * checkboxes → receipt table → submit (§312j BGB wants the order
 * summary in direct proximity to the button, so the table sits
 * last). Design: an Apple-quiet receipt, hairline separators,
 * tabular numerals, muted tax footnotes, one EMO HARMONY CTA.
 *
 * Cascade note: Germanized's layout.css and its inline style
 * (option woocommerce_gzd_display_checkout_table_color, set to
 * `transparent` by docker/gzd-setup.php) load AFTER this sheet,
 * so every rule that fights one of theirs carries one extra
 * class of specificity instead of !important. WC-general loads
 * BEFORE this sheet, so matching its exact selectors suffices.
 * ============================================================ */

/* --- Payment methods as selectable radio cards --- */

/* Germanized's "Zahlungsart auswählen" heading, a section label
   under the card's own title. */
.shop-checkout__summary #order_payment_heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

.woocommerce-checkout #payment {
	background: transparent;   /* WC paints #f7f6f7 */
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	border-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	margin: 0;
	padding: var(--space-4) var(--space-5);
	line-height: var(--line-height-base);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-lg);
	transition:
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--color-accent);
}

/* Press on pointer-down (DESIGN-SPEC.md section 1); a background
   step instead of scale, so it also survives reduced motion. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:active {
	background-color: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
	display: inline;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	text-transform: none;
	color: var(--color-text-primary);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods input.input-radio,
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0 var(--space-2) 0 0;
	vertical-align: -2px;
	accent-color: var(--color-accent);
	cursor: pointer;
}

/* Description panel: quiet, not WC's lavender speech bubble. Same
   selector as WC-general, which loads earlier, so order decides. */
.woocommerce-checkout #payment div.payment_box {
	position: static;
	width: auto;
	margin: var(--space-3) 0 0;
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;   /* the lavender arrow */
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* WC leaves an empty padded .place-order row inside #payment (the
   real button was moved below the table by Germanized), flatten it. */
.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0;
	margin: 0;
}

/* --- Legal checkboxes (AGB/Widerruf, Datenschutz notice) ---
   Germanized's layout.css pads these rows and forces label back to
   inline at (1,2,2); the .form-row.checkbox-legal compound stays
   one class ahead of it. Text styling: assets/css/germanized.css. */

#order_review .wc-gzd-checkbox-placeholder p.form-row.checkbox-legal {
	margin: var(--space-4) 0 0;
	padding: 0;
}

#order_review .wc-gzd-checkbox-placeholder p.form-row.checkbox-legal label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	text-transform: none;
	color: var(--color-text-secondary);
	cursor: pointer;
}

#order_review .wc-gzd-checkbox-placeholder p.form-row.checkbox-legal input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--color-accent);
}

/* --- Receipt table --- */

/* Germanized paints the whole table #eee from two later sheets at
   (0,2,0); this (0,3,0) plus the option set to `transparent` in
   gzd-setup.php keeps the card's own surface. */
.woocommerce-checkout .shop-checkout__review .shop_table {
	background: transparent;
}

/* Every rule in this block is prefixed with .woocommerce on purpose.
   woocommerce.css styles this table as `.woocommerce table.shop_table td`,
   which is (0,2,2); the theme's own two-class selectors were (0,2,1) and
   lost every one of them, so the receipt rendered with WooCommerce's
   default borders, padding and layout instead of this design. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: var(--space-5) 0 0;
	border: 0;
	border-top: 1px solid var(--color-border-hairline);   /* opens the receipt */
	border-collapse: collapse;
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table td.product-name,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table th.product-name {
	/* The table is auto-layout, where `width: 100%` is only a PREFERRED
	   width: if the content's min-content width is larger the table wins
	   and overflows, which it did by 50px, because a product name carries
	   a model code with no break opportunity ("EN-1005+"). anywhere, not
	   break-word: only `anywhere` actually reduces the min-content width,
	   so the table can shrink to its card. Auto layout is kept on purpose,
	   table-layout: fixed splits the columns evenly here (the header row
	   that would carry widths is display: none) and shreds the name to one
	   character per line. */
	overflow-wrap: anywhere;
}

/* Germanized lays the name cell out as a flex row whose items are the
   thumbnail, the product name as a BARE TEXT NODE, the <sup> from the
   model code and the quantity. An anonymous flex item cannot be given
   min-width: 0, so the name was the one that shrank: it ended up about
   60px wide and broke mid-word while 150px of the cell sat unused by
   the fixed-width thumbnail's neighbours. Wrapping lets the name take a
   whole line when it no longer fits beside the thumbnail, and a smaller
   thumbnail leaves more room before that happens. */
.woocommerce .shop-checkout__review .wc-gzd-cart-item-name-wrapper {
	flex-wrap: wrap;
	align-items: baseline;
}

.woocommerce .shop-checkout__review .wc-gzd-cart-item-thumbnail {
	flex: 0 0 40px;
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table thead {
	display: none;   /* "Produkt / Zwischensumme" header, redundant in the card */
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table th,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table td {
	padding: var(--space-3) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 400;
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	text-transform: none;
	text-align: left;
	color: var(--color-text-secondary);
	vertical-align: middle;
}

/* The shipping rate label arrives uppercase from a nested span,
   flatten every descendant once. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table th *,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table td * {
	text-transform: none;
	letter-spacing: var(--letter-spacing-base);
}

/* Values right-aligned, digits lined up like a receipt. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table td:last-child,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table th + td {
	text-align: right;
	color: var(--color-text-primary);
	font-variant-numeric: tabular-nums;
}

/* Product rows: name speaks, quantity and legal microcopy recede. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table td.product-name {
	color: var(--color-text-primary);
	padding-right: var(--space-3);
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Germanized's per-item microcopy (delivery time, item desc). */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .wc-gzd-cart-info {
	display: block;
	margin: 2px 0 0;
	font-size: var(--font-size-12);
	font-weight: 400;
	color: var(--color-text-muted);
}

/* Tax footnotes hang under their amount, small and muted. */
.shop-checkout__review .shop_table small.tax_label,
.shop-checkout__review .shop_table small.includes_tax {
	display: block;
	margin-top: 2px;
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 400;
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

/* NOT flex, which is what this rule used to set. The wrapper's children
   are the thumbnail, the product name as a BARE TEXT NODE, the <sup>
   that ends the model code, and the quantity. Flex makes those last
   three separate items and drops the row's gap between them, so the
   name lost its own superscript ("EN-1005  +") and the quantity broke
   onto a line of its own below the name. As a block they are one inline
   run again, "Netzwerkisolator emosafe EN-1005+ x 1", which reads
   straight into the price beside it; the name also stops being a flex
   item that can be squeezed below its content, which is what had it
   wrapping mid-word. The thumbnail floats out of that run. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper {
	display: block;
	color: var(--color-text-primary);
}

.shop-checkout__review table.woocommerce-checkout-review-order-table tr.wc-gzd-cart-item-has-thumbnail .wc-gzd-cart-item-name-wrapper .wc-gzd-cart-item-thumbnail {
	float: left;
	width: 56px;
	min-width: 0;
	max-width: none;
	margin: 0 var(--space-3) var(--space-1) 0;
}

/* Rides with the name rather than drifting off it, and never breaks
   between the sign and the number. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .product-quantity {
	margin-left: var(--space-2);
	white-space: nowrap;
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-md);
	padding: 2px;
	box-sizing: border-box;
}

/* Shipping rate line inside its cell. */
.shop-checkout__review #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-checkout__review #shipping_method label {
	margin: 0;
	font-size: var(--font-size-14);
}

/* Totals hierarchy: subtotal/shipping stay quiet above; the
   Gesamtsumme is the loudest line of the receipt. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.order-total td {
	padding-top: var(--space-5);
	border-bottom: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.order-total td strong {
	font-weight: 600;
}

/* Germanized appends the tax line AFTER the total
   (woocommerce_gzd_tax_totals_display = after): a footnote. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.order-tax th,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.order-tax td {
	padding-top: 0;
	padding-bottom: var(--space-2);
	border-bottom: 0;
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
}

/* Coupon line, the one benefit on the receipt: the amount may carry
   brand petrol (5.2:1 on the card's paper, AA body per DESIGN-SPEC
   section 11), the remove link stays a quiet footnote. */
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table tr.cart-discount td {
	color: var(--color-link);
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
	margin-left: var(--space-1);
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
	text-decoration: none;
}

.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .woocommerce-remove-coupon:hover,
.woocommerce .shop-checkout__review .woocommerce-checkout-review-order-table .woocommerce-remove-coupon:focus-visible {
	color: var(--color-link);
	text-decoration: underline;
}

/* --- Submit ---
   #place_order inherits the EMO HARMONY CTA pill + pointer-down press from
   the shop button block above (scale + background at
   --motion-duration-press, reduced-motion fallback included);
   here only size and placement. */

form.checkout #place_order {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	font-size: var(--font-size-18);
	padding: calc(var(--shop-pill-pad-y) + 2px) var(--shop-pill-pad-x);
}

.woocommerce-checkout .wc-gzd-order-submit .form-row.place-order {
	margin: var(--space-5) 0 0;
	padding: 0;
	border: 0;
}

/* --- Coupon form ("Gutschein einlösen"), revealed by the toggle
   notice above the checkout grid. Display is JS-toggled, leave it. --- */
.woocommerce-checkout form.checkout_coupon {
	/* WooCommerce prints this form as a sibling of the checkout grid, so
	 * it inherited no container and ran edge to edge while the prompt
	 * above it sat inside the 1200px column. Match the column exactly. */
	box-sizing: border-box;
	max-width: var(--layout-content-max-width);
	margin: 0 auto var(--space-6);
	padding: var(--space-5) var(--shop-gutter, var(--space-5));
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-panel);
	/* Field and button on one line, field takes the slack. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.woocommerce-checkout form.checkout_coupon p:first-child {
	/* The "Wenn Sie einen Gutschein haben" intro line spans the row. */
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

.woocommerce-checkout form.checkout_coupon .form-row {
	margin-bottom: 0;
	padding: 0;
	width: auto;
}

/* The input row grows, the submit row stays intrinsic. */
.woocommerce-checkout form.checkout_coupon .form-row-first {
	flex: 1 1 22rem;
	min-width: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.woocommerce-checkout form.checkout_coupon #coupon_code {
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 640px) {
	/* Stack: a side-by-side field and button get cramped on phones.
	   A tablet has the width for the code field and its button on one
	   line, so this is a 640px step, not the 833px chrome step. */
	.woocommerce-checkout form.checkout_coupon .form-row-first,
	.woocommerce-checkout form.checkout_coupon .form-row-last,
	.woocommerce-checkout form.checkout_coupon .form-row-last button {
		flex: 1 0 100%;
		width: 100%;
	}
}

/* ============================================================
 * Product extras, Technische Daten + Downloads tabs
 * (inc/product-extras.php). Spec sheet as a quiet two-column
 * table; downloads as rows with a type badge and an accent CTA.
 * ============================================================ */

.shop-tab__heading {
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	/* --font-size-32 never existed; the browser was silently falling back
	 * to the inherited size. 28 is the scale step this heading wants. */
	font-size: var(--font-size-28);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.shop-specs {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
}

.shop-specs tr {
	border-bottom: 1px solid var(--color-border-hairline);
}

.shop-specs th,
.shop-specs td {
	padding: var(--space-4) var(--space-3);
	text-align: left;
	vertical-align: top;
	background: transparent;
}

.shop-specs th {
	width: 44%;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.shop-specs td {
	color: var(--color-text-primary);
}

.shop-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 860px;
}

.shop-downloads__row {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-hairline);
}

.shop-downloads__badge {
	flex: 0 0 auto;
	min-width: 52px;
	padding: 6px 10px;
	border-radius: var(--radius-chip);
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
	font-size: var(--font-size-12);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-wide);
	text-align: center;
	text-transform: uppercase;
}

.shop-downloads__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.shop-downloads__name {
	font-weight: 600;
	color: var(--color-text-primary);
	overflow-wrap: break-word;
}

.shop-downloads__meta {
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

.shop-downloads__cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--radius-control);
	background: var(--color-cta);
	color: var(--color-cta-ink);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-downloads__cta:hover,
.shop-downloads__cta:focus-visible {
	background: var(--color-cta-hover);
	color: var(--color-cta-ink);
	text-decoration: none;
}

.shop-downloads__cta:active {
	background: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

@media (max-width: 833px) {
	.shop-downloads__row {
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.shop-downloads__cta {
		margin-left: calc(52px + var(--space-3));
	}

	.shop-specs th {
		width: 50%;
	}
}

/* Reduced-motion mirror for the product-extras CTA; lives after the
   press rule above so it wins the cascade, the background press stays. */
@media (prefers-reduced-motion: reduce) {
	.shop-downloads__cta:active {
		transform: none;
	}
}

/* Anfrage CTA on product pages that cannot sell right now (out of stock,
 * price on request): the same EMO HARMONY pill the add-to-cart button wears,
 * standing where that button would have stood. */
.shop-product__anfrage {
	align-self: flex-start;
	min-width: 220px;
	margin-top: var(--space-3);
}

/* ============================================================
 * Checkout validation state
 *
 * Four separate faults, all visible the moment a required field is
 * left empty, which is the first thing a real customer does.
 * ============================================================ */

/* .woocommerce-NoticeGroup is a direct child of .shop-checkout, and that
   is a two-column grid, so the error summary dropped into the FIRST CELL
   and sat beside the form instead of above it. It also still carried the
   page-level container rules (max-width, auto margins, gutter padding)
   that only make sense while it is a top-level block, which is where the
   stray 55px inset came from. */
.shop-checkout > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	max-width: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

/* The summary is a list of failures, so it reads left to right like the
   form it describes, not centred like a banner. text-align alone could
   not do it: the notice is a flex COLUMN with align-items: center (right
   for a one-line notice, where it centres the icon against the text), so
   every message shrink-wrapped to its own width and floated to the
   middle. Giving the items the full row is what actually left-aligns
   them, and it leaves the icon's own centring alone. */
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
	text-align: left;
}

.woocommerce-NoticeGroup .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-error li {
	width: 100%;
	text-align: left;
}

/* Links inside a notice are theme links. These were rendering in the
   UA's default blue, purple once visited, permanently underlined, which
   is the single loudest thing on the page at the exact moment the
   customer is being told something went wrong. */
.woocommerce-notices-wrapper a,
.woocommerce-NoticeGroup a {
	color: var(--color-link);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce-notices-wrapper a:hover,
.woocommerce-notices-wrapper a:focus-visible,
.woocommerce-NoticeGroup a:hover,
.woocommerce-NoticeGroup a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* WooCommerce rings every VALID field in its own bright green (#7ad03a),
   off palette and, on a filled form, a wall of green that shouts louder
   than the errors. Validity is the resting state and needs no
   decoration; only the invalid state speaks, and it already does, in
   --color-danger a few hundred lines above. */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated .select2-container .select2-selection {
	border-color: var(--color-border-hairline);
}

/* 320px: the "qty | subtotal" pair from the 833px step needs about 250px
 * and the details column has 176px, so the quantity field sat under the
 * subtotal. Stack every cell below the name. */
@media (max-width: 399px) {
	.shop-cart__item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--space-3);
	}
	.shop-cart__details {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"name"
			"price"
			"qty"
			"subtotal"
			"remove";
	}
	.shop-cart__subtotal {
		justify-self: start;
	}
}

/* Key to the "*" marker (inc/forms.php), above the billing fields (QM-21). */
.shop-checkout .forms-legend {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

/* On the "Rechnungsdaten" line, right-aligned: the key is printed right
   after the heading and pinned to the heading's line box. */
.shop-checkout .woocommerce-billing-fields {
	position: relative;
}

.shop-checkout .woocommerce-billing-fields > .forms-legend {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	line-height: calc(var(--font-size-28) * var(--line-height-tight));
}

@media (max-width: 640px) {
	.shop-checkout .woocommerce-billing-fields > .forms-legend {
		line-height: calc(var(--font-size-21) * var(--line-height-tight));
	}
}

/* Quantity steps (inc/quantity-steps.php, QM-13): minus, field and plus
   read as one control. The field drops its own frame and the browser's
   spinner; the group carries the frame. Product page and cart alike. */
.quantity:has(.qty-step) {
	display: inline-flex;
	align-self: flex-start;   /* form.cart is a flex column: no full-width frame */
	align-items: stretch;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-control);
	background-color: var(--color-bg-base);
	overflow: hidden;
}

.quantity:has(.qty-step) input.qty {
	width: 3.5em;
	border: 0;
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity:has(.qty-step) input.qty::-webkit-inner-spin-button,
.quantity:has(.qty-step) input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qty-step {
	flex: 0 0 auto;
	width: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.qty-step:hover {
	background-color: var(--color-bg-elevated);
}

.qty-step:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: -2px;
}

/* The cart row is narrow: a compact group, so the product name keeps
   its width. */
.shop-cart__qty .qty-step {
	width: 2rem;
	font-size: var(--font-size-16);
}

.shop-cart__qty .quantity:has(.qty-step) input.qty {
	width: 2.5em;
	padding-inline: 0;
}

/* A field that cannot change keeps no buttons. */
.quantity:has(input.qty[readonly]) .qty-step,
.quantity:has(input.qty[type="hidden"]) .qty-step {
	display: none;
}

.quantity:has(input.qty[readonly]),
.quantity:has(input.qty[type="hidden"]) {
	border: 0;
}

/* Product share (inc/product-share.php, QM-14): one quiet text button
   under the product meta, a status line beside it. */
.product-share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
}

.product-share__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	border: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
	cursor: pointer;
}

.product-share__button:hover,
.product-share__button.is-done {
	color: var(--color-text-primary);
}

.product-share__button:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.product-share__status {
	font-size: var(--font-size-14);
	color: var(--color-link);
}

/* Product seals (inc/product-seals.php, QM-15): the UL mark under the
   article number, at the meta row's quiet scale. */
.product-seals {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.product-seals__img {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
}