/* Fontes iguais às do site atual (WordPress/Elementor): Roboto (corpo/UI) + Roboto Slab (títulos de destaque) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Slab:wght@500;600;700&display=swap');

/* ============================================================
   DISAFE — Diretiva visual
   Conceito: segurança nacional com precisão técnica.
   Base visual: branco / azul profundo / preto.
   Cor de ação: vermelho Disafe (usar com moderação, só em CTAs).
   Tipografia: Parkinsans (títulos) + Lato (corpo).
   ============================================================ */

:root {
	/* ---------- cores da marca ---------- */
	--blue: #143266;          /* azul profundo — títulos, menus, técnico, institucional */
	--blue-hover: #0f2650;
	--blue-active: #0b1d3e;
	--red: #B70916;           /* vermelho Disafe — ação (CTA) */
	--red-hover: #97070f;
	--red-active: #7d060d;
	--ink: #0D1216;           /* preto institucional — textos, header, rodapé */

	/* azul é o pilar técnico/institucional -> primary do tema */
    --primary: var(--blue);
    --primary-hover: var(--blue-hover);
    --primary-active: var(--blue-active);
	/* preto institucional -> secondary (áreas de alto contraste) */
    --secondary: var(--ink);
    --secondary-hover: #1c2530;
    --secondary-active: #05090c;

	/* verde permanece como cor funcional de estoque/sucesso */
    --green:#1f8f3d;
	--green-hover: #17772f;
	--green-active: #115f26;

    --gray:#e6e6e6;
	--gray-hover: #dcdcdc;
	--gray-active: #d3d3d3;
    --gray-light:#EFEFEF;     /* branco suave — fundos secundários / respiro */
	--gray-light-hover: #e6e6e6;
	--gray-light-active: #dedede;
	--white: #EFEFEF;
	/* cores */

	/* ---------- header ---------- */
	/* barra superior institucional em preto — âncora sóbria da marca */
	--header-topbar-background-color: var(--ink);
	--header-topbar-text-color: #eef0f2;
	--header-topbar-icon-color: #eef0f2;
	/* header principal branco, limpo e sólido */
	--header-background-color: #ffffff;
	--header-border-color: #E2E2E2;
	--header-color-text: var(--ink);
	--header-svg-color: var(--ink);
	--header-svg-width: 25px;
	--header-svg-height: 25px;
	--header-search-background-color: #ffffff;
	--header-search-background-color-focus: var(--gray-light);
	--header-search-color: var(--ink);
	--header-menu-background: #ffffff;
	--header-menu-color-text: var(--ink);
	--header-menu-color-text-hover: var(--red);
	--header-menu-mobile-color-text: var(--ink);
	--header-menu-icon-color: var(--ink);
	--header-menu-font-size: 13px;
	--header-menu-text-height: 46px;
	/* header */

	/* ---------- footer ---------- */
	/* rodapé em preto institucional, texto claro */
	--footer-background-color: var(--ink);
	--footer-border-color: rgba(255,255,255,.10);
	--footer-color-text: #cfd4da;
	--footer-color-text-secondary: #9aa2ac;
	--footer-space: 40px;
	/* footer */

	/* ---------- fontes (iguais ao site atual) ---------- */
    --font-primary: 'Roboto', sans-serif;          /* corpo, UI, navegação, botões — como no site */
    --font-secondary: 'Roboto Slab', serif;        /* títulos de destaque — identidade técnica */
	/* fontes */

	/* ---------- botões ---------- */
	/* CTA primário = vermelho Disafe (Comprar / Adicionar / Finalizar / Cotação) */
    --btn-primary: var(--red);
    --btn-primary-hover: var(--red-hover);
    --btn-primary-active: var(--red-active);
	/* secundário = azul institucional */
    --btn-secondary: var(--blue);
    --btn-secondary-hover: var(--blue-hover);
    --btn-secondary-active: var(--blue-active);

    /* botão do card = preto institucional (sóbrio); vermelho fica reservado
       ao CTA real de compra/carrinho na página do produto */
    --btn-product-thumb: var(--ink);
    --btn-product-thumb-hover: #1c2530;
    --btn-product-thumb-active: #05090c;
    --btn-product-thumb-color: #fff;
    --btn-product-thumb-radius: 8px;

	/* CTA de compra/carrinho em azul profundo (vermelho ficou pesado aqui) */
	--btn-add-cart: var(--blue);
	--btn-add-cart-hover: var(--blue-hover);
	--btn-add-cart-active: var(--blue-active);
	--btn-add-cart-color: #fff;
	/* botões */

	/* thumb */
	--thumb-product-title-color: var(--ink);
	/* thumb */

	/* produto */
	--spacing-sections-product: 56px;
	--spacing-product-column-right: 24px;
	--spacing-product-images: 8px;
	--product-row-x: 24px;
	--product-row-y: 24px;
	--product-images-x: 4px;
	--product-images-y: 4px;
	/* produto */

	/* variações — selecionada em azul institucional */
	--variant-button-background-color: #fff;
	--variant-button-color: var(--ink);
	--variant-button-border-color: #D9DDE3;
	--variant-button-selected-background-color: var(--blue);
	--variant-button-selected-color: #fff;
	--variant-button-selected-border-color: var(--blue);
	--variant-button-border-radius: var(--border-radius-default);
	/* variações */

	/* radius — arredondamento suave (marca prefere cantos macios, não pontiagudos) */
	--border-radius-default: 8px;
	--btn-border-radius: var(--border-radius-default);
	--input-border-radius: var(--border-radius-default);
	/* radius */

	/* geral — layout limpo e espaçado */
	--products-gutter-x: 14px;
	--products-gutter-y: 18px;
	--product-thumb-spacing: 4px;
	--plyr-color-main: var(--blue);
	--spacing-sections-home: 64px;
    --text: var(--ink);
	--text-secondary: #515151;    /* cinza secundário — textos auxiliares */
    --text-black: var(--ink);
    --text-gray: #515151;
	--background: #fff;
	--background-secondary: #fff;
    --container-xxl: 1440px;
    --container-small: var(--container-xxl);
	--coupons-available-bg: #f5f6f8;
    --container-large: 1920px;
    --logo-max-height: 45px;
	@media (max-width: 991px) {
		--header-svg-width: 22px;
		--header-svg-height: 22px;

		--spacing-sections-home: 40px;
		--footer-space: 24px;
		--logo-max-height: 40px;
	}
	/* geral */
}

/* ============================================================
   HEADER
   ============================================================ */
.top-bar, .top-bar a { font-weight: 600; }
.top-bar-carousel-central { max-width: 520px; }
.top-bar-carousel-central .vowt-next { right: 0; }
.top-bar-carousel-central .vowt-prev { left: 0; }

.logo-wrapper a { display: flex; }
.header-wrapper { padding: 16px; }
.header-wrapper .search { border-radius: 8px; border: 1px solid #E2E2E2; }
.header-bottom { border-top: 1px solid #E2E2E2; }

.header-info-label { font-size: 12px; color: var(--text-secondary); }
.header-info-text { color: var(--ink); font-weight: 600; }
.header-info-text a { color: var(--ink); }

/* menu técnico e direto, com hover vermelho pontual */
.menu-advanced .item-nivel-1 .item-nivel-1-text { font-weight: 600; letter-spacing: .01em; }
.menu-smart-link { text-transform: uppercase; font-family: var(--font-primary); font-weight: 600; letter-spacing: .04em; }

/* ============================================================
   FAIXAS / CUPONS
   ============================================================ */
.coupon-bar { padding: 12px 0; background-color: var(--ink); }
#coupon-name { background-color: var(--ink); }
#coupon-copy { padding: 8px 20px; text-transform: none; }

.promotional-bar .title { font-weight: 600; }
.promotional-bar .content { font-weight: 500; }

.banners-home-gx { --bs-gutter-x: 14px; }
.banners-home-gy { --bs-gutter-y: 14px; }

/* ============================================================
   SEÇÕES DA HOME — título em preto institucional, acento azul discreto
   (azul = quebra de seção; usado com moderação)
   ============================================================ */
.heading-title {
	font-size: clamp(24px, 2.2vw, 32px);
	letter-spacing: -0.015em;
	color: var(--ink);
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 24px;
}
.heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--blue);
	border-radius: 2px;
}

/* ============================================================
   CARDS DE PRODUTO — limpos, brancos, muito respiro
   ============================================================ */
.product-thumb {
	border-radius: 10px;
	padding: 16px;
	border: 1px solid #E6E8EC;
	background: #fff;
	transition: box-shadow .18s ease, border-color .18s ease;
}
/* hover sóbrio — sem salto, apenas realce discreto */
.product-thumb:hover {
	box-shadow: 0 6px 18px -12px rgba(13, 18, 22, .30);
	border-color: #D3D8E0;
}

.product-thumb .btn-product-thumb {
	font-size: 11px;
	padding: 11px 16px;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: .02em;
}
.product-thumb .countdown-icon-thumb { width: 14px; height: 14px; }
.product-thumb .countdown-timer { padding: 8px 12px; font-size: 11px; background: var(--ink); }

.product-thumb .product-price-current { flex-direction: column-reverse; min-height: 42px; }
.product-thumb .product-price-old-value { font-size: 12px; color: var(--text-secondary); }
.product-thumb .product-price-value { font-size: 22px; color: var(--ink); letter-spacing: -0.5px; }
.product-thumb .product-short-installments { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* etiquetas discretas (usar só quando verdadeiras) */
.product-thumb .product-tag {
	min-width: auto; height: auto; line-height: normal;
	position: relative; left: auto; top: auto;
	padding: 2px 8px; font-size: 10px; font-weight: 600; border-radius: 4px;
	background: var(--red); color: #fff;
}
.product-thumb .product-tag::after, .product-thumb .product-tag::before { display: none; }
.product-thumb .promo-tag { font-weight: 600; font-size: 11px; text-transform: uppercase; }
.product-thumb:hover .product-thumb-bottom { opacity: 1; }

.container-arrow i { color: var(--ink); }

/* seção destacada em cinza claro — quebra sóbria, sem bloco de cor forte */
.product-list-carousel-bg { background-color: var(--gray-light); }
.product-list-carousel-bg .product-thumb { padding: 12px; border-radius: 8px; }

.carousel-categories .carousel-categories-title { font-size: 14px; font-weight: 500; }

/* ============================================================
   PÁGINA DE PRODUTO
   ============================================================ */
#product h1 { font-size: 26px; font-weight: 700; line-height: 125%; color: var(--ink); }
.product-flex-images .arrows-thumb-product i, .product-flex-images .arrows-product i { font-size: 12px; }
.product-infos { display: block; }
.product-infos .product-info-label { font-weight: 400; color: var(--text-secondary); }
.product-info-value { font-weight: 600; color: var(--ink); }
.coupon-bar-product { border-color: #ccc; padding: 10px; }
.btn.btn-coupon-bar-product { background: #f1f1f1; color: var(--ink); }
.coupon-bar-product-name { font-size: 12px; }
#product .shipping-simulator .btn-shipping-simulator { padding: 12px 16px; }
#product .countdown-timer { padding: 10px 16px; font-size: 12px; background: var(--ink); }
@media (max-width: 991px) {
	.coupon-bar-product { flex-direction: row; }
}

/* ============================================================
   RODAPÉ — preto institucional
   ============================================================ */
.footer-logo { max-height: 40px; }
footer a { transition: color .15s ease; }
footer a:hover { color: #ffffff; }

/* ícones de contato do rodapé — claros (não azul) p/ contraste no fundo escuro */
footer .list-contact__item i,
footer .list-contact__item i::before { color: #eef0f2; }

/* ============================================================
   CUPONS FLUTUANTES
   ============================================================ */
.coupons-available .coupon-discount, .coupons-available .coupon-text-footer { font-size: 11px; }
.coupons-available .btn.btn-open-coupons { bottom: 100px; left: 40px; }
@media (max-width: 991px) {
    .coupons-available .btn.btn-open-coupons { bottom: 80px; left: 26px; width: 46px; height: 46px; }
	.coupons-available .btn-open-coupons svg { width: 18px; }
}

/* ============================================================
   TIPOGRAFIA — igual ao site atual
   Roboto       -> corpo, UI, navegação, botões, labels, preços
   Roboto Slab  -> apenas títulos de destaque (identidade técnica)
   (o body já herda Roboto via --font-primary do tema)
   ============================================================ */

/* Headings gerais — Roboto Bold (padrão do site) */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 700; }

/* Títulos de destaque — Roboto Slab p/ identidade */
.heading-title,
#product h1 { font-family: var(--font-secondary); font-weight: 700; }

/* Preços — Roboto, peso forte, legível */
.product-thumb .product-price-value, .product-price-thumb,
#product .price-new { font-family: var(--font-primary); font-weight: 700; }

/* ============================================================
   ACESSIBILIDADE — foco visível
   ============================================================ */
a:focus-visible, button:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* ============================================================
   THUMB — remover compra rápida e seletor de variação do card
   (mantém o botão "Comprar/Ver produto" -> leva à página do produto)
   ============================================================ */
.product-thumb .btn-add-cart,
.product-thumb .product-thumb-input-quantity,
.product-thumb .variations { display: none !important; }

.product-list-carousel-bg .heading-title{color: #05090c;}