/* VS Swatches — swatches.css */

/* ── Hidden select ─────────────────────────────────────── */
select.vs-hidden-select {
    display:        none !important;
    visibility:     hidden !important;
    position:       absolute !important;
    pointer-events: none !important;
    width:          0 !important;
    height:         0 !important;
    opacity:        0 !important;
}

/* ── Swatch containers ─────────────────────────────────── */
.vs-swatches {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    line-height: 1;
}

/* Product page container */
.vs-swatches--product {
    gap:        var(--vs-prod-gap, 6px);
    margin-top: 4px;
    max-width:  100%;
    overflow:   visible;
    padding:    4px;
    margin:     -4px;
}

/* Catalog container */
.vs-swatches--catalog {
    gap:     var(--vs-cat-gap, 4px);
    padding: 5px 0 2px;
    /* Inherit alignment from product card */
    justify-content: inherit;
}

/* Standard WooCommerce loop - left aligned */
.woocommerce-loop-product .vs-swatches--catalog,
li.product .vs-swatches--catalog {
    justify-content: flex-start;
}

/* ── Base swatch ────────────────────────────────────────── */
.vs-swatch {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    position:        relative;
    flex-shrink:     0;
    text-decoration: none;
    box-sizing:      border-box;
    border:          2px solid rgba(128,128,128,.35);
    overflow:        hidden;
    border-radius:   50%;
    transform:       translateZ(0);
    -webkit-transform: translateZ(0);
    box-shadow:      inset 0 0 0 1px rgba(255,255,255,.15);
    transition:      border-color .15s, transform .12s, box-shadow .15s, opacity .15s;
    -webkit-user-select: none;
    user-select:     none;
}

.vs-swatches--catalog .vs-swatch,
.vs-carousel-swatches .vs-swatch {
    overflow: visible;
    clip-path: circle(50%);
}

/* Pattern swatches need overflow:hidden + border-radius instead of clip-path */
.vs-swatches--catalog .vs-swatch--pattern,
.vs-carousel-swatches .vs-swatch--pattern,
.vs-swatches--product .vs-swatch--pattern {
    overflow:  hidden !important;
    clip-path: none !important;
}

/* ── Product page swatches ─────────────────────────────── */
.vs-swatches--product .vs-swatch {
    width:         var(--vs-prod-size, 34px);
    height:        var(--vs-prod-size, 34px);
    border-radius: var(--vs-prod-radius, 50%);
}

.vs-swatches--product .vs-swatch:hover {
    border-color: var(--vs-bc, #111);
    transform:    scale(var(--vs-scale, 1.1));
    z-index:      2;
}

.vs-swatches--product .vs-swatch--active {
    border:     var(--vs-bw, 2px) solid var(--vs-bc, #111) !important;
    box-shadow: var(--vs-glow, none) !important;
    transform:  none !important;
}

/* Label/text swatches on product page */
.vs-swatches--product .vs-swatch--label,
.vs-swatches--catalog .vs-swatch--label {
    border-radius: 4px !important;
}

.vs-swatch--color {
    background-size: 150% 150% !important;
    background-position: center !important;
}

.vs-swatches--product .vs-swatch--label {
    width:         auto !important;
    min-width:     var(--vs-prod-size, 34px);
    height:        var(--vs-prod-size, 34px);
    padding:       0 10px;
    border-radius: 4px;
    overflow:      visible;
    font-size:     13px;
    font-weight:   600;
    background:    #f5f5f5;
    color:         #333;
    white-space:   nowrap;
}

/* ── Catalog swatches ──────────────────────────────────── */
.vs-swatches--catalog .vs-swatch {
    width:         var(--vs-cat-size, 22px);
    height:        var(--vs-cat-size, 22px);
    border-radius: var(--vs-cat-radius, 50%);
}

.vs-swatches--catalog .vs-swatch:hover {
    border-color: var(--vs-bc, #111);
    transform:    scale(1.1);
    z-index:      2;
}

.vs-swatches--catalog .vs-swatch--label {
    width:         auto !important;
    min-width:     var(--vs-cat-size, 22px);
    height:        var(--vs-cat-size, 22px);
    padding:       0 6px;
    border-radius: 3px;
    overflow:      visible;
    font-size:     11px;
    font-weight:   600;
    background:    #f0f0f0;
    color:         #444;
    white-space:   nowrap;
}

/* ── Color background span ─────────────────────────────── */
.vs-swatch-bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    border-radius:       inherit;
}

/* ── Image swatches ────────────────────────────────────── */
.vs-swatch--image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Tooltip ───────────────────────────────────────────── */
.vs-swatch[title]::after {
    content:        attr(title);
    position:       absolute;
    bottom:         calc(100% + 7px);
    left:           50%;
    transform:      translateX(-50%) scale(.85);
    background:     #1a1a1a;
    color:          #fff;
    font-size:      11px;
    font-weight:    500;
    white-space:    nowrap;
    padding:        4px 9px;
    border-radius:  4px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity .15s, transform .15s;
    z-index:        9999;
}

.vs-swatches--product .vs-swatch[title]:hover::after {
    opacity:   var(--vs-prod-tt, 1);
    transform: translateX(-50%) scale(1);
}

.vs-swatches--catalog .vs-swatch[title]:hover::after {
    opacity:   var(--vs-cat-tt, 1);
    transform: translateX(-50%) scale(1);
}

/* ── Unavailable / sold out ────────────────────────────── */
.vs-swatch--unavailable { opacity: .4; }

.vs-swatch--unavailable::before {
    content:        '';
    position:       absolute;
    inset:          -1px;
    background:     linear-gradient(
                        to bottom right,
                        transparent calc(50% - 1.5px),
                        rgba(180,0,0,.65) calc(50% - 1.5px),
                        rgba(180,0,0,.65) calc(50% + 1.5px),
                        transparent calc(50% + 1.5px)
                    );
    border-radius:  inherit;
    pointer-events: none;
    z-index:        3;
}

/* ── Overflow +X ───────────────────────────────────────── */
.vs-swatch--overflow { position: relative; }

.vs-swatch--overflow:hover {
    transform: none !important;
}

.vs-swatch--overflow::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     var(--ov-bg, rgba(0,0,0,.38));
    border-radius:  inherit;
    z-index:        1;
    pointer-events: none;
}

.vs-overflow-label {
    position:       relative;
    z-index:        2;
    font-size:      calc(var(--vs-cat-size, 22px) * .4);
    font-weight:    700;
    color:          var(--ov-color, #fff);
    text-shadow:    var(--ov-shadow, 0 1px 3px rgba(0,0,0,.7));
    line-height:    1;
    pointer-events: none;
}

.vs-swatches--product .vs-overflow-label {
    font-size: calc(var(--vs-prod-size, 34px) * .35);
}

/* ── Pattern / texture swatches ───────────────────────── */
.vs-swatch--pattern {
    overflow: hidden;
}


.vs-selected-name {
    display:     block;
    font-size:   13px;
    color:       #555;
    margin-top:  5px;
    min-height:  18px;
    font-style:  italic;
    line-height: 1.4;
    /* sits on its own row, full width */
    flex-basis:  100%;
    width:       100%;
}

.vs-selected-name span::before {
    content:     'Pasirinkta: ';
    font-weight: 600;
    font-style:  normal;
    color:       #333;
}

/* ── Product page layout fix ───────────────────────────── */
.variations tr {
    vertical-align: middle;
}

.variations td,
.variations th {
    vertical-align: middle;
    padding-top:    8px;
    padding-bottom: 8px;
}

.variations label {
    display:     flex;
    align-items: center;
    height:      100%;
    margin:      0;
}

.variations .vs-swatches--product {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            var(--vs-prod-gap, 6px);
    max-width:      400px;
}

/* On very small screens - reduce swatch size slightly */
@media (max-width: 480px) {
    .vs-swatches--product .vs-swatch {
        width:  calc(var(--vs-prod-size, 34px) * 0.85) !important;
        height: calc(var(--vs-prod-size, 34px) * 0.85) !important;
    }
    .vs-swatches--product .vs-swatch--label {
        width:     auto !important;
        font-size: 12px;
        padding:   0 8px;
    }
    .variations .vs-swatches--product {
        max-width: 100%;
        gap: 4px;
    }
}

/* Catalog - wrap nicely on all screens */
.vs-swatches--catalog {
    flex-wrap: wrap;
    max-width: 100%;
}

@media (max-width: 480px) {
    .vs-swatches--catalog .vs-swatch {
        width:  calc(var(--vs-cat-size, 22px) * 0.9) !important;
        height: calc(var(--vs-cat-size, 22px) * 0.9) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SLIDER CARD ALIGNMENT - swatches anchored to image bottom
   ═══════════════════════════════════════════════════════════ */

/* 1. Title: no height limit, let it breathe */
li.product .woocommerce-loop-product__title {
    min-height: unset !important;
    max-height: unset !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    margin-bottom: 8px !important;
}

/* 2. The product link wrapper - make image container relative */
li.product a.woocommerce-LoopProduct-link,
li.product a.woocommerce-loop-product__link {
    position: relative !important;
    display: block !important;
}

/* 3. Swatches sit directly after the image link, fixed position */
li.product .vs-swatches--catalog,
li.product .vs-carousel-swatches {
    height: calc(var(--vs-cat-size, 22px) + 12px) !important;
    min-height: calc(var(--vs-cat-size, 22px) + 12px) !important;
    max-height: calc(var(--vs-cat-size, 22px) + 12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 6px auto !important;
}

/* 4. Placeholder same height */
li.product .vs-swatches-placeholder {
    height: calc(var(--vs-cat-size, 22px) + 12px) !important;
    min-height: calc(var(--vs-cat-size, 22px) + 12px) !important;
    display: block !important;
    margin: 6px auto !important;
}