:root{
  --bg:     #e8e3d3;
  --paper:  #f6efe0;
  --ink:    #1f1f1d;
  --mute:   #6b6860;
  --rule:   rgba(var(--ink-rgb),.13);
  --rulehv: rgba(var(--ink-rgb),.8);
  --accent: #c44a2a;
  --ease:   cubic-bezier(.65,.02,.2,1);

  --nav-h:     49px;
  --switch-h:  64px;
  --content-h: calc(100vh - var(--nav-h) - var(--switch-h));
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}

/* ─── NAV ──────────────────────────────────── */
.sh-nav{
  height:var(--nav-h);
  display:flex;align-items:center;
  padding:0 clamp(20px,2.5vw,48px);
  border-bottom:1px solid var(--rulehv);
  flex-shrink:0;
}
.sh-logo{
  font-weight:900;font-size:clamp(15px,1.3vw,20px);
  letter-spacing:-.03em;
}
.sh-logo span{color:var(--accent)}
.sh-nav-links{
  display:flex;gap:clamp(14px,1.8vw,32px);
  margin-left:clamp(20px,2.5vw,44px);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.sh-nav-links a{opacity:.35;transition:opacity .2s}
.sh-nav-links a:hover,.sh-nav-links a.is-active{opacity:1}
.nav-right{display:flex;align-items:center;gap:24px;margin-left:auto}
.sh-nav-cta{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  opacity:.4;transition:opacity .2s;
}
.sh-nav-cta:hover{opacity:1}

/* ─── SWITCHER ─────────────────────────────── */
.sh-switcher{
  height:var(--switch-h);
  display:grid;
  grid-template-columns:clamp(120px,18vw,260px) 1fr;
  border-bottom:1px solid var(--rulehv);
  flex-shrink:0;
}
.sh-switcher-left{
  display:flex;align-items:center;
  padding:0 clamp(20px,2.5vw,44px);
  border-right:1px solid var(--rulehv);
}
.sh-active-label{
  font-size:clamp(18px,2vw,28px);font-weight:900;
  letter-spacing:-.04em;text-transform:uppercase;
  transition:opacity .2s;
}
.sh-switcher-tabs{display:flex}
.sh-tab{
  flex:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,2vw,32px);
  background:none;border:none;border-right:1px solid var(--rulehv);
  cursor:pointer;font-family:inherit;color:var(--mute);
  transition:color .18s,background .18s;
  position:relative;
}
.sh-tab:last-child{border-right:0}
.sh-tab:hover{color:var(--ink);background:rgba(var(--ink-rgb),.04)}
.sh-tab.is-active{
  color:var(--ink);background:var(--paper);
}
.sh-tab.is-active::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:2px;background:var(--ink);
}
.sh-tab-name{
  font-size:clamp(11px,.9vw,13px);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.sh-tab-count{
  font-size:10px;font-weight:500;letter-spacing:.04em;
  opacity:.45;
}

/* ─── SECTIONS ─────────────────────────────── */
.sh-section{
  display:none;
  height:var(--content-h);
  overflow:hidden;
}
.sh-section.is-active{display:flex}

/* ─── GRID ─────────────────────────────────── */
.sh-grid{
  display:grid;
  width:100%;
  height:100%;
}

/* Furniture: 4-col, hero spans 2×2 left, 2 regulars right, wide at bottom */
.sh-grid--furniture{
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr;
}

/* Objects: 3-col, 2-row — tape dispenser tall left, 2×2 right */
.sh-grid--objects{
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:1fr 1fr;
}

/* Clothing: 4-col, 2-row — hero top-left, four regulars right */
.sh-grid--clothing{
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr;
}
.sh-grid--clothing .sh-img img{
  object-position:top center;
}

/* ─── CARDS ─────────────────────────────────── */
.sh-card{
  display:flex;flex-direction:column;
  border-right:1px solid var(--rule);
  overflow:hidden;
  transition:background .22s;
  height:100%;
}
.sh-card:last-child{border-right:0}
.sh-card:hover{background:var(--paper)}

.sh-img{
  flex:1;overflow:hidden;
  background:var(--paper);
  min-height:0;
}
.sh-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.12) contrast(1.02);
  transition:transform .75s var(--ease), filter .4s;
}
.sh-card:hover .sh-img img{
  transform:scale(1.04);
  filter:grayscale(0) contrast(1);
}

.sh-info{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px clamp(12px,1.2vw,18px);
  border-top:1px solid var(--rule);
  gap:10px;
  flex-shrink:0;
  height:46px;
}
.sh-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.sh-name{
  font-size:clamp(10px,.82vw,12px);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
.sh-maker{
  font-size:9px;color:var(--mute);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sh-price{
  font-size:clamp(10px,.82vw,12px);font-weight:700;
  flex-shrink:0;letter-spacing:.01em;
}

/* hero: 2 cols wide, 2 rows tall */
.sh-card--hero{
  grid-column:span 2;
  grid-row:span 2;
}
/* wide: 2 cols */
.sh-card--wide{grid-column:span 2}
/* tall: 2 rows */
.sh-card--tall{grid-row:span 2}

/* ─── COMING SOON ──────────────────────────── */
.sh-coming{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  gap:12px;
  border-top:0;
}
.sh-coming-num{
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);opacity:.4;
}
.sh-coming-title{
  font-size:clamp(28px,4vw,56px);font-weight:900;
  letter-spacing:-.04em;text-transform:uppercase;line-height:1;
}
.sh-coming-sub{
  font-size:12px;color:var(--mute);text-align:center;line-height:1.6;
  margin-top:4px;
}

/* ── save-to-board button + popover ── */
.sh-img{position:relative}
.sh-save-btn{
  position:absolute;top:10px;right:10px;z-index:3;
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:6px 12px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(246,239,224,.92);color:#1f1f1d;
  opacity:0;transform:translateY(-4px);
  transition:opacity .25s,transform .3s var(--ease),background .2s,color .2s;
}
.sh-card:hover .sh-save-btn{opacity:1;transform:translateY(0)}
.sh-save-btn:hover{background:var(--accent);color:#fff}
.sh-save-pop{
  position:fixed;z-index:210;width:230px;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 14px 40px rgba(31,31,29,.18);
  padding:6px;
}
.sh-save-pop-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 10px;font-size:12px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
.sh-save-pop-row:hover{background:rgba(var(--ink-rgb),.06)}
.sh-save-pop-row.is-saved .sh-save-pop-state{color:var(--accent)}
.sh-save-pop-state{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--mute)}
.sh-save-pop-new{
  display:flex;gap:6px;padding:8px 10px 6px;margin-top:4px;
  border-top:1px solid rgba(var(--ink-rgb),.12);
}
.sh-save-pop-new input{
  flex:1;min-width:0;font-family:inherit;font-size:11.5px;
  border:1px solid rgba(var(--ink-rgb),.25);background:var(--paper);color:var(--ink);
  padding:6px 8px;outline:none;
}
.sh-save-pop-new button{
  font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:0;background:var(--ink);color:var(--paper);padding:0 10px;cursor:pointer;
}
.sh-save-pop-msg{padding:10px 10px 4px;font-size:11.5px;color:var(--mute)}
.sh-save-pop-go{
  display:block;padding:8px 10px 10px;font-size:11px;font-weight:700;color:var(--accent);
}

/* ══════════════ MOBILE (≤699px) ══════════════ */
@media (max-width:699px){
  /* the viewport-locked gallery becomes a normal scrolling page */
  html,body{height:auto;overflow:auto}
  .sh-nav{padding:0 14px}
  .sh-nav-links{
    margin-left:10px;gap:12px;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .sh-nav-links::-webkit-scrollbar{display:none}
  .sh-nav-links a{flex:none}
  .nav-right{gap:14px;margin-left:10px}
  .sh-nav-cta{display:none}

  .sh-switcher{grid-template-columns:1fr;height:auto}
  .sh-switcher-left{padding:12px 14px;border-right:0;border-bottom:1px solid var(--rulehv)}
  .sh-switcher-tabs{overflow-x:auto;scrollbar-width:none}
  .sh-switcher-tabs::-webkit-scrollbar{display:none}
  .sh-tab{flex:none;min-width:132px;padding:12px 16px;gap:10px}

  .sh-section{height:auto;overflow:visible}
  .sh-section.is-active{display:block}
  .sh-grid--furniture,.sh-grid--objects,.sh-grid--clothing{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    grid-auto-rows:auto;
  }
  .sh-card{border-bottom:1px solid var(--rule)}
  .sh-card--hero{grid-column:span 2;grid-row:auto}
  .sh-card--wide{grid-column:span 2}
  .sh-card--tall{grid-row:auto}
  .sh-img{aspect-ratio:1/1;flex:none}
  .sh-card--hero .sh-img,.sh-card--wide .sh-img{aspect-ratio:16/10}
  .sh-save-btn{opacity:1;transform:none} /* touch: always visible */
  .sh-coming{padding:60px 20px}
}

/* Touch devices (incl. tablets >699px): save is always visible */
@media (hover:none){
  .sh-save-btn{opacity:1;transform:none}
}