/* Uses the shop's existing design system; custom color values come from validated tokens. */
#brand-logo { max-width: 180px; max-height: 60px; object-fit: contain; margin-bottom: var(--sp-4); }
#brand-logo[hidden] { display: none; }
.branding-workspace { max-width: 1160px; margin: 0 auto; }
.branding-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--sp-7); margin: var(--sp-7) 0; }
.branding-layout > *, .brand-color-grid > * { min-width: 0; }
.brand-color-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.brand-color,.brand-actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.brand-color input[type=color] { width:48px; height:44px; padding:2px; border:1px solid var(--line); background:var(--panel); border-radius:var(--r-md); }
.brand-color .input { flex:1; min-width:100px; }
.branding-preview { padding:var(--sp-6); margin-bottom:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--preview-bg); color:var(--preview-text); overflow-wrap:anywhere; }
.branding-preview.light { --preview-bg:#ffffff;--preview-text:#141922;--preview-muted:#566072;--accent:#047857;--accent-ink:#ffffff; }
.branding-preview.dark { --preview-bg:#151920;--preview-text:#eef1f6;--preview-muted:#9aa5b6;--accent:#10d39a;--accent-ink:#04120d; }
.brand-preview-head { display:flex; align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5); }
.brand-preview-head img { max-width:100px;max-height:50px;object-fit:contain; }
.preview-muted,.brand-preview-head p,.branding-preview small { color:var(--preview-muted); }
.preview-button { display:inline-block;padding:12px 16px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);font-weight:600; }
.preview-link { color:var(--accent); }
.branding-layout .logo-row { align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--sp-6); }
@media(max-width:800px){ .branding-layout{grid-template-columns:1fr;} }
@media(max-width:420px){ .brand-color-grid{grid-template-columns:1fr;} }