/*
 * Alfa Printi Suite 4.10.25 — Arquivo / Arte final no carrinho mobile.
 *
 * Somente até 767px:
 * - mantém as três opções em uma única linha;
 * - impede qualquer encolhimento lateral;
 * - mantém a largura já validada e usa a maior altura natural entre os três cards;
 * - habilita rolagem horizontal nativa por toque;
 * - não altera o desktop.
 */

@media (max-width: 767px) {
    html body:not(.wp-admin) .apcsu-cart-art-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="0"]
    > [data-apcsu-cart-art-content="1"],
    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="0"]
    > [data-apcsu-cart-art-notice="1"] {
        display: none !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid {
        --apcsu-art-card-reference-width: min(310px, calc(100vw - 64px));

        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !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 20px !important;
        box-sizing: border-box !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;

        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 16px !important;
        scrollbar-width: none !important;

        direction: ltr !important;
        writing-mode: horizontal-tb !important;
        scroll-behavior: auto !important;
        scroll-padding-left: 16px !important;
        scroll-padding-right: 16px !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-track {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px !important;

        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        direction: ltr !important;
        writing-mode: horizontal-tb !important;
    }

    /* Fallback antes do JavaScript montar o trilho. */
    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-card,
    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-track
    > .apcsu-cart-art-card {
        position: relative !important;
        display: flex !important;
        flex: 0 0 var(--apcsu-art-card-reference-width) !important;
        flex-basis: var(--apcsu-art-card-reference-width) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-self: stretch !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: var(--apcsu-art-card-reference-width) !important;
        min-width: var(--apcsu-art-card-reference-width) !important;
        max-width: var(--apcsu-art-card-reference-width) !important;
        min-height: 190px !important;

        /* Apenas a altura foi compactada; a largura validada permanece intacta. */
        padding: 16px 14px 12px !important;

        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        direction: ltr !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        scroll-margin-inline-start: 0 !important;
        touch-action: pan-x pan-y !important;
        transform: none !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card--upload {
        order: 1 !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-track {
        position: relative !important;
        inset-inline-start: 0 !important;
        margin-inline-start: 0 !important;
        transform: translateX(0) !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card--upload {
        margin-inline-start: 0 !important;
        scroll-margin-inline-start: 0 !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card--later {
        order: 2 !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card--design {
        order: 3 !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        direction: ltr !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    .apcsu-cart-art-card > .apcsu-prod-link-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid {
        --apcsu-art-card-reference-width: min(300px, calc(100vw - 48px));
        padding-right: 12px !important;
        padding-left: 12px !important;
        scroll-padding-inline: 12px !important;
        scroll-padding-left: 12px !important;
        scroll-padding-right: 12px !important;
    }

    html body:not(.wp-admin)
    .apcsu-cart-art-panel[data-apcsu-art-expanded="1"]
    > .apcsu-cart-art-choice-grid
    > .apcsu-cart-art-track {
        gap: 10px !important;
    }
}