/* ============================================
   APF Controls — Compact / Glassy (no markup change)
   Scope: .apf-col.apf-controls …
   ============================================ */

.apf-col.apf-controls {
    /* density + theme tokens */
    --font-label: .82rem;
    --font-input: .82rem;
    --pad-y: .22rem;
    --pad-x: .5rem;
    --line: 1.2;
    --radius: 8px;
    --gap: 4px;
    --border: rgba(255,255,255,.14);
    --text-high: #eaf2ff;
    --text-mid: #b8c1d9;
    --primary: #7e67ff;
    --focus-ring: rgba(127,106,255,.28);
}

    /* labels */
    .apf-col.apf-controls .control .apf-label {
        color: var(--text-high);
        font-size: var(--font-label);
        line-height: var(--line);
        margin-bottom: .08rem;
        text-align: left;
    }

    /* inputs + selects + textareas (compact glass) */
    .apf-col.apf-controls
    :where(.control input[type="text"], .control input[type="email"], .control input[type="url"], .control input[type="search"], .control input[type="password"], .control input[type="tel"], .control input[type="number"], .control input[type="color"], .control input[type="range"], .control textarea, .control select,
    /* extra: variation/product selects rendered without .apf-select */
    .control .variation-select, .control .apf-product, .control .mid-size-select) {
        width: 100%;
        box-sizing: border-box;
        font-size: var(--font-input);
        line-height: var(--line);
        padding: var(--pad-y) var(--pad-x);
        min-height: 1.75rem;
        color: var(--text-high);
        background: rgba(0,0,0,.36);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* hover / focus */
    .apf-col.apf-controls :where(.control input,.control textarea,.control select, .control .variation-select,.control .apf-product,.control .mid-size-select):hover {
        background: rgba(0,0,0,.45);
    }

    .apf-col.apf-controls :where(.control input,.control textarea,.control select, .control .variation-select,.control .apf-product,.control .mid-size-select):focus {
        outline: 0;
        border-color: var(--primary);
        background: rgba(0,0,0,.52);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

    /* number inputs: remove spinners */
    .apf-col.apf-controls input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

        .apf-col.apf-controls input[type="number"]::-webkit-inner-spin-button,
        .apf-col.apf-controls input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

    /* selects: chevron + compact menu */
    .apf-col.apf-controls
    :where(.control select,.control .variation-select,.control .apf-product,.control .mid-size-select) {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='%23EAF2FF' d='M0 0l4.5 5L9 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right .45rem center;
        background-size: .6em;
        padding-right: 1.4em;
    }

    .apf-col.apf-controls
    :where(.control select option,.control .variation-select option,.control .apf-product option,.control .mid-size-select option) {
        background-color: rgba(0,0,0,.85);
        color: var(--text-high);
        font-size: .82rem;
        line-height: 1.15;
        padding: .25rem .4rem;
    }

    /* textarea: keep compact height and allow resize */
    .apf-col.apf-controls .control textarea {
        min-height: 2.25rem;
        resize: vertical
    }

    /* color input size */
    .apf-col.apf-controls .control input[type="color"] {
        height: 1.9rem;
        padding: 0 .25rem
    }

    /* range slider (compact) */
    .apf-col.apf-controls .control input[type="range"] {
        --track-h: 3px;
        --thumb: 14px;
        --pct: 0%;
        appearance: none;
        width: 100%;
        height: 1.6rem;
        background: linear-gradient(90deg, var(--primary) 0 var(--pct), rgba(255,255,255,.18) var(--pct) 100%) center/100% var(--track-h) no-repeat;
        border: 0;
        border-radius: 999px;
        outline: none;
    }

        .apf-col.apf-controls .control input[type="range"]::-webkit-slider-runnable-track {
            height: var(--track-h);
            background: transparent;
            border-radius: 999px
        }

        .apf-col.apf-controls .control input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: var(--thumb);
            height: var(--thumb);
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.28);
            box-shadow: 0 0 0 2px rgba(0,0,0,.25);
            margin-top: calc((var(--track-h) - var(--thumb))/2);
            transition: transform .12s ease, filter .12s ease;
        }

        .apf-col.apf-controls .control input[type="range"]:hover::-webkit-slider-thumb {
            transform: scale(1.04);
            filter: brightness(1.05)
        }

        .apf-col.apf-controls .control input[type="range"]::-moz-range-track {
            height: var(--track-h);
            background: rgba(255,255,255,.18);
            border: 0;
            border-radius: 999px
        }

        .apf-col.apf-controls .control input[type="range"]::-moz-range-progress {
            height: var(--track-h);
            background: var(--primary);
            border-radius: 999px
        }

        .apf-col.apf-controls .control input[type="range"]::-moz-range-thumb {
            width: var(--thumb);
            height: var(--thumb);
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.28);
            box-shadow: 0 0 0 2px rgba(0,0,0,.25);
        }

    /* placeholder contrast */
    .apf-col.apf-controls :where(.control input,.control textarea)::placeholder {
        color: rgba(255,255,255,.55)
    }
    /* disabled */
    .apf-col.apf-controls :where(.control input:disabled,.control textarea:disabled,.control select:disabled) {
        color: rgba(255,255,255,.6);
        background-color: rgba(255,255,255,.08);
        cursor: not-allowed;
    }
    /* invalid */
    .apf-col.apf-controls :where(.control input:invalid,.control textarea:invalid,.control select:invalid) {
        border-color: hsl(0 70% 55%);
        box-shadow: 0 0 0 2px hsl(0 70% 55% / .25);
    }
    /* autofill fix (keep dark bg) */
    .apf-col.apf-controls .control :where(input,textarea):-webkit-autofill {
        -webkit-text-fill-color: #fff;
        transition: background-color 9999s ease-out, color 9999s ease-out;
    }

        .apf-col.apf-controls .control :where(input,textarea):-webkit-autofill,
        .apf-col.apf-controls .control :where(input,textarea):-webkit-autofill:focus {
            box-shadow: 0 0 0 1000px rgba(0,0,0,.36) inset !important;
        }

    /* keep groups tidy */
    .apf-col.apf-controls .apf-group {
        padding: .5rem 0;
        border-top: 1px dashed rgba(255,255,255,.08)
    }

        .apf-col.apf-controls .apf-group:first-child {
            border-top: 0
        }
/* APF Controls — Comfort bump (slightly larger) */
.apf-col.apf-controls {
    --font-label: .90rem; /* was .82rem */
    --font-input: .92rem; /* was .82rem */
    --pad-y: .30rem; /* was .22rem */
    --radius: 10px; /* was 8px */
}

    /* Inputs / selects / textareas: a touch taller */
    .apf-col.apf-controls
    :where(.control input[type="text"], .control input[type="email"], .control input[type="url"], .control input[type="search"], .control input[type="password"], .control input[type="tel"], .control input[type="number"], .control input[type="color"], .control input[type="range"], .control textarea, .control select, .control .variation-select, .control .apf-product, .control .mid-size-select) {
        min-height: 2rem; /* was 1.75rem */
        font-size: var(--font-input);
        padding: var(--pad-y) var(--pad-x);
        border-radius: var(--radius);
    }

    /* Select dropdown chevron + spacing a bit larger */
    .apf-col.apf-controls
    :where(.control select, .control .variation-select, .control .apf-product, .control .mid-size-select) {
        background-size: .7em; /* was .6em */
        background-position: right .55rem center; /* a hair more room */
        padding-right: 1.6em; /* was 1.4em */
    }

    /* Option rows slightly larger for readability */
    .apf-col.apf-controls
    :where(.control select option, .control .variation-select option, .control .apf-product option, .control .mid-size-select option) {
        font-size: .90rem; /* was .82rem */
        line-height: 1.2;
    }

    /* Color input + textarea height bumps */
    .apf-col.apf-controls .control input[type="color"] {
        height: 2.1rem;
    }

    .apf-col.apf-controls .control textarea {
        min-height: 2.6rem;
    }

    /* Range slider: thumb/track slightly larger */
    .apf-col.apf-controls .control input[type="range"] {
        --track-h: 4px; /* was 3px */
        --thumb: 16px; /* was 14px */
        height: 1.8rem; /* was 1.6rem */
    }