/**
 * Shared Big Irrigation product card.
 *
 * Namespaced to .bi-card so the same card can render inside the homepage
 * shelves (where a .bi-draft ancestor exists) and on shop / category / brand /
 * tag archives (where it does not). Nothing here may depend on .bi-draft.
 *
 * Specificity notes — the Customizer "Additional CSS" on every storefront
 * carries loop rules that would otherwise win:
 *   .page-id-<front> .button.product_type_simple.add_to_cart_button.ajax_add_to_cart  (0,5,0)
 *   ul.products li.product .added_to_cart, ul.products li.product .button             (0,2,2)
 *   body:not(.page-id-<front>) .products li.product { border … }                      (0,3,1)
 * The add-to-cart selectors below are deliberately four classes deep and keep
 * the !important flags the inline homepage stylesheet already relied on. Do not
 * "simplify" them without re-testing against that Additional CSS.
 */

.bi-card {
	--bi-card-ink: #121820;
	--bi-card-muted: #5c6b7a;
	--bi-card-line: #e4e8ee;
	--bi-card-price: #c62828;
	--bi-card-cta: #3bb54a;

	background: #fff;
	border: 1px solid var(--bi-card-line);
	border-radius: 10px;
	padding: 12px;
	position: relative;
	display: flex;
	flex-direction: column;
	/* Trap ATC / wishlist z-index inside the card so they cannot paint over
	   the sticky mega menu (.col-full-nav is only z-index ~6). */
	isolation: isolate;
}

/* Homepage shelves only. The shelf is our own CSS grid, so we neutralise the
   width/float/margin Shoptimizer and the Additional CSS put on `li.product`,
   which leak onto the card through the shared `product` class.

   These MUST NOT apply on archives: there `li.product` IS the theme's flex
   item and its width is how the column layout happens — overriding it to
   `auto` collapses the grid to one product per row. */
.bi-card--shelf {
	margin: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	/* Grid items default to min-width:auto, so an 800px product photo
	   (width:auto + max-height) inflates the card past its column and the
	   whole shelf runs off the right edge on mobile. */
	min-width: 0 !important;
	float: none !important;
}

.bi-card a {
	text-decoration: none;
	color: inherit;
}

.bi-card img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bi-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 0;
	min-width: 0;
}

.bi-card__media {
	position: relative;
	width: 100%;
	margin: 0 0 10px;
	line-height: 0;
	min-height: 150px;
}

.bi-card__img {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	line-height: 0;
}

.bi-card__img img {
	display: block;
	max-height: 150px;
	max-width: 100%;
	/* width:100% (not auto) so lazy/auto-sized images cannot collapse to 0
	   or force the shelf grid column wider than the viewport. */
	width: 100%;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

/* Round add button, pinned flush to the bottom-left of the product photo.
   Keep z-index low (below sticky .col-full-nav ~6) so even without isolation
   the control cannot paint through the mega menu.

   The button must stay anchored on hover (no translateY lift) — only the "+"
   glyph rotates in place. Wrapper stays overflow:visible for box-shadow. */
.bi-card__atc {
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	right: auto !important;
	z-index: 2;
	margin: 0 !important;
	padding: 0 !important;
	width: 30px !important;
	height: 30px !important;
	line-height: 0;
	overflow: visible !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	pointer-events: none; /* only the button itself is clickable */
}

/* Photo boxes must not clip the button / box-shadow. */
.bi-card__media,
.bi-card--archive .woocommerce-image__wrapper,
li.product.bi-card .woocommerce-image__wrapper,
body.bi-card-archive-on li.product.bi-card .woocommerce-image__wrapper {
	overflow: visible !important;
}

/* Scoped to .bi-card__atc rather than to .bi-card__media, because on archives
   the button is injected into Shoptimizer's .woocommerce-image__wrapper and
   there is no __media element. Every declaration is !important, so the shorter
   selector still beats the front-page Additional CSS rule at (0,5,0). */
.bi-card .bi-card__atc .button,
.bi-card .bi-card__atc .add_to_cart_button,
.bi-card .bi-card__atc a.button {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	max-width: 30px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	/* Clip to the circle only — parent stays visible for box-shadow. */
	overflow: hidden !important;
	white-space: nowrap;
	font-size: 0 !important;
	/* Kill theme line-height/letter-spacing that shove the "+" off-center. */
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	display: block !important;
	line-height: 0 !important;
	/* Always visible — beat Shoptimizer's opacity:0 until li:hover. */
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 5;
	pointer-events: auto;
	transition: box-shadow 0.2s ease;
	/* Own green — do not rely on theme .button colour (varies per storefront). */
	background: var(--bi-card-cta) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	/* Anchor — never translate on hover (regressed after homepage-draft fix). */
	transform: none !important;
}

.bi-card .bi-card__atc .button::before {
	content: "+" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Geometric center of the 30px circle; slight optical lift for "+" glyph. */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-indent: 0 !important;
	text-align: center !important;
	color: #fff !important;
	/* "+" sits optically low in most fonts — nudge up 1px at rest. */
	transform: translateY(-1px) !important;
	transform-origin: center center !important;
	transition: transform 0.3s ease;
	will-change: transform;
	pointer-events: none;
}

.bi-card .bi-card__atc .button:hover {
	/* Stay put — only the "+" spins; no lift that looks like it "won't stay". */
	transform: none !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
}

.bi-card .bi-card__atc .button:hover::before {
	/* Keep the optical nudge while rotating in place. */
	transform: translateY(-1px) rotate(180deg) !important;
}

/* The front-page Additional CSS pushes this button up by a negative margin. */
.bi-card .bi-card__atc .button,
.bi-card .bi-card__atc .button::before {
	margin-top: 0 !important;
}

/* Do NOT hide `.button.added` unconditionally. That selector (0,4,0) beat the
   data-bi-qty="0" restore rule, so after an AJAX add — before the cart
   fragment lands — the "+" vanished and the stepper was still display:none,
   leaving an empty 30×30 hole (seen on related/upsell rails). The stepper
   rules below are the only place that may hide the round button. */

.bi-card .woocommerce-loop-product__title {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	margin: 0 0 6px !important;
	line-height: 1.3 !important;
	padding: 0 !important;
	clear: both;
}

.bi-card__sku,
.bi-card .bi-draft-sku {
	display: block;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	width: fit-content;
	font-size: 11px;
	line-height: 1.2;
	color: var(--bi-card-muted);
	background: #eef1f4;
	padding: 4px 8px;
	border-radius: 999px;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bi-card .price {
	color: var(--bi-card-price) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	margin: 0 0 4px !important;
}

.bi-card .price .woocommerce-Price-currencySymbol,
.bi-card .price .amount {
	color: var(--bi-card-price) !important;
}

/* Stock line under the price — normal weight, not bold. The front-page
   Additional CSS hides in-stock text outright, so re-assert display.
   Theme paints a checkmark via ::before with position:relative + top:3px,
   which sits the icon below the baseline of "In Stock" / "35 In Stock".
   Flex + static ::before centers the glyph with the label. Also zero the
   Additional CSS padding-bottom:10px so the row doesn't look bottom-heavy. */
.bi-card .stock,
.bi-card .price .stock,
.bi-card p.stock {
	display: block !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

.bi-card .stock.in-stock.in_stock_color,
.bi-card .stock.in-stock.in_stock_color.woo-custom-stock-status,
.bi-card .stock.out-of-stock.out_of_stock_color.woo-custom-stock-status {
	display: block !important;
}

li.product.bi-card p.stock.in-stock::before,
li.product.bi-card p.stock.out-of-stock::before,
.bi-card p.stock.in-stock::before,
.bi-card p.stock.out-of-stock::before {
	position: static !important;
	top: auto !important;
	margin: 0 6px 0 0 !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	vertical-align: middle !important;
}

/* ---------------------------------------------------------------------------
   Archive variant.

   On shop / category / brand / tag archives the card is Shoptimizer's own
   markup, not ours — we only relocate the add-to-cart button (see
   bi-card-archive.php) and map the theme's structure onto the card look here:

     li.product.bi-card.bi-card--archive
       > .commercekit-wishlist.mini
       > .woo-height
           > .woocommerce-image__wrapper   (a.LoopProduct-link > carousel > img)
               > .bi-card__atc             <- our one structural change
           > .woocommerce-card__header     (brand, cats, title, .metaa, price)

   The !important flags on the box are not decoration: every storefront's
   Additional CSS carries `body:not(.page-id-<front>) .products li.product`
   at specificity (0,3,2), which outranks anything reasonable we can write.
   --------------------------------------------------------------------------- */

.bi-card--archive {
	border: 1px solid var(--bi-card-line) !important;
	border-radius: 10px !important;
	padding: 12px !important;
	height: 100%;
}

/* .woo-height is not the theme — it comes from the woo-align-buttons plugin,
   which JS-writes a fixed pixel height onto it to fake equal-height cards.
   That number is measured once from the old 150px-tall thumbnails, so with 1:1
   images it clips the bottom of the card and pushes the button outside the
   border. Our card is a flex column that aligns natively, so we override the
   inline height. !important is required: the plugin sets it inline. */
.bi-card--archive > .woo-height {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

.bi-card--archive .woocommerce-image__wrapper {
	position: relative;
	margin: 0 0 10px;
	line-height: 0;
}

/* Square, undistorted thumbnails.
   The theme stretches the loop image to the full card width, so an 800x800
   source was being drawn at 255x150 — squashed, not merely cropped. Giving the
   image its own 1:1 box with object-fit:contain restores the aspect ratio and
   makes every row line up regardless of the source's shape. `contain` rather
   than `cover` because catalog photos must not be cropped.

   IMPORTANT: connectivity-badge icons also live under this wrapper. They are
   reset immediately below — never let width:100% / aspect-ratio:1/1 hit them
   or the glass chips collapse to text-only. */
.bi-card--archive .woocommerce-image__wrapper img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0;
}

/* Restore Wi-Fi / Bluetooth / Cell / LAN / arc icons inside the glass chips.
   Higher specificity than the product-photo rule above. */
.bi-card--archive .woocommerce-image__wrapper .custom-connectivity-badge img,
.bi-card--archive .woocommerce-image__wrapper .custom-connectivity-badge svg,
.bi-card--archive .woocommerce-image__wrapper .ckit-badge img,
.bi-card--archive .woocommerce-image__wrapper .ckit-badge svg {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 14px !important;
	max-width: 18px !important;
	height: 1em !important;
	max-height: 1em !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	margin: 0 5px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	position: static !important;
	transform: none !important;
}

.bi-card--archive .woocommerce-card__header {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0 !important;
	/* Theme ships 0.75rem here, which stacked on the image's own 10px bottom
	   margin gave a 24px trench between the photo and the brand line. */
	padding-top: 2px !important;
}

/* The full category breadcrumb list is shelf noise and pushes price below the
   fold. The homepage card never showed it. */
.bi-card--archive .product__categories {
	display: none !important;
}

/*
 * Brand line: match the PDP .product-brand-title treatment (blue #004466
 * link, medium weight) rather than muted grey. Scaled down to 12px so it
 * stays subordinate to the product title. The SKU keeps the grey pill —
 * two different roles, two different treatments.
 */
.bi-card--archive .product-brand {
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	color: #004466 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

.bi-card--archive .product-brand a {
	display: block !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: #004466 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.bi-card--archive .product-brand a:hover {
	color: #00334d !important;
	text-decoration: underline !important;
}

/* Shoptimizer's SKU span, restyled as the card's SKU pill.
   Additional CSS sets min-height:1.5em + line-height:1.5 on .metaa, which
   drops the glyphs toward the bottom of the grey pill. Long SKUs
   (e.g. FEB880VLF300DNRS) must ellipsis in narrow mobile columns —
   max-width:100% + nowrap beats theme fit-content / overflow:visible. */
.bi-card--archive .metaa {
	display: block !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: var(--bi-card-muted) !important;
	background: #eef1f4 !important;
	padding: 4px 8px !important;
	border-radius: 999px !important;
	margin: 0 0 6px !important;
	width: fit-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	text-align: center !important;
	align-self: flex-start !important;
	box-sizing: border-box !important;
}

/* Variable products have no parent SKU, so the theme emits an empty span and
   we were painting a bare grey blob where the SKU pill goes. */
.bi-card--archive .metaa:empty {
	display: none !important;
}

/* Stock / price footer of the archive card.
   Title is clamped to 2 lines, but brand + SKU length still vary — without
   margin-top:auto the price+stock block sits at different heights across a
   row. Push .cgkit-as-variation-price (price) to the bottom of the header;
   p.stock follows it as a sibling and stays under the price inside the card.

   Shoptimizer related/upsells/archives emit:
     .cgkit-as-variation-price > .price > (.amount + .price-suffix)
     p.stock   ← sibling of .cgkit-as-variation-price, NOT inside .price
   Homepage shelves put stock inside .price. Keep price on ONE line (ellipsis
   if the CA$/AU$ range + /each won't fit); never wrap "/each" under the
   amounts. Stock is its own line under price, also single-line + ellipsis. */
.bi-card--archive .cgkit-as-variation-price {
	margin-top: auto !important;
}

/* One line for amount – amount /each. If the range is too wide for the
   card, ellipsis — never stack "/each" or the high end onto a second row. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive .cgkit-as-variation-price .price,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > .woocommerce-Price-amount,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > .amount {
	white-space: nowrap !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > .price-suffix {
	white-space: nowrap !important;
	color: var(--bi-card-muted) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* Catalog: sale amount only — hide the struck-through regular. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price del {
	display: none !important;
}

/* Stock inside .price (shelf cards): own line under amount+/each, still
   single-line ellipsis if the label is long. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > .stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > p.stock {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

/* Healthy in-stock copy inherits .price red unless we paint it green. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > p.stock.in-stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.in-stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.in-stock.in_stock_color,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.in-stock.in_stock_color.woo-custom-stock-status {
	color: var(--bi-card-cta) !important;
}

/* Duplicate stock lines from nested get_price_html(). */
body.bi-card-archive-on li.product.bi-card.bi-card--archive .price > p.stock + p.stock {
	display: none !important;
}

/* Stock as header sibling (related/upsells/archives): one line + ellipsis. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive > .woo-height > .woocommerce-card__header > p.stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .woocommerce-card__header > p.stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.in-stock.in_stock_color.woo-custom-stock-status,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.out-of-stock.out_of_stock_color.woo-custom-stock-status {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	/* Theme / Additional CSS draw a grey hairline above In Stock. */
	border: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.in-stock::before,
body.bi-card-archive-on li.product.bi-card.bi-card--archive p.stock.out-of-stock::before {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	margin: 0 6px 0 0 !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	vertical-align: middle !important;
	transform: none !important;
}

/* Shoptimizer's image-overlay "Out of stock" banner — never show on the photo.
   Status stays under the price as p.stock.out-of-stock (hook also removed in
   bi-card-archive.php). */
body.bi-card-archive-on li.product.bi-card .product-out-of-stock,
li.product.bi-card .product-out-of-stock,
.bi-card .product-out-of-stock {
	display: none !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .wc-stripe-bnpl-shop-message:empty {
	display: none !important;
}

/* Labelled variant of the action control.
   Variable / external / out-of-stock products cannot be one-click added, so
   they show their real label — "Select options", "Call/Text to Order", "Read
   more" — but they share the "+" slot at the bottom-left of the photo so the
   action is in the same place on every card. Solid green rather than an
   outline, because an outline over a product photo has nothing to sit on. */
.bi-card__atc.bi-card__atc--label {
	width: auto !important;
	height: auto !important;
	max-width: calc(100% - 8px) !important;
	overflow: visible !important;
}

/* (0,4,0) is required here. The base "+" rules are (0,3,0) and so is the
   Additional CSS's `.button.product_type_variable.add_to_cart_button
   { background: darkgrey !important }`, which is inlined after this file and
   would win a tie — that rule is why "Select options" used to render as a flat
   grey block that read as disabled. */
.bi-card .bi-card__atc.bi-card__atc--label .button {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 7px 14px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--bi-card-cta) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	transition: transform 0.2s ease;
}

/* The base rule paints a "+" glyph through ::before; the label needs its text. */
.bi-card .bi-card__atc.bi-card__atc--label .button::before {
	content: none !important;
	display: none !important;
}

.bi-card .bi-card__atc.bi-card__atc--label .button:hover {
	transform: none !important;
}

/* ---------------------------------------------------------------------------
   Quantity stepper.

   Replaces the round "+" once the product is in the cart. The "+" and the
   stepper both live in .bi-card__atc; JS only flips data-bi-qty on the box, so
   there is no markup swap to get out of sync with WooCommerce.
   --------------------------------------------------------------------------- */

.bi-card__atc .bi-qty {
	display: none;
	/* Parent .bi-card__atc is pointer-events:none so photo clicks pass through;
	   the round "+" sets pointer-events:auto — the stepper must too, or − / +
	   clicks fall through to the product link (full navigation / reload). */
	pointer-events: auto;
}

/* Anything other than zero: hide the "+", show the stepper, and let the box
   grow out of the 30px circle it is pinned as. */
.bi-card__atc[data-bi-qty]:not([data-bi-qty="0"]) {
	width: auto !important;
	height: 30px !important;
	overflow: visible !important;
}

.bi-card__atc[data-bi-qty]:not([data-bi-qty="0"]) .bi-qty {
	display: inline-flex;
	align-items: center;
	background: var(--bi-card-cta);
	border-radius: 999px;
	height: 30px;
	padding: 0 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	pointer-events: auto;
}

/* Hide the round "+" only when the stepper is the visible control. Higher
   specificity than `.bi-card .bi-card__atc .button` so it wins cleanly. */
.bi-card .bi-card__atc[data-bi-qty]:not([data-bi-qty="0"]) .button,
.bi-card .bi-card__atc[data-bi-qty]:not([data-bi-qty="0"]) .button.added {
	display: none !important;
	pointer-events: none !important;
}

/* Zero (or not yet painted): keep/restore the "+", even if Woo left `added`. */
.bi-card .bi-card__atc[data-bi-qty="0"] .button.added,
.bi-card .bi-card__atc:not([data-bi-qty]) .button.added {
	display: flex !important;
}

.bi-qty__btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: #fff;
	width: 26px;
	height: 26px;
	line-height: 1;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.bi-qty__btn:hover {
	background: rgba(0, 0, 0, 0.15);
}

.bi-qty__n {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	min-width: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.bi-card__atc.is-busy {
	opacity: 0.65;
	pointer-events: none;
}

.bi-card--archive .star-rating {
	display: none;
}

/* Wishlist heart — top-right corner of the card, bordered chip so it reads
   as a control on busy product photos. Theme parks it at right:30px without
   a border; pin to 8px and give the anchor its own ring. */
body.bi-card-archive-on li.product.bi-card.bi-card--archive {
	position: relative !important;
	isolation: isolate;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .commercekit-wishlist.mini {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	z-index: 3 !important;
	margin: 0 !important;
	width: 30px !important;
	height: 30px !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .commercekit-wishlist.mini a.commercekit-save-wishlist {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 999px !important;
	border: 1.5px solid #cfd6de !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1) !important;
	box-sizing: border-box !important;
}

body.bi-card-archive-on li.product.bi-card.bi-card--archive .commercekit-wishlist.mini a.commercekit-save-wishlist:hover {
	border-color: #9aa7b5 !important;
	background: #fff !important;
}

/* Connectivity / Color badges — flush top-left over the photo (no inset).
   Wishlist stays top-right. */
li.product.bi-card.bi-card--archive .woocommerce-image__wrapper,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .woocommerce-image__wrapper {
	position: relative !important;
}

li.product.bi-card.bi-card--archive .ckit-badge_wrapper,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .ckit-badge_wrapper {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
	max-width: calc(100% - 40px) !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

li.product.bi-card.bi-card--archive .ckit-badge_wrapper .custom-connectivity-badge,
li.product.bi-card.bi-card--archive .ckit-badge_wrapper .ckit-badge,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .ckit-badge_wrapper .custom-connectivity-badge,
body.bi-card-archive-on li.product.bi-card.bi-card--archive .ckit-badge_wrapper .ckit-badge {
	pointer-events: auto;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	background: rgba(255, 255, 255, 0.48) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.35) !important;
	backdrop-filter: blur(12px) saturate(1.35) !important;
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
	color: #121820 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em;
	white-space: nowrap !important;
}

li.product.bi-card.bi-card--archive .ckit-badge_wrapper .custom-connectivity-badge img,
li.product.bi-card.bi-card--archive .ckit-badge_wrapper .custom-connectivity-badge svg,
li.product.bi-card.bi-card--archive .ckit-badge_wrapper .ckit-badge img,
li.product.bi-card.bi-card--archive .ckit-badge_wrapper .ckit-badge svg {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 14px !important;
	max-width: 18px !important;
	height: 1em !important;
	max-height: 1em !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* Wishlist heart floats over the photo instead of taking a row of its own.
   (Superseded for archive cards by the bordered chip rules above; keep this
   as a fallback for any non-archive .bi-card that still mounts a wishlist.) */
.bi-card--archive .commercekit-wishlist.mini {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	margin: 0;
}

/* WooCommerce appends a "View cart" link after an AJAX add. The header cart
   icon already covers it, and letting it render reflows the whole shelf. */
.bi-card a.added_to_cart,
.bi-card a.added_to_cart.wc-forward,
.bi-card .added_to_cart,
.bi-card .wc-forward {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	position: absolute !important;
	left: -9999px !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* ---------------------------------------------------------------------------
   Loop layout.

   The theme lays the loop out as floated flex children with zero gutter, so
   cards butt up against each other and share borders. Grid gives a real gutter
   and — because grid items stretch by default — equal heights per row without
   the woo-align-buttons plugin JS-measuring a pixel height onto .woo-height.

   Scoped to the body class from bi-card-archive.php: a child cannot select
   ul.products from li.product.
   --------------------------------------------------------------------------- */

body.bi-card-archive-on ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* Honour each loop's own column count: archives ship columns-3, while the
   related / up-sell rails on a product page ship columns-5. */
@media (min-width: 768px) {
	body.bi-card-archive-on ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.bi-card-archive-on ul.products.columns-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	body.bi-card-archive-on ul.products.columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.bi-card-archive-on ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.bi-card-archive-on ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	body.bi-card-archive-on ul.products.columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* WooCommerce/Shoptimizer clearfix pseudo-elements would otherwise become two
   empty grid cells and punch holes in the first row. */
body.bi-card-archive-on ul.products::before,
body.bi-card-archive-on ul.products::after {
	content: none !important;
	display: none !important;
}

body.bi-card-archive-on ul.products > li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Two lines, always — a one-line title otherwise makes its card shorter than
   the rest of the row and the price/button rows stop aligning across the grid. */
.bi-card--archive .woocommerce-loop-product__title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 35px;
}

/* ---------------------------------------------------------------------------
   PDP prev/next chevrons.

   Shoptimizer paints floating prev/next product arrows in the summary. They
   fight the cleaner PDP chrome we are building under ?bi-card=1, so hide them
   for the preview (and later when archive cards go live on a store).
   --------------------------------------------------------------------------- */

body.bi-card-archive-on.single-product .shoptimizer-product-prevnext {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Single product CTA.

   The PDP button already shared the card's green, but sat at a 4px radius and
   400 weight while the loop's labelled button is a 600-weight pill. Scoped to
   form.cart so loop buttons — which take their own rules above — are untouched.
   The colour is written literally because --bi-card-cta is declared on .bi-card
   and does not reach this form; keep the two in step.
   --------------------------------------------------------------------------- */

body.bi-card-archive-on form.cart .single_add_to_cart_button {
	background: #3bb54a !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.bi-card-archive-on form.cart .single_add_to_cart_button:hover {
	background: #34a341 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------------------
   PDP quantity stepper.

   Theme default is a 50px input with stacked chevrons absolutely parked at
   right:-34px — fine next to a square ATC, broken next to the green pill.
   Rebuild as a single horizontal − / n / + control that matches the card
   stepper and sits flush with the ATC. display:contents on .quantity-nav lets
   the up/down spans participate in the parent grid (DOM order is input then
   nav, so grid-area reorders to minus | qty | plus). Higher specificity than
   bi-pdp-cls-fixes' 45px margin (which cleared the old overflow arrows).
   --------------------------------------------------------------------------- */

body.bi-card-archive-on.single-product div.product form.cart .quantity.buttons_added,
body.bi-card-archive-on.single-product div.product form.cart .quantity {
	display: grid !important;
	grid-template-columns: 44px minmax(44px, 56px) 44px;
	grid-template-areas: "minus qty plus";
	align-items: stretch;
	/* max-content — width:auto on a block grid stretches full column and
	   leaves an empty pill beside −/n/+ (variable PDPs sit in a block
	   .variations_button, not a flex form.cart row). */
	width: max-content !important;
	max-width: 100%;
	flex: 0 0 auto;
	height: 52px !important;
	margin: 0 12px 0 0 !important;
	float: none !important;
	border: 1.5px solid #d8dde3;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	overflow: hidden;
	position: relative;
}

/* Variable products: qty + ATC live in .variations_button, not as flex
   children of form.cart. Mirror the simple-product row here. */
body.bi-card-archive-on.single-product div.product form.variations_form .woocommerce-variation-add-to-cart,
body.bi-card-archive-on.single-product div.product form.variations_form .variations_button {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

body.bi-card-archive-on.single-product div.product form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt,
body.bi-card-archive-on.single-product div.product form.variations_form .variations_button .single_add_to_cart_button.button.alt {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* Hide empty pill when WC collapses qty to type=hidden (min===max, e.g. stock=1). */
body.bi-card-archive-on.single-product div.product form.cart .quantity:has(> input.qty[type="hidden"]) {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-nav {
	display: contents !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity input.qty {
	grid-area: qty;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	color: #111 !important;
	-moz-appearance: textfield;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.bi-card-archive-on.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-button {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-down {
	grid-area: minus;
	border-right: 1px solid #e8ecf0;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-up {
	grid-area: plus;
	border-left: 1px solid #e8ecf0;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-button:hover {
	background: #f3f6f8 !important;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-button:active {
	background: #e8eef2 !important;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-button:focus-visible {
	outline: 2px solid #2491ff;
	outline-offset: -2px;
	z-index: 1;
}

/* Theme ships caret-up / caret-down masks; swap to + / −. */
body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-button:before {
	content: "" !important;
	width: 14px !important;
	height: 14px !important;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #1a1f26 !important;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-up:before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}

body.bi-card-archive-on.single-product div.product form.cart .quantity .quantity-down:before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}

body.bi-card-archive-on.single-product div.product form.cart .single_add_to_cart_button.button.alt {
	height: 52px !important;
	min-height: 52px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	padding: 0 28px !important;
}

/*
 * Theme paints a checkmark via .button.added::before with position:relative
 * + top:4px, which sits the icon a hair below the label and can wrap it onto
 * its own line when the button is narrow. Pin it as a flex sibling so icon
 * and "Add to cart" share one centered row.
 */
body.bi-card-archive-on.single-product div.product form.cart .single_add_to_cart_button.button.alt::before,
body.bi-card-archive-on.single-product div.product form.cart .button.added::before {
	position: static !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	align-self: center !important;
	vertical-align: middle !important;
}

/* Mobile: [qty][ATC] row; hint under form — CSS grid (see bi-pdp-cls-fixes). */
@media (max-width: 992px) {
	body.bi-card-archive-on.single-product div.product form.cart:not(.variations_form) {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 6px !important;
		width: 100% !important;
	}
	body.bi-card-archive-on.single-product div.product form.variations_form .woocommerce-variation-add-to-cart,
	body.bi-card-archive-on.single-product div.product form.variations_form .variations_button {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 6px !important;
		width: 100% !important;
	}
	body.bi-card-archive-on.single-product div.product form.cart .quantity.buttons_added,
	body.bi-card-archive-on.single-product div.product form.cart .quantity {
		grid-column: 1 !important;
		margin: 0 !important;
		width: max-content !important;
		max-width: none;
		grid-template-columns: 36px 32px 36px !important;
		height: 48px !important;
	}
	body.bi-card-archive-on.single-product div.product form.cart .single_add_to_cart_button.button.alt {
		grid-column: 2 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	body.bi-card-archive-on.single-product div.product form.cart .bi-pdp-in-cart-hint {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Mini-cart quantity (cart drawer).

   Same − / n / + pill language as the PDP stepper, sized for the drawer.
   Markup is already horizontal (theme: down, input, up) — only the chrome
   needs to match. Fixed width so a wide drawer column cannot stretch it.
   --------------------------------------------------------------------------- */

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart {
	width: 112px !important;
	max-width: 112px !important;
	height: 36px !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 34px 44px 34px !important;
	align-items: stretch !important;
	border: 1.5px solid #d8dde3 !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
	overflow: hidden !important;
	-webkit-user-select: none;
	user-select: none;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart input,
body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_input {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	color: #111 !important;
	-moz-appearance: textfield;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart input::-webkit-outer-spin-button,
body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart input::-webkit-inner-spin-button,
body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_input::-webkit-outer-spin-button,
body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button.quantity-down {
	border-right: 1px solid #e8ecf0 !important;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button.quantity-up {
	border-left: 1px solid #e8ecf0 !important;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button:hover {
	background: #f3f6f8 !important;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button:active {
	background: #e8eef2 !important;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart_button:focus-visible {
	outline: 2px solid #2491ff;
	outline-offset: -2px;
	z-index: 1;
}

body.bi-card-archive-on .shoptimizer-custom-quantity-mini-cart svg {
	width: 12px !important;
	height: 12px !important;
	stroke: #1a1f26 !important;
}