/* AWA Motos — Bundle Tail: Fase 2 visual improvements
 * 2026-04-19
 * Carregado globalmente (default_head_blocks.xml), após todos os outros bundles.
 * Escopo: shadow global, homepage hot-deal heading, CTA shadows.
 */


/* =============================================================================
   1. GLOBAL CARD SHELL — adiciona sombra a .item-product e .product-item
   (bundle-core já tem border/radius/bg; aqui adicionamos a camada de shadow)
   ============================================================================= */

body .page-wrapper .item-product,
body .page-wrapper .product-item {
    box-shadow: var(--awa-ui-card-shadow, 0 8px 24px rgb(17 24 39 / 6%));
}

body .page-wrapper .item-product:hover,
body .page-wrapper .product-item:hover {
    box-shadow: var(--awa-ui-card-shadow-hover, 0 12px 32px rgb(17 24 39 / 10%));
    border-color: var(--awa-red-16, rgb(183 51 55 / 16%)) !important;
}

/* Evitar sombra dupla na PLP onde awa-bundle-category já aplica !important */
.catalog-category-view .products-grid .item-product,
.catalog-category-view .products-grid .item-product:hover {
    box-shadow: none;
}


/* =============================================================================
   2. GLOBAL CTA BUTTON SHADOW — todos os botões tocart/btn-add-to-cart
   ============================================================================= */

body .page-wrapper .item-product .action.tocart,
body .page-wrapper .item-product .btn-add-to-cart,
body .page-wrapper .product-item .action.tocart,
body .page-wrapper .product-item .btn-add-to-cart {
    box-shadow: var(--awa-ui-cta-shadow, 0 6px 16px rgb(183 51 55 / 14%));
    transition: box-shadow 0.18s ease, transform 0.14s ease !important;
}

body .page-wrapper .item-product .action.tocart:hover,
body .page-wrapper .item-product .btn-add-to-cart:hover,
body .page-wrapper .product-item .action.tocart:hover,
body .page-wrapper .product-item .btn-add-to-cart:hover {
    box-shadow: var(--awa-ui-cta-shadow-hover, 0 10px 24px rgb(142 38 41 / 18%)) !important;
    transform: translateY(var(--awa-neg-0-25, -1px));
}

body .page-wrapper .item-product .action.tocart[disabled],
body .page-wrapper .item-product .btn-add-to-cart[disabled],
body .page-wrapper .product-item .action.tocart[disabled] {
    box-shadow: none !important;
    transform: none !important;
}

/* Evitar sombra dupla na PLP onde awa-bundle-category já aplica !important */
.catalog-category-view .products-grid .item-product .actions-primary .btn-add-to-cart,
.catalog-category-view .products-grid .item-product .actions-primary .action.tocart {
    box-shadow: none;
    transition: none !important;
}


/* =============================================================================
   3. HOMEPAGE: hot-deal section heading
   (Estilos do awa-page-home-category-premium.css não carregados na homepage)
   ============================================================================= */

:is(body.cms-index-index, body.cms-home) .page-wrapper .hot-deal .rokan-product-heading {
    display: flex;
    align-items: baseline;
    gap: var(--awa-space-2-5, 10px);
    margin-bottom: var(--awa-space-4, 16px);
}

:is(body.cms-index-index, body.cms-home) .page-wrapper .hot-deal .rokan-product-heading h2 {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    font-weight: var(--awa-weight-bold, 700);
    color: var(--awa-hc-text-1, var(--awa-gray-960, #111827));
    line-height: var(--awa-ui-title-line-height, 1.2);
    margin: 0;
}

:is(body.cms-index-index, body.cms-home) .page-wrapper .hot-deal .rokan-product-heading .sup-title {
    display: inline-flex;
    align-items: center;
    min-height: var(--awa-space-6, 24px);
    padding: 0 var(--awa-space-3, 12px);
    border: var(--awa-border-width, 1px) solid rgb(183 51 55 / 14%);
    border-radius: var(--awa-radius-full, 9999px);
    background: linear-gradient(180deg, rgb(183 51 55 / 9%) 0%, rgb(183 51 55 / 4%) 100%);
    color: var(--primary-color, var(--awa-red, #b73337)) !important;
    font-size: 0.72rem;
    font-weight: var(--awa-weight-bold, 700);
    letter-spacing: var(--awa-tracking-caps, 0.08em);
    text-transform: uppercase;
}


/* =============================================================================
   4. HOMEPAGE: hot-deal countdown block
   ============================================================================= */

:is(body.cms-index-index, body.cms-home) .page-wrapper .hot-deal .countdown_block {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-space-2, 8px);
    padding: var(--awa-space-2-5, 10px) var(--awa-space-4, 16px);
    background: var(--awa-hc-surface-1, #f8f9fa);
    border: var(--awa-border-width, 1px) solid var(--awa-hc-border, var(--awa-gray-170, #e5e7eb));
    border-radius: var(--awa-radius-full, 9999px);
    font-weight: var(--awa-weight-semibold, 600);
    font-size: var(--awa-ui-body-size, 15px);
}


/* =============================================================================
   5. HOMEPAGE SWIPER CARDS — price area min-height para alinhamento
   ============================================================================= */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .swiper .item-product .awa-price-slot,
:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .swiper .item-product .info-price {
    min-height: var(--awa-ui-card-price-min-height, 48px);
    display: flex;
    align-items: center;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .swiper .item-product h3.product-name {
    min-height: var(--awa-ui-card-title-min-height, 2.9em);
    line-height: var(--awa-ui-title-line-height, 1.2);
    font-size: var(--awa-ui-body-size, 15px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-block: var(--awa-space-2, 8px);
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5) .page-wrapper .swiper .item-product .product-info-cart {
    margin-top: auto;
}


/* =============================================================================
   6. MOBILE: ajustes responsivos para sombra e tamanho de card
   ============================================================================= */

@media (max-width: 768px) {
    body .page-wrapper .item-product,
    body .page-wrapper .product-item {
        box-shadow: var(--awa-shadow-xs6, 0 4px 12px rgb(17 24 39 / 5%));
        transform: none !important;
    }

    body .page-wrapper .item-product:hover,
    body .page-wrapper .product-item:hover {
        box-shadow: var(--awa-shadow-xs7, 0 6px 16px rgb(17 24 39 / 8%));
        transform: none !important;
    }

    .catalog-category-view .products-grid .item-product,
    .catalog-category-view .products-grid .item-product:hover {
        box-shadow: none !important;
        transform: none !important;
    }
}