.variants {
	margin-top: -5px;
	margin-bottom: 15px;
	font-size: 12px;
	color: #4169E1FF
}

.variants .filter-variant {
	display: inline-block;
	margin-right: 6px;
	cursor: pointer;
	color: #000;
	user-select: none;
	padding: 3px 5px;
	border: 1px solid #ddd;
	box-sizing: border-box
}

.variants .filter-variant.selected {
	color: #ce0010;
	border-color: #ce0010
}

/*--  Страница таблицы размеров - начало ---*/
.notebook {
    white-space: nowrap;
    overflow: hidden;
}

.notebook > input {
    display: none;
}

.notebook > input + label {
    display: inline-block;
    border: 1px solid gray;
    padding: 4px;
    cursor: pointer;
    position: relative;
}

.notebook > input + label:not(:last-of-type) {
    border-right: none;
}

.notebook > input + label:hover {
    color: blue;
}

.notebook > input + label:last-of-type::after {
    display: block;
    border-bottom: 1px solid gray;
    width: 2000px;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 100%;
}

.notebook > input:checked + label {
    color: blue;
    border-bottom: none;
    padding-bottom: 5px;
}

.notebook > input:checked + label:last-of-type::after {
    bottom: 0px;
}
.notebook > div {
    white-space: normal;
    display: none;
    border: 1px solid gray;
    border-top: none;
    margin: 0px;
    padding: 2px 20px;
}

.notebook > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.notebook > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.notebook > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.notebook > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.notebook > input:nth-of-type(9):checked ~ div:nth-of-type(9),
.notebook > input:nth-of-type(10):checked ~ div:nth-of-type(10),
.notebook > input:nth-of-type(11):checked ~ div:nth-of-type(11),
.notebook > input:nth-of-type(12):checked ~ div:nth-of-type(12) {
    display: block;
}

/*--  Страница таблицы размеров - конец ---*/

/*--  Дисконтная карта - начало ---*/
.discontcard {
  width: 400px; /* или задайте другой размер */
}

@media only screen and (max-width: 768px) { /* Замените на нужную ширину экрана */
  .discontcard {
    width: 100%; /* или задайте нужный размер для мобильной версии */
  }
}
/*--  Дисконтная карта - конец ---*/