/* Studio Beige brand pages (Oct 2026). Loaded only on product_brand archives by sb-brand-page.php. Tokens from shop.css (--sbx-*). */
.sbb-brand{--sbb-mocha:#8A5D4B}   /* text-safe mocha: 5.2:1 on ivory (brand mocha #A47764 is decoration only) */

.sbb-kicker{display:block;font-family:var(--sbx-sans);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sbb-mocha);margin:0 0 .8rem}
.sbb-sec-head{text-align:center;margin:0 0 1.8rem}
.sbb-sec-title{font-family:var(--sbx-serif)!important;font-weight:400!important;font-size:clamp(1.9rem,3.4vw,2.8rem)!important;line-height:1.08!important;color:var(--sbx-ink)!important;margin:0!important;letter-spacing:.3px}

/* colour strip: sampled from the brand's own packshots */
.sbb-dna{display:flex;height:6px;overflow:hidden}
.sbb-dna span{flex:1 1 0}

/* hero */
.sbb-hero{background:var(--sbx-soft);border:1px solid var(--sbx-warm);margin:0 0 clamp(2.6rem,5vw,4rem)}
.sbb-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:clamp(2rem,4.5vw,4rem) clamp(1.25rem,4.5vw,4.5rem)}
.sbb-hero-grid.sbb-hero-solo{grid-template-columns:minmax(0,1fr);text-align:center}
.sbb-hero-solo .sbb-intro{margin-left:auto;margin-right:auto}
.sbb-hero-solo .sbb-trust{justify-content:center}
.sbb-chip{display:inline-block;font-family:var(--sbx-sans);font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sbb-mocha);border:1px solid var(--sbb-mocha);border-radius:999px;padding:.55rem 1.1rem;margin:0 0 1.4rem}
.sbb-wordmark{font-family:var(--sbx-serif)!important;font-weight:400!important;font-size:clamp(2.6rem,5.6vw,4.9rem)!important;line-height:1.02!important;letter-spacing:.04em;color:var(--sbx-ink)!important;margin:0 0 1rem!important;overflow-wrap:anywhere}
.sbb-wordmark.sbb-word-long{font-size:clamp(1.9rem,4.4vw,3.8rem)!important;letter-spacing:.02em;overflow-wrap:normal}
.sbb-compact .sbb-wordmark.sbb-word-long{font-size:clamp(1.7rem,3vw,2.4rem)!important}
.sbb-wordmark.sbb-has-logo{line-height:0!important}
.sbb-logo{display:inline-block;max-width:min(360px,80%);height:auto;max-height:120px;width:auto}
.sbb-strap{font-family:var(--sbx-sans);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sbx-brown);margin:0 0 1.3rem;line-height:1.9}
.sbb-intro{font-family:var(--sbx-sans);font-size:1.04rem;line-height:1.75;color:var(--sbx-brown);max-width:60ch;margin:0 0 1.6rem}
.sbb-intro b{font-weight:500;color:var(--sbx-ink)}
.sbb-rule{border:0;border-top:1px solid var(--sbx-warm);margin:0 0 1.2rem;max-width:none}
.sbb-trust{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.7rem 1.8rem}
.sbb-trust li{display:flex;align-items:center;gap:.45rem;font-family:var(--sbx-sans);font-size:.84rem;color:var(--sbx-brown);margin:0}
.sbb-trust svg{color:var(--sbb-mocha);flex:none}
.sbb-jump{display:inline-flex;align-items:center;min-height:48px;padding:0 1.7rem;font-family:var(--sbx-sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--sbx-soft)!important;background:var(--sbx-ink);border-radius:2px;transition:background .25s}
.sbb-jump:hover{background:var(--sbb-mocha)}
.sbb-hero-media{display:block;background:var(--sbx-cream);aspect-ratio:1/1;border-radius:2px;overflow:hidden}
.sbb-hero-media img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;mix-blend-mode:multiply;transition:transform .5s ease}
.sbb-hero-media:hover img{transform:scale(1.03)}

/* shop by line */
.sbb-lines{margin:0 0 clamp(3rem,6vw,4.6rem)}
.sbb-line-grid{--g:clamp(.9rem,2vw,1.6rem);--c:3;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}   /* a short last row centres instead of leaving a hole */
.sbb-cols-2{--c:2;max-width:860px;margin:0 auto}
.sbb-cols-4{--c:4}
.sbb-line{flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0;display:flex;flex-direction:column;text-decoration:none;background:var(--sbx-soft);border:1px solid var(--sbx-warm);transition:border-color .25s,box-shadow .25s}
.sbb-line:hover{border-color:var(--sbx-gold);box-shadow:0 18px 40px -30px rgba(44,36,32,.45)}
.sbb-line-media{display:block;aspect-ratio:16/10;background:var(--sbx-cream);overflow:hidden}
.sbb-line-media img{display:block;width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box;mix-blend-mode:multiply;transition:transform .5s ease}
.sbb-line:hover .sbb-line-media img{transform:scale(1.04)}
.sbb-line-body{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem 1.1rem;border-top:3px solid var(--sbx-ink)}
.sbb-line-name{font-family:var(--sbx-serif);font-size:1.4rem;line-height:1.15;color:var(--sbx-ink)}
.sbb-pill{flex:none;font-family:var(--sbx-sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sbb-mocha);border:1px solid var(--sbb-mocha);border-radius:999px;padding:.35rem .7rem;white-space:nowrap}
.sbb-grid-head{margin-bottom:1.4rem}

/* compact header (paged / filtered) */
.sbb-compact .sbb-compact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.4rem clamp(1.25rem,3vw,2.4rem)}
.sbb-compact .sbb-wordmark{font-size:clamp(1.9rem,3.6vw,2.8rem)!important;margin:0!important}
.sbb-line-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.sbb-line-pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;font-family:var(--sbx-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--sbx-brown);border:1px solid var(--sbx-warm);border-radius:999px;transition:border-color .2s,background .2s}
.sbb-line-pills a:hover{border-color:var(--sbb-mocha)}
.sbb-line-pills a[aria-current]{background:var(--sbx-ink);border-color:var(--sbx-ink);color:var(--sbx-soft)}

/* about + CTA */
.sbb-about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:start;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:clamp(2rem,4vw,3rem) 0 0;border-top:1px solid var(--sbx-warm)}
.sbb-about-copy .sbb-sec-title{margin-bottom:1rem!important}
.sbb-about-copy p{font-family:var(--sbx-sans);font-size:1rem;line-height:1.75;color:var(--sbx-brown);max-width:64ch;margin:0 0 1rem}
.sbb-featured span{color:var(--sbx-ink);font-weight:500}
.sbb-about a:not(.sbb-btn){color:var(--sbb-mocha);text-decoration:underline;text-underline-offset:3px}
.sbb-about a:not(.sbb-btn):hover{color:var(--sbx-ink)}
.sbb-cta{background:var(--sbx-cream);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.sbb-cta-title{font-family:var(--sbx-serif)!important;font-weight:400!important;font-size:1.7rem!important;line-height:1.15!important;color:var(--sbx-ink)!important;margin:0!important}
.sbb-cta p{font-family:var(--sbx-sans);font-size:.95rem;line-height:1.7;color:var(--sbx-brown);margin:0}
.sbb-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.7rem;margin-top:.4rem;font-family:var(--sbx-sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--sbx-soft)!important;background:var(--sbx-ink);border-radius:2px;transition:background .25s}
.sbb-btn:hover{background:var(--sbb-mocha)}
.sbb-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sbx-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}

.sbb-line:focus-visible,.sbb-jump:focus-visible,.sbb-btn:focus-visible,.sbb-hero-media:focus-visible,.sbb-line-pills a:focus-visible,.sbb-about a:focus-visible{outline:2px solid var(--sbb-mocha);outline-offset:3px}

@media (max-width:1024px){
  .sbb-cols-4{--c:2}
}
@media (max-width:820px){
  .sbb-hero-grid{grid-template-columns:minmax(0,1fr)}
  .sbb-hero-media{order:-1;aspect-ratio:16/10;max-height:300px}
  .sbb-about{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sbb-hero-grid{padding:1.6rem 1.25rem 1.8rem;gap:1.4rem}
  .sbb-hero-media{order:0;aspect-ratio:16/9;max-height:210px}   /* phones: name + copy first, photo under it */
  .sbb-chip{font-size:.6rem;letter-spacing:.16em;padding:.5rem .9rem;margin-bottom:1.1rem}
  .sbb-strap{font-size:.66rem;letter-spacing:.18em}
  .sbb-intro{font-size:1rem}
  .sbb-trust{flex-direction:column;gap:.55rem}
  .sbb-hero-solo .sbb-trust{align-items:center}
  .sbb-jump{width:100%;justify-content:center}
  /* line matrix becomes stacked rows: photo left, name + count right */
  .sbb-line-grid{--c:1;--g:.75rem}
  .sbb-line{flex-direction:row;align-items:stretch}
  .sbb-line-media{flex:0 0 104px;aspect-ratio:1/1}
  .sbb-line-body{flex:1 1 auto;border-top:0;border-left:3px solid var(--sbx-ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem}
  .sbb-line-name{font-size:1.3rem}
  .sbb-compact .sbb-compact-row{flex-direction:column;align-items:flex-start}
  .sbb-line-pills{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:.3rem;scrollbar-width:none}
  .sbb-line-pills a{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .sbb-hero-media img,.sbb-line-media img,.sbb-line,.sbb-jump,.sbb-btn{transition:none}
  .sbb-hero-media:hover img,.sbb-line:hover .sbb-line-media img{transform:none}
}