/* ================================================================
   NS Store — nsstore_global.css
   CSS global que cubre TODAS las páginas
   Reemplaza: nsstore_darkmode.css + nsstore_darkmode_fix.css
   + fixes de header, sidebar, toolbar, paginador, botones
   ================================================================ */

/* ── VARIABLES ── */
:root {
  --ns-green:  #6BAA3A;
  --ns-green2: #5a9430;
  --ns-orange: #E8460A;
  --ns-black:  #0d1117;
  --ns-dark:   #161b22;
  --ns-card:   #1c2330;
  --ns-border: #30363d;
  --ns-text:   #f0f6ff;
  --ns-muted:  #8b949e;
  --ns-white:  #ffffff;
  --ns-font:   -apple-system,'Segoe UI',Roboto,'Exo 2',sans-serif;
}

/* ================================================================
   LIGHT MODE — Mejoras globales
   ================================================================ */

/* Tipografía global */
body, p, a, li, span, div, td, th, label, input, select, textarea, button {
  font-family: var(--ns-font) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ns-font) !important;
  letter-spacing: -0.3px !important;
}

/* Título de categoría / fabricante */
#center_column h1,
#center_column .page-heading,
.page-heading {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a2332 !important;
  letter-spacing: -0.5px !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
}

/* Breadcrumb */
#breadcrumb {
  background: #f4f6f8 !important;
  border-bottom: 1px solid #e5e9ef !important;
  padding: 8px 0 !important;
}
#breadcrumb a { color: var(--ns-green) !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; }
#breadcrumb .navigation-pipe { color: #94a3b8 !important; margin: 0 4px !important; }
#breadcrumb .navigation_page { color: #5a6a7a !important; font-size: 12px !important; }

/* ── HEADER ── */
#header-main {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e9ef !important;
}
/* Líneas blancas del header — quitar border del row y del inner */
#header-main .row,
#header-main .inner,
#header-main .container > .inner {
  border: none !important;
  outline: none !important;
}
#header-main .col-lg-2-4,
#header-main [class*="col-"] {
  border: none !important;
}
/* Buscador */
#search_query_top {
  background: #f8fafc !important;
  border: 2px solid #e5e9ef !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  color: #1a2332 !important;
  font-size: 13px !important;
  height: 42px !important;
  outline: none !important;
}
#search_query_top:focus { border-color: var(--ns-green) !important; background: #fff !important; }
#search_query_top::placeholder { color: #94a3b8 !important; }
#searchbox .btn, #search_block_top button[type="submit"] {
  background: var(--ns-green) !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  height: 42px !important;
  color: #fff !important;
}
#searchbox .btn:hover, #search_block_top button[type="submit"]:hover { background: var(--ns-green2) !important; }

/* ── TOOLBAR (ordenar, mostrar, comparar) ── */
.top-pagination-content,
.bottom-pagination-content {
  background: #ffffff !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}
.top-pagination-content p,
.top-pagination-content span,
.bottom-pagination-content p { color: #5a6a7a !important; font-size: 13px !important; }
.top-pagination-content select,
.bottom-pagination-content select {
  background: #f4f6f8 !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 6px !important;
  color: #1a2332 !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
}
.compare-form button,
.bt_compare {
  background: #f4f6f8 !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 6px !important;
  color: #5a6a7a !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  font-family: var(--ns-font) !important;
}
/* Botones grid/lista */
#grid, #list {
  background: #f4f6f8 !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 6px !important;
  color: #5a6a7a !important;
  width: 32px !important; height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s !important;
}
#grid.selected, #list.selected,
#grid:hover, #list:hover {
  background: var(--ns-green) !important;
  border-color: var(--ns-green) !important;
  color: #fff !important;
}

/* ── SIDEBAR CATEGORÍAS ── */
#left_column .block {
  background: #ffffff !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#left_column .block .title_block,
#left_column .block h4.title_block,
#left_column h4 {
  background: var(--ns-black) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--ns-font) !important;
}
#left_column .block .block_content {
  padding: 8px !important;
  background: #ffffff !important;
}
#left_column .block ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#left_column .block ul li { border: none !important; padding: 0 !important; margin-bottom: 2px !important; }
#left_column .block ul li a {
  display: block !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #374151 !important;
  text-decoration: none !important;
  transition: all .12s !important;
  font-family: var(--ns-font) !important;
}
#left_column .block ul li a:hover,
#left_column .block ul li.current > a,
#left_column .block ul li.active > a {
  background: rgba(107,170,58,.10) !important;
  color: var(--ns-green) !important;
  padding-left: 14px !important;
}
/* Contador de productos en categorías */
#left_column .block ul li .cat-count,
#left_column .block ul li .count {
  background: #e5e9ef !important;
  color: #5a6a7a !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  float: right !important;
  margin-top: 3px !important;
}

/* ── BOTONES DE PRODUCTO (mouse over) ── */
.product-container .functional-buttons { background: transparent !important; }
.product-container .functional-buttons .cart a.button,
.product-container .functional-buttons .ajax_add_to_cart_button {
  background: var(--ns-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--ns-font) !important;
  transition: background .15s !important;
}
.product-container .functional-buttons .cart a.button:hover,
.product-container .functional-buttons .ajax_add_to_cart_button:hover {
  background: var(--ns-green) !important;
  color: #fff !important;
}
.product-container .functional-buttons .view a.button,
.product-container .functional-buttons .more-info a.button {
  background: #f4f6f8 !important;
  color: #5a6a7a !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--ns-font) !important;
}
.product-container .functional-buttons .view a.button:hover { background: #e5e9ef !important; }

/* ── PAGINADOR ── */
#pagination, .pagination { margin: 12px 0 !important; }
.pagination ul { list-style: none !important; padding: 0 !important; display: flex !important; gap: 4px !important; flex-wrap: wrap !important; }
.pagination ul li a,
.pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important; height: 32px !important;
  padding: 0 8px !important;
  background: #fff !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 6px !important;
  color: #1a2332 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  font-family: var(--ns-font) !important;
}
.pagination ul li.active a,
.pagination ul li.active span,
.pagination ul li a:hover {
  background: var(--ns-green) !important;
  border-color: var(--ns-green) !important;
  color: #fff !important;
}
#pagination_next_bottom a,
#pagination_previous_bottom a,
a.btn.button-prev,
a.btn.button-next {
  background: var(--ns-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-family: var(--ns-font) !important;
}
#pagination_next_bottom a:hover,
#pagination_previous_bottom a:hover { background: var(--ns-green2) !important; }

/* Ocultar botones feos de enviar/imprimir */
.print-button, .send-to-friend-button,
a[href*="print"], a[href*="send_to_friend"],
.btn-print, .btn-send { display: none !important; }

/* ── FOOTER DUPLICADO ── */
#footernav { display: none !important; }

/* ================================================================
   DARK MODE — ambas clases
   ================================================================ */

/* ── BASE ── */
.dark-mode body, .darkmode--activated body,
.dark-mode #page, .darkmode--activated #page {
  background: var(--ns-black) !important;
  color: var(--ns-text) !important;
}

/* ── HEADER ── */
.dark-mode header#header,
.dark-mode #header-main,
.dark-mode #header-main .container,
.dark-mode #header-main .inner,
.dark-mode section.header-container,
.darkmode--activated header#header,
.darkmode--activated #header-main,
.darkmode--activated #header-main .container,
.darkmode--activated #header-main .inner,
.darkmode--activated section.header-container {
  background: var(--ns-dark) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #topbar,
.dark-mode #topbar .container > .inner,
.darkmode--activated #topbar,
.darkmode--activated #topbar .container > .inner {
  background: var(--ns-black) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #topbar a, .darkmode--activated #topbar a { color: var(--ns-muted) !important; }
.dark-mode #topbar a:hover, .darkmode--activated #topbar a:hover { color: var(--ns-green) !important; }

/* Buscador dark */
.dark-mode #search_query_top, .darkmode--activated #search_query_top {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
  color: var(--ns-text) !important;
}
.dark-mode #search_query_top::placeholder, .darkmode--activated #search_query_top::placeholder { color: var(--ns-muted) !important; }
.dark-mode #search_query_top:focus, .darkmode--activated #search_query_top:focus { border-color: var(--ns-green) !important; }

/* Carrito dark */
.dark-mode .blockcart_top .cart-inner a,
.dark-mode .blockcart_top .ajax_cart_no_product,
.darkmode--activated .blockcart_top .cart-inner a,
.darkmode--activated .blockcart_top .ajax_cart_no_product { color: var(--ns-text) !important; }

/* ── MEGAMENÚ dark ── */
.dark-mode #leo-megamenu,
.dark-mode #leo-megamenu .container,
.dark-mode #leo-megamenu .inner,
.dark-mode #block_top_menu,
.darkmode--activated #leo-megamenu,
.darkmode--activated #leo-megamenu .container,
.darkmode--activated #leo-megamenu .inner,
.darkmode--activated #block_top_menu {
  background: var(--ns-black) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #block_top_menu .sf-menu > li > a,
.darkmode--activated #block_top_menu .sf-menu > li > a { color: rgba(255,255,255,.80) !important; }
.dark-mode #block_top_menu .sf-menu > li > a:hover,
.darkmode--activated #block_top_menu .sf-menu > li > a:hover { color: #fff !important; background: rgba(107,170,58,.15) !important; }
.dark-mode #block_top_menu .sf-menu ul,
.darkmode--activated #block_top_menu .sf-menu ul {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #block_top_menu .sf-menu ul li a,
.darkmode--activated #block_top_menu .sf-menu ul li a { background: var(--ns-card) !important; color: rgba(255,255,255,.75) !important; }
.dark-mode #block_top_menu .sf-menu ul li a:hover,
.darkmode--activated #block_top_menu .sf-menu ul li a:hover { background: rgba(107,170,58,.15) !important; color: var(--ns-green) !important; }

/* ── BREADCRUMB dark ── */
.dark-mode #breadcrumb,
.dark-mode #breadcrumb .container,
.darkmode--activated #breadcrumb,
.darkmode--activated #breadcrumb .container {
  background: var(--ns-dark) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #breadcrumb a, .darkmode--activated #breadcrumb a { color: var(--ns-green) !important; }
.dark-mode #breadcrumb .navigation-pipe,
.dark-mode #breadcrumb .navigation_page,
.darkmode--activated #breadcrumb .navigation-pipe,
.darkmode--activated #breadcrumb .navigation_page { color: var(--ns-muted) !important; }

/* ── CONTENIDO dark ── */
.dark-mode #columns,
.dark-mode #center_column,
.dark-mode #content,
.darkmode--activated #columns,
.darkmode--activated #center_column,
.darkmode--activated #content {
  background: var(--ns-black) !important;
  color: var(--ns-text) !important;
}
.dark-mode #center_column h1,
.dark-mode .page-heading,
.darkmode--activated #center_column h1,
.darkmode--activated .page-heading { color: var(--ns-text) !important; }

/* ── TOOLBAR dark ── */
.dark-mode .top-pagination-content,
.dark-mode .bottom-pagination-content,
.darkmode--activated .top-pagination-content,
.darkmode--activated .bottom-pagination-content {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .top-pagination-content p,
.dark-mode .top-pagination-content span,
.dark-mode .bottom-pagination-content p,
.darkmode--activated .top-pagination-content p,
.darkmode--activated .top-pagination-content span,
.darkmode--activated .bottom-pagination-content p { color: var(--ns-muted) !important; }
.dark-mode .top-pagination-content select,
.dark-mode .bottom-pagination-content select,
.darkmode--activated .top-pagination-content select,
.darkmode--activated .bottom-pagination-content select {
  background: var(--ns-dark) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .compare-form button,
.dark-mode .bt_compare,
.darkmode--activated .compare-form button,
.darkmode--activated .bt_compare {
  background: var(--ns-dark) !important;
  color: var(--ns-muted) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #grid, .dark-mode #list,
.darkmode--activated #grid, .darkmode--activated #list {
  background: var(--ns-dark) !important;
  border-color: var(--ns-border) !important;
  color: var(--ns-muted) !important;
}
.dark-mode #grid.selected, .dark-mode #list.selected,
.darkmode--activated #grid.selected, .darkmode--activated #list.selected {
  background: var(--ns-green) !important;
  border-color: var(--ns-green) !important;
  color: #fff !important;
}

/* ── SIDEBAR dark ── */
.dark-mode #left_column,
.darkmode--activated #left_column { background: var(--ns-black) !important; }
.dark-mode #left_column .block,
.darkmode--activated #left_column .block {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #left_column .block .block_content,
.darkmode--activated #left_column .block .block_content { background: var(--ns-card) !important; }
.dark-mode #left_column .block ul li a,
.darkmode--activated #left_column .block ul li a { color: var(--ns-muted) !important; }
.dark-mode #left_column .block ul li a:hover,
.dark-mode #left_column .block ul li.current > a,
.darkmode--activated #left_column .block ul li a:hover,
.darkmode--activated #left_column .block ul li.current > a {
  background: rgba(107,170,58,.12) !important;
  color: var(--ns-green) !important;
}
.dark-mode #left_column .block ul li .cat-count,
.darkmode--activated #left_column .block ul li .cat-count {
  background: rgba(255,255,255,.08) !important;
  color: var(--ns-muted) !important;
}
/* Filtros */
.dark-mode #layered_block_left,
.darkmode--activated #layered_block_left {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode #layered_block_left .layered_subtitle,
.darkmode--activated #layered_block_left .layered_subtitle { color: var(--ns-text) !important; border-color: var(--ns-border) !important; }
.dark-mode #layered_block_left label,
.darkmode--activated #layered_block_left label { color: var(--ns-muted) !important; }

/* Mi cuenta sidebar dark */
.dark-mode #left_column .myaccount-link-list li a,
.darkmode--activated #left_column .myaccount-link-list li a { color: var(--ns-muted) !important; }
.dark-mode #left_column .myaccount-link-list li a:hover,
.darkmode--activated #left_column .myaccount-link-list li a:hover {
  background: rgba(107,170,58,.15) !important;
  color: var(--ns-green) !important;
  border-color: rgba(107,170,58,.3) !important;
}
.dark-mode #left_column .myaccount-link-list,
.darkmode--activated #left_column .myaccount-link-list { background: var(--ns-card) !important; }

/* ── CARDS DE PRODUCTO dark ── */
.dark-mode .product-container.product-block,
.darkmode--activated .product-container.product-block {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .product-container .left-block,
.darkmode--activated .product-container .left-block { background: var(--ns-dark) !important; }
.dark-mode .product-container a.product-name,
.darkmode--activated .product-container a.product-name { color: var(--ns-text) !important; }
.dark-mode .product-container a.product-name:hover,
.darkmode--activated .product-container a.product-name:hover { color: var(--ns-green) !important; }
.dark-mode .product-container .price.product-price,
.darkmode--activated .product-container .price.product-price { color: var(--ns-text) !important; }
.dark-mode .product-container .functional-buttons .view a,
.darkmode--activated .product-container .functional-buttons .view a {
  background: var(--ns-dark) !important;
  color: var(--ns-muted) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .product-container .functional-buttons .cart a.button,
.darkmode--activated .product-container .functional-buttons .cart a.button {
  background: var(--ns-card) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .product-container .functional-buttons .cart a.button:hover,
.darkmode--activated .product-container .functional-buttons .cart a.button:hover {
  background: var(--ns-green) !important;
  color: #fff !important;
}

/* ── PAGINADOR dark ── */
.dark-mode .pagination ul li a,
.dark-mode .pagination ul li span,
.darkmode--activated .pagination ul li a,
.darkmode--activated .pagination ul li span {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
  color: var(--ns-muted) !important;
}
.dark-mode .pagination ul li.active a,
.dark-mode .pagination ul li a:hover,
.darkmode--activated .pagination ul li.active a,
.darkmode--activated .pagination ul li a:hover {
  background: var(--ns-green) !important;
  border-color: var(--ns-green) !important;
  color: #fff !important;
}

/* ── HEADINGS dark ── */
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.darkmode--activated h1, .darkmode--activated h2, .darkmode--activated h3,
.darkmode--activated h4, .darkmode--activated h5, .darkmode--activated h6 {
  color: var(--ns-text) !important;
}

/* ── FORMULARIOS dark ── */
.dark-mode input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dark-mode textarea,
.dark-mode select,
.darkmode--activated input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.darkmode--activated textarea,
.darkmode--activated select {
  background: var(--ns-card) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode ::placeholder, .darkmode--activated ::placeholder { color: var(--ns-muted) !important; }
.dark-mode label, .darkmode--activated label { color: var(--ns-text) !important; }

/* ── TABLAS dark ── */
.dark-mode .table > tbody > tr > td,
.dark-mode .table > tbody > tr > th,
.dark-mode .table > thead > tr > th,
.darkmode--activated .table > tbody > tr > td,
.darkmode--activated .table > tbody > tr > th,
.darkmode--activated .table > thead > tr > th {
  background: var(--ns-card) !important;
  color: var(--ns-text) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
.darkmode--activated .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--ns-dark) !important; }

/* ── ALERTAS dark ── */
.dark-mode .alert-success, .darkmode--activated .alert-success { background: #1a3d1a !important; color: #7ec87e !important; border-color: #2d5a2d !important; }
.dark-mode .alert-info, .darkmode--activated .alert-info { background: #0f2a40 !important; color: #7abde8 !important; border-color: #1a4060 !important; }
.dark-mode .alert-warning, .darkmode--activated .alert-warning { background: #3d2e00 !important; color: #f0c060 !important; border-color: #5a4400 !important; }
.dark-mode .alert-danger, .darkmode--activated .alert-danger { background: #3d0f0f !important; color: #e87a7a !important; border-color: #5a1a1a !important; }

/* ── DROPDOWNS dark ── */
.dark-mode .dropdown-menu, .darkmode--activated .dropdown-menu {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode .dropdown-menu > li > a, .darkmode--activated .dropdown-menu > li > a { color: var(--ns-text) !important; }
.dark-mode .dropdown-menu > li > a:hover, .darkmode--activated .dropdown-menu > li > a:hover { background: var(--ns-dark) !important; color: var(--ns-green) !important; }

/* ── FOOTER dark ── */
.dark-mode footer#footer, .darkmode--activated footer#footer,
.dark-mode #footer, .darkmode--activated #footer { background: #0a0e13 !important; }
.dark-mode #footer .title_block, .darkmode--activated #footer .title_block,
.dark-mode #footer h4, .darkmode--activated #footer h4 { color: var(--ns-text) !important; }
.dark-mode #footer a, .darkmode--activated #footer a { color: var(--ns-muted) !important; }
.dark-mode #footer a:hover, .darkmode--activated #footer a:hover { color: var(--ns-green) !important; }
.dark-mode #footer p, .dark-mode #footer li,
.darkmode--activated #footer p, .darkmode--activated #footer li { color: var(--ns-muted) !important; }

/* Footer crear cuenta btn dark */
.dark-mode .ns-footer-cta, .darkmode--activated .ns-footer-cta { color: #fff !important; }

/* ── INDEX NS HOME dark ── */
.dark-mode .ns-home, .darkmode--activated .ns-home { background: var(--ns-dark) !important; }
.dark-mode .ns-section-white, .darkmode--activated .ns-section-white { background: var(--ns-card) !important; }
.dark-mode .ns-section-gray, .darkmode--activated .ns-section-gray { background: var(--ns-dark) !important; }
.dark-mode .ns-action-card, .darkmode--activated .ns-action-card { background: var(--ns-card) !important; border-color: var(--ns-border) !important; }
.dark-mode .ns-action-title, .darkmode--activated .ns-action-title { color: var(--ns-text) !important; }
.dark-mode .ns-action-desc, .darkmode--activated .ns-action-desc { color: var(--ns-muted) !important; }
.dark-mode .ns-cat-card, .darkmode--activated .ns-cat-card { background: var(--ns-card) !important; border-color: var(--ns-border) !important; }
.dark-mode .ns-cat-name, .darkmode--activated .ns-cat-name { color: var(--ns-text) !important; }
.dark-mode .ns-sec-title, .darkmode--activated .ns-sec-title { color: var(--ns-text) !important; }

/* ── DETALLE DE PRODUCTO dark ── */
.dark-mode body#product .primary_block,
.darkmode--activated body#product .primary_block {
  background: var(--ns-card) !important;
  border-color: var(--ns-border) !important;
}
.dark-mode body#product #image-block,
.darkmode--activated body#product #image-block { background: var(--ns-dark) !important; border-color: var(--ns-border) !important; }
.dark-mode body#product h1,
.darkmode--activated body#product h1 { color: var(--ns-text) !important; }
.dark-mode body#product .our_price_display .price,
.darkmode--activated body#product .our_price_display .price { color: var(--ns-text) !important; }
.dark-mode body#product #short_description_content,
.dark-mode body#product #short_description_content *,
.darkmode--activated body#product #short_description_content,
.darkmode--activated body#product #short_description_content * { color: var(--ns-muted) !important; background: transparent !important; }
.dark-mode body#product #short_description_block,
.darkmode--activated body#product #short_description_block { background: var(--ns-dark) !important; }
.dark-mode body#product #more_info_block,
.darkmode--activated body#product #more_info_block { background: var(--ns-card) !important; border-color: var(--ns-border) !important; }
.dark-mode body#product #more_info_tabs,
.darkmode--activated body#product #more_info_tabs { background: var(--ns-dark) !important; border-color: var(--ns-border) !important; }
.dark-mode body#product #more_info_tabs li a,
.darkmode--activated body#product #more_info_tabs li a { color: var(--ns-muted) !important; }
.dark-mode body#product #more_info_tabs li.active a,
.darkmode--activated body#product #more_info_tabs li.active a { color: var(--ns-green) !important; }
.dark-mode body#product #more_info_tab_content,
.darkmode--activated body#product #more_info_tab_content { background: var(--ns-card) !important; }
.dark-mode body#product #more_info_tab_content p,
.dark-mode body#product #more_info_tab_content div,
.dark-mode body#product #more_info_tab_content span,
.darkmode--activated body#product #more_info_tab_content p,
.darkmode--activated body#product #more_info_tab_content div,
.darkmode--activated body#product #more_info_tab_content span { color: var(--ns-muted) !important; background: transparent !important; }
.dark-mode body#product #also_bought_block,
.dark-mode body#product #crossselling_block,
.darkmode--activated body#product #also_bought_block,
.darkmode--activated body#product #crossselling_block { background: var(--ns-card) !important; border-color: var(--ns-border) !important; }
.dark-mode body#product #also_bought_block h2,
.dark-mode body#product #crossselling_block h2,
.darkmode--activated body#product #also_bought_block h2,
.darkmode--activated body#product #crossselling_block h2 { color: var(--ns-text) !important; border-color: var(--ns-border) !important; }
.dark-mode body#product #also_bought_block a.product-name,
.dark-mode body#product #crossselling_block a.product-name,
.darkmode--activated body#product #also_bought_block a.product-name,
.darkmode--activated body#product #crossselling_block a.product-name { color: var(--ns-text) !important; }
.dark-mode body#product .table-data-sheet .name,
.darkmode--activated body#product .table-data-sheet .name { background: var(--ns-dark) !important; color: var(--ns-muted) !important; }
.dark-mode body#product .table-data-sheet .value,
.darkmode--activated body#product .table-data-sheet .value { color: var(--ns-text) !important; }
.dark-mode body#product .table-data-sheet tr,
.darkmode--activated body#product .table-data-sheet tr { border-color: var(--ns-border) !important; }

/* ── IMÁGENES dark ── */
.dark-mode img:not(.logo):not([src*="logo"]):not([src*="ns-hero"]),
.darkmode--activated img:not(.logo):not([src*="logo"]):not([src*="ns-hero"]) {
  filter: brightness(.88) contrast(1.05) !important;
}

/* ── BOTÓN TOGGLE ── */
#dm-toggle-btn {
  position: fixed !important;
  bottom: 20px !important; right: 20px !important;
  z-index: 9999 !important;
  background: #1c2330;
  color: var(--ns-green);
  border: 2px solid var(--ns-green);
  border-radius: 50px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.4) !important;
  transition: all .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--ns-font) !important;
}
#dm-toggle-btn:hover { background: var(--ns-green) !important; color: #fff !important; }
body:not(.dark-mode):not(.darkmode--activated) #dm-toggle-btn {
  background: #fff !important;
  color: #1a2332 !important;
  border-color: #e5e9ef !important;
}
body:not(.dark-mode):not(.darkmode--activated) #dm-toggle-btn:hover {
  background: var(--ns-green) !important;
  color: #fff !important;
  border-color: var(--ns-green) !important;
}

/* ================================================================
   FIXES ADICIONALES v2
   ================================================================ */

/* ── CONTENEDOR FANTASMA BLANCO (section.header-container) ── */
section.header-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dark-mode section.header-container,
.darkmode--activated section.header-container {
  background: transparent !important;
}

/* ── HEADER DARK CON MÁXIMA ESPECIFICIDAD ── */
html body.dark-mode #header-main,
html body.dark-mode #header-main .container,
html body.dark-mode #header-main .inner,
html body.dark-mode #header-main .row,
html body.darkmode--activated #header-main,
html body.darkmode--activated #header-main .container,
html body.darkmode--activated #header-main .inner,
html body.darkmode--activated #header-main .row {
  background: #161b22 !important;
  border-color: #30363d !important;
}
html body.dark-mode header#header,
html body.darkmode--activated header#header {
  background: #161b22 !important;
}

/* ── BOTÓN ENVIAR A AMIGO — ocultar completamente ── */
.send_friend_button,
.send-to-friend-button,
a.send_friend,
a[href*="send_to_friend"],
a[href*="sendtoafriend"],
form[action*="send_to_friend"],
#send_to_friend_block,
.print-button,
a[href*="print"] {
  display: none !important;
}

/* ── BOTÓN "MÁS INFORMACIÓN" — reestilizar ── */
a.button.btn.btn-default.button-medium,
.product_list a.button.btn,
#more_info_block .nav-tabs,
.more-info a,
a.more-info-button {
  background: #f4f6f8 !important;
  color: #5a6a7a !important;
  border: 1px solid #e5e9ef !important;
  border-radius: 7px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
  text-decoration: none !important;
  transition: all .15s !important;
}
html body.dark-mode a.button.btn.btn-default,
html body.darkmode--activated a.button.btn.btn-default {
  background: #1c2330 !important;
  color: #8b949e !important;
  border-color: #30363d !important;
}

/* ── VISTA RÁPIDA Y MOUSE OVER ── */
.product-container .quick-view,
.product-container .quickview-button,
.product-container a.quick-view {
  background: rgba(107,170,58,.90) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: -apple-system,'Segoe UI',Roboto,sans-serif !important;
  transition: background .15s !important;
}
.product-container .quick-view:hover,
.product-container a.quick-view:hover { background: rgba(90,148,48,.95) !important; }

/* Overlay del mouse over */
.product-container .product_img_link::after,
.product-container .product-image-container::after { display: none !important; }

/* ── IMAGEN DEL PRODUCTO — bordes redondeados ── */
body#product #image-block,
body#product .product-image-container.image {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e5e9ef !important;
}
html body.dark-mode body#product #image-block,
html body.darkmode--activated body#product #image-block {
  border-color: #30363d !important;
  background: #161b22 !important;
}

/* ── BREADCRUMB DARK — mayor especificidad ── */
html body.dark-mode #breadcrumb,
html body.dark-mode #breadcrumb .container,
html body.darkmode--activated #breadcrumb,
html body.darkmode--activated #breadcrumb .container {
  background: #161b22 !important;
  border-color: #30363d !important;
}
html body.dark-mode #breadcrumb a,
html body.darkmode--activated #breadcrumb a { color: #6BAA3A !important; }
html body.dark-mode #breadcrumb span,
html body.dark-mode #breadcrumb .navigation_page,
html body.darkmode--activated #breadcrumb span,
html body.darkmode--activated #breadcrumb .navigation_page { color: #8b949e !important; }

/* ── TOOLBAR DARK — mayor especificidad ── */
html body.dark-mode .top-pagination-content,
html body.dark-mode .bottom-pagination-content,
html body.darkmode--activated .top-pagination-content,
html body.darkmode--activated .bottom-pagination-content {
  background: #1c2330 !important;
  border-color: #30363d !important;
}
html body.dark-mode .top-pagination-content *,
html body.dark-mode .bottom-pagination-content *,
html body.darkmode--activated .top-pagination-content *,
html body.darkmode--activated .bottom-pagination-content * {
  color: #8b949e !important;
  background: transparent !important;
  border-color: #30363d !important;
}
html body.dark-mode .top-pagination-content select,
html body.dark-mode .bottom-pagination-content select,
html body.darkmode--activated .top-pagination-content select,
html body.darkmode--activated .bottom-pagination-content select {
  background: #161b22 !important;
  color: #f0f6ff !important;
}

/* ── PAGINADOR DARK — mayor especificidad ── */
html body.dark-mode .pagination ul li a,
html body.darkmode--activated .pagination ul li a {
  background: #1c2330 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}
html body.dark-mode .pagination ul li.active a,
html body.dark-mode .pagination ul li a:hover,
html body.darkmode--activated .pagination ul li.active a,
html body.darkmode--activated .pagination ul li a:hover {
  background: #6BAA3A !important;
  border-color: #6BAA3A !important;
  color: #fff !important;
}

/* ================================================================
   FIX FINAL v3 — toolbar blanco y header
   ================================================================ */

/* Toolbar contenedor principal */
html body.dark-mode #center_column .top-pagination-content,
html body.dark-mode #center_column .bottom-pagination-content,
html body.darkmode--activated #center_column .top-pagination-content,
html body.darkmode--activated #center_column .bottom-pagination-content {
  background-color: #1c2330 !important;
  border-color: #30363d !important;
}
html body.dark-mode #center_column .top-pagination-content *:not(select):not(option),
html body.dark-mode #center_column .bottom-pagination-content *:not(select):not(option),
html body.darkmode--activated #center_column .top-pagination-content *:not(select):not(option),
html body.darkmode--activated #center_column .bottom-pagination-content *:not(select):not(option) {
  background-color: transparent !important;
  color: #8b949e !important;
  border-color: #30363d !important;
}
html body.dark-mode #center_column .top-pagination-content select,
html body.darkmode--activated #center_column .top-pagination-content select {
  background-color: #161b22 !important;
  color: #f0f6ff !important;
}

/* Header — especificidad máxima */
html body.dark-mode #header,
html body.dark-mode #header *,
html body.darkmode--activated #header,
html body.darkmode--activated #header * {
  border-color: #30363d !important;
}
html body.dark-mode #header-main,
html body.darkmode--activated #header-main {
  background-color: #161b22 !important;
}
html body.dark-mode #header-main .container,
html body.dark-mode #header-main .inner,
html body.dark-mode #header-main .row,
html body.dark-mode #header-main [class*="col-"],
html body.darkmode--activated #header-main .container,
html body.darkmode--activated #header-main .inner,
html body.darkmode--activated #header-main .row,
html body.darkmode--activated #header-main [class*="col-"] {
  background: #161b22 !important;
  background-color: #161b22 !important;
}

/* Breadcrumb */
html body.dark-mode #breadcrumb,
html body.darkmode--activated #breadcrumb {
  background: #161b22 !important;
  background-color: #161b22 !important;
  border-color: #30363d !important;
}
html body.dark-mode #breadcrumb *,
html body.darkmode--activated #breadcrumb * { color: #8b949e !important; }
html body.dark-mode #breadcrumb a,
html body.darkmode--activated #breadcrumb a { color: #6BAA3A !important; }

/* ================================================================
   FIX DEFINITIVO — contenedor central, toolbar, breadcrumb
   Basado en HTML real verificado del sitio
   ================================================================ */

/* ── CONTENEDOR GLOBAL CENTRAL ── */
/* Este es el que envuelve todo el contenido y no cambia */
html body.dark-mode #columns,
html body.dark-mode #columns .container,
html body.dark-mode #columns .row,
html body.dark-mode #center_column,
html body.dark-mode .columns-container,
html body.darkmode--activated #columns,
html body.darkmode--activated #columns .container,
html body.darkmode--activated #columns .row,
html body.darkmode--activated #center_column,
html body.darkmode--activated .columns-container {
  background: #0d1117 !important;
  background-color: #0d1117 !important;
}

/* ── BREADCRUMB — fix definitivo ── */
html body.dark-mode div#breadcrumb,
html body.darkmode--activated div#breadcrumb {
  background: #161b22 !important;
  background-color: #161b22 !important;
  border-bottom: 1px solid #30363d !important;
}
html body.dark-mode div#breadcrumb a,
html body.darkmode--activated div#breadcrumb a {
  color: #6BAA3A !important;
}
html body.dark-mode div#breadcrumb span,
html body.dark-mode div#breadcrumb .navigation_page,
html body.dark-mode div#breadcrumb .navigation-pipe,
html body.darkmode--activated div#breadcrumb span,
html body.darkmode--activated div#breadcrumb .navigation_page,
html body.darkmode--activated div#breadcrumb .navigation-pipe {
  color: #8b949e !important;
}

/* ── TOOLBAR — fix definitivo ── */
/* El toolbar está dentro de #top_column dentro de #columns */
html body.dark-mode #top_column,
html body.darkmode--activated #top_column {
  background: transparent !important;
}
html body.dark-mode #top_column .top-pagination-content,
html body.dark-mode #top_column .bottom-pagination-content,
html body.dark-mode div.top-pagination-content,
html body.dark-mode div.bottom-pagination-content,
html body.darkmode--activated #top_column .top-pagination-content,
html body.darkmode--activated #top_column .bottom-pagination-content,
html body.darkmode--activated div.top-pagination-content,
html body.darkmode--activated div.bottom-pagination-content {
  background: #1c2330 !important;
  background-color: #1c2330 !important;
  border: 1px solid #30363d !important;
  border-radius: 10px !important;
}
/* Todos los elementos dentro del toolbar */
html body.dark-mode div.top-pagination-content p,
html body.dark-mode div.top-pagination-content span,
html body.dark-mode div.top-pagination-content label,
html body.dark-mode div.top-pagination-content a,
html body.dark-mode div.top-pagination-content div,
html body.dark-mode div.bottom-pagination-content p,
html body.dark-mode div.bottom-pagination-content span,
html body.darkmode--activated div.top-pagination-content p,
html body.darkmode--activated div.top-pagination-content span,
html body.darkmode--activated div.top-pagination-content label,
html body.darkmode--activated div.top-pagination-content a,
html body.darkmode--activated div.top-pagination-content div,
html body.darkmode--activated div.bottom-pagination-content p,
html body.darkmode--activated div.bottom-pagination-content span {
  color: #8b949e !important;
  background: transparent !important;
}
html body.dark-mode div.top-pagination-content select,
html body.darkmode--activated div.top-pagination-content select {
  background: #161b22 !important;
  color: #f0f6ff !important;
  border-color: #30363d !important;
}

/* ── PRODUCTOS RELACIONADOS ── */
html body.dark-mode #also_bought_block,
html body.dark-mode #crossselling_block,
html body.darkmode--activated #also_bought_block,
html body.darkmode--activated #crossselling_block {
  background: #1c2330 !important;
  border-color: #30363d !important;
}
html body.dark-mode #also_bought_block h2,
html body.dark-mode #crossselling_block h2,
html body.darkmode--activated #also_bought_block h2,
html body.darkmode--activated #crossselling_block h2 {
  color: #f0f6ff !important;
  border-color: #30363d !important;
}
html body.dark-mode #also_bought_block a,
html body.dark-mode #crossselling_block a,
html body.darkmode--activated #also_bought_block a,
html body.darkmode--activated #crossselling_block a {
  color: #f0f6ff !important;
}
html body.dark-mode #also_bought_block .product-container,
html body.dark-mode #crossselling_block .product-container,
html body.darkmode--activated #also_bought_block .product-container,
html body.darkmode--activated #crossselling_block .product-container {
  background: #161b22 !important;
  border-color: #30363d !important;
}
/* Paginador de productos relacionados */
html body.dark-mode #also_bought_block #pagination,
html body.dark-mode #also_bought_block .pagination,
html body.darkmode--activated #also_bought_block #pagination,
html body.darkmode--activated #also_bought_block .pagination {
  background: transparent !important;
}
html body.dark-mode #also_bought_block .pagination a,
html body.darkmode--activated #also_bought_block .pagination a {
  background: #1c2330 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

/* ── BARRA DE BENEFICIOS — light y dark mode ── */
/* En light: fondo gris muy suave, texto oscuro */
#ns-top-benefits {
  background: #f4f6f8 !important;
  border-bottom: 1px solid #e5e9ef !important;
  padding: 6px 0 !important;
  font-size: 11px !important;
}
#ns-top-benefits span,
#ns-top-benefits a {
  color: #5a6a7a !important;
}
#ns-top-benefits .ns-check,
#ns-top-benefits span[style*="#6BAA3A"] {
  color: #6BAA3A !important;
}
#ns-top-benefits a:hover { color: #6BAA3A !important; }

/* En dark: fondo negro, texto gris */
html body.dark-mode #ns-top-benefits,
html body.darkmode--activated #ns-top-benefits {
  background: #0d1117 !important;
  background-color: #0d1117 !important;
  border-bottom: 1px solid #30363d !important;
}
html body.dark-mode #ns-top-benefits span,
html body.dark-mode #ns-top-benefits a,
html body.darkmode--activated #ns-top-benefits span,
html body.darkmode--activated #ns-top-benefits a {
  color: #8b949e !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  #ns-top-benefits { display: none !important; }
  html body.dark-mode #header-main,
  html body.darkmode--activated #header-main { padding: 8px 0 !important; }
}
@media (max-width: 991px) and (min-width: 768px) {
  #ns-top-benefits .container > div { gap: 12px !important; font-size: 10px !important; }
}
