/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: #1e1e1e;
  background: #fff;
  line-height: 1.4;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 150px;
}

/* ===== TYPOGRAPHY ===== */
.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 51px;
  letter-spacing: -1.53px;
  line-height: 1.11;
  margin-bottom: 40px;
}
.tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.72px;
  color: #610000;
  margin-bottom: 8px;
}
.stars {
  color: #1e1e1e;
  font-size: 18px;
  letter-spacing: 2px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: #1e1e1e;
  color: #fff;
  border-radius: 24px;
  padding: 14px 24px;
  font-size: 15px;
  letter-spacing: -0.45px;
}
.btn--large {
  width: 321px;
  height: 56px;
  border-radius: 100px;
  font-size: 18px;
  letter-spacing: -0.54px;
}
.btn--dark {
  background: #1e1e1e;
  color: #fff;
  transition: all 0.3s;
}
.btn--dark:hover{
  background: transparent;
  color: #1e1e1e;
  border: 1px solid #1e1e1e;
}
.btn--white {
  background: #fff;
  color: #1e1e1e;
}
.btn--outline {
  background: transparent;
  color: #1e1e1e;
  border: 1px solid #1e1e1e;
}

/* ===== HEADER ===== */
.header {
  padding: 30px 0 16px;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo img {
  height: 74px;
  width: auto;
}
.header__nav {
  display: flex;
  gap: 40px;
}
.header__nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.45px;
  color: #1e1e1e;
  transition: opacity 0.2s;
}
.header__nav-link:hover { opacity: 0.6; }
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1e1e1e;
  border-radius: 2px;
  transition: 0.3s;
}

/* ===== COUNTDOWN BAR ===== */
.countdown-bar {
  background: #1e1e1e;
  padding: 0;
  height: 125px;
  display: flex;
  align-items: center;
}
.countdown-bar__inner {
  display: flex;
  align-items: center;
  gap: 50px;
}
/* Timer + labels stacked together */
.countdown-bar__timer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.countdown-bar__timer {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 68px;
  letter-spacing: -2.04px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.countdown-bar__labels {
  display: flex;
  width: 100%;
  padding: 4px 0 0 0;
}
.countdown-bar__labels span {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.1px;
  color: #fff;
  /* Each label centered under its digit pair (~2 chars + spacing) */
  flex: 1;
  text-align: center;
}
.countdown-bar__text {
  flex: 1;
}
.countdown-bar__text p {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.15px;
  line-height: 1.25;
  color: #fff;
}
.countdown-bar__subtext {
  font-weight: 300 !important;
  font-size: 14px !important;
  margin-top: 4px;
  opacity: 0.85;
}

/* ===== HERO ===== */
.hero {
  padding: 60px 0;
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: 65px;
}
.hero__image {
  flex: 0 0 562px;
}
.hero__image img {
  width: 562px;
  height: 435px;
  object-fit: cover;
  border-radius: 20px;
}
.hero__content {
  flex: 1;
}
.hero__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0;
  line-height: 1.22;
  margin-bottom: 16px;
}
.hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
}
.hero__rating-text {
  font-size: 18px;
  color: #39404e;
}
.hero__features {
  margin-bottom: 40px;
}
.hero__features li {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: 1.67;
  padding-left: 22px;
  position: relative;
  margin-bottom: 4px;
}
.hero__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e1e1e;
}

/* ===== RED STRIP ===== */
.red-strip {
  background: #610000;
  padding: 10px 0;
}
.red-strip p {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
}

/* ===== INFO SECTIONS ===== */
.info-section {
  padding: 80px 0;
}
.info-section__inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.info-section--reversed .info-section__inner {
  flex-direction: row-reverse;
}
.info-section__content {
  flex: 1;
}
.info-section__image {
  flex: 0 0 464px;
}
.info-section__image img {
  width: 464px;
  height: 466px;
  object-fit: cover;
}
.info-block__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 45px;
  letter-spacing: 0;
  line-height: 1.16;
  margin-bottom: 16px;
}
.info-block__text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 440px;
}
.link-more {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #610000;
  position: relative;
  padding-bottom: 2px;
}
.link-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 21px;
  height: 2px;
  background: #610000;
}
.link-more:hover { opacity: 0.7; }

/* ===== PRODUCTS ===== */
.products {
  padding: 80px 0;
}
.products__container {
  text-align: left;
}
.slider {
  position: relative;
  overflow: hidden;
}
.slider__track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.slider__arrow:hover { opacity: 0.5; }
.slider__arrow--left { left: -24px; }
.slider__arrow--right { right: -24px; }

.product-card {
  flex: 0 0 calc((100% - 32px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.product-card__sale{
  position: absolute;
  right: 10px;
  top: 10px;
  color: #FFF;
  background: #620001;
  padding: 6px 12px;
  border-radius: 8px;
}
.product-card__image {
  width: 370px;
  height: 370px;
  margin-bottom: 16px;
  overflow: hidden;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.72px;
  margin-bottom: 4px;
}
.product-card__desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.48px;
  color: #0f0f0f;
  margin-bottom: 12px;
  line-height: 1.38;
}
.product-card__price {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.72px;
  margin-bottom: 12px;
}
.product-card__counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 0.5px solid #000;
  border-radius: 9px;
  padding: 0;
  margin-bottom: 16px;
  height: 40px;
  width: 109px;
  overflow: hidden;
}
.counter__btn {
  background: none;
  border: none;
  font-family: 'Gotham', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  width: 34px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.counter__btn:hover { background: #f5f5f5; }
.counter__value {
  font-family: 'Gotham', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  width: 41px;
  text-align: center;
  line-height: 40px;
}
.product-card .btn--large {
  margin-top: 0;
}
.product-card .btn--dark:hover {
  background: #fff;
  color: #1e1e1e;
  opacity: 1;
}
.product-card--outline {
  border: 1px solid #1e1e1e;
  border-radius: 12px;
}

/* ===== ATTRACTIVE ===== */
.attractive {
  padding: 80px 0;
}
.attractive__inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
.attractive__content {
  flex: 1;
}
.attractive__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 68px;
  letter-spacing: -2.04px;
  line-height: 1.11;
  margin-bottom: 24px;
}
.attractive__text {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: 1.67;
  margin-bottom: 24px;
}
.attractive__features {
  margin-bottom: 40px;
}
.attractive__features li {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: 1.67;
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}
.attractive__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e1e1e;
}
.attractive__image {
  flex: 0 0 465px;
}
.attractive__image img {
  width: 465px;
  height: 699px;
  object-fit: cover;
}

/* ===== REVIEWS ===== */
.reviews {
  padding: 80px 0;
}
.reviews__container {
  text-align: left;
}
.review-card {
  flex: 0 0 calc((100% - 32px) / 3);
  background: #fff;
  border: 0.75px solid rgba(218, 196, 160, 0.4);
  border-radius: 12.67px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.review-card__avatar {
  width: 96px;
  height: 94px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
}
.review-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-card__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -1.02px;
  margin-bottom: 8px;
}
.review-card .stars {
  margin-bottom: 16px;
}
.review-card__text {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 13.86px;
  letter-spacing: -0.42px;
  line-height: 1.89;
  color: #1e1e1e;
}

/* ===== GUARANTEE ===== */
.guarantee {
  position: relative;
  padding: 0;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.guarantee__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
}
.guarantee__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guarantee::after {
  content: '';
  position: absolute;
  inset: 0;
  /*background: rgba(17, 13, 9, 0.7);*/
  z-index: 1;
}
.guarantee__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 550px;
  padding: 80px 0;
  margin-left: auto;
  transform: translateX(300px);
}
.guarantee__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 68px;
  letter-spacing: -2.04px;
  line-height: 1.11;
  color: #fff;
  margin-bottom: 24px;
}
.guarantee__text {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.54px;
  line-height: 1.67;
  color: #fff;
  margin-bottom: 40px;
}

/* ===== FOOTER ===== */
.footer {
  padding: 0 0 60px;
}
.footer__red-line {
  height: 8px;
  background: #610000;
  margin-bottom: 40px;
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.footer__logo img {
  height: 98px;
  width: auto;
}
.footer__col h5 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.footer__col a {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #1e1e1e;
  margin-bottom: 10px;
  transition: opacity 0.2s;
}
.footer__col a:hover { opacity: 0.6; }
.footer__phone {
  margin-left: auto;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 16px;
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ===== DECORATIVE DOTS (CSS-only) ===== */
.info-section__content {
  position: relative;
}
.guarantee__bg{
  width: 1200px;
  left: 50%;
}
.guarantee-img__mob{
  display: none;
}
@media (max-width: 1350px) {
  .guarantee__bg{
    width: 1200px;
    left: 50%;
  }
}
/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 1100px) {
  .guarantee-img__mob{
    display: block;
  }
  .guarantee__bg{
    display: none;
  }
  .guarantee__inner{
    max-width: unset;
    transform: translateX(0px);
  }
  .guarantee__title, .guarantee__text{
    color: #000;
  }
  .guarantee__inner .btn--white{
    background: #1e1e1e;
    color: #fff;
  }
  
  .container { padding: 0 40px; }
  .header__nav { gap: 24px; }
  .hero__inner { gap: 30px; }
  .hero__image { flex: 0 0 45%; }
  .hero__image img { width: 100%; height: auto; }
  .info-section__image { flex: 0 0 40%; }
  .info-section__image img { width: 100%; height: auto; }
  .attractive__image { flex: 0 0 40%; }
  .attractive__image img { width: 100%; height: auto; }
  .product-card__image { width: 280px; height: 280px; }
  .guarantee__inner { margin-right: 40px; margin-left: auto; }
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 1000px) {
  .container { padding: 0 16px; }

  /* Header mobile */
  .header { padding: 16px 0; }
  .header__nav { display: none; }
  .header__btn { display: inline-flex; font-size: 13px; padding: 10px 16px; }
  .burger { display: flex; }
  .header__logo img { height: 40px; }

  /* Countdown mobile */
  .countdown-bar { height: auto; padding: 20px 0; }
  .countdown-bar__inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .countdown-bar__text { order: -1; }
  .countdown-bar__timer-block { align-items: center; }
  .countdown-bar__timer { font-size: 45px; }
  .countdown-bar__labels { gap: 0; }
  .countdown-bar__text p { font-size: 12px; }

  /* Hero mobile */
  .hero { padding: 30px 0; }
  .hero__inner { flex-direction: column; gap: 24px; }
  .hero__image { flex: none; }
  .hero__image img { width: 100%; height: auto; border-radius: 20px; }
  .hero__title { font-size: 24px; }
  .hero__features li { font-size: 14px; }
  .hero__rating-text { font-size: 12px; }
  .btn--large { width: 100%; max-width: 343px; font-size: 14px; height: 37px; }

  /* Red strip mobile */
  .red-strip p { font-size: 14px; }

  /* Info sections mobile */
  .info-section { padding: 40px 0; }
  .info-section__inner { flex-direction: column !important; gap: 24px; }
  .info-section__image { flex: none; order: -1; }
  .info-section__image img { width: 100%; height: auto; }
  .info-section--reversed .info-section__image { order: 1; }
  .section-title { font-size: 24px; margin-bottom: 20px; }
  .info-block__title { font-size: 20px; }
  .info-block__text { font-size: 14px; }
  .tag { font-size: 12px; }

  /* Products mobile */
  .products { padding: 40px 0; }
  .products__container { overflow: hidden; }
  #product-slider { overflow: visible; }
  #product-slider .slider__track { overflow: visible; }
  .product-card { flex: 0 0 80%; }
  .product-card__image { width: 100%; height: auto; }
  .product-card__name { font-size: 16px; }
  .product-card__desc { font-size: 14px; }
  .product-card__price { font-size: 12px; }
  .product-card__counter { width: 109px; height: 34px; }
  .counter__btn { width: 28px; font-size: 18px; }
  .counter__value { font-size: 18px; }
  .slider__arrow { display: none; }

  /* Attractive mobile */
  .attractive { padding: 40px 0; }
  .attractive__inner { flex-direction: column-reverse; gap: 24px; }
  .attractive__image { flex: none; }
  .attractive__image img { width: 100%; height: auto; }
  .attractive__title { font-size: 24px; }
  .attractive__text { font-size: 14px; }
  .attractive__features li { font-size: 14px; }

  /* Reviews mobile */
  .reviews { padding: 40px 0; }
  .review-card { flex: 0 0 100%; padding: 24px 16px; }
  .review-card__avatar { width: 72px; height: 72px; }
  .review-card__name { font-size: 20px; }
  .review-card__text { font-size: 12px; }
  .review-card .stars { font-size: 14px; }

  /* Guarantee mobile */
  .guarantee { min-height: auto; }
  .guarantee__inner {
    margin-left: 0;
    margin-right: 0;
    padding: 40px 0;
    align-items: center;
    text-align: center;
  }
  .guarantee__title { font-size: 24px; margin-top: 40px; }
  .guarantee__text { font-size: 14px; }

  /* Footer mobile */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .footer__logo img { height: 63px; }
  .footer__col h5 { font-size: 14px; }
  .footer__phone { margin-left: 0; }
}

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  overflow-y: auto;
}
.mobile-nav.active { opacity: 1; pointer-events: auto; }

/* Top bar: X | Купити зараз | Logo */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.mobile-nav__close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #1e1e1e;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav__cta {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: #1e1e1e;
  color: #fff;
  border-radius: 100px;
  padding: 10px 24px;
  text-decoration: none;
}
.mobile-nav__logo img {
  height: 36px;
  width: auto;
}

/* Body: left links | images | right links */
.mobile-nav__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}
.mobile-nav__col {
  display: flex;
  flex-direction: column;
}
.mobile-nav__col--left {
  padding: 32px 0 32px 20px;
  justify-content: flex-start;
  gap: 20px;
}
.mobile-nav__col--right {
  padding: 32px 20px 32px 0;
  justify-content: flex-end;
  gap: 20px;
  align-items: flex-end;
  text-align: right;
}
.mobile-nav__col a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #1e1e1e;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mobile-nav__col a:hover { opacity: 0.5; }

/* Two product images in the center column */
.mobile-nav__col--images {
  display: flex;
  flex-direction: column;
}
.mobile-nav__img-top,
.mobile-nav__img-bottom {
  flex: 1;
  background: #f5f0eb;
}
.mobile-nav__img-top {
  background: #ede8e2 url('') center/cover no-repeat;
}
.mobile-nav__img-bottom {
  background: #e8e2db url('') center/cover no-repeat;
}


.buy-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.buy-overlay.active { opacity: 1; pointer-events: all; }
.buy-modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  width: 100%; max-width: 400px;
  position: relative;
  transform: translateY(16px);
  transition: transform .25s;
}
.buy-overlay.active .buy-modal { transform: translateY(0); }
#buySubmit{
  background: #1e1e1e;
  color: #fff;
  transition: all 0.3s;
  border: 1px solid #1e1e1e;
}
#buySubmit:hover{
  background: #fff;
  color: #1e1e1e;
  opacity: 1;
  border: 1px solid #1e1e1e;
}