.product-wrapper {
    container-name:product-container;
    container-type: inline-size;
    
    padding-top:20px;
    padding-bottom:20px;
}

.product-card{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:space-around;
    
    gap: 30px 0px;
}



.product-card1 {
    text-align:center;
    max-width:100%;
    flex-grow:1;
    
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
    gap:20px;
    
    flex-wrap:wrap; /*НЕ ВЫКЛЮЧАТЬ*/
}

.product-gallery{
    max-width:100%;
    
    flex-grow:1;
    flex-shrink:1;
    
    flex-basis:35%
    
}




.product-info {
    flex-grow:1;
    flex-shrink:1;
    flex-basis:35%;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:center;
    
    gap: 20px;

}

.product-vendor{
    max-width:100%;
    width:100%;
    flex-grow:1;
}
.product-vendor-logo{
    max-height:50px;
    
}

.product-name{
    max-width:100%;
    width:100%;
    
}


.product-tags{
    max-width:100%;
    width:100%;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    
    flex-wrap:wrap;
    gap:10px 10px;
    
}
.product-tag{
    padding:5px 5px;
    border:1px solid #000000;
}

.product-price{
    max-width:100%;
    width:100%;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    
    flex-wrap:wrap;
    gap:10px 10px;
}
.product-price-new{
    font-size:18px;
    font-weight: bold;
}

.product-cart{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    
    gap: 0px 10px;
}
.product-count{
    max-width:40px;
    text-align:center;
}
.product-count-action{
    
}





.product-image{
    width:clamp(300px,100%,400px);
    
    max-height:400px;
    
}
.product-image-mini{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Кроет весь блок, обрезая лишнее */
    object-position: center; /* Центрирует изображение */
}



.product-card2{
    max-width:100%;
    width:100%;
    flex-grow:1;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.tab-pane-two:not(.tab-pane-show-two) {
    display: none;
}

.tab-two{
    
    background-color:#F8F4FF;
    
}
.tab-nav-two{
    
    max-width:100%;
    width:100%;
    
    padding: 0px 10px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    flex-wrap:wrap;
    
    gap: 10px;
    
    
}
.tab-btn-two{
    padding:10px 20px;
    flex-grow:1;
}
.tab-btn-active-two{
    font-weight: bold;
    background-color:#F8F4FF;
    border-bottom:none;
}

.tab-content-two{
    max-width:100%;
    width:100%;
    
}
.tab-pane-two{
    max-width:100%;
    width:100%;
    
    padding: 20px 20px;
    min-height:200px;
    
    box-sizing: border-box;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    
    
    
    
    
}

.product-options{
    width:100%;
    
    
    
}

.product-options2{
    display:flex;
    display-direction:row;
    justify-content:flex-start;
    align-items:flex-start;
    
    flex-wrap:wrap;

    gap:10px 10px;
}

.product-spec{
    margin: 0 auto;
    
    
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: flex-end;
    flex-wrap:wrap;
    
    gap:5px 5px;
    
    width: clamp(300px, 100%, 600px);
    
}



.spec-name, .spec-info {
  background: #fff; /* Фон под текстом, чтобы перекрыть точки */
  
}
.spec-name{
    color:grey;
    white-space: nowrap; 
}

.spec-dots {
  flex-grow: 1;
  border-bottom: 2px dotted #ccc; /* Точечная линия */
  margin: 0 8px;
  position: relative;
  top: -4px; /* Приподнимаем точки до уровня шрифта */
}

.spec-info{
    text-align:right;
}


.vertical-table {
  border-collapse: collapse; /* Убирает двойные рамки */
  width: 100%;               /* Таблица растягивается на всю ширину */
  /*max-width: 600px;*/          /* Ограничение максимальной ширины */
  /*font-family: sans-serif;*/
}

/* Стили для заголовков слева */
.vertical-table th {
  background-color: #f2f2f2; /* Серый фон для заголовков */
  color: #333;               /* Темный цвет текста */
  text-align: left;          /* Выравнивание текста по левому краю */
  padding: 12px;             /* Внутренние отступы */
  border: 1px solid #ddd;    /* Граница ячейки */
  width: 30px;              /* Фиксированная ширина колонки заголовков */
  font-weight: bold;
  
  text-align: center; /* Выравнивание текста по горизонтали */
  vertical-align: middle; /* Выравнивание по вертикали */
}

/* Стили для ячеек с данными */
.vertical-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
  
  text-align: center; /* Выравнивание текста по горизонтали */
  vertical-align: middle; /* Выравнивание по вертикали */
}

/* Эффект при наведении на строку для удобства чтения */
.vertical-table tr:hover {
  background-color: #f9f9f9;
}





.mobile-none{
    
}


.product-card-atlernatives{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    
}

.product-alternatives{
    flex-grow:1;
    flex-basis:25%;
    
    width:100%;
    
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    
    gap:10px 10px;
    
    
}

.product-alternative{
    background: #f5f7fa;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    
    padding:20px;
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    gap:10px 10px;
}
.alter-gallery{
    width:100%;
}
.alter-image{
    width: clamp(50px,100%,150px);
}


.alter-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    gap:10px 10px;
}

.alter-description-name{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
    gap:10px 10px;
}

.alter-name{
    font-weight: bold;
}


/* Android */
@container product-container (max-width: 500px) {
    
    .product-card1 {
        flex-direction: column;
    }
    
    .product-gallery{
        width: clamp(300px,400px,500px);
    }
    
    .vertical-table {
        font-size:14px;
    }
    .mobile-none{
        display:none;
    }
    
    .tab-pane-two{
        padding:10px 10px;   
    }
}