/*
 * Melli Slider produktů — frontend i editor styly.
 *
 * Sekce „Nejprodávanější modely“: nadpis VERZÁLKAMI vlevo + odkaz „Všechny
 * produkty ›“ vpravo nahoře, carousel produktových karet (foto + cena +
 * NÁZEV VERZÁLKAMI + „Mám zájem“) a tečková paginace.
 *
 * Carousel staví na scroll-snap (DaisyUI `carousel`) → funguje i bez JS.
 * Šipky a tečky doplňuje lehký vanilla JS (assets/js/products-slider.js).
 *
 * Plochý design (ostré rohy), barvy přes DaisyUI/CSS proměnné (tokeny z
 * TASK-002) — žádné hardcoded HEX. Responzivní: desktop 4 karty, tablet 2,
 * mobil 1 (přes scroll-snap, basis se mění breakpointy).
 */

.melli-products-slider {
  padding: 4.5rem 1.5rem; /* ~72px vertikálně dle tokenů */
  background-color: var(--color-base-100, #ffffff);
}

.melli-products-slider__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Horní řádek: nadpis vlevo + odkaz „Všechny produkty“ vpravo. */
.melli-products-slider__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

/* Nadpis sekce — VERZÁLKAMI, váha 600, ~32px (vlevo dle předlohy). */
.melli-products-slider__heading {
  margin: 0;
  color: var(--color-base-content, #333333);
  font-size: clamp(1.5rem, 3vw, 2rem); /* ~24 → 32px */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Odkaz „Všechny produkty ›“ — VERZÁLKAMI, vínová. */
.melli-products-slider__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primary, #9d0a0f);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.melli-products-slider__all:hover {
  opacity: 0.7;
}

.melli-products-slider__all-arrow {
  font-size: 1.1em;
  line-height: 1;
}

/* ----- Carousel: track + navigační šipky ----- */
.melli-products-slider__carousel {
  position: relative;
}

/* Track produktů — vodorovný scroll se snapem (DaisyUI carousel). */
.melli-products-slider__track {
  display: flex;
  gap: 1rem; /* 16px gap (tokeny) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Skryjeme scrollbar (navigace přes šipky/tečky). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.melli-products-slider__track::-webkit-scrollbar {
  display: none;
}

/*
 * Slide — šířka dle počtu karet na řádek (atribut perView → --melli-per-view).
 * Mezi N kartami je (N − 1) mezer po 1rem. Tablet/mobil přebíjí responzivní CSS níže.
 */
.melli-products-slider__slide {
  flex: 0 0
    calc(
      (100% - (var(--melli-per-view, 4) - 1) * 1rem) / var(--melli-per-view, 4)
    );
  scroll-snap-align: start;
}

/* Karta produktu — plochá, bílé pozadí, ostré rohy, bez stínu. */
.melli-products-slider__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0; /* ostré rohy (plochý design) */
  background-color: var(--color-base-100, #ffffff);
  box-shadow: none;
}

/* Médium (foto) — čtverec, ostré rohy. */
.melli-products-slider__media {
  border-radius: 0;
}

/* Cena — orientační „Od … €“, vínová, drobnější. */
.melli-products-slider__price {
  display: block;
  color: var(--color-primary, #9d0a0f);
  font-size: 0.9375rem; /* ~15px */
  font-weight: 600;
}

/* Cena z WooCommerce — sjednotíme styl (zruší přeškrtnutí/del rozdíly). */
.melli-products-slider__price .woocommerce-Price-amount,
.melli-products-slider__price ins,
.melli-products-slider__price del {
  color: inherit;
  text-decoration: none;
}

/* Název produktu — VERZÁLKAMI, váha 600. */
.melli-products-slider__name {
  font-size: 1rem;
  font-weight: 600;
}

.melli-products-slider__name a {
  text-decoration: none;
}

/*
 * ----- Navigační šipky: minimalistické chevrony (dle vzoru melli.sk) -----
 * Bez rámečku a pozadí, vínové, vycentrované na výšku FOTKY (ne celé karty) —
 * proto posun o ~1rem nahoru od středu karty (textový řádek pod fotkou).
 * Bílý jemný stín drží čitelnost i nad světlými místy fotky.
 */
.melli-products-slider__nav {
  position: absolute;
  top: calc(50% - 1rem);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary, #9d0a0f);
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  transition: opacity 0.25s ease;
}

.melli-products-slider__nav--prev {
  left: -0.25rem;
}

.melli-products-slider__nav--next {
  right: -0.25rem;
}

.melli-products-slider__nav:hover {
  opacity: 0.6;
}

/* V nekonečném režimu se šipky nedeaktivují; v ostatních je skryjeme. */
.melli-products-slider__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* ----- Tečková paginace ----- */
.melli-products-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.melli-products-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-base-300, #efede9);
  transition: background-color 0.3s ease;
}

.melli-products-slider__dot.is-active {
  background-color: var(--color-primary, #9d0a0f);
}

/* ----- Responzivita ----- */

/* Tablet (≤ 1024px) — 2 karty na řádek. */
@media (max-width: 1024px) {
  .melli-products-slider__slide {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

/* Mobil (≤ 767px) — 1 karta na řádek, menší padding sekce. */
@media (max-width: 767px) {
  .melli-products-slider {
    padding: 3rem 1.25rem;
  }

  .melli-products-slider__slide {
    flex-basis: 85%; /* náznak další karty (peek), pro swipe */
  }

  /* Na mobilu skryjeme boční šipky (ovládá se swipem + tečkami). */
  .melli-products-slider__nav {
    display: none;
  }
}