/* ==========================================================================
   Catalog card media frame — 0.6.4.9-staging

   PROBLEM
   -------
   catalog-upgrade.css sized the frame as `min-height:185px` plus `padding:1rem`
   with `object-fit:contain` on the image. A card is roughly 300px wide, so the
   inner frame resolved to a landscape box (~268 x 185). The representative
   images are square (1200 x 1200), so `contain` letterboxed them and produced
   the grey strips down both sides.

   FIX
   ---
   Make the frame itself square, drop the padding, and switch to
   `object-fit: cover`. Because the source images are already 1:1, `cover` on a
   1:1 frame crops nothing at all - it simply fills the box edge to edge. Any
   future non-square image is centre-cropped rather than distorted, since
   `cover` preserves aspect ratio by definition.

   This file is enqueued after catalog-upgrade.css so these rules win on load
   order rather than on `!important`.
   ========================================================================== */

.woocommerce ul.products li.product.wt-tire-card .wt-tire-card__media {
	position: relative;
	padding: 0;
	min-height: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: linear-gradient(150deg, #f5f7f9, #fff);
}

.woocommerce ul.products li.product.wt-tire-card .wt-tire-card__media > a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.woocommerce ul.products li.product.wt-tire-card .wt-tire-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center center;
}

/* Older engines without aspect-ratio support fall back to a padding ratio. */
@supports not (aspect-ratio: 1 / 1) {
	.woocommerce ul.products li.product.wt-tire-card .wt-tire-card__media {
		height: 0;
		padding-bottom: 100%;
	}

	.woocommerce ul.products li.product.wt-tire-card .wt-tire-card__media > a {
		position: absolute;
		inset: 0;
	}
}

/* --------------------------------------------------------------- list view */

/*
 * In list view the media is a grid column, so a forced 1:1 box would leave a
 * gap beside a tall card. Let it stretch to the row height and keep cover, so
 * the tire still fills the cell with no grey areas.
 */
.woocommerce ul.products.wt-products--list li.product.wt-tire-card .wt-tire-card__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 190px;
}

@supports not (aspect-ratio: 1 / 1) {
	.woocommerce ul.products.wt-products--list li.product.wt-tire-card .wt-tire-card__media {
		height: auto;
		padding-bottom: 0;
	}
}

/* ------------------------------------------------- representative notice */

.wt-tire-card__disclaimer {
	margin: 0 0 0.7rem;
	color: #6a7885;
	font-size: 0.68rem;
	font-style: italic;
	line-height: 1.35;
}

.wt-product__disclaimer {
	margin: 0.75rem 0 1rem;
	padding: 0.6rem 0.8rem;
	border-left: 3px solid #d6532e;
	border-radius: 0 8px 8px 0;
	background: #f7f9fb;
	color: #52616d;
	font-size: 0.82rem;
	line-height: 1.45;
}

/* -------------------------------------------------------- single product */

/*
 * The single-product gallery uses the same square source images inside a
 * flexible column, so the same treatment keeps it consistent with the cards.
 */
.single-product .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: 14px;
}

.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 767px) {
	.wt-tire-card__disclaimer {
		font-size: 0.66rem;
	}
}

/* ==========================================================================
   Single-action cards (0.6.5.4-staging)

   Used tires show only the phone CTA - there is no Book Installation button
   for them - but catalog-upgrade.css lays the actions row out as two equal
   columns. That left the lone button at half width, so a longer label such as
   "Call to Check Availability" had nowhere to go. When the row contains a
   single button, let it span the full width instead. Cards with both buttons
   are unaffected.
   ========================================================================== */

.wt-tire-card__actions > .wt-btn:only-child {
	grid-column: 1 / -1;
	white-space: nowrap;
}

@media (max-width: 400px) {
	/* Very narrow phones: allow the label to shrink rather than overflow. */
	.wt-tire-card__actions > .wt-btn:only-child {
		white-space: normal;
		font-size: 0.72rem;
	}
}