/* =========================================================
   K-FIVE Wholesale Grid (propia) — v1.8 — EN PRUEBA
   Complementa a kfive-product-experience.css: reutiliza las clases
   .kfive-wholesale-grid-circles / .kfive-circle-btn / .kfive-circle-badge
   / .kfive-circle-disabled / .kfive-row-trash / .kfive-wholesale-hint
   (y su media query mobile) que ya vienen definidas ahí. Este archivo
   agrega: la fila de "Cantidad/Total" y el botón "Agregar todo"
   propios (antes los armaba Huapps con sus propias clases Bootstrap),
   más los estilos base de la tabla propia (kfive-wholesale-grid-own),
   ya que ahora la tabla la arma nuestro propio JS y no Huapps.
   v1.2: se agrega el cartel de rango de precios (kfive-wholesale-
   price-range), que solo aparece cuando el precio realmente varía
   entre variantes del mismo producto.
   v1.4: se agrega el encabezado de columna por talle (kfive-wholesale-
   talle-head / -name / -price), con el precio de ese talle mostrado
   directamente arriba de sus círculos — así queda claro a qué talle
   corresponde cada precio sin depender del tooltip al pasar el mouse.
   v1.5: (a) el cartel de rango de precios queda desactivado por
   defecto (kfive-wholesale-price-range sigue existiendo por si se
   quiere reactivar, ver priceRangeNoteEnabled en el JS) — quedaba
   redundante ahora que el precio de cada talle ya se ve en su propia
   columna. (b) se centran de verdad los círculos dentro de su celda
   (antes quedaban corridos a la izquierda, comprobado en vivo — el
   texto del encabezado sí estaba centrado en la celda, pero el
   círculo de abajo no, entonces no coincidían visualmente). (c) el
   precio del encabezado se pinta con el mismo tono cálido (vison)
   que ya usa el theme para el precio principal del producto, en vez
   de gris genérico, para que resalte como parte de la marca.
   v1.6: el nombre de color (kfive-wholesale-color-name-previewable)
   se ve clickeable — al pasar el mouse o tocarlo, la imagen principal
   del producto cambia a la foto de esa variante (ver
   colorImagePreviewEnabled en el JS). Estilo mínimo acá, solo el
   cursor y un subrayado sutil al pasar el mouse para que se note que
   es interactivo.
   v1.7: color del encabezado de talle/precio ajustado al tono de marca
   REAL de kfive.com.ar (#5e4b3c, revisado en vivo en el producto
   remera-oversize-m-ranglan-envivada — antes tenía un tono aproximado
   #8e7a6a copiado de la tienda demo). El botón "Agregar todo" no
   necesitó cambios: ya usa las clases reales del theme (btn
   btn-primary btn-big btn-block), así que hereda el color de marca
   automáticamente en cualquier tienda donde se instale.
   v1.8: bug reportado en vivo en /productos/pantalon-chino-sastrero-wool/
   desde un celular real (no reproducía achicando la ventana de Chrome
   en desktop): con productos de 6+ talles, los círculos de 40px más el
   padding de cada celda no entraban en el ancho real de un teléfono, y
   la grilla quedaba con scroll horizontal — feo y poco intuitivo (no
   es obvio que hay que scrollear para ver los talles de más a la
   derecha). Se agregan 2 escalones de achique (círculos más chicos +
   menos padding + tipografía más chica en el encabezado de talle/precio
   y en el nombre de color) para pantallas angostas, sin tocar nada en
   desktop/tablet. Se ajustaron los números para que hasta 7-8 columnas
   de talle entren sin scroll en los anchos de celular más comunes
   (~360px a ~480px).
   ========================================================= */

/* Tabla propia de la grilla (kfive-wholesale-grid-own la agrega el
   JS). Mismo criterio de "sin bordes propios" que usaba el rediseño
   de la grilla de Huapps. */
.kfive-wholesale-grid-own table{
  border-collapse: collapse;
}

.kfive-wholesale-grid-own table td{
  padding: 10px 8px !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle;
}

/* Nombre del color (primera celda de cada fila): siempre en
   mayúscula, sin importar cómo esté cargado el dato en el producto
   (v1.1 — pedido explícito, para que se vea prolijo en todos los
   productos por igual). */
.kfive-wholesale-color-name-previewable{
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.kfive-wholesale-color-name-previewable:hover{
  text-decoration-color: currentColor;
}

.kfive-wholesale-grid-own table td:first-child{
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  font-family: var(--kfive-font);
}

/* Cartel de rango de precios (solo aparece si el precio varía entre
   variantes). El precio exacto de cada talle/color queda además como
   tooltip nativo del navegador en cada círculo. */
.kfive-wholesale-price-range{
  font-size: 12.5px;
  color: #777;
  margin: -6px 0 10px;
  font-family: var(--kfive-font);
}

/* El theme trae una regla global (thead{display:none}) pensada para
   convertir tablas comunes en "cards" en mobile — nos tapaba el
   encabezado de talle/precio aunque tuviera contenido (comprobado en
   vivo: display:none por esa regla, no por nada nuestro). Se fuerza
   de vuelta a table-header-group solo dentro de nuestra grilla. */
.kfive-wholesale-grid-own table thead{
  display: table-header-group !important;
}

/* Encabezado de columna (uno por talle), con el talle y su precio.
   La primera celda (arriba del nombre de color) queda vacía, sin
   estilo — solo alinea la grilla con el resto de las filas. */
.kfive-wholesale-grid-own table thead th{
  padding: 0 8px 6px !important;
  border: none !important;
  background: transparent !important;
  text-align: center;
  font-weight: 400;
}

.kfive-wholesale-talle-head{
  display: table-cell;
}

.kfive-wholesale-talle-name{
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  /* Mismo tono vison/cálido que usa el theme para el precio principal
     del producto (comprobado en vivo: rgb(142,122,106), la clase real
     .js-price-display) — así el encabezado se siente parte de la
     marca en vez de un gris genérico agregado por afuera. */
  color: #5e4b3c;
  font-family: var(--kfive-font);
}

.kfive-wholesale-talle-price{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #5e4b3c;
  font-family: var(--kfive-font);
  margin-top: 1px;
}

/* Centrado real de los círculos dentro de su celda: .kfive-circle-wrap
   y .kfive-circle-disabled vienen de kfive-product-experience.css con
   display:flex (block-level), lo que los deja pegados al borde
   izquierdo de la celda en vez de centrados — se ve corrido respecto
   al encabezado de talle/precio, que sí está centrado (comprobado en
   vivo con las coordenadas reales de cada uno). Se los pasa a
   inline-flex y se centra la celda con text-align, sin tocar
   kfive-product-experience.css (así no afecta a la grilla de Huapps
   en kfive.com.ar, que usa esas mismas clases con otro layout). */
.kfive-wholesale-grid-own table td:not(:first-child){
  text-align: center;
}

.kfive-wholesale-grid-own .kfive-circle-wrap,
.kfive-wholesale-grid-own .kfive-circle-disabled{
  display: inline-flex;
}

.kfive-wholesale-summary{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.kfive-wholesale-summary p{
  margin: 0;
  font-size: 13.5px;
  color: #444;
  font-family: var(--kfive-font);
}

/* El botón hereda el color/estilo real de marca de las clases del
   theme (btn btn-primary btn-big btn-block) — acá solo se ajusta el
   ancho para que ocupe todo el recuadro de la grilla, igual que hacía
   el de Huapps. */
.kfive-wholesale-addall-btn{
  width: 100%;
}

.kfive-wholesale-error{
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #c8392b;
  font-family: var(--kfive-font);
}

/* ---------------------------------------------------------
 * v1.8: grilla responsive en mobile real (ver nota arriba).
 * Se pone acá (no en kfive-product-experience.css) para que, al
 * cargarse este archivo después, gane siempre por orden de cascada
 * sobre las reglas base de .kfive-circle-btn/.kfive-circle-disabled
 * (definidas en el otro archivo), sin necesitar !important en todo.
 * ------------------------------------------------------- */
@media (max-width: 480px){
  .kfive-wholesale-grid-circles{
    padding: 12px 10px 10px;
  }

  .kfive-wholesale-grid-circles table td,
  .kfive-wholesale-grid-circles table th,
  .kfive-wholesale-grid-own table td,
  .kfive-wholesale-grid-own table th{
    padding: 6px 3px !important;
  }

  .kfive-wholesale-grid-own table thead th{
    padding: 0 3px 5px !important;
  }

  .kfive-circle-btn,
  .kfive-circle-disabled{
    width: 32px;
    height: 32px;
    font-size: 11.5px;
  }

  .kfive-wholesale-talle-name,
  .kfive-wholesale-talle-price{
    font-size: 10.5px;
  }

  .kfive-wholesale-grid-own table td:first-child{
    font-size: 11px;
  }

  .kfive-row-trash{
    width: 18px;
    height: 18px;
    margin-left: 4px;
  }

  .kfive-row-trash svg{
    width: 13px;
    height: 13px;
  }
}

/* Segundo escalón, para celulares más angostos (~360px o menos) o
   productos con muchas columnas de talle (7-8) — se achica un poco
   más todavía para no forzar scroll horizontal. */
@media (max-width: 370px){
  .kfive-wholesale-grid-circles table td,
  .kfive-wholesale-grid-circles table th,
  .kfive-wholesale-grid-own table td,
  .kfive-wholesale-grid-own table th{
    padding: 4px 1px !important;
  }

  .kfive-circle-btn,
  .kfive-circle-disabled{
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .kfive-wholesale-talle-name,
  .kfive-wholesale-talle-price{
    font-size: 9.5px;
  }

  .kfive-wholesale-grid-own table td:first-child{
    font-size: 10px;
  }
}