/* ============================================================
   MOBEL SUITE — THE SOFA AND RECLINER PAGES
   /recliner-chairs, /living-room-furniture and each range's own page.
   Built on beds.css (loaded first): the same drawing board, cards, bars and
   summary, so every department looks like one shop. What is here is only
   what chairs and suites need that beds do not. Every class starts st-.
   ============================================================ */
.st-hero-wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
@media(max-width:900px){.st-hero-wide{grid-template-columns:minmax(0,1fr)}}

/* the filters are links (they work with no script): not underlined */
.st .bb-chip{text-decoration:none}

/* the cards */
.st-opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.st-opts span{font-size:11px;border:1px solid var(--bb-rule2);border-radius:20px;padding:2px 8px;color:var(--navy);background:#fff}
.st-moves{font-size:12.5px;color:var(--color-body,#3C4A4E);margin-top:4px}
.st-grid .bb-card-art img.bb-cover{object-fit:cover;mix-blend-mode:normal}

/* one chair, or a suite piece by piece */
.st-mode{display:inline-flex;gap:4px;margin-top:22px;background:var(--off-white,#F8F5F0);border:1px solid var(--bb-rule);border-radius:30px;padding:3px}
.st-mode button{border:0;background:none;padding:8px 16px;border-radius:30px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--navy)}
.st-mode button[aria-pressed="true"]{background:var(--navy);color:#fff}

/* how it moves: a tile each, drawn in its pose */
.st-mv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.st-mvb{display:grid;gap:3px;align-content:start;border:1px solid var(--bb-rule2);background:#fff;border-radius:4px;padding:8px;cursor:pointer;text-align:left;font:inherit;color:var(--navy);transition:all .25s var(--bb-ease);min-width:0}
.st-mvb svg{width:100%;height:auto;background:linear-gradient(#fbfaf7,#f1ede6);border-radius:2px}
.st-mvb b{font-size:12.5px;line-height:1.25}
.st-mvb small{font-size:11px;color:var(--text-muted);line-height:1.35}
.st-mvb em{font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums}
.st-mvb[aria-pressed="true"],.st-cv button[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:var(--off-white,#F8F5F0)}
.st-mvb[disabled]{opacity:.38;cursor:not-allowed}
.bb-sz[aria-pressed="true"]{border-color:var(--navy)}

/* covers: a swatch each, with what it comes to */
.st-cv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.st-cv button{display:flex;gap:9px;align-items:center;border:1px solid var(--bb-rule2);background:#fff;border-radius:4px;padding:8px 10px;cursor:pointer;text-align:left;font:inherit;color:var(--navy);min-width:0;transition:all .25s var(--bb-ease)}
.st-cv i{width:22px;height:22px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(15,32,60,.15)}
.st-cv span{min-width:0}
.st-cv b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-cv small{display:block;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* a suite's pieces, by the number */
.st-pg{margin-top:10px}
.st-pg-h{display:block;font-size:11px;color:var(--text-muted);margin:0 0 6px}
.st-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.st-pc{border:1px solid var(--bb-rule2);background:#fff;border-radius:4px;padding:8px;display:grid;gap:4px;align-content:start;transition:border-color .25s}
.st-pc.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.st-pc svg{width:100%;height:auto;background:linear-gradient(#fbfaf7,#f1ede6);border-radius:2px}
.st-pc b{font-size:12.5px;color:var(--navy);line-height:1.25}
.st-pc em{font-style:normal;font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.st-qty{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.st-qty button{font:inherit;width:30px;height:30px;border:1px solid var(--bb-rule2);background:#fff;border-radius:50%;cursor:pointer;color:var(--navy);font-size:16px;line-height:1}
.st-qty button:hover{border-color:var(--navy)}
.st-qty button[disabled]{opacity:.35;cursor:not-allowed}
.st-qty span{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy)}

/* the explainer: every action, each moving */
.st-ex{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.st-ex{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.st-ex{grid-template-columns:minmax(0,1fr)}}

/* every price */
.st-tbl td:first-child{white-space:normal;min-width:220px}

@media(max-width:640px){
  .st-mv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-mode{display:flex}
  .st-mode button{flex:1;padding:8px 10px}
  .st-opts span{font-size:10.5px}
}