/*
** Основные переменные шаблона
*/
:root {
  --color-primary: #519381; /* 1_основной */
  --color-secondary: #ff8194; /* 2_основной */
  --color-tertiary: #d1f4f6; /* 3_основной */
  --color-black: #3b4141; /* черный */
  --color-gray: #dceded; /* серый */
  --color-darkgray: #8dacac; /* темный серый */
  --color-lightgray: #e5eeed; /* фоновой2 */
  --color-background: #f0f6f4; /* фоновой f8f8ff */
  --color-white: #fff;
  --color-text-primary: var(--color-black);
  --color-border: var(--color-lightgray);
  --color-border-secondary: var(--color-text-primary);
  --color-disabled: var(--color-lightgray);
  --color-error: #f9504d;
  --border-radius: 4px;
  --drop-shadow: 0 4px 12px rgb(86 81 132 / 10%);
  --scrollbar-width: 16px;
  --scrollbar-width-thin: 4px;
  --duration: 300ms;
  --transition: all var(--duration) ease;
  --font-primary: "Nunito", "Arial", sans-serif;
  /* Глобальные настройки переменных */
  --button-small: 32px;
  --button-medium: 44px;
  --button-large: 48px;
  --text-size-small: 12px;
  --text-size-regular: 14px;
  --text-size-medium: 16px;
  --text-size-large: 18px;
  --text-height-small: 16px;
  --text-height-regular: 18px;
  --text-height-medium: 20px;
  --text-height-large: 24px;
  --icon-size-small: 14px;
  --icon-size-regular: 16px;
  --icon-size-medium: 20px;
  --icon-size-large: 24px;
  --heading-01: 36px;
  --heading-02: 32px;
  --heading-03: 28px;
  --heading-04: 24px;
  --heading-05: 18px;
  --heading-06: 16px;
}
/*
** Основные стили
*/
html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  color: var(--color-text-primary);
  font-size: var(--text-size-medium);
  font-family: var(--font-primary);
  background-color: var(--color-background);
}
/*
** Секции
*/
.section {margin-block: 60px;}
@media all and (min-width: 1024px) {
  .section {margin-block: 80px;}
}
/*
** Заголовки основных блоков
*/
.headline {margin-bottom: 32px;text-align: center;}
.headline--navigation {display: flex;gap: 32px;align-items: center;justify-content: center;}
.headline__title {text-align: center;}
.pdtSales__inner {position: relative;padding: 80px 32px 32px;background-color: var(--color-lightgray);border-radius: 40px;}
.pdtSales__bg {position: absolute;top: -40px;left: 50%;text-align: center;transform: translateX(-50%);}
.pdtSales__bg .headline__title {
  display: inline-flex;
  justify-content: center;
  width: 500px;
  padding: 16px;
  font-size: 22px;
  background-color: var(--color-tertiary);
  border: 8px solid var(--color-white);
  border-radius: 16px;
}
@media all and (max-width: 767px) {
	.headline__title {font-size: var(--heading-04);}
}
/*
** Swiper слайдер
*/
.swiper {width: 100%;}
:is(.swiper-button-next, .swiper-button-prev) {
	--swiper-navigation-size: 48px;
	--swiper-navigation-sides-offset: 0;
	z-index: 4;
	width: var(--swiper-navigation-size);
	height: var(--swiper-navigation-size);
  background-color: rgb(255 255 255 / 40%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
  border: 1px solid var(--color-border);
  border-radius: 100%;
	transition: background var(--duration);
}
:is(.swiper-button-next, .swiper-button-prev)::after {display: none;}
/*
** Дополнительные стили для форм
*/
.form__help {
  display: block;
  margin-top: 4px;
  color: var(--color-darkgray);
  font-size: var(--text-size-small);
  line-height: var(--text-height-small);
}
/*
** Шапка
*/
#header {margin-block: 24px;}
.header__inner {
  position: relative;
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 8px;
  background-color: white;
  border-radius: 16px;
}
.header-logo {flex-shrink: 0;margin-inline: 12px;}
.header-logo__link {display: flex;}
/* Шапка. Каталог */
.header-catalog__button {width: 40px;height: 40px;border-radius: 100%;}
/* Шапка. Поиск */
.search__form {position: relative;display: none;align-items: center;width: 100%;text-align: left;}
.search__form button {position: absolute;height: 100%;padding: 0;}
.search__form button svg {flex-shrink: 0;}
.search__input {color: var(--color-text-primary);font-size: var(--text-size-regular);padding-inline: 72px 96px;border-radius: 24px;}
.search__submit {right: 16px;pointer-events: none;padding-inline: 16px;}
.search--success .search__submit {pointer-events: all;}
.search__reset {right: 52px;width: 14px;opacity: 0;pointer-events: none;}
.search--filled .search__reset {opacity: 1;pointer-events: all;}
.search__loader {
  position: absolute;
  right: 72px;
  display: flex;
  align-items: center;
  width: 24px;
  height: 100%;
  opacity: 0;
}
.search__loader span {
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 2px solid;
	border-color: var(--color-gray) transparent transparent transparent;
	border-radius: 100%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.search__loader span:nth-child(1) {animation-delay: -0.45s;}
.search__loader span:nth-child(2) {animation-delay: -0.3s;}
.search__loader span:nth-child(3) {animation-delay: -0.15s;}
.search--loading .search__loader {opacity: 1;}
@keyframes lds-ring {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
/* Шапка. Добавить в */
.addto {display: flex;gap: 16px;align-items: center;}
.addto__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  font-size: var(--text-size-regular);
}
.addto__count {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 10px;
  background-color: var(--color-tertiary);
  border-radius: 100%;
}
.addto__count[value="0"] {display: none;}
/* Шапка. Контакты */
.header-contacts {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--color-tertiary);
  border-radius: 16px;
}
.header-contacts__content {display: flex;flex-direction: column;gap: 8px;}
.header-contacts__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-primary);
  background-color: white;
  border-radius: 100%;
}
.header-contacts__label {font-size: var(--text-size-regular);}
.header-contacts__link {font-weight: bold;font-size: var(--text-size-regular);}
/* Шапка. Адаптивность */
@media all and (min-width: 1024px) {
	.header-search {position: relative;flex-grow: 1;}
	.search__icon {display: none;}
	.search__form {display: flex;}
  .header-catalog {position: absolute;top: -8px;left: -8px;z-index: 2;}
  .header-catalog__button {width: 60px;height: 60px;}
  .header-catalog__button svg {width: 30px;height: 30px;}
  .header-logo__link {width: 176px;height: 57px;}
}
@media all and (min-width: 1200px) {
  .header-search {width: 350px;}
	.header-contacts {width: 218px;}
}
@media all and (max-width: 1199px) {
	.header-contacts__content {display: none;}
}
@media all and (max-width: 1023px) {
  .header__inner {justify-content: space-between;}
  .header-logo__link {width: 134px;height: 44px;}
  .header-catalog {order: -1;}
	.header-contacts {display: none;}
	.header-search {display: contents;}
  .header-search.is-opened .search__form {
		position: absolute;
		top: 40px;
		left: 0;
		z-index: 2;
		display: flex;
		width: 100%;
	}
	.addto {display: none;}
}
/* Шапка. Меню */
#menu {margin-block: 24px;}
.mainnav__list {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
** Категории на главной
*/
.categories__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.categories__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.categories__images {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  overflow: hidden;
  background-color: var(--color-white);
  border: 3px solid var(--color-white);
  border-radius: 100%;
}
.categories__name {
  font-weight: bold;
  font-size: var(--text-size-large);
}
/*
** Товары
*/
.product__item {position: relative;}
.product__images {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 12px;
}
.product__image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 12px;
}
.product__sticker {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product__links {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product__link span {display: none;}
.product__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--color-white);
  border-radius: 100%;
  box-shadow: 0 4px 12px rgb(86 81 132 / 10%);
  fill: currentcolor;
}
.product__shop {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px 0 rgb(86 81 132 / 10%);
}
.product__name {
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: 60px;
	overflow: hidden;
	line-height: 20px;
}
.product__name span {
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
	hyphens: auto;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.product__addto {display: flex;gap: 8px;align-items: center;justify-content: space-between;width: 100%;}
.product__add {width: 34px;height: 34px;padding: 0;border-radius: 8px;}
.product__add span {display: none;}
.product__price {display: flex;flex-direction: column;align-items: flex-start;}
.price__now {font-weight: bold;font-size: var(--text-size-medium);white-space: nowrap;}
.price__old {
  position: relative;
	order: 2;
	overflow: hidden;
  font-weight: normal;
	font-size: var(--text-size-regular);
	white-space: nowrap;
  text-decoration: none;
	text-overflow: ellipsis;
}
.price__old::after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 1px;
  background-color: var(--color-secondary);
  transform: rotate(-15deg);
  content: '';
}
.price__old + .price__now {color: var(--color-secondary);}
/*
** Товары таблицей
*/
.products__grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));gap: 12px;}
.products__grid .product__image {width: 120px;height: 120px;}
.products__grid .products__shop {margin-top: 8px;}
@media all and (min-width: 480px) {
  .products__grid {grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));}
  .products__grid .product__image {width: 192px;height: 192px;}
  .product__price {flex-direction: row;gap: 8px;align-items: center;}
}
@media all and (min-width: 640px) {
  .products__grid {grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));}
  .products__grid .product__image {width: 168px;height: 168px;}
}
@media all and (min-width: 768px) {
  .products__grid {grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));}
  .products__grid .product__image {width: 212px;height: 212px;}
}
@media all and (min-width: 1200px) {
  .products__grid {grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));}
  .products__grid .product__image {width: 200px;height: 200px;}
}
/*
** Товары списком
*/
.products__list {display: grid;grid-template-columns: repeat(auto-fill, minmax(356px, 1fr));gap: 12px;}
.products__list .product__form {display: flex;background-color: var(--color-white);border-radius: 12px;}
.products__list .product__images {width: 124px;}
.products__list .product__image {width: 100px;height: 100px;}
.products__list .product__shop {flex-direction: column;gap: 6px;width: calc(100% - 124px);padding: 12px;}
.products__list .sticker + .sticker {display: none;}
.products__list .product__addto {align-items: flex-end;}