/* Kamerpagina (shop op kamer) - aanvullend op shop.css, tokens uit :root daar */

/* Tabbladen (Rob 21-09-2026, waren pillen): strook in creme, het actieve tabblad wit en vast aan de
   witte pagina eronder. Zelfde maatvoering als .browse-tab op Kunstwerken. */
.room-pills { display: flex; gap: 4px; padding: 14px 56px 0; background: var(--creme-light); }
.room-pill { display: inline-flex; align-items: center; border-radius: 10px 10px 0 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 14px; padding: 12px 24px; min-height: 46px; text-decoration: none; transition: background .2s, color .2s; }
.room-pill:hover { background: rgba(73,87,110,.10); color: var(--navy); }
.room-pill.active, .room-pill.active:hover { background: #fff; color: var(--navy); }

/* Bovenste blok als de home-hero (Rob 22-09-2026): tekst links en verticaal gecentreerd, foto rechts strak tegen de
   rand en over de volle hoogte. De foto houdt zijn verhouding (het werk hangt op procenten van de foto) en dekt het
   vlak; wat oversteekt valt links en rechts weg. Zelfde onderdelen als de hero: .hero-frame, .hero-art, .hero-label. */
.room-top { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; background: #fff; }
.room-top .copy { padding: 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.room-top .crumbs { font-size: 13px; color: var(--sage); margin-bottom: 28px; }
.room-top .crumbs a { color: var(--sage); }
.room-top h1 { font-family: Lora, serif; font-weight: 500; font-size: 50px; line-height: 1.08; margin: 0 0 18px; text-wrap: balance; }
.room-top .intro { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0 0 28px; max-width: 52ch; text-wrap: pretty; }
/* display: flex is nodig: in een gewoon blok gaf 100cqh hier 0 (gemeten, Chrome), waardoor de foto 8 px te laag bleef. */
.room-top .scene { position: relative; display: flex; min-height: 540px; overflow: hidden; background: var(--creme-light); container-type: size; }
.room-top .scene .hero-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100cqw, calc(100cqh * var(--w) / var(--h))); }
.room-top .scene.is-photo { container-type: normal; }
.room-top .scene.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.room-top .scene.is-artwork { display: flex; align-items: center; justify-content: center; padding: 48px; }
.room-top .scene.is-artwork img { position: static; width: auto; height: auto; max-width: 100%; max-height: 440px; object-fit: contain; box-shadow: 0 12px 26px rgba(73,87,110,.3); }
.room-top .scene .label { position: absolute; right: 20px; top: 18px; font-size: 11px; font-weight: 700; color: var(--sage); background: rgba(255,255,255,.88); padding: 4px 9px; border-radius: 4px; }

.room-colors { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-colors .lbl { font-size: 13.5px; font-weight: 700; }
.room-swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(73,87,110,.15); display: inline-block; }
.room-colors-link { font-size: 12.5px; font-weight: 700; color: var(--sage); border-bottom: 1px solid #d7ddd9; }
.room-colors .room-swatch:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy); }

.room-tips { background: var(--navy); color: #fff; padding: 52px 56px; }
.room-tips .head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.room-tips .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }
.room-tips h2 { font-family: Lora, serif; font-weight: 500; font-size: 28px; margin: 0; color: #fff; }
.room-tips .tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.room-tips .stat { font-family: Lora, serif; font-size: 36px; font-weight: 600; color: var(--creme); margin-bottom: 10px; }
.room-tips .t { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.room-tips .tip p { font-size: 14px; line-height: 1.65; color: var(--footer-text); margin: 0; }
.room-tips .mattip { border-top: 1px solid rgba(255,255,255,.15); margin-top: 36px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--footer-text); }
.room-tips .mattip strong { color: #fff; }
.room-tips .mattip a { color: var(--creme); font-weight: 800; font-size: 14px; border-bottom: 2px solid rgba(231,209,185,.4); padding-bottom: 2px; }
.room-tips .mattip a:hover { color: #fff; }

@media (max-width: 900px) {
    .room-pills { flex-wrap: nowrap; overflow-x: auto; padding: 10px 18px 0; gap: 2px; -webkit-overflow-scrolling: touch; }
    .room-pill { white-space: nowrap; flex: none; min-height: 44px; padding: 10px 16px; font-size: 13px; }
    .room-top { grid-template-columns: 1fr; }
    .room-top .copy { padding: 28px 18px 30px; }
    .room-top .crumbs { margin-bottom: 18px; }
    .room-top h1 { font-size: 30px; }
    .room-top .intro { font-size: 15px; }
    .room-swatch { width: 36px; height: 36px; }
    /* Onder elkaar: de foto in zijn eigen verhouding, niets afgesneden. */
    .room-top .scene { min-height: 0; container-type: normal; }
    .room-top .scene .hero-frame { position: relative; top: auto; left: auto; transform: none; width: 100%; }
    .room-top .scene.is-photo { aspect-ratio: 3 / 2; }
    .room-tips { padding: 26px 18px; }
    .room-tips .tips-grid { grid-template-columns: 1fr; gap: 18px; }
    .room-tips .tip { display: flex; gap: 14px; }
    .room-tips .stat { font-size: 22px; flex: none; width: 84px; margin-bottom: 0; }
}
/* Tabbladen schuiven op de telefoon opzij; de schuifbalk zelf blijft uit beeld. */
.room-pills { scrollbar-width: none; }
.room-pills::-webkit-scrollbar { display: none; }