.yaroo-product-color-options {
margin-top: 1rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
}
.yaroo-product-color-options__header,
.yaroo-product-size-picker__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.yaroo-product-color-options__header span,
.yaroo-product-size-picker__head span {
color: var(--text, #fff);
font-size: 0.92rem;
font-weight: 850;
letter-spacing: 0.02em;
}
.yaroo-product-color-options__header small,
.yaroo-product-size-picker__head small {
color: var(--text-soft, #bdbdc7);
font-size: 0.76rem;
font-weight: 650;
}
.yaroo-product-color-options__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 0.65rem;
}
.yaroo-product-color-options__item {
display: flex;
min-width: 0;
flex-direction: column;
gap: 0.45rem;
padding: 0.48rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(0, 0, 0, 0.12);
color: var(--text, #fff);
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.yaroo-product-color-options__item:hover,
.yaroo-product-color-options__item.is-active {
border-color: rgba(255, 122, 0, 0.7);
background: rgba(255, 122, 0, 0.09);
color: var(--text, #fff);
}
.yaroo-product-color-options__item:hover {
transform: translateY(-2px);
}
.yaroo-product-color-options__item img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
object-fit: cover;
background: rgba(255, 255, 255, 0.04);
}
.yaroo-product-color-options__item span {
overflow: hidden;
color: inherit;
font-size: 0.72rem;
font-weight: 750;
line-height: 1.25;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.yaroo-product-size-picker {
margin: 1rem 0;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
}
.yaroo-product-size-picker__options {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.yaroo-product-size-picker__option {
cursor: pointer;
}
.yaroo-product-size-picker__option input {
position: absolute;
inline-size: 1px;
block-size: 1px;
opacity: 0;
pointer-events: none;
}
.yaroo-product-size-picker__option span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 40px;
padding: 0.45rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 12px;
background: rgba(0, 0, 0, 0.12);
color: var(--text, #fff);
font-weight: 850;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.yaroo-product-size-picker__option:hover span,
.yaroo-product-size-picker__option input:checked + span {
border-color: rgba(255, 122, 0, 0.75);
background: rgba(255, 122, 0, 0.13);
box-shadow: 0 8px 20px rgba(255, 122, 0, 0.12);
}
.yaroo-product-size-picker__option:hover span {
transform: translateY(-1px);
}
.yaroo-product-size-picker__option input:focus-visible + span {
outline: 3px solid rgba(255, 122, 0, 0.22);
outline-offset: 2px;
}
@media (max-width: 720px) {
.yaroo-product-color-options__header,
.yaroo-product-size-picker__head {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.yaroo-product-color-options__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}