Wybór Rozmiarów - wersja prosta wizualne

style.less

@@ -131,6 +131,14 @@
     top: -1px;
     transition: all 0.3s;
     border-radius: 5px;
+    &:after{
+      content: "";
+      position: absolute;
+      opacity: 0;
+      height: calc(100% + 8px);
+      top: -4px;
+      width: 100%;
+    }
 }
 
 
@@ -400,24 +408,28 @@
   gap: 1rem;
   padding: 0.3rem;
   background: #fff;
+  width: 100%;
   input[type="radio"]{
     display: none;
   }
   .product__size_select{
-    width: 4.5rem;
+    // width: 4.5rem;
+    width: calc(26% - 1.5rem);
     height: 4.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     border: 1px solid #ccc;
-    transition: border 0.2s;
-    &:hover{
-      border-color: #000;
-    }
-    &:not(:has(input:checked)){
-      cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    border-radius: 8px;
+
+    &:has(input:disabled){
+      opacity: 0.6;
+      cursor: not-allowed!important;
     }
+    
     &:has(input:checked){
       box-shadow: 0 0 0 1px #000;
       border-color: #000;
@@ -433,6 +445,14 @@
     top: calc(100%);
     padding-top: 1rem;
   }
+  .product__select_sizes .product__size_select{
+    &:hover:not(:has(input:disabled)){
+      border-color: #000;
+    }
+    &:not(:has(input:checked)){
+      cursor: pointer;
+    }
+  }
   .product:hover .product__select_sizes{
     clip-path: inset(0 0 0 0);
   }