.variations select {
    display: none !important;
}

.reset_variations {
    display: none !important;
}

/* Wrapper */
.kmf-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    position: relative; /* relative position bohot zaroori hai z-index ke liye */
    z-index: 999;
}

/* Size buttons */
.kmf-button {
    min-width: 40px;
    padding: 4px 18px;
    border: 1px dashed #c0c3c9;
    background: #F8F8F8;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    line-height: 20px;
    transition: .2s;
    position: relative;
    text-align: center;
}

.kmf-button:hover {
    border-color: #111827;
}

/* Selected button */
.kmf-button.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

/* Color swatch */
.kmf-color {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    border: 2px solid #E5E7EB;
    cursor: pointer;
    transition: .2s;
    box-sizing: border-box;
    position: relative; /* Tooltip Positioning Ke Liye */
}

/* Selected color */
.kmf-color.active {
    border: 1px solid #111827;
    transform: scale(1.08);
}

.single-product .single_add_to_cart_button {
    background: #7a0f55 !important;
    border: 0 !important;
    border-radius: 0;
    font-weight: 700;
    padding: 10px 20px !important;
    text-transform: uppercase;
}

/* Out of Stock Styling */
.kmf-swatch.out-of-stock {
    
    cursor: not-allowed;
}

.kmf-button.out-of-stock {
    text-decoration: line-through;
    background: #80808026;
}

.kmf-color.out-of-stock {
    filter: grayscale(100%);
}

.kmf-variation-block tr {
    display: flex;
    flex-direction: column;
}

.kmf-swatch-label{
    padding:0 !important;
}

.kmf-color.out-of-stock .kmf-cross-line {
    display: block;
    position: absolute;
    width: 2px;
    height: 100%;
    background: #ff0000;
    transform: rotate(45deg);
    top: 0;
    left: 50%;
    margin-left: -1px;
    z-index: 1;
    pointer-events: none;
    transform-origin: center center;
}


/* ==========================================
   STYLISH CSS TOOLTIP (FOR OUT OF STOCK ITEMS)
   ========================================== */

/* Tooltip container element settings */
.kmf-swatch[data-tooltip] {
    position: relative;
}

/* Pseudo element for Tooltip Box - Black */
.kmf-swatch[data-tooltip]:not([data-tooltip=""])::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #000000;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 4px;
    white-space: nowrap;
    
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    z-index: 999999 !important; /* Tooltip ka z-index bohot high rakha hai */
}

/* Little triangle/arrow at bottom of tooltip */
.kmf-swatch[data-tooltip]:not([data-tooltip=""])::after {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #000000 transparent transparent;
  
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999999 !important; /* Arrow ka z-index bhi toolip ke barabar rakha */
}

/* Hover State to trigger visibility */
.kmf-swatch[data-tooltip]:not([data-tooltip=""]):hover::before,
.kmf-swatch[data-tooltip]:not([data-tooltip=""]):hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dynamic Selected Text Styling */
.kmf-selected-value {
    font-size: 14px;
    color: #888888; /* Colon color halka grey */
    font-weight: normal;
}

.kmf-selected-text-inner {
    font-weight: bold; /* Selected values like 'M' or 'Gold' will show bold */
    color: #111111; /* Sharp dark text color */
    margin-left: 3px;
}