.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #f0f1f2;
  flex-shrink: 0;
  white-space: nowrap;
  color: #616770;
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font:
    500 11px "Noto Sans Thai",
    system-ui,
    sans-serif;
  padding: 8px 10px;
  line-height: 1;
  min-height: 31px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  opacity: 1;
}
.theme-switch button[aria-pressed="true"] {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 5px #0002;
}
.theme-switch button:hover {
  transform: none;
  background: #e3e5e8;
}
.theme-switch button[aria-pressed="true"]:hover {
  background: #fff;
}
.theme-switch button:focus-visible {
  outline: 2px solid #008c84;
  outline-offset: 3px;
}
.theme-symbol {
  font-size: 15px;
  line-height: 1;
}
.admin-header-tools {
  display: flex;
  align-items: center;
  gap: 22px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1012;
  --ink: #f2f3f5;
  --line: #353a40;
}
html[data-theme="dark"] body {
  background: #0e1012;
  color: #f2f3f5;
}
html[data-theme="dark"] header {
  background: #121518;
  color: #f2f3f5;
}
html[data-theme="dark"] header .brand-image img {
  filter: invert(1);
}
html[data-theme="dark"] .theme-switch {
  background: #242930;
  border-color: #3b424b;
  color: #b9c0ca;
}
html[data-theme="dark"] .theme-switch button[aria-pressed="true"] {
  background: #454d59;
  color: #fff;
  box-shadow: 0 1px 5px #0005;
}
html[data-theme="dark"] .theme-switch button:hover {
  background: #343c46;
  color: #fff;
}
html[data-theme="dark"] .search {
  background: #252a30;
  color: #e7ebef;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color: #f2f3f5;
  background: #1d2228;
  border-color: #414852;
}
html[data-theme="dark"] header .search input {
  background: transparent;
  border: 0;
  color: #f2f3f5;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #969faa;
}
html[data-theme="dark"] .icon sup {
  background: #eee;
  color: #111;
}
html[data-theme="dark"] .filters button,
html[data-theme="dark"] .availability-tabs button {
  background: #1c2127;
  border-color: #414852;
  color: #c7cdd5;
}
html[data-theme="dark"] .filters button.active {
  background: #f2f3f5;
  color: #111;
  border-color: #f2f3f5;
}
html[data-theme="dark"] .availability-tabs button.active {
  background: #007f79;
  border-color: #007f79;
  color: white;
}
html[data-theme="dark"] .availability-tabs ~ .filters {
  border-color: #353a40;
}
html[data-theme="dark"] .meta,
html[data-theme="dark"] .detail-info > p,
html[data-theme="dark"] .detail-info .variant-sku,
html[data-theme="dark"] .back-to-shop,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .muted {
  color: #b0b8c3;
}
html[data-theme="dark"] .meta span:last-child,
html[data-theme="dark"] .detail-info #variant-price {
  color: #f2f3f5;
}
html[data-theme="dark"] .product .photo,
html[data-theme="dark"] .detail-gallery .detail-image {
  background: #1c2127;
}
html[data-theme="dark"] .detail-gallery .image-thumbs button {
  background: #1c2127;
  border-color: #414852;
}
html[data-theme="dark"] .detail-info input,
html[data-theme="dark"] .detail-info select {
  background: #1d2228;
  color: #f2f3f5;
  border-color: #414852;
}
html[data-theme="dark"] .drawer {
  background: #15191e;
  color: #f2f3f5;
  border: 1px solid #353a40;
}
html[data-theme="dark"] .recipient-checkout > label,
html[data-theme="dark"] .recipient-heading label {
  color: #e5e9ef;
}
html[data-theme="dark"] .recipient-checkout .recipient-field input,
html[data-theme="dark"] .recipient-checkout .recipient-field textarea,
html[data-theme="dark"] .recipient-checkout .location-picker input,
html[data-theme="dark"] .recipient-checkout .manual-address-fields input {
  background: #222830;
  color: #f2f3f5;
  border-color: #414852;
}
html[data-theme="dark"] #location-results {
  background: #20262e;
  border-color: #414852;
}
html[data-theme="dark"] #location-results button {
  background: #20262e;
  border-color: #353a40;
  color: #f2f3f5;
}
html[data-theme="dark"] #location-results button:hover,
html[data-theme="dark"] #location-results button[aria-selected="true"],
html[data-theme="dark"] .location-summary {
  background: #173e3c;
  color: #c6f3eb;
}
html[data-theme="dark"] .location-hint,
html[data-theme="dark"] .char-count {
  color: #a3adb9;
}
html[data-theme="dark"] .payment-box {
  background: #252b32;
  color: #e9edf2;
}
html[data-theme="dark"] .cta,
html[data-theme="dark"] .purchase-actions .buy-now,
html[data-theme="dark"] #checkout {
  background: #f2f3f5 !important;
  color: #111 !important;
}
html[data-theme="dark"] .purchase-actions .add-cart-compact {
  background: #242a32;
  color: #f2f3f5;
  border-color: #414852;
}
html[data-theme="dark"] .total,
html[data-theme="dark"] .cart-row {
  border-color: #414852;
}
html[data-theme="dark"] footer {
  background: #090b0d;
  color: #e5e9ef;
  border-color: #353a40;
}
html[data-theme="dark"] #toast,
html[data-theme="dark"] #notice {
  background: #e9edf2;
  color: #111;
}
html[data-theme="dark"] .badge {
  background: #232a31;
  color: #f1b797;
}
html[data-theme="dark"] section,
html[data-theme="dark"] .card,
html[data-theme="dark"] dialog {
  background: #181d23;
  color: #f2f3f5;
}
html[data-theme="dark"] .motion-hero {
  background: #050505;
  color: #fff;
}
html[data-theme="dark"] .editorial,
html[data-theme="dark"] .manifesto,
html[data-theme="dark"] #shop {
  background: #0e1012;
}
html[data-theme="dark"] nav button:not([data-theme-choice]),
html[data-theme="dark"] .row button,
html[data-theme="dark"] td button,
html[data-theme="dark"] .image-card button,
html[data-theme="dark"] dialog button {
  background: #242a32;
  color: #f2f3f5;
  border-color: #414852;
}
html[data-theme="dark"] nav button.active,
html[data-theme="dark"] .primary {
  background: #edf0f4;
  color: #111;
}
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: #353a40;
}
html[data-theme="dark"] .pill {
  background: #303842;
  color: #e5e9ef;
}
html[data-theme="dark"] .error {
  color: #ff9e9e;
}
html[data-theme="dark"] #product-error,
html[data-theme="dark"] #checkout-error {
  color: #ff9e9e;
}
@media (max-width: 600px) {
  header .tools {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 110px);
  }
  header .tools .search {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    padding: 8px 11px;
  }
  .theme-switch button {
    font-size: 10px;
    padding: 7px 8px;
    gap: 3px;
  }
  .theme-switch {
    padding: 3px;
    gap: 2px;
  }
  .admin-header-tools {
    gap: 12px;
  }
  body > header:has(.admin-header-tools) {
    flex-wrap: wrap;
    gap: 14px;
  }
  .admin-header-tools {
    width: 100%;
    justify-content: space-between;
  }
  body > header:has(.admin-header-tools) > strong {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch button {
    transition: none;
  }
}
html[data-theme="dark"] header nav[aria-label] button {
  background: transparent;
  color: #f2f3f5;
}

.customer-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 10px 3%;
  background: #f5f5f5;
  color: #111;
  min-height: 40px;
}
.customer-utility button {
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s;
}
.customer-utility button:hover {
  transform: scale(1.04);
}
.customer-utility button:focus-visible {
  outline: 2px solid #00857e;
  outline-offset: 4px;
}
.customer-utility span {
  font-size: 14px;
}
.customer-account-options {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.customer-account-options button {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: not-allowed;
}
html[data-theme="dark"] .customer-utility {
  background: #191c20;
  color: #f2f3f5;
}
@media (max-width: 600px) {
  .customer-utility {
    gap: 10px;
    padding: 9px 12px;
  }
  .customer-utility button {
    font-size: 11px;
  }
  .customer-utility span {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .customer-utility button {
    transition: none;
  }
}

.customer-utility {
  width: 100%;
  margin: 0;
  order: 0;
  overflow: visible;
  white-space: nowrap;
}
html[data-theme="dark"] nav.customer-utility button {
  background: transparent;
  color: inherit;
  border: 0;
}

.product-size-guide {
  margin: 14px 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.product-size-guide summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.size-guide-scroll {
  overflow-x: auto;
  margin-top: 16px;
}
.product-size-guide table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}
.product-size-guide caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 12px;
}
.product-size-guide th,
.product-size-guide td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.product-size-guide th {
  background: #f4f4f4;
}
html[data-theme="dark"] .product-size-guide th {
  background: #24282d;
}