/* =============================================================================
   APF � Pricing (compact, modern, token-driven)
   Scope: [data-apf="common"] .apf-controls �
   Load AFTER theme/plugin CSS.
   ========================================================================== */

/* -----------------------------------------
   1) Tokens (inherit from your theme bridge)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-pricing {
    --apf-price-bd: var(--border, #2a2d36);
    --apf-price-bg: color-mix(in oklch, var(--surface-0, #0b0b0d) 92%, transparent);
    --apf-chip-bg: var(--surface-1, #121217);
    --apf-surface-2: var(--surface-2, #1a1a22);
    --apf-text: var(--text-high, #e6edf7);
    --apf-text-mid: var(--text-mid, #b8c3d4);
    --apf-c1: var(--ctl-c1, #6aa6ff);
    --apf-c2: var(--ctl-c2, #9e7bff);
    --apf-ok: color-mix(in oklch, var(--apf-c3, #35d3a7) 85%, #000);
    --apf-warn: color-mix(in oklch, var(--apf-c4, #f2b24b) 85%, #000);
    --apf-wait: color-mix(in oklch, var(--apf-c6, #60aed5) 85%, #000);
    --apf-danger: var(--danger, #ff5c73);
    --apf-radius: var(--radius, 12px);
    --apf-ease: cubic-bezier(.5,1,.89,1);
    --apf-t: .18s var(--apf-ease);
    color: var(--apf-text);
}

/* -----------------------------------------
   2) Pricebar (denser grid, glass accent)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-pricebar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
        "left  right"
        "stock right";
    align-items: center;
    gap: .45rem .6rem;
    background: linear-gradient(180deg, color-mix(in oklch, var(--apf-price-bg) 92%, var(--apf-c1) 6%) 0%, color-mix(in oklch, var(--apf-price-bg) 96%, transparent) 100%) !important;
    border: 1px solid color-mix(in oklch, var(--apf-price-bd) 85%, var(--apf-c1) 15%) !important;
    border-radius: calc(var(--apf-radius) - 2px) !important;
    padding: .45rem .55rem !important;
    box-shadow: 8px 8px 22px rgba(0,0,0,.35), -2px -2px 10px rgba(255,255,255,.04) !important;
    backdrop-filter: saturate(1.05) blur(2px);
}

    [data-apf="common"] .apf-controls .apf-pricebar > * {
        min-width: 0;
        max-inline-size: 100%;
    }

[data-apf="common"] .apf-controls .apf-pricebar__left {
    grid-area: left;
    display: flex;
    align-items: center;
    gap: .45rem;
}

[data-apf="common"] .apf-controls .apf-stockline {
    grid-area: stock;
}

[data-apf="common"] .apf-controls .apf-pricebar__right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
}

/* -----------------------------------------
   3) Quantity (compact stepper)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-qty-inline {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--apf-chip-bg);
    border: 1px solid var(--apf-price-bd);
    border-radius: .55rem;
    padding: .18rem;
    box-shadow: inset 6px 6px 14px rgba(0,0,0,.35), inset -4px -4px 10px rgba(255,255,255,.05);
}

    [data-apf="common"] .apf-controls .apf-qty-inline .apf-qty {
        width: 3rem;
        text-align: center;
        border: 0;
        background: transparent;
        color: var(--apf-text);
        font-weight: 800;
        padding: .15rem 0;
        appearance: textfield;
        font-variant-numeric: tabular-nums;
    }

        [data-apf="common"] .apf-controls .apf-qty-inline .apf-qty::-webkit-outer-spin-button,
        [data-apf="common"] .apf-controls .apf-qty-inline .apf-qty::-webkit-inner-spin-button {
            appearance: none;
        }

[data-apf="common"] .apf-controls .apf-step {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: .45rem;
    background: color-mix(in oklch, var(--apf-surface-2) 80%, transparent);
    border: 1px solid color-mix(in oklch, var(--apf-price-bd) 90%, var(--apf-c1) 10%);
    color: var(--apf-text-mid);
    font-weight: 900;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: filter var(--apf-t), transform var(--apf-t), border-color var(--apf-t);
}

@media (hover:hover) {
    [data-apf="common"] .apf-controls .apf-step:hover {
        filter: brightness(1.08) saturate(1.02);
        border-color: color-mix(in oklch, var(--apf-c1) 40%, var(--apf-price-bd));
        transform: translateY(-1px);
    }
}

/* -----------------------------------------
   4) Role pill (smaller, clearer tone)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-role-pill[hidden] {
    display: none;
}

[data-apf="common"] .apf-controls .apf-role-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .5rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--apf-chip-bg) 85%, var(--apf-c2) 10%);
    border: 1px solid color-mix(in oklch, var(--apf-price-bd) 80%, var(--apf-c2) 20%);
    color: var(--apf-text-mid);
    font-size: .8rem;
    line-height: 1;
    box-shadow: inset 5px 5px 12px rgba(0,0,0,.35), inset -4px -4px 10px rgba(255,255,255,.04);
}

[data-apf="common"] .apf-controls .apf-role-dot {
    inline-size: .42rem;
    block-size: .42rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}

/* -----------------------------------------
   5) Price chips (unit / total)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-pricechip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--apf-price-bd);
    border-radius: .55rem;
    padding: .3rem .55rem;
    flex: 0 1 auto;
    min-inline-size: auto;
    max-inline-size: 100%;
    background: color-mix(in oklch, var(--apf-chip-bg) 94%, transparent);
}

[data-apf="common"] .apf-controls .apf-pricechip__label {
    color: color-mix(in oklch, var(--apf-text-mid) 90%, transparent);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

[data-apf="common"] .apf-controls .apf-pricechip__value {
    color: var(--apf-text);
    font-size: 1.08rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1.05;
}

/* Total chip ? stronger theme accent */
[data-apf="common"] .apf-controls .apf-pricechip--total {
    border-width: 2px;
    border-color: color-mix(in oklch, var(--apf-c1) 55%, var(--apf-price-bd));
    background: linear-gradient(135deg, color-mix(in oklch, var(--apf-c1) 14%, var(--apf-chip-bg)) 0%, color-mix(in oklch, var(--apf-c2) 10%, var(--apf-chip-bg)) 100%);
}

    [data-apf="common"] .apf-controls .apf-pricechip--total .apf-pricechip__value {
        color: color-mix(in oklch, var(--apf-c1) 85%, #fff);
        text-shadow: 0 1px 2px rgba(0,0,0,.15);
    }

/* -----------------------------------------
   6) CTA row (compact buttons, theme�d)
   ----------------------------------------- */
[data-apf="common"] .apf-controls .apf-cart-cta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

    [data-apf="common"] .apf-controls .apf-cart-cta .apf-btn,
    [data-apf="common"] .apf-controls .apf-cart-cta .apf-btn.button {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .5rem .85rem;
        border-radius: .6rem;
        cursor: pointer;
        font: 800 .95rem/1.05 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
        color: #fff;
        background: linear-gradient(135deg, color-mix(in oklch, var(--apf-c1) 86%, #000), color-mix(in oklch, var(--apf-c2) 86%, #000));
        border: 1px solid color-mix(in oklch, var(--apf-c2) 60%, var(--apf-price-bd));
        box-shadow: 8px 8px 18px rgba(0,0,0,.35), -3px -3px 10px rgba(255,255,255,.04);
        transition: transform var(--apf-t), box-shadow var(--apf-t), filter var(--apf-t);
    }

@media (hover:hover) {
    [data-apf="common"] .apf-controls .apf-cart-cta .apf-btn:hover {
        transform: translateY(-1px);
        box-shadow: 12px 12px 24px rgba(0,0,0,.42), -3px -3px 12px rgba(255,255,255,.05);
        filter: saturate(1.04) brightness(1.02);
    }
}

[data-apf="common"] .apf-controls .apf-cart-cta .apf-btn[disabled],
[data-apf="common"] .apf-controls .apf-cart-cta .apf-btn[aria-disabled="true"] {
    opacity: .65;
    cursor: not-allowed;
    filter: grayscale(.12);
}

[data-apf="common"] .apf-controls .apf-cart-status[hidden] {
    display: none;
}

/* -----------------------------------------
   7) Stock Status (matches your theme)
   ----------------------------------------- */
[data-apf="common"] .apf-stock-target {
    margin: .4rem 0 0;
}

    [data-apf="common"] .apf-stock-target .apf-css {
        --tone: var(--apf-css-color, var(--apf-ok));
        background: color-mix(in oklch, var(--apf-surface-1, #121217) 85%, var(--tone)) !important;
        border: 1px solid color-mix(in oklch, var(--tone) 28%, var(--apf-price-bd)) !important;
        border-radius: .6rem !important;
        padding: .6rem .7rem .65rem .85rem !important;
        color: var(--apf-text) !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 6px 6px 18px rgba(0,0,0,.35), -2px -2px 10px rgba(255,255,255,.04) !important;
    }

        [data-apf="common"] .apf-stock-target .apf-css::before {
            content: "";
            position: absolute;
            inset: .5rem auto .5rem 0;
            width: 4px;
            background: linear-gradient(180deg, color-mix(in oklch, var(--tone) 90%, #000), color-mix(in oklch, var(--tone) 65%, #000));
            border-radius: 4px;
        }

    [data-apf="common"] .apf-stock-target .apf-css__label {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-weight: 900;
        letter-spacing: .2px;
    }

        [data-apf="common"] .apf-stock-target .apf-css__label::before {
            content: "";
            width: .55rem;
            height: .55rem;
            border-radius: 50%;
            background: color-mix(in oklch, var(--tone) 92%, #000);
            box-shadow: 0 0 0 1px color-mix(in oklch, var(--tone) 40%, transparent);
        }

    [data-apf="common"] .apf-stock-target .apf-css__details {
        margin-top: .25rem;
        color: color-mix(in oklch, var(--apf-text-mid) 92%, transparent);
        font-size: .92rem;
    }

    [data-apf="common"] .apf-stock-target .apf-css__lead {
        margin-top: .35rem;
        font-size: .9rem;
        color: color-mix(in oklch, var(--apf-text) 96%, transparent);
    }

        [data-apf="common"] .apf-stock-target .apf-css__lead strong {
            color: color-mix(in oklch, var(--tone) 42%, var(--apf-text));
        }

    /* Tone overrides */
    [data-apf="common"] .apf-stock-target .apf-css[data-state="in_stock"] {
        --tone: var(--apf-ok) !important;
    }

    [data-apf="common"] .apf-stock-target .apf-css[data-state="out_of_stock"] {
        --tone: var(--apf-danger) !important;
    }

    [data-apf="common"] .apf-stock-target .apf-css[data-state="back_ordered"] {
        --tone: var(--apf-wait) !important;
    }

    [data-apf="common"] .apf-stock-target .apf-css[data-state="extended_lead"] {
        --tone: var(--apf-warn) !important;
    }

/* Badge fallback */
[data-apf="common"] .apf-stock-badge {
    display: inline-block;
    padding: .25em .5em !important;
    border-radius: .45em !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #fff !important;
    background: var(--tone, var(--apf-ok)) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklch, var(--tone, var(--apf-ok)) 35%, transparent) inset !important;
}

/* -----------------------------------------
   8) Mobile stack
   ----------------------------------------- */
@media (max-width:640px) {
    [data-apf="common"] .apf-controls .apf-pricebar {
        grid-template-columns: 1fr;
        grid-template-areas: "left" "stock" "right";
        justify-items: start;
        gap: .5rem;
    }

    [data-apf="common"] .apf-controls .apf-pricebar__right {
        justify-content: flex-start;
    }
}
/* APF � WAPF � compact flex layout
   Drop-in layout that doesn't fight WAPF markup. */

[data-apf="common"] .apf-wapf-min .wapf-field-group {
    /* grid host */
    --apf-wapf-gap: .55rem;
    --apf-wapf-min: 220px; /* min column width */
    --apf-wapf-max: 420px; /* max column width */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--apf-wapf-gap);
}

/* Generic field tile */
[data-apf="common"] .apf-wapf-min .wapf-field-container {
    flex: 1 1 clamp(var(--apf-wapf-min), 50%, var(--apf-wapf-max));
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0; /* neutralize any theme margins */
    padding: .45rem .5rem;
    border-radius: calc(var(--apf-radius, 12px) - 4px);
    background: color-mix(in oklch, var(--apf-surface-1, #121217) 62%, transparent);
    border: 1px solid color-mix(in oklch, var(--apf-border, #2a2d36) 78%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 14px rgba(0,0,0,.16);
}

/* Tighten label + hint row */
[data-apf="common"] .apf-wapf-min .wapf-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

    [data-apf="common"] .apf-wapf-min .wapf-field-label label span {
        font-size: .9rem;
    }

/* Inputs fill the tile */
[data-apf="common"] .apf-wapf-min .wapf-field-input > * {
    width: 100%;
}

/* Numbers: compact min width so two can sit side-by-side neatly */
[data-apf="common"] .apf-wapf-min .wapf-field-number {
    flex-basis: clamp(180px, 33%, 280px);
}

/* Text fields can be a bit wider by default */
[data-apf="common"] .apf-wapf-min .wapf-field-text {
    flex-basis: clamp(260px, 50%, 520px);
}

/* Image swatches: usually deserve the full row */
[data-apf="common"] .apf-wapf-min .wapf-field-image-swatch {
    flex-basis: 100%;
}

/* Swatch grid spacing stays compact */
[data-apf="common"] .apf-wapf-min .wapf-image-swatch-wrapper {
    --apf-col-width: 68px; /* you were already using this; keep it tidy */
    gap: .5rem;
}

/* Required asterisk align + color */
[data-apf="common"] .apf-wapf-min .wapf-field-label .required {
    margin-left: .1rem;
    color: var(--apf-danger, #ff5c73);
}

/* Tooltip icon alignment */
[data-apf="common"] .apf-wapf-min .wapf-tt-wrap.wapf-tt-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Totals/tax box spans full width under grid (when visible) */
[data-apf="common"] .apf-wapf-min .wapf-product-totals {
    flex-basis: 100%;
    margin-top: .2rem;
}

/* Mobile: stack into a single column */
@media (max-width: 640px) {
    [data-apf="common"] .apf-wapf-min .wapf-field-container {
        flex-basis: 100%;
    }
}
/* 1) Exclude radios/checkboxes from generic input styling */
[data-apf="common"] .wapf-input:not([type="checkbox"]):not([type="radio"]),
[data-apf="common"] .wapf select,
[data-apf="common"] .wapf textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    color: var(--apf-text);
    background: color-mix(in oklch, var(--apf-surface-1) 72%, transparent);
    border: 1px solid color-mix(in oklch, var(--apf-border) 75%, var(--apf-c2) 8%);
    border-radius: 10px;
    padding: .5rem .6rem;
    line-height: 1.25;
    backdrop-filter: blur(4px) saturate(1.02);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 18px rgba(0,0,0,.18);
    transition: border-color var(--apf-t), box-shadow var(--apf-t), background var(--apf-t), transform var(--apf-t);
}

    /* Keep your existing focus rule but target the same exclusion */
    [data-apf="common"] .wapf-input:not([type="checkbox"]):not([type="radio"]):focus,
    [data-apf="common"] .wapf select:focus,
    [data-apf="common"] .wapf textarea:focus {
        outline: none;
        background: color-mix(in oklch, var(--apf-surface-1) 60%, transparent);
        border-color: color-mix(in oklch, var(--apf-c1) 42%, var(--apf-border));
        box-shadow: 0 0 0 2px color-mix(in oklch, var(--apf-c1) 28%, transparent), 0 10px 24px rgba(0,0,0,.22);
        transform: translateY(-1px);
    }

/* 2) Reset checkboxes/radios so they don't stretch */
[data-apf="common"] .wapf-input[type="checkbox"],
[data-apf="common"] .wapf-input[type="radio"] {
    appearance: auto; /* let the browser render the native box */
    -webkit-appearance: auto;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    vertical-align: middle;
}

[data-apf="common"] .wapf-checkbox .wapf-input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
[data-apf="common"] .wapf-checkbox .wapf-input-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
[data-apf="common"] .wapf-checkbox .wapf-custom {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    border: 1px solid color-mix(in oklch, var(--apf-border) 75%, var(--apf-c2) 10%);
    background: color-mix(in oklch, var(--apf-surface-1) 80%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
[data-apf="common"] .wapf-checkbox .wapf-input[type="checkbox"]:checked + .wapf-custom {
    background: linear-gradient(135deg, color-mix(in oklch, var(--apf-c1) 70%, #000), color-mix(in oklch, var(--apf-c2) 70%, #000));
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--apf-c2) 35%, transparent) inset;
}
/* ============================================================
   APF � Product & Variation Select Emphasis
   ============================================================ */

/* Target both product + variation dropdowns */
[data-apf="common"] .apf-select.apf-product,
[data-apf="common"] .variation-select,
[data-apf="common"] .apf-size.mid-size-select {
    font-size: 1.6rem; /* bump from ~14px ? ~16.5px */
    font-weight: 600; /* semibold for stronger emphasis */
    line-height: 1.35;
    padding: .55rem .75rem; /* balance text size with control height */
}

    /* Optional: make option text slightly bigger too */
    [data-apf="common"] .apf-select.apf-product option,
    [data-apf="common"] .variation-select option,
    [data-apf="common"] .apf-size.mid-size-select option {
        font-size: 1.4rem; /* 16px in dropdown list */
        font-weight: 400;
    }