/* =============================================================================
 * awa-bundle-pdp.css  — v2 (Fase 3 token migration 2026)
 * AWA Motos — PDP Premium: Layout, Card Shell, WhatsApp CTA, Relacionados
 * Carregado via catalog_product_view.xml order=1210 (após awa-pdp-visual-fix)
 *
 * Tokens via: awa-core-variables.css
 * ============================================================================= */

/* --------------------------------------------------------------------------
 * 1. CARD SHELL — Coluna de compra (product-info-main)
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body.catalog-product-view .product-info-main {
        padding: var(--awa-space-6, 24px) !important;
        border: var(--awa-border-width, 1px) solid var(--awa-border, #e5e5e5) !important;
        border-radius: var(--awa-ui-radius-card, 16px) !important;
        background: var(--awa-white, #fff) !important;
        box-shadow: var(--awa-ui-panel-shadow, 0 2px 16px rgb(0 0 0 / 7%)) !important;
    }
}

@media (max-width: 767px) {
    body.catalog-product-view .product-info-main {
        padding: var(--awa-space-4, 16px) !important;
        border: var(--awa-border-width, 1px) solid var(--awa-border, #e5e5e5) !important;
        border-radius: var(--awa-ui-radius-panel, 16px) !important;
        background: var(--awa-white, #fff) !important;
        box-shadow: 0 1px 6px rgb(0 0 0 / 5%) !important;
        margin-top: var(--awa-space-3, 12px) !important;
    }
}

/* --------------------------------------------------------------------------
 * 2. LAYOUT — Proporções desktop: galeria 58% / info 42%
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    body.catalog-product-view .main-detail > .row > .col-md-6.col-sm-6.col-xs-12:first-child {
        flex: 0 0 calc(58% - 16px) !important;
        max-width: calc(58% - 16px) !important;
    }

    body.catalog-product-view .main-detail > .row > .col-md-6.col-sm-6.col-xs-12:last-child {
        flex: 0 0 calc(42% - 16px) !important;
        max-width: calc(42% - 16px) !important;
    }
}

/* --------------------------------------------------------------------------
 * 3. PREÇO — destaque máximo quando logado
 * -------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .price-box:not(.b2b-login-to-see-price) .price {
    font-size: clamp(24px, 2.5vw, 32px) !important;
    font-weight: var(--awa-weight-extrabold, 800) !important;
    color: var(--awa-primary, var(--awa-red, #b73337)) !important;
}

/* --------------------------------------------------------------------------
 * 4. ESPAÇAMENTO — Ritmo consistente entre seções
 * -------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .product-info-price {
    margin-block: var(--awa-space-3, 12px) !important;
}

body.catalog-product-view .product-info-main .box-tocart {
    margin-block: var(--awa-space-4, 16px) !important;
}

/* --------------------------------------------------------------------------
 * 5. STOCK e SKU — Hierarquia secundária
 * -------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .product-info-stock-sku .stock,
body.catalog-product-view .product-info-main .product-info-stock-sku .product.attribute.sku {
    font-size: var(--awa-text-xs, 13px) !important;
    line-height: var(--awa-leading-normal, 1.4) !important;
    color: var(--awa-text-muted, #666) !important;
}

body.catalog-product-view .product-info-main .product-info-stock-sku .product.attribute.sku .value {
    display: inline !important;
    visibility: visible !important;
}

/* --------------------------------------------------------------------------
 * 6. BOTÃO ADD TO CART — Full width, altura premium
 * -------------------------------------------------------------------------- */
body.catalog-product-view .product-info-main .action.tocart,
body.catalog-product-view .product-info-main #product-addtocart-button {
    width: 100% !important;
    min-height: var(--awa-space-9-5, 52px) !important;
    border-radius: var(--awa-ui-radius-button, 12px) !important;
    font-size: var(--awa-ui-body-size, 15px) !important;
    font-weight: var(--awa-weight-bold, 700) !important;
    letter-spacing: var(--awa-tracking-tight, 0.01em) !important;
    box-shadow: var(--awa-ui-cta-shadow, 0 4px 14px rgb(183 51 55 / 22%)) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease, background-color 0.22s ease !important;
}

body.catalog-product-view .product-info-main .action.tocart:hover,
body.catalog-product-view .product-info-main #product-addtocart-button:hover {
    box-shadow: var(--awa-ui-cta-shadow-hover, 0 7px 22px rgb(183 51 55 / 32%)) !important;
    transform: translateY(var(--awa-neg-0-25, -1px)) !important;
}

/* --------------------------------------------------------------------------
 * 7. WHATSAPP CTA — Botão verde full-width abaixo do tocart
 *
 * DOM: a.awa-pdp-whatsapp-cta > svg.awa-pdp-whatsapp-cta__icon + span
 * -------------------------------------------------------------------------- */
body.catalog-product-view a.awa-pdp-whatsapp-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--awa-gap-sm, 8px) !important;
    width: 100% !important;
    min-height: var(--awa-size-46, 46px) !important;
    padding: 0 var(--awa-space-5, 20px) !important;
    border-radius: var(--awa-ui-radius-button, 12px) !important;
    background: #25d366 !important;
    color: var(--awa-white, #fff) !important;
    font-size: var(--awa-text-sm, 14px) !important;
    font-weight: var(--awa-weight-bold, 700) !important;
    letter-spacing: var(--awa-tracking-tight, 0.01em) !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgb(37 211 102 / 28%) !important;
    transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
    margin-top: var(--awa-space-2-5, 10px) !important;
}

body.catalog-product-view a.awa-pdp-whatsapp-cta:hover {
    background: #1ebe5d !important;
    box-shadow: 0 6px 18px rgb(37 211 102 / 36%) !important;
    transform: translateY(var(--awa-neg-0-25, -1px)) !important;
    color: var(--awa-white, #fff) !important;
    text-decoration: none !important;
}

body.catalog-product-view a.awa-pdp-whatsapp-cta:focus-visible {
    outline: var(--awa-outline-width, 2px) solid #25d366 !important;
    outline-offset: var(--awa-space-0-5, 2px) !important;
}

body.catalog-product-view .awa-pdp-whatsapp-cta__icon {
    flex-shrink: 0 !important;
    width: var(--awa-space-4-5, 18px) !important;
    height: var(--awa-space-4-5, 18px) !important;
}

body.catalog-product-view a.awa-pdp-whatsapp-cta span {
    line-height: var(--awa-leading-base, 1.3) !important;
}

/* --------------------------------------------------------------------------
 * 8. TRUST BAR — Sinais de confiança (Envio / Garantia / Troca)
 *
 * DOM: .awa-pdp-trust-bar > .awa-pdp-trust-bar__item > svg + span
 * -------------------------------------------------------------------------- */
body.catalog-product-view .awa-pdp-trust-bar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: var(--awa-gap-2-5, 10px) !important;
    padding: var(--awa-space-3-5, 14px) var(--awa-space-3, 12px) !important;
    margin-top: var(--awa-space-3, 12px) !important;
    border: var(--awa-border-width, 1px) solid var(--awa-border, #e5e5e5) !important;
    border-radius: var(--awa-ui-radius-card, 16px) !important;
    background: var(--awa-gray-30, #fafafa) !important;
}

body.catalog-product-view .awa-pdp-trust-bar__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--awa-gap-1-25, 5px) !important;
    flex: 1 1 var(--awa-size-80, 80px) !important;
    min-width: var(--awa-size-72, 72px) !important;
    text-align: center !important;
    color: var(--awa-text-muted, #555) !important;
    font-size: var(--awa-text-xs, 12px) !important;
    font-weight: var(--awa-weight-semibold, 600) !important;
    line-height: var(--awa-leading-base, 1.3) !important;
}

body.catalog-product-view .awa-pdp-trust-bar__item svg {
    color: var(--awa-primary, var(--awa-red, #b73337)) !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
 * 9. RELACIONADOS — Card shell premium (Swiper carousel)
 *
 * DOM: .awa-pdp-related .swiper-slide > .product-item
 *      > .product-thumb + .product-info
 * -------------------------------------------------------------------------- */
body.catalog-product-view .awa-pdp-related .product-item {
    padding: var(--awa-space-3, 12px) !important;
    border: var(--awa-border-width, 1px) solid var(--awa-border, #e5e5e5) !important;
    border-radius: var(--awa-ui-radius-card, 16px) !important;
    background: var(--awa-white, #fff) !important;
    box-shadow: var(--awa-ui-card-shadow, 0 2px 10px rgb(0 0 0 / 6%)) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease !important;
    overflow: hidden !important;
}

body.catalog-product-view .awa-pdp-related .product-item:hover {
    box-shadow: var(--awa-ui-card-shadow-hover, 0 8px 24px rgb(0 0 0 / 11%)) !important;
    transform: translateY(var(--awa-neg-0-5, -2px)) !important;
}

body.catalog-product-view .awa-pdp-related .product-item .product-item-link {
    font-size: var(--awa-text-sm, 13px) !important;
    font-weight: var(--awa-weight-semibold, 600) !important;
    line-height: var(--awa-leading-cozy, 1.35) !important;
    color: var(--awa-text, #333) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: var(--awa-ui-card-title-min-height, 2.9em) !important;
}

body.catalog-product-view .awa-pdp-related .product-item .product-thumb {
    border-radius: var(--awa-ui-radius-field, 12px) !important;
    overflow: hidden !important;
    margin-bottom: var(--awa-space-2, 8px) !important;
}

body.catalog-product-view .awa-pdp-related .rokan-product-heading h2 {
    font-size: var(--awa-ui-heading-3, clamp(18px, 2vw, 22px)) !important;
    font-weight: var(--awa-weight-bold, 700) !important;
    color: var(--awa-text, #333) !important;
    margin-bottom: var(--awa-space-4, 16px) !important;
}

/* --------------------------------------------------------------------------
 * 10. MOBILE — Ajustes responsivos
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.catalog-product-view .awa-pdp-related .product-item {
        padding: var(--awa-space-2-5, 10px) !important;
    }

    body.catalog-product-view .awa-pdp-trust-bar {
        gap: var(--awa-gap-sm, 8px) !important;
        padding: var(--awa-space-3, 12px) var(--awa-space-2-5, 10px) !important;
    }

    body.catalog-product-view .awa-pdp-trust-bar__item {
        flex: 1 1 var(--awa-size-60, 60px) !important;
        min-width: var(--awa-size-60, 60px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.catalog-product-view .product-info-main .action.tocart,
    body.catalog-product-view .product-info-main #product-addtocart-button,
    body.catalog-product-view a.awa-pdp-whatsapp-cta,
    body.catalog-product-view .awa-pdp-related .product-item {
        transition: none !important;
    }
}