body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
	background-position: center;
	background-color: #fff;  /* Задний фон черный white black */
    font-family: Palatino, Verdana, Montserrat, Arial, sans-serif; /* Определяем шрифты */
  	line-height: 1.5; /* Просторный межстрочный интервал */

}

h1 {
	margin: 0;
	padding: 20px 20px 0 20px;
	color: #666;
    font-size: 28px;
	text-align: center;
}
h2,h3,h4 {
	border: 0px solid #ddd;
	margin: 0;
	padding: 0;	
}

a, a:link, a:visited, a:hover, a:active {
    color: #FFF; 
    text-decoration: none; 
}

#htuk {
	border: 0px solid #ddd;
	margin: 0;
	padding: 0;	
	width: 270px;
	height: 70px;
	
	display: flex;
  	justify-content: center; /* центрирование по горизонтали */
  	align-items: center; /* центрирование по вертикали */
}
	
#htDisplay {
	float: left;
	border: 0px solid #ddd;
	margin: 5px; /* Убираем отступы по умолчанию */
}

#cenaDisplay {
	float: left;
	border: 0px solid #ddd;
	margin: 0 10px 0 0;
	padding: 0;	
}

#knopkim {
	margin: 20px; /* Убираем отступы по умолчанию */
	border: 2px solid #ddd;
	border-radius: 5px;
	width: 50px;
	height: 50px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#knopkib {
	margin: 20px; /* Убираем отступы по умолчанию */
	border: 2px solid #ddd;
	border-radius: 5px;
	width: 50px;
	height: 50px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-card {
	margin: 20px; /* Убираем отступы по умолчанию */
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-image img {
    width: 300px;
    height: auto;
}

.product-info {
     padding: 15px;
     text-align: center;
}

.product-name {
	margin: 0;
	font-size: 18px;
	color: #666;
}

.product-description {
	color: #666;
	font-size: 14px;
	margin: 10px 0;
}

.buy-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s;
}

.buy-button:hover {
	background-color: #0056b3;
}
/* ********************************************************************************************* */
/* Начало Кода Зеленой кнопки Вацапа *********************************************************** */
/* ********************************************************************************************* */
/* Стили для кнопки */
.green-button {	
  display: inline-block; /* Сделаем кнопку строчно-блочным элементом */
  margin: 0px 0 0 0; /* Убираем отступы по умолчанию */	
  padding: 15px 20px; /* Отступы внутри кнопки */
  font-size: 16px; /* Размер шрифта */
  font-weight: bold; /* Жирный текст */
  color: #fff; /* Цвет текста */
  background-color: #4CAF50; /* Зеленый цвет фона */
  border: none; /* Убираем границы */
  border-radius: 4px; /* Закругляем углы */
  cursor: pointer; /* Изменяем курсор при наведении */
  text-decoration: none; /* Убираем подчеркивание у ссылок */
  outline: none; /* Убираем обводку при фокусе */
}

/* При наведении */
.green-button:hover {
  background-color: #45a049; /* Темнозеленый цвет фона */
}

/* При нажатии */
.green-button:active {
  background-color: #367c39; /* Еще темнозеленый цвет фона */
}



/* ********************************************************************************************* */
/* ********************************************************************************************* */
/* ********************************************************************************************* */


/* ********************************************************************************************* */
/* Начало Кода Синей кнопки Telegram *********************************************************** */
/* ********************************************************************************************* */

.telegram-button {
	margin: 0; /* Убираем отступы по умолчанию */	
	background-color: #0088cc; /* Цвет фона */
	color: white; /* Цвет текста */
	padding: 15px 20px; /* Отступы вокруг текста */
	text-decoration: none; /* Убираем подчёркивание */
	font-family: Arial, sans-serif; /* Шрифт текста */
	border-radius: 5px; /* Скругляем углы */
	display: inline-block; /* Делаем кнопку блочно-строчным элементом */
	font-size: 16px; /* Размер шрифта */
	font-weight: bold; /* Делает текст жирным */
}
.telegram-button:hover {
	background-color: #007bb5; /* Цвет фона при наведении */	
}
/* ********************************************************************************************* */
/* ********************************************************************************************* */
/* ********************************************************************************************* */