/* Fix: Force variations_button to wrap when FFP options are present */
.ffp-options-active .woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
.ffp-options-active .woocommerce-variation-add-to-cart .ffp-product-options {
    flex-basis: 100%;
    width: 100%;
    order: -1;
    margin-bottom: 15px;
}
.ffp-options-active .woocommerce-variation-add-to-cart .quantity {
    order: 1;
}
.ffp-options-active .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    order: 2;
}

/**

 * FFP Product Options v2 — Light Theme

 * Betheme-compatible WooCommerce product options

 * @version 2.0.0

 */



/* ─── BETHEME INTEGRATION ────────────────────── */

.woocommerce form.cart .ffp-product-options {

    flex-basis: 100%;

    width: 100%;

    order: -1;

}

.woocommerce .product div.entry-summary form.cart {

    flex-wrap: wrap;

}



/* ─── CONTAINER ──────────────────────────────── */

.ffp-product-options {

    margin: 8px 0 20px;

    padding: 0;

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;

}

/* Touch optimization — removes 300ms delay on tappable elements */

.ffp-swatch-item,

.ffp-checkbox-item,

.ffp-radio-item,

.ffp-imageselect-current,

.ffp-imageselect-option,

.ffp-file-btn,

.ffp-qty-minus,

.ffp-qty-plus,

.ffp-sticky-cart-btn {

    touch-action: manipulation;

}



/* ─── PROGRESS BAR ───────────────────────────── */

.ffp-progress-bar {

    height: 3px;

    background: #f0f0f0;

    border-radius: 2px;

    margin-bottom: 20px;

    overflow: hidden;

}

.ffp-progress-fill {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #c41230, #e53e3e);

    border-radius: 2px;

    transition: width 0.5s cubic-bezier(.4,0,.2,1), background 0.5s ease;

}

.ffp-progress-fill.ffp-progress-complete {

    background: linear-gradient(90deg, #22c55e, #16a34a);

}



/* ─── FIELD WRAPPER ──────────────────────────── */

.ffp-field {

    margin-bottom: 20px;

    transition: opacity 0.35s cubic-bezier(.4,0,.2,1),

                max-height 0.4s cubic-bezier(.4,0,.2,1),

                margin 0.35s ease;

}

.ffp-field.ffp-hidden {

    opacity: 0;

    max-height: 0 !important;

    overflow: hidden;

    margin-bottom: 0;

    pointer-events: none;

}

.ffp-field-half { width: 48%; display: inline-block; vertical-align: top; margin-right: 2%; }

.ffp-field-third { width: 31%; display: inline-block; vertical-align: top; margin-right: 2%; }



/* ─── LABELS WITH STATUS DOT ─────────────────── */

.ffp-field-label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    font-weight: 800;

    color: #767676;

    margin-bottom: 6px;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition: color 0.3s ease;

    line-height: 1;

}

.ffp-field.ffp-filled .ffp-field-label { color: #555; }



.ffp-status-dot {

    width: 7px; height: 7px; min-width: 7px;

    border-radius: 50%;

    background: #ddd;

    display: inline-block;

    transition: all 0.3s ease;

}

.ffp-field.ffp-filled .ffp-status-dot {

    background: #22c55e;

    box-shadow: 0 0 6px rgba(34,197,94,0.4);

}

.ffp-required { color: #c41230; font-weight: 700; }

.ffp-field-desc {

    font-size: 12px; color: #767676;

    margin: -2px 0 8px 15px;

    line-height: 1.4;

}



/* ─── SELECT DROPDOWN ────────────────────────── */

.ffp-select-wrap { position: relative; }

.ffp-select {

    width: 100%; padding: 12px 40px 12px 14px;

    font-size: 14px; color: #1a1a1a; background: #fff;

    border: 1.5px solid #ddd; border-radius: 8px;

    appearance: none; -webkit-appearance: none;

    cursor: pointer; font-family: inherit;

    box-sizing: border-box;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.ffp-select:hover { border-color: #bbb; }

.ffp-select:focus {

    outline: none; border-color: #c41230;

    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.08);

}

.ffp-select-arrow {

    position: absolute; right: 14px; top: 50%;

    transform: translateY(-50%);

    color: #aaa; font-size: 10px;

    pointer-events: none;

    transition: transform 0.3s ease, color 0.3s ease;

}

.ffp-select:focus ~ .ffp-select-arrow,

.ffp-imageselect-current:focus .ffp-select-arrow {

    transform: translateY(-50%) rotate(180deg);

    color: #c41230;

}



/* ─── CHECKBOX ───────────────────────────────── */

.ffp-checkbox-group { display: flex; flex-direction: column; gap: 8px; }

.ffp-checkbox-item {

    display: flex; align-items: center; gap: 12px;

    padding: 12px 14px; border: 1.5px solid #e5e5e5;

    border-radius: 8px; cursor: pointer; background: #fff;

    transition: all 0.2s ease; font-size: 14px; color: #666;

    -webkit-tap-highlight-color: transparent;

}

.ffp-checkbox-item:hover { border-color: #ccc; }

.ffp-checkbox-item.ffp-checked {

    border-color: #c41230;

    background: rgba(196,18,48,0.03);

    color: #1a1a1a; font-weight: 600;

}

/* iOS fix: display:none breaks change events on hidden inputs inside labels.

   Use clip-rect to visually hide while keeping them interactive. */

.ffp-checkbox-item input[type="checkbox"] {

    position: absolute; width: 1px; height: 1px; overflow: hidden;

    clip: rect(0 0 0 0); clip-path: inset(50%);

    white-space: nowrap; border: 0; padding: 0; margin: -1px;

}

.ffp-checkbox-mark {

    width: 20px; height: 20px; min-width: 20px;

    border-radius: 5px; border: 2px solid #ccc;

    background: transparent;

    display: flex; align-items: center; justify-content: center;

    transition: all 0.2s ease;

}

.ffp-checkbox-item.ffp-checked .ffp-checkbox-mark {

    background: #c41230; border-color: #c41230;

}

.ffp-checkbox-item.ffp-checked .ffp-checkbox-mark::after {

    content: ''; display: block;

    width: 6px; height: 10px;

    border: solid #fff; border-width: 0 2px 2px 0;

    transform: rotate(45deg) scale(1);

    margin-top: -2px;

    animation: ffp-check-pop 0.2s cubic-bezier(.4,0,.2,1);

}

@keyframes ffp-check-pop {

    0% { transform: rotate(45deg) scale(0); }

    100% { transform: rotate(45deg) scale(1); }

}

.ffp-checkbox-label { flex: 1; display: flex; align-items: center; gap: 8px; }



/* ─── RADIO ──────────────────────────────────── */

.ffp-radio-group { display: flex; flex-direction: column; gap: 8px; }

.ffp-radio-item {

    display: flex; align-items: center; gap: 12px;

    padding: 12px 14px; border: 1.5px solid #e5e5e5;

    border-radius: 8px; cursor: pointer; background: #fff;

    transition: all 0.2s ease; font-size: 14px; color: #666;

    -webkit-tap-highlight-color: transparent;

}

.ffp-radio-item:hover { border-color: #ccc; }

.ffp-radio-item.ffp-checked {

    border-color: #c41230;

    background: rgba(196,18,48,0.03);

    color: #1a1a1a;

}

.ffp-radio-item input[type="radio"] {

    position: absolute; width: 1px; height: 1px; overflow: hidden;

    clip: rect(0 0 0 0); clip-path: inset(50%);

    white-space: nowrap; border: 0; padding: 0; margin: -1px;

}

.ffp-radio-mark {

    width: 20px; height: 20px; min-width: 20px;

    border-radius: 50%; border: 2px solid #ccc;

    background: transparent;

    display: flex; align-items: center; justify-content: center;

    transition: all 0.2s ease;

}

.ffp-radio-item.ffp-checked .ffp-radio-mark { border-color: #c41230; }

.ffp-radio-item.ffp-checked .ffp-radio-mark::after {

    content: ''; width: 10px; height: 10px;

    border-radius: 50%; background: #c41230;

    animation: ffp-dot-pop 0.25s cubic-bezier(.4,0,.2,1);

}

@keyframes ffp-dot-pop {

    0% { transform: scale(0); }

    100% { transform: scale(1); }

}

.ffp-radio-label { flex: 1; display: flex; align-items: center; gap: 8px; }



/* ─── IMAGE SWATCH (Color Circles) ───────────── */

.ffp-image-swatch-group { display: flex; flex-wrap: wrap; gap: 10px; }

.ffp-swatch-item {

    display: flex; flex-direction: column;

    align-items: center; gap: 4px;

    cursor: pointer; width: 60px; text-align: center;

    -webkit-tap-highlight-color: transparent;

}

.ffp-swatch-item input {

    position: absolute; width: 1px; height: 1px; overflow: hidden;

    clip: rect(0 0 0 0); clip-path: inset(50%);

    white-space: nowrap; border: 0; padding: 0; margin: -1px;

}

.ffp-swatch-img {

    width: 44px !important; height: 44px !important;

    border-radius: 50%; overflow: hidden;

    border: 3px solid transparent;

    box-shadow: 0 1px 4px rgba(0,0,0,0.1);

    transition: all 0.25s cubic-bezier(.4,0,.2,1);

    display: flex; align-items: center; justify-content: center;

    background: #f5f5f5;

}

.ffp-swatch-img img {

    width: 100%; height: 100%; object-fit: cover;

    border-radius: 50%; display: block;

}

.ffp-swatch-item:hover .ffp-swatch-img { transform: scale(1.05); }

.ffp-swatch-item input:checked + .ffp-swatch-img {

    border-color: #c41230;

    transform: scale(1.12);

    box-shadow: 0 0 0 2px rgba(196,18,48,0.15), 0 0 12px rgba(196,18,48,0.1);

}

.ffp-swatch-label {

    font-size: 9px; font-weight: 500; color: #999;

    text-transform: uppercase; letter-spacing: 0.02em;

    line-height: 1.2; transition: all 0.2s ease;

}

.ffp-swatch-item input:checked ~ .ffp-swatch-label { color: #1a1a1a; font-weight: 700; }



/* ─── IMAGE SELECT (Dropdown with Images) ────── */

.ffp-imageselect-wrap { position: relative; }

.ffp-imageselect-current {

    display: flex; align-items: center; gap: 10px;

    padding: 10px 40px 10px 14px;

    border: 1.5px solid #ddd; border-radius: 8px;

    cursor: pointer; background: #fff; min-height: 46px;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    font-size: 14px; color: #1a1a1a; position: relative;

}

.ffp-imageselect-current:hover { border-color: #bbb; }

.ffp-imageselect-current:focus {

    outline: none; border-color: #c41230;

    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.08);

}

.ffp-imageselect-placeholder { color: #999; }

.ffp-imageselect-current .ffp-select-arrow {

    position: absolute; right: 14px; top: 50%;

    transform: translateY(-50%);

}

.ffp-imageselect-thumb {

    width: 36px; height: 36px;

    border-radius: 6px; object-fit: cover; flex-shrink: 0;

}

.ffp-imageselect-dropdown {

    display: none; position: absolute;

    top: calc(100% + 4px); left: 0; right: 0;

    background: #fff; border: 1.5px solid #ddd;

    border-radius: 8px; z-index: 100;

    max-height: 260px; overflow-y: auto;

    box-shadow: 0 8px 24px rgba(0,0,0,0.08);

}

.ffp-imageselect-dropdown.open {

    display: block;

    animation: ffp-dropdown-in 0.15s ease;

}

@keyframes ffp-dropdown-in {

    0% { opacity: 0; transform: translateY(-4px); }

    100% { opacity: 1; transform: translateY(0); }

}

.ffp-imageselect-option {

    display: flex; align-items: center; gap: 12px;

    padding: 10px 14px; cursor: pointer;

    transition: background 0.15s ease;

    font-size: 14px; color: #333;

}

.ffp-imageselect-option:hover { background: #f8f8f8; }

.ffp-imageselect-option.selected { background: rgba(196,18,48,0.03); font-weight: 600; }

.ffp-imageselect-option img {

    width: 56px; height: 56px;

    border-radius: 6px; object-fit: cover; flex-shrink: 0;

}

.ffp-imageselect-option:not(:last-child) { border-bottom: 1px solid #f0f0f0; }



/* ─── TEXT / TEXTAREA / NUMBER ───────────────── */

.ffp-text-input, .ffp-textarea {

    width: 100%; padding: 12px 14px;

    font-size: 14px; color: #1a1a1a; background: #fff;

    border: 1.5px solid #ddd; border-radius: 8px;

    font-family: inherit; box-sizing: border-box;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.ffp-text-input:hover, .ffp-textarea:hover { border-color: #bbb; }

.ffp-text-input:focus, .ffp-textarea:focus {

    outline: none; border-color: #c41230;

    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.08);

}

.ffp-text-input::placeholder, .ffp-textarea::placeholder { color: #bbb; }

.ffp-number-input {

    width: 120px; padding: 12px 14px;

    font-size: 14px; color: #1a1a1a; background: #fff;

    border: 1.5px solid #ddd; border-radius: 8px;

    font-family: inherit; box-sizing: border-box;

    -moz-appearance: textfield;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.ffp-number-input:focus {

    outline: none; border-color: #c41230;

    box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.08);

}

.ffp-number-input::-webkit-inner-spin-button,

.ffp-number-input::-webkit-outer-spin-button { -webkit-appearance: none; }



/* ─── QUANTITY CONTROLS ──────────────────────── */

.ffp-quantities-group { display: flex; flex-direction: column; gap: 8px; }

.ffp-qty-row {

    display: flex; align-items: center; justify-content: space-between;

    padding: 10px 14px; border: 1.5px solid #e5e5e5;

    border-radius: 8px; background: #fff;

}

.ffp-qty-label { font-size: 14px; color: #555; }

.ffp-qty-controls {

    display: flex; align-items: center;

    border: 1.5px solid #e5e5e5; border-radius: 6px; overflow: hidden;

}

.ffp-qty-minus, .ffp-qty-plus {

    width: 36px; height: 36px; border: none;

    background: #fafafa; color: #888; font-size: 16px;

    cursor: pointer; font-family: inherit;

    display: flex; align-items: center; justify-content: center;

    transition: background 0.15s ease;

}

.ffp-qty-minus:hover, .ffp-qty-plus:hover { background: #f0f0f0; }

.ffp-qty-input {

    width: 44px; height: 36px; border: none;

    border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;

    text-align: center; font-size: 14px; font-weight: 700;

    color: #1a1a1a; -moz-appearance: textfield;

}

.ffp-qty-input::-webkit-inner-spin-button,

.ffp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }



/* ─── FILE UPLOAD ────────────────────────────── */

.ffp-file-upload { display: flex; align-items: center; gap: 12px; }

.ffp-file-input { display: none; }

.ffp-file-btn {

    display: inline-flex; align-items: center;

    padding: 10px 18px; background: #fafafa;

    border: 1.5px solid #ddd; border-radius: 8px;

    font-size: 13px; font-weight: 600; color: #555;

    cursor: pointer; transition: all 0.2s ease;

}

.ffp-file-btn:hover { background: #f0f0f0; border-color: #ccc; }

.ffp-file-name { font-size: 13px; color: #999; }

.ffp-file-name.error { color: #dc2626; }



/* ─── SECTION HEADER ─────────────────────────── */

.ffp-section-header { padding: 16px 0 8px; border-bottom: 1px solid #f0f0f0; margin-bottom: 4px; }

.ffp-section-header h3 {

    font-size: 14px; font-weight: 800; color: #1a1a1a;

    text-transform: uppercase; letter-spacing: 0.06em; margin: 0;

}

.ffp-section-header p { font-size: 12px; color: #999; margin: 4px 0 0; }



/* ─── PRICE BADGE ────────────────────────────── */

.ffp-price-badge {

    font-size: 11px; font-weight: 700; color: #c41230;

    background: rgba(196,18,48,0.06);

    border: 1px solid rgba(196,18,48,0.12);

    padding: 2px 10px; border-radius: 20px;

    white-space: nowrap; display: inline-block;

}



/* ─── PRICE SUMMARY ──────────────────────────── */

.ffp-price-summary {

    padding: 14px 16px; background: #fafafa;

    border: 1px solid #eee; border-radius: 10px; margin-top: 4px;

}

.ffp-price-row {

    display: flex; justify-content: space-between; align-items: center;

    padding: 4px 0; font-size: 13px; color: #888;

}

.ffp-price-row.ffp-grand-total {

    font-size: 16px; font-weight: 800; color: #1a1a1a;

    border-top: 1px solid #eee; margin-top: 6px; padding-top: 8px;

}

.ffp-price-value { font-variant-numeric: tabular-nums; transition: color 0.2s ease; }

.ffp-price-row.ffp-options-total .ffp-price-value { color: #c41230; font-weight: 600; }



/* ─── STICKY FLOATING TOTAL BAR ──────────────── */

.ffp-sticky-total {

    position: fixed; bottom: -80px; left: 0; right: 0; z-index: 9990;

    background: rgba(255,255,255,0.92);

    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);

    border-top: 1px solid #eee; padding: 10px 20px;

    display: flex; align-items: center; justify-content: center; gap: 20px;

    transition: bottom 0.4s cubic-bezier(.4,0,.2,1);

    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);

}

.ffp-sticky-total.ffp-sticky-visible { bottom: 0; }

.ffp-sticky-product-name { font-size: 11px; color: #999; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ffp-sticky-price { font-size: 22px; font-weight: 900; color: #1a1a1a; font-variant-numeric: tabular-nums; }

.ffp-sticky-cart-btn {

    padding: 10px 28px; border: none; border-radius: 6px;

    background: #c41230; color: #fff;

    font-size: 12px; font-weight: 800; cursor: pointer;

    letter-spacing: 0.06em; text-transform: uppercase;

    font-family: inherit; transition: all 0.3s ease;

}

.ffp-sticky-cart-btn:hover { background: #a00e28; }



/* ─── SELECTQTY ──────────────────────────────── */

.ffp-selectqty-group { display: flex; flex-direction: column; gap: 8px; }

.ffp-selectqty-row {

    display: flex; align-items: center; justify-content: space-between;

    padding: 10px 14px; border: 1.5px solid #e5e5e5;

    border-radius: 8px; background: #fff;

}

.ffp-selectqty-label { font-size: 14px; color: #555; }

.ffp-selectqty-row .ffp-qty-input {

    width: 60px; height: 38px;

    border: 1.5px solid #e5e5e5; border-radius: 6px;

    text-align: center; font-size: 14px; font-weight: 700;

}



/* ─── RESPONSIVE ─────────────────────────────── */



/* Tablet & smaller */

@media (max-width: 767px) {

    .ffp-field-half, .ffp-field-third { width: 100%; display: block; margin-right: 0; }



    /* ── CONTAINER: More breathing room ────── */

    .ffp-product-options { margin: 4px 0 16px; }

    .ffp-field { margin-bottom: 22px; }



    /* ── PROGRESS BAR: Thicker for visibility ─ */

    .ffp-progress-bar { height: 4px; margin-bottom: 18px; }



    /* ── LABELS: Bigger for outdoor readability ─ */

    .ffp-field-label {

        font-size: 12px;

        gap: 8px;

        margin-bottom: 8px;

    }

    .ffp-status-dot { width: 8px; height: 8px; min-width: 8px; }

    .ffp-field-desc { font-size: 13px; margin: -2px 0 10px 16px; }



    /* ── SELECTS: Fat thumb friendly ─────────── */

    .ffp-select {

        padding: 14px 44px 14px 16px;

        font-size: 16px; /* Prevents iOS zoom on focus */

        border-radius: 10px;

        min-height: 50px;

    }

    .ffp-select-arrow { right: 16px; font-size: 12px; }



    /* ── CHECKBOX / RADIO: Big tap targets ──── */

    .ffp-checkbox-item,

    .ffp-radio-item {

        padding: 14px 16px;

        gap: 14px;

        font-size: 15px;

        min-height: 52px;

        border-radius: 10px;

    }

    .ffp-checkbox-mark,

    .ffp-radio-mark {

        width: 24px; height: 24px; min-width: 24px;

    }

    .ffp-checkbox-item.ffp-checked .ffp-checkbox-mark::after {

        width: 7px; height: 12px;

    }

    .ffp-radio-item.ffp-checked .ffp-radio-mark::after {

        width: 12px; height: 12px;

    }

    .ffp-checkbox-group,

    .ffp-radio-group { gap: 10px; }



    /* ── IMAGE SWATCHES: 48px min tap target ── */

    .ffp-image-swatch-group {

        gap: 6px;

        justify-content: flex-start;

    }

    .ffp-swatch-item {

        width: auto;

        min-width: 56px;

        padding: 4px;

    }

    .ffp-swatch-img {

        width: 48px !important;

        height: 48px !important;

    }

    .ffp-swatch-label {

        font-size: 9px;

        font-weight: 600;

        max-width: 56px;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    /* ── IMAGE SELECT DROPDOWN ──────────────── */

    .ffp-imageselect-current {

        padding: 12px 44px 12px 14px;

        min-height: 54px;

        font-size: 15px;

        border-radius: 10px;

    }

    .ffp-imageselect-thumb { width: 40px; height: 40px; }

    .ffp-imageselect-dropdown {

        max-height: 300px;

        border-radius: 10px;

    }

    .ffp-imageselect-option {

        padding: 14px 16px;

        gap: 14px;

        font-size: 15px;

        min-height: 52px;

    }

    .ffp-imageselect-option img {

        width: 48px; height: 48px;

        border-radius: 8px;

    }



    /* ── TEXT / TEXTAREA / NUMBER ───────────── */

    .ffp-text-input,

    .ffp-textarea {

        padding: 14px 16px;

        font-size: 16px; /* Prevents iOS zoom */

        border-radius: 10px;

        min-height: 50px;

    }

    .ffp-textarea { min-height: 100px; }

    .ffp-number-input {

        width: 100%;

        padding: 14px 16px;

        font-size: 16px;

        border-radius: 10px;

        min-height: 50px;

    }



    /* ── QUANTITY CONTROLS: Thumb-sized ─────── */

    .ffp-qty-controls { border-radius: 10px; }

    .ffp-qty-minus, .ffp-qty-plus {

        width: 48px; height: 48px;

        font-size: 20px;

    }

    .ffp-qty-input {

        width: 56px; height: 48px;

        font-size: 16px;

    }

    .ffp-qty-row {

        padding: 12px 14px;

        border-radius: 10px;

    }

    .ffp-qty-label { font-size: 15px; }



    /* ── FILE UPLOAD ───────────────────────── */

    .ffp-file-btn {

        padding: 14px 20px;

        font-size: 15px;

        border-radius: 10px;

        min-height: 50px;

    }

    .ffp-file-name { font-size: 14px; }



    /* ── SECTION HEADER ────────────────────── */

    .ffp-section-header { padding: 18px 0 10px; }

    .ffp-section-header h3 { font-size: 15px; }

    .ffp-section-header p { font-size: 13px; }



    /* ── PRICE BADGE: Bigger for finger tap ── */

    .ffp-price-badge {

        font-size: 12px;

        padding: 4px 12px;

        border-radius: 20px;

    }



    /* ── PRICE SUMMARY: Readable ────────────── */

    .ffp-price-summary {

        padding: 16px 18px;

        border-radius: 12px;

    }

    .ffp-price-row { padding: 6px 0; font-size: 14px; }

    .ffp-price-row.ffp-grand-total {

        font-size: 18px;

        padding-top: 10px;

        margin-top: 8px;

    }



    /* ── STICKY BAR: Safe area + big CTA ──── */

    .ffp-sticky-total {

        gap: 12px;

        padding: 12px 16px;

        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));

        flex-wrap: nowrap;

        justify-content: space-between;

    }

    .ffp-sticky-product-name { display: none; }

    .ffp-sticky-price {

        font-size: 20px;

        flex-shrink: 0;

    }

    .ffp-sticky-cart-btn {

        padding: 14px 24px;

        font-size: 13px;

        border-radius: 10px;

        min-height: 48px;

        white-space: nowrap;

        flex-shrink: 0;

    }



    /* ── SELECTQTY ─────────────────────────── */

    .ffp-selectqty-row {

        padding: 12px 14px;

        border-radius: 10px;

        flex-wrap: wrap;

        gap: 8px;

    }

    .ffp-selectqty-label { font-size: 15px; }

    .ffp-selectqty-row .ffp-qty-input {

        width: 70px; height: 44px;

        border-radius: 8px;

        font-size: 16px;

    }

}



/* ── SMALL PHONES (iPhone SE / 375px) ────────── */

@media (max-width: 390px) {

    .ffp-swatch-item { min-width: 50px; }

    .ffp-swatch-img { width: 42px !important; height: 42px !important; }

    .ffp-swatch-label { font-size: 8px; max-width: 50px; }

    

    .ffp-sticky-total { padding: 10px 12px; gap: 8px; }

    .ffp-sticky-price { font-size: 18px; }

    .ffp-sticky-cart-btn { padding: 12px 18px; font-size: 12px; }



    .ffp-checkbox-item,

    .ffp-radio-item { padding: 12px 14px; font-size: 14px; }



    .ffp-imageselect-option { padding: 12px 14px; }

    .ffp-imageselect-option img { width: 42px; height: 42px; }

}



/* ─── FIELD ANIMATION ────────────────────────── */

@keyframes ffp-field-in {

    0% { opacity: 0; transform: translateY(8px); }

    100% { opacity: 1; transform: translateY(0); }

}



/* ─── FOCUS-VISIBLE (Keyboard Accessibility) ──── */

.ffp-checkbox-item:focus-within,

.ffp-radio-item:focus-within,

.ffp-swatch-item:focus-within {

    outline: 2px solid #c41230;

    outline-offset: 2px;

}

.ffp-imageselect-current:focus-visible,

.ffp-file-btn:focus-visible,

.ffp-qty-minus:focus-visible,

.ffp-qty-plus:focus-visible,

.ffp-sticky-cart-btn:focus-visible {

    outline: 2px solid #c41230;

    outline-offset: 2px;

}



/* ─── REDUCED MOTION ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .ffp-progress-fill,

    .ffp-field,

    .ffp-checkbox-mark,

    .ffp-radio-mark,

    .ffp-swatch-img,

    .ffp-status-dot,

    .ffp-field-label,

    .ffp-select,

    .ffp-select-arrow,

    .ffp-sticky-total,

    .ffp-imageselect-dropdown.open {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

    }

}



/* ─── CART OPTION EDITING ────────────────────── */

.ffp-cart-options {

    margin: 10px 0 4px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-width: 100%;

}

.ffp-cart-option-row {

    display: flex;

    align-items: center;

    gap: 8px;

    max-width: 100%;

    overflow: hidden;

}

.ffp-cart-option-label {

    font-size: 11px;

    font-weight: 700;

    color: #767676;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    white-space: nowrap;

    flex-shrink: 0;

    max-width: 120px;

    overflow: hidden;

    text-overflow: ellipsis;

}

.ffp-cart-option-select {

    flex: 1;

    min-width: 0;

    max-width: 100%;

    padding: 6px 28px 6px 8px;

    font-size: 13px;

    color: #1a1a1a;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 4px;

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

    font-family: inherit;

    box-sizing: border-box;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 8px center;

    transition: border-color 0.2s ease;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}

.ffp-cart-option-select:hover { border-color: #bbb; }

.ffp-cart-option-select:focus {

    outline: none;

    border-color: #c41230;

    box-shadow: 0 0 0 2px rgba(196, 18, 48, 0.08);

}

.ffp-cart-option-select:disabled { opacity: 0.5; cursor: wait; }

/* Prevent cart product-name cell from overflowing */

.woocommerce-cart-form td.product-name { overflow: hidden; }



@media (max-width: 767px) {

    .ffp-cart-option-row {

        flex-direction: column;

        align-items: stretch;

        gap: 2px;

    }

    .ffp-cart-option-label {

        max-width: none;

        font-size: 10px;

    }

    .ffp-cart-option-select {

        width: 100%;

        font-size: 14px;

        padding: 8px 28px 8px 10px;

    }

}



/* ─── VARIATION SWATCHES ─────────────────────── */

.ffp-variation-swatches {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 6px 0 12px;

    align-items: flex-start;

}

.ffp-vs-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    cursor: pointer;

    background: none;

    border: none;

    padding: 3px;

    font-family: inherit;

    outline: none;

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    transition: opacity 0.2s ease;

}

.ffp-vs-item:focus-visible {

    outline: 2px solid #c41230;

    outline-offset: 4px;

    border-radius: 50%;

}



/* ── Color swatch circle ── */

.ffp-vs-color {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: block;

    box-shadow: 0 1px 4px rgba(0,0,0,0.10);

    border: 3px solid transparent;

    transition: all 0.25s cubic-bezier(.4,0,.2,1);

    box-sizing: border-box;

}

.ffp-vs-item:hover .ffp-vs-color {

    transform: scale(1.08);

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}

.ffp-vs-item.ffp-vs-active .ffp-vs-color {

    border-color: #c41230;

    transform: scale(1.12);

    box-shadow: 0 0 0 2px rgba(196,18,48,0.15), 0 0 12px rgba(196,18,48,0.1);

}



/* ── Image swatch circle ── */

.ffp-vs-image {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    overflow: hidden;

    display: block;

    box-shadow: 0 1px 4px rgba(0,0,0,0.10);

    border: 3px solid transparent;

    transition: all 0.25s cubic-bezier(.4,0,.2,1);

    background: #f5f5f5;

    box-sizing: border-box;

}

.ffp-vs-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 50%;

}

.ffp-vs-item:hover .ffp-vs-image {

    transform: scale(1.08);

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}

.ffp-vs-item.ffp-vs-active .ffp-vs-image {

    border-color: #c41230;

    transform: scale(1.12);

    box-shadow: 0 0 0 2px rgba(196,18,48,0.15), 0 0 12px rgba(196,18,48,0.1);

}



/* ── Text/label swatch (fallback) ── */

.ffp-vs-label-text {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 36px;

    padding: 0 14px;

    border: 1.5px solid #ddd;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    color: #555;

    background: #fff;

    transition: all 0.2s ease;

    white-space: nowrap;

    box-sizing: border-box;

}

.ffp-vs-item:hover .ffp-vs-label-text {

    border-color: #bbb;

    background: #fafafa;

}

.ffp-vs-item.ffp-vs-active .ffp-vs-label-text {

    border-color: #c41230;

    color: #c41230;

    background: rgba(196,18,48,0.04);

    font-weight: 700;

}



/* ── Swatch name below circle ── */

.ffp-vs-name {

    font-size: 9px;

    font-weight: 500;

    color: #999;

    text-transform: uppercase;

    letter-spacing: 0.02em;

    line-height: 1.2;

    text-align: center;

    max-width: 64px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: all 0.2s ease;

}

.ffp-vs-item.ffp-vs-active .ffp-vs-name {

    color: #1a1a1a;

    font-weight: 700;

}

/* Hide name for label-type swatches (text is already in the pill) */

.ffp-vs-label .ffp-vs-name { display: none; }



/* ── Disabled / out of stock ── */

.ffp-vs-item.ffp-vs-disabled {

    opacity: 0.3;

    cursor: not-allowed;

    pointer-events: none;

}

.ffp-vs-item.ffp-vs-disabled .ffp-vs-color,

.ffp-vs-item.ffp-vs-disabled .ffp-vs-image {

    filter: grayscale(100%);

}

.ffp-vs-item.ffp-vs-disabled .ffp-vs-color::after,

.ffp-vs-item.ffp-vs-disabled .ffp-vs-image::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 10%;

    width: 80%;

    height: 1.5px;

    background: #c41230;

    transform: rotate(-45deg);

}



/* ── Responsive ── */

@media (max-width: 767px) {

    .ffp-variation-swatches { gap: 8px; margin: 8px 0 14px; }

    .ffp-vs-color,

    .ffp-vs-image { width: 48px; height: 48px; }

    .ffp-vs-label-text { min-height: 40px; height: 40px; font-size: 13px; padding: 0 16px; }

    .ffp-vs-name { font-size: 9px; max-width: 56px; }

    .ffp-vs-item.ffp-vs-active .ffp-vs-color,

    .ffp-vs-item.ffp-vs-active .ffp-vs-image { transform: scale(1.08); }

}



/* ── Small phones ── */

@media (max-width: 390px) {

    .ffp-vs-color,

    .ffp-vs-image { width: 42px; height: 42px; }

    .ffp-vs-name { font-size: 8px; max-width: 50px; }

}



/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {

    .ffp-vs-color,

    .ffp-vs-image,

    .ffp-vs-label-text,

    .ffp-vs-name,

    .ffp-vs-item {

        transition-duration: 0.01ms !important;

    }

}



/* ── Betheme integration: swatch wrapper ── */

.ffp-vs-wrapper {

    margin-bottom: 16px;

}

.ffp-vs-label {

    display: block;

    font-size: 11px;

    font-weight: 800;

    color: #767676;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    margin-bottom: 8px;

    line-height: 1;

}

/* When Betheme's dropdown is hidden by our JS, keep layout clean */

.mfn-vr[style*="display: none"] + .ffp-vs-wrapper,

.ffp-vs-wrapper + .mfn-vr[style*="display: none"] {

    margin-bottom: 0;

}

/* Betheme variation label styling */

.mfn-variations-wrapper .mfn-vr-label {

    font-size: 11px;

    font-weight: 800;

    color: #767676;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    margin-bottom: 6px;

}



/* ── WooCommerce variation label styling ── */

.variations th.label label {

    font-size: 11px;

    font-weight: 800;

    color: #767676;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}

/* Hide reset link when swatches are active */

.variations .reset_variations { margin-top: 8px; font-size: 12px; }



/* ─── HIDE PPOM (scoped to FFP-active products) ───────────────── */

.ffp-options-active .ppom-wrapper, .ffp-options-active .ppom-field-wrapper { display: none !important; }