/* ---------- Layout: sidebar + content ---------- */
.layout{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

aside.filters{
  background: var(--paper);
  border: 1px solid rgba(74,15,24,.14);
  border-radius: 10px;
  padding: 1.4rem 1.3rem 1.6rem;
  position: sticky;
  top: 1.5rem;
}

.filters h3{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--wine);
  margin: 0;
}

/* Na desktopu je "Filtry" jen nadpis, sidebar je vždycky celý vidět (sticky
   vlevo, dost místa) - tlačítko pro sbalení/rozbalení (viz media query níž)
   dává smysl jen na mobilu, kde by filtry jinak zabíraly většinu obrazovky
   před samotnou nabídkou. */
.filters-toggle{
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 .9rem;
  cursor: default;
  text-align: left;
}
.filters-toggle-icon{ display: none; }

.filter-group{
  padding: 1.1rem 0;
  border-top: 1px solid rgba(74,15,24,.12);
}
.filter-group:first-of-type{ border-top: none; padding-top: 0; }

.filter-group h4{
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}

.filter-row{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  color: var(--ink);
  padding: .3rem 0;
  cursor: pointer;
}
.filter-row input[type="checkbox"],
.filter-row input[type="radio"]{
  width: 15px;
  height: 15px;
  accent-color: var(--wine);
}
.filter-count{
  margin-left: auto;
  color: var(--ink-soft);
  font-size: .78rem;
}

/* ---------- Rozbalovací filtr s vyhledáváním (Kategorie/Typ vína/Sladkost) ----------
   Viz catalog-multi-select.js - jen otevírání/zavírání/hledání, checkboxy
   uvnitř jsou skutečné <input type="checkbox"> a filtr se odesílá úplně
   stejně jako dřív (Catalog.js). Nahrazuje dlouhé seznamy checkboxů, které
   na užších obrazovkách dělaly z panelu filtrů nepřehledně dlouhý sloupec. */
.multi-select{ position: relative; }
.multi-select-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 6px;
  border: 1px solid rgba(74,15,24,.25);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.multi-select-label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-select-caret{
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  margin-top: -4px;
}
.multi-select-panel{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid rgba(74,15,24,.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,6,8,.18);
  padding: .6rem;
}
.multi-select-search{
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  margin-bottom: .5rem;
  border-radius: 6px;
  border: 1px solid rgba(74,15,24,.2);
  background: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--ink);
}
.multi-select-options{
  max-height: 220px;
  overflow-y: auto;
  /* Rezervuje místo pro scrollbar místo jejího překreslení přes obsah -
     bez tohohle u delšího seznamu (např. vinařství) scrollbar překrýval
     počet položek (.filter-count) zarovnaný k pravému okraji. Padding-right
     jako záloha pro prohlížeče bez podpory scrollbar-gutter. */
  scrollbar-gutter: stable;
  padding-right: .3rem;
}
.multi-select-option{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .2rem;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
}
/* Bez tohohle by "display: flex" výš přebilo standardní [hidden] chování
   (třída má vyšší specificitu než prohlížečové [hidden]) a vyhledávání by
   viditelně nic neschovávalo, i když catalog-multi-select.js hidden správně
   nastavuje - viz stejný trik u .pos-scan-dialog[hidden] v Pos.css. */
.multi-select-option[hidden]{ display: none; }
.multi-select-option input[type="checkbox"]{
  width: 15px;
  height: 15px;
  accent-color: var(--wine);
  flex: none;
}
.multi-select-option .filter-count{ margin-left: auto; }
.multi-select-empty{
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--ink-soft);
  margin: .4rem 0 0;
}

/* ---------- Dvojposuvník (Objem/Cena) ----------
   Dva průhledné <input type="range"> nad sebou nad společnou vizuální stopou -
   pointer-events:none na inputu, auto jen na jezdci (thumb), ať jde uchopit
   jen za kolečko a ne za celou dráhu (jinak by klik kamkoli na dráhu přeskočil
   "spodní" input pod ukazatelem). Výplň mezi jezdci a popisky dopočítává
   catalog-range-slider.js. */
.range-slider{
  margin-top: .7rem;
}
.range-slider-handles{
  position: relative;
  height: 20px;
}
.range-slider-track{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(74,15,24,.18);
}
.range-slider-fill{
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--wine);
  border-radius: 999px;
}
.range-slider-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-slider-input::-webkit-slider-runnable-track{ -webkit-appearance: none; background: none; }
.range-slider-input::-moz-range-track{ background: none; border: none; height: 20px; }
.range-slider-input::-webkit-slider-thumb{
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wine);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20,6,8,.4);
  cursor: pointer;
}
.range-slider-input::-moz-range-thumb{
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wine);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(20,6,8,.4);
  cursor: pointer;
}
/* Editovatelná pole pod posuvníkem - zákazník tak může hledanou hodnotu
   rovnou napsat, ne jen trefit tažením jezdce (viz catalog-range-slider.js). */
.range-slider-fields{
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
}
.range-slider-field{
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: .4rem .5rem;
  border-radius: 6px;
  border: 1px solid rgba(74,15,24,.25);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--ink);
  text-align: center;
  -moz-appearance: textfield;
}
.range-slider-field::-webkit-outer-spin-button,
.range-slider-field::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.range-slider-field-sep{ color: var(--ink-soft); flex: none; }
.range-slider-unit{
  flex: none;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: var(--ink-soft);
}

.filters-apply{
  display: block;
  width: 100%;
  margin-top: .4rem;
  background: var(--wine);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .65rem;
  border-radius: 999px;
  text-align: center;
  border: none;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: radial-gradient(ellipse at 25% 35%, var(--wine) 0%, var(--wine-2) 78%);
  color: var(--cream);
  padding: 3.4rem 3vw;
  margin: 14px;
  border: 1px solid rgba(201,162,75,.55);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  overflow: hidden;
}
.hero::before, .hero::after{
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(201,162,75,.55);
  opacity: .8;
}
.hero::before{
  top: 10px; left: 10px;
  border-right: none;
  border-bottom: none;
}
.hero::after{
  bottom: 10px; right: 10px;
  border-left: none;
  border-top: none;
}
.hero-divider{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
}
.hero-divider .line{ width: 34px; height: 1px; background: var(--gold); }
.hero-divider svg{ width: 14px; height: 14px; }
.hero-copy{ max-width: 480px; }
.hero-eyebrow{
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .7rem;
}
.hero h1{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  margin: 0 0 .8rem;
}
.hero p{
  margin: 0 0 1.4rem;
  font-size: 1.15rem;
  color: rgba(243,234,217,.82);
  max-width: 40ch;
}
.hero-btn{
  display: inline-block;
  background: var(--gold);
  color: var(--wine-2);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
}
.hero-badge{
  font-family: 'Playfair Display', serif;
  text-align: center;
  border: 1px solid rgba(201,162,75,.5);
  border-radius: 8px;
  padding: 1.4rem 1.8rem;
}
.hero-badge .n{ font-size: 2.4rem; color: var(--gold); font-weight: 700; line-height: 1; }
.hero-badge .l{ font-family: 'Inter', sans-serif; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,234,217,.7); margin-top: .4rem; }

/* ---------- Product grid ---------- */
main{ padding: 2.6rem 4vw 4rem; }

.section-title{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 1.4rem;
  color: var(--wine);
}

/* Box nad výpisem produktů - stejný vzhled jako aside.filters (paper pozadí,
   stejné ohraničení), zarovnaný s ním na výšku začátku sloupce (oba jsou
   přímé děti .layout s align-items:start). Nadpis + tlačítka řazení vedle
   sebe, na užší obrazovku se zabalí pod sebe (flex-wrap). */
.offer-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  background: var(--paper);
  border: 1px solid rgba(74,15,24,.14);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.4rem;
}
.offer-toolbar .section-title{ margin: 0; }

.sort-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.sort-btn{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(74,15,24,.25);
  background: #fff;
  color: var(--wine);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sort-btn:hover{ background: var(--cream-2); }
.sort-btn--active{
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
}

/* minmax(310px, ...) je schválně vyšší, než by karta sama potřebovala - na
   běžném 1980px monitoru s tím auto-fill vyjde přesně na 4 sloupce v řadě,
   na širším monitoru samo přirozeně přidá další sloupec (5, 6...), ať se
   nevyužije zbytečně moc prázdného místa. Žádný pevný strop na sloupce -
   jen tahle minimální šířka karty řídí, kolik se jich vejde. */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1.3rem;
}

.card{
  background: var(--paper);
  border: 1px solid rgba(74,15,24,.12);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover{
  border-color: rgba(138,31,40,.4);
  box-shadow: 0 6px 18px rgba(74,15,24,.1);
}
.card:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Produktové fotky jsou celoplošné snímky na výšku 3:4 (lahev v aranžmá) -
   rámeček má proto poměr na výšku (4:5, fotka se ořízne jen nepatrně po
   stranách) a fotka ho vyplní celý. Stejný rámeček mají i karty bez fotky
   (placeholder ikona), ať jsou karty v jednom řádku stejně vysoké. Strop
   max-height pro široké karty (jeden sloupec na tabletu). */
.card-art{
  position: relative; /* tlačítko obsluhy "+ Pokladna" v rohu (site.css) */
  /* Bez pevné šířky by max-height přes aspect-ratio zúžil i šířku rámečku
     (u širokých karet pak fotka nevyplnila kartu a vpravo zbyl pruh). */
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--wine);
}
/* Barevné odlišení placeholder ikony (bez vlastní fotky) podle typu vína -
   stejný princip jako u Stáčených vín (StaceneNabidka.css). BÍLÉ schválně
   nepoužívá --gold/--gold-deep, ať nesplývá s jinými zlatými akcenty na
   stránce (odznaky/hero). */
.card--white .card-art{ color: #ddc27a; }
.card--red .card-art{ color: var(--wine); }
.card--rose .card-art{ color: #c06a7a; }
.card-art svg{ height: 45%; }
.card-art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body{ padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }

.tag{
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 .35rem;
}

.card h3{
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.275rem;
  margin: 0 0 .2rem;
  color: var(--ink);
}
.card-link{
  color: inherit;
  text-decoration: none;
}

.winery{
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 .8rem;
}

.card-foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.price{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--wine);
}
.price .vol{ font-weight: 400; font-size: .74rem; color: var(--ink-soft); display:block; margin-top:1px; }

.price-old{ font-weight: 400; font-size: .82rem; color: var(--ink-soft); text-decoration: line-through; margin-right: .4rem; }
.price-new{ color: var(--wine); }

.card-foot .add-to-cart-slot{ display: contents; }

.add-btn{
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  background: var(--wine);
  color: var(--cream);
  border-radius: 999px;
  padding: .7rem 1.4rem;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.add-btn-disabled{
  background: var(--ink-soft);
  cursor: default;
}

.qty-stepper{
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--wine);
  border-radius: 999px;
  padding: .4rem .6rem;
  white-space: nowrap;
}
.qty-stepper .qty-btn{
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.qty-stepper .qty-btn:hover{ background: rgba(255,255,255,.28); }
.qty-stepper .qty-value{
  min-width: 1.1rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--cream);
}

/* Větší texty na kartě produktu (o 2 px proti základním stylům výš) - jen
   uvnitř .card, ať se nezmění .tag/.winery/.price apod. na jiných
   stránkách, které Catalog.css taky načítají (např. Produkt.cshtml). */
.card .tag{ font-size: .785rem; }
.card .winery{ font-size: 1.075rem; }
.card .price{ font-size: 1.175rem; }
.card .price .vol{ font-size: .865rem; }
.card .price-old{ font-size: .945rem; }
.card .add-btn{ font-size: .975rem; }
.card .qty-stepper .qty-value{ font-size: 1.045rem; }

.empty-catalog{
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
}

.pagination-wrap{ margin-top: 2.2rem; }

.load-more-row{
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.load-more-btn{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  background: #fff;
  color: var(--wine);
  border: 1px solid rgba(74,15,24,.3);
  border-radius: 999px;
  padding: .85rem 2.2rem;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.load-more-btn:hover{
  background: var(--cream-2);
  box-shadow: 0 4px 14px rgba(74,15,24,.1);
}

.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.page-btn{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  min-width: 2.6rem;
  background: #fff;
  color: var(--wine);
  border: 1px solid rgba(74,15,24,.25);
  border-radius: 999px;
  padding: .6rem .9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.page-btn:hover{ background: var(--cream-2); }
.page-btn--active{
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
  cursor: default;
}
.page-btn-nav{ min-width: auto; }
.page-ellipsis{
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  padding: 0 .3rem;
}

#catalog-content.is-loading{
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease;
}

@media (max-width: 640px){
  .layout{ grid-template-columns: 1fr; }
  aside.filters{ position: static; padding: .9rem 1.1rem; }

  .offer-toolbar{ padding: .9rem 1rem; }
  .sort-btn{ padding: .5rem .9rem; font-size: .8rem; }

  /* Filtry na mobilu defaultně sbalené (jen řádek "Filtry ▾"), ať nezabírají
     většinu obrazovky před samotnou nabídkou - klik na řádek je rozbalí,
     druhý klik zase sbalí. Stav (.is-open) se přes Catalog.js zachovává i
     po AJAX přenačtení výpisu (filtrování bez reloadu stránky). */
  .filters-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
  }
  .filters-toggle-icon{
    display: block;
    width: 22px;
    height: 22px;
    flex: none;
    position: relative;
  }
  .filters-toggle-icon::before, .filters-toggle-icon::after{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: var(--wine);
    transition: transform .15s ease;
  }
  .filters-toggle-icon::before{ width: 12px; height: 2px; transform: translate(-50%,-50%); }
  .filters-toggle-icon::after{ width: 2px; height: 12px; transform: translate(-50%,-50%); }
  #catalog-filters.is-open .filters-toggle-icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

  .filters-body{
    display: none;
    margin-top: 1rem;
  }
  #catalog-filters.is-open .filters-body{ display: block; }

  /* Větší dotykové plochy na mobilu - jezdec posuvníku i řádky v rozbaleném
     panelu vyhledávacího filtru. */
  .range-slider-handles{ height: 26px; }
  .range-slider-input{ height: 26px; }
  .range-slider-input::-webkit-slider-thumb{ width: 24px; height: 24px; }
  .range-slider-input::-moz-range-thumb{ width: 24px; height: 24px; }
  .range-slider-fields{ margin-top: 1.1rem; }
  .range-slider-field{
    padding: .8rem .5rem;
    font-size: 1.05rem;
    min-height: 48px;
    box-sizing: border-box;
  }
  .range-slider-unit{ font-size: .9rem; }
  .multi-select-toggle{ padding: .9rem .9rem; font-size: 1rem; min-height: 48px; }
  .multi-select-search{ padding: .75rem .8rem; font-size: 1rem; }
  .multi-select-option{ padding: .65rem .3rem; font-size: 1rem; }
  .multi-select-option input[type="checkbox"]{ width: 20px; height: 20px; }

  .hero{
    padding: 2rem 1.4rem;
    margin: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    text-align:center;
  }
  .hero::before, .hero::after{ width: 40px; height: 40px; }
  .hero-copy{ max-width: 100%; }
  .hero-divider{ justify-content: center; }
  .hero h1{ font-size: 1.6rem; }
  .hero-badge{ align-self: center; }
}