/* Shared header control and an alternate plum-toned palette for every page. */
:root { color-scheme: light; }
.nav { height: auto; min-height: 74px; gap: 18px; padding-block: 14px; flex-wrap: wrap; }
.brand-group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-group .brand { min-width: 0; }
.theme-toggle {
  flex: none; min-height: 44px; padding: 9px 12px; border: 1px solid #d9bdca;
  border-radius: 999px; background: #fff; color: #5a194c; cursor: pointer;
  font: 650 .875rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle span { display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle .to-light { display: none; }
.theme-toggle:hover { background: #f8e8e5; }
.theme-toggle:focus-visible, a:focus-visible { outline: 3px solid #b6295f; outline-offset: 4px; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #17121a; color: #f8edf5; }
html[data-theme="dark"] header { background: rgba(23,18,26,.95); border-color: #4b354b; }
html[data-theme="dark"] .brand,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .head h1,
html[data-theme="dark"] .head h2,
html[data-theme="dark"] .contact h2 { color: #fff2fb; }
html[data-theme="dark"] .brand span,
html[data-theme="dark"] .hero h1 em,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .price,
html[data-theme="dark"] .num,
html[data-theme="dark"] .back { color: #f7a8ce; }
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .head p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .contact p,
html[data-theme="dark"] .product p,
html[data-theme="dark"] footer { color: #d5bdd0; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .product,
html[data-theme="dark"] .detail { background: #281f2d; border-color: #4b354b; }
html[data-theme="dark"] .contact { background: #322337; }
html[data-theme="dark"] .icon { background: #483046; }
html[data-theme="dark"] .banner { background: #46223e; }
html[data-theme="dark"] .detail small { color: #deb4cf; }
html[data-theme="dark"] .step,
html[data-theme="dark"] .foot { border-color: #4b354b; }
html[data-theme="dark"] .btn { background: #edabd0; color: #301126; box-shadow: none; }
html[data-theme="dark"] .btn.light { background: #4a344a; color: #fff2fb; }
html[data-theme="dark"] .available { color: #8ee0b3; }
html[data-theme="dark"] .available:before { background: #8ee0b3; }
html[data-theme="dark"] .theme-toggle { background: #281f2d; border-color: #70506b; color: #f7c1de; }
html[data-theme="dark"] .theme-toggle:hover { background: #483046; }
html[data-theme="dark"] .theme-toggle .to-dark { display: none; }
html[data-theme="dark"] .theme-toggle .to-light { display: inline-flex; }
html[data-theme="dark"] .theme-toggle:focus-visible,
html[data-theme="dark"] a:focus-visible { outline-color: #f7a8ce; }
@media (max-width: 540px) {
  .brand-group { gap: 10px; width: 100%; }
  .brand-group .brand { font-size: 1.1rem; }
  .theme-toggle { padding-inline: 10px; }
}