/* ── Hero / слайдер акцій ──────────────────────────────────────────────── */
/* На всю ширину екрана, без відступів зверху/знизу — 1 в 1 з продом. */
.hero__slider-wrp {
    position: relative;
    width: 100%;
}
.hero__slider {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero__slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}
.hero__slider:not(.slick-initialized) .hero__slide {
    display: none;
    width: 100%;
    flex-shrink: 0;
}
.hero__slider:not(.slick-initialized) .hero__slide:first-child {
    display: block;
}
.hero__slide-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1900 / 950;
}

.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    background: transparent;
    color: rgba(237, 237, 237, .9);
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity var(--transition);
}
.hero__arrow:hover,
.hero__arrow:focus-visible {
    opacity: .7;
}
.hero__arrow--prev {
    left: 10px;
}
.hero__arrow-icon {
    width: 100%;
    height: 100%;
}
.hero__arrow--prev .hero__arrow-icon {
    transform: rotate(90deg);
}
.hero__arrow--next .hero__arrow-icon {
    transform: rotate(-90deg);
}
.hero__arrow--next {
    right: 10px;
}

/* ── Новинки — слайдер товарів ──────────────────────────────────────────── */
.new-arrivals {
    padding: 64px 0 0;
}
.new-arrivals__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.new-arrivals__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 600;
    color: var(--color-text);
}
.new-arrivals__title a {
    color: inherit;
    text-decoration: none;
}
.new-arrivals__title a:hover,
.new-arrivals__title a:focus-visible {
    text-decoration: underline;
}

.new-arrivals__slider-wrp {
    position: relative;
}
.product-slider {
    margin: 0;
    padding: 0;
    list-style: none;
}
.product-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}
.product-slider:not(.slick-initialized) .product-slider__item {
    display: none;
    width: 25%;
    padding: 0 10px;
    flex-shrink: 0;
}
.product-slider:not(.slick-initialized) .product-slider__item:first-child {
    display: block;
}
/* Картки в ряду мають закінчуватись на одній лінії. Slick сам цього не
   робить: він кладе слайди в .slick-track звичайними блоками, і слайд без
   вибору варіацій виходив нижчим за сусідній із ним (заміряно: 483 проти
   541), тож ряд кнопок «Придбати» йшов сходинками. Флекс-трек вирівнює
   слайди, а розтягнути картку всередині слайда вже вміє
   product-card-grid.css (display:flex на .product-slider__item). */
.product-slider .slick-track {
    display: flex;
    align-items: stretch;
}
/* display теж тут, а не тільки в product-card-grid.css: там селектор
   `.product-slider__item` важить стільки ж, скільки slick-івський
   `.slick-slide { display: block }`, і при рівній вазі виграє той, хто
   підключений пізніше, — тобто slick. Заміряно: li лишався block, і картка
   всередині не розтягувалась. Тут селектор довший, тож питання знято.

   Падінг — це проміжок між картками. Slick ставить слайди впритул, і рамки
   сусідніх карток сходились в одну лінію: ряд читався як одна таблиця, а не
   як окремі товари. gap на .slick-track не працює (Slick рахує ширину слайда
   сам і про gap не знає), тому проміжок робимо падінгом самих слайдів, а
   від'ємним полем на .slick-list повертаємо крайні картки до країв
   контейнера — інакше ряд був би вужчим за сітку каталогу поруч. */
.product-slider.slick-initialized .product-slider__item {
    display: flex;
    height: auto;
    padding: 0 10px;
}
.product-slider .slick-list {
    margin: 0 -10px;
}

.new-arrivals__arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.new-arrivals__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    border: none;
    cursor: pointer;
    transition: opacity var(--transition);
}
.new-arrivals__arrow:hover,
.new-arrivals__arrow:focus-visible {
    opacity: .6;
}
.new-arrivals__arrow-icon {
    width: 100%;
    height: 100%;
}
.new-arrivals__arrow--prev .new-arrivals__arrow-icon {
    transform: rotate(90deg);
}
.new-arrivals__arrow--next .new-arrivals__arrow-icon {
    transform: rotate(-90deg);
}

@media (max-width: 1024px) {
    .new-arrivals {
        padding-top: 48px;
    }
    .new-arrivals__title {
        font-size: 30px;
    }
    .product-slider:not(.slick-initialized) .product-slider__item {
        width: 33.333%;
    }
}

@media (max-width: 768px) {
    .new-arrivals {
        padding-top: 32px;
    }
    .new-arrivals__title {
        font-size: 24px;
    }
    .product-slider:not(.slick-initialized) .product-slider__item {
        width: 100%;
    }
    .product-slider.slick-initialized .product-slider__item {
        padding: 0 6px;
    }
    .product-slider .slick-list {
        margin: 0 -6px;
    }
    .new-arrivals__arrow {
        width: 36px;
        height: 36px;
    }
}

/* ── Категорії — слайдер ────────────────────────────────────────────────── */
.categories {
    padding: 64px 0 0;
}
.categories__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.categories__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 600;
    color: var(--color-text);
}

.categories__arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.categories__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    border: none;
    cursor: pointer;
    transition: opacity var(--transition);
}
.categories__arrow:hover,
.categories__arrow:focus-visible {
    opacity: .6;
}
.categories__arrow-icon {
    width: 100%;
    height: 100%;
}
.categories__arrow--prev .categories__arrow-icon {
    transform: rotate(90deg);
}
.categories__arrow--next .categories__arrow-icon {
    transform: rotate(-90deg);
}

.category-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}
.category-grid:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}
.category-grid:not(.slick-initialized) .category-grid__item {
    display: none;
    width: 20%;
    flex-shrink: 0;
}
.category-grid:not(.slick-initialized) .category-grid__item:first-child {
    display: block;
}

@media (max-width: 1024px) {
    .categories {
        padding-top: 48px;
    }
    .categories__title {
        font-size: 30px;
    }
    .category-grid:not(.slick-initialized) .category-grid__item {
        width: 33.333%;
    }
}

@media (max-width: 768px) {
    .categories {
        padding-top: 32px;
    }
    /* На телефоні слайдера немає: усі категорії сіткою 2 в ряд, стрілки
       прибрані. Слайдер (Slick) на цьому розмірі не ініціалізується
       (js/pages/home.js). */
    .categories__arrows {
        display: none;
    }
    .category-grid:not(.slick-initialized) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        overflow: visible;
    }
    .category-grid:not(.slick-initialized) .category-grid__item,
    .category-grid:not(.slick-initialized) .category-grid__item:first-child {
        display: block;
        width: auto;
    }
    .categories__title {
        font-size: 24px;
    }
    .categories__arrow {
        width: 36px;
        height: 36px;
    }
}

/* ── SEO-вступ (h1 сторінки) ────────────────────────────────────────────── */
.home-intro {
    padding: 32px 0;
}
.home-intro__wrp {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.home-intro__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}
.home-intro__text {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-muted);
}

@media (max-width: 1024px) {
    .home-intro__title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .home-intro {
        padding: 24px 0;
    }
    .home-intro__title {
        font-size: 24px;
    }
    .home-intro__text {
        font-size: 17px;
    }
}

/* ── Про продукцію — контент з редактора сторінки (post_content) ──────────
   Viktor редагує в стандартному Gutenberg, тому стилі йдуть по тегах у
   межах .about-products__content, не по БЕМ-класах — контент довільний.

   Що було не так (заміряно, а не на око):
     • рядок ~116 знаків при 22px на колонці 1280px — удвічі довше за
       комфортні 60–75, око губить початок наступного рядка;
     • ієрархія заголовків перевернута: h3 40px/400 був БІЛЬШИМ за h2
       36px/600, а h4 і h5 мали однакові 28px/400 — рівні не розрізнялись;
     • заголовки сірі (#3b3d42) і тонкі (400), тобто слабші за основний
       текст, хоч мають його вести;
     • три тематичні блоки (комбікорм / БМВД / премікси) відділялись лише
       тонкою лінією — на екрані це одна суцільна стіна тексту.

   Ширина — на весь контейнер, як і решта секцій головної (рішення Viktor;
   я пропонував вузьку колонку ~800px заради довжини рядка, але він хоче
   бачити цей блок вирівняним з рештою сторінки). Довгий рядок компенсуємо
   тим, що лишається в нашій владі: кегль 20px і міжрядковий 1.7. */
.about-products {
    padding: 72px 0;
}
.about-products__content {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.7;
    color: var(--color-text);
}
.about-products__content::after {
    content: '';
    display: block;
    clear: both;
}

/* Рівні заголовків. Кожен відрізняється не тільки кеглем, а й роллю:
     h2 — назва секції, по центру, з короткою рискою (як заголовок магазину);
     h3 — початок тематичного блоку: тонка лінія на всю ширину з коротким
          акцентним відрізком зверху, як активна вкладка. Лінія на всю ширину
          потрібна саме тут: на повній ширині колонки блоки інакше зливаються;
     h4 — підрозділ, кольору дії (--color-action): акцент, але не червоний
          «ціновий» і не чорний, тож відділяється від h3 і від тексту;
     h5 — пункти всередині h4, чорний, менший кегль. */
.about-products__content h2 {
    position: relative;
    margin: 0 0 48px;
    padding-bottom: 20px;
    font-family: var(--font-body);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text);
    text-wrap: balance;
    clear: none;
}
.about-products__content h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--color-accent);
}
.about-products__content h3 {
    position: relative;
    /* flow-root — щоб коробка заголовка не тягнулась ПІД плаваючу картинку
       перед ним: інакше лінія й акцентний відрізок ховались би за фото. */
    display: flow-root;
    margin: 72px 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-strong);
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    text-wrap: balance;
    clear: none;
}
.about-products__content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 88px;
    height: 3px;
    background: var(--color-accent);
}
.about-products__content h2 + h3,
.about-products__content h3:first-child {
    margin-top: 0;
}
.about-products__content h4 {
    margin: 40px 0 12px;
    font-family: var(--font-body);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-action);
    text-wrap: balance;
    clear: none;
}
.about-products__content h5 {
    margin: 28px 0 8px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    clear: none;
}
.about-products__content p {
    margin: 0 0 18px;
}
.about-products__content strong,
.about-products__content b {
    font-weight: 600;
}
.about-products__content a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.about-products__content ul {
    margin: 0 0 22px;
    padding-left: 26px;
    list-style: disc;
}
.about-products__content ol {
    margin: 0 0 22px;
    padding-left: 26px;
    list-style: decimal;
}
/* reset.css робить li блоковим — блоковий li не малює маркер узагалі,
   тож самого list-style замало. */
.about-products__content li {
    display: list-item;
    margin-bottom: 8px;
    padding-left: 4px;
}
.about-products__content li:last-child {
    margin-bottom: 0;
}
/* Маркер акцентний: дрібна ділянка кольору, яка допомагає вести око по
   списку, не чіпаючи самого тексту (червоний текст читався б гірше). */
.about-products__content li::marker {
    color: var(--color-accent);
}
/* Роздільник між блоками тепер дає сам відступ над h3 — лінія лишається
   лише як тиха підказка, а не як єдина межа. */
.about-products__content hr {
    margin: 56px 0 0;
    border: none;
    border-top: 1px solid var(--color-border-strong);
}
.about-products__content hr + h3 {
    margin-top: 40px;
}
.about-products__content .alignleft {
    width: 280px;
    margin: 6px 36px 16px 0;
}
.about-products__content .alignleft img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 1024px) {
    .about-products {
        padding: 56px 0;
    }
    .about-products__content {
        font-size: 18px;
    }
    .about-products__content h2 {
        margin-bottom: 40px;
        font-size: 32px;
    }
    .about-products__content h3 {
        margin-top: 60px;
        font-size: 27px;
    }
    .about-products__content h4 {
        font-size: 22px;
    }
    .about-products__content h5 {
        font-size: 19px;
    }
    /* На 769–1024 колонка 730–985px, і картинка 280px з її відступом забирала
       третину: текст поруч стискався до ~46 знаків, а h3 ламався на два
       рядки (заміряно на 769px). З 220px тексту лишається ~53 знаки. */
    .about-products__content .alignleft {
        width: 220px;
        margin: 4px 28px 14px 0;
    }
}

@media (max-width: 768px) {
    .about-products {
        padding: 40px 0;
    }
    .about-products__content {
        font-size: 18px;
        line-height: 1.65;
    }
    .about-products__content h2 {
        margin-bottom: 32px;
        padding-bottom: 16px;
        font-size: 27px;
    }
    .about-products__content h3 {
        margin: 48px 0 20px;
        padding-bottom: 14px;
        font-size: 23px;
    }
    .about-products__content h4 {
        margin-top: 32px;
        font-size: 20px;
    }
    .about-products__content h5 {
        margin-top: 22px;
        font-size: 18px;
    }
    .about-products__content h3::after {
        width: 64px;
    }
    .about-products__content .alignleft {
        float: none;
        width: 100%;
        max-width: 280px;
        margin: 0 0 20px;
    }
}

@media (max-width: 480px) {
    /* 280px у колонці 335px лишали збоку порожній зазор, і фото виглядало
       не вирівняним із текстом під ним. На всю ширину колонки — край у край
       із абзацами. Але стеля 360px: натуральний розмір файлу 300px, і на
       480px без неї фото розтягувалось до 440px (+47%, заміряно) і мазалось.
       На 375px колонка 335px — під стелю не потрапляє, фото рівно край у
       край. */
    .about-products__content .alignleft {
        max-width: 360px;
    }
}