/* The two palettes share the same layout and work throughout checkout. */
:root {
  color-scheme: light;
  --xh-bg: #f7f8fa;
  --xh-ink: #1c2636;
  --xh-muted: #606c7e;
  --xh-line: #dce2ea;
  --xh-orange: #1766cd;
  --xh-surface: #ffffff;
  --xh-raised: #f1f4f8;
  --xh-hover: #f0f6ff;
  --xh-field: #ffffff;
  --xh-blue-soft: #eaf3ff;
  --xh-blue-line: #b4d3fa;
  --xh-button: #1766cd;
  --xh-button-hover: #1057b3;
  --xh-success: #176f47;
  --xh-success-bg: #e9f6ef;
  --xh-success-line: #b4dec7;
  --xh-gold: #825b0b;
  --xh-gold-bg: #fff8e6;
  --xh-gold-line: #ead59d;
  --xh-danger: #b8323e;
  --xh-purple: #7150a2;
  --xh-purple-bg: #f0eafa;
  --xh-close-filter: none;
}
:root[data-xh-mode="dark"] {
  color-scheme: dark;
  --xh-bg: #0b0d11;
  --xh-ink: #edf1f7;
  --xh-muted: #a2adbd;
  --xh-line: #343b47;
  --xh-orange: #72b8ff;
  --xh-surface: #171b22;
  --xh-raised: #202631;
  --xh-hover: #202c3c;
  --xh-field: #10151d;
  --xh-blue-soft: #1a3049;
  --xh-blue-line: #375b84;
  --xh-button: #1766cd;
  --xh-button-hover: #2377e6;
  --xh-success: #8adbb0;
  --xh-success-bg: #193629;
  --xh-success-line: #376c51;
  --xh-gold: #edce7a;
  --xh-gold-bg: #282419;
  --xh-gold-line: #66552c;
  --xh-danger: #ff939d;
  --xh-purple: #c9b0f2;
  --xh-purple-bg: #362a49;
  --xh-close-filter: invert(1) grayscale(1) brightness(2);
}
html { background: var(--xh-bg); }
.xh-theme { background: var(--xh-bg); color: var(--xh-ink); }
.xh-header,.xh-footer { background: var(--xh-surface); border-color: var(--xh-line); }
.xh-header-inner { gap: 32px; }
.xh-brand { color: var(--xh-ink); gap: 11px; font-weight: 700; letter-spacing: .4px; }
.xh-brand .xh-logo-icon { width: 42px; height: 42px; flex-shrink: 0; display: block; }
.xh-footer-top .xh-brand { color: var(--xh-ink); }
.xh-footer-top .xh-logo-icon { width: 34px; height: 34px; }
.xh-header nav { gap: 26px; }
.xh-header nav a,.xh-header nav button { color: var(--xh-muted); }
.xh-header nav a:hover,.xh-header nav button:hover,.xh-header nav a.is-active { color: var(--xh-orange); }
.xh-header nav a.is-active:after { background: var(--xh-orange); }
.xh-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.xh-language { background: var(--xh-surface); border-color: var(--xh-line); color: var(--xh-muted); margin: 0; }
.xh-language select { background: var(--xh-surface); color: var(--xh-ink); max-width: 85px; }
.xh-appearance { display: flex; align-items: center; padding: 3px; border-radius: 10px; background: var(--xh-raised); border: 1px solid var(--xh-line); gap: 2px; }
.xh-appearance button { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; padding: 6px 9px; line-height: 20px; background: transparent; color: var(--xh-muted); font-size: 12px; white-space: nowrap; }
.xh-appearance button[aria-pressed="true"] { color: var(--xh-orange); background: var(--xh-surface); box-shadow: 0 1px 4px #00000012; }
.xh-appearance button:hover { color: var(--xh-orange); }
.xh-appearance svg { width: 16px; height: 16px; }
.xh-welcome { background: var(--xh-gold-bg); border-color: var(--xh-gold-line); border-left-color: #d9a92b; }
.xh-kicker { color: var(--xh-gold); }
.xh-welcome h1 { color: var(--xh-ink); }
.xh-welcome p { color: var(--xh-muted); }
.xh-shortcuts>a,.xh-shortcuts>button { background: var(--xh-surface); border-color: var(--xh-line); color: var(--xh-ink); }
.xh-shortcuts>a:hover,.xh-shortcuts>button:hover { background: var(--xh-hover); border-color: var(--xh-blue-line); }
.xh-shortcuts small,.xh-shortcuts>*>span:last-child { color: var(--xh-muted); }
.xh-shortcut-icon { background: var(--xh-blue-soft); color: var(--xh-orange); }
.xh-shortcuts>*:last-child .xh-shortcut-icon { background: var(--xh-success-bg); color: var(--xh-success); }
.xh-notice { background: var(--xh-surface); border-color: var(--xh-line); color: var(--xh-muted); }
.xh-notice strong { color: var(--xh-ink); }
.xh-sidebar { background: var(--xh-surface); border-color: var(--xh-line); }
.xh-sidebar h2 { color: var(--xh-ink); border-left-color: var(--xh-orange); }
.xh-groups button { color: var(--xh-muted); }
.xh-groups button.is-active { background: var(--xh-button); color: #fff; border-color: var(--xh-button); }
.xh-groups button:hover { border-color: var(--xh-blue-line); }
.xh-guide { border-color: var(--xh-line); }
.xh-guide summary { color: var(--xh-ink); }
.xh-guide p { color: var(--xh-muted); }
.xh-guide a { color: var(--xh-orange); }
.xh-toolbar>div { border-left-color: var(--xh-orange); }
.xh-toolbar h2 { color: var(--xh-ink); }
.xh-toolbar #xh-count { color: var(--xh-muted); }
.xh-search { background: var(--xh-field); border-color: var(--xh-line); }
.xh-search input { color: var(--xh-ink); }
.xh-search button,.xh-search input::placeholder { color: var(--xh-muted); }
.xh-filter-row { color: var(--xh-muted); }
.xh-sort select { background: var(--xh-bg); color: var(--xh-muted); }
.xh-product { background: var(--xh-surface); border-color: var(--xh-line); }
.xh-product:hover { background: var(--xh-hover); border-color: var(--xh-blue-line); }
.xh-category-name { color: var(--xh-muted); }
.xh-product h3 a,.xh-price { color: var(--xh-ink); }
.xh-price small { color: var(--xh-muted); }
.xh-placeholder { background: var(--xh-blue-soft); color: var(--xh-orange); }
.xh-color-1 { background: var(--xh-success-bg); color: var(--xh-success); }
.xh-color-2 { background: var(--xh-gold-bg); color: var(--xh-gold); }
.xh-color-3 { background: var(--xh-purple-bg); color: var(--xh-purple); }
.xh-meta>span { background: var(--xh-success-bg); color: var(--xh-success); border-color: var(--xh-success-line); }
.xh-meta .xh-delivery { background: var(--xh-blue-soft); color: var(--xh-orange); border-color: var(--xh-blue-line); }
.xh-meta .xh-bulk { background: var(--xh-gold-bg); color: var(--xh-gold); border-color: var(--xh-gold-line); }
.xh-buy { background: var(--xh-button); border-color: var(--xh-button); }
.xh-buy:hover { background: var(--xh-button-hover); border-color: var(--xh-button-hover); }
.xh-empty { background: var(--xh-surface); border-color: var(--xh-line); color: var(--xh-muted); }
.xh-empty h3 { color: var(--xh-ink); }
.xh-footer-top,.xh-footer-top>a:last-child,.xh-footer-bottom { color: var(--xh-muted); border-color: var(--xh-line); }
.xh-theme :focus-visible { outline-color: var(--xh-orange); }
.xh-theme .main-container .card,.xh-theme .main-container .card-body,.xh-theme .main-container .card-title { background: var(--xh-surface); border-color: var(--xh-line); color: var(--xh-ink); }
.xh-theme .card-header { background: var(--xh-raised); border-color: var(--xh-line); }
.xh-theme .text-muted { color: var(--xh-muted)!important; }
.xh-theme .text-warning { color: var(--xh-gold)!important; }
.xh-theme .text-danger { color: var(--xh-danger)!important; }
.xh-theme .text-success { color: var(--xh-success)!important; }
.xh-theme .main-container .form-control,.xh-theme .main-container .form-select { background: var(--xh-field); color: var(--xh-ink); border-color: var(--xh-line); }
.xh-theme .main-container .form-control::placeholder { color: var(--xh-muted); opacity: 1; }
.xh-theme .main-container .form-control:disabled,.xh-theme .main-container .form-control[readonly] { background: var(--xh-raised); }
.xh-theme .main-container label { color: var(--xh-muted); }
.xh-theme .main-container .btn-primary,.xh-theme .main-container .btn-dark,.xh-theme .main-container .btn-outline-primary { background: var(--xh-button); border-color: var(--xh-button); color: #fff; }
.xh-theme .main-container .btn-outline-dark { background: var(--xh-surface); color: var(--xh-orange); border-color: var(--xh-blue-line); }
.xh-theme .main-container .btn-outline-dark:hover { background: var(--xh-blue-soft); }
.xh-theme .main-container .nav-link { color: var(--xh-muted); }
.xh-theme .main-container .nav-link.active { color: var(--xh-orange); background: var(--xh-blue-soft); }
.xh-theme .main-container .text-primary { color: var(--xh-orange)!important; }
.xh-theme .modal-content { background: var(--xh-surface); color: var(--xh-ink); border-color: var(--xh-line); }
.xh-theme .modal-header,.xh-theme .modal-footer { border-color: var(--xh-line); }
.xh-theme .btn-close { filter: var(--xh-close-filter); }
.xh-theme textarea { color: var(--xh-ink); }
.xh-theme .main-container .input-group .btn { background: var(--xh-raised); color: var(--xh-ink); border-color: var(--xh-line); }
.xh-theme .main-container .card-body a:not(.btn) { color: var(--xh-orange); }
.xh-theme .table { color: var(--xh-ink); border-color: var(--xh-line); }
.xh-theme .table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: var(--xh-raised); color: var(--xh-ink); }
.xh-theme .badge.bg-warning,.xh-theme .badge.bg-info { color: #17212f; }
.xh-help-dialog { background: var(--xh-surface); color: var(--xh-ink); border-color: var(--xh-line); }
.xh-help-head,.xh-help-footer { border-color: var(--xh-line); }
.xh-help-head button { color: var(--xh-muted); }
.xh-help-content section>span { color: var(--xh-orange); border-color: var(--xh-blue-line); background: var(--xh-blue-soft); }
.xh-help-content p { color: var(--xh-muted); }
@media(max-width:900px) {
  .xh-header-inner { flex-wrap: wrap; height: auto; gap: 0; padding-top: 14px; }
  .xh-header nav { order: 3; flex-basis: 100%; height: 48px; }
  .xh-tools { order: 2; }
}
@media(max-width:760px) {
  .xh-sidebar { background: transparent; }
  .xh-groups button { background: var(--xh-surface); border-color: var(--xh-line); }
  .xh-groups button.is-active { background: var(--xh-button); color: #fff; border-color: var(--xh-button); }
}
@media(max-width:600px) {
  .xh-header .xh-brand { font-size: 18px; gap: 8px; }
  .xh-header .xh-logo-icon { width: 34px; height: 34px; }
  .xh-tools { gap: 7px; }
  .xh-appearance { padding: 2px; border-radius: 8px; }
  .xh-appearance button { padding: 6px; gap: 4px; font-size: 11px; }
  .xh-appearance svg { width: 14px; height: 14px; }
  .xh-language { padding: 4px 5px; font-size: 12px; }
  .xh-language>span[aria-hidden] { display: none; }
}
@media(max-width:380px) {
  .xh-appearance button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .xh-appearance button { min-width: 30px; min-height: 30px; }
}