/* Customize your space, rebuilt 5 Nov 2026 (user: "reconstruct the whole customize your space page"). One calm screen made from
   the home page's own parts: the room photograph large on the left, as Hana V's photograph; on the right the title, a line of words,
   and the choices in the home page's room-tab lettering (small Inter capitals, the chosen one underlined); the design named in the
   headline face; colour swatches; Original / With Tomita, as "One Wall Changes Space"; one outlined button. Phones: the room first,
   then the same choices. The pictures are the ready-made renders in customize/web/ (room-code.jpg). Script: inline in customize.html. */
.czs{--paper:#f3efe7;--ink:#2a1f18;--text:#3c3a34;--mute:#6b655c;--line:#302f2a;--well:#e6dfd3;--pad:clamp(28px,3.2vw,56px);
  background:var(--paper);color:var(--text)}
.czs *{box-sizing:border-box}
.czs button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.czs a{color:inherit;text-decoration:none}
.czs :focus-visible{outline:1px solid var(--line);outline-offset:4px}
@layer tomita-type{
  .czs h1.czs-h{font-family:"Cormorant Garamond","Playfair Display",Georgia,serif!important;font-weight:500!important;font-style:normal!important;
    text-transform:none!important;letter-spacing:0!important;font-size-adjust:.44!important;line-height:1.15!important}
}
.czs h1.czs-h{margin:0 0 14px;font-size:clamp(28px,2.3vw,36px)!important;color:var(--ink)}
.czs .czs-lede{margin:0;max-width:30em;font:400 16px/1.75 "PT Serif",Georgia,serif;color:var(--text)}

.czs-grid{display:grid;grid-template-columns:auto minmax(0,460px);justify-content:center;column-gap:clamp(56px,7vw,140px);align-items:center;
  padding:var(--pad) var(--tm-edge,24px) var(--pad)}
/* the room: as tall as the window allows, in the renders' own upright shape */
.czs-pic{position:relative;height:clamp(500px,calc(100svh - 104px - 2*var(--pad)),940px);aspect-ratio:2/3;overflow:hidden;background:var(--well)}
.czs-pic img{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;object-fit:cover;opacity:0;transition:opacity .7s cubic-bezier(.33,0,.2,1)}
.czs-pic img.on{opacity:1}
.czs-pic .czs-load{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.czs-pic.is-loading .czs-load{opacity:.5;animation:czsLoad 1.4s cubic-bezier(.33,0,.2,1) .35s infinite}
@keyframes czsLoad{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* the choices */
.czs-side{max-width:460px}
.czs-group{margin-top:clamp(20px,3.4vh,34px)}
.czs-group:first-of-type{margin-top:clamp(26px,4.4vh,44px)}
.czs-label{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:500 11px/15px Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.czs-label span{letter-spacing:.06em;text-transform:none}
.czs-tabs{display:flex;flex-wrap:wrap;gap:8px 20px}
.czs-tab{padding:5px 0 6px;border-bottom:1px solid transparent!important;font:500 11px/15px Inter,Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase;
  white-space:nowrap;color:var(--mute)!important;transition:color .4s ease,border-color .4s ease}
.czs-tab:hover{color:var(--ink)!important}
.czs-tab[aria-pressed="true"]{color:var(--ink)!important;border-color:var(--ink)!important}
.czs-tab[disabled]{opacity:.35;cursor:default}
.czs-design{display:flex;align-items:center;gap:12px}
.czs-name{flex:1;min-width:0}
.czs-name b{display:block;font:500 clamp(24px,1.9vw,30px)/1.2 "Cormorant Garamond",Georgia,serif;font-size-adjust:.44;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.czs-name i{display:block;margin-top:2px;font:italic 400 14px/1.4 "PT Serif",Georgia,serif;color:var(--text)}
.czs-arrow{flex:none;display:grid;place-items:center;width:40px;height:40px;color:var(--mute);transition:color .3s}
.czs-arrow:hover{color:var(--ink)}
.czs-sw{display:flex;flex-wrap:wrap;gap:10px}
.czs-sw button{width:52px;padding-bottom:6px;border-bottom:1px solid transparent;transition:border-color .3s}
.czs-sw button[aria-pressed="true"]{border-color:var(--ink)}
.czs-sw img{display:block;width:52px;height:52px;max-height:none!important;object-fit:cover;background:var(--well)}
.czs-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(26px,4.4vh,44px)}
.czs .czs-btn{display:inline-block;padding:15px 30px;border:1px solid var(--line)!important;color:var(--line)!important;font:500 11px/1 Inter,Arial,sans-serif!important;
  letter-spacing:.2em!important;text-transform:uppercase;transition:background-color .3s,color .3s}
.czs .czs-btn:is(:hover,:focus-visible,[aria-pressed="true"]):not([data-fav]){background:var(--line)!important;color:var(--paper)!important}
.czs .czs-link{padding-bottom:1px;border-bottom:1px solid var(--ink);font:inherit;color:var(--ink)}
.czs-note{margin:18px 0 0;font:italic 400 13px/1.6 "PT Serif",Georgia,serif;color:var(--mute)}
.czs-acts [data-sample-note]{flex-basis:100%;margin:0;font:400 13px/1.5 "PT Serif",Georgia,serif;color:#8a5a2b}

/* the Save heart (account.js) copies the sample button's class: drawn here as a quiet word beside it */
.czs .czs-btn[data-fav]{display:inline-flex;align-items:center;gap:8px;padding:0 0 3px!important;border:0!important;border-bottom:1px solid var(--ink)!important;
  font:400 14px/1.4 "PT Serif",Georgia,serif!important;letter-spacing:.01em!important;text-transform:none;color:var(--ink)!important;background:none!important}
.czs .czs-btn[data-fav] svg{width:14px;height:14px}

/* a short window: the same, closer together, so it all stays on one screen */
@media (min-width:900px) and (max-height:860px){
  .czs{--pad:22px}
  .czs h1.czs-h{margin-bottom:6px}
  .czs-group,.czs-group:first-of-type{margin-top:16px}
  .czs-label{margin-bottom:5px}
  .czs-sw img{width:46px;height:46px}.czs-sw button{width:46px}
  .czs-acts{margin-top:22px}
  .czs-note{margin-top:12px}
}

/* phones and narrow windows: the room first, the choices beneath */
@media (max-width:899px){
  .czs-grid{grid-template-columns:minmax(0,1fr);padding:0 0 56px}
  .czs-side{min-width:0}
  .czs-pic{width:100%;height:auto;aspect-ratio:4/5}
  .czs-side{max-width:none;padding:28px 24px 0}
  .czs-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:0 24px;scrollbar-width:none}
  .czs-tabs::-webkit-scrollbar{display:none}
  .czs-sw{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:0 24px 2px;scrollbar-width:none}
  .czs-sw::-webkit-scrollbar{display:none}
  .czs-sw button{flex:none}
  .czs .czs-btn:not([data-fav]){width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.czs-pic img{transition:none}.czs-pic.is-loading .czs-load{animation:none}}

/* 5 Nov 2026 (user: "way too messy"): the choices as a quiet list, one line each between hairlines: what it is on the left in grey,
   the choice on the right, a drop-down on a click (the phone's own picker on a phone). Colour keeps its swatches; the wall is two words. */
.czs-rows{margin-top:clamp(26px,4.4vh,44px);border-bottom:1px solid rgba(48,47,42,.16)}
.czs-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;border-top:1px solid rgba(48,47,42,.16);
  font:400 15px/1.4 "PT Serif",Georgia,serif;color:var(--mute);cursor:pointer}
.czs-row>span{flex:none}
.czs .czs-row select{-webkit-appearance:none;appearance:none;min-width:0;max-width:72%;margin:0;padding:8px 22px 8px 0;border:0;border-radius:0;
  background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%232a1f18' stroke-width='1'><path d='m1 1 4 4 4-4'/></svg>") no-repeat 100% 50%;
  font:400 16px/1.4 "PT Serif",Georgia,serif;color:var(--ink);text-align:right;text-align-last:right;text-overflow:ellipsis;cursor:pointer}
.czs .czs-row select:focus-visible{outline:1px solid var(--line);outline-offset:2px}
.czs-row-sw{cursor:default}
.czs-row-sw i{font:italic 400 14px/1.4 "PT Serif",Georgia,serif;color:var(--text)}
.czs-rows .czs-sw{padding:2px 0 16px}
.czs-wall{display:flex;gap:20px}
.czs .czs-wall button{padding:2px 0 3px;border-bottom:1px solid transparent;font:400 15px/1.4 "PT Serif",Georgia,serif;color:var(--mute);transition:color .3s,border-color .3s}
.czs .czs-wall button:hover{color:var(--ink)}
.czs .czs-wall button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.czs-acts{margin-top:clamp(22px,3.6vh,36px);gap:14px 28px}
.czs .czs-acts .czs-btn:not([data-fav]){flex:1 0 100%;text-align:center}
.czs .czs-acts .czs-link{font:400 14px/1.4 "PT Serif",Georgia,serif;padding-bottom:3px}
@media (min-width:900px) and (max-height:860px){
  .czs-row{min-height:44px}
  .czs-rows{margin-top:20px}
  .czs-acts{margin-top:18px}
}
@media (max-width:899px){.czs-rows .czs-sw{padding:2px 24px 16px}}