/* ---------------------------------------------------------------------------
   Casa do Fusca - loja

   Índice
      1. tokens        7. hero            13. busca
      2. base          8. seções          14. institucionais
      3. botões        9. produtos        15. página de produto
      4. cabeçalho    10. depoimentos     16. contato
      5. menu         11. FAQ             17. avisos
      6. breadcrumb   12. listagem        18. mapa
                                          19. rodapé
                                          20. whatsapp flutuante
                                          21. conta do cliente
                                          22. carrinho
                                          23. frete
                                          24. checkout
                                          25. tablet  (<= 1024px)
                                          26. celular (<=  767px)

   Toda cor vem de um token: nenhuma regra deve trazer hex literal, para que uma
   troca de identidade visual aconteça só no bloco :root.
   Breakpoints: 768px (tablet) e 1025px (desktop, o mesmo `lg` do site atual).
--------------------------------------------------------------------------- */
/* --- 1. tokens ---------------------------------------------------------- */
:root {
    --brand: #fa752a;
    --brand-dark: #e0651c;
    --navy: #203556;
    --navy-light: #2b456b;
    --text: #292929;
    --muted: #6b7280;
    --soft: #fff4ee;
    --line: #e9e2dd;
    --white: #fff;
    --star: #f4b400;
    --whatsapp: #25d366;
    --whatsapp-dark: #1fb757;
    --success-bg: #eaf7ee;
    --success-line: #b6e0c2;
    --success-text: #1d6b36;
    --error-bg: #fdeceb;
    --error-line: #f0c2c2;
    --error-text: #a12622;
    --warning-bg: #fff8e6;
    --warning-line: #f0dcb0;
    --warning-text: #8a6320;
    --placeholder-a: #f4f0ed;
    --placeholder-b: #eae4df;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow: 0 2px 14px rgba(32, 53, 86, .08);
    --container: 1280px;
}
/* --- 2. base ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
}
/* O atributo `hidden` vale menos que qualquer regra de autor que declare display — um
   `.btn { display: inline-flex }` o anula. Esta linha devolve ao atributo o efeito esperado. */
[hidden] {
    display: none !important;
}
body {
    margin: 0;
    font-family: 'Exo', 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
/* Link dentro de texto vem sublinhado: cor sozinha nao distingue o que e clicavel. Navegacao
   e botoes seguem sem, porque o formato deles ja diz. */
p a:not(.btn),
li a:not(.btn),
label a:not(.btn),
.alert a:not(.btn),
.field__help a,
.account-form__link,
.account-card__foot a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}
p a:not(.btn):hover,
li a:not(.btn):hover,
label a:not(.btn):hover,
.alert a:not(.btn):hover,
.account-form__link:hover,
.account-card__foot a:not(.btn):hover {
    color: var(--brand-dark);
    text-decoration-thickness: 2px;
}
h1, h2, h3 {
    margin: 0;
    color: var(--navy);
    font-weight: 700;
    line-height: 1.15;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}
.container--narrow {
    max-width: 900px;
}
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--brand);
    color: var(--white);
}
.skip-link:focus {
    left: 12px;
    top: 12px;
}
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.icon {
    width: 22px;
    height: 22px;
    flex: none;
}
.icon--xs {
    width: 15px;
    height: 15px;
}
.icon--lg {
    width: 30px;
    height: 30px;
}
/* --- 3. botões ---------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.btn--primary {
    background: var(--brand);
    color: var(--white);
}
.btn--primary:hover {
    background: var(--brand-dark);
}
.btn--whatsapp {
    background: var(--whatsapp);
    color: var(--white);
}
.btn--whatsapp:hover {
    background: var(--whatsapp-dark);
}
.btn--ghost {
    background: transparent;
    color: var(--white);
}
.btn--ghost:hover {
    color: var(--brand);
}
/* Botão de contorno, para fundo claro: o ghost é branco e serve ao hero escuro. */
.btn--outline {
    background: transparent;
    border: 1px solid var(--line-strong, var(--line));
    color: var(--text);
}
.btn--outline:hover {
    border-color: var(--brand);
    color: var(--brand);
}
/* Acao destrutiva: contorno normal, cor de risco so no hover, para nao gritar na lista. */
.btn--risco:hover {
    border-color: var(--error-line);
    color: var(--error-text);
}
.btn--sm {
    padding: 10px 22px;
    font-size: 12px;
}
.btn--block {
    display: flex;
    width: 100%;
}
.btn--icon .icon {
    padding: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}
/* --- 4. cabeçalho ------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--navy);
    color: var(--white);
}
.header-top__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.header-logo {
    flex: none;
    text-align: center;
}
.header-logo img {
    width: 200px;
}
.header-logo__tag {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--white);
}
.header-search {
    display: flex;
    flex: 1;
    max-width: 590px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.header-search input {
    flex: 1;
    min-width: 0;
    padding: 12px 22px;
    border: 0;
    outline: 0;
    color: var(--text);
}
.header-search button {
    display: flex;
    align-items: center;
    padding: 0 26px;
    border: 0;
    background: var(--brand);
    color: var(--white);
    cursor: pointer;
}
.header-search button:hover {
    background: var(--brand-dark);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none;
}
.header-cart {
    position: relative;
    display: flex;
}
.header-account .icon {
    display: none;
}
.header-cart__count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--brand);
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.header-cart__count[data-empty] {
    display: none;
}
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--white);
}
/* --- 5. menu ------------------------------------------------------------ */
.site-menu {
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-menu__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.site-menu__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-menu__item {
    position: relative;
}
.site-menu__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
}
.site-menu__link:hover,
.site-menu__link.is-active {
    color: var(--brand);
}
.site-menu__caret {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
}
.site-menu__item.has-dropdown > .site-menu__link {
    padding-right: 34px;
}
.site-menu__item.has-dropdown:hover .site-menu__caret,
.site-menu__item.is-open .site-menu__caret {
    color: var(--brand);
}
.site-menu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: none;
    grid-auto-flow: row;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--white);
    box-shadow: 0 12px 30px rgba(32, 53, 86, .18);
    /* Rede final: por mais que uma categoria cresça, o painel nunca ultrapassa a tela. Sem
       isto, bastaria a 19ª subcategoria para o problema voltar. */
    max-height: min(70vh, 560px);
    max-width: calc(100vw - 32px);
    overflow-y: auto;
}
.site-menu__item.is-open > .site-menu__dropdown {
    display: grid;
}
/* A coluna extra entra a cada seis subcategorias, até três — a classe vem do componente, que
   é quem sabe quantas são. */
.site-menu__dropdown--cols-1 {
    grid-template-columns: minmax(290px, max-content);
}
.site-menu__dropdown--cols-2 {
    grid-template-columns: repeat(2, minmax(240px, max-content));
}
.site-menu__dropdown--cols-3 {
    grid-template-columns: repeat(3, minmax(230px, max-content));
}
/* Os últimos itens do menu abrem para a esquerda: um painel de três colunas aberto no fim da
   barra escaparia pela borda direita da janela. */
.site-menu__item:nth-last-child(-n+3) > .site-menu__dropdown {
    left: auto;
    right: 0;
}
.site-menu__dropdown a {
    display: block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--navy);
}
.site-menu__dropdown a:hover {
    color: var(--brand);
}
.social {
    display: flex;
    gap: 10px;
    flex: none;
}
.social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
}
.social a:hover {
    background: var(--brand-dark);
}
.social .icon {
    width: 17px;
    height: 17px;
}
/* --- 6. breadcrumb ------------------------------------------------------ */
.breadcrumb {
    padding: 14px 0;
    background: var(--brand);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.breadcrumb__sep {
    margin: 0 6px;
    opacity: .6;
}
/* O `a` da base tira o sublinhado, então sem isto o link fica idêntico ao texto e o
   visitante só descobre o que é clicável clicando. */
.breadcrumb__link {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    text-decoration-thickness: 2px;
}
.breadcrumb__current {
    opacity: .85;
}
/* --- 7. hero ------------------------------------------------------------ */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: 80px 0 150px;
    /* A imagem fica aqui, e não em style inline, porque a CSP da loja não permite atributo style. O caminho é
       relativo ao CSS, então continua válido se a aplicação for servida em subdiretório. */
    background-color: var(--navy);
    background-image: url('../../img/loja/hero.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 18, 30, .88) 0%, rgba(11, 18, 30, .55) 55%, rgba(11, 18, 30, .3) 100%);
}
.hero__inner {
    position: relative;
    max-width: 900px;
}
.hero h1 {
    font-size: 60px;
    color: var(--white);
}
.hero h1 span {
    color: var(--brand);
}
.hero p {
    max-width: 460px;
    margin: 26px 0 34px;
    font-size: 15px;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.benefits-wrap {
    margin-top: -66px;
    position: relative;
    z-index: 10;
}
.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    padding: 30px 40px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}
.benefits__item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--brand);
}
.benefits__item strong {
    display: block;
    color: var(--navy);
    font-size: 16px;
}
.benefits__item span {
    color: var(--muted);
    font-size: 14px;
}
/* --- 8. seções ---------------------------------------------------------- */
.section {
    padding: 70px 0;
}
.section--alt {
    background: var(--soft);
}
.section__cta {
    margin-top: 36px;
    text-align: center;
}
.section-title {
    margin-bottom: 40px;
    text-align: center;
}
.section-title h2 {
    font-size: 40px;
}
.section-title h2 span {
    color: var(--brand);
}
.section-title p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
}
/* --- 9. produtos -------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.product-grid--boxed {
    padding: 26px;
    border-radius: var(--radius);
    background: var(--soft);
}
.section--alt .product-grid--boxed {
    background: var(--white);
}
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 24px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
    text-align: center;
}
.section--alt .product-card {
    box-shadow: none;
    border: 1px solid var(--line);
}
.product-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 13px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.product-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-bottom: 18px;
}
.product-card__image img {
    max-height: 100%;
    object-fit: contain;
}
/* Quando a foto não carrega, o card mostra um bloco neutro no lugar. */
.product-card__image img.is-missing {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--placeholder-a), var(--placeholder-a) 12px,
        var(--placeholder-b) 12px, var(--placeholder-b) 24px);
}
.product-card__name {
    flex: 1;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.product-card__name a:hover {
    color: var(--brand);
}
.product-card__price {
    margin: 0 0 18px;
    font-size: 15px;
}
.product-card__price del {
    margin-right: 6px;
    color: var(--muted);
    font-weight: 400;
}
.product-card__price ins {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}
/* --- 10. depoimentos ---------------------------------------------------- */
.testimonials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.testimonial {
    position: relative;
    margin-top: 32px;
    padding: 44px 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    text-align: center;
}
.testimonial__avatar {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 4px solid var(--white);
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
}
.testimonial__name {
    font-size: 15px;
}
.testimonial__when {
    margin: 2px 0 8px;
    color: var(--muted);
    font-size: 13px;
}
.testimonial__stars {
    margin: 0 0 12px;
    color: var(--line);
    font-size: 17px;
    letter-spacing: 2px;
}
.testimonial__stars .is-on {
    color: var(--star);
}
.testimonial__text {
    margin: 0;
    font-size: 14px;
}
/* --- 11. FAQ ------------------------------------------------------------ */
.faq {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 26px;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}
.faq-item__question .icon {
    flex: none;
    color: var(--navy);
    transition: transform .2s;
}
.faq-item.is-open .faq-item__question .icon {
    transform: rotate(45deg);
}
.faq-item__answer {
    padding: 0 26px 22px;
}
.faq-item__answer p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}
/* --- 12. listagem, filtros e paginação ---------------------------------- */
.listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}
.listing-toolbar__count {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}
.listing-toolbar__sort select {
    min-width: 280px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
}
/* O mesmo título para a listagem geral e para a busca: dois nomes, uma regra. */
.listing-heading,
.search-heading {
    margin: 0 0 24px;
    font-size: 24px;
}
.listing {
    /* Duas colunas: filtros fixos à esquerda, resultados à direita. A largura da barra é fixa
       para que a grade de produtos não mude de tamanho ao trocar de categoria — com coluna
       flexível, uma categoria com marca de nome comprido estreitaria os cartões. */
    display: grid;
    grid-template-columns: 250px 1fr;
    align-items: start;
    gap: 36px;
}
.listing__results {
    /* min-width: 0 é o que permite a grade encolher dentro do grid: sem isso o conteúdo define
       a largura mínima da coluna e a listagem estoura o container em telas estreitas. */
    min-width: 0;
}
.listing-filters__group {
    margin-bottom: 28px;
}
.listing-filters__title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.listing-filters__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.listing-filters__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--text);
    font-size: 15px;
}
.listing-filters__option:hover {
    background: var(--soft);
}
.listing-filters__option.is-active {
    background: var(--brand);
    color: var(--white);
    font-weight: 600;
}
.listing-filters__label {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Marca aceita mais de uma escolha, e a caixa é o que anuncia isso antes do primeiro clique.
   Desenhada em CSS: um <a> não pode conter <input>, e um checkbox de verdade exigiria script
   para navegar — que a política de conteúdo da loja não permite inline. */
.listing-filters__box {
    flex: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--white);
}
.listing-filters__box::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    margin: 1px auto 0;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg);
}
/* Com várias marcas ligadas, pintar a linha inteira de laranja em cada uma gritaria mais que o
   resultado: aqui o ativo é a caixa marcada e o texto em negrito. */
.listing-filters__option--multi.is-active {
    background: transparent;
    color: var(--navy);
    font-weight: 600;
}
.listing-filters__option--multi.is-active .listing-filters__box {
    border-color: var(--brand);
    background: var(--brand);
}
.listing-filters__option--multi.is-active .listing-filters__box::after {
    opacity: 1;
}
.listing-filters__range {
    margin-top: 14px;
}
.listing-filters__range-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.listing-filters__range-fields input {
    /* min-width: 0 impede o campo de forçar a coluna a crescer: o tamanho padrão de um input
       de texto é maior que a barra de filtros. */
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.listing-filters__range-fields span {
    color: var(--muted);
}
.listing-filters__range .btn {
    padding: 9px 14px;
    font-size: 14px;
}
.listing-filters__count {
    color: var(--muted);
    font-size: 13px;
}
.listing-filters__option.is-active .listing-filters__count,
.listing-filters__option:hover .listing-filters__count {
    color: inherit;
}
.listing-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.listing-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--soft);
    color: var(--navy);
    font-size: 14px;
}
.listing-filters__chip:hover {
    background: var(--brand);
    color: var(--white);
}
.listing-filters__clear {
    color: var(--muted);
    font-size: 14px;
    text-decoration: underline;
}
.listing-filters__more summary {
    padding: 7px 10px;
    color: var(--brand);
    cursor: pointer;
    font-size: 14px;
}
.listing-empty {
    padding: 60px 0;
    color: var(--muted);
    text-align: center;
}
.listing-empty p {
    margin: 0 0 16px;
}
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
}
.pagination__page {
    /* flex: none é o que impede o círculo de virar tira: sem ele o flex encolhe a largura
       quando há links demais na linha, e os números se encavalam. */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--navy);
    font-weight: 600;
}
.pagination__page--nav {
    font-size: 20px;
    line-height: 1;
}
.pagination__gap {
    flex: none;
    display: flex;
    align-items: flex-end;
    height: 42px;
    padding: 0 2px;
    color: var(--muted);
}
.pagination__page:hover,
.pagination__page.is-active {
    background: var(--brand);
    color: var(--white);
}
/* --- 13. busca ---------------------------------------------------------- */
.search-message {
    max-width: 640px;
    margin: 0 auto 40px;
    padding-top: 40px;
    text-align: center;
}
.search-message__title {
    margin-bottom: 12px;
    font-size: 26px;
}
.search-message p {
    margin: 0 0 18px;
    color: var(--muted);
}
.search-message strong {
    color: var(--text);
}
.search-categories {
    padding-bottom: 48px;
    text-align: center;
}
.search-categories__title {
    margin: 0 0 20px;
    font-size: 18px;
}
.search-categories__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.search-categories__item {
    /* Sem largura fixa e com wrap acima: a lista cresce junto com o cadastro de categoria
       sem virar tira encavalada, que é o defeito que a paginação já teve. */
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--navy);
    font-size: 15px;
    transition: background-color .2s, border-color .2s, color .2s;
}
.search-categories__item:hover {
    border-color: var(--brand);
    background: var(--soft);
    color: var(--brand-dark);
}
/* --- 14. institucionais ------------------------------------------------- */
.page-content {
    /* A medida existe para a leitura, não para a tela: linha longa demais faz o olho perder
       o começo da seguinte. ~70 caracteres é onde o texto corrido para de cansar. */
    max-width: 760px;
    margin: 0 auto;
}
.page-content h1 {
    margin-bottom: 24px;
    font-size: 32px;
}
.page-content h2 {
    margin: 36px 0 12px;
    font-size: 21px;
}
.page-content p {
    margin: 0 0 16px;
}
.page-content__lead {
    font-size: 18px;
    color: var(--muted);
}
.page-content ul {
    margin: 0 0 16px;
    padding-left: 22px;
}
.page-content li {
    margin-bottom: 8px;
}
.page-content a {
    color: var(--brand-dark);
    text-decoration: underline;
}
.page-content a:hover {
    color: var(--brand);
}
/* --- 15. página de produto ---------------------------------------------- */
.product-page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
}
.product-gallery__stage {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}
.product-gallery__image {
    width: 100%;
    aspect-ratio: 7 / 6;
    object-fit: contain;
}
.product-gallery__empty,
.product-gallery__image.is-missing {
    width: 100%;
    aspect-ratio: 7 / 6;
    background: repeating-linear-gradient(135deg, var(--placeholder-a) 0 18px, var(--placeholder-b) 18px 36px);
}
.product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.product-gallery__thumb {
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s;
}
.product-gallery__thumb:hover,
.product-gallery__thumb:focus-visible {
    border-color: var(--brand);
}
.product-gallery__thumb.is-active {
    border-color: var(--navy);
}
.product-gallery__thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}
.product-page__name {
    font-size: 32px;
}
.product-page__category {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
}
.product-page__category a {
    color: var(--brand);
    font-weight: 600;
}
.product-purchase {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}
.product-purchase__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}
.product-purchase__price del {
    color: var(--muted);
    font-size: 18px;
}
.product-purchase__price ins {
    color: var(--navy);
    font-size: 34px;
    font-weight: 700;
    text-decoration: none;
}
.product-purchase__stock {
    margin: 10px 0 20px;
    font-size: 14px;
    font-weight: 600;
}
.product-purchase__stock.is-available {
    color: var(--success-text);
}
.product-purchase__stock.is-out {
    color: var(--muted);
}
.product-purchase__note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
.product-page__description {
    margin-top: 32px;
}
.product-page__description h2 {
    font-size: 20px;
}
.product-page__description p {
    margin: 10px 0 0;
    color: var(--muted);
}
.product-specs {
    width: 100%;
    margin-top: 32px;
    border-collapse: collapse;
    font-size: 15px;
}
.product-specs th,
.product-specs td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.product-specs th {
    width: 38%;
    color: var(--navy);
    font-weight: 600;
}
.product-specs td {
    color: var(--muted);
}
/* --- 16. contato -------------------------------------------------------- */
.contact {
    display: grid;
    grid-template-columns: 345px 1fr;
    gap: 50px;
    align-items: start;
}
.contact__info {
    padding: 34px 30px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
}
.contact__info h2 {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    color: var(--white);
    font-size: 22px;
}
.contact__block {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.contact__block strong {
    display: block;
    font-size: 19px;
}
.contact__block a,
.contact__block p {
    display: block;
    margin: 0;
    font-size: 15px;
}
.contact__block a:hover {
    color: var(--brand);
}
.contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
}
.contact__info .social {
    margin-top: 24px;
}
.contact__title {
    font-size: 42px;
}
.contact__lead {
    margin: 14px 0 26px;
    color: var(--muted);
    font-size: 15px;
}
.contact__form {
    padding: 30px;
    border-radius: var(--radius);
    background: var(--soft);
}
.contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.contact__form input,
.contact__form textarea {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    outline: 0;
}
.contact__form textarea {
    margin-bottom: 16px;
    border-radius: var(--radius);
    resize: vertical;
}
.contact__form input:focus,
.contact__form textarea:focus {
    border-color: var(--brand);
}
.contact__form .btn {
    border-radius: var(--radius-pill);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
}
/* --- 17. avisos --------------------------------------------------------- */
.alert {
    margin-bottom: 20px;
    padding: 14px 20px;
    border-radius: var(--radius);
    font-size: 15px;
}
.alert--success {
    border: 1px solid var(--success-line);
    background: var(--success-bg);
    color: var(--success-text);
}
.alert--error {
    border: 1px solid var(--error-line);
    background: var(--error-bg);
    color: var(--error-text);
}
.alert--warning {
    border: 1px solid var(--warning-line);
    background: var(--warning-bg);
    color: var(--warning-text);
}
.alert ul {
    margin: 0;
    padding-left: 18px;
}
/* Honeypot: precisa continuar no DOM e fora da vista, sem display:none, para que o robô
   enxergue o campo e o preencha. */
.contact__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* --- 18. mapa ----------------------------------------------------------- */
.section--flush {
    padding-bottom: 0;
}
.map {
    position: relative;
    line-height: 0;
}
.map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    /* O mapa vem em tons claros e a loja é azul-escura; o filtro apenas suaviza o contraste. */
    filter: saturate(.9);
}
.map__link {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    box-shadow: var(--shadow);
}
.map__link:hover {
    background: var(--brand-dark);
}
/* --- 19. rodapé --------------------------------------------------------- */
.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-top: 60px;
    padding-bottom: 60px;
}
.site-footer__brand {
    padding: 28px 24px;
    border-radius: var(--radius);
    background: var(--navy-light);
    text-align: center;
}
.site-footer__brand img {
    width: 175px;
    margin: 0 auto;
}
.site-footer__tag {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.site-footer__brand p {
    margin: 18px 0 20px;
    font-size: 14px;
}
.site-footer__brand .social {
    justify-content: center;
}
.site-footer h3 {
    margin-bottom: 18px;
    color: var(--white);
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer li {
    margin-bottom: 10px;
}
.site-footer a:hover {
    color: var(--brand);
}
.site-footer__contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
}
.site-footer__contact .icon {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    color: rgba(255, 255, 255, .6);
}
.site-footer__bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    text-align: center;
}
/* --- 20. whatsapp flutuante --------------------------------------------- */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--whatsapp);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .4);
}
.whatsapp-float:hover {
    background: var(--whatsapp-dark);
}
/* --- 21. conta do cliente ----------------------------------------------- */
.account-card {
    /* Coluna estreita e centralizada: formulário de login que ocupa 1280px espalha dois campos
       por uma linha inteira e faz o olho procurar onde digitar. */
    max-width: 460px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}
.account-card__title {
    margin: 0 0 8px;
    font-size: 24px;
}
.account-card__lead {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 15px;
}
.account-card__foot {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 15px;
}
.account-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.account-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.account-form__check--block {
    align-items: flex-start;
    margin-bottom: 20px;
}
.account-form__check input {
    /* flex: none impede a caixa de encolher quando o texto ao lado quebra em duas linhas. */
    flex: none;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
}
.account-form__link {
    font-size: 15px;
}
.field {
    margin-bottom: 18px;
}
.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
}
.field__required {
    color: var(--brand);
}
.field__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 16px;
}
.field__input:focus {
    border-color: var(--brand);
    outline: 2px solid var(--soft);
}
.field--invalid .field__input {
    border-color: var(--error-line);
    background: var(--error-bg);
}
/* O olhinho da senha: o padding a direita do input reserva o espaco do botao. */
.field__control {
    position: relative;
}
.field__control--password .field__input {
    padding-right: 48px;
}
.field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.field__toggle:hover {
    color: var(--brand-dark);
}
.field__toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
/* O atributo `hidden` nao vale para elemento SVG. */
.field__toggle [hidden] {
    display: none;
}
.field__error {
    margin: 6px 0 0;
    color: var(--error-text);
    font-size: 14px;
}
.field__help {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
}
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}
.account-box {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.account-box h2 {
    margin: 0 0 16px;
    font-size: 18px;
}
.account-box p {
    margin: 0 0 12px;
    font-size: 15px;
}
.account-box__tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--soft);
    color: var(--brand-dark);
    font-size: 13px;
}
.account-box__empty {
    color: var(--muted);
}
.account-logout {
    text-align: right;
}
/* A casca da area do cliente: titulo e navegacao entre as telas. */
.conta-topo {
    margin-bottom: 16px;
}
.conta-topo__titulo {
    margin: 0;
    font-size: 28px;
}
.conta-topo__lead {
    margin: 6px 0 0;
    max-width: 60ch;
    color: var(--muted);
}
.conta-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line);
}
.conta-nav__link {
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.conta-nav__link:hover {
    color: var(--brand-dark);
}
.conta-nav__link.is-active {
    border-bottom-color: var(--brand);
    color: var(--text);
}
/* Formulario da conta: cartao estreito, para a linha nao ficar longa demais de ler. */
.account-card--form {
    max-width: 520px;
}
.account-order {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* Menu da conta, no cabecalho. */
.header-menu {
    position: relative;
}
.header-account__caret {
    transition: transform .2s;
}
.header-menu.is-open .header-account__caret {
    transform: rotate(180deg);
}
.header-menu__list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 12px 28px rgba(32, 53, 86, .14);
}
.header-menu__list form {
    margin: 0;
}
/* O `hidden` do HTML nao vence o `display:flex` de um seletor mais forte. */
.header-menu__list[hidden] {
    display: none;
}
.header-menu__link {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.header-menu__link:hover {
    background: var(--soft);
    color: var(--brand-dark);
}
.header-menu__link--sair {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 6px 6px;
    color: var(--muted);
}
.conta-fixo {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 6px;
    background: var(--soft);
    font-size: 15px;
}
.conta-fixo small {
    color: var(--muted);
}
.shipping-option--retirada {
    border-top: 1px dashed var(--line);
}
.shipping-option__retirada {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.order-panel__lead {
    margin: 16px 0 6px;
    font-weight: 600;
}
.order-panel__lista {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}
.order-panel__lista li {
    margin-bottom: 4px;
}
.order-cancel {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}
.order-cancel p {
    margin: 0 0 12px;
    font-size: 14px;
}
.erro {
    text-align: center;
}
.erro__codigo {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}
.erro .account-box__actions {
    justify-content: center;
}
.account-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}
.account-box__actions form {
    margin: 0;
}
.field__check {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    font-size: 15px;
}
/* Um pedido na lista: cabecalho com numero, situacao e total, e as pecas embaixo. */
.order-card {
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.order-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.order-card__number {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.order-card__number:hover {
    color: var(--brand-dark);
}
.order-card__meta {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}
.order-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.order-card__total {
    font-size: 17px;
}
.order-card__pecas {
    padding: 6px 0;
}
.order-card__abrir {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* A situacao do pedido, na lista e na ficha. */
.order-status {
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--soft);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.order-status--paid {
    background: var(--success-bg);
    color: var(--success-text);
}
.order-status--canceled {
    background: var(--error-bg);
    color: var(--error-text);
}
/* Uma peca dentro de um pedido. Mesmo componente na lista e na ficha. */
.order-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft, var(--line));
}
.order-item:last-child {
    border-bottom: 0;
}
.order-item__foto {
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.order-item__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.order-item__foto--vazia {
    background: var(--soft);
}
.order-item__nome {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.order-item__nome a {
    color: var(--text);
    text-decoration: none;
}
.order-item__nome a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}
.order-item__meta {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.order-item__total {
    white-space: nowrap;
}
/* --- 22. carrinho -------------------------------------------------------- */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.cart-line__thumb {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--placeholder-a);
}
.cart-line__name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.cart-line__name a {
    color: var(--text);
    text-decoration: none;
}
.cart-line__name a:hover {
    color: var(--brand-dark);
}
.cart-line__meta {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}
.cart-line__changed {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--warning-text);
}
.cart-line__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.cart-line__total {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cart-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-purchase__form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}
/* Mesma altura para o seletor e o botão: dois controles lado a lado com alturas diferentes é a
   coisa que faz uma tela parecer montada às pressas. */
.product-purchase__form .cart-qty,
.product-purchase__form .btn {
    height: 44px;
}
/* O botão tem a largura do que ele diz, com um piso confortável — não estica para preencher o
   que sobra ao lado do seletor de quantidade. Esticando, ele virava uma barra do tamanho do
   card, maior que o preço e desproporcional ao resto da ficha. */
.product-purchase__form .btn {
    flex: 0 1 auto;
    min-width: 210px;
    margin: 0;
}
.product-purchase__form .cart-qty {
    margin: 0;
}
.cart-qty__input {
    width: 58px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.cart-qty__step {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.cart-qty__step:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.cart-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--warning-line);
    border-left: 3px solid var(--warning-text);
    border-radius: var(--radius);
    background: var(--warning-bg);
    color: var(--warning-text);
}
.cart-notice__text {
    margin: 0;
    flex: 1 1 240px;
    font-size: 14px;
}
.cart-summary {
    position: sticky;
    top: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}
.cart-summary__title {
    margin: 0 0 14px;
    font-size: 18px;
}
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.cart-summary__row--total {
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 18px;
    font-weight: 700;
}
.cart-summary__note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.cart-empty {
    padding: 40px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
}
.cart-empty p {
    margin: 0 0 16px;
    color: var(--muted);
}
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
}
.cart-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 53, 86, .45);
}
.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    height: 100%;
    background: var(--white);
    box-shadow: -8px 0 30px rgba(32, 53, 86, .18);
}
.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.cart-drawer__title {
    margin: 0;
    font-size: 18px;
}
.cart-drawer__close {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.cart-drawer__close:hover {
    color: var(--text);
}
.cart-drawer__flash:not(:empty) {
    margin: 14px 20px 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 14px;
}
.cart-drawer__flash.is-ok {
    border: 1px solid var(--success-line);
    background: var(--success-bg);
    color: var(--success-text);
}
.cart-drawer__flash.is-error {
    border: 1px solid var(--error-line);
    background: var(--error-bg);
    color: var(--error-text);
}
.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px;
}
.cart-drawer__body .cart-line {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 12px;
}
.cart-drawer__body .cart-line__thumb {
    width: 64px;
    height: 64px;
}
.cart-drawer__body .cart-line__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.cart-summary--compact {
    position: static;
    margin-top: 16px;
}
.cart-summary__full {
    margin-top: 10px;
}
body.has-drawer {
    overflow: hidden;
}
/* O botão flutuante do WhatsApp cobriria os botões do rodapé do painel do carrinho. Com o
   painel aberto ele sai. */
body.has-drawer .whatsapp-float {
    display: none;
}
/* --- 23. frete ----------------------------------------------------------- */
/* O bloco vive na ficha da peça, na largura de leitura: esticado até o fim da página, o preço
   e o prazo ficariam a um palmo do nome da transportadora. */
.shipping-box {
    max-width: 560px;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.shipping-box__title {
    margin: 0 0 14px;
    font-size: 18px;
}
/* Campo e botão na mesma linha, o botão alinhado pela base: o rótulo do `field` ocupa a
   primeira linha e é ele que empurra o input para baixo. */
.shipping-box__form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.shipping-box__form .field {
    flex: 1 1 200px;
    margin: 0;
}
.shipping-box__submit {
    flex: 0 0 auto;
    height: 44px;
}
.shipping-box__submit[disabled] {
    opacity: .6;
    cursor: progress;
}
.shipping-box__hint {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.shipping-options {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Nome, prazo e preço em colunas: o preço encostado à direita é o que deixa comparar as opções
   de cima a baixo sem reler os nomes. `tabular-nums` mantém os dígitos alinhados. */
.shipping-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.shipping-option:first-child {
    border-top: 0;
}
.shipping-option--best {
    background: var(--soft);
}
.shipping-option__name {
    font-weight: 600;
}
.shipping-option__badge {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.shipping-option__deadline {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.shipping-option__price {
    min-width: 88px;
    font-weight: 700;
    text-align: right;
}
/* --- 24. checkout -------------------------------------------------------- */
/* Duas colunas como o carrinho: o formulário à esquerda e o resumo à direita, que acompanha a
   rolagem. Quem preenche endereço precisa continuar vendo o que está comprando. */
.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.checkout__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* O resumo acompanha a rolagem do formulário. `align-self: start` é o que faz o `sticky`
   funcionar: sem ele a coluna estica até o fim do grid e não sobra trilho por onde deslizar —
   o botão de fechar o pedido ficaria lá em cima, e quem aceitasse os termos no fim do
   formulário teria de rolar a página de volta para achá-lo.

   `max-height` é a outra metade da história: um card mais alto que a tela gruda pelo topo e
   tem o rodapé cortado, escondendo justamente o botão que fecha o pedido. Aqui ele cabe na
   altura visível, e quem rola é a lista de peças, logo abaixo. */
.checkout__aside {
    position: sticky;
    top: 16px;
    align-self: start;
    display: flex;
    max-height: calc(100vh - 32px);
}
.checkout__aside .cart-summary {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}
/* `min-height: 0` porque um item de flex não encolhe abaixo do próprio conteúdo sem isso — e
   sem encolher, não há o que rolar. */
.checkout-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 4px;
}
.checkout-block {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.checkout-block__title {
    margin: 0 0 4px;
    font-size: 18px;
}
.checkout-block__lead {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--muted);
}
/* Número ao lado de complemento, cidade ao lado do estado: os pares que sempre são preenchidos
   juntos, e que sozinhos em uma linha inteira fazem o formulário parecer o dobro do tamanho. */
.checkout-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}
.checkout-shipping {
    margin-top: 14px;
}
.checkout-shipping__hint {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}
.checkout-shipping__recalc[disabled] {
    opacity: .6;
    cursor: progress;
}
/* O CEP e o botão na mesma linha, o botão alinhado pela base do campo — o rótulo e a ajuda do
   `field` ocupam as linhas de cima. */
.checkout-zip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.checkout-zip .field {
    flex: 1 1 200px;
    margin: 0;
}
.checkout-zip .checkout-shipping__recalc {
    flex: 0 0 auto;
    height: 44px;
    margin-top: 25px;
}
/* O rótulo embrulha a linha inteira da opção: no celular, o alvo do dedo é a linha, e não o
   círculo do radio. */
.shipping-option__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    cursor: pointer;
}
.order-done {
    max-width: 640px;
    margin: 0 auto 28px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
    text-align: center;
}
.order-done__title {
    margin: 0 0 6px;
    font-size: 26px;
}
.order-done__status {
    margin: 0 0 16px;
    font-weight: 700;
    color: var(--brand-dark);
}
.order-done__lead {
    margin: 0 0 20px;
    color: var(--muted);
}
.order-panels {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.order-panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.order-panel__title {
    margin: 0 0 14px;
    font-size: 18px;
}
.order-address {
    font-style: normal;
    line-height: 1.7;
}
.order-done__foot {
    margin-top: 24px;
    text-align: center;
    color: var(--muted);
}
/* A linha do resumo do checkout: miniatura, nome e preço. Menor que a do carrinho — aqui a
   peça é conferida, não escolhida. */
.checkout-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.checkout-item__body {
    display: grid;
    gap: 6px;
}
.checkout-item__side {
    display: grid;
    justify-items: end;
    gap: 4px;
}
/* O seletor de quantidade do resumo é menor que o do carrinho: aqui a peça é conferida, não
   escolhida, e a coluna tem 320px. */
.cart-qty--mini {
    transform-origin: left center;
    gap: 4px;
}
.cart-qty--mini .cart-qty__step {
    width: 26px;
    height: 26px;
}
.cart-qty--mini .cart-qty__input {
    width: 46px;
    height: 26px;
    padding: 0 4px;
    font-size: 13px;
}
/* Remover é ação destrutiva e discreta: texto pequeno, sem a cor da marca, que fica reservada
   para o botão que fecha o pedido. */
.checkout-item__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.checkout-item__remove:hover {
    color: var(--error-text);
}
.checkout-item__thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--placeholder-a);
}
.checkout-item__name {
    font-size: 13px;
    line-height: 1.4;
}
.checkout-item__price {
    font-weight: 600;
}
/* A lista de endereços salvos: cartões que o dedo acerta inteiro, não círculos de 20 pixels.
   O escolhido ganha a cor da marca na borda — é a única informação que a pessoa procura ao
   voltar para esta tela. */
.address-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.address-option__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}
.address-option__pick:hover {
    border-color: var(--brand);
}
.address-option__pick:has(input:checked) {
    border-color: var(--brand);
    background: var(--soft);
}
.address-option__body {
    font-size: 14px;
    line-height: 1.6;
}
.address-option__badge {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* --- 25. tablet --------------------------------------------------------- */
@media (max-width: 1024px) {
    /* O resumo desce para baixo da lista: em 320px de coluna lateral ele já espremia o nome
       das peças em duas ou três linhas. */
    .cart-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary {
        position: static;
    }
    /* Os filtros deixam de ser coluna e viram uma faixa acima da grade. Empilhados como no
       desktop, empurrariam o primeiro produto para fora da primeira tela — e quem chega pelo
       celular vem ver peça, não filtro. A faixa se divide em quantas colunas couberem. */
    .listing {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .listing-filters {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px 28px;
        padding: 20px;
        border-radius: var(--radius);
        background: var(--soft);
    }
    .listing-filters__group {
        margin-bottom: 0;
    }
    /* A lista rola dentro do próprio bloco: uma lista longa de marcas ocuparia mais que a
       altura da tela antes do primeiro produto. */
    .listing-filters__list {
        max-height: 232px;
        overflow-y: auto;
    }
    .listing-filters__option:hover {
        background: var(--white);
    }
    /* A ficha empilha: lado a lado, a galeria fica menor que a miniatura do cartão. */
    .product-page {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .menu-toggle {
        display: flex;
        order: 3;
    }
    .header-top__inner {
        flex-wrap: wrap;
    }
    /* flex-basis 100% é o que joga a busca para a segunda linha. Só `width: 100%` não
       resolve: com `flex: 1` a base continua 0 e o campo apenas espreme, empurrando a
       largura da página para além da viewport. */
    .header-search {
        order: 4;
        flex: 1 0 100%;
        max-width: none;
    }
    .header-logo,
    .header-actions {
        min-width: 0;
    }
    .header-actions {
        margin-left: auto;
    }
    .site-menu {
        display: none;
    }
    .site-menu.is-open {
        display: block;
    }
    .site-menu__inner {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 18px;
    }
    .site-menu__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-menu__item {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .site-menu__link {
        padding: 14px 4px;
    }
    .site-menu__item.has-dropdown > .site-menu__link {
        padding-right: 52px;
    }
    /* Área de toque de 44px, o mínimo confortável no celular. */
    .site-menu__caret {
        width: 44px;
        height: 44px;
        right: 4px;
    }
    .site-menu__caret .icon {
        width: 18px;
        height: 18px;
    }
    .site-menu__dropdown {
        position: static;
        /* Empilhado dentro do menu, quem rola é a página: coluna única e sem teto próprio,
           senão o painel ganha uma barra de rolagem dentro de outra. */
        grid-template-columns: 1fr;
        max-height: none;
        max-width: none;
        overflow-y: visible;
        padding: 0 0 10px;
        background: transparent;
        box-shadow: none;
    }
    .site-menu__dropdown a {
        padding: 9px 16px;
        color: rgba(255, 255, 255, .75);
    }
    .site-menu__social {
        margin-top: 16px;
    }
    .hero h1 {
        font-size: 44px;
    }
    .benefits {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .product-grid,
    .testimonials {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-title h2 {
        font-size: 32px;
    }
    .contact {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .site-footer__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --- 26. celular -------------------------------------------------------- */
@media (max-width: 767px) {
    /* As abas da conta rolam na horizontal em vez de quebrar em duas linhas. */
    .conta-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .conta-nav__link {
        padding: 10px 12px;
        font-size: 14px;
    }
    /* O menu da conta abre alinhado a direita, sem sair da tela. */
    .header-menu__list {
        right: -8px;
        min-width: 180px;
    }
    /* A foto encolhe e o valor desce para baixo do nome. */
    .order-item {
        grid-template-columns: 48px minmax(0, 1fr);
        row-gap: 4px;
    }
    .order-item__foto,
    .order-item__foto img {
        width: 48px;
        height: 48px;
    }
    .order-item__total {
        grid-column: 2;
        text-align: right;
    }
    .order-card__right {
        align-items: flex-start;
    }
    /* Uma coluna só: o resumo desce para depois do formulário, que é a ordem em que a pessoa
       preenche. Os pares de campos também se desempilham — em 360px de largura, "número" e
       "complemento" lado a lado sobram três caracteres cada. */
    .checkout,
    .order-panels {
        grid-template-columns: 1fr;
    }
    /* Em uma coluna o resumo é o fim da página: grudar e rolar por dentro só atrapalharia. */
    .checkout__aside {
        position: static;
        max-height: none;
        display: block;
    }
    .checkout-items {
        overflow-y: visible;
    }
    .checkout-row {
        grid-template-columns: 1fr;
    }
    .shipping-option__pick {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .shipping-option__pick .shipping-option__deadline {
        grid-column: 2 / -1;
    }
    /* O botão embaixo do campo, na largura toda: ao lado, sobra para ele um retângulo estreito
       demais para o dedo. E a opção de entrega vira duas linhas, com o nome ocupando a primeira
       — em uma linha só, o nome da transportadora quebraria no meio. */
    .shipping-box__submit,
    .checkout-zip .checkout-shipping__recalc {
        width: 100%;
    }
    .checkout-zip .checkout-shipping__recalc {
        margin-top: 0;
    }
    .shipping-option {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .shipping-option__name {
        grid-column: 1 / -1;
    }
    /*
     | O carrinho no celular: a linha vira uma coluna só — imagem em cima, dados embaixo —, que
     | é como se lê um item de pedido no telefone. Em três colunas a miniatura fica espremida
     | contra a borda e o preço é empurrado para fora da tela.
     */
    .cart-line {
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: stretch;
        text-align: left;
    }
    .cart-line__thumb {
        width: 100%;
        height: 180px;
        object-fit: contain;
    }
    .cart-line__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }
    .cart-line__total {
        font-size: 20px;
    }
    .cart-qty {
        flex-wrap: wrap;
    }
    /* Alvo de toque: 32px é pequeno demais para o polegar acertar sem errar o vizinho. */
    .cart-qty__step {
        width: 44px;
        height: 44px;
    }
    .cart-qty__input {
        width: 68px;
        height: 44px;
    }
    .product-purchase__form .btn {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* O painel lateral ocupa a tela inteira: 420px num aparelho de 360 deixaria uma faixa
       inútil e o conteúdo espremido. */
    .cart-drawer__panel {
        width: 100%;
    }
    .cart-drawer__body .cart-line {
        grid-template-columns: 1fr;
    }
    .cart-drawer__body .cart-line__thumb {
        width: 100%;
        height: 140px;
    }
    .cart-notice {
        flex-direction: column;
        align-items: flex-start;
    }
    .listing-filters {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .listing-filters__list {
        max-height: 196px;
    }
    .product-page__name {
        font-size: 24px;
    }
    .product-purchase {
        padding: 18px;
    }
    .product-purchase__price ins {
        font-size: 28px;
    }
    /* A primeira coluna encolhe para o valor não quebrar em duas linhas na ficha. */
    .product-specs th {
        width: 45%;
    }
    .hero {
        min-height: 0;
        padding: 56px 0 120px;
        text-align: center;
    }
    .hero h1 {
        font-size: 32px;
    }
    .hero p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero__actions {
        justify-content: center;
    }
    .header-logo img {
        width: 148px;
    }
    /* No celular o rótulo do botão não cabe ao lado do logo e do carrinho, então a conta
       passa a ser só o ícone. */
    .header-account {
        width: 42px;
        height: 42px;
        padding: 0;
    }
    .header-account span {
        display: none;
    }
    .header-account .icon {
        display: block;
        width: 19px;
        height: 19px;
    }
    .header-actions {
        gap: 16px;
    }
    .section {
        padding: 48px 0;
    }
    .section-title h2 {
        font-size: 26px;
    }
    .listing-heading,
    .search-heading {
        font-size: 20px;
    }
    .page-content h1 {
        font-size: 25px;
    }
    .page-content h2 {
        font-size: 19px;
    }
    .search-message {
        padding-top: 24px;
    }
    .search-message__title {
        font-size: 22px;
    }
    .product-grid,
    .testimonials {
        grid-template-columns: 1fr;
    }
    .product-grid--boxed {
        padding: 16px;
    }
    .listing-toolbar__sort select {
        min-width: 0;
        width: 100%;
    }
    .contact__row {
        grid-template-columns: 1fr;
    }
    .contact__title {
        font-size: 30px;
    }
    .map iframe {
        height: 300px;
    }
    .map__link {
        right: 50%;
        transform: translateX(50%);
        bottom: 14px;
        white-space: nowrap;
    }
    .site-footer__inner {
        grid-template-columns: 1fr;
    }
    .whatsapp-float span {
        display: none;
    }
    .whatsapp-float {
        padding: 14px;
    }
}