/* ═══════════════════════════════════════════════
   Smart Variant Swatches v2.0.1
   Flatsome/Elementor compatible — all visual fixes
   ═══════════════════════════════════════════════ */

:root {
    --svs-primary: #111;
    --svs-border: #ddd;
    --svs-border-hover: #999;
    --svs-text: #333;
    --svs-muted: #666;
    --svs-bg-hover: #f5f5f5;
    --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 16px 0;
    padding: 0;
    clear: both;
    position: relative;
    overflow: visible;
}

/* Header: label + value sit on the LEFT together.
   "SIZE  3XL" or "COLOR  White"
   This avoids collision with Flatsome's CLEAR link on the right. */
.svs-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: flex-start;
}

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

.svs-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--svs-primary);
    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);
    /* Kill all inherited theme styles */
    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 (Nike) ── */

.svs-shape-circle {
    width: calc(var(--sz, 30px) + 8px) !important;
    height: calc(var(--sz, 30px) + 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 (ASOS) ── */

.svs-shape-square {
    width: calc(var(--sz, 30px) + 8px) !important;
    height: calc(var(--sz, 30px) + 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 (Uniqlo) ── */

.svs-shape-rounded {
    width: calc(var(--sz, 30px) + 8px) !important;
    height: calc(var(--sz, 30px) + 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 (white, cream, etc.) */
.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: 500;
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    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
   ═══════════════════════════════════════════════ */

.svs-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 38px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    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: none !important;
    letter-spacing: 0.01em !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: 3px !important; }
.svs-sz-minimal .svs-size  { border-radius: 0 !important; }
.svs-sztype-shoes .svs-size { min-width: 46px; }

.svs-size:hover:not(.svs-active):not(.svs-oos):not(.svs-unavail) {
    background: var(--svs-bg-hover);
    border-color: var(--svs-border-hover);
}

.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: none !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: 38px; height: 36px; padding: 0 10px; font-size: 12px; }
    .svs-tip { display: none !important; }
}

@media (max-width: 480px) {
    .svs-size { min-width: 34px; height: 34px; padding: 0 8px; }
}


/* ═══════════════════════════════════════════════
   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 SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════ */

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

/* Force our wrap visible inside Flatsome */
.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;
}

/* Override Flatsome's variation swatch styling on our elements */
.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;
}

/* Flatsome's .select-option — nuke it on our swatches */
.woocommerce .variations .svs-swatch.select-option,
.woocommerce .variations .svs-size.select-option {
    all: unset;
}

/* Flatsome overrides on button elements */
.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: none !important;
    letter-spacing: 0.01em !important;
}


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

.elementor-widget-woocommerce-product-add-to-cart .svs-wrap {
    margin-bottom: 16px;
}


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

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

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