/* Shared color mode for the storefront and its supporting pages. */
:root { color-scheme: light; }
.theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid #cdb4a9; border-radius: 999px; background: transparent; color: #501e2b; padding: 9px 12px; font: 11px Arial, sans-serif; cursor: pointer; }
.theme-toggle:hover { background: #eadbd2; }
.theme-toggle:focus-visible { outline: 2px solid #a55b6d; outline-offset: 3px; }
@media (max-width: 600px) { .theme-toggle { padding: 8px; font-size: 10px; } }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #21171a; color: #f4e7df; }
html[data-theme="dark"] nav { background: #2a1b20; border-color: #62434a; color: #f4e7df; }
html[data-theme="dark"] nav img { background: transparent; filter: brightness(0) invert(1); }
html[data-theme="dark"] .theme-toggle { color: #f8eae2; border-color: #95717a; }
html[data-theme="dark"] .theme-toggle:hover { background: #50343d; }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] .crumb, html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .shop-shortcuts > span { color: #d6beb8; }
html[data-theme="dark"] .categories, html[data-theme="dark"] .featured-spotlight, html[data-theme="dark"] .panel, html[data-theme="dark"] .contact, html[data-theme="dark"] .scent-panel, html[data-theme="dark"] .policy-bar, html[data-theme="dark"] .policy-bottom { background: #342329; color: #f4e7df; }
html[data-theme="dark"] .product h3, html[data-theme="dark"] .product .price, html[data-theme="dark"] .bag, html[data-theme="dark"] .shared-bag-button, html[data-theme="dark"] .policy-link, html[data-theme="dark"] .policy-bar a, html[data-theme="dark"] .policy-bottom a, html[data-theme="dark"] .footer-nav a, html[data-theme="dark"] .footer-social a, html[data-theme="dark"] .social-links a, html[data-theme="dark"] .contact a { color: #f4e7df; }
html[data-theme="dark"] .filter, html[data-theme="dark"] .shop-shortcuts button { background: #342329; color: #f5e8e0; border-color: #94717a; }
html[data-theme="dark"] .filter.active, html[data-theme="dark"] .filter:hover, html[data-theme="dark"] .shop-shortcuts button:hover, html[data-theme="dark"] .shop-shortcuts button:focus-visible { background: #b46b79; color: #1f1115; border-color: #b46b79; }
html[data-theme="dark"] .drawer, html[data-theme="dark"] .shared-drawer, html[data-theme="dark"] .mascot-message { background: #342329; color: #f4e7df; border-color: #72515a; }
html[data-theme="dark"] .shared-head h2, html[data-theme="dark"] .shared-close, html[data-theme="dark"] .shared-remove, html[data-theme="dark"] .close, html[data-theme="dark"] .remove, html[data-theme="dark"] .row button, html[data-theme="dark"] .mascot-message strong, html[data-theme="dark"] .scent-panel label { color: #f4e7df; }
html[data-theme="dark"] .shared-head, html[data-theme="dark"] .drawer-head, html[data-theme="dark"] .shared-line, html[data-theme="dark"] .drawer .line, html[data-theme="dark"] .row, html[data-theme="dark"] .line { border-color: #72515a; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] select#customer-governorate, html[data-theme="dark"] .scent-panel select, html[data-theme="dark"] .chat-form input { background: #21171a; color: #f7eae3; border-color: #896770; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #c4aaa6; }
html[data-theme="dark"] .chat-log, html[data-theme="dark"] .assistant-choice, html[data-theme="dark"] .size-options span { background: #4a3038; color: #f4e7df; border-color: #896770; }
html[data-theme="dark"] .assistant-choice:hover { background: #62414a; }
html[data-theme="dark"] .chat-line.user { color: #f0b8bd; }
html[data-theme="dark"] .size-options input:checked + span { background: #b46b79; color: #1f1115; }
html[data-theme="dark"] .placeholder { background: #4a3038; color: #f4e7df; }
html[data-theme="dark"] .tile .eyebrow { color: white; }
html[data-theme="dark"] .hero p, html[data-theme="dark"] .story p { color: #e9d9d4; }

/* Keep all main navigation links available on narrow screens. */
@media (max-width: 760px) {
  body > nav { flex-wrap: wrap; }
  body > nav .brand, body > nav > a:first-child { flex: 0 0 auto; }
  body > nav .brand-logo, body > nav > a:first-child img { display: block; width: 58px; height: 58px; object-fit: contain; }
  nav .navlinks { order: 4; flex: 0 0 100%; justify-content: center; gap: 24px; padding: 8px 0 10px; }
  nav .navlinks a:nth-child(2), nav .navlinks a:nth-child(3) { display: inline; }
}