/* ===================================================================
   REDISEÑO MINIMALISTA - PRS02045_02
   Fuente: Inter | Color base: #1e293b | Acento: #2563EB
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- VARIABLES --- */
:root {
  /* Reemplaza el color primario verde del tema CoderPlace con el azul corporativo */
  --primary-color:   #2563EB;
  --secondary-color: #1d4ed8;

  --c-dark:          #0f172a;
  --c-primary:       #2563EB;
  --c-primary-h:     #1d4ed8;
  --c-primary-lt:    #eff6ff;
  --c-text:          #1e293b;
  --c-text-2:        #64748b;
  --c-text-3:        #94a3b8;
  --c-bg:            #ffffff;
  --c-surface:       #f8fafc;
  --c-border:        #e2e8f0;
  --c-border-h:      #cbd5e1;
  --c-success:       #059669;
  --c-danger:        #dc2626;
  --c-warning:       #d97706;

  --sh-sm:  0 1px 2px rgba(0,0,0,.05);
  --sh:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --sh-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --sh-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.05);
  --sh-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);

  --r:     6px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-pill:9999px;

  --tr: all 0.2s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===================================================================
   BASE
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  color: var(--c-text) !important;
  background: var(--c-bg) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  line-height: 1.25 !important;
}

a { transition: var(--tr); }

img { max-width: 100%; height: auto; }

/* ===================================================================
   HEADER BANNER (franja informativa)
   =================================================================== */

.header-banner {
  background: #0a0f1e !important;
  color: rgba(255,255,255,.7) !important;
  font-size: .8125rem;
  text-align: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.header-banner a { color: rgba(255,255,255,.6) !important; }
.header-banner a:hover { color: rgba(255,255,255,.9) !important; }

/* ===================================================================
   HEADER PRINCIPAL — FONDO OSCURO
   =================================================================== */

.header-top {
  background: var(--c-dark) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  padding: 0 !important;
}

.header-top .header-div {
  padding: 14px 0;
}

.header-top .container {
  display: flex !important;
  align-items: center !important;
  gap: 20px;
}

/* Logo */
.header-left { flex-shrink: 0; }

.header-left .logo,
.header_logo img {
  max-height: 48px !important;
  width: auto !important;
}

/* Centro (búsqueda) */
.header-center {
  flex: 1;
  min-width: 0;
}

/* Derecha (carrito, cuenta) */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Barra de navegación — fondo blanco limpio con borde inferior */
.header-top-main,
.header-top-main.bg_main {
  background: #fff !important;
  border-top: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.header-top-main .container {
  display: flex;
  align-items: center;
}

/* ===================================================================
   MENÚ PRINCIPAL
   =================================================================== */

/* Links del menú — texto oscuro sobre fondo blanco */
.header-top-main.bg_main #_top_main_menu li a[data-depth="0"],
.header-top-main .top-menu > li > a,
.header-top-main .top-menu > li > .nav-link,
.header-top-main #_desktop_top_menu .top-menu > li > a {
  color: var(--c-text) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  padding: 14px 12px !important;
  background: transparent !important;
  border-bottom: 2px solid transparent;
  transition: var(--tr);
  display: inline-block !important;
  white-space: nowrap;
}

/* Hover y activo — subrayado azul sin cambio de fondo */
.header-top-main .top-menu > li:hover > a,
.header-top-main .top-menu > li:hover > .nav-link,
.header-top-main.bg_main #_top_main_menu li:hover > a[data-depth="0"],
.header-top-main #_desktop_top_menu .top-menu > li:hover > a {
  color: var(--c-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--c-primary);
}

/* Ítem activo (página actual) */
.header-top-main .top-menu > li.current > a,
.header-top-main .top-menu > li.active > a,
.header-top-main .top-menu > li.current > .nav-link,
.header-top-main.bg_main #_top_main_menu li.current > a[data-depth="0"] {
  color: var(--c-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--c-primary);
  font-weight: 600 !important;
}

/* Sub-menús desplegables */
.header-top-main .top-menu .sub-menu,
.header-top-main.bg_main .top-menu .sub-menu,
#_desktop_top_menu .sub-menu,
.top-menu .sub-menu {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px 0 !important;
}

/* Links dentro del sub-menú */
.header-top-main .sub-menu a,
.header-top-main .sub-menu .nav-link,
#header .header-top-main.bg_main .menu .sub-menu a,
.top-menu a:not([data-depth="0"]) {
  color: var(--c-text) !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  padding: 9px 18px !important;
  background: transparent !important;
  border-bottom: none !important;
  display: block !important;
  white-space: normal;
}

.header-top-main .sub-menu a:hover,
.header-top-main .sub-menu .nav-link:hover,
.top-menu a:not([data-depth="0"]):hover {
  background: var(--c-surface) !important;
  color: var(--c-primary) !important;
}

/* ===================================================================
   BÚSQUEDA
   =================================================================== */

#search_widget { width: 100%; }

/* Contenedor pill — adaptado a header oscuro */
#search_widget .searchtoggle,
#search_widget .searchtoggle form {
  display: flex !important;
  align-items: stretch !important;
  background: rgba(255,255,255,.1) !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
  transition: var(--tr);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#search_widget .searchtoggle:focus-within,
#search_widget .searchtoggle form:focus-within {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.1) !important;
}

#search_widget input[type="text"],
#search_widget input[name="s"] {
  border: none !important;
  background: transparent !important;
  padding: 11px 18px !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  color: #fff !important;
  flex: 1 !important;
  min-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

#search_widget input::placeholder { color: rgba(255,255,255,.5) !important; }

/* Botón Buscar — integrado en el lado derecho de la pill */
#search_widget .searchtoggle button[type="submit"],
#search_widget .searchtoggle form button[type="submit"],
#search_widget button.btn-primary {
  background: var(--c-primary) !important;
  border: none !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  padding: 11px 22px !important;
  color: #fff !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: auto !important;
  transition: var(--tr) !important;
  transform: none !important;
  box-shadow: none !important;
}

#search_widget .searchtoggle button[type="submit"]:hover {
  background: var(--c-primary-h) !important;
  transform: none !important;
}

#search_widget .searchtoggle button .submit-text {
  font-size: .875rem;
  line-height: 1;
}

/* Ocultar el botón toggle de búsqueda móvil en desktop */
#search_widget .search_button { display: none; }

/* ===================================================================
   CARRITO (usa .blockcart-header + .carthome + .cart-products-counthome)
   =================================================================== */

#_desktop_cart .blockcart-header {
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
  padding: 8px 18px !important;
  background: var(--c-primary) !important;
  border-radius: var(--r-pill) !important;
  transition: background .2s ease !important;
  border: none !important;
  gap: 8px;
  /* SIN transform — evita el jitter/parpadeo del panel */
  transform: none !important;
}

#_desktop_cart .blockcart-header:hover {
  background: var(--c-primary-h) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Ícono del carrito */
#_desktop_cart .carthome {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-color: #fff !important;
  -webkit-mask-image: url(../img/megnor/cart.svg);
  mask-image: url(../img/megnor/cart.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Contador del carrito */
#_desktop_cart .cart-products-counthome {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  font-family: var(--font) !important;
}

/* ===================================================================
   WISHLIST Y COMPARAR (los "0" flotantes) — sobre fondo oscuro
   =================================================================== */

.wishlist-top-link,
.compare-top-link,
a.stfeature-wishlist-top,
a.stfeature-compare-top,
[id*="wishlist_top"] a,
[id*="compare_top"] a,
.header_user_info a[href*="wishlist"],
.header_user_info a[href*="compare"] {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 10px !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  background: transparent !important;
  color: rgba(255,255,255,.7) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  justify-content: center;
  transition: var(--tr);
  text-decoration: none !important;
}

.wishlist-top-link:hover,
.compare-top-link:hover {
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

/* ===================================================================
   CUENTA DE USUARIO (usa .tm_userinfotitle .account.top-link)
   =================================================================== */

#_desktop_user_info .tm_userinfotitle .account.top-link,
#_desktop_user_info .sign-in.account.top-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: var(--r-pill) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font) !important;
  transition: var(--tr);
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer;
}

#_desktop_user_info .tm_userinfotitle .account.top-link:hover,
#_desktop_user_info .sign-in.account.top-link:hover {
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}

/* Ícono color blanco sobre fondo oscuro */
#_desktop_user_info .account-icon {
  background-color: rgba(255,255,255,.85) !important;
}

/* Flecha dropdown blanca */
#_desktop_user_info .material-icons.expand-more {
  color: rgba(255,255,255,.7) !important;
}

/* Ícono de cuenta */
#_desktop_user_info .account-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor !important;
  -webkit-mask-image: url(../img/megnor/check-in.svg);
  mask-image: url(../img/megnor/check-in.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Flecha dropdown */
#_desktop_user_info .material-icons.expand-more {
  font-size: 16px !important;
  line-height: 1;
  color: currentColor;
}

/* Dropdown del usuario */
#_desktop_user_info .user-info.dropdown-menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px 0 !important;
  min-width: 180px;
  background: var(--c-bg) !important;
}

#_desktop_user_info .user-info.dropdown-menu a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  color: var(--c-text) !important;
  font-size: .875rem;
  font-family: var(--font) !important;
  transition: var(--tr);
  border: none !important;
  background: transparent !important;
}

#_desktop_user_info .user-info.dropdown-menu a:hover {
  background: var(--c-surface) !important;
  color: var(--c-primary) !important;
}

#_desktop_user_info .user-info.dropdown-menu a .material-icons {
  font-size: 17px !important;
  color: var(--c-primary);
}

/* ===================================================================
   BOTONES
   =================================================================== */

.btn {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: 10px 22px !important;
  border-radius: var(--r) !important;
  border: 1.5px solid transparent !important;
  transition: var(--tr) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.btn-primary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--c-primary-h) !important;
  border-color: var(--c-primary-h) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-secondary,
.btn-default {
  background: var(--c-bg) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background: var(--c-primary-lt) !important;
  transform: none !important;
}

/* Botón agregar al carrito en tarjeta */
.add-to-cart-button .btn,
.add-to-cart-button button.add-to-cart,
button.add-to-cart {
  width: 100%;
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  color: #fff !important;
  font-size: .8125rem !important;
  padding: 10px 16px !important;
  border-radius: var(--r) !important;
  font-weight: 600 !important;
}

.add-to-cart-button .btn:hover,
button.add-to-cart:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--sh-md) !important;
}

/* Botón agregar al carrito en página de producto */
#add-to-cart-or-refresh .add-to-cart,
.product-add-to-cart .add-to-cart {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  font-size: .9375rem !important;
  padding: 14px 28px !important;
  border-radius: var(--r-lg) !important;
  font-weight: 700 !important;
  width: 100%;
}

#add-to-cart-or-refresh .add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover {
  background: var(--c-primary-h) !important;
  border-color: var(--c-primary-h) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===================================================================
   FORMULARIOS
   =================================================================== */

.form-control {
  font-family: var(--font) !important;
  font-size: .875rem !important;
  color: var(--c-text) !important;
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  transition: var(--tr);
  line-height: 1.5;
}

.form-control:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
  background: var(--c-bg) !important;
}

.form-control::placeholder { color: var(--c-text-3) !important; }

label,
.form-control-label {
  font-weight: 500;
  font-size: .875rem;
  color: var(--c-text);
  margin-bottom: 6px;
  display: block;
  font-family: var(--font) !important;
}

.form-group { margin-bottom: 18px; }

select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ===================================================================
   TARJETAS DE PRODUCTO
   =================================================================== */

.product-miniature {
  background: var(--c-bg);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-miniature:hover {
  border-color: var(--c-border-h) !important;
  box-shadow: var(--sh-lg) !important;
  transform: none !important;
}

/* Zona de imagen */
.product-miniature .thumbnail-container {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  aspect-ratio: 1 / 1;
}

.product-miniature .thumbnail-container a.product-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
}

.product-miniature .thumbnail-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
}

.product-miniature:hover .thumbnail-container img {
  transform: scale(1.06) !important;
}

/* Acciones sobre imagen (quick view, wishlist) */
.product-actions-main {
  position: absolute !important;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s ease;
}

.product-miniature:hover .product-actions-main {
  opacity: 1;
}

.product-actions-main a,
.product-actions-main button {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-pill) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--c-text) !important;
  font-size: 0 !important;
  transition: var(--tr) !important;
  padding: 0 !important;
  box-shadow: var(--sh-sm);
}

.product-actions-main a:hover,
.product-actions-main button:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  transform: scale(1.1);
}

/* Quick view con ícono */
a.quick-view.btn {
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,.95) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 !important;
  font-size: 0 !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--sh-sm);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: var(--tr) !important;
}

a.quick-view.btn::before {
  content: "👁";
  font-size: 14px;
}

a.quick-view.btn:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* Descripción del producto */
.product-miniature .product-description {
  padding: 12px 14px 8px !important;
  background: var(--c-bg);
  flex: 1;
}

.product-brand {
  font-size: .75rem;
  color: var(--c-text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 4px;
}

.product-title {
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
  font-family: var(--font) !important;
}

.product-title a {
  color: var(--c-dark) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-title a:hover { color: var(--c-primary) !important; }

/* Sección de precio y botón */
.product-bottom {
  padding: 10px 14px 14px !important;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

.product-price-and-shipping {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.product-bottom .price,
.product-price-and-shipping .price {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
}

.product-bottom .regular-price,
.product-price-and-shipping .regular-price {
  font-size: .8125rem !important;
  color: var(--c-text-3) !important;
  text-decoration: line-through !important;
}

/* Banderas (new, sale) */
.product-flag {
  font-size: .6875rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--r-pill) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.product-flag.on-sale,
.product-flag.discount { background: var(--c-danger) !important; color: #fff !important; }

.product-flag.new { background: var(--c-success) !important; color: #fff !important; }

/* ===================================================================
   MIGAS DE PAN
   =================================================================== */

.breadcrumb {
  background: transparent !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-size: .8125rem;
  border: none !important;
}

.breadcrumb-item a { color: var(--c-text-2) !important; font-weight: 400; }
.breadcrumb-item a:hover { color: var(--c-primary) !important; }
.breadcrumb-item.active { color: var(--c-dark) !important; font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { content: "›" !important; color: var(--c-text-3) !important; }

/* ===================================================================
   PAGINACIÓN
   =================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 32px 0;
  flex-wrap: wrap;
}

.page-list {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-list li a,
.page-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: var(--r) !important;
  border: 1.5px solid var(--c-border) !important;
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text) !important;
  transition: var(--tr);
  background: var(--c-bg) !important;
}

.page-list li a:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background: var(--c-primary-lt) !important;
}

.page-list li.current a,
.page-list li.active a {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}

/* ===================================================================
   AUTOCOMPLETE DE BÚSQUEDA (cp_blocksearch)
   =================================================================== */

/* Contenedor principal del dropdown */
#cpsearch_content_result {
  border: 1px solid var(--c-border) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  box-shadow: var(--sh-xl) !important;
  background: var(--c-bg) !important;
  padding: 8px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

/* Área scrollable de resultados */
#cpsearch_content_result #cpsearch_eccept_data {
  max-height: 420px !important;
  overflow-y: auto !important;
}

#cpsearch_eccept_data::-webkit-scrollbar { width: 4px; }
#cpsearch_eccept_data::-webkit-scrollbar-track { background: var(--c-surface); }
#cpsearch_eccept_data::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

/* Cada ítem de resultado */
#cpsearch_eccept_data .items-list > li {
  display: block !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  margin: 0 !important;
  border-radius: var(--r) !important;
  overflow: hidden;
}

#cpsearch_eccept_data .items-list > li:last-child { border-bottom: none !important; }

/* El <a> envolvente ocupa todo el item — hace que TODO sea clickeable */
#cpsearch_eccept_data .items-list > li > a.search-result-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 8px !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .15s ease;
  border-radius: var(--r) !important;
}

#cpsearch_eccept_data .items-list > li > a.search-result-link:hover {
  background: var(--c-surface) !important;
}

/* Imagen del producto */
#cpsearch_eccept_data .items-list li .image {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--c-border);
  border-radius: var(--r) !important;
  overflow: hidden;
  background: var(--c-surface);
}

#cpsearch_eccept_data .items-list li .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Contenido de texto */
#cpsearch_eccept_data .items-list .cpsearch-content {
  flex: 1 !important;
  width: auto !important;
  padding: 0 !important;
  min-width: 0;
}

/* Nombre del producto — sobrescribir el h5 grande */
#cpsearch_eccept_data .items-list h5.product-name,
#cpsearch_eccept_data .items-list .product-name {
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cpsearch_eccept_data .items-list h5.product-name a,
#cpsearch_eccept_data .items-list .product-name a {
  color: var(--c-dark) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#cpsearch_eccept_data .items-list h5.product-name a:hover,
#cpsearch_eccept_data .items-list .product-name a:hover {
  color: var(--c-primary) !important;
}

/* Categoría — ocultar o hacer muy pequeña */
#cpsearch_eccept_data .items-list h5.cat-name {
  font-size: .6875rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--c-text-3) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
  display: none !important;
}

/* Precio */
#cpsearch_eccept_data .items-list .content_price {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

#cpsearch_eccept_data .items-list .content_price .price {
  font-size: .875rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
}

#cpsearch_eccept_data .items-list .content_price .old-price.regular-price {
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: var(--c-text-3) !important;
  text-decoration: line-through !important;
}

#cpsearch_eccept_data .items-list .sale-percentage {
  font-size: .6875rem !important;
  font-weight: 700 !important;
  background: #fef2f2 !important;
  color: var(--c-danger) !important;
  padding: 2px 7px !important;
  border-radius: var(--r-pill) !important;
  position: static !important;
}

/* Pie del dropdown: título de resultados */
#cpsearch_eccept_data .search-title {
  font-size: .8125rem !important;
  font-family: var(--font) !important;
  color: var(--c-text-2) !important;
  text-align: center !important;
  padding: 10px 8px 4px !important;
  border-top: 1px solid var(--c-border);
  margin-top: 6px;
  float: none !important;
  width: 100% !important;
}

#cpsearch_eccept_data .search-title span {
  font-size: .8125rem !important;
  color: var(--c-text-3) !important;
}

/* Sin resultados */
#cpsearch_eccept_data .noresult {
  font-size: .9375rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--c-text-2) !important;
  text-align: center !important;
  padding: 24px 0 !important;
  letter-spacing: 0 !important;
}

/* Botón ver todos */
#cpsearch_eccept_data .title_showall_text {
  font-size: .8125rem !important;
  font-family: var(--font) !important;
  color: var(--c-text-2) !important;
  background: var(--c-surface) !important;
  border-radius: var(--r) !important;
  padding: 8px 12px !important;
  text-align: center !important;
  margin: 6px 0 0 !important;
  float: none !important;
  width: 100% !important;
}

/* Spinner de carga */
#cpsearch_content_result p.loanding {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 80px !important;
  width: 100% !important;
  background: none !important;
  margin: 0 !important;
}

/* ===================================================================
   BARRA DE SELECCIÓN / ORDENAMIENTO DE PRODUCTOS
   =================================================================== */

/* Contenedor principal — reemplaza el gris plano */
#js-product-list-top.products-selection {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 10px 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
}

/* Lado izquierdo: toggle grilla/lista + conteo */
.products-selection .total-products {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Conteo de productos */
.products-selection .total-products p {
  font-size: .875rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  margin: 0 !important;
  font-weight: 500;
}

/* Toggle grilla / lista */
.products-selection .display.grid_list {
  display: flex !important;
  align-items: center;
  gap: 2px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 2px !important;
}

.products-selection .display li {
  margin: 0 !important;
}

.products-selection .display li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 28px !important;
  border-radius: 4px !important;
  color: var(--c-text-2) !important;
  transition: var(--tr);
  font-size: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}

/* Íconos SVG para grilla y lista via CSS */
.products-selection .display li#grid a::before {
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.products-selection .display li#list a::before {
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='3' rx='1'/%3E%3Crect x='1' y='7' width='14' height='3' rx='1'/%3E%3Crect x='1' y='12' width='14' height='3' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='3' rx='1'/%3E%3Crect x='1' y='7' width='14' height='3' rx='1'/%3E%3Crect x='1' y='12' width='14' height='3' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.products-selection .display li a:hover {
  background: var(--c-border) !important;
  color: var(--c-dark) !important;
}

.products-selection .display li.selected a,
.products-selection .display li#grid.selected a,
.products-selection .display li#list.selected a {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* Lado derecho: label + dropdown */
.products-selection .product_sort {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.products-selection .sort-by {
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  white-space: nowrap;
}

/* Botón del dropdown */
.products-selection .select-title {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 7px 12px !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--c-text) !important;
  cursor: pointer;
  transition: border-color .2s ease;
  white-space: nowrap;
}

.products-selection .select-title:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

.products-selection .select-title .material-icons {
  font-size: 16px !important;
  color: var(--c-text-2) !important;
}

/* Dropdown menu */
.products-selection .dropdown-menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px 0 !important;
  min-width: 160px !important;
  background: var(--c-bg) !important;
}

.products-selection .dropdown-menu .select-list {
  display: block;
  padding: 9px 16px !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  color: var(--c-text) !important;
  transition: var(--tr);
  text-decoration: none !important;
}

.products-selection .dropdown-menu .select-list:hover,
.products-selection .dropdown-menu .select-list.current {
  background: var(--c-primary-lt) !important;
  color: var(--c-primary) !important;
}

.products-selection .dropdown-menu .select-list.current {
  font-weight: 600 !important;
}

/* ===================================================================
   TÍTULO DE LISTADO
   =================================================================== */

#js-product-list-header,
h1.h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c-border);
}

/* Ordenamiento */
.products-sort-order .select-title {
  font-size: .875rem;
  font-weight: 500;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 8px 14px !important;
  cursor: pointer;
  transition: var(--tr);
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.products-sort-order .select-title:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

.products-sort-order .dropdown-menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px 0 !important;
}

.products-sort-order .dropdown-item {
  font-size: .875rem;
  padding: 8px 14px;
  color: var(--c-text);
  font-family: var(--font) !important;
}

.products-sort-order .dropdown-item:hover {
  background: var(--c-primary-lt) !important;
  color: var(--c-primary) !important;
}

/* ===================================================================
   PÁGINA DE DETALLE DE PRODUCTO
   =================================================================== */

.page-product .product-name,
h1.h1,
.product-name {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
  margin-bottom: 12px;
  line-height: 1.2 !important;
}

#product-description-short {
  font-size: .9375rem !important;
  color: var(--c-text-2) !important;
  line-height: 1.7 !important;
}

.current-price .price {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
}

/* Imagen principal */
.product-cover {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  background: var(--c-surface);
}

/* Miniaturas */
.product-images ul {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
}

.product-images li.thumb-container {
  border: 2px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  overflow: hidden;
  cursor: pointer;
  transition: var(--tr);
  width: 70px;
  height: 70px;
}

.product-images li.thumb-container:hover,
.product-images li.thumb-container.selected {
  border-color: var(--c-primary) !important;
}

/* Tabs de producto */
.tabs .nav-link {
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text-2) !important;
  padding: 10px 18px;
  border-bottom: 2px solid transparent;
  transition: var(--tr);
  background: transparent !important;
  font-family: var(--font) !important;
}

.tabs .nav-link.active,
.tabs .nav-link:hover {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary);
}

/* ===================================================================
   COLUMNA IZQUIERDA (FILTROS / CATEGORÍAS)
   =================================================================== */

.block-categories,
#left-column .card,
#left-column .block {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px;
  box-shadow: none !important;
}

.block-categories .block-title,
#left-column .block-title,
#left-column .h6 {
  font-size: .9375rem !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--c-primary);
  display: block;
  font-family: var(--font) !important;
}

.block-categories ul { list-style: none; padding: 0; margin: 0; }

.block-categories li a {
  display: block;
  padding: 7px 10px;
  color: var(--c-text) !important;
  font-size: .875rem;
  border-radius: 4px;
  transition: var(--tr);
}

.block-categories li a:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary) !important;
  padding-left: 14px;
}

.block-categories li.current > a {
  background: var(--c-primary-lt);
  color: var(--c-primary) !important;
  font-weight: 600;
}

/* Filtros facetados */
.facet .facet-title {
  font-weight: 600 !important;
  font-size: .875rem !important;
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.facet-label {
  font-size: .875rem;
  color: var(--c-text) !important;
  cursor: pointer;
  transition: var(--tr);
}

.facet-label:hover { color: var(--c-primary) !important; }

/* ===================================================================
   ALERTAS
   =================================================================== */

.alert {
  border-radius: var(--r) !important;
  padding: 12px 16px !important;
  font-size: .875rem !important;
  border: 1px solid transparent !important;
  font-family: var(--font) !important;
}

.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #15803d !important; }
.alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info    { background: var(--c-primary-lt) !important; border-color: #bfdbfe !important; color: #1e40af !important; }

/* ===================================================================
   FOOTER
   =================================================================== */

footer#footer { margin-top: 48px !important; }

.footer-container {
  background: var(--c-dark) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 48px 0 0 !important;
}

.footer-container h3,
.footer-container .h3,
.footer-container .block-title {
  font-size: .8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: rgba(255,255,255,.95) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font) !important;
}

.footer-container ul { list-style: none; padding: 0; margin: 0; }

.footer-container ul li { margin-bottom: 7px; }

.footer-container ul li a {
  color: rgba(255,255,255,.58) !important;
  font-size: .875rem;
  transition: var(--tr);
  font-family: var(--font) !important;
}

.footer-container ul li a:hover {
  color: rgba(255,255,255,.92) !important;
  padding-left: 4px;
}

.footer-container .row:last-child {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 32px;
  padding: 18px 0;
}

.footer-container .text-sm-center { text-align: center; }

.footer-container .text-sm-center a {
  color: rgba(255,255,255,.38) !important;
  font-size: .75rem;
}

.footer-container .text-sm-center a:hover {
  color: rgba(255,255,255,.65) !important;
}

/* ===================================================================
   SECCIÓN FOOTER-BEFORE + NEWSLETTER — integrado al footer oscuro
   =================================================================== */

#footer .footer-before {
  background: var(--c-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.block_newsletter {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 28px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

/* Icono del newsletter — blanco sobre oscuro */
.block_newsletter .title::before {
  background-color: rgba(255,255,255,.9) !important;
}

.block_newsletter .title {
  padding-inline-start: 56px !important;
  flex-shrink: 0;
}

.block_newsletter .block_title {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: var(--font) !important;
  margin-bottom: 4px !important;
}

.block_newsletter .title span {
  font-size: .875rem !important;
  color: rgba(255,255,255,.65) !important;
  font-family: var(--font) !important;
}

.block_newsletter .block_content { flex: 1; }

/* Input pill sobre fondo oscuro */
.block_newsletter form .input-wrapper {
  width: 100% !important;
  max-width: 500px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.1) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
  transition: var(--tr);
}

.block_newsletter form .input-wrapper:focus-within {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.5) !important;
}

.block_newsletter form input[type="email"] {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 11px 18px !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  color: #fff !important;
  height: auto !important;
  flex: 1;
  outline: none !important;
  box-shadow: none !important;
}

.block_newsletter form input[type="email"]::placeholder {
  color: rgba(255,255,255,.5) !important;
}

/* Botón Suscribirse */
.block_newsletter .btn.hidden-xs-down,
.block_newsletter form input.btn[name="submitNewsletter"] {
  background: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  padding: 11px 22px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  height: auto !important;
  transition: background .2s ease !important;
  white-space: nowrap;
}

.block_newsletter .btn.hidden-xs-down:hover,
.block_newsletter form input.btn[name="submitNewsletter"]:hover {
  background: var(--c-primary-h) !important;
}

.block_newsletter .btn.hidden-sm-up { display: none !important; }

@media (max-width: 543px) {
  .block_newsletter {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .block_newsletter .title { padding-inline-start: 0 !important; }
  .block_newsletter .title::before { display: none !important; }
  .block_newsletter .btn.hidden-xs-down { display: none !important; }
  .block_newsletter .btn.hidden-sm-up { display: inline-flex !important; }
  .block_newsletter form .input-wrapper { max-width: 100% !important; }
}

/* ===================================================================
   REDES SOCIALES
   =================================================================== */

.ps-social-follow ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.ps-social-follow ul li a {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55) !important;
  font-size: .875rem;
  transition: var(--tr);
}

.ps-social-follow ul li a:hover {
  border-color: rgba(255,255,255,.6) !important;
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.08) !important;
}

/* ===================================================================
   DROPDOWN GENÉRICO
   =================================================================== */

.dropdown-menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 6px 0 !important;
  animation: dropFade .15s ease;
}

.dropdown-item {
  font-size: .875rem;
  padding: 8px 14px;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  transition: var(--tr);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--c-primary-lt) !important;
  color: var(--c-primary) !important;
}

@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   MODAL
   =================================================================== */

.modal-content {
  border: none !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--c-border) !important;
  padding: 18px 24px !important;
}

.modal-title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-dark);
  font-family: var(--font) !important;
}

.modal-body { padding: 22px 24px !important; }

/* ===================================================================
   CARRITO (PÁGINA)
   =================================================================== */

.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-border);
}

.cart-item:last-child { border-bottom: none; }

.cart-summary {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px !important;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: .875rem;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font) !important;
}

.cart-summary-line:last-child { border-bottom: none; }

.cart-summary-line.cart-total {
  font-weight: 700;
  font-size: 1.0625rem;
}

/* ===================================================================
   TABLAS
   =================================================================== */

.table th {
  font-weight: 600;
  color: var(--c-dark) !important;
  background: var(--c-surface) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--c-border) !important;
  font-family: var(--font) !important;
  font-size: .875rem !important;
}

.table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  vertical-align: middle !important;
}

/* ===================================================================
   CUENTA DEL CLIENTE
   =================================================================== */

.account-links .link-item,
.account-links a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 18px 20px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  color: var(--c-text) !important;
  font-size: .875rem;
  font-weight: 500;
  transition: var(--tr);
  background: var(--c-bg) !important;
  margin-bottom: 12px;
}

.account-links .link-item:hover,
.account-links a:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background: var(--c-primary-lt) !important;
  transform: translateY(-2px);
  box-shadow: var(--sh) !important;
}

/* ===================================================================
   MENÚ MÓVIL
   =================================================================== */

#menu-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r) !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-dark) !important;
  transition: var(--tr);
  background: var(--c-bg) !important;
}

#menu-icon:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

/* ===================================================================
   SECCIONES HOMEPAGE
   =================================================================== */

.featured-products h2,
.featured-products .products-section-title,
.new-products h2,
#best-sales-products h2,
#new-products h2,
#homefeatured-products h2,
.page-product-box h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 14px;
  position: relative;
  font-family: var(--font) !important;
}

.featured-products h2::after,
.new-products h2::after,
#homefeatured-products h2::after,
#best-sales-products h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--c-primary);
  border-radius: var(--r-pill);
}

/* ===================================================================
   BLOQUE DE POLÍTICAS EN PRODUCTO (blockreassurance)
   =================================================================== */

.blockreassurance_product {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 !important;
  margin-top: 20px !important;
  overflow: hidden;
}

/* Cada fila */
.blockreassurance_product > div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
  transition: background .15s ease;
  cursor: default;
}

.blockreassurance_product > div:last-of-type {
  border-bottom: none !important;
}

.blockreassurance_product > div[onclick]:hover,
.blockreassurance_product > div[style*="cursor:pointer"]:hover {
  background: var(--c-surface) !important;
  cursor: pointer !important;
}

/* Ícono: cuadrado azul claro con svg filtrado */
.blockreassurance_product .item-product {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: var(--c-primary-lt) !important;
  border-radius: var(--r) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  border-bottom: none !important;
  font-family: unset !important;
}

.blockreassurance_product .item-product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: invert(33%) sepia(99%) saturate(500%) hue-rotate(200deg) brightness(90%) !important;
}

/* Contenedor de texto (title + description) */
.blockreassurance_product > div > p.block-title,
.blockreassurance_product > div > span.block-title {
  display: block !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  margin-bottom: 2px !important;
  margin-top: 0 !important;
  line-height: 1.3 !important;
}

.blockreassurance_product > div > p:not(.block-title) {
  font-size: .8125rem !important;
  color: var(--c-text-2) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-family: var(--font) !important;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 991.98px) {
  .product-miniature:hover { transform: none !important; }
  .header-top .container { flex-wrap: wrap; }
  .header-center { order: 3; width: 100%; }
  .footer-container { padding: 32px 0 0 !important; }
}

@media (max-width: 767.98px) {
  .product-name, h1.h1 { font-size: 1.375rem !important; }
  .current-price .price { font-size: 1.5rem !important; }
  #js-product-list-header { font-size: 1.25rem !important; }

  .block_newsletter { padding: 22px 16px !important; }
  .block_newsletter .form-group {
    flex-direction: column;
    gap: 10px;
  }
  .block_newsletter .form-group .form-control,
  .block_newsletter .form-group .btn {
    border-radius: var(--r) !important;
    border-right: 1.5px solid var(--c-border) !important;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .btn { padding: 9px 16px !important; }
}

/* ===================================================================
   CART BLOCK SIDEBAR — RESET COMPLETO
   (Evita que estilos globales rompan el panel del carrito)
   =================================================================== */

/* Eliminar transform en hover dentro del carrito — evita el jitter/parpadeo */
.cart_block *,
.cart_block .btn,
.cart_block .btn:hover,
.cart_block .btn-primary,
.cart_block .btn-primary:hover,
.cart_block .btn-secondary,
.cart_block .btn-secondary:hover,
.cart_block a,
.cart_block a:hover {
  transform: none !important;
  animation: none !important;
}

/* Nombre del producto en el carrito — texto simple, no pill */
.cart_block .product-name,
.cart_block .product-name a,
.cart_block span.product-name,
.cart_block span.product-name a {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--c-dark) !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

.cart_block .product-name a:hover {
  color: var(--c-primary) !important;
  background: transparent !important;
}

/* Imágenes del carrito — sin bordes circulares */
.cart_block .cart-image,
.cart_block .cart-image a,
.cart_block .cart-image img,
.cart_block .cart-item img {
  border-radius: var(--r) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  display: block;
  overflow: hidden;
}

.cart_block .cart-image {
  width: 70px !important;
  height: 70px !important;
  flex-shrink: 0;
  overflow: hidden;
}

.cart_block .cart-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Botón eliminar — ícono simple, no pill grande */
.cart_block .remove-from-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  color: var(--c-text-2) !important;
  padding: 0 !important;
  flex-shrink: 0;
  transition: var(--tr);
  transform: none !important;
  box-shadow: none !important;
}

.cart_block .remove-from-cart:hover {
  background: #fef2f2 !important;
  border-color: var(--c-danger) !important;
  color: var(--c-danger) !important;
  transform: none !important;
}

.cart_block .remove-from-cart .material-icons {
  font-size: 16px !important;
}

/* Precio en el carrito */
.cart_block .product-price {
  font-size: .9375rem !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
}

.cart_block .product-quantity {
  font-size: .8125rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
}

/* Totales en el carrito */
.cart_block .cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: .875rem;
  font-family: var(--font) !important;
}

.cart_block .cart-summary-line .label {
  color: var(--c-text-2);
}

.cart_block .cart-summary-line .value {
  font-weight: 600;
  color: var(--c-dark);
}

.cart_block .cart-summary-line.cart-total .value {
  font-size: 1rem;
  font-weight: 700;
}

/* Botones Ver Carrito / Verificar */
.cart_block .checkout .btn,
.cart_block .viewcart .btn,
.cart_block button.viewcart_button,
.cart_block button.checkout_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 16px !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background .2s ease !important;
}

.cart_block .checkout .btn:hover,
.cart_block .viewcart .btn:hover,
.cart_block button.viewcart_button:hover,
.cart_block button.checkout_button:hover {
  background: var(--c-primary-h) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Header del carrito */
.cart_block .top-block-cart,
.cart_block.block.exclusive .top-block-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-primary) !important;
  color: #fff !important;
}

.cart_block .toggle-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  font-family: var(--font) !important;
}

.cart_block .top-block-cart .close-icon {
  color: rgba(255,255,255,.8) !important;
  cursor: pointer;
  font-size: .875rem;
  font-family: var(--font) !important;
}

.cart_block .top-block-cart .close-icon:hover {
  color: #fff !important;
}

/* Botón "Categorías" en la barra de navegación */
.menu-container .cat-title,
.header-top-main .menu-container .cat-title,
.header-top-main .menu-icon .cat-title {
  color: var(--c-text) !important;
  background: transparent !important;
}

/* Panel lateral de categorías — título */
.cat-title.title2,
.title_main_menu {
  background-color: var(--c-primary) !important;
  color: #fff !important;
}

.cat-title.title2 * {
  color: #fff !important;
}

/* ===================================================================
   SELECTOR DE CANTIDAD — REESCRITURA CON FLEX
   El modelo table-cell de Bootstrap 3 no funciona en Bootstrap 4 flex
   =================================================================== */

/* Wrapper: flex horizontal — input a la izquierda, botones a la derecha */
.bootstrap-touchspin,
.qty .bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  background: var(--c-bg) !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* Input de cantidad */
.bootstrap-touchspin input[type="number"],
.bootstrap-touchspin input[type="text"],
.bootstrap-touchspin input[name="qty"],
#quantity_wanted {
  flex: 1 !important;
  border: none !important;
  border-right: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  background: var(--c-bg) !important;
  height: 100% !important;
  min-width: 54px !important;
  max-width: 72px !important;
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.bootstrap-touchspin input::-webkit-inner-spin-button,
.bootstrap-touchspin input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Columna de botones: flex vertical */
.bootstrap-touchspin .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 100% !important;
  /* No table-cell — usamos flex */
  vertical-align: unset !important;
}

/* Botones arriba/abajo */
.bootstrap-touchspin .input-group-btn-vertical > .btn,
.bootstrap-touchspin .input-group-btn-vertical > .btn-default,
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  font-size: .625rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  transform: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.bootstrap-touchspin .bootstrap-touchspin-up {
  border-bottom: 1px solid var(--c-border) !important;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn:hover,
.bootstrap-touchspin .bootstrap-touchspin-up:hover,
.bootstrap-touchspin .bootstrap-touchspin-down:hover {
  background: var(--c-primary-lt) !important;
  color: var(--c-primary) !important;
  transform: none !important;
}

/* ===================================================================
   PÁGINA DE DETALLE DE PRODUCTO — REDISEÑO MINIMALISTA
   =================================================================== */

/* Layout principal */
.product-page.product-container {
  padding-top: 8px;
  padding-bottom: 40px;
}

/* --- TÍTULO --- */
h1.productpage_title {
  font-family: var(--font) !important;
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--c-dark) !important;
  margin-bottom: 14px !important;
  letter-spacing: -.01em;
}

/* --- ATRIBUTOS (marca, referencia, condición) --- */
.productpage-attributes-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}

.brand-infos,
.product-reference,
.product-condition {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem !important;
  font-family: var(--font) !important;
}

.brand-infos .label,
.product-reference .label,
.product-condition .label {
  font-weight: 600 !important;
  color: var(--c-text-2) !important;
  font-size: .8125rem !important;
  margin-bottom: 0 !important;
  display: inline !important;
}

.brand-infos a {
  color: var(--c-primary) !important;
  font-weight: 500;
}

.product-reference span,
.product-condition span {
  color: var(--c-text) !important;
  font-weight: 500;
}

/* --- DESCRIPCIÓN CORTA --- */
.product-short-description,
[id^="product-description-short"] {
  font-family: var(--font) !important;
  font-size: .9375rem !important;
  line-height: 1.75 !important;
  color: var(--c-text-2) !important;
  margin-bottom: 20px !important;
}

.product-short-description ul,
[id^="product-description-short"] ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.product-short-description li,
[id^="product-description-short"] li {
  margin-bottom: 4px;
  line-height: 1.6;
}

/* --- PRECIOS --- */
.product-prices.js-product-prices {
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.product-price.h5 {
  font-size: 1 !important;
  font-weight: normal !important;
  margin: 0 !important;
}

.current-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.current-price-value {
  font-family: var(--font) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
  line-height: 1 !important;
  letter-spacing: -.02em;
}

.product-discount {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.product-discount .regular-price {
  font-family: var(--font) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--c-text-3) !important;
  text-decoration: line-through !important;
}

.disc-price .discount,
.discount-percentage,
.discount-amount {
  display: inline-block;
  background: #fef2f2 !important;
  color: var(--c-danger) !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
}

.delivery-information {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem !important;
  color: var(--c-success) !important;
  font-family: var(--font) !important;
  margin-top: 8px;
}

/* --- CANTIDAD Y AGREGAR AL CARRITO — MISMA FILA, WISH-COMP ABAJO --- */
.product-add-to-cart {
  margin-top: 4px;
}

.product-quantity {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;   /* permite que wish-comp baje */
  gap: 10px 12px !important;
  margin-bottom: 0;
}

.product-double-quantity {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.product-double-quantity .control-label {
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Disponibilidad y cantidad mínima: fila completa */
.product-quantity #product-availability,
.product-quantity .product-minimal-quantity {
  flex-basis: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* El input de cantidad está estilizado en la sección Bootstrap TouchSpin */
.product-quantity .qty {
  display: inline-flex !important;
  align-items: center;
}

.product-quantity .bootstrap-touchspin:focus-within {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* Botón: ocupa el espacio restante en la primera fila junto al selector */
.product-quantity .add {
  flex: 1 1 200px !important;  /* crece, pero mínimo 200px para no achicarse */
  min-width: 180px !important;
  display: flex !important;
  align-items: flex-end !important;
}

.product-quantity .add .btn.add-to-cart,
button.add-to-cart[data-button-action="add-to-cart"] {
  width: 100% !important;
  height: 46px !important;
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  color: #fff !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  border-radius: var(--r-lg) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .01em;
  padding: 0 24px !important;
  transition: background .2s ease !important;
  transform: none !important;
}

.product-quantity .add .btn.add-to-cart:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.product-quantity .add .btn.add-to-cart:disabled,
.product-quantity .add .btn.add-to-cart[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  background: var(--c-text-3) !important;
  border-color: var(--c-text-3) !important;
}

/* Ícono carrito dentro del botón */
.product-quantity .add .btn.add-to-cart .material-icons {
  font-size: 18px !important;
}

/* Disponibilidad */
#product-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem !important;
  font-family: var(--font) !important;
  margin-top: 10px;
  width: 100%;
}

#product-availability .material-icons.product-available { color: var(--c-success) !important; font-size: 16px !important; }
#product-availability .material-icons.product-last-items { color: var(--c-warning) !important; font-size: 16px !important; }
#product-availability .material-icons.product-unavailable { color: var(--c-danger) !important; font-size: 16px !important; }

#product-availability .message {
  font-weight: 500;
  color: var(--c-text-2) !important;
}

/* Wishlist y comparar — siempre en fila propia debajo del botón */
.wish-comp {
  display: flex !important;
  gap: 8px;
  margin-top: 0;
  width: 100% !important;
  flex-basis: 100% !important;
  flex-wrap: wrap;
}

.wish-comp a,
.wish-comp button {
  font-size: .8125rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 12px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-pill) !important;
  background: transparent !important;
  transition: var(--tr);
  transform: none !important;
}

.wish-comp a:hover,
.wish-comp button:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  transform: none !important;
}

/* --- FLECHAS DEL SLIDER DE MINIATURAS --- */
.scroll-box-arrows i {
  background: #fff !important;
  color: var(--c-dark) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 20px !important;
  line-height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh) !important;
  cursor: pointer;
  transition: var(--tr);
  transform: none !important;
}

.scroll-box-arrows i:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* --- LAYOUT PRODUCTO: IMAGEN ALINEADA CON TÍTULO --- */

/* Convertir el row de float a flex para controlar el alineamiento */
#product .product-page.product-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* Columna imagen: quitar float y sticky del tema */
#product .product-page .col-md-5 {
  float: none !important;
  position: relative !important;
  top: auto !important;
  flex: 0 0 45% !important;
  max-width: 45% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Columna info: quitar float del tema */
#product .product-page .col-md-7 {
  float: none !important;
  flex: 0 0 55% !important;
  max-width: 55% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Sticky solo en el contenido interno (no en la columna entera) */
#product .product-leftside {
  position: sticky !important;
  top: 90px !important;
}

/* --- GALERÍA DE IMÁGENES --- */

#product .product-cover {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  background: var(--c-surface) !important;
  margin-bottom: 10px;
}

#product .product-cover img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Thumbnails */
#product .product-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

#product .product-images .thumb-container {
  width: 68px !important;
  height: 68px !important;
  border: 2px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease;
  flex-shrink: 0;
}

#product .product-images .thumb-container:hover,
#product .product-images .thumb-container.selected {
  border-color: var(--c-primary) !important;
}

#product .product-images .thumb-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- TABS DE PRODUCTO --- */
.product-tabcontent {
  margin-top: 40px;
  border-top: 1px solid var(--c-border);
  padding-top: 0;
}

.product-tabcontent .tabs .nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border) !important;
  margin-bottom: 0;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.product-tabcontent .tabs .nav-tabs::-webkit-scrollbar { display: none; }

.product-tabcontent .tabs .nav-item {
  flex-shrink: 0;
}

.product-tabcontent .tabs .nav-link {
  display: block !important;
  padding: 14px 20px !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--c-text-2) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px;
  transition: color .2s ease, border-color .2s ease !important;
  cursor: pointer;
  white-space: nowrap;
}

.product-tabcontent .tabs .nav-link:hover {
  color: var(--c-primary) !important;
  background: transparent !important;
}

.product-tabcontent .tabs .nav-link.active,
.product-tabcontent .tabs .nav-link.js-product-nav-active {
  color: var(--c-dark) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--c-primary) !important;
  background: transparent !important;
}

/* Contenido de tabs */
.product-tabcontent .tab-content {
  padding: 28px 0;
}

.product-tabcontent .tab-pane .product-description,
.product-tabcontent .product-description {
  font-family: var(--font) !important;
  font-size: .9375rem !important;
  line-height: 1.8 !important;
  color: var(--c-text-2) !important;
  max-width: 800px;
}

.product-tabcontent .product-description h2,
.product-tabcontent .product-description h3,
.product-tabcontent .product-description h4 {
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  margin-top: 24px;
  margin-bottom: 12px;
}

.product-tabcontent .product-description ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.product-tabcontent .product-description li {
  margin-bottom: 6px;
  line-height: 1.7;
}

.product-tabcontent .product-description table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 16px 0;
}

.product-tabcontent .product-description table th {
  background: var(--c-surface) !important;
  font-weight: 600;
  color: var(--c-dark) !important;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  text-align: left;
  font-family: var(--font) !important;
}

.product-tabcontent .product-description table td {
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  color: var(--c-text) !important;
  font-family: var(--font) !important;
}

.product-tabcontent .product-description table tr:nth-child(even) td {
  background: var(--c-surface);
}

/* --- RESEÑAS --- */
.hook-reviews {
  margin-bottom: 16px;
}

/* --- PRODUCTOS RELACIONADOS --- */
.product-accessories {
  padding: 40px 0;
  border-top: 1px solid var(--c-border);
}

.product-accessories .products-section-title .title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  margin-bottom: 24px;
  text-align: center;
}

/* ===================================================================
   RESPONSIVE MOBILE — VERSIÓN COMPLETA
   Breakpoints: 991px tablet | 767px mobile | 480px pequeño
   Solo afecta mobile — desktop intacto
   =================================================================== */

/* ════════════════════════════════════════════════════
   TABLET (≤ 991px)
   ════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* Producto: imagen ya no sticky en tablet */
  #product .product-page .col-md-5 { position: relative !important; top: auto !important; }
  #product .product-leftside { position: relative !important; top: auto !important; }

  /* Producto: título más pequeño */
  h1.productpage_title { font-size: 1.375rem !important; }
  .current-price-value { font-size: 1.625rem !important; }
  .product-tabcontent { margin-top: 28px; }

  /* Tabs horizontales con scroll */
  .product-tabcontent .tabs .nav-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-tabcontent .tabs .nav-tabs::-webkit-scrollbar { display: none; }

  /* Header: búsqueda en segunda fila */
  .header-top .container { flex-wrap: wrap !important; gap: 10px !important; }
  .header-left { order: 1; flex-shrink: 0; }
  .header-right { order: 2; margin-left: auto; gap: 8px !important; }
  .header-center { order: 3 !important; width: 100% !important; flex: none !important; }
  .header-left .logo, .header_logo img { max-height: 42px !important; }

  /* Ocultar wishlist/compare en tablet */
  .header-right .wishlist-top-link,
  .header-right .compare-top-link,
  .header-right [id*="wishlist_top"],
  .header-right [id*="compare_top"] { display: none !important; }

  /* Búsqueda full-width */
  #search_widget,
  #search_widget .searchtoggle,
  #search_widget .searchtoggle form { max-width: 100% !important; width: 100% !important; }

  /* Producto: columnas apiladas en tablet */
  #product .product-page .col-md-5,
  #product .product-page .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
  }

  /* Footer: 2 columnas */
  .footer-container .footer { display: flex !important; flex-wrap: wrap !important; gap: 24px; }
  .footer-container .links { width: calc(50% - 12px) !important; float: none !important; }

  /* Tarjetas: no elevar en hover */
  .product-miniature:hover { transform: none !important; }

  /* Grid tarjetas tablet */
  .js-product { padding: 5px !important; }
}

/* ════════════════════════════════════════════════════
   MOBILE (≤ 767px)
   ════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ─── CUERPO / BASE ─── */
  body { font-size: .9375rem; }

  /* ─── HEADER ─── */
  .header-top { padding: 0 !important; }
  .header-top .header-div { padding: 10px 0 !important; }

  .header-top .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 0 14px !important;
  }

  .header-left { order: 1; flex-shrink: 0; }
  .header-left .logo,
  .header_logo img { max-height: 36px !important; width: auto !important; }

  .header-right { order: 2; margin-left: auto !important; gap: 8px !important; display: flex !important; align-items: center; }

  /* Búsqueda: fila completa */
  .header-center { order: 3 !important; flex: 0 0 100% !important; width: 100% !important; }

  #search_widget,
  #search_widget .searchtoggle,
  #search_widget .searchtoggle form { width: 100% !important; max-width: 100% !important; }

  /* User: solo ícono circular */
  #_desktop_user_info .tm_userinfotitle .account.top-link,
  #_desktop_user_info .sign-in.account.top-link {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #_desktop_user_info .material-icons.expand-more { display: none !important; }

  /* Carrito: compacto */
  #_desktop_cart .blockcart-header { padding: 8px 12px !important; }
  #_desktop_cart .cart-products-counthome { font-size: .6875rem !important; }

  /* Ocultar wishlist/compare */
  .header-right .wishlist-top-link,
  .header-right .compare-top-link,
  .header-right [id*="wishlist_top"],
  .header-right [id*="compare_top"] { display: none !important; }

  /* ─── BARRA NAV ─── */
  .header-top-main.bg_main {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap;
  }

  .header-top-main.bg_main .container {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100%;
    padding: 0 8px !important;
    overflow: visible;
    gap: 0 !important;
  }

  .header-top-main.bg_main #_top_main_menu,
  .header-top-main .top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible;
  }

  .header-top-main.bg_main #_top_main_menu li a[data-depth="0"],
  .header-top-main .top-menu > li > a,
  .header-top-main .top-menu > li > .nav-link {
    padding: 10px 10px !important;
    font-size: .8125rem !important;
    white-space: nowrap !important;
  }

  /* Sub-menús: posición fija para que no se corten */
  .header-top-main .top-menu .sub-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ─── MIGAS DE PAN ─── */
  .breadcrumb {
    font-size: .75rem !important;
    padding: 8px 0 !important;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap !important;
  }

  .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px !important; }

  /* ─── GRID DE PRODUCTOS ─── */
  .js-product { padding: 4px !important; }
  .product-miniature { border-radius: var(--r) !important; }
  .thumbnail-top { aspect-ratio: 1/1; }
  .product-description { padding: 8px 10px !important; }
  .product-title { font-size: .8125rem !important; margin-bottom: 4px !important; }
  .product-bottom { padding: 8px 10px 10px !important; }
  .product-bottom .price,
  .product-price-and-shipping .price { font-size: .9375rem !important; font-weight: 700 !important; }
  .regular-price { font-size: .75rem !important; }

  /* Botón añadir al carrito en tarjeta */
  .add-to-cart-button .btn,
  .add-to-cart-button button.add-to-cart {
    font-size: .75rem !important;
    padding: 8px 10px !important;
    min-height: 38px !important;
    border-radius: var(--r) !important;
  }

  /* Quick view: ocultar en móvil */
  .product-actions-main { display: none !important; }

  /* ─── BARRA ORDENAMIENTO ─── */
  #js-product-list-top.products-selection {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: var(--r) !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  .products-selection .sort-by { display: none !important; }

  .products-selection .total-products {
    gap: 8px !important;
  }

  .products-selection .total-products p {
    font-size: .8125rem !important;
    white-space: nowrap;
  }

  .products-selection .select-title {
    padding: 6px 10px !important;
    font-size: .8125rem !important;
    white-space: nowrap;
  }

  /* ─── FILTROS MOBILE ─── */
  .filter-mobile .filter-button .btn {
    font-size: .8125rem !important;
    padding: 8px 14px !important;
    min-height: 38px !important;
  }

  /* ─── AUTOCOMPLETE BÚSQUEDA ─── */
  #cpsearch_content_result {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    border-radius: var(--r-lg) !important;
    z-index: 99999 !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    box-shadow: var(--sh-xl) !important;
  }

  #cpsearch_eccept_data .items-list li .image {
    width: 42px !important;
    height: 42px !important;
  }

  #cpsearch_eccept_data .items-list h5.product-name,
  #cpsearch_eccept_data .items-list .product-name {
    font-size: .8125rem !important;
    white-space: normal !important;
  }

  /* ─── PÁGINA DE PRODUCTO ─── */
  /* Columnas: apiladas */
  #product .product-page .col-md-5,
  #product .product-page .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
  }

  /* Imagen: full-width */
  #product .product-cover { border-radius: var(--r-lg) !important; margin-bottom: 8px; }
  #product .product-images li.thumb-container { width: 58px !important; height: 58px !important; }

  /* Título */
  h1.productpage_title { font-size: 1.125rem !important; margin-bottom: 8px !important; }

  /* Atributos */
  .productpage-attributes-items {
    gap: 4px 10px !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
  }

  .brand-infos, .product-reference, .product-condition {
    font-size: .75rem !important;
  }

  /* Precio */
  .current-price-value { font-size: 1.5rem !important; }
  .product-prices.js-product-prices { padding: 10px 0 !important; }

  /* Descripción corta */
  .product-short-description,
  [id^="product-description-short"] { font-size: .875rem !important; }

  /* Botón sticky "Añadir al carrito" */
  .product-add-to-cart {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--c-bg) !important;
    padding: 10px 14px env(safe-area-inset-bottom, 10px) !important;
    border-top: 1px solid var(--c-border) !important;
    z-index: 500 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
    margin: 0 !important;
  }

  .product-quantity { gap: 8px !important; flex-direction: row !important; flex-wrap: nowrap !important; }
  .product-quantity .add { flex: 1 !important; min-width: 0; }
  .product-quantity .add .btn.add-to-cart { height: 46px !important; font-size: .875rem !important; }
  .product-double-quantity { flex-shrink: 0 !important; }
  .bootstrap-touchspin { height: 46px !important; }

  /* Ocultar elementos extras del sticky en mobile */
  .product-add-to-cart #product-availability,
  .product-add-to-cart .wish-comp,
  .product-add-to-cart .product-minimal-quantity { display: none !important; }

  /* Espacio para el sticky */
  .page-product #main { padding-bottom: 80px !important; }

  /* Tabs */
  .product-tabcontent { margin-top: 16px !important; }
  .product-tabcontent .tabs .nav-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid var(--c-border);
  }
  .product-tabcontent .tabs .nav-tabs::-webkit-scrollbar { display: none; }
  .product-tabcontent .tabs .nav-link { padding: 10px 14px !important; font-size: .8125rem !important; white-space: nowrap !important; }
  .product-tabcontent .tab-content { padding: 16px 0 !important; }
  .product-tabcontent .product-description { font-size: .875rem !important; }

  /* Garantías */
  .blockreassurance_product > div { padding: 10px 12px !important; gap: 10px !important; }
  .blockreassurance_product .block-title { font-size: .8125rem !important; }
  .blockreassurance_product > div > p:not(.block-title) { font-size: .75rem !important; }

  /* Accesorios relacionados */
  .product-accessories { padding: 20px 0 !important; }
  .product-accessories .products-section-title .title { font-size: 1.125rem !important; }

  /* ─── PAGINACIÓN ─── */
  .pagination { margin: 16px 0 !important; gap: 3px !important; }
  .page-list li a, .page-list li span {
    min-width: 34px !important;
    height: 34px !important;
    font-size: .8125rem !important;
    padding: 0 6px !important;
  }

  /* ─── CATEGORÍA: COLUMNA IZQUIERDA ─── */
  #left-column {
    order: 2 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #main-content-wrapper { order: 1 !important; }

  .block-categories, .facets-panel {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
  }

  /* ─── CHECKOUT ─── */
  body#checkout .col-md-4,
  body#checkout .col-md-8 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  body#checkout #js-checkout-summary { margin-top: 20px !important; }

  .checkout-process .step-title { font-size: .9375rem !important; padding: 14px 0 !important; }

  /* ─── CARRITO PANEL ─── */
  .cart_block { width: 100% !important; max-width: 340px !important; }

  /* ─── CARRITO PÁGINA ─── */
  .cart-item { padding: 14px 0 !important; gap: 10px !important; }
  .cart-item .product-image { width: 64px !important; height: 64px !important; }
  .cart-summary { position: static !important; margin-top: 16px !important; }

  /* ─── FOOTER ─── */
  .footer-container { padding: 24px 0 0 !important; }
  .footer-container .links { width: 100% !important; float: none !important; margin-bottom: 0; }
  .footer-container .footer { display: block !important; }
  .footer-container h3, .footer-container .h3 {
    font-size: .8125rem !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
  }
  .footer-container ul { padding-top: 0 !important; }
  .footer-container ul li a { font-size: .875rem !important; padding: 5px 0 !important; display: block !important; min-height: 36px; line-height: 2.2; }

  /* Newsletter en footer oscuro */
  .block_newsletter {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .block_newsletter .title { padding-inline-start: 0 !important; }
  .block_newsletter .title::before { display: none !important; }
  .block_newsletter .block_content { width: 100% !important; }
  .block_newsletter form .input-wrapper { max-width: 100% !important; }
  .block_newsletter .btn.hidden-xs-down { display: none !important; }
  .block_newsletter .btn.hidden-sm-up { display: flex !important; }

  /* Copyright */
  .footer-container .row:last-child { padding: 14px 0 !important; }

  /* ─── ALERTAS ─── */
  .alert { font-size: .8125rem !important; padding: 10px 12px !important; }

  /* ─── MODAL ─── */
  .modal-content { margin: 10px !important; border-radius: var(--r-lg) !important; }
  .modal-header { padding: 14px 16px !important; }
  .modal-body { padding: 14px 16px !important; }

  /* ─── TOUCH TARGETS: botones de acción pero NO el botón de búsqueda ─── */
  .btn-primary:not(#search_block_top .btn-primary):not(#search_widget button),
  .btn.add-to-cart,
  .btn.btn-default,
  .btn.btn-secondary { min-height: 44px !important; }

  /* Botón buscar: sin min-height que lo haga full-width */
  #search_block_top .btn.btn-primary,
  #search_widget button[type="submit"] { min-height: 0 !important; }

  a.nav-link, .footer-container ul li a { min-height: 36px; }

  /* ─── NEWSLETTER FOOTER EN MOBILE — fix definitivo ─── */

  /* Contenedor principal: columna centrada */
  .block_newsletter {
    flex-direction: column !important;
    text-align: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 22px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .block_newsletter .title { padding-inline-start: 0 !important; }
  .block_newsletter .block_title { font-size: 1rem !important; color: #fff !important; font-family: var(--font) !important; }
  .block_newsletter .title::before { display: none !important; }
  .block_newsletter .title span { color: rgba(255,255,255,.65) !important; font-size: .875rem !important; }

  /* block_content y form: ancho completo, sin márgenes */
  .block_newsletter .block_content,
  .block_newsletter form { width: 100% !important; display: block !important; }

  /* col-xs-12: quitar el padding de Bootstrap que encoge el form */
  .block_newsletter .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    width: 100% !important;
    display: block !important;
  }

  /* input-wrapper: fila flex visible sobre fondo oscuro */
  .block_newsletter .input-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 52px !important;
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.4) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Input email: ocupa todo el espacio libre */
  .block_newsletter .input-wrapper input[type="email"],
  .block_newsletter .input-wrapper input[name="email"] {
    flex: 1 1 auto !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0 16px !important;
    font-size: .9375rem !important;
    font-family: var(--font) !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
  }

  .block_newsletter .input-wrapper input[type="email"]::placeholder {
    color: rgba(255,255,255,.5) !important;
  }

  /* Botón "Suscribirse" en desktop: oculto en mobile */
  .block_newsletter .input-wrapper input.btn.hidden-xs-down {
    display: none !important;
  }

  /* Botón "OK" en mobile: <input type="submit"> */
  .block_newsletter .input-wrapper input.btn.hidden-sm-up,
  .block_newsletter .input-wrapper input[name="submitNewsletter"].hidden-sm-up {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    height: 100% !important;
    padding: 0 20px !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 26px 26px 0 !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    font-family: var(--font) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    transform: none !important;
    box-shadow: none !important;
    line-height: 52px !important;
  }
}

/* ════════════════════════════════════════════════════
   FIXES CRÍTICOS MOBILE — BÚSQUEDA + HEADER + MENÚ
   El buscador es #search_block_top (cp_blocksearch)
   El menú mobile es #cp_sidevertical_menu_top (CoderPlace)
   ════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ─────────────────────────────────────────
     FIX HEADER: 2 filas limpias
     Fila 1: Logo | [User] [Cart]
     Fila 2: [Barra de búsqueda full-width]
     ───────────────────────────────────────── */

  .header-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background: var(--c-dark) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
  }

  .header-top .header-div { padding: 8px 0 !important; }

  .header-top .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }

  /* Logo — orden 1, izquierda */
  .header-left {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  .header-left .logo,
  .header_logo img { max-height: 34px !important; width: auto !important; }

  /* Iconos — orden 2, derecha */
  .header-right {
    order: 2 !important;
    flex: 1 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  /* Búsqueda — orden 3, fila completa */
  .header-center {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: block !important;
  }

  /* Menú desktop: ocultar en mobile */
  .header-top .container > #_top_main_menu,
  .header-top .container > .js-top-menu,
  .header-top .container > .menu { display: none !important; }

  /* Usuario: solo ícono circular */
  #_desktop_user_info .tm_userinfotitle .account.top-link,
  #_desktop_user_info .sign-in.account.top-link {
    width: 36px !important; height: 36px !important;
    padding: 0 !important; border-radius: 50% !important;
    justify-content: center !important; gap: 0 !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
  }
  #_desktop_user_info .material-icons.expand-more { display: none !important; }

  /* Carrito compacto */
  #_desktop_cart .blockcart-header { padding: 8px 12px !important; }

  /* Ocultar wishlist/compare del header en mobile */
  .header-right [id*="wishlist_top"],
  .header-right [id*="compare_top"] { display: none !important; }

  /* ─────────────────────────────────────────
     FIX BÚSQUEDA — Barra visible con input + botón
     ───────────────────────────────────────── */

  /* Ocultar toggle lupa */
  #search_block_top .search_button,
  #search_widget .search_button { display: none !important; }

  /* Ocultar select de categorías */
  #search_block_top .select-wrapper { display: none !important; }

  /* Contenedor */
  #search_block_top,
  #search_widget {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    position: static !important;
    display: block !important;
  }

  /* Searchtoggle: siempre estático y visible */
  #search_block_top .searchtoggle,
  #search_widget .searchtoggle {
    position: static !important;
    display: block !important;
    width: 100% !important;
  }

  /* Form: fila flex con input + botón */
  #search_block_top .searchtoggle form,
  #search_block_top form#searchbox,
  #search_widget .searchtoggle form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    background: rgba(255,255,255,.12) !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    position: static !important;
    flex-wrap: nowrap !important;
  }

  /* cpsearch-main: ocupa todo el espacio menos el botón */
  #search_block_top .cpsearch-main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    overflow: hidden !important;
  }

  /* INPUT — text visible en fondo oscuro */
  #search_block_top input#search_query_top,
  #search_block_top input.search_query.form-control,
  #search_widget input[type="text"],
  #search_widget input[name="s"] {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 12px 14px !important;
    font-size: .875rem !important;
    font-family: var(--font) !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
  }

  #search_block_top input#search_query_top::placeholder,
  #search_block_top input.search_query::placeholder,
  #search_widget input::placeholder { color: rgba(255,255,255,.55) !important; }

  /* BOTÓN BUSCAR — flex-shrink:0, width:auto, sin mask-image */
  #search_block_top .searchtoggle form .btn.btn-primary,
  #search_block_top .btn.btn-primary,
  #search_widget .searchtoggle button[type="submit"],
  #search_widget button.btn-primary {
    /* Reset absolute positioning del módulo cpsearch.css */
    position: static !important;
    right: auto !important;
    left: auto !important;
    /* Tamaño: solo el botón, no ocupa todo el ancho */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    /* Visual */
    background: var(--c-primary) !important;
    border: none !important;
    border-radius: 0 50px 50px 0 !important;
    padding: 12px 18px !important;
    height: auto !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  /* Texto del botón — anular mask-image lupa del cpsearch.css */
  #search_block_top .btn.btn-primary .submit-text,
  #search_widget button .submit-text {
    display: inline !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
  }

  /* ─────────────────────────────────────────
     FIX NAV BAR: scroll horizontal limpio
     ───────────────────────────────────────── */

  .header-top-main.bg_main {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .header-top-main.bg_main::-webkit-scrollbar { display: none !important; }

  .header-top-main.bg_main .container {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    padding: 0 6px !important;
    gap: 0 !important;
  }

  .header-top-main.bg_main #_top_main_menu,
  .header-top-main .top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
  }

  .header-top-main.bg_main #_top_main_menu li a[data-depth="0"],
  .header-top-main .top-menu > li > a {
    padding: 10px 10px !important;
    font-size: .8125rem !important;
    white-space: nowrap !important;
  }

  /* Sub-menús del nav bar: aparecen abajo fijos */
  .header-top-main .top-menu .sub-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    border-radius: 0 !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
  }

  .header-top-main .top-menu .sub-menu a {
    padding: 12px 20px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--c-border) !important;
    font-size: .9375rem !important;
    color: var(--c-dark) !important;
  }

  /* ─────────────────────────────────────────
     FIX PANEL MENÚ LATERAL (cp_sidevertical_menu_top)
     "Menu" + X — lista vertical de categorías
     ───────────────────────────────────────── */

  /* Panel contenedor */
  #cp_sidevertical_menu_top,
  .tmvm-contener.sidevertical-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 82vw !important;
    max-width: 300px !important;
    height: 100vh !important;
    background: var(--c-bg) !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    transition: left .3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.2) !important;
  }

  #cp_sidevertical_menu_top.open,
  #cp_sidevertical_menu_top.slide,
  .tmvm-contener.open {
    left: 0 !important;
  }

  /* Header del panel: "Menu" + X */
  #cp_sidevertical_menu_top .title_main_menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    border-bottom: none !important;
  }

  #cp_sidevertical_menu_top .title_menu {
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--font) !important;
    color: #fff !important;
  }

  #cp_sidevertical_menu_top .cat-title.title2 {
    background: transparent !important;
    color: rgba(255,255,255,.8) !important;
    width: auto !important;
    cursor: pointer !important;
  }

  /* Lista de categorías: VERTICAL */
  #cp_sidevertical_menu_top ul,
  #cp_sidevertical_menu_top .verticalmenu-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  #cp_sidevertical_menu_top ul li,
  #cp_sidevertical_menu_top .verticalmenu-content ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid var(--c-border) !important;
  }

  #cp_sidevertical_menu_top ul li a,
  #cp_sidevertical_menu_top .verticalmenu-content ul li a,
  #cp_sidevertical_menu_top a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
    color: var(--c-dark) !important;
    text-decoration: none !important;
    min-height: 50px !important;
    border-bottom: none !important;
    background: transparent !important;
    white-space: normal !important;
  }

  #cp_sidevertical_menu_top ul li a:hover,
  #cp_sidevertical_menu_top a:hover {
    background: var(--c-primary-lt) !important;
    color: var(--c-primary) !important;
  }

  /* Sub-categorías con indentación */
  #cp_sidevertical_menu_top ul ul li a {
    padding-left: 32px !important;
    font-size: .875rem !important;
    color: var(--c-text-2) !important;
    background: var(--c-surface) !important;
    font-weight: 400 !important;
  }

  /* ─────────────────────────────────────────
     FIX PANEL MOBILE ps_mainmenu
     (#mobile_top_menu_wrapper)
     ───────────────────────────────────────── */

  #mobile_top_menu_wrapper {
    z-index: 99999 !important;
  }

  #mobile_top_menu_wrapper .mobile-menu-inner {
    width: 82vw !important;
    max-width: 300px !important;
    background: var(--c-bg) !important;
    overflow-y: auto !important;
  }

  /* Lista vertical */
  #mobile_top_menu_wrapper ul.top-menu,
  #mobile_top_menu_wrapper #top-menu {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #mobile_top_menu_wrapper ul.top-menu > li,
  #mobile_top_menu_wrapper #top-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid var(--c-border) !important;
    margin: 0 !important;
  }

  #mobile_top_menu_wrapper ul.top-menu > li:last-child { border-bottom: none !important; }

  #mobile_top_menu_wrapper ul.top-menu a,
  #mobile_top_menu_wrapper #top-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    font-family: var(--font) !important;
    color: var(--c-dark) !important;
    text-decoration: none !important;
    min-height: 50px !important;
    background: transparent !important;
    border: none !important;
    white-space: normal !important;
  }

  #mobile_top_menu_wrapper ul.top-menu a:hover {
    background: var(--c-surface) !important;
    color: var(--c-primary) !important;
  }

  /* Sub-menús en el panel */
  #mobile_top_menu_wrapper .sub-menu {
    position: static !important;
    background: var(--c-surface) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #mobile_top_menu_wrapper .sub-menu a {
    padding-left: 32px !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    color: var(--c-text-2) !important;
  }

  /* Ocultar wishlist/compare que se cuelan en el panel */
  #mobile_top_menu_wrapper #_desktop_cart,
  #mobile_top_menu_wrapper .displayStWishlist,
  #mobile_top_menu_wrapper .displayStCompare { display: none !important; }

}

/* ════════════════════════════════════════════════════
   PADDING GENERAL PARA MOBILE — evita que el contenido
   toque los bordes de la pantalla
   ════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Contenedor raíz de la tienda */
  #wrapper { padding-left: 0 !important; padding-right: 0 !important; }

  /* Contenedor Bootstrap: padding lateral consistente */
  #main > .container,
  #content-wrapper > .container,
  .page-content > .container,
  #product #main .row.product-page,
  #product #main { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── PÁGINA DE PRODUCTO ── */

  /* Columnas del producto: padding lateral */
  #product .product-page .col-md-5,
  #product .product-page .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
  }

  /* Toda la sección del producto tiene padding del contenedor padre */
  .product-page.product-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 8px !important;
    padding-bottom: 100px !important; /* espacio para el sticky botón */
  }

  /* Título del producto */
  h1.productpage_title {
    font-size: 1.125rem !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }

  /* Atributos (marca, referencia) */
  .productpage-attributes-items {
    padding: 0 0 10px !important;
    margin-bottom: 12px !important;
  }

  /* Descripción corta */
  .product-short-description,
  [id^="product-description-short"] {
    padding: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Precio */
  .product-prices.js-product-prices {
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
  }

  /* Imagen: ocupa el ancho completo disponible */
  #product .product-cover {
    border-radius: var(--r-lg) !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  /* Thumbnails horizontales */
  #product .product-images {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Tabs de producto */
  .product-tabcontent {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 20px !important;
  }

  .product-tabcontent .tab-content {
    padding: 14px 0 !important;
  }

  /* Descripción en tabs */
  .product-tabcontent .product-description {
    padding: 0 !important;
    font-size: .875rem !important;
    line-height: 1.7 !important;
  }

  /* Garantías / políticas */
  .blockreassurance_product {
    margin-top: 16px !important;
  }

  /* ── LISTADO DE CATEGORÍAS ── */
  #category #main,
  #search #main,
  #new-products #main,
  #best-sales #main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Título del listado */
  #js-product-list-header {
    padding: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Grid de productos: contenedor */
  #js-product-list .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }

  /* ── PÁGINA GENERAL (CMS, contacto, etc.) ── */
  .page-content {
    padding: 0 16px !important;
  }

  /* ── BREADCRUMB ── */
  #breadcrumb_wrapper,
  .breadcrumb-container,
  nav.breadcrumb { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── CHECKOUT ── */
  body#checkout #main { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── CARRITO ── */
  #cart #main { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ════════════════════════════════════════════════════
   MOBILE PEQUEÑO (≤ 480px)
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Header más compacto */
  .header-top .container { padding: 8px 10px !important; gap: 6px !important; }
  .header-left .logo, .header_logo img { max-height: 30px !important; }
  .header-top .header-div { padding: 8px 0 !important; }

  /* Carrito: solo ícono + badge */
  #_desktop_cart .blockcart-header { padding: 7px 10px !important; gap: 4px !important; }

  /* Título producto */
  h1.productpage_title { font-size: 1rem !important; }

  /* Tarjetas */
  .product-title { font-size: .75rem !important; }
  .product-bottom .price { font-size: .875rem !important; }
  .js-product { padding: 3px !important; }
  .product-description { padding: 7px 8px !important; }
  .product-bottom { padding: 6px 8px 8px !important; }

  /* Botón buscar: solo lupa */
  #search_widget .searchtoggle button .submit-text {
    width: 0 !important; overflow: hidden !important; font-size: 0 !important; padding: 0 !important;
  }
  #search_widget .searchtoggle button[type="submit"] {
    padding: 0 !important; width: 40px !important; justify-content: center;
  }
  #search_widget .searchtoggle button[type="submit"]::before {
    content: ""; display: block; width: 16px; height: 16px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Precio producto sticky más compacto */
  .product-quantity .add .btn.add-to-cart { font-size: .8125rem !important; }
}

/* ===================================================================
   PÁGINA DE CARRITO (/carrito)
   =================================================================== */

/* Título de la página */
#cart h1,
#cart .page-header h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  margin-bottom: 24px !important;
}

/* Contenedor de cada línea de producto */
#cart .product-line-grid {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  flex-wrap: nowrap !important;
}

#cart .product-line-grid:last-child { border-bottom: none !important; }

/* ─── IMAGEN ─── */
#cart .product-line-grid-left {
  flex: 0 0 72px !important;
  width: 72px !important;
  padding: 0 !important;
}

#cart .product-line-grid-left .product-image,
#cart .product-line-grid-left span.product-image {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
}

#cart .product-line-grid-left img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ─── INFORMACIÓN DEL PRODUCTO ─── */
#cart .product-line-grid-body {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Nombre del producto — pequeño y oscuro, no azul */
#cart .product-line-grid-body > .product-line-info > a.label,
#cart .product-line-grid-body .product-line-info .label[href] {
  font-size: .9375rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  line-height: 1.35 !important;
  display: block !important;
  margin-bottom: 4px !important;
  text-decoration: none !important;
  padding: 0 !important;
  white-space: normal !important;
}

#cart .product-line-grid-body > .product-line-info > a.label:hover {
  color: var(--c-primary) !important;
}

/* Precio unitario en el cuerpo */
#cart .product-line-grid-body .current-price .price {
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
}

/* Descuento */
#cart .product-line-grid-body .product-discount {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

#cart .product-line-grid-body .discount,
#cart .product-line-grid-body .discount-percentage,
#cart .product-line-grid-body .discount-amount {
  font-size: .6875rem !important;
  font-weight: 700 !important;
  background: #fef2f2 !important;
  color: var(--c-danger) !important;
  padding: 2px 7px !important;
  border-radius: var(--r-pill) !important;
}

#cart .product-line-grid-body .regular-price {
  font-size: .8125rem !important;
  color: var(--c-text-3) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* Atributos (color, talla) */
#cart .product-line-grid-body .product-line-info .label:not([href]) {
  font-size: .8125rem !important;
  font-weight: 500 !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  padding: 0 !important;
}

#cart .product-line-grid-body .product-line-info .value {
  font-size: .8125rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
}

#cart .product-line-grid-body br { display: none !important; }

/* ─── LADO DERECHO: cantidad + precio total + eliminar ─── */
#cart .product-line-grid-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  width: auto !important;
}

#cart .product-line-grid-right .row,
#cart .product-line-grid-right .col-md-10,
#cart .product-line-grid-right .col-md-6 {
  padding: 0 !important;
  margin: 0 !important;
}

/* Selector de cantidad */
#cart .product-line-grid-right .qty {
  display: flex !important;
  align-items: center !important;
}

#cart .product-line-grid-right .js-cart-line-product-quantity,
#cart .product-line-grid-right input[name="product-quantity-spin"] {
  width: 54px !important;
  height: 38px !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  text-align: center !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  background: var(--c-bg) !important;
  padding: 0 !important;
  outline: none !important;
}

#cart .product-line-grid-right .js-cart-line-product-quantity:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.1) !important;
}

/* TouchSpin en carrito */
#cart .product-line-grid-right .bootstrap-touchspin {
  width: auto !important;
  float: none !important;
  height: 38px !important;
}

#cart .product-line-grid-right .bootstrap-touchspin .input-group-btn-vertical > .btn {
  padding: 0 !important;
  width: 24px !important;
  font-size: .625rem !important;
}

/* Precio total de la línea */
#cart .product-line-grid-right .product-price strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  white-space: nowrap !important;
}

/* Botón eliminar */
#cart .remove-from-cart,
#cart .cart-line-product-actions .remove-from-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-bg) !important;
  color: var(--c-text-2) !important;
  transition: var(--tr) !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

#cart .remove-from-cart:hover {
  background: #fef2f2 !important;
  border-color: var(--c-danger) !important;
  color: var(--c-danger) !important;
}

#cart .remove-from-cart .material-icons {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* ─── PANEL DERECHO: TOTALES ─── */
#cart .cart-grid-right .card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#cart .cart-grid-right .card-block {
  padding: 16px 18px !important;
}

#cart .cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
}

#cart .cart-summary-line:last-child { border-bottom: none !important; }

#cart .cart-summary-line .label {
  color: var(--c-text-2) !important;
  font-weight: 400 !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
}

#cart .cart-summary-line .value {
  font-weight: 600 !important;
  color: var(--c-dark) !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
}

#cart .cart-summary-line .value.color-red {
  color: var(--c-success) !important;
  font-weight: 600 !important;
}

/* Total */
#cart .cart-summary-totals .cart-summary-line,
#cart .cart-total {
  border-top: 2px solid var(--c-border) !important;
  padding-top: 12px !important;
  margin-top: 4px !important;
}

#cart .cart-summary-totals .cart-summary-line .label,
#cart .cart-total .label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
}

#cart .cart-summary-totals .cart-summary-line .value,
#cart .cart-total .value {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: var(--c-dark) !important;
}

/* Código promocional */
#cart .block-promo .input-group {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#cart .block-promo input[name="discount_name"] {
  flex: 1 !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 9px 12px !important;
  color: var(--c-text) !important;
  outline: none !important;
}

#cart .block-promo input[name="discount_name"]:focus {
  border-color: var(--c-primary) !important;
}

#cart .block-promo .btn {
  flex-shrink: 0 !important;
  border-radius: var(--r) !important;
  min-height: auto !important;
}

#cart .block-promo .promo-title,
#cart .block-promo h4 {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  margin-bottom: 4px !important;
}

/* Botón continuar comprando / proceder */
#cart .cart-detailed-actions .btn-primary {
  width: 100% !important;
  height: 48px !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  border-radius: var(--r-lg) !important;
  margin-top: 12px !important;
}

#cart .cart-detailed-actions .btn-secondary {
  width: 100% !important;
  height: 42px !important;
  font-size: .875rem !important;
  border-radius: var(--r-lg) !important;
  margin-top: 8px !important;
}

/* ─── RESPONSIVE CARRITO ─── */
@media (max-width: 767.98px) {

  #cart .product-line-grid { gap: 10px !important; padding: 12px 0 !important; flex-wrap: nowrap !important; }

  #cart .product-line-grid-left { flex: 0 0 60px !important; width: 60px !important; }
  #cart .product-line-grid-left .product-image,
  #cart .product-line-grid-left span.product-image { width: 60px !important; height: 60px !important; }

  #cart .product-line-grid-body > .product-line-info > a.label {
    font-size: .8125rem !important;
  }

  #cart .product-line-grid-right { gap: 8px !important; }

  #cart .product-line-grid-right .js-cart-line-product-quantity { width: 44px !important; font-size: .8125rem !important; }

  #cart .product-line-grid-right .product-price strong { font-size: .875rem !important; }

  #cart .cart-grid-right { margin-top: 16px !important; }

  /* Ocultar precio unitario en body en mobile (se ve en el lado derecho) */
  #cart .product-line-grid-body .product-line-info.product-price { display: none !important; }
}

/* ===================================================================
   CHECKOUT — FIX CRÍTICO: pasos visibles + layout limpio
   =================================================================== */

/* FORZAR visibilidad del paso activo — override de todo posible conflicto */
body#checkout section.checkout-step.-current .content,
body#checkout section.checkout-step.-current.-reachable .content,
body#checkout section.checkout-step.-current.-reachable.-complete .content,
body#checkout section.checkout-step.js-current-step .content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
  pointer-events: auto !important;
}

/* Ocultar pasos inactivos */
body#checkout section.checkout-step:not(.-current) .content {
  display: none !important;
}

/* Ocultar el panel CoderPlace de categorías en la página de checkout
   (su CSS position:fixed podría cubrir el formulario) */
body#checkout #cp_sidevertical_menu_top,
body#checkout .tmvm-contener.sidevertical-menu {
  display: none !important;
  position: static !important;
  z-index: auto !important;
}

/* Desactivar cualquier overlay en checkout */
body#checkout .overlay { display: none !important; pointer-events: none !important; }

/* Layout del checkout — columnas apiladas en mobile */
body#checkout #columns_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

body#checkout .col-md-8 {
  width: 100%;
  padding: 0;
  float: none;
}

body#checkout .col-md-4 {
  width: 100%;
  padding: 0;
  float: none;
}

/* Paso del checkout */
body#checkout section.checkout-step {
  background: #fff !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}

body#checkout section.checkout-step:first-child { margin-top: 0 !important; }

/* Título del paso */
body#checkout section.checkout-step .step-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  padding: 4px 0 14px !important;
  border-bottom: 1px solid var(--c-border) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
}

body#checkout section.checkout-step.-current .step-title {
  color: var(--c-primary) !important;
}

/* Número de paso */
body#checkout .step-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--c-border) !important;
  color: var(--c-text-2) !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

body#checkout section.checkout-step.-current .step-number,
body#checkout section.checkout-step.-reachable.-complete .step-number {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* Contenido del paso: padding superior */
body#checkout section.checkout-step .content {
  padding: 16px 0 0 !important;
}

/* Formularios en el checkout */
body#checkout .form-control {
  font-family: var(--font) !important;
  font-size: .875rem !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  color: var(--c-text) !important;
  background: var(--c-bg) !important;
  height: auto !important;
  min-height: 44px !important;
}

body#checkout .form-control:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
  outline: none !important;
}

body#checkout .form-group { margin-bottom: 14px !important; }

body#checkout label,
body#checkout .form-control-label {
  font-size: .875rem !important;
  font-weight: 500 !important;
  font-family: var(--font) !important;
  color: var(--c-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Botón Continuar */
body#checkout .btn-primary,
body#checkout .continue {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: .9375rem !important;
  border-radius: var(--r-lg) !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  transform: none !important;
}

body#checkout .btn-primary:hover {
  background: var(--c-primary-h) !important;
  border-color: var(--c-primary-h) !important;
  transform: none !important;
}

/* Resumen del carrito a la derecha */
body#checkout #js-checkout-summary {
  margin-top: 20px !important;
}

body#checkout #js-checkout-summary .card {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Métodos de pago */
body#checkout .payment-options .payment-option {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body#checkout .payment-options .payment-option:last-child {
  border-bottom: none !important;
}

/* Checkbox de condiciones */
body#checkout #conditions-to-approve {
  margin-top: 16px !important;
  padding: 14px !important;
  background: var(--c-surface) !important;
  border-radius: var(--r) !important;
}

/* Opciones de envío */
body#checkout .delivery-options .delivery-option {
  padding: 12px !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: border-color .2s ease;
}

body#checkout .delivery-options .delivery-option:hover {
  border-color: var(--c-primary) !important;
}

/* ─── CHECKOUT MOBILE ESPECÍFICO ─── */
@media (max-width: 767.98px) {
  body#checkout .col-md-8,
  body#checkout .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  body#checkout section.checkout-step {
    padding: 14px !important;
    margin-top: 10px !important;
    border-radius: var(--r) !important;
  }

  body#checkout section.checkout-step .step-title {
    font-size: .9375rem !important;
    padding-bottom: 12px !important;
  }

  body#checkout .form-control { min-height: 48px !important; font-size: 1rem !important; }

  body#checkout .btn-primary, body#checkout .continue {
    width: 100% !important;
    padding: 14px 20px !important;
  }

  body#checkout .address-selector .address-container { padding: 12px !important; }

  body#checkout #js-checkout-summary { margin-top: 16px !important; }
}

/* ===================================================================
   RESUMEN DE CARRITO EN CHECKOUT (panel derecho)
   =================================================================== */

/* Imagen */
body#checkout #cart-summary-product-list .media-left {
  flex-shrink: 0 !important;
  width: 56px !important;
}

body#checkout #cart-summary-product-list .media-left img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--c-border) !important;
  display: block;
}

/* Nombre del producto — pequeño y oscuro */
body#checkout #cart-summary-product-list .media-body .product-name,
body#checkout #cart-summary-product-list .media-body span.product-name {
  font-size: .8125rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  line-height: 1.4 !important;
  float: none !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 4px;
}

body#checkout #cart-summary-product-list .media-body .product-name a,
#js-checkout-summary .cart-summary-products a {
  font-size: .8125rem !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  text-decoration: none !important;
}

body#checkout #cart-summary-product-list .media-body .product-name a:hover {
  color: var(--c-primary) !important;
}

/* Precio */
body#checkout #cart-summary-product-list .media-body .product-price,
body#checkout #cart-summary-product-list .media-body .product-price.pull-xs-right {
  font-size: .875rem !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  color: var(--c-dark) !important;
  float: none !important;
  display: inline !important;
}

/* Cantidad */
body#checkout #cart-summary-product-list .media-body .product-quantity {
  font-size: .75rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  margin-right: 6px;
}

/* Atributos (color, talla, etc.) */
body#checkout #cart-summary-product-list .product-line-info,
body#checkout #cart-summary-product-list .product-line-info-secondary {
  font-size: .75rem !important;
  color: var(--c-text-2) !important;
  font-family: var(--font) !important;
  margin-top: 2px !important;
}

body#checkout #cart-summary-product-list .product-line-info .label {
  font-weight: 500 !important;
  color: var(--c-text-2) !important;
  font-size: .75rem !important;
}

/* Botón "Mostrar Detalles" */
#js-checkout-summary .cart-summary-products .js-show-details {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  color: var(--c-text) !important;
  font-size: .875rem !important;
  font-family: var(--font) !important;
  padding: 9px 14px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  text-transform: none !important;
}

#js-checkout-summary .cart-summary-products .js-show-details:hover {
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

/* Líneas de totales */
#js-checkout-summary .cart-summary-line {
  font-size: .875rem !important;
  font-family: var(--font) !important;
}

#js-checkout-summary .cart-summary-line .label {
  color: var(--c-text-2) !important;
  font-weight: 400 !important;
}

#js-checkout-summary .cart-summary-line .value {
  font-weight: 600 !important;
  color: var(--c-dark) !important;
}

#js-checkout-summary .cart-summary-line.cart-total .label,
#js-checkout-summary .cart-summary-line.cart-total .value {
  font-size: 1rem !important;
  font-weight: 700 !important;
}