/* =========================================================================
   Loja Patrik - folha de estilo unica
   Ordem: tokens, base, componentes, cabecalho, home, catalogo, produto,
   carrinho e checkout, conta, rodape, responsivo.
   ========================================================================= */

/* ------------------------------------------------------------- tokens */

:root {
	--azul-900: #082c66;
	--azul-800: #0a3576;
	--azul-700: #0b3c8a;
	--azul-600: #1450a5;
	--azul-100: #e8effa;
	--azul-050: #f3f7fd;

	--laranja-500: #f26522;
	--laranja-600: #d9531a;
	--laranja-050: #fff2ea;

	--vermelho-500: #d32f2f;
	--vermelho-050: #fdeaea;
	--amarelo-400: #ffc107;
	--verde-600: #2e7d32;
	--verde-050: #eaf5eb;

	--branco: #ffffff;
	--cinza-050: #f5f6f8;
	--cinza-100: #eceef2;
	--cinza-200: #dfe3ea;
	--cinza-400: #9aa3b2;
	--cinza-500: #6b7280;
	--cinza-700: #3d4451;
	--cinza-900: #141414;

	--fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--raio: 10px;
	--raio-g: 16px;
	--sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
	--sombra-m: 0 6px 16px rgba(16, 24, 40, .1);
	--sombra-g: 0 18px 40px rgba(8, 44, 102, .16);

	--container: 1280px;
	--cabecalho-alt: 148px;
}

/* --------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--fonte);
	font-size: 15px;
	line-height: 1.55;
	color: var(--cinza-900);
	background: var(--cinza-050);
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-700); text-decoration: none; }
a:hover { color: var(--azul-600); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; color: var(--azul-900); }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--laranja-500); outline-offset: 2px; }

.container {
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
}

.pular {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--azul-900); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; color: #fff; }

.conteudo { display: block; padding-bottom: 56px; min-height: 50vh; }

/* --------------------------------------------------------- componentes */

.botao,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 20px;
	border: 0; border-radius: var(--raio);
	background: var(--laranja-500); color: #fff;
	font-weight: 700; font-size: .95rem; line-height: 1.2;
	cursor: pointer; text-align: center;
	transition: background .18s ease, transform .12s ease;
}
.botao:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: var(--laranja-600); color: #fff; }
.botao:active { transform: translateY(1px); }

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { background: var(--laranja-500); color: #fff; }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: var(--laranja-600); }

.botao-secundario,
.woocommerce a.button.wc-backward {
	background: var(--branco); color: var(--azul-700);
	border: 1.5px solid var(--cinza-200);
}
.botao-secundario:hover,
.woocommerce a.button.wc-backward:hover { background: var(--azul-050); color: var(--azul-700); border-color: var(--azul-100); }

.botao-acao { background: var(--laranja-500); }

.botao-bloco { width: 100%; }

/* Enquanto a variacao nao e escolhida o Woo desabilita o botao. O padrao dele
   deixa a cor lavada e puxando para o roxo; aqui vira cinza, que le como
   "ainda nao da para clicar". */
.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--cinza-200) !important;
	color: var(--cinza-500) !important;
	opacity: 1; cursor: not-allowed;
}
.woocommerce .button.disabled:hover,
.woocommerce .button:disabled:hover { background: var(--cinza-200) !important; }

.trilha { margin: 16px 0 20px; font-size: .82rem; color: var(--cinza-500); }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.trilha li + li::before { content: "/"; margin-right: 6px; color: var(--cinza-400); }
.trilha a { color: var(--cinza-500); }
.trilha a:hover { color: var(--azul-700); }
.trilha [aria-current] { color: var(--cinza-900); font-weight: 600; }

.selo {
	position: absolute; z-index: 2; top: 10px; left: 10px;
	padding: 4px 9px; border-radius: 999px;
	font-size: .74rem; font-weight: 800; letter-spacing: .02em;
	color: #fff; background: var(--vermelho-500);
}
.selo-destaque { background: var(--azul-700); }
.selo-esgotado { background: var(--cinza-500); left: auto; right: 10px; }

/* ----------------------------------------------------------- cabecalho */

.cabecalho { background: var(--branco); box-shadow: var(--sombra); position: relative; z-index: 60; }

.avisos { background: var(--azul-900); color: #dbe7fb; font-size: .8rem; }
.avisos-linha { display: flex; gap: 22px; align-items: center; justify-content: center; min-height: 34px; flex-wrap: wrap; }
.aviso { display: inline-flex; align-items: center; gap: 6px; }
.aviso::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amarelo-400); }
.aviso-link { color: #fff; font-weight: 600; }
.aviso-link:hover { color: var(--amarelo-400); }

.barra-principal { background: var(--azul-700); padding: 14px 0; }
.barra-principal-linha { display: flex; align-items: center; gap: 24px; }

.botao-menu { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; }
.botao-menu span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }

.logo { display: flex; flex-direction: column; color: #fff; line-height: 1.15; flex: 0 0 auto; }
.logo:hover { color: #fff; }
.logo-marca { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.logo-slogan { font-size: .72rem; color: #b9cdf0; }
.logo img { max-height: 52px; width: auto; }

.busca { flex: 1 1 auto; display: flex; background: #fff; border-radius: var(--raio); overflow: hidden; max-width: 720px; }
.busca input[type="search"] { flex: 1; border: 0; padding: 12px 16px; font-size: .95rem; min-width: 0; }
.busca input[type="search"]:focus { outline: none; }
.busca button {
	border: 0; background: var(--laranja-500); color: #fff; padding: 0 18px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.busca button:hover { background: var(--laranja-600); }

.acoes { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.acao { display: flex; align-items: center; gap: 9px; color: #fff; }
.acao:hover { color: var(--amarelo-400); }
.acao-texto { display: flex; flex-direction: column; line-height: 1.15; }
.acao-texto small { font-size: .7rem; color: #b9cdf0; }
.acao-texto strong { font-size: .86rem; }
.sacola-icone { position: relative; display: inline-flex; }
.sacola-conta {
	position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
	border-radius: 999px; background: var(--laranja-500); color: #fff;
	font-size: .68rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px;
}

.barra-departamentos { background: var(--azul-800); }
.barra-departamentos-linha { display: flex; align-items: stretch; gap: 8px; }

.botao-departamentos {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--azul-900); color: #fff; border: 0; cursor: pointer;
	padding: 12px 18px; font-weight: 700; font-size: .88rem;
}
.botao-departamentos:hover { background: #06255a; }

.departamentos-topo { list-style: none; display: flex; margin: 0; padding: 0; flex: 1; overflow: visible; }
.departamento-item { position: relative; }
.departamento-item > a {
	display: block; padding: 12px 14px; color: #dbe7fb; font-size: .86rem; font-weight: 600; white-space: nowrap;
}
.departamento-item:hover > a { background: var(--azul-700); color: #fff; }
.destaque-ofertas > a { color: var(--amarelo-400); }

.mega {
	position: absolute; top: 100%; left: 0; z-index: 70;
	min-width: 260px; background: #fff; border-radius: 0 0 var(--raio) var(--raio);
	box-shadow: var(--sombra-g); padding: 14px 0 10px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.departamento-item:hover .mega, .departamento-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-lista { display: flex; flex-direction: column; }
.mega-lista a { padding: 8px 18px; color: var(--cinza-700); font-size: .88rem; }
.mega-lista a:hover { background: var(--azul-050); color: var(--azul-700); }
.mega-todos { display: block; margin-top: 8px; padding: 10px 18px 2px; font-weight: 700; font-size: .82rem; border-top: 1px solid var(--cinza-100); }

.painel-departamentos {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 65;
	background: #fff; box-shadow: var(--sombra-g); padding: 24px 0 28px;
}
.painel-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 28px; }
.painel-titulo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--azul-900); margin-bottom: 8px; font-size: .95rem; }
.painel-coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.painel-coluna a { font-size: .85rem; color: var(--cinza-700); }
.painel-coluna a:hover { color: var(--laranja-500); }

/* ----------------------------------------------------------- menu mobile */

.menu-mobile { position: fixed; inset: 0; z-index: 200; }
.menu-mobile-fundo { position: absolute; inset: 0; background: rgba(8, 20, 40, .5); }
.menu-mobile-painel {
	position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px);
	background: #fff; overflow-y: auto; padding-bottom: 40px;
	animation: entra-esq .22s ease;
}
@keyframes entra-esq { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.menu-mobile-topo {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; background: var(--azul-700); color: #fff; font-size: 1.05rem;
}
.menu-mobile-topo button { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.menu-mobile-conta { display: block; padding: 14px 18px; background: var(--azul-050); font-weight: 700; }
.menu-mobile-lista { list-style: none; margin: 0; padding: 0; }
.menu-mobile-linha { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cinza-100); }
.menu-mobile-linha a { flex: 1; padding: 14px 18px; color: var(--cinza-900); font-weight: 600; }
.menu-mobile-linha button { background: none; border: 0; width: 46px; font-size: 1.3rem; color: var(--cinza-500); cursor: pointer; }
.menu-mobile-sub { list-style: none; margin: 0; padding: 0 0 8px; background: var(--cinza-050); }
.menu-mobile-sub a { display: block; padding: 10px 30px; font-size: .9rem; color: var(--cinza-700); }

/* ---------------------------------------------------------------- home */

.topo-home { padding: 20px 0 8px; }
.topo-home-grade { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }

.lateral-departamentos { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: visible; }
.lateral-titulo { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-500); margin: 0; padding: 14px 18px 10px; border-bottom: 1px solid var(--cinza-100); }
.lateral-lista { list-style: none; margin: 0; padding: 6px 0; }
.lateral-item { position: relative; }
.lateral-item > a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: var(--cinza-700); font-size: .88rem; font-weight: 600; }
.lateral-item > a .ico { color: var(--azul-700); flex: 0 0 auto; }
.lateral-item > a .seta { margin-left: auto; color: var(--cinza-400); }
.lateral-item:hover > a { background: var(--azul-050); color: var(--azul-700); }

.lateral-sub {
	position: absolute; top: -6px; left: 100%; z-index: 40;
	width: 300px; background: #fff; border-radius: var(--raio-g);
	box-shadow: var(--sombra-g); padding: 16px 20px 14px;
	opacity: 0; visibility: hidden; transform: translateX(-8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.lateral-item:hover .lateral-sub, .lateral-item:focus-within .lateral-sub { opacity: 1; visibility: visible; transform: translateX(0); }
.lateral-sub strong { display: block; color: var(--azul-900); margin-bottom: 8px; }
.lateral-sub ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.lateral-sub a { font-size: .87rem; color: var(--cinza-700); }
.lateral-sub a:hover { color: var(--laranja-500); }
.lateral-sub-todos { font-weight: 700; font-size: .84rem; }

.banners { display: grid; gap: 16px; }
.banner {
	position: relative; overflow: hidden; border-radius: var(--raio-g);
	color: #fff; display: block; padding: 34px 36px;
	background: linear-gradient(120deg, var(--azul-800), var(--azul-600));
	box-shadow: var(--sombra-m);
}
.banner:hover { color: #fff; }
.banner-principal { min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.banner-tag {
	display: inline-block; width: fit-content; margin-bottom: 12px;
	background: var(--amarelo-400); color: var(--azul-900);
	font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 999px;
}
.banner-principal h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.1rem); max-width: 20ch; margin-bottom: 10px; }
.banner-principal p { color: #cfe0f8; max-width: 44ch; margin-bottom: 18px; }
.banner-botao { display: inline-block; width: fit-content; background: var(--laranja-500); padding: 12px 22px; border-radius: var(--raio); font-weight: 700; }
.banner-arte { position: absolute; right: -30px; top: -30px; width: 320px; height: 320px; pointer-events: none; }

.banners-menores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.banner-menor { padding: 22px 24px; min-height: 118px; display: flex; flex-direction: column; justify-content: center; }
.banner-menor strong { font-size: 1.15rem; }
.banner-menor span { font-size: .87rem; opacity: .9; }
.banner-laranja { background: linear-gradient(120deg, var(--laranja-600), var(--laranja-500)); }
.banner-azul { background: linear-gradient(120deg, #0f4fa0, #2f7fd6); }

.atalhos { padding: 22px 0 6px; }
.atalhos-trilho { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.atalho {
	flex: 0 0 auto; width: 116px; background: #fff; border-radius: var(--raio-g);
	padding: 16px 10px; text-align: center; box-shadow: var(--sombra);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--cinza-700); font-size: .78rem; font-weight: 600; line-height: 1.25;
	transition: transform .16s ease, box-shadow .16s ease;
}
.atalho:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); color: var(--azul-700); }
.atalho-icone {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--azul-100); color: var(--azul-700);
	display: grid; place-items: center;
	transition: background .16s ease, color .16s ease;
}
.atalho:hover .atalho-icone { background: var(--azul-700); color: #fff; }

.vitrine { margin: 34px 0; }
.vitrine-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vitrine-titulo { margin: 0; font-size: 1.35rem; }
.vitrine-subtitulo { margin: 2px 0 0; color: var(--cinza-500); font-size: .88rem; }
.vitrine-link { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.vitrine-oferta .vitrine-titulo { color: var(--vermelho-500); }

.vitrine-trilho {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
	gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.vitrine-trilho > * { scroll-snap-align: start; }

.faixa-institucional {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
	background: var(--azul-900); color: #cfe0f8; border-radius: var(--raio-g);
	padding: 24px 28px; margin: 34px 0;
}
.faixa-item strong { display: block; color: #fff; margin-bottom: 4px; }
.faixa-item span { font-size: .87rem; }

.grade-departamentos { margin: 34px 0; }
.grade-departamentos-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cartao-departamento {
	background: #fff; border-radius: var(--raio-g); padding: 22px 18px; text-align: center;
	box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--azul-900); font-size: .95rem; transition: transform .16s ease, box-shadow .16s ease;
}
.cartao-departamento:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); }
.cartao-icone {
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--laranja-050); color: var(--laranja-600);
	display: grid; place-items: center;
	transition: background .16s ease, color .16s ease;
}
.cartao-departamento:hover .cartao-icone { background: var(--laranja-500); color: #fff; }
.cartao-total { font-size: .78rem; color: var(--cinza-500); font-weight: 500; }

.bloco-ajuda {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	background: linear-gradient(120deg, var(--azul-700), var(--azul-600));
	color: #fff; border-radius: var(--raio-g); padding: 28px 32px; margin: 34px 0 10px;
}
.bloco-ajuda h2 { color: #fff; margin-bottom: 4px; }
.bloco-ajuda p { color: #cfe0f8; margin: 0; max-width: 60ch; }

/* ------------------------------------------------------------ catalogo */

.catalogo-cabecalho { margin-bottom: 18px; }
.catalogo-titulo { margin: 0 0 4px; font-size: 1.6rem; }
.catalogo-descricao { color: var(--cinza-500); max-width: 80ch; margin: 0; }

.subcategorias-atalho { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.subcategorias-atalho a {
	background: #fff; border: 1px solid var(--cinza-200); border-radius: 999px;
	padding: 7px 14px; font-size: .84rem; color: var(--cinza-700); font-weight: 600;
}
.subcategorias-atalho a:hover { border-color: var(--azul-700); color: var(--azul-700); background: var(--azul-050); }

.catalogo { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }

.catalogo-lateral { display: grid; gap: 14px; }
.filtro-bloco { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 16px 18px; }
.filtro-titulo { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-500); margin: 0 0 10px; }
.filtro-departamentos, .filtro-subs, .filtro-marcas { list-style: none; margin: 0; padding: 0; }
.filtro-departamentos > li > a,
.filtro-marcas a {
	display: flex; align-items: center; gap: 8px; padding: 7px 0;
	font-size: .88rem; color: var(--cinza-700); font-weight: 600;
}
.filtro-departamentos a:hover, .filtro-marcas a:hover { color: var(--laranja-500); }
.filtro-departamentos .ativo, .filtro-marcas .ativo { color: var(--azul-700); }
.filtro-conta { margin-left: auto; font-size: .75rem; color: var(--cinza-400); font-weight: 500; }
.filtro-subs { margin: 2px 0 6px 10px; border-left: 2px solid var(--azul-100); padding-left: 10px; }
.filtro-subs a { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .85rem; font-weight: 500; color: var(--cinza-700); }
.filtro-marcas .caixa {
	width: 15px; height: 15px; border: 1.5px solid var(--cinza-200); border-radius: 4px; flex: 0 0 auto;
}
.filtro-marcas .ativo .caixa { background: var(--azul-700); border-color: var(--azul-700); position: relative; }
.filtro-marcas .ativo .caixa::after {
	content: ""; position: absolute; inset: 2px 3px; border: 2px solid #fff; border-top: 0; border-right: 0;
	transform: rotate(-45deg);
}
.filtro-preco { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtro-preco label { display: flex; flex-direction: column; font-size: .75rem; color: var(--cinza-500); gap: 4px; }
.filtro-preco input {
	border: 1.5px solid var(--cinza-200); border-radius: 8px; padding: 8px 10px; width: 100%; font-size: .88rem;
}
.filtro-preco button { grid-column: 1 / -1; }
.filtro-limpar { display: block; text-align: center; font-size: .85rem; font-weight: 700; color: var(--vermelho-500); }
.filtro-ajuda { background: var(--azul-050); border-radius: var(--raio-g); padding: 16px 18px; font-size: .86rem; }
.filtro-ajuda strong { display: block; margin-bottom: 4px; color: var(--azul-900); }
.filtro-ajuda p { color: var(--cinza-700); margin-bottom: 10px; }
.filtro-ajuda .botao { width: 100%; }

.catalogo-barra {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra);
	padding: 12px 16px; margin-bottom: 16px;
}
.catalogo-total { font-size: .88rem; color: var(--cinza-500); font-weight: 600; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select {
	border: 1.5px solid var(--cinza-200); border-radius: 8px; padding: 8px 12px; background: #fff; font-size: .88rem;
}
.catalogo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--azul-100); color: var(--azul-800); border-radius: 999px;
	padding: 5px 12px; font-size: .82rem; font-weight: 600;
}
.chip:hover { background: var(--vermelho-050); color: var(--vermelho-500); }

.grade-produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.vazio { background: #fff; border-radius: var(--raio-g); padding: 48px 32px; text-align: center; box-shadow: var(--sombra); }
.vazio p { color: var(--cinza-500); max-width: 60ch; margin-inline: auto; }

/* ---------------------------------------------------------- card produto */

.card {
	background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra);
	display: flex; flex-direction: column; overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra-m); }
.card-imagem { position: relative; display: block; background: #fff; aspect-ratio: 1 / 1; }
.card-imagem img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.card-esgotado .card-imagem img { opacity: .55; }
.card-corpo { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-marca { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-400); font-weight: 700; }
.card-nome { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.35; min-height: 2.6em; }
.card-nome a { color: var(--cinza-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-nome a:hover { color: var(--azul-700); }
.card-precos { margin-top: auto; display: flex; flex-direction: column; gap: 1px; }
.card-de { font-size: .8rem; color: var(--cinza-400); text-decoration: line-through; }
.card-por { font-size: 1.28rem; font-weight: 800; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.card-parcela { font-size: .78rem; color: var(--cinza-500); }
.card-pix { font-size: .78rem; color: var(--verde-600); font-weight: 700; }
.card .botao, .card .button { margin-top: 10px; width: 100%; }
.card .added_to_cart { display: none; }

/* ------------------------------------------------------------- produto */

.pagina-produto .product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 34px; align-items: start; }
.pagina-produto .woocommerce-product-gallery {
	background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 18px; width: 100% !important; float: none !important; margin: 0 !important;
}
.pagina-produto .woocommerce-product-gallery img { border-radius: var(--raio); }
/* Foto de produto e quadrada e grande; sem teto ela empurra o resto da pagina
   para baixo em telas medias. */
.pagina-produto .woocommerce-product-gallery__image img { max-height: 560px; width: 100%; object-fit: contain; }
.pagina-produto .summary {
	background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 24px 26px; width: 100% !important; float: none !important; margin: 0 !important;
}
.pagina-produto .product_title { font-size: 1.55rem; margin-bottom: 8px; }

.pdp-ident { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; font-size: .8rem; color: var(--cinza-500); }
.pdp-marca { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--azul-700); }

.pagina-produto .price { display: block; margin: 0 0 4px; font-size: 1.9rem; font-weight: 800; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.pagina-produto .price del { font-size: .95rem; font-weight: 500; color: var(--cinza-400); margin-right: 8px; }
.pagina-produto .price ins { text-decoration: none; }

.pdp-condicoes { margin: 0 0 16px; padding: 12px 14px; background: var(--verde-050); border-radius: var(--raio); }
.pdp-pix { margin: 0; font-size: .95rem; color: var(--verde-600); }
.pdp-pix strong { font-size: 1.2rem; }
.pdp-pix span { color: var(--cinza-500); font-size: .84rem; }
.pdp-parcela { margin: 2px 0 0; font-size: .86rem; color: var(--cinza-700); }

.pagina-produto .woocommerce-product-details__short-description { color: var(--cinza-700); font-size: .93rem; border-top: 1px solid var(--cinza-100); padding-top: 14px; }

.pagina-produto form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 8px; }
.pagina-produto form.cart .quantity { display: flex; align-items: center; border: 1.5px solid var(--cinza-200); border-radius: var(--raio); overflow: hidden; }
.pagina-produto form.cart .quantity input { width: 62px; border: 0; text-align: center; padding: 12px 4px; font-weight: 700; }
.pagina-produto form.cart .single_add_to_cart_button { flex: 1; min-width: 220px; padding: 15px 24px; font-size: 1rem; }
.pagina-produto form.cart .variations { width: 100%; }
.pagina-produto .variations th { text-align: left; padding: 6px 12px 6px 0; font-size: .85rem; color: var(--cinza-500); }
.pagina-produto .variations select { border: 1.5px solid var(--cinza-200); border-radius: 8px; padding: 9px 12px; background: #fff; min-width: 160px; }
.pagina-produto .woocommerce-variation-price { margin-bottom: 10px; }
.pagina-produto .stock { font-size: .85rem; font-weight: 700; }
.pagina-produto .stock.in-stock { color: var(--verde-600); }
.pagina-produto .stock.out-of-stock { color: var(--vermelho-500); }

.pdp-frete { border-top: 1px solid var(--cinza-100); margin-top: 18px; padding-top: 16px; }
.pdp-frete h3 { font-size: .95rem; margin-bottom: 10px; }
.pdp-frete-form { display: flex; gap: 8px; }
.pdp-frete-form input {
	flex: 1; border: 1.5px solid var(--cinza-200); border-radius: var(--raio); padding: 11px 14px; font-size: .92rem;
}
.pdp-frete-ajuda { margin: 6px 0 0; font-size: .78rem; }
.pdp-frete-resultado { margin-top: 12px; background: var(--cinza-050); border-radius: var(--raio); padding: 12px 14px; font-size: .88rem; }
.pdp-frete-resultado table { width: 100%; border-collapse: collapse; }
.pdp-frete-resultado td { padding: 5px 0; }
.pdp-frete-resultado td:last-child { text-align: right; font-weight: 700; color: var(--azul-900); }
.pdp-frete-regiao { margin: 0 0 6px; color: var(--cinza-500); font-size: .8rem; }
.pdp-frete-erro { color: var(--vermelho-500); font-weight: 600; }

.pdp-selos { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--cinza-100); display: grid; gap: 8px; }
.pdp-selos li { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--cinza-700); }
.pdp-selos svg { color: var(--azul-700); flex: 0 0 auto; }

.pagina-produto .woocommerce-tabs {
	grid-column: 1 / -1; background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 8px 26px 26px; margin-top: 8px;
}
.pagina-produto .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 6px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--cinza-100); }
.pagina-produto .woocommerce-tabs ul.tabs li { margin: 0; }
.pagina-produto .woocommerce-tabs ul.tabs a { display: block; padding: 14px 16px; font-weight: 700; color: var(--cinza-500); border-bottom: 3px solid transparent; }
.pagina-produto .woocommerce-tabs ul.tabs li.active a { color: var(--azul-900); border-color: var(--laranja-500); }
.pagina-produto .woocommerce-tabs .panel h2 { font-size: 1.1rem; }
.pagina-produto .shop_attributes { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pagina-produto .shop_attributes th, .pagina-produto .shop_attributes td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cinza-100); }
.pagina-produto .shop_attributes th { width: 220px; color: var(--cinza-500); font-weight: 600; }
.pagina-produto .shop_attributes p { margin: 0; }

.related.products, .up-sells { grid-column: 1 / -1; margin-top: 10px; }
.related.products > h2, .up-sells > h2 { font-size: 1.3rem; margin-bottom: 16px; }
.related.products ul.products, .up-sells ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.related.products ul.products li, .up-sells ul.products li { margin: 0; width: auto; float: none; }

/* ------------------------------------------------- carrinho e checkout */

.woocommerce-cart .conteudo, .woocommerce-checkout .conteudo, .woocommerce-account .conteudo { padding-top: 4px; }
.woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout .col2-set, .woocommerce-checkout-review-order,
.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-order, .woocommerce-form-login, .woocommerce-form-register, .woocommerce .checkout_coupon {
	background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 22px 24px;
}
.woocommerce-cart-form { margin-bottom: 20px; }
.woocommerce table.shop_table { border: 0; border-collapse: collapse; width: 100%; border-radius: 0; }
.woocommerce table.shop_table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-500); padding: 10px 8px; border-bottom: 1px solid var(--cinza-100); }
.woocommerce table.shop_table td { padding: 14px 8px; border-top: 1px solid var(--cinza-100); }
.woocommerce table.cart img { width: 64px; border-radius: 8px; }
.woocommerce .quantity input.qty { border: 1.5px solid var(--cinza-200); border-radius: 8px; padding: 8px; width: 66px; text-align: center; }
.woocommerce a.remove { color: var(--vermelho-500) !important; font-size: 1.4rem; }
.woocommerce a.remove:hover { background: var(--vermelho-500); color: #fff !important; }

.barra-frete { background: var(--azul-050); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; }
.barra-frete.ok { background: var(--verde-050); color: var(--verde-600); font-weight: 700; }
.barra-frete-trilho { display: block; height: 6px; border-radius: 999px; background: var(--cinza-200); margin-top: 8px; overflow: hidden; }
.barra-frete-cheio { display: block; height: 100%; background: var(--laranja-500); }

.cart_totals h2, .cross-sells h2, .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-size: 1.15rem; }
.woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th { border-top: 1px solid var(--cinza-100); }
.woocommerce .cart_totals .order-total .amount { font-size: 1.3rem; color: var(--azul-900); }
.wc-proceed-to-checkout .button { width: 100%; padding: 15px; font-size: 1rem; }

.woocommerce form .form-row { margin-bottom: 14px; padding: 0; }
.woocommerce form .form-row label { font-size: .85rem; font-weight: 600; color: var(--cinza-700); margin-bottom: 4px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1.5px solid var(--cinza-200) !important; border-radius: var(--raio) !important;
	padding: 11px 13px !important; height: auto !important; width: 100%; background: #fff; font-size: .93rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 10px !important; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--vermelho-500) !important; }
.woocommerce-checkout #payment { background: var(--cinza-050); border-radius: var(--raio-g); padding: 16px; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--raio); font-size: .88rem; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce #payment #place_order { width: 100%; padding: 16px; font-size: 1.05rem; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	border-top: 0; border-left: 4px solid var(--azul-700); background: #fff;
	border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 18px 14px 20px; margin-bottom: 18px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message { border-left-color: var(--verde-600); }
.woocommerce-error { border-left-color: var(--vermelho-500); list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { margin: 0; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--cinza-700); font-weight: 600; font-size: .9rem; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--azul-050); color: var(--azul-700); }
/* So quem esta logado ve o menu lateral da conta. Deslogado a pagina traz
   login e cadastro lado a lado, e o grid de 240px esmagava as duas colunas.
   O WordPress nao adiciona classe 'logged-out', entao a regra tem que ser
   ancorada em 'logged-in'. */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
/* Os avisos do WooCommerce sao irmaos do menu e do conteudo: sem isso eles
   entram numa das colunas e ficam espremidos. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account.logged-in .woocommerce > .woocommerce-message,
.woocommerce-account.logged-in .woocommerce > .woocommerce-info,
.woocommerce-account.logged-in .woocommerce > .woocommerce-error { grid-column: 1 / -1; }
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { width: 100%; margin: 0; }
/* Login e cadastro lado a lado, cada um no seu cartao. */
.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.woocommerce-account .u-columns .col-1, .woocommerce-account .u-columns .col-2 { width: 100%; float: none; }
.woocommerce-account .u-columns h2 { font-size: 1.15rem; margin-bottom: 12px; }
.u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	/* A primeira linha tem so a altura do titulo "Seu pedido"; sem isso ela
	   divide a altura com a coluna do formulario e abre um vao enorme antes
	   do resumo. */
	grid-template-rows: auto 1fr;
	gap: 8px 20px;
	align-items: start;
}
/* As linhas sao explicitas de proposito. Sem isso o grid empilha cada bloco em
   uma linha nova e o resumo do pedido desce para o fim da pagina, longe do
   formulario. */
.woocommerce-checkout form.checkout .col2-set { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 4px; }
.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; }
/* Avisos e o campo de cupom ocupam a largura toda, acima das duas colunas. */
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper,
.woocommerce-checkout form.checkout > .woocommerce-form-login,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon { grid-column: 1 / -1; }

/* --------------------------------------------------------------- paginas */

.pagina { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 32px 36px; max-width: 900px; }
.pagina-titulo { font-size: 1.7rem; }
.pagina-meta { color: var(--cinza-500); font-size: .85rem; }
.texto { color: var(--cinza-700); }
.texto h2 { font-size: 1.2rem; margin-top: 1.6em; }
.texto h3 { font-size: 1.02rem; margin-top: 1.4em; }
.texto ul, .texto ol { padding-left: 20px; }
.texto li { margin-bottom: 6px; }
.texto table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.texto th, .texto td { text-align: left; padding: 10px; border-bottom: 1px solid var(--cinza-100); }

.erro-404 { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 56px 32px; text-align: center; margin-top: 24px; }
.erro-numero { display: block; font-size: 4rem; font-weight: 800; color: var(--azul-100); line-height: 1; }
.busca-404 { max-width: 420px; margin: 18px auto; border: 1.5px solid var(--cinza-200); }
.busca-404 button { padding: 0 18px; }

.lista-posts { display: grid; gap: 14px; }
.post-resumo { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 20px 24px; }
.post-resumo h2 { font-size: 1.15rem; margin-bottom: 6px; }

.woocommerce-pagination ul, .navigation.pagination .nav-links { display: flex; gap: 6px; list-style: none; margin: 24px 0 0; padding: 0; justify-content: center; flex-wrap: wrap; }
.woocommerce-pagination a, .woocommerce-pagination span, .nav-links .page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	background: #fff; border-radius: 8px; box-shadow: var(--sombra); color: var(--cinza-700); font-weight: 700; font-size: .9rem;
}
.woocommerce-pagination .current, .nav-links .page-numbers.current { background: var(--azul-700); color: #fff; }
.navigation.pagination { display: flex; justify-content: center; }

/* --------------------------------------------------------------- rodape */

.rodape { background: var(--azul-900); color: #b9cdf0; margin-top: 40px; }
.rodape-vantagens { background: var(--azul-800); }
.rodape-vantagens-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 0; }
.vantagem { display: flex; align-items: center; gap: 12px; color: #cfe0f8; }
.vantagem svg { color: var(--amarelo-400); flex: 0 0 auto; }
.vantagem strong { display: block; color: #fff; font-size: .92rem; }
.vantagem span { font-size: .8rem; }

.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; gap: 28px; padding: 40px 0 32px; }
.rodape-coluna h3 { color: #fff; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.rodape-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rodape-coluna a { color: #b9cdf0; font-size: .87rem; }
.rodape-coluna a:hover { color: #fff; }
.rodape-logo { display: block; color: #fff; font-size: 1.25rem; margin-bottom: 10px; }
.rodape-marca p { font-size: .87rem; max-width: 40ch; }
.rodape-social { display: flex; gap: 10px; margin-top: 12px; }
.rodape-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: #fff; }
.rodape-social a:hover { background: var(--laranja-500); }
.rodape-contato li { font-size: .87rem; }

.rodape-legal { border-top: 1px solid rgba(255, 255, 255, .12); }
.rodape-legal-linha { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; font-size: .78rem; color: #8fa9d6; }
.rodape-legal p { margin: 0; }

.whats-flutuante {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--verde-600); color: #fff;
	display: grid; place-items: center; box-shadow: var(--sombra-g);
}
.whats-flutuante:hover { background: #256b28; color: #fff; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 1120px) {
	.grade-produtos, .related.products ul.products { grid-template-columns: repeat(3, 1fr); }
	.grade-departamentos-lista { grid-template-columns: repeat(4, 1fr); }
	.painel-grade { grid-template-columns: repeat(4, 1fr); }
	.rodape-grade { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 980px) {
	.topo-home-grade { grid-template-columns: 1fr; }
	.lateral-departamentos { display: none; }
	.catalogo { grid-template-columns: 1fr; }
	.catalogo-lateral { grid-template-columns: 1fr 1fr; display: grid; }
	.filtro-ajuda { display: none; }
	.pagina-produto .product { grid-template-columns: 1fr; }
	/* Em coluna unica as linhas fixas do checkout precisam ser desfeitas,
	   senao o resumo do pedido cai por cima do formulario. */
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-rows: none; }
	.woocommerce-checkout form.checkout .col2-set,
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; }
	.woocommerce-checkout #order_review { position: static; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.faixa-institucional { grid-template-columns: 1fr; }
	.rodape-vantagens-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.barra-departamentos { display: none; }
	.botao-menu { display: flex; }
	.barra-principal-linha { flex-wrap: wrap; gap: 12px; }
	.busca { order: 3; flex-basis: 100%; max-width: none; }
	.logo { flex: 1; }
	.acao-texto { display: none; }
	/* No celular a faixa de avisos rola na horizontal em vez de virar tres
	   linhas empilhadas. */
	.avisos-linha { justify-content: flex-start; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; gap: 16px; scrollbar-width: none; }
	.avisos-linha::-webkit-scrollbar { display: none; }
	.grade-produtos, .related.products ul.products { grid-template-columns: repeat(2, 1fr); }
	.grade-departamentos-lista { grid-template-columns: repeat(3, 1fr); }
	.u-columns.col2-set { grid-template-columns: 1fr; }
	.bloco-ajuda { flex-direction: column; align-items: flex-start; }
	.pagina { padding: 24px 20px; }
}

@media (max-width: 560px) {
	body { font-size: 14px; }
	.banner-principal { padding: 26px 22px; min-height: 220px; }
	.banners-menores { grid-template-columns: 1fr; }
	.grade-departamentos-lista { grid-template-columns: repeat(2, 1fr); }
	.catalogo-lateral { grid-template-columns: 1fr; }
	.rodape-grade { grid-template-columns: 1fr 1fr; }
	.rodape-vantagens-grade { grid-template-columns: 1fr; }
	.vitrine-trilho { grid-auto-columns: minmax(170px, 1fr); }
	.pagina-produto .summary { padding: 18px; }
	.catalogo-barra { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* -------------------------------------------- carrinho classico */

/* O carrinho do WooCommerce vem em duas partes empilhadas: a tabela e os
   totais. Aqui viram duas colunas, com o resumo acompanhando a rolagem. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
	gap: 20px;
	align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info,
.woocommerce-cart .woocommerce > .woocommerce-error { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; max-width: none; margin: 0; width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; position: sticky; top: 16px; }
.woocommerce-cart .cart-collaterals .cross-sells { width: 100%; float: none; }

.woocommerce-cart table.cart { table-layout: auto; }
.woocommerce-cart table.cart th { font-size: .74rem; }
.woocommerce-cart table.cart td { vertical-align: middle; }

/* Colunas: a lixeira e estreita, a foto tem tamanho fixo e o resto e do nome. */
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove { width: 34px; padding-left: 0; padding-right: 0; }
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail { width: 88px; }
.woocommerce-cart table.cart img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: var(--cinza-050); }
.woocommerce-cart table.cart td.product-name { font-weight: 600; }
.woocommerce-cart table.cart td.product-name a { color: var(--cinza-900); }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--azul-700); }
.woocommerce-cart table.cart td.product-name .variation { font-weight: 500; font-size: .8rem; color: var(--cinza-500); margin: 4px 0 0; }
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce-cart table.cart td.product-subtotal { font-weight: 700; color: var(--azul-900); }
.woocommerce-cart table.cart td.product-quantity .quantity input.qty { width: 74px; padding: 9px 6px; }

.woocommerce-cart a.remove {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	font-size: 1.1rem !important; line-height: 1; color: var(--cinza-400) !important;
	background: var(--cinza-050);
}
.woocommerce-cart a.remove:hover { background: var(--vermelho-500); color: #fff !important; }

/* Cupom e "atualizar" na mesma linha, sem quebrar o texto do botao. */
.woocommerce-cart .actions {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; padding-top: 16px !important;
}
.woocommerce-cart .actions .coupon { display: flex; gap: 8px; float: none; align-items: center; }
.woocommerce-cart .actions .coupon input[type="text"] {
	border: 1.5px solid var(--cinza-200); border-radius: var(--raio);
	padding: 11px 14px; width: 220px; min-width: 180px; font-size: .9rem;
}
.woocommerce-cart .actions .coupon .button { white-space: nowrap; }
.woocommerce-cart .actions .button[name="update_cart"] {
	margin: 0; background: var(--branco); color: var(--azul-700); border: 1.5px solid var(--cinza-200); white-space: nowrap;
}
.woocommerce-cart .actions .button[name="update_cart"]:hover:not(:disabled) { background: var(--azul-050); }

.woocommerce-cart .cart_totals h2 { font-size: 1.1rem; margin-bottom: 12px; }
.woocommerce-cart .cart_totals table.shop_table th { width: 40%; vertical-align: top; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { border-top: 2px solid var(--cinza-100); padding-top: 14px; }
.woocommerce-cart .cart_totals .order-total .amount { font-size: 1.35rem; color: var(--azul-900); }
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 16px !important; }
.woocommerce-cart .wc-proceed-to-checkout .button { width: 100%; padding: 15px; font-size: 1rem; }
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.woocommerce ul#shipping_method li { display: flex; align-items: baseline; gap: 8px; }
.woocommerce ul#shipping_method .amount { font-weight: 700; }
.woocommerce .shipping-calculator-button { font-weight: 700; font-size: .85rem; }
.woocommerce .shipping-calculator-form { margin-top: 10px; }

/* Carrinho vazio: o Woo nao usa a tabela, entao a grade de duas colunas some. */
.woocommerce-cart .cart-empty ~ *, .woocommerce-cart .cart-empty { grid-column: 1 / -1; }

@media (max-width: 980px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1; }
	.woocommerce-cart .cart-collaterals .cart_totals { position: static; }
}

@media (max-width: 768px) {
	/* Abaixo de 768px o proprio WooCommerce empilha a tabela e coloca o rotulo
	   de cada celula via data-title. Em vez de brigar com isso, o tema so
	   alinha: rotulo a esquerda, valor a direita. */
	.woocommerce-cart table.cart tr.cart_item { display: block; padding: 16px 0; border-top: 1px solid var(--cinza-100); }
	.woocommerce-cart table.cart tr.cart_item td {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		border: 0; padding: 5px 0; text-align: right !important;
	}
	.woocommerce-cart table.cart tr.cart_item td::before {
		content: attr(data-title) ": ";
		font-weight: 600; color: var(--cinza-500); font-size: .82rem; text-align: left;
	}
	.woocommerce-cart table.cart td.product-thumbnail { justify-content: flex-start; }
	.woocommerce-cart table.cart td.product-thumbnail::before { display: none; }
	.woocommerce-cart table.cart td.product-thumbnail img { width: 84px; height: 84px; }
	.woocommerce-cart table.cart td.product-remove { justify-content: flex-end; padding-bottom: 0; }
	.woocommerce-cart table.cart td.product-remove::before { display: none; }
	.woocommerce-cart table.cart td.product-name { font-size: 1rem; }
	.woocommerce-cart table.cart td.product-quantity .quantity input.qty { width: 84px; }
	.woocommerce-cart .actions .coupon { width: 100%; }
	.woocommerce-cart .actions .coupon input[type="text"] { flex: 1; width: auto; min-width: 0; }
	.woocommerce-cart .actions .button[name="update_cart"] { width: 100%; }
}

@media (max-width: 700px) {
	/* Login e cadastro empilham: lado a lado em 390px nao cabe. */
	.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* ------------------------------------------- ajustes do checkout classico */

/* O WooCommerce ainda posiciona os campos com float e porcentagem. Aqui o
   formulario vira grid: nome e sobrenome lado a lado, o resto em largura toda. */
.woocommerce form .form-row-wide,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { float: none; width: 100%; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.woocommerce form .form-row-wide,
.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-shipping-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last { grid-column: 2; }
.woocommerce form .form-row abbr.required { color: var(--vermelho-500); text-decoration: none; }
.woocommerce .woocommerce-billing-fields, .woocommerce .woocommerce-shipping-fields { width: 100%; }
.woocommerce-checkout .woocommerce-form-login-toggle, .woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 12px; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { display: block; }
.woocommerce-checkout #order_review { position: sticky; top: 16px; }
.woocommerce-checkout .shop_table .product-name { font-size: .9rem; }
.woocommerce-checkout .order-total .amount { font-size: 1.25rem; color: var(--azul-900); }
.woocommerce form.checkout_coupon { margin-bottom: 16px; }
.woocommerce-privacy-policy-text { font-size: .8rem; color: var(--cinza-500); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; }

@media (max-width: 700px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { grid-column: 1; }
}

/* O checkout do Woo divide cobranca e entrega em duas colunas de 48% com
   float. Aqui elas empilham, porque a segunda coluna do nosso layout ja e o
   resumo do pedido. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-checkout #customer_details { width: 100%; }
.woocommerce-checkout .col2-set .col-2 { margin-top: 8px; }

/* O WooCommerce da 30% de largura ao menu da conta. Dentro do nosso grid isso
   vira 30% de 240px, ou seja, 72px. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

/* ----------------------------------- listas de produto por shortcode */

/* [products] e os relacionados usam ul.products, que o Woo estiliza com float
   e porcentagem. Aqui vira a mesma grade do catalogo. */
.woocommerce ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}
.woocommerce ul.products li.product .card { height: 100%; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 14px; }

@media (max-width: 1120px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
.card-apartir { display: block; font-size: .72rem; font-weight: 500; color: var(--cinza-500); }

/* -------------------------------------------------- carrossel da vitrine */

.vitrine-carrossel { position: relative; }

/* A barra de rolagem sai de cena: quem manda sao as setas e o autoplay. O
   trilho continua rolavel no dedo e no trackpad. */
.vitrine-trilho { scrollbar-width: none; scroll-behavior: smooth; }
.vitrine-trilho::-webkit-scrollbar { display: none; }

.vitrine-seta {
	position: absolute; top: 50%; z-index: 5;
	width: 44px; height: 44px; border-radius: 50%;
	transform: translateY(-50%);
	display: grid; place-items: center;
	background: var(--branco); color: var(--azul-700);
	border: 1px solid var(--cinza-200); box-shadow: var(--sombra-m);
	cursor: pointer; padding: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease, visibility .18s, background .18s ease, color .18s ease;
}
.vitrine-seta-anterior { left: -14px; }
.vitrine-seta-proxima { right: -14px; }

.vitrine-carrossel:hover .vitrine-seta,
.vitrine-carrossel:focus-within .vitrine-seta { opacity: 1; visibility: visible; }

.vitrine-seta:hover { background: var(--azul-700); color: #fff; border-color: var(--azul-700); }
.vitrine-seta:focus-visible { opacity: 1; visibility: visible; }

/* Chegou na ponta: a seta some em vez de ficar clicavel sem efeito. */
.vitrine-seta[disabled] { opacity: 0 !important; visibility: hidden !important; }

@media (max-width: 860px) {
	/* No celular ninguem passa o mouse: as setas somem e fica o gesto. */
	.vitrine-seta { display: none; }
	.vitrine-trilho { scroll-snap-type: x mandatory; }
}

@media (prefers-reduced-motion: reduce) {
	.vitrine-trilho { scroll-behavior: auto; }
}

/* --------------------------------- clearfix do Woo x layout em grid */

/* O WooCommerce usa ::before/::after com `display: table` para limpar float.
   Em um container que virou grid, esses pseudo-elementos contam como itens e
   empurram o conteudo para a celula errada - foi o que jogava o "Cadastre-se"
   para baixo do "Entrar" e desalinhava o checkout. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce .u-columns::before,
.woocommerce .u-columns::after,
.woocommerce-cart .woocommerce::before,
.woocommerce-cart .woocommerce::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce-billing-fields__field-wrapper::before,
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::before,
.woocommerce-shipping-fields__field-wrapper::after { display: none !important; }

/* ------------------------------------- filtros do catalogo no celular */

.botao-filtros { display: none; }

@media (max-width: 980px) {
	/* A lateral inteira ocupava a primeira tela no celular e empurrava os
	   produtos para baixo. Agora ela abre por um botao. */
	.botao-filtros {
		display: flex; width: 100%; justify-content: center; gap: 8px;
		margin-bottom: 14px;
	}
	.catalogo-lateral { display: none; }
	.catalogo-lateral.aberta { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
}

@media (max-width: 560px) {
	.catalogo-lateral.aberta { grid-template-columns: 1fr; }
}

/* ===================================================== marca Tem No Mix (18/09/2026) */

/* A logo e azul-marinho e laranja sobre branco: a barra principal ficou branca para
   ela aparecer como foi desenhada. A faixa de avisos e a de departamentos seguem azuis. */
.barra-principal { background: var(--branco); border-bottom: 1px solid var(--cinza-100); padding: 10px 0; }
.botao-menu span { background: var(--azul-900); }
.logo img { display: block; height: 58px; max-height: none; width: auto; }
.busca { border: 1.5px solid var(--cinza-200); }
.busca:focus-within { border-color: var(--azul-600); box-shadow: 0 0 0 3px var(--azul-100); }
.acao { color: var(--azul-900); }
.acao:hover { color: var(--laranja-500); }
.acao-texto small { color: var(--cinza-500); }

.rodape-logo { display: inline-block; background: var(--branco); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; }
.rodape-logo img { display: block; height: 44px; width: auto; }

/* produto sem preco: "Preco sob consulta" + WhatsApp */
.card-sem-preco { min-height: 0; }
.card-consulta { font-size: .95rem; font-weight: 700; color: var(--azul-900); }
.botao-consultar { background: var(--verde-600); }
.botao-consultar:hover { background: #256a29; color: #fff; }
.pdp-consulta { background: var(--azul-050); border: 1px solid var(--azul-100); border-radius: var(--raio); padding: 18px 20px; margin: 16px 0; }
.pdp-consulta-titulo { font-size: 1.25rem; font-weight: 800; color: var(--azul-900); margin: 0 0 4px; }
.pdp-consulta p { margin: 0 0 14px; color: var(--cinza-700); }
.pdp-consulta .botao { width: 100%; justify-content: center; background: var(--verde-600); }
.pdp-consulta .botao:hover { background: #256a29; }

/* tabela nutricional dos doces */
.tabela-nutricional { width: 100%; max-width: 560px; border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.tabela-nutricional th, .tabela-nutricional td { border: 1px solid var(--cinza-200); padding: 7px 10px; text-align: left; }
.tabela-nutricional thead th { background: var(--cinza-050); }

/* banners da home com foto de produto */
.banner-foto { position: absolute; right: 4%; bottom: 0; height: 92%; width: auto; max-width: 46%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25)); pointer-events: none; }
.banner-menor { position: relative; overflow: hidden; }
.banner-menor .banner-foto { height: 110%; bottom: -6%; right: 2%; max-width: 40%; }
.banner-menor strong, .banner-menor span { position: relative; z-index: 1; max-width: 60%; }

@media (max-width: 900px) {
	.logo img { height: 44px; }
	.banner-foto { opacity: .9; max-width: 40%; height: 70%; }
}
@media (max-width: 560px) {
	.logo img { height: 38px; }
	.banner-principal .banner-foto { display: none; }
}

/* lateral com subcategorias abertas (poucos departamentos) */
.lateral-subs-abertas { list-style: none; margin: -2px 0 6px; padding: 0 18px 0 48px; display: grid; gap: 1px; }
.lateral-subs-abertas a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .84rem; color: var(--cinza-500); }
.lateral-subs-abertas a:hover { color: var(--laranja-500); }
.lateral-subs-abertas small { color: var(--cinza-400); font-size: .75rem; }
.lateral-item + .lateral-item { border-top: 1px solid var(--cinza-100); }

/* atalhos por subcategoria, com foto de produto */
.atalhos-trilho { justify-content: flex-start; }
.atalho-foto { flex: 1 0 128px; width: auto; max-width: 180px; }
.atalho-imagem { display: block; width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--cinza-100); }
.atalho-imagem img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.atalho-imagem .ico { margin: 28px; color: var(--azul-700); }
/* poucos departamentos: os cartoes dividem a largura em vez de ficarem encostados a esquerda */
.grade-departamentos-lista { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }