/* Vitrusfer — menu "Categorias" do header (mega menu, desktop). */

.vf-cats { position: relative; display: flex; align-self: stretch; }
.vf .vf-cats__btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 18px 0 14px;
	border: 0; border-radius: 0; background: var(--vf-orange-btn); color: #fff; cursor: pointer;
	font: 700 14px var(--vf-font); text-transform: uppercase; letter-spacing: .03em;
	transition: background-color .2s;
}
.vf .vf-cats__btn:hover, .vf .vf-cats.is-open .vf-cats__btn { background: var(--vf-orange-ink); color: #fff; }
.vf-cats__btn .vf-ico { width: 20px; height: 20px; }
.vf-cats__chev { width: 18px !important; height: 18px !important; transition: transform .25s var(--vf-ease); }
.vf-cats.is-open .vf-cats__chev { transform: rotate(180deg); }

/* Painel */
.vf-mega {
	--vf-mega-h: min(500px, calc(100vh - var(--vf-header-h) - 48px));
	position: absolute; left: 0; top: 100%; z-index: 30;
	width: min(calc(var(--vf-container) - 2 * var(--vf-gutter)), calc(100vw - 48px));
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--vf-line); border-top: 3px solid var(--vf-orange-btn);
	border-radius: 0 var(--vf-r-lg) var(--vf-r-lg) var(--vf-r-lg);
	box-shadow: 0 30px 60px -12px rgba(10, 31, 68, .28), 0 12px 24px -8px rgba(10, 31, 68, .12);
	opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .22s var(--vf-ease);
}
.vf-mega[hidden] { display: none; }
.vf-cats.is-open .vf-mega { opacity: 1; transform: none; }
.vf-mega__veil {
	position: fixed; inset: var(--vf-mega-top, 136px) 0 0 0; z-index: 10;
	background: rgba(10, 20, 40, .38); opacity: 0; transition: opacity .2s ease;
}
.vf-mega__veil[hidden] { display: none; }
.vf-cats.is-open .vf-mega__veil { opacity: 1; }

.vf-mega__inner { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: var(--vf-mega-h); }

/* Lista de categorias (esquerda) */
.vf-mega__list { overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 16px; background: #f6f7fb; border-right: 1px solid var(--vf-line); scrollbar-width: thin; }
.vf .vf-mega__list ul { margin: 0 0 6px; padding: 0; list-style: none; }
.vf .vf-mega__list li { margin: 0; }
.vf-mega__group { margin: 10px 10px 6px; font: 700 11px var(--vf-font); text-transform: uppercase; letter-spacing: .08em; color: var(--vf-mut); }
.vf-mega__group:first-child { margin-top: 2px; }
.vf .vf-mega__cat {
	position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px;
	border-radius: var(--vf-r-sm); color: var(--vf-ink); text-decoration: none; font: 500 14px/1.25 var(--vf-font);
	transition: background-color .15s, color .15s, box-shadow .15s;
}
.vf-mega__thumb { flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--vf-line); display: grid; place-items: center; }
.vf-mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vf-mega__thumb .vf-ico { width: 18px; height: 18px; }
.vf-mega__name { flex: 1; min-width: 0; }
.vf-mega__count { flex: none; min-width: 26px; padding: 2px 7px; border-radius: var(--vf-r-pill); background: #e8ebf2; color: var(--vf-mut); font: 600 11px/1.4 var(--vf-font); text-align: center; }
.vf-mega__chev { width: 16px !important; height: 16px !important; color: var(--vf-blue); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.vf .vf-mega__cat:hover, .vf .vf-mega__cat.is-active, .vf .vf-mega__cat:focus-visible {
	background: #fff; color: var(--vf-blue-ink); box-shadow: 0 1px 2px rgba(10, 31, 68, .06), 0 4px 12px rgba(10, 31, 68, .06);
}
.vf-mega__cat.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--vf-orange); }
.vf-mega__cat.is-active .vf-mega__count { background: var(--vf-blue-soft); color: var(--vf-blue-ink); }
.vf-mega__cat.is-active .vf-mega__chev, .vf-mega__cat:hover .vf-mega__chev { opacity: 1; transform: none; }

/* Painel da categoria (direita) */
.vf-mega__panes { position: relative; overflow: hidden; }
.vf-mega__pane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 28px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.vf-mega__pane.is-active { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.vf-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--vf-line); }
.vf-mega__title { margin: 0; font: 700 22px/1.2 var(--vf-font); letter-spacing: -.02em; color: var(--vf-ink); }
.vf-mega__sub { margin: 4px 0 0; font-size: 13px; color: var(--vf-mut); }
.vf .vf-mega__all { flex: none; min-height: 40px; padding: 8px 16px; }
.vf .vf-mega__prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vf .vf-mega__prods li { margin: 0; }
.vf .vf-mega__prod {
	display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: start;
	height: 100%; padding: 10px; border: 1px solid var(--vf-line); border-radius: var(--vf-r-md); background: #fff;
	color: var(--vf-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--vf-ease);
}
.vf .vf-mega__prod:hover, .vf .vf-mega__prod:focus-visible { border-color: var(--vf-blue); color: var(--vf-ink); box-shadow: 0 10px 22px rgba(10, 31, 68, .1); transform: translateY(-2px); }
.vf-mega__img { grid-row: 1 / span 2; width: 88px; height: 88px; border-radius: var(--vf-r-sm); overflow: hidden; background: #fff; display: grid; place-items: center; }
.vf-mega__img img { width: 100%; height: 100%; object-fit: contain; }
.vf-mega__pname { font: 500 13px/1.35 var(--vf-font); color: var(--vf-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vf .vf-mega__prod:hover .vf-mega__pname { color: var(--vf-blue-ink); }
.vf-mega__price { align-self: end; font: 800 16px/1.2 var(--vf-font); color: var(--vf-ink); }
.vf-mega__price .amount, .vf-mega__price bdi { color: inherit !important; }
.vf-mega__price small { display: block; font-size: 11px; font-weight: 500; color: var(--vf-mut); }
.vf-mega__empty { color: var(--vf-mut); }

/* Rodapé do painel */
.vf-mega__foot { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 10px 20px; border-top: 1px solid var(--vf-line); background: #fff; }
.vf .vf-mega__foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--vf-ink); font: 600 13px var(--vf-font); text-decoration: none; }
.vf .vf-mega__foot a:hover { color: var(--vf-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.vf-mega__foot .vf-ico { width: 18px; height: 18px; color: var(--vf-blue); }

@media (max-width: 1239px) {
	.vf-mega__inner { grid-template-columns: 260px minmax(0, 1fr); }
	.vf .vf-mega__prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}