/* ===== Головна: доповнення до макета =====
   Те, що в макеті було лише «картинкою» (стрілки, FAQ, екран «Дякуємо»), тут працює по-справжньому. */

/* ===== Герой: два банери, що плавно гортаються =====
   Відступи героя переїхали на кожен банер, щоб перший виглядав так само, як у макеті. */
.hero{padding:0}
.slides{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--cream);padding:48px 0 124px}
@media (max-width:1100px){.slide{padding:48px 0 112px}}
@media (max-width:640px){.slide{padding:26px 0 80px}}

/* Текст нового банера з’являється разом із самим банером. Клас .s-pre (хвилинна підготовка: текст невидимий) ставить home.js на банер, що
   ЩЕ ЗАХОДИТЬ у кадр; одразу за ним — .s-in, і текст по черзі плавно виїжджає й проявляється. Так на екрані текст ніколи не пропадає
   посеред гортання (раніше анімація стартувала, коли банер уже був наполовину видимий, і текст на мить зникав — «блимання»).
   Лише коли рух дозволено. */
@media (prefers-reduced-motion:no-preference){
.slide.s-pre .chip,.slide.s-pre .hero-title,.slide.s-pre .hero-p,.slide.s-pre .hero-cta,.slide.s-pre .swatches{opacity:0;transform:translateX(26px)}
.slide.s-in .chip,.slide.s-in .hero-title,.slide.s-in .hero-p,.slide.s-in .hero-cta,.slide.s-in .swatches{animation:slideTxt .62s cubic-bezier(.2,.7,.2,1) both}
.slide.s-in .hero-title{animation-delay:.05s}.slide.s-in .hero-p{animation-delay:.1s}.slide.s-in .hero-cta{animation-delay:.15s}.slide.s-in .swatches{animation-delay:.2s}
@keyframes slideTxt{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
}

/* плашка над заголовком: завжди в один рядок і повною «таблеткою»; текст по центру відносно листочка
   (раніше текст мав зсув top:2px і виглядав нижче за значок, особливо на телефоні) */
.slide .chip{white-space:nowrap;border-radius:999px;align-items:center;line-height:1.2}
.slide .chip-t{display:block;line-height:1.2;position:relative;top:1.2px}   /* Comfortaa сидить у рядку високо: на планшеті/десктопі опускаємо текст, щоб він стояв по центру відносно листочка (виміряно 22.10; на телефоні й так рівно) */
@media (max-width:640px){.slide .chip-t{top:0}}
.slide .chip-sep{display:inline-block;margin:0 .5em;opacity:.7}
.slide .chip svg{flex:none;display:block}
@media (max-width:640px){.slide .chip{padding:9px 16px}}
@media (max-width:359px){.slide .chip{font-size:11px;padding:8px 12px;gap:6px}}

/* крапки — кнопки (область натискання більша за саму крапку) */
.dots button{position:relative;width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--decor);display:block;cursor:pointer;transition:width .3s ease,background-color .3s ease,border-radius .3s ease}
.dots button:after{content:"";position:absolute;inset:-12px -4px}
.dots button.on{width:30px;border-radius:6px;background:var(--green)}
.dots button:focus-visible{outline:3px solid var(--decor);outline-offset:3px}
.hero.on-dark .dots button{background:rgba(244,236,221,.45)}
.hero.on-dark .dots button.on{background:var(--cream)}
@media (prefers-reduced-motion:reduce){.dots button{transition:none}}

/* стрілки «ліворуч / праворуч» на банерах.
   На широкому екрані стоять по боках банера (у полях поза контентом), на вужчих — по обидва боки крапок, щоб не лізти на текст і бути під рукою.
   --dw (ширину крапок) виставляє home.js; на банері бордового кольору стрілки кремові. */
.hero{--dw:47px}
.hero-arr{position:absolute;z-index:3;left:calc(50% - var(--dw)/2 - 14px - 44px);bottom:64px;width:44px;height:44px;padding:0;border:0;border-radius:14px;
  background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(36,59,45,.2)}
.hero-arr.next{left:calc(50% + var(--dw)/2 + 14px)}
.hero.on-dark .hero-arr{background:var(--cream);color:var(--burg);box-shadow:0 8px 18px rgba(20,4,12,.32)}
.hero-arr:focus-visible{outline:3px solid var(--decor);outline-offset:3px}
@media (min-width:1400px){
.hero-arr{top:calc(50% - 22px);bottom:auto;left:calc((100% - 1240px)/2 - 56px)}
.hero-arr.next{left:auto;right:calc((100% - 1240px)/2 - 56px)}
}
@media (max-width:640px){.hero-arr{bottom:28px;width:40px;height:40px;border-radius:12px;left:calc(50% - var(--dw)/2 - 12px - 40px)}.hero-arr.next{left:calc(50% + var(--dw)/2 + 12px)}}

/* банер «Осінній розпродаж» (бордовий) */
.slide.s2{background:var(--burg)}
.s2 .hero-title{color:#fff;font-size:clamp(34px,3.8vw,54px)}   /* заголовок довший, ніж на першому банері — трохи менший кегль, щоб банери були однієї висоти */
@media (max-width:1100px){.s2 .hero-title{font-size:clamp(36px,6.2vw,52px)}}
@media (max-width:640px){.s2 .hero-title{font-size:34px}}
.s2 .pill{background:var(--berry);box-shadow:0 10px 22px rgba(212,90,120,.35)}
.s2 .hero-p{color:#F4E3DC}
.s2 .swatches{color:#F4E3DC}
.s2 .sw-ic{width:34px;height:34px;border-radius:50%;background:rgba(244,236,221,.14);color:#fff;display:grid;place-items:center;flex:none}
.s2 .ph-b,.s2 .ph-c{border-color:var(--burg)}
@media (max-width:640px){.s2 .sw-ic{width:30px;height:30px}.s2 .sw-ic svg{width:16px;height:16px}}

/* банер «Акційний набір» — перший у герої (темно-зелений; клас s2 дає світлі текст, стрілки й крапки, s3 — свій фон і мозаїку 2×2 із фото сортів) */
.slide.s3{background:var(--deep)}
.s3 .hero-title{font-size:clamp(34px,4.1vw,58px)}
.s3 .pill{background:none;box-shadow:none;position:relative}
/* рожева плашка «у подарунок»: текст рядковий, з хвостами «у», «р» — фон плашки малюється окремо (::before) і сягає нижче рядка, щоб хвости не торкались краю; опт. центр — між висотою «х» і хвостами */
.s3 .pill::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.1em;bottom:-.05em;border-radius:inherit;background:var(--berry);box-shadow:0 10px 22px rgba(212,90,120,.35)}
@media (max-width:860px){.s3 .pill::before{top:.1em;bottom:-.04em}}
.s3 .hero-p{max-width:500px}
.collage.c4 .c4-g{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.c4-g li{position:relative;overflow:hidden;background:var(--mist);border-radius:90px 28px 90px 28px;box-shadow:0 22px 44px rgba(10,30,18,.28)}
.c4-g li:nth-child(2),.c4-g li:nth-child(3){border-radius:28px 90px 28px 90px}
.c4-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c4-g .ph-photo{position:absolute;inset:0}
.c4-g li>span:last-child{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:5px 13px;border-radius:999px;background:#fff;color:var(--burg);font-weight:700;font-size:13.5px;line-height:1.2;box-shadow:0 6px 14px rgba(10,30,18,.2)}
.c4-g li:nth-child(2)>span:last-child,.c4-g li:nth-child(3)>span:last-child{left:auto;right:14px}
.s3 .collage .stk{left:50%;top:50%;width:122px;height:122px;margin:-61px 0 0 -61px;border:6px solid var(--deep);font-size:14px;z-index:2}
.s3 .collage .stk span{font-size:36px;line-height:1;letter-spacing:-.01em}
/* плашка «Подарунок» на фото сорту-подарунка (мозаїка банера й сторінка набору) */
.gift-tag{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 10px;border-radius:999px;background:var(--berry);color:#fff;font-weight:700;font-size:13.5px;line-height:1.1;box-shadow:0 6px 14px rgba(10,30,18,.28)}
.gift-tag svg{flex:none}
@media (max-width:640px){
  .c4-g{gap:8px!important}
  .c4-g li{border-radius:44px 16px 44px 16px}
  .c4-g li:nth-child(2),.c4-g li:nth-child(3){border-radius:16px 44px 16px 44px}
  .c4-g li>span:last-child{display:none}
  .s3 .collage .stk{width:78px;height:78px;margin:-39px 0 0 -39px;border-width:4px;font-size:11px;padding:0}
  .s3 .collage .stk span{font-size:24px}
  .gift-tag{top:8px;right:8px;gap:4px;padding:4px 9px 4px 7px;font-size:11px}
  .gift-tag svg{width:12px;height:12px}
}

/* стрілки каруселей: неактивні на краю */
.arr button:disabled{opacity:.4;cursor:default}
.arr button:disabled:hover{background:var(--green)}
.arr button:focus-visible,.qty button:focus-visible,.add:focus-visible,.fav:focus-visible{outline:3px solid var(--decor);outline-offset:2px}

/* форма «Зв’язок» */
.form .uag-alert{margin:0}
.consent a{color:var(--deep);font-weight:700;text-decoration:underline;text-decoration-color:var(--decor);text-underline-offset:3px}

/* екран «Дякуємо» на місці форми */
.ff-ok{align-items:center;text-align:center;gap:0;padding:44px 34px 40px;scroll-margin-top:24px}
.ff-ok .big{width:84px;height:84px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 14px 30px rgba(95,157,111,.35)}
.ff-ok h3{font-size:clamp(22px,2.2vw,28px);line-height:1.25;color:var(--head);font-weight:700}
.ff-ok p{max-width:380px;margin:12px auto 0;font-size:16px;line-height:1.65;color:var(--ink)}
.ff-ok .btn{margin-top:26px}
@media (max-width:640px){
.ff-ok{padding:32px 22px 28px}
.ff-ok .big{width:72px;height:72px;margin-bottom:18px}
.ff-ok .btn{width:100%}
}

/* відгуки на головній: картки не розтягуються до висоти високого скриншота */
.rev-grid{align-items:start}

/* картки каруселей: ціна й кнопка «У кошик» стоять в одному рядку в усіх картках, навіть якщо назва сорту переноситься на 2 рядки */
.row>.card{display:flex;flex-direction:column}
.row>.card .cprice{margin-top:auto;padding-top:10px}

/* ---------- каруселі сортів: плавне гортання ----------
   Стрілки гортають власною анімацією (home.js), свайп — рідною прокруткою зі «зчепленням» за карткою.
   overscroll-behavior-x не дає свайпу по краю каруселі «тягнути» всю сторінку чи запускати «назад» у браузері;
   scroll-behavior вимкнено, щоб рідне плавне прокручування не боролося з нашою анімацією. */
.row { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto }

/* «Про нас», праве фото — кадр із відео: зсув обрізання вниз і вправо, щоб у вузьких рамках (планшет, телефон) лишались рука й камінь */
.abr img { object-position: 64% 68% }

/* Соцмережі: справжні публікації Instagram показуємо у пропорції 3:4, як у сітці профілю; аватар — справжній (кружечок із лого) */
.post-img { aspect-ratio: 3 / 4 }
.post-av { overflow: hidden; background: transparent }
.post-av img { display: block; width: 100%; height: 100%; object-fit: cover }
/* найвужчі екрани (320): кнопки банерів у один рядок — трохи менший шрифт і відступи, щоб «Дивитись набір» і «Купити на Rozetka» не впиралися в край */
@media (max-width:340px){.hero-cta .btn{padding-left:5px;padding-right:5px;font-size:12.5px}}