.bed-customizer { width: var(--content); margin-inline: auto; padding: calc(var(--header-height) + 2.4rem) 0 3rem; }
.bed-customizer__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.bed-customizer__header .eyebrow { margin-bottom: .75rem; font-size: .65rem; color: var(--ink-faint); }
.bed-customizer__header h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 4.6vw, 4.6rem); letter-spacing: -.055em; line-height: 1.05; font-weight: 400; }
.bed-customizer__header p { margin: .85rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.bed-reset { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.8rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 99rem; color: var(--ink-soft); background: transparent; font: inherit; font-size: .8rem; cursor: pointer; transition: background-color 150ms ease; }
.bed-reset svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bed-reset:hover { background: #e8e2d8; }
.bed-customizer__workspace { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.5rem; align-items: start; }
.bed-studio { position: sticky; top: calc(var(--header-height) + 1rem); min-width: 0; overflow: hidden; border: 1px solid #e2dcd1; border-radius: 1.5rem; background: radial-gradient(ellipse at 45% 35%, #fcfbf8, #ede8df 85%); }
.bed-studio__top, .bed-studio__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; color: #6c6459; font-size: .72rem; }
.bed-studio__top > span:first-child { display: flex; align-items: center; gap: .55rem; }
.bed-studio__top i { display: block; width: .9rem; height: .9rem; border-radius: 50%; background: #fefdf9; border: 1px solid #d3ccc0; box-shadow: inset 0 0 0 2px #fff; }
.bed-studio__history { display: flex; padding: 0 1.5rem .5rem; }
.bed-undo { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: .65rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.bed-undo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bed-undo:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.bed-undo:disabled { opacity: .35; cursor: default; }
@media (max-width: 48rem) { .bed-studio__history { padding-inline: .85rem; } }
.bed-studio__viewport { position: relative; width: 100%; height: clamp(28rem, 43vw, 38rem); isolation: isolate; }
.bed-studio__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline-offset: -5px; }
.bed-studio__canvas.is-dragging { cursor: grabbing; }
.bed-studio__loading { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; font-size: .8rem; color: var(--ink-faint); }
.bed-studio__loading > span { width: 1.6rem; height: 1.6rem; border: 1px solid #d3c5b5; border-top-color: #795c47; border-radius: 50%; animation: bed-loading .9s linear infinite; }
.bed-studio__hint { display: flex; align-items: center; gap: .5rem; }
.bed-studio__hint svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.bed-dimension-toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.bed-dimension-toggle input, .bed-sync input { width: 1rem; height: 1rem; margin: 0; accent-color: #795c47; flex: 0 0 auto; }
.bed-studio__stage { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: stretch; }
.bed-studio__stage:has(.bed-dimensions[hidden]) { grid-template-columns: minmax(0, 1fr); }
.bed-studio__viewport { grid-column: 2; grid-row: 1; min-width: 0; }
.bed-studio__stage:has(.bed-dimensions[hidden]) .bed-studio__viewport { grid-column: 1; }
.bed-dimensions { position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: .75rem 0 .75rem 1rem; min-width: 0; }
.bed-dimensions[hidden] { display: none; }
.bed-studio__stage:has(.bed-studio__viewport:not(.is-ready)) .bed-dimensions { visibility: hidden; }
.bed-dimension { position: relative; display: grid; width: 100%; gap: .15rem; padding: .65rem .7rem; border: 1px solid #d5cec1; border-radius: .65rem; background: #fbfaf5eb; box-shadow: 0 3px 10px #4c3d2b08; text-align: left; white-space: normal; }
.bed-dimension small { color: #796f60; font-size: .62rem; line-height: 1.2; }
.bed-dimension strong { color: #443a2e; font-size: .83rem; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; }
.bed-dimension-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #9b8870; stroke-width: 1; }
.bed-customizer__tools { min-width: 0; padding: 1.3rem 1.5rem 1rem; border: 1px solid #dfd9ce; border-radius: 1.5rem; background: #fbf9f4; }
.bed-customizer__tools-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .85rem; }
.bed-customizer__tools-heading > span:first-child { color: #363129; font-size: .88rem; font-weight: 600; }
.bed-customizer__tools-heading > span:last-child { color: #8a8072; font-size: .61rem; letter-spacing: .02em; }
.bed-control { padding: .85rem 0 .7rem; border-top: 1px solid #e6e0d5; }
.bed-control__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.bed-control__heading label, .bed-control__label { color: #443c31; font-size: .82rem; font-weight: 500; }
.bed-control__heading output { color: #44382b; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bed-control__heading output small { font-size: .7rem; font-weight: 400; color: #938675; }
:is(.bed-control, .bed-brightness) input[type=range] { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 1.25rem; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
:is(.bed-control, .bed-brightness) input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, #8c6d50 0 var(--range-progress, 50%), #ddd5c9 var(--range-progress, 50%) 100%); }
:is(.bed-control, .bed-brightness) input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin-top: -7px; border: 3px solid #fbf9f4; border-radius: 50%; background: #806044; box-shadow: 0 0 0 1px #a48c73, 0 2px 4px #6d4f3318; }
:is(.bed-control, .bed-brightness) input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: #ddd5c9; }
:is(.bed-control, .bed-brightness) input[type=range]::-moz-range-progress { height: 3px; background: #8c6d50; }
:is(.bed-control, .bed-brightness) input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fbf9f4; border-radius: 50%; background: #806044; box-shadow: 0 0 0 1px #a48c73; }
:is(.bed-control, .bed-brightness) input[type=range]:disabled { cursor: default; opacity: .43; }
.bed-control__bounds { display: flex; justify-content: space-between; margin-top: .15rem; color: #9a8f80; font-size: .61rem; }
.bed-sync { position: relative; display: flex; align-items: center; gap: .5rem; margin: -.15rem 0 .85rem; }
.bed-sync > label { display: inline-flex; align-items: center; gap: .5rem; min-height: 1.75rem; color: #736757; font-size: .7rem; cursor: pointer; }
.bed-info { position: relative; }
.bed-info > button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; padding: 0; border-radius: 50%; background: transparent; color: #98836b; font-family: Georgia, serif; font-size: .85rem; font-weight: 600; cursor: help; }
.bed-info > button::before { position: absolute; width: 1rem; height: 1rem; border: 1px solid #b8a992; border-radius: 50%; content: ''; }
.bed-info > span { position: absolute; z-index: 8; right: -1rem; bottom: calc(100% + .5rem); width: min(16rem, 65vw); padding: .9rem 1rem; border: 1px solid #d9d0c1; border-radius: .8rem; background: #fffdf7; box-shadow: 0 12px 28px #45341f16; color: #6b5c49; font-size: .75rem; line-height: 1.55; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.bed-info:focus-within > span, .bed-info:hover > span, .bed-info:has(button[aria-expanded=true]) > span { visibility: visible; opacity: 1; }
.bed-control--choice { padding-block: .75rem; }
.bed-control__label { display: block; margin-bottom: .55rem; }
.bed-choice { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; min-height: 2.8rem; gap: .35rem; }
.bed-choice button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #d8cfc1; border-radius: 50%; background: transparent; color: #70604a; cursor: pointer; transition: background-color 150ms ease, transform 100ms ease; }
.bed-choice button:hover { background: #eae2d5; }
.bed-choice button:active { transform: scale(.93); }
.bed-choice button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.bed-choice__value { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .45rem; text-align: center; }
.bed-choice__value strong { color: #42372a; font-size: .79rem; font-weight: 500; }
.bed-choice__value span { color: #9b8871; font-size: .69rem; }
.bed-choice__value span:not(:empty)::before { padding-right: .45rem; content: '|'; color: #d1c5b4; }
.bed-customizer__tools-note { margin: .8rem 0 .25rem; color: #9a8c78; font-size: .64rem; line-height: 1.6; }
.bed-customizer__summary { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 0; margin-top: .75rem; border-bottom: 1px solid var(--line); }
.bed-customizer__summary-label { color: #9c8870; font-size: .62rem; text-transform: uppercase; letter-spacing: .11em; }
.bed-customizer__summary p { flex: 1; min-width: 10rem; margin: 0; color: #766a59; font-size: .76rem; }
.bed-customizer__summary > span:last-child { color: #9e9383; font-size: .62rem; }
.bed-customizer button:focus-visible, .bed-customizer input:focus-visible, .bed-studio__canvas:focus-visible { outline: 2px solid #806044; outline-offset: 4px; }
@keyframes bed-loading { to { transform: rotate(360deg); } }
@media (max-width: 68rem) {
  .bed-customizer__workspace { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; }
  .bed-customizer__tools { padding-inline: 1.1rem; }
  .bed-studio__top, .bed-studio__bottom { padding-inline: 1rem; }
  .bed-studio__bottom { font-size: .62rem; }
}
@media (max-width: 48rem) {
  .bed-customizer { padding-top: calc(var(--header-height) + 1.5rem); }
  .bed-customizer__header { margin-bottom: 1.5rem; align-items: flex-start; gap: .6rem; }
  .bed-customizer__header h1 { font-size: clamp(1.85rem, 7vw, 3rem); }
  .bed-customizer__header p { max-width: 15rem; font-size: .78rem; }
  .bed-customizer__header .eyebrow { font-size: .55rem; }
  .bed-reset { margin-top: 1.5rem; padding-inline: .65rem; font-size: .65rem; }
  .bed-reset svg { width: .8rem; }
  .bed-customizer__workspace { grid-template-columns: minmax(0, 1fr); }
  .bed-studio { position: relative; top: auto; border-radius: 1.1rem; }
  .bed-studio__viewport { height: clamp(20rem, 84vw, 34rem); }
  .bed-studio__top, .bed-studio__bottom { padding: 1rem .85rem; font-size: .61rem; }
  .bed-customizer__tools { padding: 1.2rem 1.3rem; border-radius: 1.1rem; }
  .bed-control { padding-block: 1rem; }
  .bed-control__heading label, .bed-control__label { font-size: .9rem; }
  .bed-choice { min-height: 3rem; }
  .bed-choice button { width: 2.75rem; height: 2.75rem; }
  .bed-choice__value strong { font-size: .87rem; }
  .bed-customizer__summary { gap: .6rem 1rem; }
  .bed-customizer__summary > span:last-child { width: 100%; }
  .bed-dimension { min-width: 4.3rem; padding: .35rem .45rem; border-radius: .55rem; }
  .bed-dimension small { font-size: .55rem; }
  .bed-dimension strong { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .bed-customizer *, .bed-customizer *::before { transition: none !important; animation: none !important; } }
/* Customizer sections and linked actions. */
.bed-studio__canvas { cursor: default; touch-action: pan-y; }
.bed-section { border-top: 1px solid #e2dbce; }
.bed-section > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; color: #44392e; cursor: pointer; list-style: none; font-size: 1rem; }
.bed-section > summary::-webkit-details-marker { display: none; }
.bed-section > summary > span { display: flex; align-items: center; gap: .8rem; }
.bed-section > summary small { font-size: .6rem; color: #a18d74; font-variant-numeric: tabular-nums; }
.bed-section > summary i { font-style: normal; font-size: 1.25rem; font-weight: 300; color: #8b7258; }
.bed-section[open] > summary i { transform: rotate(45deg); }
.bed-section__body { padding: 0 0 .9rem; }
.bed-section__body > .bed-control:first-child { border-top: 0; }
.bed-control__note { display: block; color: #8a7c69; font-size: .7rem; line-height: 1.65; margin: .45rem 0 .65rem; }
.bed-section__intro { color: #584a39; font-size: .88rem; margin: .4rem 0; }
.bed-check { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; min-height: 2rem; font-size: .75rem; line-height: 1.45; color: #75654f; cursor: pointer; }
.bed-check input { accent-color: #795e42; width: 1rem; height: 1rem; flex-shrink: 0; margin: 0; }
.bed-sync { margin: 0; }
.bed-instructions { display: block; margin: .4rem 0 .7rem; font-size: .85rem; color: #5e4c37; }
.bed-section textarea { display: block; width: 100%; min-height: 8rem; resize: vertical; padding: .8rem; border: 1px solid #d8cebe; border-radius: .7rem; color: #493c2e; background: #fffdf8; font: inherit; font-size: .8rem; line-height: 1.6; }
.bed-upload { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.9rem; margin-top: 1rem; border: 1px dashed #bba78e; border-radius: .75rem; background: #f1ece2; color: #796045; font-size: .8rem; cursor: pointer; }
.bed-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bed-upload:focus-within { outline: 2px solid #806044; outline-offset: 3px; }
.bed-reference-list > div { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #e7dfd2; }
.bed-reference-list img { width: 3.3rem; height: 3.3rem; border-radius: .4rem; object-fit: cover; }
.bed-reference-list span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .7rem; color: #74624d; }
.bed-reference-list button { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: #8c7560; font-size: 1.3rem; cursor: pointer; }
.bed-error { font-size: .75rem; color: #a2402c; line-height: 1.5; }
.bed-color-parts { display: grid; gap: .5rem; }
.bed-color-parts > div { padding: .6rem .7rem; border: 1px solid #e0d7c8; border-radius: .8rem; }
.bed-color-parts > div:has([aria-pressed=true]) { border-color: #a68c6c; background: #f0e9de; }
.bed-color-parts button { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; padding: .25rem 0; background: transparent; color: #50412e; text-align: left; font: inherit; font-size: .84rem; cursor: pointer; }
.bed-color-parts button i { width: 1.2rem; height: 1.2rem; border: 1px solid #a89478; border-radius: 50%; }
.bed-color-parts .bed-check { font-size: .65rem; }
.bed-color-picker { padding: 1rem 0 0; }
.bed-color-disc { position: relative; width: min(100%, 15rem); aspect-ratio: 1; margin: auto; }
.bed-color-disc canvas { width: 100%; height: 100%; display: block; border-radius: 50%; touch-action: none; cursor: crosshair; }
.bed-color-disc > i { position: absolute; width: 1rem; height: 1rem; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #4a3b2a, 0 1px 5px #0005; transform: translate(-50%,-50%); pointer-events: none; }
.bed-brightness { display: grid; gap: .5rem; margin: 1rem 0; color: #7b6852; font-size: .75rem; }
.bed-brightness input { width: 100%; accent-color: #846447; }
.bed-color-value { display: flex; align-items: center; gap: .75rem; }
.bed-color-value > input { width: 3rem; height: 2.75rem; padding: .2rem; border: 1px solid #d5c7b3; border-radius: .6rem; background: transparent; cursor: pointer; }
.bed-color-value label { display: flex; align-items: center; gap: .5rem; color: #8a755b; font-size: .65rem; }
.bed-color-value label input { width: 7.5rem; border: 1px solid #d5c7b3; border-radius: .5rem; padding: .65rem; font: inherit; font-size: .85rem; color: #574633; background: #fffdf8; }
.bed-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; padding: 1.7rem 0 .6rem; }
.bed-actions .button { min-width: 0; white-space: normal; text-align: center; justify-content: center; min-height: 3.5rem; }
.bed-actions .button:disabled { opacity: .5; cursor: wait; }
.bed-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; min-height: 3rem; font-size: .8rem; line-height: 1.6; color: #6f5a40; }
.bed-feedback button { border: 0; border-bottom: 1px solid #a18b6f; padding: .35rem 0; color: #6a4e30; background: transparent; font: inherit; cursor: pointer; }
.bed-feedback button[hidden] { display: none; }
.bed-section > summary:focus-visible, .bed-customizer textarea:focus-visible { outline: 2px solid #806044; outline-offset: 4px; }
@media (min-width: 48.01rem) { .bed-customizer__tools { max-height: calc(100dvh - var(--header-height) - 2rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c5b69f transparent; scroll-padding: 1rem; } }
@media (max-width: 48rem) {
  .bed-studio { position: sticky; top: calc(var(--header-height) + .4rem); z-index: 3; box-shadow: 0 6px 18px #55412c0c; }
  .bed-studio__viewport { height: clamp(13rem, 33dvh, 22rem); }
  .bed-studio__top, .bed-studio__bottom { padding-block: .65rem; }
  .bed-actions { grid-template-columns: minmax(0,1fr); }
  .bed-actions .button { padding: 1rem; font-size: .8rem; }
  .bed-section > summary { min-height: 3.7rem; }
  .bed-choice button { width: 2.75rem; height: 2.75rem; }
  :is(.bed-control, .bed-brightness) input[type=range] { height: 2rem; }
  :is(.bed-control, .bed-brightness) input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
}
.callback-bed-details { margin: .9rem 0; border: 1px solid #d9cfc0; border-radius: .8rem; padding: .85rem; }
.callback-bed-details summary { color: #6c543a; cursor: pointer; font-size: .8rem; }
.callback-bed-details img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; margin-top: 1rem; border-radius: .6rem; }
.callback-bed-details p { white-space: normal; font-size: .75rem; color: #77634e; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 48rem) {
  .bed-studio__viewport { height: clamp(12rem, 27dvh, 18rem); }
  .bed-section summary, .bed-section input, .bed-section button, .bed-section textarea { scroll-margin-top: calc(var(--header-height) + 27dvh + 5rem); scroll-margin-bottom: 2rem; }
}
/* Dimension labels also open the matching controls. */
.bed-studio__canvas { cursor: pointer; }
.bed-dimension { pointer-events: auto; max-width: 12rem; min-width: 6rem; font-family: inherit; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.bed-dimension > span { display: block; margin-top: .15rem; color: #8a745b; font-size: .62rem; font-weight: 400; line-height: 1.45; white-space: normal; }
.bed-dimension:hover, .bed-dimension:focus-visible { border-color: #9f7c51; box-shadow: 0 3px 14px #62492920; }
.bed-dimension small { font-size: .64rem; color: #7b6143; }
.bed-dimension strong { font-size: .79rem; }
.bed-zoom { display: flex; align-items: center; gap: .2rem; }
.bed-zoom button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #d9cdbb; border-radius: 50%; color: #6c5337; background: #fbf8f1; font: inherit; font-size: 1rem; cursor: pointer; }
.bed-zoom button:hover { background: #eae0d0; }
.bed-zoom output { min-width: 2.9rem; text-align: center; font-size: .68rem; font-variant-numeric: tabular-nums; }
.bed-draft { display: block; margin-top: .7rem; color: #9f9381; font-size: .65rem; }
.bed-section.is-selected > summary { color: #795731; }
.bed-section.is-selected > summary small { color: #795731; }
.bed-select { display: grid; gap: .55rem; padding: .85rem 0; color: #584630; font-size: .8rem; }
.bed-select select { width: 100%; min-width: 0; min-height: 2.85rem; padding: .55rem 2rem .55rem .7rem; border: 1px solid #d7cab8; border-radius: .6rem; font: inherit; color: #57432c; background: #fffdf8; cursor: pointer; }
.bed-mattress-description { font-size: .75rem; color: #87745c; line-height: 1.7; margin: .7rem 0; }
.bed-mattress-specs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .75rem 0; }
.bed-mattress-specs > div { padding: .6rem .7rem; border: 1px solid #e4dacb; border-radius: .65rem; }
.bed-mattress-specs dt { color: #a28c6f; font-size: .59rem; }
.bed-mattress-specs dd { margin: .3rem 0 0; color: #6f5538; font-size: .78rem; }
.bed-mattress-fit { margin: .85rem 0; padding: .8rem .9rem; border: 1px solid #d9cfbe; border-radius: .75rem; color: #817054; background: #f5f0e6; font-size: .75rem; line-height: 1.65; }
.bed-mattress-fit[hidden], .bed-mattress-fit__action[hidden] { display: none; }
.bed-mattress-fit[data-fit=none] { padding: 0; border: 0; background: transparent; }
.bed-mattress-fit__action { display: block; padding: .5rem 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
.bed-mattress-fit__action:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: .25rem; }
.bed-mattress-fit[data-fit=unavailable], .bed-mattress-fit[data-fit=unknown] { border-color: #d9c09a; color: #8b642e; background: #f5eddf; }
.bed-mattress-fit[data-fit=exact], .bed-mattress-fit[data-fit=tolerance] { border-color: #cbd1bd; color: #68724c; background: #f0f1e8; }
.bed-mattress-extras { border-top: 1px solid #e0d6c5; padding-top: .7rem; }
.bed-mattress-extras > summary { cursor: pointer; padding: .5rem 0; color: #866c4a; font-size: .75rem; }
.bed-mattress-extras .bed-check { font-size: .72rem; }
.bed-mattress-extras .bed-control__note:empty { display: none; }
.bed-choice button:disabled { opacity: .35; cursor: default; }
.bed-actions { margin-top: .5rem; border-top: 1px solid var(--line); }
@media (max-width: 48rem) {
  .bed-studio__viewport { height: clamp(16rem, 36dvh, 22rem); }
  .bed-dimension { max-width: 8.5rem; min-width: 4.6rem; padding: .35rem .45rem; }
  .bed-dimension small { font-size: .55rem; }
  .bed-dimension strong { font-size: .65rem; }
  .bed-dimension > span { font-size: .53rem; }
  .bed-zoom button { width: 1.8rem; height: 1.8rem; }
  .bed-zoom output { font-size: .6rem; min-width: 2.6rem; }
  .bed-section summary, .bed-section input, .bed-section button, .bed-section textarea, .bed-section select { scroll-margin-top: calc(var(--header-height) + 36dvh + 5rem); }
}
[data-appearance="dark"] .bed-select select { background: var(--paper); color: var(--ink); border-color: var(--line); color-scheme: dark; }
[data-appearance="dark"] :is(.bed-select, .bed-mattress-description, .bed-mattress-specs dd, .bed-mattress-specs dt, .bed-mattress-extras > summary, .bed-dimension > span, .bed-draft) { color: var(--ink-soft); }
[data-appearance="dark"] :is(.bed-mattress-specs > div, .bed-mattress-extras) { border-color: var(--line); }
[data-appearance="dark"] .bed-mattress-fit { color: #cecece; background: #242424; border-color: #525252; }
[data-appearance="dark"] .bed-mattress-fit[data-fit=none] { background: transparent; }
[data-appearance="dark"] .bed-mattress-fit[data-fit=exact], [data-appearance="dark"] .bed-mattress-fit[data-fit=tolerance] { color: #c1d2c5; background: #27312e; border-color: #52695a; }
[data-appearance="dark"] .bed-zoom button { background: var(--paper); border-color: var(--line); color: var(--ink); }
@media (max-width: 48rem) {
  .bed-studio__stage { grid-template-columns: 6.8rem minmax(0, 1fr); }
  .bed-dimensions { gap: .3rem; padding: .5rem 0 .5rem .55rem; }
  .bed-dimension { min-width: 0; min-height: 2.75rem; }
  .bed-dimension > span { display: none; }
  .bed-dimension small { font-size: .6rem; }
  .bed-dimension strong { font-size: .7rem; }
  .bed-dimension > span { font-size: .57rem; }
  .bed-section summary, .bed-section input, .bed-section button, .bed-section textarea, .bed-section select { scroll-margin-top: calc(var(--header-height) + 36dvh + 6rem); }
}
.bed-visualize-terms { margin: 1.5rem 0 .25rem; max-width: 48rem; align-items: start; }
.bed-visualization { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.bed-visualization[hidden] { display: none; }
.bed-visualization h2 { margin: .5rem 0; font-size: clamp(1.6rem, 4vw, 2.8rem); }
.bed-visualization header p { color: var(--ink-soft); max-width: 48rem; }
.bed-visualization__image { display: block; padding: 0; margin: 1.5rem 0; width: 100%; border: 1px solid var(--line); border-radius: 1rem; background: #f4f0e9; overflow: hidden; cursor: zoom-in; }
.bed-visualization__image img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
.bed-visualization .bed-actions { margin-top: 1rem; }
.bed-visualize-terms input { flex: 0 0 auto; }
.bed-dimension[data-fit=unavailable], .bed-dimension[data-fit=unknown] { border-color: #bc935f; }
.bed-dimension[data-fit=unavailable] small, .bed-dimension[data-fit=unknown] small { color: #9c6e32; }
[data-appearance="dark"] .bed-dimension[data-fit=unavailable] small, [data-appearance="dark"] .bed-dimension[data-fit=unknown] small { color: #bdbdbd; }
.bed-dimension.is-selected { border-color: #ad9475; }
.bed-dimension.is-hovered { border-color: #a17b48; background: #f6eddd; box-shadow: 0 3px 16px #72533420; }
.bed-dimension.is-hovered small, .bed-dimension.is-hovered strong { color: #78532d; }
[data-appearance="dark"] .bed-dimension.is-hovered { background: #2a2a2a; border-color: #9a9a9a; box-shadow: 0 3px 16px #0003; }
[data-appearance="dark"] .bed-dimension.is-hovered small, [data-appearance="dark"] .bed-dimension.is-hovered strong { color: #eeeeee; }