/* Size badges shared by Browse cards and Quick View.
   Keep all variant presentation rules here; no inline size styling in PHP. */

.size-variant-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 0;
}

.size-variant-badge {
    position: relative;
    display: inline-flex;
    flex: 0 0 29px;
    width: 29px;
    min-width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-sizing: border-box;
    border: 1px solid #ded6dc;
    border-radius: 50%;
    background: #f6f3f5;
    color: #625760;
    font: 400 10px/1 'Roboto Slab', serif;
    text-align: center;
    text-decoration: none;
}

.size-variant-badge.is-wide { font-size: 9px; }

.size-variant-badge.is-unavailable {
    color: #aaa1a9;
    background: #f7f6f7;
    border-color: #e7e3e6;
    opacity: .65;
}

/* Diagonal from bottom-right to top-left. */
.size-variant-badge.is-unavailable::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 1px;
    left: -10%;
    top: 50%;
    background: #aa9fa7;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Interactive size selector inside Quick View */
#quickview_modal .qv-size-section {
    margin: 14px 0 16px;
}

#quickview_modal .qv-size-label {
    color: #5d535a;
    font: 400 12px/1.4 'Roboto Slab', serif;
}

#quickview_modal .size-variant-options {
    justify-content: flex-start;
    gap: 9px;
    margin: 8px 0 0;
}

#quickview_modal button.size-variant-badge {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#quickview_modal button.size-variant-badge.is-wide { font-size: 10px; }

#quickview_modal button.size-variant-badge:not(:disabled):hover {
    border-color: #9b8996;
    background: #eee8ec;
}

#quickview_modal button.size-variant-badge.is-selected {
    background: #eae2e8;
    border: 2px solid #816c7c;
    color: #42353f;
    font-weight: 600;
}

#quickview_modal button.size-variant-badge:disabled {
    cursor: not-allowed;
}

#quickview_modal button.size-variant-badge:focus-visible {
    outline: 2px solid #816c7c;
    outline-offset: 3px;
}

#quickview_modal .qv-cart-panel[hidden],
#quickview_modal .qv-soldout-panel[hidden],
#quickview_modal #lowstock_note[hidden],
#quickview_modal #freeship_eligible[hidden] {
    display: none !important;
}