/* =========================================================
   PURCHASE
   ========================================================= */

.ninosepo-single-info__purchase{
    width:100%;

    margin-top:30px;
}


.ninosepo-single-info__form{
    width:100%;

    margin:0 !important;
}


/* =========================================================
   VARIATIONS
   ========================================================= */

.ninosepo-single-info__variations{
    display:flex;

    flex-direction:column;

    gap:24px;

    width:100%;

    margin:
        0
        0
        28px;
}


.ninosepo-single-info__variation{
    width:100%;
}


.ninosepo-single-info__variation-label-row{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:100%;

    margin-bottom:9px;
}


.ninosepo-single-info__variation-label{
    margin:0;

    color:#222;

    font-size:11px;
    font-weight:600;
    line-height:1.2;

    letter-spacing:.015em;
}


/* =========================================================
   NATIVE WOO SELECT
   ========================================================= */

.ninosepo-single-info__native-select{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    clip:
        rect(0 0 0 0) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;
}


/* =========================================================
   CUSTOM OPTIONS
   ========================================================= */

.ninosepo-single-info__option-list{
    display:flex;

    flex-wrap:wrap;

    gap:0;

    width:100%;
}


.ninosepo-single-info__option{
    position:relative;

    display:inline-flex;

    min-width:66px;
    min-height:44px;

    margin:
        0
        -1px
        -1px
        0;

    padding:
        10px
        16px;

    align-items:center;
    justify-content:center;

    border:
        1px
        solid
        #ddd !important;

    border-radius:
        0 !important;

    background:
        #fff !important;

    color:
        #111 !important;

    font-size:11px;
    font-weight:500;
    line-height:1.2;

    text-align:center;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    box-shadow:
        none !important;

    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease,
        opacity .16s ease;
}


.ninosepo-single-info__option:hover{
    z-index:2;

    border-color:
        #999 !important;

    background:
        #fafafa !important;
}


.ninosepo-single-info__option.is-selected{
    z-index:3;

    border-color:
        #000 !important;

    background:
        #000 !important;

    color:
        #fff !important;

    box-shadow:
        inset 0 0 0 2px #000,
        inset 0 0 0 3px rgba(255,255,255,.38)
        !important;
}


.ninosepo-single-info__option.is-selected:hover{
    background:
        #000 !important;
}


.ninosepo-single-info__option.is-unavailable{
    color:
        #aaa !important;

    border-color:
        #e5e5e5 !important;

    background:
        #f6f6f6 !important;

    cursor:not-allowed;

    opacity:.52;
}


/* =========================================================
   WOO VARIATION ENGINE OUTPUT

   WooCommerce is still allowed to create these nodes,
   but Ninosepo owns their visible presentation.
   ========================================================= */

.ninosepo-single-info__variation-wrap{
    width:100%;

    margin:0;
}


/*
 * CRITICAL:
 *
 * WooCommerce injects another price here after selecting
 * a variation.
 *
 * We already show the resolved price in:
 *
 * .ninosepo-single-info__price
 *
 * So the native one must never be visible.
 */

.ninosepo-single-info__variation-wrap
.woocommerce-variation-price{
    display:none !important;
}


/*
 * Avoid WooCommerce adding visual spacing around the
 * now-hidden price.
 */

.ninosepo-single-info__variation-wrap
.single_variation{
    margin:0 !important;

    padding:0 !important;

    min-height:0 !important;
}


/*
 * Variation-specific description may still be used if
 * you enter one in WooCommerce.
 */

.ninosepo-single-info__variation-wrap
.woocommerce-variation-description{
    margin:
        0
        0
        11px;

    color:#555;

    font-size:12px;
    line-height:1.5;
}


/*
 * WooCommerce creates an empty description element on the
 * first resolved variation. It must not contribute margin
 * while WooCommerce reveals .single_variation, otherwise the
 * Add to Bag row briefly shifts down and back up.
 */

.ninosepo-single-info__variation-wrap
.woocommerce-variation-description:empty{
    display:none !important;

    margin:0 !important;

    padding:0 !important;
}


/*
 * We already provide our own polished stock status.
 * Prevent Woo from inserting another raw stock line.
 */

.ninosepo-single-info__variation-wrap
.woocommerce-variation-availability{
    display:none !important;
}