/* ═══════════════════════════════════════════════
   Smart Variant Swatches v3.0
   Professional · Uppercase · Bigger · Flatsome + Elementor
   ═══════════════════════════════════════════════ */

:root {
    --svs-primary: #111;
    --svs-border: #e0e0e0;
    --svs-border-hover: #888;
    --svs-text: #1a1a1a;
    --svs-muted: #555;
    --svs-bg-hover: #f7f7f7;
    --svs-radius: 8px;
    --svs-speed: 0.18s;
}


/* ═══ HIDE ORIGINAL WC SELECT ═══ */

.svs-original-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ═══ CONTAINER & HEADER ═══ */

.svs-wrap {
    margin: 0 0 18px 0;
    padding: 0;
    clear: both;
    position: relative;
    overflow: visible;
}

.svs-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: flex-start;
}

.svs-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--svs-muted);
    flex-shrink: 0;
}

.svs-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--svs-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-height: 1em;
}

.svs-value:empty {
    display: none;
}

.svs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}


/* ═══ COLOR SWATCHES ═══ */

.svs-swatch {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    z-index: 1;
    transition: transform var(--svs-speed);
    box-sizing: border-box !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.svs-swatch:hover {
    transform: scale(1.1);
}

.svs-dot {
    display: block;
    background: var(--c, #ccc);
    pointer-events: none;
    transition: box-shadow var(--svs-speed);
    outline: none !important;
    box-shadow: none !important;
}


/* ── Circle ── */

.svs-shape-circle {
    width: calc(var(--sz, 34px) + 8px) !important;
    height: calc(var(--sz, 34px) + 8px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    padding: 2px !important;
}

.svs-shape-circle .svs-dot {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

.svs-shape-circle.svs-active {
    border-color: var(--svs-primary) !important;
}

.svs-shape-circle.svs-active .svs-dot {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
}

.svs-shape-circle:hover:not(.svs-active):not(.svs-oos):not(.svs-unavail) {
    border-color: var(--svs-border-hover) !important;
}


/* ── Square ── */

.svs-shape-square {
    width: calc(var(--sz, 34px) + 8px) !important;
    height: calc(var(--sz, 34px) + 8px) !important;
    border-radius: 6px !important;
    border: 2px solid transparent !important;
    padding: 2px !important;
}

.svs-shape-square .svs-dot {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px !important;
}

.svs-shape-square.svs-active {
    border-color: var(--svs-primary) !important;
}

.svs-shape-square:hover:not(.svs-active):not(.svs-oos):not(.svs-unavail) {
    border-color: var(--svs-border-hover) !important;
}


/* ── Rounded ── */

.svs-shape-rounded {
    width: calc(var(--sz, 34px) + 8px) !important;
    height: calc(var(--sz, 34px) + 8px) !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    padding: 2px !important;
}

.svs-shape-rounded .svs-dot {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px !important;
}

.svs-shape-rounded.svs-active {
    border-color: var(--svs-primary) !important;
}

.svs-shape-rounded:hover:not(.svs-active):not(.svs-oos):not(.svs-unavail) {
    border-color: var(--svs-border-hover) !important;
}


/* Light color border */
.svs-border .svs-dot {
    border: 1px solid #ccc !important;
}


/* ═══ TOOLTIP ═══ */

.svs-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: var(--svs-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    text-transform: capitalize;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 20;
}

.svs-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--svs-primary);
}

.svs-swatch:hover .svs-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════
   SIZE BUTTONS — PROFESSIONAL · BIGGER · UPPERCASE
   ═══════════════════════════════════════════════ */

.svs-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 46px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--svs-text);
    background: #fff;
    border: 1.5px solid var(--svs-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    transition: all var(--svs-speed);
    box-sizing: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
}

.svs-size:focus-visible {
    outline: 2px solid var(--svs-primary);
    outline-offset: 2px;
}

.svs-sz-pill .svs-size    { border-radius: var(--svs-radius) !important; }
.svs-sz-square .svs-size   { border-radius: 4px !important; }
.svs-sz-minimal .svs-size  { border-radius: 0 !important; }
.svs-sztype-shoes .svs-size { min-width: 56px; }

.svs-size:hover:not(.svs-active):not(.svs-oos):not(.svs-unavail) {
    background: var(--svs-bg-hover);
    border-color: var(--svs-border-hover);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.svs-size.svs-active,
button.svs-size.svs-active,
.woocommerce .svs-size.svs-active,
.woocommerce button.svs-size.svs-active,
.product-info .svs-size.svs-active {
    background: var(--svs-primary) !important;
    color: #fff !important;
    border-color: var(--svs-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
}


/* ═══ OUT OF STOCK / UNAVAILABLE ═══ */

.svs-swatch.svs-oos,
.svs-swatch.svs-unavail,
.svs-size.svs-oos,
.svs-size.svs-unavail {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══ RESPONSIVE ═══ */

@media (max-width: 768px) {
    .svs-list { gap: 6px; }
    .svs-size {
        min-width: 46px;
        height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }
    .svs-tip { display: none !important; }
}

@media (max-width: 480px) {
    .svs-size {
        min-width: 40px;
        height: 38px;
        padding: 0 10px;
        font-size: 12px;
    }
}


/* ═══ ENTRANCE ANIMATION ═══ */

.svs-wrap { animation: svsFade 0.25s ease both; }
.svs-swatch, .svs-size { animation: svsUp 0.2s ease both; }

.svs-swatch:nth-child(1), .svs-size:nth-child(1) { animation-delay: 0.02s; }
.svs-swatch:nth-child(2), .svs-size:nth-child(2) { animation-delay: 0.04s; }
.svs-swatch:nth-child(3), .svs-size:nth-child(3) { animation-delay: 0.06s; }
.svs-swatch:nth-child(4), .svs-size:nth-child(4) { animation-delay: 0.08s; }
.svs-swatch:nth-child(5), .svs-size:nth-child(5) { animation-delay: 0.10s; }
.svs-swatch:nth-child(n+6), .svs-size:nth-child(n+6) { animation-delay: 0.12s; }

@keyframes svsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes svsUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════
   FLATSOME OVERRIDES
   ═══════════════════════════════════════════════ */

.woocommerce div.product form.cart .variations td.value {
    padding-bottom: 6px;
    position: relative;
}

.woocommerce .variations td .svs-wrap,
.product-info .variations td .svs-wrap,
.product-lightbox .variations td .svs-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
}

.woocommerce .variations .svs-swatch,
.woocommerce .variations .svs-swatch *,
.product-info .svs-swatch,
.product-info .svs-swatch *,
.product-lightbox .svs-swatch,
.product-lightbox .svs-swatch * {
    box-shadow: none !important;
    outline: none !important;
}

.woocommerce .variations .svs-swatch.select-option,
.woocommerce .variations .svs-size.select-option {
    all: unset;
    cursor: pointer;
}

.woocommerce .variations button.svs-size,
.product-info button.svs-size,
.product-lightbox button.svs-size {
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}


/* ═══════════════════════════════════════════════
   ELEMENTOR OVERRIDES
   ═══════════════════════════════════════════════ */

/* Elementor product widget */
.elementor-widget-woocommerce-product-add-to-cart .svs-wrap {
    margin-bottom: 18px;
}

.elementor-widget-woocommerce-product-add-to-cart .svs-size,
.elementor-widget-woocommerce-product-add-to-cart button.svs-size {
    min-width: 52px !important;
    height: 46px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.elementor-widget-woocommerce-product-add-to-cart .svs-size.svs-active,
.elementor-widget-woocommerce-product-add-to-cart button.svs-size.svs-active {
    background: var(--svs-primary) !important;
    color: #fff !important;
    border-color: var(--svs-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
}

/* Elementor loop/archive product widgets */
.elementor .product .svs-wrap,
.elementor-widget-loop-grid .svs-wrap,
.elementor-widget-wc-products .svs-wrap {
    margin-bottom: 12px;
}

.elementor .product .svs-size,
.elementor-widget-loop-grid .svs-size,
.elementor-widget-wc-products .svs-size {
    min-width: 46px !important;
    height: 40px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Elementor quick view / modal */
.elementor-popup-modal .svs-wrap,
.eael-product-popup .svs-wrap {
    display: block !important;
    visibility: visible !important;
}

.elementor-popup-modal .svs-size,
.eael-product-popup .svs-size {
    text-transform: uppercase !important;
}

/* Elementor + Flatsome combined */
.elementor .product-info .svs-size,
.elementor .product-lightbox .svs-size {
    text-transform: uppercase !important;
    font-weight: 600 !important;
}


/* ═══ POINTER-EVENTS SAFETY ═══ */

.svs-wrap,
.svs-list,
.svs-swatch,
.svs-size {
    pointer-events: auto !important;
}

.svs-dot,
.svs-tip {
    pointer-events: none !important;
}