/**
 * TTC Live Price Product - product-card quantity control.
 *
 * Scoped to .card.card-product.ttc-lpp-incart (the class the JS adds only
 * once a simple product is in the cart), so a card in its normal state is
 * 100% untouched and a JS failure leaves the native add button in place.
 *
 * Placement mirrors the native add button per breakpoint:
 *  - Desktop: a small, simple BLACK pill in the .hestia-sar-quick overlay
 *    over the image (styled like the black add-to-cart button it replaces).
 *  - Mobile: a full-width bar in the footer, where the red button was.
 */

/* Hide every native add affordance when in-cart: the add button, the
   secondary footer add circle (.stats), WooCommerce's "View cart" link AND
   Hestia's own post-add "View cart" wrapper (.hestia-view-cart-wrapper,
   injected into the overlay on a fresh add) - the last one otherwise sits
   beside the control and shoves it off-centre until the page is reloaded. */
.card.card-product.ttc-lpp-incart .hestia-sar-quick > a.add_to_cart_button,
.card.card-product.ttc-lpp-incart .footer .stats,
.card.card-product.ttc-lpp-incart a.added_to_cart,
.card.card-product.ttc-lpp-incart .hestia-view-cart-wrapper {
	display: none !important;
}

/* Grid-blowout guard: the in-cart footer (nowrap TOTAAL price + fixed
   stepper) used to inflate a card's min-content, and the 1fr grid track
   (minmax(auto,1fr)) grew with it - the card then slid UNDER the
   neighbouring product on narrow 2-up grids and its + button ate no taps
   (measured live: li 237px in a 181px column). min-width:0 zeroes the
   item's min-content contribution so the track never blows out; the
   footer wraps instead (rule further down). */
ul.products li.product {
	min-width: 0;
}

/* The - [number] + control: small, simple, black - like the add button. */
.ttc-lpp-cardqty {
	display: inline-flex;
	align-items: stretch;
	height: 34px;
	border-radius: 4px;
	overflow: hidden;
	background: #241f2b; /* same near-black as the add-to-cart button */
	color: #fff;
	line-height: 1;
}

.ttc-lpp-cardqty-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	width: 34px;
	flex: 0 0 auto;
	background: transparent;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
}

.ttc-lpp-cardqty-btn:hover,
.ttc-lpp-cardqty-btn:focus-visible {
	background: rgba( 255, 255, 255, 0.16 );
	outline: none;
}

.ttc-lpp-cardqty-input {
	width: 40px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba( 255, 255, 255, 0.22 );
	border-right: 1px solid rgba( 255, 255, 255, 0.22 );
	background: transparent;
	color: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	-moz-appearance: textfield;
}

.ttc-lpp-cardqty-input::-webkit-outer-spin-button,
.ttc-lpp-cardqty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.card.card-product.ttc-lpp-card-updating .ttc-lpp-cardqty {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

/* ---------- Fancy in-cart price: unit | basket line total ---------- */
.card.card-product.ttc-lpp-incart .price h4 {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.ttc-lpp-price-sep {
	color: rgba( 0, 0, 0, 0.22 );
	font-weight: 400;
}
.ttc-lpp-linetotal {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}
.ttc-lpp-linetotal-label {
	font-size: 0.6em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.55;
	white-space: nowrap; /* keep "TOTAAL" on one line - the narrow reserved
	                        left column on desktop single mode otherwise
	                        split it to "TOTA AL" */
}
.ttc-lpp-linetotal .woocommerce-Price-amount {
	color: #e91e63; /* theme accent - the live basket total for this product */
}

/* ---------- Desktop: black pill in the image overlay ---------- */
@media ( min-width: 601px ) {
	/* The control lives in the image overlay, which the theme reveals ON
	   HOVER (opacity 0 -> 1) - so, exactly like the native add button, the
	   - [n] + only appears when hovering the card (user request). We just
	   make it span the image width and centre the small pill for when it is
	   revealed; the theme still owns the hover show/hide. */
	.card.card-product.ttc-lpp-incart .hestia-sar-quick {
		display: flex !important;
		align-items: center;
		justify-content: center !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		opacity: 0 !important; /* hover-only, exactly like the add button */
		pointer-events: none;
		transition: opacity 0.2s ease;
	}
	/* Reveal the control only while hovering the card (this wins over the
	   theme keeping the overlay open after an add). */
	.card.card-product.ttc-lpp-incart:hover .hestia-sar-quick {
		opacity: 1 !important;
		pointer-events: auto;
	}
}

/* ---------- Mobile: full-width bar in the footer ---------- */
@media ( max-width: 600px ) {
	/* The control lives in the footer here, so hide the image overlay
	   entirely (its red button is replaced by the footer control). */
	.card.card-product.ttc-lpp-incart .hestia-sar-quick {
		display: none !important;
	}
	/* Wrap when price + stepper don't both fit the (possibly very narrow
	   2-up) card: the stepper drops onto its own right-aligned line
	   instead of overflowing the card into the neighbouring column. */
	.card.card-product.ttc-lpp-incart .footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px 10px;
		flex-wrap: wrap;
	}
	/* Price block stacks the unit price over the basket total, so both fit
	   beside the control without a wide "unit | total" row. */
	.card.card-product.ttc-lpp-incart .price {
		min-width: 0;
	}
	.card.card-product.ttc-lpp-incart .price h4 {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
		line-height: 1.15;
	}
	.card.card-product.ttc-lpp-incart .ttc-lpp-price-sep {
		display: none; /* stacked instead of a "|" divider on mobile */
	}
	.card.card-product.ttc-lpp-incart .ttc-lpp-linetotal {
		font-size: 0.8em;
		gap: 4px;
	}
	/* Same row as the price, compact but tappable - not full-width, not
	   tiny. (The theme forces footer child divs to display:block, so force
	   the row layout back with !important.) */
	.card.card-product.ttc-lpp-incart .ttc-lpp-cardqty {
		display: flex !important;
		flex: 0 0 auto;
		width: auto;
		height: 34px;
		margin: 0 0 0 auto;
	}
	.ttc-lpp-cardqty-btn {
		flex: 0 0 auto;
		width: 34px;
		font-size: 18px;
	}
	.ttc-lpp-cardqty-input {
		flex: 0 0 auto;
		width: 34px;
		font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
	}

}

/* ---------------------------------------------------------------------
   State-A card add-to-cart button: standard black (#241f2b) instead of
   the theme's pink customizer accent, white cart icon (the icon is a
   Font Awesome ::before inheriting color:#fff - only the background
   needs changing).

   THE rule that actually paints the pink circle (found by enumerating
   every matching background declaration in the live mobile DOM) is
   Hestia's mobile-footer rule in hestia-shop-archive.css, scoped
   @media (max-width:991px):

     :is(body.woocommerce.archive, body.single-product, #products)
       ul.products li.product .card-product.sar-quick-in-footer
       .footer .hestia-sar-quick .button
         { background: var(--sar-accent) !important; }

   Specificity (1 id, 7 classes, 2 elements) - it beats the generic
   `... .card-product .hestia-sar-quick a.add_to_cart_button.button`
   attempts (1,6,3) no matter the source order, which is why every
   earlier override "would not stick". Two independent defences here,
   in the SAME 991px range the pink rule uses (600px left tablets pink):

   1. The variables are overridden ON the button itself - a custom
      property declared directly on the element always beats the
      inherited body-scope value, so Hestia's own `var(--sar-accent)`
      resolves to black even where its rule wins the background fight.
   2. The second selector mirrors Hestia's footer rule and adds
      .add_to_cart_button + the a element -> (1,8,3), out-specifying
      (1,7,2), so the background declaration itself also wins.
   ------------------------------------------------------------------ */
@media ( max-width: 991px ) {
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product .hestia-sar-quick a.add_to_cart_button.button,
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.sar-quick-in-footer .footer .hestia-sar-quick a.add_to_cart_button.button {
		--hestia-primary-color: #241f2b !important;
		--sar-accent: #241f2b !important;
		--accent-color: #241f2b !important;
		background: #241f2b !important;
		background-color: #241f2b !important;
		background-image: none !important;
		border-color: #241f2b !important;
	}
}

/* =====================================================================
   Variable products on cards (v1.3.0)
   ===================================================================== */

/* DESKTOP ONLY: the theme hides its overlay on variable cards
   (.sar-quick-noadd) because the native link only navigates. Cards the
   JS enhances (.ttc-lpp-var) get the overlay back there - it hosts our
   picker button/controls on desktop. The extra class out-specifies the
   theme's (1,5,2) display:none !important rule. On MOBILE the controls
   live in the .ttc-lpp-varbar above the stars instead, so the overlay
   stays hidden (the theme's own noadd rule keeps doing that). */
@media ( min-width: 601px ) {
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.ttc-lpp-var.sar-quick-noadd .hestia-sar-quick {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

/* The mobile above-the-stars bar (created by varBar() in the JS): a
   full-width strip between the image and the rating row. Hidden when
   empty via :empty so State 0 markup-order quirks never leave a gap. */
.ttc-lpp-varbar {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 2px 0 6px;
}

.ttc-lpp-varbar:empty {
	display: none !important;
}

/* Never show the native "Select options" link inside the overlay - our
   picker button replaces it entirely. */
.card.card-product.ttc-lpp-var .hestia-sar-quick > a.add_to_cart_button {
	display: none !important;
}

/* Picker trigger (State 0), placed by the JS exactly where the
   simple-card add button lives at each width (v1.4.0):
    - <=991px (the theme's own footer breakpoint): the STANDARD round
      black basket button in the card FOOTER - pixel-identical to the
      simple-card footer add button (hestia-shop-archive.css
      .sar-quick-in-footer rules + this plugin's black override).
    - >=992px: a full-width black PILL in the .hestia-sar-quick image
      hover-overlay, mirroring the theme's own quick-add pill (override
      block further down) - the footer keeps its decorative arrow, so a
      variable card at rest is indistinguishable from a simple card.
   Clicking opens the variation picker. The !importants keep Hestia's
   `.card .footer button` (0,2,1) from re-padding it. The button text
   ("Kies soort") only shows in pill mode - font-size:0 hides it here,
   the FA basket glyph shows instead (same trick as the theme). */
.ttc-lpp-varbtn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	flex: 0 0 auto;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #241f2b !important;
	color: #fff;
	font-size: 0 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	box-shadow: 0 6px 14px -4px rgba( 36, 31, 43, 0.55 );
	transition: background 0.15s ease;
}

.ttc-lpp-varbtn::before {
	content: "\f07a"; /* Font Awesome shopping-cart - same glyph as the
	                     simple-card footer button (theme loads FA5) */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

.ttc-lpp-varbtn:hover,
.ttc-lpp-varbtn:focus-visible {
	background: #3a3344 !important;
	outline: none;
}

/* >=992px: the trigger is the overlay PILL - same geometry the theme
   gives the simple-card quick-add (`.hestia-sar-quick .button`, see
   hestia-shop-archive.css: block, full width, 11px/12px padding, 12px
   radius, 12.5px/700 text). Same-specificity !importants LATER in the
   sheet beat the circle geometry above; content:none drops the basket
   glyph so the "Kies soort" text shows. */
@media ( min-width: 992px ) {
	.ttc-lpp-varbtn {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 11px 12px !important;
		border-radius: 12px !important;
		font-size: 12.5px !important;
		font-weight: 700;
		line-height: 1.2 !important;
		text-transform: none !important; /* native pill parity ("Kies soort", not KIES SOORT) */
		box-shadow: 0 10px 20px -8px rgba( 20, 10, 30, 0.5 );
	}
	.ttc-lpp-varbtn::before {
		content: none;
	}
}

/* While the basket trigger sits in the footer (State 0, <=991px only -
   the theme's footer breakpoint), the footer swaps its decorative arrow
   chip for it - the basket takes the arrow's spot, same as the simple
   cards' footer. Mirrors the theme's ::after rule with one extra class
   so the display:none wins. On DESKTOP (>=992px) the arrow STAYS: the
   trigger lives in the image overlay there and a variable card's footer
   must look exactly like a simple card's (v1.4.0, Point 1). */
@media ( max-width: 991px ) {
	:is( body.woocommerce.archive, body.single-product, #products ) ul.products li.product .card-product.ttc-lpp-var0 .footer::after {
		display: none !important;
	}
}

/* The hidden attribute must always win over our display rules (same
   [hidden]-vs-author-display trap as the single-product remove link):
   the JS hides the trigger while the picker is open / items are in cart. */
.ttc-lpp-varbtn[hidden],
.ttc-lpp-varadd[hidden] {
	display: none !important;
}

/* The compact picker - polished, on-brand. v1.4.0: a direct variation
   LIST (one selectable row per variation, label + live price) with a
   Toevoegen confirm under it. The X in the top corner cancels and brings
   the trigger back. */
.ttc-lpp-varpick {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	padding-top: 30px; /* room for the X */
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba( 36, 31, 43, 0.08 );
	box-shadow: 0 2px 6px rgba( 36, 31, 43, 0.08 ), 0 12px 32px rgba( 36, 31, 43, 0.22 );
	min-width: 176px;
	max-width: 100%;
	box-sizing: border-box;
	z-index: 60;
}

.ttc-lpp-varpick-close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba( 36, 31, 43, 0.06 );
	color: #241f2b;
	font-size: 15px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ttc-lpp-varpick-close:hover,
.ttc-lpp-varpick-close:focus-visible {
	background: rgba( 36, 31, 43, 0.14 );
	outline: none;
}

/* The variation LIST (v1.4.0, replaces the per-attribute dropdowns): one
   tappable row per variation - label left, live price right - radio-style
   single-select. Scrolls beyond ~5 rows so a big catalog can't blow the
   picker past the card. */
.ttc-lpp-varlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 210px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Always-visible scrollbar so a long list VISIBLY reads as scrollable
	   (overlay scrollbars otherwise hide until you scroll, so extra
	   variations below the fold look like they don't exist).
	   IMPORTANT: do NOT set scrollbar-width/scrollbar-color here - Chromium
	   121+ IGNORES the styled ::-webkit-scrollbar below whenever either of
	   those standard props is set, which silently reverts the bar to an
	   invisible 0px overlay (measured). Leaving them unset lets WebKit/Blink
	   render the persistent, space-taking styled bar; Firefox falls back to
	   its own normal (visible) scrollbar. */
	padding-right: 2px; /* a little room so rows don't sit under the bar */
}

.ttc-lpp-varlist::-webkit-scrollbar {
	width: 9px;
}
.ttc-lpp-varlist::-webkit-scrollbar-track {
	background: rgba( 36, 31, 43, 0.07 );
	border-radius: 9px;
}
.ttc-lpp-varlist::-webkit-scrollbar-thumb {
	background: rgba( 36, 31, 43, 0.34 );
	border-radius: 9px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.ttc-lpp-varlist::-webkit-scrollbar-thumb:hover {
	background: rgba( 36, 31, 43, 0.55 );
	background-clip: padding-box;
}

/* A row: soft chip like the old dropdown, highlight-inverts when chosen.
   Explicitly normalized (appearance/margin/text-transform) so the theme's
   generic button styling cannot distort it - same defensive posture as
   the other picker buttons. */
.ttc-lpp-varopt {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 1.5px solid #e6e3ea;
	border-radius: 10px;
	background: #fbfafc;
	color: #241f2b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.ttc-lpp-varopt:hover:not( :disabled ),
.ttc-lpp-varopt:focus-visible:not( :disabled ) {
	border-color: #241f2b;
	box-shadow: 0 0 0 3px rgba( 36, 31, 43, 0.12 );
	outline: none;
}

/* The chosen row: inverted to the brand near-black, prices included
   (the del half stays dimmed via opacity, not color). */
.ttc-lpp-varopt.ttc-lpp-varopt-on {
	border-color: #241f2b;
	background: #241f2b;
	color: #fff;
}

.ttc-lpp-varopt.ttc-lpp-varopt-on .ttc-lpp-varopt-price,
.ttc-lpp-varopt.ttc-lpp-varopt-on .ttc-lpp-varopt-price .woocommerce-Price-amount {
	color: #fff !important;
}

/* Out of stock: visible but clearly dead (spec: show disabled). */
.ttc-lpp-varopt:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ttc-lpp-varopt-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal; /* full soort names always - no truncation (user spec) */
}

.ttc-lpp-varopt-price {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* Discounted rows: the old price small + struck, the live price after it
   (server sends wc_format_sale_price's <del>/<ins> markup). */
.ttc-lpp-varopt-price del {
	opacity: 0.5;
	font-weight: 500;
	font-size: 0.85em;
	margin-right: 4px;
}

.ttc-lpp-varopt-price ins {
	text-decoration: none;
}

.ttc-lpp-varpick-add {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 10px 12px;
	margin-top: 2px;
	background: #241f2b;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba( 36, 31, 43, 0.28 );
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.ttc-lpp-varpick-add:hover:not( :disabled ),
.ttc-lpp-varpick-add:focus-visible:not( :disabled ) {
	background: #3a3344;
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 36, 31, 43, 0.34 );
	outline: none;
}

.ttc-lpp-varpick-add:disabled {
	opacity: 0.35;
	box-shadow: none;
	cursor: not-allowed;
}

/* In-cart controls: SIDE BY SIDE in one row (cap 2). One unit = its
   short label sitting on top of its - [n] + control. A single unit is
   centered, with the fancy "+" (add another soort) beside it.
   The !importants are load-bearing: Hestia's Material-Kit ships
   `.card .footer div { display:inline-block }` (0,2,1), which silently
   flattened these flex containers inside the mobile footer - the pair
   rendered STACKED until these outrank it (found via live DOM diag). */
.ttc-lpp-varrows {
	display: flex !important;
	flex-direction: row !important;
	/* Wrap instead of overlap: on narrow cards the fixed-width stepper
	   used to flex-shrink its row box invisibly and slide UNDER the "+"
	   button (measured live: bar 126px vs stepper+gap+plus 152px). With
	   wrapping, the "+" simply drops to its own centered line. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	min-width: 0;
	max-width: 100%;
}

/* Single-variation state: the control keeps its natural width - never
   shrink it below the stepper (that shrink is what hid the overflow). */
.ttc-lpp-varrows:not( .ttc-lpp-varrows-pair ) .ttc-lpp-varrow {
	flex: 0 0 auto;
}

.ttc-lpp-varrow {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 3px;
	min-width: 0;
	flex: 0 1 auto;
}

/* Soort labels show their FULL text ALWAYS - single and pair, desktop
   and mobile (user feedback, twice): no width caps, no ellipsis, words
   wrap to extra lines instead and the layout flexes around them. */
.ttc-lpp-varrow-label {
	font-size: 11px;
	font-weight: 700;
	color: #241f2b;
	background: rgba( 255, 255, 255, 0.92 );
	border-radius: 6px;
	padding: 1px 7px;
	max-width: 100% !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	text-align: center;
	line-height: 1.25;
}

.ttc-lpp-varrow {
	max-width: 100%;
}

/* Footer price blocks on VARIABLE cards: STABLE two-column geometry from
   the very first variation (user spec). Each column is an equal flex
   half; the divider is the FIRST block's right border, so with ONE line
   in the cart the price already renders in its final left-column spot
   reading "[unit / TOTAAL] |", and adding the 2nd variation just fills
   the empty right column - zero shift/re-layout of the first price.
   Simple cards keep their unwrapped single block (no .ttc-lpp-fpair). */
.ttc-lpp-fblock {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.ttc-lpp-fpair {
	font-size: 0.85em;
}

.ttc-lpp-fpair .ttc-lpp-fblock {
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}

.ttc-lpp-fpair .ttc-lpp-fblock:first-child {
	border-right: 1px solid rgba( 0, 0, 0, 0.14 );
	padding-right: 10px;
	margin-right: 10px;
}

/* The reserved (still empty) right column: no content, but it holds the
   50% track so the left price + divider never move when it fills. */
.ttc-lpp-fblock-empty {
	align-self: stretch;
}

.ttc-lpp-fpair .ttc-lpp-price-sep {
	display: none; /* stacked unit-over-total needs no divider glyph */
}

/* Inside a pair column the TOTAAL line may wrap (label above amount)
   rather than bleed across the divider into the other column - the
   nowrap bleed was visible in the eyeball pass on narrow 2-up cards. */
.ttc-lpp-fpair .ttc-lpp-linetotal {
	white-space: normal;
	flex-wrap: wrap;
	min-width: 0;
}

/* The fancy add-another "+": clean round black button beside the single
   control. Everything is normalized explicitly (padding, line-height,
   font, flex centring) so the theme's own button styling cannot distort
   the glyph, and align-self pins it level with the STEPPER line rather
   than floating at the mid-height of label+stepper. Hidden by the JS
   once the 2-variation cap is reached. */
.ttc-lpp-varadd {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	/* !important: `.card .footer button` (Hestia Material-Kit, 0,2,1)
	   otherwise re-pads this into a squashed oval - the "+ looks messed
	   up" bug, seen in the live screenshot. */
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	flex: 0 0 auto;
	align-self: flex-end;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid rgba( 255, 255, 255, 0.85 ) !important;
	border-radius: 50% !important;
	background: #241f2b;
	color: #fff;
	font-family: inherit;
	font-size: 19px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.28 );
	transition: transform 0.12s ease, background 0.12s ease;
}

.ttc-lpp-varadd:hover,
.ttc-lpp-varadd:focus-visible {
	background: #3a3344;
	transform: scale( 1.08 );
	outline: none;
}

/* Two units side by side: shrink the steppers so the pair fits a card. */
.ttc-lpp-varrows-pair .ttc-lpp-cardqty {
	height: 30px;
}

.ttc-lpp-varrows-pair .ttc-lpp-cardqty-btn {
	width: 26px;
	font-size: 15px;
}

.ttc-lpp-varrows-pair .ttc-lpp-cardqty-input {
	width: 30px;
	font-size: 13px;
}

/* Desktop: trigger, picker and rows live in the hover overlay, exactly
   like the simple-card control (hover-only). While the picker is open the
   overlay must stay visible even when the pointer briefly leaves the card
   (scrolling the variation list must not blank the picker). */
@media ( min-width: 601px ) {
	.card.card-product.ttc-lpp-var .hestia-sar-quick {
		opacity: 0 !important;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}
	.card.card-product.ttc-lpp-var:hover .hestia-sar-quick,
	.card.card-product.ttc-lpp-var.ttc-lpp-varopen .hestia-sar-quick {
		opacity: 1 !important;
		pointer-events: auto;
	}
	/* In-cart variable card: rows render in the overlay, so re-centre it
	   over the image like the simple in-cart pill. */
	.card.card-product.ttc-lpp-var.ttc-lpp-incart .hestia-sar-quick {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		align-items: center;
		justify-content: center !important;
	}
}

/* Mobile: everything variable lives in the .ttc-lpp-varbar anchored at
   the BOTTOM OF THE PICTURE (user spec: same spot as desktop) - trigger,
   controls and per-variation prices. The theme's footer overlay copy
   stays hidden entirely. */
@media ( max-width: 600px ) {
	/* Nothing of ours is in the overlay on phones - and the theme's own
	   noadd rule already hides it; make sure no empty box ever shows. */
	.card.card-product.ttc-lpp-var .hestia-sar-quick {
		display: none !important;
	}

	/* The bar sits in normal flow at the top of the text area (above the
	   stars when present) - no reserved space, no gap on starless cards. */
	.card.card-product.ttc-lpp-var .content .ttc-lpp-varbar {
		width: 100%;
		margin: 0 0 6px;
	}

	/* Picker: in normal flow inside the full-width bar - can never
	   overflow the card. MUST stay position:relative (not static): the
	   absolute X is contained by the panel only while it is positioned
	   (static let it escape to the card corner, seen in an eyeball pass). */
	.ttc-lpp-varpick {
		position: relative;
		width: 100%;
		min-width: 0;
		border: 1.5px solid #e3e0e8;
	}
	/* List rows on phones: compact 13px chips (buttons never trigger the
	   iOS focus-zoom, so no 16px floor needed) - at 13px a full label like
	   "Chocolade, Klein" fits on one line beside its price and all four
	   rows of the QA product fit without scrolling. Padding slimmed for
	   the same reason; the theme's mobile control styling would otherwise
	   inflate both (same fight as the old dropdown). */
	.ttc-lpp-varopt {
		min-width: 0;
		font-size: 13px !important;
		line-height: 1.3 !important;
		height: auto !important;
		padding: 8px 10px !important;
		gap: 8px;
	}
	.ttc-lpp-varlist {
		max-height: 264px; /* ~5 slim rows before it scrolls */
	}

	/* TWO footer price blocks stay SIDE BY SIDE on phones. Measured live:
	   the .price wrapper is a ~118px flex child of the footer while the
	   pair needs ~150px, so (1) the wrapper spans the full footer row in
	   pair mode, (2) the h4 is forced row/nowrap against the simple-card
	   column rule above, (3) the blocks slim down to fit narrow 2-up
	   grid cards. */
	.card.card-product.ttc-lpp-incart .footer .price.ttc-lpp-fpair-box {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 100% !important;
		box-sizing: border-box;
		/* THE clamp that actually holds (measured live): the pair h4 is a
		   NOWRAP flex row of two price blocks whose min-content (161px)
		   otherwise propagates up through .price -> .footer -> .content and
		   inflates the whole card past its grid column (217px li in a 174px
		   track - the same blowout family as the simple-card fix above, but
		   fed by intrinsic sizing, which percentage max-widths cannot stop:
		   they are ignored during min-content computation). contain:
		   inline-size zeroes this box's intrinsic contribution, so the
		   footer keeps its true width and the 50/50 columns are stable
		   between the solo and pair states. */
		contain: inline-size;
	}
	/* Pin the pair h4 to EXACTLY the footer width in both the solo and the
	   two-block state: measured live, the h4 otherwise sized to its
	   max-content once the 2nd block held real text (161px in a 118px
	   footer) and the column split shifted between the states - the
	   whole point of the reserved-column geometry is that it never moves. */
	.card.card-product.ttc-lpp-incart .price h4.ttc-lpp-fpair {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start;
		flex-wrap: nowrap !important;
		justify-content: center;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
	.ttc-lpp-fpair {
		font-size: 0.78em;
	}
	.ttc-lpp-fpair .ttc-lpp-fblock:first-child {
		padding-right: 6px;
		margin-right: 6px;
	}

	/* Phone pair mode: tightest case - shrink the steppers; labels keep
	   their FULL text and wrap instead of clipping (user feedback). */
	.ttc-lpp-varrows {
		width: 100%;
		justify-content: center;
	}
	.ttc-lpp-varrows-pair {
		gap: 6px;
		align-items: flex-start; /* wrapped labels must not misalign steppers */
	}
	/* NATURAL width + wrap, never a forced 50% column: the steppers are
	   fixed-width, so on very narrow 2-up cards a forced half is smaller
	   than the stepper and the two controls painted on top of each other
	   (seen in the eyeball pass). With auto sizing they sit side by side
	   whenever they fit and stack centered when they don't. */
	.ttc-lpp-varrows-pair .ttc-lpp-varrow {
		flex: 0 1 auto;
		min-width: 0;
	}
	.ttc-lpp-varrows-pair .ttc-lpp-cardqty-btn {
		width: 24px;
	}
	.ttc-lpp-varrows-pair .ttc-lpp-cardqty-input {
		width: 26px;
		font-size: 12px;
	}
}

/* While a card's variation picker is open, its whole product <li> must
   stack ABOVE the neighbouring cards: on mobile the picker overflows the
   card box, and without this the NEXT li painted on top and intercepted
   every tap on Toevoegen (found in live testing). The class is toggled by
   togglePicker()/closePicker() in ttc-lpp-cards.js. */
ul.products li.product.ttc-lpp-varopen-li {
	position: relative;
	z-index: 120;
}