/* Shared sections: scrolling banners, section titles, homepage blocks. */
.marquee{overflow:hidden;background:var(--dark);padding:34px 0 40px}
.marquee__track{display:flex;width:max-content;animation:skat-marquee 40s linear infinite}
.marquee__item{flex:none;padding:0 30px;font-size:var(--text-display);line-height:var(--lh-none);font-weight:var(--fw-bold);color:var(--green);white-space:nowrap}
.marquee--home{padding:29px 0}
.marquee--logos{background:var(--white);padding:40px 0}
.marquee--logos .marquee__item{display:flex;align-items:center;height:50px}
.marquee--logos img{height:50px;width:auto}
@keyframes skat-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
@media (min-width:750px){
  .marquee{padding:43px 0 50px}
  .marquee--home{padding:36px 0}
  .marquee--logos{padding:50px 0}
}
@media (min-width:990px){
  .marquee{padding:60px 0 70px}
  .marquee--home{padding:50px 0}
  .marquee--logos{padding:70px 0}
}

.section-title{font-size:var(--text-3xl);line-height:var(--lh-heading);color:var(--ink);margin:0 0 25px}
.section-title--center{text-align:center}

/* ===================== Homepage ===================== */

/* hero: image stacked above a dark text box on mobile, text over the image from 750px */
.hero{position:relative;background:var(--dark)}
.hero__media{height:340px;overflow:hidden;background:var(--ink-15)}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__content{padding:0}
.hero__box{padding:40px 35px;text-align:center;color:var(--white)}
.hero__heading{font-size:var(--text-3xl);line-height:var(--lh-heading);color:var(--white)}
.hero__text{margin-top:10px;font-size:var(--text-base);line-height:var(--lh-body);color:var(--white)}
.hero__buttons{margin-top:20px}
@media (min-width:750px){
  .hero{height:560px;background:none}
  .hero__media{position:absolute;inset:0;height:auto}
  .hero__media::after{content:"";position:absolute;inset:0;background:rgba(29,29,31,.4)}
  .hero__content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:70px var(--gutter) 80px}
  .hero__box{max-width:720px;width:100%;padding:40px 0}
  .hero__text{margin-top:15px}
  .hero__buttons{margin-top:25px}
}

/* featured products */
.home-products{padding:40px 0}
.home-products__title{margin-bottom:20px}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--grid-gap)}
/* one product: centred card at the normal card width (never stretched) */
.product-grid--single{grid-template-columns:minmax(0,calc((100% - var(--grid-gap))/2));justify-content:center}
@media (min-width:750px){.home-products{padding:70px 0}.home-products__title{margin-bottom:35px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .product-grid--single{grid-template-columns:minmax(0,calc((100% - 60px)/3))}}
.card{background:var(--white);border-radius:var(--radius-lg);display:flex;flex-direction:column}
.card__media{position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:18px 12px}
.card__title{font-size:var(--text-lg);line-height:var(--lh-body);margin:0 0 10px}
.card__title a{color:var(--ink);text-decoration:none}
.card__title a:hover{text-decoration:underline}
.card__price .price{font-size:var(--text-base);line-height:var(--lh-body)}
.badge{position:absolute;top:12px;left:12px;padding:6px 13px;border-radius:var(--radius-xs);font-size:var(--text-sm);line-height:var(--lh-tight);font-weight:var(--fw-semibold);color:var(--white);background:var(--sale)}
@media (min-width:750px){
  .card__media{border-radius:var(--radius-lg)}
  .card__body{padding:20px}
  .card__price{margin-top:7px}
  .badge{top:20px;left:20px;padding:6px 14px}
}

/* testimonials: horizontally scrolling cards on sand */
.testimonials{background:var(--sand);padding:40px 0;overflow:hidden}
.testimonials__title{margin-bottom:25px}
.testimonials__title a{color:inherit}
.testimonials__viewport{overflow:hidden}
.testimonials__track{display:flex;align-items:flex-start;width:max-content;padding-left:7.5px;animation:skat-marquee 120s linear infinite}
.testimonials__track:hover{animation-play-state:paused}
.testimonial{flex:none;width:310px;margin:0 7.5px;padding:25px 25px 31px;background:var(--white);border-radius:var(--radius-lg)}
.testimonial__rating{display:flex;gap:4px;margin-bottom:20px;color:var(--star)}
.testimonial__text{font-size:var(--text-base);line-height:var(--lh-body);color:var(--ink)}
.testimonial__author{display:flex;gap:18px;margin-top:25px}
.testimonial__avatar{width:65px;height:65px;border-radius:var(--radius-lg);object-fit:cover}
.testimonial__name{font-size:var(--text-base);line-height:var(--lh-snug);font-weight:var(--fw-medium);color:var(--ink);margin-bottom:5px}
.testimonial__city{font-size:var(--text-md);line-height:var(--lh-body);color:var(--ink-75)}
@media (min-width:750px){
  .testimonials{padding:70px 0}
  .testimonials__title{margin-bottom:40px}
  .testimonials__track{padding-left:0}
  .testimonial{width:500px;margin:0 15px;padding:40px 40px 57px}
  .testimonial__author{margin-top:40px}
  .testimonial__avatar{width:80px;height:80px}
  .testimonial__name{line-height:var(--lh-body)}
}

/* multicolumn ("Чому Skat?" with dividers; "Хто наші клієнти?" cards on dark) */
.columns{padding:26px 0 25px}
.columns--dark{background:var(--dark);padding:40px 0}
.columns__title{margin-bottom:25px}
.columns--dark .columns__title{color:var(--white)}
.columns__list{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none}
.columns__list::-webkit-scrollbar{display:none}
.column-card{flex:0 0 310px;scroll-snap-align:start;background:var(--white);border-radius:var(--radius-lg);text-align:center}
.column-card--sand{background:var(--sand)}
.column-card__media{padding:25px 25px 0}
.column-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.column-card__info{padding:25px}
.column-card__title{font-size:var(--text-2xl);line-height:var(--lh-tight);margin-bottom:10px}
@media (min-width:750px){.column-card__title{margin-bottom:15px}}
.column-card__text{font-size:var(--text-base);line-height:var(--lh-body);color:var(--ink-75)}
.columns__buttons{text-align:center;margin-top:25px}
@media (min-width:750px){
  .columns{padding:46px 0 44px}
  .columns--dark{padding:70px 0}
  .columns__title{margin-bottom:40px}
  .columns__list{margin:0;padding:0;overflow:visible;display:grid;gap:30px}
  .columns--3 .columns__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .columns--4 .columns__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .columns--3 .column-card+.column-card{border-left:1px solid var(--ink-30);border-radius:0}
}
@media (min-width:990px){
  .columns--4 .columns__list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* features: dark tiles with icon */
.features{padding:23px 0 24px}
.features__title{margin-bottom:25px}
.features__list{display:grid;gap:30px}
.feature{background:var(--dark);border-radius:var(--radius-lg);padding:35px 25px;text-align:center;color:var(--on-dark-75);font-size:var(--text-md);line-height:var(--lh-body)}
.feature__img{width:100px;height:100px;margin:0 auto 20px;border-radius:10%}
.feature__title{font-size:var(--text-xl);line-height:var(--lh-body);color:var(--white);margin-bottom:8px}
@media (min-width:750px){
  .features{padding:40px 0 42px}
  .features__title{max-width:600px;margin:0 auto 40px}
  .features__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:990px){.features__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* FAQ accordion on dark */
.faq{background:var(--dark);padding:16px 0 9px}
.faq__box{padding:15px;border-radius:var(--radius-lg)}
.faq__inner{padding:40px 20px}
.faq__title{font-size:var(--text-3xl);line-height:var(--lh-heading);color:var(--white);margin-bottom:10px}
.faq__row{padding:10px 0;border-bottom:1px solid var(--on-dark-30)}
.faq__summary{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 30px 10px 0;cursor:pointer;list-style:none;color:var(--white)}
.faq__summary::-webkit-details-marker{display:none}
.faq__icon{margin-top:2px}
.faq__q{font-size:var(--text-xl);line-height:var(--lh-snug);color:var(--white)}
.faq__chevron{position:absolute;right:5px;top:50%;margin-top:-7px;transition:transform .2s}
.faq__row[open] .faq__chevron{transform:rotate(180deg)}
.faq__a{padding:5px 0 10px;font-size:var(--text-md);line-height:var(--lh-body);color:var(--white)}
.faq__a p+p{margin-top:16px}
@media (min-width:750px){
  .faq{padding:28px 0 16px}
  .faq__inner{padding:70px}
  .faq__title{margin-bottom:20px}
}

/* rich text */
.richtext{padding:24px 0 25px;text-align:center;color:var(--ink)}
.richtext--follow{padding:40px 0}
.richtext__wrapper{max-width:800px}
.richtext__caption{font-size:var(--text-xs);line-height:var(--lh-tight);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:10px}
.richtext__heading{font-size:var(--text-3xl);line-height:var(--lh-heading)}
.richtext__text{margin-top:15px;font-size:var(--text-base);line-height:var(--lh-body)}
.richtext__buttons{margin-top:20px}
@media (min-width:750px){
  .richtext{padding:42px 0 44px}
  .richtext--follow{padding:70px 0}
  .richtext__buttons{margin-top:25px}
}
@media (min-width:990px){.richtext__wrapper{padding:0}}

/* image with text */
.image-text{padding:21px 0 22px}
.image-text__grid{display:grid}
.image-text__media{background:var(--dark);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;aspect-ratio:3/2}
.image-text__media img{width:100%;height:100%;object-fit:cover}
.image-text__content{background:var(--dark);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:40px 30px;color:var(--on-dark-75);font-size:var(--text-base);line-height:var(--lh-body)}
.image-text__heading{font-size:var(--text-3xl);line-height:var(--lh-heading);color:var(--white);margin-bottom:20px}
.image-text__btn{margin-top:30px}
@media (min-width:750px){
  .image-text{padding:36px 0 38px}
  .image-text__grid{grid-template-columns:1fr 1fr}
  .image-text__media{border-radius:var(--radius-lg) 0 0 var(--radius-lg);aspect-ratio:auto;min-height:447px}
  .image-text__content{border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:60px 70px 70px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
}

/* multicolumn on mobile: swipe list, "Про нас" link under the heading, slider counter below */
.columns__heading{margin-bottom:25px;text-align:center}
.columns__heading .columns__title{margin:0}
.columns__link{display:inline-block;font-size:var(--text-md);line-height:var(--lh-body);color:var(--ink-75);text-decoration:underline;text-underline-offset:3px}
.columns__list{scroll-padding-left:var(--gutter)}
.columns__buttons{display:none}
.slider-nav{display:flex;align-items:center;margin-top:25px;color:var(--ink-75);font-size:var(--text-md);line-height:var(--lh-body)}
.columns--dark .slider-nav{color:var(--on-dark-75)}
.slider-nav__btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center}
.slider-nav__btn--prev .icon{transform:rotate(180deg)}
.slider-nav__btn[disabled]{border-color:var(--ink-30);color:var(--ink-30)}
.columns--dark .slider-nav__btn{background:var(--dark);border-color:var(--white);color:var(--white)}
.columns--dark .slider-nav__btn[disabled]{border-color:var(--on-dark-30);color:var(--on-dark-30)}
.slider-nav__count{margin:0 15px;min-width:27px;text-align:center}
@media (min-width:750px){
  .columns__heading{margin-bottom:40px}
  .columns__link,.slider-nav{display:none}
  .columns__buttons{display:block}
}
.testimonials__track{padding-left:0}
.testimonial__rating{height:18px;align-items:center}
.testimonial__rating .icon{width:22px;height:22px;margin:0 -2px}
.faq__q{padding-right:30px}
.faq__chevron{width:12px;height:12px;margin-top:-6px}
@media (max-width:749px){.richtext__wrapper{padding:0 35px}}
/* mobile carousels keep each card's natural height (only one card is in view at a time) */
@media (max-width:749px){.columns__list{align-items:flex-start}}
@media (max-width:749px){.richtext__text{margin-top:10px}}
/* card call to action: shown on mobile like the live quick-add buttons, hidden from 750px (live shows them on hover only) */
.card__actions{padding:0 12px 12px;margin-top:auto}
.card__btn{width:100%;min-height:40px;padding:8px 16px;border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--lh-tight)}
@media (min-width:750px){.card__actions{display:none}}
.column-card__media img{object-fit:contain}
/* hryvnia reference under EUR prices */
.price__ref{display:block;margin-top:2px;font-size:var(--text-sm);line-height:var(--lh-snug);font-weight:var(--fw-regular);color:var(--ink-muted)}
/* variant options and add to cart on product cards */
.card__body{display:flex;flex-direction:column;gap:10px}
.card__title{margin:0}
.card__options{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;min-width:0}
.card__option{position:relative;display:inline-flex;cursor:pointer}
.card__option input{position:absolute;opacity:0;pointer-events:none}
.card__option.is-disabled{cursor:not-allowed}
.card__pack{margin:0;font-size:var(--text-xs);color:var(--ink-muted)}
.card__btn.is-done{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media (min-width:750px){.card__actions{display:block;padding:0 20px 20px}}
.card__error{margin:8px 0 0}
/* card body: title on top; options with the price beside them on the right when it fits, else under them (still right) */
.card__body{display:flex;flex-flow:row wrap;align-items:flex-end;gap:10px 15px}
.card__body > *{flex:1 1 100%}
.card__body > .card__options{flex:0 1 auto}
.card__body:has(> .card__options) > .card__price{order:2;flex:0 0 auto;margin:0 0 0 auto;text-align:right}
.card__body > .card__options{order:1}
.card__body > :not(.card__title):not(.card__options):not(.card__price){order:3}
.card__body > .card__options{flex-direction:column;align-items:flex-start}