/*
 * emo2026, WooCommerce shop polish (notices, mini-cart, search results,
 * thank-you, empty cart).
 *
 * Companion stylesheet to shop.css. SHOP-1 owned the heavy surfaces (archive,
 * single product, cart, checkout); this file picks up the surfaces SHOP-1
 * deferred. Kept in a separate file so the deferred work is isolated and easy
 * to review, both files share the same token vocabulary and class prefixes
 * (.shop-*).
 *
 * Tokens come from tokens.css. Page-local custom properties at the top
 * capture geometry that's unique to these surfaces, mini-cart panel width,
 * thank-you check size, notice icon size.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 */

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

	/* Notices, shared by all four variants. */
	--shop-notice-radius:        var(--radius-md);
	--shop-notice-pad-y:         var(--space-4);
	--shop-notice-pad-x:         var(--space-5);
	--shop-notice-icon-size:     20px;
	--shop-notice-accent-info:   var(--color-text-primary);
	--shop-notice-accent-success: var(--color-success);  /* shared status token, tokens.css */
	--shop-notice-accent-error:  var(--color-danger);   /* shared status token, tokens.css */
	--shop-notice-accent-message: var(--color-text-primary);

	/* Mini-cart dropdown panel, anchored to the cart icon in the navbar. */
	--shop-minicart-width:       360px;
	--shop-minicart-pad:         var(--space-5);
	--shop-minicart-radius:      var(--radius-card);
	--shop-minicart-shadow:      0 16px 40px rgba(0, 0, 0, 0.16);
	/* Solid, the frosted translucent panel let page content bleed through
	   between the mini-cart's blocks (fragments re-render drops the blur
	   in some states); commerce UI needs a dependable backdrop. */
	--shop-minicart-bg:          var(--color-bg-base);
	--shop-minicart-thumb-size:  56px;
	--shop-minicart-row-gap:     var(--space-3);
	--shop-minicart-offset-top:  6px;          /* small gap below the icon */

	/* Cart icon badge */
	--shop-cart-badge-size:      16px;
	--shop-cart-badge-bg:        var(--color-text-primary);
	--shop-cart-badge-fg:        var(--color-text-inverse);

	/* Thank-you page, large hero check + meta strip */
	--shop-thanks-check-size:    72px;
	--shop-thanks-pad-y:         var(--space-10);

	/* Empty cart hero */
	--shop-empty-icon-size:      72px;
}

/* ============================================================
 * 1. NOTICES
 *
 * SHOP-1 already styled .woocommerce-message / -info / -error as a quiet
 * grey card with a black left-border accent. Extend that pattern with:
 *   - a semantic icon badge (CSS-only round mark) per variant
 *   - the .woocommerce-NoticeGroup wrapper used on checkout
 *   - the WP-core .notice variants (admin notices that bleed onto the
 *     front-end via shortcodes / blocks)
 *   - the inline .woocommerce-noreviews / .wc-block-components-notice-banner
 *     that WC blocks emit
 *
 * The base box rules already live in shop.css, DON'T duplicate them. We
 * only add the icon + the variant accents + the wrapper rules here.
 * ============================================================ */

.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup {
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: 0 var(--shop-gutter, var(--space-5));
}

.woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-error {
	margin-left: 0;
	margin-right: 0;
}

/* Lay each notice as an icon column + content column.
   Restate display so SHOP-1's text-first rule still wins where used inline.
   The checkout coupon prompt (.woocommerce-form-coupon-toggle) sits outside
   both wrappers; without the flex treatment core's absolute icon at
   left:1.5em overlaps the text under the theme's tighter padding. */
.shop-notice,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--shop-notice-pad-y) var(--shop-notice-pad-x);
}

/* Icon badge, pure CSS round mark with a glyph rendered via ::before. The
   glyph character is variant-specific (set below); the round chip itself
   is shared and vertically centred by the flex row. */
.shop-notice__icon,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-NoticeGroup .woocommerce-message::before,
.woocommerce-NoticeGroup .woocommerce-info::before,
.woocommerce-NoticeGroup .woocommerce-error::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: "";
	/* woocommerce-general.css (which we keep) absolutely positions this
	   pseudo at left:1.5em, reset it so it behaves as the flex item the
	   layout expects instead of overlapping the message text. */
	position: static;
	flex: 0 0 var(--shop-notice-icon-size);
	width: var(--shop-notice-icon-size);
	height: var(--shop-notice-icon-size);
	border-radius: 50%;
	background-color: var(--shop-notice-accent-info);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
}

/* Success / "message": filled black chip with a white check.
   Inline SVG as a data URL, no asset file, no extra request. */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-NoticeGroup .woocommerce-message::before {
	background-color: var(--shop-notice-accent-message);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,6.5 5,9 9.5,3.5'/></svg>");
}

/* Info: black chip with a lowercase i. */
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-NoticeGroup .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
	background-color: var(--shop-notice-accent-info);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='white'><circle cx='6' cy='3' r='1'/><rect x='5.25' y='5' width='1.5' height='5.5' rx='0.4'/></svg>");
}

/* Error: red chip with a white X. */
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-NoticeGroup .woocommerce-error::before {
	background-color: var(--shop-notice-accent-error);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'><line x1='3' y1='3' x2='9' y2='9'/><line x1='9' y1='3' x2='3' y2='9'/></svg>");
}

/* WC's <ul.woocommerce-error> ships inline bullets via WC default CSS -
   strip them and stack the items as a tight list. */
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-error {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-left: var(--shop-notice-pad-x);  /* keep our own padding when WC strips theirs */
}

.woocommerce-notices-wrapper ul.woocommerce-error li,
.woocommerce-NoticeGroup ul.woocommerce-error li {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
}

/* The error UL needs the icon on the wrapper itself, but ::before on a
   <ul> renders as the first list item. Put it inline by making the UL a
   flex row whose first child is the icon. We do this by overriding the
   default ::before placement: instead of an icon, the UL gets a left-pad
   for an absolutely-positioned icon. Simpler than restructuring the DOM. */
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-error {
	position: relative;
	padding-left: calc(var(--shop-notice-pad-x) + var(--shop-notice-icon-size) + var(--space-3));
}

.woocommerce-notices-wrapper ul.woocommerce-error::before,
.woocommerce-NoticeGroup ul.woocommerce-error::before {
	position: absolute;
	left: var(--shop-notice-pad-x);
	/* Vertically centred against the whole box, matching the flex notices'
	   align-items: center (which also centre the chip on multi-line text). */
	top: 50%;
	transform: translateY(-50%);
}

/* Inline link inside a notice, already styled by SHOP-1; align it to the
   right and pill it so "View cart" / "Bestellen" reads as a CTA. */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button {
	margin-left: auto;
	align-self: center;
	padding: var(--space-2) var(--space-5);
	font-size: var(--font-size-14);
}

/* The notice body. WC outputs raw text; nothing to do besides giving it
   permission to grow. */
.shop-notice__body,
.woocommerce-notices-wrapper .woocommerce-message > *:not(.shop-notice__icon):not(.button),
.woocommerce-notices-wrapper .woocommerce-info > *:not(.shop-notice__icon):not(.button) {
	flex: 1 1 auto;
	min-width: 0;
}

/* WP core front-end notices (logout, comment moderation), match the look. */
.notice,
.notice-info,
.notice-success,
.notice-warning,
.notice-error {
	max-width: var(--layout-content-max-width);
	margin: var(--space-6) auto;
	padding: var(--shop-notice-pad-y) var(--shop-notice-pad-x);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--shop-notice-radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
	box-shadow: none;
}

/* ============================================================
 * 2. CART ICON IN THE NAVBAR + MINI-CART DROPDOWN
 *
 * The icon sits inside .site-nav__utility (the right cluster). It mirrors
 * the existing .site-nav__icon-btn (search) shape and inherits
 * its hover treatment via the shared class. The mini-cart panel opens on
 * hover/focus-within using the same pattern as the mega-menu dropdowns.
 *
 * The badge with the item count is updated by WC's cart-fragments JS, we
 * register a fragment in inc/shop-extra.php that replaces the inner
 * .site-nav__cart-count element when the cart changes.
 * ============================================================ */

.site-nav__cart {
	position: relative;
}

/* The link itself, exposed as a flex container so we can pin the badge
   to its top-right corner without breaking the click target. */
.site-nav__cart-btn {
	position: relative;
}

/* Item-count badge. WC fragments updates the inner .count text on AJAX. */
.site-nav__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: var(--shop-cart-badge-size);
	height: var(--shop-cart-badge-size);
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--shop-cart-badge-bg);
	color: var(--shop-cart-badge-fg);
	border-radius: var(--radius-chip);
	font-family: var(--font-sans);
	font-size: 0.625rem;  /* 10px badge glyph, off-scale but rem so it tracks text settings */
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
}

/* Hide the badge when empty, WC fragments writes "0" when the cart
   empties; we use the data-count attribute as the truth source. */
.site-nav__cart-count[data-count="0"] {
	display: none;
}

/* Mini-cart dropdown panel. Hover/focus-within driven, same as the mega-menu.
   Anchored to the right edge of the icon so it doesn't slide off-screen on
   narrower viewports. */
/* WC's wc-cart-fragments JS does an AJAX replace of the entire
 * <div.widget_shopping_cart_content> after every cart change, and the
 * replacement DOES NOT preserve our .site-nav__cart-panel class. So we
 * have to also target .widget_shopping_cart_content scoped to our cart
 * wrapper, that's the class WC keeps. We use both selectors with OR so
 * the rule applies in both pre-replace and post-replace states. */
/* Same symmetric transition pattern as the header's mega dropdown
   (header.css): the panel stays display:block and enters/exits along the
   same path (DESIGN-SPEC.md section 4), originating from its trigger,
   the cart icon at its top-RIGHT corner. The hidden-state transition
   governs the exit and runs the mirrored easing. No backdrop-filter:
   the panel is deliberately solid (see --shop-minicart-bg above), so a
   filter would be a no-op that still forces a compositing layer. */
.site-nav__cart-panel,
.site-nav__cart > .widget_shopping_cart_content {
	position: absolute;
	top: calc(100% + var(--shop-minicart-offset-top));
	right: 0;
	width: var(--shop-minicart-width);
	max-width: calc(100vw - var(--space-5) * 2);
	background-color: var(--shop-minicart-bg);
	border: 1px solid var(--color-border-hairline-translucent);
	border-radius: var(--shop-minicart-radius);
	box-shadow: var(--shop-minicart-shadow);
	padding: var(--shop-minicart-pad);
	box-sizing: border-box;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top right;
	pointer-events: none;
	transition:
		opacity var(--motion-duration-base) var(--motion-ease-standard-out),
		transform var(--motion-duration-base) var(--motion-ease-standard-out),
		visibility 0s linear var(--motion-duration-base);
}

.site-nav__cart:hover .site-nav__cart-panel,
.site-nav__cart:hover > .widget_shopping_cart_content,
.site-nav__cart:focus-within .site-nav__cart-panel,
.site-nav__cart:focus-within > .widget_shopping_cart_content {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition:
		opacity var(--motion-duration-base) var(--motion-ease-standard),
		transform var(--motion-duration-base) var(--motion-ease-standard),
		visibility 0s linear 0s;
}

/* The mini-cart UL itself, overrides WC's default widget bullets. */
.site-nav__cart .woocommerce-mini-cart,
.site-nav__cart ul.cart_list,
.site-nav__cart ul.product_list_widget {
	list-style: none;
	margin: 0 0 var(--space-4);
	/* Right padding plus a stable gutter keep the per-item remove mark off
	 * the scrollbar track; flush against it, the two fight for the cursor. */
	padding: 0 var(--space-3) 0 0;
	scrollbar-gutter: stable;
	max-height: 320px;
	overflow-y: auto;
}

.site-nav__cart .woocommerce-mini-cart-item,
.site-nav__cart ul.cart_list li,
.site-nav__cart ul.product_list_widget li {
	position: relative;
	display: grid;
	grid-template-columns: var(--shop-minicart-thumb-size) minmax(0, 1fr) auto;
	gap: var(--shop-minicart-row-gap);
	align-items: center;
	padding: var(--space-3) 0;
	margin: 0;
	border-bottom: 1px solid var(--color-border-hairline-translucent);
	list-style: none;
}

.site-nav__cart .woocommerce-mini-cart-item:last-child,
.site-nav__cart ul.cart_list li:last-child {
	border-bottom: 0;
}

/* Thumb. WC outputs a bare <img> followed by either text or a wrapping
   <a>. The link wraps the thumb + name; style its inner <img>. */
.site-nav__cart .woocommerce-mini-cart-item img,
.site-nav__cart ul.cart_list li img {
	display: block;
	grid-column: 1;
	width: var(--shop-minicart-thumb-size);
	height: var(--shop-minicart-thumb-size);
	object-fit: contain;
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	padding: var(--space-1);
	box-sizing: border-box;
	margin: 0;
	float: none;
}

/* Product name link. WC structure: <a><img/>Name</a>, the link sits in
   col 2 with the image absolutely floated into col 1. We pin the image
   to the grid by overriding its float; the anchor lives in col 2. */
.site-nav__cart .woocommerce-mini-cart-item > a,
.site-nav__cart ul.cart_list li > a {
	grid-column: 2;
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	line-height: var(--line-height-tight);
	color: var(--color-text-primary);
	text-decoration: none;
	min-width: 0;
}

/* The image is inside the <a> in WC's default markup, pull it back into
   col 1 visually using grid-column on the parent. We use a more specific
   selector so the image still renders inside the link semantically. */
.site-nav__cart .woocommerce-mini-cart-item > a img,
.site-nav__cart ul.cart_list li > a img {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.site-nav__cart .woocommerce-mini-cart-item > a {
	padding-left: 0;            /* image is positioned absolute, text already in col 2 */
}

/* Quantity + line price line, WC stamps as <span class="quantity">N × €X.XX</span>. */
.site-nav__cart .quantity {
	grid-column: 2;
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* Remove "x", WC ships as <a class="remove"> at the start of the <li>.
   Pin it to col 3 (top-right) and shrink to a quiet small mark. */
.site-nav__cart a.remove,
.site-nav__cart .woocommerce-mini-cart-item .remove {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	/* A 22px box: the glyph stays quiet, the pointer target stops being
	 * a sliver next to the scrollbar. */
	width: 22px;
	height: 22px;
	font-size: 1rem;         /* 16px glyph, rem so it tracks text settings */
	line-height: 1.375rem;   /* 22px, matches the chip box */
	text-align: center;
	color: var(--color-text-muted) !important;
	background: transparent !important;
	border-radius: 50%;
	text-decoration: none;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		background var(--motion-duration-fast) var(--motion-ease-standard),
		opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-nav__cart a.remove:hover,
.site-nav__cart a.remove:focus-visible {
	color: var(--color-text-primary) !important;
	background-color: var(--color-overlay-hover) !important;
}

/* Pointer-down feedback (DESIGN-SPEC.md section 1): dim on press, snap
   in under 100ms, release eases back at the base-rule timing. */
.site-nav__cart a.remove:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

/* Subtotal line. WC stamps <p class="woocommerce-mini-cart__total total">
   wrapping a <strong> from the subtotal hook. */
.site-nav__cart .woocommerce-mini-cart__total,
.site-nav__cart .total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-hairline);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-secondary);
}

.site-nav__cart .woocommerce-mini-cart__total strong,
.site-nav__cart .total strong {
	font-weight: 500;
	color: var(--color-text-primary);
}

/* CTA row, WC drops two <a class="button"> via woocommerce_widget_shopping_cart_buttons. */
.site-nav__cart .woocommerce-mini-cart__buttons,
.site-nav__cart .buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.site-nav__cart .woocommerce-mini-cart__buttons .button,
.site-nav__cart .buttons .button {
	display: flex;
	width: 100%;
	/* width:100% + padding overflowed the panel without this. */
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	padding: var(--space-3) var(--space-5);
	/* Self-contained pill treatment: the mini-cart renders on EVERY page,
	   but the shop.css base .button rules only load on WC surfaces -
	   without these the buttons rendered square and underlined on
	   non-shop pages. */
	border: 0;
	border-radius: var(--radius-control);
	text-decoration: none;
	line-height: var(--line-height-tight);
	/* transform is in the list so the :active compress eases back on release. */
	transition:
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard),
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-nav__cart .woocommerce-mini-cart__buttons .button:hover,
.site-nav__cart .woocommerce-mini-cart__buttons .button:focus-visible,
.site-nav__cart .buttons .button:hover,
.site-nav__cart .buttons .button:focus-visible {
	text-decoration: none;
}

.site-nav__cart .woocommerce-mini-cart__buttons .button.checkout:hover,
.site-nav__cart .woocommerce-mini-cart__buttons .button.checkout:focus-visible,
.site-nav__cart .buttons .button.checkout:hover,
.site-nav__cart .buttons .button.checkout:focus-visible {
	background-color: var(--color-cta-hover);
	color: var(--color-cta-ink);
}

.site-nav__cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
.site-nav__cart .woocommerce-mini-cart__buttons .button:not(.checkout):focus-visible,
.site-nav__cart .buttons .button:not(.checkout):hover,
.site-nav__cart .buttons .button:not(.checkout):focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Germanized appends tax / shipping-costs hint rows to the subtotal
   (p.wc-gzd-total-mini-cart), quiet label/value pairs. */
.site-nav__cart .wc-gzd-total-mini-cart {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 400;
	color: var(--color-text-muted);
}

.site-nav__cart .wc-gzd-total-mini-cart a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-nav__cart .wc-gzd-total-mini-cart a:hover,
.site-nav__cart .wc-gzd-total-mini-cart a:focus-visible {
	color: var(--color-link);
}

/* The "Checkout" button is the .checkout class, push it to first slot
   visually so users see the primary CTA at the bottom (Apple pattern). */
.site-nav__cart .woocommerce-mini-cart__buttons .button.wc-forward.checkout,
.site-nav__cart .buttons .button.checkout {
	background-color: var(--color-cta);
	color: var(--color-cta-ink);
	order: 2;
}

.site-nav__cart .woocommerce-mini-cart__buttons .button:not(.checkout),
.site-nav__cart .buttons .button:not(.checkout) {
	background-color: transparent;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-hairline);
	order: 1;
}

/* Pointer-down feedback (DESIGN-SPEC.md section 1): compress under
   100ms, the checkout pill darkens its fill, the ghost variant greys.
   After the fill rules above so equal-specificity presses win. */
.site-nav__cart .woocommerce-mini-cart__buttons .button:active,
.site-nav__cart .buttons .button:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

.site-nav__cart .woocommerce-mini-cart__buttons .button.wc-forward.checkout:active,
.site-nav__cart .buttons .button.checkout:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
}

.site-nav__cart .woocommerce-mini-cart__buttons .button:not(.checkout):active,
.site-nav__cart .buttons .button:not(.checkout):active {
	background-color: var(--grey-100);
}

/* Empty-cart state inside the dropdown. */
.site-nav__cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--space-5) 0;
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

/* When the cart is empty, hide the panel entirely on mobile to avoid an
   awkward small empty bubble, the icon still navigates to /warenkorb/. */

/* ============================================================
 * 3. PRODUCT-SEARCH RESULTS
 *
 * When a search request is explicitly scoped to products
 * (?s=foo&post_type=product), inc/shop-extra.php's template_include
 * filter routes through template-search-products.php which emits a
 * <ul class="products shop-search__grid"> wrapping the cards rendered
 * by SHOP-1's content-product.php. The .shop-card / .products grid
 * styling already lives in shop.css, we only need the wrapping grid
 * geometry and the empty-state copy here.
 *
 * For mixed searches (the default, WP's search.php still wins), the
 * .shop-search body class is also added but no CSS scope targets it
 * because search.php's <article> markup is generic; the editorial
 * styling stays untouched. The shop-card pass kicks in only on the
 * dedicated product-search surface.
 * ============================================================ */

.shop-search__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shop-card-gap, var(--space-7));
	list-style: none;
	margin: var(--space-7) 0 0;
	padding: 0;
}

/* Reset WC's float-based ul.products defaults inside our wrapper, same
   pass shop.css does for the archive, duplicated here so the grid
   works even when emo2026-shop isn't loaded (search route bypasses
   is_woocommerce()). */
.shop-search__grid > li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	text-align: left;
	padding: 0;
}

.shop-search__grid > li.product::before,
.shop-search__grid > li.product::after {
	content: none;
	display: none;
}

.shop-search__empty {
	max-width: var(--layout-content-max-width);
	margin: var(--space-9) auto;
	padding: 0 var(--shop-gutter, var(--space-5));
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	color: var(--color-text-secondary);
	text-align: center;
}

/* ============================================================
 * 4. THANK-YOU / ORDER-RECEIVED PAGE
 *
 * Full page surface inside .woocommerce wrapper. Apple post-purchase
 * pattern: huge centered checkmark, hero thank-you headline, meta strip
 * with order # / date / total, then the customer's order summary table
 * via the standard hook chain (left intact), then a "what's next" panel
 * + "continue shopping" link.
 * ============================================================ */

.shop-thanks {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--shop-thanks-pad-y) var(--shop-gutter, var(--space-5));
	text-align: center;
}

.shop-thanks__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--shop-thanks-check-size);
	height: var(--shop-thanks-check-size);
	margin: 0 auto var(--space-6);
	background-color: var(--shop-notice-accent-success);
	color: var(--color-text-inverse);
	border-radius: 50%;
}

.shop-thanks__check svg {
	display: block;
	width: 36px;
	height: 36px;
}

.shop-thanks__heading {
	margin: 0 0 var(--space-3);
	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-thanks__lead {
	margin: 0 auto var(--space-7);
	max-width: 540px;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* Meta strip, order #, date, total, payment method. */
.shop-thanks__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7);
	margin: 0 auto var(--space-9);
	padding: var(--space-5) var(--space-6);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-lg);
	list-style: none;
	text-align: left;
}

.shop-thanks__meta li {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
}

.shop-thanks__meta li strong {
	font-family: var(--font-display);
	font-size: var(--font-size-18);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	text-transform: none;
	color: var(--color-text-primary);
}

/* The order summary table that WC drops via woocommerce_thankyou hook. */
.shop-thanks__details {
	text-align: left;
	margin: 0 0 var(--space-9);
}

.shop-thanks__details h2,
.shop-thanks__details h3 {
	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);
}

.shop-thanks__details table.shop_table,
.woocommerce-order-details table.shop_table,
.woocommerce-customer-details table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0;
	margin: 0 0 var(--space-7);
}

.shop-thanks__details table.shop_table th,
.shop-thanks__details table.shop_table td,
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.woocommerce-customer-details table.shop_table th,
.woocommerce-customer-details table.shop_table td {
	padding: var(--space-3) var(--space-4);
	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);
	text-align: left;
	vertical-align: top;
}

.shop-thanks__details table.shop_table thead th,
.woocommerce-order-details table.shop_table thead th,
.woocommerce-customer-details table.shop_table thead th {
	font-weight: 600;
	color: var(--color-text-secondary);
	font-size: var(--font-size-12);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.shop-thanks__details table.shop_table tfoot tr th,
.shop-thanks__details table.shop_table tfoot tr td,
.woocommerce-order-details table.shop_table tfoot tr th,
.woocommerce-order-details table.shop_table tfoot tr td {
	font-weight: 400;
	color: var(--color-text-secondary);
}

.shop-thanks__details table.shop_table tfoot tr td,
.woocommerce-order-details table.shop_table tfoot tr td {
	color: var(--color-text-primary);
	text-align: right;
}

.shop-thanks__details table.shop_table tr.order_item td.product-total,
.woocommerce-order-details table.shop_table tr.order_item td.product-total {
	text-align: right;
}

.shop-thanks__details table.shop_table tfoot tr.order-total th,
.shop-thanks__details table.shop_table tfoot tr.order-total td,
.woocommerce-order-details table.shop_table tfoot tr.order-total th,
.woocommerce-order-details table.shop_table tfoot 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);
}

/* Customer details. WC nests the pair one level deeper than it looks:
   .woocommerce-customer-details holds a single <section class="addresses">,
   and THAT is the two-column parent. The grid used to sit on the outer
   element, where it had exactly one child to lay out, so the addresses
   stacked and the section read as an afterthought under the totals. */
.woocommerce-customer-details {
	margin: var(--space-9) 0 0;
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border-hairline);
}

.woocommerce-customer-details .addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin: 0;
}

/* Heading above its panel, panel filling the rest of the column, so the
   two cards line up along the bottom however long the addresses are. */
.woocommerce-customer-details .woocommerce-column {
	display: flex;
	flex-direction: column;
}

/* Two selectors, not one: woocommerce-general.css carries the same
   single-class specificity for `address` and loads after this file, so an
   equal-weight rule would lose and keep WC's cramped hairline box (6px /
   12px padding, 2px shadow borders). The panel below is the one the meta
   strip and the "what's next" block already use, so the three surfaces on
   this page read as one family. */
.woocommerce-customer-details address,
.woocommerce-customer-details .woocommerce-column address {
	flex: 1 1 auto;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-loose);
	color: var(--color-text-primary);
	background-color: var(--color-bg-elevated);
	border: 0;
	border-radius: var(--radius-panel);
	padding: var(--space-6);
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* WC hangs the phone/email icons in a negative-indent gutter, which needs
   the padding above to stay clear of the panel edge, and its own breathing
   room from the street address. */
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: var(--space-3) 0 0;
}

.woocommerce-customer-details h2,
.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-18);
	font-weight: 600;
	/* base, not tight: tight tracking is reserved for display sizes
	   (DESIGN-SPEC.md section 6), 18px is body-adjacent. */
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

/* "What's next" panel + continue shopping. */
.shop-thanks__next {
	margin: var(--space-9) auto 0;
	padding: var(--space-7);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-panel);
	text-align: left;
}

.shop-thanks__next h2 {
	margin: 0 0 var(--space-3);
	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);
}

.shop-thanks__next p {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.shop-thanks__next p + p {
	margin-top: var(--space-5);
}

/* Bestellverfolgung link. The shop has no customer accounts, so this
   capability URL (it carries the order key) is the only durable handle a
   customer has on their order, hence the emphasis: it reads as a link, not
   as body copy, and the caption below it says why it is worth keeping. */
.shop-thanks__track {
	font-weight: 600;
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.shop-thanks__track:hover,
.shop-thanks__track:focus-visible {
	border-bottom-color: currentColor;
}

.shop-thanks__next small {
	display: inline-block;
	margin-top: var(--space-1);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}

.shop-thanks__continue {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-7) auto 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-link);
	text-decoration: none;
	transition:
		color var(--motion-duration-fast) var(--motion-ease-standard),
		opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

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

/* Pointer-down feedback (DESIGN-SPEC.md section 1). */
.shop-thanks__continue:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

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

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

/* Failed order, keep the same shell but dye the check chip red. */
.shop-thanks--failed .shop-thanks__check {
	background-color: var(--shop-notice-accent-error);
}

/* ============================================================
 * 5. EMPTY CART
 *
 * Replaces SHOP-1's plain centered text with a hero-icon empty state.
 * SHOP-1's .cart-empty rules already provide the centered text + spacing;
 * we add the icon column and the pill CTA on top.
 * ============================================================ */

.shop-empty-cart {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--space-10) var(--shop-gutter, var(--space-5));
	text-align: center;
}

.shop-empty-cart__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--shop-empty-icon-size);
	height: var(--shop-empty-icon-size);
	margin: 0 auto var(--space-6);
	color: var(--color-text-muted);
	background-color: var(--color-bg-elevated);
	border-radius: 50%;
}

.shop-empty-cart__icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

/*
 * Empty-cart heading.
 *
 * The element is an <h2> (cart-empty.php), demoted from <h1> so the
 * page-title <h1> ("Warenkorb") stays the sole top-level heading on the
 * page. Visually we keep it hero-sized via --font-size-40 to match the
 * sibling .shop-thanks__heading (success-state hero) and read as the
 * dominant title of the empty-state surface.
 */
.shop-empty-cart__heading {
	margin: 0 0 var(--space-3);
	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-empty-cart__lead {
	margin: 0 auto var(--space-7);
	max-width: 420px;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.shop-empty-cart__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--shop-pill-pad-y, var(--space-3)) var(--shop-pill-pad-x, var(--space-7));
	background-color: var(--color-cta);
	color: var(--color-cta-ink);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
	border-radius: var(--radius-control);
	transition:
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* The ink stays EMO DEEP through hover. It used to flip to inverse
 * white here, which lands at 1.53:1 on the hover tint and is exactly
 * the pairing DESIGN-SPEC.md section 11 says is never used; every
 * other CTA in the theme keeps --color-cta-ink, which is 9.71:1. */
.shop-empty-cart__cta:hover,
.shop-empty-cart__cta:focus-visible {
	background-color: var(--color-cta-hover);
}

/* Pointer-down feedback (DESIGN-SPEC.md section 1). */
.shop-empty-cart__cta:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * 6. QUANTITY-INPUT POLISH
 *
 * Light-touch refinement of WC's number input. We don't add custom +/-
 * buttons (that requires JS); instead we hide the browser's default
 * spinner in Firefox/WebKit and rely on the keyboard arrow + the cart's
 * "Update" button. This makes the input read as a clean numeric chip.
 * ============================================================ */

.woocommerce .quantity input.qty,
.shop-cart__qty input.qty,
.shop-product__summary .quantity input.qty {
	-moz-appearance: textfield;          /* Firefox: hide spinners */
}

.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.shop-cart__qty input.qty::-webkit-inner-spin-button,
.shop-cart__qty input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;            /* Safari/Chromium */
	margin: 0;
}

/* ============================================================
 * Responsive
 *   1024px : mini-cart still anchored, search grid 3 → 2
 *    833px : mini-cart panel becomes wider/centered, thank-you meta
 *            strip stacks. The search grid and the customer-details
 *            pair STAY 2-up, a portrait tablet has the width for them.
 *     640px : phone, search grid 2 → 1, customer-details stacks
 * ============================================================ */

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

@media (max-width: 833px) {
	:root {
		--shop-minicart-width: calc(100vw - var(--space-5) * 2);
		--shop-thanks-pad-y:   var(--space-7);
	}

	/* Mobile: tap on the cart icon should go to /warenkorb/ instead of
	   trying to hover the panel. The panel is hidden so the link wins.
	   Cover both pre-replace and post-replace class states. */
	.site-nav__cart-panel,
	.site-nav__cart > .widget_shopping_cart_content,
	.site-nav__cart:hover .site-nav__cart-panel,
	.site-nav__cart:hover > .widget_shopping_cart_content,
	.site-nav__cart:focus-within .site-nav__cart-panel,
	.site-nav__cart:focus-within > .widget_shopping_cart_content {
		display: none;
	}

	.shop-thanks__meta {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.shop-thanks__heading {
		font-size: var(--font-size-28);
	}

}

/* ============================================================
 * Phone, 640px. Declared AFTER the 1024px block so the narrower
 * query wins on source order at equal specificity.
 * ============================================================ */

@media (max-width: 640px) {
	.shop-search__grid {
		grid-template-columns: 1fr;
	}

	/* Billing and shipping address blocks: two short addresses side by
	   side still fit a 768px tablet, they only need stacking on a phone. */
	.woocommerce-customer-details .addresses {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Reduced motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	/* Mini-cart: the slide/scale entrance becomes a short opacity
	   cross-fade (DESIGN-SPEC.md section 7); the visibility delay tracks
	   the shortened fade so exit still completes before hiding. */
	.site-nav__cart-panel,
	.site-nav__cart > .widget_shopping_cart_content {
		transform: none;
		transition:
			opacity 120ms ease,
			visibility 0s linear 120ms;
	}

	.site-nav__cart:hover .site-nav__cart-panel,
	.site-nav__cart:hover > .widget_shopping_cart_content,
	.site-nav__cart:focus-within .site-nav__cart-panel,
	.site-nav__cart:focus-within > .widget_shopping_cart_content {
		transform: none;
		transition:
			opacity 120ms ease,
			visibility 0s linear 0s;
	}

	/* Compress presses drop their transform, the fill/opacity shift
	   stays as pointer-down feedback (spec section 7 keeps comprehension
	   feedback). */
	.site-nav__cart .woocommerce-mini-cart__buttons .button:active,
	.site-nav__cart .buttons .button:active,
	.shop-empty-cart__cta:active {
		transform: none;
	}

	.shop-thanks__continue-chev,
	.shop-thanks__track {
		transition: none;
	}

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

/* ============================================================
 * a11y, supplemental focus indicators.
 *
 * .shop-thanks__continue, .shop-thanks__track and .shop-empty-cart__cta
 * only color-shift on :focus-visible. Add a discrete outline so keyboard
 * users get a ring matching the rest of the chrome (2px solid
 * --color-link, offset 4).
 * ============================================================ */
.shop-thanks__continue:focus-visible,
.shop-thanks__track:focus-visible,
.shop-empty-cart__cta:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}