/* =====================================================================
   Gofin Dark Theme — v1.10-clean
   Based on working v1.10. Only cosmetic refactor:
     - Added CSS variables for colors (was hardcoded)
     - Grouped into commented sections
     - Selectors UNCHANGED (preserving specificity and order)
   File: /catalog/view/theme/oct_remarket/stylesheet/dark-theme.css
   ===================================================================== */

/* =====================================================================
   COLOR PALETTE
   ===================================================================== */

html.dark-mode {
  --dk-bg:           #16191f;
  --dk-panel:        #1e2127;
  --dk-panel-2:      #252830;
  --dk-panel-3:      #2c303a;
  --dk-text:         #e4e6eb;
  --dk-text-2:       #c8ccd4;
  --dk-text-muted:   #a8acb5;
  --dk-text-dim:     #7a7e87;
  --dk-border:       #2f333d;
  --dk-border-light: #272a33;
  --dk-link:         #5dade2;
  --dk-link-soft:    #8ec5e8;
  --dk-link-hover:   #b3d8ee;
  --dk-shadow:       rgba(0, 0, 0, 0.4);
  --dk-primary:      #e00000;
  --dk-primary-h:    #c40000;
  --dk-teal:         #43c6bc;
  --dk-teal-h:       #35aaa1;
}

/* =====================================================================
   v1.0 — BASE
   ===================================================================== */

html.dark-mode body { background: var(--dk-bg) !important; color: var(--dk-text) !important; }
html.dark-mode a, html.dark-mode a:hover, html.dark-mode a:active { color: var(--dk-text); }
html.dark-mode .blue-link, html.dark-mode .rm-content a, html.dark-mode .rm-breadcrumb-item a,
html.dark-mode .top-nav a:hover, html.dark-mode .rm-module-title a:hover { color: var(--dk-link) !important; }
html.dark-mode .red, html.dark-mode .required { color: #ff7777 !important; }
html.dark-mode hr { border-top-color: var(--dk-border) !important; }

/* v1.0 Header / Top-nav */
html.dark-mode .top-nav { background: var(--dk-panel) !important; color: var(--dk-text-muted) !important; border-bottom: 1px solid var(--dk-border-light); }
html.dark-mode header { background: var(--dk-panel) !important; border-top-color: var(--dk-border-light) !important; border-bottom-color: var(--dk-border-light) !important; box-shadow: 0 2px 8px var(--dk-shadow) !important; }
html.dark-mode .rm-search input { background: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-search input::placeholder { color: var(--dk-text-dim) !important; }
html.dark-mode .rm-header-cart { background: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-header-address-link { color: var(--dk-link) !important; }
html.dark-mode .rm-header-location { background: var(--dk-panel-2) !important; box-shadow: 0 0 10px var(--dk-shadow) !important; }
html.dark-mode .rm-header-location-address { color: var(--dk-text) !important; }
html.dark-mode .rm-header-location-shedule, html.dark-mode .rm-header-location { color: var(--dk-text-muted) !important; }

/* v1.0 Catalog Menu */
html.dark-mode .rm-menu { background: var(--dk-panel) !important; box-shadow: 0 0 20px var(--dk-shadow) !important; }
html.dark-mode .rm-menu-list, html.dark-mode .rm-menu-list-item { background: var(--dk-panel) !important; border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-menu-list-item:hover, html.dark-mode .rm-menu-list-item.active { background: var(--dk-panel-2) !important; }
html.dark-mode .rm-menu-list-item-child, html.dark-mode .rm-menu-list-item-child-brands-item a { background: var(--dk-panel) !important; }
html.dark-mode .rm-menu-list-item-child-brands-item span,
html.dark-mode .rm-menu-list-item-child-links-categories-item a.rm-menu-list-item-child-links-categories-item-title { color: var(--dk-text) !important; }
html.dark-mode .rm-menu-list-item-child-links-landings a,
html.dark-mode .rm-menu-list-item-child-links-categories-item a { color: var(--dk-text-muted) !important; }

/* v1.0 Content / Cards */
html.dark-mode #content, html.dark-mode .rm-content { background: var(--dk-panel) !important; border-color: var(--dk-border-light) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-content-title, html.dark-mode .rm-content b { color: var(--dk-text) !important; }
html.dark-mode .rm-module-item, html.dark-mode .rm-news-item, html.dark-mode .rm-last-reviews-item,
html.dark-mode .rm-carousel-item-wrap, html.dark-mode .rm-category-wall-item,
html.dark-mode .rm-banner-plus-item > div, html.dark-mode .rm-slideshow-plus-item { background: var(--dk-panel) !important; box-shadow: -.5px -.5px 0 .5px var(--dk-border-light), inset -1px -1px 0 0 var(--dk-border-light) !important; }
html.dark-mode .rm-module-col:hover, html.dark-mode .rm-news-col:hover,
html.dark-mode .rm-last-reviews-col:hover, html.dark-mode .rm-category-wall-item:hover,
html.dark-mode .rm-banner-plus-item:hover { box-shadow: 0 4px 15px var(--dk-shadow) !important; }
html.dark-mode .rm-module-title a, html.dark-mode .rm-news-item-title, html.dark-mode .rm-last-reviews-item-title { color: var(--dk-text) !important; }
html.dark-mode .rm-module-img { border-right-color: var(--dk-border-light) !important; }
html.dark-mode .rm-module-stock { background: var(--dk-panel-2) !important; }
html.dark-mode .rm-module-quantity { background: var(--dk-panel-2) !important; border-top-color: var(--dk-border-light) !important; }
html.dark-mode .rm-module-quantity input { background: var(--dk-panel-3) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; }
html.dark-mode .rm-news-item-text, html.dark-mode .rm-last-reviews-item-text,
html.dark-mode .rm-blog-categories-item-text p, html.dark-mode .price-tax,
html.dark-mode .rm-category-product-model, html.dark-mode .rm-module-attr { color: var(--dk-text-muted) !important; }

/* v1.0 Day discounts / Slideshow */
html.dark-mode .rm-day-discounts, html.dark-mode .rm-day-discounts-item { background: var(--dk-panel) !important; }
html.dark-mode .rm-day-discounts-item-title a { color: var(--dk-text) !important; }
html.dark-mode .rm-day-discounts-timer-text { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-slideshow-plus-item { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-slideshow-plus-item-title { color: var(--dk-text) !important; }

/* v1.0 Columns / Categories */
html.dark-mode .rm-column-box { background: var(--dk-panel) !important; border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-column-title { background: var(--dk-panel-2) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-column-categories-item { background: var(--dk-panel) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-column-categories-item > span { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-categories-3 > .rm-column-categories-item span { background: var(--dk-panel-2) !important; }
html.dark-mode .rm-category, html.dark-mode .rm-product { background: transparent !important; }
html.dark-mode .rm-category-sort, html.dark-mode .rm-category-buttons,
html.dark-mode .rm-search-content-title { border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-category-buttons { background: rgba(30, 33, 39, 0.8) !important; }
html.dark-mode .rm-category-buttons-catalog,
html.dark-mode .rm-category-sort select { background-color: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
html.dark-mode .rm-category-description { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-category-description-text-opacity { background: linear-gradient(180deg, rgba(30, 33, 39, 0) 0%, var(--dk-panel) 100%) !important; }
html.dark-mode .rm-subcategory-title { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-category-appearance-btn { background: var(--dk-panel-2) !important; }
html.dark-mode .rm-category-appearance-btn span { background: var(--dk-text-dim) !important; }
html.dark-mode .rm-category-appearance-btn.active span, html.dark-mode .rm-category-appearance-btn:hover span { background: var(--dk-text) !important; }

/* v1.0 Product page */
html.dark-mode .rm-product-top { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-product-top-button { background: transparent !important; border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-product-top-button-text { color: var(--dk-text) !important; }
html.dark-mode .rm-product-top-button-icon { background: var(--dk-text-muted) !important; }
html.dark-mode .rm-product-images { border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-product-tabs, html.dark-mode .rm-product-tabs .nav-link { background: var(--dk-panel) !important; color: var(--dk-text) !important; }

/* v1.0 Cart */
html.dark-mode .rm-cart-products-item { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-cart-products-item img { border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-cart-products-item-info-title a { color: var(--dk-text) !important; }
html.dark-mode .rm-cart-products-item-info-option span, html.dark-mode .rm-cart-products-item-price-one { color: var(--dk-text-dim) !important; }
html.dark-mode .rm-cart-block { border-bottom-color: var(--dk-border) !important; }
html.dark-mode .rm-cart-block-total-price { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-cart-block-total-price span, html.dark-mode .rm-cart-text { color: var(--dk-text) !important; }

/* v1.0 Forms */
html.dark-mode .form-control, html.dark-mode .rm-select { background-color: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }
html.dark-mode .form-control::placeholder { color: var(--dk-text-dim) !important; }
html.dark-mode .form-control:focus { background-color: var(--dk-panel-3) !important; border-color: var(--dk-link) !important; }
html.dark-mode .check-box, html.dark-mode .radio-box { background-color: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; }
html.dark-mode .form-checkbox-group label { color: var(--dk-text) !important; }
html.dark-mode .rm-control-label { color: var(--dk-text-muted) !important; }

/* v1.0 Buttons (generic) */
html.dark-mode .rm-btn.secondary { background: var(--dk-panel-2) !important; }
html.dark-mode .rm-btn.secondary .rm-btn-text { color: var(--dk-text) !important; }
html.dark-mode .rm-cart-btn-icon { background: var(--dk-text) !important; }
html.dark-mode .rm-btn.secondary:hover .rm-cart-btn-icon { background: #fff !important; }
html.dark-mode .rm-btn.dark { background: var(--dk-panel-3) !important; }

/* v1.0 Tables */
html.dark-mode .table { color: var(--dk-text-muted) !important; }
html.dark-mode .table thead th, html.dark-mode .table .thead-dark th { background-color: var(--dk-panel-2) !important; border-color: var(--dk-border-light) !important; color: var(--dk-text) !important; }
html.dark-mode .table tbody { background: var(--dk-panel) !important; border-color: var(--dk-border-light) !important; }
html.dark-mode .table td, html.dark-mode .table th { border-color: var(--dk-border-light) !important; }
html.dark-mode .table-hover tbody tr:hover { background: var(--dk-panel-2) !important; }

/* v1.0 Sidebar / Mobile */
html.dark-mode .rm-sidebar { background: var(--dk-bg) !important; }
html.dark-mode .rm-sidebar-title, html.dark-mode .rm-sidebar .rm_mobile_menu_first-item,
html.dark-mode .rm-sidebar .rm_mobile_account, html.dark-mode .rm-sidebar .rm_mobile_menu_second,
html.dark-mode .rm-sidebar .rm_mobile_viewed, html.dark-mode .rm-sidebar .rm_mobile_menu_third,
html.dark-mode .rm-sidebar .rm_mobile_menu_fourth, html.dark-mode .rm-sidebar .rm_mobile_menu_fifth { background: var(--dk-panel) !important; }
html.dark-mode .rm-sidebar-title { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-sidebar .rm_mobile_menu-list-item:not(:last-child) { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode #rm_mobile_nav { background: var(--dk-panel) !important; box-shadow: 0 0 15px var(--dk-shadow) !important; }
html.dark-mode #rm_mobile_nav .rm-mobile-nav-buttons-btn { border-left-color: var(--dk-border-light) !important; }
html.dark-mode .rm-header-cart { border-left-color: var(--dk-border-light) !important; }

/* v1.0 Modals / Dropdowns */
html.dark-mode .rm-dropdown-inner, html.dark-mode .modal-content { background: var(--dk-panel) !important; box-shadow: 0 0 20px var(--dk-shadow) !important; }
html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--dk-border-light) !important; }
html.dark-mode .rm-dropdown li:not(:last-child) { border-bottom-color: var(--dk-border-light) !important; }
html.dark-mode .rm-dropdown::after { border-top-color: var(--dk-panel) !important; }

/* v1.0 Footer */
html.dark-mode footer { background: var(--dk-panel) !important; color: var(--dk-text-muted) !important; }
html.dark-mode footer a { color: var(--dk-text-muted) !important; }
html.dark-mode footer a:hover { color: var(--dk-link) !important; }
html.dark-mode footer h5, html.dark-mode footer .rm-footer-title { color: var(--dk-text) !important; }

/* v1.0 Pagination / Breadcrumb */
html.dark-mode .pagination li a, html.dark-mode .pagination li span { background-color: var(--dk-panel-2) !important; color: var(--dk-text-muted) !important; }
html.dark-mode .rm-breadcrumb-item:last-child, html.dark-mode .rm-breadcrumb-item + .rm-breadcrumb-item::before { color: var(--dk-text-dim) !important; }

/* v1.0 Theme toggle button */
.gofin-theme-toggle { display: flex; align-items: center; padding: 19px 15px; cursor: pointer; background: none; border: 0; color: inherit; font-size: 12px; }
.gofin-theme-toggle:hover { color: #0a78bf; text-decoration: underline; }
html.dark-mode .gofin-theme-toggle:hover { color: var(--dk-link); }
.gofin-theme-toggle svg { margin-right: 8px; }
.gofin-theme-toggle .icon-sun { display: none; }
html.dark-mode .gofin-theme-toggle .icon-sun { display: inline-block; }
html.dark-mode .gofin-theme-toggle .icon-moon { display: none; }

/* v1.0 Misc */
html.dark-mode .rm-no-stock { filter: grayscale(100%) brightness(0.8); }

/* =====================================================================
   v1.1 — Stickers, top-nav, tabs, FAQ, sidebar links
   ===================================================================== */

html.dark-mode .rm-module-stickers-sticker-stickers_special { background-color: #b04545 !important; }
html.dark-mode .rm-module-stickers-sticker-stickers_new { background-color: #1f7a47 !important; }
html.dark-mode .rm-module-stickers-sticker-stickers_featured { background-color: #2c5d8f !important; }
html.dark-mode .rm-module-sticker-discount { background: #4a8a1f !important; }

html.dark-mode .rm-product-stickers .stickers_featured,
html.dark-mode .rm-product .stickers_featured,
html.dark-mode .stickers_featured { background-color: #2c5d8f !important; }
html.dark-mode .rm-product-stickers .stickers_special,
html.dark-mode .rm-product .stickers_special,
html.dark-mode .stickers_special { background-color: #b04545 !important; }

html.dark-mode .rm-product-price-discount,
html.dark-mode .price-discount { background: #4a8a1f !important; color: #fff !important; }

html.dark-mode .top-nav,
html.dark-mode .top-nav a,
html.dark-mode .top-nav span,
html.dark-mode .top-nav-info-list a,
html.dark-mode .top-nav-account-links a,
html.dark-mode .top-nav-account-links span { color: var(--dk-text-2) !important; }
html.dark-mode .top-nav a:hover,
html.dark-mode .top-nav .rm-dropdown-toggle:hover,
html.dark-mode .top-nav-info-list a:hover,
html.dark-mode .top-nav-account-links button:hover { color: var(--dk-link) !important; }
html.dark-mode .top-nav .rm-dropdown-toggle::after { background: var(--dk-text-2) !important; }

html.dark-mode .rm-header-address-link,
html.dark-mode .rm-header-address span,
html.dark-mode .rm-header-phones-list-link { color: var(--dk-link) !important; }
html.dark-mode .rm-header-phones-list-item,
html.dark-mode .rm-header-phones-list a { color: var(--dk-text) !important; }

html.dark-mode .rm-header-cart,
html.dark-mode .rm-header-cart-text,
html.dark-mode #cart-total { color: var(--dk-text) !important; }
html.dark-mode .rm-header-cart-icon { filter: invert(0.9) brightness(1.2); }

html.dark-mode .rm-product-tabs .nav-link.active,
html.dark-mode .rm-product-tabs .nav-link:not(.collapsed),
html.dark-mode .nav-tabs .nav-link.active { color: var(--dk-text) !important; background: var(--dk-panel-2) !important; border-color: var(--dk-border) !important; }
html.dark-mode .rm-product-tabs .nav-link { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-product-tabs .nav-link:hover { color: var(--dk-text) !important; }

html.dark-mode .rm-product-faq-item .fa,
html.dark-mode .rm-product-faq-item i,
html.dark-mode #accordion .fa-chevron-down,
html.dark-mode .panel-title .fa,
html.dark-mode .panel-heading i,
html.dark-mode .rm-faq-toggle,
html.dark-mode .rm-faq-toggle img { color: var(--dk-text-muted) !important; filter: invert(0.85) brightness(1.3) !important; }
html.dark-mode .rm-product-faq-item:hover .fa,
html.dark-mode .panel-heading:hover .fa { color: var(--dk-link) !important; }

html.dark-mode .rm-product-info-list a,
html.dark-mode .rm-product-info-block a,
html.dark-mode .rm-product-info-block-title,
html.dark-mode .rm-product-info-list-item a,
html.dark-mode .rm-product-side-block a,
html.dark-mode .rm-product-side a { color: var(--dk-link-soft) !important; }
html.dark-mode .rm-product-info-list a:hover,
html.dark-mode .rm-product-info-block a:hover,
html.dark-mode .rm-product-info-list-item a:hover { color: var(--dk-link-hover) !important; text-decoration: underline; }

html.dark-mode .text-primary,
html.dark-mode a.text-primary { color: var(--dk-link) !important; }

html.dark-mode .rm-content,
html.dark-mode #content { color: var(--dk-text) !important; }

/* =====================================================================
   v1.2 — DARK LOGO
   ===================================================================== */

html.dark-mode #logo img { visibility: hidden; }
html.dark-mode #logo a,
html.dark-mode #logo span {
  background: url('/image/catalog/logo-dark.svg') no-repeat center center;
  background-size: contain;
  position: relative;
}
@media (max-width: 767px) {
  html.dark-mode #logo a,
  html.dark-mode #logo span { background-size: contain; }
}

/* =====================================================================
   v1.3 — Counters, footer, sidebar links
   ===================================================================== */

html.dark-mode .nav-tabs .badge,
html.dark-mode .nav .badge,
html.dark-mode .rm-product-tabs .badge,
html.dark-mode .rm-tabs-count,
html.dark-mode .rm-product-tabs-count {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
}

html.dark-mode .rm-product-info-list a,
html.dark-mode .rm-product-info-block a,
html.dark-mode .rm-product-info-block-title,
html.dark-mode .rm-product-info-list-item a,
html.dark-mode .rm-product-side-block a,
html.dark-mode .rm-product-side a,
html.dark-mode .rm-product-features a,
html.dark-mode .rm-product-features-item a,
html.dark-mode .rm-product-features-title,
html.dark-mode .rm-product-benefits a,
html.dark-mode .rm-product-benefits-title,
html.dark-mode .rm-product-info a[style*="color"],
html.dark-mode .rm-product-info-block [style*="color"] { color: var(--dk-link-soft) !important; }

html.dark-mode body footer,
html.dark-mode body .rm-footer,
html.dark-mode body .oct-footer,
html.dark-mode body footer.rm-footer,
html.dark-mode body > footer,
html.dark-mode .rm-footer-bottom,
html.dark-mode .rm-footer-top,
html.dark-mode .rm-footer-middle {
  background: var(--dk-panel) !important;
  color: var(--dk-text-muted) !important;
}

html.dark-mode body footer *,
html.dark-mode body .rm-footer *,
html.dark-mode body .oct-footer * { border-color: var(--dk-border) !important; }

html.dark-mode footer h1,
html.dark-mode footer h2,
html.dark-mode footer h3,
html.dark-mode footer h4,
html.dark-mode footer h5,
html.dark-mode footer h6,
html.dark-mode footer .rm-footer-title,
html.dark-mode footer .rm-footer-col-title,
html.dark-mode footer strong,
html.dark-mode footer b { color: var(--dk-text) !important; }

html.dark-mode footer p,
html.dark-mode footer span,
html.dark-mode footer li,
html.dark-mode footer div,
html.dark-mode footer label { color: var(--dk-text-muted) !important; }

html.dark-mode footer a { color: var(--dk-text-2) !important; }
html.dark-mode footer a:hover { color: var(--dk-link) !important; }

html.dark-mode footer input[type="email"],
html.dark-mode footer input[type="text"],
html.dark-mode footer .form-control {
  background: var(--dk-panel-3) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
html.dark-mode footer input::placeholder { color: var(--dk-text-dim) !important; }

html.dark-mode footer .rm-social a,
html.dark-mode footer .social-icons a,
html.dark-mode footer .rm-footer-social a { background: transparent !important; }

html.dark-mode footer .copyright,
html.dark-mode footer .rm-footer-bottom,
html.dark-mode .rm-copyright {
  background: var(--dk-bg) !important;
  color: var(--dk-text-dim) !important;
  border-top: 1px solid var(--dk-border) !important;
}

html.dark-mode footer .rm-payments img,
html.dark-mode footer .payments img,
html.dark-mode .rm-footer-payments img {
  background: var(--dk-text);
  padding: 4px 8px;
  border-radius: 4px;
}

/* =====================================================================
   v1.4 — BUY BUTTON (red) — partial; corrected in v1.9 below
   ===================================================================== */

html.dark-mode #button-cart,
html.dark-mode .rm-product-cart-btn,
html.dark-mode .rm-product-buttons .rm-btn.primary,
html.dark-mode .rm-product-buy .rm-btn,
html.dark-mode .rm-product .rm-cart-btn,
html.dark-mode .rm-product-buttons button[type="button"]:not(.rm-btn-del):not(.rm-product-quantity-btn) {
  background: var(--dk-primary) !important;
  color: #fff !important;
  border-color: var(--dk-primary) !important;
}

html.dark-mode #button-cart:hover,
html.dark-mode .rm-product-cart-btn:hover,
html.dark-mode .rm-product-buttons .rm-btn.primary:hover,
html.dark-mode .rm-product-buy .rm-btn:hover,
html.dark-mode .rm-product .rm-cart-btn:hover {
  background: var(--dk-primary-h) !important;
  border-color: var(--dk-primary-h) !important;
}

/* =====================================================================
   v1.5 — Sidebar descriptions, "Viewed" carousel
   ===================================================================== */

html.dark-mode .rm-product-info-list p,
html.dark-mode .rm-product-info-list li,
html.dark-mode .rm-product-info-list span:not(.rm-btn-text):not(.rm-product-top-button-text),
html.dark-mode .rm-product-info-block p,
html.dark-mode .rm-product-info-block-text,
html.dark-mode .rm-product-info-block span:not(.rm-btn-text),
html.dark-mode .rm-product-side-block p,
html.dark-mode .rm-product-side-block span,
html.dark-mode .rm-product-side p,
html.dark-mode .rm-product-features p,
html.dark-mode .rm-product-features-text,
html.dark-mode .rm-product-benefits p,
html.dark-mode .rm-product-benefits-text { color: var(--dk-text-2) !important; }

html.dark-mode .rm-product-views-title,
html.dark-mode .oct-product-views-title,
html.dark-mode .rm-viewed-title,
html.dark-mode .rm-section-title,
html.dark-mode .rm-block-title,
html.dark-mode .rm-also-viewed-title,
html.dark-mode .rm-product-related-title,
html.dark-mode .rm-related-title,
html.dark-mode [class*="viewed"] > h2,
html.dark-mode [class*="viewed"] > h3,
html.dark-mode [class*="viewed"] > h4,
html.dark-mode [class*="viewed"] > .rm-content-title,
html.dark-mode [id*="viewed"] > h2,
html.dark-mode [id*="viewed"] > h3 { color: var(--dk-text) !important; }

html.dark-mode [class*="viewed"] .rm-module-title,
html.dark-mode [class*="viewed"] .rm-module-title a,
html.dark-mode [class*="viewed"] .rm-module-price,
html.dark-mode [class*="viewed"] .rm-module-price-new,
html.dark-mode [class*="viewed"] .rm-module-price-old,
html.dark-mode [class*="viewed"] .rm-module-stock,
html.dark-mode [class*="viewed"] .rm-product-stock,
html.dark-mode [class*="viewed"] span,
html.dark-mode [class*="viewed"] p,
html.dark-mode [id*="viewed"] .rm-module-title,
html.dark-mode [id*="viewed"] .rm-module-title a,
html.dark-mode [id*="viewed"] .rm-module-price,
html.dark-mode [id*="viewed"] span,
html.dark-mode [id*="viewed"] p,
html.dark-mode .oct-product-views .rm-module-title a,
html.dark-mode .oct-product-views .rm-module-price,
html.dark-mode .oct-product-views span { color: var(--dk-text) !important; }

html.dark-mode [class*="viewed"] .rm-module-item,
html.dark-mode [class*="viewed"] .product-thumb,
html.dark-mode [id*="viewed"] .rm-module-item,
html.dark-mode .oct-product-views .rm-module-item { background: var(--dk-panel) !important; }

html.dark-mode .rm-popup-view,
html.dark-mode .oct-popup-view,
html.dark-mode .modal .rm-module-title,
html.dark-mode .modal .rm-module-price,
html.dark-mode .modal span,
html.dark-mode .modal p { color: var(--dk-text) !important; }

/* =====================================================================
   v1.6 — Secondary buttons & modal popups
   ===================================================================== */

html.dark-mode .rm-btn:not(.primary):not(.dark):not(.red):not(.gofin-theme-toggle):not(#button-cart),
html.dark-mode .rm-slideshow-plus-item-btn .rm-btn,
html.dark-mode .rm-slideshow-plus-item .rm-btn,
html.dark-mode .rm-day-discounts .rm-cart-btn,
html.dark-mode .rm-day-discounts-item .rm-cart-btn,
html.dark-mode [class*="day-discount"] .rm-cart-btn,
html.dark-mode [class*="day-discount"] .rm-btn {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
}

html.dark-mode .rm-btn:not(.primary):not(.dark):not(.red):not(.gofin-theme-toggle):not(#button-cart):hover,
html.dark-mode .rm-slideshow-plus-item-btn .rm-btn:hover,
html.dark-mode .rm-day-discounts .rm-cart-btn:hover {
  background: #353a45 !important;
  border-color: var(--dk-link) !important;
}

html.dark-mode .rm-slideshow-plus-item-btn .rm-btn .rm-btn-text,
html.dark-mode .rm-day-discounts .rm-cart-btn .rm-btn-text,
html.dark-mode [class*="day-discount"] .rm-btn-text { color: var(--dk-text) !important; }

html.dark-mode .rm-day-discounts .rm-cart-btn-icon,
html.dark-mode [class*="day-discount"] .rm-cart-btn-icon { background: var(--dk-text) !important; }

/* Modals — broad coverage */
html.dark-mode .modal-content,
html.dark-mode .modal-dialog .modal-content,
html.dark-mode .modal-body,
html.dark-mode .modal-header,
html.dark-mode .modal-footer,
html.dark-mode .modal-title,
html.dark-mode .oct-popup,
html.dark-mode .oct-popup-content,
html.dark-mode .oct-popup-body,
html.dark-mode [class*="popup"]:not(button):not(a),
html.dark-mode [id*="popup"]:not(button):not(a),
html.dark-mode [class*="modal-"]:not(.modal-backdrop) {
  background-color: var(--dk-panel) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

html.dark-mode .modal-title,
html.dark-mode .modal-header h1,
html.dark-mode .modal-header h2,
html.dark-mode .modal-header h3,
html.dark-mode .modal-header h4,
html.dark-mode .modal-header h5,
html.dark-mode .oct-popup-title,
html.dark-mode .popup-title { color: var(--dk-text) !important; }

html.dark-mode .modal p,
html.dark-mode .modal label,
html.dark-mode .modal span,
html.dark-mode .modal li,
html.dark-mode .modal div:not(.modal-dialog):not(.modal-content):not(.modal-header):not(.modal-body):not(.modal-footer):not(.input-group),
html.dark-mode .oct-popup p,
html.dark-mode .oct-popup label,
html.dark-mode .oct-popup span { color: var(--dk-text) !important; }

html.dark-mode .oct-popup-contacts a,
html.dark-mode .oct-popup-contacts li,
html.dark-mode .modal .oct-contacts-list a,
html.dark-mode .modal .oct-contacts-list li,
html.dark-mode [class*="callback"] a,
html.dark-mode [class*="callback"] li,
html.dark-mode .modal a[href*="viber"],
html.dark-mode .modal a[href*="t.me"],
html.dark-mode .modal a[href*="wa.me"],
html.dark-mode .modal a[href*="telegram"],
html.dark-mode .modal a[href*="whatsapp"],
html.dark-mode .modal a[href*="mailto"] {
  color: var(--dk-text) !important;
  background: transparent !important;
}

html.dark-mode .modal input,
html.dark-mode .modal textarea,
html.dark-mode .modal select,
html.dark-mode .modal .form-control,
html.dark-mode .oct-popup input,
html.dark-mode .oct-popup textarea,
html.dark-mode .oct-popup select {
  background: var(--dk-panel-3) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
html.dark-mode .modal input::placeholder,
html.dark-mode .modal textarea::placeholder { color: var(--dk-text-dim) !important; }

html.dark-mode .modal .close,
html.dark-mode .modal-header .close,
html.dark-mode .oct-popup-close,
html.dark-mode [class*="modal-close"] {
  color: var(--dk-text) !important;
  text-shadow: none !important;
  opacity: 0.7;
}
html.dark-mode .modal .close:hover { color: #fff !important; opacity: 1; }

html.dark-mode .modal-backdrop.show { opacity: 0.75 !important; background: #000 !important; }
html.dark-mode .modal hr,
html.dark-mode .oct-popup hr { border-top-color: var(--dk-border) !important; }

/* =====================================================================
   v1.7 — Advantages titles
   ===================================================================== */

html.dark-mode .rm-product-advantages-item-title,
html.dark-mode .rm-product-advantages-item .rm-product-advantages-item-title,
html.dark-mode a.rm-product-advantages-item .rm-product-advantages-item-title { color: var(--dk-link-soft) !important; }

html.dark-mode .rm-product-advantages-item:hover .rm-product-advantages-item-title { color: var(--dk-link-hover) !important; }

html.dark-mode .rm-product-advantages-item-text { color: var(--dk-text-muted) !important; }

html.dark-mode .rm-product-advantages-item-image i,
html.dark-mode .rm-product-advantages-item i { color: var(--dk-text-muted) !important; }
html.dark-mode .rm-product-advantages-item:hover .rm-product-advantages-item-image i { color: var(--dk-link-soft) !important; }

/* =====================================================================
   v1.8 — Floating contact widget
   ===================================================================== */

html.dark-mode .rm-fixed-contact-dropdown {
  background: var(--dk-panel) !important;
  box-shadow: 5px 12px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .rm-fixed-contact-item,
html.dark-mode .rm-fixed-contact-dropdown .rm-fixed-contact-item,
html.dark-mode .rm-fixed-contact-item span:not(.rm-fixed-contact-item-icon) { color: var(--dk-text) !important; }

html.dark-mode .rm-fixed-contact-item:hover,
html.dark-mode .rm-fixed-contact-item:hover span:not(.rm-fixed-contact-item-icon) { color: #fff !important; }

html.dark-mode #rm_fixed_contact_button .rm-fixed-contact-icon,
html.dark-mode #rm_fixed_contact_button .rm-fixed-contact-icon i,
html.dark-mode #rm_fixed_contact_button .fa-envelope {
  color: #fff !important;
  opacity: 1 !important;
  filter: brightness(1.2) !important;
}

html.dark-mode #rm_fixed_contact_button .rm-fixed-contact-text { color: #fff !important; }

/* =====================================================================
   v1.9 — FIX BUY BUTTON TEXT (corrects v1.4 mistake)
   ===================================================================== */

html.dark-mode #button-cart .rm-btn-text,
html.dark-mode .rm-product-cart-btn .rm-btn-text,
html.dark-mode .rm-product-buy .rm-btn-text {
  background: transparent !important;
  color: #fff !important;
}

html.dark-mode #button-cart .rm-cart-btn-icon,
html.dark-mode .rm-product-cart-btn .rm-cart-btn-icon,
html.dark-mode .rm-product-buy .rm-cart-btn-icon { background: #fff !important; }

/* =====================================================================
   v1.10 — TEAL CART BUTTONS IN CATEGORIES & MODULES
   ===================================================================== */

html.dark-mode .rm-cat-button-cart,
html.dark-mode .rm-module .rm-cart-btn,
html.dark-mode .rm-module-item .rm-btn.secondary,
html.dark-mode .rm-category .rm-cart-btn,
html.dark-mode .rm-category-product-list .rm-cart-btn {
  background: var(--dk-teal) !important;
  border: 1px solid var(--dk-teal) !important;
}

html.dark-mode .rm-cat-button-cart:hover,
html.dark-mode .rm-module .rm-cart-btn:hover,
html.dark-mode .rm-module-item .rm-btn.secondary:hover,
html.dark-mode .rm-category .rm-cart-btn:hover,
html.dark-mode .rm-category-product-list .rm-cart-btn:hover {
  background: var(--dk-teal-h) !important;
  border-color: var(--dk-teal-h) !important;
}

html.dark-mode .rm-cat-button-cart .rm-cart-btn-icon,
html.dark-mode .rm-module .rm-cart-btn .rm-cart-btn-icon,
html.dark-mode .rm-category .rm-cart-btn .rm-cart-btn-icon { background: #fff !important; }

html.dark-mode .rm-cat-button-cart .rm-btn-text,
html.dark-mode .rm-module .rm-cart-btn .rm-btn-text,
html.dark-mode .rm-category .rm-cart-btn .rm-btn-text {
  color: #fff !important;
  background: transparent !important;
}


/* ==================== FIX VIEWED PRODUCTS (liaj/pv module) ==================== */

/* Перевизначаємо lazy-load правило #liaj1 * { color: transparent } */
html.dark-mode #liaj1,
html.dark-mode #liaj1 *,
html.dark-mode [id^="rm-pv"],
html.dark-mode [id^="rm-pv"] * {
  color: var(--dk-text) !important;
}

/* Заголовок "Ви переглядали" */
html.dark-mode #liaj1 .rm-module-header,
html.dark-mode #liaj1 .rm-module-header span,
html.dark-mode #liaj1 .rm-module-header > span,
html.dark-mode [id^="rm-pv"] .rm-module-header,
html.dark-mode [id^="rm-pv"] .rm-module-header span {
  color: var(--dk-text) !important;
}

/* Картки в каруселі */
html.dark-mode #liaj1 .rm-module-item,
html.dark-mode [id^="rm-pv"] .rm-module-item {
  background: var(--dk-panel) !important;
}

/* Назви товарів */
html.dark-mode #liaj1 .rm-module-title,
html.dark-mode #liaj1 .rm-module-title a,
html.dark-mode [id^="rm-pv"] .rm-module-title,
html.dark-mode [id^="rm-pv"] .rm-module-title a {
  color: var(--dk-text) !important;
}

/* Ціни */
html.dark-mode #liaj1 .rm-module-price,
html.dark-mode #liaj1 .rm-module-price-new,
html.dark-mode [id^="rm-pv"] .rm-module-price,
html.dark-mode [id^="rm-pv"] .rm-module-price-new {
  color: var(--dk-text) !important;
}

html.dark-mode #liaj1 .rm-module-price-old,
html.dark-mode [id^="rm-pv"] .rm-module-price-old {
  color: var(--dk-text-dim) !important;
}

/* "В наявності" */
html.dark-mode #liaj1 .rm-module-stock,
html.dark-mode [id^="rm-pv"] .rm-module-stock {
  background: var(--dk-panel-2) !important;
  color: #4ade80 !important;
}

/* Код товару */
html.dark-mode #liaj1 .rm-category-product-model,
html.dark-mode #liaj1 .rm-category-product-model span,
html.dark-mode [id^="rm-pv"] .rm-category-product-model,
html.dark-mode [id^="rm-pv"] .rm-category-product-model span {
  color: var(--dk-text-muted) !important;
}

/* Зірки рейтингу (FontAwesome) */
html.dark-mode #liaj1 .rm-module-rating-star,
html.dark-mode [id^="rm-pv"] .rm-module-rating-star {
  filter: brightness(1) !important;
}

/* Лічильник коментарів */
html.dark-mode #liaj1 .rm-module-reviews,
html.dark-mode #liaj1 .rm-module-reviews span,
html.dark-mode [id^="rm-pv"] .rm-module-reviews,
html.dark-mode [id^="rm-pv"] .rm-module-reviews span {
  color: var(--dk-text-muted) !important;
}

/* Кнопка кошика в цій каруселі — бірюзова (як на категорії) */
html.dark-mode #liaj1 .rm-cart-btn,
html.dark-mode #liaj1 .rm-btn.secondary,
html.dark-mode [id^="rm-pv"] .rm-cart-btn,
html.dark-mode [id^="rm-pv"] .rm-btn.secondary {
  background: var(--dk-teal) !important;
  border: 1px solid var(--dk-teal) !important;
}

html.dark-mode #liaj1 .rm-cart-btn:hover,
html.dark-mode [id^="rm-pv"] .rm-cart-btn:hover {
  background: var(--dk-teal-h) !important;
  border-color: var(--dk-teal-h) !important;
}

html.dark-mode #liaj1 .rm-cart-btn-icon,
html.dark-mode [id^="rm-pv"] .rm-cart-btn-icon {
  background: #fff !important;
}

/* ==================== FIX SHOP ADVANTAGES (footer block on homepage) ==================== */

/* Перебиваємо inline-стилі з #block0-N через ще вищу специфічність:
   html.dark-mode + ID — це 0,1,1,0 vs 0,1,0,2 (їхні)
   тому беремо їхній ID + наш атрибут html.dark-mode */

html.dark-mode #block0-1 .rm-advantages-item-title,
html.dark-mode #block0-2 .rm-advantages-item-title,
html.dark-mode #block0-3 .rm-advantages-item-title,
html.dark-mode #block0-4 .rm-advantages-item-title,
html.dark-mode #block0-5 .rm-advantages-item-title,
html.dark-mode #block0-6 .rm-advantages-item-title {
  color: var(--dk-text) !important;
}

html.dark-mode #block0-1 .rm-advantages-item-text,
html.dark-mode #block0-2 .rm-advantages-item-text,
html.dark-mode #block0-3 .rm-advantages-item-text,
html.dark-mode #block0-4 .rm-advantages-item-text,
html.dark-mode #block0-5 .rm-advantages-item-text,
html.dark-mode #block0-6 .rm-advantages-item-text {
  color: var(--dk-text-muted) !important;
}

/* Hover — підсвічуємо червоним (як зараз 6-й блок коли наведено) */
html.dark-mode #block0-1:hover .rm-advantages-item-title,
html.dark-mode #block0-2:hover .rm-advantages-item-title,
html.dark-mode #block0-3:hover .rm-advantages-item-title,
html.dark-mode #block0-4:hover .rm-advantages-item-title,
html.dark-mode #block0-5:hover .rm-advantages-item-title,
html.dark-mode #block0-6:hover .rm-advantages-item-title {
  color: var(--dk-primary) !important;
}

/* Hover-fix для 6-го блоку — він зараз з білим тлом, треба прибрати */
html.dark-mode .rm-advantages-item:hover,
html.dark-mode #block0-1:hover,
html.dark-mode #block0-2:hover,
html.dark-mode #block0-3:hover,
html.dark-mode #block0-4:hover,
html.dark-mode #block0-5:hover,
html.dark-mode #block0-6:hover {
  background: var(--dk-panel-2) !important;
  box-shadow: 0 0 15px var(--dk-shadow) !important;
}

/* Картка переваги (на десктопі вона прозора, на мобільці має фон) */
html.dark-mode .rm-advantages-item {
  background: transparent !important;
}

/* Іконки — лишаємо бірюзовими (це бренд-акцент від адмінки), на hover — червоні */
/* Інлайн-стилі вже ставлять color:rgb(67,198,188) — не чіпаємо колір, тільки фікс на hover */
html.dark-mode #block0-1:hover .rm-advantages-item-icon i,
html.dark-mode #block0-2:hover .rm-advantages-item-icon i,
html.dark-mode #block0-3:hover .rm-advantages-item-icon i,
html.dark-mode #block0-4:hover .rm-advantages-item-icon i,
html.dark-mode #block0-5:hover .rm-advantages-item-icon i,
html.dark-mode #block0-6:hover .rm-advantages-item-icon i {
  color: var(--dk-primary) !important;
}
/* ==================== FIX BANNER PLUS ITEM TEXT ==================== */

html.dark-mode .rm-banner-plus-item-text {
  color: var(--dk-text) !important;
}
/* ==================== FIX PRODUCT ATTR LIST (sidebar) ==================== */

html.dark-mode .rm-product-attr-list {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border-light) !important;
}

html.dark-mode .rm-product-attr-list-item {
  background: transparent !important;
  border-color: var(--dk-border-light) !important;
}

html.dark-mode .rm-product-attr-list-item > div {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* Заголовок "Характеристики:" і посилання "дивитися всі" */
html.dark-mode .rm-product-attr-title,
html.dark-mode .rm-product-right-title {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-product-attr-title .blue-link {
  color: var(--dk-link) !important;
}
/* ==================== FIX PRODUCT TABS (active text & counter) ==================== */

/* === Текст всередині активного таба ("Опис товару") === */
html.dark-mode .rm-product-tabs .nav-link.active .nav-link-text,
html.dark-mode #oct-tabs .nav-link.active .nav-link-text,
html.dark-mode .nav-tabs .nav-link.active .nav-link-text {
  color: var(--dk-text) !important;
  text-decoration: none !important;
}

/* === Текст у неактивних табах === */
html.dark-mode .rm-product-tabs .nav-link .nav-link-text,
html.dark-mode #oct-tabs .nav-link .nav-link-text {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-product-tabs .nav-link:hover .nav-link-text,
html.dark-mode #oct-tabs .nav-link:hover .nav-link-text {
  color: var(--dk-link) !important;
}

/* === Лічильник плашка-цифра (Відгуків 0, Питань 0) === */
html.dark-mode .rm-product-tabs .nav-link-qty,
html.dark-mode #oct-tabs .nav-link-qty,
html.dark-mode .nav-link .nav-link-qty {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
}
/* ==================== FIX SEO FAQ BLOCK ==================== */

/* === Сам блок (фон/border) === */
html.dark-mode .sp-seo-faq,
html.dark-mode .sp-seo-faq .faq {
  background: transparent !important;
}

/* === Заголовок "Відповіді на часті питання - FAQ" === */
html.dark-mode .sp-seo-faq .faq-title,
html.dark-mode .faq-title {
  color: var(--dk-text) !important;
}

/* === Картка кожного питання === */
html.dark-mode .sp-seo-faq .faq-question,
html.dark-mode .faq-question {
  background: var(--dk-panel-2) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 2px rgba(0, 0, 0, 0.3) !important;
}

/* === Текст питання === */
html.dark-mode .sp-seo-faq .faq-link,
html.dark-mode .faq-link {
  color: var(--dk-text) !important;
}

/* === Стрілка-шеврон справа (PNG-картинка з темним шевроном) === */
/* Інвертуємо щоб стала світлою */
html.dark-mode .sp-seo-faq .faq-link:after,
html.dark-mode .faq-link:after {
  filter: invert(0.9) brightness(1.5) !important;
}

/* === Текст відповіді (коли розгорнуто) === */
html.dark-mode .sp-seo-faq .faq-text,
html.dark-mode .sp-seo-faq .faq-text div,
html.dark-mode .faq-text,
html.dark-mode .faq-text div {
  color: var(--dk-text-muted) !important;
}

/* === Список з галочкою (для маркованих списків у відповідях) === */
html.dark-mode .sp-seo-faq .faq-text ul li,
html.dark-mode .faq-text ul li {
  color: var(--dk-text-muted) !important;
}

html.dark-mode .sp-seo-faq .faq-text ul li:before,
html.dark-mode .faq-text ul li:before {
  color: var(--dk-text-muted) !important;
}
/* ==================== FIX CATEGORY WALL ICONS (dark SVGs) ==================== */

/* Іконки категорій на головній — інвертуємо темний SVG у світлий */
html.dark-mode .rm-category-wall-item-image img,
html.dark-mode .rm-category-wall-item img {
  filter: invert(0.85) brightness(1.5) !important;
}

/* При наведенні — легкий блакитний відтінок */
html.dark-mode .rm-category-wall-item:hover .rm-category-wall-item-image img,
html.dark-mode .rm-category-wall-item:hover img {
  filter: invert(0.65) brightness(1.5) sepia(1) hue-rotate(170deg) saturate(2) !important;
}

/* Заголовок під іконкою (Краватка метелик / Краватки / тощо) */
html.dark-mode .rm-category-wall-item a span:not(.rm-category-wall-item-image),
html.dark-mode .rm-category-wall-item span {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-category-wall-item:hover a span:not(.rm-category-wall-item-image),
html.dark-mode .rm-category-wall-item:hover span {
  color: var(--dk-link) !important;
}
/* ==================== FIX SLIDESHOW PLUS ITEM (banner) ==================== */

/* === Опис під заголовком банера — світліший === */
html.dark-mode .rm-slideshow-plus-item-text,
html.dark-mode .rm-slideshow-plus-item p,
html.dark-mode .rm-slideshow-plus-item-text p {
  color: var(--dk-text-2) !important;
}
/* ==================== FIX MENU ICONS (dark SVGs) ==================== */

/* Іконки SVG у меню каталогу — інвертуємо темний на світлий */
html.dark-mode .rm-menu-list-item-icon,
html.dark-mode .rm-menu-list-item .rm-menu-list-item-icon {
  filter: invert(0.85) brightness(1.5) !important;
}

/* При наведенні на пункт меню — легкий блакитний відтінок */
html.dark-mode .rm-menu-list-item:hover .rm-menu-list-item-icon,
html.dark-mode .rm-menu-list-item.active .rm-menu-list-item-icon {
  filter: invert(0.65) brightness(1.5) sepia(1) hue-rotate(170deg) saturate(2) !important;
}

/* === Тексти всередині розкритого меню (підкатегорії) === */
html.dark-mode .rm-menu-list-item-child .mega-content,
html.dark-mode .rm-menu-list-item-child .mega-content b,
html.dark-mode .rm-menu-list-item-child .mega-content span,
html.dark-mode .rm-menu-list-item-child .mega-content li,
html.dark-mode .rm-menu-list-item-child .col-one,
html.dark-mode .rm-menu-list-item-child .col-one b,
html.dark-mode .rm-menu-list-item-child .col-one span {
  color: var(--dk-text) !important;
}

/* Посилання у підкатегоріях (Класичні, Діамант, тощо) */
html.dark-mode .rm-menu-list-item-child .mega-content a,
html.dark-mode .rm-menu-list-item-child .col-one a {
  color: var(--dk-text-2) !important;
}

html.dark-mode .rm-menu-list-item-child .mega-content a:hover,
html.dark-mode .rm-menu-list-item-child .col-one a:hover {
  color: var(--dk-link) !important;
}

/* Стрілочка-шеврон у мегаменю перед посиланнями */
html.dark-mode .mega-content li:before {
  filter: invert(0.85) brightness(1.3) !important;
}

/* Кнопка "Всі метелики / Всі краватки..." в кінці кожної колонки — лишається dark */
/* (вже покрита загальним правилом v1.0 .rm-btn.dark) */

/* ==================== FIX CONTACT PAGE LOCATION BLOCK ==================== */

/* === Основний контейнер блоку === */
html.dark-mode .rm-contact-location,
html.dark-mode .rm-contact-location-info,
html.dark-mode .rm-contact-page,
html.dark-mode .rm-contact-locations {
  background: var(--dk-panel) !important;
  color: var(--dk-text) !important;
}

/* === Назва магазину "Ґофін" === */
html.dark-mode .rm-contact-location-store-title {
  color: var(--dk-text) !important;
}

/* === Адреса "Львів, вул. Кукурудзяна, 2" === */
html.dark-mode .rm-contact-location-address {
  color: var(--dk-text-2) !important;
}

/* === Заголовки "Час роботи:" / "Телефони:" === */
html.dark-mode .rm-contact-location-title {
  color: var(--dk-text) !important;
}

/* === Список з часом роботи === */
html.dark-mode .rm-contact-location-info ul,
html.dark-mode .rm-contact-location-info li,
html.dark-mode .rm-contact-location-info .list-unstyled li {
  color: var(--dk-text-2) !important;
}

/* === Телефон-посилання === */
html.dark-mode .rm-contact-location-phone a,
html.dark-mode .rm-contact-location-phone {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-contact-location-phone a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Соцмережі під блоком ("Ми в соціальних мережах:") === */
html.dark-mode .rm-contact-social-title,
html.dark-mode .rm-social-title,
html.dark-mode .rm-contact-page-social-title {
  color: var(--dk-text) !important;
}

/* === Кружечки іконок соцмереж (фон) === */
html.dark-mode .rm-contact-social .rm-social-item,
html.dark-mode .rm-social-item {
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border) !important;
}

html.dark-mode .rm-contact-social .rm-social-item i,
html.dark-mode .rm-social-item i {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-contact-social .rm-social-item:hover,
html.dark-mode .rm-social-item:hover {
  background: var(--dk-panel-3) !important;
  border-color: var(--dk-link) !important;
}

/* === Заголовок форми "Якщо у Вас є питання..." === */
html.dark-mode .rm-contact-form-title,
html.dark-mode .rm-contact-page-form-title {
  color: var(--dk-text) !important;
}
/* ==================== FIX CONTACT PAGE LOCATION BLOCK ==================== */

/* === Основний контейнер блоку === */
html.dark-mode .rm-contact-location,
html.dark-mode .rm-contact-location-info,
html.dark-mode .rm-contact-page,
html.dark-mode .rm-contact-locations {
  background: var(--dk-panel) !important;
  color: var(--dk-text) !important;
}

/* === Назва магазину "Ґофін" === */
html.dark-mode .rm-contact-location-store-title {
  color: var(--dk-text) !important;
}

/* === Адреса "Львів, вул. Кукурудзяна, 2" === */
html.dark-mode .rm-contact-location-address {
  color: var(--dk-text-2) !important;
}

/* === Заголовки "Час роботи:" / "Телефони:" === */
html.dark-mode .rm-contact-location-title {
  color: var(--dk-text) !important;
}

/* === Список з часом роботи === */
html.dark-mode .rm-contact-location-info ul,
html.dark-mode .rm-contact-location-info li,
html.dark-mode .rm-contact-location-info .list-unstyled li {
  color: var(--dk-text-2) !important;
}

/* === Телефон-посилання === */
html.dark-mode .rm-contact-location-phone a,
html.dark-mode .rm-contact-location-phone {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-contact-location-phone a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Заголовок форми "Якщо у Вас є питання..." === */
html.dark-mode .rm-contact-form-title,
html.dark-mode .rm-contact-page-form-title {
  color: var(--dk-text) !important;
}
/* ==================== FIX SOCIAL ICONS (contact page bottom) ==================== */

/* === Сам кружечок-фон — це <a>, не <li> === */
html.dark-mode .rm-social-item a,
html.dark-mode .rm-social-item .rm-social-facebook,
html.dark-mode ul.rm-social .rm-social-item a {
  background: var(--dk-panel-3) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}

/* === FontAwesome-піктограми всередині === */
html.dark-mode .rm-social-item a i,
html.dark-mode .rm-social-item .rm-social-facebook i,
html.dark-mode ul.rm-social .rm-social-item i {
  color: var(--dk-text) !important;
}

/* === Hover — підсвітити блакитним === */
html.dark-mode .rm-social-item a:hover,
html.dark-mode .rm-social-item .rm-social-facebook:hover {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-link) !important;
}

html.dark-mode .rm-social-item a:hover i,
html.dark-mode .rm-social-item .rm-social-facebook:hover i {
  color: var(--dk-link) !important;
}
/* ==================== FIX INLINE-STYLED TEXTS WITH HARDCODED DARK COLOR ==================== */

/* Абзаци з inline-стилем "color: rgb(39, 35, 35)" — типове для контенту з адмінки */
html.dark-mode p[style*="rgb(39, 35, 35)"],
html.dark-mode p[style*="rgb(39,35,35)"],
html.dark-mode span[style*="rgb(39, 35, 35)"],
html.dark-mode span[style*="rgb(39,35,35)"],
html.dark-mode div[style*="rgb(39, 35, 35)"],
html.dark-mode div[style*="rgb(39,35,35)"],
html.dark-mode li[style*="rgb(39, 35, 35)"],
html.dark-mode li[style*="rgb(39,35,35)"] {
  color: var(--dk-text-2) !important;
}

/* Те саме для "#272323" (hex) */
html.dark-mode p[style*="#272323"],
html.dark-mode span[style*="#272323"],
html.dark-mode div[style*="#272323"],
html.dark-mode li[style*="#272323"] {
  color: var(--dk-text-2) !important;
}

/* Те саме для звичайного чорного */
html.dark-mode p[style*="color: black"],
html.dark-mode p[style*="color: #000"],
html.dark-mode p[style*="color:#000"],
html.dark-mode p[style*="color:black"] {
  color: var(--dk-text-2) !important;
}

/* Mailto-посилання (синє в адмінці rgb(10, 120, 191) — підняти трохи яскравіше) */
html.dark-mode a.mailto,
html.dark-mode a[href^="mailto:"][style*="rgb(10, 120, 191)"],
html.dark-mode a[href^="mailto:"] {
  color: var(--dk-link) !important;
}

html.dark-mode a.mailto:hover,
html.dark-mode a[href^="mailto:"]:hover {
  color: var(--dk-link-hover) !important;
}
/* ==================== FIX SIMPLECHECKOUT (cart/order page) ==================== */

/* === Блок з кнопкою і чекбоксом === */
html.dark-mode .simplecheckout-button-block,
html.dark-mode #buttons.simplecheckout-button-block,
html.dark-mode .simplecheckout-button-right,
html.dark-mode .simplecheckout-button-left {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Чекбокс-блок "Я прочитав і згоден..." === */
html.dark-mode #agreement_checkbox,
html.dark-mode #agreement_checkbox .checkbox,
html.dark-mode #agreement_checkbox label {
  background: transparent !important;
  color: var(--dk-text) !important;
}

/* Посилання "Умовами використання" / "Політика конфіденційності" */
html.dark-mode #agreement_checkbox a,
html.dark-mode #agreement_checkbox a b {
  color: var(--dk-link) !important;
}

html.dark-mode #agreement_checkbox a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Кнопка "Підтвердження замовлення" — червона (головний CTA) === */
html.dark-mode #button-confirm,
html.dark-mode #button-confirm.rm-btn.dark,
html.dark-mode #button-confirm.btn,
html.dark-mode #simplecheckout_button_confirm,
html.dark-mode .simplecheckout-button-right #button-confirm {
  background: var(--dk-primary) !important;
  border-color: var(--dk-primary) !important;
  color: #fff !important;
}

html.dark-mode #button-confirm:hover,
html.dark-mode #button-confirm.rm-btn.dark:hover,
html.dark-mode #simplecheckout_button_confirm:hover {
  background: var(--dk-primary-h) !important;
  border-color: var(--dk-primary-h) !important;
}

/* === Інші стандартні блоки simplecheckout (про всяк) === */
html.dark-mode .simplecheckout-block,
html.dark-mode .simplecheckout-cart,
html.dark-mode .simplecheckout-customer,
html.dark-mode .simplecheckout-shipping-address,
html.dark-mode .simplecheckout-payment-address,
html.dark-mode .simplecheckout-shipping-method,
html.dark-mode .simplecheckout-payment-method,
html.dark-mode .simplecheckout-comment,
html.dark-mode .simplecheckout-totals {
  background: var(--dk-panel) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-light) !important;
}

html.dark-mode .simplecheckout-block-title,
html.dark-mode .simplecheckout-block h1,
html.dark-mode .simplecheckout-block h2,
html.dark-mode .simplecheckout-block h3,
html.dark-mode .simplecheckout-block h4,
html.dark-mode .simplecheckout-block label {
  color: var(--dk-text) !important;
}

html.dark-mode .simplecheckout-block input,
html.dark-mode .simplecheckout-block textarea,
html.dark-mode .simplecheckout-block select {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}

html.dark-mode .simplecheckout-block input::placeholder,
html.dark-mode .simplecheckout-block textarea::placeholder {
  color: var(--dk-text-dim) !important;
}
/* ==================== FIX STORE REVIEWS PAGE ==================== */

/* === Картка відгуку (зовнішня) === */
html.dark-mode .rm-store-reviews-item,
html.dark-mode .rm-store-reviews-list-item {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Ім'я автора (Галина / Олександра / Тетяна) === */
html.dark-mode .rm-store-reviews-item-author,
html.dark-mode .rm-store-reviews-item-name,
html.dark-mode .rm-store-reviews-item-info {
  color: var(--dk-text) !important;
}

/* === Дата відгуку === */
html.dark-mode .rm-store-reviews-item-date {
  color: var(--dk-text-muted) !important;
}

/* === Текст самого відгуку === */
html.dark-mode .rm-store-reviews-item-text,
html.dark-mode .rm-store-reviews-item-text p,
html.dark-mode .rm-store-reviews-item-text-text {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* === Блок "Відповідь адміністратора" (білий бабл) === */
html.dark-mode .rm-store-reviews-item-text-admin {
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border-light) !important;
  border-radius: 4px;
}

html.dark-mode .rm-store-reviews-item-text-admin-title {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-store-reviews-item-text-admin p,
html.dark-mode .rm-store-reviews-item-text-admin span,
html.dark-mode .rm-store-reviews-item-text-admin div {
  color: var(--dk-text-2) !important;
}

/* === Іконка-аватар "людинка" (FontAwesome або SVG) === */
html.dark-mode .rm-store-reviews-item-avatar,
html.dark-mode .rm-store-reviews-item-avatar i,
html.dark-mode .rm-store-reviews-item-avatar svg {
  color: var(--dk-text-muted) !important;
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border) !important;
}

/* === Посилання "Рейтинг: 5 з 5" === */
html.dark-mode .rm-store-reviews-item-rating,
html.dark-mode .rm-store-reviews-item-rating a {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-store-reviews-item-rating a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}
/* ==================== FIX BLOG CATEGORIES (article cards) ==================== */

/* === Картка статті === */
html.dark-mode .rm-blog-categories-item,
html.dark-mode .rm-blog-row-item .rm-blog-categories-item {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
  box-shadow: -.5px -.5px 0 .5px var(--dk-border-light), inset -1px -1px 0 0 var(--dk-border-light) !important;
}

html.dark-mode .rm-blog-row-item:hover .rm-blog-categories-item {
  box-shadow: 0 4px 15px var(--dk-shadow) !important;
}

/* === Біла плашка з текстом під картинкою === */
html.dark-mode .rm-blog-categories-item-text {
  background: var(--dk-panel) !important;
  color: var(--dk-text-muted) !important;
}

/* === Заголовок статті (посилання) === */
html.dark-mode .rm-blog-categories-item-text a,
html.dark-mode .rm-blog-categories-item-text > a {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-blog-row-item:hover .rm-blog-categories-item-text > a,
html.dark-mode .rm-blog-categories-item-text a:hover {
  color: var(--dk-link) !important;
}

/* === Анонс статті (короткий опис) === */
html.dark-mode .rm-blog-categories-item-text p {
  color: var(--dk-text-2) !important;
}

/* === Дата і перегляди на картинці (білий бар з градієнтом знизу зображення) === */
html.dark-mode .rm-blog-categories-item-info {
  color: #fff !important;
}

html.dark-mode .rm-blog-categories-item-info span,
html.dark-mode .rm-blog-categories-item-info-date span,
html.dark-mode .rm-blog-categories-item-info-views span {
  color: #fff !important;
}

/* === Бічна панель "Стиль та Метал..." (справа на скріні) — той самий тип карток === */
html.dark-mode .rm-blog-column-item,
html.dark-mode .rm-blog-column-item .rm-blog-categories-item-text {
  background: var(--dk-panel) !important;
}

html.dark-mode .rm-blog-column-item a,
html.dark-mode .rm-blog-column-item .rm-blog-categories-item-text a {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-blog-column-item p {
  color: var(--dk-text-2) !important;
}
/* ==================== FIX PRODUCT ATTRIBUTES TAB (table) ==================== */

/* === Контейнер таблиці === */
html.dark-mode .rm-product-tabs-attributtes-list {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Заголовок "Загальні характеристики" === */
html.dark-mode .rm-product-tabs-attributtes-list-title {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* === Рядки таблиці (Довжина см. / Для кого / По типу / тощо) === */
html.dark-mode .rm-product-tabs-attributtes-list-item {
  background: transparent !important;
  border-color: var(--dk-border-light) !important;
}

/* === Ліва і права колонки в кожному рядку === */
html.dark-mode .rm-product-tabs-attributtes-list-item > div,
html.dark-mode .rm-product-tabs-attributtes-list-item > div:first-child,
html.dark-mode .rm-product-tabs-attributtes-list-item > div:last-child {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* === Посилання-фільтри (Дорослі / Жіночі / Унісекс / Чоловічі / тощо) === */
html.dark-mode .rm-product-tabs-attributtes-list-item a,
html.dark-mode .rm-product-tabs-attributtes-list-item a.link_atrprod {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-product-tabs-attributtes-list-item a:hover,
html.dark-mode .rm-product-tabs-attributtes-list-item a.link_atrprod:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Чергування рядків (zebra-stripe) === */
html.dark-mode .rm-product-tabs-attributtes-list-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.02) !important;
}
/* ==================== FIX FILTER VIER (custom filter plugin) ==================== */

/* === Головний контейнер === */
html.dark-mode #block_filter_vier,
html.dark-mode #filter_vier,
html.dark-mode .product_category {
  background: transparent !important;
  color: var(--dk-text) !important;
}

/* === Заголовок "Фільтр" угорі (бірюзова плашка) === */
html.dark-mode #head_filter,
html.dark-mode #name_filter #head_filter {
  background: var(--dk-teal) !important;
  color: #fff !important;
}

/* === Заголовок "Характеристики" (між блоками) === */
html.dark-mode .block_fv .head_group,
html.dark-mode .blok.head_group {
  color: var(--dk-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--dk-border-light) !important;
}

/* === Назви фільтрів (Ціна, Колір, Забарвлення, По ширині, ...) === */
html.dark-mode .title_p_f,
html.dark-mode .name_title .title_p_f,
html.dark-mode .name_title span,
html.dark-mode .blok.title_filter .name_title,
html.dark-mode .blok.title_filter .title_p_f {
  color: var(--dk-text) !important;
}

html.dark-mode .blok.title_filter {
  background: transparent !important;
}

/* === Контейнери блоків параметрів === */
html.dark-mode .block_fv,
html.dark-mode .block_param,
html.dark-mode .onli_param,
html.dark-mode .blok {
  background: transparent !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Інпути ціни (175, 875) === */
html.dark-mode .form-control.text_input,
html.dark-mode .input_blok input[type="text"],
html.dark-mode #left_count,
html.dark-mode #right_count,
html.dark-mode input[id^="attrb_sl_"][type="text"] {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}

/* === Чекбокси-посилання (Вузькі / Широкі / Дитячі...) === */
html.dark-mode a.checkb,
html.dark-mode .row_blok a.checkb,
html.dark-mode .link_fv a.checkb {
  color: var(--dk-text-2) !important;
  background: transparent !important;
}

html.dark-mode a.checkb:hover,
html.dark-mode .checkb:hover .text_param {
  color: var(--dk-link) !important;
}

html.dark-mode .checkb .text_param {
  color: var(--dk-text-2) !important;
}

/* === Лічильники "(216)", "(189)" === */
html.dark-mode .count_prod,
html.dark-mode .count_prod.count_2,
html.dark-mode .checkb .count_prod {
  color: var(--dk-text-dim) !important;
}

/* === Кнопки "Застосувати" — бірюзові === */
html.dark-mode .botton_fv,
html.dark-mode .bot_filt,
html.dark-mode .btn_fv,
html.dark-mode #button_price,
html.dark-mode span[id^="bt_sl_"] {
  background: var(--dk-teal) !important;
  border: 1px solid var(--dk-teal) !important;
  color: #fff !important;
}

html.dark-mode .botton_fv:hover,
html.dark-mode .bot_filt:hover,
html.dark-mode .btn_fv:hover {
  background: var(--dk-teal-h) !important;
  border-color: var(--dk-teal-h) !important;
}

/* === ionRangeSlider — лінія слайдера === */
html.dark-mode .irs-line,
html.dark-mode .irs-line-left,
html.dark-mode .irs-line-mid,
html.dark-mode .irs-line-right {
  background: var(--dk-panel-3) !important;
}

/* === ionRangeSlider — активна частина (між бігунками) === */
html.dark-mode .irs-bar {
  background: var(--dk-teal) !important;
}

/* === ionRangeSlider — бігунки === */
html.dark-mode .irs-slider,
html.dark-mode .irs-slider.from,
html.dark-mode .irs-slider.to {
  background: var(--dk-primary) !important;
  border: 1px solid var(--dk-primary-h) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* === ionRangeSlider — числа під шкалою (175, 350, 525, 700, 875) === */
html.dark-mode .irs-grid-text,
html.dark-mode .js-grid-text-0,
html.dark-mode .js-grid-text-1,
html.dark-mode .js-grid-text-2,
html.dark-mode .js-grid-text-3,
html.dark-mode .js-grid-text-4,
html.dark-mode [class^="js-grid-text-"] {
  color: var(--dk-text-muted) !important;
}

/* === ionRangeSlider — рисочки шкали === */
html.dark-mode .irs-grid-pol {
  background: var(--dk-text-dim) !important;
}

html.dark-mode .irs-grid-pol.small {
  background: var(--dk-border) !important;
}

/* === Підказка "from"/"to"/"single" над бігунком === */
html.dark-mode .irs-from,
html.dark-mode .irs-to,
html.dark-mode .irs-single {
  background: var(--dk-primary) !important;
  color: #fff !important;
}

/* === Кольорові плашки та плашки забарвлення === */
/* НЕ ЧІПАЄМО — ці <img> вже мають правильні кольори */

/* === Зменшити підсвічування при hover на блоці параметра === */
html.dark-mode .block_param:hover {
  background: transparent !important;
}

/* === Стрілочка-шеврон зверху ("Фільтр" → відкрити/закрити на мобільці) === */
html.dark-mode .arrow_n_f i,
html.dark-mode .strel_fa_mob i {
  color: #fff !important;
}

/* === "зі знижкою" посилання === */
html.dark-mode .block_fv.psp.qnp a.checkb {
  color: var(--dk-text-2) !important;
}

/* ==================== FIX ACCOUNT PAGE ==================== */

/* === Контейнер сторінки кабінету === */
html.dark-mode .rm-account,
html.dark-mode .rm-account-page,
html.dark-mode .rm-account-content {
  background: transparent !important;
  color: var(--dk-text) !important;
}

/* === Посилання у списку кабінету (Особистий кабінет / Обліковий запис / Зміна пароля / тощо) === */
html.dark-mode .rm-account-link,
html.dark-mode .rm-account-link span,
html.dark-mode a.rm-account-link {
  color: var(--dk-text) !important;
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

html.dark-mode .rm-account-link:hover,
html.dark-mode a.rm-account-link:hover {
  background: var(--dk-panel-2) !important;
  color: var(--dk-link) !important;
}

html.dark-mode .rm-account-link:hover span,
html.dark-mode a.rm-account-link:hover span {
  color: var(--dk-link) !important;
}

/* === Заголовок розділу ("Особистий кабінет" вгорі сторінки) === */
html.dark-mode .rm-account-title,
html.dark-mode .rm-account-page-title,
html.dark-mode .rm-content h1 {
  color: var(--dk-text) !important;
}

/* === Картки в кабінеті (балів/замовлень/тощо) === */
html.dark-mode .rm-account-card,
html.dark-mode .rm-account-info-block,
html.dark-mode .rm-account-block {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
  color: var(--dk-text) !important;
}

html.dark-mode .rm-account-card-title,
html.dark-mode .rm-account-info-block-title,
html.dark-mode .rm-account-block-title {
  color: var(--dk-text) !important;
}

/* === Текст всередині карток === */
html.dark-mode .rm-account-card p,
html.dark-mode .rm-account-card span,
html.dark-mode .rm-account-info-block p,
html.dark-mode .rm-account-info-block span {
  color: var(--dk-text-2) !important;
}

/* === Привітання "Вітаю, [Ім'я]" або подібне === */
html.dark-mode .rm-account-welcome,
html.dark-mode .rm-account-greeting {
  color: var(--dk-text) !important;
}
/* ==================== FIX ACCOUNT LIST CONTAINER (white background) ==================== */

/* === Батьківський <ul> зі списком кабінету === */
html.dark-mode .rm-account-list,
html.dark-mode ul.rm-account-list,
html.dark-mode .rm-account-list.list-unstyled {
  background-color: var(--dk-panel) !important;
  background: var(--dk-panel) !important;
}

/* === Елементи списку <li> === */
html.dark-mode .rm-account-list-item,
html.dark-mode .rm-account-list .rm-account-list-item {
  background: transparent !important;
  border-bottom: 1px solid var(--dk-border-light) !important;
}

html.dark-mode .rm-account-list-item:last-child {
  border-bottom: none !important;
}

/* === Контейнер блоку "Особистий кабінет" (з заголовком + списком) === */
html.dark-mode .rm-column-box,
html.dark-mode .rm-column-box.h-100,
html.dark-mode .account-container .rm-column-box,
html.dark-mode #column-right .rm-column-box {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

html.dark-mode .rm-column-box .rm-column-title {
  background: var(--dk-panel-2) !important;
  color: var(--dk-text) !important;
}
/* ==================== MOBILE THEME TOGGLE BUTTON ==================== */

/* === Сама кнопка (виглядає як інші іконки в шапці) === */
.gofin-theme-toggle-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.gofin-theme-toggle-mobile svg {
  display: block;
  color: #656c7d;
}

.gofin-theme-toggle-mobile:hover svg {
  color: var(--dk-primary, #e00000);
}

/* === Перемикання між місяцем і сонцем === */
.gofin-theme-toggle-mobile .icon-sun {
  display: none;
}

html.dark-mode .gofin-theme-toggle-mobile .icon-sun {
  display: block;
}

html.dark-mode .gofin-theme-toggle-mobile .icon-moon {
  display: none;
}

/* === У темній темі — світла обвідка кнопки === */
html.dark-mode .gofin-theme-toggle-mobile svg {
  color: var(--dk-text-muted) !important;
}

html.dark-mode .gofin-theme-toggle-mobile:hover svg {
  color: var(--dk-link) !important;
}
/* ==================== FIX MOBILE NAV BUTTONS ==================== */

/* === Наша кнопка-перемикач теми === */
.gofin-theme-toggle-mobile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 1rem !important;
  cursor: pointer;
  min-width: 40px;
}

.gofin-theme-toggle-mobile svg {
  display: block;
  stroke: #656c7d;
  color: #656c7d;
}

/* Перемикання місяць/сонце */
.gofin-theme-toggle-mobile .icon-sun { display: none; }
html.dark-mode .gofin-theme-toggle-mobile .icon-sun { display: block; }
html.dark-mode .gofin-theme-toggle-mobile .icon-moon { display: none; }

/* У темній темі іконка — світла */
html.dark-mode .gofin-theme-toggle-mobile svg {
  stroke: var(--dk-text) !important;
  color: var(--dk-text) !important;
}

html.dark-mode .gofin-theme-toggle-mobile:hover svg {
  stroke: var(--dk-link) !important;
  color: var(--dk-link) !important;
}

/* === ВИПРАВЛЕННЯ іконок локації та контактів у темній темі === */
/* SVG-спрайти темні — інвертуємо */
html.dark-mode .rm-mobile-locatons-btn img,
html.dark-mode .rm-mobile-contacts-btn img,
html.dark-mode #rm_mobile_nav .rm-mobile-nav-buttons-btn img {
  filter: invert(0.85) brightness(1.5) !important;
}

/* === Сам бар мобільної шапки — переконатись що темний === */
html.dark-mode #rm_mobile_nav,
html.dark-mode nav#rm_mobile_nav.d-lg-none {
  background: var(--dk-panel) !important;
  border-bottom: 1px solid var(--dk-border-light) !important;
}
/* ==================== FIX MOBILE FOOTER CARDS ==================== */

/* === Контейнер мобільного футера === */
html.dark-mode .rm-footer-mobile,
html.dark-mode .rm-footer-mobile-inner,
html.dark-mode footer .rm-footer-mobile-inner {
  background: var(--dk-panel) !important;
  color: var(--dk-text-2) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Картки усередині мобільного футера === */
html.dark-mode .rm-footer-mobile-inner > div,
html.dark-mode .rm-footer-mobile .rm-footer-block,
html.dark-mode .rm-footer-mobile .rm-footer-section {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Заголовки секцій ("Наша адреса:", "Час роботи", "Зателефонуйте нам:") === */
html.dark-mode .rm-footer-mobile .rm-footer-title,
html.dark-mode .rm-footer-mobile-inner .rm-footer-title,
html.dark-mode footer .rm-footer-mobile-inner .rm-footer-title {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* === Текст блоків (адреса, час роботи) === */
html.dark-mode .rm-footer-mobile .rm-footer-text,
html.dark-mode .rm-footer-mobile .rm-footer-address,
html.dark-mode .rm-footer-mobile-inner .rm-footer-text,
html.dark-mode .rm-footer-mobile-inner .rm-footer-address {
  color: var(--dk-text-2) !important;
}

/* === Список телефонів === */
html.dark-mode .rm-footer-mobile .rm-footer-phones li,
html.dark-mode .rm-footer-mobile-inner .rm-footer-phones li,
html.dark-mode .rm-footer-phones li {
  color: var(--dk-text-2) !important;
}

html.dark-mode .rm-footer-phones a,
html.dark-mode .rm-footer-phones li a {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-footer-phones a:hover {
  color: var(--dk-link-hover) !important;
}

/* === Іконка телефону у списку === */
html.dark-mode .rm-footer-phones img,
html.dark-mode .rm-footer-phones li img {
  filter: invert(0.85) brightness(1.5) !important;
}

/* === Посилання "Передзвоніть мені" === */
html.dark-mode .rm-footer-phones-link,
html.dark-mode .rm-phone-link {
  color: var(--dk-link) !important;
  background: transparent !important;
}

html.dark-mode .rm-footer-phones-link:hover,
html.dark-mode .rm-phone-link:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Інпут підписки на новинки === */
html.dark-mode .rm-footer-mobile #InputSubscribeEmail,
html.dark-mode .rm-footer-mobile .rm-input-with-btn,
html.dark-mode #footer-subscribe input[type="email"] {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}

html.dark-mode #footer-subscribe input::placeholder {
  color: var(--dk-text-dim) !important;
}

/* === Кнопка "Підпишіться" — лишаємо темною як було === */
html.dark-mode #footer-make-subscribe,
html.dark-mode .rm-footer-mobile .rm-btn.dark {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

html.dark-mode #footer-make-subscribe:hover {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-link) !important;
}

/* === Чекбокс згоди + текст === */
html.dark-mode .rm-footer-mobile .form-checkbox-group label,
html.dark-mode .rm-footer-mobile .form-checkbox-group {
  color: var(--dk-text-muted) !important;
}

html.dark-mode .rm-footer-mobile .form-checkbox-group a,
html.dark-mode .rm-footer-mobile .form-checkbox-group label a {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-footer-mobile .check-box {
  background: var(--dk-panel-2) !important;
  border-color: var(--dk-border) !important;
}

/* === Кнопка "До контактів" — бірюзова (CTA) === */
html.dark-mode .rm-footer-mobile .rm-footer-contacts-btn .rm-btn.secondary,
html.dark-mode .rm-footer-contacts-btn .rm-btn.secondary {
  background: var(--dk-teal) !important;
  border-color: var(--dk-teal) !important;
}

html.dark-mode .rm-footer-mobile .rm-footer-contacts-btn .rm-btn.secondary:hover {
  background: var(--dk-teal-h) !important;
  border-color: var(--dk-teal-h) !important;
}

html.dark-mode .rm-footer-mobile .rm-footer-contacts-btn .rm-btn-text {
  color: #fff !important;
}
/* ==================== FIX MOBILE MENU CATALOG ICONS ==================== */

/* === Іконки SVG у мобільному меню каталогу === */
html.dark-mode .oct-menu-cat-icon,
html.dark-mode .rm_mobile_menu-list-item .oct-menu-cat-icon,
html.dark-mode .rm_mobile_menu-list-item img:not(.img_param) {
  filter: invert(0.85) brightness(1.5) !important;
}

/* При натисканні (active) на пункт меню — блакитний відтінок */
html.dark-mode .rm_mobile_menu-list-item:active .oct-menu-cat-icon,
html.dark-mode .rm_mobile_menu-list-item.active .oct-menu-cat-icon {
  filter: invert(0.65) brightness(1.5) sepia(1) hue-rotate(170deg) saturate(2) !important;
}

/* === Назви пунктів меню (Метелики / Краватки...) === */
html.dark-mode .rm_mobile_menu-list-item a span,
html.dark-mode .rm_mobile_menu-list-item > a {
  color: var(--dk-text) !important;
}

/* === Стрілка-шеврон ">" праворуч від кожного пункту === */
html.dark-mode .rm_mobile_menu-list-item-toggle,
html.dark-mode .rm_mobile_menu_second_button .rm_mobile_menu-list-item-toggle {
  filter: invert(0.85) brightness(1.3) !important;
}

/* === Заголовок "Каталог товарів" зверху === */
html.dark-mode .rm-sidebar-title-text,
html.dark-mode .rm-sidebar .rm-sidebar-title .rm-sidebar-title-text {
  color: var(--dk-text) !important;
}

/* === Хрестик закриття === */
html.dark-mode .rm-sidebar-title-close .modal-close-icon {
  background: var(--dk-text) !important;
}

/* === Кнопка "<" повернутися (друге меню — після клацу на категорії) === */
html.dark-mode .rm_mobile_menu_back,
html.dark-mode .rm_mobile_menu_back-text {
  color: var(--dk-text) !important;
}

html.dark-mode .rm_mobile_menu_back-icon {
  filter: invert(0.85) brightness(1.5) !important;
}

/* === Розділова лінія між пунктами === */
html.dark-mode .rm_mobile_menu-list-item {
  border-bottom-color: var(--dk-border-light) !important;
}

/* === Підкатегорії у мегаконтенті всередині мобільного меню === */
html.dark-mode .rm_mobile_menu_third .mega-content,
html.dark-mode .rm_mobile_menu_third .mega-content b,
html.dark-mode .rm_mobile_menu_third .mega-content span,
html.dark-mode .rm_mobile_menu_third .col-one,
html.dark-mode .rm_mobile_menu_third .col-one b {
  color: var(--dk-text) !important;
}

html.dark-mode .rm_mobile_menu_third .mega-content a,
html.dark-mode .rm_mobile_menu_third .col-one a {
  color: var(--dk-text-2) !important;
}

html.dark-mode .rm_mobile_menu_third .mega-content a:hover {
  color: var(--dk-link) !important;
}
/* ==================== FIX MOBILE CATALOG BUTTON TEXT ==================== */

/* === Кнопка "Каталог" у мобільній шапці/верхньому барі === */
html.dark-mode #menu_toggle_button .rm-btn-text,
html.dark-mode .rm_mobile_sidebar_toggle .rm-btn-text,
html.dark-mode .rm-btn.primary .rm-btn-text {
  color: #fff !important;
}

/* На випадок якщо це окремий мобільний каталог-блок */
html.dark-mode .rm-mobile-catalog-btn,
html.dark-mode .rm-mobile-catalog-btn .rm-btn-text {
  color: #fff !important;
}

/* Сама кнопка — переконатись що фон контрастний */
html.dark-mode #menu_toggle_button,
html.dark-mode .rm-btn.primary {
  background: var(--dk-primary) !important;
  border-color: var(--dk-primary) !important;
}

html.dark-mode #menu_toggle_button:hover,
html.dark-mode .rm-btn.primary:hover {
  background: var(--dk-primary-h) !important;
  border-color: var(--dk-primary-h) !important;
}

/* === Іконка-шеврон/dots всередині кнопки === */
html.dark-mode #menu_toggle_button .rm-btn-icon img,
html.dark-mode .rm-btn.primary .rm-btn-icon img {
  filter: brightness(2) !important;
}

/* ==================== FIX CATEGORY CATALOG BUTTON ==================== */

html.dark-mode .rm-category-buttons-catalog .rm-btn-text,
html.dark-mode .rm-category-buttons .rm-category-buttons-catalog .rm-btn-text {
  color: var(--dk-text) !important;
}

/* Іконка "точки" всередині кнопки — інвертуємо темний SVG у світлий */
html.dark-mode .rm-category-buttons-catalog .rm-btn-icon img,
html.dark-mode .rm-category-buttons-catalog .rm-btn-icon svg {
  filter: invert(0.85) brightness(1.5) !important;
}

/* Hover */
html.dark-mode .rm-category-buttons-catalog:hover .rm-btn-text {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-category-buttons-catalog:hover .rm-btn-icon img {
  filter: invert(0.65) brightness(1.5) sepia(1) hue-rotate(170deg) saturate(2) !important;
}
/* ==================== HIDE MOBILE LOCATION BUTTON ==================== */

/* Прибрати кнопку локації з мобільної шапки (звільнити місце для перемикача теми) */
/* Контакти (.rm-mobile-contacts-btn) і так показують адресу, тому дублювання непотрібне */
@media (max-width: 991px) {
  #rm_mobile_nav .rm-mobile-locatons-btn {
    display: none !important;
  }
}
/* ==================== FIX MOBILE PRODUCT FIXED BAR (sticky bottom) ==================== */

/* === Сам бар === */
html.dark-mode .rm-product-mobile-fixed,
html.dark-mode .rm-product-mobile-fixed.fixed-bottom {
  background: var(--dk-panel) !important;
  border-top: 1px solid var(--dk-border) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* === Ціна === */
html.dark-mode .rm-product-mobile-fixed-price,
html.dark-mode .rm-product-mobile-fixed-price-new {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-product-mobile-fixed-price-old {
  color: var(--dk-text-dim) !important;
  text-decoration: line-through;
}

/* === Кнопки "В закладки" і "До порівняння" — темно-сірі === */
html.dark-mode .rm-product-mobile-fixed .rm-btn.wishlist,
html.dark-mode .rm-product-mobile-fixed .rm-btn.compare {
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border) !important;
}

html.dark-mode .rm-product-mobile-fixed .rm-btn.wishlist:hover,
html.dark-mode .rm-product-mobile-fixed .rm-btn.compare:hover {
  background: var(--dk-panel-3) !important;
  border-color: var(--dk-link) !important;
}

/* === Іконки у кнопках закладок/порівняння === */
html.dark-mode .rm-product-mobile-fixed .rm-btn.wishlist img,
html.dark-mode .rm-product-mobile-fixed .rm-btn.compare img {
  filter: invert(0.85) brightness(1.5) !important;
}

/* === Кнопка "Купити" (CTA — червона) === */
html.dark-mode .rm-product-mobile-fixed .rm-product-one-click-btn,
html.dark-mode .rm-product-mobile-fixed .rm-btn.secondary.rm-product-one-click-btn {
  background: var(--dk-primary) !important;
  border: 1px solid var(--dk-primary) !important;
}

html.dark-mode .rm-product-mobile-fixed .rm-product-one-click-btn:hover {
  background: var(--dk-primary-h) !important;
  border-color: var(--dk-primary-h) !important;
}

html.dark-mode .rm-product-mobile-fixed .rm-product-one-click-btn .rm-btn-text {
  color: #fff !important;
  background: transparent !important;
}

html.dark-mode .rm-product-mobile-fixed .rm-product-one-click-btn .rm-cart-btn-icon {
  background: #fff !important;
}
/* ==================== FIX MODAL CLOSE BUTTON (X) ==================== */

/* === Хрестик закриття в попапах/модалках/сайдбарах === */
html.dark-mode .modal-close,
html.dark-mode .rm-sidebar-title-close,
html.dark-mode .modal-close-icon,
html.dark-mode .rm-sidebar-title-close .modal-close-icon {
  opacity: 1 !important;
}

/* Дві перехресні лінії хрестика — світлі */
html.dark-mode .modal-close-icon.modal-close-left,
html.dark-mode .modal-close-icon.modal-close-right,
html.dark-mode .rm-sidebar-title-close .modal-close-icon.modal-close-left,
html.dark-mode .rm-sidebar-title-close .modal-close-icon.modal-close-right {
  background: var(--dk-text) !important;
}

/* Hover — яскравіший */
html.dark-mode .modal-close:hover .modal-close-icon,
html.dark-mode .rm-sidebar-title-close:hover .modal-close-icon {
  background: var(--dk-link) !important;
}

/* === "× КОШИК" заголовок попапа кошика === */
html.dark-mode .rm-cart-modal-title,
html.dark-mode .rm-popup-cart-title,
html.dark-mode .modal-cart-title,
html.dark-mode .rm-sidebar-title-text {
  color: var(--dk-text) !important;
}

/* === Текст "В кошику 1 товарів на суму..." === */
html.dark-mode .rm-cart-info,
html.dark-mode .rm-popup-cart-info,
html.dark-mode .rm-cart-block-total {
  color: var(--dk-text) !important;
}

/* === Посилання "Перейти до кошика" === */
html.dark-mode .rm-popup-cart a,
html.dark-mode .rm-cart-modal a:not(.rm-btn):not(button) {
  color: var(--dk-link) !important;
}

/* === Іконка кошика-кошика (червоне відро) — переконатись що видно === */
html.dark-mode .rm-cart-products-item-remove,
html.dark-mode .rm-cart-products-item-remove .fa,
html.dark-mode .rm-cart-products-item-remove img {
  background: #fff !important;
  border-radius: 4px;
  padding: 4px;
}
/* ==================== FIX SIDEBAR TITLE SPACING (mobile cart popup) ==================== */

/* === Відступи в заголовку сайдбару/попапа === */
.rm-sidebar-title,
.rm-sidebar .rm-sidebar-title {
  padding: 15px 20px !important;
  gap: 20px;
}

/* === Текст заголовка ("КОШИК") — відступ справа === */
.rm-sidebar-title-text {
  padding-right: 20px;
}

/* === Хрестик закриття — додатковий простір навколо === */
.rm-sidebar-title-close,
.modal-close {
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ==================== FIX PRODUCT IMAGE SLIDER DOTS ==================== */

/* === Контейнер dots — прибрати білий фон === */
html.dark-mode .slick-dots,
html.dark-mode .rm-product-images .slick-dots,
html.dark-mode .rm-product-images-list .slick-dots,
html.dark-mode .rm-product-images .swiper-pagination,
html.dark-mode .rm-product-images-pagination {
  background: transparent !important;
}

/* === Самі точки (неактивні) === */
html.dark-mode .slick-dots li,
html.dark-mode .slick-dots li button,
html.dark-mode .slick-dots li button:before,
html.dark-mode .rm-product-images .slick-dots li button:before {
  color: var(--dk-text-dim) !important;
  background: var(--dk-text-dim) !important;
  opacity: 0.5 !important;
}

/* === Активна точка — червона (бренд) === */
html.dark-mode .slick-dots li.slick-active,
html.dark-mode .slick-dots li.slick-active button,
html.dark-mode .slick-dots li.slick-active button:before,
html.dark-mode .rm-product-images .slick-dots li.slick-active button:before {
  color: var(--dk-primary) !important;
  background: var(--dk-primary) !important;
  opacity: 1 !important;
}

/* === Swiper-варіант (якщо використовується swiper, а не slick) === */
html.dark-mode .swiper-pagination-bullet {
  background: var(--dk-text-dim) !important;
  opacity: 0.5 !important;
}

html.dark-mode .swiper-pagination-bullet-active {
  background: var(--dk-primary) !important;
  opacity: 1 !important;
}

/* === Стрілки навігації слайдера (якщо є) === */
html.dark-mode .slick-arrow,
html.dark-mode .slick-prev,
html.dark-mode .slick-next,
html.dark-mode .rm-product-images .slick-arrow {
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border) !important;
}

html.dark-mode .slick-arrow:hover {
  background: var(--dk-panel-3) !important;
  border-color: var(--dk-link) !important;
}

html.dark-mode .slick-prev:before,
html.dark-mode .slick-next:before {
  color: var(--dk-text) !important;
}
/* ==================== FIX NOTIFICATION TOAST (Bootstrap Notify) ==================== */

/* === Контейнер тоасту === */
html.dark-mode [data-notify="container"],
html.dark-mode .alert.alert-success,
html.dark-mode .alert.alert-info,
html.dark-mode .alert.alert-warning,
html.dark-mode .alert.alert-danger,
html.dark-mode .rm-alert,
html.dark-mode .rm-notify {
  background: var(--dk-panel) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* === Текст всередині тоасту === */
html.dark-mode [data-notify="container"] [data-notify="message"],
html.dark-mode [data-notify="container"] [data-notify="title"],
html.dark-mode .alert .rm-alert-text,
html.dark-mode .alert span,
html.dark-mode .alert p,
html.dark-mode .rm-alert-text {
  color: var(--dk-text) !important;
}

/* === Посилання у тоасті (назва товару, список порівняння) === */
html.dark-mode [data-notify="container"] a,
html.dark-mode .alert a,
html.dark-mode .rm-alert a {
  color: var(--dk-link) !important;
}

html.dark-mode [data-notify="container"] a:hover,
html.dark-mode .alert a:hover,
html.dark-mode .rm-alert a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Іконка-галочка (success) — зелена === */
html.dark-mode .rm-alert-icon,
html.dark-mode .alert-success .rm-alert-icon,
html.dark-mode [data-notify="container"].alert-success [data-notify="icon"] {
  background: #1f7a47 !important;
  color: #fff !important;
  border-radius: 4px;
}

html.dark-mode .rm-alert-icon i,
html.dark-mode .rm-alert-icon .fa-check,
html.dark-mode [data-notify="icon"].fas.fa-check {
  color: #fff !important;
}

/* === Іконка для info — синя === */
html.dark-mode .alert-info .rm-alert-icon {
  background: #2c5d8f !important;
}

/* === Іконка для warning — жовто-помаранчева === */
html.dark-mode .alert-warning .rm-alert-icon {
  background: #b07645 !important;
}

/* === Іконка для danger/error — червона === */
html.dark-mode .alert-danger .rm-alert-icon {
  background: var(--dk-primary) !important;
}

/* === Хрестик закриття тоасту === */
html.dark-mode [data-notify="container"] .close,
html.dark-mode .alert .close {
  color: var(--dk-text) !important;
  opacity: 0.7;
  text-shadow: none !important;
}

html.dark-mode [data-notify="container"] .close:hover,
html.dark-mode .alert .close:hover {
  color: #fff !important;
  opacity: 1;
}
/* ==================== FIX COMPARE PRODUCTS TABLE ==================== */

/* === Загальний контейнер таблиці порівняння === */
html.dark-mode .rm-table-compare,
html.dark-mode table.rm-table-compare,
html.dark-mode .rm-compare,
html.dark-mode .rm-compare-table {
  background: var(--dk-panel) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Рядки таблиці === */
html.dark-mode .rm-table-compare tr,
html.dark-mode .rm-table-compare-product,
html.dark-mode .rm-table-compare tbody tr {
  background: var(--dk-panel) !important;
  border-color: var(--dk-border-light) !important;
}

/* Чергування рядків (zebra) */
html.dark-mode .rm-table-compare tbody tr:nth-child(even),
html.dark-mode .rm-table-compare tr:nth-child(even) {
  background: var(--dk-panel-2) !important;
}

/* === Комірки таблиці === */
html.dark-mode .rm-table-compare td,
html.dark-mode .rm-table-compare th,
html.dark-mode .rm-table-compare-product td,
html.dark-mode .rm-table-product-name {
  background: transparent !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-light) !important;
}

/* === Заголовки розділів ("Опис", "Загальні характеристики", "Ціна", ...) === */
html.dark-mode .rm-compare-section-title,
html.dark-mode .rm-table-compare thead th,
html.dark-mode .rm-table-compare th[colspan],
html.dark-mode .rm-table-compare .table-section-title,
html.dark-mode .rm-compare h3,
html.dark-mode .rm-compare h4 {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
}

/* === Перша колонка (Товар / Виробник / Ціна / Код товару / ...) === */
html.dark-mode .rm-table-compare td:first-child,
html.dark-mode .rm-table-compare-product td:first-child {
  background: var(--dk-panel-2) !important;
  color: var(--dk-text) !important;
  font-weight: 500;
}

/* === Назва товару (посилання) === */
html.dark-mode .rm-table-product-name a,
html.dark-mode .rm-table-compare a {
  color: var(--dk-link) !important;
}

html.dark-mode .rm-table-product-name a:hover,
html.dark-mode .rm-table-compare a:hover {
  color: var(--dk-link-hover) !important;
  text-decoration: underline;
}

/* === Ціна === */
html.dark-mode .rm-table-compare .price,
html.dark-mode .rm-table-compare .rm-product-price,
html.dark-mode .rm-table-compare .rm-table-product-price {
  color: var(--dk-text) !important;
}

html.dark-mode .rm-table-compare .price-old,
html.dark-mode .rm-table-compare .rm-product-price-old {
  color: var(--dk-text-dim) !important;
  text-decoration: line-through;
}

/* === Кнопка "Видалити" з порівняння (зазвичай ×) === */
html.dark-mode .rm-table-compare .rm-table-product-remove,
html.dark-mode .rm-table-compare .remove,
html.dark-mode .rm-table-compare button.close {
  color: var(--dk-text) !important;
  background: transparent !important;
  opacity: 0.7;
}

html.dark-mode .rm-table-compare .rm-table-product-remove:hover {
  color: var(--dk-primary) !important;
  opacity: 1;
}

/* === Кнопки "Додати в кошик" внизу кожного товару === */
html.dark-mode .rm-table-compare .rm-cart-btn,
html.dark-mode .rm-table-compare .rm-btn.secondary {
  background: var(--dk-teal) !important;
  border: 1px solid var(--dk-teal) !important;
}

html.dark-mode .rm-table-compare .rm-cart-btn:hover,
html.dark-mode .rm-table-compare .rm-btn.secondary:hover {
  background: var(--dk-teal-h) !important;
  border-color: var(--dk-teal-h) !important;
}

html.dark-mode .rm-table-compare .rm-btn-text {
  color: #fff !important;
  background: transparent !important;
}

/* === Зображення товарів — лишити білий фон щоб товар було видно === */
/* Картки товарів зверху самі по собі лишаються з білим тлом — це нормально, бо фото на білому */
html.dark-mode .rm-table-compare img {
  background: #fff !important;
  border: 1px solid var(--dk-border-light) !important;
  border-radius: 4px;
}

/* === Заголовок сторінки "Порівняння товарів" === */
html.dark-mode .rm-compare-title,
html.dark-mode h1.rm-content-title {
  color: var(--dk-text) !important;
}
/* ==================== FIX LANGUAGE DROPDOWN ==================== */

/* === Контейнер дропдауну з мовами === */
html.dark-mode .rm-dropdown-inner.list-unstyled,
html.dark-mode .rm-dropdown .rm-dropdown-inner,
html.dark-mode .top-nav-account-links-item .rm-dropdown {
  background: var(--dk-panel) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* === Кнопки вибору мови === */
html.dark-mode .rm-dropdown-inner button,
html.dark-mode .rm-dropdown-inner .language-select,
html.dark-mode .rm-dropdown-inner .currency-select {
  background: transparent !important;
  color: var(--dk-text) !important;
  border: 0 !important;
}

html.dark-mode .rm-dropdown-inner button:hover,
html.dark-mode .rm-dropdown-inner .language-select:hover,
html.dark-mode .rm-dropdown-inner .currency-select:hover {
  background: var(--dk-panel-2) !important;
  color: var(--dk-link) !important;
}

/* === Активний пункт (поточна мова) === */
html.dark-mode .rm-dropdown-inner .active-item,
html.dark-mode .rm-dropdown-inner button.active-item {
  background: var(--dk-panel-3) !important;
  color: var(--dk-text) !important;
  font-weight: 500;
}

/* === Розділова лінія між пунктами === */
html.dark-mode .rm-dropdown-inner li:not(:last-child) {
  border-bottom: 1px solid var(--dk-border-light) !important;
}

/* === Стрілочка-трикутник дропдауну (::after) === */
html.dark-mode .rm-dropdown::after {
  border-bottom-color: var(--dk-panel) !important;
  border-top-color: var(--dk-panel) !important;
}
/* ==================== STYLE MOBILE FILTER BUTTON ==================== */

/* === Темна тема: прозорий фон + бірюзовий контур === */
html.dark-mode div#mobil_mini i.fa,
html.dark-mode div#mobil_mini i.fa-filter,
html.dark-mode div#mobil_mini > i:first-child {
  background: rgba(30, 33, 39, 0.85) !important;
  background-color: rgba(30, 33, 39, 0.85) !important;
  color: var(--dk-teal) !important;
  border: 2px solid var(--dk-teal) !important;
  opacity: 1 !important;
  width: 50px !important;
  height: 50px !important;
  line-height: 46px !important;
  font-size: 22px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

html.dark-mode div#mobil_mini i.fa:hover,
html.dark-mode div#mobil_mini i.fa:active {
  background: var(--dk-teal) !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* === Позиція кнопки — опускаємо нижче === */
html.dark-mode #mobil_mini i:first-child,
#mobil_mini i:first-child {
  top: 40% !important;
}

/* === Хрестик закриття (коли фільтр відкритий) — теж елегантно === */
html.dark-mode div#mobil_mini.open_fv i.fa-times,
html.dark-mode div#mobil_mini.open_fv i:last-child {
  background: rgba(30, 33, 39, 0.95) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  width: 45px !important;
  height: 45px !important;
  line-height: 43px !important;
  border-radius: 0 0 0 8px !important;
}

html.dark-mode div#mobil_mini.open_fv i.fa-times:hover {
  background: var(--dk-primary) !important;
  color: #fff !important;
  border-color: var(--dk-primary) !important;
}

/* === У світлій темі — теж покращимо вигляд === */
div#mobil_mini i.fa-filter,
#mobil_mini i:first-child {
  background: rgba(255, 255, 255, 0.9) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #43c6bc !important;
  border: 2px solid #43c6bc !important;
  opacity: 1 !important;
  width: 50px !important;
  height: 50px !important;
  line-height: 46px !important;
  font-size: 22px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease;
}

div#mobil_mini i.fa-filter:hover {
  background: #43c6bc !important;
  color: #fff !important;
}
/* ==================== ACCENT "ОФОРМИТИ ЗАМОВЛЕННЯ" BUTTON (cart popup) ==================== */

/* === Кнопка переходу до оформлення замовлення з попапа кошика === */
html.dark-mode .rm-cart-modal .rm-btn.dark[href*="simplecheckout"],
html.dark-mode .rm-cart-modal a.rm-btn.dark,
html.dark-mode .rm-popup-cart a.rm-btn.dark,
html.dark-mode a.rm-btn.dark[href*="checkout"],
html.dark-mode a.rm-btn.dark[href*="simplecheckout"] {
  background: var(--dk-primary) !important;
  border: 1px solid var(--dk-primary) !important;
  color: #fff !important;
}

html.dark-mode .rm-cart-modal .rm-btn.dark[href*="simplecheckout"]:hover,
html.dark-mode a.rm-btn.dark[href*="simplecheckout"]:hover,
html.dark-mode a.rm-btn.dark[href*="checkout"]:hover {
  background: var(--dk-primary-h) !important;
  border-color: var(--dk-primary-h) !important;
  color: #fff !important;
}


/* ==================== FIX MODAL CLOSE X (better version) ==================== */

/* === Кнопка-кружок навколо хрестика === */
html.dark-mode .modal-close,
html.dark-mode button.modal-close,
html.dark-mode .rm-sidebar-title-close {
  background: var(--dk-panel-2) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  padding: 0 !important;
  position: relative !important;
  cursor: pointer;
  opacity: 1 !important;
  margin-left: auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
}

html.dark-mode .modal-close:hover,
html.dark-mode button.modal-close:hover,
html.dark-mode .rm-sidebar-title-close:hover {
  background: var(--dk-primary) !important;
  border-color: var(--dk-primary) !important;
}

/* === Дві лінії хрестика — товщі, біло-сірі === */
html.dark-mode .modal-close .modal-close-icon,
html.dark-mode button.modal-close .modal-close-icon,
html.dark-mode .rm-sidebar-title-close .modal-close-icon {
  background-color: var(--dk-text) !important;
  background: var(--dk-text) !important;
  width: 16px !important;
  height: 2px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  border-radius: 1px;
  display: block !important;
}

html.dark-mode .modal-close .modal-close-icon.modal-close-left,
html.dark-mode .rm-sidebar-title-close .modal-close-icon.modal-close-left {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

html.dark-mode .modal-close .modal-close-icon.modal-close-right,
html.dark-mode .rm-sidebar-title-close .modal-close-icon.modal-close-right {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* На hover — лінії білі */
html.dark-mode .modal-close:hover .modal-close-icon,
html.dark-mode .rm-sidebar-title-close:hover .modal-close-icon {
  background-color: #fff !important;
  background: #fff !important;
}

/* ==================== DARK MODE TOGGLE PULSE FRAME ==================== */

@keyframes gofinFramePulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(67, 198, 188, 0.3);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(67, 198, 188, 1), 0 0 12px rgba(67, 198, 188, 0.5);
  }
}

/* === Десктопний перемикач === */
.gofin-theme-toggle.gofin-toggle-pulse {
  position: relative;
  border-radius: 6px;
  animation: gofinFramePulse 2.5s ease-in-out infinite;
}

/* === Мобільний перемикач === */
.gofin-theme-toggle-mobile.gofin-toggle-pulse {
  position: relative;
  border-radius: 6px;
  animation: gofinFramePulse 2.5s ease-in-out infinite;
}

/* Без анімації для accessibility */
@media (prefers-reduced-motion: reduce) {
  .gofin-toggle-pulse {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(67, 198, 188, 0.8) !important;
  }
}