/* ============================================================
     VARIANTES DE PRODUCTO
     ============================================================ */


  #product .product-variant-container{
      display:grid !important;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:10px;
      width:100%;
      margin:16px 0 0 !important;
      padding:16px 0 0 !important;
      align-items:stretch;
      border-top:1px solid var(--hta-border-soft, #e7edf3) !important;
  }


  #product .product-variant-container>h3{
      grid-column:1/-1;
      width:100%;
      margin:0 0 12px !important;
      padding:0 !important;
      font-family:'Montserrat',sans-serif;
      font-size:16px;
      font-weight:700;
      line-height:1.3;
      color:var(--hta-text, #333333);
  }


  #product .product-variant-container>.product-variant{
      position:relative;
      display:grid !important;
      grid-template-rows:82px minmax(36px,auto);
      align-items:center;
      justify-items:center;
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      min-height:132px;
      margin:0 !important;
      padding:8px 7px 10px !important;
      overflow:hidden;
      cursor:pointer;
      text-align:center;
      background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
      border:1px solid var(--hta-border, #d9dfe7) !important;
      border-radius:8px !important;
      box-shadow:0 1px 2px rgba(0,0,0,.015);
      transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease;
  }


  @media (hover:hover){
  #product .product-variant-container>.product-variant:hover{
      transform:translateY(-2px);
      background:linear-gradient(180deg,#fff 0%,#eff9fa 100%);
      border-color:var(--hta-cyan, #54b6c0) !important;
      box-shadow:0 5px 15px rgba(0,0,0,.06);
  }
  }


  #product .product-variant-container>.product-variant>img{
      grid-row:1;
      display:block !important;
      align-self:center;
      justify-self:center;
      width:76px !important;
      height:76px !important;
      max-width:min(100%,76px) !important;
      max-height:76px !important;
      margin:0 !important;
      padding:3px !important;
      object-fit:contain;
      background:#fff !important;
      border:0 !important;
      border-radius:5px !important;
      box-shadow:none !important;
      transition:transform .15s ease;
  }


  @media (hover:hover){
  #product .product-variant-container>.product-variant:hover>img{
      transform:scale(1.04);
  }
  }


  #product .product-variant-container>.product-variant>.product-variant-name{
      grid-row:2;
      display:flex !important;
      align-items:flex-start;
      justify-content:center;
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;
      margin:0 !important;
      padding:3px 2px 0 !important;
      font-family:'Montserrat',sans-serif;
      font-size:11.5px;
      font-weight:600;
      line-height:1.28;
      letter-spacing:-.08px;
      color:var(--hta-text, #333333);
      text-align:center;
      white-space:normal !important;
      overflow-wrap:break-word !important;
      hyphens:none;
  }


  #product .product-variant-container>.product-variant.product-variant-selected{
      padding:7px 6px 9px !important;
      background:linear-gradient(180deg,#fff 0%,#f5f6ff 100%) !important;
      border:2px solid var(--hta-blue, #0a0a78) !important;
      box-shadow:0 0 0 1px rgba(10,10,120,.04),0 5px 14px rgba(10,10,120,.10);
      transform:none;
  }


  #product .product-variant-container>.product-variant.product-variant-selected>.product-variant-name{
      color:var(--hta-blue, #0a0a78);
      font-weight:700;
  }


  #product .product-variant-container>.product-variant.product-variant-selected::after{
      content:"✓";
      position:absolute;
      top:6px;
      right:6px;
      display:flex;
      align-items:center;
      justify-content:center;
      width:21px;
      height:21px;
      font-family:Arial,sans-serif;
      font-size:11px;
      font-weight:700;
      line-height:1;
      color:#fff;
      background:var(--hta-blue, #0a0a78);
      border:2px solid #fff;
      border-radius:50%;
      box-shadow:0 2px 5px rgba(10,10,120,.15);
  }


  #product .product-variant-container>.product-variant[data-in-stock="0"]{
      background:#fafafa;
      opacity:.68;
  }




  /* Número reducido de variantes */


  #product .product-variant-container:has(>.product-variant:nth-of-type(1):last-of-type){
      grid-template-columns:minmax(0,170px);
      justify-content:start;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type){
      grid-template-columns:repeat(2,minmax(0,170px));
      justify-content:start;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type){
      grid-template-columns:repeat(3,minmax(0,170px));
      justify-content:start;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(4):last-of-type){
      grid-template-columns:repeat(4,minmax(0,155px));
      justify-content:start;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(1):last-of-type)>.product-variant,
  #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type)>.product-variant,
  #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type)>.product-variant{
      grid-template-rows:88px minmax(35px,auto);
      min-height:138px;
      padding:8px 10px 10px !important;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(1):last-of-type)>.product-variant>img,
  #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type)>.product-variant>img,
  #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type)>.product-variant>img{
      width:84px !important;
      height:84px !important;
      max-width:min(100%,84px) !important;
      max-height:84px !important;
  }


  #product .product-variant-container:has(>.product-variant:nth-of-type(1):last-of-type)>.product-variant>.product-variant-name,
  #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type)>.product-variant>.product-variant-name,
  #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type)>.product-variant>.product-variant-name{
      font-size:12px;
  }


  @media (max-width:1100px){
      #product .product-variant-container{
          grid-template-columns:repeat(5,minmax(0,1fr));
          gap:9px;
      }


      #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type){
          grid-template-columns:repeat(2,minmax(0,160px));
      }


      #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type){
          grid-template-columns:repeat(3,minmax(0,150px));
      }


      #product .product-variant-container:has(>.product-variant:nth-of-type(4):last-of-type){
          grid-template-columns:repeat(4,minmax(0,1fr));
      }
  }


  @media (max-width:850px){
      #product .product-variant-container{
          grid-template-columns:repeat(4,minmax(0,1fr));
      }
  }


  /* ============================================================
     MÓVIL · DISTRIBUCIÓN ADAPTATIVA SEGÚN Nº DE VARIANTES
     ============================================================ */


  @media (max-width:600px){


      #product .product-variant-container{
          gap:8px;
      }




      /* 1 variante · tarjeta contenida, sin estirar a todo el ancho */


      #product .product-variant-container:has(>.product-variant:nth-of-type(1):last-of-type){
          grid-template-columns:minmax(0,170px);
          justify-content:start;
      }




      /* 2 variantes · dos tarjetas amplias */


      #product .product-variant-container:has(>.product-variant:nth-of-type(2):last-of-type){
          grid-template-columns:repeat(2,minmax(0,1fr));
          justify-content:initial;
      }




      /* 3 variantes · una sola fila aprovechando todo el ancho móvil */


      #product .product-variant-container:has(>.product-variant:nth-of-type(3):last-of-type){
          grid-template-columns:repeat(3,minmax(0,1fr));
          justify-content:initial;
          gap:8px;
      }




      /* 4 variantes · distribución cómoda 2 x 2 */


      #product .product-variant-container:has(>.product-variant:nth-of-type(4):last-of-type){
          grid-template-columns:repeat(2,minmax(0,1fr));
          justify-content:initial;
          gap:8px;
      }




      #product .product-variant-container>h3{
          margin-bottom:5px !important;
          font-size:16px;
      }




      /* Tarjeta móvil base */


      #product .product-variant-container>.product-variant{
          grid-template-rows:84px minmax(38px,auto);
          min-height:137px;
          padding:8px 7px 9px !important;
      }


      #product .product-variant-container>.product-variant.product-variant-selected{
          padding:7px 6px 8px !important;
      }


      #product .product-variant-container>.product-variant>img{
          width:78px !important;
          height:78px !important;
          max-width:min(100%,78px) !important;
          max-height:78px !important;
      }




      /* ============================================================
         5 O MÁS VARIANTES · COMPACTACIÓN ALTA Y PROGRESIVA
         ============================================================ */

      #product .product-variant-container:has(>.product-variant:nth-of-type(5)){
          justify-content:initial;
          gap:5px;
      }

      /* 5 variantes */
      #product .product-variant-container:has(>.product-variant:nth-of-type(5):last-of-type){
          grid-template-columns:repeat(5,minmax(0,1fr));
      }

      /* 6 variantes */
      #product .product-variant-container:has(>.product-variant:nth-of-type(6):last-of-type){
          grid-template-columns:repeat(6,minmax(0,1fr));
      }

      /* 7 o más variantes */
      #product .product-variant-container:has(>.product-variant:nth-of-type(7)){
          grid-template-columns:repeat(7,minmax(0,1fr));
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant{
          grid-template-rows:48px minmax(28px,auto);
          min-height:82px;
          padding:4px 3px 5px !important;
          border-radius:6px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant.product-variant-selected{
          padding:3px 2px 4px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>img{
          width:44px !important;
          height:44px !important;
          max-width:min(100%,44px) !important;
          max-height:44px !important;
          padding:1px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>.product-variant-name{
          padding:2px 0 0 !important;
          font-size:8.8px;
          line-height:1.12;
          letter-spacing:-.12px;
          overflow-wrap:anywhere !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant.product-variant-selected::after{
          top:3px;
          right:3px;
          width:15px;
          height:15px;
          font-size:8px;
          border-width:1.5px;
      }
  }



  /* ============================================================
     MUCHAS VARIANTES · REDUCCIÓN PROGRESIVA DE COLUMNAS
     ============================================================ */

  /* Hasta 520 px: máximo 6 columnas */
  @media (max-width:520px){

      #product .product-variant-container:has(>.product-variant:nth-of-type(6)){
          grid-template-columns:repeat(6,minmax(0,1fr));
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant{
          grid-template-rows:50px minmax(29px,auto);
          min-height:84px;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>img{
          width:46px !important;
          height:46px !important;
          max-width:min(100%,46px) !important;
          max-height:46px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>.product-variant-name{
          font-size:9px;
      }
  }


  /* Hasta 460 px: máximo 5 columnas */
  @media (max-width:460px){

      #product .product-variant-container:has(>.product-variant:nth-of-type(5)){
          grid-template-columns:repeat(5,minmax(0,1fr));
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant{
          grid-template-rows:52px minmax(30px,auto);
          min-height:86px;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>img{
          width:48px !important;
          height:48px !important;
          max-width:min(100%,48px) !important;
          max-height:48px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>.product-variant-name{
          font-size:9.2px;
          line-height:1.14;
      }
  }


  /* Hasta 390 px: mínimo previsto de 4 columnas */
  @media (max-width:390px){

      #product .product-variant-container:has(>.product-variant:nth-of-type(5)){
          grid-template-columns:repeat(4,minmax(0,1fr));
          gap:5px;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant{
          grid-template-rows:56px minmax(31px,auto);
          min-height:91px;
          padding:5px 3px 6px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant.product-variant-selected{
          padding:4px 2px 5px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>img{
          width:52px !important;
          height:52px !important;
          max-width:min(100%,52px) !important;
          max-height:52px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>.product-variant-name{
          font-size:9.6px;
          line-height:1.15;
      }
  }


  /* ============================================================
     TELÉFONOS MUY ESTRECHOS
     ============================================================ */

  @media (max-width:350px){

      #product .product-variant-container{
          gap:6px;
      }

      #product .product-variant-container>.product-variant>.product-variant-name{
          font-size:10.5px;
      }

      /* Familias de 5 o más: conservar 4 columnas */
      #product .product-variant-container:has(>.product-variant:nth-of-type(5)){
          grid-template-columns:repeat(4,minmax(0,1fr));
          gap:4px;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant{
          grid-template-rows:51px minmax(29px,auto);
          min-height:85px;
          padding:4px 2px 5px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant.product-variant-selected{
          padding:3px 1px 4px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>img{
          width:47px !important;
          height:47px !important;
          max-width:min(100%,47px) !important;
          max-height:47px !important;
      }

      #product .product-variant-container:has(>.product-variant:nth-of-type(5))>.product-variant>.product-variant-name{
          font-size:9px;
          line-height:1.12;
          letter-spacing:-.12px;
      }
  }

/* Module isolation and narrow columns; keep the reference's image maxima. */
#product .product-variant-container, #product .product-variant-container * { box-sizing:border-box; }
#product .product-variant-container { min-width:0; }
#product .product-variant-container > .product-variant { grid-template-columns:minmax(0,1fr); }
#product .product-variant-container > .product-variant > .product-variant-name { overflow-wrap:anywhere !important; }

/* Auxiliary states from 1.2.0; generated outside the grid by its unchanged JS. */
.product-variant-tooltip {
    display:none; position:fixed; border:1px solid var(--hta-cyan, #54b6c0); background-color:#f5fbfc;
    border-radius:5px; padding:10px; color:var(--hta-text, #333333); z-index:999; box-shadow:0 4px 14px rgba(10,10,120,.12);
    margin:0; box-sizing:border-box; max-width:min(320px, calc(100vw - 16px)); max-height:calc(100vh - 16px);
    white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; overflow:auto; pointer-events:none;
}
.product-variant-tooltip strong { color:var(--hta-blue, #0a0a78); }
.product-variant-blocker {
    position:fixed; top:0; left:0; z-index:999999; height:100%; width:100%;
    text-align:center; background:rgba(0,0,0,.5);
}
.product-variant-blocker i { font-size:120px; color:#fff; margin-top:70px; }