/* ligea collections: Stream- und Panel-Styles, die das JS braucht (Stream v4+). Wird von _build_deploy mit dem web-Ordner gebuendelt. */

/* ---- your board: strip above the stream, sits before #streamChips ---- */
.boardstrip{margin:0 0 16px;border:1px solid var(--rule,#E5E0D6);background:var(--cream,#F7F3EC)}
.boardstrip[hidden]{display:none}
.boardstrip .bs-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px}
.boardstrip .bs-n{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute,#6E6A60)}
.boardstrip .bs-a{display:flex;gap:8px;flex-wrap:wrap}
.boardstrip .bs-a .btn{padding:8px 14px;font-size:12.5px}
.boardstrip .bs-r{display:flex;gap:8px;overflow-x:auto;padding:0 14px 14px;scrollbar-width:thin}
.boardstrip .bs-it{flex:0 0 auto;width:56px;height:56px;cursor:pointer;overflow:hidden;background:#fff;border:1px solid var(--rule,#E5E0D6);transition:border-color var(--t,.3s ease),transform var(--t,.3s ease)}
.boardstrip .bs-it:hover{border-color:var(--copper,#CC7828);transform:translateY(-2px)}
.boardstrip .bs-it img{width:100%;height:100%;object-fit:cover;display:block}
.boardstrip .bs-it i{display:flex;width:100%;height:100%}
.boardstrip .bs-it i b{flex:1}

/* ---- small ghost action inside the panel (e.g. "Not this") ---- */
.sdetail .acts .btn--sm{padding:7px 12px;font-size:11.5px;color:var(--mute,#6E6A60);border-color:var(--rule,#E5E0D6)}
.sdetail .acts .btn--sm:hover{color:#fff;background:var(--ink,#161616);border-color:var(--ink,#161616)}

@media(max-width:600px){.boardstrip .bs-it{width:48px;height:48px}}

/* ---- Mobil (Denis 10.09. abends: "der feed funktioniert nicht mobil", "die filter auch nicht") ----
   Die Filterleiste war dreizeilig mit umbrechenden Chips und 308 px hoch, also die halbe Bildschirmhoehe,
   und die Kollektionsseite lief einspaltig 17.000 px, bevor der Stream ueberhaupt begann. */
@media(max-width:700px){
  /* Je Gruppe genau eine Zeile, seitlich wischbar statt umbrechend */
  .stbar{top:56px;padding:7px 0 5px}
  .stbar .row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:5px;margin-bottom:5px;padding-bottom:1px}
  .stbar .row::-webkit-scrollbar{display:none}
  .stbar .row:last-child{margin-bottom:0}
  .stbar .lbl{width:auto;flex:0 0 auto;font-size:9px;letter-spacing:.1em;align-self:center;padding-right:2px}
  .stbar button{flex:0 0 auto;font-size:12.5px;padding:6px 11px;white-space:nowrap}
  /* Die Raumtyp-Bildkacheln sind mobil zu gross, die Chips derselben Auswahl reichen */
  .rts{display:none}
  /* Design-Raster zweispaltig statt einspaltig, sonst ist der Weg zum Stream endlos */
  .grid.g3,.grid.g4{grid-template-columns:1fr 1fr;gap:16px 10px}
  .grid.g2{grid-template-columns:1fr}
  .card .n{font-size:14px;margin-top:8px}
  .card .t{font-size:9px;letter-spacing:.08em}
  .card .lad{display:none}          /* sechs Colourway-Thumbs auf 170 px sind unlesbar */
  /* Sprung zum Stream aus dem Hero */
  .c-hero .c-meta a.tostream,.ov-hero a.tostream{display:inline-block}
}
@media(min-width:701px){.c-hero .c-meta a.tostream,.ov-hero a.tostream{display:none}}
.c-hero .c-meta a.tostream,.ov-hero a.tostream{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.6);padding:7px 13px;letter-spacing:.14em}
.c-hero .c-meta a.tostream:hover,.ov-hero a.tostream:hover{background:#fff;color:#161616}

/* Safari faerbt Buttons ohne color blau (iPhone-Screenshot 10.09.) */
.stbar button,.rt{color:var(--ink)}
.stbar button.akt{color:#fff}

/* Angebots-Balken (10.09.): nur am Handy, fest unten */
.qbar{display:none}
@media(max-width:700px){
  .qbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--rule)}
  .qbar .btn{flex:1;justify-content:center;padding:12px 10px;font-size:14px;white-space:nowrap}
  body{padding-bottom:72px}
}