:root {
  --shop-blue:#1f63ff;
  --shop-red:#e62837;
  --shop-gold:#d99b24;
  --shop-paper:#eeeae2;
  --shop-ink:#0d0c10;
  --shop-night:#101016;
  --shop-line:rgba(255,255,255,.18);
  --panel:min(390px,31vw);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--shop-night); }
body { margin:0; color:#f7f4ed; background:var(--shop-night); font-family:"DM Sans",sans-serif; }
button,a { font:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.site-header { position:fixed; z-index:30; top:0; left:0; width:100%; height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,3vw,54px); background:rgba(5,6,8,.94); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.site-logo img { display:block; width:clamp(150px,16vw,224px); height:auto; }
.site-header nav { display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.site-header nav a { color:#d7d5d0; font-size:11px; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.site-header nav a::before { margin-right:6px; color:#d84b56; font-size:8px; }
.site-header nav a:hover,.site-header nav a[aria-current="page"] { color:#fff; text-decoration:underline; text-decoration-color:var(--shop-red); text-underline-offset:8px; }
.menu-toggle { display:none; }

.shop-page { overflow:hidden; }
.shop-floor { position:relative; min-height:100svh; display:grid; grid-template-columns:var(--panel) minmax(0,1fr); padding-top:72px; background:#120b0d; }
.shop-scene { position:relative; grid-column:2; grid-row:1; min-width:0; min-height:calc(100svh - 72px); overflow:hidden; background:#160b0c; }
.shop-floor__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.shop-floor__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,5,6,.28),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.22),transparent 45%); pointer-events:none; }
.shop-room-overlay { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.shop-hotspot { color:#fff; text-decoration:none; }
.shop-hotspot__surface { fill:rgba(255,255,255,0); stroke:rgba(255,255,255,0); stroke-width:2; transition:fill .25s ease,stroke .25s ease,filter .25s ease; }
.shop-hotspot__label { opacity:0; pointer-events:none; transform-box:fill-box; transform-origin:center; transition:opacity .22s ease,transform .22s ease; }
.shop-hotspot__label rect { fill:rgba(9,10,15,.9); stroke:rgba(255,255,255,.72); stroke-width:1; }
.shop-hotspot__label text { fill:#fff; font:700 10px/1 "DM Sans",sans-serif; letter-spacing:.09em; }
.shop-hotspot__label text+text { fill:#f2b33f; font-size:9px; }
.shop-hotspot:hover .shop-hotspot__surface,.shop-hotspot:focus .shop-hotspot__surface { fill:rgba(229,43,55,.12); stroke:rgba(255,215,150,.85); filter:drop-shadow(0 0 12px rgba(255,73,82,.55)); }
.shop-hotspot:hover .shop-hotspot__label,.shop-hotspot:focus .shop-hotspot__label { opacity:1; transform:translateY(-5px); }
.shop-hotspot__surface--fountain { fill:rgba(238,180,71,.025); }
.shop-hotspot--fountain:hover .shop-hotspot__surface { fill:rgba(238,180,71,.1); stroke:#ffd47a; }

/* The public shop has no catalogue or checkout until commerce is ready. */
.shop-content { --shop-blue:#1266df; --shop-red:#d32130; --shop-ink:#101218; --shop-paper:#f4f5f7; color:var(--shop-ink); background:var(--shop-paper); border-top:3px solid var(--shop-blue); font:400 1rem/1.65 "DM Sans",sans-serif; }
.shop-content::before { content:""; display:block; width:38%; height:3px; margin-top:-3px; background:var(--shop-red); }
.shop-shell { width:min(1440px,calc(100% - clamp(40px,8vw,144px))); margin-inline:auto; }
.shop-content .shop-kicker { margin:0 0 20px; color:var(--shop-blue); font-size:.75rem; font-weight:700; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; }
.shop-content p { text-wrap:pretty; }
.shop-content .shop-opening { padding-block:48px 0; }
.shop-content .mq-collections { max-width:none; padding:30px 0 65px; color:var(--shop-ink); scroll-margin-top:90px; }
.shop-content .mq-collections h2 { margin:0 0 24px; line-height:1.1; letter-spacing:-.04em; }
.shop-content .mq-product { border-color:#b7bdc8; overflow-wrap:anywhere; }
.shop-content .mq-product>img { display:block; background:#e7eaf0; }
.shop-content .mq-product summary { min-height:44px; padding-block:9px; color:var(--shop-blue); font-weight:500; }
.shop-content .mq-product button,.shop-content .mq-order button { color:#fff; background:var(--shop-blue); }
.shop-content .mq-product button:disabled { opacity:1; color:#515b6b; background:#e0e4eb; }
.shop-content :is(.mq-product,.mq-order) :is(button,summary):focus-visible { outline:3px solid var(--shop-blue); outline-offset:4px; }
.shop-content .mq-order { border-color:#b7bdc8; }
.shop-content .mq-order a { color:var(--shop-blue); }
@media(max-width:620px) { .shop-content .mq-collections { padding-block:24px 40px; } }
.shop-content a:focus-visible { outline:3px solid var(--shop-blue); outline-offset:5px; }
.shop-opening { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(50px,9vw,145px); align-items:center; padding-block:clamp(48px,6vw,88px); }
.shop-opening>div { min-width:0; }
.shop-opening h1 { margin:0 0 30px; font:clamp(64px,7vw,108px)/.95 "Archivo Black",sans-serif; letter-spacing:-.06em; }
.shop-opening h1 span { color:var(--shop-red); }
.shop-opening__intro { font-size:clamp(20px,1.7vw,25px); line-height:1.45; max-width:29ch; margin:0 0 20px; }
.shop-opening__copy>p:not([class]) { margin:0 0 28px; max-width:40ch; color:#515b6b; }
.shop-editorial-link { display:flex; align-items:center; justify-content:space-between; gap:25px; max-width:390px; min-height:55px; border-top:1px solid #b7bdc8; color:var(--shop-ink); font-size:.9375rem; text-decoration:none; }
.shop-editorial-link:hover { color:var(--shop-blue); }
.shop-editorial-link>span { font-size:1.35rem; }
.shop-opening__mark { aspect-ratio:1/1.12; padding:28px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; color:#fff; background:#1266df; border-bottom:8px solid #d32130; }
.shop-opening__mark img { display:block; width:56%; height:auto; max-height:65%; object-fit:contain; }
.shop-opening__mark>span { font-size:.75rem; font-weight:600; letter-spacing:.18em; }
.shop-support { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(50px,9vw,145px); padding-block:46px 60px; border-top:1px solid var(--shop-ink); align-items:start; }
.shop-support h2 { font:500 clamp(32px,3.8vw,54px)/1.08 "DM Sans",sans-serif; letter-spacing:-.045em; max-width:15ch; margin:0; }
.shop-support h2 span { color:var(--shop-blue); }
.shop-support>div>p:not(.shop-kicker) { margin:0 0 23px; max-width:47ch; }
.shop-support__link { min-height:64px; display:flex; align-items:center; gap:14px; padding:16px 20px; color:#fff; background:#1266df; text-decoration:none; font-size:.9375rem; font-weight:500; line-height:1.4; }
.shop-support__link img { flex:none; }
.shop-support__link>span:last-child { margin-left:auto; font-size:1.3rem; }
.shop-support__link:hover { background:#0d53b9; }
.shop-support>div>p.shop-support__note { margin:14px 0 0; color:#515b6b; font-size:.75rem; }
.shop-footer { padding:26px clamp(20px,4vw,72px); color:#aeb6c6; background:#08090c; font:400 .75rem/1.6 "DM Sans",sans-serif; }
.shop-footer p { margin:0; }
.shop-footer a { color:#fff; text-underline-offset:4px; }
@media(max-width:760px) {
  .shop-shell { width:calc(100% - 40px); }
  .shop-opening { grid-template-columns:minmax(0,1fr); gap:36px; padding-block:42px; }
  .shop-opening h1 { font-size:clamp(61px,12vw,90px); }
  .shop-opening h1 br { display:none; }
  .shop-opening__mark { aspect-ratio:1.6; max-width:550px; width:100%; padding:22px; }
  .shop-opening__mark img { height:auto; width:45%; max-height:60%; }
  .shop-support { grid-template-columns:minmax(0,1fr); gap:24px; padding-block:35px 42px; }
  .shop-support h2 { max-width:20ch; font-size:clamp(32px,7vw,45px); }
  .shop-support__link { max-width:510px; }
}
@media(max-width:380px) {
  .shop-shell { width:calc(100% - 32px); }
  .shop-opening h1 { font-size:58px; }
  .shop-opening__mark { aspect-ratio:1.35; }
  .shop-support__link { padding-inline:14px; gap:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .shop-hotspot__surface,.shop-hotspot__label { transition:none; } }