@charset "UTF-8";
.home-hero {
  position: relative;
}
.home-hero__picture, .home-hero__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .home-hero__img {
    height: 1000px;
    object-fit: cover;
    object-position: center 28%;
  }
}
@media (max-width: 767px) {
  /* object-fit is required alongside min-height: the base rule keeps
     height:auto, so forcing a taller box without cover would stretch the
     photo instead of filling the frame. */
  .home-hero__img {
    min-height: 80vh;
    object-fit: cover;
  }
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, #000);
  pointer-events: none;
  z-index: 1;
}
.home-hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 2;
}
@media (max-width: 767px) {
  .home-hero__content {
    bottom: 40px;
  }
}
.home-hero .marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.home-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  color: #fff;
}
@media (max-width: 767px) {
  .home-transition {
    gap: 22px;
  }
}
.home-transition__mark {
  width: 72px;
  height: auto;
}
@media (max-width: 767px) {
  .home-transition__mark {
    width: 60px;
  }
}
.home-transition__arrow svg {
  display: block;
}
.home-transition__title {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 22px;
}
@media (max-width: 767px) {
  .home-transition__title {
    font-size: 17px;
  }
}

.home-categories {
  background: transparent;
  padding: 50px 0 30px;
}

.category-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1023px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.category-card__media {
  aspect-ratio: 714/1000;
  overflow: hidden;
}
.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.category-card:hover .category-card__media img {
  transform: scale(1.04);
}
.category-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 10px 0;
}
.category-card__title {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 26px;
  font-weight: 400 !important;
  color: #2B2927;
}
.category-card__desc {
  font-size: 14px;
  color: #2B2927;
  text-align: center;
}
.category-card__btn {
	display: none;
  margin-top: 4px;
  border-color: #e9e9e9;
}
.category-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.featured-products {
  width: 100%;
  padding: 70px 0 40px;
}
.featured-products .carousel__slide {
  flex: 0 0 25%;
}
@media (max-width: 1023px) {
  .featured-products .carousel__slide {
    flex-basis: 50%;
  }
}
@media (max-width: 767px) {
  .featured-products .carousel__slide {
    flex-basis: 44%;
  }
}
.featured-products .carousel__btn--prev {
  left: 12px;
}
.featured-products .carousel__btn--next {
  right: 12px;
}

.home-brand-faq {
  padding: 40px 20px 60px;
}
.home-brand-faq__inner {
  width: 100%;
  max-width: 1230px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.brand-band,
.faq {
  flex: 1 1 calc(50% - 20px);
  min-width: 280px;
}
@media (max-width: 767px) {
  .brand-band,
  .faq {
    flex-basis: 100%;
  }
	.category-card__title {
		font-size: 16px;
	}
	.category-card__desc {
		font-size: 11px;
	}
	.category-card__body {
		align-items: center;
	}
	.featured-products {
		padding-top: 40px;
		padding-bottom: 0;
	}
	section.featured-products.featured-products--last-units {
		padding-top: 20px;
	}
	summary.faq__q {
		font-size: 14px;
	}
	.faq__a p {
		font-size: 13px;
	}
}

.brand-band {
  text-align: center;
}
.brand-band__text {
  margin-bottom: 25px;
  font-size: 15px;
}
.brand-band__text p {
  margin-bottom: 1em;
}

/* "O brendu" image carousel — mobile only. Hidden (not just inert) above the
   breakpoint; the slides are loading="lazy" so desktop never fetches them. */
.brand-carousel {
  display: none;
}
@media (max-width: 767px) {
  .brand-carousel {
    display: block;
    margin-bottom: 26px;
  }
  .brand-carousel__viewport {
    overflow: hidden;
  }
  .brand-carousel__container {
    display: flex;
    /* No gutter: slide padding and this margin are removed together. */
    margin-left: unset;
    touch-action: pan-y pinch-zoom;
  }
  .brand-carousel__slide {
    flex: 0 0 33.3333%;
    min-width: 0;
    padding-left: unset;
  }
  .brand-carousel__img {
    display: block;
    width: 100%;
    height: auto;
    /* Source images are 500x625 — matching 4/5 keeps them uncropped.
       object-fit stays as a guard if a differently-shaped image is added. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    cursor: zoom-in;
  }
  .brand-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }
  .brand-carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfccc9;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .brand-carousel__dot.is-active {
    background: #2B2927;
  }
}

.faq__item {
  border-bottom: 1px solid #e5e2df;
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-weight: 400 !important;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: #5B5856;
}
.faq__item[open] .faq__q::after {
  content: "–";
}
.faq__a {
  padding: 0 10px 18px;
  font-size: 14px;
  color: #5B5856;
}
.faq__a p {
  margin-bottom: 0.8em;
}
.faq__a a {
  text-decoration: underline;
}

/* Mobile + tablet: drop the doubled side padding (.home-brand-faq already
   pads 20px), left-align the FAQ heading and tighten the question rows. */
@media (max-width: 1023px) {
  .home-brand-faq__inner {
    padding: unset;
  }
  h2.section-heading.faq__heading {
    text-align: left;
  }
  .faq__q {
    padding-block: 10px;
  }
}