/* === Grid: 4 / 2 / 1 sloupce === */
  .p76-variant-boxes{
    display:grid;
    gap:8px;
    margin:10px 0 14px;
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  /* Tablet / ķzkż desktop ? 1199 px õ 2 sloupce */
  @media (max-width: 1199px){
    .p76-variant-boxes{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  /* Mobil ? 480 px õ 1 sloupec */
  @media (max-width: 480px){
    .p76-variant-boxes{ grid-template-columns: 1fr; }
  }

  /* === Vzhled jednoho boxu === */
  .p76-variant-box{
    padding:10px 12px;
    border:2px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    text-align:center;
    line-height:1.3;
    font:inherit;
    transition:border-color .15s, background .15s, box-shadow .15s;
    display:flex;
    flex-direction:column;
    gap:2px;
    width:100%;
  }
  .p76-variant-box:hover{ border-color:#999; }
  .p76-variant-box .p76-vb-name { font-weight:700; font-size:15px; }
  .p76-variant-box .p76-vb-stock{ font-size:12px; color:#7a7a7a; }
  .p76-variant-box .p76-vb-price{ font-weight:600; color:#111; }
  .p76-variant-box.is-active{
    border-color:#c8102e;
    background:#fff5f6;
    box-shadow:0 0 0 1px #c8102e inset;
  }
  .p76-variant-box.is-disabled{ opacity:.45; cursor:not-allowed; }

  /* SkrytŪ pývodnŪho <select> ó nechŠvŠme ho v DOM kvýli Shoptetu */
  .p76-hidden-select{ display:none !important; }