/* yl-theme product card hover (desktop with real hover only; touch keeps Woodmart's static buttons).
   Design: card lifts with violet glow; wishlist / compare / quick-view become 40px round icon buttons over the image corner;
   add-to-cart is a full-width gradient bar on the image bottom edge. */
@media (hover:hover) and (min-width:1024px){
	html body .wd-product .product-wrapper{position:relative;container-type:inline-size;transition:transform .2s,border-color .2s,box-shadow .2s}
	html body .wd-product:hover .product-wrapper,html body .wd-product:focus-within .product-wrapper{transform:translateY(-4px);border-color:var(--yl-violet);box-shadow:var(--yl-glow)}
	/* Woodmart's expanding white layer is not needed */
	html body .wd-product .wd-product-card-bg{display:none!important}
	/* make the wrapper the containing block for the overlay controls */
	html body .wd-product .product-element-bottom{position:static!important;transform:none!important}
	html body .wd-product .wrapp-swatches{position:static!important;transform:none!important;height:0!important;padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important}
	html body .wd-product .wrapp-product-price{transform:none!important}
	/* scrim so controls stay legible on bright artwork */
	html body .wd-product .product-wrapper::after{content:"";position:absolute;inset:0 0 auto 0;height:92.6cqw;background:linear-gradient(to top,rgb(5 11 24/.75),transparent 45%),linear-gradient(to bottom,rgb(5 11 24/.45),transparent 40%);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
	html body .wd-product:hover .product-wrapper::after,html body .wd-product:focus-within .product-wrapper::after{opacity:1}
	/* round icon buttons, top-left of the image */
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn){position:absolute!important;left:10px;width:40px!important;height:40px!important;margin:0!important;z-index:4;opacity:0;visibility:hidden;transform:translateX(-10px);transition:opacity .2s,transform .2s,visibility .2s}
	html body .wd-product .wd-wishlist-btn{top:12px!important;left:12px!important;bottom:auto!important;right:auto!important}
	html body .wd-product .wd-compare-btn{top:58px!important;left:12px!important;bottom:auto!important;right:auto!important}
	html body .wd-product .wd-quick-view-btn{top:104px!important;left:12px!important;bottom:auto!important;right:auto!important}
	html body .wd-product:hover :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn),html body .wd-product:focus-within :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn){opacity:1;visibility:visible;transform:none}
	html body .wd-product .wd-compare-btn{transition-delay:.04s}html body .wd-product .wd-quick-view-btn{transition-delay:.08s}
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn)>a{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;background:var(--yl-card)!important;border:1px solid var(--yl-border);color:var(--yl-fg)!important;box-shadow:0 4px 14px rgb(0 0 0/.45)}
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn)>a:hover{background:var(--yl-violet)!important;border-color:var(--yl-violet);color:#fff!important}
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn) .wd-action-icon{display:flex;align-items:center;justify-content:center;font-size:18px;color:inherit}
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn) .wd-action-icon::before{color:inherit}
	/* labels become screen-reader only (the icons carry the meaning, tooltip via title) */
	html body .wd-product :is(.wd-wishlist-btn,.wd-compare-btn,.wd-quick-view-btn) .wd-action-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
	/* keep the info block steady: no price lift, title turns violet */
	html body .wd-product:hover :is(.wd-entities-title,.wd-entities-title a){color:var(--yl-violet-2)!important}
	html body .wd-product .wd-product-img-link img{transition:transform .35s}
	html body .wd-product:hover .wd-product-img-link img{transform:scale(1.04)}
	html body .wd-product .product-element-top{overflow:hidden}
}
@media (hover:hover) and (min-width:1024px){
	/* one offset parent for all three icons: the card wrapper (the image block must not be positioned, otherwise the compare button, which lives inside it, is measured from the image edge instead) */
	html body .wd-product .product-element-top{position:static!important;transform:none!important;filter:none!important;will-change:auto!important}
	html body .wd-product .wd-product-img-link{position:relative;display:block;overflow:hidden;border-radius:inherit}
}
@media (prefers-reduced-motion:reduce){html body .wd-product *{transition:none!important}}

/* compare button's offset parent is the (12px inset) image block, the other two use the card: offsets above are per parent so all three share one column */