/* 710 GVNG — o sistema visual v5 aplicado ao WordPress.
   Tokens, ritmo e componentes vêm do protótipo aprovado (prototype-v5/design).
   Ordem: tokens · base · utilidades · cromo · hero · loja · produto ·
   carrinho · checkout · conta · rastreio · lookbook · rodapé · responsivo. */

/* ===================================================================== fontes */
@font-face {
	font-family: "Archivo SG";
	src: url(../fonts/Archivo-VF-latin.woff2) format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo SG";
	src: url(../fonts/Archivo-VF-latin-ext.woff2) format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo SG";
	src: url(../fonts/Archivo-VF-arrows.woff2) format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+2192;
}
@font-face {
	font-family: "Archivo SG";
	src: url(../fonts/SG-Check.ttf) format("truetype");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+2713;
}

/* ===================================================================== tokens */
:root {
	--white: #FFFFFF;
	--well: #F2F2F2;
	--chip: #E4E4E4;
	--line: #D6D6D6;
	--dim: #ABABAB;
	--grey: #767676;
	--grey-strong: #5E5E5E;
	--ink: #0B0B0B;
	--black: #000000;
	--pill-dim: #A3A3A3;
	--blood: #BA2230;
	--blood-lit: #D0293B;
	--signal: #E23145;
	--plate-dark: #0B0B0B;
	--glass-tint: rgba(12, 12, 12, .58);
	--glass-lift: rgba(255, 255, 255, .08);
	--glass-chip: rgba(255, 255, 255, .16);
	--glass-rule: rgba(255, 255, 255, .30);
	--shadow-float: 0 5px 10px rgba(0, 0, 0, .10);
	--hero-grad-l: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 70%, rgba(0,0,0,.40) 100%);
	--hero-grad-b: linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,0) 100%);

	--e-standard: cubic-bezier(.4, 0, .2, 1);
	--e-inout: cubic-bezier(.65, 0, .35, 1);
	--e-panel: cubic-bezier(.25, .1, .35, 1);
	--e-out: cubic-bezier(0, 0, .2, 1);
	--e-settle: cubic-bezier(.22, 1, .36, 1);
	--e-drum: cubic-bezier(.16, 1, .3, 1);
	--e-nudge: cubic-bezier(.34, 1.56, .64, 1);

	--font: "Archivo SG", "Archivo", "Arial Narrow", Arial, sans-serif;
	--top: 144px;   /* espaço reservado pela pílula (60px) + respiro */
	--pad: 20px;    /* respiro lateral */
}

/* ===================================================================== base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #fff; color-scheme: light; -webkit-text-size-adjust: 100%; }

body.sg {
	background: #fff;
	color: var(--ink);
	font-family: var(--font);
	font-stretch: 75%;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	font-kerning: normal;
	overflow-x: hidden;
}

body.sg * { line-height: 1; text-box: trim-both cap alphabetic; -webkit-tap-highlight-color: transparent; }

/* O corte na altura das maiúsculas é para TEXTO. Num elemento que só
   segura outros (li, div, span de campo), ele achata a caixa e o filho
   escapa — foi o que desalinhava chips, listas e formulários. */
body.sg ul, body.sg ol, body.sg li, body.sg div, body.sg nav, body.sg main, body.sg section,
body.sg header, body.sg footer, body.sg article, body.sg aside, body.sg form, body.sg fieldset,
body.sg table, body.sg thead, body.sg tbody, body.sg tfoot, body.sg tr, body.sg picture,
body.sg figure, body.sg .woocommerce-input-wrapper, body.sg .woocommerce, body.sg .password-input,
body.sg label.field, body.sg .check { text-box: normal; }
body.sg .woocommerce-input-wrapper { display: block; }

button, input, select, textarea { font: inherit; color: inherit; text-transform: inherit; background: none; border: 0; border-radius: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, video, canvas, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--blood); color: #fff; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.glass :focus-visible, .pill :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,0,0,.55); }
.pill :focus-visible { outline-offset: -8px; }

.skip {
	position: fixed; z-index: 400; top: 8px; left: 50%; transform: translate(-50%, -140%);
	padding: 12px 18px; background: #000; color: #fff; font-size: 12px; border-radius: 999px;
	transition: transform 200ms var(--e-out);
}
.skip:focus { transform: translate(-50%, 0); }

.main { min-height: 60vh; }

/* ===================================================================== utilidades */
/* Esconder de verdade: um input com .vh herdava width:100% e esticava a
   página para o lado (a regra de campo tem especificidade maior). */
.vh, input.vh, .screen-reader-text, .woocommerce .screen-reader-text {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; border: 0 !important; overflow: hidden !important;
	clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
.t10 { font-size: 10px; }
.t12 { font-size: 12px; }
.t16 { font-size: 16px; }
.t24 { font-size: 24px; }
.t45 { font-size: 45px; line-height: 45px; }
.g { color: var(--grey); }
.eyebrow { display: block; font-size: 10px; }
.num, .count, .price, .step b, .mstep b { font-variant-numeric: tabular-nums; }
.dot { display: inline-block; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 0 6px; }
.caret { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent currentColor; margin-left: 6px; }
.caret--l { border-width: 4px 5px 4px 0; border-color: transparent currentColor transparent transparent; margin: 0 6px 0 0; }
.ck { display: inline-block; width: .72em; height: .6em; margin-left: .28em; vertical-align: baseline; overflow: visible; }
.sale, .tag { color: var(--blood); }
.body {
	font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none;
}
/* o reset acima zera a entrelinha de tudo; o texto corrido precisa dela de volta */
body.sg .body, body.sg .body *, body.sg .prose__body, body.sg .prose__body *,
body.sg .account__content p, body.sg .account__content p *, body.sg .nl-msg, body.sg .nl-check span:last-child,
body.sg .woocommerce-Address address, body.sg .wc_payment_method .payment_box,
body.sg .woocommerce-terms-and-conditions-wrapper, body.sg .login__note, body.sg .sg-toast { text-box: none; line-height: 1.45; }
body.sg .body, body.sg .body * { line-height: 20px; }
.body a { text-decoration: underline; text-underline-offset: 2px; }
.body strong, .body b { font-weight: 700; }
.roll { display: grid; }
.roll > span { grid-area: 1 / 1; }
.roll > .ghost { visibility: hidden; }

/* vidro (§C.7) */
.glass {
	color: #fff; border-radius: 30px;
	background: linear-gradient(var(--glass-lift), var(--glass-lift)), var(--glass-tint);
	-webkit-backdrop-filter: blur(50px) saturate(1.15); backdrop-filter: blur(50px) saturate(1.15);
}

/* botões (§B S13) */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
	height: 41px; padding: 0 15px; font-size: 16px; white-space: nowrap; border-radius: 0; isolation: isolate;
	color: inherit;
}
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none;
	transition: opacity 500ms var(--e-standard);
}
.btn:not([disabled]):not([aria-disabled="true"]):hover::before { opacity: .5; }
.btn--black { background: var(--black); color: #fff; }
.btn--black::before { background: var(--grey); }
.btn--white { background: #fff; color: var(--ink); }
.btn--float { background: #fff; color: var(--grey-strong); box-shadow: var(--shadow-float); }
.btn--blood { background: var(--blood); color: #fff; }
.btn--chip { background: var(--chip); color: var(--grey-strong); }
.btn--xl { height: 53px; padding: 0 16px; font-size: 24px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; color: var(--dim); }
.btn--black[disabled], .btn--black[aria-disabled="true"] { background: var(--chip); color: var(--grey-strong); }
.btn .lbl { position: relative; display: inline-flex; align-items: baseline; transition: opacity 150ms var(--e-standard); }

/* campos — o mesmo desenho no checkout, na conta e no rastreio */
.field, .form-row, .woocommerce-input-wrapper > p { display: grid; gap: 8px; }
.field__label, .form-row > label, .woocommerce-form-row > label, .woocommerce-address-fields label, .woocommerce-EditAccountForm label {
	font-size: 11px; letter-spacing: .06em; color: var(--grey-strong); text-transform: uppercase;
	/* o corte na altura das maiúsculas deixa rótulo de 10px ilegível */
	text-box: none; line-height: 1.3;
}
.form-row .required, .required { color: var(--blood); text-decoration: none; border: 0; }
.form-row .optional { color: var(--dim); text-transform: none; font-stretch: 87.5%; }
.field__row { display: flex; gap: 5px; }
.field__row .field__input { flex: 1; min-width: 0; }
.field__input, .input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
	width: 100%; height: 44px; padding: 0 14px; background: var(--chip); color: var(--ink);
	font-size: 14px; font-stretch: 87.5%; font-weight: 600; text-transform: none; line-height: 44px;
	outline: none; border: 0; transition: background-color 200ms var(--e-standard), box-shadow 200ms var(--e-standard);
	text-box: none;
}
textarea { height: auto; padding: 12px 14px; min-height: 96px; line-height: 20px; }
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235E5E5E' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; padding-right: 36px;
}
.field__input:focus, .input-text:focus, input:focus, textarea:focus, select:focus { box-shadow: inset 0 0 0 1.5px var(--black); background: #fff; }
input::placeholder, textarea::placeholder { color: var(--dim); font-weight: 500; }
.form-row-first, .form-row-last, .form-row-wide { width: 100%; }

/* nos formulários longos o campo ganha moldura e uma barra vermelha no foco —
   um bloco cinza chapado atrás do outro fica pesado e sem identidade */
.ckt .input-text, .ckt select, .ckt textarea, .ckt .field__input,
.woocommerce-address-fields .input-text, .woocommerce-address-fields select, .woocommerce-address-fields .field__input,
.woocommerce-EditAccountForm .input-text, .woocommerce-EditAccountForm select, .woocommerce-EditAccountForm .field__input,
.login-form .input-text, .login-form .field__input,
.woocommerce-ResetPassword .input-text, .woocommerce-ResetPassword .field__input,
.trkform .input-text, .trkform .field__input {
	/* background-color, não o atalho: o atalho apagaria a seta do <select> */
	height: 52px; line-height: 52px; background-color: #fff; color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
	transition: box-shadow 220ms var(--e-standard), background-color 200ms var(--e-standard);
}
.ckt textarea, .woocommerce-EditAccountForm textarea { height: auto; line-height: 20px; padding: 16px; min-height: 104px; }
.ckt .input-text:hover, .ckt select:hover, .ckt textarea:hover, .ckt .field__input:hover,
.login-form .field__input:hover, .trkform .field__input:hover,
.woocommerce-address-fields .input-text:hover, .woocommerce-EditAccountForm .input-text:hover { box-shadow: inset 0 0 0 1px #c9c9c9; }
.ckt .input-text:focus, .ckt select:focus, .ckt textarea:focus, .ckt .field__input:focus,
.woocommerce-address-fields .input-text:focus, .woocommerce-address-fields select:focus, .woocommerce-address-fields .field__input:focus,
.woocommerce-EditAccountForm .input-text:focus, .woocommerce-EditAccountForm select:focus, .woocommerce-EditAccountForm .field__input:focus,
.login-form .input-text:focus, .login-form .field__input:focus,
.woocommerce-ResetPassword .input-text:focus, .woocommerce-ResetPassword .field__input:focus,
.trkform .input-text:focus, .trkform .field__input:focus {
	background-color: #fff; box-shadow: inset 3px 0 0 var(--blood), inset 0 0 0 1.5px var(--ink);
}
/* o WooCommerce marca o campo errado em vermelho; o certo, em nada */
.ckt .woocommerce-invalid .input-text, .ckt .woocommerce-invalid select { box-shadow: inset 3px 0 0 var(--blood), inset 0 0 0 1px rgba(186, 34, 48, .5); }
.ckt .woocommerce-invalid > label { color: var(--blood); }

/* grades de formulário (checkout, endereços, dados da conta) */
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper, .woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px;
}
/* o país é sempre o Brasil (o JS do WooCommerce insiste em reexibir o campo) */
#billing_country_field, #shipping_country_field { display: none !important; }
#billing_address_1_field, #shipping_address_1_field,
#billing_address_2_field, #shipping_address_2_field,
#billing_email_field, #order_comments_field, .woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm > p:has(#account_display_name),
.woocommerce-EditAccountForm > p:last-of-type { grid-column: 1 / -1; }
#billing_number_field, #shipping_number_field, #billing_cpf_field, #billing_cellphone_field { grid-column: span 1; }
.woocommerce-EditAccountForm fieldset { padding: 20px; background: var(--well); display: grid; gap: 16px; }
.woocommerce-EditAccountForm legend { font-size: 12px; letter-spacing: .06em; }
.check { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.nl-box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: var(--chip); color: #fff; transition: background-color 400ms var(--e-standard); }
/* no toque o :hover gruda depois do toque e parece marcado; só com mouse */
@media (hover: hover) { .check:hover .nl-box, .nl-check:hover .nl-box { background: #000; } }
.nl-box.is-on { background: #000; }
.nl-box .ck { opacity: 0; margin: 0; width: 12px; height: 10px; transition: opacity 150ms var(--e-standard); }
.nl-box.is-on .ck { opacity: 1; }
/* caixas dos formulários (criar conta, outro endereço, continuar conectado):
   o estado vem do próprio input, sem JS */
.check input:checked + .nl-box { background: #000; }
.check input:checked + .nl-box .ck { opacity: 1; }
.check input:focus-visible + .nl-box { outline: 2px solid var(--blood); outline-offset: 2px; }

/* pratos de foto */
.plate { position: relative; overflow: clip; background: var(--well); }
.plate[data-plate="dark"] { background: var(--plate-dark); }
.plate img { width: 100%; height: 100%; object-fit: contain; }
.plate[data-plate="light"] img { mix-blend-mode: multiply; }
.veil-ed { position: absolute; inset: 0; background-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color 500ms var(--e-inout), backdrop-filter 500ms var(--e-inout); }

/* avisos do WooCommerce */
.notices { padding: var(--top) var(--pad) 0; display: grid; gap: 5px; }
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; background: var(--chip);
	font-size: 12px; line-height: 16px;
}
.woocommerce-error { background: var(--blood); color: #fff; }
.woocommerce-error li + li { margin-top: 6px; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* ===================================================================== abertura
   O contador sobe até 710 e vira o logo; só aparece quando o script do <head>
   marca <html class="sg-ldr"> (primeira entrada da sessão, sem movimento
   reduzido). Sem JS, nada disso existe. */
.ldr { display: none; }
html.sg-ldr .ldr {
	position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
	background: var(--ink); color: #fff; overflow: hidden;
	/* rede: se o JS não rodar, a tela não fica presa no preto */
	animation: ldr-fail 1ms linear 6s forwards;
}
@keyframes ldr-fail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* O arco do velocímetro emoldura o logo: as barras acendem enquanto o número
   sobe, a última faixa é a zona vermelha da marca e o logo monta no fim. */
.ldr__stage { position: relative; width: min(90vw, 660px); aspect-ratio: 440 / 232; }
.ldr__gauge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ldr__bar { transition: opacity 90ms linear; }
.ldr__box { position: absolute; left: 50%; top: 67%; width: 63%; transform: translate(-50%, -50%); }
.ldr__unit {
	position: absolute; left: 50%; top: 88%; transform: translateX(-50%);
	font-size: 11px; font-weight: 700; letter-spacing: .22em; color: rgba(255, 255, 255, .45);
	text-box: none; white-space: nowrap;
}
/* O logo inteiro, duas vezes: o corte diagonal (25,8°, medido na arte) deixa
   o "710" numa cópia e a tarja "GVNG" na outra, encaixadas no mesmo lugar. */
.ldr__lock {
	position: relative; width: 100%; aspect-ratio: 1200 / 191; container-type: inline-size;
	transform: translateX(21.5%); will-change: transform;
}
@media (max-width: 640px) {
	.ldr__stage { width: 94vw; }
	.ldr__box { width: 70%; }
	.ldr__unit { font-size: 10px; letter-spacing: .18em; }
}
.ldr__mark, .ldr__tag { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.ldr__mark { clip-path: polygon(0% 0%, 58.56% 0%, 50.86% 100%, 0% 100%); will-change: opacity, transform; }
.ldr__tag { clip-path: polygon(58.56% 0%, 58.56% 0%, 50.86% 100%, 50.86% 100%); will-change: opacity, clip-path; }
/* o contador ocupa exatamente a caixa do "710" da arte, com a mesma inclinação */
.ldr__count {
	position: absolute; left: 0; top: 8.9%; width: 57.1%; height: 91.1%;
	display: grid; place-items: center;
	font-size: 19.8cqw; line-height: 1; letter-spacing: -.02em;
	font-stretch: 75%; font-weight: 700; font-variant-numeric: tabular-nums;
	transform: skewX(-10.5deg); text-box: trim-both cap alphabetic;
	will-change: opacity, transform;
}

/* ===================================================================== pílula */
.pill {
	position: fixed; z-index: 220; top: 20px; left: 50%; transform: translateX(-50%);
	/* fixa com left:50% e sem right: a largura disponível é só metade da tela,
	   e o conteúdo era espremido no celular. max-content resolve. */
	height: 68px; display: flex; align-items: stretch; width: max-content; max-width: calc(100vw - 20px);
	background: var(--black); color: #fff; border-radius: 999px; overflow: clip; isolation: isolate; white-space: nowrap;
	transition: transform 500ms var(--e-inout);
}
.pill::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blood); opacity: 0; pointer-events: none; }
.pill.is-hidden { transform: translate(-50%, -140%); }
.pill__logos { display: flex; align-items: center; flex: none; padding: 0 6px 0 22px; }
.pill__logo { display: flex; align-items: center; flex: none; gap: 6px; padding: 0 10px 0 0; color: #fff; opacity: .42; transition: opacity 200ms var(--e-standard); }
.pill__logo:first-child { padding-right: 12px; }
.pill__logo.is-on, .pill__logo:hover { opacity: 1; }
.pill__logo img.logo710, .pill__logo img.logogb { display: block; height: 19px; width: auto; flex: none; }
.pill__bar { flex: none; width: 1px; height: 22px; margin: 0 12px 0 0; background: rgba(255, 255, 255, .22); }
.pill__nav { display: flex; align-items: stretch; }
.pill__item {
	display: flex; align-items: center; padding: 0 10px; font-size: 16px; color: #fff; cursor: pointer;
	transition: color 150ms var(--e-standard);
}
.pill__item:last-child { padding-right: 22px; }
.pill__item:hover, .pill__item.is-dim { color: var(--pill-dim); }
.pill__lbl { position: relative; display: block; }
.pill__item[aria-current] .pill__lbl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; }
.count { position: relative; display: inline-block; margin-left: 5px; min-width: 1ch; }
.count:empty { display: none; }
.count > i { display: block; font-style: normal; }
.pill__menu { display: none; align-items: center; padding: 0 20px; font-size: 16px; color: #fff; }
.pill__bars { display: none; }

/* a troca de loja dentro do painel: 710 ⇄ GB */
	display: grid; place-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
	font-size: 12px; font-weight: 900; letter-spacing: .02em; color: rgba(255, 255, 255, .6);
	transition: background-color 180ms var(--e-standard), color 180ms var(--e-standard);
}

/* a cortina da troca de loja: sobe com o logo do destino e sai por cima */
html.sg-swapping::before {
	content: ""; position: fixed; inset: 0; z-index: 401; background: var(--ink);
	/* rede de segurança: se o JS não vier, a cobertura sai sozinha */
	animation: sgSwapFail 220ms linear 1600ms forwards;
}
html.sg-swapping { overflow: hidden; }
@keyframes sgSwapFail { to { opacity: 0; visibility: hidden; } }
.wswap {
	position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
	background: var(--ink); transform: translateY(100%);
	transition: transform 380ms var(--e-inout);
	pointer-events: none;
}
.wswap.is-on { transform: translateY(0); }
.wswap.is-out { transform: translateY(-100%); transition-duration: 600ms; }
.wswap__mark { display: grid; justify-items: center; gap: 14px; opacity: 0; transition: opacity 220ms var(--e-out) 90ms; }
.wswap.is-on .wswap__mark { opacity: 1; }
.wswap.is-out .wswap__mark { opacity: 0; transition-duration: 200ms; transition-delay: 0ms; }
.wswap__mark img { display: block; height: 30px; width: auto; }
.wswap__mark i { display: block; width: 0; height: 2px; background: #BA2230; transition: width 420ms var(--e-out) 140ms; }
.wswap--gb .wswap__mark i { background: #2A2F63; }
.wswap.is-on .wswap__mark i { width: 120px; }
@media (max-width: 700px) { .wswap__mark img { height: 24px; } .wswap.is-on .wswap__mark i { width: 88px; } }
@media (prefers-reduced-motion: reduce) { .wswap { display: none; } }

/* ===================================================================== mega menu */
.mega { position: fixed; z-index: 219; top: 80px; left: 50%; transform: translateX(-50%); padding-top: 5px; max-width: 100vw; }
.mega__glass { position: relative; overflow: clip; width: 960px; height: 420px; transition: width 440ms var(--e-settle), height 440ms var(--e-settle); }
.mp { position: absolute; top: 0; left: 0; padding: 20px; }
.mp--loja { width: min(960px, 100vw - 20px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.mp__cats { grid-column: 1 / 6; }
.mp__cats .eyebrow, .mp__prev .eyebrow { margin-bottom: 15px; }
.mlist { margin-top: -8.75px; }
.mlist a { display: block; width: fit-content; font-size: 24px; padding: 8.75px 0; cursor: pointer; transition: opacity 150ms var(--e-standard); position: relative; }
.mlist:hover a:not(:hover) { opacity: .45; }
.mlist a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; }
.mp__prev { grid-column: 6 / 13; }
.mtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mtile .plate { aspect-ratio: 1; border-radius: 4px; }
.mtile__name { display: block; font-size: 12px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile__price { display: flex; gap: 5px; font-size: 12px; margin-top: 5px; }
.mtile__price s { opacity: .7; }
.mp__foot { grid-column: 1 / 13; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; }
.inl { display: flex; align-items: center; flex-wrap: wrap; }
.inl a { font-size: 16px; transition: opacity 150ms var(--e-standard); cursor: pointer; }
.inl a:hover { opacity: .5; }
.inl .eyebrow { margin-right: 15px; }

.mp--drops { width: min(960px, 100vw - 20px); }
.drops3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dcard { display: block; cursor: pointer; }
.dcard__img { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: clip; background: var(--plate-dark); }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dcard:hover .veil-ed, .lbcard:hover .veil-ed { background-color: rgba(0, 0, 0, .16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dcard__num { display: block; font-size: 10px; margin-top: 12px; opacity: .7; }
.dcard__title { display: block; font-size: 16px; margin-top: 8px; }
.dcard__meta { display: block; font-size: 10px; margin-top: 8px; }
.promo { position: relative; display: block; height: 88px; margin-top: 28px; border-radius: 10px; background: var(--blood); color: #fff; cursor: pointer; transition: background-color 150ms var(--e-standard); }
.promo:hover { background: var(--blood-lit); }
.promo__t { position: absolute; left: 20px; top: 20px; font-size: 24px; max-width: calc(100% - 160px); }
.promo__cta { position: absolute; left: 20px; bottom: 20px; font-size: 12px; display: flex; align-items: center; }
.promo__img { position: absolute; right: 20px; top: -8px; width: 110px; height: 104px; border-radius: 4px; object-fit: cover; }

.mp--lookbook, .mp--busca, .mp--carrinho { width: min(690px, 100vw - 20px); }
.lb4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lbc { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.lbc img { width: 96px; height: 96px; border-radius: 4px; object-fit: cover; flex: none; }
.lbc span { font-size: 16px; max-width: 200px; line-height: 16px; }
.lbc em, .lbcard em, .look__head h1 em { font-style: normal; opacity: .7; margin-left: .4em; }
.foot2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.foot2 a.tl { font-size: 16px; cursor: pointer; transition: opacity 150ms; }
.foot2 a.tl:hover { opacity: .5; }
.foot2 a.tl em { font-style: normal; opacity: .7; }

/* busca dentro do vidro */
.srow { display: flex; align-items: center; gap: 15px; margin-top: 12px; }
.glass .sinput, .msearch .sinput, .sinput {
	flex: 1; min-width: 0; height: 44px; font-size: 24px; color: #fff; background: transparent; padding: 0; outline: none;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); caret-color: var(--signal); text-transform: uppercase;
	transition: box-shadow 150ms var(--e-standard);
}
.sinput:focus, .sinput.is-focus { box-shadow: inset 0 -2px 0 #fff; }
.sinput::placeholder { color: rgba(255,255,255,.55); }
.sinput::-webkit-search-cancel-button { display: none; }
.sidle { margin-top: 20px; }
.gchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.gchip { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 10px; font-size: 16px; background: var(--glass-chip); cursor: pointer; overflow: hidden; }
.gchip::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 500ms var(--e-standard); }
.gchip:hover::before { opacity: .25; }
.recents { display: flex; align-items: center; flex-wrap: wrap; margin-top: 10px; min-height: 16px; }
.recents a { font-size: 16px; cursor: pointer; transition: opacity 150ms; }
.recents a:hover { opacity: .5; }
.sres { display: flex; flex-direction: column; gap: 4px; margin: 20px -10px 0; }
.sopt { display: flex; align-items: center; gap: 15px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background-color 150ms var(--e-standard); color: #fff; }
.sopt:hover, .sopt.is-active { background: rgba(255,255,255,.12); }
.sopt .plate { width: 64px; height: 64px; border-radius: 4px; flex: none; }
.sopt__body { flex: 1; min-width: 0; }
.sopt__name { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sopt__name mark { background: none; color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.sopt__meta { display: block; font-size: 12px; margin-top: 10px; opacity: .7; }
.sopt__price { font-size: 12px; white-space: nowrap; display: flex; gap: 5px; }
.sopt__price s { opacity: .6; }
.sfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 20px; }
.sfoot--idle { margin-top: 25px; }
.sclear { padding: 6px 0; }
.glass .sale { color: #fff; }
.glass .price s { opacity: .6; }
.sempty { font-size: 16px; margin-top: 24px; }
.cart-loading { text-align: center; padding: 40px 0; opacity: .6; }

/* linhas do carrinho no vidro */
.lines { display: flex; flex-direction: column; gap: 10px; }
.line { display: flex; gap: 20px; overflow: clip; }
.line__thumb { width: 96px; height: 96px; border-radius: 4px; flex: none; }
.line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.line__name { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 16px; text-box: none; }
.line__meta { font-size: 12px; margin-top: 10px; }
.line__ctl { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.mstep { display: flex; height: 29px; }
.mstep button, .mstep b { display: grid; place-items: center; height: 29px; background: var(--glass-chip); font-size: 12px; font-weight: 700; }
.mstep button { width: 29px; }
.mstep b { width: 28px; }
.mstep button[disabled] { color: rgba(255,255,255,.35); cursor: not-allowed; }
.line__rm { font-size: 12px; padding: 8px; margin-left: -8px; transition: opacity 150ms; }
.line__rm:hover { opacity: .5; }
.line__price { font-size: 16px; white-space: nowrap; text-align: right; }
.line__price s { display: block; font-size: 12px; margin-top: 8px; opacity: .7; }
.line__price .sale { color: inherit; }
.rule { height: 1px; background: var(--glass-rule); margin: 20px 0; }
.subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.subrow__l { font-size: 12px; display: flex; align-items: center; }
.subrow__r { display: flex; align-items: baseline; gap: 4px; }
.subrow__r small { font-size: 12px; }
.subrow__r b { font-size: 24px; font-weight: 700; transition: opacity 150ms; }
.subrow__r b.is-pending { opacity: .5; }
.cartbtns { display: flex; justify-content: flex-end; gap: 5px; margin-top: 20px; }

/* ===================================================================== folha do celular */
.sheet { position: fixed; z-index: 210; top: 10px; left: 10px; right: 10px; height: calc(100dvh - 20px); padding: 10px; overflow: clip; }
.sheet__col { display: flex; flex-direction: column; height: 100%; padding: 116px 20px 10px; overflow-y: auto; overscroll-behavior: contain; }

/* ---------------------------------------------------------------- o menu em painel
   Cada bloco é uma porta da casa; a troca 710 / GB mora aqui dentro, e o
   painel é o mesmo nos dois mundos — o vidro já é escuro. */
	height: 100%; box-sizing: border-box; padding: 86px 10px 104px;
	display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px;
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}


	position: relative; display: flex; align-items: flex-end; min-height: 116px;
	background: var(--glass-lift); border-radius: 14px; overflow: clip; color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	transition: background-color 200ms var(--e-standard);
}






	display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
	background: var(--glass-lift); border: 0; border-radius: 12px; color: #fff;
	font-family: inherit; font-stretch: 75%; font-size: 13px; letter-spacing: .02em; text-align: left; cursor: pointer;
	transition: background-color 200ms var(--e-standard);
}

	margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	height: 56px; padding: 0 20px; background: var(--glass-chip); border: 0; border-radius: 14px;
	color: #fff; font-family: inherit; font-stretch: 75%; font-size: 14px; cursor: pointer;
	transition: background-color 200ms var(--e-standard);
}

@media (max-width: 900px) {
}
.sheet__list li { overflow: clip; }
.sheet__list a { display: flex; align-items: center; height: 44px; font-size: 24px; width: fit-content; position: relative; }
.sheet__list a > span { position: relative; display: block; }
.sheet__list a[aria-current] > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; }
.sheet__low { margin-top: auto; padding-top: 24px; }
.sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet__row .inl a { font-size: 16px; height: 44px; display: flex; align-items: center; margin-right: 12px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(330px, 84vw); gap: 10px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rcard { position: relative; height: 80px; border-radius: 10px; overflow: clip; background: #fff; color: #000; }
.rcard--blood { background: var(--blood); color: #fff; }
.rcard--well { background: var(--well); }
.rcard img { position: absolute; right: 0; top: 0; width: 80px; height: 80px; object-fit: cover; }
.rcard__t { position: absolute; left: 15px; top: 15px; font-size: 16px; max-width: calc(100% - 100px); }
.rcard__v { position: absolute; left: 15px; bottom: 12px; font-size: 12px; }

.msearch__col { display: flex; flex-direction: column; height: 100%; padding: 90px 10px 10px; color: #fff; }
.msearch .srow { margin-top: 12px; }
.msearch .sinput { width: 100%; font-size: 24px; }
.msearch__body { flex: 1; min-height: 0; margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.msearch__body::-webkit-scrollbar { display: none; }
.msearch .sres { display: grid; gap: 6px; }
.msearch .sopt { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img body" "img price"; column-gap: 12px; row-gap: 8px; align-items: center; padding: 8px 4px; }
.msearch .sopt .plate { grid-area: img; }
.msearch .sopt__body { grid-area: body; }
.msearch .sopt__price { grid-area: price; }
.msearch .sfoot { flex-direction: column; align-items: stretch; gap: 18px; }
.msearch .sfoot .btn { justify-content: center; }

/* popover do carrinho (celular) */
.cpop { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 71px; padding: 20px; transform-origin: 50% 100%; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.cpop .lines { gap: 16px; }
.cpop .line { gap: 10px; }
.cpop .cartbtns { padding-top: 10px; margin-top: 10px; }

/* ===================================================================== barra flutuante e filtros */
.abar { position: fixed; z-index: 48; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 10px 10px 20px; pointer-events: none; }
.abar > * { pointer-events: auto; }
.abar__cart { display: none; }
.abar--pdp { display: none; }
.fpill { gap: 0; }
.fpill .sum { color: var(--grey-strong); overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; }
.fpill.is-open { background: var(--black); color: #fff; }
.fpill.is-open::before { background: var(--grey); }
.fpill.is-open .sum { color: rgba(255,255,255,.7); }
.cartbtn .count { color: var(--ink); }

.fpop { position: fixed; z-index: 50; left: 50%; bottom: 71px; width: min(692px, 100vw - 20px); padding: 20px; transform: translateX(-50%); transform-origin: 50% 100%; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.fgroup + .fgroup { margin-top: 20px; }
.fgroup__label { display: block; font-size: 12px; margin-bottom: 10px; }
.fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.fchip {
	position: relative; isolation: isolate; height: 41px; padding: 0 15px; display: inline-flex; align-items: center;
	font-size: 16px; background: var(--glass-chip); color: #fff; overflow: hidden;
	transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard);
}
.fchip::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 500ms var(--e-standard); pointer-events: none; }
.fchip:not([aria-disabled="true"]):not(.is-on):hover::before { opacity: .25; }
.fchip.is-on { background: #fff; color: #000; }
.fchip[aria-disabled="true"] { color: rgba(255,255,255,.35); cursor: not-allowed; }
.ffoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--glass-rule); min-height: 61px; }
.ffoot .btn--chip { background: var(--chip); color: #000; }

/* ===================================================================== hero */
.hero { position: relative; padding: 10px; background: #fff; }
.hero__frame { position: relative; height: calc(100dvh - 20px); min-height: 520px; border-radius: 16px; overflow: clip; isolation: isolate; background: #0B0B0B; }
.hero__media { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 250ms var(--e-standard); }
.hero__media.is-on { z-index: 3; opacity: 1; will-change: clip-path, transform; }
.hero__media.is-prev { z-index: 1; opacity: 1; transition: none; }
.hero__media video, .hero__media img, .hero__media picture { width: 100%; height: 100%; object-fit: cover; }
.hero__media > * { transform-origin: 50% 50%; backface-visibility: hidden; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--hero-dim, 0); pointer-events: none; }
.hero__dip { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.hero__dip img { min-width: 0; }
.hero__edge { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 220px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.5)); }
.hero__edge.is-back { background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.5)); }
.hero__grad { position: absolute; inset: 0; z-index: 4; background: var(--hero-grad-l); pointer-events: none; }
.drum { position: absolute; z-index: 5; left: 0; top: 50%; transform: translateY(-50%); width: min(640px, 60vw); height: 160px; }
.drum ul { position: absolute; left: 18px; top: 0; bottom: 0; }
.drum li { position: absolute; left: 0; top: 50%; white-space: nowrap; will-change: transform, opacity; }
.drum a { display: block; font-size: 24px; color: #fff; }
.drum__tick { position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__cta { position: absolute; z-index: 5; right: 18px; top: 50%; transform: translateY(-50%); }
.hero__cta.is-white { background: #fff; color: var(--ink); }
.hero__cta.is-blood { background: var(--blood); color: #fff; }
.hero__pause { position: absolute; z-index: 5; left: 18px; bottom: 14px; font-size: 12px; color: #fff; padding: 6px 0; }
.hbar { display: none; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 0 20px 20px; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hbar .hero__cta { position: static; transform: none; }
.hbar__bars { display: flex; gap: 5px; margin: 0 0 14px -10px; }
.hbar__bars button { width: 24px; height: 24px; display: grid; place-items: center; margin-right: -9px; }
.hbar__bars button:first-child { margin-left: 0; }
.hbar__bars i { display: block; width: 15px; height: 4px; background: rgba(255,255,255,.35); transition: background-color 250ms var(--e-standard); }
.hbar__bars button.is-on i { background: #fff; }
.hbar__title { font-size: 24px; color: #fff; max-width: 250px; line-height: 24px; }

/* ===================================================================== loja */
.catbar { position: sticky; z-index: 30; top: 0; padding-top: 80px; background: #fff; }
.catbar ul { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 24px 0; display: flex; }
.catbar li { padding-left: 10px; flex: none; }
.catbar li:last-child { padding-right: 10px; }
.catbar a { display: block; font-size: 16px; color: var(--dim); cursor: pointer; transition: color 150ms var(--e-standard); }
.catbar a:hover, .catbar a[aria-current] { color: var(--black); }
.catbar__bar { position: absolute; left: 0; bottom: 20px; height: 1px; width: 0; background: var(--black); transition: transform 300ms var(--e-inout), width 300ms var(--e-inout); }
.catbar__n { display: inline-block; margin-left: 8px; font-size: 10px; color: var(--grey); vertical-align: middle; }

/* página de busca: o termo vira um chip na própria barra da loja */
.catbar--found ul { padding-top: 14px; }
.found { display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); }
.found__term { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: var(--well); font-size: 11px; line-height: 1; letter-spacing: .06em; transition: background-color 150ms var(--e-standard); }
.found__term:hover { background: var(--chip); }
.found__k { color: var(--grey); }
.found__v { font-weight: 800; }
/* `.catbar a` é mais forte que a classe: o ✕ precisa do prefixo para valer */
.catbar a.found__x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 12px; line-height: 1; color: var(--grey); background: var(--well); text-box: none; transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard); }
.catbar a.found__x:hover { background: var(--blood); color: #fff; }
.found__n { margin-left: auto; font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--grey); text-box: none; }

.catbar__hair { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--black); transform: scaleX(0); transform-origin: left; opacity: 0; }

.shop { padding: 0 var(--pad) 120px; }
.shop__lede { max-width: 60ch; margin: 0 auto 20px; text-align: center; color: var(--grey); }
.shop__empty { display: grid; justify-items: center; gap: 20px; text-align: center; padding: 90px 0 40px; color: var(--grey); }
.shop__empty-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.card { position: relative; grid-column: span 2; min-width: 0; }
.card__link { display: block; position: relative; cursor: pointer; }
.card__well { position: relative; aspect-ratio: 1; background: var(--well); overflow: clip; }
.card[data-plate="dark"] .card__well { background: var(--plate-dark); }
.card__well img { width: 100%; height: 100%; object-fit: contain; }
.card[data-plate="light"] .card__well img { mix-blend-mode: multiply; }
.card__veil {
	position: absolute; z-index: 1; inset: 0 0 auto 0; aspect-ratio: 1; background-color: transparent;
	-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
	transition: background-color 500ms var(--e-inout), backdrop-filter 500ms var(--e-inout), -webkit-backdrop-filter 500ms var(--e-inout);
}
.card__info {
	position: absolute; z-index: 2; left: 0; width: 100%; top: 50%; padding: 0 10px; opacity: 0;
	transform: translateY(calc(-50% + 8px)); transition: opacity 300ms var(--e-inout), transform 300ms var(--e-inout);
	pointer-events: none;
}
.card__name { font-size: 16px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 16px; text-box: none; }
.card__price { font-size: 12px; margin-top: 4px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.card__price s { color: var(--grey); }
.card[data-plate="dark"] .card__price s { color: rgba(255,255,255,.62); }
.card[data-plate="dark"] .card__info { color: #fff; }
.card[data-plate="dark"] .card__info .sale, .card[data-plate="dark"] .card__info .tag { color: #fff; }
.card[data-plate="dark"] .card__info .tag { background: var(--blood); padding: 2px 3px; text-box: none; line-height: 1; }
.card__quick { position: absolute; z-index: 3; left: 10px; bottom: 10px; opacity: 0; transition: opacity 300ms var(--e-inout); }
.card__add, .card__sizes button, .card__status { font-size: 16px; color: var(--grey); padding: 5px 0; transition: color 150ms var(--e-standard); display: inline-block; }
.card__add:hover, .card__sizes button:hover { color: var(--black); }
.card[data-plate="dark"] .card__add, .card[data-plate="dark"] .card__sizes button, .card[data-plate="dark"] .card__status { color: rgba(255,255,255,.66); }
.card[data-plate="dark"] .card__add:hover, .card[data-plate="dark"] .card__sizes button:hover { color: #fff; }
.card__sizes { display: flex; flex-wrap: wrap; gap: 0 10px; }
.card__sizes button[aria-disabled="true"] { color: var(--dim) !important; text-decoration: line-through; cursor: not-allowed; }
.card[data-plate="dark"] .card__sizes button[aria-disabled="true"] { color: rgba(255,255,255,.3) !important; }
.card__status.is-done { color: var(--black) !important; }
.card[data-plate="dark"] .card__status.is-done { color: #fff !important; }
.card__so { color: inherit; }
@media (hover: hover) {
	.card:hover .card__veil, .card.is-hover .card__veil, .card:focus-within .card__veil {
		background-color: rgba(150, 150, 150, .22); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	}
	.card[data-plate="dark"]:hover .card__veil, .card[data-plate="dark"].is-hover .card__veil, .card[data-plate="dark"]:focus-within .card__veil { background-color: rgba(0, 0, 0, .38); }
	.card:hover .card__info, .card.is-hover .card__info, .card:focus-within .card__info { opacity: 1; transform: translateY(-50%); transition-delay: 200ms; }
	.card:hover .card__quick, .card.is-hover .card__quick, .card:focus-within .card__quick { opacity: 1; transition-delay: 300ms; }
}

/* ===================================================================== produto */
.back { position: fixed; z-index: 60; top: 20px; left: 20px; }
.pdp { position: relative; padding: 0 var(--pad) 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.gallery { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 20px; padding-top: 50px; }
.gtile { position: relative; aspect-ratio: 1; overflow: clip; }
.gtile img { width: 100%; height: 100%; object-fit: contain; }
.mslider__bars { display: none; }
.info { grid-column: 9 / 12; padding: 96px 0 28px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; align-self: start; }
.info h1 { font-size: 24px; font-weight: 700; max-width: 260px; line-height: 24px; text-wrap: balance; }
.info__price { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; font-size: 16px; flex-wrap: wrap; }
.info__price .sale { color: var(--blood); }
.info__price s { font-size: 12px; color: var(--grey); }
.info__so { margin-top: 10px; color: var(--grey); }
.tag--box { font-size: 12px; background: var(--blood); color: #fff !important; padding: 3px 4px; text-box: none; line-height: 1; align-self: center; }
.desc { display: grid; gap: 0; color: var(--ink); }
.desc li { font-size: 14px; line-height: 20px; }
.sel { display: flex; flex-direction: column; }
.sel__label { font-size: 10px; margin-bottom: 10px; }
.swatches { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.swatch { width: 52px; height: 52px; cursor: pointer; }
.swatch.is-on { box-shadow: inset 0 0 0 1px var(--black); }
.swatch__txt { display: grid; place-items: center; width: 100%; height: 100%; font-size: 12px; }
.sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.size { position: relative; height: 41px; padding: 0 15px; display: inline-flex; align-items: center; font-size: 16px; background: var(--chip); color: var(--grey-strong); isolation: isolate; overflow: hidden; }
.size::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 500ms var(--e-standard); pointer-events: none; }
.size:not(.is-on):not([aria-disabled="true"]):hover::before { opacity: .5; }
.size.is-on { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
.size[aria-disabled="true"] { color: var(--dim); cursor: not-allowed; }
.size[aria-disabled="true"] .lbl { text-decoration: line-through; }
.actrow { position: relative; display: flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
.step { display: flex; height: 41px; }
.step button, .step b { display: grid; place-items: center; height: 41px; background: var(--chip); font-size: 16px; font-weight: 700; color: var(--ink); }
.step button:nth-child(1) { width: 39px; }
.step b { width: 38px; }
.step button:nth-child(3) { width: 40px; }
.step button[disabled] { color: var(--dim); cursor: not-allowed; }
.step--full { width: 100%; }
.step--full b { flex: 1; }
.btn--rm { height: auto; padding: 6px 0; font-size: 12px; background: none; color: var(--grey-strong); transition: color 150ms var(--e-standard); }
.btn--rm::before { display: none; }
.btn--rm:not([disabled]):hover { color: #000; }
.pdp__msg { margin-top: 12px; min-height: 16px; color: var(--grey); }
.pdp__msg.is-error { color: var(--blood); }
.plinks { display: flex; flex-wrap: wrap; gap: 5px; }
.plink { font-size: 11px; letter-spacing: .06em; color: var(--grey-strong); display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; background: var(--well); cursor: pointer; transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard); text-align: left; text-box: none; }
.plink:hover { background: var(--chip); color: #000; }

/* Notebook de tela baixa: a coluna do produto encolhe o respiro para caber
   inteira, sem cortar os atalhos no rodapé da tela. */
@media (min-width: 900px) and (max-height: 860px) {
	.info { padding-top: 88px; padding-bottom: 20px; gap: 16px; }
	.info h1 { font-size: 22px; line-height: 22px; }
	.swatches { margin-bottom: 10px; }
	.actrow { margin-top: 10px; }
	.desc li { line-height: 19px; }
}
.plink .caret { width: 6px; height: 6px; }
.sel__label--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* conjunto: as peças que ele traz; peça: o conjunto em que ela entra */
.kit { display: grid; gap: 10px; }
.kit__list { display: grid; gap: 4px; }
.kit__list a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--well); font-size: 12px; line-height: 1.2; transition: background-color 150ms var(--e-standard); text-box: none; }
.kit__list a::after { content: "→"; margin-left: auto; color: var(--grey); }
.kit__list a:hover { background: var(--chip); }
.kit__also { font-size: 11px; letter-spacing: .04em; color: var(--grey); line-height: 1.4; text-box: none; }
.kit__also a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sel__guide { font-size: 10px; letter-spacing: .06em; color: var(--grey-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.sel__guide:hover { color: var(--ink); }

/* gaveta de detalhes e medidas: fora da coluna fixa, com rolagem própria */
.dwr { position: fixed; inset: 0; z-index: 250; }
.dwr[hidden] { display: none; }
html.is-dwr body { overflow: hidden; }
.dwr__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.dwr__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(580px, 100vw);
	display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 60px rgba(0, 0, 0, .18);
}
.dwr__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; box-shadow: inset 0 -1px 0 var(--line); }
.dwr__tabs { display: flex; gap: 4px; }
.dwr__tab {
	height: 36px; padding: 0 14px; background: var(--well); color: var(--grey-strong); font-size: 12px; letter-spacing: .04em; cursor: pointer;
	transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard);
}
.dwr__tab:hover { background: var(--chip); color: var(--ink); }
.dwr__tab.is-on { background: var(--ink); color: #fff; }
.dwr__close { font-size: 12px; letter-spacing: .06em; color: var(--grey-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dwr__close:hover { color: var(--ink); }
.dwr__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 56px; -webkit-overflow-scrolling: touch; }
.dwr__name { font-size: 20px; line-height: 1.05; margin-bottom: 24px; text-box: none; }
.dwr__pane[hidden] { display: none; }
body.sg .dwr__text, body.sg .dwr__text * { text-box: none; }
.dwr__text p { font-size: 15px; line-height: 24px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: #2a2a2a; }
.dwr__text p + p { margin-top: 14px; }
.dwr__text strong, .dwr__text b { font-weight: 700; color: var(--ink); }
.dwr__hint { font-size: 11px; letter-spacing: .04em; color: var(--grey); margin-bottom: 14px; }
.dwr__zoom { margin: 0; background: var(--well); overflow: auto; cursor: zoom-in; overscroll-behavior: contain; }
.dwr__zoom + .dwr__zoom { margin-top: 10px; }
.dwr__zoom img { display: block; width: 100%; height: auto; max-width: none; }
.dwr__zoom.is-zoom { cursor: zoom-out; max-height: 70vh; }
.dwr__zoom.is-zoom img { width: 220%; }

/* frete */
.frete { display: flex; flex-direction: column; }
.frete__row { display: flex; gap: 5px; }
.frete__row .frete__cep { flex: 1 1 auto; min-width: 0; width: auto; max-width: 200px; }
.frete__row .btn { flex: none; }
.frete__list { display: grid; gap: 5px; margin-top: 10px; }
.frete__list:empty { display: none; }
.frete__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; padding: 10px; background: var(--well); }
.frete__list li b { font-size: 12px; }
.frete__list li span.days { color: var(--grey); }
.frete__list li.is-on { box-shadow: inset 0 0 0 1px var(--black); background: #fff; }
.frete__msg { margin-top: 8px; color: var(--grey); }
.frete__msg:empty { display: none; }
.frete__msg.is-error { color: var(--blood); }
.frete__note { margin-top: 12px; color: var(--grey); font-size: 12px; line-height: 17px; }
.frete__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* folha de tamanhos (celular) */
.ssheet-wrap { position: fixed; inset: 0; z-index: 240; }
.ssheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ssheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; padding: 20px 10px 30px; max-height: 88dvh; overflow-y: auto; }
.ssheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ssheet__qty { display: block; margin: 20px 0 10px; }
.ssheet__foot { display: flex; justify-content: center; margin-top: 20px; }
.srows { display: grid; gap: 5px; }
.srow2 { height: 46px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; background: var(--chip); color: var(--ink); font-size: 16px; }
.srow2.is-on { background: #fff; box-shadow: inset 0 0 0 1px #000; }
.srow2[aria-disabled="true"] { color: var(--dim); cursor: not-allowed; }
.srow2[aria-disabled="true"] .s { text-decoration: line-through; }

/* ===================================================================== carrinho (página) */
.cpage {
	max-width: 1240px; margin: 0 auto; padding: var(--top) var(--pad) 120px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 10px 60px; align-items: start;
}
.cpage__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.cpage__head h1 { font-size: 45px; line-height: 45px; }
.cpage__back { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.cpage__lines { grid-column: 1; }
.cpage__sum {
	grid-column: 2; display: flex; flex-direction: column; gap: 22px; align-self: start;
	position: sticky; top: calc(var(--top) - 20px); background: var(--well); padding: 24px;
}
.cpage__sum .subrow__l { color: var(--ink); }
.cpage--empty { display: block; padding-bottom: 60px; }
.cempty { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 60px 0 40px; }
.cempty .eyebrow { color: var(--grey); }
.cempty .body { color: var(--grey); max-width: 42ch; }
.cempty__acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.note { color: var(--grey); }
.lines--page { gap: 0; }
.lines--page .line { padding: 20px 0; }
.lines--page .line:first-child { padding-top: 0; }
.lines--page .line__meta { color: var(--grey); }
.lines--page .line__rm { background: var(--chip); color: var(--grey-strong); padding: 0 10px; height: 41px; margin-left: 0; display: inline-flex; align-items: center; }
.lines--page .line__price .sale { color: var(--blood); }
.lines--page .line__price s { color: var(--grey); opacity: 1; }
.cpage__coupon { display: grid; gap: 10px; }
.cpage__coupons { display: grid; gap: 5px; }
.cpage__coupons li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; background: var(--well); padding: 10px; }
.cpage__coupons button { font-size: 12px; color: var(--grey); }
.cpage__msg { color: var(--grey); min-height: 16px; }
.cpage__msg.is-error { color: var(--blood); }
.ctotals { display: grid; gap: 8px; }
.ctotals li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.ctotals li[data-row="total"] { font-size: 16px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--line); }

/* ===================================================================== checkout */
.wcpage { padding-bottom: 120px; }
.wcpage .notices { padding-top: 0; }
.wcpage--checkout > .woocommerce, .wcpage--cart > .woocommerce, .wcpage--account > .woocommerce { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.wcpage--checkout > .woocommerce { padding-top: var(--top); }

.ckt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 40px 56px; align-items: start; }
.ckt__head { display: grid; gap: 16px; margin-bottom: 44px; }
.ckt__head h1 { font-size: 45px; line-height: 45px; }
.ckt__steps { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--dim); letter-spacing: .06em; }
.ckt__steps b { color: var(--ink); font-weight: 700; }
.ckt__fields { display: grid; gap: 56px; }
/* cada bloco numerado é um respiro grande; sem isso eles grudam. o WooCommerce
   embrulha tudo em col2-set/col-1/col-2, que por padrão não têm espaçamento */
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields,
#customer_details, #customer_details > .col-1, #customer_details > .col-2 { display: grid; gap: 56px; align-content: start; }

/* blocos numerados do formulário */
.fsec { display: grid; gap: 24px; }
.fsec__head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 12px; padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--line); }
.fsec__n {
	display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
	background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .06em; align-self: center;
}
.fsec__t { font-size: 20px; letter-spacing: .01em; }
.fsec__note { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--grey); text-transform: none; font-stretch: 87.5%; text-box: none; }
.fsec__head--sub { grid-template-columns: 1fr; gap: 8px; }
.fsec__head--sub .fsec__note { grid-column: 1; }
.fsec__head--sub .fsec__t { font-size: 16px; }
.fsec--account { background: var(--well); padding: 28px; gap: 22px; }
.fsec--ship { gap: 28px; }
/* o rótulo-caixa: quadrado, texto e explicação numa linha só */
.check.create-account, .check.ship { display: inline-grid; grid-template-columns: auto 1fr; align-items: start; gap: 14px; }
.check.create-account .nl-box, .check.ship .nl-box { margin-top: 1px; }
.check__txt { display: grid; gap: 5px; }
.check__txt b { font-size: 14px; letter-spacing: .02em; }
.check__txt small { font-size: 12px; line-height: 16px; color: var(--grey); text-transform: none; font-stretch: 87.5%; text-box: none; }
div.create-account { display: grid; gap: 22px; }
/* medidor de força da senha e dica (o WooCommerce injeta por JS, sem estilo) */
.woocommerce-password-strength {
	margin-top: 10px; padding: 9px 12px; background: #fff; font-size: 11px; line-height: 14px; letter-spacing: .04em;
	text-transform: uppercase; font-weight: 700; color: var(--grey-strong); box-shadow: inset 3px 0 0 var(--dim); text-box: none;
}
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { color: var(--blood); box-shadow: inset 3px 0 0 var(--blood); }
.woocommerce-password-strength.good { color: #8a5a00; box-shadow: inset 3px 0 0 #d49a00; }
.woocommerce-password-strength.strong { color: #1d6b37; box-shadow: inset 3px 0 0 #2f9e57; }
.woocommerce-password-hint {
	display: block; margin-top: 8px; font-size: 12px; line-height: 17px; font-weight: 500; font-stretch: 87.5%;
	text-transform: none; color: var(--grey); text-box: none;
}
/* mostrar/ocultar senha: o botão que o WooCommerce põe dentro do campo */
.password-input { position: relative; display: block; }
.password-input > input { padding-right: 52px; }
.show-password-input {
	position: absolute; top: 0; right: 0; width: 48px; height: 100%; display: grid; place-items: center;
	color: var(--grey); cursor: pointer; background: none;
}
.show-password-input::before {
	content: ""; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.show-password-input:hover, .show-password-input:focus-visible { color: var(--ink); }
/* enquanto a caixa não estiver marcada o WooCommerce esconde o endereço */
.shipping_address { display: grid; gap: 28px; }

/* foco: o campo abre em branco com o contorno preto e o rótulo acende */
.form-row:focus-within > label { color: var(--ink); }
.form-row:focus-within > label .required { color: var(--blood); }
.ckt__review { position: sticky; top: calc(var(--top) - 20px); background: var(--well); padding: 28px; display: grid; gap: 22px; }
.ckt__review h3 { font-size: 16px; letter-spacing: .04em; }
.ckt__review .woocommerce-info, .ckt__review .woocommerce-notice, .ckt__review .woocommerce-error {
	background: #fff; color: var(--grey-strong); font-size: 12px; line-height: 17px; text-transform: none;
	font-stretch: 87.5%; padding: 14px 16px; text-box: none;
}

.woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3 {
	font-size: 12px; letter-spacing: .08em; margin: 0; color: var(--grey-strong);
}

/* avisos de cupom e de login no topo do checkout */
.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { grid-column: 1 / -1; }
.woocommerce-form-login-toggle + .woocommerce-form-coupon-toggle { margin-top: 0; }
.woocommerce-form-coupon-toggle:last-of-type { margin-bottom: 40px; }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info {
	background: none; font-size: 11px; letter-spacing: .04em; padding: 14px 0; gap: 8px; color: var(--grey);
	box-shadow: inset 0 -1px 0 var(--line);
}
.woocommerce-form-login-toggle .woocommerce-info { padding-top: 0; }
.woocommerce-form-coupon-toggle .woocommerce-info a, .woocommerce-form-login-toggle .woocommerce-info a { color: var(--ink); }
.woocommerce-form-coupon-toggle .showcoupon, .woocommerce-form-login-toggle .showlogin { text-decoration: underline; text-underline-offset: 3px; }
.checkout_coupon, .woocommerce-form-login { display: grid; gap: 14px; padding: 20px; background: var(--well); margin-bottom: 20px; }
/* login dentro do checkout */
form.login-form--inline { gap: 20px; padding: 28px; margin: 0 0 28px; max-width: 760px; }
.login-form__msg { font-size: 13px; line-height: 19px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); text-box: none; }
.login-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
form.login-form--inline .btn { justify-self: start; min-width: 220px; height: 52px; }
.checkout_coupon .form-row-first, .checkout_coupon .form-row-last { grid-column: auto; }

/* seletores nativos (o select2 do Woo some — o nosso select basta). ele marca o
   <select> original com .select2-hidden-accessible, que o encolhe para 1×1: é
   preciso desfazer tamanho, recorte e posição, não só o display */
.select2-container { display: none !important; }
#billing_state_field select, #shipping_state_field select,
select.select2-hidden-accessible, .ckt select.select2-hidden-accessible {
	display: block !important; position: static !important; width: 100% !important; height: 52px !important;
	clip: auto !important; clip-path: none !important; opacity: 1 !important; overflow: visible !important;
	margin: 0 !important; padding: 0 36px 0 16px !important; border: 0 !important;
}

/* resumo do pedido — as peças com foto, como no carrinho */
#order_review table.shop_table { width: 100%; border-collapse: collapse; font-size: 12px; }
#order_review table.shop_table th { color: var(--grey); font-size: 10px; letter-spacing: .06em; padding-bottom: 10px; text-align: left; }
#order_review table.shop_table td { padding: 10px 0; text-align: left; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }
.rev tbody td { vertical-align: top; padding: 14px 0; }
.rev tbody tr:first-child td { padding-top: 0; }
.rev__line { display: flex; gap: 14px; align-items: flex-start; }
.rev__thumb { position: relative; width: 56px; height: 56px; flex: none; border-radius: 4px; }
.rev__thumb img { width: 100%; height: 100%; object-fit: contain; }
.rev__qty {
	position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px;
	display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 999px; font-size: 10px;
}
.rev__body { display: grid; gap: 6px; min-width: 0; }
.rev__name { font-size: 12px; line-height: 15px; text-box: none; }
.rev__meta { font-size: 10px; color: var(--grey); letter-spacing: .04em; }
.rev tbody .product-total { white-space: nowrap; font-size: 12px; padding-top: 12px; }
#order_review table.shop_table td:last-child, #order_review table.shop_table th:last-child { text-align: right; }
#order_review .product-name { font-size: 12px; line-height: 16px; }
#order_review .product-quantity { color: var(--grey); }
#order_review tfoot th { padding: 14px 12px 14px 0; font-size: 11px; letter-spacing: .06em; color: var(--grey); vertical-align: top; }
#order_review tfoot td { padding: 14px 0; box-shadow: none; line-height: 1.4; }
#order_review tfoot .cart-subtotal th, #order_review tfoot .cart-subtotal td { box-shadow: inset 0 1px 0 var(--line); }
#order_review tfoot .order-total th { font-size: 16px; color: var(--ink); }
#order_review tfoot .order-total th, #order_review tfoot .order-total td { font-size: 20px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--line); }
#order_review ul#shipping_method { display: grid; gap: 8px; }
#order_review ul#shipping_method li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; }
#order_review ul#shipping_method label { font-size: 12px; line-height: 16px; text-box: none; }
#order_review .woocommerce-shipping-destination {
	font-size: 11px; line-height: 16px; color: var(--grey); margin-top: 10px; text-transform: none; font-stretch: 87.5%; text-box: none;
}

/* pagamento */
.wc_payment_methods { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; }
.wc_payment_method { background: #fff; padding: 14px 16px; }
.wc_payment_method > label { display: flex; align-items: center; gap: 10px; font-size: 14px; text-transform: uppercase; cursor: pointer; }
.wc_payment_method > label img { max-height: 24px; width: auto; margin-left: auto; }
.wc_payment_method input[type="radio"] { accent-color: var(--blood); width: 16px; height: 16px; }
.wc_payment_method .payment_box {
	background: none; padding: 10px 0 0; font-size: 12px; line-height: 16px; text-transform: none; font-stretch: 87.5%; color: var(--grey-strong); text-box: none;
}
.wc_payment_method .payment_box::before { display: none; }
/* sem gateway ligado: um bloco que explica, em vez de um erro vermelho solto */
.wc_payment_methods--none { gap: 0; }
.paynone { background: #fff; padding: 18px; display: grid; gap: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.paynone__t { font-size: 12px; letter-spacing: .06em; }
.paynone__p, .paynone .woocommerce-info {
	margin: 0; padding: 0; background: none; font-size: 12px; line-height: 17px; color: var(--grey-strong);
	text-transform: none; font-stretch: 87.5%; text-box: none;
}
.paynone__p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.place-order__back { width: 100%; height: 52px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.place-order__back:hover { background: var(--ink); color: #fff; }

.woocommerce-terms-and-conditions-wrapper { font-size: 12px; line-height: 16px; text-transform: none; font-stretch: 87.5%; }
.woocommerce-privacy-policy-text { margin-top: 4px; }
.place-order { display: grid; gap: 12px; }

/* botões padrão do WooCommerce com a cara do tema */
.woocommerce-button, .button, button.button, input.button, #place_order, .wc-block-components-button {
	display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
	background: var(--black); color: #fff; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
	transition: background-color 200ms var(--e-standard);
}
.woocommerce-button:hover, .button:hover, button.button:hover, input.button:hover, #place_order:hover { background: var(--blood); }
#place_order { width: 100%; height: 56px; font-size: 20px; }
.button.alt, .button--secondary { background: var(--chip); color: var(--ink); }

/* ===================================================================== conta */
.prose, .page-head { padding-left: var(--pad); padding-right: var(--pad); }
.page-head { padding-top: var(--top); padding-bottom: 30px; }
.page-head--search { text-align: center; }
.page-head p { margin-top: 10px; }
.account { padding: 0 var(--pad) 120px; max-width: 1240px; margin: 0 auto; }
.account .page-head { padding-left: 0; padding-right: 0; }
.accnav ul { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 36px; }
.accnav__item { display: inline-flex; align-items: center; height: 41px; padding: 0 15px; background: var(--chip); color: var(--grey-strong); font-size: 14px; letter-spacing: .04em; transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard); }
.accnav__item:hover { background: var(--line); color: var(--ink); }
.accnav__item.is-on { background: var(--black); color: #fff; }
.account__content { display: grid; gap: 24px; }
.account__content > p, .woocommerce-MyAccount-content > p {
	font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); max-width: 70ch;
}
.account__content > p, .account__content > p * { text-box: none; }
.account__content h2, .account__content h3, .woocommerce-column__title, .woocommerce-Address-title h2, .woocommerce-Address-title h3 {
	font-size: 12px; letter-spacing: .08em; margin-bottom: 12px; color: var(--grey-strong);
}
.account__content a:not(.btn):not(.button):not(.accnav__item):not(.acccard) { text-decoration: underline; text-underline-offset: 3px; }

/* atalhos do resumo da conta */
.acccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.acccard { display: grid; gap: 8px; align-content: start; padding: 22px; background: var(--well); transition: background-color 200ms var(--e-standard); }
.acccard:hover { background: var(--chip); }
.acccard b { font-size: 16px; }
.acccard span { font-size: 12px; line-height: 16px; color: var(--grey); text-transform: none; font-stretch: 87.5%; text-box: none; }

/* tabelas (pedidos, detalhes do pedido) */
.woocommerce-orders-table, .woocommerce-table--order-details, .shop_table {
	width: 100%; border-collapse: collapse; font-size: 12px; text-align: left;
}
.woocommerce-orders-table th, .shop_table th { color: var(--grey); font-size: 10px; letter-spacing: .06em; padding: 0 10px 12px; }
.woocommerce-orders-table td, .shop_table td { padding: 16px 10px; box-shadow: inset 0 -1px 0 var(--line); vertical-align: middle; }
.woocommerce-orders-table th:first-child, .woocommerce-orders-table td:first-child, .shop_table th:first-child, .shop_table td:first-child { padding-left: 0; }
.woocommerce-orders-table th:last-child, .woocommerce-orders-table td:last-child, .shop_table th:last-child, .shop_table td:last-child { text-align: right; padding-right: 0; }
.woocommerce-orders-table__cell-order-number a { font-size: 14px; }
.woocommerce-orders-table .button, .shop_table .button { height: 34px; font-size: 11px; padding: 0 12px; }
.woocommerce-table--order-details tfoot th { text-align: left; padding: 12px 10px 12px 0; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { font-size: 16px; }
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.woocommerce-Address { background: var(--well); padding: 24px; display: grid; gap: 12px; align-content: start; }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.woocommerce-Address-title a { font-size: 10px; letter-spacing: .06em; }
.woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none; text-box: none; }
.woocommerce-EditAccountForm, .woocommerce-address-fields { display: grid; gap: 16px; max-width: 760px; }
.woocommerce-pagination ul { display: flex; gap: 5px; }
.woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; background: var(--chip); font-size: 12px; }
.woocommerce-pagination .current { background: var(--black); color: #fff; }

/* só o invólucro da página Minha Conta — o <form class="login"> do checkout usa
   a mesma classe (o JS do WooCommerce procura por ela) e não pode herdar isso */
div.login { padding: var(--top) var(--pad) 120px; display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; }
.login__head { grid-column: 1 / -1; display: grid; gap: 10px; margin-bottom: 20px; }
.login__head h1 { font-size: 45px; line-height: 45px; }
.login__head p { font-size: 12px; color: var(--grey); text-transform: none; font-stretch: 87.5%; text-box: none; }
.woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p {
	font-size: 12px; line-height: 16px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); text-box: none;
}
.woocommerce-privacy-policy-text a { color: var(--blood); text-decoration: underline; }
.login--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.login__col { background: var(--well); padding: 36px; display: grid; align-content: start; gap: 24px; }
.login__col h2 { font-size: 24px; }
/* as duas colunas têm de começar na mesma linha: mesmo espaçamento nos dois */
.login-form { display: grid; gap: 22px; align-content: start; }
.login-form .field, .login-form > p { margin: 0; }
.login__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.login__lost { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.login__note { text-transform: none; font-weight: 500; font-stretch: 87.5%; line-height: 16px; color: var(--grey); text-box: none; }
.login-form .btn { justify-content: center; height: 48px; }
.login-form .woocommerce-privacy-policy-text p { margin: 0; }
.accfoot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.accfoot .t12 { text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================== pedido (obrigado e detalhes) */
/* pedido recebido: uma coluna de recibo, centrada */
.thanks { max-width: 880px; margin: 0 auto; display: grid; gap: 32px; }
.thanks__head { display: grid; gap: 18px; }
.thanks__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .1em; color: var(--grey); }
.thanks__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--blood); }
body.sg .thanks .woocommerce-thankyou-order-received, .thanks__title {
	font-size: clamp(40px, 5vw, 64px); line-height: .96; margin: 0; padding: 0; background: none; color: var(--ink); text-box: trim-both cap alphabetic;
}
.thanks__lede {
	max-width: 56ch; font-size: 16px; line-height: 24px; font-weight: 500; font-stretch: 87.5%; text-transform: none;
	color: var(--grey-strong); text-box: none; background: none; padding: 0;
}
.thanks__actions { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; }
.thanks__actions .btn { height: 52px; padding: 0 24px; }
.thanks__more { display: grid; gap: 32px; }
/* instruções do pagamento (Pix, boleto…) que o gateway escreve */
.thanks__more > p, .thanks__more > .woocommerce-bacs-bank-details, .thanks__more > section:not(.woocommerce-order-details):not(.woocommerce-customer-details) {
	padding: 18px 20px; background: var(--well); font-size: 14px; line-height: 20px; font-weight: 600; font-stretch: 87.5%; text-transform: none; text-box: none;
}
.thanks .woocommerce-order-details__title, .thanks .woocommerce-column__title { font-size: 20px; margin: 0 0 14px; color: var(--ink); letter-spacing: 0; }
.thanks .woocommerce-table--order-details tfoot th, .thanks .woocommerce-table--order-details tfoot td { font-size: 12px; font-weight: 700; color: var(--grey-strong); }
.thanks .woocommerce-table--order-details tfoot td { color: var(--ink); }
.thanks .woocommerce-table--order-details tfoot tr:last-child th, .thanks .woocommerce-table--order-details tfoot tr:last-child td { font-size: 12px; }
.thanks .woocommerce-table--order-details tfoot tr:has(+ tr:last-child) th, .thanks .woocommerce-table--order-details tfoot tr:has(+ tr:last-child) td { font-size: 18px; color: var(--ink); }
.thanks .woocommerce-table--order-details td.product-name a { text-decoration: underline; text-underline-offset: 3px; }

/* confirmar o e-mail antes de mostrar o pedido */
.verify { display: grid; gap: 20px; max-width: 560px; margin: 36px auto 0; padding: 32px; background: var(--well); }
.verify__head { display: grid; gap: 12px; }
.verify__title { font-size: 24px; line-height: 1; }
.verify__text { font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); text-box: none; }
.verify__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blood); text-underline-offset: 3px; }
.verify__error { font-size: 13px; line-height: 18px; font-weight: 600; font-stretch: 87.5%; text-transform: none; color: var(--blood); text-box: none; }
.verify .field__input { height: 52px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.verify .field__input:focus { box-shadow: inset 3px 0 0 var(--blood), inset 0 0 0 1.5px var(--ink); }
.verify .btn { height: 52px; justify-content: center; }
.wcpage--checkout .thanks__head:only-child { max-width: 560px; margin: 0 auto; }
@media (max-width: 899px) {
	.thanks { gap: 26px; }
	.thanks__actions .btn { flex: 1 1 100%; }
	.verify { padding: 22px; margin-top: 28px; }
}

/* pedido recebido: uma coluna de recibo, centrada */
.thanks { max-width: 880px; margin: 0 auto; display: grid; gap: 32px; }
.thanks__head { display: grid; gap: 18px; }
.thanks__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .1em; color: var(--grey); }
.thanks__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--blood); }
body.sg .thanks .woocommerce-thankyou-order-received, .thanks__title {
	font-size: clamp(40px, 5vw, 64px); line-height: .96; margin: 0; padding: 0; background: none; color: var(--ink); text-box: trim-both cap alphabetic;
}
.thanks__lede {
	max-width: 56ch; font-size: 16px; line-height: 24px; font-weight: 500; font-stretch: 87.5%; text-transform: none;
	color: var(--grey-strong); text-box: none; background: none; padding: 0;
}
.thanks__actions { display: flex; flex-wrap: wrap; gap: 8px; background: none; padding: 0; }
.thanks__actions .btn { height: 52px; padding: 0 24px; }
.thanks__more { display: grid; gap: 32px; }
/* instruções do pagamento (Pix, boleto…) que o gateway escreve */
.thanks__more > p, .thanks__more > .woocommerce-bacs-bank-details, .thanks__more > section:not(.woocommerce-order-details):not(.woocommerce-customer-details) {
	padding: 18px 20px; background: var(--well); font-size: 14px; line-height: 20px; font-weight: 600; font-stretch: 87.5%; text-transform: none; text-box: none;
}
.thanks .woocommerce-order-details__title, .thanks .woocommerce-column__title { font-size: 20px; margin: 0 0 14px; color: var(--ink); letter-spacing: 0; }
.thanks .woocommerce-table--order-details tfoot th, .thanks .woocommerce-table--order-details tfoot td { font-size: 12px; font-weight: 700; color: var(--grey-strong); }
.thanks .woocommerce-table--order-details tfoot td { color: var(--ink); }
.thanks .woocommerce-table--order-details tfoot tr:last-child th, .thanks .woocommerce-table--order-details tfoot tr:last-child td { font-size: 12px; }
.thanks .woocommerce-table--order-details tfoot tr:has(+ tr:last-child) th, .thanks .woocommerce-table--order-details tfoot tr:has(+ tr:last-child) td { font-size: 18px; color: var(--ink); }
.thanks .woocommerce-table--order-details td.product-name a { text-decoration: underline; text-underline-offset: 3px; }

/* confirmar o e-mail antes de mostrar o pedido */
.verify { display: grid; gap: 20px; max-width: 560px; margin: 36px auto 0; padding: 32px; background: var(--well); }
.verify__head { display: grid; gap: 12px; }
.verify__title { font-size: 24px; line-height: 1; }
.verify__text { font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); text-box: none; }
.verify__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blood); text-underline-offset: 3px; }
.verify__error { font-size: 13px; line-height: 18px; font-weight: 600; font-stretch: 87.5%; text-transform: none; color: var(--blood); text-box: none; }
.verify .field__input { height: 52px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.verify .field__input:focus { box-shadow: inset 3px 0 0 var(--blood), inset 0 0 0 1.5px var(--ink); }
.verify .btn { height: 52px; justify-content: center; }
.wcpage--checkout .thanks__head:only-child { max-width: 560px; margin: 0 auto; }
@media (max-width: 899px) {
	.thanks { gap: 26px; }
	.thanks__actions .btn { flex: 1 1 100%; }
	.verify { padding: 22px; margin-top: 28px; }
}

.woocommerce-order, .woocommerce-order-details, .woocommerce-customer-details { display: grid; gap: 24px; }
.wcpage--checkout .woocommerce-order { padding-top: 0; }
.woocommerce-notice--success, .woocommerce-thankyou-order-received {
	font-size: 45px; line-height: 45px; text-transform: uppercase; background: none; padding: 0; display: block;
}
.woocommerce-order-overview, .woocommerce-thankyou-order-details {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 5px; padding: 0; margin: 0;
}
.woocommerce-order-overview li, .woocommerce-thankyou-order-details li {
	display: grid; gap: 8px; padding: 16px; background: var(--well); font-size: 10px; color: var(--grey); line-height: 1.2;
}
.woocommerce-order-overview li strong, .woocommerce-thankyou-order-details li strong {
	font-size: 16px; color: var(--ink); font-weight: 700; line-height: 1.2;
}
.woocommerce-order h2, .woocommerce-order-details h2, .woocommerce-customer-details h2 { font-size: 16px; margin-bottom: 12px; }
.woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { font-size: 12px; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { font-size: 16px; }
.woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.woocommerce-columns--addresses .woocommerce-column { background: var(--well); padding: 20px; }
.woocommerce-columns--addresses address {
	font-style: normal; font-size: 14px; line-height: 20px; font-weight: 500; font-stretch: 87.5%; text-transform: none; text-box: none;
}
.woocommerce-order-downloads { display: none; }
@media (max-width: 899px) {
	.woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ===================================================================== rastreio */
.trk { display: grid; gap: 24px; background: var(--well); padding: 24px; }
.trk__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.trk__step { display: grid; gap: 8px; font-size: 10px; color: var(--dim); position: relative; }
.trk__step::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line); z-index: 0; }
.trk__step:last-child::after { display: none; }
.trk__dot { position: relative; z-index: 1; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.trk__step.is-done { color: var(--ink); }
.trk__step.is-done .trk__dot { background: var(--ink); }
.trk__step.is-done::after { background: var(--ink); }
.trk__step.is-current .trk__dot { background: var(--blood); box-shadow: 0 0 0 4px rgba(186,34,48,.18); }
.trk__label { display: block; }
.trk__date { display: block; font-size: 10px; color: var(--grey); }
.trk__ship { display: grid; gap: 10px; }
.trk__code { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.trk__code b { font-size: 16px; letter-spacing: .02em; }
.trk__copy { font-size: 10px; color: var(--grey); }
.trk__copy:hover { color: var(--ink); }
.trk__carrier { font-size: 12px; color: var(--grey); }
.trk__link { align-self: start; }
.trk__events { display: grid; gap: 12px; }
.trk__event { display: grid; gap: 4px; font-size: 12px; padding-left: 16px; position: relative; }
.trk__event::before { content: ""; position: absolute; left: 0; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.trk__event:first-child::before { background: var(--blood); }
.trk__event time { color: var(--grey); font-size: 10px; }
.trk__event span { color: var(--grey); }
.trk__empty, .trk__alert { font-size: 14px; color: var(--grey-strong); }
.trk__alert { color: var(--blood); }
.trkform { display: grid; gap: 16px; max-width: 520px; background: var(--well); padding: 28px; }
.trkform .btn { justify-content: center; height: 48px; }
.trkform__error { font-size: 12px; color: var(--blood); }
.prose .trk { margin-top: 24px; }
.trkorder { display: grid; gap: 10px; background: #fff; padding: 20px; margin-bottom: 20px; }
.trkorder__items { display: grid; gap: 6px; font-size: 12px; }
.trkorder__items li { display: flex; justify-content: space-between; gap: 10px; }
.trkorder__total { display: flex; justify-content: space-between; font-size: 16px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
.trkform__again { margin-top: 20px; }
.trkorder__num { margin-bottom: 4px; }
.trkorder__meta { color: var(--grey); display: flex; gap: 8px; flex-wrap: wrap; }
.trkorder__item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; }
.trkorder__variant { grid-column: 2; font-size: 10px; color: var(--grey); }
.trkorder__qty { color: var(--grey); }
.trklist { display: grid; gap: 5px; }
.trklist__row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 15px; padding: 14px; background: var(--well); font-size: 12px; transition: background-color 150ms var(--e-standard); }
.trklist__row:hover { background: var(--chip); }
.trklist__date { color: var(--grey); }
.trklist__code { font-variant-numeric: tabular-nums; }
.trklist__empty, .trklist__note { color: var(--grey-strong); }
.trklist__note { margin-top: 16px; }
.trklist__note a { color: var(--blood); }
@media (max-width: 899px) {
	.trklist__row { grid-template-columns: auto 1fr; row-gap: 6px; }
	.trkorder__item { grid-template-columns: auto 1fr; }
	.trkorder__price { grid-column: 2; text-align: right; }
}

/* ===================================================================== ajuda
   Envios e prazos, Trocas, Rastrear pedido, Contato e Privacidade: a foto da
   campanha presa de um lado enquanto o texto corre do outro. No celular a
   foto vira capa, com o título por cima. */
.help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.help--nophoto { grid-template-columns: minmax(0, 1fr); }
.help__media { position: sticky; top: 0; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: var(--ink); }
.help__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* sem foto escolhida: só o emblema da 710, grande, sobre preto */
.help__media--brand { display: grid; place-items: center; }
/* a arte do emblema é preta: no fundo preto ela vai invertida (face branca) */
.help__emblem { width: auto; height: auto; perspective: 1400px; cursor: grab; filter: invert(1); }

.help__main {
	min-height: 100vh; min-height: 100dvh;
	padding: var(--top) clamp(24px, 4.5vw, 88px) 120px clamp(24px, 4vw, 72px);
	display: grid; align-content: start; gap: 48px;
}
.help--nophoto .help__main { width: 100%; max-width: 920px; margin: 0 auto; }
.help__head { display: grid; gap: 22px; }
.help__mast { display: grid; gap: 20px; }
.help__eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .1em; color: var(--grey); }
.help__eyebrow::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--blood); }
.help__eyebrow span { color: var(--ink); }
.help__title { font-size: clamp(48px, 5.2vw, 84px); line-height: .96; max-width: 12ch; }
.help__lede {
	max-width: 46ch; font-size: 17px; line-height: 25px; font-weight: 500; font-stretch: 87.5%;
	text-transform: none; color: var(--grey-strong); text-box: none;
}

.help__nav { display: flex; flex-wrap: wrap; gap: 4px; }
.help__nav a {
	display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; white-space: nowrap;
	background: var(--well); color: var(--grey-strong); font-size: 11px; letter-spacing: .04em;
	transition: background-color 150ms var(--e-standard), color 150ms var(--e-standard);
}
.help__nav a span { font-size: 9px; color: var(--dim); transition: color 150ms var(--e-standard); }
.help__nav a:hover { background: var(--chip); color: var(--ink); }
.help__nav a.is-on { background: var(--ink); color: #fff; }
.help__nav a.is-on span { color: rgba(255, 255, 255, .55); }

/* o texto da página, seja qual for o invólucro que veio junto */
.help__body { display: flow-root; max-width: 640px; }
body.sg .help__body :is(p, li, h2, h3, h4, h5, blockquote, dd, dt, td, th, span, strong, b, em, i, a, small) { text-box: none; }
.help__body :is(p, li, blockquote) {
	font-size: 16px; line-height: 26px; font-weight: 500; font-stretch: 87.5%; text-transform: none; color: #2a2a2a;
}
.help__body :is(p, ul, ol, blockquote, table, .help__qa, form, section) + :is(p, ul, ol, blockquote, table, .help__qa, form, section) { margin-top: 18px; }
.help__body :is(strong, b) { font-weight: 700; color: var(--ink); }
.help__body a:not(.btn) {
	color: var(--ink); text-decoration: underline; text-decoration-color: var(--blood); text-decoration-thickness: 1.5px;
	text-underline-offset: 4px; overflow-wrap: anywhere; transition: color 150ms var(--e-standard);
}
.help__body a:not(.btn):hover { color: var(--blood); }
.help__body :is(h2, h3, h4) {
	margin: 44px 0 18px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--line);
	font-size: 24px; line-height: 1; font-weight: 700; font-stretch: 75%; text-transform: uppercase; color: var(--ink);
}
.help__body :is(h2, h3, h4) :is(strong, b) { font-weight: inherit; }
.help__body > :first-child, .help__body > div > :first-child { margin-top: 0; }

.help__body :is(ul, ol) { margin: 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--line); }
.help__body :is(ul, ol) > li { position: relative; padding: 14px 0 14px 24px; box-shadow: inset 0 -1px 0 var(--line); }
.help__body ul > li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 6px; height: 6px; background: var(--blood); }
.help__body ol { counter-reset: help; }
.help__body ol > li { counter-increment: help; }
.help__body ol > li::before {
	content: counter(help, decimal-leading-zero); position: absolute; left: 0; top: 20px;
	font-size: 11px; line-height: 1; color: var(--grey); font-stretch: 75%; font-weight: 700;
}
.help__body li > p { margin: 0; }
/* "Sudeste: 2 a 5 dias úteis" vira linha de tabela */
.help__body li.help__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; }
.help__body li.help__row::before { display: none; }
.help__k { font-size: 20px; line-height: 1; font-weight: 700; font-stretch: 75%; text-transform: uppercase; color: var(--ink); }
.help__v { font-size: 15px; line-height: 1; font-weight: 600; font-stretch: 87.5%; text-transform: none; color: var(--grey-strong); text-align: right; font-variant-numeric: tabular-nums; }
/* "Pergunta?" + resposta vira bloco */
.help__qa { display: grid; gap: 12px; padding-top: 26px; box-shadow: inset 0 1px 0 var(--line); }
.help__body .help__q { margin: 0; padding: 0; box-shadow: none; font-size: 22px; line-height: 1.02; }
.help__body :is(p, ul, ol) + .help__qa, .help__body .help__qa + :is(p, .help__qa) { margin-top: 30px; }

/* "E-mail: endereço" vira cartão clicável */
.help__body a.help__channel {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px;
	padding: 24px 26px; background: var(--well); color: var(--ink); text-decoration: none;
	transition: background-color 200ms var(--e-standard), color 200ms var(--e-standard);
}
.help__body a.help__channel:hover { background: var(--ink); color: #fff; }
.help__body a.help__channel + a.help__channel { margin-top: 8px; }
.help__body p + a.help__channel { margin-top: 24px; }
.help__body a.help__channel + p { margin-top: 28px; }
.help__channel-k { grid-column: 1; font-size: 11px; line-height: 1; letter-spacing: .08em; color: var(--grey); text-transform: uppercase; }
.help__channel-v { grid-column: 1; font-size: 28px; line-height: 1; overflow-wrap: anywhere; text-transform: uppercase; }
.help__channel-go { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 24px; line-height: 1; transition: transform 200ms var(--e-standard); }
.help__body a.help__channel:hover .help__channel-go { transform: translateX(4px); }
.help__body a.help__channel:hover .help__channel-k { color: rgba(255, 255, 255, .6); }

/* rastreio dentro da página de ajuda */
.help .trkform { max-width: none; padding: 32px; gap: 20px; }
.help .trkform .btn { height: 52px; }
.help .trkorder, .help .trk { margin-top: 0; }

.help__cta { display: grid; gap: 20px; max-width: 640px; padding-top: 32px; box-shadow: inset 0 2px 0 var(--ink); }
.help__cta-t { font-size: 32px; line-height: 1; }
.help__cta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.help__cta .btn { height: 52px; padding: 0 24px; }

@media (max-width: 899px) {
	.help { grid-template-columns: minmax(0, 1fr); }
	.help__main, .help__head { display: contents; }
	.help__media { grid-row: 1; grid-column: 1; position: relative; top: auto; height: min(80svh, 700px); }
	.help--brand .help__media { height: min(64svh, 560px); place-items: start center; padding-top: calc(var(--top) + 8px); }
	.help--brand .help__media::after { display: none; }
	.help--brand .fmark__rot { --emblem: 180px !important; }
	.help__media::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(0deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .28) 36%, rgba(0, 0, 0, 0) 60%);
	}
	.help__mast { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 1; gap: 16px; padding: 0 16px 28px; color: #fff; }
	.help__eyebrow { color: rgba(255, 255, 255, .78); }
	.help__eyebrow span { color: #fff; }
	.help__title { font-size: 50px; line-height: .96; max-width: none; }
	.help--nophoto .help__mast { grid-row: auto; padding-top: var(--top); padding-bottom: 0; color: var(--ink); }
	.help--nophoto .help__eyebrow { color: var(--grey); }
	.help--nophoto .help__eyebrow span { color: var(--ink); }
	.help__lede { margin: 28px 16px 0; font-size: 16px; line-height: 23px; }
	.help__nav { margin-top: 24px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.help__nav::-webkit-scrollbar { display: none; }
	.help__body { margin: 36px 16px 0; }
	.help__body :is(p, li, blockquote) { font-size: 15px; line-height: 24px; }
	.help__k { font-size: 18px; }
	.help__v { font-size: 14px; }
	.help__body .help__q { font-size: 20px; }
	.help__body a.help__channel { padding: 20px; }
	.help__channel-v { font-size: 22px; }
	.help .trkform { padding: 22px; }
	.help__cta { margin: 56px 16px 96px; }
	/* no celular a gaveta vira folha que sobe de baixo */
	.dwr__panel { top: auto; left: 0; width: auto; max-height: 88svh; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .2); }
	.dwr__head { padding: 16px 16px 14px; }
	.dwr__body { padding: 20px 16px 40px; }
	.dwr__zoom.is-zoom img { width: 260%; }
	.found { padding: 0 16px; gap: 6px; }
	.found__term, .catbar a.found__x { height: 28px; }
	.found__n { font-size: 10px; }
	.help__cta-t { font-size: 28px; }
	.help__cta-row .btn { flex: 1 1 100%; }
}

/* ===================================================================== lookbook */
.lbgrid { padding: 90px 10px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lbgrid.is-list { grid-template-columns: 1fr; }
.lbgrid.is-list .lbcard { aspect-ratio: 16 / 7; }
.lbcard { position: relative; display: block; aspect-ratio: 4 / 5; overflow: clip; background: var(--well); cursor: pointer; }
.lbcard img { width: 100%; height: 100%; object-fit: cover; }
.lbcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; }
.lbcard__t { z-index: 1; position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; color: #fff; font-size: 24px; line-height: 24px; }
.dock { position: relative; display: flex; justify-content: center; padding: 10px 0 40px; }
.lbtoggle { display: flex; gap: 5px; align-items: center; }
.lbtoggle b { font-weight: 700; color: var(--ink); }
.lbtoggle .off { color: var(--grey); }
.look { padding: 0 10px 80px; }
.look__head { padding: var(--top) 10px 30px; display: grid; gap: 16px; max-width: 760px; }
.look__head h1 em { font-style: normal; opacity: .5; }
.look__lede { color: var(--grey-strong); max-width: 60ch; }
.look__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.look__fig { overflow: clip; background: var(--well); }
.look__fig img { width: 100%; height: 100%; object-fit: cover; }
.look__fig--wide { grid-column: span 2; }

/* ===================================================================== textos */
.prose { padding-bottom: 120px; max-width: 900px; margin: 0 auto; }
.prose__body { color: var(--ink); }
.prose__body h2, .prose__body h3 { font-size: 24px; margin: 32px 0 12px; text-transform: uppercase; }
.prose__body p, .prose__body li { font-size: 14px; line-height: 20px; }
.prose__body p + p { margin-top: 12px; }
.prose__body ul, .prose__body ol { margin: 12px 0 12px 20px; }
.prose__body ul li { list-style: disc; }
.prose__body ol li { list-style: decimal; }
.prose__body a:not(.btn):not(.trk__link) { color: var(--blood); }
.prose__body .btn--black, .prose__body .btn--black .lbl { color: #fff; }
.prose__body .btn { text-decoration: none; }
.postlist { display: grid; gap: 5px; }
.postlist a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px; background: var(--well); font-size: 16px; }
.postlist time { font-size: 12px; color: var(--grey); }

.e404 { padding: var(--top) var(--pad) 140px; display: grid; gap: 20px; place-items: center; text-align: center; }
.e404__num { font-size: 120px; line-height: 1; color: var(--blood); }
.e404__acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.page-head--empty { display: grid; gap: 16px; place-items: center; text-align: center; padding-bottom: 80px; }

/* ===================================================================== rodapé */
.foot { position: relative; padding: 120px var(--pad) 24px; background: #fff; }
.foot__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 30px; row-gap: 48px; max-width: 1560px; margin: 0 auto; }
.foot h2 { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--grey); margin-bottom: 22px; }
.foot ul { display: grid; gap: 14px; }
.foot li a { font-size: 15px; font-stretch: 87.5%; letter-spacing: .02em; cursor: pointer; transition: color 150ms var(--e-standard); }
.foot li a:hover { color: var(--grey); }
.foot__news { grid-column: span 2; max-width: 320px; }
.nl { display: grid; }
.nl-input {
	width: 100%; height: 41px; padding: 0 15px; font-size: 16px; background: var(--chip); color: var(--ink); outline: none;
	transition: background-color 400ms var(--e-standard), color 400ms var(--e-standard);
}
.nl-input::placeholder { color: var(--grey-strong); transition: color 400ms var(--e-standard); }
.nl-input:hover, .nl-input:focus { background: #000; color: #fff; box-shadow: none; }
.nl-input:hover::placeholder, .nl-input:focus::placeholder { color: rgba(255,255,255,.7); }
.nl-check { display: flex; gap: 10px; align-items: center; margin-top: 10px; cursor: pointer; }
.nl-check span:last-child { font-size: 12px; line-height: 16px; font-weight: 500; font-stretch: 87.5%; text-transform: none; text-box: none; }
.nl-btn { margin-top: 10px; justify-content: center; }
.nl-msg { margin-top: 10px; font-size: 12px; line-height: 16px; font-weight: 500; font-stretch: 87.5%; text-transform: none; min-height: 16px; text-box: none; }
.nl-msg.is-error { color: var(--blood); }
.foot__mark { display: flex; justify-content: flex-end; align-items: flex-start; }
.fmark { width: 170px; height: 150px; perspective: 700px; display: grid; place-items: center; cursor: grab; }
.fmark__rot { position: relative; width: var(--emblem, 120px); height: var(--emblem, 120px); transform-style: preserve-3d; animation: sg-spin 9s linear infinite; }
.fmark__rot img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: visible; }
.foot__bottom {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 32px;
	max-width: 1560px; margin: 90px auto 0; padding-top: 22px; box-shadow: inset 0 1px 0 var(--line);
	font-size: 10px; letter-spacing: .08em;
}
.foot__bottom > * { font-size: 10px; letter-spacing: .08em; }
.foot__bottom button { color: var(--grey); transition: color 150ms var(--e-standard); }
.foot__bottom button:hover { color: var(--ink); }
.foot__social { display: inline-flex; gap: 18px; }
.foot__credit { color: var(--grey); }
.foot__credit b { color: var(--ink); font-weight: 700; }
a.foot__credit { transition: color 150ms var(--e-standard); }
a.foot__credit:hover { color: var(--ink); }
.foot__news h2 { margin-bottom: 18px; }
@keyframes sg-spin { from { transform: rotateX(-8deg) rotateY(0deg); } to { transform: rotateX(-8deg) rotateY(360deg); } }

/* ===================================================================== recados e travas */
.sg-toast {
	position: fixed; left: 50%; bottom: 96px; z-index: 300; transform: translateX(-50%);
	max-width: min(92vw, 520px); padding: 12px 16px; background: var(--ink); color: #fff;
	border-radius: 10px; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none;
	box-shadow: 0 10px 30px rgba(0,0,0,.25); text-box: none;
}
.cart-empty { text-align: center; padding: 40px 0 0; }
.cartbtns--center { justify-content: center; margin-top: 20px; }
html.sg-locked, html.sg-locked body { overflow: hidden; }

/* ===================================================================== Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ===================================================================== telas médias */
@media (max-width: 1399px) {
	.card { grid-column: span 3; }
}

@media (max-width: 1099px) {
	.pdp { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.gallery { grid-column: 1 / 5; }
	.info { grid-column: 5 / 9; padding-top: 100px; }
	.cpage { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.cpage__head, .cpage__lines { grid-column: 1 / 6; }
	.cpage__sum { grid-column: 6 / 9; }
	.ckt { grid-template-columns: 1fr; }
	.ckt__review { position: static; }
	.lbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== celular */
@media (max-width: 899px) {
	:root { --pad: 10px; --top: 108px; }

	/* celular: como sempre foi — os logos e o hambúrguer, nada mais.
	   A pílula cresceu um pouco para os dois logos caberem inteiros. */
	.pill { height: 58px; top: 10px; }
	.pill__nav { display: none; }
	.pill__menu { display: flex; padding: 0 16px; }
	.pill__menu .roll { display: none; }
	.pill__bars { display: grid; gap: 4px; }
	.pill__bars b { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
	.pill__logos { padding: 0 4px 0 16px; }
	.pill__logo { padding-right: 8px; }
	.pill__logo:first-child { padding-right: 10px; }
	.pill__logo img.logo710, .pill__logo img.logogb { height: 15px; }
	.pill__bar { height: 18px; margin-right: 10px; }
	.mega { display: none !important; }
	.abar__cart { display: inline-flex; }

	.hero { padding: 0; }
	.hero__frame { border-radius: 0; height: 100dvh; }
	.hero__grad { background: none; }
	.hero__grad::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: var(--hero-grad-b); }
	.drum, .hero > .hero__frame > .hero__cta { display: none; }
	.hbar { display: flex; }
	.hero__pause { left: auto; right: 20px; top: 76px; bottom: auto; }

	.catbar { padding-top: 72px; }
	.catbar ul { width: auto; margin: 0; padding: 20px 0; overflow-x: auto; scrollbar-width: none; }
	.catbar ul::-webkit-scrollbar { display: none; }
	.catbar__bar { bottom: 16px; }
	.catbar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 56px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }

	.shop { padding-bottom: 140px; }
	.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
	.card { grid-column: span 1; }
	.card__veil, .card__quick { display: none; }
	.card__info { position: static; opacity: 1; transform: none; padding: 10px 0 0; color: var(--ink) !important; }
	.card__name { font-size: 12px; line-height: 12px; }
	.card__info .sale, .card__info .tag { color: var(--blood) !important; }
	.card__info .tag { background: none !important; padding: 0 !important; }
	.card__price s { color: var(--grey) !important; }

	.pdp { display: block; padding: 0 0 140px; }
	.gallery { padding-top: 0; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
	.gallery::-webkit-scrollbar { display: none; }
	.gtile { flex: 0 0 100%; scroll-snap-align: start; }
	.mslider__bars { display: flex; position: absolute; left: 10px; top: calc(100vw - 30px); }
	.mslider__bars button { width: 20px; height: 24px; display: grid; place-items: center; }
	.mslider__bars i { width: 15px; height: 4px; background: rgba(0,0,0,.18); display: block; }
	.mslider__bars button.is-on i { background: #000; }
	/* a barra fixa de compra não pode cobrir o frete */
	.info { position: static; padding: 20px 10px 140px; gap: 25px; }
	.plink { font-size: 12px; height: 34px; }
	.info h1 { max-width: none; }
	.actrow, .pdp__msg { display: none; }
	.back { top: 14px; left: 10px; }

	.abar--pdp { display: flex; }
	.abar--pdp .btn--black { flex: 1; }
	.cpage { display: block; padding-top: var(--top); }
	.cpage__sum { position: static; margin-top: 40px; }
	.cpage__head h1, .ckt__head h1, .login__head h1 { font-size: 32px; line-height: 32px; }

	/* formulários: uma coluna só, com respiro entre rótulo e campo */
	.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper, .woocommerce-address-fields__field-wrapper,
	.woocommerce-EditAccountForm { grid-template-columns: 1fr; gap: 22px; }
	.ckt { grid-template-columns: 1fr; gap: 40px; }
	.ckt__fields, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields,
	#customer_details, #customer_details > .col-1, #customer_details > .col-2 { gap: 40px; }
	.ckt__review { position: static; padding: 22px; }
	/* o rodapé do bloco não pode ficar pendurado à direita numa tela estreita */
	.fsec__head { grid-template-columns: auto 1fr; gap: 6px 10px; padding-bottom: 14px; }
	.fsec__note { grid-column: 1 / -1; }
	.fsec__t { font-size: 17px; }
	.fsec--account { padding: 20px; }
	form.login-form--inline { padding: 20px; gap: 18px; }
	.login-form__grid { grid-template-columns: 1fr; gap: 18px; }
	form.login-form--inline .btn { justify-self: stretch; min-width: 0; }
	/* o texto da caixa quebra em duas linhas: o quadrado acompanha o título */
	.check.create-account, .check.ship { gap: 12px; }
	.accnav ul { gap: 4px; margin-bottom: 26px; }
	.accnav__item { height: 38px; padding: 0 12px; font-size: 12px; }
	.acccards { grid-template-columns: 1fr; }
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--line); }
	.woocommerce-orders-table td { padding: 0; box-shadow: none; }
	.woocommerce-orders-table td::before { content: attr(data-title) ": "; color: var(--grey); font-size: 10px; letter-spacing: .06em; }
	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; text-align: left; }
	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
	.foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot__news { grid-column: span 2; max-width: none; }
	.foot__mark { grid-column: span 2; justify-content: center; }
	.foot { padding-top: 80px; }
	.woocommerce-Addresses { grid-template-columns: 1fr; }
	.login--two { grid-template-columns: 1fr; }
	.lbgrid { grid-template-columns: 1fr; padding-top: 80px; }
	.look__grid { grid-template-columns: 1fr; }
	.look__fig--wide { grid-column: span 1; }
	.trk__steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
	.trk__step { grid-template-columns: 12px 1fr auto; align-items: center; }
	.trk__step::after { left: 5px; right: auto; top: 18px; bottom: -14px; width: 2px; height: auto; }
	.t45 { font-size: 32px; line-height: 32px; }
	.e404__num { font-size: 80px; }
}

@media (max-width: 420px) {
	.pill__logo { padding-left: 16px; }
	.pill__menu { padding: 0 16px; }
}

/* ===================================================================== movimento reduzido */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.fmark__rot { animation: none; transform: rotateX(-8deg) rotateY(-28deg); }
}