/* =========================================================================
   Rediseño móvil — Venados Store
   Iteración 1 · 2026-07-23
   Archivo aditivo (no toca el core de Journal). Se carga desde
   common/header.twig con un <link> justo antes de </head>.
   Todo el alcance está limitado a móvil (<= 991px).
   ========================================================================= */

@media (max-width: 991px) {

  /* ============================ HEADER ================================== */
  /* Una sola fila minimalista: logo a la izquierda, iconos a la derecha,
     fondo blanco, sin el bloque rojo. */
  .mobile-header.mobile-3 {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
    padding: 6px 12px;
  }

  /* La barra superior (top menu / idioma) sobra en el look minimalista */
  .mobile-header.mobile-3 .mobile-top-bar { display: none !important; }

  /* Ocultar los "custom menu" nativos que flanquean el logo (sólo salen en
     móvil real): custom-menu-1 = cuenta (duplica el monito del set derecho),
     custom-menu-2 = wishlist. Dejamos el logo limpio. */
  .mobile-header.mobile-3 .mobile-custom-menu-1,
  .mobile-header.mobile-3 .mobile-custom-menu-2 { display: none !important; }

  /* --- Logo izquierda, pequeño --- */
  .mobile-header.mobile-3 .mobile-logo-wrapper {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-height: 0;
    justify-content: flex-start;
    background: transparent !important;
    padding: 0;
  }
  .mobile-header.mobile-3 #logo { margin: 0; }
  .mobile-header.mobile-3 #logo img.header-logo,
  .mobile-header.mobile-3 #logo img.header-logo-alternate {
    max-height: 30px;
    width: auto;
  }

  /* --- Grupo de iconos a la derecha (hamburguesa + lupa + carrito) --- */
  .mobile-header.mobile-3 .mobile-bar-group.mobile-search-group {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    background: transparent !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    min-height: 0;
  }
  /* --- Set de iconos limpios y consistentes (SVG stroke) ---
     Cada control es una caja 40x40 con un icono de 22px centrado. */
  .mobile-header.mobile-3 .mobile-bar-group .menu-trigger,
  .mobile-header.mobile-3 .mobile-bar-group .search-trigger,
  .mobile-header.mobile-3 .mobile-bar-group .mobile-account-link,
  .mobile-header.mobile-3 .mobile-bar-group .cart-heading {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    background: transparent !important;
    color: #111 !important;
    position: relative;
  }

  /* Hamburguesa: ocultar las barras nativas y usar un icono SVG nítido */
  .mobile-header.mobile-3 .mobile-bar-group .menu-trigger .menu-icon { display: none !important; }
  .mobile-header.mobile-3 .mobile-bar-group .menu-trigger::before {
    content: "";
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }

  /* Cuenta (monito): icono de persona */
  .mobile-header.mobile-3 .mobile-account-wrapper { display: flex; align-items: center; }
  .mobile-header.mobile-3 .mobile-account-link .account-icon {
    width: 22px;
    height: 22px;
    display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }

  /* Carrito: ocultar sólo el glifo FontAwesome (no el badge) y usar SVG */
  .mobile-header.mobile-3 .mobile-bar-group .cart-heading .fa-shopping-cart::before { content: "" !important; }
  .mobile-header.mobile-3 .mobile-bar-group .cart-heading::before {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2.2l2 12h11l2-8H6'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }
  /* Ocultar el texto del carrito, dejar sólo el icono + badge de conteo */
  .mobile-header.mobile-3 .mobile-bar-group .cart-title,
  .mobile-header.mobile-3 .mobile-bar-group .cart-text { display: none !important; }
  /* El badge de conteo, arriba-derecha del carrito */
  .mobile-header.mobile-3 .mobile-bar-group .cart-heading #cart-items {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 2;
    visibility: visible;
  }

  /* --- Buscador como lupa (ya sin full-search en el twig) --- */
  .mobile-header.mobile-3 .mobile-search-wrapper {
    width: auto !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 0;
  }
  /* Journal oculta el botón-lupa por defecto: forzarlo visible */
  .mobile-header.mobile-3 .mobile-search-wrapper .search-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    background: transparent !important;
  }
  /* Ocultar el glifo interno (se dibuja como bloque) y poner una lupa SVG */
  .mobile-header.mobile-3 .mobile-search-wrapper .search-trigger .menu-icon { display: none !important; }
  .mobile-header.mobile-3 .mobile-search-wrapper .search-trigger::before {
    content: "";
    width: 21px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
  }
  /* Tap-targets consistentes para hamburguesa y carrito */
  .mobile-header.mobile-3 .menu-trigger,
  .mobile-header.mobile-3 .cart-heading {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }
  /* El panel de búsqueda abre como dropdown flotante al ancho del header.
     Journal ancla el panel a #search (position:relative) → lo pasamos a
     static y anclamos al header para que ocupe todo el ancho. */
  .mobile-header.mobile-3 { position: relative; }
  .mobile-header.mobile-3 .mobile-search-wrapper #search { position: static; }
  .mobile-header.mobile-3 .mobile-search-wrapper > #search > .dropdown-menu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 100%;
    width: auto;
    min-width: 0;
    margin-top: 6px;
    padding: 8px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  }
  /* Barra interna: pill gris horizontal, sin rojo */
  .mobile-header.mobile-3 .header-search {
    display: flex;
    align-items: stretch;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
  }
  .mobile-header.mobile-3 .header-search .search-categories {
    display: flex;
    align-items: center;
    background: transparent !important;
  }
  /* Quitar la pestañita/caret roja del selector de categorías */
  .mobile-header.mobile-3 .header-search .search-categories::before,
  .mobile-header.mobile-3 .header-search .search-categories::after {
    border-bottom-color: #fff !important;
    background: transparent !important;
    display: none !important;
  }
  .mobile-header.mobile-3 .header-search .search-categories-button {
    background: transparent !important;
    color: #111 !important;
    font-size: 13px;
    padding: 0 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border-right: 1px solid #e2e2e2;
  }
  .mobile-header.mobile-3 .header-search .twitter-typeahead { flex: 1; display: flex !important; }
  .mobile-header.mobile-3 .header-search .search-input,
  .mobile-header.mobile-3 .header-search input[name="search"] {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    padding: 12px !important;
    color: #111 !important;
    box-shadow: none !important;
    min-width: 0;
  }
  /* Botón buscar oscuro */
  .mobile-header.mobile-3 .header-search button,
  .mobile-header.mobile-3 .header-search .search-button,
  .mobile-header.mobile-3 .header-search [type="submit"] {
    background: #111 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 0 16px !important;
  }

  /* ========================= BARRA DE FILTROS ========================== */
  /* La toolbar de categoría (orden / vista / límite) como barra limpia y
     sticky bajo el header. */
  .products-filter {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 8px 12px;
    margin: 0 -12px 14px;
  }
  /* Ocultar "Comparar productos" y el toggle grid/lista (ruido en móvil) */
  .products-filter .compare-btn,
  .products-filter .grid-list .view-btn { display: none !important; }
  .products-filter .grid-list { margin: 0; }
  /* Select de orden como pill limpio */
  .products-filter .select-group { margin-left: auto; display: flex; gap: 8px; }
  .products-filter .input-group.sort-by,
  .products-filter .input-group { border: 0; }
  .products-filter .input-group-addon {
    background: transparent; border: 0; color: #767676;
    font-size: 12px; padding-right: 4px;
  }
  .products-filter select.form-control {
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    color: #111;
    padding: 6px 30px 6px 14px;
    height: auto;
  }

  /* ========================= GRID DE PRODUCTOS ========================= */
  /* 2 columnas, imagen grande, sin marcos, tipografía limpia. */
  .main-products.product-grid.auto-grid,
  .main-products.auto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }

  .main-products .product-layout .product-thumb {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0;
  }

  /* Imagen grande, cuadrada, fondo gris muy suave */
  .main-products .product-thumb .image-group,
  .main-products .product-thumb .image {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px;
    overflow: hidden;
  }
  .main-products .product-thumb .product-img {
    display: block;
    background: #f5f5f5;
    border-radius: 6px;
  }
  .main-products .product-thumb .product-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
  }

  /* Quitar ruido: vista rápida, comparar/wishlist, rating vacío */
  .main-products .product-thumb .quickview-button,
  .main-products .product-thumb .buttons-wrapper,
  .main-products .product-thumb .rating.no-rating,
  .main-products .product-thumb .stats { display: none !important; }

  /* Caption alineado a la izquierda, aire */
  .main-products .product-thumb .caption {
    text-align: left !important;
    padding: 8px 2px 0 !important;
  }
  .main-products .product-thumb .caption .name {
    margin: 0 0 2px !important;
  }
  .main-products .product-thumb .caption .name a {
    font-size: 14px;
    font-weight: 500;
    color: #111 !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Precio limpio y prominente */
  .main-products .product-thumb .price {
    padding: 0 !important;
    border: 0 !important;
    margin-top: 2px !important;
  }
  .main-products .product-thumb .price .price-normal,
  .main-products .product-thumb .price .price-new {
    font-size: 15px;
    font-weight: 700;
    color: #111 !important;
  }
  .main-products .product-thumb .price .price-old {
    font-size: 13px;
    color: #767676;
    font-weight: 400;
  }
  /* Etiqueta "Desde" discreta */
  .main-products .product-thumb .product-labels-price .product-label {
    background: transparent !important;
    color: #767676 !important;
    padding: 0 4px 0 0 !important;
    font-size: 12px;
    font-weight: 400;
  }

  /* Badge tipo "Más Vendido": chip minimalista arriba-izquierda */
  .main-products .product-thumb .product-labels-outside .product-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
  }

  /* ===================== TABS DE PRODUCTOS COMO CHIPS =====================
     En móvil los tabs (LO+NUEVO / MAS VENDIDOS / TEMP…) se cortaban.
     Los convertimos en chips en una fila con scroll horizontal suave. */
  .module-products .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 8px;
    padding: 4px 12px;
    margin: 0 -12px 4px;              /* full-bleed hasta los bordes */
    border: 0 !important;
    scrollbar-width: none;            /* Firefox: sin barra */
  }
  .module-products .nav-tabs::-webkit-scrollbar { display: none; } /* WebKit: sin barra */
  /* Ocultar la barra de fondo de los tabs (estilo Journal) en móvil */
  .module-products .full-tabs-bg { display: none !important; }

  .module-products .nav-tabs > li {
    flex: 0 0 auto;
    margin: 0 !important;
    border: 0 !important;
    float: none;
  }
  .module-products .nav-tabs > li > a {
    display: block;
    white-space: nowrap;
    padding: 8px 16px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 !important;
  }
  /* Chip activo: relleno oscuro */
  .module-products .nav-tabs > li.active > a,
  .module-products .nav-tabs > li.active > a:focus,
  .module-products .nav-tabs > li > a:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
  }
}

/* ===========================================================================
   AJUSTES DE 2026-07-29 (petición del usuario, revisado en teléfono real)

   1) EL TELÉFONO RECIBE product-list, NO product-grid.
      Journal decide la vista en el SERVIDOR con el user-agent
      (system/library/journal3/browser.php isMobile()), así que en un teléfono
      de verdad el contenedor llega como "product-list auto-grid" y se pinta en
      lista: tarjeta en fila, foto de 98px a la izquierda. Todo el mosaico móvil
      estaba escrito sólo para .product-grid, por eso en el preview de escritorio
      angostado se veía bien y en el teléfono no.
      Comprobado pidiendo la página con UA de iPhone: search Y category llegan
      las dos como product-list.

   2) En la página de BUSCAR se oculta el formulario repetido (ya está el buscador
      del header) y el encabezado "Productos que satisfacen...".

   3) Fuera la pastilla flotante "Filtrar Productos".
   =========================================================================== */
@media (max-width: 991px) {

  /* --- 1) product-list se comporta como mosaico de 2 columnas --- */
  .main-products.product-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }

  .main-products.product-list .product-layout,
  .main-products.product-list .product-thumb {
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  /* La vista lista separa cada item del siguiente con borde + 24px de padding y
     margen. Al pasar a rejilla eso empujaba hacia abajo la tarjeta de la derecha
     y dibujaba rayas horizontales entre filas. */
  .main-products.product-list .product-layout {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-products.product-list .product-layout::before,
  .main-products.product-list .product-layout::after {
    display: none !important;
  }

  /* que todas las tarjetas arranquen arriba de su celda */
  .main-products.product-list {
    align-items: start !important;
  }

  /* la tarjeta vuelve a apilarse: foto arriba, texto abajo */
  .main-products.product-list .product-thumb {
    flex-direction: column !important;
  }

  /* la foto ocupa todo el ancho de la columna (en lista iba fija a 98px) */
  .main-products.product-list .product-thumb .image-group,
  .main-products.product-list .product-thumb .image-group .image {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .main-products.product-list .product-thumb .caption {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    padding: 8px 2px 0 !important;
    text-align: left !important;
  }

  /* en lista Journal muestra la descripción; en mosaico estorba */
  .main-products.product-list .product-thumb .description,
  .main-products.product-list .product-thumb .buttons-wrapper,
  .main-products.product-list .product-thumb .button-group {
    display: none !important;
  }

  /* --- caja de la foto con alto reservado (2026-07-29) ---
     product-cards.css reserva el hueco con `aspect-ratio: 4/5`, pero lo escribe
     sólo para `.product-grid` — y al teléfono le llega `product-list`. Sin hueco
     reservado, las fotos son lazyload y al aterrizar empujan las tarjetas hacia
     abajo: 0.197 de CLS medido en la categoría con 4G lenta y CPU x4.
     Mismo tratamiento que en rejilla para que se vean idénticas. */
  .main-products.product-list .product-thumb .product-img > div {
    position: relative;
    aspect-ratio: 4 / 5;
  }
  .main-products.product-list .product-thumb .product-img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 7% 9%;
  }

  /* --- 2) página de BUSCAR ---
     (las reglas se movieron fuera de este @media el 2026-07-29: ahora aplican
     también en escritorio, ver el bloque "BÚSQUEDA AVANZADA" más abajo) */

  /* --- 3) fuera la pastilla flotante de filtros --- */
  .mobile-filter-trigger {
    display: none !important;
  }
}

/* ===========================================================================
   BÚSQUEDA AVANZADA — desplegable de la página de Buscar
   =========================================================================== */
/* Encabezados que no aportan nada: el h1 ("Buscar - Jersey") ya dice qué se
   buscó, y "Productos que satisfacen los criterios de su búsqueda" sólo empuja
   los resultados fuera de la primera pantalla. */
#product-search .search-criteria-title,
#product-search .search-products-title {
  display: none !important;
}

/* El formulario (caja de texto, categorías, las dos casillas y el botón grande)
   se colapsa detrás de "Búsqueda avanzada". Así no se pierde el filtro por
   categoría ni el "buscar en las descripciones", pero los resultados suben a la
   primera vista. Aplica en TODAS las anchuras desde 2026-07-29.

   El colapso lo hace <details>/<summary> en search.twig, NO JavaScript: antes lo
   armaba searchAdvanced() moviendo nodos después de pintar y eso costaba un CLS
   de 0.151 medido en producción (0 al bloquear ese JS). El navegador colapsa el
   <details> antes del primer pixel, así que no hay salto — y funciona sin JS. */
#product-search .venados-adv-body {
  padding-top: 14px;
}

.venados-adv {
  margin: 4px 0 18px;
  border-bottom: 1px solid #ececec;
  padding-bottom: 14px;
}

/* <summary>: fuera el triangulito nativo, que además difiere en cada navegador */
.venados-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: #6a6a6a;
  cursor: pointer;
  list-style: none;          /* Firefox */
  width: fit-content;
}
.venados-adv-toggle::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.venados-adv-toggle::marker { content: ''; }
.venados-adv-toggle:hover,
.venados-adv[open] .venados-adv-toggle {
  color: #111;
}

/* icono de controles (mismo SVG por mask que la papelera del carrito) */
.venados-adv-toggle .vadv-icon {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--venados-controles) center / contain no-repeat;
  mask: var(--venados-controles) center / contain no-repeat;
}

.venados-adv-toggle .vadv-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.venados-adv[open] .vadv-arrow {
  transform: rotate(-135deg) translateY(-2px);
}

@media (max-width: 991px) {
  /* el formulario, ya desplegado, con aire decente
     (en escritorio manda el layout propio de Journal: input + select en fila) */
  #product-search .venados-adv-body .search-form {
    display: grid;
    gap: 10px;
  }
  #product-search .venados-adv-body .buttons {
    margin-top: 12px;
  }
}

@media (min-width: 992px) {
  .venados-adv {
    margin: 0 0 24px;
    padding-bottom: 16px;
  }
  /* el botón grande "Buscar" pegado al formulario, no flotando abajo */
  #product-search .venados-adv-body .buttons {
    margin-top: 4px;
  }
}

/* ===========================================================================
   SÓLO MOSAICO — fuera el conmutador rejilla/lista (2026-07-29)
   La tienda es de ropa: la ficha en fila con foto pequeña no aporta nada.
   El forzado de la clase y de la cookie `view` lo hace forceGridView() en
   venados-redesign.js — aquí sólo desaparecen los dos botones.
   =========================================================================== */
.products-filter .grid-list .view-btn,
.products-filter .grid-list #btn-grid-view,
.products-filter .grid-list #btn-list-view {
  display: none !important;
}

/* ===========================================================================
   CATEGORÍA EN MÓVIL: UNA SOLA COLUMNA (2026-07-30)

   Petición: en teléfono, la página de categoría mostraba el mosaico de 2
   columnas; el jersey se veía demasiado chico para apreciarlo y las pastillas
   "Nuevo" / "🔥 Más Vendido" / "-25%" (que Journal pinta absolutas ENCIMA de la
   foto) tapaban buena parte del producto.

   Qué hace este bloque, sólo en `#product-category` y sólo ≤991px:
     1. La rejilla pasa a 1 columna — el escritorio y el resto de listados
        (buscar, marcas, ofertas) siguen en 2 columnas.
     2. La caja de la foto pasa de 4/5 a 1/1 con menos padding: la foto crece
        ~2.3× respecto al mosaico y sin tanto aire muerto arriba y abajo.
     3. Nombre y precio suben de tamaño, que a todo el ancho se veían pequeños.

   Las etiquetas se quedan donde estaban, sobre la foto: se probó sacarlas a una
   fila debajo y quedó feo (chips sueltos entre foto y nombre). Con la foto a
   todo el ancho ya no estorban, que era el objetivo.

   Cubre `.product-list` y `.product-grid` porque Journal decide la vista en el
   servidor por user-agent y por la cookie `view` (ver el bloque de 2026-07-29).
   =========================================================================== */
@media (max-width: 991px) {

  /* --- 1) una sola columna --- */
  #product-category .main-products,
  #product-category .main-products.product-list,
  #product-category .main-products.product-grid.auto-grid,
  #product-category .main-products.auto-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px 0 !important;
  }

  /* --- 2) foto cuadrada y más grande --- */
  #product-category .main-products .product-thumb .product-img > div {
    position: relative;
    aspect-ratio: 1 / 1 !important;
  }
  #product-category .main-products .product-thumb .product-img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 3% 5% !important;
  }

  /* --- 3) nombre y precio proporcionados al ancho completo --- */
  #product-category .main-products .product-thumb .caption {
    padding: 6px 2px 0 !important;
  }
  #product-category .main-products .product-thumb .caption .name a {
    font-size: 16px;
    line-height: 1.35;
  }
  #product-category .main-products .product-thumb .price .price-normal,
  #product-category .main-products .product-thumb .price .price-new {
    font-size: 18px;
  }
  #product-category .main-products .product-thumb .price .price-old {
    font-size: 14px;
  }
}

/* ===========================================================================
   Categoría en tablet: dos columnas — 2026-07-31

   El bloque de arriba pone UNA columna en toda la banda ≤991px. En un teléfono
   en vertical es justo lo que se busca: foto a todo el ancho. Pero de 601 a
   991px —tablets, y teléfonos en horizontal— esa misma tarjeta se estira hasta
   unos 760px y queda descomunal (medido: 705px a 768, 757px a 820, 849px a 912).

   Gana sobre el bloque anterior por venir después con la misma especificidad;
   no hace falta añadir selectores ni subir a !important nada más.

   Sólo se corrige el número de columnas. La foto cuadrada y los tamaños de
   nombre y precio se quedan igual: a dos columnas la tarjeta mide ~370-480px,
   del orden de una tarjeta de teléfono, así que le sientan bien.

   El corte va en 600px y no en 768 para que el teléfono en horizontal también
   caiga en dos columnas — a 700-900px de ancho una sola tarjeta se ve igual de
   desproporcionada, sea tablet o no.
   =========================================================================== */
@media (min-width: 601px) and (max-width: 991px) {
  #product-category .main-products,
  #product-category .main-products.product-list,
  #product-category .main-products.product-grid.auto-grid,
  #product-category .main-products.auto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 14px !important;
  }
}

:root {
  --venados-controles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}