.netstore-length-variants {
    --ns-length-variants-ready: 1;
    color: #292e32;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0 0 16px;
    container-type: inline-size;
}
.netstore-length-variants *, .netstore-length-variants *::before { box-sizing: border-box; letter-spacing: 0; }
.netstore-length-variants[hidden], .netstore-length-variants [hidden],
.netstore-product-card-v2640 .product-buy-form .product-option-section.netstore-length-variants-ready > .product-option-title,
.netstore-product-card-v2640 .product-buy-form .product-option-section.netstore-length-variants-ready > ul.skus.product-sku-tiles { display: none !important; }
.netstore-length-variants__caption { display: flex; align-items: baseline; gap: 6px; min-height: 24px; margin-bottom: 6px; color: #626c72; }
.netstore-length-variants__current { color: #292e32; font-weight: 600; overflow-wrap: anywhere; }
.netstore-length-variants__swatches { display: grid; grid-template-columns: repeat(auto-fit, 44px); justify-content: start; gap: 4px; max-width: 476px; margin-bottom: 14px; }
.netstore-length-variants button { font: inherit; cursor: pointer; box-shadow: none; text-transform: none; margin: 0; }
/* Site's legacy .wrapper * reset must not flatten these local controls. */
.netstore-length-variants .netstore-length-variants__swatch { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 50% !important; background: transparent; }
.netstore-length-variants__swatch::before { content: ""; position: absolute; inset: 3px; border: 2px solid transparent; border-radius: 50%; }
.netstore-length-variants__swatch[aria-checked="true"]::before { border-color: #52763c; }
.netstore-length-variants .netstore-length-variants__chip { display: block; width: 28px; height: 28px; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(40, 45, 42, .24); }
.netstore-length-variants__chip.is-transparent { background: repeating-conic-gradient(#e4e8e8 0 25%, #fff 0 50%) center / 10px 10px !important; }
.netstore-length-variants__swatch.is-unavailable .netstore-length-variants__chip { opacity: .55; }
.netstore-length-variants__swatch.is-unavailable::after { content: ""; position: absolute; width: 28px; height: 1px; background: #626c72; transform: rotate(-45deg); }
.netstore-length-variants__pack { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px; }
.netstore-length-variants__pack-label { font-size: 13px; color: #626c72; }
.netstore-length-variants__rolls { display: flex; flex-wrap: wrap; gap: 8px; }
.netstore-length-variants .netstore-length-variants__roll { min-width: 76px; min-height: 44px; padding: 8px 14px; border: 1px solid #cbd2d5; border-radius: 6px !important; background: #fff; color: #292e32; white-space: nowrap; }
.netstore-length-variants__roll[aria-checked="true"] { border-color: #52763c; background: #f0f5ec; color: #36562a; box-shadow: inset 0 0 0 1px #52763c; }
.netstore-length-variants__roll.is-unavailable { color: #70767a; text-decoration: line-through; }
.netstore-length-variants__single { font-weight: 600; }
.netstore-length-variants button:disabled { cursor: not-allowed; }
.netstore-length-variants button:focus-visible { outline: 2px solid #326bc0; outline-offset: 2px; }
@media (hover: hover) {
    .netstore-length-variants__swatch:not(:disabled):not([aria-checked="true"]):hover::before { border-color: #aab4a4; }
    .netstore-length-variants__roll:not(:disabled):hover { border-color: #52763c; }
}
@container (max-width: 524px) {
    .netstore-length-variants__swatches { grid-template-columns: repeat(5, 44px); gap: 4px 8px; }
    .netstore-length-variants__caption { min-height: 40px; }
}
@container (max-width: 252px) {
    .netstore-length-variants__swatches { grid-template-columns: repeat(auto-fit, 44px); gap: 4px; }
}
