:root {
  --module-height: 236px;
  --columns: 4;
  --panel: #e8e7e1;
  --shoe-width: 82%;
  --wall: #c8c7c4;
  --wall-gradient: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #c8c7c4; overflow-x: hidden; }
#scene {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(92px,11vh,136px) clamp(22px,4.6vw,76px) clamp(88px,9vh,140px);
  background: var(--wall);
}
/* One continuous wall behind the entire piece. No fake box backgrounds per bay. */
#scene::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--wall-gradient);
  z-index: -2;
}
#scene::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--grain-opacity,.085);
  background: url('assets/grain.png') repeat;
  mix-blend-mode: multiply;
}
#scene[data-wall="concrete"] {
  --wall: #c7c6c3;
  --wall-gradient: linear-gradient(110deg,rgba(255,255,255,.20),rgba(255,255,255,.025) 37%,rgba(48,48,46,.045) 100%),
    radial-gradient(ellipse 70% 90% at 15% 5%,rgba(255,255,255,.26),transparent 85%);
  --grain-opacity: .095;
}
#scene[data-wall="plaster"] {
  --wall: #e9e8e2;
  --wall-gradient: radial-gradient(ellipse 70% 75% at 16% 3%,rgba(255,255,255,.48),transparent 85%);
  --grain-opacity: .047;
}
#scene[data-wall="warm-plaster"] {
  --wall: #e3dfd5;
  --wall-gradient: radial-gradient(ellipse 80% 85% at 10% 5%,rgba(255,255,255,.37),transparent 85%);
  --grain-opacity: .065;
}
#scene[data-wall="white"] {
  --wall: #f1f0ed;
  --wall-gradient: radial-gradient(ellipse 75% 85% at 10% 3%,rgba(255,255,255,.4),transparent 92%);
  --grain-opacity: .023;
}
#scene[data-wall="graphite"] {
  --wall: #515452;
  --wall-gradient: linear-gradient(110deg,rgba(255,255,255,.10),transparent 60%,rgba(0,0,0,.08));
  --grain-opacity: .075;
}
#scene[data-wall="flat"] {
  --wall-gradient: none;
  --grain-opacity: 0;
}
.shelf {
  position: relative;
  width: 100%;
  max-width: 1512px;
  margin: auto;
  isolation: isolate;
  /* Do not filter the entire cabinet: that would cast a SECOND shadow from every shoe image. */
  filter: none;
}
.bays {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(var(--columns), minmax(0,1fr));
  grid-auto-rows: var(--module-height);
}
.bay {
  position: relative;
  min-width: 0;
  /* These are physically open compartments, so the wall shows through. */
  background: transparent;
}
.architecture, .facades, .hardware {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: visible;
  user-select: none;
}
.architecture { z-index: 0; }
.facades { z-index: 2; }
.hardware { z-index: 3; }
.shoe {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--shoe-baseline,10px);
  width: var(--shoe-width);
  transform: translateX(-50%);
  pointer-events: none;
}
.shoe-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--module-height) - 40px);
  object-fit: contain;
  object-position: center bottom;
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: auto;
}
/* No CSS contact/drop shadows on footwear: photographic shadow is removed
   during off-line extraction, so every backdrop stays clean. */
.shoe::before { content: none; }
/* Cutouts are truly transparent local files. No blend modes. */
.shoe { mix-blend-mode: normal; }
@media (max-width: 1139px) {
  :root { --columns: 3; --module-height: 222px; }
  #scene { padding-inline: clamp(18px,3.6vw,45px); }
}
@media (max-width: 799px) {
  :root { --columns: 2; --module-height: 230px; }
  #scene { padding-top: 79px; }
}
@media (max-width: 549px) {
  :root { --columns: 1; --module-height: 245px; }
  #scene { padding: 69px 20px 82px; }
  .shelf { max-width: 440px; }
}


/* Only user-facing controls: USM colour, structure and wall finish. */
:root { --ui-paper: #f8f8f6; --ui-ink: #242725; --ui-muted: #858781; }
.appearance-widget { position: fixed; top: 25px; right: 26px; z-index: 100; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: var(--ui-ink); -webkit-font-smoothing: antialiased; }
.appearance-widget button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.appearance-toggle { display: flex; align-items:center; justify-content:center; gap: 10px; min-height: 42px; padding: 0 16px 0 14px; border: 1px solid rgba(29,32,30,.095); border-radius: 100px; background: rgba(250,250,248,.92); color:#252827; box-shadow: 0 3px 16px rgba(25,28,25,.065); backdrop-filter: blur(18px); font-size: 12px !important; letter-spacing: .005em; }
.appearance-toggle:hover { background: #fff; }
.appearance-toggle[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.appearance-panel { position: absolute; top: 0; right: 0; width: 328px; max-height: min(calc(100dvh - 50px), 665px); background: rgba(251,251,249,.975); border: 1px solid rgba(44,47,43,.09); border-radius: 15px; box-shadow: 0 15px 55px rgba(28,30,29,.16), 0 2px 6px rgba(28,30,29,.05); overflow: hidden; backdrop-filter: blur(30px); }
.appearance-panel[hidden], .custom-row[hidden] { display: none !important; }
.panel-head { height: 55px; padding: 0 17px 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(24,28,24,.075); font-size: 13px; font-weight: 600; letter-spacing: -.012em; }
.panel-close { display: grid; place-items:center; width: 32px; height: 32px; margin-right: -7px; border:0; background:transparent; border-radius:50%; color:#595c56; }
.panel-close:hover { background:#eceeeb; }
.panel-scroll { max-height: min(calc(100dvh - 110px),610px); overflow: auto; padding: 21px 21px 25px; scrollbar-width: thin; }
.control-group { margin:0; }
.group-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 17px; gap: 12px; }
.group-line h2 { margin:0; font-size: 12px; font-weight: 650; letter-spacing:.005em; }
.group-line output { display:block; max-width: 150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; color:#858880; }
.color-grid { display:grid; grid-template-columns: repeat(7,minmax(0,1fr)); column-gap: 7px; row-gap: 12px; }
.color-choice { position:relative; display:grid; place-items:center; padding:0; width: 29px; height:29px; border:0; background:transparent; border-radius:50%; }
.color-choice::before { content:""; position:absolute; inset:-3px; border: 1.5px solid transparent; border-radius:50%; }
.color-choice[aria-pressed="true"]::before { border-color:#555b56; }
.color-choice:hover::before { border-color:rgba(40,45,39,.46); }
.color-surface { display:block; width:24px; height:24px; border-radius:50%; border:1px solid rgba(0,0,0,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.16); }
.structure-control { display:grid; grid-template-columns: 1fr 1fr; gap:3px; padding:3px; background:#eceeea; border:1px solid rgba(31,35,31,.035); border-radius:9px; margin-top: 25px; }
.structure-control button { min-height: 34px; border:0; border-radius:7px; background:transparent; color:#777b73; font-size: 12px !important; }
.structure-control button[aria-pressed="true"] { background:#fff; color:#292d29; box-shadow: 0 1px 3px rgba(22,25,22,.11); }
.group-divider { height:1px; background:rgba(35,40,34,.075); margin:24px 0; }
.finish-grid { display:grid; grid-template-columns: repeat(3,1fr); column-gap:10px; row-gap:17px; }
.finish-choice { position:relative; display:flex; flex-direction:column; gap:7px; min-width:0; padding:0; border:0; background:transparent; text-align:center; color:#777b74; font-size:10.5px !important; }
.finish-thumb { position:relative; display:block; height:45px; width:100%; border-radius:5px; border:1px solid rgba(42,44,42,.12); overflow:hidden; background-color:var(--chip-bg); background-image:var(--chip-overlay); }
.finish-choice[aria-pressed="true"] .finish-thumb { outline: 2px solid #414944; outline-offset:2px; }
.finish-choice[aria-pressed="true"] { color:#262a27; }
.finish-choice:hover { color:#272c28; }
.finish-thumb.concrete { --chip-bg:#c7c6c3; --chip-overlay:linear-gradient(115deg,rgba(255,255,255,.16),transparent 48%,rgba(57,58,55,.085)),radial-gradient(ellipse at 15% 35%,rgba(255,255,255,.13),transparent 72%); }
.finish-thumb.plaster { --chip-bg:#e9e8e2; --chip-overlay:linear-gradient(135deg,rgba(255,255,255,.45),transparent 75%); }
.finish-thumb.warm-plaster { --chip-bg:#e3dfd5; --chip-overlay:linear-gradient(135deg,rgba(255,255,255,.31),transparent 75%); }
.finish-thumb.white { --chip-bg:#f1f0ed; --chip-overlay:none; }
.finish-thumb.graphite { --chip-bg:#515452; --chip-overlay:linear-gradient(140deg,rgba(255,255,255,.13),transparent); }
.finish-thumb.flat { --chip-bg:var(--flat-chip,#e6e3dc); --chip-overlay:none; }
.custom-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; font-size:11px; color:#5c605a; }
.custom-row input { width:41px; height:27px; border:1px solid rgba(0,0,0,.12); background:#fff; padding:2px; border-radius:5px; cursor:pointer; }
.appearance-widget :focus-visible { outline:2px solid #286a53 !important; outline-offset:3px; }
@media(max-width:600px) {
  .appearance-widget { top:max(14px,env(safe-area-inset-top)); right:14px; }
  .appearance-panel { width:min(328px,calc(100vw - 28px)); max-height:calc(100dvh - 28px - env(safe-area-inset-top)); }
  .panel-scroll { max-height:calc(100dvh - 104px - env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: no-preference) {
  .appearance-panel { animation:panel-in .18s cubic-bezier(.2,.8,.2,1); }
  @keyframes panel-in { from { opacity:0; transform:translateY(-5px); } to {opacity:1; transform:none;} }
}

/* Public interaction stays quiet; the appearance controls exist only in /admin. */
[hidden] { display:none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.shuffle-button { position:fixed;top:25px;right:26px;z-index:110;width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid rgba(29,32,30,.095);border-radius:50%;background:rgba(250,250,248,.92);color:#343b36;backdrop-filter:blur(18px);cursor:pointer;box-shadow:0 3px 16px rgba(25,28,25,.04); }
.shuffle-button:hover { background:#fff; }
.shuffle-button:focus-visible,.bay:focus-visible { outline:2px solid #286a53;outline-offset:3px; }
.bay[data-sku] { cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; }
.bay.drop-target::after { content:'';position:absolute;inset:14px;border:1px dashed rgba(36,67,49,.65);border-radius:5px;pointer-events:none; }
.drag-origin .shoe-art { opacity:.2; }
.drag-ghost { position:fixed;z-index:300;pointer-events:none;object-fit:contain;object-position:center bottom;will-change:transform;opacity:.95; }
body.reordering { cursor:grabbing;user-select:none;-webkit-user-select:none; }
.appearance-widget { right:82px; }
.appearance-panel { top:54px;right:-56px;display:flex;flex-direction:column;max-height:calc(100dvh - 104px); }
.panel-scroll { min-height:0;max-height:calc(100dvh - 300px);flex:1; }
.admin-footer { flex:none;padding:14px 21px 18px;border-top:1px solid rgba(24,28,24,.075);background:rgba(251,251,249,.98); }
.admin-footer p { margin:0 0 10px;font-size:11px;line-height:1.5;color:#687068; }
#save-settings { width:100%;padding:11px 12px;border:0;border-radius:8px;background:#293f32;color:white;font-size:12px;font-weight:500; }
#save-settings:disabled { opacity:.4;cursor:default; }
.admin-footer a { display:block;text-align:center;margin-top:12px;font-size:11px;color:#697267;text-decoration:none; }
.order-label { display:block;font-size:12px;font-weight:600;margin-bottom:12px; }
#default-order { width:100%;border:1px solid #d8dcd6;border-radius:7px;background:white;padding:9px;font:inherit;font-size:12px;color:#343b36; }
.admin-hint { margin:12px 0 0;font-size:11px;line-height:1.6;color:#7c837a; }
.admin-access { position:fixed;z-index:100;top:82px;right:26px;width:min(310px,calc(100vw - 40px));background:#fafaf7;border:1px solid #ddd;border-radius:12px;padding:20px;font:13px/1.6 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:#343b36;box-shadow:0 8px 35px #0001; }
.admin-access p { margin:0 0 14px; }
.admin-access a { color:#2b533a;font-weight:500; }
@media(max-width:600px) {
 .shuffle-button { top:max(14px,env(safe-area-inset-top));right:14px; }
 .appearance-widget { right:68px; }
 .appearance-panel { right:-54px;max-height:calc(100dvh - 92px - env(safe-area-inset-top)); }
 .panel-scroll { max-height:calc(100dvh - 292px - env(safe-area-inset-top)); }
 .admin-access { right:14px; }
}

/* Shared glass settings: five visitor presets, complete owner controls in /admin. */
.appearance-widget { top:24px;right:24px; }
.appearance-toggle { width:44px;height:44px;min-height:44px;padding:0;gap:0;background:rgba(249,250,246,.24);border:1px solid rgba(255,255,255,.42);box-shadow:0 3px 20px rgba(15,25,18,.07),inset 0 1px 0 rgba(255,255,255,.32);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%); }
.appearance-toggle:hover,.appearance-toggle[aria-expanded="true"] { opacity:1;pointer-events:auto;background:rgba(249,250,246,.42); }
.appearance-panel { top:56px;right:0;background:rgba(247,249,244,.57);border:1px solid rgba(255,255,255,.5);border-radius:18px;box-shadow:0 12px 45px rgba(18,31,22,.12),inset 0 1px 0 rgba(255,255,255,.34);backdrop-filter:blur(32px) saturate(135%);-webkit-backdrop-filter:blur(32px) saturate(135%); }
.panel-head { height:46px;min-height:46px;border-bottom-color:rgba(255,255,255,.25);font-size:12px; }
.panel-scroll { padding:19px 20px 21px; }
.group-divider { margin:19px 0;background:rgba(35,50,38,.10); }
.admin-footer { background:rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.26); }
.structure-control { background:rgba(235,241,231,.33); }
.structure-control button[aria-pressed="true"] { background:rgba(255,255,255,.65); }
#default-order { background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.45); }
.order-shuffle { width:100%;min-height:42px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.37);border-radius:10px;background:rgba(255,255,255,.24);color:#2e3d32;font-size:12px!important; }
.order-shuffle:hover { background:rgba(255,255,255,.47); }
.is-public .appearance-panel { width:286px; }
.is-public .panel-scroll { max-height:calc(100dvh - 180px); }
.is-public .color-grid { grid-template-columns:repeat(5,1fr);gap:6px; }
.is-public .color-choice { width:44px;height:44px; }
.is-public .color-choice::before { inset:2px; }
.is-public .color-surface { width:27px;height:27px; }
.is-public .finish-grid { grid-template-columns:repeat(5,1fr);gap:6px; }
.is-public .finish-choice { align-items:center;justify-content:center;min-height:44px;gap:0; }
.is-public .finish-thumb { width:28px;height:28px;border-radius:50%; }
.is-public .finish-choice>span:last-child { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
.is-public .group-line { margin-bottom:9px; }
.is-public .group-line output { font-size:10px;color:#626e63; }
@media(max-width:600px){
 .appearance-widget { top:max(14px,env(safe-area-inset-top));right:14px; }
 .appearance-panel { right:0; }
 .is-public .appearance-panel { width:min(286px,calc(100vw - 28px)); }
}
/* One glass surface expands from its circular trigger. */
.appearance-widget {width:44px;height:44px;border-radius:50%;background:rgba(247,249,244,.57);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 40px #12201615;backdrop-filter:blur(32px) saturate(135%);-webkit-backdrop-filter:blur(32px) saturate(135%);overflow:hidden;}
.appearance-widget.expanded {width:328px;height:auto;border-radius:22px;}
.appearance-widget .appearance-toggle {position:absolute;right:0;top:0;border:0;box-shadow:none;background:transparent;backdrop-filter:none;z-index:3;}
.appearance-widget.expanded .appearance-toggle svg {display:none;}
.appearance-widget.expanded .appearance-toggle::after {content:'×';font:25px/1 sans-serif;font-weight:300;}
.appearance-widget .appearance-panel {position:relative;top:0;right:0;width:100%;max-height:calc(100dvh - 50px);border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;}
.appearance-widget .panel-head {height:50px;padding-right:50px;flex-shrink:0;}
#appearance-close {display:none;}
.is-public .color-grid {grid-template-columns:repeat(5,1fr);}
.is-public .finish-grid {grid-template-columns:repeat(4,1fr);gap:8px;}
.is-public .finish-choice {height:52px;min-width:0;border-radius:10px;}
.is-public .finish-choice>span:last-child {display:none;}
.is-public .finish-thumb {width:100%;height:42px;border-radius:8px;}
.finish-thumb.exposed-concrete {background:url('assets/textures/exposed-concrete.jpg') center/120px;}
.finish-thumb.terrazzo {background:url('assets/textures/terrazzo.jpg') center/110px;}
.finish-thumb.tile {background:url('assets/textures/ceramic-tiles.jpg') center/110px;}
#scene[data-wall="exposed-concrete"] {background:#aaa url('assets/textures/exposed-concrete.jpg') repeat;background-size:720px;--wall-gradient:linear-gradient(100deg,#ffffff20,#00000008);--grain-opacity:0;}
#scene[data-wall="terrazzo"] {background:#bcb6ac url('assets/textures/terrazzo.jpg') repeat;background-size:620px;--wall-gradient:none;--grain-opacity:0;}
#scene[data-wall="tile"] {background:#d4d0c7 url('assets/textures/ceramic-tiles.jpg') repeat;background-size:580px;--wall-gradient:none;--grain-opacity:0;}
.structure-control {margin-top:14px;}
.card-open {overflow:hidden;}
.shoe-dialog,.catalog-dialog {font-family:Arial,sans-serif;color:#29302c;border:1px solid #ffffffb0;background:#eef0e7de;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);padding:0;box-shadow:0 25px 100px #17241c30;}
dialog::backdrop {background:#14201a45;backdrop-filter:blur(7px);}
.shoe-dialog {width:min(420px,calc(100vw - 32px));border-radius:24px;max-height:calc(100dvh - 32px);overflow:auto;}
.collectible header {display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0;}
.brand-logo {width:76px;height:32px;object-fit:contain;object-position:left center;}
.card-close,.catalog-close {border:0;background:transparent;color:inherit;width:44px;height:44px;border-radius:50%;font-size:28px;cursor:pointer;}
.card-photo {height:235px;display:grid;place-items:center;padding:22px;}
.card-photo img {width:100%;height:100%;object-fit:contain;}
.card-copy {padding:10px 28px 28px;}
.card-brand,.eyebrow {font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#5c665c;}
.card-copy h2 {font-size:26px;line-height:1.14;font-weight:500;letter-spacing:-.04em;margin:12px 0;}
.card-color {font-size:12px;color:#626a60;line-height:1.6;}
.card-copy dl {display:flex;justify-content:space-between;border-top:1px solid #42534425;padding-top:20px;margin-top:28px;gap:20px;}
.card-copy dt {font-size:10px;color:#687266;margin-bottom:8px;}
.card-copy dd {font-size:12px;margin:0;}
::view-transition-group(shoe-photo) {animation-duration:380ms;animation-timing-function:cubic-bezier(.22,1,.36,1);}
::view-transition-old(shoe-photo),::view-transition-new(shoe-photo) {object-fit:contain;height:100%;}
.catalog-dialog {width:min(1000px,calc(100vw - 32px));height:min(800px,calc(100dvh - 32px));border-radius:22px;padding:24px;}
.catalog-dialog>header {display:flex;justify-content:space-between;align-items:center;}
.catalog-dialog h2 {margin:5px 0 20px;font-size:28px;font-weight:500;letter-spacing:-.04em;}
.catalog-search {display:flex;align-items:center;gap:20px;font-size:12px;}
.catalog-search input {flex:1;}
.catalog-dialog input,.catalog-dialog textarea {font:inherit;border:1px solid #53634930;background:#ffffff65;border-radius:8px;padding:10px;min-width:0;color:inherit;}
.catalog-layout {display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.3fr);gap:28px;margin-top:24px;}
.catalog-list {display:flex;flex-direction:column;gap:5px;}
.catalog-row {text-align:left;display:flex;align-items:center;gap:14px;background:transparent;border:1px solid transparent;border-radius:12px;padding:10px;cursor:pointer;color:inherit;}
.catalog-row.selected {background:#ffffff70;border-color:#ffffffa0;}
.catalog-row img {width:72px;height:48px;object-fit:contain;}
.catalog-row span {font-size:12px;line-height:1.4;}
.catalog-row small {display:block;font-size:10px;margin-top:6px;color:#62705e;}
.catalog-form {display:grid;gap:15px;align-content:start;}
.catalog-form h3 {font-size:18px;margin:0 0 8px;font-weight:500;}
.catalog-form label {display:grid;gap:7px;font-size:11px;}
.catalog-form textarea {min-height:90px;resize:vertical;}
.catalog-form .visibility-label {display:flex;align-items:center;gap:10px;}
.catalog-save {border:0;border-radius:10px;background:#28392d;color:#fff;padding:13px;cursor:pointer;}
.catalog-save:disabled {opacity:.4;cursor:default;}
.catalog-status {font-size:12px;line-height:1.5;min-height:18px;}
.catalog-form a {color:inherit;font-size:11px;}
@media(max-width:600px){.appearance-widget.expanded {width:min(328px,calc(100vw - 28px));}.appearance-widget .appearance-panel {max-height:calc(100dvh - 30px);}.catalog-dialog {padding:18px;}.catalog-layout {grid-template-columns:1fr;gap:24px;}.catalog-list {flex-direction:row;overflow:auto;}.catalog-row {min-width:185px;}.catalog-row img {width:50px;}}
@media(prefers-reduced-motion:reduce){::view-transition-group(shoe-photo){animation:none;}}
.shoe-art {pointer-events:auto;cursor:grab;}
.reordering .shoe-art {cursor:grabbing;}

.shelf {max-width:1900px;}

#scene {padding-top:clamp(64px,8vh,100px);padding-bottom:clamp(40px,6vh,76px);}
@media(max-width:549px){#scene {padding-top:69px;padding-bottom:46px;}}

#scene {display:grid;align-items:center;min-height:100dvh;padding-block:clamp(60px,8vh,96px);}
@media(max-width:549px){#scene {padding-block:69px;}}

/* Card and photograph animate; the room stays sharp and unchanged. */
.shoe-dialog {view-transition-name:card-shell;backdrop-filter:none;-webkit-backdrop-filter:none;background:#eef0e7;}
.shoe-dialog::backdrop {background:transparent;backdrop-filter:none;}
::view-transition-group(root),::view-transition-group(card-shell),::view-transition-group(shoe-photo) {animation-duration:360ms;animation-timing-function:cubic-bezier(.22,.75,.25,1);}
::view-transition-old(root) {display:none;}
::view-transition-new(root) {animation:none;}
html[data-card-motion="opening"]::view-transition-new(card-shell) {animation:card-soft-in 220ms cubic-bezier(.22,.75,.25,1) both;}
html[data-card-motion="closing"]::view-transition-old(card-shell) {animation:card-soft-out 220ms cubic-bezier(.22,.75,.25,1) both;}
::view-transition-old(shoe-photo),::view-transition-new(shoe-photo) {animation-duration:360ms;animation-timing-function:cubic-bezier(.22,.75,.25,1);}
::view-transition-group(root) {z-index:0;}
::view-transition-group(card-shell) {z-index:2;}
::view-transition-group(shoe-photo) {z-index:3;}
@keyframes card-soft-in {from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes card-soft-out {from{opacity:1;transform:none;}to{opacity:0;transform:translateY(8px) scale(.985);}}
@media(prefers-reduced-motion:reduce){::view-transition-group(root),::view-transition-group(card-shell),::view-transition-group(shoe-photo){animation:none;}}

/* A separate projected ground plane meets the rear glide line, not the viewport. */
.room-floor {display:none;position:absolute;top:var(--room-floor-y,100%);bottom:0;left:0;right:0;overflow:hidden;pointer-events:none;z-index:0;background:var(--floor-color,#bdbdb5);border-top:1px solid rgba(30,34,30,.13);}
#scene:is([data-wall="exposed-concrete"],[data-wall="terrazzo"],[data-wall="tile"]) .room-floor {display:block;}
#scene:has(.room-floor) .shelf {z-index:1;}
.floor-plane {position:absolute;inset:0 0 auto;height:400%;background-image:linear-gradient(#00000010,#ffffff05 40%),var(--floor-texture);background-size:auto,var(--floor-scale,620px);background-repeat:repeat;transform-origin:center top;transform:perspective(var(--floor-perspective,1200px)) rotateX(64deg);filter:brightness(.94) saturate(.85);}
.room-floor::after {content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(22,27,22,.10),transparent 30px,rgba(255,255,255,.025));}
.floor-shadows {position:absolute;top:0;left:0;overflow:visible;}
#scene[data-wall="exposed-concrete"] {--floor-color:#b6b4af;--floor-texture:url('assets/textures/exposed-concrete.jpg');--floor-scale:720px;}
#scene[data-wall="terrazzo"] {--floor-color:#c4c5c1;--floor-texture:url('assets/textures/terrazzo.jpg');--floor-scale:620px;}
#scene[data-wall="tile"] {--floor-color:#d5d2ca;--floor-texture:url('assets/textures/ceramic-tiles.jpg');--floor-scale:580px;}