/* =============================================================================
 * CarParts — Mobile tuning (≤600px). Desktop is untouched (all in @media).
 * ========================================================================== */
@media (max-width: 600px) {

	/* ---- product cards: keep the title flex-CENTRED (h + v), just smaller ---- */
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		text-align: center !important;
		/*font-size: 13px !important;*/
		line-height: 1.5 !important;
		min-height: 3.2em !important;   /* reserve a full 2 lines so 1- vs 2-line cards align */
		padding-right: 8px !important;
		padding-left: 8px !important;
	}
	.woocommerce ul.products li.product .cp-loop-cat { font-size: 13px !important; } /* test*/

	/* guarantee pill — compact, never clipped */
	.cp-guarantee--loop {
		font-size: 13px !important;/*test*/
		padding: 3px 7px !important;
		gap: 3px !important;
		max-width: 100% !important;
	}
	.cp-guarantee--loop svg { font-size: 12px !important; }

	/* «جدید» badge — compact */
	.woocommerce ul.products li.product .onsale,
	.woocommerce ul.products li.product .cz_new_badge {
		font-size: 13px !important; /* test*/
		padding: 3px 10px !important;
	}

	/* CRITICAL: the theme stacks price + add-to-cart in a 50/50 bottom bar that is far
	 * too narrow on a phone (button text «افزودن به سبد خرید» clips, price wraps). Put
	 * them back into normal flow, each FULL WIDTH and stacked. */
	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .button.add_to_cart_button,
	.woocommerce ul.products li.product .button[class*="product_type_"] {
		position: static !important;
		width: 100% !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		box-sizing: border-box !important;
		text-align: center !important;
	}
	.woocommerce ul.products li.product .price {
		font-size: 13px !important;
		white-space: nowrap !important;
		padding: 8px 8px 8px !important;      /* kill the theme's 20px bottom gap */
		margin: 0 !important;
		border-width: 1px 0 0 !important;
	}
	.woocommerce ul.products li.product .button.add_to_cart_button,
	.woocommerce ul.products li.product .button[class*="product_type_"] {
		font-size: 12px !important;
		padding: 11px 8px !important;
		min-height: 44px !important;
		margin: 0 !important;
		border-width: 1px 0 0 !important;
	}
	/* the theme reserves bottom space on the link for its (now unused) absolute bar —
	 * its margin-bottom (~40px) is the real gap between the price and the button. */
	.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}

	/* The grid stretches the card to the row height; since the price lives INSIDE the
	 * link, that extra height became empty space BETWEEN the price and the button.
	 * Make the card a flex column and pin the price to the link's bottom so the
	 * price + button sit together (the slack moves above the price, not below it). */
	.woocommerce ul.products li.product {
		display: flex !important;
		flex-direction: column !important;
	}
	.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
	}
	.woocommerce ul.products li.product > a.woocommerce-loop-product__link .price {
		margin-top: auto !important;   /* push price to the bottom of the link */
	}

	/* wishlist chip a touch smaller */
	.woocommerce ul.products li.product .xtra-product-icons { transform: scale(.9); transform-origin: top right; }

	/* tighter grid gap on phones */
	.woocommerce-shop ul.products,
	.tax-product_cat ul.products,
	.tax-product_tag ul.products,
	.post-type-archive-product ul.products { gap: 10px !important; }

	/* ---- car → part picker ---- */
	.cp-cf { padding: 14px !important; border-radius: 14px !important; margin-bottom: 18px !important; }
	.cp-cf__head { gap: 8px !important; margin-bottom: 12px !important; }
	.cp-cf__title { font-size: 14px !important; }
	.cp-cf__back { font-size: 12px !important; padding: 5px 11px !important; }
	.cp-cf__row { gap: 8px !important; }
	.cp-cf__chip { padding: 7px 12px !important; font-size: 13px !important; }
	.cp-cf__chip--car { font-size: 13px !important; }
	.cp-cf__chip-i { font-size: 18px !important; }
	.cp-cf__chip-c { font-size: 10px !important; min-width: 16px !important; padding: 1px 5px !important; } 

	/* ---- footer: pair «راهنمای خرید» + «تماس با ما» side-by-side (theme forces
	 *      the contact column full-width, leaving راهنمای خرید alone). ---- */
	.cpf__contact { grid-column: auto !important; }
	.cpf__contact-list { text-align: start; }

	/* ---- toolbar: keep «نتیجه …» on ONE line beside «پیش فرض», count smaller ---- */
	.cp-toolbar { gap: 8px !important; margin-bottom: 16px !important; flex-wrap: nowrap !important; }
	.woocommerce-ordering select.orderby {
		min-height: 42px !important;
		font-size: 13px !important;
		padding: 9px 14px 9px 34px !important;
	}
	.woocommerce-result-count {
		font-size: 10px !important;
		padding: 7px 11px !important;
		white-space: nowrap !important;
	}
}

/* The theme forces `li.product { width: 48% !important }` at ≤480px via the
 * higher-specificity `body.xtra-woo-two-col-mobile …` selector, which fights our
 * CSS grid (items shrink to 48% of their cell). Override it with a stronger
 * selector so grid items fill their track. */
@media (max-width: 480px) {
	body.xtra-woo-two-col-mobile .woocommerce ul.products li.product,
	body.xtra-woo-two-col-mobile ul.products[class*="columns-"] li.product {
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}
}

/* very small phones: drop to a single column for breathing room */
@media (max-width: 360px) {
	.woocommerce-shop ul.products,
	.tax-product_cat ul.products,
	.tax-product_tag ul.products,
	.post-type-archive-product ul.products { grid-template-columns: 1fr !important; }
}