/* =========================================================
   PDP Sizes — Tallas tipo pills + popover guía
   FIX:
   ✅ letras centradas perfectas (sin padding theme)
   ✅ elimina hover azul Astra/Woo
   ✅ móvil: 1 sola línea SIEMPRE (sin wrap / sin scroll)
   ========================================================= */

.c-pdp-sizes{
  margin-top: 14px;
}

/* Head: "Talla" + "Guía de tallas" */
.c-pdp-sizes__head{
  display:flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.c-pdp-sizes__label{
  font-weight: 700;
  color:#0b1220;
  font-size: 1.1rem;
}

/* Guía de tallas */
.c-pdp-sizes__guideWrap{
  position: relative;
  display:inline-flex;
  align-items:center;
}

.c-pdp-sizes__guideBtn{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer;
  color:#9ca3af !important;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: underline;
  box-shadow:none !important;
}

.c-pdp-sizes__guideBtn:hover{
  color:#6b7280 !important;
  text-decoration: underline !important;
}

/* Popover (globo) */
.c-pdp-sizes__popover{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: min(360px, 92vw);

  opacity:0;
  transform: translateY(6px);
  pointer-events:none;

  transition: opacity .15s ease, transform .15s ease;
}

/* Flechita */
.c-pdp-sizes__popover::before{
  content:"";
  position:absolute;
  top:-8px;
  left: 22px;
  width: 14px;
  height: 14px;
  background:#fff;
  border-left: 1px solid rgba(0,0,0,.12);
  border-top: 1px solid rgba(0,0,0,.12);
  transform: rotate(45deg);
}

/* Mostrar popover por hover/focus */
.c-pdp-sizes__guideWrap:hover .c-pdp-sizes__popover,
.c-pdp-sizes__guideWrap:focus-within .c-pdp-sizes__popover,
.c-pdp-sizes.is-open .c-pdp-sizes__popover{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Card popover */
.c-sizeguide__card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  padding: 14px;
}

/* Tabla guía */
.c-sizeguide__table{
  width:100%;
  border-collapse: collapse;
  font-size: .78rem;
  color:#374151;
}

.c-sizeguide__table th,
.c-sizeguide__table td{
  border:1px solid rgba(0,0,0,.08);
  padding: 8px 10px;
  text-align:left;
  white-space: nowrap;
}

.c-sizeguide__table th{
  font-weight:800;
  background:#f8fafc;
}

/* Grid de tallas */
.c-pdp-sizes__grid{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* =========================================
   ✅ Botones talla
   ========================================= */
.c-pdp-sizes .c-pdp-sizes__btn{
  width: 62px;
  height: 50px;

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10) !important;
  background:#fff !important;

  cursor:pointer;

  /* ✅ mata padding del theme */
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;

  /* ✅ centrado perfecto */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;

  box-sizing:border-box !important;
  overflow:hidden;

  font-weight: 900;
  color:#0b1220 !important;
  font-size: .95rem;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  outline:none !important;
  text-decoration:none !important;

  -webkit-tap-highlight-color: transparent;
}

/* ✅ Bloqueo total hover azul Astra/Woo */
.c-pdp-sizes .c-pdp-sizes__btn:hover,
.c-pdp-sizes .c-pdp-sizes__btn:focus,
.c-pdp-sizes .c-pdp-sizes__btn:active{
  background:#fff !important;
  color:#0b1220 !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
  transform:none !important;
  filter:none !important;
  outline:none !important;
}

/* Activo */
.c-pdp-sizes .c-pdp-sizes__btn.is-active{
  border-color:#0b1220 !important;
  background:#eef2ff !important;
  box-shadow:none !important;
}

/* Focus visible sin ring azul */
.c-pdp-sizes .c-pdp-sizes__btn:focus-visible{
  outline:none !important;
  box-shadow: 0 0 0 2px rgba(17,24,39,.18) !important;
}

/* =========================================================
   Size Guide Popover — debajo del botón (mobile)
   - Centrado relativo al botón
   - No desborda el viewport
   - Tabla scrollea dentro
   ========================================================= */

@media (max-width: 767.98px){

  .c-pdp-sizes__grid{
    flex-wrap: nowrap !important;       /* ✅ no se rompe */
    gap: 8px !important;
    width:100%;
  }
  
  .c-pdp-sizes__popover{
    position: fixed !important;
    left: 50% !important;              /* JS lo ajusta */
    top: 120px !important;             /* JS lo ajusta */
    transform: translateX(-50%) !important;

    width: min(560px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;

    /* ✅ Nunca se sale por abajo: JS ajusta maxHeight según top */
    max-height: 60vh;
    z-index: 99999 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Card: el contenido scrollea dentro */
  .c-sizeguide__card{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px;
    overflow: auto !important;         /* ✅ scroll interno */
    -webkit-overflow-scrolling: touch;
  }

  .c-sizeguide__table{
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
  }

  .c-sizeguide__table th,
  .c-sizeguide__table td{
    white-space: nowrap;
  }
  
  .c-pdp-sizes__popover::before{
  display: none;
  }
}