/*
 * Alfa Printi Suite 4.9.7 — ajustes exclusivos do carrinho mobile.
 * Carregado como a última camada visual do carrinho, sem alterar desktop,
 * checkout, Minha Conta ou a lógica nativa do WooCommerce.
 */

@media (max-width: 767px) {
    /* Menu acionado pelos três pontos: coluna alinhada logo abaixo do gatilho. */
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open {
        grid-template-columns: 96px minmax(0, 1fr) 46px !important;
        grid-template-rows: auto auto auto auto auto !important;
        grid-template-areas:
            "thumb name actions"
            "meta meta menu"
            "qty qty qty"
            "unit unit unit"
            "total total total" !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open
    > .apcsu-cart-actions-cell {
        grid-area: menu !important;
        display: flex !important;
        align-self: start !important;
        justify-self: end !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open
    .apcsu-ui-cart-item-actions {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid #e0e6ef !important;
        border-radius: 13px !important;
        background: #f8fafc !important;
        box-shadow: 0 8px 22px rgba(19, 43, 82, 0.08) !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open
    :is(
        .apcsu-ui-cart-action-inline,
        .apcsu-ui-save-later-inline,
        .apcsu-ui-copy-item-inline,
        .apcsu-ui-remove-item-inline,
        .apcsu-ui-cart-action
    ) {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
    }

    /* Remove o “:”/dois pontos criado por templates responsivos antes da arte final. */
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form :is(
        .apcsu-cart-art-row,
        .apcsu-cart-art-row > td,
        .apcsu-cart-art-row__cell,
        td.apcsu-core-product-art-cell
    )::before,
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form :is(
        .apcsu-cart-art-row,
        .apcsu-cart-art-row > td,
        .apcsu-cart-art-row__cell,
        td.apcsu-core-product-art-cell
    )::after {
        content: none !important;
        display: none !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-row
    :is(.apcsu-ui-cart-actions-trigger, [data-apcsu-cart-actions-trigger]) {
        display: none !important;
    }

    /* Opções de arte em trilho horizontal com rolagem nativa por toque. */
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid,
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 16px 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scroll-padding-inline: 16px !important;
        scrollbar-width: thin !important;
        overscroll-behavior-inline: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-card,
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid
    > :is(
        .apcsu-cart-art-card--upload,
        .apcsu-cart-art-card--later,
        .apcsu-cart-art-card--design
    ) {
        grid-column: auto !important;
        grid-row: auto !important;
        flex: 0 0 clamp(230px, 76vw, 280px) !important;
        width: clamp(230px, 76vw, 280px) !important;
        min-width: clamp(230px, 76vw, 280px) !important;
        max-width: clamp(230px, 76vw, 280px) !important;
        height: auto !important;
        min-height: 200px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: pan-x pan-y !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid[data-apcsu-art-swiping="1"]
    > .apcsu-cart-art-card {
        cursor: grabbing !important;
    }
}

@media (max-width: 480px) {
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open {
        grid-template-columns: 84px minmax(0, 1fr) 44px !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open
    > .apcsu-cart-actions-cell,
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form tr.cart_item.apcsu-cart-item-card.is-cart-actions-open
    .apcsu-ui-cart-item-actions {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-card,
    html body.woocommerce-cart.apcsu-surface-cart
    .woocommerce-cart-form .apcsu-cart-art-choice-grid
    > :is(
        .apcsu-cart-art-card--upload,
        .apcsu-cart-art-card--later,
        .apcsu-cart-art-card--design
    ) {
        flex-basis: clamp(220px, 80vw, 260px) !important;
        width: clamp(220px, 80vw, 260px) !important;
        min-width: clamp(220px, 80vw, 260px) !important;
        max-width: clamp(220px, 80vw, 260px) !important;
    }
}