/* Shop Swap — shared stylesheet. Page-level layout lives in each board's markup (high-fidelity);
   this file carries fonts, tokens, interaction states and the responsive layer. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 800;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-wght-italic.woff2) format('woff2')}

:root{
  --ground:#FBFAF8;--surface:#FFFFFF;--panel:#F4F2EE;--panel-cool:#EDF1F5;
  --accent:#3F5A73;--accent-tint:#E8EDF3;--ink:#33302B;
  --hair:rgba(51,48,43,.12);--border:rgba(51,48,43,.14);
  --gut:32px;--gut2:40px;
}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
button{font-family:inherit}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:999px;font:600 13px/1 'Schibsted Grotesk',sans-serif;z-index:100}
.skip:focus{left:12px}

/* page shells: desktop board at 1180 design width, phone board below 600 */
.page{max-width:1280px;margin:0 auto}
.page>*:last-child{margin-bottom:0}
.phone{max-width:600px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.phone>*{flex:1 0 auto;display:flex;flex-direction:column}
.vp-phone{display:none}
@media (max-width:600px){
  .has-phone .vp-desk{display:none}
  .has-phone .vp-phone{display:block}
}

/* converted links/buttons */
a.btn{box-sizing:border-box;display:inline-block;text-align:center;text-decoration:none}
a.lnk{text-decoration:none;color:inherit}
a.lnk:hover{text-decoration:none}

/* hover: tint only. focus: 2px accent ring, keyboard only. */
a,button,[role=button],input,textarea,select,[tabindex]{transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease}
:focus{outline:none}
:focus-visible{outline:2px solid rgba(63,90,115,.4);outline-offset:2px;border-radius:inherit}
a.btn:hover,button:hover{filter:none}
a.btn[style*="background:#3F5A73"]:hover,button[style*="background:#3F5A73"]:hover{background:#38526a!important}
a.btn[style*="background:#33302B"]:hover,button[style*="background:#33302B"]:hover{background:#26231F!important}
a.btn[style*="background:none"]:hover,button[style*="background:none"]:hover{background:rgba(51,48,43,.04)!important}
[data-pill]{cursor:pointer;user-select:none}
[data-pill]:hover{opacity:.5}
[data-pill][data-on="1"]:hover{opacity:.9}
a.lnk:hover{opacity:.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- responsive layer ---------- */
@media (max-width:1179px){
  [data-g=c3]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  :root{--gut:24px}
  [data-g=split],[data-g=diptych]{grid-template-columns:minmax(0,1fr)!important}
  [data-g=c4]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:600px){
  :root{--gut:20px;--gut2:22px}
  [data-g=c3]{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:900px){
  [data-nav]{flex-wrap:wrap!important;row-gap:14px!important}
  [data-nav-mid]{order:3;flex:1 1 100%!important;max-width:none!important;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  [data-nav-mid]::-webkit-scrollbar{display:none}
}
@media (max-width:700px){
  [data-actions]{flex-wrap:wrap!important;flex:1 1 100%!important}
  [data-actions]>*{flex:1 1 auto}
  [data-actions]:not([data-nobreak])>a.btn,[data-actions]>button{white-space:nowrap}
  *:has(>[data-actions]){flex-wrap:wrap}
}
@media (max-width:600px){
  [data-strip]{flex-wrap:wrap!important}
  [data-strip]>*{flex:1 1 calc(50% - 8px)!important;min-width:0}
}
@media (max-width:700px){
  [style*="flex:none;max-width:260px"]{flex:1 1 100%!important;max-width:none!important;justify-content:flex-start!important}
}
@media (max-width:600px){
  [data-g=pair],[data-g=c4]{grid-template-columns:minmax(0,1fr)!important}
  [data-g=ledger]{grid-template-columns:50px minmax(0,1fr) 50px 44px!important;column-gap:10px!important}
}
@media (max-width:700px){
  *:has(>[style*="flex:none;max-width:260px"]){flex-wrap:wrap!important}
}
@media (max-width:900px){
  [data-first]{order:-1}
  [data-first] [style*="position:sticky"]{position:static!important}
}
@media (max-width:600px){
  [data-g=hero2]{grid-template-columns:minmax(0,1fr)!important}
}

/* search popovers: city list, space type, date range */
.ss-pop{position:absolute;z-index:60;background:#fff;border:1px solid rgba(51,48,43,.14);border-radius:18px;padding:8px;box-sizing:border-box;font:400 14px/1.3 'Schibsted Grotesk',sans-serif;color:#33302B;max-width:calc(100vw - 32px)}
.ss-list{min-width:260px}
.ss-opt{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 14px;border-radius:12px;cursor:pointer;font:400 15px/1.2 'Schibsted Grotesk',sans-serif}
.ss-opt small{font:400 12px/1 'Schibsted Grotesk',sans-serif;color:rgba(51,48,43,.72)}
.ss-opt:hover,.ss-opt:focus,.ss-opt[aria-selected=true]{background:#F4F2EE;outline:none}
.ss-opt:focus-visible{outline:2px solid rgba(63,90,115,.4);outline-offset:-2px}
.ss-none{padding:12px 14px;max-width:280px;font:400 13.5px/1.45 'Schibsted Grotesk',sans-serif;color:rgba(51,48,43,.8)}
.ss-dates{padding:16px 18px 14px}
.ss-cal-head{display:flex;justify-content:space-between;align-items:center;position:absolute;left:12px;right:12px;top:12px;pointer-events:none}
.ss-nav{pointer-events:auto;width:36px;height:36px;border-radius:50%;border:0;background:#F4F2EE;color:#33302B;font:400 20px/1 'Schibsted Grotesk',sans-serif;cursor:pointer}
.ss-nav:hover{background:#E8EDF3}
.ss-months{display:flex;gap:28px}
.ss-month{width:min(280px,calc(100vw - 80px))}
.ss-mt{font-family:'Instrument Serif',serif;font-size:22px;line-height:1;text-align:center;margin:6px 0 14px}
.ss-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ss-wd{font:600 10px/1 'Schibsted Grotesk',sans-serif;color:rgba(51,48,43,.7);text-align:center;padding-bottom:6px}
.ss-day{aspect-ratio:1;border:0;border-radius:10px;background:transparent;color:#33302B;font:400 13px/1 'Schibsted Grotesk',sans-serif;cursor:pointer;padding:0}
.ss-day:hover{background:#F4F2EE}
.ss-day.is-mid{background:#E8EDF3;border-radius:4px}
.ss-day.is-end{background:#3F5A73;color:#FBFAF8}
.ss-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(51,48,43,.1)}
.ss-sum{font:400 13px/1.3 'Schibsted Grotesk',sans-serif;color:rgba(51,48,43,.78);text-align:center}
.ss-clear{border:0;background:none;color:#3F5A73;font:600 12.5px/1 'Schibsted Grotesk',sans-serif;cursor:pointer;padding:8px 4px}
.ss-done{border:0;background:#3F5A73;color:#FBFAF8;border-radius:999px;padding:11px 20px;font:600 12.5px/1 'Schibsted Grotesk',sans-serif;cursor:pointer}
.ss-done:hover{background:#38526a}
.ss-in::placeholder{color:rgba(51,48,43,.72)}
a.btn{display:inline-flex;align-items:center;justify-content:center}
.ss-day.is-end:hover{background:#3F5A73}