/* Brand page tabs. The tab pills reuse .fpill, so both looks (Volare and Classic) style them. */
.brand-tabs {
  display: flex; align-items: center; gap: var(--s2); min-width: 0;
  margin: 0 0 var(--rhythm-tabs); padding: 2px 0;
  overflow-x: auto; scrollbar-width: none;
}
.brand-tabs::-webkit-scrollbar { display: none; }
/* the tab strip scrolls on a phone: the edge with more behind it fades out */
.brand-tabs.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.brand-tabs.has-more-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.brand-tabs.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
.brand-tab { cursor: pointer; scroll-margin-inline: var(--s4); }
/* The bar and the heading above it never move; only the panel under it changes. */
.brand-panels { min-height: 28rem; min-width: 0; }
.brand-panel[hidden] { display: none; }
.brand-panel { min-width: 0; display: grid; gap: var(--gap-card); align-content: start; }
.brand-panel:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent, currentColor)); outline-offset: 4px; }
/* Where the "Your editing style" module mounts; takes no room until something is in it. */
.brand-slot:empty { display: none; }
/* Cards keep their own spacing inside a panel (the old page stacked them with margins). */
.brand-panel > .card { margin: 0; }
@media (max-width: 680px) {
  /* a phone shows all five tabs as whole pills over two rows, never a strip cut off mid-word */
  .brand-tabs { flex-wrap: wrap; overflow: visible; row-gap: var(--s2); }
  .brand-panels { min-height: 0; }
}
.brand-panel > .card[hidden] { display: none; }
/* Channel: what stands in for the card until it is drawn (empty in the offline demo, the card's shape while it loads). */
#channelProfile:not([hidden]) ~ .brand-empty { display: none; }

/* ---- Brand levels: Basic (one page) and Fine-tune (closed until opened) ---- */
.brand-levels { display: grid; gap: var(--s6, 32px); min-width: 0; }
.brand-level { min-width: 0; display: grid; gap: var(--gap-card); align-content: start; }
.brand-level-head h2 { margin: 0; }
.brand-level-head p { margin: 4px 0 0; color: var(--muted); }
.brand-level > .card, .brand-level .be-look > .card { margin: 0; }
.brand-yourlook-body { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s5, 20px); align-items: center; }
.brand-yourlook-still { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--soft, var(--dk-b-eeeeee, #eee)); }
.brand-yourlook-still--text { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-weight: 600; }
.brand-yourlook-text p { margin: 4px 0 12px; color: var(--muted); }
.brand-yourlook-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4, 16px); }
.brand-gfx-body { display: grid; gap: var(--s5, 20px); padding-top: var(--s3, 12px); }
.brand-fine { border-top: 1px solid var(--line, var(--dk-l-000000a12, rgba(0,0,0,.12))); padding-top: var(--s4, 16px); }
.brand-fine-title { margin: 0; font: inherit; }
.brand-fine-toggle { display: flex; align-items: baseline; gap: var(--s3, 12px); width: 100%; background: none; border: 0; padding: var(--s3, 12px) 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.brand-fine-toggle > span:first-child { font-size: 1.25rem; font-weight: 600; }
.brand-fine-toggle small { color: var(--muted); flex: 1; min-width: 0; }
.brand-fine-chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; align-self: center; }
.brand-fine.is-open .brand-fine-chev { transform: rotate(-135deg); }
.brand-fine-toggle:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent, currentColor)); outline-offset: 2px; }
.brand-fine-body { display: grid; gap: var(--s6, 32px); }
.brand-fine-body[hidden] { display: none; }
.brand-tabhead-title { font-size: 1.1rem; margin: 0; }
.cp-more { margin-top: var(--s4, 16px); }
.cp-more > summary { cursor: pointer; font-weight: 600; padding: var(--s2, 8px) 0; }
@media (max-width: 680px) {
  .brand-yourlook-body { grid-template-columns: minmax(0, 1fr); }
  .brand-fine-toggle { flex-wrap: wrap; }
}
.brand-levels, .brand-level, .brand-fine-body, .brand-panel { grid-template-columns: minmax(0, 1fr); }
.brand-gfx-body .pref { display: grid; gap: var(--s2, 8px); min-width: 0; }
.brand-gfx-body .seg { flex-wrap: wrap; max-width: 100%; }
.brand-gfx .seg { max-width: min(26rem, 100%); overflow-x: auto; scrollbar-width: none; }
.brand-gfx .seg::-webkit-scrollbar { display: none; }
.brand-gfx .pref { flex-direction: column; align-items: flex-start; border-top: 0; }
.brand-gfx .pref + .pref { border-top: 1px solid var(--line-2, var(--line)); }