:where(.product-options) { margin: 0; }
.product-options { position: relative; min-inline-size: 0; border: 0; padding: 0; }
.product-options__legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.product-options__group + .product-options__group { margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid color-mix(in srgb, var(--color-dark) 24%, transparent); }
.product-options__label { margin-block-end: 13px; font-size: 16px; line-height: 25px; font-weight: 500; }
.product-options__choices, .product-options__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.product-options__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.product-options__swatch { display: block; align-self: center; inline-size: 41px; aspect-ratio: 1; border: 0; outline: 1px solid transparent; cursor: pointer; }
.product-options__swatch-paint { display: block; inline-size: 100%; }
.product-options__input:checked + .product-options__swatch { inline-size: 49.27px; border: 4.225px solid var(--color-canvas); outline-color: var(--color-accent); outline-offset: -1px; }
.product-options__input:focus-visible + .product-options__swatch { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.product-options__input:focus-visible + .product-options__size { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.product-options__size { display: grid; place-items: center; padding: 6px 0; font-size: 16px; font-weight: 500; line-height: 25px; border: 1px solid color-mix(in srgb, var(--color-dark) 24%, transparent); cursor: pointer; }
.product-options__input:checked + .product-options__size { color: var(--color-light); background: var(--color-dark); }
.product-options__input:disabled + .product-options__size { color: color-mix(in srgb, var(--color-dark) 28%, transparent); text-decoration: line-through; cursor: not-allowed; }
.product-options__more { align-self: center; color: var(--color-secondary); font-size: 18px; line-height: 25px; font-weight: 500; }
.product-options__group--size { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.product-options__sizes { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 58px)); max-inline-size: 330px; gap: 10px; }
.product-options__chart { display: contents; }
.product-options__chart-toggle { grid-column: 2; grid-row: 1; list-style: none; justify-self: end; font-size: 14px; font-weight: 500; line-height: 25px; color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.product-options__chart-toggle:focus-visible { color: var(--color-dark); }
@media (hover: hover) { .product-options__chart-toggle:hover { color: var(--color-dark); } }
.product-options__chart:not([open]) .product-options__table-wrap { display: none; }
.product-options__chart[open] .product-options__table-wrap { grid-column: 1 / -1; grid-row: 3; }
.product-options__table-wrap { overflow-x: auto; margin-block-start: 14px; }
.product-options__table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.product-options__table th,
.product-options__table td { border: 1px solid color-mix(in srgb, var(--color-dark) 22%, transparent); padding: 8px; text-align: start; }
.product-options__label--card { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.product-options--card .product-options__choices { gap: 4px; }
.product-options--card .product-options__swatches { gap: 7px; }
.product-options--card .product-options__swatch { inline-size: 29px; }
.product-options--card .product-options__input:checked + .product-options__swatch { inline-size: 35px; border-width: 3px; }
@media (max-width: 639px) {
  .product-options__group--size { grid-template-columns: minmax(0, 1fr); }
  .product-options__chart-toggle { grid-column: 1; grid-row: 3; justify-self: start; margin-block-start: 18px; }
  .product-options__chart[open] .product-options__table-wrap { grid-row: 4; }
}

.product-options__chart-toggle::-webkit-details-marker { display: none; }