/* Shared UI only. Physical print and map styling remain in the studio. */
.brand-ui {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  background: var(--page);
  font: var(--text-body) / var(--leading-body) var(--sans);
}
.brand-ui,
.brand-ui * {
  box-sizing: border-box;
}
:where(.brand-ui) :where(button, input, select) {
  font: inherit;
  color: inherit;
}
.brand-ui :is(button, summary) {
  cursor: pointer;
}
.brand-ui :is(button, input, select, a):focus-visible {
  outline: none;
  background-color: var(--focus-background, var(--focus-surface));
}
.brand-ui :disabled {
  cursor: default;
}
.brand-ui [hidden] {
  display: none !important;
}
.brand-ui ::selection {
  background: var(--selection-background);
  color: var(--text-primary);
}
.brand-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--studio-gutter);
  padding: var(--space-md);
  min-width: 0;
}
.brand-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.brand-wordmark {
  margin: 0 auto 0 0;
  font: var(--weight-medium) var(--text-lead) var(--sans);
}
.brand-sidebar {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
}
.brand-heading {
  margin: 0 0 var(--space-sm);
  font: var(--weight-normal) var(--text-display) / var(--leading-display)
    var(--serif);
  letter-spacing: var(--tracking-display);
}
.brand-caption {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-label);
}
.brand-label {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--text-label);
}
.brand-window {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border: var(--stroke-width) solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
}
.brand-window-bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.brand-window-content {
  min-height: 300px;
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.brand-surface {
  padding: var(--space-md);
  border: var(--stroke-width) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.brand-stack {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.brand-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
}

:is(.brand-button, .text-button, .save-button) {
  --focus-background: var(--action-hover);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  font-size: var(--text-ui);
  padding: var(--control-padding-block) 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius);
}
.text-button:hover,
.brand-button--quiet:hover {
  color: var(--accent);
}
.save-button,
.brand-button--filled {
  padding: var(--control-padding-block) var(--control-padding-inline);
  background: var(--action-fill);
  color: var(--action-text);
  font-weight: var(--weight-medium);
}
.save-button:hover:not(:disabled),
.brand-button--filled:hover:not(:disabled) {
  background: var(--action-hover);
}
.save-button:disabled,
.brand-button--filled:disabled {
  opacity: 1;
  background: var(--action-fill);
  color: var(--action-text);
}
.brand-button--outline,
.brand-button--outline:hover,
.brand-button--outline:disabled,
.save-button[data-add-to-cart],
.save-button[data-add-to-cart]:hover,
.save-button[data-add-to-cart]:disabled {
  --focus-background: var(--focus-surface);
  padding: var(--control-padding-block) var(--control-padding-inline);
  color: var(--text-primary);
  background: transparent;
  border: var(--stroke-width) solid var(--action-fill);
}
.brand-button--quiet {
  --focus-background: var(--focus-surface);
}
:is(.brand-field, .line-input) {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  border: var(--stroke-width) solid var(--line);
  background: var(--control-surface);
  border-radius: var(--radius-option);
  padding: var(--control-padding-block) var(--space-sm);
  font-size: var(--text-control);
}
:is(.brand-tabs, .mobile-settings-tabs) {
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 5), minmax(max-content, 1fr));
  gap: 0;
  border-bottom: calc(var(--stroke-width) * 2) solid var(--line);
}
:is(.brand-tabs, .mobile-settings-tabs) button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 0;
  min-height: var(--control-height);
  padding: 8px 0;
  border: 0;
  border-bottom: calc(var(--stroke-width) * 2) solid transparent;
  border-radius: 0;
  margin-bottom: calc(var(--stroke-width) * -2);
  background: transparent;
  font-size: var(--text-ui);
  white-space: nowrap;
}
:is(.brand-tabs, .mobile-settings-tabs) svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
:is(.brand-tabs, .mobile-settings-tabs)
  :is([aria-selected="true"], [aria-pressed="true"]) {
  border-color: var(--action-fill);
  color: var(--text-primary);
}
:is(.brand-segmented, .view-toggle) {
  display: flex;
  border: var(--stroke-width) solid var(--line);
  padding: 4px;
  background: var(--control-surface);
  border-radius: var(--radius-option);
  box-shadow: var(--segmented-shadow);
}
:is(.brand-segmented, .view-toggle) button {
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  min-width: 96px;
  font-size: var(--text-control);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
}
:is(.brand-segmented, .view-toggle) button[aria-pressed="true"] {
  background: var(--window-surface);
  color: var(--text-primary);
}
.brand-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-height);
  padding: var(--space-sm);
  border: var(--stroke-width) solid transparent;
  border-radius: var(--radius-option);
  background: transparent;
  text-align: left;
}
.brand-option[aria-pressed="true"] {
  background: var(--option-selected);
}
.brand-option:hover:not([aria-pressed="true"]) {
  background: var(--window-surface);
}
.brand-ui input[type="checkbox"] {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  accent-color: var(--text-primary);
}
.brand-ui :is(button, input, select) {
  transition:
    background var(--motion-control),
    color var(--motion-control);
}
@media (max-width: 700px) {
  .brand-shell {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-sm);
  }
  .brand-header,
  .brand-footer {
    grid-column: 1;
  }
  .brand-window {
    border-radius: var(--window-radius-mobile);
  }
  :is(.brand-button--filled, .brand-button--outline, .save-button) {
    padding-inline: var(--space-sm);
  }
  .brand-ui :is(input[type="text"], input[type="search"], select) {
    font-size: var(--text-input);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-ui :is(button, input, select) {
    transition: none;
  }
}