/* ==========================================================================
   Product image frames — one system everywhere (loads after every area file
   except zz-lead-fixes.css).

   System:  4:5 frame · #F2F2F2 ground (matches the normalised 1600x2000 photos,
              garment centred on #F2F2F2) · image centred with object-fit: contain
            · inner padding token (0 = photo fills the 4:5 frame; normalised photos
              already carry their own margin, so contain == cover for them)
            · NO mix-blend-mode (multiply darkened tiles to ~#E5E5E5)
            · image is absolutely positioned, so the frame height comes ONLY from
              aspect-ratio (lazy images / odd intrinsic sizes can't stretch it)
            · no zoom on hover anywhere.
   Lifestyle mosaic ("Wear it. Share it.") keeps cover, centred.
   ========================================================================== */

:root {
	--yb-img-ratio: 4 / 5;
	--yb-img-bg: #F2F2F2;
	--yb-img-pad: 0px;
	--yb-img-pad-sm: 0px;
	--yb-img-pad-pdp: 0px;
}

/* ---------- 1. Frames ---------------------------------------------------- */
.yb .yb-card__media,                                             /* [yb_products] cards (home, recently viewed) */
.yb .product-grid-item .product-image-link,                      /* shop, categories, search, wishlist, carousels, cross-sells */
.yb.yb-cat-grid .product-grid-item .product-image-link,
.yb .yb-search-card__img,                                        /* live search cards */
.yb .yb-atb-card__img,                                           /* added-to-bag modal recommendations */
.yb .yb-atb-modal__thumb,                                        /* added-to-bag modal line item */
.yb .yb-atb-minibag__thumb,                                      /* mini-bag hover thumbs */
.yb.yb-co .yb-co-item__media,                                    /* checkout order summary */
.yb.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail a { /* bag page line items */
	position: relative !important;
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: var(--yb-img-ratio) !important;
	overflow: hidden !important;
	margin-bottom: 0;
	border-radius: 0 !important;
	background: var(--yb-img-bg) !important;
	contain: paint;
}
.yb .product-grid-item .hover-img,
.yb.yb-cat-grid .product-grid-item .hover-img {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: auto !important;
	aspect-ratio: var(--yb-img-ratio) !important;
	overflow: hidden;
	background: var(--yb-img-bg) !important;
}
.yb .product-grid-item .product-element-top { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }

/* ---------- 2. Images inside frames -------------------------------------- */
.yb .yb-card__media img,
.yb .yb-card__media .yb-card__img,
.yb .product-grid-item .product-image-link img,
.yb.yb-cat-grid .product-grid-item .product-image-link img,
.yb .product-grid-item .hover-img img,
.yb.yb-cat-grid .product-grid-item .hover-img img,
.yb .yb-search-card__img img,
.yb .yb-atb-card__img img,
.yb .yb-atb-modal__thumb img,
.yb .yb-atb-minibag__thumb img,
.yb.yb-co .yb-co-item__media img,
.yb.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: var(--yb-img-pad) !important;
	box-sizing: border-box !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	border-radius: 0 !important;
	background: transparent !important;
	mix-blend-mode: normal !important;
	transform: none !important;
	transition: opacity .3s ease !important;
}
/* <picture> wrappers stretch to the frame so the img inside can fill it */
.yb .product-grid-item .product-image-link picture,
.yb.yb-cat-grid .product-grid-item .product-image-link picture {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}
.yb .product-grid-item .hover-img > a { position: absolute; inset: 0; display: block; }
/* placeholder span on cards without a photo */
.yb .yb-card__media .yb-ph { position: absolute; inset: 0; width: 100%; height: 100%; }

/* small thumbnails: slightly tighter padding */
.yb .yb-atb-modal__thumb img,
.yb .yb-atb-minibag__thumb img,
.yb.yb-co .yb-co-item__media img,
.yb.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail img { padding: var(--yb-img-pad-sm) !important; }

/* keep badges / wishlist hearts above the absolutely-positioned image */
.yb .yb-card__badge,
.yb .yb-cat-grid-badge,
.yb .product-grid-item .product-labels,
.yb .product-grid-item .product-image-link > span { z-index: 2; }

/* ---------- 3. Fixed thumb widths (height now comes from 4:5) ------------ */
.yb .yb-atb-modal__thumb { width: 100px; }
.yb .yb-atb-minibag__thumb { width: 84px; }
.yb.yb-co .yb-co-item__media { flex: 0 0 100px; width: 100px; }
.yb.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail a { width: 210px; max-width: 100%; }
@media (max-width: 767px) {
	.yb .yb-atb-modal__thumb { width: 84px; }
	.yb.woocommerce-cart .woocommerce-cart-form .shop_table .product-thumbnail a { width: 110px; }
}

/* WoodMart side cart / header dropdown cart thumbnails */
.yb .woocommerce-mini-cart-item .cart-item-image {
	position: relative;
	display: block;
	flex: 0 0 65px;
	width: 65px;
	height: auto;
	aspect-ratio: var(--yb-img-ratio);
	overflow: hidden;
	background: var(--yb-img-bg);
}
.yb .woocommerce-mini-cart-item .cart-item-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	aspect-ratio: auto;
	padding: var(--yb-img-pad-sm);
	box-sizing: border-box;
	object-fit: contain;
	object-position: 50% 50%;
	background: transparent;
	mix-blend-mode: normal !important;
}

/* ---------- 4. Hover: no zoom, only the WoodMart 2nd-image fade ---------- */
.yb .product-grid-item:hover .product-image-link img,
.yb .product-grid-item .product-image-link:hover img,
.yb .yb-card:hover .yb-card__img,
.yb .yb-card__media:hover img,
.yb .yb-search-card:hover img,
.yb .yb-atb-card:hover img { transform: none !important; }
.yb .product-grid-item .product-element-top,
.yb .product-grid-item .product-image-link { transform: none !important; }

/* ---------- 5. Title row alignment --------------------------------------- */
/* [yb_products]: cards without colour dots reserve the dots row (12px gap + 32px row) */
.yb.home .yb-card:not(:has(.yb-card__dots)) .yb-card__title { margin-top: 56px; }
/* WooCommerce cards: swatch row always the same height */
.yb .product-grid-item .product-element-top .wrapp-swatches { min-height: 44px; box-sizing: border-box; }

/* ---------- 6. Product page gallery grid --------------------------------- */
.yb .yb-pdp-grid__item {
	aspect-ratio: var(--yb-img-ratio) !important;
	height: auto;
	min-height: 0;
	background: var(--yb-img-bg) !important;
}
.yb .yb-pdp-grid__item:hover,
.yb .yb-pdp-grid__item:focus { background: var(--yb-img-bg) !important; }
.yb .yb-pdp-grid__item > img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	padding: var(--yb-img-pad-pdp);
	box-sizing: border-box;
	object-fit: contain !important;
	object-position: 50% 50%;
	background: transparent;
	mix-blend-mode: normal !important;
	transform: none !important;
}
/* single-image products: one tall frame, same ground, capped to the viewport */
.yb .yb-pdp-grid--single .yb-pdp-grid__item {
	aspect-ratio: auto !important;
	height: clamp(420px, 82vh, 860px);
}
@media (max-width: 767px) {
	.yb .yb-pdp-grid--single .yb-pdp-grid__item { height: auto; aspect-ratio: var(--yb-img-ratio) !important; }
}

/* ---------- 7. Quick view image ------------------------------------------ */
.yb .product-quick-view .woocommerce-product-gallery .wd-carousel-item,
.yb .product-quick-view .woocommerce-product-gallery__image,
.product-quick-view .woocommerce-product-gallery .wd-carousel-item,
.product-quick-view .woocommerce-product-gallery__image {
	position: relative;
	aspect-ratio: var(--yb-img-ratio);
	overflow: hidden;
	background: var(--yb-img-bg);
}
.product-quick-view .woocommerce-product-gallery .wd-carousel-item img,
.product-quick-view .woocommerce-product-gallery__image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	padding: var(--yb-img-pad);
	box-sizing: border-box;
	object-fit: contain;
	object-position: 50% 50%;
	background: transparent;
	mix-blend-mode: normal !important;
}

/* ---------- 8. Home "Wear it. Share it." mosaic — lifestyle: cover, centred */
.yb .yb-ugc a { position: relative; overflow: hidden; background: #E9E9E9; }
.yb .yb-ugc img,
.yb.home .yb-ugc img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transform: none !important;
	transition: opacity .3s ease;
}
.yb .yb-ugc a:hover img { transform: none !important; opacity: .9; }