/* The header's light/dark toggle button. */
.cb-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.cb-theme-toggle:hover { background: #e2e8f0; color: #0f172a; }
.cb-theme-toggle svg { width: 18px; height: 18px; }
.cb-theme-icon-moon { display: none; }
:root[data-theme="dark"] .cb-theme-icon-sun { display: none; }
:root[data-theme="dark"] .cb-theme-icon-moon { display: block; }

/* ---------------------------------------------------------------------------------------
   Dark theme. The site is built almost entirely from Tailwind's own utility classes rather
   than custom components, so this re-themes it by targeting those utility class names
   directly (bg-white, text-gray-900, border-gray-200, …) wherever the toggle is set to
   "dark" — one broad pass that reaches the homepage, shop, product pages, cart/checkout and
   the vendor/customer/staff portals alike, since they all lean on the same handful of
   classes, rather than needing bespoke dark variants written per page.
   ------------------------------------------------------------------------------------- */
:root[data-theme="dark"] {
	color-scheme: dark;
}
:root[data-theme="dark"] body.bg-gray-50 { background: #0b1220; }
:root[data-theme="dark"] .text-gray-900 { color: #e2e8f0; }
:root[data-theme="dark"] .text-gray-800 { color: #e2e8f0; }
:root[data-theme="dark"] .text-gray-700 { color: #cbd5e1; }
:root[data-theme="dark"] .text-gray-600 { color: #94a3b8; }
:root[data-theme="dark"] .text-gray-500 { color: #94a3b8; }
:root[data-theme="dark"] .text-gray-400 { color: #64748b; }

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .cb-filters,
:root[data-theme="dark"] .cb-shop-toolbar,
:root[data-theme="dark"] .cb-cat-card,
:root[data-theme="dark"] .cb-shop-empty {
	background: #141d33;
}
:root[data-theme="dark"] .cb-site-header.bg-white { background: #0f172a; }

:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200 { border-color: #263655; }
:root[data-theme="dark"] .cb-filter-group { border-color: #263655; }
:root[data-theme="dark"] .cb-filters-head { border-color: #263655; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
	background-color: #0f1b31;
	border-color: #324467 !important;
	color: #e2e8f0;
}
:root[data-theme="dark"] .cb-sort-form select { background-color: #0f1b31; color: #e2e8f0; }
:root[data-theme="dark"] .cb-filter-count { background: #1e293b; color: #94a3b8; }
:root[data-theme="dark"] .cb-product-placeholder { background: #1e293b; }
:root[data-theme="dark"] .bg-gray-100 { background: #1e293b; }

:root[data-theme="dark"] .cb-theme-toggle { background: #1e293b; color: #cbd5e1; }
:root[data-theme="dark"] .cb-theme-toggle:hover { background: #263655; color: #fff; }
:root[data-theme="dark"] .cb-lang-switch,
:root[data-theme="dark"] .cb-currency-switcher { background: #1e293b; color: #e2e8f0; border-color: #324467; }
:root[data-theme="dark"] .cb-lang-opt { color: #94a3b8; }
:root[data-theme="dark"] .cb-lang-opt.is-active { background: #0f1b31; color: #fff; }

:root[data-theme="dark"] .cb-breadcrumbs li { color: #64748b; }
:root[data-theme="dark"] .cb-breadcrumbs a { color: #94a3b8; }
:root[data-theme="dark"] .cb-breadcrumbs .cb-crumb-current { color: #e2e8f0; }

/* Shop/category components with their own literal (non-Tailwind) text colours. */
:root[data-theme="dark"] .cb-cat-name { color: #e2e8f0; }
:root[data-theme="dark"] .cb-shop-title { color: #e2e8f0; }
:root[data-theme="dark"] .cb-shop-search-heading { color: #94a3b8; }
:root[data-theme="dark"] .cb-filters-title,
:root[data-theme="dark"] .cb-filter-group > summary,
:root[data-theme="dark"] .cb-shop-count,
:root[data-theme="dark"] .cb-sort-form select,
:root[data-theme="dark"] .cb-filters-toggle { color: #e2e8f0; }
:root[data-theme="dark"] .cb-filter-list label { color: #cbd5e1; }
:root[data-theme="dark"] .cb-filter-list label:hover { background: #1e293b; }
:root[data-theme="dark"] .cb-chips-clear:hover { color: #cbd5e1; }
:root[data-theme="dark"] .cb-shop-empty { color: #94a3b8; border-color: #324467; }
:root[data-theme="dark"] .cb-filters-toggle { background: linear-gradient(180deg, #1e293b, #141d33); border-color: #324467; }

:root[data-theme="dark"] .cb-chip { background: #0f1b31; border-color: #324467; }
:root[data-theme="dark"] .cb-pager-btn { background: #141d33; border-color: #324467; color: #e2e8f0; }
:root[data-theme="dark"] .cb-pager-next, :root[data-theme="dark"] .cb-pager-prev { background: linear-gradient(180deg, #141d33, #0f1b31); }
:root[data-theme="dark"] .cb-pager-btn.is-disabled { background: #0f1b31; }

@media (prefers-reduced-motion: reduce) {
	.cb-theme-toggle { transition: none; }
}