/* ================= Language & night mode switches ================= */
.hdr-prefs, .foot-prefs, .mnav-prefs { display: flex; align-items: center; gap: 6px; }
.pref-btn {
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2);
  transition: border-color .2s, color .2s, background-color .2s;
}
.pref-btn:hover { border-color: var(--brand); color: var(--brand); }
.pref-btn span { line-height: 1; }
.pref-wide { height: 40px; padding: 0 14px; }
.mnav-prefs { margin: 14px 0 2px; }
.foot-prefs { margin-inline-start: auto; }
.cust-box { font-size: 13.5px; color: var(--ink-2); background: var(--soft); border-radius: 12px; padding: 12px 14px; line-height: 1.8; }
.chip { padding: 0; padding-inline: 14px 8px; }

/* ================= English: the page reads left to right ================= */
[dir="ltr"] .ic-dir { transform: scaleX(-1); }
[dir="ltr"] .drawer { transform: translateX(100%); }
[dir="ltr"] .drawer.drawer-start { transform: translateX(-100%); }
[dir="ltr"] .drawer.open { transform: none; }
[dir="ltr"] .search select { padding: 0 30px 0 14px; background-position: right 10px center; }
[dir="ltr"] select.input { background-position: right 12px center; }
[dir="ltr"] .input[dir="ltr"] { text-align: left; }
[dir="ltr"] .cline.leaving { transform: translateX(28px); }
[dir="ltr"] .slide h1 { letter-spacing: -.5px; }
@media (max-width: 960px) {
  [dir="ltr"] .filters { transform: translateX(-100%); }
  [dir="ltr"] .filters.open { transform: none; }
  [dir="ltr"] .bottom-nav .badge { left: calc(50% + 1px); }
}

/* ================= Night mode =================
   Only applies when the storefront sets data-theme="dark" (the dashboard never does). */
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1220;
  --surface: #111a2b;
  --field: #0e1726;
  --soft: #172235;
  --line: #213049;
  --line-2: #2c3c58;
  --ink: #e8eef6;
  --ink-2: #b9c5d6;
  --muted: #8796ab;
  --brand: #1bb5a3;
  --brand-600: #3fd0bd;
  --brand-50: rgba(27, 181, 163, .13);
  --brand-100: rgba(27, 181, 163, .24);
  --navy: #9cc0f0;
  --navy-700: #070d18;
  --sale: #ff6b70;
  --sale-50: rgba(255, 107, 112, .14);
  --ok: #3ad480;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 10px 28px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] body { background: var(--page); }
[data-theme="dark"] img { color-scheme: normal; }

/* surfaces that were white */
[data-theme="dark"] .pcard, [data-theme="dark"] .card, [data-theme="dark"] .filters, [data-theme="dark"] .drawer,
[data-theme="dark"] .modal, [data-theme="dark"] .modal-head, [data-theme="dark"] .modal-foot, [data-theme="dark"] .bottom-nav,
[data-theme="dark"] .scroll-btns button, [data-theme="dark"] .btn-light, [data-theme="dark"] .fav, [data-theme="dark"] .tl i,
[data-theme="dark"] .promo .ci, [data-theme="dark"] .flist a .count { background: var(--surface); }
[data-theme="dark"] .input, [data-theme="dark"] .pin { background-color: var(--field); }
[data-theme="dark"] .pcard .pimg, [data-theme="dark"] .pdp-main, [data-theme="dark"] .pdp-thumbs button, [data-theme="dark"] .mo-row .cimg { background: #18233a; }
[data-theme="dark"] .noimg { color: #3a4a64; }
[data-theme="dark"] .loc-box { background: var(--soft); }
[data-theme="dark"] .mo-row:hover { background: var(--soft); }
[data-theme="dark"] .ship-progress .bar { background: var(--line); }

/* things drawn in the text colour now need dark text on them */
[data-theme="dark"] .btn-dark { background: var(--ink); color: var(--page); }
[data-theme="dark"] .btn-dark:hover { background: #cdd7e4; }
[data-theme="dark"] .btn-soft:hover { background: var(--line-2); }
[data-theme="dark"] .card-head .step, [data-theme="dark"] .summary .cline .cimg span,
[data-theme="dark"] .pcard .oos span { background: var(--ink); color: var(--page); }
[data-theme="dark"] .pcard .oos { background: rgba(11, 18, 32, .55); }
[data-theme="dark"] .icon-btn .badge, [data-theme="dark"] .bottom-nav .badge { border-color: var(--page); }
[data-theme="dark"] .socials a { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .socials a:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .toast { background: #1d2a40; color: var(--ink); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7); }
[data-theme="dark"] .toast-err { background: var(--sale); color: #fff; }

/* header, search and menu */
[data-theme="dark"] .site-header { background: rgba(11, 18, 32, .9); border-color: var(--line); }
[data-theme="dark"] .announce { color: #b9c8db; }
[data-theme="dark"] .logo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme="dark"] .search { background: var(--field); border-color: var(--line-2); }
[data-theme="dark"] .search:hover { background-color: var(--surface); border-color: #2f6f6a; }
[data-theme="dark"] .search:focus-within { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #0b8f80, #2fd4bf, #9af0e2, #1bb5a3, #0b8f80) border-box; background-size: 100% 100%, 300% 100%; }
[data-theme="dark"] .search select { color: var(--brand-600); border-color: var(--line-2); }
[data-theme="dark"] .search input::placeholder { color: #6f8197; }
[data-theme="dark"] .mega { background: rgba(14, 22, 38, .98); }
[data-theme="dark"] .mega-dim { background: rgba(4, 8, 16, .45); }
[data-theme="dark"] .cat-trigger.mg-on { background: var(--brand-50); }

/* section colours */
[data-theme="dark"] .tone-teal { background: rgba(27, 181, 163, .14); color: #3fd0bd; }
[data-theme="dark"] .tone-rose { background: rgba(240, 90, 125, .14); color: #f37d98; }
[data-theme="dark"] .tone-blue { background: rgba(80, 140, 240, .15); color: #7eaaf5; }
[data-theme="dark"] .tone-amber { background: rgba(240, 170, 50, .14); color: #f2bd55; }
[data-theme="dark"] .tone-green { background: rgba(50, 190, 100, .14); color: #5fd38c; }
[data-theme="dark"] .tone-violet { background: rgba(140, 110, 240, .16); color: #a990f7; }
[data-theme="dark"] .tone-slate { background: rgba(150, 165, 190, .14); color: #aab7ca; }
[data-theme="dark"] .tone-orange { background: rgba(240, 120, 50, .14); color: #f59a62; }
[data-theme="dark"] .st-new { background: rgba(80, 140, 240, .15); color: #8db3f6; }
[data-theme="dark"] .st-confirmed { background: rgba(240, 170, 50, .15); color: #f2bd55; }
[data-theme="dark"] .st-shipped { background: rgba(140, 110, 240, .16); color: #b29cf8; }
[data-theme="dark"] .st-delivered { background: rgba(50, 190, 100, .15); color: #5fd38c; }
[data-theme="dark"] .st-cancelled { background: var(--soft); color: var(--muted); }

/* home banners */
[data-theme="dark"] .slide-1 { background: linear-gradient(120deg, #0d2b2a 0%, #10393a 55%, #123247 100%); }
[data-theme="dark"] .slide-2 { background: linear-gradient(120deg, #0c1f38 0%, #12345a 60%, #134e5c 100%); }
[data-theme="dark"] .slide-3 { background: linear-gradient(120deg, #2a2114 0%, #33261a 100%); }
[data-theme="dark"] .slide-3 .eyebrow { color: #f0a85a; }
[data-theme="dark"] .slide::before { border-color: rgba(255, 255, 255, .05); }
[data-theme="dark"] .slide::after { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .slide-1 .btn-light, [data-theme="dark"] .slide-3 .btn-light { background: transparent; border-color: rgba(255, 255, 255, .25); }
[data-theme="dark"] .hero-dots button { background: rgba(255, 255, 255, .25); }
[data-theme="dark"] .hero-dots button.on { background: var(--brand); }
[data-theme="dark"] .sc-sale { background: rgba(255, 107, 112, .12); }
[data-theme="dark"] .sc-ship, [data-theme="dark"] .promo-a { background: rgba(80, 140, 240, .12); }
[data-theme="dark"] .promo-b { background: rgba(240, 120, 50, .12); }
[data-theme="dark"] .promo-b .eyebrow { color: #f59a62; }
[data-theme="dark"] .cta-dark { background: #0f1b30; border: 1px solid var(--line); }
[data-theme="dark"] .site-footer { background: #0d1526; }