/* =========================================================
   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: sin cambios de CSS. El fix es puramente de JS (ver
   kfive-wholesale-grid.js) — usa el HTML oficial que ya devuelve
   Tiendanube para el panel lateral (html_cart_items), así que ese
   contenido trae sus propios estilos del theme y no hace falta
   agregar reglas acá.
   v1.8: tampoco hace falta CSS — la apertura del panel se hace con
   .click() en el link real del theme (ver kfive-wholesale-grid.js),
   que ya trae su propia animación/estilo de apertura.
   ========================================================= */

/* 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: #8e7a6a;
  font-family: var(--kfive-font);
}

.kfive-wholesale-talle-price{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #8e7a6a;
  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);
}