/*
 * Card de produto — DESIGN.md §18–20, §44, §46.
 * Hover "fw-button" do Woodmart (botão de largura total sempre visível);
 * título, faixa de float e selos vêm de inc/product-card.php.
 */

/* ---------- Superfície e estados (§8, §19) ---------- */

.wd-products-with-bg,
.wd-products-with-bg .wd-product {
	--wd-prod-bg: var(--arsenal-card);
}

.wd-product .product-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--arsenal-card);
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-card);
	transition:
		background-color var(--arsenal-dur-card) var(--arsenal-ease),
		border-color var(--arsenal-dur-card) var(--arsenal-ease),
		box-shadow var(--arsenal-dur-card) var(--arsenal-ease);
}

.wd-product .content-product-imagin {
	display: none;
}

.wd-product:hover .product-wrapper,
.wd-product .product-wrapper:focus-within {
	background-color: var(--arsenal-card-hover);
	border-color: var(--arsenal-blue);
	box-shadow: var(--arsenal-glow-blue);
}

/* ---------- Imagem (§44): foco do card, nada por cima além dos selos ---------- */

.wd-product .product-element-top {
	margin: 0;
	padding: var(--arsenal-space-4) var(--arsenal-space-4) 0;
	background: radial-gradient(ellipse at 50% 60%, rgba(var(--arsenal-blue-rgb), .07), transparent 70%);
	border-radius: var(--arsenal-radius-card) var(--arsenal-radius-card) 0 0;
}

.wd-product .product-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
}

.wd-product .product-image-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
	transition: transform var(--arsenal-dur-card) var(--arsenal-ease);
}

.wd-product:hover .product-image-link img {
	transform: scale(1.04);
}

/* ---------- Informações ---------- */

.wd-product .product-element-bottom {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--arsenal-space-2);
	padding: var(--arsenal-space-3) var(--arsenal-space-4) var(--arsenal-space-4);
	text-align: start;
}

.arsenal-card__title {
	margin: 0;
	line-height: 1.25;
}

.arsenal-card__title a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
}

.arsenal-card__weapon {
	color: var(--arsenal-gray);
	font-family: var(--arsenal-font-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

.arsenal-card__skin {
	color: var(--arsenal-white);
	font-family: var(--arsenal-font-text);
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.arsenal-card__title a:hover .arsenal-card__skin {
	color: var(--arsenal-blue-light);
}

/* Barra de desgaste (PLANO §2-B) */
.arsenal-wear {
	/* sem texto, nada mais dá largura à barra dentro do card */
	width: 100%;
}

.arsenal-wear__bar {
	--arsenal-wear-gap: 2px;
	position: relative;
	display: flex;
	gap: var(--arsenal-wear-gap);
	height: 4px;
}

/* Seta do float real (atributo float_barra): espaço acima da barra. */
.arsenal-wear.has-float {
	padding-top: 9px;
}

.arsenal-wear__pointer {
	position: absolute;
	bottom: calc(100% + 1px);
	left: calc(var(--arsenal-float) * (100% - 4 * var(--arsenal-wear-gap)) + var(--arsenal-float-seg) * var(--arsenal-wear-gap));
	display: block;
	width: 10px;
	height: 8px;
	transform: translateX(-50%);
	color: var(--arsenal-white);
	line-height: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

.arsenal-wear__pointer svg {
	display: block;
	width: 100%;
	height: 100%;
}

.arsenal-wear__seg {
	flex-basis: 0;
	border-radius: 2px;
	opacity: .28;
	transition: opacity var(--arsenal-dur-micro) var(--arsenal-ease);
}

.arsenal-wear__seg.is-active {
	opacity: 1;
	box-shadow: 0 0 8px currentColor;
}

/* Mesmas cores da barra de desgaste de antes. */
.arsenal-wear__seg--fn { background: #2EA043; color: rgba(46, 160, 67, .6); }
.arsenal-wear__seg--mw { background: #48C774; color: rgba(72, 199, 116, .6); }
.arsenal-wear__seg--ft { background: #FFDD57; color: rgba(255, 221, 87, .5); }
.arsenal-wear__seg--ww { background: #F14668; color: rgba(241, 70, 104, .5); }
.arsenal-wear__seg--bs { background: #B11736; color: rgba(177, 23, 54, .6); }

/* Preço (§46): atual com mais peso; antigo discreto e riscado. */
.wd-product .wrap-price {
	margin-top: auto;
	padding-top: var(--arsenal-space-2);
}

.wd-product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	font-size: 18px;
	line-height: 1.2;
}

.wd-product .price del {
	font-size: 12px;
}

/* CTA (§18): largura total, sempre visível. O Woodmart recorta o texto do
   botão com reticências; aqui ele usa a fonte da marca. */
html body .wd-product.wd-hover-fw-button .wd-add-btn .add-to-cart-loop span {
	font-size: 13px;
	letter-spacing: .04em;
}

.wd-product .wd-add-btn {
	margin-top: var(--arsenal-space-2);
}

.wd-product .wd-add-btn > a {
	width: 100%;
	min-height: 44px;
	border-radius: var(--arsenal-radius-button);
	background-color: var(--arsenal-blue-button);
	color: #FFFFFF;
	font-family: var(--arsenal-font-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wd-product .wd-add-btn > a:hover {
	background-color: var(--arsenal-blue-light);
	color: var(--arsenal-black);
}

/* Ícones de ação (favoritos, quick view) discretos sobre a imagem. */
.wd-product .wd-buttons {
	--wd-action-icon-size: 16px;
}

.wd-product .wd-buttons .wd-action-btn > a {
	background: rgba(8, 11, 16, .7);
	border-radius: 6px;
}

/* ---------- Selos (§20) ---------- */

.product-labels {
	gap: 4px;
}

.product-labels .arsenal-label--hightier {
	background: rgba(var(--arsenal-gold-rgb), .14);
	border: 1px solid rgba(var(--arsenal-gold-rgb), .6);
	color: var(--arsenal-gold);
}

/* StatTrak: laranja da própria Valve, discreto (contorno). */
.product-labels .arsenal-label--stattrak {
	background: rgba(207, 106, 50, .14);
	border: 1px solid rgba(207, 106, 50, .6);
	color: #E58A55;
}

.product-labels .arsenal-label--souvenir {
	background: rgba(255, 215, 0, .1);
	border: 1px solid rgba(255, 215, 0, .45);
	color: #F2D46B;
}

/* ---------- Mobile (§36) ---------- */

@media (max-width: 767px) {
	.wd-product .product-element-top {
		padding: var(--arsenal-space-3) var(--arsenal-space-3) 0;
	}

	.wd-product .product-element-bottom {
		padding: var(--arsenal-space-2) var(--arsenal-space-3) var(--arsenal-space-3);
	}

	.arsenal-card__skin {
		font-size: 14px;
	}

	.wd-product .price {
		font-size: 16px;
	}

	.product-labels .product-label {
		font-size: 10px;
		padding: 3px 6px;
		white-space: nowrap; /* "HIGH TIER" quebrava em cards estreitos */
	}

	.wd-product .wd-add-btn > a,
	html body .wd-product.wd-hover-fw-button .wd-add-btn .add-to-cart-loop span {
		padding-inline: 4px;
		font-size: 12px;
		letter-spacing: 0;
	}

	/* A contagem "1.695 skins" já está sob o título. */
	.wd-shop-result-count,
	.woocommerce-result-count {
		display: none;
	}
}

/* ---------- Cabeçalho do catálogo (§26) ---------- */

.arsenal-archive-title.e-con .elementor-widget :is(.wd-shop-title, .entry-title, .title) {
	margin: 0;
	font-family: var(--arsenal-font-title);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--arsenal-white);
}

.arsenal-archive-count {
	margin: 2px 0 0;
	color: var(--arsenal-gray);
	font-family: var(--arsenal-font-title);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Filtros na sidebar (§27) */
.wd-sidebar .widget,
.sidebar-container .widget {
	border-color: var(--arsenal-border);
}

.wd-sidebar .widget-title,
.sidebar-container .widget-title {
	font-family: var(--arsenal-font-title);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--arsenal-white);
}

.woocommerce-widget-layered-nav-list a,
.wd-widget-layered-nav a,
.widget_product_categories a {
	color: var(--arsenal-gray);
}

.woocommerce-widget-layered-nav-list .chosen a,
.woocommerce-widget-layered-nav-list a:hover,
.widget_product_categories a:hover {
	color: var(--arsenal-white);
}

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--arsenal-blue);
}

/* Paginação */
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
.wd-loop-footer .btn {
	border-radius: var(--arsenal-radius-button);
}

.woocommerce-pagination .page-numbers .current {
	background-color: var(--arsenal-blue-button);
	color: #FFFFFF;
}

/* ---------- Banner das categorias (artes em assets/img/categorias) ---------- */

.arsenal-has-cat-art .e-con:has(> .arsenal-archive-title) {
	flex-wrap: wrap;
}

.arsenal-has-cat-art .arsenal-archive-title.e-con {
	flex-basis: 100%;
	justify-content: flex-end;
	min-height: 220px;
	padding: var(--arsenal-space-6);
	background:
		linear-gradient(90deg, rgba(8, 11, 16, .92) 0%, rgba(8, 11, 16, .6) 40%, rgba(8, 11, 16, 0) 75%),
		linear-gradient(0deg, rgba(8, 11, 16, .7) 0%, transparent 50%),
		var(--arsenal-cat-art) center 40% / cover no-repeat;
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-special);
}

.arsenal-has-cat-art .arsenal-archive-title.e-con .elementor-widget :is(.wd-shop-title, .entry-title, .title) {
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 700;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

.arsenal-has-cat-art .arsenal-archive-count {
	color: var(--arsenal-blue-light);
}

.arsenal-cat-art-facas        { --arsenal-cat-art: url("../img/categorias/facas.webp"); }
.arsenal-cat-art-luvas        { --arsenal-cat-art: url("../img/categorias/luvas.webp"); }
.arsenal-cat-art-rifles       { --arsenal-cat-art: url("../img/categorias/rifles.webp"); }
.arsenal-cat-art-sniper-rifle { --arsenal-cat-art: url("../img/categorias/sniper-rifle.webp"); }
.arsenal-cat-art-pistolas     { --arsenal-cat-art: url("../img/categorias/pistolas.webp"); }
.arsenal-cat-art-agentes      { --arsenal-cat-art: url("../img/categorias/agentes.webp"); }

@media (max-width: 767px) {
	.arsenal-has-cat-art .arsenal-archive-title.e-con {
		min-height: 160px;
		padding: var(--arsenal-space-4);
	}
}