/* ===== New design for the website styles plan===== */

/* ===== 1. Main Page ===== */

    /* ===== 1.1 Hero / Introduction ===== */

    /* ===== 1.2 Products Slider ===== */

    /* ===== 1.3 About Us ===== */

    /* ===== 1.4 Advantages ===== */

    /* ===== 1.5 News ===== */

/* ===== 2. Products Page ===== */

/* ===== 3. Production Page ===== */

    /* ===== 3.1 Banner (video) ===== */

    /* ===== 3.2 About fabric in details (timeline) ===== */

    /* ===== 3.3 Fabric today ===== */

    /* ===== 3.4 The raw materials we use ===== */

/* ===== 4. About Us Page (Про нас) ===== */

    /* ===== 4.1 Banner (image) ===== */

    /* ===== 4.2 More about the company ===== */

    /* ===== 4.3 Certificates (slider + lightbox) ===== */

/* ===== 5. Статті (Articles Page) ===== */

    /* ===== 5.1 Banner (image, contained on desktop) ===== */

    /* ===== 5.2 Articles list ===== */

    /* ===== 5.3 Pagination — reuses .catalog__* / .products-slider__arrow from Products page ===== */

/* ===== 6. Для акціонерів (For Shareholders Page) ===== */

    /* ===== 6.1 Accordion (Регулярна/Особлива/Інша інформація) ===== */

    /* ===== 6.2 Annual reports grid (expandable cards + JS pagination) ===== */

/* ===== 7. Контакти (Contacts Page) ===== */

    /* ===== 7.1 Contact info grid + form ===== */

    /* ===== 7.2 КВЕД list ===== */

/* ===== 8. Сторінка 404 ===== */

/* ===== 9. Сторінка товару (desktop) ===== */

/* ===== 1.1 HERO / INTRODUCTION ===== */

.hero {
  position: relative;
  top: 80px;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
}

/* --- title: steps (desktop/tablet) --- */
.hero__title {
  position: absolute;
  top: 46px;
  left: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1.36;
  text-transform: uppercase;
}

.hero__title-line--1 { margin-left: 0; }
.hero__title-line--2 { margin-left: clamp(80px, 17vw, 300px); } 
.hero__title-line--3 { margin-left: clamp(160px, 37vw, 700px); }

.text-bold-700 {
  font-weight: 700;
}

.text-semibold-600 {
  font-weight: 600;
}

/* --- "On the market since 1938" --- */
.hero__badge {
  position: absolute;
  top: 46px;
  right: 0;
  color: #fff;
}

.hero__badge h3 {
  font-weight: 500;
  font-size: 24px;
}
/* --- button --- */
.hero__btn {
  position: absolute;
  left: 0;
  bottom: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 309px;
  height: 56px;
  background-color: #038929;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.hero__btn:hover {
  background-color: transparent;
  border: 2px solid #fff;
}

/* --- video queue cards --- */
.hero__queue {
  position: absolute;
  right: 0;
  bottom: 46px;
  z-index: 2;
  display: flex;
  gap: 24px;
}

.hero__queue-card {
  position: relative;
  width: 303px;
  height: 139px;
  border: 1px solid #fff;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease; /* for hover effect */
}

.hero__queue-card:hover {
  transform: scale(1.05);
}

.hero__queue-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.hero__queue-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #1F1F1F;
}

/* ===== Tablet: title becomes one block, without steps ===== */
@media (max-width: 1023px) {

  .hero__title {
    flex-direction: column;
    max-width: 600px;
  }

  .hero__queue-card {
    position: relative;
    width: 168px;
    height: 78px;
    border: 1px solid #fff;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
  }

  .hero__badge h3 {
    font-size: 16px;
  }

  .hero__title-line--2,
  .hero__title-line--3 {
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .hero__content {
    margin-left: 24px;
    margin-right: 24px;
  }

  .hero__queue {
    right: 48px;
  }

  .hero__badge {
    right: 48px;
  }
}

/* ===== Mobile: content under video, cards hide ===== */
@media (max-width: 767px) {
  .hero {
    height: auto;
    display: flex;
    flex-direction: column;
    top: 64px;
  }

  .hero__media {
    position: relative;
    height: 60vh;
  }

  .hero__overlay {
    display: none;
  }

  .hero__badge {
    position: static;
    color: #1F1F1F;
  }

  .hero__badge h3 {
    margin-top: 8px;
    font-size: 20px;
  }

  .hero__queue {
    display: none;
  }

  .hero__content {
    position: relative;
    height: auto;
    padding-top: 32px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
    background-color: #fff;
  }

  .hero__title {
    position: static;
    color: #1F1F1F;
    font-size: 28px;
  }

  .hero__btn {
    position: static;
    margin-top: 20px;
    width: 100%;
  }

  .hero__btn:hover {
    background-color: #1A562B;
    border: none;
    color: #fff;
  }
}

@media (max-width: 567px) {
  .hero {
    top: 64px;
  }
}

@media (max-width: 500px) {
  .hero__media {
    position: relative;
    height: 21vh;
  }

  .hero__badge h3 {
    margin-top: 8px;
    font-size: 16px;
  }

  .hero__title {
    font-size: 24px;
  }
}

/* ===== 1.2 Products Slider ===== */

.products-slider {
  padding-top: 144px;
}

.products-slider__wrap .swiper-container {
  overflow: visible;
}

.products-slider__title {
  font-size: clamp(20px, 2.5vw, 36px);
  color: #1F1F1F;
  margin-bottom: 32px;
  padding-left: 0;
}

.products-slider__wrap {
  position: relative;
}

.product-card {
  display: block;
  width: 100%;
}

.product-card__image {
  width: 100%;
  border: 1px solid #B2B2B2;
  aspect-ratio: 1 / 1;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.product-card__title {
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  margin-top: 10px;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card:hover .product-card__image {
  z-index: 5;
}

.product-card:hover .product-card__image img {
  transform: scale(1.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 500px) {
  /* на мобільному великий desktop-зум (1.3 + тінь) зайвий всередині слайдера,
     тому тут робимо таке саме легке збільшення, як у .catalog__grid .product-card
     на сторінці каталогу, щоб дотик давав однаковий відгук по всьому сайту */
  .product-card:hover .product-card__image img {
    transform: scale(1.05);
    box-shadow: none;
  }

  .product-card:hover .product-card__image {
    transition: border-color 0.3s;
    border-color: #1A562B;
  }

  .product-card:hover .product-card__title {
    font-weight: 500;
    text-decoration: underline;
  }
}
/* ===== Arrows navigation ===== */

.products-slider__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 56px;
  margin-top: 28px;
}

.products-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #1F1F1F;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.products-slider__arrow svg path {
  transition: stroke 0.3s;
}

.products-slider__arrow:hover {
  background-color: #1A562B;
  border-color: #1A562B;
}

.products-slider__arrow:hover svg path {
  stroke: #fff;
}

.products-slider__arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .products-slider {
    padding-top: 104px;
  }
}

@media (max-width: 767px) {
  .products-slider {
    padding-top: 88px;
  }

  .products-slider__nav {
    justify-content: center;
  }
}

@media (min-width: 820px) {
  .products-slider.container {
    max-width: none;
  }
}

/* ===== 1.3 About Us ===== */

.production {
  padding-top: clamp(64px, 5vw, 92px);
}

.production__head {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 32px;
}

.production__title,
.production__desc {
  flex: 1;
}

.production__title-text {
  font-size: clamp(20px, 2.5vw, 36px);
  color: #1F1F1F;
  line-height: normal;
  max-width: 346px;
}

.production__text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  line-height: 115%;
}

.production__link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
  margin-top: 14px;
}

.production__link:hover {
  color: #1A562B;
}

.production__gallery {
  display: flex;
  gap: 24px;
}

.production__img {
  flex: 1;
  aspect-ratio: 951 / 538;
  overflow: hidden;
}

.production__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Mobile: one column, one photo, link underlined ===== */
@media (max-width: 767px) {
  .production {
    padding-top: 49px;
  }

  .production__head {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 16px;
  }

  .production__title-text {
    max-width: 100%;
  }

  .production__img--2 {
    display: none;
  }

  .production__link {
    border-bottom-color: #1F1F1F;
  }

  .production__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1250px) {
  .production__desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .production__link {
    margin-top: auto;
  }
}

@media (min-width: 768px) and (max-width: 1024px), (max-width: 500px) {
  .production__img {
    aspect-ratio: 390 / 445;
  }
}

/* ===== 1.4 Advantages ===== */

.advantages-v2 {
  padding-top: 92px;
}

.advantages-v2__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 32px;
}

.advantages-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.advantages-v2__item {
  position: relative;
  order: var(--order);
  background-color: #EFEFEF;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 220px;
  overflow: hidden;
  transition: background-color 0.4s ease, align-items 0.4s ease, padding 0.4s ease;
}

.advantages-v2__icon {
  width: 110px;
  height: 100px;
  margin-bottom: 16px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.advantages-v2__item-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #1F1F1F;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.advantages-v2__item-text {
  position: absolute;
  max-width: 372px;
  left: 24px;
  bottom: 24px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* card hover effect — #1A562B background */
.advantages-v2__item:hover {
  background-color: #1A562B;
  padding: 24px;
}

.advantages-v2__item:hover .advantages-v2__item-title,
.advantages-v2__item:hover .advantages-v2__icon {
  opacity: 0;
}

.advantages-v2__item:hover .advantages-v2__item-text {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Mobile: 2 columns, card replacement ===== */
@media (max-width: 767px) {
  .advantages-v2 {
    padding-top: 48px;
  }

  .advantages-v2__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .advantages-v2__icon {
    width: 85px;
    height: 70px;
    margin-bottom: 10px;
  }

  .advantages-v2__item-title {
    font-size: 16px;
    max-width: 80%;
  }
  
  .advantages-v2__item {
    height: auto;
    min-height: 180px;
    padding: 0;
  }
  
  .advantages-v2__item:hover {
    background-color: #EFEFEF;
    padding: 0;
  }

  .advantages-v2__item:hover .advantages-v2__item-title, 
  .advantages-v2__item:hover .advantages-v2__icon {
    opacity: 1;
  }

  .advantages-v2__item:hover .advantages-v2__item-text {
    opacity: 0;
  }
}

/* ===== Tablet: 768–1023px — grid 2 columns ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .advantages-v2 {
    padding-top: 64px;
  }

  .advantages-v2__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .advantages-v2__item {
    min-height: 188px;
  }
}

/* ===== 1.5 News ===== */

.news-slider {
  padding-top: 47px;
}

.news-slider__title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 32px;
}

.news-slider__inner {
  position: relative;
}

.news-slider__wrap .swiper-container {
  overflow: visible;
}

.swiper-container:not(.swiper-no-swiping) .swiper-wrapper div {
  cursor: pointer !important;
}

.swiper-slide .news-card {
  position: relative;
  z-index: 100;
  cursor: pointer !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 199px;
  padding: 24px;
  border: 1px solid #B2B2B2;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
  text-align: left;
}

.news-card__title {
  font-size: 20px;
  font-weight: 600;
  color: #1F1F1F;
  margin-bottom: 12px;
  transition: color 0.3s;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card__excerpt {
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  transition: color 0.3s;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card__date {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  transition: color 0.3s;
  text-align: end;
}

.news-card:hover {
  background-color: #1A562B;
  border-color: #1A562B;
}

.news-card:hover .news-card__title,
.news-card:hover .news-card__excerpt,
.news-card:hover .news-card__date {
  color: #fff;
}

.news-card:hover {
  cursor: pointer;
}

.news-slider__nav {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 56px;
  margin-top: 28px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .news-card {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .news-card {
    width: 100%;
  }

  .news-slider__nav {
    justify-content: center;
  }
}

@media (min-width: 820px) {
  .news-slider.container {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .news-slider {
    padding-top: 64px;
  }
}

@media (min-width: 1024px) {
  .news-slider {
    padding-top: 92px;
  }
}

@media (max-width: 850px) {
  .news-slider__title {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* ===== 2. Products Page ===== */

.catalog {
  padding-top: 144px;
}

.catalog__title {
  font-weight: 400;
  font-size: 36px;
  color: #1F1F1F;
  margin-bottom: 32px;
}

/* --- filters: grid 4 columns --- */
.catalog__filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 28px;
  margin-bottom: 36px;
}

.catalog__filter-btn {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #1F1F1F;
  background-color: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #1F1F1F;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.catalog__filter-btn[data-active="1"] {
  background-color: #B2B2B2;
  border-color: #B2B2B2;
  color: #fff;
}

.catalog__filter-btn:hover {
  background-color: #1A562B;
  border-color: #1A562B;
  color: #fff;
}

.catalog__filter-btn[data-active="1"]:hover {
  background-color: #B2B2B5;
  border-color: #1A562B;
}

/* --- active filters (chips) --- */
.catalog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 32px;
}

.catalog__chip {
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  text-transform: uppercase;
}

/* --- products grid: 4 columns --- */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 25px;
  margin-bottom: 64px;
}

.catalog__grid .product-card {
  transition: transform 0.3s;
}

.catalog__grid .product-card:nth-child(7) {
  grid-column: span 2;
}

.catalog__grid .product-card:nth-child(7) .product-card__image {
  justify-items: center;
  aspect-ratio: 2.09 / 1;
}

.catalog__grid .product-card:nth-child(7) .product-card__image img {
  width: 50%;
  height: 100%;
  align-self: center;
}

.catalog__grid .product-card:hover .product-card__image img {
  transform: scale(1.05);
  box-shadow: none;
}

.catalog__grid .product-card:hover {
  transform: scale(1.05);
}

.catalog__grid .product-card:hover .product-card__title {
  font-weight: 500;
  text-decoration: underline;
}

.catalog__grid .product-card:hover .product-card__image{
  transition: border-color 0.3s;
  border-color: #1A562B;
}

.catalog__empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 18px;
  color: #696969;
  padding: 60px 0;
}

/* --- pagination --- */
.catalog__load-more {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 30px;
  cursor: pointer;
  transition: color 0.3s;
}

.catalog__load-more:hover {
  color: #1A562B;
}

.catalog__pagination-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog__pagination-count {
  font-size: 18px;
  font-weight: 600;
  color: #1F1F1F;
  text-align: center;
}

.catalog__pagination-total {
  color: #696969;
}

.catalog__pagination-arrows {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* ===== Tablet: 768–1023px — 2 columns ===== */
@media (max-width: 1023px) {
  .catalog {
    padding-top: 120px;
  }

  .catalog__grid {
    column-gap: 16px;
    row-gap: 20px;
    margin-bottom: 40px;
  }

  .catalog__chips {
    margin-bottom: 24px;
  }

  .catalog__filters {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 8px;
    margin-bottom: 28px;
  }

  .catalog__filter-btn {
    flex: 1 1 calc((100% - 32px) / 3);
  }

  .catalog__load-more {
    margin-bottom: 22px;
  }

}

/* ===== Mobile: to 767px — 1 column --- */
@media (max-width: 767px) {
  .catalog {
    padding-top: 112px;
  }

  .catalog__title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .catalog__filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 8px;
  }

  .catalog__filter-btn:nth-last-child(2):nth-child(7),
  .catalog__filter-btn:nth-last-child(1):nth-child(8) {
    grid-column: span 2;
  }

  .catalog__filter-btn {
    font-size: 12px;
    height: 32px;
    padding: 0 8px;
  }

  .catalog__chips {
    gap: 12px;
    margin-bottom: 20px;
  }

  .catalog__chip {
    font-size: 10px;
  }

  .catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    column-gap: 12px;
    margin-bottom: 32px;
  }

  .catalog__load-more {
    font-size: 16px;
    margin-bottom: 56px;
  }

  .catalog__pagination-row {
    flex-direction: column;
    gap: 16px;
    height: 24px;    
  }

  .catalog__pagination-count {
    font-size: 14px;
    margin: 0;
  }

  .catalog__pagination-arrows {
    position: relative;
    top: -42px;
  }

}

@media (max-width: 567px) {
  .catalog {
    padding-top: 96px;
  }
}
/* ===== 3. Production Page ===== */

/* ===== 3.1 Banner (video) ===== */

.factory-banner {
  position: relative;
  top: 80px;
  width: 100%;
  height: 626px;
  overflow: hidden;
}

.factory-banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 3.2 About fabric in details (timeline) ===== */

.factory-history {
  padding-top: 144px;
}

.factory-history__title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 40px;
}

.factory-history__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.factory-history__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  padding: 24px;
  background-color: #1A562B;
}

.factory-history__card:nth-child(4),
.factory-history__card:nth-child(7),
.factory-history__card--light {
  background-color: #F0F0F0;
}

.factory-history__card:nth-child(4) .factory-history__year,
.factory-history__card:nth-child(7) .factory-history__year,
.factory-history__card--light .factory-history__year {
  color: #1F1F1F;
}

.factory-history__card:nth-child(4) .factory-history__text,
.factory-history__card:nth-child(7) .factory-history__text,
.factory-history__card--light .factory-history__text {
  color: #1F1F1F;
}

.factory-history__year {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.factory-history__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

/* --- Mobile slider --- */
.factory-history__slider {
  display: none;
}

.factory-history__slider .swiper-slide {
  height: auto;
}

.factory-history__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.factory-history__count {
  font-size: 16px;
  font-weight: 600;
  color: #1F1F1F;
}

.factory-history__count-total {
  font-weight: 400;
  color: #696969;
}

/* ===== 3.3 Fabric today ===== */

.factory-today {
  padding-top: 92px;
}

.factory-today__row {
  display: flex;
  align-items: stretch;
  gap: 25px;
}

.factory-today__card,
.factory-today__image {
  flex: 1;
  width: 50%;
}

.factory-today__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background-color: #F0F0F0;
  min-height: 303px;
}

.factory-today__title {
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
}

.factory-today__text {
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
}

.factory-today__image {
  overflow: hidden;
  align-self: stretch;
}

.factory-today__image img {
  display: block;
  width: 100%;
  height: 100%;
  /* без object-fit картинка диктує свою власну висоту за власним
     співвідношенням сторін (навіть маючи height:100%), через що висота
     .factory-today__image "не слухається" stretch і не збігається з карткою.
     object-fit: cover дозволяє картинці завжди точно заповнювати висоту,
     яку їй визначає флекс-контейнер (обрізаючи зайве), замість диктувати її */
  object-fit: cover;
}

/* ===== 3.4 The raw materials we use ===== */

.factory-raw {
  padding-top: 92px;
  padding-bottom: 120px;
}

.factory-raw__title {
  font-size: 36px;
  font-weight: 400;
  color: #1F1F1F;
  margin-bottom: 40px;
  max-width: 500px;
}

.factory-raw__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.factory-raw__item {
  display: flex;
  flex-direction: column;
}

.factory-raw__item-content {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  justify-content: space-between;
}

.factory-raw__item-title {
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
  margin-bottom: 16px;
}

.factory-raw__item-text {
  font-size: 16px;
  font-weight: 400;
  color: #696969;
  margin-bottom: 12px;
}

.factory-raw__item-text p + p {
  margin-top: 16px;
}

.factory-raw__toggle {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  text-align: left;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.factory-raw__toggle:hover {
  color: #1A562B;
}

.factory-raw__toggle.is-hidden {
  display: none;
}

.factory-raw__item-image {
  aspect-ratio: 628 / 354;
  overflow: hidden;
}

.factory-raw__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Tablet: 768-1023px (провізорно, не звірено з Figma tablet-фреймом) ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .factory-banner {
    height: 50vh;
  }

  .factory-history {
    padding-top: 120px;
  }

  .factory-history__grid {
    gap: 16px;
  }

  .factory-history__card {
    aspect-ratio: 1.4 / 1;
  }

  .factory-today, .factory-raw {
    padding-top: 64px;
  }
  .factory-today__row {
    flex-direction: column;
  }

  .factory-today__title, .factory-raw__item-title {
    font-size: 20px;
  }

  .factory-raw__title {
    font-size: 24px;
    line-height: 32px;
    max-width: 350px;
    margin-bottom: 32px;
  }

  .factory-today__card,
  .factory-today__image {
    width: 100%;
  }

  .factory-raw__grid {
    gap: 16px;
  }

  .factory-raw__item-image {
    aspect-ratio: 352 / 402;
  }

  .factory-raw {
    padding-bottom: 80px;
  }
}

@media (max-width: 1024px) {
  .factory-raw__item-text p:nth-of-type(n+2) {
    display: none;
  }
  
  .factory-raw__item-text.is-expanded p:nth-of-type(n+2) {
    display: block;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .factory-banner {
    height: 21vh;
    top: 64px;
  }

  .factory-history {
    padding-top: 96px;
  }

  .factory-history__title,
  .factory-raw__title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .factory-history__grid {
    display: none;
  }

  .factory-history__slider {
    display: block;
  }

  .factory-history__card {
    aspect-ratio: auto;
    text-align: left;
    min-height: 240px;
    padding: 26px;
  }

  .factory-history__year {
    font-size: 20px;
    font-weight: 600;
  }

  .factory-today {
    padding-top: 48px;
  }

  .factory-today__title {
    font-size: 20px;
  }

  .factory-raw__item-image {
    aspect-ratio: 352 / 402;
  }

  .factory-today__row {
    flex-direction: column;
    gap: 12px;
  }

  .factory-today__card {
    flex: 1;
    width: 100%;
  }

  .factory-today__image {
    flex: none;
    width: 100%;
  }

  .factory-raw {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .factory-raw__item-title {
    /* уніфіковано з усіма іншими заголовками на мобільному — 20px */
    font-size: 20px;
    margin-bottom: 8px;
  }

  .factory-raw__toggle {
    margin-bottom: 16px;
  }

  .factory-raw__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 567px) {
  .factory-banner {
    top: 64px;
  }
}
/* ===== 4. ПРО НАС (ABOUT US PAGE) ===== */

/* ===== 4.1 Banner (video) ===== */

.about-banner {
  position: relative;
  top: 80px;
  width: 100%;
  height: 634px;
  overflow: hidden;
}

.about-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 4.2 Більше про компанію ===== */

.about-intro {
  padding-top: calc(80px + 64px);
}

.about-intro__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.about-intro__title {
  flex: 1;
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  color: #1F1F1F;
}

.about-intro__content {
  flex: 1;
}

.about-intro__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.about-intro__text p {
  color: #696969;
}

.about-intro__text p + p {
  margin-top: 16px;
}

.about-intro__toggle {
  display: none;
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  cursor: pointer;
  transition: color 0.3s;
}

.about-intro__toggle:hover {
  color: #1A562B;
}

.about-intro__toggle.is-hidden {
  display: none;
}

@media (max-width: 1024px) {
  .about-intro__text p:nth-of-type(n+3) {
    display: none;
  }

  .about-intro__text.is-expanded p:nth-of-type(n+3) {
    display: block;
  }

  .about-intro__toggle {
    display: block;
  }
}

/* ===== 4.3 Сертифікати (слайдер + lightbox) ===== */

.about-certificates {
  padding-top: 92px;
  padding-bottom: 137px;
}

.about-certificates__wrap {
  position: relative;
}

.about-certificates__slide {
  aspect-ratio: 302 / 435;
  position: relative;
}

.about-certificates__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.about-certificates__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 56px;
  margin-top: 28px;
}

@media (min-width: 820px) {
  .about-certificates.container {
    max-width: none;
  }
}

/* ===== Tablet: 768-1023px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .about-banner {
    height: 30vh;
  }

  .about-intro {
    padding-top: 120px;
  }

  .about-certificates {
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .about-certificates__nav {
    margin-top: 24px;
  }

  .about-intro__head {
    flex-direction: row;
    gap: 24px;
  }

  .about-intro__title {
    font-size: 24px;
  }

  .about-intro__text {
    font-size: 16px;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .about-banner {
    height: 21vh;
  }

  .about-intro__toggle {
    margin-top: 8px;
  }

  .about-intro {
    padding-top: 96px;
  }

  .about-intro__head {
    flex-direction: column;
    gap: 24px;
  }

  .about-intro__title {
    font-size: 20px;
  }

  .about-certificates__nav {
    margin-top: 20px;
  }

  .about-certificates {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .about-certificates__nav {
    justify-content: center;
  }
}

@media (max-width: 567px) {
  .about-banner {
    top: 64px;
  }
}
/* ===== 5. СТАТТІ (ARTICLES PAGE) ===== */

/* ===== 5.1 Banner (image, contained on desktop) ===== */

.articles-banner {
  position: relative;
  top: 80px;
  width: 100%;
  height: 634px;
  overflow: hidden;
}

.articles-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 5.2 Articles list ===== */

.articles {
  padding-top: 144px;
  padding-bottom: 124px;
}

.articles__title {
  font-size: 36px;
  font-weight: 700;
  color: #1F1F1F;
  margin-bottom: 40px;
}

.articles__list {
  border-top: 1px solid #B2B2B2;
  margin-bottom: 64px;
}

.articles__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  padding: 18px 0;
  border-bottom: 1px solid #B2B2B2;
  text-decoration: none;
}

.articles__row-title {
  max-width: 40%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #1F1F1F;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: uppercase;
}

.articles__row:hover .articles__row-title {
  font-weight: 500;
  text-decoration: underline;
}

/* Photo preview: hidden by default via opacity (not display:none — display can't be
   transitioned, and the smooth appearance was explicitly requested). Bottom edge is
   anchored to the row's own vertical centre and the photo grows upward from there,
   matching its floating position in the Figma mock-up. Shown only on true-hover
   (mouse) devices — on touch, tapping just opens the article. */
.articles__row-photo {
  position: absolute;
  left: 58%;
  bottom: 50%;
  width: 193px;
  height: 109px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}

.articles__row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .articles__row:hover .articles__row-photo {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.articles__row-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.articles__empty {
  text-align: center;
  font-size: 18px;
  color: #696969;
  padding: 60px 0;
}

/* ===== 5.3 Pagination — reuses .catalog__* / .products-slider__arrow from the Products page ===== */

/* ===== Tablet: 768–1023px — banner stays contained, same as desktop ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .articles-banner {
    height: 30vh;
  }

  .articles {
    padding-top: 120px;
    padding-bottom: 86px;
  }

  .articles__title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .articles__row {
    padding: 16px 0;
  }

  .articles__list {
    margin-bottom: 40px;
  }

  .articles__row-title {
    max-width: 55%;
    font-size: 18px;
  }

  .articles__row-photo {
    left: 70%;
  }
}

/* ===== Mobile: до 767px — тут банер стає full-bleed, як і на інших сторінках ===== */
@media (max-width: 767px) {
  .articles-banner.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .articles-banner {
    height: 21vh;
  }

  .articles__row-photo {
    display: none;
  }

  .articles {
    padding-top: 96px;
    padding-bottom: 48px;
  }

  .articles__title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .articles__list {
    margin-bottom: 32px;
  }

  .articles__row {
    min-height: 64px;
    padding: 14px 0;
    gap: 12px;
  }

  .articles__row-title {
    max-width: 70%;
    font-size: 14px;
  }
}

@media (max-width: 567px) {
  .articles-banner {
    top: 64px
  }
}

/* ===== 6. ДЛЯ АКЦІОНЕРІВ (FOR SHAREHOLDERS PAGE) ===== */

/* ===== 6.1 Accordion (Регулярна/Особлива/Інша інформація) ===== */

.shareholders-accordion {
  padding-top: 144px;
  padding-bottom: 92px;
}

.shareholders-accordion__main_title {
  max-width: 45%;
  font-size: 36px;
  font-weight: 400;
  color: #1F1F1F;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.shareholders-accordion__title {
  max-width: 50%;
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
  margin-bottom: 28px;
  line-height: normal;
}

.shareholders-accordion__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
}

.shareholders-accordion__header {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  /* padding: 12px 0; */
  padding-bottom: 10px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* Underline that grows left-to-right on hover — same technique/timing as the
   header nav link underline (.toggle-block ul li a::after in main.css) */
.shareholders-accordion__header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: #B2B2B2;
  transition: width 0.33s;
}

.shareholders-accordion__header:hover::after,
.shareholders-accordion__item.is-open .shareholders-accordion__header::after {
  width: 100%;
}

.shareholders-accordion__heading {
  font-size: 16px;
  line-height: 1.4;
}

.shareholders-accordion__heading-main {
  font-weight: 500;
  color: #1F1F1F;
}

.shareholders-accordion__heading-sub {
  font-weight: 400;
  color: #696969;
}

/* .shareholders-accordion__heading-main + .shareholders-accordion__heading-sub {
  margin-left: 4px;
} */

.shareholders-accordion__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

.shareholders-accordion__item.is-open .shareholders-accordion__chevron {
  transform: rotate(90deg);
}

.shareholders-accordion__body {
  display: none;
  padding: 0 0 20px 15px;
  margin-top: 14px;
}

.shareholders-accordion__content {
  font-size: 14px;
  line-height: 1.6;
  color: #1F1F1F;
}

.shareholders-accordion__content ul,
.shareholders-accordion__content ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shareholders-accordion__content li {
  color: #696969;
  margin-bottom: 8px;
}

.shareholders-accordion__content li::before {
  content: "– ";

}

.shareholders-accordion__content li:last-child {
  margin-bottom: 0;
}

.shareholders-accordion__content a {
  color: #1A562B;
  text-decoration: underline;
}

.shareholders-accordion__content a:hover {
  color: #1F1F1F;
}

.shareholders-accordion__content p {
  color: #696969;
  margin: 0 0 12px;
}

.shareholders-accordion__content p:last-child {
  margin-bottom: 0;
}

.shareholders-accordion__collapse {
  display: block;
  margin-left: auto;
  margin-top: 12px;
  font-size: 14px;
  color: #696969;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* .shareholders-accordion__collapse:hover {
  color: #1A562B;
} */

/* ===== 6.2 Annual reports grid (expandable cards + JS pagination) ===== */

.reports {
  padding-bottom: 126px;
}

.reports__title {
  max-width: 50%;
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
  margin-bottom: 36px;
  line-height: normal;
}

.reports__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.reports__card-wrap {
  /* Exact height is set in JS to match each card's real (collapsed) content
     height — long file names wrap to 2-3 lines, so a fixed px here was
     clipping items. This is just a fallback for the instant before JS runs. */
  position: relative;
  min-height: 250px;
}

.reports__card {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #B2B2B2;
  overflow: hidden;
  transition: box-shadow 0.35s;
}

.reports__card.is-expanded {
  /* inset:0 above also pins bottom:0, which forces the box to stay exactly
     the wrap's height no matter what height:auto says — release bottom so
     it can actually grow downward and show every item */
  bottom: auto;
  z-index: 20;
  height: auto;
  overflow: visible;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.reports__card-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background-color: #1A562B;
}

.reports__card-year {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}

.reports__card-toggle {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.35s ease;
}

.reports__card-toggle::before,
.reports__card-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.reports__card-toggle::before {
  width: 20px;
  height: 2px;
}

.reports__card-toggle::after {
  width: 2px;
  height: 20px;
}

.reports__card.is-expanded .reports__card-toggle {
  transform: rotate(45deg);
}

.reports__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.reports__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reports__card-list li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.4;
  color: #1F1F1F;
}

.reports__card-list li + li {
  margin-top: 10px;
}

.reports__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background-color: #1A562B;
}

.reports__card-list a {
  color: #1F1F1F;
  text-decoration: none;
}

.reports__card-list a:hover {
  color: #1A562B;
  text-decoration: underline;
}

.reports__card-list li.is-extra {
  display: none;
}

.reports__card.is-expanded .reports__card-list li.is-extra {
  display: block;
}

.reports__card-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1F1F1F;
}

.reports__card-download svg path {
  fill: #1A562B;
}

.reports__card-download:hover {
  color: #1A562B;
}

.reports__card-more {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  color: #1F1F1F;
  background: none;
  border: none;
  cursor: pointer;
}

.reports__card-more:hover {
  color: #1A562B;
}

.reports__load-more {
  display: none;
}

.reports__load-more.is-visible {
  display: block;
}

.reports__pagination-row {
  display: none;
}

.reports__pagination-row.is-visible {
  display: flex;
}

/* ===== Tablet: 768–1023px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .shareholders-accordion {
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .shareholders-accordion__main_title {
    max-width: 55%;
    font-size: 24px;
    margin-bottom: 32px;
  }

  .shareholders-accordion__title {
    max-width: 80%;
    font-size: 20px;
    margin-bottom: 24px;
  }

  .shareholders-accordion__grid {
    grid-template-columns: 1fr;
  }

  .reports {
    padding-bottom: 90px;
  }

  .reports__title {
    max-width: 80%;
    font-size: 20px;
    margin-bottom: 32px;
  }

  .reports__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .shareholders-accordion {
    padding-top: 112px;
    padding-bottom: 48px;
  }

  .shareholders-accordion__main_title {
    max-width: 90%;
    font-size: 20px;
    margin-bottom: 24px;
  }

  .shareholders-accordion__title {
    max-width: 90%;
    font-size: 18px;
    margin-bottom: 16px;
  }

  .shareholders-accordion__grid {
    grid-template-columns: 1fr;
  }

  .reports {
    padding-bottom: 48px;
  }

  .reports__title {
    max-width: 100%;
    font-size: 18px;
    margin-bottom: 24px;
  }

  .reports__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }

  .reports__card-wrap {
    min-height: 230px;
  }

  .reports__card-year {
    font-size: 20px;
  }

  .reports__card-list a {
    font-size: 16px;
  }
}

@media (max-width: 567px) {
  .shareholders-accordion {
    padding-top: 96px;
  }
}

/* ===== 7. КОНТАКТИ (CONTACTS PAGE) ===== */

/* ===== 7.1 Contact info grid + form ===== */

.contacts {
  padding-top: 144px;
  padding-bottom: 137px;
}

.contacts__title {
  font-size: 36px;
  font-weight: 400;
  color: #1F1F1F;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.contacts-info {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  margin-bottom: 92px;
}

.contacts-info__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Wraps the phones grid + address/e-mail meta block. On desktop and mobile these
   simply stack (grid, then meta); on tablet the Figma shows them side by side, see
   the tablet media query below. */
.contacts-info__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 64px;
}

.contacts-info__grid {
  display: flex;
  gap: 24px;
}

.contacts-info__phones-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* Address + e-mail. Row on desktop/mobile (side by side), column on tablet
   (stacked, next to the phones grid) — see media queries below. */
.contacts-info__meta {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.contacts-info__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: #1F1F1F;
}

.contacts-info__item-label {
  font-size: 16px;
  font-weight: 600;
  color: #1F1F1F;
}

.contacts-info__item-value {
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  transition: color 0.3s;
}

a.contacts-info__item:hover .contacts-info__item-value {
  color: #1A562B;
}

.contacts-info__card {
  display: block;
}

.contacts-info__card__mobile {
  display: none;
}

/* .contacts-info__meta div.contacts-info__item {
  max-width: 48%;
} */

.contacts-info__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1F1F1F;
  text-decoration: none;
  margin-bottom: 16px;
}

.contacts-info__card-link svg path {
  stroke: #696969;
  transition: stroke 0.3s;
}

.contacts-info__card-link:hover {
  color: #1A562B;
}

.contacts-info__card-link:hover svg path {
  stroke: #1A562B;
}

.contacts-info__card-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 517px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #1F1F1F;
  text-decoration: underline;
  transition: color 0.3s;
  cursor: pointer;
  margin-bottom: 8px;
}

.contacts-info__card-text:hover {
  text-decoration: underline;
}

.contacts-info__card-text-icon path {
  stroke: #696969;
  transition: stroke 0.3s;
}

.contacts-info__card-text:hover .contacts-info__card-text-icon path {
  stroke: #1A562B;
}

.contacts-form {
  background-color: #1A562B;
  padding: 56px 112px;
}

.contacts-form__title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.contacts-form__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

.contacts-form__fields .wpcf7-form p {
  margin: 0 0 10px;
}

.contacts-form__fields .wpcf7-form label {
  display: block;
}

.contacts-form__fields .wpcf7-form input[type="text"],
.contacts-form__fields .wpcf7-form input[type="tel"],
.contacts-form__fields .wpcf7-form input[type="email"],
.contacts-form__fields .wpcf7-form textarea {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  background-color: #fff;
  border: none;
  font-size: 14px;
  color: #1F1F1F;
  font-family: inherit;
}

.contacts-form__fields .wpcf7-form textarea {
  height: 80px;
  padding-top: 14px;
  resize: none;
}

.contacts-form__fields .wpcf7-form input::placeholder,
.contacts-form__fields .wpcf7-form textarea::placeholder {
  color: #696969;
  font-size: 14px;
}

.contacts-form__fields .wpcf7-form .input-field-wrapp {
  height: auto;
}

.contacts-form__fields .wpcf7-form .form-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 24px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.contacts-form__fields .wpcf7-form .form-button:hover {
  background-color: #038929;
  border-color: #038929;
  color: #fff;
}

/* ===== 7.2 КВЕД list ===== */

.contacts-kved {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
}

.contacts-kved__title {
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
}

.contacts-kved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.contacts-kved__list li {
  position: relative;
  padding-left: 18px;
  font-size: 18px;
  line-height: 1.5;
  color: #1F1F1F;
}

.contacts-kved__list li + li {
  margin-top: 12px;
}

.contacts-kved__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: #1A562B;
}

/* ===== Tablet: 768–1023px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .contacts {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .contacts__title {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .contacts-info {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: auto;
  }

  .contacts-form {
    padding: 56px 156px;
    margin-bottom: 64px;
  }

  .contacts-info__card-text {
    max-width: 100%;
  }

  /* Figma tablet: phones grid sits to the left, address/e-mail column to the right,
     on the same row (unlike mobile, where the meta block sits below the grid). */
  .contacts-info__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .contacts-info__meta div.contacts-info__item {
    max-width: 100%;
  }
  .contacts-info__meta {
    flex-direction: column;
    gap: 24px;
  }

  .contacts-info__meta, .contacts-info__grid {
    flex:1;
  }

  .contacts-kved {
    padding-top: 64px;
    flex-direction: column;
    gap: 16px;
  }

  .contacts-kved__list li {
    font-size: 16px;
  }

  .contacts-kved__title {
    font-size: 20px;
  }

  .contacts-kved__title {
    width: 100%;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .contacts {
    padding-top: 112px;
    padding-bottom: 64px;
  }

  .contacts__title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .contacts-info {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }

  .contacts-info__top {
    gap: 16px;
    margin-bottom: 0;
  }

  .contacts-info__grid {
    gap: 16px;
  }

  .contacts-info__phones-col {
    gap: 12px;
  }

  .contacts-form {
    padding: 40px 47px;
  }

  .contacts-form__title {
    font-size: 18px;
  }

  .contacts-form__subtitle {
    font-size: 12px;
  }

  .wpcf7-form .input {
    margin-bottom: 10px;
  }

  .contacts-kved {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .contacts-kved__title {
    width: 100%;
    font-size: 18px;
  }

  .contacts-kved__list li {
    font-size: 16px;  
  }
}

@media (max-width: 1200px) {
  .contacts-info__card {
    display: none;
  }

  .contacts-info__card__mobile {
    display: block;
  }
}

@media (max-width: 567px) {
  .contacts {
    padding-top: 96px;
  }
}
/* ===== 8. СТОРІНКА 404 ===== */

.error-404 {
  padding-top: 125px;
  padding-bottom: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-404__img {
  max-width: 850px;
  width: 100%;
}

.error-404__img img {
  width: 100%;
  height: auto;
}

.error-404__title {
  max-width: 620px;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 400;
  color: #1F1F1F;
  text-transform: uppercase;
  line-height: 1.3;
}

.error-404__text {
  max-width: 412px;
  margin-top: 28px;
  font-size: 20px;
  font-weight: 400;
  color: #696969;
  line-height: 1.4;
}

.error-404__actions {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

.error-404__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 194px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid #1F1F1F;
  background-color: #038929;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.error-404__actions .error-404__btn:last-child {
  background-color: #FFFFFF;
  color: #1F1F1F;
}

.error-404__btn:hover {
  background-color: #1A562B !important;
  border-color: #1A562B;
  color: #FFFFFF !important;
}


/* ===== Tablet: 768–1023px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .error-404 {
    padding-top: 104px;
    padding-bottom: 80px;
  }

  .error-404__text {
    max-width: 352px;
    font-size: 18px;
    margin-top: 16px;
  }

  .error-404__img {
    max-width: 450px;
  }

  .error-404__actions {
    margin-top: 32px;
    gap: 16px;
  }

  .error-404__btn {
    min-width: 168px;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .error-404 {
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .error-404__img {
    max-width: 358px;
  }

  .error-404__text {
    max-width: 352px;
    font-size: 16px;
    margin-top: 16px;
  }

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

  .error-404__actions {
    width: 100%;
    gap: 12px;
    margin-top: 24px;
  }

  .error-404__btn {
    width: 100%;
    min-width: 156px;
  }
}

/* ===== 9. СТОРІНКА ТОВАРУ (desktop only for now — tablet/mobile not styled yet) ===== */

.product-page {
  padding-top: 112px;
  padding-bottom: 120px;
}

.product-page__back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 32px;
}

.product-page__back svg path {
  transition: fill 0.3s;
}

.product-page__back:hover svg path {
  fill: #1F1F1F;
}

.product-page__top {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 64px;
}

.product-page__gallery-col,
.product-page__info-col {
  flex: 1;
  min-width: 0;
}

.product-page__info-col {
  display: flex;
  flex-direction: column;
}

.product-gallery {
  position: relative;
}

.product-gallery__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: #D9D9D9;
  overflow: hidden;
}

.product-gallery__slide img {
  width: 90%;
  height: 90%;
}

/* style.css has ".lightbox:first-child { display: block; position: absolute; width:100%;
   height:100%; }" which pulls this link out of .product-gallery__slide's flex layout
   entirely — an absolutely-positioned box ignores the parent's align-items/justify-content
   completely. So the image inside was just sitting in normal block flow (stuck to the
   top-left) no matter what alignment was set one level up. Centering has to happen here
   instead. Matching ":first-child" too (not just repeating ".lightbox") bumps this to
   3 selectors of specificity vs style.css's 2, so it wins regardless of load order —
   style.css loads after this file, so equal-specificity rules there would otherwise win. */
.product-gallery__slide .lightbox:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  pointer-events: none;
}

.product-gallery__nav .products-slider__arrow {
  pointer-events: auto;
}

.product-gallery__nav .products-slider__arrow:hover {
  background-color: #1A562B;
}

.product-page__category {
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: #696969;
  margin-bottom: 32px;
}

.product-page__title p {
  font-size: 28px;
  color: #1F1F1F;
  margin-bottom: 16px;
}

.product-page__desc p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #696969;
}

.product-page__desc p + p {
  margin-top: 12px;
}

/* "Показати більше..." / "Згорнути" — same pattern as .about-intro__toggle /
   .factory-raw__toggle: hidden on desktop, only shown on tablet/mobile, and only when the
   text is taller than 7 lines (168px = 7 * 24px line-height). The 168px clamp below always
   applies on tablet/mobile; JS (see global.js) compares scrollHeight vs clientHeight to
   decide whether the text actually overflows and the toggle is needed at all. */
.product-page__desc-toggle {
  display: none;
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  text-align: left;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 24px;
  cursor: pointer;
}

.product-page__desc-toggle:hover {
  color: #1A562B;
}

.product-page__desc-toggle.is-hidden {
  display: none;
}

@media (max-width: 1200px) {
  .product-page__desc {
    max-height: 168px;
    overflow: hidden;
  }

  .product-page__desc.is-expanded {
    max-height: none;
    overflow: visible;
  }

  .product-page__desc-toggle {
    display: inline-block;
  }
}

.product-page__catalog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  flex-shrink: 0;
  margin-top: auto;
  background: transparent;
  border: 1px solid #1F1F1F;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1F1F1F;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.product-page__catalog-btn:hover {
  background-color: #1A562B;
  border-color: #1A562B;
  color: #fff;
}

.product-specifics-wrap {
  overflow-x: auto;
}

.product-specifics-wrap::-webkit-scrollbar-thumb {
  background: #1A562B !important;
}

.product-specifics {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.product-specifics__icons th {
  background-color: #1A562B;
  padding: 12px;
  min-width: 110px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #AAAAAA;
}

.product-specifics__icons th img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
}

.product-specifics__labels th {
  background-color: #1A562B;
  padding: 12px;
  min-width: 110px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #AAAAAA;
}

.product-specifics tbody td {
  padding: 14px 12px;
  min-width: 110px;
  border: 1px solid #AAAAAA;
  font-size: 14px;
  color: #1F1F1F;
  text-align: center;
  vertical-align: middle;
}

/* ===== Tablet: 768–1023px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .product-page {
    padding-top: 101px;
    padding-bottom: 80px;
  }

  .product-page__back {
    margin-bottom: 19px;
  }

  .product-page__category {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .product-page__title p {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .product-gallery__slide img {
    width: 85%;
    height: 85%;
  }
}

/* ===== Mobile: до 767px ===== */
@media (max-width: 767px) {
  .product-page {
    padding-top: 80px;
    padding-bottom: 64px;
  }

  .product-page__desc {
    margin-bottom: 8px;
  }

  .product-page__top {
    margin-bottom: 48px;
    flex-direction: column;
  }

  .product-page__back {
    margin-bottom: 16px;
  }

  .product-gallery__slide img {
    width: 80%;
    height: 80%;
  }

  .product-page__category {
    font-size: 16px;
  }

  .product-page__title p {
    font-size: 18px;
  }
}

/* ===== 7. СТАТТЯ — ШАБЛОНИ 1 і 2 (single-article-template-1.php / -2.php) ===== */

.article-page {
  padding-top: 144px;
  padding-bottom: 120px;
}

.article-page__title {
  font-size: 36px;
  font-weight: 600;
  color: #1F1F1F;
  text-transform: uppercase;
  line-height: normal;
  margin: 0;
}

/* Шаблон 1: title is a standalone element above the blocks grid, so its width is
   capped to match the first column instead of stretching across the whole row
   (confirmed by the Figma mock-up — its line breaks line up with the text column's
   width). It keeps its 2-column layout down to 768px, so this stays active through
   desktop+tablet; only true mobile (≤767px) resets it to full width. Шаблон 2
   doesn't need this — its title is nested inside .article-media__text (desktop) or
   spans the grid's full width itself (tablet/mobile), see .article-media rules. */
.article-page--blocks .article-page__title {
  max-width: calc((100% - 24px) / 2);
}

@media (max-width: 767px) {
  .article-page--blocks .article-page__title {
    max-width: none;
  }
}

/* Шаблон 2: static gap below the title, before the subheading starts. Value differs
   per breakpoint — see the tablet/mobile media queries further down for the 34px /
   24px overrides (Шаблон 1 uses .article-blocks' own margin-top instead). */
.article-page--media {
  margin-bottom: 22px;
}

/* Shared heading/body/toggle styles for both templates' content blocks. */
.article-blocks__heading {
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
  margin-bottom: 16px;
  line-height: normal;
}

.article-media__heading {
  font-size: 24px;
  font-weight: 600;
  color: #1F1F1F;
  margin-top: 22px;
  margin-bottom: 34px;
  line-height: normal;
}

.article-blocks__body p,
.article-media__body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #696969;
}

.article-blocks__body p + p,
.article-media__body p + p {
  margin-top: 12px;
}

/* "Показати більше..." / "Згорнути все" — same is-hidden/is-expanded pattern as
   .product-page__desc-toggle. Hidden on desktop; only shown on tablet/mobile, and
   only when the JS measures the text as taller than the 7-line clamp below. */
.article-blocks__toggle,
.article-media__toggle {
  display: none;
  font-size: 16px;
  font-weight: 400;
  color: #1F1F1F;
  text-align: left;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  cursor: pointer;
}

.article-blocks__toggle:hover,
.article-media__toggle:hover {
  color: #1A562B;
}

.article-blocks__toggle.is-hidden,
.article-media__toggle.is-hidden {
  display: none;
}

/* ----- Шаблон 1: repeater of (heading + text + image) blocks, 2-up on desktop.
   Items are equal-height flex columns so every image lines up on the same row
   regardless of how much text is above it (image is pushed down via margin-top:auto). ----- */
.article-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 24px;
  margin-top: 40px;
}

.article-blocks__item {
  display: flex;
  flex-direction: column;
}

.article-blocks__image {
  margin-top: auto;
  padding-top: 24px;
}

.article-blocks__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 628 / 354;
  object-fit: cover;
  display: block;
}

/* ----- Шаблон 2 (desktop): title + subheading+text share the first column as a
   flex column (title on top, subtext below), image is the second column — plain
   flex, so title's top naturally lines up with the image's top (no grid-row-span:
   spanning grid rows previously inflated the title's own row height to match the
   image's full height — see single-article-template-2.php for the tablet/mobile
   restructuring that avoids it there too, via display:contents). ----- */
.article-media {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.article-media__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.article-media__subtext {
  min-width: 0;
}

.article-media__image {
  flex: 1;
  min-width: 0;
}

.article-media__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 627 / 766;
  object-fit: cover;
  display: block;
}

/* ===== Tablet + Mobile: до 1200px — text blocks in both templates get the collapse
   toggle. Шаблон 1 keeps its 2-column grid all the way down to 768px (see the 767px
   block below for where it actually stacks) — only the text truncation applies
   through the whole tablet+mobile range. ===== */
@media (max-width: 1200px) {
  /* Шаблон 1: keep only the first paragraph of each block's text open, same
     nth-of-type pattern as .about-intro__text / .factory-raw__item-text — NOT the
     168px height clamp (that's specific to Шаблон 2 below), per explicit correction. */
  .article-blocks__body p:nth-of-type(n+2) {
    display: none;
  }

  .article-blocks__body.is-expanded p:nth-of-type(n+2) {
    display: block;
  }

  /* Шаблон 2: single text block, clamped to 7 lines. Uses -webkit-line-clamp (same
     technique as .articles__row-title) instead of a fixed max-height in px — a pixel
     height doesn't reliably land exactly on a line boundary (font metrics/rounding),
     so it was letting a sliver of the 8th line peek through at the bottom. */
  .article-media__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
  }

  .article-media__body.is-expanded {
    display: block;
    overflow: visible;
  }

  .article-blocks__toggle,
  .article-media__toggle {
    display: inline-block;
  }

  .article-media__image img {
    aspect-ratio: 352 / 402;
  }
}

/* ----- Tablet only (768–1200px): Шаблон 1 stays a 2-column grid (per correction —
   it only stacks to 1 column at true mobile, below 768px). Шаблон 2's image moves
   ABOVE the text here; on mobile it stays after the text (natural DOM order). ----- */
@media (min-width: 768px) and (max-width: 1200px) {
  .article-page {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .article-blocks {
    margin-top: 32px;
    gap: 64px 18px;
  }

  .article-blocks__heading,
  .article-media__heading {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .article-blocks__image {
    padding-top: 16px;
  }

  /* Шаблон 2: unwrap .article-media__text (display:contents) so title and
     .article-media__subtext become independent grid items — title spans the full
     width in its own row above subtext+image, instead of being locked to lining up
     with the image's top like on desktop. */
  .article-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title   title"
      "subtext image";
    column-gap: 18px;
  }

  .article-page__title {
    font-size: 24px;
    margin-bottom: 0;
  }

  .article-media__text {
    display: contents;
  }

  .article-page--media {
    grid-area: title;
    margin-bottom: 34px;
  }

  .article-media__subtext {
    grid-area: subtext;
  }

  .article-media__image {
    grid-area: image;
  }

  .article-blocks__image img {
    aspect-ratio: 352 / 198;
  }
}

@media (max-width: 767px) {
  .article-page {
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .article-page__title {
    font-size: 20px;
  }

  .article-blocks__heading {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .article-blocks {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 24px;
  }

  .article-blocks__image {
    margin-top: 0;
    padding-top: 16px;
  }

  .article-blocks__image img {
    aspect-ratio: 359 / 219;
  }

  /* Шаблон 2 only stacks to a single column here, at true mobile — tablet keeps the
     columns side by side, same as desktop. .article-media__text stays unwrapped
     (display:contents, from the tablet rule above), and .article-media switches
     back to a flex column, so title / subtext / image just stack in DOM order.
     The 24px gap here covers both title→subtext and subtext→image — no separate
     margin-bottom on the title, that would double up with this gap. */
  .article-media {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 16px;
  }

  .article-media__heading {
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 8px;
  }

  .article-page--media .article-page__title {
    margin-bottom: 0;
  }

  .article-media__image img {
    aspect-ratio: 358 / 408;
  }
}