/* ============================================================
   HOME — Página Inicial CarStar
   Container padrão: 1280px (mesma largura do header).
   ============================================================ */

.loja-home-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.loja-home { padding-bottom: 8px; }

.loja-home-secao { margin: 40px auto; }
.loja-home-secao-titulo {
    font-size: 24px; font-weight: 700; color: #17181B; margin: 0 0 26px;
    text-align: center; position: relative; padding-bottom: 14px; display: block;
}
.loja-home-secao-titulo::after {
    content: ''; display: block; width: 48px; height: 4px; border-radius: 2px;
    background: var(--loja-cor-primaria, #17181B); margin: 12px auto 0;
}

/* ── 1. BANNER PRINCIPAL (slider) ─────────────────────────── */
.loja-home-banner-slider { position: relative; width: 100%; overflow: hidden; background: #17181B; }
.loja-slider-track { display: flex; transition: transform 0.5s ease; }
.loja-slider-slide { flex: 0 0 100%; display: block; line-height: 0; }
.loja-slider-slide img { width: 100%; height: auto; display: block; max-height: 600px; object-fit: cover; }
.loja-slider-dots {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 5;
}
.loja-slider-dots button {
    width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.5);
    padding: 0; cursor: pointer; transition: background 0.15s, width 0.15s;
}
.loja-slider-dots button.ativo { background: #FFC220; width: 22px; border-radius: 5px; }
.loja-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(23,24,27,.6);
    color: #fff; font-size: 22px; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.loja-slider-arrow:hover { background: rgba(23,24,27,.85); }
.loja-slider-prev { left: 16px; }
.loja-slider-next { right: 16px; }
@media (max-width: 780px) { .loja-slider-arrow { display: none; } }

/* ── 2. FAIXA DE BENEFÍCIOS ────────────────────────────────── */
.loja-home-beneficios { background: transparent; padding: 34px 0 6px; }
.loja-home-beneficios-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.loja-beneficio-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: #17181B; }
.loja-beneficio-icone { display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: 6px; color: #17181B; }
.loja-beneficio-icone img { width: 40px; height: 40px; object-fit: contain; }
.loja-beneficio-item strong { font-size: 15px; font-weight: 700; color: #17181B; line-height: 1.25; }
.loja-beneficio-sub { font-size: 12.5px; color: #6b6b6b; line-height: 1.3; }

/* ── 3. 4 BANNERS FIXOS ────────────────────────────────────── */
.loja-home-banners-fixos {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px auto;
}
.loja-banner-fixo { display: block; border-radius: 12px; overflow: hidden; line-height: 0; transition: opacity 0.15s; }
.loja-banner-fixo:hover { opacity: 0.9; }
.loja-banner-fixo img { width: 100%; height: auto; display: block; }
@media (max-width: 780px) { .loja-home-banners-fixos { grid-template-columns: repeat(2, 1fr); } }

/* ── 4. NAVEGUE POR CATEGORIAS (cards redondos) ──────────── */
.loja-cat-slider { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.loja-cat-slider::-webkit-scrollbar { display: none; }
.loja-cat-item { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; width: 165px; }
.loja-cat-img {
    width: 150px; height: 150px; border-radius: 50%; background-size: cover; background-position: center;
    border: 2px solid #f0f0f0; transition: border-color 0.15s, transform 0.15s;
}
.loja-cat-item:hover .loja-cat-img { border-color: #FFC220; transform: translateY(-2px); }
.loja-cat-nome { font-size: 13px; font-weight: 600; color: #333; text-align: center; line-height: 1.3; }

/* ── 5/6/8. SEÇÕES DE PRODUTOS (slider) ────────────────────── */
/* Reaproveita o .loja-card padrão (mesmo de categoria/relacionados) —
   no desktop os cards esticam pra preencher a largura toda (fica
   alinhado com os banners); no mobile viram slider de largura fixa
   (ver media query lá embaixo). */
ul.products.loja-produtos-slider {
    display: flex !important; gap: 20px; margin: 0 !important; padding: 4px 2px 12px; list-style: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;
}
ul.products.loja-produtos-slider::-webkit-scrollbar { display: none; }
/* 4 por vez no desktop: (100% - 3 espaços de 20px) / 4. O resto fica
   no carrossel — quantidade livre, navegação por setas ou arrastando. */
.woocommerce ul.products.loja-produtos-slider li.product.loja-card {
    width: calc((100% - (var(--cols, 4) - 1) * 20px) / var(--cols, 4)) !important; max-width: none !important;
    flex: 0 0 calc((100% - (var(--cols, 4) - 1) * 20px) / var(--cols, 4)) !important; min-width: 0; scroll-snap-align: start;
}

/* ── 7. 2 BANNERS GRANDES ──────────────────────────────────── */
.loja-home-banners-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px auto; }
.loja-banner-grande { display: block; border-radius: 12px; overflow: hidden; line-height: 0; transition: opacity 0.15s; }
.loja-banner-grande:hover { opacity: 0.92; }
.loja-banner-grande img { width: 100%; height: auto; display: block; }
@media (max-width: 780px) { .loja-home-banners-grandes { grid-template-columns: 1fr; } }

/* ── 9. PROVA SOCIAL ────────────────────────────────────────── */
.loja-depoimentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.loja-depoimento-card { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 14px; padding: 20px; }
.loja-depoimento-estrelas { display: flex; gap: 2px; margin-bottom: 10px; }
.loja-depoimento-texto { font-size: 13.5px; color: #444; line-height: 1.6; margin: 0 0 14px; font-style: italic; }
.loja-depoimento-autor { font-size: 12.5px; font-weight: 700; color: #17181B; margin: 0; }
.loja-depoimento-autor span { font-weight: 400; color: #888; }

/* ── 10. INSTAGRAM ──────────────────────────────────────────── */
.loja-home-instagram .loja-home-secao-titulo a { color: #C98300; text-decoration: none; }
.loja-home-instagram .loja-home-secao-titulo a:hover { text-decoration: underline; }
.loja-instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.loja-instagram-item { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.loja-instagram-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.loja-instagram-item:hover img { transform: scale(1.06); }
@media (max-width: 780px) { .loja-instagram-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── 11. BANNER PROMOCIONAL (10% OFF) ──────────────────────── */
.loja-home-banner-promo { margin: 32px auto; }
.loja-home-banner-promo a { display: block; border-radius: 14px; overflow: hidden; line-height: 0; width: 100%; }
.loja-home-banner-promo img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; }

/* ── 12. NEWSLETTER ─────────────────────────────────────────── */
.loja-home-newsletter { background: #ececec; padding: 26px 0 18px; margin-top: 50px; }
.loja-newsletter-linha { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.loja-newsletter-titulo { display: flex; align-items: center; gap: 16px; color: #17181B; }
.loja-newsletter-icone { flex-shrink: 0; color: #17181B; }
.loja-home-newsletter h2 { color: #17181B; font-size: 22px; font-weight: 700; margin: 0 0 2px; line-height: 1.2; }
.loja-home-newsletter p { color: #444; font-size: 15px; margin: 0; }
.loja-newsletter-form { display: flex; gap: 12px; flex: 1 1 520px; justify-content: flex-end; }
.loja-newsletter-form input {
    flex: 1 1 0; min-width: 0; max-width: 300px; border: none; border-radius: 999px; padding: 14px 22px;
    font-size: 14px; background: #fff; color: #17181B;
}
.loja-newsletter-form button {
    background: var(--loja-cor-preto, #17181B); color: #fff; border: none; border-radius: 999px; padding: 14px 26px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; cursor: pointer;
    white-space: nowrap; transition: background 0.15s;
}
.loja-newsletter-form button:hover { background: var(--loja-cor-primaria, #000); }
.loja-newsletter-form button:disabled { opacity: 0.6; cursor: default; }
.loja-newsletter-msg { font-size: 12.5px; margin: 8px 0 0; min-height: 16px; text-align: center; }
@media (max-width: 780px) {
    .loja-newsletter-linha { flex-direction: column; align-items: stretch; text-align: left; }
    .loja-newsletter-form { flex-direction: column; justify-content: stretch; }
    .loja-newsletter-form input { max-width: none; }
}

/* ── Setas dos carrosséis simples (categorias/produtos) ────── */
.loja-slider-simples-wrap { position: relative; }
.loja-slider-simples-seta {
    position: absolute; top: 38%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e6e6e6; background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 24px; line-height: 1; padding: 0 0 3px; color: #17181B; cursor: pointer;
    align-items: center; justify-content: center; z-index: 4;
}
.loja-slider-simples-seta:hover { background: #17181B; color: #fff; border-color: #17181B; }
.loja-slider-simples-prev { left: -10px; }
.loja-slider-simples-next { right: -10px; }
@media (max-width: 780px) { .loja-slider-simples-seta { display: none !important; } }

/* Mobile/tablet — volta a ser slider de largura fixa com scroll horizontal
   (no desktop os cards esticam pra preencher a largura, ver regra acima) */
@media (max-width: 780px) {
    ul.products.loja-produtos-slider { gap: 12px; }
    .woocommerce ul.products.loja-produtos-slider li.product.loja-card {
        width: 165px !important; flex: 0 0 165px !important; scroll-snap-align: start;
    }
    .loja-home-beneficios-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
    .loja-beneficio-item:last-child { grid-column: 1 / -1; }
    .loja-home-secao-titulo { font-size: 20px; }
}

/* Telas bem estreitas (320-400px) */
@media (max-width: 400px) {
    .loja-home-container { padding: 0 12px; }
    .loja-home-secao { margin: 28px auto; }
    .loja-home-secao-titulo { font-size: 17px; margin-bottom: 14px; }

    .woocommerce ul.products.loja-produtos-slider li.product.loja-card { width: 150px !important; flex: 0 0 150px !important; }
    .loja-card-titulo { font-size: 11.5px !important; min-height: 30px; }

    .loja-cat-item { width: 100px; }
    .loja-cat-img { width: 90px; height: 90px; }

    .loja-home-banners-fixos { gap: 10px; }

    .loja-depoimentos-grid { grid-template-columns: 1fr; }
    .loja-newsletter-form input, .loja-newsletter-form button { font-size: 13px; padding: 11px 16px; }
}

/* Home: newsletter encosta direto no rodapé (sem faixa branca entre eles) */
.loja-home { padding-bottom: 0; }
.loja-footer { margin-top: 0 !important; }

/* Newsletter compacta no celular */
@media (max-width: 780px) {
    .loja-home-newsletter { padding: 20px 0 14px; margin-top: 36px; }
    .loja-newsletter-titulo { gap: 12px; }
    .loja-newsletter-icone { width: 32px; height: 32px; }
    .loja-home-newsletter h2 { font-size: 17px; }
    .loja-home-newsletter p { font-size: 13px; }
    .loja-newsletter-form { gap: 8px; flex: 0 0 auto; }
    .loja-newsletter-form input, .loja-newsletter-form button { padding: 0 16px !important; height: 40px; font-size: 14px !important; line-height: 40px; }
    .loja-newsletter-form button { font-size: 12.5px !important; line-height: 1; }
}