/**
 * Product size selector
 *
 * Lifted out of product-page.css so the product page and the clip sheet on the
 * home page render this block from the same rules rather than two copies that
 * drift apart.
 *
 * @package Qatarshoes
 */

/* ==========================================================================
   Size Selector
   ========================================================================== */
.size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-option {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 42px;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary, #2d1f1f);
}

.size-option:hover:not(.unavailable) {
    border-color: var(--color-primary, #2d1f1f);
}

.size-option.selected {
    background: var(--color-primary, #2d1f1f);
    color: #fff;
    border-color: var(--color-primary, #2d1f1f);
}

.size-option.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    color: #999;
    text-decoration: line-through;
}