/* =====================================================
   GLOBAL - Font Family
   ===================================================== */
body,
html,
* {
  font-family: "Source Sans 3", sans-serif !important;
}

/* Exclude icon fonts */
[class^="fto-"],
[class*=" fto-"],
.fa,
.fas,
.far,
.fab {
  font-family: "fontello" !important;
}

/* Sidebar Container */
.sidebar-submenu-left {
  position: fixed;
  top: 0;
  left: -460px;
  width: 460px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  transition: left 0.3s ease, opacity 0.3s ease;
  z-index: 9999;
  opacity: 0;
  background: #ffffff;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
    0px 8px 8px -4px rgba(10, 13, 18, 0.03),
    0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.sidebar-submenu-left.open {
  left: 0;
  opacity: 1;
}

/* Desktop pusher effect for sidebar-submenu-left */
@media (min-width: 992px) {
  /* Base state - always have transition for smooth close */
  body:has(.sidebar-submenu-left) .st-pusher {
    transition: transform 0.3s ease;
  }

  /* Open state - push content */
  body:has(.sidebar-submenu-left.open) .st-pusher {
    transform: translate3d(460px, 0, 0);
    -webkit-transform: translate3d(460px, 0, 0);
  }
}

/* Desktop: Search and Cart sidebars - 400px width with pusher */
@media (min-width: 992px) {
  /* Search sidebar - 400px, opens from left */
  #side_search.st-menu {
    width: 400px !important;
    max-width: 400px !important;
  }

  /* Cart sidebar - 400px, opens from right */
  #side_products_cart.st-menu {
    width: 400px !important;
    max-width: 400px !important;
  }

  /* Pusher transition base state */
  .st-pusher {
    transition: transform 0.3s ease;
  }

  /* Search open - push content right 400px */
  .st-container.open_bar_left:has(#side_search.sidebar_opened) .st-pusher,
  body:has(#side_search.sidebar_opened) .st-pusher {
    transform: translate3d(400px, 0, 0) !important;
    -webkit-transform: translate3d(400px, 0, 0) !important;
  }

  /* Cart open - push content left 400px */
  .st-container.open_bar_right:has(#side_products_cart.sidebar_opened)
    .st-pusher,
  body:has(#side_products_cart.sidebar_opened) .st-pusher {
    transform: translate3d(-400px, 0, 0) !important;
    -webkit-transform: translate3d(-400px, 0, 0) !important;
  }
}

/* Overlay/backdrop para el sidebar */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sidebar-submenu-left.hidden {
  transform: translateX(-100%);
}

/* Sidebar Menu Lists */
.sidebar-submenu-left #st_menu_multi_level_2,
.sidebar-submenu-left #st_menu_multi_level_7 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-submenu-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Header Section */
.head-sidebar {
  background: #fafafa;
  color: #073d73;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 20px;
  z-index: 2;
}

.head-sidebar span:first-child {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #073d73;
  cursor: default;
  padding: 0;
}

.close-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.head-sidebar span svg {
  width: 16px;
  height: 16px;
}

.head-sidebar span:hover {
  opacity: 0.8;
}

/* Search Sidebar Header */
#side_search .st-menu-header {
  background: #fafafa;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px !important;
  gap: 20px;
  z-index: 2;
}

/* Override height 100% from st-menu > div for sidebar headers */
#side_search.st-menu > .st-menu-header,
#side_products_cart.st-menu > .vitrum-cart-header {
  height: auto !important;
}

/* Remove borders from sidebars */
#side_products_cart.st-menu,
#side_search.st-menu {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
}

#side_search .st-menu-title {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #073d73;
  margin: 0;
  padding: 0 !important;
  cursor: default;
}

#side_search .close_right_side {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #18181b;
}

#side_search .close_right_side:hover {
  opacity: 0.8;
}

#side_search .close_right_side i {
  font-size: 16px;
}

/* Navigation Container */
.sidebar-submenu-left .submenu-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
}

.sidebar-submenu-left #st_menu_multi_level_2,
.sidebar-submenu-left #st_menu_multi_level_7 {
  padding: 0 8px;
  overflow-x: clip;
  overflow-y: auto;
}

/* Navigation Items */
.sidebar-submenu-left ul li {
  margin: 0;
  padding: 0;
}

.sidebar-submenu-left ul li.ml_level_1 {
  padding: 2px 0;
}

.sidebar-submenu-left ul li.ml_level_1 > .category-item,
.sidebar-submenu-left ul li.ml_level_1 > .custom-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 12px;
  gap: 12px;
  min-height: auto;
  transition: background-color 0.2s ease;
}

.sidebar-submenu-left ul li.ml_level_1:hover > .category-item,
.sidebar-submenu-left ul li.ml_level_1.active > .category-item,
.sidebar-submenu-left ul li.ml_level_1.expanded > .category-item {
  background: #fafafa;
}

/* Navigation Links */
.sidebar-submenu-left ul li a {
  color: #073d73;
  text-decoration: none;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* Hide all arrow icons */
.sidebar-submenu-left ul li a i.list_arrow,
.sidebar-submenu-left ul li a i.fto-angle-right {
  display: none !important;
}

/* Category Icon/Image */
.sidebar-submenu-left ul li a .category-icon {
  width: 24px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar-submenu-left ul li a .category-icon picture,
.sidebar-submenu-left ul li a .category-icon img {
  width: 24px;
  height: 20px;
  object-fit: contain;
  display: block;
}

/* Menu thumbnail image - handle loading errors */
.sidebar-submenu-left ul li a .category-icon .menu-thumbnail-img {
  width: 24px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.sidebar-submenu-left ul li a .category-icon .menu-thumbnail-img[src=""] {
  display: none;
}

/* Default category icon */
.sidebar-submenu-left ul li a .category-icon .default-category-icon {
  width: 24px;
  height: 20px;
  object-fit: contain;
  display: block;
  opacity: 0.6;
}

/* Category Name */
.sidebar-submenu-left ul li a .category-name {
  flex: 1;
}

/* Chevron Icons */
.sidebar-submenu-left i.fto-angle-down,
.sidebar-submenu-left i.fto-angle-up {
  font-size: 16px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(164, 167, 174, 1);
}

.toggle-children {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.toggle-children:hover {
  opacity: 0.8;
}

/* Subcategories */
.subcategories {
  margin-left: 0;
  margin-top: 0;
  padding: 0 0 4px 0;
  transition: all 0.3s ease;
}

.subcategories.hidden {
  display: none;
}

.subcategories li {
  padding: 2px 0;
}

.subcategories li a {
  background: #ffffff;
  border-radius: 6px;
  padding: 8px 12px 8px 20px;
  color: #414651;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
}

.subcategories li a:hover {
  background: #fafafa;
}

.subcategories li a i.list_arrow,
.subcategories li a i.fto-angle-right {
  display: none !important;
}

.ml_level_2 {
  padding: 0;
}

.ml_level_2 a {
  color: #414651 !important;
  font-weight: 400 !important;
}

.ml_level_2 a i,
.sidebar-submenu-left .submenu a i.fa {
  display: none !important;
}

/* Custom Link Items */
#sidebar-submenu-left-compra-rapida ul li .custom-link-item {
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 8px 12px;
  gap: 12px;
}

#sidebar-submenu-left-compra-rapida ul li .custom-link-item a {
  color: #073d73;
  text-decoration: none;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

#sidebar-submenu-left-compra-rapida ul li .custom-link-item a i.list_arrow,
#sidebar-submenu-left-compra-rapida
  ul
  li
  .custom-link-item
  a
  i.fto-angle-right {
  display: none !important;
}

/* =====================================================
   MOBILE SIDEBARS - Full width & consistent close button
   ===================================================== */

/* Full width for all mobile sidebars */
@media (max-width: 767px) {
  /* Menu and Search - open from left - force 100vw */
  #side_stmobilemenu.st-menu,
  #side_search.st-menu,
  body:has(#left_column) #side_stmobilemenu.st-menu,
  body:has(#left_column) #side_search.st-menu,
  body:has(#left_column) #st-container #side_stmobilemenu.st-menu,
  body:has(#left_column) #st-container #side_search.st-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Cart - open from right - force 100vw */
  #side_products_cart.st-menu,
  body:has(#left_column) #side_products_cart.st-menu,
  body:has(#left_column) #st-container #side_products_cart.st-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    right: 0 !important;
    left: auto !important;
  }

  /* Hide overflow on body/container when sidebar is open */
  .st-container.open_bar_left,
  .st-container.open_bar_right {
    overflow: hidden !important;
  }

  /* Push content completely off-screen (100vw) when menu/search opens */
  .st-effect-0.open_bar_left .st-pusher,
  .st-effect-1.open_bar_left .st-pusher,
  .st-effect-2.open_bar_left .st-pusher,
  .st-effect-3.open_bar_left .st-pusher,
  .st-effect-4.open_bar_left .st-pusher,
  .st-effect-5.open_bar_left .st-pusher,
  .st-effect-6.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-0.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-1.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-2.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-3.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-4.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-5.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-6.open_bar_left .st-pusher {
    transform: translate3d(100vw, 0, 0) !important;
    -webkit-transform: translate3d(100vw, 0, 0) !important;
  }

  /* RTL support */
  .is_rtl .st-effect-0.open_bar_left .st-pusher,
  .is_rtl .st-effect-1.open_bar_left .st-pusher,
  .is_rtl .st-effect-2.open_bar_left .st-pusher,
  .is_rtl .st-effect-3.open_bar_left .st-pusher,
  .is_rtl .st-effect-4.open_bar_left .st-pusher,
  .is_rtl .st-effect-5.open_bar_left .st-pusher,
  .is_rtl .st-effect-6.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-0.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-1.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-2.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-3.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-4.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-5.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-6.open_bar_left .st-pusher {
    transform: translate3d(-100vw, 0, 0) !important;
    -webkit-transform: translate3d(-100vw, 0, 0) !important;
  }
}

/* Consistent close button styling for all sidebars */
#side_stmobilemenu .close_right_side,
#side_search .close_right_side,
#side_products_cart .close_right_side {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #18181b;
  font-size: 0;
}

#side_stmobilemenu .close_right_side i,
#side_search .close_right_side i,
#side_products_cart .close_right_side i {
  display: none;
}

#side_stmobilemenu .close_right_side svg,
#side_search .close_right_side svg,
#side_products_cart .close_right_side svg {
  width: 16px;
  height: 16px;
}

#side_stmobilemenu .close_right_side:hover,
#side_search .close_right_side:hover,
#side_products_cart .close_right_side:hover {
  opacity: 0.8;
}

/* =====================================================
   MOBILE MENU - Vitrum styling for Panda's #side_stmobilemenu
   ===================================================== */

/* Container - flex layout: fixed header + scrollable categories + fixed footer */
#side_stmobilemenu.vitrum-mobile-menu {
  background: #ffffff;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important; /* Override Panda's overflow-y:auto so flex layout works */
  z-index: 10000 !important;
  /* Slide animation */
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s ease-out, visibility 0.3s ease-out;
}

/* Open state - slide in from left */
#side_stmobilemenu.vitrum-mobile-menu.sidebar_opened {
  transform: translate3d(0, 0, 0) !important;
}

/* Header - fixed at top */
#side_stmobilemenu.vitrum-mobile-menu .st-menu-header {
  background: #fafafa;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px !important;
  gap: 20px;
  z-index: 2;
  height: auto !important;
  border-bottom: none !important;
  flex-shrink: 0;
}

#side_stmobilemenu.vitrum-mobile-menu .st-menu-title {
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #073d73 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

#side_stmobilemenu.vitrum-mobile-menu .close_right_side {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #18181b;
  font-size: 0;
}

#side_stmobilemenu.vitrum-mobile-menu .close_right_side i {
  display: none;
}

#side_stmobilemenu.vitrum-mobile-menu .close_right_side svg {
  width: 16px;
  height: 16px;
}

#side_stmobilemenu.vitrum-mobile-menu .close_right_side:hover {
  opacity: 0.8;
}

/* Menu container - scrollable middle */
#side_stmobilemenu.vitrum-mobile-menu .stmobilemenu_box {
  padding: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: auto !important;
}

/* Footer - fixed at bottom */
#side_stmobilemenu.vitrum-mobile-menu .vitrum-mobile-footer {
  flex-shrink: 0;
  max-height: fit-content;
  background: #fafafa;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px 12px 0 0;
  padding: 6px;
}

#side_stmobilemenu.vitrum-mobile-menu .vitrum-footer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #414651 !important;
  text-decoration: none !important;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  transition: background-color 0.2s ease;
}

#side_stmobilemenu.vitrum-mobile-menu .vitrum-footer-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

#side_stmobilemenu.vitrum-mobile-menu .vitrum-footer-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Hide the top-level "Catálogo" wrapper item - show children directly */
#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_0 > .menu_a_wrap {
  display: none !important;
}

/* Auto-expand level-1 sub-lists */
#side_stmobilemenu.vitrum-mobile-menu .mo_mu_level_1.mo_sub_ul {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* Main list - remove default styling */
#side_stmobilemenu.vitrum-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#side_stmobilemenu.vitrum-mobile-menu #st_mobile_menu_ul {
  padding: 8px;
}

/* Category items (level 1) */
#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_1 {
  padding: 2px 0;
  border: none !important;
  list-style: none !important;
}

#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_1 > .menu_a_wrap {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  padding: 8px 12px;
  gap: 12px;
  min-height: auto;
  transition: background-color 0.2s ease;
  position: relative;
}

/* Expanded category gets bg #fafafa */
#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_1.active > .menu_a_wrap {
  background: #fafafa;
}

#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_1 > .menu_a_wrap:hover {
  background: #fafafa;
}

/* Category links styling */
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_1 {
  color: #073d73 !important;
  text-decoration: none !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 0 !important;
  border: none !important;
}

/* Category thumbnail icon */
#side_stmobilemenu.vitrum-mobile-menu .vitrum-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  flex-shrink: 0;
  overflow: hidden;
}

#side_stmobilemenu.vitrum-mobile-menu .vitrum-cat-icon img {
  width: 24px;
  height: 20px;
  object-fit: contain;
}

/* Top-level link (Catálogo) - hidden */
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_0 {
  color: #073d73 !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Replace +/- icons with chevrons */
#side_stmobilemenu.vitrum-mobile-menu .opener {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
}

/* Hide the default +/- icons */
#side_stmobilemenu.vitrum-mobile-menu .opener .fto-plus-2,
#side_stmobilemenu.vitrum-mobile-menu .opener .fto-minus {
  display: none !important;
}

/* Add chevron via CSS pseudo-element */
#side_stmobilemenu.vitrum-mobile-menu .opener::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #a4a7ae;
  border-bottom: 1.5px solid #a4a7ae;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -3px;
}

/* Rotate chevron when expanded (Panda uses .active class) */
#side_stmobilemenu.vitrum-mobile-menu
  .mo_ml_level_0.opened
  > .menu_a_wrap
  .opener::after,
#side_stmobilemenu.vitrum-mobile-menu
  .mo_ml_level_1.opened
  > .menu_a_wrap
  .opener::after,
#side_stmobilemenu.vitrum-mobile-menu
  .mo_ml_level_0.active
  > .menu_a_wrap
  .opener::after,
#side_stmobilemenu.vitrum-mobile-menu
  .mo_ml_level_1.active
  > .menu_a_wrap
  .opener::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Subcategories (level 2) */
#side_stmobilemenu.vitrum-mobile-menu .mo_mu_level_2 {
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
}

#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_2 {
  padding: 2px 0;
  border: none !important;
}

#side_stmobilemenu.vitrum-mobile-menu .mo_ml_level_2 > .menu_a_wrap,
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_2 {
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 12px 4px 20px !important;
  color: #414651 !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
  text-decoration: none !important;
  border: none !important;
}

#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_2:hover {
  background: #fafafa;
}

/* Remove Panda's default border separators */
#side_stmobilemenu.vitrum-mobile-menu .mo_ml_column,
#side_stmobilemenu.vitrum-mobile-menu .mo_sub_li,
#side_stmobilemenu.vitrum-mobile-menu .mo_sub_ul {
  border: none !important;
  margin: 0 !important;
}

/* Remove Panda's default icon styles in menu links (but NOT .vitrum-cat-icon) */
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_0 i:not(.vitrum-cat-icon),
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_1 i.fto-angle-right,
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_1 i.list_arrow,
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_2 i {
  display: none !important;
}

/* Remove Panda's uppercase text-transform */
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_1,
#side_stmobilemenu.vitrum-mobile-menu .mo_ma_level_2,
#side_stmobilemenu.vitrum-mobile-menu a {
  text-transform: none !important;
}

/* Sidebar Menu (Right) */
#sidebarMenu {
  right: -375px;
  opacity: 0;
  padding: 0;
  z-index: 9999;
  background: #ffffff;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
    0px 8px 8px -4px rgba(10, 13, 18, 0.03),
    0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  width: 375px;
}

#sidebarMenu ul {
  padding: 20px;
}

#sidebarMenu.open {
  right: 0;
  opacity: 1;
}

.hidden {
  display: none;
}

/* Drop Select */
.drop-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08),
    0px 8px 8px -4px rgba(10, 13, 18, 0.03),
    0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  border-radius: 8px;
}

.drop-select .dropdown-toggle {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  width: 100%;
}

.dropdown-content.hidden,
.dropdown:hover .dropdown-content.hidden {
  display: none !important;
}

.dropdown-content.open,
.dropdown:hover .dropdown-content.open {
  display: block !important;
}

/* ============================================
   Product Thumbnail Hover Styles - Based on Figma Design
   ============================================ */

/* Botón Agregar al Carrito - Estilos base y hover */
.ajax_add_to_cart_button.hover_fly_btn,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn {
  background-color: #efb810 !important;
  color: #000000 !important;
  border-color: #efb810 !important;
  border-radius: 6px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: visible;
}

/* En vista grid, el botón añadir ocupa el espacio restante */
.products.product_list.grid .hover_fly .ajax_add_to_cart_button.hover_fly_btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.ajax_add_to_cart_button.hover_fly_btn:hover,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn:hover,
.ajax_add_to_cart_button.hover_fly_btn:focus,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn:focus {
  background-color: #001489 !important;
  border-color: #001489 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.ajax_add_to_cart_button.hover_fly_btn .hover_fly_btn_inner,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn .hover_fly_btn_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ajax_add_to_cart_button.hover_fly_btn .icon_btn,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn .icon_btn {
  color: #000000 !important;
  font-size: 16px;
}

.ajax_add_to_cart_button.hover_fly_btn:hover .icon_btn,
.hover_fly .ajax_add_to_cart_button.hover_fly_btn:hover .icon_btn {
  color: #ffffff !important;
}

/* Ocultar texto en botones de comparar, love y wishlist */
.hover_fly .hover_fly_btn.stcompare_add .btn_text,
.hover_fly .hover_fly_btn.add_to_love .btn_text,
.hover_fly .hover_fly_btn.add_to_wishlist .btn_text,
.act_box_inner .stcompare_add .btn_text,
.act_box_inner .add_to_love .btn_text,
.act_box_inner .add_to_wishlist .btn_text {
  display: none !important;
}

/* Aplicar estilos del botón agregar al carrito a .btn-primary de forma general */
.btn-primary,
.btn.btn-primary {
  background-color: #efb810 !important;
  color: #000000 !important;
  border-color: #efb810 !important;
  border-radius: 6px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: #001489 !important;
  border-color: #001489 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:active,
.btn.btn-primary:active {
  background-color: #001070 !important;
  border-color: #001070 !important;
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary i,
.btn.btn-primary i {
  color: #000000 !important;
}
.btn-primary:hover i,
.btn-primary:focus i,
.btn.btn-primary:hover i,
.btn.btn-primary:focus i {
  color: #ffffff !important;
}
.btn-primary svg,
.btn.btn-primary svg {
  fill: #000000 !important;
  color: #000000 !important;
}
.btn-primary:hover svg,
.btn-primary:focus svg,
.btn.btn-primary:hover svg,
.btn.btn-primary:focus svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Botones de Favoritos y Compartir - Estilos hover */
.hover_fly .hover_fly_btn.add_to_wishlit,
.hover_fly .hover_fly_btn.add_to_love,
.hover_fly .hover_fly_btn.stcompare_add,
.hover_fly .hover_fly_btn.stsocial-drop {
  background-color: #ffffff !important;
  color: #414651 !important;
  border: 1px solid #d5d7da !important;
  border-radius: 6px;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  padding: 0 !important;
  flex-shrink: 0;
}

/* Asegurar que los iconos estén centrados en botones de comparar y favoritos */
.hover_fly .hover_fly_btn.add_to_love .icon_btn,
.hover_fly .hover_fly_btn.stcompare_add .icon_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Colores de iconos en botones de favoritos, compartir y comparar */
.hover_fly .hover_fly_btn.add_to_wishlit .icon_btn,
.hover_fly .hover_fly_btn.add_to_love .icon_btn,
.hover_fly .hover_fly_btn.stcompare_add .icon_btn,
.hover_fly .hover_fly_btn.stsocial-drop .icon_btn,
.act_box_inner .btn_inline .icon_btn {
  color: #414651 !important;
  font-size: 16px;
}

.hover_fly .hover_fly_btn.add_to_wishlit:hover,
.hover_fly .hover_fly_btn.add_to_love:hover,
.hover_fly .hover_fly_btn.stcompare_add:hover,
.hover_fly .hover_fly_btn.stsocial-drop:hover {
  background-color: #fafafa !important;
  border-color: #a4a7ae !important;
  color: #181d27 !important;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}

/* Colores de iconos en hover para botones de favoritos, compartir y comparar */
.hover_fly .hover_fly_btn.add_to_wishlit:hover .icon_btn,
.hover_fly .hover_fly_btn.add_to_love:hover .icon_btn,
.hover_fly .hover_fly_btn.stcompare_add:hover .icon_btn,
.hover_fly .hover_fly_btn.stsocial-drop:hover .icon_btn,
.act_box_inner .btn_inline:hover .icon_btn {
  color: #181d27 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlit.st_added,
.hover_fly .hover_fly_btn.add_to_love.st_added,
.hover_fly .hover_fly_btn.stcompare_add.st_added {
  background-color: #dcecf1 !important;
  border-color: #001489 !important;
  color: #001489 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlit.st_added .icon_btn,
.hover_fly .hover_fly_btn.add_to_love.st_added .icon_btn,
.hover_fly .hover_fly_btn.stcompare_add.st_added .icon_btn {
  color: #001489 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlit.st_added:hover,
.hover_fly .hover_fly_btn.add_to_love.st_added:hover,
.hover_fly .hover_fly_btn.stcompare_add.st_added:hover {
  background-color: #c4dde5 !important;
  border-color: #003d73 !important;
  color: #003d73 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlit.st_added:hover .icon_btn,
.hover_fly .hover_fly_btn.add_to_love.st_added:hover .icon_btn,
.hover_fly .hover_fly_btn.stcompare_add.st_added:hover .icon_btn {
  color: #003d73 !important;
}

/* Contenedor de botones hover fly */
.hover_fly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

/* En vista grid, reorganizar botones: comparar y favoritos a la izquierda, añadir a la derecha */
.products.product_list.grid .hover_fly {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  overflow: visible;
  min-width: 0;
}

/* Botones de comparar y favoritos a la izquierda en vista grid */
.products.product_list.grid .hover_fly .hover_fly_btn.stcompare_add,
.products.product_list.grid .hover_fly .hover_fly_btn.add_to_love {
  order: -1;
  flex-shrink: 0;
}

/* Si existe el botón añadir, los botones de favoritos y comparar tienen 40px fijos */
.hover_fly:has(.ajax_add_to_cart_button.hover_fly_btn)
  .hover_fly_btn.stcompare_add,
.hover_fly:has(.ajax_add_to_cart_button.hover_fly_btn)
  .hover_fly_btn.add_to_love {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
}

/* Si NO existe el botón añadir, favoritos y comparar ocupan 50% cada uno */
.hover_fly:not(:has(.ajax_add_to_cart_button.hover_fly_btn))
  .hover_fly_btn.stcompare_add,
.hover_fly:not(:has(.ajax_add_to_cart_button.hover_fly_btn))
  .hover_fly_btn.add_to_love {
  width: 50% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 50% !important;
}

/* Botón añadir al carrito a la derecha en vista grid - ocupa el espacio restante */
.products.product_list.grid .hover_fly .ajax_add_to_cart_button.hover_fly_btn {
  order: 999;
  margin-left: auto;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Asegurar que otros botones (quickview, share, etc.) no interfieran */
.products.product_list.grid
  .hover_fly
  .hover_fly_btn:not(.stcompare_add):not(.add_to_love):not(
    .ajax_add_to_cart_button
  ) {
  order: 0;
}

.pro_first_box:hover .hover_fly,
.pro_outer_box:hover .hover_fly {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ajustes para el estado hover de la miniatura de producto */
.pro_outer_box {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.pro_outer_box:hover {
  transform: none;
}

.pro_first_box {
  position: relative;
  overflow: hidden;
}

/* Asegurar que los botones hover se muestren correctamente */
.pro_first_box:hover .hover_fly {
  z-index: 10;
}

/* Estilos para botones en el contenedor act_box_inner */
.act_box_inner .btn_inline {
  background-color: #ffffff !important;
  color: #414651 !important;
  border: 1px solid #d5d7da !important;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.act_box_inner .btn_inline:hover {
  background-color: #fafafa !important;
  border-color: #a4a7ae !important;
  color: #181d27 !important;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}

/* Ocultar texto en botones inline de comparar, love y wishlist */
.act_box_inner .stcompare_add .btn_text,
.act_box_inner .add_to_love .btn_text,
.act_box_inner .add_to_wishlist .btn_text {
  display: none !important;
}

/* Todos los botones de la web tendrán una altura de 40px */
.btn,
button,
a.btn,
input[type="button"],
input[type="submit"],
.ajax_add_to_cart_button,
.hover_fly_btn,
.btn-primary,
.btn-default,
.btn-link,
.add-to-cart {
  min-height: 40px;
  height: auto;
  font-size: 14px;
  font-weight: 600;
}

/* Asegurar que los botones con contenido tengan 40px de altura */
.btn:not(.btn_inline):not(.hover_fly_btn):not(.hidden):not(.ps-hidden-by-js),
button:not(.btn_inline):not(.hidden):not(.ps-hidden-by-js),
.add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  line-height: 1;
  box-sizing: border-box;
}

/* Botones cuadrados (favoritos, compartir, comparar) mantienen 40px */
.hover_fly .hover_fly_btn,
.act_box_inner .btn_inline {
  height: 40px !important;
  min-height: 40px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hover_fly {
    gap: 4px;
    padding: 6px;
  }

  .hover_fly .hover_fly_btn,
  .act_box_inner .btn_inline {
    width: 36px;
    height: 36px !important;
    min-height: 36px !important;
  }

  /* En móvil, los botones pueden ser un poco más pequeños */
  .btn,
  button,
  a.btn,
  input[type="button"],
  input[type="submit"] {
    min-height: 36px;
  }
}

/* ============================================
   Estilos para página de categoría
   ============================================ */

/* Asegurar que el contenedor row use flexbox */
#columns .row {
  display: flex !important;
  flex-wrap: wrap;
}

/* Ajustes para diferentes breakpoints de Bootstrap - SOLO ESCRITORIO */
@media (min-width: 992px) {
  /* Columna de filtros - máximo 340px de ancho SOLO EN ESCRITORIO */
  #left_column {
    max-width: 340px !important;
    flex: 0 0 340px !important;
  }

  /* Columna principal - crece para ocupar el resto del espacio SOLO EN ESCRITORIO */
  #center_column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1200px) {
  #left_column {
    max-width: 340px !important;
    flex: 0 0 340px !important;
  }

  #center_column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1400px) {
  #left_column {
    max-width: 340px !important;
    flex: 0 0 340px !important;
  }

  #center_column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* ============================================
   Estilos para filtros en móvil (st-menu) - SOLO EN CATEGORÍA
   ============================================ */

/* En móvil, el filtro (st-menu) debe tener ancho 70% SOLO en página de categoría */
/* Usar :has() para detectar cuando existe #left_column (solo en categoría) */
@media (max-width: 991px) {
  /* Remove Panda's 50px bottom padding meant for mobile bottom bar (not used in Vitrum) */
  #body_wrapper {
    padding-bottom: 0 !important;
  }

  /* Solo aplicar cuando existe #left_column (página de categoría) */
  body:has(#left_column) #st-container .st-menu#side_stfacetedsearch,
  body:has(#left_column) #st-container .st-menu[id*="facetedsearch"],
  body:has(#left_column) .st-menu#side_stfacetedsearch,
  body:has(#left_column) .st-menu[id*="facetedsearch"] {
    max-width: 70% !important;
    width: 70% !important;
    min-width: 0 !important;
  }

  /* Asegurar que el st-menu del filtro en categoría tenga 70% (excluir menú, search, cart) */
  body:has(#left_column)
    #st-container
    .st-menu:not(#side_stmobilemenu):not(#side_search):not(
      #side_products_cart
    ) {
    max-width: 70% !important;
    width: 70% !important;
    min-width: 0 !important;
  }

  /* Sobrescribir cualquier ancho específico en píxeles que pueda venir del módulo (excluir menú, search, cart) */
  body:has(#left_column)
    #st-container
    .st-menu[style*="width"]:not(#side_stmobilemenu):not(#side_search):not(
      #side_products_cart
    ),
  body:has(#left_column)
    .st-menu[style*="width"]:not(#side_stmobilemenu):not(#side_search):not(
      #side_products_cart
    ) {
    width: 70% !important;
    max-width: 70% !important;
  }

  /* El espacio a la derecha del menú debe ser clickeable para cerrar */
  .open_bar_left .st-pusher {
    pointer-events: auto !important;
  }

  /* Asegurar que el contenido visible a la derecha sea clickeable */
  .open_bar_left .st-pusher > * {
    pointer-events: auto !important;
  }

  /* Las columnas en móvil vuelven a su comportamiento normal */
  /* #left_column {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  } */

  #center_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet only (768px-991px): st-pusher se desplaza 70vw para filtro de categoría */
@media (min-width: 768px) and (max-width: 991px) {
  body:has(#left_column) .st-effect-0.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-1.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-2.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-3.open_bar_left .st-pusher,
  body:has(#left_column) .st-effect-4.open_bar_left .st-pusher {
    transform: translate3d(70vw, 0, 0) !important;
    -webkit-transform: translate3d(70vw, 0, 0) !important;
  }

  /* RTL */
  body:has(#left_column).is_rtl .st-effect-0.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-1.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-2.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-3.open_bar_left .st-pusher,
  body:has(#left_column).is_rtl .st-effect-4.open_bar_left .st-pusher {
    transform: translate3d(-70vw, 0, 0) !important;
    -webkit-transform: translate3d(-70vw, 0, 0) !important;
  }
}

/* ============================================
   Vista GRID - Ocultar act_box_cart y mostrar hover_fly
   ============================================ */

/* En vista grid, ocultar act_box_cart cuando tiene display_when_hover */
.products.product_list.grid .act_box_cart.display_when_hover {
  display: none !important;
  visibility: hidden !important;
}

/* En vista grid, ocultar también act_box_inner (botones de list) */
.products.product_list.grid .act_box_inner {
  display: none !important;
  visibility: hidden !important;
}

/* En vista grid, asegurar que hover_fly sea visible en hover */
.products.product_list.grid .pro_first_box:hover .hover_fly,
.products.product_list.grid .pro_outer_box:hover .hover_fly {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* En vista grid, asegurar que los botones de favoritos y comparar se muestren en hover_fly */
.products.product_list.grid .hover_fly .hover_fly_btn.add_to_love,
.products.product_list.grid .hover_fly .hover_fly_btn.stcompare_add {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   Vista LIST - Mostrar act_box_cart y act_box_inner
   ============================================ */

/* En vista list, mostrar act_box_cart */
.products.product_list.list .act_box_cart,
.products.product_list:not(.grid) .act_box_cart {
  display: flex !important;
  visibility: visible !important;
}

/* En vista list, mostrar act_box_inner */
.products.product_list.list .act_box_inner,
.products.product_list:not(.grid) .act_box_inner {
  display: flex !important;
  visibility: visible !important;
}

/* ============================================
   Vista de productos en móvil
   ============================================ */

@media (max-width: 991px) {
  /* Ocultar hover_fly, bottom_hover_fly y act_box_inner en tablet/móvil */
  .products.product_list .hover_fly,
  .products.product_list .bottom_hover_fly,
  .products.product_list .act_box_inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Ocultar botones de love y compare en móvil */
  .act_box_inner .add_to_love,
  .act_box_inner .stcompare_add,
  .hover_fly .add_to_love,
  .hover_fly .stcompare_add,
  .ajax_block_product .add_to_love,
  .ajax_block_product .stcompare_add {
    display: none !important;
    visibility: hidden !important;
  }

  /* Mostrar cantidades en móvil - asegurar que sean visibles */
  .amount_inline,
  .stcompare_quantity,
  .wishlist_product_count,
  .products_loved_nbr.amount_inline {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Asegurar que las cantidades sean visibles en los botones que sí se muestran */
  .hover_fly_btn .amount_inline,
  .btn_inline .amount_inline,
  .add_to_wishlist .wishlist_product_count,
  .add_to_wishlist .amount_inline {
    display: inline-block !important;
    margin-left: 4px !important;
    visibility: visible !important;
  }

  /* Asegurar que las cantidades no estén ocultas por display_none */
  .amount_inline.display_none {
    display: inline-block !important;
  }

  /* Mostrar el campo de cantidad (qty) en móvil - al lado del botón */
  /* Hacer que act_box_cart use flexbox para colocar input y botón lado a lado */
  .act_box_cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  /* Asegurar que los elementos hijos no se apilen */
  .act_box_cart > * {
    flex-shrink: 0 !important;
  }

  /* Mostrar el campo de cantidad (qty) en móvil */
  .act_box_cart .s_quantity_wanted.qty_wrap,
  .act_box_cart .qty_wrap,
  .act_box_cart .qty_wrap_mobile_force {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
  }

  /* Ocultar cualquier qty_wrap que NO tenga la clase qty_controls_group */
  .act_box_cart .qty_wrap:not(.qty_controls_group) {
    display: none !important;
  }

  /* Mostrar el grupo de controles en móvil */
  .act_box_cart .qty_controls_group {
    display: flex !important;
  }

  /* Si el grupo tiene display_none, mantenerlo oculto (respetar configuración del tema) */
  .act_box_cart .qty_controls_group.display_none {
    display: none !important;
  }

  /* En móvil, mostrar el grupo forzado si existe */
  .act_box_cart .qty_wrap_mobile_force.qty_controls_group {
    display: flex !important;
  }

  /* Prevenir duplicados: si hay grupo normal visible, ocultar el forzado */
  .act_box_cart
    .qty_controls_group:not(.qty_wrap_mobile_force):not(.display_none)
    ~ .qty_wrap_mobile_force.qty_controls_group {
    display: none !important;
  }

  /* Prevenir duplicados: si hay grupo forzado, ocultar cualquier grupo normal */
  .act_box_cart
    .qty_wrap_mobile_force.qty_controls_group
    ~ .qty_controls_group:not(.qty_wrap_mobile_force),
  .act_box_cart
    .qty_controls_group:not(.qty_wrap_mobile_force)
    + .qty_wrap_mobile_force.qty_controls_group
    ~ .qty_controls_group:not(.qty_wrap_mobile_force) {
    display: none !important;
  }

  /* Si hay grupo normal sin display_none, ocultar el forzado */
  .act_box_cart:has(
      .qty_controls_group:not(.qty_wrap_mobile_force):not(.display_none)
    )
    .qty_wrap_mobile_force.qty_controls_group {
    display: none !important;
  }

  /* Controles de cantidad agrupados (menos, input, más) - diseño Figma */
  .act_box_cart .qty_controls_group {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #d5d7da !important;
    background-color: #ffffff !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* Asegurar que bootstrap-touchspin se integre correctamente */
  .act_box_cart .qty_controls_group .bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 40px !important;
    gap: 0 !important;
  }

  /* Ocultar cualquier elemento duplicado o conflictivo */
  .act_box_cart .qty_controls_group * {
    box-sizing: border-box !important;
  }

  /* Botones de TouchSpin (bootstrap-touchspin) - 40x40px exactos */
  .act_box_cart .qty_controls_group .input-group-btn,
  .act_box_cart .qty_controls_group .bootstrap-touchspin .input-group-btn,
  .act_box_cart .qty_controls_group .btn-touchspin,
  .act_box_cart .qty_controls_group .js-touchspin,
  .act_box_cart .qty_controls_group .js-increase-product-quantity,
  .act_box_cart .qty_controls_group .js-decrease-product-quantity,
  .act_box_cart .qty_controls_group button.btn-touchspin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    color: #181d27 !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .act_box_cart .qty_controls_group .btn-touchspin:hover,
  .act_box_cart .qty_controls_group .js-touchspin:hover {
    background-color: #fafafa !important;
  }

  .act_box_cart .qty_controls_group .btn-touchspin:active,
  .act_box_cart .qty_controls_group .js-touchspin:active {
    background-color: #f0f0f0 !important;
  }

  /* Asegurar que los contenedores de botones también tengan 40px */
  .act_box_cart .qty_controls_group .input-group-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  /* Input de cantidad en el medio - ancho 40px, altura 40px */
  .act_box_cart .qty_controls_group .pro_quantity,
  .act_box_cart .qty_controls_group input.pro_quantity,
  .act_box_cart .qty_controls_group .bootstrap-touchspin-input {
    display: block !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: 1px solid #d5d7da !important;
    border-right: 1px solid #d5d7da !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    color: #181d27 !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    text-align: center !important;
    vertical-align: middle !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .act_box_cart .qty_controls_group .pro_quantity:focus,
  .act_box_cart .qty_controls_group input.pro_quantity:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-left: 1px solid #d5d7da !important;
    border-right: 1px solid #d5d7da !important;
  }

  /* Asegurar que no haya elementos duplicados o superpuestos */
  .act_box_cart .qty_controls_group > * {
    flex-shrink: 0 !important;
  }

  /* Ocultar cualquier botón o input duplicado que pueda estar siendo generado por el tema */
  .act_box_cart .qty_controls_group .qty-btn + .qty-btn,
  .act_box_cart .qty_controls_group .pro_quantity + .pro_quantity {
    display: none !important;
  }

  /* Estilos para qty_wrap que no tienen controles agrupados (fallback) */
  .act_box_cart
    .s_quantity_wanted.qty_wrap:not(.qty_controls_group)
    .pro_quantity,
  .act_box_cart .qty_wrap:not(.qty_controls_group) .pro_quantity {
    display: block !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
  }

  /* Asegurar que el botón de añadir también esté visible y ocupe el espacio restante */
  .act_box_cart .ajax_add_to_cart_button,
  .act_box_cart .btn-add-to-cart,
  .act_box_cart .add-to-cart,
  .act_box_cart a.ajax_add_to_cart_button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Eliminar cualquier margin o padding del contenedor del botón */
  .act_box_cart .ajax_add_to_cart_button,
  .act_box_cart a.ajax_add_to_cart_button {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Asegurar que el inner del botón no tenga padding extra */
  .act_box_cart .ajax_add_to_cart_button .hover_fly_btn_inner,
  .act_box_cart a.ajax_add_to_cart_button .hover_fly_btn_inner {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mostrar el campo forzado solo en móvil */
  .act_box_cart .qty_wrap_mobile_force {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Ocultar el campo forzado en desktop (solo visible en móvil) */
@media (min-width: 992px) {
  .act_box_cart .qty_wrap_mobile_force {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ============================================
   Estilos para miniaturas de producto
   ============================================ */

/* Ocultar semáforo de stock en miniaturas */
.ajax_block_product .stocktrafficlight-label,
.product_list .stocktrafficlight-label {
  display: none !important;
}

/* Info section - match Figma: left-aligned, flex column, 8px padding & gap */
.ajax_block_product .pro_second_box,
.product_list .pro_second_box {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 8px !important;
}

/* Image area - bottom separator line between image and info (solo desktop) */
@media (min-width: 992px) {
  .ajax_block_product .pro_first_box {
    border-bottom: 1px solid #d5d7da !important;
  }
}

/* Image area - square aspect ratio to match Figma */
.ajax_block_product .product_img_link {
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

.ajax_block_product .s_title_block,
.ajax_block_product .pro_name,
.ajax_block_product .product-name,
.ajax_block_product .pro_price,
.ajax_block_product .pro_list_reference,
.ajax_block_product .pro_reference,
.ajax_block_product .product-reference,
.product_list .s_title_block,
.product_list .pro_name,
.product_list .product-name,
.product_list .pro_price,
.product_list .pro_list_reference,
.product_list .pro_reference,
.product_list .product-reference {
  text-align: left !important;
}

/* Referencia encima del nombre usando order - match Figma: 14px/20px, #414651 */
.ajax_block_product .pro_list_reference,
.product_list .pro_list_reference {
  order: -2 !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #414651 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.ajax_block_product .pro_list_reference strong,
.product_list .pro_list_reference strong {
  font-weight: 700 !important;
  color: #414651 !important;
}

.ajax_block_product .mini_name,
.ajax_block_product .s_title_block,
.product_list .mini_name,
.product_list .s_title_block {
  order: -1 !important;
}

/* El resto de elementos (precio, etc) mantienen order normal */
.ajax_block_product .pro_kuan_box,
.product_list .pro_kuan_box {
  order: 0 !important;
}

/* Product name container - remove margin, gap handles spacing */
.ajax_block_product .s_title_block,
.product_list .s_title_block {
  margin: 0 !important;
}

/* Product name - match Figma: 16px/24px, semibold, #181d27 */
.ajax_block_product .s_title_block a,
.product_list .s_title_block a {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #181d27 !important;
}

/* Price - match Figma: 18px/28px, bold, #001489 */
.ajax_block_product .price,
.product_list .price {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  color: #001489 !important;
}

/* Hide tax label in miniatures to match Figma */
.ajax_block_product .tax_label,
.product_list .tax_label {
  display: none !important;
}

/* Wishlist con el mismo estilo que compare en hover_fly */
.hover_fly .hover_fly_btn.add_to_wishlist {
  background-color: #ffffff !important;
  color: #414651 !important;
  border: 1px solid #d5d7da !important;
  border-radius: 6px;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  padding: 0 !important;
  flex-shrink: 0;
}

.hover_fly .hover_fly_btn.add_to_wishlist .icon_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #414651 !important;
  font-size: 16px;
}

.hover_fly .hover_fly_btn.add_to_wishlist:hover {
  background-color: #fafafa !important;
  border-color: #a4a7ae !important;
  color: #181d27 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlist:hover .icon_btn {
  color: #181d27 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlist.st_added {
  background-color: #dcecf1 !important;
  border-color: #001489 !important;
  color: #001489 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlist.st_added .icon_btn {
  color: #001489 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlist.st_added:hover {
  background-color: #c4dde5 !important;
  border-color: #003d73 !important;
  color: #003d73 !important;
}

.hover_fly .hover_fly_btn.add_to_wishlist.st_added:hover .icon_btn {
  color: #003d73 !important;
}

/* En vista grid, wishlist a la izquierda junto con compare y love */
.products.product_list.grid .hover_fly .hover_fly_btn.add_to_wishlist {
  order: -1;
  flex-shrink: 0;
}

/* Si existe el botón añadir, wishlist tiene 40px fijos */
.hover_fly:has(.ajax_add_to_cart_button.hover_fly_btn)
  .hover_fly_btn.add_to_wishlist {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
}

/* Si NO existe el botón añadir, wishlist ocupa 50% */
.hover_fly:not(:has(.ajax_add_to_cart_button.hover_fly_btn))
  .hover_fly_btn.add_to_wishlist {
  width: 50% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 50% !important;
}

/* En vista grid, asegurar que wishlist se muestre en hover_fly */
.products.product_list.grid .hover_fly .hover_fly_btn.add_to_wishlist {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ajustes adicionales para tablets y móviles pequeños */
@media (max-width: 767px) {
  .products.product_list.grid .product_list_item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .products.product_list.grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================
   Selector de cantidad - Ficha de producto (Diseño Figma)
   ============================================ */

/* Ocultar botones +/- originales del tema panda */
.product-add-to-cart .input-group-btn,
.product-add-to-cart .btn-touchspin,
.product-add-to-cart .js-touchspin,
.product-add-to-cart .bootstrap-touchspin .input-group-btn {
  display: none !important;
}

/* Contenedor del selector de cantidad */
.qty-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* Forzar que el input-group dentro del qty-selector no se expanda */
.qty-selector .input-group,
.qty-selector .bootstrap-touchspin {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Botones +/- nuevos */
.qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.qty-btn:hover {
  background-color: #fafafa;
  border-color: #a4a7ae;
}

.qty-btn:active {
  background-color: #f0f0f0;
}

.qty-btn svg {
  width: 16px;
  height: 16px;
  color: #a4a7ae;
  flex-shrink: 0;
}

.qty-btn:hover svg {
  color: #717680;
}

/* Input de cantidad - mismo tamaño y radius que botones */
.qty-input,
.qty-selector input#quantity_wanted {
  display: block;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  background-color: #ffffff;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  color: #717680;
  text-align: center;
  -moz-appearance: textfield;
  flex-shrink: 0;
}

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

.qty-input:focus {
  outline: none;
  border-color: #2c3f4d;
  color: #181d27;
}

/* Layout del bloque de cantidad + añadir */
.product-add-to-cart .product-quantity {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.product-add-to-cart .qty-selector {
  flex-shrink: 0;
}

.product-add-to-cart .add {
  flex: 1;
  min-width: 120px;
}

/* Responsive para móvil */
@media (max-width: 767px) {
  .product-add-to-cart .product-quantity {
    flex-direction: column;
    gap: 8px;
  }

  .product-add-to-cart .qty-selector {
    width: 100%;
    justify-content: flex-start;
  }

  .product-add-to-cart .add {
    width: 100%;
  }
}

/* ============================================
   Ficha de producto - Ocultar descripción corta
   ============================================ */

.product-description-short {
  display: none !important;
}

/* ============================================
   Ficha de producto - Botón añadir al carrito 40px
   ============================================ */

.product-add-to-cart .add-to-cart,
.product-add-to-cart .btn.add-to-cart,
.product-add-to-cart .add .btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
   Ficha de producto - Contenedor .product_middle_column (caja derecha)
   ============================================ */

.product_middle_column_inner {
  border: 1px solid #d5d7da;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  padding: 16px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Secciones dentro de product_middle_column_inner - padding horizontal 16px */
.product_middle_column_inner > * {
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
}

/* Badge de descuento en ficha de producto */
.vitrum-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #dc2626;
  color: #ffffff !important;
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

/* Quitar márgenes de elementos hijos para que el gap controle el espaciado */
.product_middle_column_inner .page-header-container,
.product_middle_column_inner .product-reference,
.product_middle_column_inner .vitrum-info-row,
.product_middle_column_inner .product-information,
.product_middle_column_inner .product-prices,
.product_middle_column_inner .product-variants,
.product_middle_column_inner .product-add-to-cart,
.product_middle_column_inner .product-additional-info {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* H1 - quitar margin inferior */
.product_middle_column_inner .page-header-container h1,
.product_middle_column_inner h1.h1,
.product_middle_column_inner h1 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ocultar product-additional-info vacío (el primero antes del bloque wishlist/compare) */
.product_middle_column_inner .product-additional-info:empty,
.product_middle_column_inner
  .product-information
  > .product-additional-info:first-child:not(:has(*)) {
  display: none !important;
}

/* Gap 12px entre variantes del producto */
.product_middle_column_inner .product-variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product_middle_column_inner .product-variants > * {
  margin: 0 !important;
}

/* Select de variantes - estilo Figma */
.product_middle_column_inner .product-variants select,
.product_middle_column_inner .product-variants .form-control,
.product_middle_column_inner .product-variants .custom-select {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #717680 !important;
  background-color: #ffffff !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
  height: auto !important;
  min-height: 40px !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a4a7ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
}

.product_middle_column_inner .product-variants select:focus,
.product_middle_column_inner .product-variants .form-control:focus,
.product_middle_column_inner .product-variants .custom-select:focus {
  outline: none !important;
  border-color: #2c3f4d !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05),
    0 0 0 2px rgba(44, 63, 77, 0.1) !important;
}

/* Label de variantes */
.product_middle_column_inner .product-variants label,
.product_middle_column_inner .product-variants .control-label {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #414651 !important;
  margin-bottom: 6px !important;
}

/* ============================================
   Ficha de producto - Wishlist y Compare (enlaces de texto)
   ============================================ */

.product_middle_column_inner .product-additional-info .add_to_wishlist,
.product_middle_column_inner .product-additional-info .stcompare_add,
.product_middle_column_inner .product-additional-info .add_to_love,
.product_middle_column_inner .add_to_wishlist,
.product_middle_column_inner .stcompare_add,
.product_middle_column_inner .add_to_love {
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: #535862 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.product_middle_column_inner .product-additional-info .add_to_wishlist:hover,
.product_middle_column_inner .product-additional-info .stcompare_add:hover,
.product_middle_column_inner .product-additional-info .add_to_love:hover,
.product_middle_column_inner .add_to_wishlist:hover,
.product_middle_column_inner .stcompare_add:hover,
.product_middle_column_inner .add_to_love:hover {
  background: transparent !important;
  color: #414651 !important;
}

/* Icono */
.product_middle_column_inner .product-additional-info .add_to_wishlist i,
.product_middle_column_inner .product-additional-info .stcompare_add i,
.product_middle_column_inner .product-additional-info .add_to_love i,
.product_middle_column_inner .add_to_wishlist i,
.product_middle_column_inner .stcompare_add i,
.product_middle_column_inner .add_to_love i {
  color: #a4a7ae !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

/* No extra margin - gap controls spacing */
.product_middle_column_inner .product-actions {
  margin-bottom: 0 !important;
}

/* Remove padding from product-information and collapse when empty */
.product_middle_column_inner .product-information {
  padding: 0 !important;
  margin: 0 !important;
}

/* Ocultar product-information si solo contiene elementos vacíos */
.product_middle_column_inner .product-information:empty,
.product_middle_column_inner .product-information:not(:has(*:not(:empty))) {
  display: none !important;
}

/* Add padding to product-actions */
.product_middle_column_inner .product-actions.js-product-actions {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Product-additional-info - ocultar por defecto */
.product_middle_column_inner .product-additional-info {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Mostrar solo si tiene botones de wishlist o compare */
.product_middle_column_inner .product-additional-info:has(.add_to_wishlist),
.product_middle_column_inner .product-additional-info:has(.stcompare_add),
.product_middle_column_inner .product-additional-info:has(.add_to_love) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 16px !important;
  min-height: 24px !important;
}

/* Wishlist button padding-left (first element in row) - reset */
.product_middle_column_inner .add_to_wishlist.btn_inline {
  padding: 16px 0 16px 16px !important;
}

/* Compare button padding */
.product_middle_column_inner .stcompare_add.btn_inline {
  padding: 16px 16px 16px 0 !important;
}

/* Mobile: Stack wishlist and compare buttons vertically */
@media (max-width: 767px) {
  .product_middle_column_inner .product-additional-info:has(.add_to_wishlist),
  .product_middle_column_inner .product-additional-info:has(.stcompare_add),
  .product_middle_column_inner .product-additional-info:has(.add_to_love) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* Wishlist: 100% width, padding 12px top, 16px X, 0 bottom */
  .product_middle_column_inner .add_to_wishlist.btn_inline {
    width: 100% !important;
    padding: 12px 16px 0 16px !important;
    margin: 0 !important;
  }

  /* Compare: 100% width, padding 12px Y, 16px X */
  .product_middle_column_inner .stcompare_add.btn_inline {
    width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
  }
}

/* Hide compare quantity number on product page */
.product_middle_column_inner .stcompare_add .stcompare_quantity {
  display: none !important;
}

/* ============================================
   Ficha de producto - Acordeones (tabs)
   ============================================ */

/* Contenedor de acordeones - sin margin, gap controla espaciado */
.product_middle_column_inner .pro_more_info,
.product_middle_column_inner .product_info_tabs {
  padding: 0 !important;
  margin: 0 !important;
}

/* Tabs como acordeones - borde superior */
.product_middle_column_inner .nav-tabs,
.product_middle_column_inner .accordion_more_info .nav-tabs {
  border: none;
  border-top: 1px solid #d5d7da;
}

/* Cada tab item */
.product_middle_column_inner .nav-tabs .nav-item {
  border-bottom: 1px solid #d5d7da;
  margin: 0;
}

/* Título del acordeón */
.product_middle_column_inner .nav-tabs .nav-link {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: #181d27 !important;
  background-color: #ffffff;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 14px 5px 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.product_middle_column_inner .nav-tabs .nav-link:hover,
.product_middle_column_inner .nav-tabs .nav-link:focus {
  color: #181d27 !important;
  background-color: #ffffff;
}

.product_middle_column_inner .nav-tabs .nav-link.active {
  color: #181d27 !important;
  background-color: #ffffff;
}

/* Contenido del acordeón */
.product_middle_column_inner .tab-content {
  border: none;
}

.product_middle_column_inner .tab-pane,
.product_middle_column_inner .tab-content .tab-pane {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #414651 !important;
  background-color: #ffffff;
  padding: 0 !important;
}

/* Listas dentro del contenido */
.product_middle_column_inner .tab-pane ul,
.product_middle_column_inner .tab-pane ol {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #414651;
  margin: 0;
  padding-left: 21px;
}

.product_middle_column_inner .tab-pane li {
  margin-bottom: 0;
}

/* Chevron icon color */
.product_middle_column_inner .nav-link::after,
.product_middle_column_inner .nav-link i {
  color: #a4a7ae !important;
}

/* ============================================
   Ficha de producto - Acordeones (mobile_tab)
   Diseño Figma: sin bordes laterales, chevron gris
   ============================================ */

/* Remove left border from accordion container */
.product_middle_column_inner .product_info_tabs,
.product_middle_column_inner .pro_more_info,
.product_middle_column_inner .sttab_block,
.product_middle_column_inner .mobile_tab {
  border-left: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tab pane and content - remove borders, margin, padding external */
.product_middle_column_inner .tab-pane,
.product_middle_column_inner .tab-content,
.product_middle_column_inner .sttab_2,
.product_middle_column_inner .sttab_2_2,
.product_middle_column_inner .sttab_2_3 {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile tab title (accordion header) - line only on top */
.product_middle_column_inner .mobile_tab_title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 5px 14px !important;
  border-top: 1px solid #d5d7da !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  cursor: pointer;
}

/* Last accordion - no bottom border */
.product_middle_column_inner .tab-content > .tab-pane:last-of-type {
  border-bottom: none !important;
}

/* Mobile tab name styling */
.product_middle_column_inner .mobile_tab_name {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: #181d27 !important;
  flex: 1;
  order: 1;
}

/* Hide default plus/minus icons */
.product_middle_column_inner .opener .plus_sign,
.product_middle_column_inner .opener .minus_sign,
.product_middle_column_inner .mobile_tab_title .fto-plus-2,
.product_middle_column_inner .mobile_tab_title .fto-minus {
  display: none !important;
}

/* Opener button styling */
.product_middle_column_inner .opener {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  order: 2 !important;
  position: relative !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
}

/* Add chevron icon via CSS - default pointing down (closed) */
.product_middle_column_inner .opener::after {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 12.5L10 7.5L5 12.5' stroke='%23A4A7AE' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform 0.3s ease !important;
  transform: rotate(180deg) !important;
}

/* Open accordion (st_open) - chevron pointing up */
.product_middle_column_inner .tab-pane.st_open .opener::after {
  transform: rotate(0deg) !important;
}

/* Accordion content body */
.product_middle_column_inner .tab-pane-body {
  padding: 5px 14px 10px 14px !important;
  border: none !important;
}

/* Description paragraph - no margin/padding bottom */
.product_middle_column_inner .product-description p,
.product_middle_column_inner .st_read_more_box p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide content when accordion is closed */
.product_middle_column_inner
  .tab-pane:not(.st_open):not(.active)
  .tab-pane-body {
  display: none !important;
}

/* ============================================
   Detalles del producto - Ocultar "FICHA TÉCNICA"
   y layout 2 columnas
   ============================================ */

/* Hide "Data sheet" / "FICHA TÉCNICA" heading */
.product_middle_column_inner #product-details .page_heading,
.product_middle_column_inner .tab-pane-body .page_heading,
#product-details .page_heading,
.product-features ~ .page_heading,
p.page_heading:has(+ .product-features),
.tab-pane-body > p.page_heading {
  display: none !important;
}

/* Product features container - 2 column grid */
.product_middle_column_inner .product-features {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each feature row - label and value together */
.product_middle_column_inner .product-features .data-sheet,
.product_middle_column_inner .product-features .data-sheet.flex_container,
.product_middle_column_inner .product-features dl.data-sheet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Override flex_child class on value */
.product_middle_column_inner .product-features .data-sheet .value.flex_child,
.product_middle_column_inner .product-features .data-sheet dd.value {
  flex: 0 0 auto !important;
}

/* Remove dotted line separator */
.product_middle_column_inner .product-features .data-sheet::after,
.product_middle_column_inner .product-features .data-sheet::before,
.product_middle_column_inner .product-features .data-sheet .name::before,
.product_middle_column_inner .product-features .data-sheet .value::before,
.product_middle_column_inner .product-features .data-sheet .value::after {
  display: none !important;
  content: none !important;
}

/* Remove any dotted borders */
.product_middle_column_inner .product-features .data-sheet,
.product_middle_column_inner .product-features .data-sheet .name,
.product_middle_column_inner .product-features .data-sheet .value,
.product_middle_column_inner .product-features .data-sheet dd,
.product_middle_column_inner .product-features .data-sheet dt {
  border: none !important;
  border-bottom: none !important;
  background-image: none !important;
}

/* Feature name (label) */
.product_middle_column_inner .product-features .data-sheet .name {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #414651 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Add colon after feature name */
.product_middle_column_inner .product-features .data-sheet .name::after {
  content: ":";
}

/* Feature value */
.product_middle_column_inner .product-features .data-sheet .value {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: #414651 !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  text-align: left !important;
}

/* Mobile: single column for features */
@media (max-width: 575px) {
  .product_middle_column_inner .product-features {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   Category Products Container - Title Block
   ============================================ */

:is(#js-product-list, #category_products_container) .title_block {
  border-bottom: none;
  align-items: center !important;
}

:is(#js-product-list, #category_products_container) .title_block_inner {
  font-family: "Source Sans 3", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  color: #001489;
  text-transform: uppercase;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

:is(#js-product-list, #category_products_container) .title_flex_left {
  display: none !important;
}

:is(#js-product-list, #category_products_container) .title_flex_right {
  flex: 1 !important;
  height: 2px !important;
  background-color: #001489 !important;
  align-self: center !important;
  margin-left: 16px !important;
  margin-top: 4px !important;
}

/* Category Products & CD Variantes - Slider container */
:is(#js-product-list, #category_products_container) .products_sldier_swiper,
#cdvariantes_container .products_sldier_swiper {
  overflow: hidden !important;
}

:is(#js-product-list, #category_products_container) .block_content,
#cdvariantes_container .block_content {
  overflow: hidden !important;
}

/* Padding for swiper-wrapper to prevent hover effect clipping */
.products_sldier_swiper .swiper-wrapper,
.products_slider .swiper-wrapper {
  padding: 4px 0 !important;
}

/* Product cards spacing via padding (instead of Swiper spaceBetween) */
:is(#js-product-list, #category_products_container) .swiper-slide,
#cdvariantes_container .swiper-slide {
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

:is(#js-product-list, #category_products_container) .ajax_block_product,
#cdvariantes_container .ajax_block_product {
  overflow: hidden !important;
  margin-right: 0 !important;
}

/* ============================================
   Global Swiper Arrow Styles - Home & Modules
   ============================================ */

/* Base styles for all product slider arrows */
.products_sldier_swiper .swiper-button.swiper-button-outer,
.products_sldier_swiper .swiper-button.swiper-button-next,
.products_sldier_swiper .swiper-button.swiper-button-prev,
.products_slider .swiper-button.swiper-button-outer,
.products_slider .swiper-button.swiper-button-next,
.products_slider .swiper-button.swiper-button-prev,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev,
#cdvariantes_container .swiper-button.swiper-button-outer,
#cdvariantes_container .swiper-button.swiper-button-next,
#cdvariantes_container .swiper-button.swiper-button-prev,
.pro_gallery_top .swiper-button.swiper-button-next,
.pro_gallery_top .swiper-button.swiper-button-prev {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  background: #ffffff !important;
  border: 1px solid #d5d7da !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: normal !important;
  top: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Always show arrows on home page - not just on hover */
/* Override left/right positioning that hides arrows off-screen */
.swiper-button-lr .swiper-button-prev,
.products_sldier_swiper .swiper-button-prev,
.products_slider .swiper-button-prev {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  left: 0 !important;
}

.swiper-button-lr .swiper-button-next,
.products_sldier_swiper .swiper-button-next,
.products_slider .swiper-button-next {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  right: 0 !important;
}

/* Arrow icon styles - Override theme's swiper-button-lr i styles */
.products_sldier_swiper .swiper-button.swiper-button-outer i,
.products_sldier_swiper .swiper-button.swiper-button-next i,
.products_sldier_swiper .swiper-button.swiper-button-prev i,
.products_slider .swiper-button.swiper-button-outer i,
.products_slider .swiper-button.swiper-button-next i,
.products_slider .swiper-button.swiper-button-prev i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev
  i,
#cdvariantes_container .swiper-button.swiper-button-outer i,
#cdvariantes_container .swiper-button.swiper-button-next i,
#cdvariantes_container .swiper-button.swiper-button-prev i,
.pro_gallery_top .swiper-button.swiper-button-next i,
.pro_gallery_top .swiper-button.swiper-button-prev i,
.swiper-button-lr .swiper-button-prev i,
.swiper-button-lr .swiper-button-next i,
.swiper-button-lr.swiper-navigation-rectangle .swiper-button-prev i,
.swiper-button-lr.swiper-navigation-rectangle .swiper-button-next i {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  color: #414651 !important;
  font-size: 16px !important;
}

/* Arrow icon visibility - Prev shows left, Next shows right */
.swiper-button-prev .slider_arrow_right,
.swiper-button-next .slider_arrow_left {
  display: none !important;
}

.swiper-button-prev .slider_arrow_left,
.swiper-button-next .slider_arrow_right {
  display: flex !important;
}

/* Hover state */
.products_sldier_swiper .swiper-button.swiper-button-outer:hover,
.products_sldier_swiper .swiper-button.swiper-button-next:hover,
.products_sldier_swiper .swiper-button.swiper-button-prev:hover,
.products_slider .swiper-button.swiper-button-outer:hover,
.products_slider .swiper-button.swiper-button-next:hover,
.products_slider .swiper-button.swiper-button-prev:hover,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer:hover,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next:hover,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev:hover,
#cdvariantes_container .swiper-button.swiper-button-outer:hover,
#cdvariantes_container .swiper-button.swiper-button-next:hover,
#cdvariantes_container .swiper-button.swiper-button-prev:hover,
.pro_gallery_top .swiper-button.swiper-button-next:hover,
.pro_gallery_top .swiper-button.swiper-button-prev:hover {
  background: #f9fafb !important;
  border-color: #414651 !important;
}

.products_sldier_swiper .swiper-button.swiper-button-outer:hover i,
.products_sldier_swiper .swiper-button.swiper-button-next:hover i,
.products_sldier_swiper .swiper-button.swiper-button-prev:hover i,
.products_slider .swiper-button.swiper-button-outer:hover i,
.products_slider .swiper-button.swiper-button-next:hover i,
.products_slider .swiper-button.swiper-button-prev:hover i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer:hover
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next:hover
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev:hover
  i,
#cdvariantes_container .swiper-button.swiper-button-outer:hover i,
#cdvariantes_container .swiper-button.swiper-button-next:hover i,
#cdvariantes_container .swiper-button.swiper-button-prev:hover i,
.pro_gallery_top .swiper-button.swiper-button-next:hover i,
.pro_gallery_top .swiper-button.swiper-button-prev:hover i {
  color: #181d27 !important;
}

/* Disabled state */
.products_sldier_swiper
  .swiper-button.swiper-button-outer.swiper-button-disabled,
.products_sldier_swiper
  .swiper-button.swiper-button-next.swiper-button-disabled,
.products_sldier_swiper
  .swiper-button.swiper-button-prev.swiper-button-disabled,
.products_slider .swiper-button.swiper-button-outer.swiper-button-disabled,
.products_slider .swiper-button.swiper-button-next.swiper-button-disabled,
.products_slider .swiper-button.swiper-button-prev.swiper-button-disabled,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer.swiper-button-disabled,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next.swiper-button-disabled,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev.swiper-button-disabled,
#cdvariantes_container
  .swiper-button.swiper-button-outer.swiper-button-disabled,
#cdvariantes_container .swiper-button.swiper-button-next.swiper-button-disabled,
#cdvariantes_container .swiper-button.swiper-button-prev.swiper-button-disabled,
.pro_gallery_top .swiper-button.swiper-button-next.swiper-button-disabled,
.pro_gallery_top .swiper-button.swiper-button-prev.swiper-button-disabled {
  background: #f5f5f5 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.products_sldier_swiper
  .swiper-button.swiper-button-outer.swiper-button-disabled
  i,
.products_sldier_swiper
  .swiper-button.swiper-button-next.swiper-button-disabled
  i,
.products_sldier_swiper
  .swiper-button.swiper-button-prev.swiper-button-disabled
  i,
.products_slider .swiper-button.swiper-button-outer.swiper-button-disabled i,
.products_slider .swiper-button.swiper-button-next.swiper-button-disabled i,
.products_slider .swiper-button.swiper-button-prev.swiper-button-disabled i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-outer.swiper-button-disabled
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-next.swiper-button-disabled
  i,
:is(#js-product-list, #category_products_container)
  .swiper-button.swiper-button-prev.swiper-button-disabled
  i,
#cdvariantes_container
  .swiper-button.swiper-button-outer.swiper-button-disabled
  i,
#cdvariantes_container
  .swiper-button.swiper-button-next.swiper-button-disabled
  i,
#cdvariantes_container
  .swiper-button.swiper-button-prev.swiper-button-disabled
  i,
.pro_gallery_top .swiper-button.swiper-button-next.swiper-button-disabled i,
.pro_gallery_top .swiper-button.swiper-button-prev.swiper-button-disabled i {
  color: #9ca3af !important;
}

:is(#js-product-list, #category_products_container) .pro_outer_box,
:is(#js-product-list, #category_products_container) .pro_second_box {
  overflow: hidden !important;
}

:is(#js-product-list, #category_products_container) .product_list_item {
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
}

:is(#js-product-list, #category_products_container) .hover_fly {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Add to cart button - same as category */
:is(#js-product-list, #category_products_container)
  .ajax_add_to_cart_button.hover_fly_btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 1 1 auto !important;
  order: 2 !important;
  border-radius: 8px !important;
}

/* Compare and Wishlist buttons - square boxes with border */
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.stcompare_add,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_wishlist,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_love {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  order: 1 !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
}

:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.stcompare_add
  .icon_btn,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_wishlist
  .icon_btn,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_love
  .icon_btn {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.stcompare_add
  .hover_fly_btn_inner,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_wishlist
  .hover_fly_btn_inner,
:is(#js-product-list, #category_products_container)
  .hover_fly
  .hover_fly_btn.add_to_love
  .hover_fly_btn_inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* When no add to cart button, buttons take 50% each */
:is(#js-product-list, #category_products_container)
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.stcompare_add,
:is(#js-product-list, #category_products_container)
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.add_to_wishlist,
:is(#js-product-list, #category_products_container)
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.add_to_love {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(50% - 4px) !important;
  flex: 1 1 0 !important;
}

/* ============================================
   CD Variantes Container - Same styles as Category Products
   ============================================ */

#cdvariantes_container .title_block {
  border-bottom: none;
  align-items: center !important;
}

#cdvariantes_container .title_block_inner {
  font-family: "Source Sans 3", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  color: #001489;
  text-transform: uppercase;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#cdvariantes_container .title_flex_left {
  display: none !important;
}

#cdvariantes_container .title_flex_right {
  flex: 1 !important;
  height: 2px !important;
  background-color: #001489 !important;
  align-self: center !important;
  margin-left: 16px !important;
  margin-top: 4px !important;
}

/* CD Variantes Module - Match category miniature styles */
#cdvariantes_container .ajax_block_product {
  overflow: hidden !important;
  margin-right: 0 !important;
}

#cdvariantes_container .pro_outer_box,
#cdvariantes_container .pro_second_box {
  overflow: hidden !important;
}

#cdvariantes_container .hover_fly {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Add to cart button - same as category */
#cdvariantes_container .ajax_add_to_cart_button.hover_fly_btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 1 1 auto !important;
  order: 2 !important;
  border-radius: 8px !important;
}

/* Compare and Wishlist buttons - square boxes with border */
#cdvariantes_container .hover_fly .hover_fly_btn.stcompare_add,
#cdvariantes_container .hover_fly .hover_fly_btn.add_to_wishlist,
#cdvariantes_container .hover_fly .hover_fly_btn.add_to_love {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  order: 1 !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
}

#cdvariantes_container .hover_fly .hover_fly_btn.stcompare_add .icon_btn,
#cdvariantes_container .hover_fly .hover_fly_btn.add_to_wishlist .icon_btn,
#cdvariantes_container .hover_fly .hover_fly_btn.add_to_love .icon_btn {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

#cdvariantes_container
  .hover_fly
  .hover_fly_btn.stcompare_add
  .hover_fly_btn_inner,
#cdvariantes_container
  .hover_fly
  .hover_fly_btn.add_to_wishlist
  .hover_fly_btn_inner,
#cdvariantes_container
  .hover_fly
  .hover_fly_btn.add_to_love
  .hover_fly_btn_inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* When no add to cart button, buttons take 50% each */
#cdvariantes_container
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.stcompare_add,
#cdvariantes_container
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.add_to_wishlist,
#cdvariantes_container
  .hover_fly:not(:has(.ajax_add_to_cart_button))
  .hover_fly_btn.add_to_love {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(50% - 4px) !important;
  flex: 1 1 0 !important;
}

/* ============================================
   Sección Home - Estilos de títulos de sección
   ============================================ */

/* Títulos de sección Elementor en la home */
.elementor-widget-heading .elementor-heading-title {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  color: #001489 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center;
  gap: 16px;
}

.elementor-widget-heading .elementor-heading-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: #001489;
  min-width: 40px;
}

.featured-products .products-section-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}

.featured-products .products-section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: #001489;
  min-width: 40px;
}

.featured-products .products-section-title,
.featured-products .products-section-title a {
  color: #001489;
}

/* ============================================
   Top Bar - Match Figma Design
   ============================================ */

/* Border bottom color */
#top_bar {
  border-bottom: 1px solid #e9eaeb !important;
}

#top_bar .top_bar_item {
  display: flex;
  align-items: center;
}

#top_bar .top_bar_item div[role="button"],
#top_bar .top_bar_item .header_item {
  display: flex;
  align-items: center;
}

/* Right nav items text styling */
#nav_right .top_bar_item span,
#nav_right .top_bar_item .header_item {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #000000 !important;
}

/* Right nav items icon size and gap */
#nav_right .top_bar_item i {
  font-size: 17px !important;
  color: #000000 !important;
}

/* Atención al cliente - Custom SVG icon */
#multilink_1 .fto-info-circled {
  display: none !important;
}

#multilink_1 .dropdown_tri::before {
  content: "";
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_18932_2616)'%3E%3Cpath d='M10.0001 13.3334V10.0001M10.0001 6.66675H10.0084M18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001Z' stroke='%23000000' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_18932_2616'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================
   Ficha de producto - Semáforo de stock (stocktrafficlight)
   ============================================ */

#product .stocktrafficlight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

#product .stocktrafficlight-label > div {
  margin: 0;
}

/* Texto del semáforo - estilo Figma (sobrescribe style inline) */
#product .stocktrafficlight-label .label-stocktrafficlight,
#product .stocktrafficlight-label span,
#product .stocktrafficlight-label {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #181d27 !important;
}

/* Texto en negrita (cantidad) */
#product .stocktrafficlight-label strong,
#product .stocktrafficlight-label b {
  font-weight: 700;
}

/* Círculo del semáforo - 16x16px */
#product .circle-stocktrafficlight {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   Ficha de producto - Fila de semáforo, entrega y marca
   ============================================ */

/* Contenedor principal de la fila */
.vitrum-info-row {
  display: flex;
  flex-direction: row;
  align-items: center !important;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0 !important;
  flex-wrap: wrap;
  position: relative;
}

/* Contenedor del semáforo */
.vitrum-traffic-light-container {
  flex-shrink: 0;
}

/* Contenedor de la información de entrega */
.vitrum-delivery-info {
  flex: 1;
  min-width: 0;
}

.vitrum-delivery-info .delivery-information {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #414651;
}

/* Contenedor del logo de marca */
.vitrum-brand-logo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.vitrum-brand-logo a {
  display: block;
}

.vitrum-brand-logo img {
  max-height: 40px;
  max-width: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Responsive para móvil */
@media (max-width: 767px) {
  .vitrum-info-row {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 8px;
  }

  .vitrum-brand-logo {
    margin-left: 0;
  }

  .vitrum-brand-logo img {
    max-height: 32px;
    max-width: 80px;
  }
}

/* Fila de muesca */
.vitrum-muesca-row {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  gap: 4px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  margin-top: 12px;
  margin-bottom: 8px;
  margin-left: 16px;
  width: fit-content;
}

.vitrum-muesca-label,
.vitrum-muesca-value {
  font-family: "Source Sans 3", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #181d27;
}

.vitrum-muesca-value strong {
  font-weight: 700;
}

/* ============================================
   CD Variantes - Acabado Badge
   ============================================ */

/* Fix hover overflow on product sliders */
:is(#js-product-list, #category_products_container) .swiper-slide,
#cdvariantes_container .swiper-slide {
  padding: 2px 8px !important;
}

#cdvariantes_container .cdvariantes-acabado-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 6px 12px;
  background-color: #e5eff8;
  border-radius: 6px;
}

#cdvariantes_container .cdvariantes-acabado-badge .acabado-value {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #181d27;
}

/* CD Variantes - Acabado select in product buy box */
.cdvariantes-acabado-select-wrapper {
  margin-bottom: 16px;
}

.cdvariantes-acabado-label {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #181d27;
  margin-bottom: 6px;
}

.cdvariantes-acabado-select-container {
  position: relative;
}

.cdvariantes-acabado-select {
  width: 100%;
  height: 44px;
  padding: 10px 40px 10px 14px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #414651;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23717680' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.cdvariantes-acabado-select:hover {
  border-color: #a4a7ae;
}

.cdvariantes-acabado-select:focus {
  outline: none;
  border-color: #001489;
  box-shadow: 0 0 0 1px #001489;
}

/* ============================================
   Página 404 - Error Not Found
   ============================================ */

.page-not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.error-404-container {
  text-align: center;
  max-width: 600px;
}

.error-404-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #073d73;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.error-404-message {
  font-family: "Source Sans 3", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #414651;
  margin: 0 0 32px 0;
}

.error-404-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 8px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-height: 40px;
  line-height: 20px;
}

/* Responsive para móvil */
@media (max-width: 767px) {
  .error-404-title {
    font-size: 24px;
  }

  .error-404-message {
    font-size: 16px;
  }

  .error-404-btn {
    width: 100%;
    min-width: auto;
  }
}

/* ============================================
   Botón Outline - Estilos basados en Figma
   ============================================ */

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #efb810;
  color: #000000;
  border: 1px solid #efb810;
  border-radius: 8px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
  max-height: 40px;
  height: 40px;
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: #001489;
  border-color: #001489;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}

.btn-outline:active {
  background-color: #001070;
  border-color: #001070;
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline i {
  color: #000000;
}
.btn-outline:hover i,
.btn-outline:focus i {
  color: #ffffff;
}
.btn-outline svg {
  fill: #000000;
  color: #000000;
}
.btn-outline:hover svg,
.btn-outline:focus svg {
  fill: #ffffff;
  color: #ffffff;
}

.btn-outline:disabled,
.btn-outline.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   Alertas personalizadas - Diseño Figma
   ============================================ */

.vitrum-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 16px;
}

.vitrum-alert-bar {
  width: 4px;
  min-width: 4px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
}

.vitrum-alert-content {
  flex: 1;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #414651;
}

.vitrum-alert-content strong {
  font-weight: 600;
  color: #181d27;
}

/* Variantes de color */

/* Info - Azul */
.vitrum-alert.vitrum-alert-info .vitrum-alert-bar {
  background-color: #2196f3;
}

/* Warning - Naranja */
.vitrum-alert.vitrum-alert-warning .vitrum-alert-bar {
  background-color: #ff9800;
}

/* Error/Danger - Rojo */
.vitrum-alert.vitrum-alert-error .vitrum-alert-bar,
.vitrum-alert.vitrum-alert-danger .vitrum-alert-bar {
  background-color: #f44336;
}

/* Success - Verde */
.vitrum-alert.vitrum-alert-success .vitrum-alert-bar {
  background-color: #4caf50;
}

/* ================================================
   Form Blocks - Border Radius
   ================================================ */
.block,
.from_blcok,
.login_form_block {
  border-radius: 6px;
  overflow: hidden;
}

/* ================================================
   Global Form Inputs & Selects - Diseño Figma
   ================================================ */

/* Inputs de texto, email, password, tel, number, search, url */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input.form-control,
textarea,
textarea.form-control,
select,
select.form-control,
.form-control {
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #181d27;
  padding: 10px 14px;
  min-height: 40px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Placeholder */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: #717680;
}

/* Focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input.form-control:focus,
textarea:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus,
.form-control:focus {
  outline: none;
  border-color: #2c3f4d;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
    0 0 0 2px rgba(44, 63, 77, 0.1);
}

/* Select dropdown arrow */
select,
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a4a7ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
input[readonly],
textarea[readonly] {
  background-color: #f9fafb;
  color: #717680;
  cursor: not-allowed;
}

/* Labels */
label,
.form-group label,
.form-control-label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
  margin-bottom: 6px;
}

/* Required indicator */
label.required::after {
  content: " *";
  color: #f44336;
}

/* Form control comment / help text */
.form-control-comment {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #717680;
  margin-top: 4px;
}

/* ================================================
   Input Groups (password fields with show/hide button)
   ================================================ */

/* Container wrapper with border */
.input-group.input-group-with-border {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus state for the wrapper */
.input-group.input-group-with-border:focus-within {
  border-color: #2c3f4d;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
    0 0 0 2px rgba(44, 63, 77, 0.1);
}

/* Input inside input-group - remove its own border */
.input-group.input-group-with-border .form-control {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
}

.input-group.input-group-with-border .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Button container inside input-group */
.input-group.input-group-with-border .input-group-btn {
  display: flex;
  align-items: center;
}

/* Show/hide password button */
.input-group.input-group-with-border .btn.show_password {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  min-height: auto !important;
  height: 100% !important;
  color: #717680 !important;
  transition: color 0.2s ease;
}

.input-group.input-group-with-border .btn.show_password:hover {
  background: transparent !important;
  color: #414651 !important;
  transform: none !important;
}

.input-group.input-group-with-border .btn.show_password i {
  font-size: 16px;
  color: inherit !important;
}

/* ================================================
   Header - Match Figma Design
   ================================================ */

/* Border bottom on header bar */
#header_primary {
  border-bottom: 1px solid #e9eaeb !important;
}

/* ================================================
   Header Items - Consistent Icon & Text Alignment
   ================================================ */

/* Reset all header icons - no margin/padding, consistent size */
#header_primary .st_mega_menu_container i,
#header_primary .stsearchbar_link i,
#header_primary .userinfo_mod_top i,
#header_primary a.login.top_bar_item i,
#header_primary .blockcart i {
  font-size: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
}

/* Catálogo link - flexbox alignment with 8px gap */
#header_primary .st_mega_menu_container a.ma_level_0 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Search link - flexbox alignment with 8px gap */
#header_primary .stsearchbar_link a.header_item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header_primary .stsearchbar_link .header_icon_btn_icon {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#header_primary .stsearchbar_link .header_icon_btn_icon i {
  margin: 0 !important;
}

/* User info - flexbox alignment with 8px gap */
#header_primary .userinfo_mod_top a.dropdown_tri {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header_primary .userinfo_mod_top .header_icon_btn_icon {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#header_primary .userinfo_mod_top .header_icon_btn_icon i {
  margin: 0 !important;
}

/* Login link - flexbox alignment with 8px gap */
#header_primary a.login.top_bar_item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header_primary a.login.top_bar_item .header_item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header_primary a.login.top_bar_item .header_icon_btn_icon {
  margin: 0 !important;
  padding: 0 !important;
}

/* Cart - flexbox alignment with 8px gap */
#header_primary .blockcart a.st_shopping_cart {
  display: inline-flex !important;
  align-items: center !important;
}

#header_primary .blockcart .flex_container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#header_primary .blockcart .ajax_cart_bag {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Cart SVG icon alignment */
#header_primary .blockcart .vitrum-cart-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

/* Remove mar_r4 class margins in header */
#header_primary .mar_r4 {
  margin-right: 0 !important;
}

/* Hide dropdown arrows in user menu */
#header_primary .userinfo_mod_top i.arrow_down,
#header_primary .userinfo_mod_top i.arrow_up,
#header_primary .userinfo_mod_top i.fto-angle-down,
#header_primary .userinfo_mod_top i.fto-angle-up {
  display: none !important;
}

/* Separator style for header items */
#header_primary .top_bar_item,
#header_primary .st_mega_menu_container {
  position: relative;
}

/* Separator after search (Buscar) */
#header_primary .stsearchbar_link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

#header_primary .stsearchbar_link {
  padding: 8px 12px;
}

/* Separator after mega menu (Catálogo) */
#header_primary .st_mega_menu_container::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

#header_primary .st_mega_menu_container {
  padding: 8px 12px;
  margin-right: 0;
}

/* Separator before user info (Iniciar sesión) */
#header_primary .userinfo_mod_top::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

#header_primary .userinfo_mod_top {
  padding: 8px 12px;
  margin-left: 0;
}

/* Separator before login link (when not logged in) */
#header_primary a.login.top_bar_item {
  position: relative;
  padding: 8px 12px;
  margin-left: 0;
}

#header_primary a.login.top_bar_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

/* Separator before cart (Artículos) */
#header_primary .blockcart::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background-color: rgba(255, 255, 255, 1);
}

#header_primary .blockcart {
  padding: 8px 12px;
  margin-left: 0;
}

/* Ensure header items have proper spacing */
#header_left .flex_container {
  gap: 0;
}

#header_right_top .top_bar_item {
  position: relative;
}

#header_primary_container.container-fluid #header_primary_row,
#top_bar_container.container-fluid #top_bar_row {
  padding-left: 0;
  padding-right: 0;
}
#header_primary_container.container-fluid,
#top_bar_container.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

#st_mega_menu_wrap .ma_level_0 {
  padding-left: 0;
  padding-right: 0;
}

/* ================================================
   Desktop Header Text Styles
   ================================================ */

/* Common text styles for all header items (Catalogo, Search, Login, Cart) */
#header_primary .st_mega_menu_container a.ma_level_0,
#header_primary .stsearchbar_link,
#header_primary .stsearchbar_link span,
#header_primary .userinfo_mod_top,
#header_primary .userinfo_mod_top a,
#header_primary .userinfo_mod_top span,
#header_primary a.login.top_bar_item,
#header_primary a.login.top_bar_item span,
#header_primary .blockcart,
#header_primary .blockcart a,
#header_primary .blockcart span,
#header_primary .blockcart .cart_link_text {
  font-family: "Source Sans 3", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  text-transform: none !important;
}

/* Header links hover - underline mostaza */
#header_primary .userinfo_mod_top a.dropdown_tri,
#header_primary a.login.top_bar_item,
#header_primary .blockcart a.st_shopping_cart {
  border-bottom: 2px solid transparent !important;
  padding-bottom: 4px !important;
  transition: border-color 0.2s ease !important;
}

/* Catálogo & Search: use ::before on container so underlines align consistently */
#header_primary .st_mega_menu_container a.ma_level_0,
#header_primary .stsearchbar_link a.header_item {
  border-bottom: none !important;
}

#header_primary .st_mega_menu_container::before,
#header_primary .stsearchbar_link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

#header_primary .st_mega_menu_container:hover::before,
#header_primary .stsearchbar_link:hover::before {
  background-color: #efb810;
}

/* Login: use ::after instead of border-bottom so the bar starts at the icon */
#header_primary a.login.top_bar_item {
  border-bottom-color: transparent !important;
}

#header_primary a.login.top_bar_item::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 12px;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

#header_primary .userinfo_mod_top a.dropdown_tri:hover,
#header_primary .blockcart a.st_shopping_cart:hover {
  border-bottom-color: #efb810 !important;
}

#header_primary a.login.top_bar_item:hover {
  border-bottom-color: transparent !important;
}

#header_primary a.login.top_bar_item:hover::after {
  background-color: #efb810;
}

/* ================================================
   Mobile Header Styles
   ================================================ */

/* Mobile header container - 64px height */
#mobile_bar {
  height: 64px;
  min-height: 64px;
  border-bottom: 1px solid #e9eaeb;
}

#mobile_bar .container {
  height: 100%;
  padding-left: 16px !important;
  padding-right: 8px !important;
}

#mobile_bar_top {
  height: 64px;
  min-height: 64px;
  align-items: center;
}

/* Mobile bar items */
#mobile_bar .mobile_bar_item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Icon styles - 22px size (matching Figma 24px SVGs), white color */
#mobile_bar .mobile_bar_item i,
#mobile_bar .mobile_bar_tri i,
#mobile_bar .ajax_cart_bag i {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* Hamburger menu icon */
#mobile_bar .menu_mobile_bar_tri i.fto-menu {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* Search icon */
#mobile_bar .search_mobile_bar_tri i.fto-search-1 {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* User account icon */
#mobile_bar .customersignin_mobile_bar_tri i.fto-user {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* Cart icon */
#mobile_bar .cart_mobile_bar_tri i.fto-glyph {
  font-size: 22px !important;
  color: #ffffff !important;
}

/* Hide mobile bar text labels */
#mobile_bar .mobile_bar_tri_text {
  display: none;
}

/* Mobile logo sizing */
#mobile_bar .mobile_logo img.logo {
  max-height: 40px;
  width: auto;
}

/* Spacing between left/right items */
#mobile_bar_left .flex_container,
#mobile_bar_right .flex_container {
  gap: 8px;
}

/* ============================================
   Vitrum Custom Cart Icon (SVG)
   ============================================ */

/* Header cart - Remove default box/border styling */
.blockcart .ajax_cart_bag {
  border: none !important;
  background: none !important;
  height: auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 8px;
}

/* Hide original cart bag handle */
.blockcart .ajax_cart_bag .ajax_cart_bg_handle {
  display: none !important;
}

/* Header cart SVG icon */
.blockcart .vitrum-cart-icon {
  width: 17px;
  height: 17px;
  color: inherit;
  display: block;
}

/* Header cart icon - quantity badge positioning */
.blockcart .ajax_cart_bag .ajax_cart_quantity.amount_circle {
  position: absolute;
  top: -8px;
  right: -8px;
}

/* Header cart styles 2, 3, 4 - icon button version */
.blockcart .header_icon_btn_icon .vitrum-cart-icon {
  width: 20px;
  height: 20px;
  color: inherit;
  display: block;
}

.blockcart .header_icon_btn_icon {
  position: relative;
  display: flex;
  align-items: center;
}

/* Hide original icon in header_icon_btn_icon */
.blockcart .header_icon_btn_icon i.fto-glyph {
  display: none !important;
}

/* Mobile bar cart - Remove default box/border styling */
#mobile_bar .ajax_cart_bag {
  border: none !important;
  background: none !important;
  height: auto !important;
  width: auto !important;
  position: relative;
  margin: 0;
}

/* Mobile bar cart SVG icon */
#mobile_bar .vitrum-cart-icon {
  width: 22px;
  height: 22px;
  color: #ffffff;
  display: block;
}

/* Hide original icon elements when using SVG */
#mobile_bar .ajax_cart_bag .ajax_cart_bg_handle,
#mobile_bar .ajax_cart_bag i.icon-glyph,
#mobile_bar .ajax_cart_bag i.fto-glyph {
  display: none !important;
}

/* Mobile bar quantity badge */
#mobile_bar .ajax_cart_bag .ajax_cart_quantity.amount_circle {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background-color: #ffffff;
  color: #073d73;
}

.sidebar-submenu-left #st_menu_multi_level_2,
.sidebar-submenu-left #st_menu_multi_level_7 {
  background: #ffffff;
}

#footer-bottom.footer_bottom_center #footer_bottom_right {
  margin: 0;
}

/* ============================================
   Category Page - Title & Subcategories Full Width at Top
   ============================================ */

/* Full width header container (created by JS) */
.category-header-fullwidth {
  width: 100%;
  margin-bottom: 48px;
}

/* Category page heading styling */
.category-header-fullwidth .category_page_heading,
body.category .category_page_heading {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  color: #181d27 !important;
  margin-bottom: 25px !important;
}

/* Subcategories container */
.category-header-fullwidth #subcategories,
body.category #subcategories {
  margin-bottom: 24px !important;
}

/* Fix center column width after moving title/subcategories out */
@media (min-width: 992px) {
  body.category #columns > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  body.category #center_column {
    flex: 1 1 0 !important;
    max-width: calc(100% - 340px - 24px) !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.category #left_column {
    flex: 0 0 340px !important;
    max-width: 340px !important;
    width: 340px !important;
  }
}

/* Hide the "Subcategories" heading */
#subcategories h3.page_heading {
  display: none !important;
}

/* Subcategories list - horizontal flexbox layout */
#subcategories ul.inline_list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Reset grid classes - force inline display */
#subcategories ul.inline_list.subcate_grid_view,
#subcategories ul.inline_list.row {
  display: flex !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Each subcategory item - pill/button style */
#subcategories ul.inline_list li {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide subcategory images */
#subcategories ul.inline_list li a.img,
#subcategories ul.inline_list li .img {
  display: none !important;
}

/* Hide subcategory descriptions */
#subcategories ul.inline_list li .subcat_desc {
  display: none !important;
}

/* Title block styling */
#subcategories ul.inline_list li .s_title_block {
  margin: 0 !important;
  padding: 0 !important;
}

/* Subcategory link - pill/button style */
#subcategories ul.inline_list li .subcategory-name {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 8px !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #181d27 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* Hover state for subcategory pills */
#subcategories ul.inline_list li .subcategory-name:hover {
  background-color: #181d27 !important;
  color: #ffffff !important;
  border-color: #181d27 !important;
}

/* Active/current subcategory (if applicable) */
#subcategories ul.inline_list li.active .subcategory-name,
#subcategories ul.inline_list li.current .subcategory-name {
  background-color: #181d27 !important;
  color: #ffffff !important;
  border-color: #181d27 !important;
}

/* Responsive adjustments for subcategories */
@media (max-width: 991px) {
  /* Horizontal scroll for subcategories on mobile/tablet */
  #subcategories {
    overflow: visible !important;
  }

  #subcategories ul.inline_list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: -15px !important;
    padding-left: 0 !important;
    padding-right: 15px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* Hide scrollbar for Chrome/Safari */
  #subcategories ul.inline_list::-webkit-scrollbar {
    display: none;
  }

  #subcategories ul.inline_list li .subcategory-name {
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }

  .category-header-fullwidth .category_page_heading,
  body.category .category_page_heading {
    font-size: 20px !important;
    line-height: 28px !important;
  }
}

/* ============================================
   Category Page - Vitrum Filters Redesign
   ============================================ */

/* Filter wrapper */
.vitrum-filters {
  background: transparent;
  padding: 12px;
  border-radius: 8px;
}

/* Filter header - "Filtrar" with horizontal line */
.vitrum-filters-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vitrum-filters-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #181d27;
  white-space: nowrap;
}

.vitrum-filters-line {
  flex: 1;
  height: 1px;
  background-color: #181d27;
}

/* Filter content */
.vitrum-filters-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Facets container */
.vitrum-facets {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual facet group */
.vitrum-facet-group {
  border-bottom: none;
}

/* Facet title button */
.vitrum-facet-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-align: left !important;
}

.vitrum-facet-label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  color: #181d27;
}

/* Chevron icon */
.vitrum-facet-chevron {
  color: #181d27;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Chevron rotates up when expanded (not collapsed) */
.vitrum-facet-title:not(.collapsed) .vitrum-facet-chevron {
  transform: rotate(180deg);
}

/* Facet content */
.vitrum-facet-content {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* Expanded state */
.vitrum-facet-content.show {
  max-height: 2000px;
  opacity: 1;
  padding: 4px 0 0 0;
}

/* Hidden state */
.vitrum-facet-content:not(.show) {
  padding: 0;
}

/* Filter list */
.vitrum-facet-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Individual filter item */
.vitrum-filter-item {
  margin-bottom: 4px;
}

.vitrum-filter-item:last-child {
  margin-bottom: 0;
}

/* Filter label */
.vitrum-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

/* Checkbox wrapper */
.vitrum-checkbox-wrapper {
  flex-shrink: 0;
  position: relative;
}

/* Hide native inputs */
.vitrum-checkbox-input,
.vitrum-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox */
.vitrum-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid #000000;
  border-radius: 0;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.vitrum-check-icon {
  display: none;
  color: #ffffff;
}

/* Checked state */
.vitrum-checkbox-input:checked + .vitrum-checkbox,
.vitrum-filter-label.active .vitrum-checkbox {
  background-color: #181d27;
  border-color: #181d27;
}

.vitrum-checkbox-input:checked + .vitrum-checkbox .vitrum-check-icon,
.vitrum-filter-label.active .vitrum-checkbox .vitrum-check-icon {
  display: block;
}

/* Custom radio button */
.vitrum-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid #000000;
  border-radius: 50%;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.vitrum-radio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s ease;
}

.vitrum-radio-input:checked + .vitrum-radio,
.vitrum-filter-label.active .vitrum-radio {
  border-color: #181d27;
}

.vitrum-radio-input:checked + .vitrum-radio .vitrum-radio-dot,
.vitrum-filter-label.active .vitrum-radio .vitrum-radio-dot {
  background-color: #181d27;
}

/* Color swatches */
.vitrum-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #d5d7da;
}

.vitrum-checkbox-input:checked + .vitrum-color-swatch,
.vitrum-filter-label.active .vitrum-color-swatch {
  border-color: #181d27;
  box-shadow: 0 0 0 2px #181d27;
}

/* Filter link */
.vitrum-filter-link {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  flex: 1;
}

.vitrum-filter-text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #414651;
}

.vitrum-filter-link:hover .vitrum-filter-text {
  color: #181d27;
}

.vitrum-filter-count {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #717680;
}

/* Hide old panda filter styles when vitrum-filters is present */
.vitrum-filters .title_block,
.vitrum-filters .block_content {
  display: none;
}

/* ============================================
   Mobile Filter Button Redesign
   ============================================ */

@media (max-width: 991px) {
  /* Hide grid switcher and flex_child spacer on mobile */
  body.category .list_grid_switcher,
  body.category .products-selection > .flex_child,
  body.category #js-product-list-top > .flex_child {
    display: none !important;
  }

  /* Products selection container - wrap layout */
  body.category .products-selection,
  body.category #js-product-list-top {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    border: none !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* Filter button container - full width on its own row */
  body.category .filter-button,
  body.category .hidden-lg-up.filter-button {
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    order: 1 !important;
  }

  /* Sort dropdown - second row, takes available space */
  body.category .products-sort-order {
    display: flex !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    margin: 0 !important;
  }

  /* Pagination - second row, auto width */
  body.category .paginaton_sample {
    display: flex !important;
    flex: 0 0 auto !important;
    order: 3 !important;
    margin: 0 !important;
    align-items: center !important;
  }

  /* Redesign the filter toggle button */
  body.category #search_filter_toggler,
  body.category .rightbar_tri,
  body.category .filter-button .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #e9eaeb !important;
    border-radius: 8px !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    color: #414651 !important;
    text-decoration: none !important;
    margin: 0 !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05) !important;
  }

  body.category #search_filter_toggler:hover,
  body.category .rightbar_tri:hover,
  body.category .filter-button .btn:hover {
    background-color: #fafafa !important;
    border-color: #d5d7da !important;
  }

  /* Add filter icon via pseudo-element */
  body.category #search_filter_toggler::before,
  body.category .rightbar_tri::before,
  body.category .filter-button .btn::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.66667 3.83333C1.66667 3.36662 1.66667 3.13327 1.75749 2.95501C1.83739 2.79821 1.96487 2.67072 2.12167 2.59083C2.29993 2.5 2.53329 2.5 3 2.5H17C17.4667 2.5 17.7001 2.5 17.8783 2.59083C18.0351 2.67072 18.1626 2.79821 18.2425 2.95501C18.3333 3.13327 18.3333 3.36662 18.3333 3.83333V4.39116C18.3333 4.61516 18.3333 4.72716 18.306 4.8313C18.2817 4.92359 18.2418 5.01103 18.1879 5.0898C18.1271 5.17869 18.0425 5.25204 17.8732 5.39875L12.5434 10.0179C12.3742 10.1646 12.2895 10.238 12.2287 10.3269C12.1749 10.4056 12.135 10.4931 12.1107 10.5854C12.0833 10.6895 12.0833 10.8015 12.0833 11.0255V15.382C12.0833 15.5449 12.0833 15.6264 12.057 15.6969C12.0338 15.7591 11.9961 15.8149 11.9469 15.8596C11.8912 15.9102 11.8156 15.9404 11.6643 16.001L8.83093 17.1343C8.52464 17.2568 8.3715 17.3181 8.24856 17.2925C8.14105 17.2702 8.04671 17.2063 7.98604 17.1148C7.91667 17.0101 7.91667 16.8452 7.91667 16.5153V11.0255C7.91667 10.8015 7.91667 10.6895 7.88929 10.5854C7.86504 10.4931 7.82511 10.4056 7.77126 10.3269C7.71048 10.238 7.62585 10.1646 7.45657 10.0179L2.12676 5.39875C1.95749 5.25204 1.87285 5.17869 1.81208 5.0898C1.75822 5.01103 1.71829 4.92359 1.69404 4.8313C1.66667 4.72716 1.66667 4.61516 1.66667 4.39116V3.83333Z' stroke='%23A4A7AE' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
  }

  /* Sort dropdown styling - same style as filter button */
  body.category .products-sort-order .dropdown_tri,
  body.category .products-sort-order .select-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #e9eaeb !important;
    border-radius: 8px !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #414651 !important;
    text-decoration: none !important;
    min-height: 40px !important;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05) !important;
  }

  body.category .products-sort-order {
    flex: 1 !important;
  }

  body.category .products-sort-order .dropdown_tri:hover,
  body.category .products-sort-order .select-title:hover {
    background-color: #fafafa !important;
    border-color: #d5d7da !important;
  }

  /* Pagination styling - same as filter button and sort dropdown */
  body.category .paginaton_sample {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #414651 !important;
    white-space: nowrap !important;
    background-color: #ffffff !important;
    border: 1px solid #e9eaeb !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    padding: 0 !important;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05) !important;
    overflow: hidden !important;
  }

  body.category .paginaton_sample .pagination {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.category .paginaton_sample .page-item {
    margin: 0 !important;
  }

  body.category .paginaton_sample .page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #414651 !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  body.category .paginaton_sample .page-item:not(:last-child) .page-link {
    border-right: 1px solid #e9eaeb !important;
  }

  body.category .paginaton_sample .page-link:hover {
    background-color: #fafafa !important;
  }
}

/* ============================================
   Pagination styling - Desktop (global)
   ============================================ */
body.category .paginaton_sample .page-link,
body.category .paginaton_sample .page-link i {
  color: #414651 !important;
}

body.category .paginaton_sample .page-link:hover,
body.category .paginaton_sample .page-link:hover i {
  color: #181d27 !important;
}

/* ============================================
   Hide product list top bar on desktop (category page)
   ============================================ */
@media (min-width: 992px) {
  body.category #product-list-top-wrap,
  body.category :is(#js-product-list, #category_products_container)-top {
    display: none !important;
  }
}

/* ============================================
   Hide Left Column Toggle Button at Bottom
   ============================================ */

/* Hide the "Left column" button at the bottom */
#switch_left_column_wrap {
  display: none !important;
}

/* If no other buttons in sidebar_box, hide the entire bar */
#sidebar_box:not(
    :has(.rightbar_wrap:not(#switch_left_column_wrap):not(.display_none))
  ) {
  display: none !important;
}

/* Fix sidebar/filter menu height to use full viewport height */
@media (max-width: 991px) {
  /* Remove bottom: 50px that was reserving space for the bottom bar */
  .slide_lr_column #left_column.sidebar_opened,
  .slide_lr_column #right_column.sidebar_opened,
  #left_column.sidebar_opened,
  #right_column.sidebar_opened {
    bottom: 0 !important;
    padding-top: 20px !important;
  }

  /* Remove bottom padding/margin that was accounting for the bottom bar */
  #st-container .st-menu,
  .st-menu {
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: 0 !important;
    bottom: 0 !important;
  }

  /* Ensure the filter content inside also takes full height */
  #st-container .st-menu .st-menu-inner,
  .st-menu .st-menu-inner,
  #st-container .st-menu > div:not(.st-menu-header):not(.vitrum-cart-header),
  .st-menu > div:not(.st-menu-header):not(.vitrum-cart-header) {
    height: 100% !important;
    padding-bottom: 12px !important;
  }

  /* Ensure sidebar headers don't take full height */
  .st-menu > .st-menu-header,
  .st-menu > .vitrum-cart-header {
    height: auto !important;
    flex-shrink: 0 !important;
  }
}
@media (max-width: 767px) {
  .category-header-fullwidth {
    margin-bottom: 12px;
  }
}

.swiper_images_slider img {
  width: 100%;
}

/* ============================================
   Mail Alert (Notify when available) - Input Group
   ============================================ */
.js-mailalert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.js-mailalert > .mar_b6:first-child {
  width: 100%;
}

.js-mailalert .js-mailalert-alerts {
  width: 100%;
}

.js-mailalert input[type="email"].form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 42px;
  width: auto;
  max-width: 250px;
  border-right: none;
}

.js-mailalert button.btn.js-mailalert-add {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js-mailalert .gdpr_consent {
  width: 100%;
  margin-top: 10px;
}

#top_bar .top_bar_item div[role="button"],
#top_bar .top_bar_item .header_item {
  gap: 8px;
}

#st_mega_menu_wrap .ma_level_0.is_parent:after {
  content: none;
}
.userinfo_mod_top .dropdown_tri_in .arrow_down,
.userinfo_mod_top .dropdown_tri_in .arrow_up {
  display: none !important;
}

/* ==========================================================================
   VITRUM SIDEBAR CART REDESIGN
   ========================================================================== */

/* Sidebar container - override st-menu styles */
#side_products_cart.st-menu.vitrum-cart-sidebar,
nav#side_products_cart.st-menu.vitrum-cart-sidebar {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  max-width: 400px !important;
  width: 400px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* Ensure proper positioning */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  z-index: 9999 !important;
  /* Animation - start off-screen */
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s ease, visibility 0.3s ease;
}

/* Sidebar open state - animate in from right */
#side_products_cart.st-menu.vitrum-cart-sidebar.sidebar_opened,
nav#side_products_cart.st-menu.vitrum-cart-sidebar.sidebar_opened {
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
}

#side_products_cart.vitrum-cart-sidebar *,
nav#side_products_cart.vitrum-cart-sidebar * {
  box-sizing: border-box;
}

/* Reset all children positioning to prevent overflow */
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-header,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-content,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-list,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-products,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-product-item,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-product,
#side_products_cart.vitrum-cart-sidebar .vitrum-cart-actions {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Reset any inherited padding/margin from st-menu */
#side_products_cart.vitrum-cart-sidebar > div:not(.vitrum-cart-header),
#side_products_cart.vitrum-cart-sidebar .pad_10,
#side_products_cart #side_cart_block {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  left: 0 !important;
}

#side_products_cart.vitrum-cart-sidebar .vitrum-cart-content,
#side_products_cart #side_cart_block.vitrum-cart-content {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100% !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative !important;
  left: 0 !important;
}

/* Cart Header */
#side_products_cart .vitrum-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px !important;
  gap: 20px;
  background: #fafafa;
  flex-shrink: 0;
  width: 100%;
  z-index: 2;
}

#side_products_cart .vitrum-cart-title {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #073d73;
  margin: 0;
  cursor: default;
  padding: 0 !important;
}

#side_products_cart .vitrum-cart-close {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #18181b;
}

#side_products_cart .vitrum-cart-close i {
  font-size: 16px;
}

#side_products_cart .vitrum-cart-close:hover {
  opacity: 0.8;
}

/* Cart Content Area */
#side_products_cart .vitrum-cart-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#side_products_cart .vitrum-cart-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Free Shipping Notice */
#side_products_cart .vitrum-cart-shipping-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 20px;
  padding: 12px 16px;
  background: #fef3f2;
  border-radius: 8px;
  flex-shrink: 0;
}

#side_products_cart .vitrum-cart-shipping-bar {
  width: 4px;
  height: 24px;
  background: #f97316;
  border-radius: 2px;
  flex-shrink: 0;
}

#side_products_cart .vitrum-cart-shipping-text {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
}

#side_products_cart .vitrum-cart-shipping-text strong {
  font-weight: 700;
  color: #101828;
}

/* Products List */
#side_products_cart .vitrum-cart-products {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

#side_products_cart .vitrum-cart-product-item {
  padding: 16px 0;
  width: 100%;
}

/* Product Line */
#side_products_cart .vitrum-cart-product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

/* Delete button in sidebar */
#side_products_cart .vitrum-cart-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 5;
}

#side_products_cart .vitrum-cart-delete .remove-from-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #a4a7ae;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  text-decoration: none;
}

#side_products_cart .vitrum-cart-delete .remove-from-cart:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

#side_products_cart .vitrum-cart-delete .remove-from-cart svg {
  width: 16px;
  height: 16px;
}

#side_products_cart .vitrum-cart-product-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

#side_products_cart .vitrum-cart-product-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

#side_products_cart .vitrum-cart-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  display: block !important;
}

#side_products_cart .vitrum-cart-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#side_products_cart .vitrum-cart-product-name {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #181d27;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 28px;
}

#side_products_cart .vitrum-cart-product-name:hover {
  color: #0a5ba8;
}

#side_products_cart .vitrum-cart-product-qty {
  font-weight: 700;
  color: #073d73;
}

#side_products_cart .vitrum-cart-product-reference {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #667085;
}

#side_products_cart .vitrum-cart-product-attributes {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #667085;
}

#side_products_cart .vitrum-cart-product-prices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

#side_products_cart .vitrum-cart-product-unit-price {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
}

#side_products_cart .vitrum-cart-product-total-price {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #101828;
}

/* Product Customizations */
#side_products_cart .vitrum-cart-product-customizations {
  margin-top: 8px;
  padding-left: 96px;
}

#side_products_cart .vitrum-cart-customization-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#side_products_cart .vitrum-cart-customization-item {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #667085;
  margin-bottom: 4px;
}

#side_products_cart .vitrum-cart-customization-label {
  font-weight: 600;
  color: #344054;
}

#side_products_cart .vitrum-cart-customization-image {
  max-width: 40px;
  border-radius: 4px;
  margin-left: 8px;
}

/* Cart Summary */
#side_products_cart .vitrum-cart-summary {
  padding: 8px 0 !important;
  margin: 0 20px !important;
  border-top: 1px solid #d5d7da !important;
  border-bottom: 1px solid #d5d7da !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #ffffff;
  flex-shrink: 0;
  width: auto !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#side_products_cart .vitrum-cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 100%;
}

#side_products_cart .vitrum-cart-summary-total {
  padding: 0;
  margin: 0;
}

#side_products_cart .vitrum-cart-summary-label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #181d27;
}

#side_products_cart .vitrum-cart-summary-value {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #181d27;
  text-align: right;
}

#side_products_cart .vitrum-cart-summary-total .vitrum-cart-summary-label {
  font-weight: 700;
  font-size: 14px;
  color: #181d27;
}

#side_products_cart .vitrum-cart-summary-total .vitrum-cart-summary-value {
  font-weight: 700;
  font-size: 14px;
  color: #181d27;
}

/* Cart Action Buttons */
#side_products_cart .vitrum-cart-actions {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  flex-shrink: 0;
  width: 100%;
}

#side_products_cart .vitrum-cart-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

#side_products_cart .vitrum-cart-btn-secondary {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  color: #344054;
}

#side_products_cart .vitrum-cart-btn-secondary:hover {
  background: #f9fafb;
  border-color: #98a2b3;
  color: #1d2939;
}

#side_products_cart .vitrum-cart-btn-primary {
  background-color: var(--e-global-color-secondary);
  border: 1px solid var(--e-global-color-secondary);
  color: #ffffff;
}

#side_products_cart .vitrum-cart-btn-primary:hover {
  background-color: var(--e-global-color-secondary);
  border-color: var(--e-global-color-secondary);
  color: #ffffff;
  opacity: 0.9;
}

#side_products_cart .vitrum-cart-btn svg {
  flex-shrink: 0;
}

/* Empty Cart State */
#side_products_cart .vitrum-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  flex: 1;
  width: 100%;
}

#side_products_cart .vitrum-cart-empty svg {
  color: #d0d5dd;
  margin-bottom: 16px;
}

#side_products_cart .vitrum-cart-empty p {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #667085;
  margin: 0 0 24px 0;
}

#side_products_cart .vitrum-cart-empty .vitrum-cart-btn {
  width: auto;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  #side_products_cart.st-menu.vitrum-cart-sidebar {
    max-width: 100%;
  }

  #side_products_cart.vitrum-cart-sidebar .vitrum-cart-header {
    padding: 10px 20px;
    height: auto !important;
  }

  #side_products_cart .vitrum-cart-shipping-notice {
    margin: 12px 16px;
    padding: 10px 12px;
  }

  #side_products_cart .vitrum-cart-products {
    padding: 0 16px;
  }

  #side_products_cart .vitrum-cart-product-item {
    padding: 12px 0;
  }

  #side_products_cart .vitrum-cart-product {
    gap: 12px;
  }

  #side_products_cart .vitrum-cart-product-image {
    width: 64px;
    min-width: 64px;
    height: 64px;
  }

  #side_products_cart .vitrum-cart-product-name {
    font-size: 13px;
  }

  #side_products_cart .vitrum-cart-product-customizations {
    padding-left: 76px;
  }

  #side_products_cart .vitrum-cart-summary {
    padding: 8px 0 !important;
    margin: 0 16px !important;
  }

  #side_products_cart .vitrum-cart-actions {
    padding: 16px 16px;
  }

  #side_products_cart .vitrum-cart-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}
.product-add-to-cart #product-availability {
  display: none !important;
}

/* ============================================
   Category Products - Mobile Vertical List
   ============================================ */

@media (max-width: 767px) {
  /* Title styling */
  :is(#js-product-list, #category_products_container) .title_block_inner {
    font-family: "Source Sans 3", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #073d73;
  }

  /* Disable swiper - make vertical list */
  :is(#js-product-list, #category_products_container) .products_sldier_swiper {
    overflow: visible !important;
  }

  :is(#js-product-list, #category_products_container) .swiper-wrapper {
    flex-direction: column !important;
    transform: none !important;
  }

  /* Hide swiper navigation */
  :is(#js-product-list, #category_products_container) .swiper-button-outer,
  :is(#js-product-list, #category_products_container) .swiper-button,
  :is(#js-product-list, #category_products_container) .swiper-button-prev,
  :is(#js-product-list, #category_products_container) .swiper-button-next,
  :is(#js-product-list, #category_products_container)
    .swiper-button.swiper-button-outer,
  :is(#js-product-list, #category_products_container)
    .swiper-button.swiper-button-next,
  :is(#js-product-list, #category_products_container)
    .swiper-button.swiper-button-prev,
  :is(#js-product-list, #category_products_container)
    .swiper-button.swiper-button-outer.swiper-button-next,
  :is(#js-product-list, #category_products_container)
    .swiper-button.swiper-button-outer.swiper-button-prev,
  :is(#js-product-list, #category_products_container) .swiper-pagination,
  :is(#js-product-list, #category_products_container) .swiper-scrollbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Each product slide */
  :is(#js-product-list, #category_products_container) .swiper-slide {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Product card container - match Figma mobile */
  :is(#js-product-list, #category_products_container) .pro_outer_box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Image container - no border-bottom, fixed size, clipped */
  :is(#js-product-list, #category_products_container) .pro_first_box {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 130px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    overflow: hidden !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_first_box
    .product_img_link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  :is(#js-product-list, #category_products_container) .pro_first_box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Hide hover effects */
  :is(#js-product-list, #category_products_container) .hover_fly,
  :is(#js-product-list, #category_products_container) .back_image_pic,
  :is(#js-product-list, #category_products_container) .bottom_hover_fly {
    display: none !important;
  }

  /* Info container - match Figma mobile: 8px padding & gap */
  :is(#js-product-list, #category_products_container) .pro_second_box {
    flex: 1 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Orden correcto: Nombre (1), Referencia (2), Precio (3), Añadir (4) */
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .mini_name,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .s_title_block {
    order: 1 !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .pro_list_reference {
    order: 2 !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .pro_kuan_box {
    order: 3 !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .act_box_cart {
    order: 4 !important;
  }

  /* Product name */
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .s_title_block {
    margin: 0 !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .s_title_block
    a {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #181d27 !important;
  }

  /* Reference - force display */
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .pro_list_reference {
    display: block !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #414651 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .pro_list_reference
    strong {
    font-weight: 700 !important;
    color: #414651 !important;
  }

  /* Price */
  :is(#js-product-list, #category_products_container) .pro_second_box .price {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    color: #001489 !important;
  }

  /* Hide unnecessary elements */
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .product-desc,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .variant-links,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .pro_mini_cate_name,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .act_box_inner,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .regular-price,
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .discount-percentage {
    display: none !important;
  }

  /* Add to cart row */
  :is(#js-product-list, #category_products_container)
    .pro_second_box
    .act_box_cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    overflow: visible !important;
  }

  /* Quitar margin-top del act_box_cart con add_show_on_mobile */
  :is(#js-product-list, #category_products_container)
    .act_box_cart.add_show_on_mobile {
    margin-top: 0 !important;
  }

  /* Quitar clearfix del pro_outer_box */
  :is(#js-product-list, #category_products_container)
    .pro_outer_box.clearfix::before,
  :is(#js-product-list, #category_products_container)
    .pro_outer_box.clearfix::after {
    display: none !important;
    content: none !important;
  }

  /* Quantity controls - match product page style */
  :is(#js-product-list, #category_products_container) .qty_wrap,
  :is(#js-product-list, #category_products_container) .s_quantity_wanted {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  :is(#js-product-list, #category_products_container) .qty_wrap .qty_minus,
  :is(#js-product-list, #category_products_container) .qty_wrap .qty_plus {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    color: #a4a7ae !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  :is(#js-product-list, #category_products_container)
    .qty_wrap
    input.pro_quantity {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    text-align: center !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717680 !important;
    background: #ffffff !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
  }

  :is(#js-product-list, #category_products_container)
    .qty_wrap
    input.pro_quantity::-webkit-outer-spin-button,
  :is(#js-product-list, #category_products_container)
    .qty_wrap
    input.pro_quantity::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* Add to cart button */
  :is(#js-product-list, #category_products_container) .ajax_add_to_cart_button,
  :is(#js-product-list, #category_products_container) .btn.add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background: #2c3f4d !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    cursor: pointer !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  /* Icon in add to cart button */
  :is(#js-product-list, #category_products_container)
    .ajax_add_to_cart_button
    i,
  :is(#js-product-list, #category_products_container) .btn.add-to-cart i {
    font-size: 16px !important;
  }

  /* Pantallas muy pequeñas: solo icono en botón añadir */
  @media (max-width: 389px) {
    :is(#js-product-list, #category_products_container)
      .ajax_add_to_cart_button
      span,
    :is(#js-product-list, #category_products_container) .btn.add-to-cart span,
    .act_box_cart .ajax_add_to_cart_button span,
    .act_box_cart a.ajax_add_to_cart_button span {
      display: none !important;
    }
  }

  /* ============================================
     Selector de cantidad SEPARADO - :is(#js-product-list, #category_products_container)
     (Diseño con 3 cajas independientes: [-] [1] [+])
     ============================================ */

  /* Eliminar borde del contenedor qty_controls_group (viene de .act_box_cart) */
  :is(#js-product-list, #category_products_container)
    .act_box_cart
    .qty_controls_group {
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    gap: 4px !important;
  }

  /* Contenedor bootstrap-touchspin - diseño separado */
  :is(#js-product-list, #category_products_container)
    .qty_wrap
    .bootstrap-touchspin,
  :is(#js-product-list, #category_products_container)
    .qty_wrap
    .input-group.bootstrap-touchspin,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    .bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Contenedores de botones */
  :is(#js-product-list, #category_products_container)
    .qty_wrap
    .input-group-btn,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    .input-group-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Botones +/- estilo separado */
  :is(#js-product-list, #category_products_container) .qty_wrap .btn-touchspin,
  :is(#js-product-list, #category_products_container) .qty_wrap .js-touchspin,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    .btn-touchspin,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    .js-touchspin {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    color: #a4a7ae !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  :is(#js-product-list, #category_products_container)
    .qty_wrap
    .btn-touchspin:hover,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    .btn-touchspin:hover {
    background-color: #fafafa !important;
    border-color: #a4a7ae !important;
  }

  /* Input de cantidad - mismo estilo separado */
  :is(#js-product-list, #category_products_container)
    .qty_wrap
    input.pro_quantity,
  :is(#js-product-list, #category_products_container)
    .s_quantity_wanted
    input.pro_quantity,
  :is(#js-product-list, #category_products_container) .qty_wrap .form-control {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    text-align: center !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717680 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
  }

  /* Ocultar elementos innecesarios del touchspin */
  :is(#js-product-list, #category_products_container)
    .bootstrap-touchspin-prefix,
  :is(#js-product-list, #category_products_container)
    .bootstrap-touchspin-postfix {
    display: none !important;
  }
}

/* ============================================
   CD Variantes - Mobile Vertical List
   (Same styles as Category Products)
   ============================================ */

@media (max-width: 767px) {
  /* Title styling */
  #cdvariantes_container .title_block_inner {
    font-family: "Source Sans 3", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #073d73;
  }

  /* Disable swiper - make vertical list */
  #cdvariantes_container .products_sldier_swiper {
    overflow: visible !important;
  }

  #cdvariantes_container .swiper-wrapper {
    flex-direction: column !important;
    transform: none !important;
  }

  /* Hide swiper navigation */
  #cdvariantes_container .swiper-button-outer,
  #cdvariantes_container .swiper-button,
  #cdvariantes_container .swiper-button-prev,
  #cdvariantes_container .swiper-button-next,
  #cdvariantes_container .swiper-button.swiper-button-outer,
  #cdvariantes_container .swiper-button.swiper-button-next,
  #cdvariantes_container .swiper-button.swiper-button-prev,
  #cdvariantes_container .swiper-button.swiper-button-outer.swiper-button-next,
  #cdvariantes_container .swiper-button.swiper-button-outer.swiper-button-prev,
  #cdvariantes_container .swiper-pagination,
  #cdvariantes_container .swiper-scrollbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Each product slide */
  #cdvariantes_container .swiper-slide {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Product card container - match Figma mobile */
  #cdvariantes_container .pro_outer_box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Image container - no border-bottom, fixed size, clipped */
  #cdvariantes_container .pro_first_box {
    flex: 0 0 114px !important;
    width: 114px !important;
    height: 130px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    overflow: hidden !important;
  }

  #cdvariantes_container .pro_first_box .product_img_link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  #cdvariantes_container .pro_first_box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Hide hover effects */
  #cdvariantes_container .hover_fly,
  #cdvariantes_container .back_image_pic,
  #cdvariantes_container .bottom_hover_fly {
    display: none !important;
  }

  /* Info container - match Figma mobile: 8px padding & gap */
  #cdvariantes_container .pro_second_box {
    flex: 1 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Orden correcto: Nombre (1), Referencia (2), Precio (3), Añadir (4) */
  #cdvariantes_container .pro_second_box .mini_name,
  #cdvariantes_container .pro_second_box .s_title_block {
    order: 1 !important;
  }

  #cdvariantes_container .pro_second_box .pro_list_reference {
    order: 2 !important;
  }

  #cdvariantes_container .pro_second_box .pro_kuan_box {
    order: 3 !important;
  }

  #cdvariantes_container .pro_second_box .act_box_cart {
    order: 4 !important;
  }

  /* Product name */
  #cdvariantes_container .pro_second_box .s_title_block {
    margin: 0 !important;
  }

  #cdvariantes_container .pro_second_box .s_title_block a {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #181d27 !important;
  }

  /* Reference - force display */
  #cdvariantes_container .pro_second_box .pro_list_reference {
    display: block !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #414651 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #cdvariantes_container .pro_second_box .pro_list_reference strong {
    font-weight: 700 !important;
    color: #414651 !important;
  }

  /* Price */
  #cdvariantes_container .pro_second_box .price {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    color: #001489 !important;
  }

  /* Hide unnecessary elements */
  #cdvariantes_container .pro_second_box .product-desc,
  #cdvariantes_container .pro_second_box .variant-links,
  #cdvariantes_container .pro_second_box .pro_mini_cate_name,
  #cdvariantes_container .pro_second_box .act_box_inner,
  #cdvariantes_container .pro_second_box .regular-price,
  #cdvariantes_container .pro_second_box .discount-percentage {
    display: none !important;
  }

  /* Add to cart row */
  #cdvariantes_container .pro_second_box .act_box_cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    overflow: visible !important;
  }

  /* Quitar margin-top del act_box_cart con add_show_on_mobile */
  #cdvariantes_container .act_box_cart.add_show_on_mobile {
    margin-top: 0 !important;
  }

  /* Quitar clearfix del pro_outer_box */
  #cdvariantes_container .pro_outer_box.clearfix::before,
  #cdvariantes_container .pro_outer_box.clearfix::after {
    display: none !important;
    content: none !important;
  }

  /* Quantity controls - match product page style */
  #cdvariantes_container .qty_wrap,
  #cdvariantes_container .s_quantity_wanted {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  #cdvariantes_container .qty_wrap .qty_minus,
  #cdvariantes_container .qty_wrap .qty_plus {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    color: #a4a7ae !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  #cdvariantes_container .qty_wrap input.pro_quantity {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    text-align: center !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717680 !important;
    background: #ffffff !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
  }

  #cdvariantes_container
    .qty_wrap
    input.pro_quantity::-webkit-outer-spin-button,
  #cdvariantes_container
    .qty_wrap
    input.pro_quantity::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* Add to cart button */
  #cdvariantes_container .ajax_add_to_cart_button,
  #cdvariantes_container .btn.add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background: #2c3f4d !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    cursor: pointer !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  /* Icon in add to cart button */
  #cdvariantes_container .ajax_add_to_cart_button i,
  #cdvariantes_container .btn.add-to-cart i {
    font-size: 16px !important;
  }

  /* Eliminar borde del contenedor qty_controls_group */
  #cdvariantes_container .act_box_cart .qty_controls_group {
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    gap: 4px !important;
  }

  /* Contenedor bootstrap-touchspin - diseño separado */
  #cdvariantes_container .qty_wrap .bootstrap-touchspin,
  #cdvariantes_container .qty_wrap .input-group.bootstrap-touchspin,
  #cdvariantes_container .s_quantity_wanted .bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Contenedores de botones */
  #cdvariantes_container .qty_wrap .input-group-btn,
  #cdvariantes_container .s_quantity_wanted .input-group-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Botones +/- estilo separado */
  #cdvariantes_container .qty_wrap .btn-touchspin,
  #cdvariantes_container .qty_wrap .js-touchspin,
  #cdvariantes_container .s_quantity_wanted .btn-touchspin,
  #cdvariantes_container .s_quantity_wanted .js-touchspin {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    color: #a4a7ae !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #cdvariantes_container .qty_wrap .btn-touchspin:hover,
  #cdvariantes_container .s_quantity_wanted .btn-touchspin:hover {
    background-color: #fafafa !important;
    border-color: #a4a7ae !important;
  }

  /* Input de cantidad - mismo estilo separado */
  #cdvariantes_container .qty_wrap input.pro_quantity,
  #cdvariantes_container .s_quantity_wanted input.pro_quantity,
  #cdvariantes_container .qty_wrap .form-control {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    text-align: center !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717680 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
  }

  /* Ocultar elementos innecesarios del touchspin */
  #cdvariantes_container .bootstrap-touchspin-prefix,
  #cdvariantes_container .bootstrap-touchspin-postfix {
    display: none !important;
  }
}

/* ============================================
   Category/Product List - Mobile Horizontal Cards
   (Miniaturas en categorías y listados)
   ============================================ */

@media (max-width: 767px) {
  /* Product card container - horizontal layout */
  .product_list_item .ajax_block_product .pro_outer_box,
  .products.product_list .ajax_block_product .pro_outer_box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Quitar clearfix */
  .product_list_item .ajax_block_product .pro_outer_box.clearfix::before,
  .product_list_item .ajax_block_product .pro_outer_box.clearfix::after,
  .products.product_list .ajax_block_product .pro_outer_box.clearfix::before,
  .products.product_list .ajax_block_product .pro_outer_box.clearfix::after {
    display: none !important;
    content: none !important;
  }

  /* Image container */
  .product_list_item .ajax_block_product .pro_first_box,
  .products.product_list .ajax_block_product .pro_first_box {
    flex: 0 0 70px !important;
    width: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product_list_item .ajax_block_product .pro_first_box .product_img_link,
  .products.product_list .ajax_block_product .pro_first_box .product_img_link {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
  }

  .product_list_item .ajax_block_product .pro_first_box img,
  .products.product_list .ajax_block_product .pro_first_box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Hide hover effects */
  .product_list_item .ajax_block_product .hover_fly,
  .product_list_item .ajax_block_product .back_image_pic,
  .product_list_item .ajax_block_product .bottom_hover_fly,
  .products.product_list .ajax_block_product .hover_fly,
  .products.product_list .ajax_block_product .back_image_pic,
  .products.product_list .ajax_block_product .bottom_hover_fly {
    display: none !important;
  }

  /* Info container */
  .product_list_item .ajax_block_product .pro_second_box,
  .products.product_list .ajax_block_product .pro_second_box {
    flex: 1 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Orden correcto: Nombre (1), Referencia (2), Precio (3), Añadir (4) */
  .product_list_item .ajax_block_product .pro_second_box .mini_name,
  .product_list_item .ajax_block_product .pro_second_box .s_title_block,
  .products.product_list .ajax_block_product .pro_second_box .mini_name,
  .products.product_list .ajax_block_product .pro_second_box .s_title_block {
    order: 1 !important;
  }

  .product_list_item .ajax_block_product .pro_second_box .pro_list_reference,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .pro_list_reference {
    order: 2 !important;
  }

  .product_list_item .ajax_block_product .pro_second_box .pro_kuan_box,
  .products.product_list .ajax_block_product .pro_second_box .pro_kuan_box {
    order: 3 !important;
  }

  .product_list_item .ajax_block_product .pro_second_box .act_box_cart,
  .products.product_list .ajax_block_product .pro_second_box .act_box_cart {
    order: 4 !important;
  }

  /* Product name */
  .product_list_item .ajax_block_product .pro_second_box .s_title_block,
  .products.product_list .ajax_block_product .pro_second_box .s_title_block {
    margin: 0 !important;
  }

  .product_list_item .ajax_block_product .pro_second_box .s_title_block a,
  .products.product_list .ajax_block_product .pro_second_box .s_title_block a {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    color: #1f2937 !important;
  }

  /* Reference */
  .product_list_item .ajax_block_product .pro_second_box .pro_list_reference,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .pro_list_reference {
    display: block !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .product_list_item
    .ajax_block_product
    .pro_second_box
    .pro_list_reference
    strong,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .pro_list_reference
    strong {
    font-weight: 700 !important;
  }

  /* Price */
  .product_list_item .ajax_block_product .pro_second_box .price,
  .products.product_list .ajax_block_product .pro_second_box .price {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #073d73 !important;
  }

  /* Hide unnecessary elements */
  .product_list_item .ajax_block_product .pro_second_box .product-desc,
  .product_list_item .ajax_block_product .pro_second_box .variant-links,
  .product_list_item .ajax_block_product .pro_second_box .pro_mini_cate_name,
  .product_list_item .ajax_block_product .pro_second_box .act_box_inner,
  .product_list_item .ajax_block_product .pro_second_box .regular-price,
  .product_list_item .ajax_block_product .pro_second_box .discount-percentage,
  .product_list_item
    .ajax_block_product
    .pro_second_box
    .stocktrafficlight-label,
  .product_list_item .ajax_block_product .pro_second_box .tax_label,
  .products.product_list .ajax_block_product .pro_second_box .product-desc,
  .products.product_list .ajax_block_product .pro_second_box .variant-links,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .pro_mini_cate_name,
  .products.product_list .ajax_block_product .pro_second_box .act_box_inner,
  .products.product_list .ajax_block_product .pro_second_box .regular-price,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .discount-percentage,
  .products.product_list
    .ajax_block_product
    .pro_second_box
    .stocktrafficlight-label,
  .products.product_list .ajax_block_product .pro_second_box .tax_label {
    display: none !important;
  }

  /* Add to cart row */
  .product_list_item .ajax_block_product .pro_second_box .act_box_cart,
  .products.product_list .ajax_block_product .pro_second_box .act_box_cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    overflow: visible !important;
  }

  /* Quitar margin-top del act_box_cart con add_show_on_mobile */
  .product_list_item .ajax_block_product .act_box_cart.add_show_on_mobile,
  .products.product_list .ajax_block_product .act_box_cart.add_show_on_mobile {
    margin-top: 0 !important;
  }

  /* Eliminar borde del contenedor qty_controls_group */
  .product_list_item .ajax_block_product .act_box_cart .qty_controls_group,
  .products.product_list .ajax_block_product .act_box_cart .qty_controls_group {
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    gap: 4px !important;
  }

  /* Contenedor bootstrap-touchspin - diseño separado */
  .product_list_item .ajax_block_product .qty_wrap .bootstrap-touchspin,
  .product_list_item
    .ajax_block_product
    .qty_wrap
    .input-group.bootstrap-touchspin,
  .product_list_item
    .ajax_block_product
    .s_quantity_wanted
    .bootstrap-touchspin,
  .products.product_list .ajax_block_product .qty_wrap .bootstrap-touchspin,
  .products.product_list
    .ajax_block_product
    .qty_wrap
    .input-group.bootstrap-touchspin,
  .products.product_list
    .ajax_block_product
    .s_quantity_wanted
    .bootstrap-touchspin {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Contenedores de botones */
  .product_list_item .ajax_block_product .qty_wrap .input-group-btn,
  .product_list_item .ajax_block_product .s_quantity_wanted .input-group-btn,
  .products.product_list .ajax_block_product .qty_wrap .input-group-btn,
  .products.product_list
    .ajax_block_product
    .s_quantity_wanted
    .input-group-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Botones +/- estilo separado */
  .product_list_item .ajax_block_product .qty_wrap .btn-touchspin,
  .product_list_item .ajax_block_product .qty_wrap .js-touchspin,
  .product_list_item .ajax_block_product .s_quantity_wanted .btn-touchspin,
  .product_list_item .ajax_block_product .s_quantity_wanted .js-touchspin,
  .products.product_list .ajax_block_product .qty_wrap .btn-touchspin,
  .products.product_list .ajax_block_product .qty_wrap .js-touchspin,
  .products.product_list .ajax_block_product .s_quantity_wanted .btn-touchspin,
  .products.product_list .ajax_block_product .s_quantity_wanted .js-touchspin {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    color: #a4a7ae !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .product_list_item .ajax_block_product .qty_wrap .btn-touchspin:hover,
  .product_list_item
    .ajax_block_product
    .s_quantity_wanted
    .btn-touchspin:hover,
  .products.product_list .ajax_block_product .qty_wrap .btn-touchspin:hover,
  .products.product_list
    .ajax_block_product
    .s_quantity_wanted
    .btn-touchspin:hover {
    background-color: #fafafa !important;
    border-color: #a4a7ae !important;
  }

  /* Input de cantidad - mismo estilo separado */
  .product_list_item .ajax_block_product .qty_wrap input.pro_quantity,
  .product_list_item .ajax_block_product .s_quantity_wanted input.pro_quantity,
  .product_list_item .ajax_block_product .qty_wrap .form-control,
  .products.product_list .ajax_block_product .qty_wrap input.pro_quantity,
  .products.product_list
    .ajax_block_product
    .s_quantity_wanted
    input.pro_quantity,
  .products.product_list .ajax_block_product .qty_wrap .form-control {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    text-align: center !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #717680 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
  }

  /* Ocultar elementos innecesarios del touchspin */
  .product_list_item .ajax_block_product .bootstrap-touchspin-prefix,
  .product_list_item .ajax_block_product .bootstrap-touchspin-postfix,
  .products.product_list .ajax_block_product .bootstrap-touchspin-prefix,
  .products.product_list .ajax_block_product .bootstrap-touchspin-postfix {
    display: none !important;
  }

  /* Add to cart button */
  .product_list_item .ajax_block_product .ajax_add_to_cart_button,
  .product_list_item .ajax_block_product .btn.add-to-cart,
  .products.product_list .ajax_block_product .ajax_add_to_cart_button,
  .products.product_list .ajax_block_product .btn.add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 12px !important;
    background: #2c3f4d !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05) !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    cursor: pointer !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  /* Icon in add to cart button */
  .product_list_item .ajax_block_product .ajax_add_to_cart_button i,
  .product_list_item .ajax_block_product .btn.add-to-cart i,
  .products.product_list .ajax_block_product .ajax_add_to_cart_button i,
  .products.product_list .ajax_block_product .btn.add-to-cart i {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   VITRUM: Botón de inicio de sesión en ficha de producto
   ========================================================================== */

.vitrum-login-prompt {
  width: 100%;
}

/* ==========================================================================
   VITRUM: Página del carrito - Cards redondeadas
   ========================================================================== */

/* Card principal del carrito (izquierda - lista de productos) */
#main .cart-grid-body .card.card_trans {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* Card del resumen del carrito (derecha - totales) */
#main .cart-grid-right .card.card_trans.cart-summary {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* Header de las cards del carrito */
#main .cart-grid-body .card.card_trans .card-header,
#main .cart-grid-right .card.cart-summary .card-header {
  width: 100%;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #d5d7da;
}

/* Asegurar que el contenido se ajuste correctamente */
#main .cart-grid-body .card.card_trans .card-body,
#main .cart-grid-right .card.cart-summary .card-body {
  width: 100%;
}

/* Footer/acciones del carrito */
#main .cart-grid-right .card.cart-summary .checkout {
  width: 100%;
  padding: 16px;
}

/* Contenido del carrito (lista de productos) */
#main .cart-grid-body .card.card_trans .cart-overview {
  width: 100%;
  padding: 16px;
}

/* Lista de items del carrito */
#main .cart-grid-body .cart-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Contenido del resumen (card derecha) */
#main .cart-grid-right .cart-summary .cart-detailed-totals {
  width: 100%;
}

/* Bloques internos del resumen */
#main .cart-grid-right .cart-summary .card-block {
  padding: 16px;
}

/* Líneas de resumen del carrito */
#main .cart-grid-right .cart-summary .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

#main .cart-grid-right .cart-summary .cart-summary-line:last-child {
  margin-bottom: 0;
}

/* Total del carrito */
#main .cart-grid-right .cart-summary .cart-total {
  padding-top: 8px;
}

/* Separadores */
#main .cart-grid-right .cart-summary hr {
  margin: 0;
  border-color: #d5d7da;
}

/* ==========================================================================
   VITRUM: Selector de cantidad del carrito (mismo diseño que ficha producto)
   ========================================================================== */

/* Contenedor del touchspin en el carrito */
.cart-overview .qty_wrap,
.cart-items .qty_wrap,
.vitrum-cart-qty .qty_wrap {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.cart-overview .qty_wrap .bootstrap-touchspin,
.cart-items .qty_wrap .bootstrap-touchspin,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin,
.cart-overview .qty_wrap .input-group.bootstrap-touchspin,
.cart-items .qty_wrap .input-group.bootstrap-touchspin,
.vitrum-cart-qty .qty_wrap .input-group.bootstrap-touchspin {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: auto !important;
  border: none !important;
  background: transparent !important;
}

/* Botones +/- del carrito */
.cart-overview .qty_wrap .btn-touchspin,
.cart-items .qty_wrap .btn-touchspin,
.vitrum-cart-qty .qty_wrap .btn-touchspin,
.cart-overview .qty_wrap .bootstrap-touchspin-down,
.cart-items .qty_wrap .bootstrap-touchspin-down,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin-down,
.cart-overview .qty_wrap .bootstrap-touchspin-up,
.cart-items .qty_wrap .bootstrap-touchspin-up,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin-up {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative !important;
  margin: 0 !important;
}

.cart-overview .qty_wrap .btn-touchspin:hover,
.cart-items .qty_wrap .btn-touchspin:hover,
.vitrum-cart-qty .qty_wrap .btn-touchspin:hover {
  background-color: #fafafa !important;
  border-color: #a4a7ae !important;
}

.cart-overview .qty_wrap .btn-touchspin:active,
.cart-items .qty_wrap .btn-touchspin:active,
.vitrum-cart-qty .qty_wrap .btn-touchspin:active {
  background-color: #f0f0f0 !important;
}

/* Iconos de los botones */
.cart-overview .qty_wrap .btn-touchspin i,
.cart-items .qty_wrap .btn-touchspin i,
.vitrum-cart-qty .qty_wrap .btn-touchspin i {
  font-size: 14px;
  color: #a4a7ae;
}

.cart-overview .qty_wrap .btn-touchspin:hover i,
.cart-items .qty_wrap .btn-touchspin:hover i,
.vitrum-cart-qty .qty_wrap .btn-touchspin:hover i {
  color: #717680;
}

/* Input de cantidad del carrito */
.cart-overview .qty_wrap .cart_quantity,
.cart-items .qty_wrap .cart_quantity,
.vitrum-cart-qty .qty_wrap .cart_quantity,
.cart-overview .qty_wrap .bootstrap-touchspin-input,
.cart-items .qty_wrap .bootstrap-touchspin-input,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin-input,
.cart-overview .qty_wrap input[type="number"],
.cart-items .qty_wrap input[type="number"],
.vitrum-cart-qty .qty_wrap input[type="number"] {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  color: #717680;
  text-align: center;
  -moz-appearance: textfield;
  flex-shrink: 0;
  order: 0;
}

.cart-overview .qty_wrap input::-webkit-outer-spin-button,
.cart-overview .qty_wrap input::-webkit-inner-spin-button,
.cart-items .qty_wrap input::-webkit-outer-spin-button,
.cart-items .qty_wrap input::-webkit-inner-spin-button,
.vitrum-cart-qty .qty_wrap input::-webkit-outer-spin-button,
.vitrum-cart-qty .qty_wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-overview .qty_wrap input:focus,
.cart-items .qty_wrap input:focus,
.vitrum-cart-qty .qty_wrap input:focus {
  outline: none;
  border-color: #2c3f4d !important;
  color: #181d27;
}

/* Ocultar elementos innecesarios del touchspin */
.cart-overview .qty_wrap .input-group-btn,
.cart-items .qty_wrap .input-group-btn,
.vitrum-cart-qty .qty_wrap .input-group-btn {
  display: contents !important;
}

/* Ordenar elementos: - input + */
.cart-overview .qty_wrap .bootstrap-touchspin-down,
.cart-items .qty_wrap .bootstrap-touchspin-down,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin-down {
  order: -1;
}

.cart-overview .qty_wrap .bootstrap-touchspin-up,
.cart-items .qty_wrap .bootstrap-touchspin-up,
.vitrum-cart-qty .qty_wrap .bootstrap-touchspin-up {
  order: 1;
}

/* Responsive para móvil */
@media (max-width: 767px) {
  .cart-overview .qty_wrap,
  .cart-items .qty_wrap,
  .vitrum-cart-qty .qty_wrap {
    gap: 2px;
  }

  .cart-overview .qty_wrap .btn-touchspin,
  .cart-items .qty_wrap .btn-touchspin,
  .vitrum-cart-qty .qty_wrap .btn-touchspin {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .cart-overview .qty_wrap .cart_quantity,
  .cart-items .qty_wrap .cart_quantity,
  .vitrum-cart-qty .qty_wrap .cart_quantity,
  .cart-overview .qty_wrap input[type="number"],
  .cart-items .qty_wrap input[type="number"],
  .vitrum-cart-qty .qty_wrap input[type="number"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px;
  }
}

/* Estado de loading para cantidad del carrito */
.qty_wrap.qty-loading {
  pointer-events: none;
}

.qty_wrap.qty-loading .btn-touchspin {
  opacity: 0.5;
}

/* Spinner centrado sobre el input */
.qty_wrap.qty-loading .cart_quantity,
.qty_wrap.qty-loading input.js-cart-line-product-quantity {
  color: transparent !important;
  position: relative;
}

.qty_wrap.qty-loading .bootstrap-touchspin {
  position: relative;
}

.qty_wrap.qty-loading .bootstrap-touchspin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid #e5e7eb;
  border-top-color: #2c3f4d;
  border-radius: 50%;
  animation: qty-spin 0.6s linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes qty-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   VITRUM: Nueva estructura de productos del carrito
   ========================================================================== */

/* Contenedor de cards de productos */
.cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card individual de producto */
.cart-product-card {
  background: #fff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

/* Estructura: Imagen | Contenido */
.vitrum-cart-product {
  display: flex;
  gap: 20px;
  position: relative;
}

/* Botón eliminar - esquina superior derecha */
.vitrum-cart-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 5;
}

.vitrum-cart-delete .remove-from-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #a4a7ae;
  transition: all 0.2s ease;
  background: #fff;
}

.vitrum-cart-delete .remove-from-cart:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

.vitrum-cart-delete .remove-from-cart svg {
  width: 16px;
  height: 16px;
}

/* Imagen del producto */
.vitrum-cart-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.vitrum-cart-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.vitrum-cart-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vitrum-cart-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* Columna de contenido: Nombre + Detalles */
.vitrum-cart-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding-right: 30px;
}

/* Nombre del producto */
.vitrum-cart-name {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #181d27;
  text-decoration: none;
  line-height: 1.4;
}

.vitrum-cart-name:hover {
  color: #2c3f4d;
  text-decoration: underline;
}

/* Fila de detalles: Info | Quantity | Total */
.vitrum-cart-row-details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* Columna 1: Reference, attributes, unit price */
.vitrum-cart-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* flex: 1; */
  min-width: 0;
}

.vitrum-cart-reference {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #717680;
}

.vitrum-cart-attribute {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  color: #717680;
}

.vitrum-cart-attribute-label {
  font-weight: 500;
}

.vitrum-cart-customization-link {
  font-size: 13px;
  color: #2c3f4d;
  margin-top: 4px;
}

/* Precio unitario */
.vitrum-cart-unit-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.vitrum-cart-price {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #001489;
}

.vitrum-cart-regular-price {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #a4a7ae;
  text-decoration: line-through;
}

/* Columna 2: Selector de cantidad */
.vitrum-cart-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Columna 3: Precio total */
.vitrum-cart-total {
  text-align: right;
  min-width: 100px;
  flex-shrink: 0;
}

.vitrum-cart-total-price {
  font-family: "Source Sans 3", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #001489;
}

.vitrum-cart-total .gift {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #059669;
}

/* No items */
.cart-product-card .no-items {
  padding: 40px 20px;
  text-align: center;
  color: #717680;
  font-size: 15px;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .vitrum-cart-product {
    gap: 16px;
  }

  .vitrum-cart-content {
    gap: 10px;
  }

  .vitrum-cart-row-details {
    gap: 16px;
  }

  .vitrum-cart-image {
    width: 90px;
    height: 90px;
  }

  .vitrum-cart-total {
    min-width: 80px;
  }
}

/* Responsive - Mobile */
@media (max-width: 575px) {
  .cart-product-card {
    padding: 16px;
  }

  .vitrum-cart-product {
    gap: 12px;
  }

  .vitrum-cart-image {
    width: 80px;
    height: 80px;
  }

  .vitrum-cart-content {
    gap: 8px;
    padding-right: 24px;
  }

  .vitrum-cart-row-details {
    gap: 12px;
    flex-wrap: wrap;
  }

  .vitrum-cart-info {
    width: 100%;
  }

  .vitrum-cart-qty {
    flex: 1;
    justify-content: flex-start;
  }

  .vitrum-cart-total {
    flex: 1;
    text-align: right;
    min-width: auto;
  }

  .vitrum-cart-name {
    font-size: 14px;
  }

  .vitrum-cart-reference {
    font-size: 12px;
  }

  .vitrum-cart-price {
    font-size: 14px;
  }

  .vitrum-cart-total-price {
    font-size: 16px;
  }

  .vitrum-cart-delete {
    top: -4px;
    right: -4px;
  }

  .vitrum-cart-delete .remove-from-cart {
    width: 28px;
    height: 28px;
  }
}

/* ============================================
   Vitrum Cart Summary (Right Side)
   ============================================ */

.vitrum-cart-summary {
  background: #fff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  padding: 24px;
}

/* Totals */
.vitrum-cart-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vitrum-cart-totals-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vitrum-cart-totals-label {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #414651;
}

.vitrum-cart-totals-value {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #181d27;
}

/* Total final */
.vitrum-cart-totals-final {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e9eaeb;
}

.vitrum-cart-totals-final .vitrum-cart-totals-label {
  font-size: 16px;
  font-weight: 700;
  color: #181d27;
}

.vitrum-cart-totals-final .vitrum-cart-totals-value {
  font-size: 18px;
  font-weight: 700;
  color: #001489;
}

/* Cart Actions */
.vitrum-cart-actions {
  margin-top: 20px;
}

.vitrum-btn-checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background-color: #efb810 !important;
  border: 1px solid #efb810 !important;
  color: #000000 !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.vitrum-btn-checkout:hover {
  background-color: #001489 !important;
  border-color: #001489 !important;
  color: #ffffff !important;
  text-decoration: none;
}

.vitrum-btn-checkout svg {
  flex-shrink: 0;
  color: #000000;
  transition: color 0.2s ease;
}

.vitrum-btn-checkout:hover svg {
  color: #ffffff;
}

/* Add more products button (matches sidebar cart style) */
.vitrum-add-more-products {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #344054;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.vitrum-add-more-products:hover {
  background: #f9fafb;
  border-color: #98a2b3;
  color: #1d2939;
  text-decoration: none;
}

.vitrum-add-more-products svg {
  flex-shrink: 0;
}

/* ==========================================================================
   VITRUM: Checkout Cards
   ========================================================================== */

.checkout_left_column,
.checkout_right_column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #ffffff;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  overflow: hidden;
}

/* Quitar borde inferior del último paso del checkout */
.checkout_left_column .checkout-step:last-child {
  border-bottom: none;
}

/* ==========================================================================
   VITRUM: Header User Dropdown
   ========================================================================== */

/* Dropdown container - rounded borders */
.userinfo_mod_top .dropdown_list_ul.dropdown_box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dropdown items - normal font weight */
.userinfo_mod_top .dropdown_list .dropdown_list_item {
  color: #181d27 !important;
  font-weight: 400 !important;
}

/* Disable hover behavior - only open on click */
.userinfo_mod_top.dropdown_wrap .dropdown_list {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.userinfo_mod_top.dropdown_wrap:hover .dropdown_list {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* Show dropdown when open class is added via JS */
.userinfo_mod_top.dropdown_wrap.dropdown-open .dropdown_list {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   VITRUM: Product placeholder images - ensure full width
   ========================================================================== */

.product_img_link .front-image[src*="-default-"],
.product_img_link .holder[src*="-default-"] {
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   VITRUM: Carrier extra content - spacing fix
   ========================================================================== */

.carrier-extra-content {
  margin: 0;
}

/* ==========================================================================
   VITRUM: Checkout Address Cards
   ========================================================================== */

/* Card de dirección en el checkout */
.address-selector .address-item .card.card_trans {
  border: 1px solid #d5d7da;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

/* Card de dirección seleccionada */
.address-selector .address-item.selected .card.card_trans {
  border-color: #001489;
}

/* Custom radio button en las direcciones */
.address-selector .address-item .custom-radio input[type="radio"] + span {
  border-color: #d5d7da;
  transition: border-color 0.2s ease;
}

/* Custom radio button cuando está seleccionado */
.address-selector
  .address-item.selected
  .custom-radio
  input[type="radio"]
  + span,
.address-selector
  .address-item
  .custom-radio
  input[type="radio"]:checked
  + span {
  border-color: #001489;
}

/* Círculo interior del radio cuando está seleccionado */
.address-selector
  .address-item.selected
  .custom-radio
  input[type="radio"]
  + span::after,
.address-selector
  .address-item
  .custom-radio
  input[type="radio"]:checked
  + span::after {
  background-color: #001489;
}

/* Label clickable que ocupa toda la card */
.address-selector .address-item .address-card-label {
  display: block;
  position: relative;
  padding: 16px;
  margin: 0;
  cursor: pointer;
}

/* Icono de check en esquina superior derecha - oculto por defecto */
.address-selector .address-item .address-check-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #001489;
  display: none;
}

/* Icono de check visible solo cuando está seleccionado */
.address-selector .address-item.selected .address-check-icon {
  display: block;
}

/* ==========================================================================
   VITRUM: Checkout Delivery Options (Transportistas)
   ========================================================================== */

/* Card de transportista */
.delivery-options .delivery-option {
  border: 1px solid #d5d7da;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
}

/* Alinear contenido interno del transportista */
.delivery-options .delivery-option .delivery-option-2 {
  flex: 1;
  margin: 0;
}

.delivery-options .delivery-option .delivery-option-2 .row {
  display: flex;
  align-items: center;
}

.delivery-options .delivery-option .custom-radio {
  display: flex;
  align-items: center;
}

/* Icono de check en transportistas */
.delivery-options .delivery-option .delivery-check-icon {
  display: none;
  align-items: center;
  color: #001489;
  margin-left: auto;
  flex-shrink: 0;
}

.delivery-options
  .delivery-option:has(input[type="radio"]:checked)
  .delivery-check-icon {
  display: flex;
}

/* Card de transportista seleccionado */
.delivery-options .delivery-option:has(input[type="radio"]:checked) {
  border-color: #001489;
}

/* Custom radio en transportistas */
.delivery-options
  .delivery-option
  .custom-radio
  input[type="radio"]:checked
  + span {
  border-color: #001489;
}

.delivery-options
  .delivery-option
  .custom-radio
  input[type="radio"]:checked
  + span::after {
  background-color: #001489;
}

/* ==========================================================================
   VITRUM: Checkout Payment Options (Métodos de pago)
   ========================================================================== */

/* Card de método de pago */
.payment-options .payment-option {
  border: 1px solid #d5d7da;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
}

/* Alinear contenido interno del método de pago */
.payment-options .payment-option label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex: 1;
}

.payment-options .payment-option .custom-radio {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

/* Icono de check en métodos de pago */
.payment-options .payment-option .payment-check-icon {
  display: none;
  align-items: center;
  color: #001489;
  margin-left: auto;
  flex-shrink: 0;
}

.payment-options
  .payment-option:has(input[type="radio"]:checked)
  .payment-check-icon {
  display: flex;
}

/* ==========================================================================
   VITRUM: Checkout Header
   ========================================================================== */

.checkout_header {
  padding: 0 !important;
}

.checkout_header .wide_container,
.checkout_header .container {
  padding-top: 0;
  padding-bottom: 0;
}

.vitrum-checkout-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.vitrum-checkout-header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 16px 0 !important;
  padding-right: 16px !important;
  border-right: 1px solid #ffffff;
}

.vitrum-checkout-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 !important;
}

.vitrum-checkout-header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 16px 0 !important;
  padding-left: 16px !important;
  border-left: 1px solid #ffffff;
}

.vitrum-checkout-header-left .vitrum-checkout-link,
.vitrum-checkout-header-right .vitrum-checkout-link {
  padding: 0;
  border: none;
}

/* Links del header */
.vitrum-checkout-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.vitrum-checkout-link:hover {
  color: #ffffff;
  opacity: 0.8;
  text-decoration: none;
}

.vitrum-checkout-link svg {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 767px) {
  .vitrum-checkout-header-left,
  .vitrum-checkout-header-right {
    display: none;
  }

  .vitrum-checkout-header-center {
    flex: 1;
    justify-content: center;
  }

  .vitrum-checkout-header-center .flex_container {
    justify-content: center;
  }
}

/* Checkout Mobile Header */
.vitrum-checkout-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vitrum-checkout-mobile-left,
.vitrum-checkout-mobile-right {
  flex: 0 0 auto;
}

.vitrum-checkout-mobile-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.vitrum-checkout-mobile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 8px;
}

.vitrum-checkout-mobile-link:hover {
  color: #ffffff;
  opacity: 0.8;
}

/* ==========================================================================
   VITRUM: Checkout - Footer siempre abajo
   ========================================================================== */

#checkout #page_wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#checkout .checkout_wrapper {
  flex: 1;
}

/* Card de método de pago seleccionado */
.payment-options .payment-option:has(input[type="radio"]:checked) {
  border-color: #001489;
}

/* Custom radio en métodos de pago */
.payment-options
  .payment-option
  .custom-radio
  input[type="radio"]:checked
  + span {
  border-color: #001489;
}

.payment-options
  .payment-option
  .custom-radio
  input[type="radio"]:checked
  + span::after {
  background-color: #001489;
}

/* ============================================
   CONTACT PAGE - Custom Layout
   ============================================ */
.contact-page-layout {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-info-column {
  flex: 0 0 35%;
  max-width: 35%;
}

.contact-form-column {
  flex: 1;
}

/* Left column - Info block (no card wrapper) */
.contact-info-block {
  /* No border/background - title and description are outside cards */
}

.contact-info-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.contact-info-description {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.contact-info-details {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.contact-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #1a1a1a;
}

.contact-info-item i {
  font-size: 1rem;
  color: #6b7280;
}

/* Schedule section */
.contact-schedule {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.contact-schedule-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.contact-schedule-header i {
  font-size: 1rem;
  color: #6b7280;
}

.contact-schedule-header strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

.contact-schedule-content p {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
  padding-left: 1.75rem;
  line-height: 1.6;
}

/* Right column - Form card */
.contact-form-card {
  padding: 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
}

.contact-form-card .contact-form {
  margin-bottom: 0;
}

.contact-form-card .title_block {
  display: none;
}

/* Responsive */
@media (max-width: 767px) {
  .contact-page-layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  .contact-info-column,
  .contact-form-column {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-info-row {
    flex-direction: column;
    gap: 1rem;
  }

  .contact-form-card {
    padding: 1.5rem;
  }
}

/* File upload button styling */
.contact-form-card .bootstrap-filestyle .btn {
  padding: 5px 12px;
  color: #fff !important;
}

/* =====================================================
   MY ACCOUNT - Dashboard Boxes
   ===================================================== */
.myacount_dashbord_list .list-group-item {
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

.myacount_dashbord_list .list-group-item:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.myacount_dashbord_list .list-group-item a {
  transition: color 0.2s ease;
}

.myacount_dashbord_list .list-group-item:hover a {
  color: var(--primary);
}

/* MY ACCOUNT - Left Sidebar */
.my_account_left_column .list-group {
  border: none !important;
  border-right: 1px solid #d5d7da !important;
  border-radius: 0 !important;
}

.my_account_left_column .list-group-item {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.my_account_left_column .list-group-item a {
  transition: color 0.2s ease;
}

.my_account_left_column .list-group-item:hover {
  background-color: #fafafa !important;
}

.my_account_left_column .list-group-item:hover a {
  color: var(--primary);
}

/* Active item in left sidebar */
.my_account_left_column .list-group-item.active a,
.my_account_left_column .list-group-item a.active {
  font-weight: 700;
  color: #000;
}

/* MY ACCOUNT - Page Headings (match category heading style) */
#main:has(.my_account_left_column) > .page_heading,
#main > .myacount_dashbord_list ~ .page_heading,
#main > h6.page_heading {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  color: #181d27 !important;
  margin-bottom: 25px !important;
}

/* MY ACCOUNT - Address Cards */
.address.card {
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
}

/* MY ACCOUNT - Table headers: blue background, white text */
#content .table thead th,
#content .table thead tr th {
  background-color: #001489 !important;
  color: #fff !important;
}

/* MY ACCOUNT - Invoices Table (cdnavision) */
.invoices-table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
}

.invoices-table thead tr th {
  background-color: #001489 !important;
  color: #fff !important;
  border: 1px solid #001489 !important;
  border-right: none !important;
  padding: 16px !important;
}

.invoices-table thead tr th:first-child {
  border-radius: 8px 0 0 8px !important;
}

.invoices-table thead tr th:last-child {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #001489 !important;
}

.invoices-table tbody tr td {
  background-color: #fff !important;
  border: 1px solid #d5d7da !important;
  border-right: none !important;
  padding: 16px !important;
}

.invoices-table tbody tr td:first-child {
  border-radius: 8px 0 0 8px !important;
}

.invoices-table tbody tr td:last-child {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #d5d7da !important;
}

.invoices-table tbody tr:hover td {
  background-color: #fafafa !important;
}

/* MY ACCOUNT - GDPR Page */
.psgdprinfo17 {
  background-color: #fff !important;
  border: 1px solid #d5d7da !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.psgdprinfo17 h2,
.psgdprinfo17 h3,
.psgdprinfo17 .page_heading {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

.psgdprinfo17 p {
  font-size: 0.9rem !important;
  color: #555 !important;
  margin-bottom: 16px !important;
}

.psgdprinfo17 .btn,
.psgdprinfo17 .st_psgdprgetdatabtn17 {
  font-size: 0.8rem !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  position: relative !important;
  float: none !important;
  display: inline-block !important;
  margin-right: 8px !important;
  margin-top: 8px !important;
}

/* MY ACCOUNT - Page Footer Links */
.my_account_page_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 0 !important;
  margin-top: 24px !important;
  border-top: 1px solid #d5d7da !important;
  width: 100% !important;
}

.my_account_page_footer a.fl {
  margin-right: auto !important;
}

.my_account_page_footer a.fr {
  margin-left: auto !important;
}

.my_account_page_footer a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  font-family: "Source Sans 3", sans-serif !important;
  color: #555 !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  float: none !important;
}

.my_account_page_footer a:hover {
  background-color: #fafafa !important;
  color: var(--primary) !important;
}

.my_account_page_footer a i {
  font-size: 0.85rem !important;
}

/* MY ACCOUNT - Wishlist Module */
.input-group .input-group-btn .btn {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* MY ACCOUNT - Cookies Plus Module */
.myacount_dashbord_list .link-item .material-icons,
.my_account_left_column .link-item .material-icons {
  display: none !important;
}

.myacount_dashbord_list .link-item::before,
.my_account_left_column .link-item::before {
  font-family: "fontello" !important;
  content: "\e839";
  margin-right: 4px;
}

.my_account_left_column .list-group-item a[onclick*="cookieGdpr"] {
  font-weight: normal !important;
}

/* MY ACCOUNT - Order History Table */
#history .table,
.page-history .table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
}

#history .table thead tr th,
.page-history .table thead tr th {
  background-color: #001489 !important;
  color: #fff !important;
  border: 1px solid #001489 !important;
  border-right: none !important;
  padding: 16px !important;
}

#history .table thead tr th:first-child,
.page-history .table thead tr th:first-child {
  border-radius: 8px 0 0 8px !important;
}

#history .table thead tr th:last-child,
.page-history .table thead tr th:last-child {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #001489 !important;
}

#history .table tbody tr td,
#history .table tbody tr th,
.page-history .table tbody tr td,
.page-history .table tbody tr th {
  background-color: #fff !important;
  border: 1px solid #d5d7da !important;
  border-right: none !important;
  padding: 16px !important;
}

#history .table tbody tr td:first-child,
#history .table tbody tr th:first-child,
.page-history .table tbody tr td:first-child,
.page-history .table tbody tr th:first-child {
  border-radius: 8px 0 0 8px !important;
}

#history .table tbody tr td:last-child,
#history .table tbody tr th:last-child,
.page-history .table tbody tr td:last-child,
.page-history .table tbody tr th:last-child {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #d5d7da !important;
}

#history .table tbody tr:hover td,
#history .table tbody tr:hover th,
.page-history .table tbody tr:hover td,
.page-history .table tbody tr:hover th {
  background-color: #fafafa !important;
}

/* =====================================================
   BRANDS / MANUFACTURERS PAGE
   ===================================================== */

/* Brands List Page Header */
.vitrum-brands-header {
  margin-bottom: 32px;
}

.vitrum-brands-title {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: #181d27;
  margin: 0;
}

/* Brands Grid Layout */
.vitrum-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 48px 0;
}

/* Brand Card */
.vitrum-brand-card {
  background: #ffffff;
  border: 1px solid #e9eaeb;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-brand-card {
    transition: none;
  }
}

.vitrum-brand-card:hover {
  border-color: #d5d7da;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-brand-card:hover {
    transform: none;
  }
}

.vitrum-brand-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.vitrum-brand-card-link:focus-visible {
  outline: 2px solid #073d73;
  outline-offset: 2px;
  border-radius: 12px;
}

.vitrum-brand-card-link:hover {
  text-decoration: none;
  color: inherit;
}

/* Brand Card Image */
.vitrum-brand-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fafafa;
  min-height: 120px;
}

.vitrum-brand-card-image img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Brand Card Content */
.vitrum-brand-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 20px;
  flex-grow: 1;
}

.vitrum-brand-card-name {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #181d27;
  margin: 0;
}

.vitrum-brand-card:hover .vitrum-brand-card-name {
  color: #073d73;
}

.vitrum-brand-card-description {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #535862;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vitrum-brand-card-count {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #717680;
  margin-top: auto;
}

/* Brand Card CTA Arrow */
.vitrum-brand-card-cta {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
  color: #535862;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-brand-card-cta {
    transition: none;
    transform: none;
  }
}

.vitrum-brand-card:hover .vitrum-brand-card-cta {
  opacity: 1;
  transform: translateX(0);
  background: #073d73;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-brand-card:hover .vitrum-brand-card-cta {
    transform: none;
  }
}

/* =====================================================
   SINGLE MANUFACTURER PAGE
   ===================================================== */

/* Manufacturer Header */
.vitrum-manufacturer-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9eaeb;
}

.vitrum-manufacturer-header-content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Manufacturer Logo */
.vitrum-manufacturer-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e9eaeb;
  border-radius: 12px;
  min-width: 140px;
  min-height: 100px;
}

.vitrum-manufacturer-logo-img {
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Manufacturer Info */
.vitrum-manufacturer-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vitrum-manufacturer-name {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: #181d27;
  margin: 0;
}

.vitrum-manufacturer-short-desc {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #535862;
}

.vitrum-manufacturer-short-desc p {
  margin: 0;
}

/* Manufacturer Description */
.vitrum-manufacturer-description {
  margin-top: 24px;
}

.vitrum-manufacturer-description-content {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: #414651;
  max-height: 96px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-manufacturer-description-content {
    transition: none;
  }
}

.vitrum-manufacturer-description-content.expanded {
  max-height: 2000px;
}

.vitrum-manufacturer-description-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.vitrum-manufacturer-description-content.expanded::after {
  opacity: 0;
}

.vitrum-manufacturer-description-content p {
  margin: 0 0 12px;
}

.vitrum-manufacturer-description-content p:last-child {
  margin-bottom: 0;
}

/* Read More Button */
.vitrum-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-read-more-btn {
    transition: none;
  }
}

.vitrum-read-more-btn:hover {
  background: #f5f5f5;
  border-color: #a4a7ae;
  color: #181d27;
}

.vitrum-read-more-btn:focus-visible {
  outline: 2px solid #073d73;
  outline-offset: 2px;
}

.vitrum-read-more-icon {
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-read-more-icon {
    transition: none;
  }
}

.vitrum-read-more-btn[aria-expanded="true"] .vitrum-read-more-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .vitrum-read-more-btn[aria-expanded="true"] .vitrum-read-more-icon {
    transform: none;
  }
}

.vitrum-manufacturer-description-bottom {
  margin-top: 32px;
  margin-bottom: 48px;
  padding-top: 24px;
  border-top: 1px solid #e9eaeb;
}

/* Page spacing before footer */
body.manufacturer #main,
body.manufacturers #main {
  padding-bottom: 48px;
}

/* Page spacing before footer - Cart page */
body.cart #main {
  padding-bottom: 48px;
}

/* =====================================================
   CHECKOUT PAGE - Title
   ===================================================== */

.checkout-page-title {
  font-family: "Source Sans 3", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #181d27;
  margin-top: 8px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .checkout-page-title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
  }
}

/* =====================================================
   BRANDS / MANUFACTURERS - RESPONSIVE
   ===================================================== */

@media (max-width: 991px) {
  .vitrum-brands-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .vitrum-manufacturer-header-content {
    flex-direction: column;
    gap: 16px;
  }

  .vitrum-manufacturer-logo {
    min-width: auto;
    width: fit-content;
  }

  .vitrum-manufacturer-name {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .vitrum-brands-header {
    margin-bottom: 24px;
  }

  .vitrum-brands-title {
    font-size: 24px;
    line-height: 32px;
  }

  .vitrum-brands-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vitrum-brand-card-image {
    padding: 20px;
    min-height: 100px;
  }

  .vitrum-brand-card-content {
    padding: 12px 16px 16px;
  }

  .vitrum-brand-card-name {
    font-size: 16px;
    line-height: 22px;
  }

  .vitrum-brand-card-cta {
    opacity: 1;
    transform: translateX(0);
    bottom: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
  }

  .vitrum-manufacturer-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .vitrum-manufacturer-logo {
    padding: 12px;
    min-height: 80px;
  }

  .vitrum-manufacturer-logo-img {
    max-width: 100px;
    max-height: 60px;
  }

  .vitrum-manufacturer-name {
    font-size: 24px;
    line-height: 32px;
  }

  .vitrum-manufacturer-short-desc {
    font-size: 15px;
    line-height: 22px;
  }
}

/* =====================================================
   NEW PRODUCTS PAGE - Title styling (same as category)
   ===================================================== */

body.new-products .page_heading {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  color: #181d27 !important;
  margin-bottom: 25px !important;
}

/* =====================================================
   CMS PAGES - Styles
   ===================================================== */

/* CMS Pages - Heading Hierarchy (base text: 14px) */
#cms #main h1,
.page-cms #main h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #001489;
  margin-bottom: 20px;
}

#cms #main h2,
.page-cms #main h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #181d27;
  margin-bottom: 16px;
}

#cms #main h3,
.page-cms #main h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #181d27;
  margin-bottom: 14px;
}

#cms #main h4,
.page-cms #main h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #181d27;
  margin-bottom: 12px;
}

#cms #main h5,
.page-cms #main h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #181d27;
  margin-bottom: 10px;
}

#cms #main h6,
.page-cms #main h6 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #181d27;
  margin-bottom: 10px;
}

/* ============================================
   Footer - Match Figma Design
   ============================================ */

/* Footer tertiary section - main footer area */
#footer-tertiary {
  padding-top: 64px !important;
  padding-bottom: 32px !important;
}

/* Container padding */
#footer-tertiary-container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Override the Applus logo right padding for desktop */
@media (min-width: 768px) {
  #footer-tertiary-container.footer-tertiary-with-logo {
    padding-right: 120px !important;
  }
  .footer-applus-logo {
    right: 32px !important;
    top: 0 !important;
    transform: none !important;
  }
}

/* Remove extra margin on footer column blocks */
#footer-tertiary .footer_first_level_row > .block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Column layout - first column fixed 289px, others flex */
@media (min-width: 992px) {
  #footer-tertiary .footer_first_level_row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #footer-tertiary .footer_first_level_row > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #footer-tertiary .footer_first_level_row > section:first-child {
    flex: 0 0 289px !important;
    max-width: 289px !important;
    width: 289px !important;
  }
  #footer-tertiary .footer_first_level_row > section:not(:first-child) {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* Column titles */
#footer-tertiary .title_block {
  margin-bottom: 16px !important;
}

#footer-tertiary .title_block_inner {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-transform: none !important;
  color: #ffffff !important;
}

/* Footer links (Información, Tienda, Legal columns) - desktop only */
@media (min-width: 992px) {
  #footer-tertiary .stlinkgroups_links_footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
}

#footer-tertiary .stlinkgroups_links_footer ul li a {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #ffffff !important;
  transition: color 0.2s ease !important;
}

/* Footer links hover - color mostaza */
#footer-tertiary .stlinkgroups_links_footer ul li a:hover {
  color: #efb810 !important;
}

/* Easycontent (Atención al cliente) paragraphs */
#footer-tertiary #easycontent_4 .sttext_item_content p {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}

/* Horario and Teléfono labels - semibold */
#footer-tertiary #easycontent_4 .sttext_item_content p b {
  font-weight: 600 !important;
}

/* Contactar button */
#footer-tertiary #easycontent_4 a.btn-outline,
#footer-tertiary #easycontent_4 a[href*="contact"] {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #000000 !important;
  background-color: #efb810 !important;
  border: 1px solid #efb810 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

#footer-tertiary #easycontent_4 a.btn-outline:hover,
#footer-tertiary #easycontent_4 a[href*="contact"]:hover {
  background-color: #001489 !important;
  border-color: #001489 !important;
  color: #ffffff !important;
}

/* Footer bottom bar */
#footer-bottom {
  background-color: #0a0d12 !important;
  padding: 12px 0 !important;
}

/* Copyright text */
#footer-bottom .copyright_text {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #ffffff !important;
  text-align: center !important;
}

/* ============================================
   Footer Mobile - Match Figma Design
   ============================================ */
@media (max-width: 991px) {
  /* No vertical padding on mobile footer */
  #footer-tertiary {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Container: no horizontal padding (borders go full width, rows handle px) */
  #footer-tertiary-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #footer-tertiary-container.footer-tertiary-with-logo {
    padding-right: 0 !important;
  }

  /* Hide applus logo on mobile */
  #footer-tertiary .footer-applus-logo {
    display: none !important;
  }

  /* Row wrapper - no gaps */
  #footer-tertiary .footer_first_level_row {
    margin: 0 !important;
    gap: 0 !important;
  }

  /* Footer blocks - remove extra spacing */
  #footer-tertiary .block {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Title block - accordion header (Figma: px-16, py-8, border top+bottom #d5d7da) */
  #footer-tertiary .title_block {
    margin: 0 !important;
    padding: 8px 16px !important;
    border-top: 1px solid #d5d7da !important;
    border-bottom: 1px solid #d5d7da !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Collapse adjacent borders: remove top border on all but first block */
  #footer-tertiary
    .footer_first_level_row
    > .block:not(:first-child)
    > .title_block,
  #footer-tertiary
    .footer_first_level_row
    > section:not(:first-child)
    > .title_block {
    border-top: none !important;
  }

  /* Title text (Figma: Source Sans 3, Semibold/600, 16px, line-height 24px) */
  #footer-tertiary .title_block_inner {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
  }

  /* When open, title keeps top border only, content gets bottom border */
  #footer-tertiary .st_open > .title_block {
    border-bottom: none !important;
  }

  #footer-tertiary .st_open > .footer_block_content {
    border-bottom: 1px solid #d5d7da !important;
  }

  /* Next sibling after an open block: restore top border since parent lost bottom */
  #footer-tertiary .st_open + .block > .title_block,
  #footer-tertiary .st_open + section > .title_block {
    border-top: 1px solid #d5d7da !important;
  }

  /* Footer content - hidden by default on mobile */
  /* .block added for specificity to beat the ul padding:0 reset below */
  #footer-tertiary .block .footer_block_content {
    display: none !important;
    padding: 8px 16px 16px 16px !important;
  }

  /* Show content when block is expanded */
  #footer-tertiary .st_open > .footer_block_content,
  #footer-tertiary .st_open > .style_content.footer_block_content {
    display: block !important;
  }

  /* Keep-open content always visible */
  #footer-tertiary .footer_block_content.keep_open {
    display: block !important;
  }

  /* Links list in content (Figma: gap 12px) - no display here, controlled by .footer_block_content hide/show */
  #footer-tertiary .stlinkgroups_links_footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* When content is visible, apply flex layout */
  #footer-tertiary .st_open > ul.footer_block_content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Link text (Figma: Source Sans 3, Regular/400, 16px, line-height 24px) */
  #footer-tertiary .stlinkgroups_links_footer ul li a {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #ffffff !important;
  }

  /* Easycontent text in expanded content */
  #footer-tertiary .easycontent .footer_block_content p {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
  }

  #footer-tertiary .easycontent .footer_block_content p b,
  #footer-tertiary .easycontent .footer_block_content p strong {
    font-weight: 600 !important;
  }

  /* Hide default plus/minus icons */
  #footer-tertiary .opener .fto-plus-2,
  #footer-tertiary .opener .fto-minus {
    display: none !important;
  }

  /* Opener button (Figma: 16x16 chevron) */
  #footer-tertiary .opener {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    background: none !important;
    border: none !important;
    position: static !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  /* Chevron icon via CSS (Figma: 16x16 chevron-down, white) */
  #footer-tertiary .opener::after {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23ffffff' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform 0.2s ease !important;
  }

  /* Rotate chevron when expanded */
  #footer-tertiary .st_open .opener::after {
    transform: rotate(180deg) !important;
  }

  /* Footer bottom (Figma: bg #0a0d12, py 12px, px 16px) */
  #footer-bottom {
    padding: 12px 16px !important;
  }

  /* Remove internal container/row/col padding so only #footer-bottom padding applies */
  #footer-bottom #footer-bottom-container {
    padding: 0 !important;
  }

  #footer-bottom .row {
    margin: 0 !important;
  }

  #footer-bottom .col-12 {
    padding: 0 !important;
  }

  /* Hide empty payment icon area on mobile */
  #footer-bottom #footer_bottom_right {
    display: none !important;
  }

  /* Remove aside internal padding */
  #footer-bottom #footer_bottom_left {
    padding: 0 !important;
  }

  /* Copyright text (Figma: Source Sans 3, 16px, line-height 24px, white) */
  #footer-bottom .copyright_text {
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }
}

.breadcrumb_wrapper {
  margin-top: 0 !important;
}

.breadcrumb_nav ul li:last-child span {
  color: #073d73;
}

.icon-category-home .wp-caption figcaption {
  margin-top: 10px !important;
}
.middle-brand-row {
  margin: 30px 0;
}

.st_sticker .st_sticker_text { padding: 2px 5px; }

.pro_gallery_top_container .st_sticker_block{
    display:none;
}

#header_primary .userinfo_mod_top a.dropdown_tri, #header_primary a.login.top_bar_item, #header_primary .blockcart a.st_shopping_cart{
    padding-top: 4px;
}

.btn-default {
  background-color: #EEB812 !important;
  border-color: #EEB812 !important;
}

.btn-default:hover {
  background-color: #0C1489 !important;
  border-color: #0C1489 !important;
}