.bed-feature {
    max-width: 1080px;
    margin: 0 auto 90px;
    color: #f5f0e8;
}
.bed-feature__intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 36px;
    padding-bottom: 30px;
}
.bed-feature__heading { max-width: 620px; }
.bed-feature__eyebrow {
    display: block;
    color: #c9a84c;
    font: 600 .68rem/1.5 Arial, sans-serif;
    letter-spacing: .21em;
    margin-bottom: 15px;
}
.bed-feature h2 {
    color: #f5f0e8;
    font: normal clamp(2.15rem, 4vw, 3.6rem)/1.12 Georgia, serif;
    margin: 0 0 15px;
}
.bed-feature__heading p {
    color: rgba(245,240,232,.72);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}
.bed-feature__spec {
    display: grid;
    gap: 9px;
    flex: 0 0 auto;
    color: rgba(245,240,232,.66);
    font: .73rem/1.4 Arial, sans-serif;
    letter-spacing: .05em;
}
.bed-feature__spec strong { color: #c9a84c; margin-right: 5px; }
.bed-viewer {
    background: #192813;
    border: 1px solid rgba(201,168,76,.28);
    padding: 14px;
}
.bed-viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(360px, 54vw, 660px);
    overflow: hidden;
    background: #243420;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.bed-viewer__stage:active { cursor: grabbing; }
.bed-viewer__stage:focus-visible, .bed-viewer button:focus-visible {
    outline: 2px solid #f3cf76;
    outline-offset: 3px;
}
.bed-viewer__stage::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--bed-photo, url('/assets/raised-bed/01-corner-private.webp'));
    background-position: center;
    background-size: cover;
    display: none;
    pointer-events: none;
}
.bed-viewer__image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
.bed-viewer__stage.is-front-fill {
    height: auto;
    aspect-ratio: 2048 / 1298;
}
.bed-viewer__stage.is-opposite-fill {
    height: auto;
    aspect-ratio: 2048 / 1140;
}
.bed-viewer__stage.is-front-fill .bed-viewer__image,
.bed-viewer__stage.is-opposite-fill .bed-viewer__image {
    object-fit: cover;
}
.bed-viewer__index {
    position: absolute;
    right: 18px;
    bottom: 16px;
    padding: 6px 10px;
    background: rgba(17,31,10,.8);
    color: #f5f0e8;
    font: .72rem/1.3 Arial, sans-serif;
    letter-spacing: .12em;
}
.bed-viewer__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 22px 8px 18px;
}
.bed-viewer__caption { display: grid; gap: 3px; }
.bed-viewer__caption > span {
    color: #f5f0e8;
    font: 1.3rem/1.2 Georgia, serif;
}
.bed-viewer__caption small {
    color: rgba(245,240,232,.58);
    font: .78rem/1.4 Arial, sans-serif;
}
.bed-viewer__arrows { display: flex; gap: 8px; }
.bed-viewer__arrows button {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(201,168,76,.6);
    border-radius: 50%;
    color: #f5f0e8;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
}
.bed-viewer__arrows button:hover:not(:disabled) { background: #c9a84c; color: #111f0a; }
.bed-viewer__arrows button:disabled { opacity: .32; cursor: default; }
.bed-viewer__views {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 8px 12px;
    scrollbar-color: #9c813f #192813;
}
.bed-viewer__views button {
    display: grid;
    gap: 2px;
    flex: 1 0 95px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(245,240,232,.18);
    color: rgba(245,240,232,.6);
    background: transparent;
    text-align: left;
    font: .68rem/1.4 Arial, sans-serif;
    letter-spacing: .1em;
    cursor: pointer;
}
.bed-viewer__views button span { font-size: .8rem; letter-spacing: 0; }
.bed-viewer__views button:hover, .bed-viewer__views button.is-active {
    border-color: #c9a84c;
    color: #f5f0e8;
    background: rgba(201,168,76,.12);
}
.bed-viewer__note {
    color: rgba(245,240,232,.52);
    font: .73rem/1.5 Arial, sans-serif;
    margin: 6px 8px 4px;
}
.bed-feature + .feed-inner { padding-top: 44px; border-top: 1px solid rgba(201,168,76,.23); }
@media (max-width: 780px) {
    .bed-feature { margin-bottom: 64px; }
    .bed-feature__intro { display: block; }
    .bed-feature__spec { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; }
    /* Match the actual image proportions so mobile never clips the bed. */
    .bed-viewer__stage,
    .bed-viewer__stage.is-front-fill,
    .bed-viewer__stage.is-opposite-fill {
        height: auto;
        min-height: 0;
        aspect-ratio: var(--bed-aspect, 1152 / 1136);
    }
    .bed-viewer__stage .bed-viewer__image,
    .bed-viewer__stage.is-bed-close .bed-viewer__image,
    .bed-viewer__stage.is-front-fill .bed-viewer__image,
    .bed-viewer__stage.is-opposite-fill .bed-viewer__image {
        object-fit: contain;
    }
}
@media (max-width: 480px) {
    .bed-viewer { padding: 8px; }
    .bed-viewer__toolbar { padding: 18px 4px 14px; }
    .bed-viewer__arrows button { width: 42px; height: 42px; }
    .bed-viewer__views { padding-left: 4px; padding-right: 4px; }
}