/* ==========================================================================
   Mobile catalog — Grid vs List (0.6.6.0)

   THE PROBLEM
   -----------
   catalog-upgrade.css collapsed List back to `display:flex` below 760px, which
   is the same stacked shape Grid already used. On a phone the two views were
   separated by about 34px of height and nothing else, so the toggle appeared
   to do nothing.

   THE FIX
   -------
   Grid  = two compact shopping cards per row, image-first, minimal text.
   List  = one horizontal row per product, image left, details right.

   Loaded after every other catalog sheet so it wins on cascade order rather
   than !important. Desktop (>=768px) is deliberately untouched.
   ========================================================================== */

@media (max-width: 767px) {

	/* ---------------------------------------------------------- GRID VIEW */

	.woocommerce ul.products:not(.wt-products--list) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.7rem;
	}

	/* Below ~340px two columns would clip the price, so fall back to one. */
	@media (max-width: 339px) {
		.woocommerce ul.products:not(.wt-products--list) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.woocommerce ul.products:not(.wt-products--list) li.product.wt-tire-card {
		display: flex;
		flex-direction: column;
		border-radius: 14px;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__body {
		padding: 0.7rem 0.7rem 0.75rem;
		gap: 0;
	}

	/* Compact typography that still fits a 2-up card at 360px. */
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__brand {
		margin: 0 0 .15rem;
		font-size: .6rem;
	}

	.woocommerce ul.products:not(.wt-products--list) .woocommerce-loop-product__title {
		font-size: .8rem;
		line-height: 1.32;
		/* Three lines reads as a deliberate wrap; two was clipping mid-name. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: calc(3 * 1.32 * .8rem);
		text-wrap: balance;
		overflow-wrap: break-word;
		hyphens: none;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__size {
		margin: .3rem 0 .25rem;
		font-size: .95rem;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__price {
		margin: 0 0 .5rem;
		font-size: .95rem;
	}

	/*
	 * Grid is for fast scanning, so the detail rows are hidden. Every one of
	 * them remains available in List view and on the product page, so no
	 * information is lost — it is only deferred.
	 */
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__specs,
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__disclaimer,
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__compare,
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__quantity,
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__secondary,
	.woocommerce ul.products:not(.wt-products--list) .wt-installed-estimate {
		display: none;
	}

	/* One primary action only. */
	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__actions {
		grid-template-columns: 1fr;
		margin-top: auto;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__actions .wt-btn--ghost {
		display: none;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__actions .wt-btn {
		min-height: 36px;
		font-size: .7rem;
		letter-spacing: .01em;
		padding-inline: .45rem;
		border-radius: 10px;
	}

	.woocommerce ul.products:not(.wt-products--list) .wt-tire-card__status {
		display: none;
	}

	/* ---------------------------------------------------------- LIST VIEW */

	.woocommerce ul.products.wt-products--list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}

	/* Horizontal row: fixed image column, details fill the rest. */
	.woocommerce ul.products.wt-products--list li.product.wt-tire-card {
		display: grid;
		grid-template-columns: 108px minmax(0, 1fr);
		align-items: stretch;
		border-radius: 14px;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 116px;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__body {
		display: flex;
		flex-direction: column;
		padding: .7rem .8rem .75rem .85rem;
	}

	/* Push the action to the bottom so buttons line up across rows. */
	.woocommerce ul.products.wt-products--list .wt-tire-card__actions {
		margin-top: auto;
	}

	.woocommerce ul.products.wt-products--list .woocommerce-loop-product__title {
		font-size: .88rem;
		line-height: 1.3;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__size {
		margin: .3rem 0 .2rem;
		font-size: 1rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__price {
		margin: 0 0 .45rem;
		font-size: 1rem;
	}

	/* Specifications are the point of List view. */
	.woocommerce ul.products.wt-products--list .wt-tire-card__specs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .3rem;
		margin-bottom: .55rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__specs div {
		padding: .35rem .4rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__specs dt {
		font-size: .58rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__specs dd {
		font-size: .7rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__status {
		position: static;
		display: inline-block;
		max-width: none;
		margin-bottom: .35rem;
	}

	/* Keep the row scannable: compare and quantity stay on the product page. */
	.woocommerce ul.products.wt-products--list .wt-tire-card__compare,
	.woocommerce ul.products.wt-products--list .wt-tire-card__quantity,
	.woocommerce ul.products.wt-products--list .wt-tire-card__disclaimer {
		display: none;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__actions {
		grid-template-columns: 1fr;
		gap: .4rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__actions .wt-btn {
		min-height: 42px;
		font-size: .76rem;
	}

	.woocommerce ul.products.wt-products--list .wt-tire-card__secondary {
		padding-top: .5rem;
		font-size: .7rem;
	}

	/* -------------------------------------------------------- VIEW TOGGLE */

	.wt-catalog-viewbar {
		padding: .6rem .7rem;
		gap: .6rem;
	}

	.wt-view-switch {
		width: auto;
		flex: none;
		padding: .18rem;
		border-radius: 11px;
	}

	.wt-view-switch button {
		min-height: 34px;
		padding: .3rem .7rem;
		font-size: .74rem;
		border-radius: 8px;
		transition: background-color .18s ease, color .18s ease;
	}

	.wt-view-switch button.is-active {
		background: #172838;
		color: #fff;
		box-shadow: inset 0 -2px 0 rgba(214, 83, 46, .95);
	}

	.wt-view-switch button:active {
		transform: scale(.97);
	}
}

/* ----------------------------------------------------- tasteful motion */

@media (prefers-reduced-motion: no-preference) {
	.woocommerce ul.products li.product.wt-tire-card {
		animation: wt-card-in .32s ease both;
	}

	.woocommerce ul.products li.product.wt-tire-card:nth-child(n + 5) {
		animation-delay: .04s;
	}

	@keyframes wt-card-in {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: none; }
	}

	.wt-tire-card__actions .wt-btn {
		transition: transform .14s ease, box-shadow .18s ease;
	}

	.wt-tire-card__actions .wt-btn:active {
		transform: scale(.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product.wt-tire-card {
		animation: none;
	}
}