html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
body::-webkit-scrollbar {
  display: none;
}
* {
  -webkit-tap-highlight-color: transparent;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul,
li {
  list-style: none;
}

input,
select {
  vertical-align: middle;
}
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html,
body {
  position: relative;
  font-family: 'Nunito', sans-serif;
  font-size: 1vw;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
  background: #fff;
  color: #231f20;
  /* overflow: hidden; */
  width: 100vw;
  /* height: auto; */
  height: 100%;
}
.body {
  min-width: 320px;
}
.body.no-scroll {
  overflow: hidden;
}
@media (max-width: 999px) {
  html,
  body {
    font-size: 16px;
  }
}
.container {
  max-width: 168.89vh;
  padding: 0 1.48vh;
  margin: auto;
  width: 100%;
}
button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.main {
  /* overflow: hidden; */
}
#wpadminbar {
  position: fixed !important;
  top: 0 !important;
}
@media (max-width: 600px) {
  #wpadminbar {
    top: -46px;
  }
}
#wpadminbar + .header {
  top: 46px;
}
#wpadminbar + .header {
  top: 32px;
}
#wpadminbar + .header .header__menu-close {
  margin-top: 32px;
}
@media (max-width: 782px) {
  #wpadminbar + .header {
    top: 46px;
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100vw;
  transition: 0.2s ease;
}
.header.scrolled {
  background: #fff;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3vh 0 1.67vh;
  gap: 2.22vh;
  transition: all 0.2s ease;
}
.header__logo {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 13.89vh;
}
.header__logo svg {
  width: 100%;
  height: auto;
}

.header__menu {
  margin-left: auto;
}
.header__menu-track {
  position: relative;
}
.header__menu ul {
  display: flex;
  align-items: center;
  gap: 4.44vh;
}
.header__menu ul li a {
  display: flex;
  max-width: max-content;
  color: #fff;
  font-size: 1.85vh;
  font-weight: 500;
  line-height: 2.59vh; /* 140% */
  position: relative;
  padding-bottom: 0.56vh;
  transition: all 0.2s ease;
}
.header__menu ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.19vh;
  border-radius: 0.19vh;
  background-color: #e5e28b;
  opacity: 0;
  transition: all 0.2s ease;
}
.header__menu ul li a:hover::after {
  opacity: 1;
}

.menu-underline {
  position: absolute;
  bottom: 0;
  height: 0.19vh;
  background-color: #e5e28b;
  border-radius: 0.19vh;
  transition: all 0.65s ease;
  width: 0;
  left: 0;
}
.header__lang {
  position: relative;
  z-index: 1;
}
.header__lang-selected {
  display: flex;
  gap: 0.19vh;
  color: #fff;
  font-size: 1.67vh;
  font-weight: 500;
  line-height: 2.59vh;
  border-radius: 3.7vh;
  border: 0.09vh solid rgba(255, 255, 255, 0.2);
  padding: 0.65vh 0.74vh 0.65vh 1.11vh;
  height: 4.07vh;
  transition: all 0.2s ease;
}
.header__lang-selected::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_4_1853' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4_1853)'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  width: 2.22vh;
  height: 2.22vh;
  min-width: 2.22vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  transition: all 0.2s ease;
}
.header__lang-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: -1;
  right: 0;
  top: 0;
  background-color: #fff;
  left: 0;
  padding: 4.07vh 0.74vh 0.65vh 1.11vh;
  border-radius: 1.85vh 1.85vh;
  transition: all 0.2s ease;
  opacity: 0;
  pointer-events: none;
  border: 0.09vh solid transparent;
  border-top: none;
}
.header__lang-content a {
  color: #231f20;
  font-size: 1.67vh;
  font-weight: 500;
  line-height: 2.59vh;
  transition: all 0.2s ease;
}
.header__lang-content a:hover {
  color: #e5e28b;
}
.header__lang.active .header__lang-selected {
  border-radius: 1.85vh 1.85vh 0 0;
  background-color: #fff;
  color: #231f20;
  border-bottom: none;
}
.header__lang.active .header__lang-selected::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_4_1853' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4_1853)'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='%23231F20'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.header__lang.active .header__lang-content {
  opacity: 1;
  pointer-events: all;
}
.header__menu-close,
.header__burger {
  display: none;
}
.header__burger svg path,
.header .header__logo svg path {
  transition: all 0.2s ease;
}
.header.scrolled .header__logo svg path {
  fill: #000;
}
.header.scrolled .header__menu ul li a {
  color: #231f20;
}
.header.scrolled .header__lang-selected {
  color: #231f20;
  border-color: rgba(0, 0, 0, 0.2);
}
.header.scrolled .header__lang-selected::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_8_331' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_8_331)'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}
.header.scrolled .header__lang-content {
  border-color: rgba(0, 0, 0, 0.2);
}
.header.scrolled .header__burger svg path {
  fill: #231f20;
}

.header__whatsapp {
  font-size: 14px;
  border-radius: 100px;
  border: 1px solid #25d366;
  background: #25d366;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  color: #fff;
  transition: 0.2s ease;
  font-weight: 600;
}
.header__whatsapp span {
  display: flex;
  align-items: center;
}
.header__whatsapp:hover {
  background: #fff;
  color: #25d366;
}
.header__whatsapp svg path {
  transition: 0.2s ease;
}
.header__whatsapp:hover svg path {
  fill: #25d366;
}
@media (max-width: 1200px) {
  .container {
    padding: 0 16px;
  }
  .header__inner {
    gap: 12px;
  }
  .header__menu {
    position: fixed;
    inset: 0;
    width: 100%;
    background-color: hsla(0, 0%, 0%, 0.7);
    z-index: 100;
    overflow: hidden;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
    width: 100vw;
    margin-left: 0;
  }
  .header__menu-track {
    flex-direction: column;
    background-color: #fff;
    max-width: 46.3vh;
    margin-left: auto;
    height: 100%;
    padding: 7.41vh 1.85vh 3.7vh;
    transform: translateX(100%);
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
  }
  .header__menu-track ul {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    overflow: auto;
  }
  .header__menu.active {
    opacity: 1;
    pointer-events: all;
  }
  .header__menu.active .header__menu-track {
    transform: translateX(0%);
  }
  .menu-underline {
    display: none;
  }
  .header__menu ul li a {
    color: #231f20;
  }
  .header__menu ul li a.active::after {
    opacity: 1;
  }
  .header__menu-close {
    position: absolute;
    z-index: 10;
    top: 1.48vh;
    right: 1.48vh;
  }
  .header__menu-close,
  .header__burger {
    display: flex;
  }
}
@media (max-width: 767px) {
  .header__whatsapp {
    padding: 8px;
  }
  .header__whatsapp span {
    display: none;
  }
}
@media (max-width: 479px) {
}
.hero {
  z-index: 1;
  overflow: hidden;
  position: relative;
  inset: 0;
  /* 	height: 100dvh; */
  /* height: calc(var(--vh, 1vh) * 100); */
}
.hero__video {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: -1;
  inset: 0;
  /* opacity: 0; */
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__video::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 77.04%, rgba(0, 0, 0, 0.5) 100%);
}
.hero__video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
}
.hero__inner {
  padding: 5.56vh 0 1.85vh;
  /* height: calc(var(--vh, 1vh) * 100); */
  height: 100dvh;
  min-height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.hero__title {
  color: #fff;
  text-align: center;
  font-size: 13.89vh;
  font-weight: 600;
  line-height: 110%;
  text-transform: uppercase;
}
.hero__descr {
  text-align: center;
  color: #fff;
  font-size: 3.7vh;
  font-weight: 600;
  line-height: 110%;
}
.hero__descr span {
  padding: 0 0.93vh;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.hero__descr span::before {
  content: '';
  position: absolute;
  bottom: -0.28vh;
  left: 0;
  right: 0;
  height: 3.98vh;
  border: 0.09vh solid #fff;
  border-radius: 9.26vh;
  z-index: -1;
}
.hero__btn {
  position: relative;
  width: 17.78vh;
  height: 17.78vh;
  min-width: 17.78vh;
  border-radius: 50%;
  background-color: #fff;
  margin-top: 3.7vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__btn-icon {
  z-index: 2;
  position: relative;
  width: 11.85vh;
  height: 11.85vh;
  min-width: 11.85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e5e28b;
}
.hero__btn-icon svg {
  width: 4.44vh;
  height: auto;
}
.hero__btn-text {
  position: absolute;
  width: 87%;
  height: 100%;
  animation: rotationText 20s linear infinite;
}
.hero__btn-text textPath {
  text-transform: uppercase;
  font-size: 1.2vh;
  font-weight: 400;
  line-height: 2.59vh;
  letter-spacing: 0.87vh;
  text-transform: uppercase;
}
@keyframes rotationText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1279px) {
}
@media (max-width: 999px) {
}
@media (max-width: 767px) {
}
@media (max-width: 479px) {
  .hero__title {
    font-size: 10vh;
  }
}
/* about */
.about {
  z-index: 10;
  position: relative;
  /* 	min-width: 600px; */
}
.about .section-inner {
  position: relative;
}
.about .section-inner::after {
  content: '';
  position: absolute;
  background-image: url('https://www.caspitfruits.com.ua/wp-content/uploads/2025/08/apple.png');
  width: 36.2vh;
  height: 36.2vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0.65vh;
  right: -16.39vh;
  z-index: 1;
}
.about__inner {
  /* 	max-width: 137.59vh; */
  margin: 0 auto;
  width: 100%;
  padding: 5.56vh 0 1.85vh;
  display: flex;
  align-items: center;
  gap: 3.7vh;
  justify-content: space-between;
}
.about__content {
  width: 100%;
  /* 	max-width: 66.94vh; */
}
.about__content h2,
.about__title {
  font-size: 7.41vh;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 2.96vh;
}
.about__content p + p,
.about__descr + .about__descr {
  margin-top: 2.22vh;
}
.about__image {
  /* height: 69.72vh; */
  height: auto;
  width: 100%;
  max-width: 64.19vh;
  display: flex;
  align-items: center;
  border-radius: 1.85vh;
  overflow: hidden;
}
.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 1200px) {
  .about .section-inner::after {
    bottom: -40px;
  }
}
@media (max-width: 1024px) {
  .about .section-inner::after {
    width: 20vh;
    height: 20vh;
    right: -10vh;
  }
}
@media (max-width: 767px) {
  .about__inner {
    flex-direction: column;
  }
  .about__image {
    height: auto;
  }
}
@media (max-width: 479px) {
}

/* certificates */
.certificates {
  background-color: #231f20;
  color: #fff;
  position: relative;
  z-index: 10;
}
.certificates .section-inner {
  padding: 5.56vh 0;
}
.certificates__inner {
  display: flex;
  align-items: center;
  gap: 3.7vh;
  flex-wrap: wrap;
}
.certificates__content {
  flex: 1;
  min-width: 280px;
}
.certificates__icon {
  width: 4.63vh;
  height: 4.63vh;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  border: 0.19vh solid #e5e28b;
  border-radius: 1.85vh;
  margin-bottom: 2.22vh;
  color: #fff;
}
.certificates__icon svg {
  width: 55%;
  height: 55%;
}
.certificates__title {
  font-size: 5.56vh;
  font-weight: 600;
  line-height: 120%;
  margin: 0 0 2.96vh;
  color: #fff;
}
.certificates__text {
  font-size: 1.85vh;
  font-weight: 400;
  line-height: 130%;
  margin-bottom: 1.85vh;
}
.certificates__text p {
  margin: 0 0 1.11vh;
}
.certificates__text p:last-child {
  margin-bottom: 0;
}
.certificates__line {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 2.22vh 0;
}
.certificates__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e28b;
  color: #231f20;
  padding: 1.2vh 2.31vh;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.67vh;
  line-height: 140%;
  border-radius: 4.63vh;
  transition: background-color 0.2s, color 0.2s;
}
.certificates__btn:hover {
  background-color: #d4d16e;
  color: #1a1819;
}
.certificates__gallery {
  flex: 0 1 auto;
  position: relative;
  min-height: 32vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.85vh;
  flex-wrap: wrap;
  max-width: 100%;
}
.certificates__cert {
  position: relative;
  box-shadow: 0 4px 20px #00000059;
  border-radius: 1.85vh;
  overflow: hidden;
  width: 24vh;
  max-width: 28vh;
  min-width: 180px;
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  display: block;
  transition: transform 0.25s ease;
}
.certificates__cert:hover {
  transform: translateY(-4px);
}
.certificates__cert img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
@media (max-width: 1279px) {
  .certificates__cert {
    width: 22vh;
    min-width: 160px;
  }
}
@media (max-width: 1024px) {
  .certificates__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2.96vh;
  }
  .certificates__gallery {
    justify-content: flex-start;
    min-height: 0;
  }
  .certificates__cert {
    width: clamp(160px, 26vw, 240px);
    min-width: 160px;
    max-width: 240px;
  }
}
@media (max-width: 767px) {
  .certificates__inner {
    flex-direction: column;
    gap: 2.96vh;
  }
  .certificates__content {
    order: 1;
  }
  .certificates__gallery {
    order: 2;
    width: 100%;
    min-height: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 16px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .certificates__gallery::-webkit-scrollbar {
    height: 6px;
  }
  .certificates__gallery::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
  }
  .certificates__cert {
    width: 60vw;
    min-width: 180px;
    max-width: 260px;
    scroll-snap-align: start;
  }
  .certificates__cert:hover {
    transform: none;
  }
}
@media (max-width: 479px) {
  .certificates__cert {
    width: 70vw;
    min-width: 160px;
  }
}

/* certificates lightbox — над шапкой */
.certificates-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.7vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
.certificates-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.certificates-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.certificates-lightbox.is-open .certificates-lightbox__content {
  transform: scale(1);
  opacity: 1;
}
.certificates-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 1.85vh;
  transition: opacity 0.2s ease;
}
.certificates-lightbox__img.is-changing {
  opacity: 0;
}
.certificates-lightbox__close,
.certificates-lightbox__prev,
.certificates-lightbox__next {
  position: absolute;
  z-index: 10;
  width: 4.63vh;
  height: 4.63vh;
  min-width: 48px;
  min-height: 48px;
  border: none;
  border-radius: 4.63vh;
  background: #e5e28b;
  color: #231f20;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  font-weight: 600;
}
.certificates-lightbox__close svg,
.certificates-lightbox__prev svg,
.certificates-lightbox__next svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.certificates-lightbox__close:hover,
.certificates-lightbox__prev:hover,
.certificates-lightbox__next:hover {
  background: #d4d16e;
  transform: scale(1.05);
}
.certificates-lightbox__close {
  top: 2.22vh;
  right: 2.22vh;
}
.certificates-lightbox__prev {
  left: 2.22vh;
  top: 50%;
  transform: translateY(-50%);
}
.certificates-lightbox__prev:hover {
  transform: translateY(-50%) scale(1.05);
}
.certificates-lightbox__next {
  right: 2.22vh;
  top: 50%;
  transform: translateY(-50%);
}
.certificates-lightbox__next:hover {
  transform: translateY(-50%) scale(1.05);
}

/* ourprod */
.ourprod {
  z-index: 15;
  overflow: hidden;
  position: relative;
  /* 	min-width: 900px; */
}
.ourprod .section-inner {
  position: relative;
}
.ourprod .section-inner::before {
  content: '';
  position: absolute;
  background-image: url('https://www.caspitfruits.com.ua/wp-content/uploads/2025/08/apple.png');
  width: 36.2vh;
  height: 36.2vh;
  background-position: center;
  background-repeat: no-repeat;
  top: 0.65vh;
  left: -19.81vh;
  z-index: 1;
  background-size: contain;
}
.ourprod__inner {
  /* 	max-width: 137.59vh; */
  margin: 0 auto;
  width: 100%;
  padding: 7.41vh 0 1.85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.7vh;
  justify-content: space-between;
}
.ourprod__top {
  position: relative;
  z-index: 2;
}
.ourprod__name {
  text-align: center;
  margin: 0 auto;
  max-width: max-content;
  text-align: center;
  font-size: 2.04vh;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.28vh;
  border-radius: 1.85vh;
  background: #e5e28b;
  display: flex;
  padding: 0.37vh 1.48vh;
  justify-content: center;
  align-items: center;
  gap: 0.93vh;
}
.ourprod__title {
  text-align: center;
  font-size: 7.41vh;
  font-weight: 600;
  line-height: 120%;
  margin-top: 1.48vh;
}
.ourprod__about {
  text-align: center;
  max-width: 81.2vh;
  margin: 1.48vh auto 0;
}
.ourprod__content {
  width: 100%;
  margin-top: 5.5vw;
  display: flex;
  align-items: start;
  gap: 0;
  position: relative;
  z-index: 1;
  justify-content: space-between;
}
.ourprod__image {
  width: 72%;
  max-width: 98.89vh;
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  z-index: -1;
  height: 50vh;
}

.ourprod__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.ourprod__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(27.78vh);
  transition: all 1s ease;
}
.ourprod.animated .ourprod__image img {
  transform: translateY(0);
  opacity: 1;
}
.ourprod__block > p,
.ourprod__descr {
  padding: 1.85vh 0;
}
.ourprod__block {
  display: flex;
  flex-direction: column;
  gap: 2.78vh;
  max-width: 37.04vh;
  width: 27%;
}
.ourprod__block:first-child {
  gap: 2.22vh;
}
.ourprod__block-content {
  padding: 1.48vh;
  border-radius: 0 4.44vh 4.44vh 4.44vh;
  background: #faf3e8;
  display: flex;
  gap: 1.85vh;
  align-items: start;
}
.ourprod__block-icon {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 10.19vh;
}
.ourprod__block-icon img {
  width: 100%;
}
.ourprod__block-descr {
  font-size: 1.3vh;
  font-weight: 600;
  line-height: 140%;
}
.ourprod__block > p,
.ourprod__descr {
  position: relative;
  z-index: 1;
}
.ourprod__block > p::after,
.ourprod__descr::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 10.56vh;
  height: 10.56vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='117' height='115' viewBox='0 0 117 115' fill='none'%3E%3Cpath d='M2 56.8845C37.68 38.2132 72.5 36 111.051 61.8493M99.5486 66.2577L112.264 62.2087L107.757 49.1044' stroke='%23E6E28B' stroke-width='3' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  top: -4.72vh;
  right: -5.37vh;
}
.ourprod__block:last-child > p::after,
.ourprod__block:last-child .ourprod__descr::after {
  right: initial;
  transform: scaleX(-1);
  left: -5.28vh;
}
@media (max-width: 1480px) {
  .ourprod__image {
    height: 45vh;
  }
}
@media (max-width: 1200px) {
  .ourprod__image {
    height: 40vh;
  }
  .ourprod__block {
    width: 30%;
  }
  .ourprod__block-icon {
    max-width: 8vh;
  }
}
@media (max-width: 1180px) {
  .ourprod__image {
    height: 30vh;
  }
  .ourprod__block {
    width: 25%;
  }
  .ourprod__block-icon {
    max-width: 8vh;
  }
}
@media (max-width: 999px) {
  .ourprod__content {
    flex-direction: column;
  }
  .ourprod .section-inner::before {
    bottom: -13vh;
  }
  .ourprod__block {
    max-width: 100%;
    width: 100%;
    gap: 0;
    order: 2;
  }
  .ourprod__block:first-child {
    gap: 0;
  }
  .ourprod__block > p::after,
  .ourprod__descr::after {
    content: none;
  }
  .ourprod__image {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    order: 1;
    /* 		max-width: 66.89vh; */
  }
  .ourprod__image-wrapper {
    padding-top: 79%;
  }
  .ourprod__block-descr {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .ourprod__block-descr {
    font-size: 14px;
  }
}
@media (max-width: 479px) {
  .ourprod__content {
    margin-top: 0;
  }

  .ourprod__title {
    font-size: 5.56vh;
  }
}
/* products */
.products {
  /* 	overflow: hidden; */
}
.products:not(:last-child) {
  /* 	padding-right: 10vw; */
}
.products.section-horizontal {
  /* 	width: auto; */
  /* 	min-width: 100vw !important; */
}
.products .container {
  /* 	max-width: max-content; */
}
.products__inner {
  padding: 9.26vh 0 3vh;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
/* The LAST products block sits directly above the dark certificates
   strip. Keep enough bottom room so the round nav arrows don't appear
   clipped by the black section edge, but still tighter than the
   original 9.26vh (~75px) that created a huge empty gap. */
.products:last-of-type .products__inner {
  padding: 9.26vh 0 5vh;
}
.products__title {
  font-size: 5.56vh;
  font-weight: 600;
  line-height: 120%;
  max-width: calc(100vw - 20px);
  word-break: normal;
  white-space: normal;
  writing-mode: horizontal-tb;
}
.products__descr {
  font-size: 1.85vh;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-top: 1.11vh;
  max-width: calc(100vw - 20px);
  word-break: normal;
  white-space: normal;
  writing-mode: horizontal-tb;
}
.products__slider {
  position: relative;
  margin-top: 4.44vh;
  width: 100%;
  display: flex;
  gap: 1.85vh;
  position: relative;
  /* 	user-select: none; */
  cursor: grab;
  padding: 30px 0;
  margin-top: calc(4.44vh - 30px);
  margin-bottom: -30px;

  --swiper-pagination-bottom: 0px;
  --swiper-pagination-color: #000;
}
.products__slider .swiper {
  padding: 25px 0;
  margin: -25px 0;
  width: 100%;
  overflow: hidden;
}
.products__slider .swiper-wrapper {
  display: flex;
  width: 100%;
}
.products__slider.dragging {
  cursor: grabbing;
}
/* .products__slider .swiper-wrapper{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
} */

/* --------------------------------------------------------------
   Product-slider navigation.
   - Arrows live BELOW the cards (centred row), NOT floating over
     the first/last tile edges. Two 44px circular pill buttons
     side-by-side with a 12px gap between them.
   - Dots pagination is hidden — swipe + arrows drive navigation.
   - Reserve vertical space on the slider so the arrows don't
     collide with whatever sits beneath the section.
   -------------------------------------------------------------- */
.products__slider {
  /* Reserves just enough room for the 44px round nav buttons below the
     cards (44px button + 6px breathing room). Keep this tight — the
     section's own bottom padding already provides separation from the
     next section. */
  padding-bottom: 50px;
}

.products__slider-prev,
.products__slider-next {
  position: absolute;
  top: auto;
  bottom: 0;
  transform: none;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(35, 31, 32, 0.14);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    opacity 0.2s ease, transform 0.2s ease;
}
.products__slider-prev { left: calc(50% - 56px); right: auto; }
.products__slider-next { left: calc(50% + 12px); right: auto; }
.products__slider-prev:hover,
.products__slider-next:hover {
  background: #faf6e3;
  border-color: #c8bf4a;
}
.products__slider-prev:active,
.products__slider-next:active {
  transform: scale(0.96);
}
.products__slider-prev.swiper-button-disabled,
.products__slider-next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.products__slider-prev svg,
.products__slider-next svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Hide the dots pagination — explicit feedback, no leftover layout gap. */
.products__slider-pagination {
  display: none !important;
}
.products__slide {
  transition: transform 1s ease;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  height: auto;
  transform: translateX(100%);
  box-sizing: border-box;
}
.products__slide:not(:last-child) {
  /* 	margin-right: 1.85vh; */
}
.products__slide.animated {
  transform: translateX(0);
}
.product__item {
  border-radius: 1.85vh;
  background: #fff;
  padding: 1.11vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.product__item-details {
  position: absolute;
  z-index: 1;
  top: 2.22vh;
  left: 2.22vh;
  display: flex;
  padding: 0.19vh 1.11vh;
  justify-content: center;
  align-items: center;
  gap: 0.93vh;
  border-radius: 1.85vh;
  text-align: center;
  font-size: 1.67vh;
  font-weight: 600;
  line-height: 140%;
  background: #e5e28b;
}

.product__item-tag {
  top: auto;
}

.product__item-tag:first-of-type {
  top: 4.63vh;
}

.product__item-tag:nth-of-type(2) {
  top: 6.85vh;
}

.product__item-tag:nth-of-type(3) {
  top: 9.07vh;
}

.product__item .onsale ~ .product__item-tag:first-of-type {
  top: 4.63vh;
}

.product__item .onsale ~ .product__item-tag:nth-of-type(2) {
  top: 6.85vh;
}

.product__item .onsale ~ .product__item-tag:nth-of-type(3) {
  top: 9.07vh;
}

.product__item:not(:has(.onsale)) .product__item-tag:first-of-type {
  top: 2.22vh;
}

.product__item:not(:has(.onsale)) .product__item-tag:nth-of-type(2) {
  top: 4.44vh;
}

.product__item:not(:has(.onsale)) .product__item-tag:nth-of-type(3) {
  top: 6.67vh;
}
.product__item-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.85vh;
}
.product__item-image--wrapper {
  position: relative;
  width: 100%;
  padding-top: 118%;
}

.product__item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product__item-content {
  margin-top: 1.11vh;
  padding: 0.74vh;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product__item-title {
  font-size: clamp(16px, 2.22vh, 20px);
  font-weight: 600;
  line-height: 130%;
}
.product__item-descr {
  margin-top: 1.11vh;
  overflow: hidden;
  color: #665a5d;
  text-overflow: ellipsis;
  font-size: clamp(13px, 1.6vh, 15px);
  line-height: 140%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  max-width: 100%;
  margin-bottom: 1.85vh;
}
.product__item-more {
  transition: all 0.2s ease;
  border-radius: 4.63vh;
  border: 0.19vh solid #e5e28b;
  padding: 1.2vh 2.31vh;
  display: flex;
  align-items: center;
  gap: 0.93vh;
  margin-top: auto;
  max-width: fit-content;
  width: 100%;
  pointer-events: all;
}
.product__item-more::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M16.575 8.9V16.5C16.575 16.7833 16.6708 17.0208 16.8625 17.2125C17.0542 17.4042 17.2917 17.5 17.575 17.5C17.8583 17.5 18.0958 17.4042 18.2875 17.2125C18.4792 17.0208 18.575 16.7833 18.575 16.5V6.5C18.575 6.21667 18.4792 5.97917 18.2875 5.7875C18.0958 5.59583 17.8583 5.5 17.575 5.5H7.575C7.29167 5.5 7.05417 5.59583 6.8625 5.7875C6.67083 5.97917 6.575 6.21667 6.575 6.5C6.575 6.78333 6.67083 7.02083 6.8625 7.2125C7.05417 7.40417 7.29167 7.5 7.575 7.5H15.175L6.275 16.4C6.09167 16.5833 6 16.8167 6 17.1C6 17.3833 6.09167 17.6167 6.275 17.8C6.45833 17.9833 6.69167 18.075 6.975 18.075C7.25833 18.075 7.49167 17.9833 7.675 17.8L16.575 8.9Z' fill='%23231F20'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  width: 2.22vh;
  height: 2.22vh;
  min-width: 2.22vh;
}
.product__item-more:hover {
  background-color: #e5e28b;
}

@media (max-width: 1279px) {
}
@media (max-width: 999px) {
  /* 	.products__slider .swiper-wrapper{
		grid-template-columns: repeat(3, 1fr);
	} */
}
@media (max-width: 767px) {
  /* 	.products__slider .swiper-wrapper{
		grid-template-columns: repeat(2, 1fr);
	} */

  .product__item-title {
    font-size: 18px;
  }
  .product__item-descr {
    font-size: 14px;
  }
}
@media (max-width: 479px) {
  /* 	.products__slider .swiper-wrapper{
		grid-template-columns: repeat(1, 1fr);
	} */
  .product__item-image {
  }
  .product__item {
    /* 		width: 29.7vh;
		min-width: 29.7vh; */
  }
}
main.main {
  /* overflow: hidden; */
  /* height: calc(varfff(--vh, 1vh) * 100); */
  /* width: 100vw; */
}
/* .hero {
height: calc(var(--vh, 1vh) * 100);
position: relative;
z-index: 1;
} */
.pin-spacer-horizontalScroll {
  /* pointer-events: none; */
}
.sections-inner {
  /* overflow: hidden;
	position: absolute;
	inset: 0; */
  position: relative;
  top: 0px !important;
  z-index: 2;
  /* 	height: 100dvh; */

  /* overflow: hidden; */
}
.sections-wrapper {
  pointer-events: all;
  /* 	display: flex; */
  /* 	flex-wrap: nowrap; */
  position: relative;
  /* 	left: 100vw; */
  /* 	height: 100dvh; */
  /* position: absolute;
	top: 0;
	left: 100%; */
  z-index: 2;
  background-color: #fff;
  transition: background-color 0.5s ease;
}
.section-horizontal {
  width: 100vw;
  /* height: calc(var(--vh, 1vh) * 100); */
  /* 	height: 100dvh; */
  overflow: hidden;
  flex-shrink: 0;
}
.section__inner {
  height: 100%;
}
.sections-bg-1 {
  background-color: #fff;
}
.sections-bg-2 {
  background-color: #fff;
}
.sections-bg-3 {
  background-color: #f2ebe1;
}
.sections-bg-4 {
  background-color: #e1ebf0;
}
.sections-bg-5 {
  background-color: #e7e1f0;
}
.sections-bg-6 {
  background-color: #f0e1e4;
}
.section-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Products sections need room for the round nav arrows that live BELOW
   the card grid. The global `.section-inner { overflow: hidden }` was
   clipping both the arrow row AND the section's bottom padding against
   whatever viewport-derived height GSAP ScrollTrigger assigns to its
   parent. Allow the arrows + bottom padding to render fully. The
   outer `.products.section-horizontal { overflow: hidden }` still
   prevents horizontal bleed, so horizontal scroll is unaffected. */
.products .section-inner {
  overflow: visible;
  height: auto;
}

.products__slider {
  touch-action: pan-y;
}

/* ==========================================================================
   Footer — compact, clear hierarchy, no more "dusty" wall of grey.
   - Padding cut from 100/120 → 56/28 so it stops dominating the viewport.
   - One muted grey `#665a5d` replaced with a two-tier system:
       labels:  #8a7f82 (uppercase, small, tracked)
       values:  #231f20 (near-black, readable)
   - Fonts: phone 30→20, email/address 24→15, slogan 20→14.
   - Thin cream divider on top + tight grid gap give visual structure.
   ========================================================================== */
.footer {
  padding: 56px 0 28px;
  background-color: #fff;
  border-top: 1px solid #eee4c9;
  color: #231f20;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) 2fr;
  gap: 48px;
  align-items: start;
}
.footer__end {
  display: none;
}

/* ---- Left column: logo + slogan + copy/policy row ---- */
.footer__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: auto;
}
/* Logo must render at the exact same height as the header logo.
   Header: 42px desktop → 36px ≤1200px → 32px ≤479px (see header rules).
   We drive footer size by SVG height (not container max-width) so both
   logos stay identical regardless of markup/viewport. */
.footer__logo {
  display: flex;
  align-items: center;
  width: auto;
  max-width: none;
}
.footer__logo a {
  display: inline-flex;
  align-items: center;
}
.footer__logo svg,
.footer__logo img {
  width: auto;
  height: 42px;
  display: block;
}
.footer__left-descr {
  margin: 10px 0 0;
  max-width: 280px;
  color: #7a7074;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}
.footer__left-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  margin-top: 6px;
}
.footer__left-copy,
.footer__left-link {
  color: #8a7f82;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.footer__left-link:hover {
  color: #231f20;
  text-decoration: underline;
}

/* ---- Right content area: 3 columns (phone · address · email+subscribe) ---- */
.footer__content {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px 40px;
}
.footer__block { min-width: 0; }

/* Label: small uppercase chip, muted */
.footer__name {
  margin: 0 0 10px;
  color: #8a7f82;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Value: phone — hero of the contact block, still restrained */
.footer__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__tel {
  color: #231f20;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}
.footer__address:hover,
.footer__email:hover,
.footer__tel:hover {
  color: #c8bf4a;
}
.footer__descr {
  margin-top: 8px;
  color: #8a7f82;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.footer__email,
.footer__address {
  display: inline-block;
  color: #231f20;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  transition: color 0.2s ease;
}
.footer__address {
  max-width: 260px;
}

/* ---- Social icons (phone row small, subscribe row slightly bigger) ---- */
.contacts__info-join,
.footer__join {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__social {
  display: flex;
  gap: 6px;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.footer__social a:hover {
  transform: translateY(-1px);
}
.footer__social a svg {
  width: 22px;
  height: 22px;
  display: block;
}
.contacts__info-join a,
.footer__join a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  max-width: max-content;
}
.footer__join a:hover {
  transform: translateY(-1px);
}
.footer__join a svg {
  width: 30px;
  height: 30px;
  display: block;
}
.contacts__info-join a svg *,
.footer__join a svg * {
  transition: all 0.2s ease;
}
.contacts__info-join a:not(:hover) svg *[fill] {
  fill: #e5e28b;
}
.footer__join a:not(:hover) svg *[fill] {
  fill: #e5e28b;
}
.contacts__info-join a:not(:hover) svg circle {
  fill: #fff !important;
}
.footer__join a:not(:hover) svg circle {
  fill: #262835 !important;
}

/* ---- Dev credit, minimal ---- */
.footer__dev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #8a7f82;
  font-size: 12px;
  width: fit-content;
}
.footer__dev p { color: inherit; margin: 0; }
.footer__dev svg { width: 26px; height: auto; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .footer__content { gap: 28px 24px; }
  .footer__inner { gap: 40px; }
  /* Match header logo height @ ≤1200px (see header rules). */
  .footer__logo svg,
  .footer__logo img { height: 36px; }
}
@media (max-width: 1024px) {
  .footer { padding: 48px 0 24px; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__content {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    gap: 28px 32px;
  }
  .footer__left-bottom { gap: 10px 24px; }
}
@media (max-width: 768px) {
  .footer { padding: 40px 0 24px; }
  .footer__left-bottom { display: none; }
  .footer__end {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f2eedd;
  }
  .footer__end .footer__left-copy,
  .footer__end .footer__left-link {
    font-size: 12px;
    color: #8a7f82;
  }
  .footer__left-descr { font-size: 14px; max-width: 260px; }
}
@media (max-width: 560px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer__tel { font-size: 22px; }
}
@media (max-width: 479px) {
  /* Match header logo height @ ≤479px (see header rules). */
  .footer__logo svg,
  .footer__logo img { height: 32px; }
}

/* 404 Error Page Styles */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.error-404__container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.48vh;
}

.error-404__content {
  padding-top: 40px;
  text-align: center;
}

.error-404__title {
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: #e5e28b;
  margin: 0 0 20px;
  font-family: 'Nunito', sans-serif;
}

.error-404__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: #231f20;
  margin: 0 0 20px;
  font-family: 'Nunito', sans-serif;
}

.error-404__description {
  font-size: 18px;
  line-height: 1.6;
  color: #231f20;
  margin: 0 0 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Nunito', sans-serif;
}

.error-404__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.error-404__button {
  display: inline-block;
  padding: 14px 40px;
  background-color: #e5e28b;
  color: #231f20;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.error-404__button:hover {
  background-color: #d4c77a;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .error-404 {
    min-height: 50vh;
    padding: 60px 0;
  }

  .error-404__title {
    font-size: 80px;
  }

  .error-404__heading {
    font-size: 28px;
  }

  .error-404__description {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .error-404__button {
    padding: 12px 30px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .error-404__title {
    font-size: 60px;
  }

  .error-404__heading {
    font-size: 24px;
  }

  .error-404__description {
    font-size: 14px;
  }
}

/* ==========================================================================
   HEADER — V2 refinement
   ----------------------------------------------------------------------------
   Replaces the inconsistent mix of circles, pills and viewport-unit sizing
   with a single cohesive system: one icon-button shape (40×40), one CTA pill
   shape (40h), a compact language chip, refined nav spacing, a subtle
   scrolled surface with soft shadow, and a calm cart badge.
   All sizes are in px so nothing "grows" with window height.
   ========================================================================== */
.header {
  /* tokens (cross-state) */
  --hdr-icon-size: 42px;
  --hdr-border: rgba(255, 255, 255, 0.22);
  --hdr-border-hover: rgba(255, 255, 255, 0.5);
  --hdr-fg: #fff;
  --hdr-surface-hover: rgba(255, 255, 255, 0.08);
  --hdr-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  --hdr-radius: 999px;
}
.header.scrolled {
  --hdr-border: rgba(35, 31, 32, 0.14);
  --hdr-border-hover: rgba(35, 31, 32, 0.32);
  --hdr-fg: #231f20;
  --hdr-surface-hover: rgba(35, 31, 32, 0.04);
  --hdr-shadow: 0 1px 0 rgba(35, 31, 32, 0.04), 0 6px 20px rgba(35, 31, 32, 0.06);
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: var(--hdr-shadow) !important;
}

/* Inner row — px-based, tight and consistent. We drive all spacing via
   explicit margins so each relationship (logo↔menu, menu↔right cluster,
   right-cluster internal) can have its own distance. Flex `gap` is off. */
.header .header__inner {
  padding: 14px 0 !important;
  gap: 0 !important;
  align-items: center !important;
}

/* Logo — fixed height, no vh guessing */
.header .header__logo {
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto;
}
.header .header__logo svg {
  width: auto !important;
  height: 42px !important;
  display: block;
}

/* Nav — sits right next to the logo (not pushed to far right) */
.header .header__menu {
  margin-left: 36px !important; /* tight distance from logo */
  margin-right: auto !important; /* push right cluster to the edge */
}
.header .header__menu ul {
  gap: 28px !important;
}
/* Stretch the menu column to fill the full header-inner height so the
   link's bottom edge is exactly flush with the header's bottom line.
   Keeps other flex children (logo + right cluster) vertically centred. */
@media (min-width: 1025px) {
  .header .header__inner {
    align-items: stretch !important;
  }
  .header .header__inner > .header__logo,
  .header .header__inner > .header__cart,
  .header .header__inner > .header__account,
  .header .header__inner > .header__whatsapp,
  .header .header__inner > .header__lang {
    align-self: center !important;
  }
  .header .header__menu,
  .header .header__menu-track,
  .header .header__menu ul,
  .header .header__menu ul li {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    overflow: visible !important; /* don't clip the pseudo underlines */
  }
  /* Header itself + container must allow pseudos to paint below the inner
     (they extend -14px past the content box to reach the real bottom). */
  .header,
  .header > .container {
    overflow: visible !important;
  }
}

.header .header__menu ul li a {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  color: var(--hdr-fg) !important;
  letter-spacing: -0.005em;
  position: relative;
  display: flex !important;
  align-items: center !important;
}
/* Active / hover underline — sits flush with the real bottom edge of the
   header. Even though the link now stretches to the full header-inner
   *content* box, the inner still has 14px of vertical padding, so the
   content box ends 14px above the header's actual bottom. The ::after
   therefore needs to extend an extra 14px down to meet that edge. */
.header .header__menu ul li a::after {
  left: 0 !important;
  right: 0 !important;
  bottom: -14px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background-color: #c8bf4a !important;
}

/* Same offset for the JS-driven sliding underline so both indicators
   visually land on the exact same line. */
.header .header__menu-track {
  position: relative;
}
.header .header__menu-track .menu-underline {
  bottom: -14px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background-color: #c8bf4a !important;
}

/* Right cluster — compact 6px gap between all action buttons */
.header .header__inner > .header__cart,
.header .header__inner > .header__account,
.header .header__inner > .header__whatsapp,
.header .header__inner > .header__lang {
  margin: 0 !important;
}
.header .header__inner > .header__cart + .header__account,
.header .header__inner > .header__account + .header__whatsapp,
.header .header__inner > .header__whatsapp + .header__lang,
.header .header__inner > .header__cart + .header__whatsapp,
.header .header__inner > .header__cart + .header__lang {
  margin-left: 6px !important;
}

/* Shared icon-button look: cart + account */
.header .header__cart,
.header .header__account {
  width: var(--hdr-icon-size) !important;
  height: var(--hdr-icon-size) !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--hdr-border) !important;
  color: var(--hdr-fg) !important;
  background: transparent !important;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}
.header .header__cart:hover,
.header .header__account:hover {
  border-color: var(--hdr-border-hover) !important;
  background: var(--hdr-surface-hover) !important;
  transform: translateY(-1px);
}
.header .header__cart svg,
.header .header__account svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 1.8 !important;
}

/* Cart badge — calm yellow chip, perfect circle for 1 digit, balanced pill
   for 2+ digits. Border-box keeps the outer size predictable. */
.header .header__cart .cart-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 22px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-feature-settings: "tnum" 1 !important; /* tabular numerals */
  text-align: center !important;
  color: #231f20 !important;
  background: #e5e28b !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(35, 31, 32, 0.18) !important;
}
.header:not(.scrolled) .header__cart .cart-count {
  border-color: transparent !important;
}

/* WhatsApp / "ЗАБРОНЮВАТИ" — pill CTA at same 40px height */
.header .header__whatsapp {
  height: var(--hdr-icon-size) !important;
  padding: 0 18px 0 16px !important;
  border-radius: var(--hdr-radius) !important;
  border: 1.5px solid #25d366 !important;
  background: #25d366 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  gap: 8px !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.28);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.header .header__whatsapp:hover {
  background: #1fbf58 !important;
  border-color: #1fbf58 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.38);
}
.header .header__whatsapp:hover svg path {
  fill: #fff !important;
}
.header .header__whatsapp svg {
  width: 16px !important;
  height: 16px !important;
}

/* Language — compact chip, same 40px height, matches icon buttons visually */
.header .header__lang {
  height: var(--hdr-icon-size) !important;
  display: flex;
  align-items: center;
}
.header .header__lang-selected {
  height: var(--hdr-icon-size) !important;
  padding: 0 10px 0 14px !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: var(--hdr-radius) !important;
  border: 1.5px solid var(--hdr-border) !important;
  background: transparent !important;
  color: var(--hdr-fg) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease !important;
}
.header .header__lang-selected:hover {
  border-color: var(--hdr-border-hover) !important;
  background: var(--hdr-surface-hover) !important;
}
.header .header__lang-selected::after {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
  transition: transform .18s ease !important;
}
.header.scrolled .header__lang-selected::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
/* Active state — keep the pill shape and subtle border; ONLY rotate the
   chevron and show the floating dropdown below. No white card-merge. */
.header .header__lang.active .header__lang-selected {
  background: var(--hdr-surface-hover) !important;
  color: var(--hdr-fg) !important;
  border-color: var(--hdr-border-hover) !important;
  border-radius: var(--hdr-radius) !important; /* stays pill-shaped */
}
.header .header__lang.active .header__lang-selected::after {
  transform: rotate(180deg);
}

/* Dropdown — floats as its own rounded card below the chip, right-aligned
   to the chip, never merges with it. */
.header .header__lang-content {
  top: calc(var(--hdr-icon-size) + 8px) !important; /* gap below the chip */
  left: auto !important;
  right: 0 !important;
  min-width: 120px;
  padding: 6px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1.5px solid rgba(35, 31, 32, 0.08) !important;
  box-shadow: 0 12px 30px rgba(35, 31, 32, 0.12) !important;
  z-index: 2 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(-4px);
}
.header .header__lang.active .header__lang-content {
  transform: translateY(0);
}
.header .header__lang-content a {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 10px 14px !important;
  color: #231f20 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border-radius: 10px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.header .header__lang-content a:hover {
  color: #231f20 !important;
  background: #faf6e3 !important;
}

/* Scrolled override — keep hero-over-transparent pattern on front page,
   but all controls adopt dark text + subtle borders automatically via the
   CSS vars above. Nothing else needed here. */

/* --------------------------------------------------------------------------
   Mobile / tablet — burger menu breakpoint (≤1200px)
   --------------------------------------------------------------------------
   At this width the inline nav is replaced by the slide-in panel.
   Fixes applied here:
   1. Disable backdrop-filter. With it, `.header` becomes the containing
      block for its fixed descendants, which clips the slide-in menu to the
      header's own ~70px height (bug in image #3). Plain opaque bg instead.
   2. Clear the `justify-content: space-between` pattern and push the right
      cluster with a single `margin-left: auto` so siblings sit tight
      instead of being stretched across the row.
   3. Zero the inner flex `gap` so only the explicit margin-lefts below
      control spacing — avoids gap + margin double-spacing.
   4. Make the panel truly full-height and force safe-area insets.
   -------------------------------------------------------------------------- */
/* Body scroll lock while the mobile menu is open */
body.menu-open {
  overflow: hidden !important;
  touch-action: none;
}

@media (max-width: 1200px) {
  .header {
    --hdr-icon-size: 40px;
  }
  /* Wipe any containing-block trigger on every ancestor of .header__menu
     so the slide-in panel is positioned relative to the viewport (not the
     header). Without this, transform/filter/backdrop-filter on any parent
     turns the parent into the containing block for `position: fixed`,
     which clips the panel to the parent's box (≈ width of .container). */
  .header,
  .header.scrolled,
  .header > .container,
  .header__inner {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
    overflow: visible !important;
  }
  .header.scrolled {
    background: #fff !important;
  }
  .header .header__inner {
    gap: 0 !important;
    padding: 12px 0 !important;
    justify-content: flex-start !important;
  }
  .header .header__logo svg {
    height: 36px !important;
  }
  .header .header__inner > .header__cart {
    margin-left: auto !important; /* push the whole right cluster to the edge */
  }
  /* 6px between every right-cluster sibling */
  .header .header__inner > .header__cart + .header__account,
  .header .header__inner > .header__account + .header__whatsapp,
  .header .header__inner > .header__cart + .header__whatsapp,
  .header .header__inner > .header__whatsapp + .header__lang,
  .header .header__inner > .header__whatsapp + .header__burger,
  .header .header__inner > .header__lang + .header__burger,
  .header .header__inner > .header__account + .header__burger,
  .header .header__inner > .header__cart + .header__burger {
    margin-left: 6px !important;
  }

  /* ---- Slide-in menu panel — make it actually cover the viewport.
     Selectors intentionally OMIT the `.header` parent so they still match
     after JS portals .header__menu out into <body> on mobile widths.

     IMPORTANT: do NOT use `width: 100vw` here. On pages that have a
     vertical scrollbar (checkout, product pages, etc.), 100vw equals the
     viewport width *including* the scrollbar, which is wider than the
     document body — and a fixed element at 100vw then forces a
     horizontal scrollbar to appear. Using `inset: 0` instead pins the
     panel to the viewport edges without over-reaching. */
  .header__menu {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    z-index: 1000 !important;
    margin: 0 !important;
  }
  /* While inactive, fully disable the overlay so the invisible layer
     can't intercept clicks / influence layout in any edge case. */
  .header__menu:not(.active) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .header__menu.active {
    visibility: visible !important;
  }
  .header__menu-track {
    background: #fff !important;
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    height: 100% !important;
    /* Zero horizontal padding on the track itself so <li> borders span
       edge-to-edge. Horizontal padding lives on the links / lang group. */
    padding: 80px 0 28px !important;
    margin-left: auto !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .header__menu-track ul {
    gap: 0 !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header__menu-track ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* Track has no horizontal padding, so the link (and its border-bottom)
     naturally spans the full panel width. 22px padding inside the link
     keeps the text where the user expects it.
     NOTE: the base desktop rule sets `max-width: max-content` on the link,
     which shrink-wraps it — we MUST override that here or the divider
     stops right after the text. */
  .header__menu-track ul li a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    color: #231f20 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid #f2eedd !important;
    text-decoration: none !important;
  }
  .header__menu-track ul li:last-child a {
    border-bottom: none !important;
  }
  .header__menu-track ul li a::after {
    display: none !important; /* no tab indicator in the mobile list */
  }

  /* Burger — match the other icon-button look */
  .header .header__burger {
    width: var(--hdr-icon-size) !important;
    height: var(--hdr-icon-size) !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--hdr-border) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .header .header__burger svg {
    width: 18px !important;
    height: auto !important;
  }
  .header .header__burger svg path {
    fill: var(--hdr-fg) !important;
  }
  .header__menu-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 11 !important;
  }
  .header__menu-close svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Language switcher inside the mobile menu panel — the track has no
     horizontal padding now, so its top divider spans edge-to-edge without
     any negative-margin tricks. 22px padding keeps the pills inset. */
  .header__menu-lang {
    display: flex !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 20px 22px 0 !important;
    border-top: 1px solid #f2eedd !important;
  }
  .header__menu-lang__item {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(35, 31, 32, 0.14) !important;
    background: transparent !important;
    color: #231f20 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease !important;
  }
  .header__menu-lang__item:hover {
    background: #faf6e3 !important;
    border-color: #c8bf4a !important;
  }
  .header__menu-lang__item.is-active {
    background: #e5e28b !important;
    border-color: #c8bf4a !important;
    color: #231f20 !important;
  }
}

/* ≤479px — make the mobile menu panel truly full-width (no side gap) */
@media (max-width: 479px) {
  .header__menu-track {
    width: 100vw !important;
    max-width: 100vw !important;
    box-shadow: none !important;
  }
}

/* Desktop — no in-menu language switcher (use the header chip instead) */
@media (min-width: 1201px) {
  .header .header__menu-lang {
    display: none !important;
  }
}

/* ≤767px — collapse WhatsApp label to an icon-only pill */
@media (max-width: 767px) {
  .header .header__whatsapp {
    padding: 0 !important;
    width: var(--hdr-icon-size) !important;
    justify-content: center !important;
  }
  .header .header__whatsapp span {
    display: none !important;
  }
  .header .header__lang-selected {
    padding: 0 10px 0 12px !important;
    font-size: 12px !important;
    height: var(--hdr-icon-size) !important;
  }
}

/* ≤479px — tightest form factor: hide the lang chip (there's a language
   link inside the menu panel list anyway if needed, and users can switch
   after burger open). Keeps the top bar readable, no overlap. */
@media (max-width: 479px) {
  .header {
    --hdr-icon-size: 38px;
  }
  .header .header__lang {
    display: none !important;
  }
  .header .header__whatsapp,
  .header .header__cart,
  .header .header__account,
  .header .header__burger {
    width: var(--hdr-icon-size) !important;
    height: var(--hdr-icon-size) !important;
  }
  .header .header__inner > .header__cart + .header__account,
  .header .header__inner > .header__account + .header__whatsapp,
  .header .header__inner > .header__whatsapp + .header__burger {
    margin-left: 4px !important;
  }
  .header .header__logo svg {
    height: 32px !important;
  }
}