:root {
--rr-lopt-accent: #9a7b4f;
--rr-lopt-ink: #1c1c1c;
--rr-lopt-muted: #6b6b6b;
--rr-lopt-line: #ddd9d2;
--rr-lopt-paper: #fff;
}
.rr-lopts { display: flex; flex-direction: column; gap: 2.4rem; margin: 2.4rem 0; }
.rr-lopt__head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1.2rem; margin-bottom: 1.2rem;
}
.rr-lopt__label {
font-size: 1.35rem; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--rr-lopt-ink);
}
.rr-lopt__value {
font-size: 1.3rem; font-weight: 500; letter-spacing: .01em;
color: var(--rr-lopt-muted); text-align: right;
}
.rr-lopt__item {
display: flex; flex-direction: column; align-items: center; gap: .6rem;
color: inherit; text-align: center; text-decoration: none;
}
.rr-lopt__title {
font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
color: var(--rr-lopt-muted); line-height: 1.3;
max-width: 100%; overflow-wrap: anywhere;
}
.rr-lopt__item.is-selected .rr-lopt__title { color: var(--rr-lopt-accent); }
.rr-lopt--card .rr-lopt__items {
display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 1rem;
}
.rr-lopt--card .rr-lopt__media {
display: grid; place-items: center; width: 100%; aspect-ratio: 1;
border: 1px solid var(--rr-lopt-line); overflow: hidden; background: var(--rr-lopt-paper);
transition: border-color .15s ease, box-shadow .15s ease;
}
.rr-lopt--card .rr-lopt__media img { width: 100%; height: 100%; object-fit: cover; }
.rr-lopt--card .rr-lopt__item:hover .rr-lopt__media { border-color: var(--rr-lopt-ink); }
.rr-lopt--card .rr-lopt__item.is-selected .rr-lopt__media {
border-color: var(--rr-lopt-accent); box-shadow: inset 0 0 0 1px var(--rr-lopt-accent);
}
.rr-lopt--chip .rr-lopt__items { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.rr-lopt--chip .rr-lopt__item { width: 6.2rem; }
.rr-lopt__chip {
width: 3.4rem; height: 3.4rem; border-radius: 50%;
background: var(--rr-mc, #ccc);
border: 1px solid #ddd;
box-sizing: border-box;
transition: box-shadow .15s ease;
}
.rr-lopt--chip .rr-lopt__item:hover .rr-lopt__chip { border-color: rgba(0, 0, 0, .4); }
.rr-lopt--chip .rr-lopt__item.is-selected .rr-lopt__chip { box-shadow: 0 0 0 2px var(--rr-lopt-accent); }
.rr-lopt__item--extra { display: none; }
.rr-lopt--collapsible.is-open .rr-lopt__item--extra { display: flex; }
.rr-lopt__more {
display: inline-block; margin: 1.2rem auto 0; font-size: 1.1rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--rr-lopt-ink); border: 1px solid var(--rr-lopt-line);
padding: .9rem 1.8rem; background: transparent; cursor: pointer; transition: border-color .15s ease;
}
.rr-lopt__more:hover { border-color: var(--rr-lopt-ink); }
.rr-lopt--collapsible.is-open .rr-lopt__more { display: none; }
body .rr-purity .product-form__input--pill { display: block; text-align: left; margin: 0 0 2.4rem; }
body .rr-purity .product-form__input--pill > legend.form__label {
display: flex; justify-content: space-between; align-items: baseline; width: 100%;
font-size: 1.35rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--rr-lopt-ink); margin-bottom: 1.2rem; float: none;
}
body .rr-purity .product-form__input--pill > legend.form__label .rr-legend-val {
font-size: 1.3rem; font-weight: 500; letter-spacing: .01em;
text-transform: none; color: var(--rr-lopt-muted);
}
body .rr-purity .product-form__input--pill input[type="radio"] + label {
border: 1px solid var(--rr-lopt-line); background: var(--rr-lopt-paper);
color: var(--rr-lopt-ink); border-radius: 0; margin: 0 1rem 1rem 0;
min-width: 7.2rem; padding: 1.3rem 2rem; font-size: 1.3rem;
letter-spacing: .08em; text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
body .rr-purity .product-form__input--pill input[type="radio"] + label:hover { border-color: var(--rr-lopt-ink); }
body .rr-purity .product-form__input--pill input[type="radio"]:checked + label {
background: var(--rr-lopt-paper); color: var(--rr-lopt-accent);
border-color: var(--rr-lopt-accent); text-decoration: none;
}
body .rr-purity .product-form__input--pill input[type="radio"] + label:before { box-shadow: none; }
@media screen and (max-width: 749px) {
.rr-lopt--card .rr-lopt__items { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
.rr-lopt--chip .rr-lopt__items { gap: 1.2rem; }
.rr-lopt--chip .rr-lopt__item { width: 5.6rem; min-height: 4.4rem; }
}