khama-product-customizer-variant-picker-firmness{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:12px}.khama_firmness-option{position:relative;display:grid}.khama_firmness-option>khama-button-card{display:block}khama-product-customizer-variant-picker-firmness>.khama_firmness-bar,.khama_firmness-option>.khama_firmness-card{display:none}.khama_firmness-option__addon .checkbox-control{position:absolute;display:flex;flex-direction:row-reverse;bottom:.75rem;right:.75rem;align-items:center;gap:.5rem}html.khama_vwo-firmness-bar khama-product-customizer-variant-picker-firmness{display:block}html.khama_vwo-firmness-bar .khama_firmness-option,html.khama_vwo-firmness-bar .khama_firmness-option>khama-button-card{display:none}html.khama_vwo-firmness-bar .khama_firmness-option:has(>.khama_firmness-card>.khama_firmness-card--selected){display:block;-webkit-margin-before:12px;margin-block-start:12px;padding-block:1.25rem;border-block:1px solid rgb(var(--border-color))}html.khama_vwo-firmness-bar .khama_firmness-option>.khama_firmness-card{display:grid}html.khama_vwo-firmness-bar .khama_firmness-option__addon{margin-block-start:.75rem}html.khama_vwo-firmness-bar .khama_firmness-option__addon .checkbox-control{position:static}.khama_firmness-card{grid-template-columns:minmax(0,1fr) auto}.khama_firmness-card__summary{display:grid;grid-template-columns:fit-content(40%) minmax(0,max-content) minmax(0,1fr)}.khama_firmness-card__material,.khama_firmness-card__hardness{min-width:0;font-size:12px;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem;-webkit-border-start:1px solid rgb(var(--border-color));border-inline-start:1px solid rgb(var(--border-color))}.khama_firmness-card>.khama_firmness-card__details{--tap-area-size: 44px;grid-column:2;grid-row:1;opacity:1}@media screen and (max-width:699px){.khama_firmness-card__summary{grid-template-columns:max-content minmax(0,1fr)}.khama_firmness-card__material,.khama_firmness-card__hardness{padding-inline-start:.75rem}}html.khama_vwo-firmness-bar khama-product-customizer-variant-picker-firmness>.khama_firmness-bar{display:block;-webkit-margin-before:0;margin-block-start:0}khama-product-customizer-variant-picker-firmness khama-button-card button[type=button]{opacity:.5}khama-product-customizer-variant-picker-firmness khama-button-card button[type=button].is-active{opacity:1}khama-product-customizer-variant-picker-firmness .khama_button-picker .placement-grid .align-self-end{grid-row:3}khama-product-customizer-variant-picker-firmness .khama_button-picker__firmness-scale{grid-row:2;width:100%;display:grid;gap:.35rem;-webkit-margin-before:.25rem;margin-block-start:.25rem}khama-product-customizer-variant-picker-firmness .khama_button-picker__firmness-segments{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}khama-product-customizer-variant-picker-firmness .khama_button-picker__firmness-segment{display:block;height:4px;border-radius:999px;background:rgb(var(--border-color));transition:background-color .2s ease-in-out}khama-product-customizer-variant-picker-firmness .khama_button-picker__firmness-segment.is-active{background:rgb(var(--text-color))}khama-product-customizer-variant-picker-firmness .khama_button-picker:hover .khama_button-picker__firmness-segment:not(.is-active),khama-product-customizer-variant-picker-firmness .khama_button-picker.is-active .khama_button-picker__firmness-segment:not(.is-active){background:#fff}khama-product-customizer-variant-picker-firmness .khama_button-picker__firmness-labels{display:flex;justify-content:space-between;gap:1rem;color:rgb(var(--text-color));line-height:1.2}.khama_firmness-bar{--khama-firmness-count: 5;grid-column:1 / -1;min-width:0;-webkit-margin-before:1rem;margin-block-start:1rem}.khama_firmness-bar--2{--khama-firmness-count: 2}.khama_firmness-bar--3{--khama-firmness-count: 3}.khama_firmness-bar--4{--khama-firmness-count: 4}.khama_firmness-bar__labels{display:none;grid-template-columns:repeat(var(--khama-firmness-count),minmax(0,1fr));gap:4px;text-align:center}.khama_firmness-bar__label{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:1px solid rgb(var(--border-color));border-radius:var(--button-border-radius);background:rgb(var(--background-secondary));line-height:1.3;cursor:pointer}.khama_firmness-bar__label.is-active,.khama_firmness-bar__label:hover{color:rgb(var(--text-color))}.khama_firmness-bar__label.is-active{border-color:rgb(var(--text-color));background:var(--khama-background-secondary-02)}.khama_firmness-bar__control{position:relative}.khama_firmness-bar__rail{position:absolute;inset-inline:0;top:50%;height:4px;transform:translateY(-50%);overflow:hidden;background:rgb(var(--text-color) / .12);pointer-events:none}.khama_firmness-bar__indicator{position:absolute;inset-block:0;left:1px;width:calc(100% / var(--khama-firmness-count));transform:translate(-50%);background:linear-gradient(90deg,transparent,rgb(var(--accent)) calc(50% - 1px),rgb(var(--accent)) calc(50% + 1px),transparent)}.khama_firmness-bar__ticks{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.khama_firmness-bar__tick{flex:0 0 2px;height:8px;background:rgb(var(--text-color) / .6)}.khama_firmness-bar__marker{position:absolute;top:50%;left:1px;width:14px;height:14px;border-radius:50%;background:rgb(var(--accent));outline:2px solid rgb(var(--accent));outline-offset:3px;transform:translate(-50%,-50%);pointer-events:none}.khama_firmness-bar__range.range{--range-track-height: 4px;display:block;height:44px;margin:0;cursor:pointer;direction:ltr;-webkit-tap-highlight-color:transparent;touch-action:pan-y pinch-zoom}.khama_firmness-bar__range.range::-webkit-slider-thumb{box-sizing:border-box;width:2px;height:44px;-webkit-margin-before:-20px;margin-block-start:-20px;border:0;border-radius:0;background:none}.khama_firmness-bar__range.range::-moz-range-thumb{box-sizing:border-box;width:2px;height:44px;border:0;border-radius:0;background:none}.khama_firmness-bar__range.range::-webkit-slider-runnable-track{background:none}.khama_firmness-bar__range.range::-moz-range-track,.khama_firmness-bar__range.range::-moz-range-progress{background:none}.khama_firmness-bar__range.range:focus-visible,.khama_firmness-bar__label:focus-visible{outline:none}.khama_firmness-bar__control:has(.khama_firmness-bar__range:focus-visible) .khama_firmness-bar__marker{outline-width:3px}.khama_firmness-bar__label:focus-visible{text-decoration:underline;text-underline-offset:.3em}
/*# sourceMappingURL=/cdn/shop/t/34/assets/khama_product-customizer-variant-picker-firmness.css.map */