/* ---------------------------------------------------------------------------
   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. tablet  (<= 1024px)
                                          24. 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;
}
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);
}
.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);
}
.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;
}
/* --- 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: center;
    gap: 10px;
    margin-bottom: 10px;
}
.product-purchase__form .btn {
    flex: 1 1 200px;
    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. 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);
    }
}
/* --- 24. celular -------------------------------------------------------- */
@media (max-width: 767px) {
    /*
     | 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%;
    }
    /* 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;
    }
}