/* ====== RESPONSIVE RULES ====== */
html, body { max-width: 100% !important; overflow-x: hidden !important; }

/* HEADER */
.header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  max-width: 100% !important;
}

.logo {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.logo__img {
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.logo__img img {
  width: 120px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
@media (min-width: 768px) {
  .logo__img img { width: 160px !important; }
}

/* Navigation — hidden below 1280px */
.nav { display: none !important; }
@media (min-width: 1280px) {
  .nav {
    display: flex !important;
    gap: 0.75rem !important;
  }
  .nav__link {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
  }
}

/* Header actions */
.header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Marketplaces button — hidden below 768px */
.header__marketplaces { display: none !important; }
@media (min-width: 768px) {
  .header__marketplaces { display: inline-flex !important; }
}

/* Phone — hidden below 1366px */
.header__phone { display: none !important; }
@media (min-width: 1366px) {
  .header__phone { display: inline-flex !important; }
}

/* Burger — shown below 1280px */
.burger { display: flex !important; flex-shrink: 0 !important; }
@media (min-width: 1280px) {
  .burger { display: none !important; }
}

/* Container */
.container { padding-inline: 1rem !important; }
@media (min-width: 768px) { .container { padding-inline: 1.5rem !important; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem !important; } }

/* Grids */
.grid { gap: 1rem !important; }
.grid--4, .grid--3 { grid-template-columns: 1fr !important; }
@media (min-width: 640px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
  .grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Images */
img { max-width: 100% !important; height: auto !important; }

/* Titles */
.section__title { font-size: 1.5rem !important; line-height: 1.3 !important; }
@media (min-width: 768px) { .section__title { font-size: 2rem !important; } }
@media (min-width: 1024px) { .section__title { font-size: 2.5rem !important; } }

.hero__title { font-size: 1.5rem !important; line-height: 1.3 !important; }
@media (min-width: 768px) { .hero__title { font-size: 2rem !important; } }
@media (min-width: 1024px) { .hero__title { font-size: 2.5rem !important; } }

/* Article */
.article__body { font-size: 0.95rem !important; line-height: 1.7 !important; }
.article__body h2 { font-size: 1.25rem !important; margin-top: 2rem !important; }
@media (min-width: 768px) {
  .article__body { font-size: 1rem !important; }
  .article__body h2 { font-size: 1.5rem !important; }
}

/* Footer */
.footer__grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important; gap: 1.5rem !important; align-items: start !important; }
}

/* FAQ */
.faq-trigger { font-size: 0.95rem !important; padding: 1rem !important; }
.faq-panel__content { font-size: 0.9rem !important; padding: 0 1rem 1rem !important; }

/* Buttons */
.btn { padding: 0.6rem 1.2rem !important; font-size: 0.9rem !important; }
.btn--sm { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; }

/* Product detail */
.product-detail { grid-template-columns: 1fr !important; }
@media (min-width: 768px) { .product-detail { grid-template-columns: 1fr 1fr !important; } }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.8rem !important; flex-wrap: wrap !important; gap: 0.25rem !important; }

/* Sections */
.section { padding-block: 3rem !important; }
@media (min-width: 768px) { .section { padding-block: 4rem !important; } }
@media (min-width: 1024px) { .section { padding-block: 5rem !important; } }

/* Floating */
.floating { bottom: 0.75rem !important; right: 0.75rem !important; }
@media (min-width: 640px) { .floating { bottom: 1.5rem !important; right: 1.5rem !important; } }

/* About blocks */
.about-block { margin-top: 2.5rem !important; }
.about-block:first-of-type { margin-top: 1.5rem !important; }

/* Images < 1023px */
@media (max-width: 1023px) {
  .hero__main-img { max-width: 400px; margin-inline: auto; aspect-ratio: 5 / 6; }
  .hero__visual { max-width: 500px; margin-inline: auto; }
  .product-compact__image { max-height: 280px; aspect-ratio: 4 / 3; }
  .product-detail__image-wrap { max-width: 400px; margin-inline: auto; }
  .news-card__image { max-height: 200px; }
  .article__hero { max-width: 600px; margin-inline: auto; }
  .article__hero img { max-height: 350px; object-fit: cover; }
  .article__gallery-item { max-height: 250px; }
  .article__gallery-item img { max-height: 250px; object-fit: cover; }
}
@media (max-width: 640px) {
  .hero__main-img { max-width: 100%; }
  .product-compact__image { max-height: 220px; }
  .article__hero img { max-height: 250px; }
}

/* Floating fix */
.floating {
  transform: none !important;
  transition: opacity 0.4s ease !important;
  position: fixed !important;
}
.floating.is-visible { transform: none !important; }
.floating__expanded { transform: none !important; transition: opacity 0.3s ease !important; }
.floating__expanded.is-open { transform: none !important; }
.floating__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.floating__icon--close { width: 1.25rem; height: 1.25rem; }
.floating__btn--main.is-open .floating__icon--close { transform: translate(-50%, -50%); }
@media (max-width: 640px) { .floating__btn:hover { transform: none !important; } }

/* Header — centered */
.header__inner {
  max-width: 1280px !important;
  margin-inline: auto !important;
}