/* 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,#DDDEE0);background:var(--cream,#F6F6F6)}
.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,#5A5F69)}
.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,#DDDEE0);transition:border-color var(--t,.3s ease),transform var(--t,.3s ease)}
.boardstrip .bs-it:hover{border-color:var(--copper,#309FEA);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,#5A5F69);border-color:var(--rule,#DDDEE0)}
.sdetail .acts .btn--sm:hover{color:#fff;background:var(--ink,#1A2B3C);border-color:var(--ink,#1A2B3C)}

@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:#1A2B3C}

/* 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}
}

/* Board per Mail (10.09.) */
.bs-send{padding:10px 0 2px;border-top:1px solid var(--rule);margin-top:8px}
.bs-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bs-f input[type=email],.bs-f input[name=note]{flex:1 1 200px;min-width:0;border:1px solid var(--rule);padding:9px 11px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.bs-f input:focus{outline:none;border-color:var(--ink)}
.bs-f input[name=website]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bs-f .btn{flex:0 0 auto;padding:9px 18px}
.bs-st{display:block;font-size:12.5px;color:var(--mute);padding-top:7px}
@media(max-width:700px){.bs-f input[type=email],.bs-f input[name=note]{flex:1 1 100%}.bs-f .btn{width:100%;justify-content:center}}