/*
 * WooCommerce product card + archive — matched to the prototype's ProductCard
 * (src/primitives.jsx). Native Blocksy/WooCommerce loop markup, styled to the
 * design: sharp corners, #DFDFDF image well, bottom-left badge, title 15/600,
 * price 16/600, yellow add-to-cart, star rating. Tokens from tokens.css.
 */

/* ---------- Grid spacing ---------- */
.woocommerce ul.products,
ul.products.products { gap: 20px; margin: 0; }
ul.products li.product { margin: 0 !important; width: auto !important; min-width: 0 !important; }

/* ---------- Card ---------- */
ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--sisa-panel);
	/* design ProductCard: white-bg cards (home grids etc.) get a 1px stroke; the grey
	   shop archive stays borderless (override below) — separation there is the grid gap. */
	border: 1px solid var(--sisa-bg-archive);
	border-radius: 0;
	transition: box-shadow .2s ease;
}
/* Grey shop/category archive (inside .sisa-shop-main) + WooCommerce contexts on grey: no stroke. */
.sisa-shop-main ul.products li.product { border: 0; }
ul.products li.product:hover { box-shadow: var(--sisa-shadow-card); }

/* ---------- Media well ---------- */
ul.products li.product figure { position: relative; margin: 0; }
ul.products li.product .ct-media-container,
ul.products li.product > a:first-child {
	display: block; aspect-ratio: 1 / 1; background: var(--sisa-bg-card); overflow: hidden;
	border-radius: 0 !important; /* Blocksy rounds the media well 3px → white card bg peeks at corners */
}
ul.products li.product img {
	width: 100% !important; height: 100% !important;
	object-fit: contain; aspect-ratio: 1 / 1 !important; border-radius: 0 !important;
	/* No blend mode — `multiply` was dimming packshots against the grey well.
	   The design renders images plain on the #DFDFDF well (primitives.jsx). */
	mix-blend-mode: normal;
}

/* Stock icon — the legacy shop's per-zone level icon (full green / ¾ gelb /
   ½ gelb / rot; functions/commerce/stock-status.php). The element is emitted as
   a hidden marker and relocated by shop.js onto the <li> (so the tooltip isn't
   clipped by the figure's overflow). The inline SVG replicates the legacy
   stock-N.svg set 1:1. */
ul.products li.product figure::before { content: none; } /* retire the old pseudo dot */
ul.products li.product { position: relative; }
ul.products li.product > .sisa-card-stock {
	position: absolute; top: 12px; left: 12px; z-index: 4;
	width: 16px; height: 16px;
	display: grid; place-items: center; cursor: help;
}
ul.products li.product > .sisa-card-stock svg.sisa-stock-ico { width: 16px; height: 16px; display: block; }
.sisa-card-stock--marker { display: none !important; }

/* Smooth fluid stock tooltip — shared by the card dot and the product-page stock
   dot (.sisa-stip carries data-stip). Opens above the dot with a soft fade+rise. */
.sisa-stip { position: relative; }
.sisa-stip::after {
	content: attr(data-stip);
	position: absolute; left: 50%; bottom: calc(100% + 10px);
	transform: translate(-50%, 6px) scale(.97); transform-origin: bottom center;
	background: var(--sisa-emphasis, #1a1a1a); color: #fff;
	font-family: var(--sisa-mono, ui-monospace, monospace);
	font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .2px;
	white-space: nowrap; padding: 7px 10px;
	opacity: 0; pointer-events: none; z-index: 60;
	box-shadow: var(--sisa-shadow-pop, 0 10px 26px rgba(0, 0, 0, .2));
	transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1);
}
.sisa-stip::before {
	content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px);
	width: 9px; height: 9px; background: var(--sisa-emphasis, #1a1a1a);
	transform: translate(-50%, 6px) rotate(45deg);
	opacity: 0; pointer-events: none; z-index: 61;
	transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1);
}
.sisa-stip:hover::after, .sisa-stip:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sisa-stip:hover::before, .sisa-stip:focus-visible::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
.sisa-stip:focus { outline: none; }
/* Card dot sits near the top-left edge → nudge its tooltip right so it doesn't
   spill off the card's left side. */
ul.products li.product > .sisa-card-stock.sisa-stip::after { left: 0; transform: translate(-4px, 6px) scale(.97); }
ul.products li.product > .sisa-card-stock.sisa-stip:hover::after,
ul.products li.product > .sisa-card-stock.sisa-stip:focus-visible::after { transform: translate(-4px, 0) scale(1); }
ul.products li.product > .sisa-card-stock.sisa-stip::before { left: 8px; }

/* Facts stack — top-right of the figure, from the product's _calories /
   _liters metas (functions/shop/product-card.php). Design: white plate, mono
   12/600, tabular, smaller grey unit suffix ("kcal" / "L"). Products carrying
   both stack the pills vertically, right-aligned, kcal first. Hidden as a
   marker until shop.js moves it in. */
ul.products li.product .sisa-card-facts {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
ul.products li.product .sisa-card-fact {
	display: inline-flex; align-items: baseline; gap: 3px; line-height: 1;
	padding: 5px 10px; background: var(--sisa-panel); color: var(--sisa-ink);
	font-family: var(--sisa-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
ul.products li.product .sisa-card-fact span { font-size: 10px; font-weight: 500; color: var(--sisa-text-2); }
.sisa-card-facts--marker { display: none !important; }

/* Out-of-stock: the design communicates it via the grey dot only (no text plate).
   Blocksy renders a rounded "AUSVERKAUFT" span top-left that collides with the
   stock dot — hide it and let the grey figure::before dot carry the state. */
ul.products li.product .out-of-stock-badge { display: none !important; }

/* Sale badge — bottom-left, dark plate, Brauer */
ul.products li.product .onsale {
	position: absolute; top: auto; bottom: 12px; left: 12px; right: auto; z-index: 2;
	margin: 0; min-width: 0; min-height: 0; width: auto; height: auto;
	padding: 4px 10px; line-height: 1; border-radius: 0;
	background: var(--sisa-emphasis); color: var(--sisa-on-emphasis);
	font-family: var(--sisa-display); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
}

/* ---------- Body ---------- */
ul.products li.product .woocommerce-loop-product__title {
	padding: 16px 18px 0; margin: 0;
	font-family: var(--sisa-body); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sisa-ink);
	/* the global heading rule (tokens.css) sets letter-spacing:-0.4px on h2 — reset it; the design card title has none */
	letter-spacing: normal;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
ul.products li.product .woocommerce-loop-product__title a,
ul.products li.product a.woocommerce-LoopProduct-link { color: inherit; text-decoration: none; }

/* hide loop excerpt + category meta on cards (design has neither). NOTE: not
   prefixed with `.woocommerce` so it also covers the homepage product grids,
   whose ul.products has no `.woocommerce` ancestor (deals + bestseller cards). */
ul.products li.product .ct-woo-card-excerpt,
ul.products li.product [class*="excerpt"],
ul.products li.product .woocommerce-product-details__short-description,
ul.products li.product .posted_in,
ul.products li.product .product_meta,
ul.products li.product .ct-woo-card-categories,
ul.products li.product .ct-meta-categories,
ul.products li.product [class*="meta-categories"],
ul.products li.product .entry-meta,
ul.products li.product .product-category,
ul.products li.product > p:not(.price) { display: none !important; }

/* Result count is not in the design */
.woocommerce .woocommerce-result-count { display: none !important; }

/* Blocksy's "listing top" bar (result count + ordering) is redundant — we render
   our own breadcrumb/sort row (.sisa-shop-top). Hiding it also removes its ~25px
   bottom margin, so the products grid starts flush with the sidebar top. */
.sisa-shop-main .woo-listing-top,
.sisa-shop-main .woocommerce-products-header { display: none !important; }

/* Price */
ul.products li.product .price {
	padding: 10px 18px 0; margin: 0;
	font-family: var(--sisa-body); font-size: 16px; font-weight: 600; color: var(--sisa-ink);
}
ul.products li.product .price del { color: var(--sisa-text-3); font-weight: 400; font-size: 13px; margin-left: 6px; opacity: 1; }
ul.products li.product .price ins { text-decoration: none; }

/* Star rating */
ul.products li.product .star-rating {
	margin: 10px 18px 0; font-size: 13px; color: var(--sisa-yellow); width: 5.4em; line-height: 1;
}
ul.products li.product .star-rating::before { color: var(--sisa-hairline); }
ul.products li.product .star-rating span::before { color: var(--sisa-yellow); }

/* Action row (sisa-shop.js): price + wishlist + yellow cart ICON — matches ProductCard.
   Cards fill the row height (equal height); margin-top:auto pins this row to the bottom so
   the price lines up across the row, margin-bottom:0 kills the trailing gap. The earlier
   white space was Blocksy's empty .ct-woo-card-actions (hidden below), not this row. */
ul.products li.product .sisa-card-actions {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin: auto 0 0; padding: 12px 18px 16px;
}
ul.products li.product .sisa-card-actions .price { padding: 0; margin: 0; text-align: left; }
/* Discounted price: the .sale-price wrapper is an inline-flex that a price plugin centres
   (justify-content:center). Force it LEFT-aligned (new price, then struck old price). It may
   wrap the struck price to a new line when space is tight — left-packed, never centred, and
   WITHOUT widening the card (cards keep equal width via min-width:0 + minmax(0,1fr)). */
ul.products li.product .price .sale-price { display: inline-flex; justify-content: flex-start !important; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; line-height: 1.15; }
/* Blocksy's own (now-empty) card-action area trails the card and adds height — hide it
   on enhanced cards (the real button lives in .sisa-card-actions). */
ul.products li.product[data-sisa-card] .ct-woo-card-actions { display: none !important; }
.sisa-card-icons { display: flex; gap: 6px; flex: none; }
.sisa-card-wish,
ul.products li.product .button.sisa-card-cart {
	width: 32px !important; height: 32px !important;
	min-width: 0 !important; min-height: 0 !important; max-height: 32px !important; /* beat Blocksy's button min-height (was rendering 40px tall) */
	padding: 0 !important; margin: 0 !important; flex: 0 0 32px !important;
	display: inline-flex !important; align-items: center; justify-content: center; border-radius: 0 !important;
	font-size: 0 !important; line-height: 0; box-sizing: border-box;
}
.sisa-card-wish { border: 1px solid var(--sisa-hairline); background: var(--sisa-panel, #fff); } /* panel token: white in light, flips in dark */
.sisa-card-wish svg { width: 14px; height: 14px; fill: none; stroke: var(--sisa-ink); stroke-width: 2; transform: translateY(-1px); }
.sisa-card-wish:hover { border-color: var(--sisa-ink); }

/* Blocksy's functional wishlist button, relocated into the actions row by shop.js —
   restyled to the design heart (32px square; outline ink → solid brand-red when saved). */
.sisa-card-icons .ct-wishlist-button-archive {
	width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important;
	flex: 0 0 32px !important; padding: 0 !important; margin: 0 !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	border: 1px solid var(--sisa-hairline) !important; background: var(--sisa-panel, #fff) !important; border-radius: 0 !important;
	box-shadow: none !important; cursor: pointer; color: var(--sisa-ink);
}
.sisa-card-icons .ct-wishlist-button-archive:hover { border-color: var(--sisa-ink) !important; }
.sisa-card-icons .ct-wishlist-button-archive svg { width: 14px; height: 14px; transform: translateY(-1px); fill: none; stroke: var(--sisa-ink); stroke-width: 2; transition: fill .15s ease, stroke .15s ease; }
.sisa-card-icons .ct-wishlist-button-archive[data-button-state="active"] svg { fill: var(--sisa-yellow, #f4d435); stroke: var(--sisa-yellow-ink, #1a1a1a); }
.sisa-card-icons .ct-wishlist-button-archive .ct-tooltip { display: none; } /* design has no card tooltip */
ul.products li.product .button.sisa-card-cart { background: var(--sisa-yellow) !important; color: var(--sisa-yellow-ink) !important; border: 0 !important; }
ul.products li.product .button.sisa-card-cart::before { content: none !important; }
.sisa-card-cart__ico { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
/* Optical centering: the cart glyph's ink is right-heavy (solid basket right vs
   thin handle left) and top-heavy in its box — 1px left, and none of the old 1px
   up-shift, sits it visually centered in the 32px square (verified at 6x zoom). */
.sisa-card-cart__ico svg { display: block; width: 14px; height: 14px; fill: none; stroke: var(--sisa-yellow-ink); stroke-width: 2; transform: translate(-1px, 0); }

/* Add-to-cart pulse (restored from the legacy site): WooCommerce's AJAX adds .loading
   on click → the whole button shrinks; on success it adds .added → the button pops
   back to size and the cart icon swaps to a check-arrow. */
ul.products li.product .button.sisa-card-cart { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
ul.products li.product .button.sisa-card-cart.loading { transform: scale(.18); opacity: 1 !important; }
ul.products li.product .button.sisa-card-cart.loading::after,
ul.products li.product .button.sisa-card-cart.loading::before { content: none !important; display: none !important; } /* kill WC's default spinner */
ul.products li.product .button.sisa-card-cart.added { animation: sisa-cart-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sisa-cart-pop { 0% { transform: scale(.18); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* swap the cart glyph for a check-arrow once added */
ul.products li.product .button.sisa-card-cart.added .sisa-card-cart__ico { display: none; }
ul.products li.product .button.sisa-card-cart.added::after {
	content: ""; display: block; width: 15px; height: 15px; /* check glyph's ink is centered in its viewBox — no nudge */
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
}
/* hide WC's appended "View cart" link — the check-arrow is the confirmation */
ul.products li.product .added_to_cart { display: none !important; }
/* Fallback (no JS yet): a plain yellow button at the bottom */
ul.products li.product:not([data-sisa-card]) .button {
	margin: 14px 18px 18px; display: inline-block; padding: 11px 16px; border: 0; border-radius: 0;
	background: var(--sisa-yellow); color: var(--sisa-yellow-ink); font-size: 13px; font-weight: 600; text-transform: uppercase; text-decoration: none;
}

/* ---------- Category sidebar (shop + product-category archives) ---------- */
.sisa-shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.sisa-shop-main { min-width: 0; }
/* minmax(0,1fr) (not 1fr) so a wide item — e.g. a long sale price — can't blow out
   its column; all three stay equal width. */
.sisa-shop-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* design aside has no outer stroke — separation is the per-row bottom hairline */
.sisa-shop-sidebar { background: var(--sisa-panel); align-self: start; }
.sisa-cats { display: flex; flex-direction: column; }
.sisa-cats__group { border-bottom: 1px solid var(--sisa-hairline); }
.sisa-cats__row { display: flex; align-items: stretch; }
.sisa-cats__item { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 18px; color: var(--sisa-ink); text-decoration: none; font-size: 14px; }
.sisa-cats__top { border-bottom: 1px solid var(--sisa-hairline); }
/* Shade the whole row (incl. the toggle cell) so there's no vertical line left
   of the +/-. The bare "Alle Produkte" item (.sisa-cats__top, not inside a
   .sisa-cats__row) keeps its own highlight via the .is-active rule below. */
.sisa-cats__row:has(.sisa-cats__item.is-active) { background: var(--sisa-bg-card); }
.sisa-cats__row:hover:not(:has(.is-active)) { background: var(--sisa-bg); }
.sisa-cats__row .sisa-cats__item:hover,
.sisa-cats__row .sisa-cats__item.is-active { background: transparent; }
.sisa-cats__item:hover { background: var(--sisa-bg); }
.sisa-cats__item.is-active { font-weight: 600; background: var(--sisa-bg-card); }
.sisa-cats__count { font-family: var(--sisa-mono); font-size: 11px; color: var(--sisa-text-3); flex: none; }
.sisa-cats__toggle { flex: none; width: 40px; border: 0; background: transparent; cursor: pointer; position: relative; }
.sisa-cats__toggle::before, .sisa-cats__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; background: var(--sisa-text-3); transform: translate(-50%, -50%); transition: opacity .18s ease; }
.sisa-cats__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.sisa-cats__group.is-open .sisa-cats__toggle::after { opacity: 0; }
.sisa-cats__children { display: none; padding: 2px 18px 14px; }
.sisa-cats__group.is-open .sisa-cats__children { display: block; }
.sisa-cats__child { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; line-height: 1.4; color: var(--sisa-text-2); text-decoration: none; }
.sisa-cats__child::before { content: ""; width: 8px; height: 1px; background: var(--sisa-text-3); flex: none; }
.sisa-cats__child:hover, .sisa-cats__child.is-active { color: var(--sisa-ink); }
.sisa-cats__child.is-active { font-weight: 600; }

/* ---------- Categories collapse into a slide-in drawer ≤1023 (design narrow) ---------- */
.sisa-cats-trigger,
.sisa-cats__drawerhead,
.sisa-cats-veil { display: none; }
@media (max-width: 1023px) {
	.sisa-cats-trigger {
		display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
		background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); border-radius: 0;
		font-family: var(--sisa-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
		color: var(--sisa-ink); cursor: pointer; margin-bottom: 16px;
	}
	.sisa-shop-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: min(340px, 86vw);
		transform: translateX(-100%); transition: transform .25s ease, box-shadow .25s ease;
		overflow-y: auto; align-self: stretch;
		/* No shadow while collapsed — it sits off-screen left and the shadow would bleed
		   12px into the viewport. Shadow only when open. */
		box-shadow: none;
	}
	.sisa-shop-sidebar.is-open { transform: translateX(0); box-shadow: 12px 0 32px rgba(0, 0, 0, .18); }
	.sisa-cats__drawerhead {
		display: flex; align-items: center; justify-content: space-between;
		padding: 16px 18px; border-bottom: 1px solid var(--sisa-hairline);
		position: sticky; top: 0; background: var(--sisa-panel); z-index: 1;
	}
	.sisa-cats__drawerhead span { font-family: var(--sisa-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sisa-text-2); }
	.sisa-cats__close { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--sisa-ink); }
	.sisa-cats__close svg { width: 18px; height: 18px; }
	.sisa-cats-veil.is-open { display: block; position: fixed; inset: 0; z-index: 199; background: var(--sisa-veil); }
}

/* Top bar: breadcrumb (left) + sort (right) — above the sidebar+grid, flush */
.sisa-shop-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sisa-shop-bc { display: flex; align-items: center; gap: 8px; font-family: var(--sisa-mono); font-size: 12px; letter-spacing: .4px; color: var(--sisa-text-2); }
.sisa-shop-bc a { color: var(--sisa-text-2); text-decoration: none; }
.sisa-shop-bc a:hover { color: var(--sisa-ink); }
.sisa-shop-bc__cur { color: var(--sisa-ink); }
.sisa-shop-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.sisa-shop-sort label { margin: 0; line-height: 1; font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--sisa-text-2); }
/* padding-block 8/10 (not 9/9): lifts the value text 1px so its optical middle
   (cap-height midpoint) sits on the same line as the mono uppercase label. */
.sisa-shop-sort select { border: 1px solid var(--sisa-hairline); border-radius: 0; background: var(--sisa-panel); padding: 8px 30px 10px 12px; font-size: 13px; color: var(--sisa-ink); }
/* default WC ordering is moved into the top bar */
.woocommerce-page .woocommerce-ordering { display: none !important; }
.sisa-shop-panel { margin-bottom: 24px; }

/* Category header panel (title + SEO text, folded corner) */
.sisa-shop-panel { position: relative; overflow: hidden; background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); padding: 26px 30px; margin-bottom: 24px; }
.sisa-shop-panel__fold { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 16px 16px 0; border-color: var(--sisa-yellow) var(--sisa-bg-archive); }
.sisa-shop-panel__inner { max-width: 760px; }
.sisa-shop-panel__title { margin: 0; font-family: var(--sisa-display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.5px; color: var(--sisa-ink); }
.sisa-shop-panel__desc { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--sisa-text-1); }
.sisa-shop-panel__desc p { margin: 6px 0 0; }
@media (max-width: 1023px) {
	.sisa-shop-layout { grid-template-columns: 1fr; gap: 20px; }
	.sisa-shop-main ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) { .sisa-shop-main ul.products { grid-template-columns: 1fr !important; } }

/* ---------- Category archive intro / SEO text ---------- */
.woocommerce .term-description,
.woocommerce-products-header__description,
.woocommerce-archive-description,
.woocommerce-archive-description p {
	max-width: 820px; margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--sisa-text-1);
}

/* ---------- Archive header / toolbar ---------- */
.woocommerce-products-header { padding-block: 12px 4px; }
.woocommerce-products-header__title.page-title {
	font-family: var(--sisa-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); text-align: left; margin: 0;
}
.woocommerce .woocommerce-result-count { color: var(--sisa-text-2); font-size: 14px; margin: 0; }
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--sisa-hairline); border-radius: 0; padding: 9px 36px 9px 14px; font-size: 14px; background-color: #fff;
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--sisa-hairline); border-radius: 0; padding: 0 12px; color: var(--sisa-ink); font-weight: 500;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--sisa-emphasis); color: #fff; border-color: var(--sisa-emphasis); }

/* ---------- "Mehr laden" load-more bar (replaces pagination) ---------- */
.sisa-loadmore { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; }
/* thin progress slider — fraction of products loaded (Galaxus-style) */
.sisa-loadmore__track { width: 200px; max-width: 60%; height: 3px; background: var(--sisa-bg-card); overflow: hidden; }
.sisa-loadmore__bar { height: 100%; background: var(--sisa-yellow); transition: width .45s ease; }
.sisa-loadmore__count { font-family: var(--sisa-mono); font-size: 12px; letter-spacing: .4px; color: var(--sisa-text-2); }
.sisa-loadmore__count .sisa-loadmore__shown { color: var(--sisa-ink); font-weight: 600; }
.sisa-loadmore__btn {
	padding: 16px 32px; background: var(--sisa-emphasis); color: var(--sisa-yellow); border: 0; border-radius: 0;
	font-family: var(--sisa-display); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase;
	cursor: pointer; transition: filter .15s ease;
}
.sisa-loadmore__btn:hover { filter: brightness(1.18); }
.sisa-loadmore__btn.is-loading { opacity: .7; cursor: progress; }
.sisa-loadmore__top {
	position: absolute; right: 0; bottom: 4px;
	font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
	color: var(--sisa-text-2); text-decoration: none;
}
.sisa-loadmore__top:hover { color: var(--sisa-ink); }

/* Breathing room between the grid / "Mehr laden" and the Checkliste·Berater CTA on
   shop + category archives (the CTA is appended after the main content with no margin). */
.post-type-archive-product .sisa-ctapair,
.tax-product_cat .sisa-ctapair,
.woocommerce-shop .sisa-ctapair { margin-top: 64px; }
@media (max-width: 600px) { .sisa-loadmore__top { position: static; } }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.woocommerce ul.products { gap: 14px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
}

/* Grundpreis on cards (commerce/grundpreis.php, DE zone) — lands after the
   .sisa-card-actions row once shop.js wraps the price; a quiet bottom line. */
ul.products li.product > .sisa-grundpreis {
	display: block; padding: 0 18px 14px; margin-top: -8px;
	font-size: 12px; font-weight: 400; color: var(--sisa-text-2);
}