/* ==========================================================================
   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-md);
  transition: var(--w-transition);
  font-weight: 600;
}

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

/* checkout "Realizar Pedido" — same 8px radius as inputs/other submit buttons */
.checkout .place-order .btn,
.checkout-form .place-order .btn {
  border-radius: var(--w-radius-md) !important;
}

/* cart action row buttons — same 8px radius convention */
.cart-action .btn {
  border-radius: var(--w-radius-md) !important;
}

/* Bare submit / action buttons that don't carry the .btn class */
button[type="submit"]:not(.btn):not(.btn-search):not(.close):not(.dropdown-toggle),
input[type="submit"]:not(.btn),
input[type="button"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 4.4rem;
  padding: 0 2rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--w-primary);
  border: 0;
  border-radius: var(--w-radius-md);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

button[type="submit"]:not(.btn):not(.btn-search):not(.close):not(.dropdown-toggle):hover,
input[type="submit"]:not(.btn):hover,
input[type="button"]:not(.btn):hover {
  background: var(--w-primary-dark);
  transform: translateY(-1px);
}

/* ==========================================================================
   Form controls — unified modern look (rounded, light border, focus ring)
   ========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
  min-height: 4.4rem;
  height: auto;
  padding: 0.6rem 1.4rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--w-ink);
  background-color: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

textarea,
textarea.form-control {
  min-height: 10rem;
  padding: 1rem 1.4rem;
  line-height: 1.5;
}

.form-control:focus,
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[type="date"]:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--w-primary);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9aa0a6;
}

/* selects get a custom chevron (appearance:none hides the native one) */
select,
select.form-control {
  padding-right: 3.4rem;
  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;
}

/* checkboxes / radios keep native rendering */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  min-height: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* ---------- Header search bar ---------- */
.header .header-search,
.header-search {
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-md) !important;
  overflow: hidden;
  background: #fff;
}

.header-search .form-control,
.header-search .select-box,
.header-search .select-box .form-control,
.header-search .btn-search,
.header-search select {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 4.8rem;
}

/* search text + placeholder: peso normal, no negrita */
.header-search .form-control,
.header-search input[type="text"] {
  font-weight: 400 !important;
}

.header-search .form-control::placeholder,
.header-search input[type="text"]::placeholder {
  font-weight: 400 !important;
  color: #9aa0a6;
}

.header-search .select-box {
  border-right: 0 !important;
}

/* el theme dibuja un divisor gris de 1px con .select-box::after */
.header-search .select-box::after {
  display: none !important;
}

/* the search "Todo" dropdown keeps the theme's own arrow, not our chevron */
.header-search .select-box select {
  background-image: none;
  padding-right: 3rem;
}

.header-search .btn-search {
  background: transparent;
  color: var(--w-primary);
}

.header-search:focus-within {
  border-color: var(--w-primary);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.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) ----------
   The stock theme (and its JS) draws the frame on BOTH `.product-wrap` and the
   inner `.product`, which shows as a double border. Keep `.product-wrap` as a
   bare spacer and let the single card live on `.product`. */
.product-wrap {
  padding: 0;
  margin: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

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

.product-wrap .product:hover {
  box-shadow: var(--w-shadow-hover);
  border-color: var(--w-border);
  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;
}

/* ==========================================================================
   Catalog grid — equal-height cards
   The grid row is flex, so every `.product-wrap` in a row already stretches
   to the tallest sibling; these rules make the inner `.product` fill that
   height, give every card the same image band, and pin the price block to
   the bottom so prices line up across the row. List view (.product-list) is
   left untouched.
   ========================================================================== */
.shop-content .product-wrapper {
  align-items: stretch;
}

.shop-content .product-wrapper > .product-wrap {
  display: flex;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  /* overflow visible so the price-breakdown popover can escape the card;
     the image band keeps its own overflow:hidden + rounded top below.
     align-self:stretch (flex default) already matches the tallest sibling;
     no height:100% so the 4px margin doesn't push past the card */
  overflow: visible;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-media {
  flex: 0 0 auto;
  height: 20rem;
  display: block;
  position: relative;
  padding: 0.9rem;
  margin-bottom: 0;
  overflow: hidden;
  text-align: left;
  border-radius: calc(var(--w-radius-lg) - 1px) calc(var(--w-radius-lg) - 1px) 0 0;
}

/* image link fills the band; the picture is centered inside it */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-media > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  z-index: 1;
}

/* scale every photo to the same size regardless of the source resolution */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-media > a img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* tag badges (getTagsArticle) are moved out of the image by the template and
   rendered here, just above the "Precio de compra" line */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.9rem;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-tags .badge {
  font-size: 1.05rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  line-height: 1.2;
}

/* safety net: any stray badge left inside the image band stays out of the way */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-media > .badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  font-size: 1rem;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* everything from the price wrapper down sits flush to the card bottom … */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-pa-wrapper {
  margin-top: auto;
  width: 100%;
}

/* … and the price itself stays centered */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-pa-wrapper,
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-price,
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-price.new-price {
  text-align: center;
  justify-content: center;
}

/* the theme sets `.product .product-price { overflow:hidden }`, which clips the
   breakdown popover (a child of .product-price) — let it out */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-price {
  overflow: visible !important;
}

/* --- Price-breakdown popover on hover ---
   The stock theme positions this as a grey `position:absolute` slab at
   `bottom:40%;left:70%`, which the card used to clip. Re-anchor it as a
   clean white card that floats above the price. */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .product-pa-wrapper {
  position: relative;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) {
  z-index: 1;
}

/* lift the hovered card (and its popover) above every sibling card */
.shop-content .product-wrapper > .product-wrap:hover {
  position: relative;
  z-index: 20;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  transform: translateX(-50%) !important;
  width: 28rem;
  max-width: calc(100vw - 3rem);
  padding: 0 !important;
  background: var(--w-surface) !important;
  color: var(--w-ink) !important;
  font: 400 1.2rem/1.4 var(--w-font, "Poppins", sans-serif);
  text-align: left !important;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  box-shadow: var(--w-shadow-hover);
  overflow: hidden;
  z-index: 90;
}

/* little arrow pointing down at the price */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--w-surface);
  filter: drop-shadow(0 1px 0 var(--w-border));
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table {
  margin: 0;
  font-size: 1.2rem;
  width: 100%;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table td {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--w-border);
  color: var(--w-ink);
  white-space: normal;
  vertical-align: middle;
}

/* keep the amount on one line */
.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table td:last-child {
  white-space: nowrap;
  width: 1%;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table tr:first-child td {
  border-top: 0;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table td:last-child {
  text-align: right;
  font-weight: 600;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .tooltiptext_price .table tr:last-child td {
  background: #f7f8fa;
  font-weight: 700;
}

.shop-content .product-wrapper > .product-wrap > .product:not(.product-list) .new-price:hover .tooltiptext_price {
  visibility: visible !important;
  opacity: 1 !important;
}

.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 filter widgets (Marca, Categorías, Tags, criterios…)
   ========================================================================== */
.shop-sidebar .widget {
  background: var(--w-surface);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-shadow);
  padding: 1.3rem 1.5rem 1.5rem;
  margin-bottom: 1.4rem;
}

/* --- title + collapse toggle --- */
.shop-sidebar .widget .widget-title {
  margin: 0 0 0.9rem;
  padding: 0 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  text-transform: none;
  border-bottom: 1px solid var(--w-border);
}

.shop-sidebar .widget .widget-title span,
.shop-sidebar .widget .widget-title label {
  text-transform: none;
}

/* drop the theme's grey underline under the title label */
.shop-sidebar .widget-collapsible .widget-title label::after {
  display: none;
}

.shop-sidebar .widget-collapsible .toggle-btn {
  right: 0;
  top: 0.15rem;
}

.shop-sidebar .widget-collapsible .toggle-btn::before,
.shop-sidebar .widget-collapsible .toggle-btn::after {
  border-top-color: var(--w-muted);
}

/* --- body --- */
.shop-sidebar .widget-collapsible .widget-body {
  padding: 0.4rem 0 0.1rem;
}

/* --- each filter row --- */
.shop-sidebar .filter-items li {
  margin: 0;
}

.shop-sidebar .filter-items li > a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.6rem;
  margin: 1px 0;
  padding: 0.6rem 0.7rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--w-ink);
  text-align: left;
  border-radius: var(--w-radius-sm);
  transition: color 0.16s ease, background-color 0.16s ease;
}

.shop-sidebar .filter-items li > a:hover,
.shop-sidebar .filter-items li > a:focus {
  background: #f5f6f8;
  color: var(--w-primary);
  text-decoration: none;
}

/* the "(218)" count — wrapped into .fcount by the script in footer.php.
   margin-left:auto keeps it pinned right whether the row has 1 label node
   (Marca/Categorías) or a label + check icon (criteria toggles). */
.shop-sidebar .filter-items li > a .fcount {
  flex: none;
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--w-muted);
  background: #f1f2f4;
  border-radius: 100px;
  padding: 0.1rem 0.6rem;
}

/* fallback for when the wrap script hasn't run: the raw "(61)" text still
   reads left-to-right next to its label instead of drifting right */
.shop-sidebar .cri-filter-list .cri-filter-toggle {
  justify-content: flex-start !important;
  text-align: left;
}

.shop-sidebar .filter-items li > a:hover .fcount {
  color: var(--w-primary);
  background: rgba(192, 57, 43, 0.12);
}

/* chosen / active filter */
.shop-sidebar .filter-items li.chosen > a,
.shop-sidebar .cri-filter-list li.chosen .cri-filter-toggle {
  background: rgba(192, 57, 43, 0.08);
  color: var(--w-primary);
  font-weight: 600;
}

.shop-sidebar .filter-items li.chosen > a .fcount {
  color: var(--w-primary);
  background: rgba(192, 57, 43, 0.14);
}

/* --- applied filters: removable chips --- */
.shop-sidebar .widget_layered_nav_filters .widget-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shop-sidebar .widget_layered_nav_filters .chosen a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--w-primary);
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.28);
  border-radius: 100px;
  transition: background-color 0.16s ease;
}

.shop-sidebar .widget_layered_nav_filters .chosen a:hover {
  background: rgba(192, 57, 43, 0.18);
  text-decoration: none;
}

.shop-sidebar .widget_layered_nav_filters .chosen a b {
  font-weight: 700;
}

/* ---------- 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  (.cart-selector — 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.
   ========================================================================== */
.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);
}

.cart-selector.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. */
.cart-selector .login-content {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

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

.cart-selector .form-group {
  margin-bottom: 0;
}

.cart-selector .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);
}

.cart-selector .form-group > br {
  display: none;
}

.cart-selector 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;
}

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

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

.cart-selector .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;
}

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

.cart-selector .btn.btn-dark i {
  font-size: 1.1em;
}

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

  .cart-selector .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.
   ========================================================================== */
/* List view wrapper: real separation between the two columns of cards
   (`.cols-xl-2` is unique to the list layout; the grid uses `.cols-lg-5`). */
.shop-content .product-wrapper.cols-xl-2 {
  justify-content: space-between;
}

@media (min-width: 1200px) {
  .shop-content .product-wrapper.cols-xl-2 > .product.product-list {
    max-width: calc(50% - 1.4rem);
    flex-basis: calc(50% - 1.4rem);
  }
}

.shop-content .product.product-list,
.products .product.product-list,
.product-wrap > .product.product-list {
  display: flex;
  flex-direction: column;
  /* Tags now live in the details column (template), so nothing bleeds from the
     media anymore — keep the card overflow visible so the price-breakdown
     popover can float above the price. The media still clips its own zoom. */
  overflow: visible;
  /* Single card frame here; `.product-wrap` (if the theme JS wraps this) is
     forced flat above so there's no second border/shadow around it. */
  margin: 0 0 2.4rem !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-lg) !important;
  box-shadow: 0 1px 3px rgba(20, 25, 35, 0.08), 0 8px 24px rgba(20, 25, 35, 0.06) !important;
  background-clip: padding-box;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.shop-content .product.product-list:hover,
.products .product.product-list:hover {
  border-color: transparent;
  box-shadow: var(--w-shadow-hover);
  transform: translateY(-3px);
  position: relative;
  z-index: 20; /* lift the card + its price popover above stacked siblings */
}

/* Media: fixed ratio box, image contained, no forced list width in the grid.
   The theme gives `.product-media` its own `1px solid #f5f5f5` + `0.5rem`
   radius — that's the phantom inner frame, so drop it entirely (no divider
   line under the image either). */
.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;
  overflow: hidden; /* clip the image zoom + any bleeding label */
  border: 0 !important; /* kill the theme's 1px #f5f5f5 frame + the grey divider */
  border-radius: calc(var(--w-radius-lg) - 1px) calc(var(--w-radius-lg) - 1px) 0 0 !important;
  box-shadow: none !important;
}

/* "Escala de Precios" promo button (getPromotionsPrecioResumido) — the theme
   flings it off the image with margin-top:-120% / margin-left:-51%, so it gets
   clipped. Pin it as a chip in the image's top-left instead. */
.shop-content .product .product-media button.promocionPrecio {
  position: absolute !important;
  top: 0.8rem !important;
  left: 0.8rem !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--w-primary);
  border: 0 !important;
  border-radius: 100px !important;
  cursor: pointer;
  z-index: 4;
}

.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: pin every one inside the media, top-left, stacked.
   `!important` because the theme positions some of them absolutely with their
   own offsets and they were bleeding past the card's left edge. */
.product.product-list .product-media .product-label-group,
.product.product-list .product-media .product-labels,
.product.product-list .product-media [class*="label-group"] {
  position: absolute !important;
  top: 0.9rem !important;
  left: 0.9rem !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: calc(100% - 1.8rem);
  z-index: 3;
}

.product.product-list .product-media .product-label,
.product.product-list .product-media [class*="label"],
.product.product-list .product-media [class*="tag"] {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--w-radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide wolmart's hover action-icon clutter in the list card — the image is
   clickable and there's an explicit "Agregar al carrito" button below. */
.product.product-list .product-action-vertical,
.product.product-list .product-action-horizontal,
.product.product-list .product-media .btn-product-icon,
.product.product-list .product-details > .btn-product-icon,
.product.product-list .product-hide-details,
.product.product-list .product-hidden-details {
  display: none !important;
}

/* 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;
}

/* Tags (getTagsArticle) — moved from the image into the details column */
.product.product-list .product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.2rem;
}

.product.product-list .product-tags .badge {
  font-size: 1.05rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  line-height: 1.2;
}

/* 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 {
  position: relative; /* anchor for the breakdown popover */
  margin: 0.1rem 0 0.4rem;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--w-primary);
  overflow: visible !important; /* theme sets overflow:hidden here — let the popover out */
}

.product.product-list .new-price {
  display: inline-block;
  position: static;
}

/* --- Price-breakdown popover on hover (list view) --- */
.product.product-list .tooltiptext_price {
  display: block;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  transform: none !important;
  width: 30rem;
  max-width: calc(100vw - 3rem);
  padding: 0 !important;
  background: var(--w-surface) !important;
  color: var(--w-ink) !important;
  font: 400 1.2rem/1.4 "Poppins", sans-serif;
  text-align: left !important;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-md);
  box-shadow: var(--w-shadow-hover);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 90;
}

.product.product-list .tooltiptext_price::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 3rem;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--w-surface);
  filter: drop-shadow(0 1px 0 var(--w-border));
}

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

.product.product-list .tooltiptext_price .table {
  margin: 0;
  width: 100%;
  font-size: 1.2rem;
}

.product.product-list .tooltiptext_price .table td {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--w-border);
  color: var(--w-ink);
  white-space: normal;
  text-align: left;
  vertical-align: middle;
}

.product.product-list .tooltiptext_price .table tr:first-child td {
  border-top: 0;
}

.product.product-list .tooltiptext_price .table td:last-child {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
}

.product.product-list .tooltiptext_price .table tr:last-child td {
  background: #f7f8fa;
  font-weight: 700;
}

/* Add-to-cart */
.product.product-list .product-action {
  display: block !important;
  margin-top: auto;
  padding-top: 1rem;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.product.product-list .product-action form {
  margin: 0;
}

.product.product-list .product-action .btn-cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  padding: 0.95rem 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;
}

/* newsletter form: mismos bordes redondeados (8px) que el resto del sitio */
.footer-newsletter .form-control,
.footer-newsletter input[type="email"] {
  border-radius: var(--w-radius-md) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.footer-newsletter .btn,
.footer-newsletter .btn.btn-rounded {
  border-radius: var(--w-radius-md) !important;
}

.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: 0;
  overflow: hidden;
  font-size: 1.1rem;
  color: transparent;
  transition: var(--w-transition);
}

.cri-filter-list .cri-filter-toggle.active .cri-filter-check {
  width: 1.6rem;
}

.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;
}