/*
 * "Inventário animado (v2)" — loja e categorias com ?vitrine=v2 (ou o
 * checkbox do Personalizar). Carregado junto com vitrine-v2.css (card com
 * 2ª foto, cascata, v2-palavra/v2-entra/v2-num) e escopado em body.avt-inv2.
 * Cabeçalho com foto em parallax, chips de filtro rápido, faixa de preço
 * deslizante, troca grade/lista animada (FLIP, no JS) e filtro em gaveta
 * no celular.
 */

/* =====================================================================
   1. Cabeçalho da categoria com foto
   ===================================================================== */
.avt-inv2 .inv2-hero {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--avt-slate);
	color: var(--avt-text-contrast);
}
.avt-inv2 .inv2-hero__midia {
	position: absolute;
	inset: -12% 0;
	background: var(--avt-slate) center / cover no-repeat;
	will-change: transform;
}
.avt-inv2 .inv2-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 24, 28, .85) 0%, rgba(20, 24, 28, .55) 55%, rgba(20, 24, 28, .25) 100%),
		linear-gradient(180deg, rgba(20, 24, 28, .15) 40%, rgba(20, 24, 28, .7) 100%);
}
.avt-inv2 .inv2-hero__conteudo {
	position: relative;
	z-index: 1;
	padding-top: 56px;
	padding-bottom: 84px;
	display: grid;
	gap: 10px;
}
.avt-inv2 .inv2-hero .avt-eyebrow { color: #ffb27a; margin: 0; }
.avt-inv2 .inv2-hero__titulo {
	font: 700 clamp(32px, 5vw, 56px)/1.05 var(--avt-font-heading);
	text-transform: uppercase;
	color: var(--avt-text-contrast);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 .28em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.avt-inv2 .inv2-hero__contagem {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .85);
}
.avt-inv2 .inv2-hero__contagem b { display: inline; font: 800 22px/1 var(--avt-font-heading); color: var(--avt-primary); font-variant-numeric: tabular-nums; }
.avt-inv2 .inv2-hero__descr { color: rgba(255, 255, 255, .65); }
.avt-inv2 .inv2-hero .v2-onda { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 56px; }

/* chips de filtro rápido */
.avt-inv2 .inv2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.avt-inv2 .inv2-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
	color: var(--avt-text-contrast);
	font: 700 12px/1 var(--avt-font-heading);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	backdrop-filter: blur(4px);
	opacity: 0;
	animation: v2Entra .5s ease both;
	animation-delay: calc(var(--i, 0) * 45ms + 600ms);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.avt-inv2 .inv2-chip:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.avt-inv2 .inv2-chip--ativo { background: var(--avt-primary); border-color: var(--avt-primary); }
.avt-inv2 .inv2-chip--ativo::after { content: "×"; font-size: 14px; line-height: 1; margin-left: 2px; opacity: .85; }
.avt-inv2 .inv2-chip--oferta:not(.inv2-chip--ativo) { border-color: var(--avt-badge-special); color: #ffd58a; }
.avt-inv2 .inv2-chip--ordem { border-style: dashed; }

/* em v2 a página é full-width (sem o .col-full do Storefront): o wrap vira o container */
.avt-inv2 .avt-inventario-wrap {
	max-width: var(--avt-container);
	margin: 0 auto;
	padding: 24px 16px 0;
	box-sizing: border-box;
}

/* =====================================================================
   2. Lista: cards entram em cascata (vitrine-v2.css anima .v2-in)
   ===================================================================== */
.avt-inv2 .avt-inventario__lista li.product { opacity: 0; transform: translateY(18px); }
.avt-inv2 .avt-inventario__lista li.product.v2-in { animation-delay: calc(var(--i, 0) * 55ms); }
.avt-inv2 .avt-inventario__lista li.product.v2-flip { animation: none; opacity: 1; transform: none; } /* durante o FLIP o JS controla */
.avt-inv2 .avt-chip { animation: v2Entra .4s ease both; }
.avt-inv2 .avt-resultados { transition: opacity .2s ease; }

/* =====================================================================
   3. Faixa de preço deslizante
   ===================================================================== */
.avt-inv2 .inv2-faixa { display: grid; gap: 8px; padding: 4px 2px 6px; }
.avt-inv2 .inv2-faixa__valores { display: flex; justify-content: space-between; font: 700 13px/1 var(--avt-font-heading); color: var(--avt-text-title); font-variant-numeric: tabular-nums; }
.avt-inv2 .inv2-faixa__valores output { transition: color .2s ease; }
.avt-inv2 .inv2-faixa__valores output.pulsa { color: var(--avt-primary); }
.avt-inv2 .inv2-faixa__trilho { position: relative; height: 28px; }
.avt-inv2 .inv2-faixa__trilho::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	height: 4px;
	border-radius: 2px;
	background: var(--avt-border-filter);
}
.avt-inv2 .inv2-faixa__sel {
	position: absolute;
	top: 12px;
	height: 4px;
	border-radius: 2px;
	background: var(--avt-primary);
}
.avt-inv2 .inv2-faixa input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.avt-inv2 .inv2-faixa input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.avt-inv2 .inv2-faixa input[type="range"]::-moz-range-track { background: transparent; height: 28px; }
.avt-inv2 .inv2-faixa input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--avt-bg);
	border: 3px solid var(--avt-primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	cursor: grab;
	transition: transform .15s ease;
}
.avt-inv2 .inv2-faixa input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--avt-bg);
	border: 3px solid var(--avt-primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	cursor: grab;
}
.avt-inv2 .inv2-faixa input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.avt-inv2 .inv2-faixa input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--avt-secondary); outline-offset: 2px; }

/* =====================================================================
   4. Filtro em gaveta (celular) + botão flutuante
   ===================================================================== */
.avt-inv2 button.inv2-filtro-btn {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 350;
	transform: translateX(-50%);
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--avt-graphite);
	color: #fff;
	font: 700 13px/1 var(--avt-font-heading);
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	cursor: pointer;
}
.avt-inv2 .inv2-filtro-btn .dashicons { color: var(--avt-primary); }
.avt-inv2 .inv2-filtro-btn__n {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--avt-primary);
	font-size: 11px;
	line-height: 20px;
	text-align: center;
}
.avt-inv2 .inv2-overlay {
	position: fixed;
	inset: 0;
	z-index: 390;
	background: rgba(20, 24, 28, .55);
	opacity: 0;
	transition: opacity .3s ease;
}
.avt-inv2 .inv2-overlay.visivel { opacity: 1; }

@media (max-width: 860px) {
	.avt-inv2 button.inv2-filtro-btn { display: inline-flex; }
	.avt-inv2 .avt-filtro {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		max-height: 86vh;
		overflow-y: auto;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .3);
		transform: translateY(110vh); /* em % da própria altura deixava a borda aparecendo */
		transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	}
	.avt-inv2 .avt-filtro.avt-filtro--aberto { transform: translateY(0); }
	.avt-inv2 .avt-filtro.arrastando { transition: none; }
	.avt-inv2 .avt-filtro__cabecalho { position: sticky; top: 0; z-index: 2; cursor: grab; touch-action: none; border-radius: 18px 18px 0 0; }
	.avt-inv2 .avt-filtro__cabecalho::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 7px;
		width: 44px;
		height: 4px;
		margin-left: -22px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .45);
	}
	.avt-inv2 .avt-filtro__toggle .dashicons { transform: rotate(180deg); }
	.avt-inv2 .inv2-hero { min-height: 260px; }
	.avt-inv2 .inv2-hero__conteudo { padding-top: 40px; padding-bottom: 72px; }
	.avt-inv2 .inv2-chips { gap: 6px; }
	.avt-inv2 .inv2-chip { padding: 7px 12px; font-size: 11px; }
}

/* =====================================================================
   5. Acessibilidade
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.avt-inv2 .inv2-chip, .avt-inv2 .avt-chip { animation: none; opacity: 1; }
	.avt-inv2 .avt-inventario__lista li.product { opacity: 1; transform: none; animation: none !important; }
	.avt-inv2 .inv2-hero__midia { transform: none !important; }
	.avt-inv2 .avt-filtro { transition: none; }
}

/* =====================================================================
   6. Filtro sem recarregar: skeleton enquanto a lista nova chega
   ===================================================================== */
.avt-inv2 li.inv2-esqueleto {
	background: var(--avt-bg-card);
	border: 1px solid var(--avt-border-card);
	border-radius: var(--avt-radius);
	padding: 0 0 16px;
	overflow: hidden;
	display: grid;
	gap: 10px;
}
.avt-inv2 .inv2-esqueleto__img,
.avt-inv2 .inv2-esqueleto__ln {
	background: linear-gradient(90deg, var(--avt-bg-shade) 0%, var(--avt-bg) 40%, var(--avt-bg-shade) 80%);
	background-size: 200% 100%;
	animation: inv2Brilho 1.1s linear infinite;
}
.avt-inv2 .inv2-esqueleto__img { aspect-ratio: 4 / 3; }
.avt-inv2 .inv2-esqueleto__ln { height: 14px; margin: 0 16px; border-radius: 4px; }
.avt-inv2 .inv2-esqueleto__ln--curta { width: 45%; }
.avt-inv2 .inv2-esqueleto__ln--preco { height: 20px; width: 55%; margin-top: 6px; }
@keyframes inv2Brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
[data-vista="lista"] li.inv2-esqueleto { grid-template-columns: 380px 1fr; grid-template-rows: auto auto auto; column-gap: 20px; padding: 0 20px 0 0; min-height: 240px; }
[data-vista="lista"] li.inv2-esqueleto .inv2-esqueleto__img { grid-row: 1 / 4; aspect-ratio: auto; }
[data-vista="lista"] li.inv2-esqueleto .inv2-esqueleto__ln { margin: 0; align-self: center; }
@media (max-width: 860px) {
	[data-vista="lista"] li.inv2-esqueleto { grid-template-columns: 1fr; padding: 0 0 16px; }
	[data-vista="lista"] li.inv2-esqueleto .inv2-esqueleto__img { grid-row: auto; aspect-ratio: 4 / 3; }
	[data-vista="lista"] li.inv2-esqueleto .inv2-esqueleto__ln { margin: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .avt-inv2 .inv2-esqueleto__img, .avt-inv2 .inv2-esqueleto__ln { animation: none; } }