/* =========================================================
   K-FIVE Product Experience — v1.28
   Estilos del módulo (video flotante + guía de talles inline en
   la zona de compra + calculadora de talle + despacho en el día).
   Sin dependencias externas. Pensado para no afectar el CLS/LCP
   del tema: lo que queda fuera del flujo normal usa position:
   fixed, y las animaciones usan solo transform/opacity.

   v1.17: paleta ajustada a la marca real de kfive.com.ar (revisado en
   vivo en /productos/remera-oversize-m-ranglan-envivada/ — el theme
   ahí usa rgb(94,75,60) = #5e4b3c como color de marca para precios y
   el botón "Agregar todo", con texto rgb(228,226,221) = #e4e2dd sobre
   ese fondo). Antes estas variables tenían un negro genérico (#111),
   copiado de la tienda demo/blanquería, que no correspondía a la
   marca real de K-FIVE.

   v1.19: bug reportado en vivo en /productos/jean-mom-black/ — el
   bloque de "3 cuotas sin interés" + "Ver más detalles" (nativo del
   theme, .js-product-payments-container) quedaba ~18px más abajo que
   el precio grande de al lado. Causa: .js-price-container (también
   nativo del theme) usa align-items: baseline, y como el precio y el
   bloque de cuotas tienen alturas de línea distintas (tamaños de
   fuente distintos), sus líneas de base no coinciden con sus bordes
   superiores — quedan "escalonados" en vez de parejos. Se corrige acá
   con un override puntual a center, scopeado a #single-product para
   no tocar ningún otro .js-price-container del sitio (por ejemplo en
   listados). Probado en vivo: deja el precio y las cuotas a la misma
   altura, en desktop y en mobile (mismo layout, ambos anchos ya
   mantienen las dos cajas en la misma fila — no hay que tocar nada de
   flex-wrap aparte).

   v1.20: 3 pedidos sobre la zona de precio de /productos/jean-mom-black/
   y similares: (a) se oculta el link nativo "Ver más detalles" que
   vive dentro de .js-product-payments-container (abre un popup con el
   detalle de cuotas que no se quiere mostrar) — con esto, al lado del
   precio solo queda la línea de "X cuotas sin interés de $Y", que ya
   entra cómoda en 1 renglón a la altura del precio grande (gracias al
   align-items:center de v1.19), sin necesidad de tocar nada más; (b)
   la caja de "$X con Transferencia [10% OFF]" (nativa del theme,
   .js-payment-discount-price-product-container) pasa de ocupar el
   ancho completo a ajustarse al largo real del texto (display:
   inline-flex), y se achica el tamaño de fuente del precio de esa
   caja (de 26px a 16px) y el padding general, para que se sienta un
   detalle secundario y no una segunda "tarjeta" con el mismo peso
   visual que el precio principal de arriba.
   ========================================================= */

:root{
  --kfive-color-bg: #5e4b3c;
  --kfive-color-bg-hover: #4a3b2f;
  --kfive-color-text: #e4e2dd;
  --kfive-radius: 999px;
  --kfive-radius-modal: 16px;
  --kfive-shadow: 0 6px 20px rgba(0,0,0,.18);
  --kfive-shadow-hover: 0 10px 28px rgba(0,0,0,.24);
  --kfive-z-fab: 2147483000;
  --kfive-z-modal: 2147483001;
  --kfive-fab-size: 48px;
  --kfive-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Utilidades ---------- */

/* Oculta el bloque original de medidas en la descripción una vez que
   ya está disponible en el popup de guía de talles. */
.kfive-hidden{
  display: none !important;
}

/* Aire arriba del cartel de recomendación de talle cuando se mueve
   a la zona de compra, para que no quede pegado al precio/cuotas. */
.kfive-fit-note--positioned{
  margin-top: 16px;
}

/* v1.19: alinea el precio grande con el bloque de "3 cuotas sin
   interés" / "Ver más detalles" que va al lado — ver nota arriba. */
#single-product .js-price-container{
  align-items: center !important;
}

/* v1.20 (a): se oculta el link "Ver más detalles" — el resto de la
   fila (la línea de cuotas) sigue igual, sin tocar nada de su lógica
   nativa (el popup que abría no se pierde, solo se saca este link
   puntual). */
#single-product .js-product-payments-container a.btn-link{
  display: none !important;
}

/* v1.20 (b): la caja de "$X con Transferencia [10% OFF]" pasa de
   ocupar el ancho completo a ajustarse al contenido, con tipografía
   más chica — se siente un dato secundario, no una segunda tarjeta
   con el mismo peso que el precio principal de arriba.
   v1.21: probado en vivo en jean-baggy-black — con display:inline-flex
   y width:auto (incluso con !important e incluso probado a mano por
   consola con estilos inline) la caja seguía ocupando el ancho
   completo. Causa real, encontrada inspeccionando en vivo: esta caja
   es un hijo flex de .js-price-container (que tiene flex-wrap:wrap),
   y trae flex-basis:100% (dentro del shorthand "flex: 0 1 100%") —
   eso fuerza que ocupe todo el ancho de SU FILA sin importar su
   propio display/width. Lo que hacía falta cambiar era flex-basis
   (que se pisa acá con flex:0 1 auto), no display ni width. */
#single-product .js-payment-discount-price-product-container{
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 10px !important;
  border-radius: 8px;
}

#single-product .js-payment-discount-price-product-container span{
  font-size: 12.5px;
}

#single-product .js-payment-discount-price-product-container .js-payment-discount-price-product{
  font-size: 16px !important;
  font-weight: 700;
}

/* v1.22: en las tarjetas de producto de /productos (listado), esta
   misma caja (identificable ahí por la clase "font-small", que no usa
   la versión de la ficha de producto) quedaba en 2 renglones en
   celular. Se reemplaza "con" por un guión ("$X - Transferencia -
   X% OFF", pedido explícito) y se achica un poco todo (gap, padding,
   precio y badge) para ganar espacio. Solo aplica en mobile y solo a
   esta caja del listado — la versión de la ficha de producto (sin la
   clase "font-small") no se toca.
   v1.24: probado "Transferencia" completa en v1.23 (a pedido) pero en
   un celular real seguía sin entrar en 1 renglón — el ancho real de
   tarjeta en su celular es más angosto de lo que daba margen para la
   palabra completa. Se vuelve a abreviar a "Transf" directamente,
   siempre en mobile, sin intentar la versión larga primero.
   v1.26: en algunos productos el nombre del medio de pago viene
   combinado desde Tiendanube como "Transferencia o depósito bancario"
   (más largo que el resto, que solo dice "Transferencia") — en
   desktop esto se veía sin acortar ("con Transferencia o depósito
   Bancario"), pedido explícito de corregirlo ahí también. Se agrega
   una regla general (sin media query, aplica en cualquier ancho) que
   deja el nombre siempre en "Transferencia" para esta caja del
   listado, así se ve igual sin depender de cómo venga combinado el
   texto nativo. En mobile, la regla de abajo (que carga después y
   tiene la misma especificidad) la pisa y abrevia todavía más.
   v1.27: bug encontrado en vivo — el "font-size: 0" de esa regla
   general no tenía "!important", así que el texto nativo (p.ej.
   "Transferencia o depósito bancario") quedaba invisible en teoría
   pero en la práctica seguía ganando por especificidad y se mostraba
   igual, quedando duplicado junto al "Transferencia" nuevo del
   ::before ("TransferenciaTransferencia o depósito bancario"). Se
   agrega el "!important" que faltaba, igual que ya tenía la regla
   mobile de abajo. */
.js-payment-discount-price-product-container.font-small .js-payment-discount-name-product{
  font-size: 0 !important;
}

.js-payment-discount-price-product-container.font-small .js-payment-discount-name-product::before{
  content: "Transferencia";
  font-size: 13px;
}

@media (max-width: 480px){
  .js-payment-discount-price-product-container.font-small{
    gap: 3px !important;
    padding: 3px 6px !important;
  }

  .js-payment-discount-price-product-container.font-small .js-payment-discount-price-product{
    font-size: 12px !important;
  }

  .js-payment-discount-price-product-container.font-small > span:nth-child(2){
    font-size: 0 !important;
  }

  .js-payment-discount-price-product-container.font-small > span:nth-child(2)::before{
    content: "-";
    font-size: 11px;
  }

  .js-payment-discount-price-product-container.font-small .js-payment-discount-name-product{
    font-size: 0 !important;
  }

  .js-payment-discount-price-product-container.font-small .js-payment-discount-name-product::before{
    content: "Transfer.";
    font-size: 10px;
  }

  .js-payment-discount-price-product-container.font-small .badge-transferencia{
    font-size: 9px !important;
    padding: 1px 5px !important;
  }
}

/* v1.25: en /productos, a partir de cierto punto del catálogo el sello
   "10% OFF" nativo (.badge-transferencia) no aparece — comprobado en el
   panel de Tiendanube (Configuración > Medios de pago) que NO es una
   diferencia de configuración real: hay un solo medio de pago con
   descuento en toda la tienda ("Transferencia o depósito bancario", 10%).
   Es Tiendanube mostrando datos de caché vieja para parte del catálogo
   (de antes de renombrar ese medio de pago), fuera de nuestro control y
   sin relación con la paginación. Acá se agrega un sello propio, con el
   mismo estilo visual, para cuando falta el nativo — así se ve igual en
   todo el listado sin depender de que esa caché se actualice sola. El
   10% queda fijo en el texto porque hoy es el único % configurado en la
   tienda; si el día de mañana cambia, hay que actualizar este texto. */
.js-payment-discount-price-product-container:not(:has(.badge-transferencia))::after{
  content: "10% OFF";
  display: inline-block;
  background: var(--kfive-color-bg);
  color: var(--kfive-color-text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

@media (max-width: 480px){
  .js-payment-discount-price-product-container.font-small:not(:has(.badge-transferencia))::after{
    font-size: 9px;
    padding: 1px 5px;
  }
}

/* v1.28: en desktop, esta caja del listado (font-small) usa
   flex-wrap:wrap nativo del theme — con "Transferencia" completo
   (v1.26) el "10% OFF" ya no entraba en el mismo renglón y pasaba
   solo él a una segunda línea. Comprobado en vivo que con
   flex-wrap:nowrap alcanza (sin achicar tipografía): el contenido
   entra justo en el ancho de la tarjeta en todos los casos probados.
   Escopado a min-width:481px para no tocar el comportamiento mobile,
   que ya funciona bien tal cual está. */
@media (min-width: 481px){
  .js-payment-discount-price-product-container.font-small{
    flex-wrap: nowrap !important;
  }
}

/* v1.22: en la ficha de producto, pedido explícito de mover el detalle
   de cuotas ("X cuotas sin interés de $Y") DEBAJO del precio grande en
   vez de al lado (así en desktop y mobile) — se fuerza que ese bloque
   ocupe toda su fila dentro de .js-price-container (que tiene
   flex-wrap:wrap), quedando en su propio renglón bajo el precio. Los
   decimales del monto de cuota ("$10.000,00" → "$10.000") se le sacan
   con JS (ver kfive-product-experience.js, trimInstallmentDecimals),
   porque ese monto es un cálculo dinámico del theme (precio/cuotas) y
   no se puede recortar solo con CSS. */
#single-product .js-product-payments-container{
  flex: 0 0 100% !important;
  margin-top: 2px;
}

/* ---------- Botón flotante (video) ---------- */

.kfive-fab-stack{
  position: fixed;
  right: 16px;
  /* 84px para no superponerse con el botón de WhatsApp del sitio
     (45px de alto + 20px de margen propio + ~19px de aire). Si en
     algún momento cambia el tamaño/posición de ese botón, ajustar
     este valor. */
  bottom: 84px;
  z-index: var(--kfive-z-fab);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.kfive-fab{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--kfive-radius);
  background: var(--kfive-color-bg);
  color: var(--kfive-color-text);
  font-family: var(--kfive-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  height: var(--kfive-fab-size);
  padding: 0 18px;
  cursor: pointer;
  box-shadow: var(--kfive-shadow);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition:
    opacity .28s ease,
    transform .28s ease,
    background .15s ease,
    box-shadow .15s ease,
    width .25s ease,
    padding .25s ease,
    gap .25s ease;
  will-change: transform, opacity;
}

.kfive-fab:hover{
  background: var(--kfive-color-bg-hover);
  box-shadow: var(--kfive-shadow-hover);
}

.kfive-fab:active{
  transform: translateY(0) scale(.97);
}

.kfive-fab.kfive-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kfive-fab svg{
  width: 18px;
  height: 18px;
  flex: none;
}

.kfive-fab-label{
  white-space: nowrap;
  max-width: 160px;
  opacity: 1;
  overflow: hidden;
  transition: max-width .25s ease, opacity .18s ease;
}

.kfive-fab.kfive-collapsed{
  width: var(--kfive-fab-size);
  padding: 0;
  gap: 0;
  justify-content: center;
}

.kfive-fab.kfive-collapsed .kfive-fab-label{
  max-width: 0;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine){
  .kfive-fab.kfive-collapsed:hover{
    width: auto;
    padding: 0 18px;
    gap: 8px;
  }
  .kfive-fab.kfive-collapsed:hover .kfive-fab-label{
    max-width: 160px;
    opacity: 1;
  }
}

@media (max-width: 480px){
  .kfive-fab-stack{
    right: 12px;
    bottom: 78px;
  }
  .kfive-fab{
    font-size: 13px;
  }
}

/* ---------- Overlay + Modal genérico ---------- */

.kfive-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--kfive-z-modal);
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.kfive-overlay.kfive-open{
  opacity: 1;
  visibility: visible;
}

.kfive-modal{
  position: relative;
  background: #fff;
  border-radius: var(--kfive-radius-modal);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(.98);
  transition: transform .22s ease;
  font-family: var(--kfive-font);
}

.kfive-overlay.kfive-open .kfive-modal{
  transform: translateY(0) scale(1);
}

.kfive-modal--video{
  max-width: 420px;
}

.kfive-modal--size{
  max-width: 560px;
}

.kfive-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #f0f0f0;
  flex: none;
}

.kfive-modal-title{
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.kfive-modal-close{
  border: none;
  background: #f5f5f5;
  color: #333;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
  flex: none;
}

.kfive-modal-close:hover{
  background: #e8e8e8;
}

.kfive-modal-close svg{
  width: 16px;
  height: 16px;
}

.kfive-modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.kfive-lock-scroll{
  overflow: hidden;
}

/* ---------- Video ---------- */

.kfive-video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}

.kfive-video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kfive-video-frame.kfive-video-landscape{
  aspect-ratio: 16 / 9;
}

/* ---------- Guía de talles (contenido del popup) ---------- */

.kfive-modal-body--size{
  padding: 18px 20px 22px;
}

.kfive-size-content{
  color: #222;
  font-size: 14px;
  line-height: 1.5;
}

.kfive-size-content p{
  margin: 0 0 10px;
}

.kfive-size-content p:first-child{
  font-weight: 700;
  color: #111;
}

.kfive-size-content .kfive-col-highlight{
  background: rgba(255, 196, 0, .4) !important;
  color: #513900 !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(255, 196, 0, 1);
}

.kfive-size-content .kfive-size-grid > div:first-child > span.kfive-col-highlight,
.kfive-size-content table tr:first-child .kfive-col-highlight{
  background: #ffc400 !important;
  color: #3d2900 !important;
  box-shadow: none;
}

/* Fila superior del popup: calculadora + caja de ayuda en 2 columnas
   (1 en pantallas chicas). La tabla queda debajo. */

.kfive-calc-top{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.kfive-calc-top .kfive-calc-box{
  margin: 0;
}

.kfive-calc-top .kfive-size-help{
  margin-top: 0;
  flex-wrap: wrap;
}

.kfive-calc-top .kfive-size-help-link{
  width: 100%;
  padding-left: 44px;
  margin-top: 2px;
}

.kfive-calc-top > *:only-child{
  grid-column: 1 / -1;
}

@media (min-width: 480px){
  .kfive-calc-top{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ---------- Calculadora de talle ---------- */

.kfive-calc-box{
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
}

.kfive-calc-title{
  font-weight: 700;
  font-size: 13.5px;
  color: #111;
  margin: 0 0 4px;
}

.kfive-calc-hint{
  font-size: 12px;
  color: #777;
  margin: 0 0 10px;
  line-height: 1.45;
}

.kfive-calc-row{
  display: flex;
  gap: 8px;
}

.kfive-calc-row input{
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: var(--kfive-font);
}

.kfive-calc-row button{
  flex: none;
  border: none;
  background: var(--kfive-color-bg);
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}

.kfive-calc-row button:hover{
  background: var(--kfive-color-bg-hover);
}

.kfive-calc-result{
  margin-top: 10px;
  font-size: 13.5px;
  color: #111;
  font-weight: 600;
  min-height: 18px;
}

.kfive-calc-result.kfive-calc-error{
  color: #b33;
  font-weight: 500;
}

/* ---------- Caja de ayuda (link a guía externa) ---------- */

.kfive-size-help{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
  text-decoration: none;
  transition: background .15s ease;
}

.kfive-size-help:hover{
  background: #eeeeee;
}

.kfive-size-help-icon{
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.kfive-size-help-icon svg{
  width: 16px;
  height: 16px;
}

.kfive-size-help-text{
  flex: 1 1 auto;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.kfive-size-help-text strong{
  color: #111;
  font-weight: 700;
}

.kfive-size-help-link{
  flex: none;
  color: var(--kfive-color-bg);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 420px){
  .kfive-size-help{
    flex-wrap: wrap;
  }
  .kfive-size-help-link{
    width: 100%;
    padding-left: 44px;
  }
}

/* ---------- Zona de compra: guía de talles inline + despacho ----------
   v1.5: reemplaza al botón flotante de guía de talles. Se inserta
   justo después del formulario de compra, antes de los sellos de
   "Compra protegida" / "Cambios y devoluciones", imitando su mismo
   lenguaje visual (fila con ícono + texto) para que se sienta nativo
   del tema y no como un widget pegado. */

.kfive-quick-info{
  margin: 6px 0 18px;
}

.kfive-quick-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
}

.kfive-quick-row + .kfive-quick-row{
  border-top: 1px solid #f0f0f0;
}

.kfive-quick-icon{
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.kfive-quick-icon svg{
  width: 14px;
  height: 14px;
}

.kfive-quick-text{
  flex: 1 1 auto;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.kfive-quick-text strong{
  color: #111;
  font-weight: 700;
}

.kfive-quick-note{
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

.kfive-quick-link{
  flex: none;
  background: none;
  border: none;
  color: #111;
  font-weight: 700;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: var(--kfive-font);
}

.kfive-quick-urgent .kfive-quick-text strong{
  color: #0a7d3c;
}

/* Variante "destacada": para que la fila no se pierda entre el resto
   de la info (despacho, sellos), se la envuelve en una caja propia
   con fondo y borde, igual que la caja de ayuda de WhatsApp. */
.kfive-quick-row--boxed{
  background: #f5f5f4;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
}

.kfive-quick-row--boxed + .kfive-quick-row{
  border-top: none;
}

@media (max-width: 380px){
  .kfive-quick-row{
    flex-wrap: wrap;
  }
  .kfive-quick-link{
    width: 100%;
    padding-left: 38px;
    margin-top: 2px;
    text-align: left;
  }
}

/* ---------- Grilla mayorista (Huapps): rediseño circular ----------
   v1.14. Solo se aplica si CONFIG.wholesaleGridCircleUI está en true
   (la clase .kfive-wholesale-grid-circles la agrega el JS). No toca
   los controles originales de Huapps (siguen en el DOM, ocultos) —
   esto es puramente visual, el conteo real lo sigue llevando esa app. */

/* Recuadro general: envuelve toda la sección (hint + tabla + fila de
   Cantidad/Total + botón "Agregar todo") en una caja suave, para que
   se sienta un bloque propio y no quede "flotando" sobre el fondo
   blanco de la página. */
.kfive-wholesale-grid-circles{
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 16px 16px 14px;
  background: #fafafa;
  margin-bottom: 4px;
}

.kfive-wholesale-grid-circles table{
  border-collapse: collapse;
}

/* La fila de encabezado ("40 42 44...") se saca porque cada círculo
   ya muestra su propio talle adentro. */
.kfive-wholesale-grid-circles table thead{
  display: none;
}

.kfive-wholesale-grid-circles table,
.kfive-wholesale-grid-circles table tr,
.kfive-wholesale-grid-circles table th,
.kfive-wholesale-grid-circles table td{
  border: none !important;
  background: transparent !important;
}

.kfive-wholesale-grid-circles table td,
.kfive-wholesale-grid-circles table th{
  padding: 10px 8px !important;
}

/* Texto de ayuda con flechita, arriba de la tabla, para explicar qué
   hacer con los círculos (CONFIG.wholesaleGridHintText). */
.kfive-wholesale-hint{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #777;
  margin: 0 0 10px;
  font-family: var(--kfive-font);
}

.kfive-wholesale-hint-arrow{
  display: inline-flex;
  flex: none;
  animation: kfive-hint-bounce 1.6s ease-in-out infinite;
}

.kfive-wholesale-hint-arrow svg{
  width: 14px;
  height: 14px;
}

@keyframes kfive-hint-bounce{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(3px); }
}

.kfive-circle-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kfive-circle-btn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease;
  font-family: var(--kfive-font);
}

.kfive-circle-btn:hover{
  border-color: var(--kfive-color-bg);
}

/* Globito con la cantidad elegida. Es puramente informativo (no se
   puede restar tocándolo): para restar existe el tacho de la fila. */
.kfive-circle-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c8392b;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Talle sin stock: círculo apagado con una línea tachada, en vez del
   texto "Sin Stock" de Huapps. */
.kfive-circle-disabled{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #eee;
  background: #f7f7f6;
  color: #ccc;
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--kfive-font);
}

.kfive-circle-disabled::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  border-top: 1.5px solid #ccc;
  transform: rotate(-32deg);
}

/* Tacho junto al nombre del color: solo se ve (gris apagado) cuando
   esa fila tiene al menos un talle elegido; en hover pasa a rojo. */
.kfive-row-trash{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border: none;
  background: none;
  color: #bbb;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, color .15s ease;
}

.kfive-row-trash.kfive-row-trash-active{
  opacity: 1;
  pointer-events: auto;
}

.kfive-row-trash:hover{
  color: #c8392b;
}

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

/* Fila "Cantidad: X · Total: $X" que trae Huapps nativamente: sus
   clases "d-flex justify-content-between" son de Bootstrap y ese
   framework no está en el theme, así que sin esto quedaban apiladas
   en dos líneas (cada <p> es block por default). Se fuerza el flex
   acá y se les saca el margen propio para que respire bien en una
   sola línea, ahorrando alto en la página. */
.kfive-wholesale-grid-circles .huapps-product-grid-view-actions .d-flex.justify-content-between{
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.kfive-wholesale-grid-circles .huapps-product-grid-view-actions .d-flex.justify-content-between p{
  margin: 0 !important;
  font-size: 13.5px;
  color: #444;
}