/*
 * The exam reference's loop card (solutech), ported for the arneiron child.
 * Paired with woocommerce/content-product.php — the selectors below only mean
 * something against that markup (ul.products li.product .woo-item-grid …).
 * Rules are solutech's own, from assets/woocommerce/css/woocommerce.css and
 * css/single.css, so the rendered card matches exam by construction; only the
 * scope is narrowed from `div.pix-product` to `ul.products li.product`.
 */

ul.products li.product .woo-item-grid {
	position: relative;
}

ul.products li.product .woo-item-grid img {
	display: block;
	width: 100%;
	height: auto;
}

.woo-item-footer .product-name {
	padding: 15px 0 0 0;
	font-weight: 600;
}

.woo-item-footer .price {
	display: block;
	margin-bottom: .5em;
}

/* The submit button's single source of truth is the pass-2 block further
   down ( layout pass 2 ). This spot previously carried a second, stale copy —
   its :hover re-declared bottom: -5px and, sharing the selector with the
   pass-2 rule, won the cascade on hover: the button teleported 13px the
   moment the pointer moved, then the transform animation ran on top. Two
   animations, one hover — the bug the owner reported 2026-09-13. */

/* The quantity stepper (solutech css/single.css). Light-on-dark is what exam
   ships — parity, not an oversight. */
.solutech-qty-wrapper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 15px;
}

.solutech-qty-wrapper .qty {
	text-align: center !important;
	border: none !important;
	border-left: 1px solid #ddd !important;
	border-right: 1px solid #ddd !important;
	margin: 0 !important;
	height: 40px !important;
	width: 50px !important;
	padding: 0 !important;
	border-radius: 0 !important;
	appearance: textfield;
	-moz-appearance: textfield;
	background-color: transparent !important;
	color: inherit;
}

.solutech-qty-wrapper .qty::-webkit-outer-spin-button,
.solutech-qty-wrapper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.solutech-qty-wrapper .qty-btn {
	background: #f9f9f9;
	border: none;
	width: 35px;
	height: 40px;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	color: #333;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.solutech-qty-wrapper .qty-btn:hover {
	background: #eee;
}

/* --- Match the exam rendering, not just its DOM ---------------------------------------
   The parent theme paints every ul.products li.product as a bordered surface
   panel with a mono dark price (arneiron/assets/css/woocommerce.css). Exam's
   card is borderless, everything centred, and the price is the brand purple.
   Measured against screenshots of both carts, 2026-09-13. */
.woocommerce ul.products li.product {   /* parent paints this same selector — must match its specificity */
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

ul.products li.product .woo-item-grid {
	text-align: center;
	padding-bottom: 10px;
}

.woo-item-footer .product-name {
	font-size: 17px;
	line-height: 1.3;
}

ul.products li.product .woo-item-footer .price,
ul.products li.product .woo-item-footer .price .woocommerce-Price-amount {
	color: var(--vnm-brand, #8888ea);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 0;
}

.solutech-qty-wrapper {
	margin-inline: auto;
}

/* --- Layout pass 2 (owner feedback on the first screenshots, 2026-09-13) ---
   1. the hover-revealed Buy button sat at the grid's bottom edge — exactly
      where the stepper lives — and covered it. The grid now reserves a strip
      below the stepper and the button fades in INSIDE that strip.
   2. the artwork filled the card and read enormous; exam's art floats at
      roughly 60% of the card width. Capped and centred.
   3. three cards in a columns-4 grid leave a dead quarter-column on the right;
      the cross-sells row is now a 3-column grid, centred. */
.woocommerce ul.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	justify-content: center;
}

.woocommerce ul.products.columns-4 li.product {
	width: auto;
	margin: 0;
	float: none;
}

ul.products li.product .woo-item-grid img {
	max-width: 150px;
	margin-inline: auto;
}

ul.products li.product .woo-item-grid {
	padding-bottom: 64px;   /* the Buy button's own strip; it fades in here */
}

/* Exam-measured button (2026-09-13): 44x70%, brand fill at rest, and on the
   button's own hover it lifts 3px, grows the pix buttons shadow and lightens
   to --pix-button-color-lighter. THREE states, one system:
     invisible  : opacity 0, translateY(8px)
     card hover : opacity 1, translateY(0), brand fill
     button hover: translate3d(0,-3px,0), shadow, lighter fill */
ul.products li.product .woo-item-grid .button {
	bottom: 8px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	height: 44px;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--pix-button-color, #8888ea);
	border-color: var(--pix-button-color, #8888ea);
	transform: translateY(8px);   /* rests a little lower while invisible */
	transition: opacity .33s, transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
}

ul.products li.product:hover .woo-item-grid .button {
	opacity: 1;
	bottom: 8px;                  /* declared here AND in the base rule so no
	                                 other :hover rule can move it */
	transform: translateY(0);     /* fades and rises into place */
}

ul.products li.product:hover .woo-item-grid .button.added {
	display: none;
}

ul.products li.product .woo-item-grid .button:hover,
ul.products li.product .woo-item-grid .button:focus {
	background-color: var(--pix-button-color-lighter, #A0A0FF);
	border-color: var(--pix-button-color-lighter, #A0A0FF);
	box-shadow: var(--pix-buttons-shadow, 0px 5px 15px 0px rgba(0, 0, 0, 0.15));
	transform: translate3d(0, -3px, 0);   /* the button's own lift; declared
	                                         after the card-hover rule so it
	                                         wins the equal-specificity tie */
	color: #fff;
}

/* WooCommerce's float-clearing pseudo-elements (ul.products::before/::after)
   become grid items once the ul is a grid — the ::after's display:table
   occupied cell 1 and shoved every card one column right (measured: the 10
   Gumption card opened the row in column 2). The grid needs no clearfix. */
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-4::after {
	display: none;
}