/**
 * 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;
}

/* 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;
}
.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;
	}
	.card.card-product.ttc-lpp-incart .footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex-wrap: nowrap;
	}
	/* 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)
   ===================================================================== */

/* 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 - it now hosts our own picker button instead. The extra
   class out-specifies the theme's (1,5,2) display:none !important rule. */
: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;
}

/* 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: same black pill language as the qty control. */
.ttc-lpp-varbtn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	background: #241f2b;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}

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

.ttc-lpp-varbtn-icon {
	font-size: 16px;
	font-weight: 500;
}

/* The compact picker: one small dropdown per attribute + Toevoegen. */
.ttc-lpp-varpick {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
	min-width: 170px;
	z-index: 60;
}

.ttc-lpp-varpick-select {
	width: 100%;
	padding: 6px 8px;
	border: 1.5px solid #e3e0e8;
	border-radius: 8px;
	background: #fff;
	color: #241f2b;
	font-size: 13px;
}

.ttc-lpp-varpick-add {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: 8px 10px;
	background: #241f2b;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ttc-lpp-varpick-add:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* One - [n] + row per in-cart variation, with a compact label. */
.ttc-lpp-varrows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ttc-lpp-varrow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ttc-lpp-varrow-label {
	font-size: 12px;
	font-weight: 700;
	color: #241f2b;
	background: rgba( 255, 255, 255, 0.92 );
	border-radius: 6px;
	padding: 2px 7px;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 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
   (native <select> dropdowns steal hover). */
@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: the theme moves .hestia-sar-quick into the footer; our trigger
   becomes a compact black circle beside the price (mirroring the simple
   card's add circle). Rows stack full-width under the price row. */
@media ( max-width: 600px ) {
	.ttc-lpp-varbtn {
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
	}
	.ttc-lpp-varbtn .ttc-lpp-varbtn-label {
		display: none; /* icon-only circle on phones */
	}
	.ttc-lpp-varbtn .ttc-lpp-varbtn-icon {
		font-size: 22px;
	}
	/* The picker drops in as a block inside the footer. */
	.card.card-product.ttc-lpp-varopen .hestia-sar-quick {
		flex-basis: 100%;
	}
	.ttc-lpp-varpick {
		width: 100%;
		box-shadow: none;
		border: 1.5px solid #e3e0e8;
	}
	/* In-cart: rows take the footer width; label above each stepper keeps
	   the row narrow enough for small screens. */
	.card.card-product.ttc-lpp-var.ttc-lpp-incart .footer {
		flex-wrap: wrap;
	}
	.ttc-lpp-varrows {
		flex-basis: 100%;
	}
	.ttc-lpp-varrow {
		justify-content: space-between;
	}
	/* Unlike simple cards, the variable trigger stays visible while in
	   cart so ANOTHER variation can be added straight from the card. */
	.card.card-product.ttc-lpp-var.ttc-lpp-incart .hestia-sar-quick {
		display: flex !important;
	}
}

/* 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;
}