/* /garden-room/ — Nook configurator. Desktop: the live 3D stage is pinned on the left, options scroll on the right with
   the price stuck to the bottom. Phones: the stage pins across the top, options below. No WebGL = a still image. */
@font-face { font-family: "Plus Jakarta Sans"; src: url(/assets/fonts/plus-jakarta-variable.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
.gr-page {
  --pg-bg: #f3f1ea; --pg-ink: #1f2a22; --f-display: "Plus Jakarta Sans", system-ui, sans-serif; --h-weight: 800;
  --green: #2f5d3a; --leaf: #6d9a4f; --muted: #66706a; --line: rgba(31, 42, 34, .14);
  --bar-bg: #1f2a22; --bar-fg: #f3f1ea; --tag: #b9d99c; --btn-bg: #2f5d3a; --btn-fg: #fff; --order-bg: #1f2a22; --order-fg: #f3f1ea;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.gr-page h1, .gr-page h2 { letter-spacing: -.035em; }
.gr-page .dm-bar__name { font: 800 1.5rem "Plus Jakarta Sans", sans-serif; letter-spacing: -.05em; }
.gr-page .dm-eyebrow, .gr-kick { color: var(--green); }
.gr-kick { margin: 0; font: 500 .72rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }

.gr-build { display: grid; grid-template-columns: minmax(0, 1fr) min(460px, 38vw); align-items: start; }
.gr-stage { position: sticky; top: 52px; height: calc(100svh - 52px); overflow: hidden; background: linear-gradient(#cfe0ec, #eef3f5 58%, #e7eee6); transition: background .8s; }
.gr-stage.is-dusk { background: linear-gradient(#10172a, #2b2f4a 48%, #5d4a55 66%, #1b2230); }
.gr-stage canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.gr-stage canvas:active { cursor: grabbing; }
.gr-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.gr-on .gr-stage canvas { display: block; }
.gr-on .gr-still { display: none; }
.gr-stage__top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem; z-index: 2; }
.gr-stage.is-dusk .gr-kick { color: #b9d99c; }
.gr-time { display: flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gr-time button { border: 0; border-radius: 999px; padding: .45rem .9rem; background: transparent; font: 600 .82rem var(--f-display); color: var(--pg-ink); cursor: pointer; }
.gr-time button[aria-pressed="true"] { background: var(--pg-ink); color: #fff; }
.gr-hint { position: absolute; left: 1.4rem; bottom: 1.2rem; margin: 0; z-index: 2; font: 500 .7rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(31, 42, 34, .6); }
.gr-stage.is-dusk .gr-hint { color: rgba(255, 255, 255, .6); }
html:not(.gr-on) .gr-hint, html:not(.gr-on) .gr-time { display: none; }

/* options */
.gr-form { padding: 2rem 1.6rem 0; background: var(--pg-bg); border-left: 1px solid var(--line); min-height: calc(100svh - 52px); }
.gr-form h1 { font-size: clamp(2.2rem, 3vw, 2.9rem); line-height: 1; margin: 0 0 .6rem; }
.gr-lead { margin: 0 0 1.6rem; color: var(--muted); font-size: .98rem; }
.gr-form fieldset { border: 0; margin: 0 0 1.4rem; padding: 0; }
.gr-form legend { padding: 0; margin-bottom: .6rem; font: 700 .78rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.gr-opts { display: grid; gap: .5rem; }
.gr-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gr-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gr-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gr-opts label { position: relative; cursor: pointer; }
.gr-opts input { position: absolute; opacity: 0; pointer-events: none; }
.gr-opts span { display: grid; gap: .15rem; height: 100%; padding: .7rem .75rem; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s, background .2s; }
.gr-opts b { font-size: .86rem; line-height: 1.2; }
.gr-opts small { font-size: .74rem; color: var(--muted); }
.gr-opts label:hover span { border-color: rgba(47, 93, 58, .45); }
.gr-opts input:checked + span { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 93, 58, .14); background: #f6faf2; }
.gr-opts input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.gr-sw { width: 100%; height: 26px; border-radius: 7px; margin-bottom: .3rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.gr-check span { padding-left: 2.2rem; }
.gr-check span::before { content: ""; position: absolute; left: .75rem; top: .8rem; width: 1rem; height: 1rem; border-radius: 5px; border: 1.5px solid var(--line); background: #fff; }
.gr-check input:checked + span::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--green); }

/* quote bar, stuck to the bottom of the options */
.gr-quote { position: sticky; bottom: 0; margin: 0 -1.6rem; padding: 1rem 1.6rem 1.1rem; background: rgba(243, 241, 234, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; }
.gr-total { display: grid; }
.gr-summary { font-size: .78rem; color: var(--muted); }
.gr-total b { font: 800 2rem/1.1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gr-total small { font-size: .74rem; color: var(--muted); }
.gr-quote .dm-note { grid-column: 1 / -1; max-width: none; background: #1f2a22; color: #f3f1ea; border: 0; }
.gr-small { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .72rem; color: var(--muted); }

.gr-why { background: #fff; }
.gr-why h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: .6rem 0 2rem; }
.gr-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gr-points li { padding: 1.5rem; border-radius: 18px; background: var(--pg-bg); }
.gr-points b { font-size: 1.1rem; } .gr-points p { margin: .5rem 0 0; color: var(--muted); }

@media (max-width: 900px) {
  .gr-build { grid-template-columns: minmax(0, 1fr); }
  .gr-stage { height: 44svh; min-height: 280px; z-index: 3; }
  .gr-form { border-left: 0; padding: 1.4rem 16px 0; }
  .gr-quote { margin: 0 -16px; padding: .7rem 16px .8rem; }
  .gr-total small, .gr-small { display: none; }
  .gr-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gr-total b { font-size: 1.7rem; }
  .gr-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-opts--3 { grid-template-columns: minmax(0, 1fr); }
  .gr-points { grid-template-columns: minmax(0, 1fr); }
  .gr-stage__top { padding: .8rem; } .gr-hint { left: .8rem; bottom: .7rem; }
}

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
.gr-page { --f-body: "Plus Jakarta Sans", system-ui, sans-serif; --f-mono: "Plus Jakarta Sans", system-ui, sans-serif; }