/* ==========================================================================
   APF — Controls LAYOUT (structure only; no colors/effects)
   Scope: [data-apf="common"] .apf-controls …
   ========================================================================== */

[data-apf="common"] .apf-controls {
    --gap: 8px;
    display: grid;
    gap: var(--gap);
}

    /* Media + Product grids */
    [data-apf="common"] .apf-controls .apf-media,
    [data-apf="common"] .apf-controls .apf-product {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--gap);
    }

    /* Stacks */
    [data-apf="common"] .apf-controls .apf-upload,
    [data-apf="common"] .apf-controls .apf-media-picker,
    [data-apf="common"] .apf-controls .apf-stock {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    /* Variations */
    [data-apf="common"] .apf-controls .apf-variations {
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    [data-apf="common"] .apf-controls .apf-variation-selects {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: .75rem;
    }

    /* Pricing */
    [data-apf="common"] .apf-controls .apf-pricing {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--gap);
        align-items: end;
    }

    [data-apf="common"] .apf-controls .apf-price-box {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        align-items: flex-end;
    }

    /* Actions row */
    [data-apf="common"] .apf-controls .apf-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
        justify-content: flex-start;
    }

/* Mobile niceties */
@media (max-width: 900px) {
    [data-apf="common"] .apf-controls {
        grid-auto-flow: row;
    }
}