/* ==========================================================================
   BUYAMTO dark mode. Applies only under html[data-theme="dark"] (set by the
   theme-mode script from the visitor's choice or their device setting).
   Same warm palette as the light site, turned down: warm near-black, soft
   cream text, the same orange for actions and a lighter teal for links.
   ========================================================================== */

/* Header sun/moon button (shown in both modes). */
.by-mode-item { display: flex; align-items: center; }
.by-mode-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 0 !important; height: 40px; margin: 0 6px; padding: 0 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.by-mode-btn:focus-visible { outline: 2px solid var(--by-teal); outline-offset: 2px; }
.by-mode-btn svg { display: block; }
/* Track with a sun on the left and a moon on the right; the knob slides over the mode in use. */
.by-mode-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 58px; height: 30px; padding: 0 6px; border-radius: 999px; background: #EFE9DF; border: 1px solid #E2DACD; box-sizing: border-box; }
.by-mode-ic { position: relative; z-index: 1; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: #8B857B; transition: color .2s ease; }
.by-mode-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26,24,21,.25); transition: transform .22s ease, background-color .22s ease; }
.by-mode-ic--sun { color: #C94F0A; }
html[data-theme="dark"] .by-mode-track { background: #2A2722; border-color: #3A362F; }
html[data-theme="dark"] .by-mode-knob { transform: translateX(28px); background: #F3EFE8; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
html[data-theme="dark"] .by-mode-ic--sun { color: #8B857B; }
html[data-theme="dark"] .by-mode-ic--moon { color: #141311; }
.by-mode-btn:hover .by-mode-track { border-color: var(--by-teal); }
@media (prefers-reduced-motion: reduce) { .by-mode-knob, .by-mode-ic { transition: none; } }

/* Appearance choice (My Account). */
.by-appearance { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 4px; border-radius: 999px; background: var(--by-warm); }
.by-appearance button { min-height: 40px !important; margin: 0; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--by-ink-soft); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.by-appearance button[aria-checked="true"] { background: var(--by-surface); color: var(--by-ink); box-shadow: 0 1px 2px rgba(26,24,21,.08), 0 4px 12px -6px rgba(26,24,21,.25); }
.by-appearance__s { font-size: .72em; font-weight: 600; color: var(--by-grey); }
.by-appearance button:focus-visible { outline: 2px solid var(--by-teal); outline-offset: 2px; }

/* ---------- Palette ---------- */
html[data-theme="dark"] {
	color-scheme: dark;
	--by-bg: #141311;
	--by-warm: #221F1B;
	--by-surface: #1C1B18;
	--by-ink: #F3EFE8;
	--by-ink-soft: #CEC7BB;
	--by-grey: #9C9589;
	--by-line: #34302A;
	--by-orange: #C94F0A;
	--by-orange-dark: #DE6420;
	--by-teal: #45B8C1;
	--by-teal-dark: #6CCBD2;
	--by-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -26px rgba(0, 0, 0, .7);
	--by-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 40px 70px -34px rgba(0, 0, 0, .8);
	/* Earn share sheet */
	--bp-muted: #9C9589;
}

/* The home page sets its palette on its own section, so it is switched there too. */
html[data-theme="dark"] .su-home, html[data-theme="dark"] [class*="su-"] {
	--su-bg: #141311;
	--su-bg-warm: #221F1B;
	--su-surface: #1C1B18;
	--su-ink: #F3EFE8;
	--su-ink-soft: #CEC7BB;
	--su-grey: #9C9589;
	--su-line: #34302A;
	--su-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -26px rgba(0, 0, 0, .7);
	--su-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 40px 70px -34px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #main,
html[data-theme="dark"] .page-wrapper { background-color: var(--by-bg); color: var(--by-ink-soft); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .heading-font, html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] label, html[data-theme="dark"] legend { color: var(--by-ink); }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] dd, html[data-theme="dark"] .entry-content { color: var(--by-ink-soft); }
html[data-theme="dark"] a { color: var(--by-teal); }
html[data-theme="dark"] a:hover { color: var(--by-teal-dark); }
html[data-theme="dark"] hr, html[data-theme="dark"] .is-divider { border-color: var(--by-line); background-color: var(--by-line); }
html[data-theme="dark"] ::selection { background: var(--by-orange); color: #fff; }
html[data-theme="dark"] img { opacity: .96; }

/* ---------- Header ---------- */
html[data-theme="dark"] .header-wrapper, html[data-theme="dark"] #header .header-main, html[data-theme="dark"] .header-wrapper.stuck .header-main,
html[data-theme="dark"] .header-top, html[data-theme="dark"] #header .header-bottom, html[data-theme="dark"] .header-bg-color { background-color: var(--by-bg) !important; }
html[data-theme="dark"] #header .header-bottom { border-top-color: var(--by-line); }
html[data-theme="dark"] .header-wrapper.stuck { box-shadow: 0 1px 0 var(--by-line); }
html[data-theme="dark"] .header-nav > li > a, html[data-theme="dark"] .header-bottom-nav > li > a, html[data-theme="dark"] .nav > li > a,
html[data-theme="dark"] .header-cart-title, html[data-theme="dark"] .header-cart-title .cart-price, html[data-theme="dark"] .nav-icon a, html[data-theme="dark"] .account-item a,
html[data-theme="dark"] .icon-user, html[data-theme="dark"] .icon-menu, html[data-theme="dark"] .icon-search, html[data-theme="dark"] .header-button a { color: var(--by-ink-soft); }
html[data-theme="dark"] .header-nav > li > a:hover, html[data-theme="dark"] .header-bottom-nav > li > a:hover, html[data-theme="dark"] .header-nav > li.active > a,
html[data-theme="dark"] .header-bottom-nav > li.active > a, html[data-theme="dark"] .header-bottom-nav > li.current-menu-item > a { background-color: var(--by-warm); color: var(--by-ink); }
html[data-theme="dark"] .header-nav .account-item .header-button a, html[data-theme="dark"] .account-item .button { background: var(--by-warm); color: var(--by-ink); }
html[data-theme="dark"] .cart-icon strong { color: var(--by-teal); border-color: var(--by-teal); }
html[data-theme="dark"] .cart-icon strong:after { border-color: var(--by-teal); }
html[data-theme="dark"] .header-logo-dark { display: none; }
html[data-theme="dark"] .searchform .button.icon, html[data-theme="dark"] .searchform .ux-search-submit { background: transparent; color: var(--by-ink); }
html[data-theme="dark"] .nav-dropdown, html[data-theme="dark"] .nav-dropdown-default, html[data-theme="dark"] .live-search-results, html[data-theme="dark"] .autocomplete-suggestions { background: var(--by-surface); border-color: var(--by-line); color: var(--by-ink-soft); }
html[data-theme="dark"] .nav-dropdown li a, html[data-theme="dark"] .autocomplete-suggestion { color: var(--by-ink-soft); border-color: var(--by-line); }
html[data-theme="dark"] .nav-dropdown li a:hover, html[data-theme="dark"] .autocomplete-suggestion.autocomplete-selected { background: var(--by-warm); color: var(--by-ink); }

/* Phone menu (slides in from the side) and the cart side panel */
html[data-theme="dark"] .off-canvas .mfp-content, html[data-theme="dark"] .off-canvas-left .mfp-content, html[data-theme="dark"] .off-canvas-right .mfp-content,
html[data-theme="dark"] .mobile-sidebar, html[data-theme="dark"] .sidebar-menu, html[data-theme="dark"] .cart-popup-inner { background-color: var(--by-surface) !important; color: var(--by-ink-soft); }
html[data-theme="dark"] .nav-sidebar > li > a, html[data-theme="dark"] .nav-vertical li a, html[data-theme="dark"] .mobile-sidebar .nav > li > a, html[data-theme="dark"] .sidebar-menu li a { color: var(--by-ink); }
html[data-theme="dark"] .nav-sidebar > li + li, html[data-theme="dark"] .nav-vertical li li, html[data-theme="dark"] .nav-sidebar.nav-vertical > li + li, html[data-theme="dark"] .mobile-sidebar .nav > li { border-color: var(--by-line); }
html[data-theme="dark"] .toggle, html[data-theme="dark"] .mfp-close { color: var(--by-ink-soft); }
html[data-theme="dark"] .mfp-bg { background: #000; }
html[data-theme="dark"] .widget_shopping_cart, html[data-theme="dark"] .widget_shopping_cart_content, html[data-theme="dark"] .ux-mini-cart-empty { color: var(--by-ink-soft); }
html[data-theme="dark"] .cart_list li, html[data-theme="dark"] .woocommerce-mini-cart-item, html[data-theme="dark"] .woocommerce-mini-cart__total { border-color: var(--by-line); }
html[data-theme="dark"] .ux-mini-cart-empty-icon svg, html[data-theme="dark"] .ux-mini-cart-empty-icon path { fill: var(--by-grey); }

/* ---------- Forms ---------- */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=url], html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
	background-color: var(--by-surface); border-color: var(--by-line); color: var(--by-ink);
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--by-grey); opacity: 1; }
html[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CEC7BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--by-ink); }
html[data-theme="dark"] .select2-results__option { color: var(--by-ink-soft); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background: var(--by-warm); color: var(--by-ink); }
html[data-theme="dark"] input[type=checkbox], html[data-theme="dark"] input[type=radio] { accent-color: var(--by-orange); }
html[data-theme="dark"] .quantity, html[data-theme="dark"] .quantity .button.minus, html[data-theme="dark"] .quantity .button.plus { background: var(--by-surface); border-color: var(--by-line); color: var(--by-ink); }
html[data-theme="dark"] .quantity input.qty { color: var(--by-ink); background: transparent; }

/* ---------- Buttons ---------- */
html[data-theme="dark"] .button:not(.primary):not(.alt):not(.secondary):not(.is-outline):not(.is-link):not(.checkout-button):not(.single_add_to_cart_button):not(.by-mode-btn),
html[data-theme="dark"] button.button:not(.primary):not(.alt):not(.secondary) { background-color: var(--by-warm); border-color: var(--by-line); color: var(--by-ink); }
html[data-theme="dark"] .button.is-outline { border-color: var(--by-ink); color: var(--by-ink); }
html[data-theme="dark"] .button.is-outline:hover { background: var(--by-ink); border-color: var(--by-ink); color: var(--by-bg); }
html[data-theme="dark"] .button.is-outline.primary { border-color: #E2733A; color: #F08A50; }
html[data-theme="dark"] .button.is-outline.primary:hover { background: var(--by-orange); border-color: var(--by-orange); color: #fff; }
html[data-theme="dark"] .button.is-outline.secondary { border-color: var(--by-teal); color: var(--by-teal); }
html[data-theme="dark"] .button.secondary { background-color: #0E7C86; border-color: #0E7C86; color: #fff; }
html[data-theme="dark"] .product-info .ux-buy-now-button, html[data-theme="dark"] .product-info .ux-buy-now-button.button.primary { background-color: var(--by-ink); border-color: var(--by-ink); color: var(--by-bg); }
html[data-theme="dark"] .product-info .ux-buy-now-button:hover { background-color: var(--by-orange); border-color: var(--by-orange); color: #fff; }

/* ---------- Page titles, shop, product ---------- */
html[data-theme="dark"] .page-title, html[data-theme="dark"] .shop-page-title, html[data-theme="dark"] .title-wrapper.page-title, html[data-theme="dark"] .my-account-header { background-color: var(--by-warm) !important; }
html[data-theme="dark"] .breadcrumbs, html[data-theme="dark"] .breadcrumbs a, html[data-theme="dark"] .divider { color: var(--by-grey); }
html[data-theme="dark"] .product-small.box, html[data-theme="dark"] .products .product-small.box { background: var(--by-surface); border-color: var(--by-line); }
html[data-theme="dark"] .product-small .box-image { background: #fff; }
html[data-theme="dark"] .box-text, html[data-theme="dark"] .product-small .category, html[data-theme="dark"] .box-text .category { color: var(--by-grey); }
html[data-theme="dark"] .product-title, html[data-theme="dark"] .product-title a, html[data-theme="dark"] .name a, html[data-theme="dark"] .woocommerce-loop-product__title { color: var(--by-ink); }
html[data-theme="dark"] .price, html[data-theme="dark"] .amount, html[data-theme="dark"] .price .woocommerce-Price-amount { color: var(--by-ink); }
html[data-theme="dark"] .price del, html[data-theme="dark"] .price del .woocommerce-Price-amount { color: var(--by-grey); }
html[data-theme="dark"] .product-gallery, html[data-theme="dark"] .woocommerce-product-gallery__image, html[data-theme="dark"] .product-thumbnails a { background: #fff; }
html[data-theme="dark"] .ux-swatches .ux-swatch, html[data-theme="dark"] .ux-swatch--label { background: var(--by-surface); border-color: var(--by-line); color: var(--by-ink); }
html[data-theme="dark"] .ux-swatches .ux-swatch:hover { border-color: var(--by-ink); }
html[data-theme="dark"] .ux-swatches .ux-swatch.selected { background: var(--by-ink); border-color: var(--by-ink); color: var(--by-bg); }
html[data-theme="dark"] .woocommerce-tabs .nav > li > a { color: var(--by-ink-soft); }
html[data-theme="dark"] .woocommerce-tabs .nav > li.active > a { background: var(--by-ink); color: var(--by-bg); }
html[data-theme="dark"] .product-info .product_meta, html[data-theme="dark"] .product_meta a { color: var(--by-grey); }
html[data-theme="dark"] .by-row > summary { color: var(--by-ink); }
html[data-theme="dark"] .by-essentials__facts { color: #F08A50; }
html[data-theme="dark"] .by-row > summary::after { color: #F08A50; }
html[data-theme="dark"] .review-form-inner.has-border { background: var(--by-surface); border-color: var(--by-line); }
html[data-theme="dark"] .by-row--reviews .review-item { border-color: var(--by-line); }
html[data-theme="dark"] .sticky-add-to-cart, html[data-theme="dark"] .sticky-add-to-cart--active { background: var(--by-surface); color: var(--by-ink); border-color: var(--by-line); }
html[data-theme="dark"] .woocommerce-variation-availability, html[data-theme="dark"] .stock { color: var(--by-ink-soft); }
html[data-theme="dark"] .stock.in-stock { color: #6CCB8E; }
html[data-theme="dark"] .stock.out-of-stock { color: #F08A80; }

/* ---------- Tables, cart, checkout, notices ---------- */
html[data-theme="dark"] table, html[data-theme="dark"] th, html[data-theme="dark"] td, html[data-theme="dark"] .shop_table, html[data-theme="dark"] .shop_table thead th,
html[data-theme="dark"] .shop_table tfoot th, html[data-theme="dark"] .shop_table tfoot td, html[data-theme="dark"] .cart_totals tbody th, html[data-theme="dark"] .cart_totals tbody td { border-color: var(--by-line); color: var(--by-ink-soft); }
html[data-theme="dark"] th, html[data-theme="dark"] .shop_table thead th { color: var(--by-ink); }
html[data-theme="dark"] .is-well, html[data-theme="dark"] .cart_totals, html[data-theme="dark"] .checkout-sidebar, html[data-theme="dark"] #order_review, html[data-theme="dark"] .woocommerce-checkout-review-order,
html[data-theme="dark"] .col-inner.has-border, html[data-theme="dark"] .has-border, html[data-theme="dark"] .woocommerce-checkout-payment, html[data-theme="dark"] #payment, html[data-theme="dark"] #payment .payment_box,
html[data-theme="dark"] .cart-discount, html[data-theme="dark"] .coupon, html[data-theme="dark"] .checkout_coupon, html[data-theme="dark"] .woocommerce-form-coupon { background-color: var(--by-surface) !important; border-color: var(--by-line) !important; color: var(--by-ink-soft); }
html[data-theme="dark"] #payment .payment_box::before { border-bottom-color: var(--by-surface); }
html[data-theme="dark"] #payment ul.payment_methods, html[data-theme="dark"] #payment ul.payment_methods li { border-color: var(--by-line); background: transparent; }
html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-error, html[data-theme="dark"] .message-container,
html[data-theme="dark"] .woocommerce-notices-wrapper > div, html[data-theme="dark"] .wc-block-components-notice-banner { background: var(--by-warm) !important; color: var(--by-ink) !important; }
html[data-theme="dark"] .woocommerce-error, html[data-theme="dark"] .woocommerce-error li, html[data-theme="dark"] .wc-block-components-notice-banner.is-error { color: #F4A79F !important; }
html[data-theme="dark"] .woocommerce-message .button, html[data-theme="dark"] .woocommerce-info .button { background: var(--by-surface); color: var(--by-ink); }
html[data-theme="dark"] .cart-item .product-name a, html[data-theme="dark"] .product-name a { color: var(--by-ink); }
html[data-theme="dark"] .remove, html[data-theme="dark"] a.remove { color: var(--by-grey) !important; border-color: var(--by-line) !important; }
html[data-theme="dark"] .woocommerce-shipping-methods label, html[data-theme="dark"] .shipping__list_label { color: var(--by-ink-soft); }
html[data-theme="dark"] .checkout-breadcrumbs a, html[data-theme="dark"] .checkout-page-title a { color: var(--by-grey); }
html[data-theme="dark"] .checkout-breadcrumbs .current, html[data-theme="dark"] .checkout-page-title .current { color: var(--by-ink); }
html[data-theme="dark"] .blockUI.blockOverlay { background: rgba(0, 0, 0, .55) !important; }

/* ---------- Account (classic parts; the new account layout uses the same tokens) ---------- */
html[data-theme="dark"] .account-nav > li > a, html[data-theme="dark"] .woocommerce-MyAccount-navigation li a { color: var(--by-ink-soft); }
html[data-theme="dark"] .account-nav > li.active > a, html[data-theme="dark"] .account-nav li.is-active > a, html[data-theme="dark"] .account-nav > li > a:hover { background: var(--by-ink); color: var(--by-bg); }
html[data-theme="dark"] .dashboard-links a { background: var(--by-surface); border-color: var(--by-line); color: var(--by-ink); }

/* ---------- Popups, legal pages, contact ---------- */
html[data-theme="dark"] .buyamto-popup, html[data-theme="dark"] .lightbox-content, html[data-theme="dark"] .mfp-content .lightbox-inner { background: var(--by-surface) !important; color: var(--by-ink-soft); }
html[data-theme="dark"] .buyamto-popup__close { background: var(--by-warm); color: var(--by-ink); }
html[data-theme="dark"] .buyamto-popup h2 { color: var(--by-teal); }
html[data-theme="dark"] .by-legal-table th { background: var(--by-warm); }
html[data-theme="dark"] .entry-content .by-legal-meta, html[data-theme="dark"] .by-contact-card { background: var(--by-warm); color: var(--by-ink-soft); }

/* ---------- Footer: stays the darkest part of the page ---------- */
html[data-theme="dark"] .footer-wrapper { background: #0D0C0A; border-top: 1px solid var(--by-line); }
html[data-theme="dark"] .footer-widgets, html[data-theme="dark"] .footer-widgets p, html[data-theme="dark"] .footer-widgets li { color: #cfc9bd; }
html[data-theme="dark"] .by-foot__logo { color: #fff; }
html[data-theme="dark"] .by-foot .by-foot__cta:hover { background: #F3EFE8; border-color: #F3EFE8; color: #141311; }
html[data-theme="dark"] .back-to-top { background: var(--by-surface); border-color: var(--by-line); color: var(--by-ink); }

/* Home page "Stay in the loop" box is drawn in the ink colour: keep it a dark card with light text. */
html[data-theme="dark"] .su-home .su-news, html[data-theme="dark"] .su-news { --su-ink: #26231E; --su-bg: #F3EFE8; border: 1px solid var(--by-line); }
html[data-theme="dark"] .su-news input { background: #1A1815; border-color: #3A362F; color: #F3EFE8; }

/* Footer: same look as in light mode (it was already dark). */
html[data-theme="dark"] .by-foot .by-foot__cta, html[data-theme="dark"] .by-foot a.button { background: var(--by-orange) !important; border-color: var(--by-orange) !important; color: #fff !important; }
html[data-theme="dark"] .footer-widgets a, html[data-theme="dark"] .by-foot li a { color: #e9e4da; }
html[data-theme="dark"] .footer-widgets a:hover, html[data-theme="dark"] .by-foot li a:hover { color: #fff; }
html[data-theme="dark"] .absolute-footer a { color: #cfc9bd; }
@media (max-width: 549px) { .by-mode-btn { margin: 0 1px; } .by-mode-track { width: 52px; height: 28px; padding: 0 5px; } .by-mode-knob { width: 22px; height: 22px; } html[data-theme="dark"] .by-mode-knob { transform: translateX(24px); } .by-mode-ic { width: 16px; height: 16px; } }