/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.2
 Text Domain:  woodmart
*/

body,
.main-page-wrapper,
.whole-wrapper,
.woodmart-archive-shop,
.site-content {
	background-color: #f7f7f8 !important;
}
.shop-page-wrapper,
.woodmart-prod-content,
.product,
.wd-products-holder-wrapp .product,
li.product {
	background-color: #ffffff;
}

.product-image-link {
	position: relative;
	display: block;
}
.gamixa-activation-badge {
	display: inline-flex !important;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: calc(100% - 52px);
	padding: 7px 11px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gamixa-badge-icon {
	flex-shrink: 0;
	color: #fff;
}
.gamixa-badge-offline {
	background-color: #4a4a4a;
}
.gamixa-badge-gamepass {
	background-color: #8a8a8a;
}
.product-element-top .wd-buttons.wd-pos-r-t {
	z-index: 3;
}

@media (max-width: 480px) {
	.gamixa-activation-badge {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 44px);
		padding: 5px 9px;
		font-size: 11px;
		gap: 4px;
	}
	.gamixa-badge-icon {
		width: 12px;
		height: 12px;
	}
}

/* uniform product-card image box so grid rows line up regardless of
   each source image's native aspect ratio (box art vs landscape fallback) */
.products .product-element-top .product-image-link img,
.wd-products .product-element-top .product-image-link img {
	aspect-ratio: 2 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center top;
}

/* product-grid card titles only (never the single-product H1, which also
   carries .wd-entities-title but lives outside .product-element-bottom):
   force exactly one line with a clean "…" instead of Woodmart's native
   title-line-one behavior, which just hard-clips the text vertically
   mid-character with no ellipsis. */
.product-element-bottom .wd-entities-title a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* single product gallery */
.woocommerce-product-gallery__wrapper {
	max-width: 340px;
	margin: 0 auto;
}
.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}
/* on phones the 340px centered box floats mid-column while the title/price/
   description below are left-aligned, so the image never lines up with the
   rest of the page — let it fill the column edge-to-edge instead, matching
   the text below. Desktop keeps the centered 340px box as-is. */
@media (max-width: 767px) {
	.woocommerce-product-gallery__wrapper {
		max-width: 100%;
		margin: 0;
	}
}
/* the "click to enlarge" zoom icon defaults to the bottom-left corner,
   where it collides with promo banners some cover art has baked in at the
   bottom (e.g. "FREE DLC AVAILABLE NOW"). Move it out of the way. */
.product-additional-galleries {
	inset-inline-start: auto !important;
	inset-inline-end: 0 !important;
	bottom: auto !important;
	top: 0 !important;
}

/* hero slider: on phones, anchor the background to the left so the
   title text (always left-aligned in the slide art) never gets
   cropped off by cover-crop centering on a narrow viewport — the
   decorative right-side graphic can get cropped instead. Beats the
   per-slide inline <style> Elementor generates via !important, since
   that block loads after this stylesheet in the page. */
@media (max-width: 767px) {
	.wd-slide-bg {
		background-position: left center !important;
	}
}