/* (c) 2026 The Lowry Group at Coldwell Banker Realty. All rights reserved. Proprietary — unauthorized copying, reuse, or redistribution prohibited. */
/* ==========================================================================
   THE LOWRY GROUP — DESIGN STUDIO (public listing feature)
   Paired with js/designstudio.js. A listing shows the "Reimagine This Home"
   section only if its slug is present in data/designstudio.json.
   ========================================================================== */

#designStudioSection[hidden] { display: none; }

.ds-room { margin-top: var(--space-xl); }
.ds-room:first-child { margin-top: var(--space-lg); }
.ds-room-head { max-width: 1180px; margin: 0 auto var(--space-md); padding: 0 var(--space-md); }
.ds-room-head .k { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; margin: 0 0 6px; }
.ds-room-head h3 { font-family: var(--font-display), serif; color: var(--ivory); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }

.ds-mount { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-md); }
.ds-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0c0c0b;
  border: 1px solid rgba(201,164,92,.3); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.ds-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.ds-img.is-on { opacity: 1; }
.ds-tag { position: absolute; left: 16px; top: 14px; z-index: 4; background: rgba(12,11,10,.72); backdrop-filter: blur(6px);
  border: 1px solid var(--gold-dim); border-radius: 20px; padding: 4px 12px; color: var(--gold);
  text-transform: uppercase; letter-spacing: .14em; font-size: .56rem; }
.ds-badge { position: absolute; left: 16px; bottom: 16px; z-index: 4; background: rgba(12,11,10,.82); backdrop-filter: blur(6px);
  border: 1px solid var(--gold-dim); border-radius: 30px; padding: 8px 18px; }
.ds-badge .k { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .54rem; }
.ds-badge .v { font-family: var(--font-display), serif; color: var(--ivory); font-size: 1.05rem; }
.ds-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(12,11,10,.6); border: 1px solid var(--gold-dim); color: var(--gold); font-size: 1.5rem; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s; }
.ds-nav:hover { background: rgba(20,18,14,.9); }
.ds-prev { left: 14px; } .ds-next { right: 14px; }
.ds-count { position: absolute; right: 16px; bottom: 16px; z-index: 4; color: #e9e2d2; font-size: .76rem; letter-spacing: .08em;
  background: rgba(12,11,10,.7); border-radius: 20px; padding: 4px 12px; }

.ds-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.ds-sw { position: relative; width: 112px; height: 64px; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s, transform .2s; }
.ds-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-sw:hover { opacity: 1; transform: translateY(-2px); }
.ds-sw.is-active { opacity: 1; border-color: var(--gold); }
.ds-sw .n { position: absolute; inset: auto 0 0 0; font-size: .54rem; text-align: center; letter-spacing: .06em;
  text-transform: uppercase; color: #f2ead9; background: linear-gradient(transparent, rgba(0,0,0,.82)); padding: 8px 2px 3px; }
@media (max-width: 620px) { .ds-sw { width: 84px; height: 50px; } }

/* Before / After compare */
.ds-compare-block { max-width: 1020px; margin: var(--space-xl) auto 0; padding: 0 var(--space-md); text-align: center; }
.ds-compare-block .k { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; margin: 0 0 8px; }
.ds-compare-block h3 { font-family: var(--font-display), serif; color: var(--ivory); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 6px; }
.ds-compare-block .sub { color: var(--text-on-black-muted); font-size: .95rem; margin: 0 auto var(--space-md); max-width: 560px; }
.ds-compare { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; user-select: none;
  border: 1px solid rgba(201,164,92,.3); box-shadow: 0 30px 70px rgba(0,0,0,.5); touch-action: none; }
.ds-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ds-compare .ds-after { clip-path: inset(0 0 0 50%); }
.ds-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold); z-index: 3; transform: translateX(-1px); }
.ds-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(12,11,10,.75); border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: 1rem; cursor: ew-resize; backdrop-filter: blur(4px); }
.ds-clabel { position: absolute; top: 14px; z-index: 3; font-family: var(--font-display), serif; font-size: .8rem; color: var(--ivory);
  background: rgba(12,11,10,.72); border: 1px solid var(--gold-dim); border-radius: 20px; padding: 4px 12px; }
.ds-clabel.l { left: 14px; } .ds-clabel.r { right: 14px; }

.ds-disclaimer { max-width: 900px; margin: var(--space-lg) auto 0; padding: 0 var(--space-md); text-align: center;
  color: var(--text-on-black-muted); font-size: .78rem; line-height: 1.6; }