/* ==========================================================================
   Wolmart polish layer
   Visual refinement on top of the stock Wolmart theme (style.min.css /
   demo1.min.css). Palette: red primary + neutral grays (the theme's own
   #336699 blue was replaced by #c0392b directly in demo1.min.css/
   style.min.css — see the .bak copies in this folder for the original).
   This layer only adds shadows, radius, spacing, transitions and
   typography refinement on top of that red/gray palette.
   ========================================================================== */

:root {
  --w-primary: #c0392b;
  --w-primary-dark: #942318;
  --w-accent: #7a1f17;
  --w-ink: #26292c;
  --w-muted: #6b7075;
  --w-border: #e8e9eb;
  --w-surface: #ffffff;
  --w-radius-lg: 12px;
  --w-radius-md: 8px;
  --w-radius-sm: 6px;
  --w-shadow: 0 2px 16px rgba(20, 25, 35, .07);
  --w-shadow-hover: 0 14px 30px rgba(20, 25, 35, .14);
  --w-transition: all .25s ease;
}

/* ---------- Base typography ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--w-ink);
}

.title, h1, h2, h3, h4 {
  letter-spacing: -.01em;
}

.title.title-underline {
  position: relative;
  padding-bottom: .6rem;
}

.title.title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--w-primary);
}

.title.justify-content-center.title-underline::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--w-radius-sm);
  transition: var(--w-transition);
  font-weight: 600;
}

.btn.btn-rounded { border-radius: 100px; }

.btn-primary {
  background-color: var(--w-primary);
  border-color: var(--w-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--w-primary-dark);
  border-color: var(--w-primary-dark);
  box-shadow: 0 8px 18px rgba(192, 57, 43, .28);
  transform: translateY(-1px);
}

.btn-dark {
  transition: var(--w-transition);
}

.btn-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

/* ---------- Header ---------- */
.header-top {
  background-color: #f7f8fa;
  border-bottom: 1px solid var(--w-border);
}

.header-middle {
  box-shadow: 0 1px 0 var(--w-border);
}

.header-search.input-wrapper {
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(20, 25, 35, .06);
  transition: var(--w-transition);
}

.header-search.input-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}

.header-bottom.sticky-header {
  box-shadow: var(--w-shadow);
}

.category-dropdown .dropdown-box,
.cart-dropdown .dropdown-box,
.main-nav .menu > li > ul,
.main-nav .menu > li .megamenu {
  border-radius: var(--w-radius-md);
  box-shadow: var(--w-shadow-hover);
  border: 1px solid var(--w-border);
}

/* ---------- Icon boxes (home features row) ---------- */
/* No outer frame around the whole strip (demo1.min.css adds one). */
.icon-box-wrapper {
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Make every card in the row the same height regardless of text length. */
.icon-box-wrapper .swiper-wrapper {
  align-items: stretch;
}

.icon-box.icon-box-side {
  height: auto;
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-lg);
  padding: 1.9rem 2rem;
  transition: var(--w-transition);
}

.icon-box.icon-box-side:hover {
  box-shadow: var(--w-shadow);
  transform: translateY(-2px);
}

.icon-box-icon {
  color: var(--w-primary);
}

/* ---------- Category tiles (home + catalog sidebar) ---------- */
.category.category-classic,
.category.category-ellipse {
  border-radius: var(--w-radius-lg);
  overflow: hidden;
  transition: var(--w-transition);
}

.category.category-classic:hover,
.category.category-ellipse:hover {
  box-shadow: var(--w-shadow-hover);
  transform: translateY(-3px);
}

.category-media img {
  transition: transform .5s ease;
}

.category:hover .category-media img {
  transform: scale(1.06);
}

/* ---------- Product cards (grid + list) ---------- */
.product-wrap {
  padding: .35rem;
}

.product-wrap .product {
  border-radius: var(--w-radius-lg);
  background: var(--w-surface);
  transition: var(--w-transition);
  overflow: hidden;
  margin-bottom: 2rem;
  border: 0;
  margin: 4px;
  box-shadow: none;
}

.product-wrap .product:hover {
  box-shadow: var(--w-shadow-hover);
  border-color: transparent;
  transform: translateY(-4px);
}

.product-media {
  overflow: hidden;
}

.product-media img {
  transition: transform .5s ease;
}

.product-wrap .product:hover .product-media img {
  transform: scale(1.05);
}

.product-details {
  padding: 1rem 1.1rem 1.2rem;
}

.product-name a {
  color: var(--w-ink);
  font-weight: 600;
}

.product-price .new-price,
.product-price {
  color: var(--w-primary);
  font-weight: 700;
}

.product-label.label-discount {
  background-color: var(--w-accent);
  border-radius: var(--w-radius-sm);
  font-weight: 600;
}

.btn-product-icon {
  transition: var(--w-transition);
  box-shadow: 0 2px 8px rgba(20, 25, 35, .12);
}

.btn-product-icon:hover {
  background-color: var(--w-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* Price breakdown tooltip on the product card */
.tooltiptext_price {
  border-radius: var(--w-radius-md);
  box-shadow: var(--w-shadow-hover);
  border: 1px solid var(--w-border);
  overflow: hidden;
}

.tooltiptext_price .table {
  margin-bottom: 0;
}

/* ---------- Info / disclaimer banner (pricing config note) ---------- */
.price-config-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  margin-bottom: 20px;
  padding: 12px 16px;
  background-color: #f7f8fa;
  border: 1px solid var(--w-border);
  border-left: 3px solid var(--w-primary);
  border-radius: var(--w-radius-sm);
  color: var(--w-ink);
}

.price-config-note .extra-icon {
  font-size: 13px !important;
  color: var(--w-primary);
}

/* ---------- Catalog sidebar widgets ---------- */
.shop-sidebar .widget {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.shop-sidebar .widget-title {
  font-weight: 700;
  letter-spacing: -.01em;
}

.widget .widget-title {
  border-bottom: none;
}

.shop-sidebar .filter-items a {
  transition: var(--w-transition);
}

.shop-sidebar .filter-items a:hover {
  color: var(--w-primary);
}

/* ---------- Toolbox / pagination ---------- */
.toolbox {
  border-radius: var(--w-radius-sm);
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
  background-color: var(--w-primary);
  border-color: var(--w-primary);
  color: #fff;
}

/* ---------- Product detail page ---------- */
.product-gallery {
  border-radius: var(--w-radius-lg);
  overflow: hidden;
}

.product-single .product-title {
  font-weight: 700;
  letter-spacing: -.01em;
}

.breadcrumb-nav {
  border-bottom: 1px solid var(--w-border);
}

.breadcrumb li a {
  color: var(--w-muted);
}

.breadcrumb li a:hover {
  color: var(--w-primary);
}

/* ---------- Modern flush page header (account / link pages) ---------- */
.page-header.page-header--flush {
  display: block;
  height: auto;
  min-height: 0;
  padding: 2.6rem 0 1.6rem;
  background: transparent;
  border: 0;
  text-align: left;
}

.page-header--flush .container {
  position: relative;
}

.page-header--flush .page-header__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-muted);
}

.page-header--flush .page-header__crumbs a {
  color: var(--w-muted);
  transition: color 0.18s ease;
}

.page-header--flush .page-header__crumbs a:hover {
  color: var(--w-primary);
}

.page-header--flush .page-header__crumbs span[aria-hidden] {
  opacity: 0.5;
}

.page-header--flush .page-title {
  position: relative;
  margin: 0;
  padding-left: 1.15rem;
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--w-ink);
  text-transform: none;
}

.page-header--flush .page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 4px;
  background: var(--w-primary);
}

@media (max-width: 575px) {
  .page-header--flush .page-title {
    font-size: 2.3rem;
  }
}

/* ==========================================================================
   Vehicle filter bar  (#vehicleFilter — Marca / Modelo / Motor + Filtrar)
   Stock theme drew it with 2px black rules top & bottom and the selects as
   full-pill black-outlined "buttons" (they carry `.btn .btn-rounded`).
   Restyle as a clean control strip.
   ========================================================================== */
#vehicleFilter.cart-selector {
  padding: 1.6rem 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--w-border);
  box-shadow: 0 1px 0 rgba(20, 25, 35, 0.04);
}

#vehicleFilter.sticky-content.fixed {
  box-shadow: var(--w-shadow);
}

/* Keep the form aligned with the header. In normal flow the bar is already
   inside the site `.container`; when the sticky script detaches it (position:
   fixed, full viewport width) the content would otherwise run edge-to-edge.
   1240px = the .container's 1280px max-width minus its 20px gutters, so the
   form lines up with the logo / top nav in both states. */
#vehicleFilter .login-content {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

#vehicleFilter .login-content .row {
  align-items: flex-end;
  row-gap: 1rem;
}

#vehicleFilter .form-group {
  margin-bottom: 0;
}

#vehicleFilter .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-muted);
}

#vehicleFilter .form-group > br {
  display: none;
}

#vehicleFilter select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4.4rem;
  padding: 0 3.4rem 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--w-ink);
  text-align: left;
  text-align-last: left; /* align the selected value, not just the list */
  text-transform: none;
  letter-spacing: 0;
  background-color: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.3rem center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#vehicleFilter select.form-control:hover {
  border-color: #c9ccd2;
}

#vehicleFilter select.form-control:focus {
  outline: 0;
  border-color: var(--w-primary);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

#vehicleFilter .btn.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 4.4rem;
  padding: 0 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--w-primary);
  border: 0;
  border-radius: var(--w-radius-md);
  box-shadow: none;
  transition: background-color 0.18s ease;
}

#vehicleFilter .btn.btn-dark:hover,
#vehicleFilter .btn.btn-dark:focus {
  background: var(--w-primary-dark);
  color: #fff;
}

#vehicleFilter .btn.btn-dark i {
  font-size: 1.1em;
}

@media (max-width: 767px) {
  #vehicleFilter .login-content .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #vehicleFilter .btn.btn-dark {
    width: 100%;
  }
}

/* ---------- Product list view (catalog toggled to list layout) ---------- */
.product-list .product-media {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20rem;
  flex: 0 0 20rem;
  max-width: 20rem;
  margin-right: 2rem;
}

/* ==========================================================================
   Catalog part card  (.product.product-list in the search / category grid)
   The stock table, price tooltip, promo tags and a `<pre>` debug line were all
   spilling out of an unbounded card. Contain and structure it.
   ========================================================================== */
.shop-content .product.product-list,
.products .product.product-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.shop-content .product.product-list:hover,
.products .product.product-list:hover {
  box-shadow: var(--w-shadow-hover);
  transform: translateY(-3px);
}

/* Media: fixed ratio box, image contained, no forced list width in the grid */
.shop-content .product.product-list .product-media,
.products .product.product-list .product-media {
  position: relative;
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.4rem;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--w-border);
}

.shop-content .product.product-list .product-media > a,
.products .product.product-list .product-media > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.shop-content .product.product-list .product-media img,
.products .product.product-list .product-media img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}

/* Promo tags / labels: keep them pinned inside the media, not bleeding left */
.product.product-list .product-media > *:not(a):not(script) {
  position: absolute;
  z-index: 2;
  max-width: calc(100% - 2rem);
}

.product.product-list .product-media .product-label,
.product.product-list .product-media .product-label-group,
.product.product-list .product-media [class*="label"],
.product.product-list .product-media [class*="tag"],
.product.product-list .product-media [class*="promo"] {
  left: 1rem;
  right: auto;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.35rem 0.7rem;
  border-radius: var(--w-radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick-view / action buttons: top-right of the media, revealed on hover */
.product.product-list .product-action-vertical {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product.product-list:hover .product-action-vertical {
  opacity: 1;
  transform: none;
}

/* Details column */
.shop-content .product.product-list .product-details,
.products .product.product-list .product-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.4rem 1.4rem;
  width: auto;
}

.product.product-list .xproduct-cat a {
  font-size: 1.35rem !important;
  font-weight: 700;
  color: var(--w-primary);
}

.product.product-list .product-name {
  margin: 0;
}

.product.product-list .product-name a {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--w-ink);
}

/* Debug line left in the template */
.product.product-list .product-details > pre {
  display: none;
}

/* The per-branch price/stock table — scroll it instead of blowing out the card */
.product.product-list .product-desc {
  margin: 0.4rem 0 0;
  font-size: 1.15rem;
  color: var(--w-muted);
  overflow-x: auto;
}

.product.product-list .product-desc table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 1.15rem;
}

.product.product-list .product-desc table th,
.product.product-list .product-desc table td {
  padding: 5px 10px;
  white-space: nowrap;
  text-align: right;
}

.product.product-list .product-desc table th:first-child,
.product.product-list .product-desc table td:first-child {
  text-align: left;
}

.product.product-list .product-desc table thead th,
.product.product-list .product-desc table tr:first-child td {
  background: #f4f5f7;
  color: var(--w-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Price block */
.product.product-list .product-details > span {
  margin-top: 0.6rem;
  font-size: 1.15rem;
  color: var(--w-muted);
}

.product.product-list .product-price {
  margin: 0.1rem 0 0.4rem;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--w-primary);
}

/* Price-breakdown popover: only on hover, never inline */
.product.product-list .tooltiptext_price {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 5;
  width: 24rem;
  max-width: 80vw;
  visibility: hidden;
  opacity: 0;
  background: #fff;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.product.product-list .new-price:hover .tooltiptext_price {
  visibility: visible;
  opacity: 1;
}

.product.product-list .new-price {
  position: relative;
}

/* Add-to-cart */
.product.product-list .product-action {
  margin-top: auto;
  padding-top: 0.9rem;
}

.product.product-list .product-action .btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  background: var(--w-primary);
  border: 0;
  border-radius: var(--w-radius-md);
  transition: background-color 0.18s ease;
}

.product.product-list .product-action .btn-cart:hover {
  background: var(--w-primary-dark);
  color: #fff;
}

/* Keep the horizontal list layout only where there's room */
@media (min-width: 992px) {
  .shop-content .product.product-list {
    flex-direction: row;
  }

  .shop-content .product.product-list .product-media {
    flex: 0 0 22rem;
    width: 22rem;
    max-width: 22rem;
    aspect-ratio: 1 / 1;
    border-bottom: 0;
    border-right: 1px solid var(--w-border);
  }

  .shop-content .product.product-list .product-action .btn-cart {
    width: auto;
  }
}

/* ---------- Footer ---------- */
.footer-newsletter.bg-primary {
  background-color: var(--w-primary) !important;
}

.footer-newsletter .icon-box.icon-box-side {
  background: transparent;
  border: 0;
  padding: 0;
}

.footer-top,
.footer-middle {
  border-color: rgba(255, 255, 255, .08);
}

/* ---------- Catalog sidebar: criteria (SOLR "_cri") toggle filters ---------- */
.cri-filter-list .cat-item {
  transition: var(--w-transition);
}

.cri-filter-list .cri-filter-toggle {
  display: flex;
  align-items: center;
}

.cri-filter-list .cri-filter-check {
  flex: 0 0 auto;
  width: 1.4rem;
  font-size: 1.1rem;
  color: transparent;
  transition: var(--w-transition);
}

.cri-filter-list .cri-filter-toggle.active .cri-filter-check {
  color: var(--w-primary);
}

.cri-filter-list .cat-item.chosen .cri-filter-toggle {
  color: var(--w-primary);
  font-weight: 600;
}

/* ---------- Category dropdown: collapsed on every page, home included ----------
   demo1.min.css is loaded only on the home page (header.php) and ships the
   rule ".header-bottom:not(.fixed) .dropdown-box{opacity:1;visibility:visible;
   transform:none}", which force-opens the CATEGORIAS menu on the homepage.
   Neutralize it so the menu stays closed and opens only on click (.show),
   matching the behaviour on every other page and the other header links. */
.header-bottom .category-dropdown:not(.show) .dropdown-box {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -1rem, 0);
}

/* ---------- Error/denied pages without the illustration ---------- */
.error-404.error-404-compact {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.error-404.error-404-compact .banner-content {
  margin-top: 0;
}

/* ==========================================================================
   Account vertical nav — modern card sidebar
   Was a column of bare links with a ragged per-item right border and huge
   gaps. Now a rounded surface with pill rows, hover/active states, a left
   accent bar, and a tidy nested submenu. Active row is set by the script at
   the bottom of layoutHome.php.
   ========================================================================== */
.tab-vertical .nav-tabs {
  align-self: flex-start;
  padding: 6px;
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-lg);
  /* tight shadow — the wide one bled out above the card and peeked from under
     the sticky vehicle-filter bar */
  box-shadow: 0 1px 3px rgba(20, 25, 35, 0.06), 0 1px 2px rgba(20, 25, 35, 0.04);
}

.tab-vertical .nav-item {
  margin: 0;
}

.tab-vertical .nav-link-vertical {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 1px 0;
  padding: 0.82rem 1rem 0.82rem 1.15rem;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--w-ink);
  text-align: left;
  text-transform: capitalize;
  border: 0; /* remove the ragged per-item right divider */
  border-radius: var(--w-radius-md);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.tab-vertical .nav-link-vertical::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--w-primary);
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.tab-vertical .nav-link-vertical:hover,
.tab-vertical .nav-link-vertical:focus {
  background: #f5f6f8;
  color: var(--w-primary);
  text-decoration: none;
}

.tab-vertical .nav-link-vertical:hover::before {
  height: 1.1rem;
}

.tab-vertical .nav-link-vertical.is-active {
  background: #fbeceb;
  background: color-mix(in srgb, var(--w-primary) 9%, #fff);
  color: var(--w-primary);
  font-weight: 600;
}

.tab-vertical .nav-link-vertical.is-active::before {
  height: calc(100% - 1.4rem);
}

/* "Desconectarme" (last row) — danger tint on hover */
.tab-vertical .nav-item:last-child .nav-link-vertical:hover {
  background: #fdeceb;
  color: var(--w-primary-dark);
}

/* ---- collapsible parent ("Actualizacion WEB" …) ---- */
.tab-vertical .nav-collapse-toggle {
  cursor: pointer;
}

.tab-vertical .nav-collapse-toggle .account-down {
  flex: none;
  font-size: 1rem;
  color: var(--w-muted);
  transition: transform 0.25s ease, color 0.2s ease;
}

.tab-vertical .nav-collapse-toggle:hover .account-down,
.tab-vertical .nav-collapse-toggle[aria-expanded="true"] .account-down {
  color: var(--w-primary);
}

.tab-vertical .nav-collapse-toggle[aria-expanded="true"] {
  color: var(--w-primary);
  background: #f5f6f8;
}

.tab-vertical .nav-collapse-toggle[aria-expanded="true"] .account-down {
  transform: rotate(180deg);
}

/* ---- nested submenu ---- */
.tab-vertical .nav-second {
  list-style: none;
  margin: 0.15rem 0 0.4rem 0.55rem !important;
  padding: 0.15rem 0;
  border-left: 2px solid var(--w-border);
}

.tab-vertical .nav-second > li {
  margin: 0;
}

.tab-vertical .nav-second > li > a {
  display: block;
  margin: 1px 0;
  padding: 0.55rem 0.8rem 0.55rem 0.9rem;
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--w-muted);
  text-transform: capitalize;
  border-radius: var(--w-radius-sm);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.tab-vertical .nav-second > li > a:hover,
.tab-vertical .nav-second > li > a:focus,
.tab-vertical .nav-second > li > a.is-active {
  color: var(--w-primary);
  background: #f5f6f8;
  text-decoration: none;
}

.tab-vertical .nav-second > li > a.is-active {
  font-weight: 600;
}

/* ---------- Bootstrap-style modals embedded in account / link pages ----------
   Pages under /link/index and /account render HTML fragments pulled from the
   catalog app that use Bootstrap 3 modal markup (.modal.fade > .modal-dialog >
   .modal-content). The wolmart front doesn't load bootstrap.css, so `.modal`
   had no `display:none` base rule and the modal rendered open on page load.
   Scope these rules to the account tab content so they can't touch the theme's
   own overlay (#modal.modal-background) or magnific-popup. */
.tab-content .modal {
  display: none;
  position: fixed;
  inset: 0;
  /* Above `.sticky-content.fixed` (z-index 1051) so a sticky filter bar can't
     paint over the modal after the page is scrolled. */
  z-index: 3000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.5);
  /* The fragment sits inside `.row`, whose `.row > *` gutter rule would add an
     asymmetric padding to this full-screen overlay and push the dialog
     off-centre. The overlay needs no padding of its own. */
  padding: 0 !important;
}

.tab-content .modal.in,
.tab-content .modal.show {
  display: flex;
  /* Top-align so the dialog keeps its natural height (no vertical stretch) and
     tall dialogs simply scroll within the overlay. */
  align-items: flex-start;
}

/* Some catalog fragments ship `.modal-open .modal { margin-top: 150px }` in an
   inline <style>; that shifts our fixed overlay down and clips it. Override it
   (higher specificity than `.modal-open .modal`). */
body.modal-open .tab-content .modal {
  margin: 0;
}

body.modal-open {
  overflow: hidden;
}

/* Stray Bootstrap backdrop nodes would be unstyled (no bootstrap.css) — the
   overlay above already dims the page, so keep them out of the way. */
.tab-content ~ .modal-backdrop,
.modal-backdrop {
  display: none;
}

.tab-content .modal .modal-dialog {
  position: relative;
  /* `margin: <gap> auto` centres the dialog horizontally in the flex overlay and
     keeps a fixed gap top/bottom; a dialog taller than the viewport just scrolls
     inside the overlay (`overflow-y: auto`) without being clipped. */
  margin: 30px auto;
  max-width: min(1040px, calc(100vw - 30px));
}

.tab-content .modal .modal-content {
  /* The theme's `style.min.css` styles bare `.modal-content` for its login
     overlay: `position:absolute; top:50%; transform:translateY(-50%);
     width:500px; max-width:90%`. All of that has to be undone here or the panel
     gets shoved off-screen and squeezed. Kept as a plain block so its height
     simply follows its content. */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.tab-content .modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #ececec;
}

.tab-content .modal .modal-header .modal-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}

.tab-content .modal .modal-header .close {
  border: 0;
  background: transparent;
  font-size: 2.4rem;
  line-height: 1;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tab-content .modal .modal-header .close:hover {
  color: #333;
}

.tab-content .modal .modal-body {
  padding: 20px 22px;
  /* The fragment hard-codes `style="height:70vh"` on the body, so a 2-row table
     still rendered a giant half-empty panel. Force it back to content height and
     just cap it: short table -> short modal, long table -> scrolls here with the
     header and footer still in view. */
  height: auto !important;
  max-height: 62vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-content .modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #ececec;
  background: #fafafa;
}

/* ---------- Data tables inside the embedded fragments ----------
   The catalog fragments render raw `<table class="table ...">` with no styling
   (bootstrap.css isn't loaded), so columns collapsed and bank names wrapped one
   word per line. Give them a clean, readable treatment. */
.tab-content .modal .modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #333;
  background: #fff;
}

.tab-content .modal .modal-body table th,
.tab-content .modal .modal-body table td {
  padding: 8px 12px;
  vertical-align: middle;
  white-space: nowrap; /* no more one-word-per-line wrapping; body scrolls if needed */
  text-align: left;
}

/* Header rows */
.tab-content .modal .modal-body table thead th,
.tab-content .modal .modal-body table tr > th {
  background: #f4f5f7;
  color: #555;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: normal;
  border-bottom: 1px solid #e3e5e9;
}

/* A full-width grouping header (e.g. "CHEQUES DE TERCEROS") */
.tab-content .modal .modal-body table th[colspan] {
  text-align: center;
  background: #ececf1;
  color: #333;
  letter-spacing: 0.06em;
}

/* Body rows: zebra + hairline separators */
.tab-content .modal .modal-body table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.tab-content .modal .modal-body table tbody tr + tr td {
  border-top: 1px solid #eee;
}

.tab-content .modal .modal-body table tbody tr:hover {
  background: #f2f7fb;
}

/* Let the wide free-text column (bank / description) wrap instead of forcing a
   very wide table; keep it within a sensible width. */
.tab-content .modal .modal-body table td:nth-child(2) {
  white-space: normal;
  min-width: 150px;
  max-width: 210px;
  line-height: 1.35;
}

/* Amount-looking columns (last two) read better right-aligned. */
.tab-content .modal .modal-body table tbody td:last-child,
.tab-content .modal .modal-body table tbody td:nth-last-child(2),
.tab-content .modal .modal-body table thead th:last-child,
.tab-content .modal .modal-body table thead th:nth-last-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Some fragments put the section label ("Cheques de Terceros") in its own
   single-cell <table> right before the data table, which rendered as a stray
   grey notch. Turn it into a proper caption band that sits flush on top of the
   data table. */
.tab-content .modal .modal-body table:has(+ table) {
  width: 100%;
  margin: 0;
}

.tab-content .modal .modal-body table:has(+ table) td {
  background: #eceef2;
  color: #333;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  white-space: normal;
  border: 1px solid #e0e2e8;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.tab-content .modal .modal-body table:has(+ table) + table {
  width: 100%;
  border: 1px solid #e0e2e8;
}

.tab-content .modal .modal-body table:has(+ table) + table thead th {
  background: #f7f8fa;
}

/* Rounded frame + subtle shadow for a standalone data table (no caption band). */
.tab-content .modal .modal-body > table:only-of-type {
  border: 1px solid #e6e8ec;
  border-radius: 6px;
  overflow: hidden;
}