.btn-wishlist.is-active,
.na-card-fav.is-active {
    color: #ea580c;
}

.btn-wishlist.is-active i,
.na-card-fav.is-active i {
    color: #ea580c;
}

.btn-wishlist.is-fav,
.btn-wishlist.is-fav i,
.na-card-fav.is-fav,
.na-card-fav.is-fav i { color: #ef4444 !important; }

.yp-size-picker[hidden] {
    display: none !important;
}

.yp-size-picker {
    z-index: 10050;
}

.yp-size-picker .yp-sp-content {
    width: 300px;
    max-width: calc(100vw - 32px);
}

.yp-sp-sizes {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    justify-content: center;
    gap: 10px;
    margin: 14px 0 8px;
}

.yp-sp-size {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ef5526;
    background: #fff;
    border: 2px solid #ef5526;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.yp-sp-size:hover {
    background: rgba(239, 85, 38, .12);
    transform: translateY(-1px);
}

.yp-sp-size.is-selected {
    color: #fff;
    background: #ef5526;
    box-shadow: 0 8px 18px rgba(239, 85, 38, .25);
}

.yp-sp-size:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(239, 85, 38, .22);
}

.yp-sp-size:disabled {
    color: #9ca3af;
    background: #f9fafb;
    border-color: #d1d5db;
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.yp-sp-extra {
    display: block;
    margin: 12px auto 0;
    padding: 4px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.yp-sp-extra:hover {
    color: #dc2626;
    background: #fef2f2;
}

.yp-size-picker .btn-custom-primary:disabled {
    opacity: .5;
    cursor: not-allowed;
}

body.yp-sp-open {
    overflow: hidden;
}