/*
 * Home — DESIGN.md §12–14, §17, §21–23, §34, §48.
 * A estrutura está no Elementor (_tools/home-arsenal.php); aqui só aparência.
 */

/* ---------- Seções e cabeçalhos ---------- */

.arsenal-section.e-con {
	--padding-top: var(--arsenal-space-8);
	--padding-bottom: 0px;
}

.arsenal-section--community.e-con {
	--padding-bottom: var(--arsenal-space-9);
}

.arsenal-section-head.e-con {
	gap: var(--arsenal-space-4);
}

.arsenal-section-title .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--arsenal-font-title);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--arsenal-white);
}

/* Mira (§4.2) antes do título. */
.arsenal-section-title .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23147DFF' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M7 0v3.4M7 10.6V14M0 7h3.4M10.6 7H14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arsenal-section-head--gold .arsenal-section-title .elementor-heading-title {
	color: var(--arsenal-gold);
}

.arsenal-section-head--gold .arsenal-section-title .elementor-heading-title::before {
	filter: hue-rotate(185deg) saturate(.7) brightness(1.35);
}

.arsenal-section-sub p {
	margin: 0;
	color: var(--arsenal-gray);
	font-size: 15px;
}

/* Linha tática (§4.3) sob o cabeçalho de cada seção. */
.arsenal-section-head.e-con {
	position: relative;
	padding-bottom: var(--arsenal-space-4);
	border-bottom: 1px solid var(--arsenal-border);
}

.arsenal-section-head.e-con::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 72px;
	height: 2px;
	background: var(--arsenal-blue);
}

.arsenal-section-head--gold.e-con::after {
	background: var(--arsenal-gold);
}

/* "Ver todos" */
.arsenal-see-all .btn {
	--btn-color: var(--arsenal-gray);
	--btn-color-hover: var(--arsenal-white);
	font-family: var(--arsenal-font-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-inline: 0;
}

.arsenal-see-all .btn::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 6px;
	transition: transform var(--arsenal-dur-micro) var(--arsenal-ease);
}

.arsenal-see-all .btn:hover::after {
	transform: translateX(4px);
}

/* Seções de produtos sem nenhum produto (ex.: Ofertas sem tag) somem. */
.arsenal-rail:not(:has(.wd-product)) {
	display: none;
}

/* ---------- Banner principal (§12–14) ---------- */

.arsenal-hero-wrap.e-con {
	--padding-top: var(--arsenal-space-5);
	--padding-bottom: 0px;
}

.arsenal-hero-banner {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-special);
	background: var(--arsenal-dark);
	/* posição dos botões desenhados na arte, em % da imagem (2103 × 748) */
	--hs-top: 74.2%;
	--hs-h: 8.4%;
	--hs-a-left: 5.56%;
	--hs-a-w: 14.8%;
	--hs-b-left: 21.4%;
	--hs-b-w: 11.7%;
}

.arsenal-hero-banner picture,
.arsenal-hero-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

.arsenal-hotspot {
	position: absolute;
	top: var(--hs-top);
	height: var(--hs-h);
	border-radius: 10px;
	transition: box-shadow var(--arsenal-dur-micro) var(--arsenal-ease), background-color var(--arsenal-dur-micro) var(--arsenal-ease);
}

.arsenal-hotspot--explorar {
	left: var(--hs-a-left);
	width: var(--hs-a-w);
}

.arsenal-hotspot--promo {
	left: var(--hs-b-left);
	width: var(--hs-b-w);
}

/* Hover dá vida ao botão desenhado sem cobrir a arte. */
.arsenal-hotspot:hover {
	background-color: rgba(255, 255, 255, .06);
	box-shadow: 0 0 0 1px rgba(var(--arsenal-blue-rgb), .8), var(--arsenal-glow-blue);
}

/* Arte de celular: recorte 900 × 748 do lado esquerdo do banner. */
@media (max-width: 767px) {
	.arsenal-hero-wrap.e-con {
		--padding-top: var(--arsenal-space-3);
	}

	.arsenal-hero-banner.has-mobile {
		--hs-a-left: 13%;
		--hs-a-w: 34.6%;
		--hs-b-left: 50%;
		--hs-b-w: 27.3%;
	}
}

/* ---------- Banners de categoria (mockup "todos_banners") ---------- */

.arsenal-section--cats.e-con {
	--padding-top: var(--arsenal-space-4);
}

.arsenal-cat-banners {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--arsenal-space-4);
}

.arsenal-cat-banner {
	display: block;
	overflow: hidden;
	aspect-ratio: 5 / 2;
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-card);
	transition: border-color var(--arsenal-dur-card) var(--arsenal-ease), box-shadow var(--arsenal-dur-card) var(--arsenal-ease);
}

.arsenal-cat-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--arsenal-dur-large) var(--arsenal-ease);
}

.arsenal-cat-banner:hover,
.arsenal-cat-banner:focus-visible {
	border-color: var(--arsenal-blue);
	box-shadow: var(--arsenal-glow-blue);
}

.arsenal-cat-banner:hover .arsenal-cat-banner__img {
	transform: scale(1.04);
}

@media (max-width: 1024px) {
	.arsenal-cat-banners {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.arsenal-cat-banners {
		grid-template-columns: 1fr;
		gap: var(--arsenal-space-3);
	}
}

/* ---------- Faixa High Tier ---------- */

.arsenal-ht-strip {
	display: block;
	overflow: hidden;
	border: 1px solid rgba(var(--arsenal-gold-rgb), .35);
	border-radius: var(--arsenal-radius-card);
	transition: box-shadow var(--arsenal-dur-card) var(--arsenal-ease), border-color var(--arsenal-dur-card) var(--arsenal-ease);
}

.arsenal-ht-strip__img {
	display: block;
	width: 100%;
	height: auto;
}

.arsenal-ht-strip:hover,
.arsenal-ht-strip:focus-visible {
	border-color: var(--arsenal-gold);
	box-shadow: var(--arsenal-glow-gold);
}

/* Com a faixa, o cabeçalho da seção vira só o subtítulo; no celular a faixa
   (21:1) ficaria ilegível, então some e o cabeçalho normal volta. */
@media (min-width: 768px) {
	.arsenal-section--hightier:has(.arsenal-ht-strip) .arsenal-section-head {
		display: none;
	}
}

@media (max-width: 767px) {
	.arsenal-ht-strip-wrap {
		display: none;
	}
}

/* ---------- Categorias (§17) ---------- */

.arsenal-cats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--arsenal-space-4);
}

.arsenal-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--arsenal-space-5) var(--arsenal-space-4);
	background: var(--arsenal-card);
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-card);
	text-align: center;
	text-decoration: none;
	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);
}

.arsenal-cat:hover,
.arsenal-cat:focus-visible {
	background: var(--arsenal-card-hover);
	border-color: var(--arsenal-blue);
	box-shadow: var(--arsenal-glow-blue);
}

.arsenal-cat__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 140px;
	margin-bottom: var(--arsenal-space-3);
}

.arsenal-cat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--arsenal-dur-card) var(--arsenal-ease);
}

.arsenal-cat:hover .arsenal-cat__img {
	transform: scale(1.05);
}

.arsenal-cat__name {
	color: var(--arsenal-white);
	font-family: var(--arsenal-font-title);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.arsenal-cat__meta {
	color: var(--arsenal-gray);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.arsenal-cat__cta {
	margin-top: var(--arsenal-space-2);
	color: var(--arsenal-blue-light);
	font-size: 13px;
	font-weight: 600;
}

.arsenal-cat__cta span {
	display: inline-block;
	transition: transform var(--arsenal-dur-micro) var(--arsenal-ease);
}

.arsenal-cat:hover .arsenal-cat__cta span {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.arsenal-cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.arsenal-cat__media {
		height: 96px;
	}

	.arsenal-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--arsenal-space-3);
	}

	.arsenal-cat {
		padding: var(--arsenal-space-4) var(--arsenal-space-3);
	}

	.arsenal-cat__name {
		font-size: 17px;
	}
}

/* ---------- High Tier (§22, §47) ---------- */

/*
 * Faixa de largura total sem estourar a página: a sombra pinta o fundo além
 * do container do tema e o clip-path corta só na vertical.
 */
.arsenal-section--hightier.e-con {
	--padding-bottom: var(--arsenal-space-8);
	position: relative;
	margin-top: var(--arsenal-space-8);
	background: radial-gradient(circle at 50% 0%, rgba(var(--arsenal-gold-rgb), .12), transparent 55%), #05070A;
	box-shadow: 0 0 0 100vmax #05070A;
	clip-path: inset(0 -100vmax);
}

.arsenal-section--hightier.e-con::before,
.arsenal-section--hightier.e-con::after {
	content: "";
	position: absolute;
	left: -100vmax;
	right: -100vmax;
	height: 1px;
	background: rgba(var(--arsenal-gold-rgb), .25);
}

.arsenal-section--hightier.e-con::before {
	top: 0;
}

.arsenal-section--hightier.e-con::after {
	bottom: 0;
}

.arsenal-section--hightier .arsenal-section-head.e-con {
	border-bottom-color: rgba(var(--arsenal-gold-rgb), .2);
}

.arsenal-section--hightier .wd-products-with-bg .wd-product {
	--wd-prod-bg: #0B0E13;
}

.arsenal-section--hightier .wd-product .product-wrapper {
	border-color: rgba(var(--arsenal-gold-rgb), .22);
}

.arsenal-section--hightier .wd-product:hover .product-wrapper {
	border-color: var(--arsenal-gold);
	box-shadow: var(--arsenal-glow-gold);
}

.arsenal-section--hightier .wd-product .product-element-top {
	background: radial-gradient(ellipse at 50% 60%, rgba(var(--arsenal-gold-rgb), .10), transparent 70%);
}

.arsenal-section--hightier .wd-product .product-image-link img {
	filter: drop-shadow(0 0 28px rgba(var(--arsenal-gold-rgb), .16));
}

.arsenal-section--hightier .wd-product .wd-entities-title {
	font-size: 17px;
}

.arsenal-section--hightier .wd-product .price {
	font-size: 20px;
}

/* ---------- Comunidade (§34) ---------- */

.arsenal-section--community.e-con {
	text-align: center;
}

.arsenal-section--community > .e-con-inner {
	position: relative;
	isolation: isolate;
	align-items: center;
	padding: var(--arsenal-space-9) var(--arsenal-space-5);
	background:
		radial-gradient(circle at 50% 120%, rgba(var(--arsenal-blue-rgb), .18), transparent 60%),
		var(--arsenal-dark);
	border: 1px solid var(--arsenal-border);
	border-radius: var(--arsenal-radius-special);
	overflow: hidden;
}

.arsenal-section--community > .e-con-inner::before {
	content: "";
	position: absolute;
	inset: 12% 10%;
	z-index: -1;
	background: url("../img/asas.webp") center / contain no-repeat;
	opacity: .06;
}

.arsenal-community__title .elementor-heading-title {
	margin: 0;
	font-family: var(--arsenal-font-title);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--arsenal-white);
}

.arsenal-community__lead p {
	max-width: 44ch;
	margin: 0 auto;
	color: var(--arsenal-gray);
	font-size: 16px;
}

@media (max-width: 767px) {
	.arsenal-section--community > .e-con-inner {
		padding: var(--arsenal-space-7) var(--arsenal-space-4);
	}
}

/* Área de toque maior nos botões desenhados (celular), sem mudar o visual. */
.arsenal-hotspot::before {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

/* Pedido do Rafael (2026-09-27): no computador os 4 banners de categoria
   saem; tablet e celular continuam com eles. */
@media (min-width: 1025px) {
	.arsenal-section--cats {
		display: none !important;
	}
}

/* ---------- Feed (Recém-adicionados com "Carregar mais") ---------- */

.arsenal-section--feed .wd-loop-footer {
	margin-top: var(--arsenal-space-6);
	margin-bottom: var(--arsenal-space-4);
}

.arsenal-section--feed .wd-loop-footer .btn,
.arsenal-section--feed .wd-products-load-more {
	--btn-bgcolor: transparent;
	--btn-bgcolor-hover: transparent;
	--btn-color: var(--arsenal-white);
	--btn-color-hover: var(--arsenal-white);
	--btn-brd-width: 1px;
	--btn-brd-color: var(--arsenal-border);
	--btn-brd-color-hover: var(--arsenal-blue);
	--btn-box-shadow-hover: var(--arsenal-glow-blue);
	min-width: 260px;
	min-height: 52px;
	border-radius: var(--arsenal-radius-button);
	font-family: var(--arsenal-font-text);
	font-weight: 700;
	letter-spacing: .06em;
}