/**
 * Supra Force — sistema de barra de rolagem do FRONT-END.
 *
 * Dono único do padrão visual das barras de rolagem do site. Nasceu da
 * versão aprovada para o mini-cart (que morava em theme-mini-cart.css) e foi
 * promovida a sistema compartilhado; aquele arquivo agora guarda apenas o
 * espaçamento específico da lista de produtos, sem nenhuma regra de
 * scrollbar duplicada.
 *
 * ONDE ENTRA: enfileirado em wp_enqueue_scripts, que só roda no front-end.
 * O wp-admin usa admin_enqueue_scripts e portanto NUNCA recebe este arquivo
 * — nem a barra do painel, nem a admin bar, nem o editor do Elementor.
 *
 * INVENTÁRIO (varredura do DOM ao vivo em Home, catálogo, categoria,
 * produto, carrinho e institucional, mais mini-cart e Quick View abertos).
 * Elementos que declaram overflow auto/scroll E rolam de fato E estão
 * visíveis — três, e só três:
 *
 *   1. html
 *      Rolagem principal da página. overflow computado é visible/visible
 *      (quem rola é o viewport), mas scrollHeight > clientHeight em todas as
 *      páginas medidas: Home 5158/768, catálogo 3405/768, categoria
 *      2518/768, produto 3038/768, carrinho 2711/768, institucional
 *      2023/768. Com o Quick View aberto vira hidden/hidden — é a trava da
 *      página ao fundo, que segue funcionando.
 *
 *   2. .elementor-menu-cart__main .elementor-menu-cart__products
 *      Lista de produtos do mini-cart. auto/hidden, 1196/518 com 8 itens.
 *
 *   3. #yith-quick-view-modal .yith-wcqv-main
 *      Painel interno do Quick View. auto/hidden, 695/630.
 *
 * FICARAM DE FORA, com motivo:
 *   - .elementor-menu-cart__container.elementor-lightbox e .yith-wcqv-head:
 *     overflow hidden/visible, nunca rolam — são casca, não área rolável.
 *   - span.price, h1.product_title, h2, .screen-reader-text e afins: só
 *     aparecem numa varredura por scrollHeight > clientHeight por
 *     arredondamento de subpixel; têm overflow visible e não desenham barra
 *     nenhuma. Estilizá-los seria ruído.
 *   - body: nunca rolou em nenhuma das páginas medidas.
 *   - wp-admin, admin bar e editor do Elementor: fora do alcance do arquivo.
 *
 * Nenhum seletor universal (*, ou ::-webkit-scrollbar solto) é usado.
 */

/* =========================================================
   1. Tokens do sistema
   -----------------------------------------------------------
   Em :root porque esta folha só existe no front-end. As cores são as mesmas
   já aprovadas no mini-cart e são tokens antigos do projeto — #E8EDFF é a
   superfície azul-clara dos cards, #425fdb o azul da marca e #0a1b8c o azul
   escuro de hover dos CTAs. Nenhuma cor nova.
   ========================================================= */
:root {
	--supra-scrollbar-size: 6px;
	--supra-scrollbar-track: #E8EDFF;
	--supra-scrollbar-thumb: #425FDB;
	--supra-scrollbar-thumb-active: #0A1B8C;
	--supra-scrollbar-radius: 999px;
}

/* =========================================================
   2. WebKit / Blink (Chrome, Edge, Safari, Chromium)
   -----------------------------------------------------------
   Vem primeiro e SEM scrollbar-color no escopo global, de propósito: do
   Chromium 121 em diante as propriedades padrão scrollbar-width/
   scrollbar-color passaram a ser suportadas, e quando scrollbar-color está
   declarado o Chromium usa o caminho padrão e IGNORA os ::-webkit-scrollbar
   daquele elemento — o que custaria o border-radius e os estados de hover/
   active, que a propriedade padrão não expressa. Verificado neste projeto:
   CSS.supports('scrollbar-color','red blue') === true no Chromium. Por isso
   scrollbar-color fica isolado no bloco @supports do Firefox, na seção 4.
   ========================================================= */
html::-webkit-scrollbar,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar {
	width: var(--supra-scrollbar-size) !important;
	height: var(--supra-scrollbar-size) !important;
}

html::-webkit-scrollbar-track,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-track,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar-track {
	background-color: var(--supra-scrollbar-track) !important;
	border: 0 !important;
	border-radius: var(--supra-scrollbar-radius) !important;
	box-shadow: none !important;
}

/* Sem background-clip com borda transparente de propósito: é essa técnica
   que cria a "borda branca grossa" e faz o thumb parecer mais fino que o
   trilho. Aqui o thumb ocupa a largura inteira dos 6px. */
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar-thumb {
	background-color: var(--supra-scrollbar-thumb) !important;
	border: 0 !important;
	border-radius: var(--supra-scrollbar-radius) !important;
	box-shadow: none !important;
	/* Curta de propósito — só a cor muda, nunca o tamanho. */
	transition: background-color 0.15s ease-in-out !important;
}

html::-webkit-scrollbar-thumb:hover,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-thumb:hover,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar-thumb:hover {
	background-color: var(--supra-scrollbar-thumb-active) !important;
}

html::-webkit-scrollbar-thumb:active,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-thumb:active,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar-thumb:active {
	background-color: var(--supra-scrollbar-thumb-active) !important;
}

/* Sem setas nas pontas. */
html::-webkit-scrollbar-button,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-button,
#yith-quick-view-modal .yith-wcqv-main::-webkit-scrollbar-button {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* =========================================================
   3. Firefox
   -----------------------------------------------------------
   Único motor que não implementa ::-webkit-scrollbar e o único que precisa
   das propriedades padrão. O gate @supports (-moz-appearance: none) é
   exclusivo do Firefox: verificado neste projeto que
   CSS.supports('-moz-appearance','none') === false no Chromium, então o
   bloco não vaza e não desarma o caminho WebKit acima. 'thin' é o
   equivalente mais próximo dos 6px; o Firefox não expõe controle de raio,
   então lá os cantos ficam como o motor desenha — as cores da marca, que é
   o que muda a percepção, são respeitadas.
   ========================================================= */
@supports (-moz-appearance: none) {
	html,
	.elementor-menu-cart__main .elementor-menu-cart__products,
	#yith-quick-view-modal .yith-wcqv-main {
		scrollbar-width: thin !important;
		scrollbar-color: var(--supra-scrollbar-thumb) var(--supra-scrollbar-track) !important;
	}
}