/* =========================================================
   K-FIVE Product Experience — v1.21
   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.21: la grilla mayorista (círculos de talle) se achica en mobile
   (max-width: 480px) — círculos, badges, tacho y padding de celdas
   más chicos, para que quepan sin scroll horizontal cuando hay
   varios talles/colores. Probado con un contenedor angosto (360px)
   simulando una pantalla de celular real, con 6 talles x 5 colores.
   ========================================================= */

:root{
  --kfive-color-bg: #111111;
  --kfive-color-bg-hover: #2b2b2b;
  --kfive-color-text: #ffffff;
  --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;
}

/* ---------- 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: #1caf6a;
  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{
  /* Sin margen arriba: queda pegado directo a la grilla mayorista
     (que ya viene sin margen abajo), sin hueco entre las dos cajas. */
  margin: 0 0 18px;
}

.kfive-quick-row{
  display: flex;
  /* "center" en vez de "flex-start": el ícono queda centrado con el
     texto en vez de pegado arriba, más prolijo tanto en filas de una
     línea como en la de despacho (texto + aclaración chica abajo). */
  align-items: center;
  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;
  /* Sin margen abajo: la caja de "¿No sabés tu talle?" que sigue
     inmediatamente después ya trae su propio margen superior en 0,
     así quedan pegadas sin hueco entre medio. */
  margin-bottom: 0;
}

.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: #111;
}

/* 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;
  /* Aire antes del botón "Agregar todo", que si no queda pegado al
     texto de Cantidad/Total. */
  margin-bottom: 12px !important;
}

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

/* Mobile: cuando hay varios talles (5-6+ columnas), los círculos a
   tamaño completo no entran en el ancho de pantalla y la tabla
   quedaba con scroll horizontal. Se achican círculos, badges, tacho
   y el padding de las celdas para que todo entre sin scroll. La
   columna del color (primera celda) también se achica: nombre en
   mayúscula más chico + menos padding, para dejarle más aire a los
   círculos. */
@media (max-width: 480px){
  .kfive-wholesale-grid-circles{
    padding: 12px 10px 10px;
  }

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

  .kfive-wholesale-grid-circles table td:first-child,
  .kfive-wholesale-grid-circles table th:first-child{
    padding-left: 0 !important;
    font-size: 11px;
  }

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

  .kfive-circle-badge{
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    top: -4px;
    right: -4px;
  }

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

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