/*
 * Home de vendas do site (12/10/2026): as seções abaixo do hero.
 * Prefixo hm- (o Tailwind do site é compilado e purgado; classe nova não existe lá).
 * Mesmos tons e mesma margem do hero (hv-): verde #1f5e00, noite #102e00, ouro #E8AF18,
 * bege #FFF8ED, títulos em Fraunces. Ao mudar, suba o ?v= no home.blade.php
 * (a Cloudflare guarda CSS por muito tempo).
 */
.hm {
    --hm-verde: #1f5e00; --hm-noite: #102e00; --hm-ouro: #E8AF18; --hm-tinta: #1c1917;
    --hm-suave: #78716c; --hm-bege: #FFF8ED; --hm-linha: rgba(28, 25, 23, .07);
    color: var(--hm-tinta);
}
/* :where() zera o peso: assim o reset não ganha do "Comprar" branco do card nem das classes hm-. */
:where(.hm) a { text-decoration: none; color: inherit; }
/* Foco: anel duplo (verde-noite por fora do ouro), visível no claro e no escuro. */
:where(.hm) a:focus-visible, :where(.hm) button:focus-visible { outline: 3px solid var(--hm-noite); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hm-ouro); }

/* Invólucro: a mesma largura e margem do hero e do topo do site */
.hm-sec { max-width: 2200px; margin: 0 auto; padding: 0 16px; margin-top: 28px; }
.hm-sec--faixa { padding-top: 22px; padding-bottom: 22px; }

/* Cabeçalho de seção: kicker dourado, título em Fraunces, link à direita */
.hm-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hm-cab-txt { min-width: 0; }
.hm-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a16207; }
.hm-kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--hm-ouro); }
.hm-tit { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 23px; line-height: 1.12; letter-spacing: -.015em; margin: 6px 0 0; text-wrap: balance; }
.hm-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--hm-suave); max-width: 62ch; }
.hm-mais { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--hm-verde); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hm-mais:hover { text-decoration: underline; }
.hm-setas { display: none; gap: 8px; }
.hm-seta { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--hm-linha); background: #fff; color: var(--hm-tinta); display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, opacity .15s ease; }
.hm-seta:hover { background: #f5f5f4; }
.hm-seta[disabled] { opacity: .35; cursor: default; }

/* Trilho: rola de lado, mostra o pedaço do próximo, encaixa por card */
.hm-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 43%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
             scrollbar-width: none; overscroll-behavior-x: contain; padding: 6px 6px 8px; scroll-padding-left: 6px; }
.hm-trilho::-webkit-scrollbar { display: none; }
.hm-trilho > * { scroll-snap-align: start; min-width: 0; }

/* Card compacto */
.hm-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hm-card-foto { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #f5f5f4; }
.hm-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.hm-card:hover .hm-card-foto img { transform: scale(1.04); }
.hm-selo { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .92); color: var(--hm-noite); border-radius: 999px; padding: 3px 8px; }
.hm-selo--off { background: #e11d48; color: #fff; }
.hm-fav { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: #a8a29e; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: color .15s ease; }
.hm-fav:hover { color: var(--hm-ouro); }
.hm-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Cada linha do card tem altura fixa (12/10/2026): preço numa linha, Pix sempre
   reservado, nome em 2 linhas, estrelas sempre reservadas. Cards do mesmo tamanho. */
.hm-preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; height: 22px; }
.hm-pix { display: block; height: 17px; font-size: 12px; font-weight: 700; color: #15803d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pix i { color: #32BCAD; }
.hm-preco b { font-size: 16px; font-weight: 800; color: var(--hm-verde); }
.hm-preco s { font-size: 12px; color: #a8a29e; }
.hm-nome { font-size: 13.5px; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.6em; }
.hm-estrelas { display: block; height: 17px; font-size: 12px; font-weight: 600; color: var(--hm-tinta); white-space: nowrap; overflow: hidden; }
.hm-estrelas i { color: var(--hm-ouro); font-size: 11px; }
.hm-estrelas small { color: var(--hm-suave); font-weight: 500; }
.hm-loja { font-size: 12px; color: var(--hm-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-loja small { font-size: 11.5px; }

/* Botões */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700; font-size: 14.5px; padding: 12px 22px; border: 0; cursor: pointer; transition: transform .15s ease, filter .15s ease, background-color .15s ease; }
.hm-btn--ouro { background: var(--hm-ouro); color: var(--hm-tinta); }
.hm-btn--ouro:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hm-btn--verde { background: var(--hm-verde); color: #fff; }
.hm-btn--verde:hover { filter: brightness(1.1); }
.hm-btn--linha { background: #fff; color: var(--hm-tinta); border: 1.5px solid rgba(28, 25, 23, .16); }
.hm-btn--linha:hover { background: #fafaf9; }
.hm-btn--largo { width: 100%; }
.hm-btn[disabled] { opacity: .6; cursor: progress; }
.hm-btn[hidden], .hm [hidden] { display: none !important; }

@media (min-width: 640px) {
    .hm-trilho { grid-auto-columns: 30%; }
    .hm-tit { font-size: 26px; }
    .hm-btn--largo { width: auto; }
}
@media (min-width: 1024px) {
    .hm-sec { padding: 0 56px; margin-top: 44px; }
    .hm-tit { font-size: 30px; }
    .hm-setas { display: flex; }
    .hm-trilho { grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; }
}
@media (min-width: 1280px) {
    .hm-trilho { grid-auto-columns: calc((100% - 5 * 14px) / 6); }
}
@media (min-width: 1800px) {
    .hm-trilho { grid-auto-columns: calc((100% - 7 * 14px) / 8); }
}
@media (prefers-reduced-motion: reduce) {
    .hm *, .hm *::before { transition: none !important; scroll-behavior: auto !important; }
}