/* ==========================================================================
   Trucktrade — CSS-only "no image" placeholder
   --------------------------------------------------------------------------
   Replaces WooCommerce's placeholder.webp with a pure-CSS pattern + inline
   SVG icon (no placeholder image file is ever requested — see the
   woocommerce_placeholder_img / woocommerce_placeholder_img_src filters in
   functions.php, and the fallback added to
   woocommerce/single-product/product-image.php for the detail page).

   Applies to:
   - Shop page / product category archives (core content-product.php loop)
   - Gallery pages (gallery-template.php, gallery-sale-template.php,
     gallery-sold-template.php)
   - Single product detail page: hero image, thumbnail strip, mobile
     slider, and the fullscreen lightbox gallery popup
   ========================================================================== */

img.woocommerce-placeholder,
img.tt-img-placeholder {
	background-color: var(--color-bg-subtle, #fafafa);
	background-image:
		repeating-linear-gradient(
			135deg,
			#ffffff 0px,
			#ffffff 10px,
			#f0f0f0 10px,
			#f0f0f0 20px
		),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c7c7c9' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='24' width='30' height='18' rx='1.5'/%3E%3Cpath d='M34 30h11l9 7v5H34z'/%3E%3Ccircle cx='15' cy='45' r='4.5'/%3E%3Ccircle cx='46' cy='45' r='4.5'/%3E%3Cline x1='19.5' y1='45' x2='41.5' y2='45'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: cover, 56px 56px;
	border: 1px solid var(--color-border, #f0f0f0);
	color: transparent; /* hides the alt text if the browser ever paints it */
}

/* Bigger icon on the single-product hero image and the lightbox popup */
.product-image-big img.woocommerce-placeholder,
#product-gallery-popup img.woocommerce-placeholder {
	background-size: cover, 120px 120px;
}

/* Smaller icon on thumbnail strips / mobile slider frames */
.product-image-small img.woocommerce-placeholder,
.mobile-product-slider img.woocommerce-placeholder {
	background-size: cover, 34px 34px;
}