/* Category hub + vertical customize chrome */
.co-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ci-brand, #A52422);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.co-back-link:hover { text-decoration: underline; }
.co-back-link svg { width: 1rem; height: 1rem; }

.co-vertical-header { margin-bottom: 2rem; }

/* Vertical customize shared */
body.page-customize-vertical main { background: var(--ci-page-bg, #f9fafb); }
.co-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .co-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.co-option-tile {
  border: 1px solid var(--ci-border, #e5e7eb);
  border-radius: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  background: #fff;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.co-option-tile.is-selected {
  border-color: var(--ci-brand, #A52422);
  background: var(--ci-brand-light, rgba(165, 36, 34, 0.08));
}
.co-option-tile__label { font-weight: 600; font-size: 0.9rem; }
.co-option-tile__hint { font-size: 0.75rem; color: var(--ci-text-muted, #6b7280); margin-top: 0.25rem; }

.co-preview-frame {
  border: 1px dashed var(--ci-border, #e5e7eb);
  border-radius: 0.75rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  overflow: hidden;
}
.co-preview-frame img { max-width: 100%; max-height: 280px; object-fit: contain; }