/* ======================================================================
   Stelc premium — camada visual compartilhada (home e página de produto).
   Mesma base aplicada em /meuperfil e /nossosprodutos: tokens do
   stelc-design.css, navy como cor de ação, Bricolage nos títulos.
   Carregar por ÚLTIMO no <head> para vencer as regras antigas.
   ====================================================================== */

/* ---------- Seções com carrossel (home + "produtos relacionados") ---------- */
.products-section.category-section:not(.hide-section-title) .category-section-head {
    display: flex !important; align-items: flex-end; justify-content: space-between; gap: 1rem;
    min-height: 0; margin: 0 0 1rem; padding: 0 .25rem;
}
.products-section.category-section:not(.hide-section-title) .category-section-title {
    display: block !important; position: static !important; transform: none !important;
    margin: 0; font-family: var(--ap-display); font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.15rem, 2vw, 1.55rem); color: var(--ap-ink); text-transform: none;
}
/* "Ver todos": link de texto discreto (a pílula em toda seção poluía) */
.products-section.category-section:not(.hide-section-title) .category-section-view-all,
.departments-section .category-section-view-all {
    display: inline-flex !important; position: static !important; transform: none !important;
    align-items: center; gap: .35rem; flex: 0 0 auto; padding: .25rem 0; border: 0 !important; background: none !important;
    color: var(--ap-ink-2) !important; font: 600 .82rem var(--ap-body) !important; text-decoration: none !important;
    transition: color .18s, gap .18s; }
.products-section.category-section .category-section-view-all:hover,
.departments-section .category-section-view-all:hover { color: var(--ap-accent) !important; gap: .55rem; }
.products-section.category-section .category-section-view-all i,
.departments-section .category-section-view-all i { font-size: .65rem; }

/* Categorias: cabeçalho com título igual às demais seções */
.departments-section .departments-section-head { display: flex !important; align-items: flex-end; justify-content: space-between;
    min-height: 0 !important; margin: 0 0 1rem !important; padding: 0 .25rem; }
.departments-section .departments-section-head::before { content: "Compre por categoria"; font-family: var(--ap-display);
    font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.15rem, 2vw, 1.55rem); color: var(--ap-ink); }
/* Card de categoria: fundo branco igual ao card de produto, foto grande,
   nome centralizado (sem cortar) e hover discreto: borda navy + zoom na foto. */
.departments-carousel .department-card { position: relative; height: auto !important; max-height: none !important; display: flex !important;
    flex-direction: column; align-items: stretch !important; padding: 14px 12px 16px !important;
    border: 1px solid var(--ap-line-soft) !important; border-radius: 18px !important; background: #fff !important;
    box-shadow: 0 1px 2px rgba(17,17,18,.03) !important; transform: none !important; overflow: hidden;
    transition: border-color .2s, box-shadow .25s var(--ap-ease-out), transform .25s var(--ap-ease-out) !important; }
.departments-carousel .department-card:hover { background: #fff !important; transform: translateY(-3px) !important; border-color: var(--ap-accent-24) !important;
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--ap-accent, #1e3370) 45%, transparent) !important; }
.departments-carousel .department-image-container { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    margin: 0 !important; padding: 6%; box-sizing: border-box; border: 0 !important; border-radius: 12px !important;
    background: #fff !important; box-shadow: none !important; overflow: hidden; }
.departments-carousel .department-card:hover .department-image-container { background: #fff !important; transform: none !important; box-shadow: none !important; border: 0 !important; }
.departments-carousel .department-image { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ap-ease-out); }
.departments-carousel .department-card:hover .department-image { transform: scale(1.06); }
.departments-carousel .department-name { display: flex !important; align-items: center; justify-content: center;
    min-height: 2.7em; margin: 10px 0 0 !important; padding: 10px 4px 0 !important; max-width: none !important;
    border: 0 !important; border-radius: 0 !important; text-align: center !important; white-space: normal !important; overflow: visible !important;
    font-family: var(--ap-body) !important; font-weight: 600 !important; font-size: .88rem !important; line-height: 1.3 !important;
    text-transform: none !important; letter-spacing: 0 !important; color: var(--ap-ink) !important; background: none !important; box-shadow: none !important; }
.departments-carousel .department-card:hover .department-name { color: var(--ap-accent) !important; background: none !important; box-shadow: none !important; }
@media (max-width: 768px) {
    .departments-carousel .department-card { padding: 10px 8px 12px !important; border-radius: 16px !important; }
    .departments-carousel .department-image-container { padding: 4%; }
    .departments-carousel .department-name { font-size: .78rem !important; margin-top: 8px !important; padding-top: 8px !important; }
}

/* Faixa de marcas alinhada às bordas dos cards (o container tem 24px de
   respiro no desktop e 16px no celular; a faixa ia até as setas). */
.brands-section { box-sizing: border-box; width: auto !important; margin-left: 24px !important; margin-right: 24px !important;
    border: 1px solid var(--ap-line-soft); border-radius: 18px !important; box-shadow: 0 1px 2px rgba(17,17,18,.03) !important; }
@media (max-width: 768px) { .brands-section { margin-left: 16px !important; margin-right: 16px !important; border-radius: 16px !important; } }

.carousel-nav-btn { width: 42px !important; height: 42px !important; border-radius: 12px !important;
    background: var(--ap-surface) !important; color: var(--ap-ink) !important; border: 1px solid var(--ap-line-soft) !important;
    box-shadow: 0 8px 20px -12px rgba(17,17,18,.35) !important; transition: background .18s, color .18s !important; }
.carousel-nav-btn:hover { background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: #fff !important; }

/* ---------- Cartão de produto (desktop; o celular já foi aprovado como está) ---------- */
@media (min-width: 769px) {
    .products-carousel .product-card, .products-grid .product-card {
        border: 1px solid var(--ap-line-soft) !important; border-radius: 18px !important;
        background: var(--ap-surface) !important; box-shadow: 0 1px 2px rgba(17,17,18,.03) !important; overflow: hidden;
        transition: transform .22s var(--ap-ease-out), box-shadow .22s var(--ap-ease-out), border-color .22s !important;
    }
    .products-carousel .product-card:hover, .products-grid .product-card:hover {
        transform: translateY(-3px); border-color: var(--ap-accent-24) !important;
        box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--ap-accent, #1e3370) 35%, transparent) !important;
    }
    .products-carousel .product-card .product-image img, .products-grid .product-card .product-image img { transition: transform .35s var(--ap-ease-out); }
    .products-carousel .product-card:hover .product-image img, .products-grid .product-card:hover .product-image img { transform: scale(1.04); }
    .products-carousel .product-name, .products-grid .product-name { font-family: var(--ap-body) !important; font-weight: 600 !important; color: var(--ap-ink) !important; }
    .products-carousel .product-card:hover .product-name, .products-grid .product-card:hover .product-name { color: var(--ap-accent) !important; }
    .products-carousel .stock-urgency-badge, .products-grid .stock-urgency-badge {
        display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
        background: rgba(180,83,9,.08); color: var(--ap-warn) !important; font-size: .7rem !important; font-weight: 700; }
    .products-carousel .price-value, .products-grid .price-value {
        font-family: var(--ap-display) !important; font-weight: 800 !important; color: var(--ap-accent) !important; letter-spacing: -.01em; }
}

/* ---------- Página de produto ---------- */
.product-container .product-card-full { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.product-container .product-gallery,
.product-container .product-info,
.product-container .details-block,
.product-container .ml-shipping-calc {
    background: var(--ap-surface) !important; border: 1px solid var(--ap-line-soft) !important;
    border-radius: var(--ap-r-card) !important; box-shadow: 0 1px 2px rgba(17,17,18,.03) !important;
}
.product-container .product-gallery { padding: 1.25rem !important; }
.product-thumbnails .product-thumbnail { border-radius: 12px !important; border: 1px solid var(--ap-line-soft) !important; overflow: hidden; }
.product-thumbnails .product-thumbnail.active, .product-thumbnails .product-thumbnail:hover { border-color: var(--ap-accent) !important; box-shadow: 0 0 0 2px var(--ap-accent-14); }

.product-header-meta .product-brand { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
    border-radius: 999px; background: var(--ap-accent-08); color: var(--ap-accent) !important; font: 700 .75rem var(--ap-body);
    letter-spacing: .03em; text-transform: uppercase; }
.product-container .product-info { padding: 1.5rem !important; }
.product-container .product-summary-card { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.product-summary-card .product-sku { color: var(--ap-ink-3) !important; font-size: .8rem !important; }
.product-summary-card .product-rating-score { font-weight: 700; color: var(--ap-ink); }
.product-summary-card .product-rating-stars i { color: #f5a524 !important; }
.product-summary-card .product-rating-count { color: var(--ap-ink-3); }
.product-summary-card .product-title { font-family: var(--ap-display) !important; font-weight: 800 !important;
    letter-spacing: -.02em !important; color: var(--ap-ink) !important; line-height: 1.2 !important; margin: .6rem 0 1rem !important; }
.product-summary-card .price-value { font-family: var(--ap-display) !important; font-weight: 800 !important;
    color: var(--ap-accent) !important; font-size: clamp(1.7rem, 3vw, 2.2rem) !important; letter-spacing: -.02em; }
.product-summary-card .price-original { color: var(--ap-ink-3) !important; }
.product-summary-card .discount-badge { background: rgba(0,158,91,.1) !important; color: var(--ap-ok) !important; border-radius: 999px !important; font-weight: 700; }
.product-summary-card .price-label-installment { color: var(--ap-ink-2) !important; }

.product-actions { display: flex; flex-direction: column; gap: .6rem !important; margin-top: 1.25rem !important; }
.product-actions .btn-buy-now, .product-actions .btn-add-cart {
    width: 100%; height: 52px !important; border-radius: var(--ap-r-btn) !important; font: 700 .9rem var(--ap-body) !important;
    letter-spacing: .02em; text-transform: none !important; cursor: pointer; display: inline-flex !important;
    align-items: center; justify-content: center; gap: .5rem; transition: background .18s, color .18s, box-shadow .18s !important; }
body #buyNowBtn#buyNowBtn.btn-buy-now:not(.btn-contact-us):not(.btn-notify-stock), .product-actions .btn-buy-now { background: var(--ap-accent) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--ap-accent, #1e3370) 70%, transparent) !important; }
body #buyNowBtn#buyNowBtn.btn-buy-now:not(.btn-contact-us):not(.btn-notify-stock):hover, .product-actions .btn-buy-now:hover { background: var(--ap-accent-hi) !important; }
.product-actions .btn-buy-now::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-bolt) center / 1em 1em no-repeat; mask: var(--si-bolt) center / 1em 1em no-repeat; background-color: currentColor !important; font-family: inherit; font-weight: 900; font-size: .85rem; }
body #addCartBtn#addCartBtn.btn-add-cart, .product-actions .btn-add-cart { background: var(--ap-surface) !important; color: var(--ap-accent) !important; -webkit-text-fill-color: var(--ap-accent) !important;
    border: 1px solid var(--ap-accent-40) !important; box-shadow: none !important; }
body #addCartBtn#addCartBtn.btn-add-cart:hover, .product-actions .btn-add-cart:hover { background: var(--ap-accent-08) !important; }
.product-actions .btn-add-cart::before { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask: var(--si-shopping-cart) center / 1em 1em no-repeat; mask: var(--si-shopping-cart) center / 1em 1em no-repeat; background-color: currentColor !important; font-family: inherit; font-weight: 900; font-size: .85rem; }
.product-actions .add-cart-inline-row { width: 100%; }

.ml-shipping-calc { padding: 1.1rem 1.25rem !important; margin-top: 1rem !important; display: block !important; }
.ml-shipping-calc .ml-shipping-header { display: flex !important; align-items: center; gap: .7rem; }
.ml-shipping-calc .ml-shipping-summary { display: flex; flex-direction: column; }
.ml-shipping-calc .ml-shipping-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex !important;
    align-items: center; justify-content: center; background: var(--ap-accent-08); color: var(--ap-accent) !important; font-size: .85rem; }
.ml-shipping-calc .ml-shipping-title { font: 700 .92rem var(--ap-body) !important; color: var(--ap-ink) !important; }
.ml-shipping-calc .ml-shipping-subtitle { color: var(--ap-ink-3) !important; font-size: .78rem !important; }
.ml-shipping-calc .ml-shipping-form { width: 100% !important; max-width: none !important; display: flex !important; gap: .5rem !important; margin-top: .85rem; }
.ml-shipping-calc .ml-shipping-input { flex: 1 1 auto; min-width: 0; width: auto !important; height: 44px !important; border-radius: 12px !important; border: 1px solid var(--ap-line) !important;
    padding: 0 .9rem !important; font: .92rem var(--ap-body) !important; background: var(--ap-surface) !important; }
.ml-shipping-calc .ml-shipping-input:focus { outline: none; border-color: var(--ap-accent) !important; box-shadow: 0 0 0 3px var(--ap-accent-14); }
.ml-shipping-calc .ml-shipping-button { height: 44px !important; padding: 0 1.1rem !important; border-radius: 12px !important; border: 0 !important;
    background: var(--ap-accent) !important; color: #fff !important; font: 600 .86rem var(--ap-body) !important; cursor: pointer; }
.ml-shipping-calc .ml-shipping-button:hover { background: var(--ap-accent-hi) !important; }
.ml-shipping-calc .ml-shipping-link a { color: var(--ap-accent) !important; font-size: .78rem; font-weight: 600; }

.product-container .details-block { padding: 1.25rem 1.5rem !important; margin-bottom: 1rem !important; }
.product-container .details-header { display: flex !important; align-items: center; justify-content: flex-start !important; gap: .6rem;
    background: none !important; border: 0 !important; border-bottom: 1px solid var(--ap-line-soft) !important;
    padding: 0 0 .9rem !important; margin: 0 0 1rem !important; border-radius: 0 !important; }
.product-container .details-header i { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--ap-accent-08); color: var(--ap-accent) !important; font-size: .82rem; }
.product-container .details-header h3 { margin: 0 !important; font: 800 1.05rem var(--ap-display) !important; color: var(--ap-ink) !important; letter-spacing: -.01em; }
.product-description { color: var(--ap-ink-2) !important; line-height: 1.7 !important; font-size: .92rem !important; }
.product-description strong { color: var(--ap-ink); }
.product-container .spec-item { border-radius: 10px !important; border: 0 !important; padding: .7rem .9rem !important; }
.product-container .spec-item:nth-child(odd) { background: var(--ap-surface-2) !important; }
.product-container .spec-item:nth-child(even) { background: transparent !important; }
.product-container .spec-label { color: var(--ap-ink-3) !important; font-weight: 600 !important; font-size: .82rem !important; }
.product-container .spec-value { color: var(--ap-ink) !important; font-weight: 600 !important; font-size: .86rem !important; }
.product-container .feedback-block > * > div, .product-container .feedback-block .feedback-item {
    border-radius: 14px !important; border-color: var(--ap-line-soft) !important; }
.product-container .feedback-medias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .product-container .feedback-media { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ap-line-soft); background: var(--ap-surface); display: block; } .product-container video.feedback-media { width: 160px; }

/* texto interno do botão tem cor própria em regras antigas do mobile */
body #buyNowBtn#buyNowBtn.btn-buy-now:not(.btn-contact-us):not(.btn-notify-stock) span,
body #buyNowBtn#buyNowBtn.btn-buy-now:not(.btn-contact-us):not(.btn-notify-stock)::before { color: #fff !important; -webkit-text-fill-color: #fff !important; }

@media (max-width: 768px) {
    .products-section.category-section:not(.hide-section-title) .category-section-head {
        flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
        text-align: left !important; padding: 0 .9rem !important; margin-bottom: .75rem !important; }
    .products-section.category-section:not(.hide-section-title) .category-section-title { font-size: 1.05rem; text-align: left !important; }
    .products-section.category-section:not(.hide-section-title) .category-section-view-all { font-size: .76rem !important; }
    .departments-section .departments-section-head::before { font-size: 1.05rem; white-space: nowrap; }
    .departments-section .departments-section-head { padding: 0 .9rem !important; align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: .75rem; }
    .departments-section .category-section-view-all { font-size: 0 !important; white-space: nowrap; margin: 0 !important; }
    .departments-section .category-section-view-all::before { content: "Ver todas"; font-size: .76rem; }
    .departments-section .category-section-view-all i { font-size: .6rem !important; }
}


/* Sem setas decorativas (pedido do cliente): some o chevron dos links "Ver todos". */
.category-section-view-all i, .departments-section .category-section-view-all i { display: none !important; }
.products-section.category-section .category-section-view-all:hover,
.departments-section .category-section-view-all:hover { gap: .35rem; text-decoration: underline !important; text-underline-offset: 3px; }

/* Botões "Conheça nossos produtos" / "Ver todos os Produtos" da home */
.home-hero-cta, a.home-hero-cta.home-ver-todos-produtos-btn {
    display: inline-flex !important; align-items: center; justify-content: center; height: 50px; padding: 0 1.75rem !important;
    border: 0 !important; border-radius: var(--ap-r-btn) !important; background: var(--ap-accent) !important; color: #fff !important;
    font: 600 .92rem var(--ap-body) !important; letter-spacing: .01em !important; text-decoration: none !important;
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--ap-accent, #1e3370) 70%, transparent) !important; transition: background .18s, box-shadow .18s !important; }
.home-hero-cta:hover { background: var(--ap-accent-hi) !important; color: #fff !important; }
@media (max-width: 768px) {
    .home-hero-cta, a.home-hero-cta.home-ver-todos-produtos-btn { width: 100%; max-width: 360px; height: 48px; }
}

/* Cartão de produto no celular: mesma linguagem do desktop (sem hover) */
@media (max-width: 768px) {
    html body .products-carousel .product-card, html body .products-grid .product-card,
    html body.home-page .category-section .product-card, html body.home-page .products-grid .product-card {
        border: 1px solid var(--ap-line-soft) !important; border-radius: 16px !important; background: #fff !important;
        box-shadow: 0 1px 2px rgba(17,17,18,.03) !important; overflow: hidden; }
    .products-carousel .product-name, .products-grid .product-name { font-family: var(--ap-body) !important; font-weight: 600 !important; color: var(--ap-ink) !important; }
    .products-carousel .stock-urgency-badge, .products-grid .stock-urgency-badge {
        display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
        background: rgba(180,83,9,.08); color: var(--ap-warn) !important; font-size: .66rem !important; font-weight: 700; }
    .products-carousel .price-value, .products-grid .price-value {
        font-family: var(--ap-display) !important; font-weight: 800 !important; color: var(--ap-accent) !important; }
}

/* Cartão: raio vence regras antigas por página (home-mobile-fluid usa body.home-page) */
html body .products-carousel .product-card, html body .products-grid .product-card,
html body.home-page .category-section .product-card { border-radius: 18px !important; }
@media (max-width: 768px) {
    html body .products-carousel .product-card, html body .products-grid .product-card,
    html body.home-page .category-section .product-card { border-radius: 16px !important; }
    html body .products-carousel .product-card .product-image img { border-radius: 10px; }
}

/* Página de produto: ícone do "Adicionar" colado no texto e frete sem recuo */
.product-actions .btn-add-cart > span, .product-actions .btn-buy-now > span { flex: 0 0 auto !important; width: auto !important; }
body #addCartBtn#addCartBtn.btn-add-cart { justify-content: center !important; padding: 0 1rem !important; }
.ml-shipping-calc .ml-shipping-form, .ml-shipping-calc .ml-shipping-link, .ml-shipping-calc .ml-shipping-result { margin-left: 0 !important; padding-left: 0 !important; }
.ml-shipping-calc .ml-shipping-form { margin-top: 1rem !important; }
.ml-shipping-calc .ml-shipping-button { flex: 0 0 auto; }

/* Especificações: sem teto de 500px (cortava "Quantidade em estoque" no celular) */
.product-container .details-block .product-specs-grid:not(.collapsed) { max-height: none !important; overflow: visible !important; }

/* Cards dos carrosséis: o bloco de texto não tem moldura própria — só uma linha horizontal separando da foto */
html body .products-carousel .product-card .product-info {
    border: 0 !important;
    border-top: 1px solid var(--ap-line-soft, rgba(17,17,18,.07)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}