/* Минимальный Normalize CSS */
html {
  line-height: 1.1;
  -webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  box-sizing: border-box;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

:root {
  --color-primary: #050a30;
  --color-light: white;
  --color-orange: #dc471d;
  --color-blue: #049fc8;
  --inline-xl: 55px;
  --inline-m: 35px;
  --inline-s: 15px;
  --block-xl: 80px;
  --block-m: 50px;
}
html {
  background-color: var(--color-primary);
}
body {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* /wp-content/themes/wildfish/assets/css/*.css */

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri.woff2") format("woff2"),
    url("../fonts/ElMessiri.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik.woff2") format("woff2"),
    url("../fonts/Rubik.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.header {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-inline: var(--inline-xl);
  width: 100%;
  padding-top: 38px;
  position: sticky;
  top: 0;            /* точка прилипания */
  z-index: 2000;     /* выше контента и выпадающих меню */
}
.header .container {
position: relative; 
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-header {
  width: 172px;
  height: 100px;
}
.header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header nav a {
  color: var(--color-light);
  text-decoration: none;
  margin-right: var(--inline-m);
  font-family: "Rubik", sans-serif;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 400;
}
.menu-mobile {
  font-family: "El Messiri", sans-serif;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 400;
  display: none;
}
.search-bag {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.search-icon {
  width: 45px;
  height: 45px;
}
.bag-icon {
  width: 52px;
  height: 52px;
}
.hero {
  padding-inline: var(--inline-xl);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  padding-top: 60px;
  position: relative;
  overflow: hidden;
}
.container {
  width: 100%;
}
.hero__title h1 {
  font-family: "El Messiri", sans-serif;
  font-size: 90px;
  line-height: 1.1;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.hero__subtitle {
  padding-left: 100px;
}
.hero__location {
  padding-left: 350px;
}
.hero__description p {
  margin: 0;
}
.hero__description {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--color-light);
  width: 410px;
  margin: 45px 0 5px 350px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.hero__main-title,
.hero__subtitle,
.hero__location,
.hero__description p {
  z-index: 2;
}
.hero__icons-fishs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 78px;
}
.hero__icons-fishs img {
  width: 52px;
  height: 52px;
}
.hero__buttons {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  color: var(--color-light);
  font-family: "Rubik", sans-serif;
  line-height: 1;
  position: absolute;
  bottom: 0;
  right: var(--inline-xl);
}
.hero__buttons a {
  color: var(--color-light);
  text-decoration: none;
}
/* ===== Кнопки hero: полный CSS с заливкой снизу-вверх и кликом по всей области ===== */

/* Общие настройки ссылок внутри кнопок */
.hero__buttons a {
  color: var(--color-light);
  text-decoration: none;
}

/* ------------------------- КАТАЛОГ (оранжевая форма) ------------------------- */
.hero__button-catalog {
  position: relative;
  background-image: url("../icons/button-orange.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 25px;
  width: 264px;
  height: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ссылка-оверлей — кликается вся кнопка (включая область SVG) */
.hero__button-catalog > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* над заливкой */
  color: inherit;
  text-decoration: none;
}

/* Заливка снизу-вверх: без "точки", внутри силуэта SVG */
.hero__button-catalog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Обрезаем заливку строго по форме кнопки */
  -webkit-mask: url("../icons/button-orange.svg") center/contain no-repeat;
  mask: url("../icons/button-orange.svg") center/contain no-repeat;

  /* Градиент одним слоем, растём по Y */
  background: linear-gradient(to top, var(--color-blue) 0 0) no-repeat;
  background-position: bottom;
  background-size: 100% 0%; /* старт: 0% высоты → невидимо */

  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
  will-change: background-size;
}

/* Триггеры заливки */
.hero__button-catalog:hover::after,
.hero__button-catalog:focus-visible::after,
.hero__button-catalog:focus-within::after {
  background-size: 100% 100%; /* заполняем снизу вверх */
}

/* ------------------------- ПРЕДЗАКАЗ (синяя форма) ------------------------- */
.hero__button-preorder {
  position: relative;
  background-image: url("../icons/button-blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  width: 134px;
  height: 129px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ссылка-оверлей — кликается вся кнопка */
.hero__button-preorder > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}

/* Заливка снизу-вверх: цвет var(--color-orange), внутри силуэта SVG */
.hero__button-preorder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  -webkit-mask: url("../icons/button-blue.svg") center/contain no-repeat;
  mask: url("../icons/button-blue.svg") center/contain no-repeat;

  background: linear-gradient(to top, var(--color-orange) 0 0) no-repeat;
  background-position: bottom;
  background-size: 100% 0%;

  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
  will-change: background-size;
}

.hero__button-preorder:hover::after,
.hero__button-preorder:focus-visible::after,
.hero__button-preorder:focus-within::after {
  background-size: 100% 100%;
}

/* Уважение к prefers-reduced-motion (опционально) */
@media (prefers-reduced-motion: reduce) {
  .hero__button-catalog::after,
  .hero__button-preorder::after {
    transition-duration: 0.01ms;
  }
}

/* Контейнер без mask — чтобы hover/клик ловился везде */
.hero__button-preorder {
  position: relative;
  background-image: url("../icons/button-blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  width: 134px;
  height: 129px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ссылка-крышка: кликается вся область, текст по центру */
.hero__button-preorder > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}

/* Заливка: full-size слой + маска формы; анимируем background-size */
.hero__button-preorder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Обрезаем заливку по форме синей кнопки */
  -webkit-mask: url("../icons/button-blue.svg") center/contain no-repeat;
  mask: url("../icons/button-blue.svg") center/contain no-repeat;

  /* Градиент-заливка: рисуем только один слой, который растёт по Y */
  background: linear-gradient(to top, var(--color-orange) 0 0) no-repeat;
  background-position: bottom; /* старт у нижней кромки */
  background-size: 100% 0%; /* 0% высоты → невидимо */

  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
  will-change: background-size;
}

/* Ховер/фокус: поднимаем заливку снизу вверх */
.hero__button-preorder:hover::after,
.hero__button-preorder:focus-visible::after,
.hero__button-preorder:focus-within::after {
  background-size: 100% 100%;
}

/* (необязательно) уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__button-preorder::after {
    transition-duration: 0.01ms;
  }
}

.hero__image-fish {
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 500px;
  height: auto;
}
.hero__image-grebeshok {
  position: absolute;
  top: -20px;
  right: 0px;
  width: 400px;
  height: auto;
}
/* ================================
   SHOWCASE — новая сетка
   ================================ */

.showcase {
  padding-inline: var(--inline-xl);
  padding-block: var(--block-xl);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.showcase__items {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 15px 8px;
  align-items: stretch;
}

.showcase__item {
  grid-column: span 3;
  background-color: var(--color-light);
  border-radius: 16px;
  overflow: hidden;
  color: var(--color-primary);
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
}

.showcase__items > .showcase__item:nth-child(-n + 3) {
  grid-column: span 4;
}

.showcase__item h3 {
  font-family: "El Messiri", sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
  margin: 10px 15px 0;
}

.showcase__links {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 15px 15px 0;
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.separator img {
  width: 16px;
  height: 16px;
}

.sh__img {
  display: block;
  width: 100%;
  height: 325px;
  object-fit: cover;
  object-position: center;
}

.showcase__items > .showcase__item:nth-child(-n + 3) .sh__img {
  height: 450px;
}

/* Нижняя кнопка */
.showcase__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 39px;
  margin-top: 35px;
  color: var(--color-light);
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.showcase__bottom .fish__icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.showcase__bottom .fish__icons img {
  width: 52px;
  height: 52px;
}

.showcase__bottom .btn-orange {
  width: 258px;
}


.btn-orange {
  background-color: var(--color-orange);
  border-radius: 22px;
  padding: 10px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-light);
  width: 258px;
}
.preorder {
  padding-inline: var(--inline-xl);
  background-color: var(--color-primary);
  background-image: url("../images/preorder-bg.png");
  color: var(--color-light);
  width: 100%;
  overflow: hidden;
  height: calc(512px + var(--block-xl));
  padding-block-start: 39px;
  padding-block-end: calc(39px + var(--block-xl));
}

.preorder .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 782px;
  margin: 0 auto;
}
.preorder h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 70px;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
}
.preorder p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--color-light);
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Кнопка "ПРЕДЗАКАЗ" — заливка var(--color-orange) снизу вверх внутри силуэта preorder-button.svg */
.button-preorder {
  position: relative;
  width: 215px;
  height: 129px;
  margin-top: 35px;
  margin-bottom: 35px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url("../icons/preorder-button.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  font-family: "Rubik", sans-serif;
  font-size: 16px;
}

/* Ссылка — оверлей на весь блок (кликается вся кнопка) */
.button-preorder > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  color: inherit;
  text-decoration: none;
  z-index: 2; /* над заливкой */
}

/* Заливка: линейный градиент, растущий по Y. Маска — контур preorder-button.svg */
.button-preorder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* обрезаем заливку строго по форме кнопки */
  -webkit-mask: url("../icons/preorder-button.svg") center/contain no-repeat;
  mask: url("../icons/preorder-button.svg") center/contain no-repeat;

  /* «жидкость» — один слой, растущий снизу вверх */
  background: linear-gradient(to top, var(--color-orange) 0 0) no-repeat;
  background-position: bottom; /* старт у нижней кромки */
  background-size: 100% 0%; /* невидимо в покое */

  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
  will-change: background-size;
}

/* Hover/Focus: заполняем снизу вверх */
.button-preorder:hover::after,
.button-preorder:focus-visible::after,
.button-preorder:focus-within::after {
  background-size: 100% 100%;
}

/* (опционально) уважение к reduce motion */
@media (prefers-reduced-motion: reduce) {
  .button-preorder::after {
    transition-duration: 0.01ms;
  }
}

.preorder__afterword {
  display: flex;
  align-items: center;
  gap: 15px;
}
.choice__wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-right: var(--inline-xl);
  overflow: hidden;
}
.choice__image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38%;
  position: relative;
}
.foto-founder {
  z-index: 3;
}
.cloud-1 {
  position: absolute;
  top: -110px;
  left: -312px;
  z-index: 1;
}
.cloud-2 {
  position: absolute;
  top: -105px;
  left: -320px;
  z-index: 2;
}
.choice__second-image {
  display: none;
}
.choice__content {
  width: 60%;
  padding-block: 25px;
}
.choice__text h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 70px;
  font-weight: 400;
  margin: 0;
}
.choice__text p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.choice__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 25px;
  margin-block: 25px;
}
.choice__list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.choice__list-item img {
  width: 66px;
  height: 77px;
  margin: 0 auto;
}
.choice__list-item h3 {
  font-family: "El Messiri", sans-serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 400;
  margin: 15px 0;
  color: var(--color-blue);
  text-align: center;
  width: 100%;
}
.choice__list-item p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
  text-align: start;
  width: 100%;
}

.try {
  position: relative; /* создаём контекст для ::before */
  padding-inline: var(--inline-xl);
  padding-block: var(--block-xl);
  width: 100%;
  text-align: center;

  background-color: var(--color-primary);
  color: var(--color-light);
  z-index: 0; /* контент выше псевдо-элемента */
}

.try::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 759px; /* ← общая высота волнового фона */
  top: 50%;
  transform: translateY(calc(-50% + 40px)); /* центр + сдвиг вниз */

  background-image: url("../icons/wave-bg.svg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 105% 45px; /* ширина и вертикальный шаг */
  opacity: 0.07;
  z-index: -1;
}
.try .container {
  position: relative;
}
.try h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  position: relative;
}
.try p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--color-light);
  width: 100%;
  margin: 15px auto 25px auto;
  text-align: center;
}
.try__wrapper {
  background-color: var(--color-light);
  padding-block: 25px;
  border-radius: 22px;
  color: var(--color-primary);
  width: 792px;
  margin: 0 auto;
}
.fish-icon__right {
  transform: scaleX(-1);
}
.try__item:not(:first-child) {
  display: none;
}
.try__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.try__item h3 {
  font-family: "El Messiri", sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.try__item p {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
  color: var(--color-primary);
}
.try__item img {
  border-radius: 22px;
  max-height: 437px;
  margin-block: 10px;
  object-fit: contain;
}
.try__item h4 {
  font-family: "El Messiri", sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.try__item > .try__prices {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  margin: 0;
  color: var(--color-orange);
}
.try__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-block: 10px;
}
.btn-blue {
  background-color: var(--color-blue);
  border-radius: 22px;
  padding: 10px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-light);
  width: 258px;
}
.fish-icon__left {
  position: absolute;
  width: 52px;
  height: 52px;
  left: calc((100% - 792px) / 2 - 31px - 52px);
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
}
.fish-icon__right {
  position: absolute;
  right: calc((100% - 792px) / 2 - 31px - 52px);
  top: 50%;
  transform: translateY(-50%);
}
/* Сцена слайдов */
.try__stage {
  position: relative;
  /* высоту не задаем руками — её даст активный слайд */
}

/* ВСЕ слайды по умолчанию — абсолютные, прозрачные */
.try__stage .try__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.995);
  transition: opacity 0.38s ease, visibility 0.38s step-end,
    transform 0.38s ease;
  pointer-events: none; /* чтобы не ловили клики */
}

/* АКТИВНЫЙ слайд — возвращаем в поток, он формирует высоту сцены */
.try__stage .try__item.is-active {
  position: relative; /* ключевая строка */
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 1;
  pointer-events: auto;
}

/* Рыбки-индикаторы */
.fish__select img {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.fish__select img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .try__stage .try__item {
    transition: none;
  }
}

.about {
  position: relative;
  padding-inline: var(--inline-xl);
  color: var(--color-primary);
  width: 100%;
  padding-block: var(--block-xl);
  z-index: 0;
  overflow: hidden;
}
.about__wrapper {
  display: flex;
  flex-direction: column;
}
.about__item-wrap {
  display: flex;
  width: 100%;
}
.about::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(
    100% - 7px - var(--block-xl) * 2
  ); /* ← общая высота волнового фона */
  top: 50%;
  transform: translateY(calc(-50% + 40px)); /* центр + сдвиг вниз */

  background-image: url("../icons/wave-blue-bg.svg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 105% 45px; /* ширина и вертикальный шаг */
  opacity: 0.07;
  z-index: -1;
}
.about__content {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.about__content h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 70px;
  font-weight: 400;
  margin: 0;
}
.about__content p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.about__more {
  display: flex;
  align-items: center;
  gap: 25px;
  font-family: "Rubik", sans-serif;
  font-size: 25px;
  margin-top: 22px;
}
.about__image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-image-m {
  display: none;
}

.about__more-icon {
  display: flex;
  align-items: center;
}
.about__item-wrap-qoute {
  display: flex;
}
.about__quote-image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.about__quote-image img {
  width: 266px;
  height: auto;
}
.about__quote {
  width: 50%;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  opacity: 0.5;
}
.about__quote p {
  margin: 0;
}
.about__quote p:last-child {
  margin-left: auto;
}

.connect {
  /* padding-inline: var(--inline-xl); */
  width: 100%;
  padding-block-end: var(--block-xl);
}
.page-home .connect {
  padding-inline: var(--inline-xl);
}
.connect__wrapper {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.connect__contact-s {
  display: none;
}
.connect__map {
  position: relative;
  flex-grow: 1; /* Занимает всё доступное пространство */
  min-width: 0; /* Важно для корректного сжатия */
  overflow: hidden;
}
.map__img {
  width: 100%; /* Занимает всю ширину контейнера */
  height: 515px; /* Фиксированная высота */
  object-fit: cover; /* Обрезает изображение для заполнения контейнера */
  object-position: center; /* Центрирует обрезанное изображение */
  flex-shrink: 1; /* Запрещаем сжатие - пусть обрезается */
  border-radius: 22px;
}
.connect__contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 522px;
  flex-shrink: 0;
}
.connect__contact h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 40px;
  line-height: 63px;
  font-weight: 400;
  margin: 0 0 25px 0;
}
.connect__contact {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 50px;
  padding: 10px 25px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  border-radius: 22px;
  display: flex;
  justify-content: space-between;
  color: var(--color-primary);
}
.connect__adress,
.connect__phone,
.connect__messenger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  font-size: 16px;
}
.connect__adress-fish {
  display: flex;
  align-items: center;
  gap: 5px;
}

.connect__adress-fish img {
  width: 24px;
  height: 24px;
}
.connect__adress h3,
.connect__phone h3,
.connect__messenger h3 {
  font-size: 22px;
  margin: 0;
}
.connect__adress p,
.connect__phone p {
  margin: 0;
}
.messenger__wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.messenger__wrap a img, .contacts__messengers-wrap a img {
  width: 42px;
  height: 42px;
}
.contacts__messengers-wrap img {
    object-fit: contain; /* сохраняет пропорции */
    flex-shrink: 0; /* запрещает сжатие */
}
.connect__contact-wrap h2 {
  margin: 0;
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1.1;
  font-weight: 400;
}
.connect__contact-wrap p {
  margin: 9px 0 20px 0;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
}
.connect__form form {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.connect__form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.form-input {
  margin-bottom: 25px;
  border: 1px solid var(--color-primary);
  border-radius: 22px;
  padding: 14px 32px;
}
.connect__form textarea {
  resize: none;
  height: 129px;
  padding: 14px 32px;
  border: 1px solid var(--color-primary);
  border-radius: 22px;
  margin-bottom: 20px;
}
.connect__form label {
  font-size: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.connect__form label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid var(--color-orange) !important;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  border-radius: 3px; /* Легкое скругление */
}

.connect__form label input[type="checkbox"]:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

/* Галочка с помощью псевдоэлемента */
.connect__form label input[type="checkbox"]:checked::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}
.connect__form button {
  border: none;
}

.news {
  padding-inline: var(--inline-xl);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  padding-block: var(--block-xl);
}
.news__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 87%;
  margin-inline: auto;
}
.news h2 {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 70px;
  font-weight: 400;
  margin: 0 auto;
}
.news__item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  background-color: var(--color-light);
  border-radius: 22px;
  width: 87%;
  margin-inline: auto;
  overflow: hidden;
  color: var(--color-primary);
  padding-bottom: 25px;
}

.news__item-wrap img {
  width: 100%;
  height: 476px;
  object-fit: cover;
  border-radius: 22px;
  object-position: center;
}
.news__button {
  display: flex;
  gap: 25px;
  margin-inline: auto;
  align-items: center;
}

.news__item-wrap h3 {
  font-family: "El Messiri", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  margin: 0 auto;
}
.news__item-wrap p {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}
.news__button a {
  font-family: "Rubik", sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
}
.news__button .news-icon__right,
.news__button .news-icon__left {
  width: 52px;
  height: 52px;
  position: relative;
}
.news__button .news-icon__right {
  transform: scaleX(-1);
}
.footer {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-inline: var(--inline-xl);
  width: 100%;
  padding-block: 25px;
  position: relative;
  overflow: hidden;
}
.footer__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.footer__logo {
  width: 413px;
  height: 275px;
}
.footer__phone {
  font-family: "El Messiri", sans-serif;
  font-size: 50px;
  line-height: 78px;
  font-weight: 400;
  margin: 0;
  text-align: center;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__social img {
  width: 42px;
  height: 42px;
}

.footer__adress {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  text-align: center;
  width: 100%;
  border-top: 1px solid rgba(4, 159, 200, 1);
  padding-top: 10px;
  padding-bottom: 25px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__adress-shop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.footer__adress h4 {
  margin: 0;
}
.footer__adress-shop p {
  margin: 0;
}
.footer__adress-shop span {
  display: none;
}
.bg-octopus {
  position: absolute;
  top: 20px;
  left: -175px;
}
.bg-shrim {
  position: absolute;
  top: 20px;
  right: -175px;
}
/* Две одинаковые SVG-линии под ссылкой, вторая — сразу под первой.
   Выход за границы обрезается по ширине ссылки. Навигационный контейнер не трогаем. */

.nav__link {
  /* тонкая настройка */
  --u-h: 8px; /* высота волны (обе одинаковые) */
  --u-gap: 2px; /* зазор между линиями */
  --u-src: url("../icons/underline.svg"); /* путь к SVG */
  --u-duration: 0.45s;
  --u-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative;
  display: inline-block;
  padding: 6px 0 calc(6px + var(--u-h) * 2 + var(--u-gap)); /* место под 2 линии */
  text-decoration: none;
  color: inherit;
  overflow: hidden; /* обрезаем «хвосты» фона */
  transition: color 0.2s ease;
}

/* Общая база для обеих линий */
.nav__link::after,
.nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0; /* ширина = ширине ссылки */
  height: var(--u-h);
  background-image: var(--u-src);
  background-repeat: no-repeat;
  background-size: auto 100%; /* растягиваем по высоте */
  background-position: left bottom;
  opacity: 0;
  transform: translateX(-12%); /* «въезд» слева */
  transition: transform var(--u-duration) var(--u-ease), opacity 0.25s ease-in;
  pointer-events: none;
}

/* Верхняя (ближе к тексту) */
.nav__link::after {
  bottom: calc(var(--u-h) + var(--u-gap));
}

/* Нижняя (сразу под верхней) */
.nav__link::before {
  bottom: 0;
}

/* Hover / focus: показываем и выравниваем по месту */
.nav__link:hover::after,
.nav__link:hover::before,
.nav__link:focus-visible::after,
.nav__link:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.nav__link:focus-visible {
  outline: none;
}
.header .mobile-nav{
  position: absolute;   /* ключевой момент */
  top: 100%;            /* сразу под хедером */
  left: 0;
  right: 0;
  display: none;        /* по умолчанию скрыто */
  background: var(--color-primary);
  color: var(--color-light);
  z-index: 2100;        /* на слой выше самой шапки */
}
body.mobile-menu-open { overflow: hidden; }

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.header .mobile-nav__link {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  text-align: center;
  margin: 0;
}
/* Заливка снизу вверх при hover/focus — без псевдоэлементов.
   Работает поверх базового background-color, уважает border-radius. */

.btn-orange,
.btn-blue {
  position: relative;
  overflow: hidden; /* чтобы «заливка» не выходила за скругления */
  border-radius: 22px;

  /* Слой-заливка как дополнительный фон, растёт по Y */
  background-image: linear-gradient(to top, var(--_fill) 0 0);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%; /* старт: 0% высоты → невидимо */

  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* Цвет заливки для каждой кнопки */
.btn-orange {
  --_fill: var(--color-blue);
}
.btn-blue {
  --_fill: var(--color-orange);
}

/* Триггеры анимации (снизу вверх) */
.btn-orange:hover,
.btn-orange:focus-visible,
.btn-orange:focus-within,
.btn-blue:hover,
.btn-blue:focus-visible,
.btn-blue:focus-within {
  background-size: 100% 100%;
}

/* (опционально) меньше движений по настройкам ОС */
@media (prefers-reduced-motion: reduce) {
  .btn-orange,
  .btn-blue {
    transition-duration: 0.01ms;
  }
}

/* Анимация рыбок с паузой ~5s между циклами
   Длительность движения ≈2.2s + пауза 5s = итого 7.2s
   Движение укладываем в первые 30.56% таймлайна, дальше — стоп до 100% */

/* База для обоих контейнеров */
.fish__icons img,
.hero__icons-fishs img {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Красные: вверх → вниз → в ноль */
.fish__icons .fish-red,
.hero__icons-fishs .fish-red {
  animation: fishRedTiltHold 7.2s ease-in-out infinite;
}

/* Белые: инверсия движения */
.fish__icons .fish-white,
.hero__icons-fishs .fish-white {
  animation: fishWhiteTiltHold 7.2s ease-in-out infinite;
}

/* Лёгкая рассинхронизация внутри каждого контейнера */
.fish__icons img:nth-child(1) {
  animation-delay: 0s;
}
.fish__icons img:nth-child(2) {
  animation-delay: 0.15s;
}
.fish__icons img:nth-child(3) {
  animation-delay: 0.3s;
}
.fish__icons img:nth-child(4) {
  animation-delay: 0.45s;
}

.hero__icons-fishs img:nth-child(1) {
  animation-delay: 0.1s;
}
.hero__icons-fishs img:nth-child(2) {
  animation-delay: 0.25s;
}
.hero__icons-fishs img:nth-child(3) {
  animation-delay: 0.4s;
}
.hero__icons-fishs img:nth-child(4) {
  animation-delay: 0.55s;
}

/* Амплитуда наклона ~6°; движение в первые ~30.56% (2.2s из 7.2s) */
@keyframes fishRedTiltHold {
  0% {
    transform: rotate(0deg);
  }
  7.64% {
    transform: rotate(-6deg);
  } /* вверх */
  15.28% {
    transform: rotate(6deg);
  } /* вниз */
  22.92% {
    transform: rotate(-3deg);
  }
  30.56% {
    transform: rotate(0deg);
  } /* вернулись в ноль */
  100% {
    transform: rotate(0deg);
  } /* пауза до конца цикла */
}

@keyframes fishWhiteTiltHold {
  0% {
    transform: rotate(0deg);
  }
  7.64% {
    transform: rotate(6deg);
  } /* вниз (инверсия) */
  15.28% {
    transform: rotate(-6deg);
  } /* вверх */
  22.92% {
    transform: rotate(3deg);
  }
  30.56% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  } /* пауза до конца цикла */
}

/* Уважение к настройкам «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .fish__icons img,
  .hero__icons-fishs img {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}
.bag-link {
  position: relative;
  display: inline-block;
  line-height: 0; /* чтобы не было щели вокруг иконки */
}

.bag-link .bag-icon {
  display: block;
}

.bag-badge {
  position: absolute;
  top: 0px; /* подгони, если надо */
  left: 0px; /* «левый верхний угол» */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-orange); /* твой оранжевый */
}

.bag-badge.is-hidden {
  display: none;
}
/* === Live Product Search (overlay) === */
.search-bag {
  position: relative;
}

.live-search {
  position: absolute;
  top: 100%; /* панель под иконкой; хочешь — поставь top: 50%; transform: translateY(-50%); */
  right: 0; /* «растёт» влево от иконки */
  z-index: 1000;
  width: 360px; /* ширина поля/панели (можно 440px) */
  display: none; /* скрыто по умолчанию, чтобы не занимать место */
}

.live-search[aria-expanded="true"] {
  display: block;
}

/* Внутреннее поле */
.live-search__input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.live-search__input:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.15);
}

/* Панель результатов */
.live-search__panel {
  margin-top: 6px;
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 6px;
}

.live-search__panel[hidden] {
  display: none;
}

/* Элемент результата — делаем ССЫЛКОЙ целиком */
.ls-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  text-decoration: none; /* якорь выглядит как карточка */
  color: inherit;
}

.ls-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.ls-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f3f3;
}

.ls-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-primary);
}

.ls-price {
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-primary);
}
.ls-item--all {
  display: flex;
  justify-content: center;
  background-color: var(--color-blue);
}
/* Мобильная ширина */
@media (max-width: 640px) {
  .live-search {
    width: 80vw;
  }
}
.hero__image-fish,
.hero__image-grebeshok,
.bg-octopus,
.bg-shrim {
  mix-blend-mode: hard-light;
}

/* Try slider */
.try__item {
  display: none;
}
.try__item.is-active {
  display: block;
}
.fish__select img {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.fish__select img.is-active {
  opacity: 1;
}

/* === Modals =============================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* скрыто по умолчанию */
}
.modal.is-open {
  display: flex;
} /* показываем */
.modal {
  align-items: center;
  justify-content: center;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); /* по ТЗ */
}

.modal__dialog {
  position: relative;
  z-index: 2;
  max-width: min(800px, 92vw);
  width: 100%;
  background: var(--color-primary);
  color: var(--color-light);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  padding: 24px;
  overflow: hidden;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-color: transparent;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-orange);
}
.modal__close:focus {
  border: none;
}
/* .modal__close:hover { background: rgba(0,0,0,.06); } */

.modal__content {
  display: grid;
  gap: 25px;
  max-width: 500px;
  margin: 0 auto;
  z-index: 2;
}
.modal__content h3 {
  margin: 0;
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}
.modal__content p {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  width: 100%;
  margin-bottom: 25px;
  text-align: center;
}

.modal__content button {
  margin: 0 auto;
  align-self: center;
  justify-content: center;
}

.modal__content .modal-octopus {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 260px;
  pointer-events: none;
}
.modal__content .modal-shrim {
  position: absolute;
  top: -38px;
  right: -38px;
  width: 280px;
  pointer-events: none;
}
/* В момент открытого модального окна — блокируем прокрутку страницы */
body.modal-open {
  overflow: hidden;
}
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; }

/* Обёртка Woo остаётся штатной */
.woocommerce-message.wildfish-addtocart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: column;
  text-align: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--color-primary);
  color: var(--color-light);
  border: 0;
  box-shadow: 0;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;

}
.woocommerce-message.wildfish-addtocart::before {
  display: none;
}
/* Woo notice → наша оранжевая кнопка, 100% совместимость со стилями .btn-orange */
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart button.button.btn-orange,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart input.button.btn-orange {
  /* базовая геометрия из .btn-orange */
  width: 258px;
  height: 41px;
  padding: 10px;
  border-radius: 22px;

  /* сетка и типографика из .btn-orange */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-light);

  /* фон и анимация из .btn-orange */
  background-color: var(--color-orange) !important;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(to top, var(--_fill) 0 0);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  transition: background-size 1.2s cubic-bezier(0.22, 0.8, 0.2, 1);

  /* выпиливаем «наследство» Woo */
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* переменная заливки как в твоём коде */
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange {
  --_fill: var(--color-blue);
}

/* ховеры/фокусы — как в твоём коде */
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange:hover,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange:focus-visible,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange:focus-within {
  background-size: 100% 100%;
}

/* уважение к reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .woocommerce .woocommerce-notices-wrapper .woocommerce-message.wildfish-addtocart a.button.btn-cart.btn-orange {
    transition-duration: 0.01ms;
  }
}

.wildfish-addtocart .fish-icon__wrap {
  display: flex;
  gap: 15px;
}
.wildfish-addtocart .fish-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  opacity: 0.9;
  background: no-repeat center/contain;
}
.wildfish-addtocart .fish-icon--red {
  background-image: url("/wp-content/themes/wildfish/assets/icons/fish-red-small.svg");
}
.wildfish-addtocart .fish-icon--white {
  background-image: url("/wp-content/themes/wildfish/assets/icons/fish-white-small.svg");
}



.privacy-policy, .page-id-64677, .page-id-64717 {
  background-color: var(--color-primary);
  color: var(--color-light);

}
.privacy-policy main, .page-id-64677, .page-id-64717 main {
  padding-inline: 15px;
}
.place-order .optional {display: none;}
@media screen and (max-width: 767px) {
  .privacy-policy h1, .page-id-64677, .page-id-64717 h1 {
    font-size:32px;
    line-height: 1.1;
}
 .privacy-policy h2, .page-id-64677, .page-id-64717 h2 {
    font-size:18px;
    line-height: 1.1;
}
 .privacy-policy ul, .page-id-64677, .page-id-64717 ul {
    margin:0;
}
}

@media (max-width: 480px) {
  .woocommerce-message.wildfish-addtocart {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/*-------------------------------------------
/*
/*
/*
/*
/*
/*------------------------------------------*/

@media screen and (max-width: 1279px) {
  .header {
    padding-inline: var(--inline-m);
  }
  .logo-header {
    width: 128px;
    height: 74px;
  }
  .header nav a {
    font-size: 1.125rem;
  }
  .hero {
    padding-inline: var(--inline-m);
  }
  .hero__title h1 {
    font-size: 70px;
  }
  .hero__description {
    font-size: 16px;
    width: 462px;
    gap: 16px;
    margin: 27px 0 5px 292px;
  }
  .hero__icons-fishs {
    margin-bottom: 90px;
  }
  .hero__buttons {
    flex-direction: row-reverse;
    right: var(--inline-m);
  }
  .hero__image-grebeshok {
    width: 379px;
  }
  .hero__image-fish {
    width: 420px;
    bottom: -130px;
  }
  .hero__subtitle {
    padding-left: 81px;
  }
  .hero__location {
    padding-left: 292px;
  }
  .hero__button-catalog {
    width: 206px;
    height: 198px;
    font-size: 20px;
  }
  .showcase {
    padding-inline: var(--inline-m);
  }
  .showcase__item h3 {
    font-size: 22px;
  }
  .showcase__links {
    font-size: 14px;
  }

  .fish__icons {
    width: 267px;
    justify-content: space-between;
  }
  .showcase__button-wrap {
    flex-direction: column;
    gap: 27px;
    margin-top: 149px;
  }
  .preorder .container {
    width: 712px;
  }
  .preorder h2 {
    font-size: 40px;
  }
  .preorder p {
    font-size: 16px;
  }
  .choice__wrapper {
    padding-right: var(--inline-m);
  }
  .choice__image {
    display: none;
  }
  .choice__content {
    width: 100%;
    padding-block: 0;
  }
  .choice__content-wrap {
    display: flex;
  }
  .choice__text {
    width: 58%;
  }
  .choice__second-image {
    display: block;
    position: relative;
    width: 40%;
  }
  .choice__text h2 {
    font-size: 40px;
    line-height: 63px;
  }
  .choice__text p {
    max-width: 495px;
  }
  .foto-founder1 {
    position: relative;
    z-index: 3;
  }
  .cloud-3 {
    position: absolute;
    top: 8px;
    right: 0px;
    z-index: 1;
    height: 330px;
    width: auto;
  }
  .cloud-4 {
    position: absolute;
    top: 18px;
    right: 0px;
    z-index: 2;
    height: 330px;
    width: auto;
  }
  .choice__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-block: 25px;
    padding-left: var(--inline-m);
  }
  .choice__list-item img {
    width: 62px;
    height: 62px;
  }
  .choice__list-item h3 {
    font-size: 20px;
  }
  .choice__list-item p {
    font-size: 16px;
  }
  .try__item img {
    max-height: 346px;
  }
  .about {
    padding-inline: var(--inline-m);
    padding-block: var(--block-m);
  }

  .about__content {
    width: 60%;
  }

  .about__content h2 {
    font-size: 40px;
    line-height: 63px;
  }
  .about__content p {
    font-size: 16px;
  }
  .about__more {
    font-size: 22px;
  }
  .about__image {
    width: 38%;
  }
  .about-image-xl {
    display: none;
  }
  .about-image-m {
    display: flex;
    height: 350px;
    width: 100%;
    object-fit: cover;
    position: relative;
  }
  .about-image-m img {
    position: absolute;
    width: auto;
    height: 380px;
    object-fit: cover;
    top: -43px;
    right: -100px;
  }
  .about__quote-image {
    width: 38%;
  }
  .about__quote-image img {
    width: 183px;
    height: auto;
  }
  .about__quote {
    width: 60%;
    font-size: 16px;
  }

  .connect {
    padding-inline: var(--inline-m);
    padding-block-end: var(--block-m);
  }
  .connect__wrapper {
    flex-direction: column;
    gap: 18px;
  }
  .connect__contact-wrap {
    width: 556px;
    margin: 0 auto;
  }
  .connect__contact-wrap h2 {
    font-size: 40px;
    text-align: center;
    margin: 0 auto;
  }
  .connect__contact-wrap p {
    font-size: 16px;
    text-align: center;
    margin-inline: auto;
  }
  .connect__form label {
    font-size: 12px;
  }
  .connect__form button {
    margin: 0 auto;
  }
  .news h2 {
    font-size: 40px;
  }
  .news__item-wrap img {
    height: 600px;
  }
  .footer {
    padding-inline: var(--inline-m);
  }
  .footer__adress-shop {
    flex-direction: column;
    gap: 10px;
  }
}
/* 1024px и ниже */
@media screen and (max-width: 1023px) {
  .header {
    padding-inline: var(--inline-s);
  }
  .header nav {
    display: none;
  }
  .header .menu-mobile {
    display: block;
    background-color: var(--color-primary);
    color: var(--color-light);
    border: none;
  }

  .hero {
    padding-inline: var(--inline-s);
  }
  .hero__title h1 {
    font-size: 55px;
  }
  .hero__icons-fishs {
    margin-bottom: 152px;
  }
  .hero__buttons {
    flex-direction: row;
    gap: 10px;
    height: 265px;
  }
  .hero__description {
    width: 423px;
    margin: 27px 0 5px 152px;
  }
  .hero__subtitle {
    padding-left: 50px;
  }
  .hero__location {
    padding-left: 170px;
  }
  .hero__button-catalog {
    align-self: flex-end;
  }
  .hero__button-preorder {
    align-self: flex-start;
  }
  .hero__image-fish {
    width: 280px;
    bottom: 125px;
    left: -25px;
  }
  .hero__image-grebeshok {
    width: 250px;
    top: -10px;
    right: -50px;
  }
  .showcase {
    padding-inline: var(--inline-s);
    padding-block: var(--block-m);
  }
  
  .showcase__item h3 {
    font-size: 18px;
  }
  .showcase__button-wrap {
    gap: 15px;
    margin-top: 0;
    height: 108px;
  }
  .preorder {
    height: calc(512px + var(--block-m));
    padding-block-end: calc(39px + var(--block-m));
  }
  .preorder .container {
    width: 582px;
  }
  .preorder h2 {
    font-size: 35px;
  }
  .choice__wrapper {
    padding-right: var(--inline-s);
  }
  .foto-founder1 {
    width: 100%; /* растягивает изображение на всю ширину контейнера */
    height: auto; /* сохраняет пропорции */
    object-fit: cover; /* обеспечивает заполнение контейнера без искажений */
  }
  .choice__content-wrap {
    overflow: hidden;
  }
  .choice__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-block: 25px;
    padding-left: var(--inline-s);
  }
  .choice__text p {
    font-size: 16px;
  }
  .try {
    padding-inline: var(--inline-m);
    padding-block: var(--block-m);
  }
  .try h2 {
    font-size: 35px;
  }
  .try__wrapper {
    width: 100%;
  }
  .try-image {
    width: 100%;
  }
  .fish-icon__left,
  .fish-icon__right {
    display: none;
  }
  .about {
    padding-inline: var(--inline-s);
  }

  .about__content {
    width: 60%;
  }

  .about__content h2 {
    font-size: 35px;
    line-height: 55px;
  }
  .about__more {
    font-size: 18px;
  }
  .about__more-icon img {
    width: 35px;
    height: 35px;
  }
  .about__more-icon img:nth-child(4),
  .about__more-icon img:nth-child(5) {
    display: none;
  }
  .about__image {
    width: 38%;
  }

  .about-image-m {
    display: flex;
    height: 350px;
    width: 100%;
    object-fit: cover;
    position: relative;
  }
  .about-image-m img {
    position: absolute;
    width: auto;
    height: 380px;
    object-fit: cover;
    top: -43px;
    right: -100px;
  }
  .about__quote-image {
    width: 38%;
  }
  .about__quote-image img {
    width: 183px;
    height: auto;
  }
  .about__quote {
    width: 60%;
    font-size: 16px;
  }

  .page-home .connect {
    padding-inline: var(--inline-s);
  }
  .connect__contact-wrap {
    width: 100%;
    margin: 0;
  }
  .connect__contact-wrap h2 {
    font-size: 35px;
    text-align: left;
    margin-inline: 0 auto;
  }
  .connect__contact-wrap p {
    text-align: left;
    margin-inline: 0 auto;
  }
  .connect__form label {
    font-size: 12px;
  }
  .connect__form button {
    margin-inline: 0 auto;
  }
  .news {
    padding-inline: var(--inline-s);
    padding-block: var(--block-m);
  }
  .news h2 {
    font-size: 35px;
    line-height: 55px;
  }
  .news__item-wrap img {
    height: 476px;
  }
  .footer {
    padding-inline: var(--inline-s);
  }
  .footer__logo {
    width: 296px;
    height: 197px;
  }
  .footer__phone {
    font-size: 40px;
    line-height: 63px;
  }
  .bg-octopus {
    width: 297px;
    height: 297px;
    left: -95px;
  }
  .bg-shrim {
    width: 281px;
    height: 281px;
    right: -95px;
  }
  /* показываем мобильное меню, когда JS убрал [hidden] */
  .mobile-nav:not([hidden]) {
    display: block;
  }
}
/* 768px и ниже */
@media screen and (max-width: 767px) {
  .header {
    padding-top: 15px;
  }
  .logo-header {
    width: 106px;
    height: 61px;
  }
  .menu-mobile {
    font-size: 1.125rem;
  }
  .search-icon {
    width: 42px;
    height: 42px;
  }
  .bag-icon {
    width: 42px;
    height: 42px;
  }
  .hero__title h1 {
    font-size: 37px;
    width: 100%;
    align-items: center;
  }
  .hero__main-title,
  .hero__subtitle,
  .hero__location,
  .hero__description p {
    text-align: center;
    padding: 0;
  }
  .hero__icons-fishs {
    margin: 0 auto 10px auto;
    gap: 3px;
  }
  .hero__icons-fishs img {
    width: 42px;
    height: 42px;
  }
  .hero__description {
    width: 100%;
    margin: 25px 0;
  }
  .hero__buttons {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    justify-content: center;
    height: auto;
  }
  .hero__button-catalog {
    width: 137px;
    height: 127px;
    font-size: 18px;
  }
  .hero__button-preorder {
    width: 115px;
    height: 108px;
    align-self: flex-end;
  }
  .showcase__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

 
  .showcase__button-wrap {
    margin-top: 35px;
  }

  .preorder {
    padding-inline: var(--inline-s);
  }
  .preorder .container {
    width: 100%;
    margin: 0 auto;
  }
  .preorder h2 {
    font-size: 30px;
    line-height: 47px;
  }
  .preorder__afterword img {
    width: 35px;
    height: 35px;
  }
  .choice__text {
    padding-left: var(--inline-s);
  }
  .choice__content-wrap {
    flex-direction: row-reverse;
    overflow: visible;
  }
  .choice__second-image {
    width: 0px;
  }
  .choice__text {
    width: 100%;
  }
  .foto-founder1 {
    position: absolute;
    width: 250px;
    height: auto;
    transform: scale(0.75);
    right: -120px;
    bottom: -30px;
  }
  .cloud-3 {
    transform: scaleX(-1);
    top: 24px;
    right: -130px;
    height: 200px;
  }
  .cloud-4 {
    transform: scaleX(-1);
    position: absolute;
    top: 24px;
    right: -150px;
    height: 200px;
  }
  .choice__text p {
    max-width: 80%;
    position: relative;
    z-index: 4;
  }
  .try {
    padding-inline: var(--inline-s);
  }
  .try h2 {
    font-size: 30px;
  }
  .try p {
    font-size: 16px;
  }
  .try__item img {
    max-height: 266px;
  }
  .about__content {
    width: 80%;
  }

  .about__content h2 {
    font-size: 30px;
    line-height: 33px;
  }

  .about__image {
    width: 18%;
  }

  .about-image-m {
    display: flex;
    height: 250px;
    width: 100%;
    object-fit: cover;
    position: relative;
  }
  .about-image-m img {
    position: absolute;
    width: auto;
    height: 250px;
    object-fit: cover;
    top: -43px;
    right: -100px;
  }
  .about__quote-image {
    display: none;
  }

  .about__quote {
    width: 100%;
  }
  .connect__contact {
  bottom: 25px;
}
  .connect__contact-s {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .connect__contact .connect__phone,
  .connect__contact .connect__messenger {
    display: none;
  }
  .news__item-wrap {
    width: 100%;
  }
  .news__item-wrap h3 {
    font-family: "El Messiri", sans-serif;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    margin: 0 auto;
  }
  .news__item-wrap p {
    font-size: 16px;
    margin: 0 auto;
    padding-inline: 15px;
    width: 100%;
  }
  .news h2 {
    font-size: 35px;
    line-height: 55px;
  }

  .news__button a {
    font-size: 20px;
  }
  .news__button .news-icon__right,
  .news__button .news-icon__left {
    width: 32px;
    height: 32px;
  }
  .news__item-wrap img {
    height: 362px;
  }

  .footer__logo {
    width: 232px;
    height: 155px;
  }
  .footer__phone {
    font-size: 30px;
    line-height: 47px;
  }
  .footer__adress {
    font-size: 16px;
  }
  .bg-octopus {
    width: 253px;
    height: 253px;
    left: -105px;
    top: 0;
  }
  .bg-shrim {
    width: 201px;
    height: 201px;
    right: -85px;
    top: 125px;
  }
}
/* 480px и ниже */
@media screen and (max-width: 424px) {
  .logo-header {
    width: 78px;
    height: 45px;
  }
  .search-icon {
    width: 36px;
    height: 36px;
  }
  .bag-icon {
    width: 36px;
    height: 36px;
  }
  .hero {
    padding-top: 30px;
  }
  .hero__title h1 {
    font-size: 27px;
  }
  .hero__button-catalog {
    width: 137px;
    height: 127px;
    font-size: 16px;
  }
  .hero__button-preorder {
    width: 115px;
    height: 108px;
    font-size: 14px;
  }
  .hero__image-grebeshok {
    display: none;
  }

  .hero__image-fish {
    width: 120px;
    top: 50px;
  }

  .showcase__items {
    display: grid;
    grid-template-columns: 1fr; /* одна колонка */
    gap: 15px;
  }

  

  .preorder {
    padding-block-end: var(--block-m);
    height: calc(440px + var(--block-xl));
  }

  .preorder h2 {
    font-size: 22px;
    line-height: 34px;
  }
  .preorder p {
    font-size: 14px;
  }
  .button-preorder {
    width: 190px;
    height: 112px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 14px;
  }
  .choice__text h2 {
    font-size: 20px;
  }
  .choice__text p {
    font-size: 14px;
  }
  .choice__list-item p {
    font-size: 14px;
  }
  .cloud-3 {
    top: auto;
    bottom: -30px;
    right: -130px;
    height: 200px;
  }
  .cloud-4 {
    position: absolute;
    top: auto;
    bottom: -30px;
    right: -150px;
    height: 200px;
  }
  .choice__list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-block: 25px;
  }

  .try h2 {
    font-size: 20px;
  }
  .try p {
    font-size: 14px;
  }
  .try__item p {
    font-size: 14px;
  }
  .try__item img {
    max-height: 164px;
  }
  .btn-blue,
  .btn-orange {
    font-size: 16px;
  }

  .about__content h2 {
    font-size: 20px;
    line-height: 22px;
  }
  .about__content p {
    font-size: 14px;
  }
  .about__more {
    font-size: 16px;
  }

  .about__more a {
    text-wrap: nowrap;
    white-space: nowrap;
  }
  .about__quote {
    font-size: 14px;
  }
  .connect__adress h3,
  .connect__phone h3,
  .connect__messenger h3 {
    font-size: 16px;
  }
  .connect__adress p,
  .connect__phone p {
    font-size: 14px;
  }
  .messenger__wrap a img, .contacts__messengers-wrap a img {
    width: 32px;
    height: 32px;
  }
  .connect__contact {
    padding: 10px 15px;
  }
  .map__img {
    height: 334px; /* Фиксированная высота */
  }
  .connect__contact-wrap h2 {
    font-size: 22px;
  }
  .connect__contact-wrap p {
    font-size: 14px;
  }
  .news h2 {
    font-size: 25px;
    line-height: 39px;
  }
  .news__item-wrap img {
    height: 221px;
  }
  .news__item-wrap h3 {
    font-size: 18px;
  }
  .news__item-wrap p {
    font-size: 14px;
  }
  .news__wrapper {
    width: 100%;
  }
  .bg-octopus {
    width: 168px;
    height: 168px;
    left: -65px;
    top: 0;
  }
  .bg-shrim {
    width: 135px;
    height: 135px;
    right: -65px;
    top: 125px;
  }
  .footer__adress-shop span {
    display: block;
    height: 0;
  }
  .modal__dialog {
    position: relative;
    z-index: 2;
    max-width: min(800px, 92vw);
    width: 100%;
    background: var(--color-primary);
    color: var(--color-light);
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    padding: 10px;
    overflow: hidden;
  }

  .modal__close {
    top: 0px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: none;
    border-color: transparent;
    background: transparent;
    font-size: 22px;
  }

  .modal__content h3 {
    font-size: 27px;
  }
  .modal__content p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 25px;
  }

  .modal__content .modal-octopus {
    bottom: -10px;
    left: -10px;
    width: 160px;
  }
  .modal__content .modal-shrim {
    top: -18px;
    right: -18px;
    width: 160px;
  }
}
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*----------------delivery page-------------*/
.page-delivery {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-inline: var(--inline-xl);
  padding-top: 50px;
}
.delivery,
.pickup {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.delivery__title {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.delivery__subtitle {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  width: 100%;
  margin: 10px 0 25px 0;
}
.delivery__wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.delivery__item {
  display: flex;
  align-items: center;
  gap: 15px;
}
.delivery__img {
  width: 45px;
  height: auto;
}
.delivery__text {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  width: 100%;
  margin: 0;
}
.delivery-info {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  margin-block: 25px;
  width: 66%;
}
.delivery-conditions__title,
.payment-conditions__title,
.pickup__preorder-title,
.pickup__self-title {
  font-family: "El Messiri", sans-serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.payment-conditions,
.delivery-conditions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.delivery-conditions__item,
.payment-conditions__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.delivery-conditions__text,
.payment-conditions__text,
.pickup__preorder-shop-text,
.pickup__preorder-info-text,
.pickup__self-shop-text,
.pickup__self-info-text {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
}
.delivery-conditions__img,
.payment-conditions__img {
  width: 50px;
  height: auto;
}
.delivery-final__img {
  position: absolute;
  width: 412px;
  height: auto;
  right: 5px;
  bottom: 64px;
}
.delivery-final__text {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 400;
  margin: 25px auto 0px auto;
  width: 394px;
  text-align: center;
  align-self: center;
}

.pickup {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin-block: 50px 80px;
}
.pickup__preorder,
.pickup__self {
  flex: 1; /* Каждый элемент займет равную ширину */
  min-width: 0; /* Предотвращает проблемы с переполнением контента */
}
.pickup__preorder-desc,
.pickup__self-desc {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  margin: 20px 0 10px 0;
}
.pickup__preorder-shops,
.pickup__preorder-info,
.pickup__self-shops,
.pickup__self-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.pickup__preorder-info,
.pickup__self-info {
  margin-top: 20px;
}

.pickup__preorder-shop,
.pickup__preorder-info-item,
.pickup__self-shop,
.pickup__self-info-item {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pickup__preorder-shop-img,
.pickup__self-shop-img {
  width: 30px;
  height: 44px;
}
.pickup__preorder-info-img,
.pickup__self-info-img {
  width: 52px;
  height: 52px;
}

/* 1) Не даём первому блоку страницы создавать белую щель */
/* .site-header { margin-bottom: 0; }              
.page-delivery > *:first-child { margin-top: 0; }  */
/* убираем верхний margin у первого блока */

/* 2) Если нужен зазор — задаём его паддингом у родителя */
/* .page-delivery { padding-top: 32px; }    */
/* подгоните значение под макет */

/* 3) (Страховка от коллапса) — создаём новый форматир. контекст */
.page-delivery .delivery {
  display: flow-root;
}
/* или: overflow:auto; */

/* 4) Убедимся, что фон родителя тёмный */
/* body { background-color: var(--color-primary); }             */

/* 5) На всякий случай уберём возможную белую линию от бордера */
/* .site-header { border-bottom: none; } */
@media screen and (max-width: 1279px) {
  .page-delivery {
    padding-inline: var(--inline-m);
  }
  .page-delivery .connect {
    padding-inline: 0px;
  }
  .delivery__title {
    font-size: 40px;
  }
  .delivery__text {
    font-size: 16px;
  }
  .delivery__wrapper {
    gap: 29px;
  }
  .delivery-info {
    gap: 25px;
  }
  .delivery-conditions__title,
  .payment-conditions__title,
  .pickup__preorder-title,
  .pickup__self-title {
    font-size: 28px;
  }
  .delivery-conditions__text,
  .payment-conditions__text,
  .pickup__preorder-shop-text,
  .pickup__preorder-info-text,
  .pickup__self-shop-text,
  .pickup__self-info-text {
    font-size: 16px;
  }
  .pickup__preorder-desc,
  .pickup__self-desc {
    font-size: 16px;
  }
  .delivery-final__img {
    width: 316px;
    height: auto;
    right: 0px;
    bottom: 132px;
  }
}

@media screen and (max-width: 1023px) {
  .page-delivery .connect {
    padding-inline: 0px;
  }
  .delivery__title {
    font-size: 35px;
  }
  .delivery-conditions__title,
  .payment-conditions__title {
    font-size: 22px;
  }
  .delivery__wrapper {
    gap: 6px;
  }
  .delivery__item {
    gap: 5px;
  }
  .delivery__img {
    width: 32px;
  }
  .delivery-conditions__img,
  .payment-conditions__img {
    width: 45px;
  }
  .delivery-info {
    gap: 25px;
    width: 100%;
  }
  .delivery-final__img {
    width: 245px;
    right: 15px;
    bottom: 0px;
  }
  .delivery-final__text {
    margin: 25px auto 0px 0px;
    width: 382px;
  }
  .pickup {
    flex-direction: column;
    gap: 25px;
  }
  .pickup__preorder-details,
  .pickup__self-details {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .pickup__preorder-shops,
  .pickup__preorder-info,
  .pickup__self-shops,
  .pickup__self-info {
    flex: 1; /* обе колонки займут равную ширину */
    min-width: 0; /* предотвращает проблемы с переполнением */
  }
}

@media screen and (max-width: 767px) {
  .page-delivery {
    padding-inline: var(--inline-s);
  }
  .delivery__title {
    font-size: 25px;
  }
  .delivery__subtitle {
    font-size: 16px;
  }
  .delivery__text {
    font-size: 14px;
  }
  .delivery-conditions__text,
  .payment-conditions__text,
  .pickup__preorder-shop-text,
  .pickup__preorder-info-text,
  .pickup__self-shop-text,
  .pickup__self-info-text {
    font-size: 14px;
  }
  .pickup__preorder-desc,
  .pickup__self-desc {
    font-size: 14px;
  }
  .pickup__preorder-title,
  .pickup__self-title {
    font-size: 25px;
  }

  .delivery__img {
    width: 24px;
  }
  .delivery__wrapper {
    grid-template-columns: 1fr 1fr; /* две равные колонки */
    grid-template-rows: auto auto; /* две строки */
    gap: 15px 10px;
  }

  .delivery__item:nth-child(1),
  .delivery__item:nth-child(2) {
    grid-row: 1; /* первые два элемента в первой строке */
  }

  .delivery__item:nth-child(3) {
    grid-column: 1 / span 2; /* третий элемент занимает обе колонки */
    grid-row: 2; /* во второй строке */
    padding-inline: 80px; /* свой padding */
  }
  .delivery-conditions__img,
  .payment-conditions__img {
    width: 30px;
  }
  .delivery-info {
    flex-direction: column;
    gap: 25px;
  }
  .delivery-final__img {
    position: relative;
    width: 191px;
    margin: 0 auto;
    display: block;
  }
  .delivery-final__text {
    margin: 15px auto 0 auto;
  }
  /* .delivery__wrapper {
    grid-template-columns: 1fr; 
    gap: 10px;
  } */
}

@media screen and (max-width: 424px) {
  .delivery,
  .pickup {
    padding: 15px 10px;
  }
  .delivery__wrapper {
    grid-template-columns: 1fr; /* одна колонка */
    grid-template-rows: auto auto auto; /* три строки */
    gap: 10px; /* можно уменьшить gap для мобильных */
  }

  .delivery__item:nth-child(1),
  .delivery__item:nth-child(2),
  .delivery__item:nth-child(3) {
    grid-column: 1; /* все элементы в одной колонке */
    grid-row: auto; /* сбрасываем явное позиционирование */
    padding: 0px;
  }
  .delivery-final__text {
    width: 100%;
    font-size: 14px;
    margin: 15px auto 0 auto;
  }
  .pickup__preorder-details,
  .pickup__self-details {
    flex-direction: column;
    align-items: flex-start;
  }
  .pickup__preorder-shop-img,
  .pickup__self-shop-img {
    width: 25px;
    height: 36px;
  }
  .pickup__preorder-info-img,
  .pickup__self-info-img {
    width: 30px;
    height: 30px;
  }
}
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*----------------news page-------------*/
.archive-news {
  padding-inline: var(--inline-xl);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  padding-block: var(--block-xl);
}
.archive-news__title {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.archive-news__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 25px;
}
.news-item {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-light);
  color: var(--color-primary);
}
.news-item__image {
  width: 100%; /* Контейнер занимает всю ширину */
  aspect-ratio: 5 / 3; /* Соотношение сторон 5:3 */
  overflow: hidden;
  object-fit: cover; /* Масштабирование с обрезкой */
  object-position: center;
}
.btn-news {
  margin: 15px auto 80px auto;
}
.news-item .news-item__title {
  font-size: 22px;
  padding-inline: 15px;
  padding-top: 15px;
  line-height: 1.1;
  text-align: center;
}
.news-item .news-item__subtitle {
  font-size: 18px;
  line-height: 1.1;
  text-align: center;
  margin: 0;
}

.single-news__main {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-inline: var(--inline-xl);
  padding-block: var(--block-xl);
}
.news-hero__image {
  width: 100%; /* Контейнер занимает всю ширину */
  aspect-ratio: 5 / 4; /* Соотношение сторон 5:3 */
  overflow: hidden;
  object-fit: cover; /* Масштабирование с обрезкой */
  object-position: center;
  max-width: 856px;
}

.news-label {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.news-title {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  margin: 0;
}
.news-extra__location {
  margin: 0;
}
.news-social {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.news-hero {
  width: 100%;
  max-width: 856px;
  margin: 25px auto;
}
.news-body {
  width: 100%;
  max-width: 856px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

/*-------------------------------------------
/*
/*
/*----------------Контакты-------------------*/

.page-contacts {
  padding-inline: var(--inline-xl);
  background-color: var(--color-primary);
  color: var(--color-light);
  width: 100%;
  padding-block: var(--block-xl);
  background-image: url("../icons/bg-contact.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 120% auto;
}
.page-contacts__title {
  font-family: "El Messiri", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  margin: 0 0 40px 0;
}

.page-contacts .connect {
  padding-inline: 0px;
}
.contacts__body {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.contacts__addresses {
  flex: 0 0 60%;
  min-width: 0;
}
.contacts {
  margin-bottom: 80px;
}
.contacts__phones,
.contacts__messengers {
  flex: 1; /* по 1 части из 4 = 25% каждый */
  min-width: 0;
}
.contacts__address-item {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
.contacts__address-list {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.contacts__messengers-wrap {
  display: flex;
  gap: 10px;
}
.contacts__block-title {
  margin: 0px 0 20px 0;
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}
.contacts__addresses p,
.contacts__phones p {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}
@media screen and (max-width: 1279px) {
  .page-contacts {
    padding-inline: var(--inline-m);
    padding-block: var(--block-m);
  }
  .page-contacts__title {
    font-size: 40px;
  }
  .contacts {
    margin-bottom: var(--block-m);
  }
}
@media screen and (max-width: 1023px) {
  .page-contacts {
    padding-inline: var(--inline-s);
    background-size: 150% auto;
  }
  .page-contacts__title {
    font-size: 35px;
  }
  .contacts__block-title {
    font-size: 18px;
  }
  .contacts__addresses p,
  .contacts__phones p {
    font-size: 16px;
  }
  .contacts__address-list {
    flex-direction: column;
    align-items: flex-start;
  }
  .contacts__addresses {
    flex: 0 0 50%;
  }
}
@media screen and (max-width: 767px) {
  .page-contacts {
    background-size: 200% auto;
  }
  .page-contacts__title {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .contacts__phones,
  .contacts__messengers {
    display: none;
  }
  .contacts__address-list {
    flex-direction: row;
    align-items: flex-start;
  }
  .contacts__addresses {
    flex: 0 0 100%;
  }
}
@media screen and (max-width: 424px) {
  .page-contacts {
    background-size: 500% auto;
  }
  .contacts__address-list {
    flex-direction: column;
    align-items: flex-start;
  }
  .contacts__block-title {
    font-size: 16px;
  }
  .contacts__addresses p,
  .contacts__phones p {
    font-size: 14px;
  }
}
/*-------------------------------------------
/*
/*
/*----------------О нас--------------------*/
.page-about {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-block: var(--block-xl);
}
.about-hero,
.about-founder,
.about-features,
.about-features,
.about-found {
  padding-inline: var(--inline-xl);
}
.about-hero__title,
.about-founder__title,
.page-about .about-message__text,
.page-about .about-hero__tagline,
.page-about h3,
.page-about h4 {
  font-family: "El Messiri", sans-serif;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
}
.page-about p {
  font-family: "Rubik", sans-serif;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
}
.about-hero {
  padding-bottom: var(--block-xl);
}
.about-hero .container {
  display: flex;
  flex-direction: column;
}
.about-hero__title {
  font-size: 90px;
  width: auto;
}
.about-hero .about-hero__tagline {
  font-size: 90px;
  margin-left: 257px;
}
.about-hero .about-hero__desc {
  margin-left: 257px;
  margin-top: 6px;
  margin-bottom: 23px;
  font-size: 18px;
  width: 524px;
}

.about-founder__wrap {
  display: flex;
  align-items: flex-start; /* Выравнивание по верхнему краю */
  gap: 20px; /* Отступ между колонками */
  align-items: stretch;
  margin: 0 auto; /* Центрирование */
}

.about-founder__photo {
  width: 522px;
  height: auto; /* Сохранение пропорций изображения */
  max-height: 695px;
  object-fit: cover; /* Обрезка изображения, если нужно */
  border-radius: 16px;
}

.about-founder__text {
  flex: 1; /* Правая колонка занимает оставшееся пространство */
  display: flex;
  flex-direction: column; /* Вертикальное расположение текста */
  gap: 30px; /* Отступ между элементами текста */
}
.about-founder__title {
  font-size: 35px;
}
.about-founder__lead {
  font-size: 18px;
}

.about-founder__title,
.about-founder__lead {
  margin: 0; /* Убираем стандартные отступы */
}
.about-founder__lead {
  width: 520px;
}
.mobile-view {
  display: none;
}
.about-founder-desc__wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  width: 100%;
}
.about-founder__fish {
  width: 100%; /* Растягиваем на всю ширину контейнера */
  max-height: 411px; /* Максимальная высота */
  height: auto; /* Сохранение пропорций по высоте */
  object-fit: cover; /* Обрезаем по высоте, если больше 411px */
  border-radius: 16px; /* Скругление углов */
}
.about-message {
  width: 100%;
  padding-block: var(--block-xl);
  background-image: url("../icons/bg-contact.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 120% auto;
}
.about-features {
  padding-bottom: var(--block-xl);
}
.about-message__text {
  font-size: 45px;
  text-align: center;
}
.about-features__grid {
  margin-top: 20px;
  display: flex;
}

.about-cta {
  display: flex;
  gap: 30px;
}
.about-features__title,
.about-found__title {
  font-size: 35px;
}
.about-features__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.feature-item {
  font-size: 18px;
}
.about-features__img.desktop-view {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-width: 550px;
}
.about-features__img img {
  border-radius: 16px;
  width: 95%;
  height: auto;
  max-height: 640px;
}
.about-found {
  padding-block: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: var(--block-xl);
}
.about-found__title {
  margin-bottom: 25px;
}
.about-found__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
}
.about-found__item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.about-found__item h4 {
  font-size: 28px;
}
.about-found__item p {
  font-size: 18px;
}
.about-found__item img {
  height: 110px;
  width: auto;
}
.page-404 {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-block: var(--block-xl);
  padding-inline: var(--inline-xl);
}
.page-404__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-404__title {
  font-family: "El Messiri", sans-serif;
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 25px 0;
  font-size: 90px;
}
.page-404__subtitle,
.page-404__lead,
.page-404__actions,
.page-404__phone {
  font-family: "Rubik", sans-serif;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  font-size: 18px;
}
.page-404__lead {
  width: 792px;
}
.page-404__lead:first-of-type {
  margin-bottom: 20px;
}
.page-404__research {
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 25px 0;
}
.page-404__research img {
  width: 24px;
  height: 24px;
}
.page-404__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: start;
  cursor: pointer;
  padding: 0;
}
.page-404__phone {
  margin-top: 20px;
}

@media screen and (max-width: 1279px) {
  .about-hero,
  .about-founder,
  .about-features,
  .about-features,
  .about-found {
    padding-inline: var(--inline-m);
  }
  .about-hero__title {
    font-size: 65px;
  }
  .about-hero .about-hero__tagline {
    font-size: 65px;
    margin-left: 220px;
  }
  .about-hero .about-hero__desc {
    margin-left: 398px;
    width: 496px;
    margin-bottom: 0;
  }
  .about-founder__fish {
    height: 404px;
    object-fit: cover;
  }
  .about-founder__title {
    font-size: 28px;
  }
  .about-founder__lead {
    width: 100%;
  }
  .page-404 {
    padding-inline: var(--inline-m);
  }
  .archive-news {
    padding-inline: var(--inline-m);
  }
  .single-news__main {
    padding-inline: var(--inline-m);
  }
}

@media screen and (max-width: 1023px) {
  .page-about {
    padding-block: var(--block-m);
  }

  .about-hero,
  .about-founder,
  .about-features,
  .about-features,
  .about-found {
    padding-inline: var(--inline-s);
  }
  .about-hero {
    padding-bottom: var(--block-m);
  }
  .about-hero__title {
    font-size: 45px;
  }
  .about-hero .about-hero__tagline {
    font-size: 45px;
    margin-left: 262px;
  }
  .about-hero .about-hero__desc {
    margin-left: 262px;
    width: 445px;
  }
  .desktop-view {
    display: none;
  }
  .mobile-view {
    display: block;
  }
  .about-founder__lead {
    padding-top: 25px;
  }
  .about-founder__photo {
    width: 373px;
  }
  .about-message {
    padding-block: var(--block-m);
  }
  .about-message__text {
    font-size: 40px;
  }
  .about-features {
    padding-bottom: var(--block-m);
  }
  .about-features__img.desktop-view {
    display: none;
  }
  .about-features__img img {
    border-radius: 16px;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 325px;
    padding-bottom: 20px;
  }
  .about-found {
    margin-bottom: var(--block-m);
  }
  .about-found__wrap {
    grid-template-columns: 1fr 1fr;
  }
  .page-404 {
    padding-block: var(--block-m);
    padding-inline: var(--inline-s);
  }
  .page-404__lead {
    width: 100%;
  }
  .archive-news {
    padding-inline: var(--inline-s);
    padding-block: var(--block-m);
  }
  .single-news__main {
    padding-inline: var(--inline-s);
    padding-block: var(--block-m);
  }
}
@media screen and (max-width: 767px) {
  .about-hero__title {
    font-size: 35px;
    margin: 0 auto;
  }
  .about-hero .about-hero__tagline {
    font-size: 35px;
    margin: 0 auto;
  }
  .about-hero .about-hero__desc {
    margin: 0 auto;
    width: 445px;
    font-size: 16px;
    text-align: center;
  }
  .about-founder__wrap {
    flex-direction: column;
  }
  .about-founder__photo {
    width: 100%;
    object-position: top;
  }
  .about-founder-desc__wrap {
    gap: 15px;
  }
  .archive-news__wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-cta {
    flex-direction: column;
    gap: 20px;
  }
   .about-hero .about-hero__desc {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
  }
}
@media screen and (max-width: 424px) {
  .about-hero__title {
    font-size: 25px;
  }
  .about-hero .about-hero__tagline {
    font-size: 25px;
  }
  /* .about-hero .about-hero__desc {
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
  } */
  .about-message__text {
    font-size: 25px;
    padding-inline: var(--inline-s);
  }
  .about-message {
    background-size: 200% auto;
  }
  .about-features__title,
  .about-found__title {
    font-size: 28px;
  }
  .feature-item {
    font-size: 16px;
  }
  /* .about-cta {
    flex-direction: column;
    gap: 20px;
  } */
  .about-found__wrap {
    grid-template-columns: 1fr;
  }
  .about-found__item h4 {
    font-size: 25px;
  }
  .about-found__item p {
    font-size: 16px;
  }
  .about-found__item img {
    height: 80px;
    width: auto;
  }
  .page-404__title {
    font-family: "El Messiri", sans-serif;
    font-size: 35px;
  }
  .page-404__subtitle,
  .page-404__lead,
  .page-404__actions,
  .page-404__phone {
    font-size: 16px;
  }
  .btn-news {
    margin: 15px auto 40px auto;
  }
  .news-title {
    font-size: 30px;
  }
  .news-subtitle,
  .news-text,
  .news-extra__location {
    font-size: 16px;
  }
}


@media screen and (min-width: 1441px) {
   .footer {
    overflow: visible;
   }
}

@media screen and (max-width: 1279px) {
  .showcase {
    padding-inline: var(--inline-m);
  }

.showcase__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.showcase__item,
.showcase__items > .showcase__item:nth-child(-n + 3) {
  grid-column: auto;
}

.sh__img,
.showcase__items > .showcase__item:nth-child(-n + 3) .sh__img {
  height: 365px;
}

  .showcase__item h3 {
    font-size: 22px;
  }

  .showcase__links {
    font-size: 14px;
  }


  .showcase__bottom {
    flex-direction: column;
    gap: 27px;
    margin-top: 35px;
  }

  .showcase__bottom .fish__icons {
    width: 267px;
    justify-content: space-between;
  }
}

/* ≤1023px */
@media screen and (max-width: 1023px) {
  .showcase {
    padding-inline: var(--inline-s);
    padding-block: var(--block-m);
  }

  .showcase__item h3 {
    font-size: 18px;
  }

.sh__img,
.showcase__items > .showcase__item:nth-child(-n + 3) .sh__img {
  height: 210px;
}

  .showcase__bottom {
    gap: 15px;
  }
}

/* ≤767px: 1 колонка */
@media screen and (max-width: 767px) {
.showcase__items {
  grid-template-columns: 1fr;
}

.showcase__item,
.showcase__items > .showcase__item:nth-child(-n + 3) {
  grid-column: auto;
}

.sh__img,
.showcase__items > .showcase__item:nth-child(-n + 3) .sh__img {
  height: 248px;
}

  .showcase__bottom {
    margin-top: 25px;
  }
}