/* static/css/desktop.css — Phone / Desktop layouts (js/layout.js sets ). Desktop = wide shell: the camera and the Session / Catalogue panes fill the window, product lists become a multi-column card grid, and every pushed layer (product, settings, Building product, catalogue view, side-by-side, photo capture) opens as a right-hand drawer over the list. Phone on a PC = the phone app in a device frame. No app logic depends on the layout: every rule here hangs off the attribute. */ /* ══════════ Desktop ══════════ */ html[data-layout="desktop"]{--dk-max:1240px;--dk-drawer:min(540px,100vw);--dk-gut:max(24px,calc((100vw - var(--dk-max))/2))} html[data-layout="desktop"] body{background:var(--canvas)} html[data-layout="desktop"] .screen{left:0;width:100%;transform:none;box-shadow:none;border-radius:0} /* camera: controls stay phone-sized in the middle of a wide feed; the stage no longer slides when a drawer opens */ html[data-layout="desktop"] .stage-top{width:100%;max-width:var(--dk-max);margin:0 auto;box-sizing:border-box;padding-left:24px;padding-right:24px} html[data-layout="desktop"] .k-dock{width:100%;max-width:560px;margin:0 auto;box-sizing:border-box} html[data-layout="desktop"] body.pushed .stage{transform:none} html[data-layout="desktop"] #card{left:0;right:0;margin-inline:auto;max-width:460px;bottom:24px} html[data-layout="desktop"] .toast{left:0;right:0;margin-inline:auto;max-width:440px} /* Session / Catalogue: bar and pane content centred in a max width */ html[data-layout="desktop"] .k-nbar{padding-left:var(--dk-gut);padding-right:var(--dk-gut)} html[data-layout="desktop"] .k-tabs{flex:0 1 440px} html[data-layout="desktop"] .k-pane{padding-left:var(--dk-gut);padding-right:var(--dk-gut);scrollbar-width:thin} html[data-layout="desktop"] .k-pane::-webkit-scrollbar{display:block;width:10px} html[data-layout="desktop"] .k-pane::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:10px;border:3px solid var(--canvas)} html[data-layout="desktop"] #paneCat>.k-srch{max-width:720px} html[data-layout="desktop"] .vs-tip{max-width:720px;box-sizing:border-box} html[data-layout="desktop"] .cv-tool{max-width:720px} html[data-layout="desktop"] .k-chips{margin-left:0;margin-right:0;padding-left:0;-webkit-mask:none;mask:none;flex-wrap:wrap;row-gap:8px} html[data-layout="desktop"] #catMore .k-btns,html[data-layout="desktop"] .vs-foot{max-width:520px;margin-left:auto;margin-right:auto} /* product lists: one card per product, as many columns as fit */ html[data-layout="desktop"] .k-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px; background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} html[data-layout="desktop"] .k-list>.k-prow,html[data-layout="desktop"] .k-list>.vs-sk{border:1px solid var(--hairline);border-radius:18px; box-shadow:var(--sh-sm);background:var(--surface);overflow:hidden;min-height:92px;padding:12px 16px 12px 12px;gap:14px} html[data-layout="desktop"] .k-list>.k-prow{cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms var(--ease-out)} html[data-layout="desktop"] .k-list>.k-prow:hover{border-color:var(--hairline-strong);box-shadow:var(--sh-md)} html[data-layout="desktop"] .k-list>.k-prow:focus-visible{outline:2px solid var(--red);outline-offset:2px} html[data-layout="desktop"] .k-list .k-thumb{--s:68px;border-radius:14px} html[data-layout="desktop"] .k-list .vs-sk-t{width:68px;height:68px;border-radius:14px} html[data-layout="desktop"] .k-list>:not(.k-prow):not(.vs-sk){grid-column:1/-1} html[data-layout="desktop"] .vs-list .k-prow[data-w="best"]:first-child{background:linear-gradient(90deg,var(--ok-wash),var(--surface) 70%)} /* drawers: every pushed layer slides in from the right at a fixed width; the list stays usable beside it */ html[data-layout="desktop"] .k-push, html[data-layout="desktop"] .push, html[data-layout="desktop"] .settings, html[data-layout="desktop"] .proview, html[data-layout="desktop"] .cap{left:auto;right:0;width:var(--dk-drawer);box-shadow:-18px 0 48px rgba(0,0,0,.18)} html[data-layout="desktop"] .k-push:not(.show),html[data-layout="desktop"] .cap:not(.show){box-shadow:none} html[data-layout="desktop"] .cap{border-left:1px solid rgba(255,255,255,.08)} /* ══════════ Phone on a PC: the phone app inside a device frame ══════════ */ @media (min-width:900px) and (hover:hover){ html[data-layout="phone"] body{background:radial-gradient(120% 90% at 50% 0%,var(--surface-soft),var(--canvas))} html[data-layout="phone"] .screen{top:50%;bottom:auto;left:50%;width:410px;height:min(880px,calc(100dvh - 48px)); transform:translate(-50%,-50%);border-radius:44px;box-shadow:0 0 0 10px #111,0 0 0 11px #2a2a2a,0 30px 80px rgba(0,0,0,.35)} } /* ══════════ layout switch (PC only: a wide pointer screen) ══════════ */ .lay-bar{display:none} @media (min-width:900px) and (hover:hover){ .lay-bar{display:block;position:fixed;left:18px;bottom:18px;z-index:100} } .lay-seg{--i:0;position:relative;display:flex;padding:3px;border-radius:12px;background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--sh-md)} .lay-ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/2);border-radius:9px;background:var(--red); transform:translateX(calc(var(--i)*100%));transition:transform 260ms var(--ease-inout)} .lay-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:104px;height:34px;border:0;background:none; font:600 13px var(--body);color:var(--mute);cursor:pointer;transition:color 180ms ease} .lay-seg button svg{display:block;flex:none} .lay-seg button.on{color:var(--on-red)} .lay-seg button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:9px} @media (prefers-reduced-motion:reduce){ .lay-ind,html[data-layout="desktop"] .k-list>.k-prow{transition:none} } /* ══════════ Desktop product detail: its own presentation ══════════ A wide sheet (the grid peeks out on the left), a gallery hero, a left column with what the product is and what it needs, and every detail section as an open card in two columns. Markup: js/detail.js shell(). */ html[data-layout="desktop"]{--dd-w:min(1120px,calc(100vw - 96px));--dd-side:340px} html[data-layout="desktop"] #detail{width:var(--dd-w)} html[data-layout="desktop"] #detail .d-bar{padding:18px 28px 6px} html[data-layout="desktop"] #detail .d-body{scrollbar-width:thin;padding-bottom:40px} html[data-layout="desktop"] #detail .d-body.has-foot{padding-bottom:112px} /* hero: gallery left, big name right */ html[data-layout="desktop"] #detail .d-hero{display:flex;align-items:flex-end;gap:32px;padding:8px 28px 30px} html[data-layout="desktop"] #detail .d-hero::after{left:28px} html[data-layout="desktop"] #detail .d-hero:has(.d-gal) .k-hero>.k-thumb{display:none} html[data-layout="desktop"] #detail .d-hero .k-hero{flex:1;min-width:0;align-items:flex-end;gap:22px} html[data-layout="desktop"] #detail .d-hero .k-thumb-xl{--s:150px;border-radius:28px} html[data-layout="desktop"] #detail .d-hero .k-meta{gap:6px;padding-bottom:6px} html[data-layout="desktop"] #detail .d-hero .k-brand{font-size:13px} html[data-layout="desktop"] #detail .d-hero .k-nm{font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.02em;max-width:22ch} html[data-layout="desktop"] #detail .d-hero .k-gt{font-size:14px} html[data-layout="desktop"] #detail .d-hero .k-hline{margin-top:8px} html[data-layout="desktop"] #detail .d-gal{display:flex;flex-direction:column;gap:10px;flex:none;width:260px} html[data-layout="desktop"] #detail .d-gm{position:relative;width:260px;height:260px;border-radius:26px;background:#fff;border:1px solid var(--hairline); box-shadow:0 14px 34px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);overflow:hidden} html[data-layout="desktop"] #detail .d-gm img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain} html[data-layout="desktop"] #detail .d-gts{display:flex;gap:8px} html[data-layout="desktop"] #detail .d-gt{position:relative;width:52px;height:52px;flex:none;padding:0;border-radius:12px;background:#fff;border:1.5px solid var(--hairline);overflow:hidden;cursor:pointer; transition:border-color 160ms ease} html[data-layout="desktop"] #detail .d-gt img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain} html[data-layout="desktop"] #detail .d-gt:hover{border-color:var(--hairline-strong)} html[data-layout="desktop"] #detail .d-gt.on{border-color:var(--red)} /* body: side column + sections in two columns (no sticky: the side column can be taller than the sheet) */ html[data-layout="desktop"] #detail .d-in{display:grid;grid-template-columns:var(--dd-side) minmax(0,1fr);gap:24px;align-items:start;padding:24px 28px 0} html[data-layout="desktop"] #detail .d-in:not(:has(.d-main)){grid-template-columns:minmax(0,560px)} html[data-layout="desktop"] #detail .d-side{display:flex;flex-direction:column;gap:12px;min-width:0} html[data-layout="desktop"] #detail .d-main{display:block;columns:2 300px;column-gap:16px;min-width:0} html[data-layout="desktop"] #detail .d-main>.k-sec{break-inside:avoid;margin-bottom:16px} html[data-layout="desktop"] #detail .d-side>.k-acc[data-k-acc=conf]{margin-bottom:0} /* every section and the confidence panel read as open cards: no accordions on a wide screen */ html[data-layout="desktop"] #detail .k-acc{grid-template-rows:1fr;transition:none} html[data-layout="desktop"] #detail .k-acc .k-inner{opacity:1;transform:none;transition:none} html[data-layout="desktop"] #detail .k-sh,html[data-layout="desktop"] #detail .k-conf{pointer-events:none;cursor:default} html[data-layout="desktop"] #detail .k-sh .k-chev,html[data-layout="desktop"] #detail .k-conf .k-chev{display:none} html[data-layout="desktop"] #detail .k-conf{padding-right:12px} html[data-layout="desktop"] #detail .k-sh{min-height:48px;border-bottom:1px solid var(--hairline);margin-bottom:10px} html[data-layout="desktop"] #detail .k-sbody{padding-top:0} /* Take photos: under the side column instead of across the whole sheet */ html[data-layout="desktop"] #detail .d-foot{left:0;right:auto;width:calc(var(--dd-side) + 56px);box-sizing:border-box;padding:16px 28px 24px}