/* Template values come from the shared template selected by this store group. */
.site-header,
.product-card,
.section-card,
.product-info-left,
.purchase-sidebar,
.related-card,
.support-panel {
  background: var(--surface, #fff);
  border-radius: var(--card-radius, 18px);
  color: var(--text);
}
.site-header {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.brand-icon {
  background: var(--primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 16%, transparent);
}
.brand-icon.custom-logo {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.brand-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-text small {
  color: var(--muted);
  max-width: 420px;
  overflow-wrap: anywhere;
}
.nav-menu a,
.product-info h2,
.related-card h3,
.faq-item summary,
.section-card-header h1,
.section-card-header h2,
.field > label,
.order-summary dd {
  color: var(--text);
}
.product-info p,
.product-subtitle,
.product-description,
.help-text,
.field > small,
.faq-item p,
.prose,
.breadcrumbs,
.catalog-note,
.order-footer,
.empty-state,
.loading-state,
.brand-text small,
.payment-amount p,
.account-info-card dt,
.order-summary dt {
  color: var(--muted);
}
.hero-banner {
  background: linear-gradient(120deg, var(--primary), var(--hero-end, var(--primary)));
  border-radius: calc(var(--card-radius, 18px) + 8px);
  box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.hero-banner h1,
.hero-banner p {
  color: var(--on-primary, #fff);
}
.hero-banner p {
  white-space: pre-line;
}
.category-tabs a {
  background: var(--surface, #fff);
  border-color: var(--line);
  color: var(--text);
}
.category-tabs a.active,
.category-tabs a.active:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary, #fff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent);
}
.btn-primary {
  --bs-btn-color: var(--on-primary, #fff);
  --bs-btn-hover-color: var(--on-primary, #fff);
  --bs-btn-active-color: var(--on-primary, #fff);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-disabled-color: var(--on-primary, #fff);
}
.buy-button {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 12%, transparent);
}
.stock-badge,
.section-icon,
.account-info-card,
.total-box,
.delivery,
.payment-tip {
  background: var(--mint);
  color: var(--primary);
}
.account-info-card dd {
  color: var(--text);
}
.product-price-info,
.payment-details,
.proof-area,
.quantity-control button,
.chat-messages,
.chat-welcome {
  background: var(--page-bg);
  color: var(--text);
}
.form-control,
.form-select,
.quantity-control input,
.payment-address,
.wallet-choice,
.proof-area .form-control,
.chat-input textarea {
  background: var(--surface, #fff);
  color: var(--text);
  border-color: var(--line);
}
.form-control::placeholder,
.chat-input textarea::placeholder {
  color: var(--muted);
}
.form-control:focus,
.form-select:focus {
  background: var(--surface, #fff);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--mint);
}
.wallet-choice:has(input:checked),
.wallet-choice:hover {
  background: var(--mint);
  border-color: var(--primary);
  color: var(--text);
}
.btn-outline-dark {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--mint);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}
.btn-dark {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-color: var(--on-primary, #fff);
  --bs-btn-hover-color: var(--on-primary, #fff);
}
.section-card-header,
.faq-item,
.purchase-title,
.account-info-card dl > div,
.order-summary > div,
.support-panel,
.support-panel > header,
.chat-toolbar,
.chat-input,
.related-card,
.payment-address {
  border-color: var(--line);
}
.stock-badge.sold-out {
  background: var(--page-bg);
  color: var(--muted);
}
.support-launcher {
  color: var(--on-primary, #fff);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--primary) 24%, transparent);
}
.support-panel {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  box-shadow: 0 16px 48px #10182730;
}
.support-panel > header {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary) 85%, #142438),
    color-mix(in srgb, var(--primary) 70%, #142438)
  );
  color: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, var(--surface, #fff));
}
.support-panel > header strong,
.support-panel > header small,
.support-panel > header button {
  color: inherit;
}
.support-panel > header small {
  opacity: 0.85;
}
.support-panel > header button {
  border-radius: 8px;
  background: #ffffff14;
}
.support-panel > header button:hover,
.support-panel > header button:focus-visible {
  background: #ffffff2b;
}
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 30%, var(--line)) transparent;
}
.chat-welcome,
.chat-bubble {
  background: var(--surface, #fff);
  color: var(--text);
  border: 1px solid var(--line);
}
.chat-welcome {
  border-left: 3px solid var(--primary);
}
.chat-bubble.visitor {
  background: var(--mint);
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}
.chat-toolbar,
.chat-input,
.emoji-panel {
  background: var(--surface, #fff);
  color: var(--muted);
  border-color: var(--line);
}
.chat-toolbar button:hover,
.image-pick:hover {
  color: var(--primary);
}
.chat-input textarea {
  padding: 10px 12px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.chat-input textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--mint);
}
.site-footer {
  background: var(--surface, #fff);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer a,
.footer-payments {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--primary);
}
html[data-color-mode='dark'] {
  color-scheme: dark;
}
html[data-color-mode='dark'] .support-panel {
  box-shadow: 0 16px 48px #00000066;
}
html[data-color-mode='dark'] .support-panel > header {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary) 32%, var(--surface)),
    color-mix(in srgb, var(--primary) 16%, var(--surface))
  );
  color: var(--text);
}
html[data-color-mode='dark'] .bubble {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
html[data-color-mode='dark'] .bubble.staff {
  background: var(--mint);
}
html[data-color-mode='dark'] .payment-symbol,
html[data-color-mode='dark'] .product-image {
  background: var(--page-bg);
}