/*
 * Single product — matched to src/page-product.jsx. Native WooCommerce/Blocksy
 * single-product markup, styled to the design: #EEEDED page, #DFDFDF gallery well,
 * body-font title, 24px price, sharp dark "In den Warenkorb", Brauer tabs with
 * yellow active underline, mono meta. Tokens from tokens.css.
 * (Deferred: 280px category sidebar, kcal/people pill + nutrition/contents tabs —
 *  those need product meta/ACF data not present on dev.)
 */

/* Page bg only on the content area — NOT .ct-container (the header uses it too,
   which caused the header colour glitch). */
body.single-product,
.single-product #main,
.single-product .ct-main-content { background: var(--sisa-bg-archive); }

/* ---------- After-header spacing: kill Blocksy's #main + ct-container-full padding
   (was 28 + 60 = stacked massive gap); the wrap owns a ~70px desktop top space. */
.single-product #main { padding-top: 0 !important; padding-bottom: 0 !important; }
.single-product #main .ct-container-full { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---------- Layout: constrained wrapper + breadcrumb + sidebar/content grid ---------- */
/* Match the header .ct-container exactly: width = Blocksy edge-spacing (90vw) capped at
   --sisa-container; the gutter is the centered width (no inline padding). Mobile =
   full-width + var(--sisa-pad), same as the header. */
.single-product .sisa-product-wrap { width: var(--theme-container-edge-spacing, 90vw); max-width: var(--sisa-container); margin-inline: auto; padding: 36px 0 80px; box-sizing: border-box; }
@media (max-width: 1023px) { .single-product .sisa-product-wrap { width: 100%; padding-inline: var(--sisa-pad); } }
@media (max-width: 782px) { .single-product .sisa-product-wrap { padding-top: 24px; } }
.single-product .sisa-pd-breadcrumb { font-family: var(--sisa-mono); font-size: 12px; letter-spacing: .4px; color: var(--sisa-text-2); margin-bottom: 24px; }
.single-product .sisa-pd-breadcrumb a { color: var(--sisa-text-2); text-decoration: none; }
.single-product .sisa-pd-breadcrumb a:hover { color: var(--sisa-ink); }
.single-product .sisa-pd-breadcrumb span { margin: 0 8px; }
.single-product .sisa-pd-breadcrumb .sisa-pd-breadcrumb__cur { margin: 0; color: var(--sisa-ink); }
.single-product .sisa-product-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
/* no gap here (a phantom notices wrapper before div.product was offsetting the
   gallery 24px below the sidebar); div.product owns the section gaps, CtaCta gets
   its own top margin. */
.single-product .sisa-product-main { min-width: 0; display: flex; flex-direction: column; }
/* sisa-product-main has no flex gap (avoids a phantom notices-wrapper gap), so
   its sections after div.product get an explicit 30px top gap. */
.single-product .sisa-product-main > .sisa-ctapair,
.single-product .sisa-product-main > .related,
.single-product .sisa-product-main > .up-sells,
.single-product .sisa-product-main > .upsells { margin-top: 30px; }
/* the product-content tab block (functions/commerce/product-content.php) is a flex
   child of div.product (gap:30 already provides the section spacing) — drop its
   own 48px top margin so it isn't double-spaced. */
.single-product .sisa-product-content { margin-top: 0 !important; }
.single-product .sisa-product-main > .woocommerce-notices-wrapper:empty { display: none; }
.single-product .sisa-product-sidebar { background: var(--sisa-panel); align-self: start; }

/* div.product = white panel (block). Blocksy nests gallery+summary in a
   .product-entry-wrapper; that wrapper is the hero grid, NOT div.product. */
/* div.product = transparent column; each section (hero, tabs, related) is its own
   white panel with a 24px gap between (matches the design's separate sections). */
.single-product div.product {
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 0;
}
/* Hero: gallery (grey well, left) + summary (right). Override Blocksy's
   width-constraint + WC's 48%/float on gallery & summary. */
.single-product .product-entry-wrapper {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	align-items: stretch;
	background: var(--sisa-panel);   /* hero is its own white panel */
}
.single-product .product-entry-wrapper > .woocommerce-product-gallery,
.single-product .product-entry-wrapper > .summary,
.single-product .product-entry-wrapper > .entry-summary { width: auto !important; float: none !important; margin: 0 !important; }
.single-product .product-entry-wrapper > .woocommerce-product-gallery {
	background: var(--sisa-bg-card); display: flex; align-items: center; justify-content: center; padding: 0; min-width: 0; overflow: hidden;
	/* Blocksy sets align-self:flex-start on the gallery — that defeated the grid's
	   stretch, so when the summary is TALLER the grey well stopped at the image and
	   a white bar (the hero panel bg) showed below. Stretch restores the full-height
	   grey column; the flex centering above keeps the media block centered in it. */
	align-self: stretch !important;
}
/* gallery must not flash white on hover (Blocksy zoom/hover bg) */
.single-product .woocommerce-product-gallery .flexy,
.single-product .woocommerce-product-gallery .flexy-item,
.single-product .woocommerce-product-gallery .flexy-item .ct-media-container,
.single-product .woocommerce-product-gallery .flexy:hover,
.single-product .woocommerce-product-gallery .ct-media-container:hover { background: transparent !important; }
/* Kill the WooCommerce/jQuery gallery zoom overlay (`<img class="zoomImg">`): it
   paints a WHITE background and shows a MAGNIFIED (cropped) slice of the packshot
   on hover — both are design bugs. The feature is disabled in PHP
   (remove_theme_support 'wc-product-gallery-zoom'); this is the backstop guard so
   nothing can re-inject it. The design uses a single static, contained image. */
.single-product .woocommerce-product-gallery .zoomImg,
.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; }
/* Gallery image = square, contained, centered (vertically too if the summary is taller) */
.single-product .woocommerce-product-gallery .ct-product-gallery-container,
.single-product .woocommerce-product-gallery .flexy-container { width: 100%; }
/* square well: .flexy is forced to a 1:1 box (overflow-hidden so the image can't
   stretch it taller), the image fills it with object-fit:contain (letterboxed). */
.single-product .woocommerce-product-gallery .flexy { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; overflow: hidden; }
/* Blocksy/LiteSpeed put an inline aspect-ratio:3/4 on the gallery <img> — override
   it to a square and let object-fit:contain letterbox the real packshot.
   `.ct-media-container img` also covers the SINGLE-image case: when a product has
   only one image (or falls back to the placeholder) Blocksy renders NO .flexy
   slider — just .ct-product-gallery-container > figure.ct-media-container > img,
   which it styles object-fit:cover inside a 3:4 box, cropping a square packshot on
   the sides. Squaring + containing the img here fixes that (and the figure/well
   shrink-wrap to the square), while leaving the working multi-image slider — where
   this same rule resolves to identical props — untouched. */
.single-product .woocommerce-product-gallery .flexy img,
.single-product .woocommerce-product-gallery .ct-media-container img,
.single-product .woocommerce-product-gallery__image img {
	width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important;
	object-fit: contain !important; display: block;
}
.single-product .woocommerce-product-gallery .flexy-view,
.single-product .woocommerce-product-gallery .flexy-items,
.single-product .woocommerce-product-gallery .flexy-item,
.single-product .woocommerce-product-gallery .flexy-item .ct-media-container { height: auto; }
/* Gallery arrows: square + flush to the edges (Blocksy renders them round w/ 20px gap) */
.single-product .woocommerce-product-gallery .flexy-arrow-prev,
.single-product .woocommerce-product-gallery .flexy-arrow-next {
	width: 44px !important; height: 44px !important; border-radius: 0 !important;
	top: 50%; bottom: auto; transform: translateY(-50%); margin: 0 !important;
	background: var(--sisa-panel) !important; color: var(--sisa-ink) !important; border: 0;
	opacity: 1 !important; visibility: visible !important; z-index: 5 !important; /* above the image, always shown */
	display: grid !important; place-items: center;
}
.single-product .woocommerce-product-gallery .flexy-arrow-prev svg,
.single-product .woocommerce-product-gallery .flexy-arrow-next svg { width: 18px; height: 18px; color: var(--sisa-ink); fill: currentColor; }
.single-product .woocommerce-product-gallery .flexy-arrow-prev { left: 0 !important; right: auto !important; }
.single-product .woocommerce-product-gallery .flexy-arrow-next { right: 0 !important; left: auto !important; }
/* the gallery column hides overflow for the square crop, but arrows sit at the
   edges — keep the .flexy-container visible so they aren't clipped */
.single-product .woocommerce-product-gallery .flexy-container { position: relative; overflow: visible; }
/* Arrows get a hover for the first time (the lightbox trigger below needs one, and
   the well's overlay tiles must speak one language): tile inverts to emphasis. */
.single-product .woocommerce-product-gallery .flexy-arrow-prev,
.single-product .woocommerce-product-gallery .flexy-arrow-next { transition: background .12s ease; }
.single-product .woocommerce-product-gallery .flexy-arrow-prev:hover,
.single-product .woocommerce-product-gallery .flexy-arrow-next:hover { background: var(--sisa-emphasis) !important; }
.single-product .woocommerce-product-gallery .flexy-arrow-prev:hover svg,
.single-product .woocommerce-product-gallery .flexy-arrow-next:hover svg { color: var(--sisa-on-emphasis); }
/* Lightbox trigger (Blocksy renders it while the `has_product_single_lightbox`
   theme mod is on): default = 40px white CIRCLE floating 20px inside the media
   box — foreign to the system. Restyle to the arrow-tile grammar: 44px sharp
   square, panel bg, ink glyph, flush in the well's TOP-RIGHT corner (arrows own
   the side edges, badges the top-left; expand-icon glyph is Blocksy's own mask
   and scales with the box). Colors ride Blocksy's --lightbox-button-* hooks —
   hover = the same emphasis inversion as the arrows. */
.single-product .woocommerce-product-gallery .ct-product-gallery-container { position: static; } /* anchor the trigger to the FULL grey well, not the vertically-centered media square */
.single-product .woocommerce-product-gallery__trigger {
	--lightbox-button-icon-color: var(--sisa-ink);
	--lightbox-button-background-color: var(--sisa-panel);
	--lightbox-button-icon-hover-color: var(--sisa-on-emphasis);
	--lightbox-button-hover-background-color: var(--sisa-emphasis);
	width: 44px; height: 44px; top: 0; inset-inline-end: 0;
	border-radius: 0 !important;
	transition: background .12s ease, color .12s ease;
}
/* PhotoSwipe lightbox (WC pswp, same theme mod): packshots are transparent PNGs
   that would float on the near-black dim — give the IMAGE surface the same grey
   plate as the product-card / gallery well. --sisa-bg-card flips with the theme
   (#DFDFDF light / #181510 dark); the backdrop stays PhotoSwipe's dim. Loading
   placeholders excluded so they don't flash as empty grey boxes. */
.single-product .pswp__img:not(.pswp__img--placeholder) { background: var(--sisa-bg-card); }
/* PhotoSwipe CHROME (T30b) — WC's default skin paints the counter/zoom/fs/share/
   close buttons + nav arrows from a sprite (default-skin.png) as translucent
   washes, foreign to the system. Rebuilt in the T30 overlay-tile grammar: 44px
   sharp squares, panel bg, ink glyph — drawn via CSS mask + currentColor (the
   reset_variations technique; no sprite, no new asset files). Hover/focus-visible
   = brand-yellow fill, NOT the flexy arrows' panel→emphasis inversion: emphasis
   is (nearly) the lightbox backdrop itself, so that inversion dissolves here —
   yellow is the system's dark-surface accent (cf. .sisa-search__more:hover) and
   reads identically in both themes. The backdrop dim stays WC's (T30 decision).
   Selectors route through .pswp for (0,3,0) specificity over the skin's state
   rules; `display` is never touched, so PhotoSwipe keeps hiding/showing zoom/fs
   per capability (.pswp__element--disabled etc.). The three background
   declarations carry !important because WC's photoswipe.min.css hard-wires the
   sprite with `button.pswp__button { background-image: url(default-skin.png)
   !important }` + `background-color: transparent !important` (buttons, :hover
   AND the arrow ::before) — matching importance lets our higher specificity
   decide again. */
.single-product .pswp .pswp__button {
	width: 44px; height: 44px; margin: 0; float: none; border-radius: 0;
	background: var(--sisa-panel) !important; color: var(--sisa-ink);
	opacity: 1;                                   /* skin idles buttons at .75 */
	transition: background .12s ease, color .12s ease;
}
.single-product .pswp .pswp__button:hover,
.single-product .pswp .pswp__button:focus-visible {
	background: var(--sisa-yellow) !important; color: var(--sisa-yellow-ink); outline: none;
}
/* Glyphs: 18px (the flexy-arrow icon size) in currentColor, centered — buttons
   are position:relative from the skin. --pswp-glyph set per button below. */
.single-product .pswp .pswp__button::before {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 18px; height: 18px; background: currentColor !important;
	-webkit-mask: var(--pswp-glyph, none) center / contain no-repeat;
	mask: var(--pswp-glyph, none) center / contain no-repeat;
}
.single-product .pswp .pswp__button--zoom::before {
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
}
.single-product .pswp--zoomed-in .pswp__button--zoom::before {   /* magnifier-minus once zoomed */
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35M8 11h6'/%3E%3C/svg%3E");
}
.single-product .pswp .pswp__button--fs::before {
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}
.single-product .pswp--fs .pswp__button--fs::before {             /* collapse once fullscreen */
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3'/%3E%3C/svg%3E");
}
.single-product .pswp .pswp__button--close::before {
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* Top bar: the tiles carry the chrome — drop the full-width smoke wash. */
.single-product .pswp .pswp__top-bar { background: none; }
/* Counter „1 / 4" = mono chip in the emphasis/on-emphasis pair (the
   .sisa-pd-pill__unit grammar) — legible over both the dim and a zoomed plate. */
.single-product .pswp .pswp__counter {
	height: 44px; padding: 0 14px; display: flex; align-items: center;
	background: var(--sisa-emphasis); color: var(--sisa-on-emphasis);
	font-family: var(--sisa-mono); font-size: 12px; letter-spacing: .4px;
	line-height: 1; font-variant-numeric: tabular-nums; opacity: 1;
}
/* Share is permanently .pswp__element--disabled in WC's build — a dead control;
   remove it outright (!important mirrors the skin's own display toggling). */
.single-product .pswp .pswp__button--share { display: none !important; }
/* Nav arrows: the skin's 70×100 sprite ghosts → flexy-arrow tiles, flush at the
   viewport edges, vertically centered (same as the gallery well's arrows). */
.single-product .pswp .pswp__button--arrow--left,
.single-product .pswp .pswp__button--arrow--right { width: 44px; height: 44px; top: 50%; margin-top: -22px; }
.single-product .pswp .pswp__button--arrow--left { left: 0; }
.single-product .pswp .pswp__button--arrow--right { right: 0; }
.single-product .pswp .pswp__button--arrow--left::before {
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.single-product .pswp .pswp__button--arrow--right::before {
	--pswp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
/* Preloader: pinned top-center at every width (the skin floats it into the
   button row under 1024px, which would bump close off the corner); the white
   donut arc becomes brand yellow — the track sides stay transparent. */
.single-product .pswp .pswp__preloader { position: absolute; left: 50%; top: 0; margin: 0 0 0 -22px; float: none; }
.single-product .pswp .pswp__preloader__donut { border-top-color: var(--sisa-yellow); border-right-color: var(--sisa-yellow); }
/* Caption: WC renders an empty --fake bar — remove it; real captions (should a
   later build pass them) read as mono microcopy on the veil. */
.single-product .pswp .pswp__caption--fake { display: none; }
.single-product .pswp .pswp__caption { background: var(--sisa-veil); min-height: 0; }
.single-product .pswp .pswp__caption__center {
	font-family: var(--sisa-mono); font-size: 12px; letter-spacing: .4px; line-height: 1.6;
	text-align: center; max-width: 640px; padding: 13px 16px; color: var(--sisa-on-emphasis-muted);
}
.single-product .product-entry-wrapper > .summary,
.single-product .product-entry-wrapper > .entry-summary { padding: clamp(20px, 2.5vw, 36px); min-width: 0; align-self: center; display: flex; flex-direction: column;
	/* The summary column's REAL width (sidebar + 50/50 hero split) decides how the
	   buy row lays out — viewport breakpoints lie here, so it's a size container. */
	container-type: inline-size; container-name: sisa-summary; }
/* Design summary order: title → subtitle → kcal/stock → price → add-to-cart → meta */
.single-product .summary .product_title,
.single-product .entry-summary .product_title { order: 1; }
.single-product .summary .woocommerce-product-rating { order: 2; }
.single-product .summary .woocommerce-product-details__short-description,
.single-product .entry-summary .woocommerce-product-details__short-description { order: 3; margin-top: 12px; }
.single-product .summary .sisa-pd-meta,
.single-product .entry-summary .sisa-pd-meta { order: 4; }
.single-product .summary .price,
.single-product .entry-summary .price { order: 5; margin-top: 20px; }
/* Variable products: hide the price RANGE (summary direct-child .price); the
   default variation's single price (.woocommerce-variation-price .price) is shown. */
.single-product .product-type-variable .summary > .price,
.single-product .product-type-variable .entry-summary > .price { display: none; }
.single-product .woocommerce-variation-price { margin-top: 4px; }
.single-product .woocommerce-variation-price .price { font-family: var(--sisa-body); font-weight: 600; font-size: 24px; letter-spacing: -.2px; color: var(--sisa-ink); }
.single-product .summary .ct-product-add-to-cart,
.single-product .summary form.cart,
.single-product .entry-summary form.cart { order: 6; }
/* product meta (SKU/category) removed per design */
.single-product .summary .product_meta,
.single-product .entry-summary .product_meta { display: none !important; }
/* Blocksy summary dividers aren't in the design */
.single-product .summary .ct-product-divider,
.single-product .entry-summary .ct-product-divider { display: none; }
/* Dense right column — the design uses only top-margins, no trailing gaps. */
.single-product .summary > *,
.single-product .entry-summary > * { margin-bottom: 0 !important; }
.single-product .summary .woocommerce-product-details__short-description,
.single-product .entry-summary .woocommerce-product-details__short-description { margin-bottom: 0 !important; }
.single-product .summary .woocommerce-product-details__short-description p,
.single-product .entry-summary .woocommerce-product-details__short-description p { margin: 0 !important; }
.single-product .summary .price,
.single-product .entry-summary .price { margin-bottom: 0 !important; }
.single-product .summary form.cart,
.single-product .entry-summary form.cart { margin-bottom: 0 !important; }
/* tabs / related = separate white panels (gap from div.product flex shows between).
   Not scoped to direct children only — Blocksy may nest the related section. */
.single-product div.product > .woocommerce-tabs,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .related,
.single-product .up-sells,
.single-product .upsells { background: var(--sisa-panel); margin: 0; width: auto; float: none; }
.single-product .related.products,
.single-product .related,
.single-product .up-sells,
.single-product .upsells { padding: clamp(24px, 2.5vw, 32px); }
.single-product .related > h2,
.single-product .upsells > h2 { margin-top: 0; }
@media (max-width: 1023px) {
	.single-product .sisa-product-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.single-product .product-entry-wrapper { grid-template-columns: 1fr; }
}

/* WC/Blocksy breadcrumb hidden — our constrained .sisa-pd-breadcrumb replaces it. */
.single-product .woocommerce-breadcrumb,
.single-product .ct-breadcrumbs { display: none; }

/* Gallery well */
.single-product .woocommerce-product-gallery {
	background: var(--sisa-bg-card);
}
.single-product .woocommerce-product-gallery__image img { mix-blend-mode: normal; }
.single-product .flex-control-thumbs { margin-top: 10px; }

/* ---------- Summary ---------- */
.single-product .entry-summary .product_title,
.single-product .summary .product_title {
	font-family: var(--sisa-body) !important;
	font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.4px;
	color: var(--sisa-ink); margin: 0 0 8px;
}
.single-product .entry-summary .price,
.single-product .summary .price {
	font-family: var(--sisa-body); font-weight: 600; font-size: 24px; letter-spacing: -0.2px; color: var(--sisa-ink);
}
.single-product .entry-summary .price del { color: var(--sisa-text-3); font-weight: 400; font-size: 16px; }
.single-product .entry-summary .price ins { text-decoration: none; }
.single-product .woocommerce-product-details__short-description {
	font-size: 15px; line-height: 1.6; color: var(--sisa-text-1); margin-top: 12px;
}
.single-product .star-rating { color: var(--sisa-yellow); }

/* Stock indicator — green dot + check, matching the card/design stock state */
.single-product .stock.in-stock {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 16px; font-size: 14px; color: var(--sisa-ink);
}
.single-product .stock.in-stock::before {
	content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
	background: var(--sisa-stock-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.single-product .stock.out-of-stock {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--sisa-text-2);
}
.single-product .stock.out-of-stock::before {
	content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sisa-stock-off);
}

/* Variant select — full-width, design chevron, spaced below the price */
.single-product .ct-product-add-to-cart,
.single-product .summary form.cart,
.single-product .entry-summary form.cart { margin-top: 22px; }
.single-product form.variations_form.cart { display: block; margin-top: 16px; }   /* stack: select → price → add-to-cart row; tighter than the simple-product 22px — the label row above the select is gone */
/* Variation row: the attribute label ("Dosen"/"Pakete") is redundant — the option
   labels are self-explanatory ("24 Dosen · CHF 46.–") — so it is visually hidden
   but KEPT for screen readers (<label for> still names the select). The table is
   flattened to blocks so the select + reset icon share one flex line. */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
.single-product .variations { margin-bottom: 12px; }
.single-product .variations th.label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.single-product .variations td.value { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; padding: 0; } /* Blocksy's td.value is flex-COLUMN — pin the row */
.single-product .variations td.value select { flex: 1 1 auto; min-width: 0; }
/* "Auswahl zurücksetzen" — a quiet 48px icon button beside the select (was a text
   link on its own line). Icon = rotate-ccw from the stroke-2 icon family, drawn
   via mask so it inherits currentColor (WC pipes this link through wp_kses_post,
   which would strip inline SVG). While WC marks it visibility:hidden (nothing
   selected) it is fully collapsed, so the select spans the whole line. */
.single-product .variations .reset_variations {
	flex: 0 0 48px; width: 48px; height: 48px; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--sisa-hairline); background: var(--sisa-panel);
	color: var(--sisa-text-2); font-size: 0; line-height: 0; text-decoration: none;
	transition: color .12s ease, border-color .12s ease;
}
.single-product .variations .reset_variations:hover,
.single-product .variations .reset_variations:focus-visible { color: var(--sisa-ink); border-color: var(--sisa-ink); }
.single-product .variations .reset_variations::before {
	content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.single-product .variations .reset_variations[style*="hidden"] { display: none; }
.single-product .variations select,
.single-product .entry-summary select {
	height: 48px; width: 100%; border: 1px solid var(--sisa-hairline); border-radius: 0;
	background-color: var(--sisa-panel); padding: 0 36px 0 14px; font-size: 14px; color: var(--sisa-ink);
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23676562' stroke-width='1.6'><path d='m1 1.5 5 5 5-5'/></svg>");
	background-repeat: no-repeat; background-position: right 14px center;
}

/* Add-to-cart ROW — one line: dark CTA (flex) + qty stepper + wishlist heart */
.single-product .ct-cart-actions,
.single-product form.cart:not(.variations_form) {
	display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch; margin-top: 12px;
}
.single-product .ct-cart-actions .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
	order: 1; flex: 1 1 auto; min-width: 0;
	/* min/max pin the height against Blocksy's 55px button min-height — it was
	   rendering the CTA 3px taller than the 52px stepper/heart beside it. */
	height: 52px; min-height: 52px; max-height: 52px; padding: 0 20px;
	background: var(--sisa-emphasis) !important; color: var(--sisa-on-emphasis) !important;
	border: 0 !important; border-radius: 0;
	font-family: var(--sisa-body); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
	display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: opacity .15s ease;
}
.single-product .single_add_to_cart_button:hover { opacity: .9; }
.single-product .ct-cart-actions .quantity,
.single-product form.cart .quantity {
	order: 2; flex: 0 0 auto; display: flex; align-items: stretch; height: 52px; width: 140px;
	border: 1px solid var(--sisa-hairline); background: var(--sisa-panel);
}
.single-product form.cart .quantity input.qty {
	flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; border: 0 !important; border-radius: 0 !important; --theme-form-field-border-radius: 0 !important;
	text-align: center; font-size: 16px; font-weight: 600; color: var(--sisa-ink); background: transparent;
}
.single-product form.cart .quantity .ct-increase,
.single-product form.cart .quantity .ct-decrease { border-radius: 0 !important; }
/* wishlist heart — 52x52, last in the row */
/* Blocksy's functional wishlist button, relocated into the CTA row (JS). Hidden
   until relocated so it never flashes above the title. */
.single-product .summary > .ct-product-additional-actions { display: none; }
.single-product form.cart .ct-product-additional-actions { display: flex; order: 3; flex: 0 0 52px; width: 52px !important; height: 52px; } /* Blocksy gives the wrapper width:100% — it ate the row and clipped the CTA */
.single-product form.cart .ct-wishlist-button-single {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; padding: 0; font-size: 0; line-height: 0;
	background: var(--sisa-panel); color: var(--sisa-ink);
	border: 1px solid var(--sisa-hairline); border-radius: 0; cursor: pointer;
	transition: border-color .12s, color .12s;
}
.single-product form.cart .ct-wishlist-button-single:hover { border-color: var(--sisa-emphasis); }
.single-product form.cart .ct-wishlist-button-single .ct-icon-container { width: 20px; height: 20px; }
.single-product form.cart .ct-wishlist-button-single svg { width: 20px; height: 20px; }
.single-product form.cart .ct-wishlist-button-single .ct-label { display: none; }
/* Heart states — EXACTLY the archive-card grammar: unselected = outline only
   (Blocksy paints its icons fill:currentColor, which rendered the resting heart
   solid black); saved = brand-yellow fill + ink stroke. */
.single-product form.cart .ct-wishlist-button-single svg.sisa-wish-heart {
	fill: none !important; stroke: currentColor; stroke-width: 2;
	transition: fill .15s ease, stroke .15s ease;
}
.single-product form.cart .ct-wishlist-button-single[data-button-state="active"] svg.sisa-wish-heart {
	fill: var(--sisa-yellow) !important; stroke: var(--sisa-yellow-ink);
}

/* Product meta */
.single-product .product_meta {
	margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sisa-hairline);
	font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .4px; color: var(--sisa-text-2);
	display: flex; flex-wrap: wrap; gap: 16px;
}
.single-product .product_meta > span { display: inline-flex; gap: 6px; }
.single-product .product_meta a { color: var(--sisa-text-2); }

/* ---------- Tabs panel ---------- */
.single-product .woocommerce-tabs { margin: 0; background: var(--sisa-panel); border: 0; }
.single-product .woocommerce-tabs ul.tabs {
	display: flex !important; justify-content: flex-start !important; gap: 0; margin: 0;
	padding: 0 clamp(12px, 2vw, 28px); list-style: none;
	border-bottom: 1px solid var(--sisa-hairline); background: none; text-align: left;
}
.single-product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 18px 24px; margin-bottom: -1px;
	font-family: var(--sisa-display); font-weight: 700; font-size: 15px;
	color: var(--sisa-text-2); border-bottom: 3px solid transparent; text-decoration: none;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--sisa-ink); border-bottom-color: var(--sisa-yellow); }
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-Tabs-panel { padding: 32px 28px; }
.single-product .woocommerce-Tabs-panel h2 { font-family: var(--sisa-display); font-size: 22px; }
.single-product .woocommerce-Tabs-panel table.shop_attributes th { font-family: var(--sisa-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Reviews ---------- */
.single-product #reviews .commentlist { margin: 0; padding: 0; list-style: none; }
.single-product #reviews .comment-text { border: 0; }
.single-product #reviews .star-rating { color: var(--sisa-yellow); }
.single-product #reviews #respond input[type="submit"] {
	background: var(--sisa-emphasis); color: var(--sisa-on-emphasis); border-radius: 0;
	font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}

/* ---------- Related / upsells ---------- */
.single-product .related > h2,
.single-product .upsells > h2 { font-family: var(--sisa-display); font-size: 24px; margin-bottom: 20px; }

/* "Häufig zusammen gekauft" (+ upsells) — the white panel is a size container and
   the 4-item rail steps 4 → 2 → 1 on the PANEL's width (the 280px sidebar makes
   viewport queries wrong here). No 3-column step: the rail is a fixed set of 4,
   and 3 columns would orphan a lone card on the second row. Cards never drop
   below ~185px (Blocksy's device defaults squashed them to 126px at 1024). */
.single-product .related,
.single-product .up-sells { container-type: inline-size; container-name: sisa-rail; }
.single-product .related ul.products,
.single-product .up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 20px; margin: 0;
}
@container sisa-rail (max-width: 429px) {
	.single-product .related ul.products,
	.single-product .up-sells ul.products { grid-template-columns: 1fr !important; }
}
@container sisa-rail (min-width: 800px) {
	.single-product .related ul.products,
	.single-product .up-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* No-container-query fallback: sidebar + hero math puts the panel ≥800px only
   on wide desktops; phones get the single column. */
@supports not (container-type: inline-size) {
	@media (min-width: 1330px) {
		.single-product .related ul.products,
		.single-product .up-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	}
	@media (max-width: 460px) {
		.single-product .related ul.products,
		.single-product .up-sells ul.products { grid-template-columns: 1fr !important; }
	}
}


/* ---------- supply chips (kcal / liter) + people stepper (design summary) ---------- */
.single-product .sisa-pd-meta { margin: 22px 0 0; }
.single-product .sisa-pd-pill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.single-product .sisa-pd-pill__chip {
	display: inline-flex; align-items: center; height: 42px; padding: 0 12px;
	background: var(--sisa-yellow); color: var(--sisa-yellow-ink);
	font-family: var(--sisa-body); font-weight: 700; font-size: 14px; letter-spacing: .2px;
}
.single-product .sisa-pd-pill__num { font-variant-numeric: tabular-nums; }
.single-product .sisa-pd-pill__unit { margin-left: 8px; padding: 2px 6px; background: var(--sisa-emphasis); color: var(--sisa-on-emphasis); font-family: var(--sisa-mono); font-size: 11px; font-weight: 600; }
.single-product .sisa-pd-pill__days { margin-left: 8px; }
.single-product .sisa-pd-people { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 8px 0 10px; border: 1px solid var(--sisa-hairline); background: var(--sisa-panel); font-family: var(--sisa-mono); font-size: 12px; color: var(--sisa-ink); }
.single-product .sisa-pd-people svg { width: 14px; height: 14px; }
.single-product .sisa-pd-people__n { font-weight: 600; min-width: 14px; text-align: center; }
.single-product .sisa-pd-people__btns { display: inline-flex; flex-direction: column; margin-left: 2px; }
.single-product .sisa-pd-people__btns button { width: 22px; height: 16px; border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; color: var(--sisa-ink); padding: 0; }
.single-product .sisa-pd-people__btns button:hover { color: var(--sisa-yellow-ink); background: var(--sisa-bg-card); }

/* Stock line */
.single-product .sisa-pd-stock { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--sisa-ink); }
.single-product .sisa-pd-stock__dot { width: 16px; height: 16px; display: grid; place-items: center; flex: none; cursor: help; }
.single-product .sisa-pd-stock__dot svg { width: 16px; height: 16px; }
.single-product .sisa-pd-stock__dot:focus { outline: none; }
/* Unavailable: only mute the label text; the icon comes from the level (legacy red). */
.single-product .sisa-pd-stock--off { color: var(--sisa-text-2); }
/* WC's own stock text is redundant with our line */
.single-product .stock.in-stock, .single-product .stock.out-of-stock { display: none; }

/* ---------- Reviews (style WC default toward the design) ---------- */
.single-product #reviews .woocommerce-Reviews-title,
.single-product #reviews h2 { font-family: var(--sisa-display); font-weight: 700; font-size: 28px; letter-spacing: -.4px; margin: 0 0 24px; }

/* ---------- Checkliste · Berater dual CTA ---------- */
.sisa-ctapair { display: grid; grid-template-columns: 1fr 1fr; background: var(--sisa-panel); border: 1px solid var(--sisa-hairline); }
.sisa-ctapair__tile { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 12px; }
.sisa-ctapair__tile + .sisa-ctapair__tile { border-left: 1px solid var(--sisa-hairline); }
.sisa-ctapair__kicker { font-family: var(--sisa-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--sisa-text-2); }
.sisa-ctapair__title { margin: 0; font-family: var(--sisa-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.4px; color: var(--sisa-ink); }
.sisa-ctapair__lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sisa-text-1); }
.sisa-ctapair__cta { align-self: flex-start; margin-top: 6px; padding: 13px 22px; background: var(--sisa-yellow); color: var(--sisa-yellow-ink); text-decoration: none; font-family: var(--sisa-body); font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; }
.sisa-ctapair__cta:hover { filter: brightness(.96); }
@media (max-width: 600px) {
	.sisa-ctapair { grid-template-columns: 1fr; }
	.sisa-ctapair__tile + .sisa-ctapair__tile { border-left: 0; border-top: 1px solid var(--sisa-hairline); }
}

/* After an AJAX add Blocksy appends a "Warenkorb anzeigen" link INTO the buy row,
   squeezing the CTA into clipped text. Hide it — the header cart badge + mini-cart
   carry the confirmation (the archive cards hide the same .added_to_cart link). */
.single-product form.cart .added_to_cart { display: none !important; }

/* Buy-row proportions: CTA keeps its full label; stepper 120px (design width). */
.single-product form.cart .single_add_to_cart_button { white-space: nowrap; padding-inline: 20px; }
.single-product .ct-cart-actions .quantity,
.single-product form.cart .quantity { width: 120px; }
/* Below ~420px of summary column the one-line row can't give the labeled CTA a
   dignified width (≥ ~230px) — the CTA takes its own full-width line, stepper +
   heart follow on the second. Queried against the COLUMN (sisa-summary), not the
   viewport: the same column width occurs on phones, tablets AND sidebar'd
   desktops. The labeled CTA is kept at every width (never reduced to an icon):
   on a product page the primary action deserves its label, and stacking always
   fits — 320px viewports included. */
@container sisa-summary (max-width: 419px) {
	.single-product form.cart .ct-cart-actions,
	.single-product form.cart:not(.variations_form) { flex-wrap: wrap; }
	.single-product form.cart .single_add_to_cart_button { flex: 1 1 100%; }
	.single-product form.cart .quantity { flex: 1 1 auto; }
}
/* No-container-query fallback (pre-2023 engines): below 1500px viewport the
   summary column is <420px in every layout variant, so stack there. */
@supports not (container-type: inline-size) {
	@media (max-width: 1500px) {
		.single-product form.cart .ct-cart-actions,
		.single-product form.cart:not(.variations_form) { flex-wrap: wrap; }
		.single-product form.cart .single_add_to_cart_button { flex: 1 1 100%; }
		.single-product form.cart .quantity { flex: 1 1 auto; }
	}
}

/* ---- Pfand notice (commerce/pfand.php) — sits under the stock line in the
   meta block (order 4). Same grammar as .sisa-pd-stock: 16px marker + 14px
   label; the €-dot uses the utility steel blue, distinct from stock green. */
.single-product .summary .sisa-pd-pfand,
.single-product .entry-summary .sisa-pd-pfand { order: 4; display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--sisa-ink); }
.single-product .sisa-pd-pfand__dot {
	flex: none; width: 16px; height: 16px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--sisa-water); color: #fff;
	font-family: var(--sisa-body); font-size: 10px; font-weight: 600; line-height: 1;
}

/* ---- Grundpreis "€ X.XX/kg" (commerce/grundpreis.php, DE zone) — a quiet
   utility line directly under the price (same order slot, DOM-after). */
.single-product .summary .sisa-grundpreis,
.single-product .entry-summary .sisa-grundpreis { order: 5; display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--sisa-text-2); }