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

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

/* ---------- 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: collapsible submenu ("Actualizacion WEB" etc.) ----------
   The submenu links inherited the raw <a> colours (red / visited-blue) and had no
   spacing, so they clashed with the rest of the account sidebar. Style them as a
   nested branch of the parent .nav-link-vertical list. */
.tab-vertical .nav-item .nav-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.tab-vertical .nav-collapse-toggle .account-down {
  flex: none;
  margin-left: 0.75rem;
  font-size: 1.1rem;
  color: #999;
  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, #336699);
}

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

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

.tab-vertical .nav-second {
  list-style: none;
  margin: 0.25rem 0 0.75rem !important;
  padding: 0.25rem 0;
  border-right: 1px solid #ddd;
  border-left: 2px solid #ececec;
}

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

.tab-vertical .nav-second > li > a {
  display: block;
  padding: 0.65rem 1rem 0.65rem 1.6rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.25;
  color: #666;
  text-transform: capitalize;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.tab-vertical .nav-second > li > a:hover,
.tab-vertical .nav-second > li > a:focus {
  color: var(--w-primary, #336699);
  background-color: #f7f7f7;
  padding-left: 2rem;
  text-decoration: none;
}

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

/* 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: calc(100vw - 30px);
}

.tab-content .modal .modal-content {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.3);
}

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

.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;
  overflow-x: auto; /* wide tables in the fragment scroll instead of clipping */
}