/* ==========================================================================
   APF Common � Glass/Cosmic Shell (+ Media Actions, Tiered Pricing deduped)
   Scope: .apf-common-box and [data-apf="common"]
   ========================================================================== */

/* --------------------------------------
   Token bridge (assert once)
   -------------------------------------- */
.apf-common-box,
.apf-root.apf-common-shell {
    --apf-text: var(--text-high, #fffaff);
    --apf-text-mid: var(--text-mid, #e8e2f5);
    --apf-text-low: var(--text-low, #c9c3dd);
    --apf-accent-1: var(--ctl-c1, oklch(0.78 0.21 330));
    --apf-accent-2: var(--ctl-c2, oklch(0.84 0.18 210));
    --apf-accent-3: var(--ctl-c5, oklch(0.74 0.16 220));
    --apf-surface-0: var(--surface-0, #0a0a10);
    --apf-surface-1: color-mix(in oklch, var(--apf-accent-2) 12%, #0a0a10);
    --apf-surface-2: color-mix(in oklch, var(--apf-accent-1) 10%, #0a0a10);
    --apf-surface-3: color-mix(in oklch, var(--apf-accent-2) 16%, #0a0a10);
    --apf-border: var(--border, #ffffff22);
    --apf-focus: var(--focus-ring, color-mix(in oklch, var(--apf-accent-2) 70%, transparent));
    --apf-focus-strong: var(--focus-ring-strong, color-mix(in oklch, var(--apf-accent-2) 90%, transparent));
    --apf-gap: var(--gap, 14px);
    --apf-radius: var(--radius-lg, 16px);
    --apf-glass: linear-gradient(180deg, #ffffff10, #ffffff06), var(--apf-surface-2);
    --apf-glass-strong: linear-gradient(180deg, #ffffff14, #ffffff08), var(--apf-surface-2);
}
/* pick the smaller of 1600px or 90vw */
#brx-content.wordpress{
  width: min(1600px, 90vw);
  margin-inline: auto; /* center it, if not full width */
}

/* --------------------------------------
   Page backdrop (scoped)
   -------------------------------------- */
[data-apf="common"] {
    color: var(--apf-text);
    background: radial-gradient(1200px 700px at 85% -5%, color-mix(in oklch, var(--apf-accent-1) 14%, transparent), transparent 60%), radial-gradient(900px 500px at 5% 10%, color-mix(in oklch, var(--apf-accent-2) 12%, transparent), transparent 55%), linear-gradient(180deg, var(--apf-surface-1), var(--apf-surface-2));
}

/* --------------------------------------
   Wrapper card
   -------------------------------------- */
.apf-common-box {
    position: relative;
    max-width: var(--apf-ui-max-w);
    margin-inline: auto;
    padding: clamp(14px,1.5vw,18px);
    border-radius: var(--apf-radius);
    border: 1px solid var(--apf-border);
    background: var(--apf-glass);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklch, var(--apf-accent-2) 18%, transparent) inset;
    color: var(--apf-text);
    isolation: isolate;
    overflow: hidden;
}

    .apf-common-box::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(120deg, color-mix(in oklch, var(--apf-accent-1) 38%, transparent) 0%, transparent 35% 65%, color-mix(in oklch, var(--apf-accent-2) 38%, transparent) 100%);
        -webkit-mask: linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
        mask: linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        padding: 1px;
        opacity: .35;
    }
/* ===================== Compact spacing knobs ===================== */
/* Global switches (lower these to shrink spacing) */
:root {
  --apf-gap: 10px;            /* was 14px */
  --apf-pad-outer: 10px;      /* wrapper padding (desktop) */
  --apf-pad-outer-sm: 8px;    /* wrapper padding (mobile) */
  --apf-pad-card: 8px;        /* controls' card padding (was 12px) */
}

/* Wrapper: use tokens instead of hardcoded clamp */
.apf-common-box{
  padding: var(--apf-pad-outer) !important;
}

/* Controls’ cards */
.apf-col.apf-controls .control.apf-control,
.apf-col.apf-controls [data-apf-control]{
  padding: var(--apf-pad-card) !important;
}

/* Tighten section header spacing a touch */
.apf-col.apf-controls .apf-section__header,
.apf-col.apf-controls .apf-section-header{
  margin-bottom: 6px !important; /* was 8px */
}

/* The two-column host gap (controls ↔ stage) */
[data-apf="common"] > .apf-main{
  gap: var(--apf-gap) !important;
}

/* Mobile: shave the outer padding even more */
@media (max-width: 900px){
  .apf-common-box{
    padding: var(--apf-pad-outer-sm) !important;
  }
}

/* ================================================================
   Two-column host (controls + stage) � desktop + mobile 40/60
   ================================================================= */
[data-apf="common"] {
    --apf-ui-max-w: min(1600px, 90vw);
    --apf-mobile-preview-fr: 0.50;
    --apf-mobile-controls-fr: 0.50;
    --apf-mobile-vh: 100vh;
}

    /* Host container */
    [data-apf="common"] > .apf-main {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--apf-gap);
        min-width: 0;
        max-width: var(--apf-ui-max-w);
        margin-inline: auto;
    }

        /* Columns (desktop) */
        [data-apf="common"] > .apf-main > .apf-col {
            min-width: 0;
            min-height: 0;
            box-sizing: border-box;
        }

            [data-apf="common"] > .apf-main > .apf-col.apf-controls {
                order: 0;
                flex: 0 0 clamp(260px,25%,500px);
                max-width: 400px;
                display: flex;
                flex-direction: column;
                gap: var(--apf-gap);
                height: auto;
                min-width: 400px;
            }

            [data-apf="common"] > .apf-main > .apf-col.apf-preview,
            [data-apf="common"] > .apf-main > .apf-col.apf-stagecol {
                order: 1;
                flex: 1 1 auto;
                min-width: 200px;
                display: flex;
                flex-direction: column;
                gap: var(--apf-gap);
                overflow: visible !important;
                position: relative;
            }

/* --- MOBILE STACK --- */
@media (max-width:900px) {
    [data-apf="common"] > .apf-main {
        display: grid !important;
        grid-template-rows: calc(var(--apf-mobile-preview-fr) * var(--apf-mobile-vh)) calc(var(--apf-mobile-controls-fr) * var(--apf-mobile-vh));
        grid-template-columns: 1fr;
        grid-template-areas:
            "apf-preview"
            "apf-controls";
        gap: var(--apf-gap);
        min-height: var(--apf-mobile-vh);
        max-width: 100%;
        margin-inline: 0;
        padding-bottom: max(env(safe-area-inset-bottom,0px),0px);
    }

        [data-apf="common"] > .apf-main > .apf-col.apf-preview,
        [data-apf="common"] > .apf-main > .apf-col.apf-stagecol {
            grid-area: apf-preview;
            order: initial;
            flex: none;
            width: 100%;
            max-width: 100%;
        }

        [data-apf="common"] > .apf-main > .apf-col.apf-controls {
            grid-area: apf-controls;
            order: initial;
            flex: none;
            width: 100%;
            max-width: 100%;
            max-height: 100% !important;
            min-width: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

    [data-apf="common"] .apf-col.apf-preview .mid-preview-area,
    [data-apf="common"] .apf-col.apf-stagecol .mid-preview-area {
        height: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------
   Generic control cards
   -------------------------------------- */
.apf-col.apf-controls .control.apf-control,
.apf-col.apf-controls [data-apf-control] {
    background: var(--apf-glass-strong);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid var(--apf-border);
    border-radius: 12px;
    padding: 12px;
    margin: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px #ffffff08;
    transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s;
}

@media (hover:hover) {
    .apf-col.apf-controls .control.apf-control:hover,
    .apf-col.apf-controls [data-apf-control]:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.32);
        background: linear-gradient(180deg,#ffffff0a,#ffffff04), var(--apf-glass);
    }
}

.apf-col.apf-controls .apf-section__header,
.apf-col.apf-controls .apf-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.apf-col.apf-controls h2,
.apf-col.apf-controls h3,
.apf-col.apf-controls h4 {
    margin: 0;
    color: var(--apf-text);
    font-size: 14px;
    letter-spacing: .2px;
    font-weight: 650;
}

/* --------------------------------------
   Tables (generic; excludes tier tables)
   -------------------------------------- */
.apf-col.apf-controls .apf-control
table:not([data-apf-tier]):not(.apf-tier-table):not(.tiered-pricing-table) {
    width: 100%;
    border-collapse: collapse;
    background: color-mix(in oklch, var(--apf-surface-2) 70%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--apf-border);
    border-radius: 10px;
    overflow: hidden;
}

    .apf-col.apf-controls .apf-control
    table:not([data-apf-tier]):not(.apf-tier-table):not(.tiered-pricing-table) th,
    .apf-col.apf-controls .apf-control
    table:not([data-apf-tier]):not(.apf-tier-table):not(.tiered-pricing-table) td {
        padding: 8px 10px;
        font-size: 12px;
        color: var(--apf-text-mid);
        border-bottom: 1px solid color-mix(in oklch, var(--apf-border) 80%, #ffffff06);
    }

    .apf-col.apf-controls .apf-control
    table:not([data-apf-tier]):not(.apf-tier-table):not(.tiered-pricing-table) th {
        color: var(--apf-text);
        font-weight: 650;
        background: color-mix(in oklch, var(--apf-surface-2) 80%, #ffffff03);
    }

    .apf-col.apf-controls .apf-control
    table:not([data-apf-tier]):not(.apf-tier-table):not(.tiered-pricing-table) tr:last-child td {
        border-bottom: 0;
    }

/* --------------------------------------
   Scrollbars + Focus (scoped)
   -------------------------------------- */
[data-apf="common"] *::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

[data-apf="common"] *::-webkit-scrollbar-thumb {
    background: #ffffff26;
    border-radius: 10px;
}

[data-apf="common"] *::-webkit-scrollbar-track {
    background: #ffffff0a;
}

[data-apf="common"] *:focus-visible {
    outline: 2px solid var(--apf-focus);
    outline-offset: 2px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--apf-focus-strong) inset;
}

/* --------------------------------------
   Woo Cart / Mini-cart thumbnails
   -------------------------------------- */
.woocommerce-cart .product-thumbnail img,
.woocommerce-mini-cart .mini_cart_item .attachment-woocommerce_thumbnail {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 150px;
    height: auto;
}

.woocommerce-cart .product-thumbnail,
.woocommerce-mini-cart .mini_cart_item .thumbnail {
    line-height: 0;
}

/* ==========================================================================
   APF � WAPF + Tiered Pricing (DEDUPED)
   Scope: [data-apf="common"]
   ========================================================================== */

/* Tiered Pricing � compact tiles */
[data-apf="common"] .apf-tiered-dynamic .tiered-pricing-blocks,
[data-apf="common"] .tiered-pricing-wrapper .tiered-pricing-blocks {
    --apf-tiers-gap: .5rem;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--apf-tiers-gap) !important;
    margin: .4rem 0 !important;
}

[data-apf="common"] .apf-tiered-dynamic .tiered-pricing-block,
[data-apf="common"] .tiered-pricing-wrapper .tiered-pricing-block {
    flex: 0 1 calc(33.333% - var(--apf-tiers-gap)) !important;
    min-width: calc(33.333% - var(--apf-tiers-gap)) !important;
    display: flex !important;
    flex-direction: column !important;
    row-gap: .22rem !important;
    padding: .45rem .55rem !important;
    border-radius: 10px !important;
    background: var(--apf-surface-2) !important;
    border: 1px solid var(--apf-border) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.14) !important;
    color: var(--apf-text) !important;
    font: 600 13px/1 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, sans-serif) !important;
    cursor: pointer !important;
}

@media (hover:hover) {
    [data-apf="common"] .apf-tiered-dynamic .tiered-pricing-block:hover,
    [data-apf="common"] .tiered-pricing-wrapper .tiered-pricing-block:hover {
        background: color-mix(in oklch, var(--apf-surface-2) 90%, transparent) !important;
        border-color: var(--apf-focus) !important;
    }
}

[data-apf="common"] .tiered-pricing-wrapper .tiered-pricing--active {
    border-color: color-mix(in oklch, var(--apf-accent-2) 55%, #fff0) !important;
    box-shadow: 0 0 0 1px var(--apf-focus) inset, 0 6px 14px rgba(0,0,0,.24) !important;
}

[data-apf="common"] .tiered-pricing-block__quantity {
    font-weight: 800 !important;
    font-size: 1.05em !important;
    color: var(--apf-accent-1) !important;
}

[data-apf="common"] .tiered-pricing-block__price {
    font-size: 1em !important;
}

[data-apf="common"] .apf-was {
    text-decoration: line-through !important;
    opacity: .62 !important;
    font-weight: 500 !important;
    font-size: .9em !important;
    margin-right: .25rem !important;
}

[data-apf="common"] .apf-role-note-inline {
    flex: 1 0 100% !important;
    font-size: .9em !important;
    color: var(--apf-text-low) !important;
    margin-left: .25em !important;
}

@media (max-width:768px) {
    [data-apf="common"] .tiered-pricing-wrapper .tiered-pricing-block {
        flex-basis: calc(50% - var(--apf-tiers-gap)) !important;
        min-width: calc(50% - var(--apf-tiers-gap)) !important;
    }
}

@media (max-width:480px) {
    [data-apf="common"] .tiered-pricing-wrapper .tiered-pricing-block {
        flex-basis: 100% !important;
        min-width: 100% !important;
        padding: .2rem .3rem !important;
        row-gap: .18rem !important;
        font-size: 12px !important;
    }

    [data-apf="common"] .tiered-pricing-block__quantity {
        font-size: 1em !important;
    }

    [data-apf="common"] .tiered-pricing-block__price {
        font-size: .95em !important;
    }
}

/* Tier Table mount (TPT plugin / table view) */
[data-apf="common"] .apf-pricing [id^="apf-tpt-"] {
    margin: .6rem;
    background: var(--apf-card-bg);
    border: 1px solid var(--apf-price-border);
    border-radius: var(--apf-price-radius);
    padding: .65rem .75rem;
}

    [data-apf="common"] .apf-pricing [id^="apf-tpt-"] table,
    [data-apf="common"] .apf-pricing .tiered-pricing-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background: transparent;
        border: 0;
    }

    [data-apf="common"] .apf-pricing [id^="apf-tpt-"] th,
    [data-apf="common"] .apf-pricing [id^="apf-tpt-"] td {
        padding: .5rem .6rem;
        border-bottom: 1px solid var(--apf-price-border);
        text-align: right;
        white-space: nowrap;
    }

        [data-apf="common"] .apf-pricing [id^="apf-tpt-"] th:first-child,
        [data-apf="common"] .apf-pricing [id^="apf-tpt-"] td:first-child {
            text-align: left;
        }

    [data-apf="common"] .apf-pricing [id^="apf-tpt-"] tr:last-child th,
    [data-apf="common"] .apf-pricing [id^="apf-tpt-"] tr:last-child td {
        border-bottom: 0;
    }

/* Tier grid placeholder + shimmer */
[data-apf="common"] .apf-controls .apf-tiergrid {
    display: grid;
    gap: .5rem;
    margin-top: .5rem;
}

[data-apf="common"] .apf-controls .apf-tiered-placeholder {
    display: grid;
    gap: .35rem;
}

[data-apf="common"] .apf-controls .apf-shimmer {
    display: block;
    height: 12px;
    border-radius: 8px;
    background: linear-gradient(90deg,#ffffff08,#ffffff14 40%,#ffffff08 80%);
    background-size: 200% 100%;
    animation: apfShimmer 1.2s linear infinite;
}

[data-apf="common"] .apf-controls .apf-shimmer--lg {
    height: 16px;
    width: 65%;
}

@keyframes apfShimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* Optional: force 3-up tiers on mobile (kept unique) */
.tpt__tiered-pricing .tiered-pricing-blocks,
[data-apf="common"] .apf-controls .tiered-pricing-wrapper .tiered-pricing-blocks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--apf-tiers-gap,.5rem) !important;
    box-sizing: border-box !important;
}

@media (max-width:768px) {
    .tpt__tiered-pricing .tiered-pricing-blocks .tiered-pricing-block,
    [data-apf="common"] .apf-controls .tiered-pricing-wrapper .tiered-pricing-block {
        flex: 0 0 calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
        min-width: calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
        max-width: calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width:480px) {
    .tpt__tiered-pricing .tiered-pricing-blocks .tiered-pricing-block,
    [data-apf="common"] .apf-controls .tiered-pricing-wrapper .tiered-pricing-block {
        flex: 0 0 calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
        min-width: calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
        max-width: calc(33.333% - var(--apf-tiers-gap,.5rem)) !important;
    }
}
/* ============================================================================
   APF Typography — Orbitron for large headings, Inter for smaller text
   Scope: [data-apf="common"]
   Assumes Bricks provides local fonts: Orbitron (display) & Inter (ui)
   ========================================================================== */

/* 1) Font tokens (no-op if already declared higher up) */
.apf-common-box,
.apf-root.apf-common-shell {
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Orbitron, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 2) Base text = Inter */
[data-apf="common"] {
  font-family: var(--font-ui);
}

/* 3) “Large” headings = Orbitron
   - Section titles, headings, and hero-like titles inside APF
*/
[data-apf="common"] h1,
[data-apf="common"] h2,
[data-apf="common"] h3,
[data-apf="common"] h4,
[data-apf="common"] .apf-title,
[data-apf="common"] .apf-section__title,
[data-apf="common"] .apf-section-title,
[data-apf="common"] .apf-card__title {
  font-family: var(--font-display);
  font-weight: 700;          /* Regular face, bold weight for presence */
  letter-spacing: 0.5px;     /* subtle tech vibe */
  margin: 0;
  color: var(--apf-text, var(--text-high, #fff));
}

/* Suggested sizes (tweak freely) */
[data-apf="common"] h1,
[data-apf="common"] .apf-title--xl { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; }
[data-apf="common"] h2,
[data-apf="common"] .apf-section__title,
[data-apf="common"] .apf-section-title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; }
[data-apf="common"] h3,
[data-apf="common"] .apf-title--md { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; }
[data-apf="common"] h4,
[data-apf="common"] .apf-title--sm { font-size: clamp(0.95rem, 1.2vw, 1.1rem);  line-height: 1.25; }

/* 4) Controls sidebar: keep headings Orbitron, body Inter */
.apf-col.apf-controls .apf-section__header,
.apf-col.apf-controls .apf-section-header { align-items: baseline; }

.apf-col.apf-controls h2,
.apf-col.apf-controls h3,
.apf-col.apf-controls h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;           /* was 14px; upscale slightly for Orbitron legibility */
  letter-spacing: 0.4px;
  color: var(--apf-text);
  margin: 0;
}

/* 5) Small/aux content stays Inter */
[data-apf="common"] p,
[data-apf="common"] small,
[data-apf="common"] .apf-meta,
[data-apf="common"] .apf-role-note-inline,
[data-apf="common"] .apf-card__text,
[data-apf="common"] .apf-card__fine,
[data-apf="common"] table,
[data-apf="common"] th,
[data-apf="common"] td,
[data-apf="common"] .apf-button,
[data-apf="common"] .apf-btn--sm,
[data-apf="common"] .apf-btn--md,
[data-apf="common"] .apf-btn--compact {
  font-family: var(--font-ui);
}

/* Table headings slightly stronger, still Inter */
[data-apf="common"] th {
  font-weight: 650;
  letter-spacing: .2px;
}

/* Optional: uppercase micro-labels for control chips or tiny legends */
[data-apf="common"] .apf-micro,
[data-apf="common"] .apf-chip-label {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}
/* ===== APF • Pimp + Preview row: 40/60 split (Preview / Pimp) ===== */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row{
  display:flex;
  flex-wrap:nowrap;          /* keep on one line */
  align-items:stretch;       /* equal heights */
  gap:.5rem;
  min-width:0;
}

/* Make the REF (Preview) wrapper take 40% and appear first */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row > .apf-actions{
  order:1;
  flex:0 0 40% !important;   /* override inline flex:1 1 220px */
  min-width:0;
  display:flex;
  align-items:center;
}
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row > .apf-actions .mid-ref-use-canvas{
  width:100%;                /* fill the 40% slot */
  min-height:2.6rem;         /* matches Pimp height-ish */
}

/* Pimp button takes 60% and appears second */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row > .mid-pimp-btn{
  order:2;
  flex:0 0 60% !important;
  min-width:0;
  min-height:2.75rem;
  line-height:1.1;
}

/* Keep Generate big + full width (unchanged, but ensure robustness) */
[data-apf="common"] .apf-controls .apf-ai__body .apf-ai-actions-row .mid-generate-btn{
  width:100%;
  min-height:2.9rem;
  font-weight:650;
}

/* Responsive: stack neatly on narrow screens */
@media (max-width: 680px){
  [data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row{
    flex-wrap:wrap;
  }
  [data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row > .apf-actions,
  [data-apf="common"] .apf-controls .apf-ai__body .apf-ai-pimpref-row > .mid-pimp-btn{
    order:initial;
    flex:1 1 100% !important;  /* full-width each when stacked */
  }
}
/* === Flex alternative (keeps them on one line) ========================== */
[data-apf="common"] [data-apf-control="media"] .apf-ai__body .apf-ai-qr-row{
  display: flex !important;
  flex-wrap: nowrap !important;   /* override the global .apf-row wrap */
  align-items: flex-end;
  gap: .5rem;
  min-width: 0;
}
[data-apf="common"] [data-apf-control="media"] .apf-ai__body .apf-ai-qr-row .apf-field{
  flex: 1 1 0;
  min-width: 0;                   /* prevent overflow->wrap in Safari/Firefox */
}
[data-apf="common"] [data-apf-control="media"] .apf-ai__body .apf-ai-qr-row .apf-grow{
  display: none !important;       /* spacer not needed here */
}
@media (max-width: 600px){
  [data-apf="common"] [data-apf-control="media"] .apf-ai__body .apf-ai-qr-row{
    flex-wrap: wrap !important;
  }
  [data-apf="common"] [data-apf-control="media"] .apf-ai__body .apf-ai-qr-row .apf-field{
    flex: 1 1 100%;
  }
}
/* ===== Media actions row: 2 buttons, equal width, full row ================ */
[data-apf="common"] .apf-actions__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  width:100%;
}

/* Make the two primary actions fill and split 50/50 */
[data-apf="common"] .apf-actions__row > label.button.apf-button,
[data-apf="common"] .apf-actions__row > button.apf-button{
  flex:1 1 0;          /* equal widths, stretch to fill */
  min-width:0;         /* prevent overflow forcing wrap */
  max-width:100%;
  text-align:center;
}

/* Ensure <label> behaves like a button (same inline-flex chrome) */
[data-apf="common"] label.button.apf-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  cursor:pointer;
}

/* Normalize size — use your existing size utility.
   Swap to .apf-size--lg in markup if you want them taller. */
[data-apf="common"] .apf-actions__row > .apf-size--md{
  min-height:2.6rem;
  padding:.6rem 1rem;
  font:1000 clamp(.95rem,.9rem + .15vw,1.05rem)/1.1 var(--apf-font-body, Inter, system-ui);
  letter-spacing:.015em;
  border-radius:clamp(10px,1.2vw,var(--apf-btn-r));
}

/* Optional: if you prefer LARGE without touching HTML, force it here
   (otherwise delete this block) */
/*
[data-apf="common"] .apf-actions__row > label.button.apf-button,
[data-apf="common"] .apf-actions__row > button.apf-button{
  min-height:3rem;
  padding:.85rem 1.15rem;
  font-size:clamp(1rem,.95rem + .2vw,1.12rem);
  border-radius:calc(var(--apf-btn-r) + 2px);
}
*/

/* Kill spacer so the two buttons truly fill the row */
[data-apf="common"] .apf-actions__row .apf-grow{ display:none; }

/* Trim extra padding around the actions section */
[data-apf="common"] .apf-sec.apf-actions{ margin:0; }
[data-apf="common"] .apf-sec.apf-actions .apf-sec__body{
  padding:0;           /* remove container padding */
}

/* (Tiny mobile nicety) stack them full-width if the row gets too narrow */
@media (max-width:480px){
  [data-apf="common"] .apf-actions__row > label.button.apf-button,
  [data-apf="common"] .apf-actions__row > button.apf-button{
    flex:1 1 100%;
  }
}

/* ============================================================
 * MOBILE: hard-isolate controls as a pinned inner scroller
 * (CSS-only; no markup changes)
 * ============================================================ */
@media (max-width:900px){
  [data-apf="common"]{
    --apf-mobile-offset: var(--apf-mobile-offset, 0px);
    --apf-safe-bottom: env(safe-area-inset-bottom, 0px);
    --apf-pad-outer-sm: var(--apf-pad-outer-sm, 8px);
  }

  /* Host becomes the positioning context and is clamped to the viewport */
  [data-apf="common"] > .apf-main{
    position: relative !important;
    overflow: hidden !important;
    block-size: calc(100svh - var(--apf-mobile-offset)) !important;

    /* dynamic preview height (≤ 40svh) */
    --apf-canvas-r: var(--apf-canvas-r, 1);
    --apf-usable-w: calc(100vw - (2 * var(--apf-pad-outer-sm)));
    --apf-preview-h: min(40svh, calc(var(--apf-usable-w) / var(--apf-canvas-r)));
  }

  /* PREVIEW stays in normal flow, fixed height */
  [data-apf="common"] > .apf-main > .apf-col.apf-preview,
  [data-apf="common"] > .apf-main > .apf-col.apf-stagecol{
    grid-area: initial !important;
    order: 0 !important;
    display: block !important;
    block-size: var(--apf-preview-h) !important;
    overflow: hidden !important;
  }
  [data-apf="common"] .mid-preview-area{
    block-size: 100% !important;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }

  /* CONTROLS: take them OUT of flow and pin to the bottom of the host.
     This severs any layout dependency that lets them grow. */
  [data-apf="common"] > .apf-main > .apf-col.apf-controls{
    position: absolute !important;
    inset: calc(var(--apf-preview-h) + var(--apf-gap)) 0 calc(var(--apf-safe-bottom)) 0 !important;
    /* exact height = host - preview - gap - safe area */
    block-size: auto !important;

    /* neutralize desktop flex quirks & any inherited min-heights */
    display: block !important;
    min-block-size: 0 !important;

    /* MAKE IT SCROLL */
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* content safety */
    box-sizing: border-box;
    padding-bottom: max(8px, var(--apf-safe-bottom));
    background: transparent; /* no overlay */
  }

  /* Nothing inside controls should force growth */
  [data-apf="common"] > .apf-main > .apf-col.apf-controls *{
    min-block-size: 0 !important;
    max-block-size: none !important;
  }
}