/**
 * OM Sticky Add to Cart CSS
 *
 * Mobile-first responsive sticky add to cart bar
 * with smart variation handling and persistent mode support
 */

/* =========================================================================
   CSS VARIABLES (defaults, overridden by inline styles from PHP)
   ========================================================================= */
:root {
    --om-satc-padding: 12px;
    --om-satc-spacing: 15px;
    --om-satc-border-width: 1px;
    --om-satc-border-color: #e0e0e0;
    --om-satc-bg-color: #ffffff;
    --om-satc-text-color: #333333;
    --om-satc-title-color: #333333;
    --om-satc-price-color: #333333;
    --om-satc-btn-bg: #212121;
    --om-satc-btn-bg-hover: #757575;
    --om-satc-btn-text: #ffffff;
    --om-satc-btn-text-hover: #ffffff;
    --om-satc-btn-radius: 4px;
    --om-satc-mobile-padding: 8px;
    --om-satc-mobile-font: 13px;
    /* Gutters reserved for the floating FABs at laptop widths: chat + cookie
       (bottom-left ≈ 2 circles) and the cart (bottom-right). Drives the
       768–1660px rule below. Tune here if the FAB positions change. */
    --om-satc-fab-left: 150px;
    --om-satc-fab-right: 92px;
}

/* =========================================================================
   BASE WRAPPER
   ========================================================================= */
.om-satc-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    /* High enough to sit over normal page content + the theme header, but
       BELOW AIEO's full-screen overlay surfaces (navigator 100000, search /
       side-cart 1000000, consent) so an OPEN surface is never covered by the
       sticky bar. It already offsets above the mobile bottom bar (bottom:58px)
       so the two never overlap vertically. `isolation: isolate` keeps a clean
       stacking context independent of `transform: translateY` side effects. */
    z-index: 99000 !important;
    isolation: isolate;
    background-color: var(--om-satc-bg-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
    /* Hard cap content to viewport width so an over-wide child (e.g. a
       <select> with long option labels in a non-flex parent) can't push
       the bar past the screen edge and trigger horizontal scroll. */
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.om-satc-wrapper.om-satc-bottom {
    bottom: 0;
    border-top: var(--om-satc-border-width) solid var(--om-satc-border-color);
}

/* On mobile, the sticky add-to-cart bar must sit ABOVE the AIEO Side
 * Cart's persistent bottom bar (Browse / Search / Cart) — otherwise
 * it covers the bar and the shopper loses the navigator entry point.
 * The bar is 58px tall (Material 3 Bottom-Nav spec). */
@media (max-width: 720px) {
    .om-satc-wrapper.om-satc-bottom {
        bottom: 58px !important;
    }
}

.om-satc-wrapper.om-satc-top {
    top: 0;
    bottom: auto;
    transform: translateY(-100%);
    border-bottom: var(--om-satc-border-width) solid var(--om-satc-border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Active state */
.om-satc-wrapper.om-satc-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Hide on scroll up (optional) */
.om-satc-wrapper.om-satc-hidden {
    transform: translateY(100%);
    opacity: 0;
}

.om-satc-wrapper.om-satc-top.om-satc-hidden {
    transform: translateY(-100%);
}

/* =========================================================================
   INNER CONTAINER
   ========================================================================= */
.om-satc-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--om-satc-padding) 20px;
}

/* =========================================================================
   CONTENT LAYOUT
   ========================================================================= */
.om-satc-content {
    display: flex;
    align-items: center;
    gap: var(--om-satc-spacing);
    flex-wrap: wrap;
}

/* =========================================================================
   PRODUCT IMAGE
   ========================================================================= */
.om-satc-image {
    flex-shrink: 0;
}

.om-satc-image img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.om-satc-image a {
    display: block;
    line-height: 0;
}

/* =========================================================================
   PRODUCT INFO
   ========================================================================= */
.om-satc-info {
    flex: 1;
    min-width: 0;
}

.om-satc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-satc-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.om-satc-title a {
    color: inherit;
    text-decoration: none;
}

.om-satc-title a:hover {
    text-decoration: underline;
}

.om-satc-attrs {
    font-size: 12px;
    color: var(--om-satc-text-color);
    opacity: 0.8;
    margin-top: 2px;
    display: none; /* Hidden by default, shown when variation selected */
}

/* Show attributes when content is present (for many-vars mode) */
.om-satc-attrs:not(:empty) {
    display: block;
}

.om-satc-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-satc-price-color);
    margin-top: 2px;
}

.om-satc-price del {
    opacity: 0.6;
    font-weight: 400;
    margin-right: 5px;
}

.om-satc-price ins {
    text-decoration: none;
}

/* =========================================================================
   ADD TO CART FORM
   ========================================================================= */
.om-satc-form {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Form resets */
.om-satc-form form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* =========================================================================
   QUANTITY SELECTOR
   ========================================================================= */
.om-satc-quantity {
    display: flex;
    align-items: center;
}

.om-satc-quantity input {
    width: 50px;
    height: 38px;
    text-align: center;
    border: 1px solid var(--om-satc-border-color);
    border-radius: var(--om-satc-btn-radius);
    font-size: 14px;
    padding: 0 5px;
    -moz-appearance: textfield;
}

.om-satc-quantity input::-webkit-outer-spin-button,
.om-satc-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================================================
   QUANTITY SELECTOR WITH +/- BUTTONS (Standalone - no Botiga Pro dependency)
   ========================================================================= */

/* Target the WooCommerce quantity wrapper within sticky bar */
.om-satc-wrapper .quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid var(--om-satc-border-color);
    border-radius: var(--om-satc-btn-radius);
    background-color: var(--om-satc-bg-color);
    margin: 0;
    overflow: hidden;
}

/* Force show the Botiga +/- buttons in sticky bar context */
.om-satc-wrapper .quantity .botiga-quantity-plus,
.om-satc-wrapper .quantity .botiga-quantity-minus {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--om-satc-text-color);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
    flex-shrink: 0;
}

.om-satc-wrapper .quantity .botiga-quantity-plus:hover,
.om-satc-wrapper .quantity .botiga-quantity-minus:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--om-satc-btn-bg);
}

/* Hide the accessibility text inside buttons */
.om-satc-wrapper .quantity .botiga-quantity-plus .bt-d-none,
.om-satc-wrapper .quantity .botiga-quantity-minus .bt-d-none {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Arrow style buttons (Botiga style 9 and arrows) - ensure arrow icons display */
.om-satc-wrapper .quantity .botiga-quantity-plus:before,
.om-satc-wrapper .quantity .botiga-quantity-minus:before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform-origin: center;
}

.om-satc-wrapper .quantity .botiga-quantity-plus:before {
    transform: rotate(-45deg) translateY(2px);
}

.om-satc-wrapper .quantity .botiga-quantity-minus:before {
    transform: rotate(135deg) translateY(-2px);
}

/* If using +/- text symbols instead of arrows */
.om-satc-wrapper .quantity .botiga-quantity-plus:not(:empty):before,
.om-satc-wrapper .quantity .botiga-quantity-minus:not(:empty):before {
    display: none;
}

/* Quantity input field in sticky bar */
.om-satc-wrapper .quantity .qty,
.om-satc-wrapper .quantity input[type="number"] {
    width: 40px;
    height: 100%;
    min-height: 0;
    text-align: center;
    border: none;
    background: transparent !important;
    color: var(--om-satc-text-color);
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    box-shadow: none;
}

.om-satc-wrapper .quantity .qty:focus,
.om-satc-wrapper .quantity input[type="number"]:focus {
    outline: none;
    box-shadow: none;
}

.om-satc-wrapper .quantity .qty::-webkit-outer-spin-button,
.om-satc-wrapper .quantity .qty::-webkit-inner-spin-button,
.om-satc-wrapper .quantity input[type="number"]::-webkit-outer-spin-button,
.om-satc-wrapper .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =========================================================================
   VARIATIONS - NOTE
   We do NOT show variation dropdowns in the sticky bar.
   The user selects from the main product form (which may have swatches,
   images, color pickers, etc.). The sticky bar only shows the selected
   variation text and the add to cart button.
   ========================================================================= */

/* =========================================================================
   ADD TO CART BUTTON
   By default, inherit theme button styles. Only apply custom styles if
   CSS variables are explicitly set (non-default values).
   ========================================================================= */
.om-satc-wrapper .single_add_to_cart_button,
.om-satc-wrapper .button {
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

/* Custom button styling - only applied when om-satc-custom-btn class is present */
.om-satc-wrapper.om-satc-custom-btn .single_add_to_cart_button,
.om-satc-wrapper.om-satc-custom-btn .button {
    background-color: var(--om-satc-btn-bg) !important;
    color: var(--om-satc-btn-text) !important;
    border: none !important;
    border-radius: var(--om-satc-btn-radius) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.om-satc-wrapper.om-satc-custom-btn .single_add_to_cart_button:hover,
.om-satc-wrapper.om-satc-custom-btn .button:hover {
    background-color: var(--om-satc-btn-bg-hover) !important;
    color: var(--om-satc-btn-text-hover) !important;
}

.om-satc-wrapper .single_add_to_cart_button.disabled,
.om-satc-wrapper .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.7;
    cursor: not-allowed;
}

.om-satc-wrapper .single_add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.om-satc-wrapper .single_add_to_cart_button.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: om-satc-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes om-satc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* View Cart link after adding */
.om-satc-wrapper .added_to_cart {
    display: inline-block;
    margin-left: 10px;
    color: var(--om-satc-btn-bg);
    text-decoration: none;
    font-size: 13px;
}

.om-satc-wrapper .added_to_cart:hover {
    text-decoration: underline;
}

/* =========================================================================
   DISMISS BUTTON (Persistent Mode)
   ========================================================================= */
.om-satc-dismiss {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--om-satc-text-color);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    line-height: 0;
}

.om-satc-dismiss:hover {
    opacity: 1;
}

.om-satc-dismiss svg {
    display: block;
}

/* =========================================================================
   SIMPLIFIED ADD TO CART (Many Variations)
   ========================================================================= */
.om-satc-simplified {
    display: flex;
    align-items: center;
}

/* =========================================================================
   VISIBILITY CLASSES
   ========================================================================= */
.om-satc-hide-desktop {
    display: block;
}

.om-satc-hide-mobile {
    display: block;
}

/* Desktop only visibility */
body.om-satc-desktop-only .om-satc-wrapper {
    display: block;
}

/* Mobile only visibility */
body.om-satc-mobile-only .om-satc-wrapper {
    display: block;
}

/* =========================================================================
   SMART VARIATION HANDLING
   ========================================================================= */

/* Hide the sticky bar when pending variation selection */
body.om-satc-pending .om-satc-wrapper {
    display: none !important;
}

body.om-satc-pending .om-satc-wrapper.om-satc-visible {
    display: none !important;
}

/* When variation is selected, show it */
body.om-satc-many-vars:not(.om-satc-pending) .om-satc-wrapper {
    display: block;
}

/* Hide any third-party variation elements that might get injected */
body.om-satc-many-vars .om-satc-wrapper .variations {
    display: none !important;
}

body.om-satc-many-vars .om-satc-wrapper .botiga-variations-wrapper {
    display: none !important;
}

body.om-satc-many-vars .om-satc-wrapper .woocommerce-variation {
    display: none !important;
}

/* Show attributes summary for many-variations products */
body.om-satc-many-vars .om-satc-attrs {
    display: block !important;
}

/* =========================================================================
   VARIABLE PRODUCT - SELECT PROMPT
   For variable products, we don't show dropdowns. User must select from
   the main product form (which may have swatches, images, etc.)
   ========================================================================= */

/* Select prompt - shown when no variation is selected */
.om-satc-select-prompt {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: var(--om-satc-btn-radius);
    color: var(--om-satc-text-color);
    font-size: 13px;
    opacity: 0.8;
}

.om-satc-prompt-text {
    white-space: nowrap;
}

/* Hide prompt when variation is selected */
.om-satc-wrapper.om-satc-variation-selected .om-satc-select-prompt {
    display: none !important;
}

/* Show attributes text when variation is selected */
.om-satc-wrapper.om-satc-variation-selected .om-satc-attrs {
    display: block !important;
}

/* Hide attrs when no variation selected */
.om-satc-wrapper:not(.om-satc-variation-selected) .om-satc-attrs {
    display: none;
}

/* =========================================================================
   RESPONSIVE - TABLET (768px and above)
   ========================================================================= */
@media (min-width: 768px) {
    .om-satc-image img {
        width: 60px;
        height: 60px;
    }

    .om-satc-title {
        font-size: 15px;
    }

    .om-satc-price {
        font-size: 15px;
    }

    .om-satc-content {
        flex-wrap: nowrap;
    }

    /* Hide mobile-only elements on desktop */
    .om-satc-hide-desktop {
        display: none !important;
    }

    /* Desktop visibility */
    body.om-satc-mobile-only .om-satc-wrapper {
        display: none !important;
    }

    /* Adjust for admin bar */
    body.admin-bar .om-satc-wrapper.om-satc-top {
        top: 32px;
    }
}

/* =========================================================================
   LAPTOP / DESKTOP — clear the floating FABs so the bar never overlaps them.
   At common laptop widths (~1300px) the centered max-1400 bar runs nearly
   edge-to-edge, dropping the product photo/info under the bottom-left chat +
   cookie buttons and the Add-to-cart button under the bottom-right cart FAB.
   Reserve gutters (pushing the photo/info toward centre) + tighten the row so
   it still fits. Above ~1660px the bar's auto side-margins already clear the
   FABs, so this only runs below that.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1660px) {
    .om-satc-inner {
        padding-left: var(--om-satc-fab-left, 150px);
        padding-right: var(--om-satc-fab-right, 92px);
    }
    /* Minimise dead space so the pushed-in content still fits comfortably. */
    .om-satc-content {
        gap: 10px;
    }
    .om-satc-content.om-satc-type-variable .om-satc-info {
        max-width: 26%;
    }
    .om-satc-variation-select {
        max-width: 280px;
    }
}

/* =========================================================================
   RESPONSIVE - MOBILE (below 768px)
   ========================================================================= */
@media (max-width: 767px) {
    .om-satc-inner {
        padding: var(--om-satc-mobile-padding) 15px;
    }

    .om-satc-content {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Image smaller on mobile */
    .om-satc-image img {
        width: 40px;
        height: 40px;
    }

    /* Info section takes full width minus dismiss button */
    .om-satc-info {
        flex: 1;
        min-width: 0;
    }

    .om-satc-title {
        font-size: var(--om-satc-mobile-font);
    }

    .om-satc-price {
        font-size: var(--om-satc-mobile-font);
    }

    .om-satc-attrs {
        font-size: 11px;
    }

    /* Form takes full width on mobile */
    .om-satc-form {
        width: 100%;
        margin-top: 8px;
    }

    .om-satc-form form {
        width: 100%;
        justify-content: space-between;
    }

    /* Button fills available space */
    .om-satc-wrapper .single_add_to_cart_button,
    .om-satc-wrapper .button {
        flex: 1;
        text-align: center;
        padding: 12px 15px !important;
    }

    /* Quantity selector compact */
    .om-satc-quantity {
        flex-shrink: 0;
    }

    .om-satc-quantity input {
        width: 45px;
        height: 40px;
    }

    /* Select prompt on mobile */
    .om-satc-select-prompt {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Hide desktop-only elements on mobile */
    .om-satc-hide-mobile {
        display: none !important;
    }

    /* Mobile visibility */
    body.om-satc-desktop-only .om-satc-wrapper {
        display: none !important;
    }

    /* Dismiss button position on mobile */
    .om-satc-dismiss {
        position: absolute;
        top: 8px;
        right: 8px;
        transform: none;
        padding: 5px;
    }

    /* Adjust for admin bar on mobile */
    body.admin-bar .om-satc-wrapper.om-satc-top {
        top: 46px;
    }

    /* Stacked layout */
    .om-satc-wrapper.om-satc-layout-stacked .om-satc-content {
        flex-direction: column;
        align-items: stretch;
    }

    .om-satc-wrapper.om-satc-layout-stacked .om-satc-info {
        text-align: center;
        width: 100%;
    }

    .om-satc-wrapper.om-satc-layout-stacked .om-satc-form {
        justify-content: center;
    }
}

/* =========================================================================
   PERSISTENT MODE PLACEHOLDER
   ========================================================================= */
.om-satc-persistent-placeholder {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.om-satc-persistent-placeholder::after {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid var(--om-satc-border-color);
    border-top-color: var(--om-satc-btn-bg);
    border-radius: 50%;
    animation: om-satc-spin 0.8s linear infinite;
}

/* =========================================================================
   ANIMATION FOR SHOWING/HIDING
   ========================================================================= */
.om-satc-wrapper {
    will-change: transform, opacity;
}

/* Smooth animation */
.om-satc-wrapper.om-satc-animate-in {
    animation: om-satc-slide-in 0.3s ease forwards;
}

.om-satc-wrapper.om-satc-animate-out {
    animation: om-satc-slide-out 0.3s ease forwards;
}

@keyframes om-satc-slide-in {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes om-satc-slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.om-satc-wrapper.om-satc-top.om-satc-animate-in {
    animation: om-satc-slide-in-top 0.3s ease forwards;
}

.om-satc-wrapper.om-satc-top.om-satc-animate-out {
    animation: om-satc-slide-out-top 0.3s ease forwards;
}

@keyframes om-satc-slide-in-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes om-satc-slide-out-top {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* =========================================================================
   HIDE MERCHANT'S STICKY ADD TO CART (when override is enabled)
   ========================================================================= */
body.om-satc-override-merchant .merchant-sticky-add-to-cart-wrapper {
    display: none !important;
}

/* =========================================================================
   BOTIGA/THEME COMPATIBILITY
   ========================================================================= */
.om-satc-wrapper .botiga-variations-wrapper::before {
    display: none;
}

/* Bar's z-index is set on the main `.om-satc-wrapper` declaration up top
   (max int + !important). Don't redeclare here — a lower value would lose
   to the upper one only by document order, but having two places to edit
   is a foot-gun. */

/* Fix for iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .om-satc-wrapper.om-satc-bottom {
        padding-bottom: calc(var(--om-satc-mobile-padding) + env(safe-area-inset-bottom));
    }
}

/* =========================================================================
   WOOCOMMERCE OVERRIDES
   ========================================================================= */
.om-satc-wrapper .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 10px;
}

.om-satc-wrapper .woocommerce-variation-price {
    display: none;
}

.om-satc-wrapper .woocommerce-variation-description {
    display: none;
}

.om-satc-wrapper .woocommerce-variation-availability {
    display: none;
}

.om-satc-wrapper .reset_variations {
    display: none;
}

/* Single variation wrap */
.om-satc-wrapper .single_variation_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Out of stock message */
.om-satc-wrapper .stock.out-of-stock {
    color: #dc3232;
    font-size: 13px;
    margin: 0;
}

/* =========================================================================
   INLINE VARIATION SWATCHES (Few Variations)
   For products with ≤6 variations, show clickable swatches (color or image)
   Layout: swatches are centered between product info and form controls
   ========================================================================= */

/* Swatches container - positioned in the middle of the bar */
.om-satc-inline-swatches {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 0 10px;
}

/* Base swatch item - shared styles */
.om-satc-swatch-item {
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.om-satc-swatch-item:hover {
    transform: scale(1.1);
}

.om-satc-swatch-item.selected {
    box-shadow: 0 0 0 2px var(--om-satc-btn-bg);
}

/* Color swatches - circular with background color */
.om-satc-swatch-item.om-satc-swatch-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #dedede;
    overflow: hidden;
    background: transparent;
}

.om-satc-swatch-item.om-satc-swatch-color:hover {
    border-color: #212121;
    border-width: 2px;
}

.om-satc-swatch-item.om-satc-swatch-color.selected {
    border-color: #212121;
    border-width: 2px;
    box-shadow: none;
}

.om-satc-swatch-color-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Image swatches - squared thumbnails */
.om-satc-swatch-item.om-satc-swatch-image {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    background: #f5f5f5;
}

.om-satc-swatch-item.om-satc-swatch-image:hover {
    border-color: var(--om-satc-border-color);
}

.om-satc-swatch-item.om-satc-swatch-image.selected {
    border-color: var(--om-satc-btn-bg);
    box-shadow: none;
}

.om-satc-swatch-item.om-satc-swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Legacy support for items without specific type class */
.om-satc-swatch-item:not(.om-satc-swatch-color):not(.om-satc-swatch-image) {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    background: #f5f5f5;
}

.om-satc-swatch-item:not(.om-satc-swatch-color):not(.om-satc-swatch-image) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "+X more" indicator - styled like OM Product Swatches archive pages */
.om-satc-more-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 4px 6px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    flex-shrink: 0;
    cursor: default;
}

/* Show different counts for desktop vs mobile */
.om-satc-more-indicator .om-satc-more-desktop {
    display: inline;
}

.om-satc-more-indicator .om-satc-more-mobile {
    display: none;
}

@media (max-width: 767px) {
    .om-satc-more-indicator .om-satc-more-desktop {
        display: none;
    }

    .om-satc-more-indicator .om-satc-more-mobile {
        display: inline;
    }

    .om-satc-more-indicator {
        min-width: 24px;
        height: 24px;
        padding: 2px 4px;
        font-size: 10px;
    }
}

/* Hide the "+X" indicator when a variation is selected */
.om-satc-wrapper.om-satc-variation-selected .om-satc-more-indicator {
    display: none !important;
}

/* When inline swatches are present, hide the select prompt */
.om-satc-inline-vars .om-satc-select-prompt {
    display: none !important;
}

/* When a variation is selected, hide all swatches except the selected one */
.om-satc-wrapper.om-satc-variation-selected .om-satc-swatch-item:not(.selected) {
    display: none !important;
}

/* The selected swatch doesn't need hover effects when it's the only one showing */
.om-satc-wrapper.om-satc-variation-selected .om-satc-swatch-item.selected {
    cursor: default;
    transform: none !important;
}

/* Variable-product layout — make .om-satc-form and the inner <form>
   transparent for layout via `display: contents` so the swatches /
   dropdown become DIRECT siblings of .om-satc-info in the bar's
   main flex row. End result:
       [image] [info(title/price)]  [swatches OR dropdown]  [qty + button]
   instead of swatches stacking on top of qty+button in the right column. */
.om-satc-wrapper .om-satc-form,
.om-satc-wrapper .om-satc-form .om-satc-variable-form {
    display: contents;
}

/* On VARIABLE-product bars the info column gives up its `flex: 1`
   so the spare horizontal space is available to center the swatches
   or the dropdown between info and qty/button. Simple-product bars
   keep info `flex: 1` so qty/button stay flush to the right. */
.om-satc-content.om-satc-type-variable .om-satc-info {
    flex: 0 0 auto;
    max-width: 36%;
}

/* Inline swatches (few variations) — sit centered in the middle column. */
.om-satc-content > .om-satc-inline-swatches,
.om-satc-content .om-satc-inline-swatches {
    flex: 1;
    justify-content: center;
}

/* Variation dropdown (many variations) — same middle column slot.
   `flex: 1` gives it the spare space; `max-width` keeps it sane;
   `margin: 0 auto` centers it within that allocated slot. */
.om-satc-variation-select {
    max-width: 360px;
    min-width: 180px;
    height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--om-satc-border-color);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: var(--om-satc-text-color);
    cursor: pointer;
    flex: 1 1 auto;
    margin: 0 auto;
}

/* The qty + button block stays on the right, untouched by display:contents.
   Themes (Botiga, etc.) hide `.single_variation_wrap` by default and rely on
   WooCommerce's variations.js to reveal it when a variation is picked.
   Inside the sticky bar we control this directly, so force it visible. */
.om-satc-content .single_variation_wrap,
.om-satc-wrapper .single_variation_wrap {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}
.om-satc-wrapper .single_add_to_cart_button,
.om-satc-content .single_add_to_cart_button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1;
    margin: 0;
    flex-shrink: 0;
}
.om-satc-wrapper .single_add_to_cart_button.disabled {
    opacity: 0.55;            /* still visible — just visually muted until a variation is picked */
    cursor: not-allowed;
}

/* Final hammer — WooCommerce's variations.js sometimes inline-styles
   `.single_variation_wrap { display: none }` when it can't match the
   current state. Inside the sticky bar we manage selection ourselves,
   so override that inline style. */
.om-satc-wrapper .single_variation_wrap[style*="display: none"],
.om-satc-wrapper .single_variation_wrap[style*="display:none"] {
    display: flex !important;
}
.om-satc-wrapper .single_add_to_cart_button[style*="display: none"],
.om-satc-wrapper .single_add_to_cart_button[style*="display:none"] {
    display: inline-block !important;
}
/* Make sure the wrap reserves enough room for both qty and button. */
.om-satc-content .single_variation_wrap {
    min-width: 220px;
}

/* Custom sticky-bar quantity widget — `[-] [input] [+]` with explicit
   step=1. We render it ourselves so it's not subject to Botiga's
   qty-init JS missing the late-rendered sticky bar. */
.om-satc-qty {
    display: inline-flex !important;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--om-satc-border-color);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.om-satc-qty .om-satc-qty-minus,
.om-satc-qty .om-satc-qty-plus {
    width: 32px;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--om-satc-text-color);
    cursor: pointer;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s ease;
}
.om-satc-qty .om-satc-qty-minus:hover,
.om-satc-qty .om-satc-qty-plus:hover {
    background: rgba(0,0,0,0.05);
}
.om-satc-qty .input-text.qty {
    width: 44px;
    border: 0;
    border-left: 1px solid var(--om-satc-border-color);
    border-right: 1px solid var(--om-satc-border-color);
    text-align: center;
    background: transparent;
    font-size: 14px;
    color: var(--om-satc-text-color);
    padding: 0;
    -moz-appearance: textfield; /* hide native spinner */
}
.om-satc-qty .input-text.qty::-webkit-outer-spin-button,
.om-satc-qty .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Final hammer — bullet-proof rules for the cart button inside the
   sticky bar. Maximum-specificity selector so no theme rule can win. */
#om-sticky-atc-wrapper .single_variation_wrap .single_add_to_cart_button,
.om-satc-wrapper .om-satc-content .single_variation_wrap .single_add_to_cart_button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 40px !important;
    min-width: 130px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 14px !important;
    background: var(--om-satc-btn-bg, #212121) !important;
    color: var(--om-satc-btn-text, #fff) !important;
    line-height: 30px !important;
    font-size: 14px !important;
    border-radius: var(--om-satc-btn-radius, 4px) !important;
    border: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    clip-path: none !important;
    pointer-events: auto !important;
}
#om-sticky-atc-wrapper .single_variation_wrap .single_add_to_cart_button.disabled,
.om-satc-wrapper .om-satc-content .single_variation_wrap .single_add_to_cart_button.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Hide Botiga Pro's "in-cart flag" sibling elements inside the sticky
   bar — the cart count badge, "in cart ✓" indicator and "View cart"
   link belong on the archive product card, not in our sticky bar where
   they replace the always-addable button. */
#om-sticky-atc-wrapper .botiga-in-cart-flag,
#om-sticky-atc-wrapper .botiga-in-cart-counter,
#om-sticky-atc-wrapper .botiga-in-cart-flag-text,
#om-sticky-atc-wrapper .botiga-view-cart,
#om-sticky-atc-wrapper a[href*="?wc-ajax=remove_from_cart"],
#om-sticky-atc-wrapper a.added_to_cart,
#om-sticky-atc-wrapper a.wc-forward,
#om-sticky-atc-wrapper .added_to_cart,
/* WC core "X added to cart" success notice and Botiga's count message
   inside the sticky bar — they overlap the title/price and aren't
   actionable here. */
#om-sticky-atc-wrapper .woocommerce-message,
#om-sticky-atc-wrapper .wc-block-components-notice-banner,
#om-sticky-atc-wrapper .botiga-cart-notice,
#om-sticky-atc-wrapper .botiga-cart-flag-notice,
.om-satc-wrapper .woocommerce-message,
.om-satc-wrapper .botiga-cart-flag-notice {
    display: none !important;
}

/* JS in aieo-sticky-add-to-cart.js (enforceStickyButtonLabel) handles
   the "Add to cart" label text by overwriting the button's textContent
   on every WC fragments refresh — no CSS pseudo-element overlay needed,
   which avoids the original Botiga text appearing alongside it. */

/* Hide any WooCommerce variation-template noise that gets injected into
   the sticky bar (single_variation, availability_html, descriptions,
   reset link, stock indicator). The sticky bar manages its own UI. */
#om-sticky-atc-wrapper .single_variation,
#om-sticky-atc-wrapper .single_variation_description,
#om-sticky-atc-wrapper .woocommerce-variation,
#om-sticky-atc-wrapper .woocommerce-variation-add-to-cart,
#om-sticky-atc-wrapper .woocommerce-variation-availability,
#om-sticky-atc-wrapper .woocommerce-variation-description,
#om-sticky-atc-wrapper .woocommerce-variation-price,
#om-sticky-atc-wrapper .reset_variations,
#om-sticky-atc-wrapper .stock,
#om-sticky-atc-wrapper .availability_html,
#om-sticky-atc-wrapper .botiga-variations-wrapper,
#om-sticky-atc-wrapper .om-product-swatches,
#om-sticky-atc-wrapper .variations,
#om-sticky-atc-wrapper .variations_form > table,
#om-sticky-atc-wrapper .single_variation_wrap > .om-product-swatches {
    display: none !important;
}

/* Simple-product form keeps its normal flex behaviour — only the variable
   path needs display:contents. Override back to flex for the simple form. */
.om-satc-wrapper .om-satc-form .om-satc-simple-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
@media (max-width: 767px) {
    .om-satc-variation-select { max-width: 100%; min-width: 0; width: 100%; font-size: 12px; }
}

/* =========================================================================
   MOBILE LAYOUT — restructure so image, title and price stay visible
   even when variation controls + qty + button are present. Rules here
   only apply when the admin picked "Stacked" for Mobile layout style;
   "Inline" keeps the desktop single-row flow (display:contents).
   Final stacked layout:
     Row 1: [image] [title + price]
     Row 2: [swatches OR dropdown]   (only if variable)
     Row 3: [qty?] [Add to cart]
   The right-edge gutter reserves space for the floating cart button
   (black circular FAB) that Botiga / WC plugins often pin bottom-right.
   ========================================================================= */
@media (max-width: 767px) {
    /* No right-edge gutter on mobile — the bar spans full width and the
       floating cart FAB (Botiga/WC mini-cart toggle) just overlays the
       bar. Reserving space would shift the content and shrink the
       Add-to-cart button on narrow viewports. */

    /* === STACKED mobile layout === */
    /* Row 1 needs both image and info side-by-side. Give up the 36%
       max-width cap we use on desktop so the title+price can use all the
       space to the right of the thumbnail. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content.om-satc-type-variable .om-satc-info,
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content .om-satc-info {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        order: 1;
    }
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-image {
        order: 0;
        flex: 0 0 auto;
    }

    /* Drop `display: contents` on mobile for VARIABLE products so the
       form wrapper reclaims flex-basis — that lets us stack form rows
       below the info row via order + flex-basis. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-form,
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-form .om-satc-variable-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        flex-basis: 100%;
        order: 2;
        margin-top: 6px;
    }

    /* Simple-product form keeps a single row — qty (if shown) next to the
       button. The form is full-width (stacked under info). */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-form .om-satc-simple-form {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    /* Variable form's inner .single_variation_wrap stays a single row of
       qty + button. `display: flex` is already forced earlier; just make
       sure it spans full width and spaces its kids out. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .single_variation_wrap {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    /* Button takes the remaining row width so it's easy to tap. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .single_add_to_cart_button,
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content .single_variation_wrap .single_add_to_cart_button,
    #om-sticky-atc-wrapper.om-satc-mobile-layout-stacked .single_variation_wrap .single_add_to_cart_button {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Inline swatches / variation dropdown each get their own row, full
       width, centered. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content .om-satc-inline-swatches,
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content > .om-satc-inline-swatches {
        width: 100%;
        flex: 0 0 100%;
        justify-content: center;
        padding: 0;
    }
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-variation-select {
        width: 100% !important;
        max-width: 350px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: block;
    }

    /* Image back to 40x40 on mobile (default compact thumbnail). */
    .om-satc-image img {
        width: 40px;
        height: 40px;
    }

    /* Content row wraps on stacked; inline keeps nowrap. */
    .om-satc-wrapper.om-satc-mobile-layout-stacked .om-satc-content {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
    }
    .om-satc-wrapper.om-satc-mobile-layout-inline .om-satc-content {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* INLINE mobile: don't let the Add-to-cart button grow and crush
       the info column. The base mobile media query sets
       `.om-satc-wrapper .single_add_to_cart_button { flex: 1 }`, which
       in a single-row layout means the button eats nearly all available
       width and the title disappears. Cap it to its natural content
       width so title + price stay readable. */
    .om-satc-wrapper.om-satc-mobile-layout-inline .single_add_to_cart_button,
    .om-satc-wrapper.om-satc-mobile-layout-inline .button {
        flex: 0 0 auto !important;
        padding: 10px 14px !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .om-satc-wrapper.om-satc-mobile-layout-inline .om-satc-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    /* Keep title on one line with ellipsis — the tradeoff of inline
       mode on a narrow viewport. */
    .om-satc-wrapper.om-satc-mobile-layout-inline .om-satc-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* === Maximum-specificity hide rules === */
    /* Without this, `.om-satc-qty { display: inline-flex !important }` at
       lower selector-specificity would still beat the generic
       `.om-satc-hide-mobile { display: none !important }` because of
       cascade ordering. Target the sticky-bar wrapper explicitly so the
       selector has higher specificity than `.om-satc-qty`. */
    .om-satc-wrapper .om-satc-hide-mobile,
    .om-satc-wrapper.om-satc-bottom .om-satc-hide-mobile,
    #om-sticky-atc-wrapper .om-satc-hide-mobile {
        display: none !important;
    }
}

/* === DESKTOP layout toggle (≥768px) === */
@media (min-width: 768px) {
    /* Inline desktop (default) keeps single-row flex. */
    .om-satc-wrapper.om-satc-desktop-layout-stacked .om-satc-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .om-satc-wrapper.om-satc-desktop-layout-stacked .om-satc-form {
        justify-content: center;
    }

    /* Higher-specificity hide-desktop rule for the qty widget. */
    .om-satc-wrapper .om-satc-hide-desktop,
    #om-sticky-atc-wrapper .om-satc-hide-desktop {
        display: none !important;
    }
}

/* Responsive hiding - mobile (≤767px shows 3 max) */
@media (max-width: 767px) {
    .om-satc-swatch-item.om-satc-hide-mobile,
    .om-satc-more-indicator.om-satc-hide-mobile {
        display: none !important;
    }

    .om-satc-inline-swatches {
        gap: 6px;
        padding: 0 5px;
    }

    .om-satc-swatch-item.om-satc-swatch-color {
        width: 20px;
        height: 20px;
    }

    .om-satc-swatch-item.om-satc-swatch-image,
    .om-satc-swatch-item:not(.om-satc-swatch-color):not(.om-satc-swatch-image) {
        width: 28px;
        height: 28px;
    }
}

/* Desktop hiding (>767px shows 6 max) */
@media (min-width: 768px) {
    .om-satc-swatch-item.om-satc-hide-desktop,
    .om-satc-more-indicator.om-satc-hide-desktop {
        display: none !important;
    }
}

/* =========================================================================
   MULTI-SELECT MODE (OM Product Swatches Integration)
   When the user has multi-select mode enabled, the sticky bar shows
   a summary of all selected variations with count, names, and subtotal.
   ========================================================================= */

/* Multi-select mode wrapper adjustments */
.om-satc-wrapper.om-satc-multi-select-mode .om-satc-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

/* Multi-select summary container */
.om-satc-multi-select-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--om-satc-text-color);
}

/* Selection count badge */
.om-satc-multi-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--om-satc-btn-bg);
    color: var(--om-satc-btn-text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Zero selections - muted state */
.om-satc-wrapper:not(.om-satc-has-selections) .om-satc-multi-count {
    background: #e0e0e0;
    color: #666;
}

/* Selected variation names */
.om-satc-multi-names {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--om-satc-text-color);
    opacity: 0.8;
    font-size: 13px;
}

/* Subtotal display */
.om-satc-multi-subtotal {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--om-satc-price-color);
    white-space: nowrap;
}

.om-satc-multi-subtotal strong {
    font-weight: 600;
}

/* Multi-select add to cart button */
.om-satc-multi-add-btn {
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
}

.om-satc-multi-add-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.om-satc-multi-add-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.om-satc-multi-add-btn.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: om-satc-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* In multi-select mode, hide the regular product info elements to save space */
.om-satc-wrapper.om-satc-multi-select-mode .om-satc-attrs,
.om-satc-wrapper.om-satc-multi-select-mode .om-satc-select-prompt {
    display: none !important;
}

/* =========================================================================
   MULTI-SELECT RESPONSIVE - TABLET (768px and above)
   ========================================================================= */
@media (min-width: 768px) {
    .om-satc-multi-select-summary {
        max-width: 400px;
    }

    .om-satc-multi-names {
        max-width: 200px;
    }
}

/* =========================================================================
   MULTI-SELECT RESPONSIVE - MOBILE (below 768px)
   ========================================================================= */
@media (max-width: 767px) {
    .om-satc-wrapper.om-satc-multi-select-mode .om-satc-form {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .om-satc-multi-select-summary {
        width: 100%;
        justify-content: space-between;
        font-size: 13px;
        gap: 8px;
    }

    .om-satc-multi-count {
        font-size: 11px;
        padding: 3px 8px;
    }

    .om-satc-multi-names {
        font-size: 11px;
        flex: 1;
        text-align: center;
    }

    .om-satc-multi-subtotal {
        font-size: 13px;
    }

    .om-satc-multi-add-btn {
        width: 100%;
        text-align: center;
        padding: 12px 15px !important;
    }

    /* On mobile, hide image and title to maximize space for multi-select summary */
    .om-satc-wrapper.om-satc-multi-select-mode .om-satc-image,
    .om-satc-wrapper.om-satc-multi-select-mode .om-satc-title {
        display: none !important;
    }

    /* Keep price visible but compact */
    .om-satc-wrapper.om-satc-multi-select-mode .om-satc-info {
        display: none;
    }
}