/* Výpis vín s rychlým košíkem po boku (tpl/basket/panel.php).
   Předloha: sekce `katalog` v prototyp/v22/vina.html. Převzato z projektu v2. */

.katalog { padding: 0 2rem 6rem; }
.katalog__obal { max-width: var(--sirka-obalu, 78rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }

/* --- Filtry --- */
/* Zadavateli se na prvním kole líbily filtry jako select boxy nad výpisem.
   Odesílají se formulářem, takže fungují i bez JavaScriptu a filtr je vidět
   v adrese — dá se poslat odkazem. */
.katalog__filtry {
  background: var(--bg-karta, hsl(0 0% 100%));
  border-radius: var(--r-karta, 16px);
  padding: 1.5rem;
  margin: 0 0 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  box-shadow: var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05));
}
.katalog__pole { display: grid; gap: 0.5rem; flex: 1 1 8rem; }
.katalog__popisek { font-size: 0.8125rem; color: var(--fg-muted, hsl(334 12% 42%)); }
.katalog__select {
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--c-linka, hsl(334 12% 89%));
  background: var(--bg-pole, hsl(36 40% 98%));
  color: inherit;
  border-radius: var(--r-ovladani, 10px);
  width: 100%;
  transition: border-color 0.15s ease;
}
.katalog__select:hover, .katalog__select:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); }
.katalog__odeslat { font: inherit; font-size: 0.875rem; padding: 0.625rem 1rem; border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-ovladani, 10px); background: var(--bg-pole, hsl(36 40% 98%)); color: inherit; cursor: pointer; }
.katalog__odeslat:hover, .katalog__odeslat:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); }
.katalog__zrusit { font: inherit; font-size: 0.875rem; padding: 0.625rem 0; align-self: center; color: var(--c-akce, hsl(345 62% 36%)); text-decoration: underline; }
.katalog__pocet { font-size: 0.9375rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 2rem; }

/* --- Mřížka karet --- */
.katalog__mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2rem; }
.katalog__kus {
  background: var(--bg-karta, hsl(0 0% 100%));
  border-radius: var(--r-karta, 16px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.katalog__kus:hover { box-shadow: var(--stin-zvednuta, 0 12px 32px hsl(334 20% 30% / 0.1)); transform: translateY(-2px); }
/* Karta v košíku nese tichý bordó prstenec — v mřížce je poznat na dálku. */
.katalog__kus--vkosiku { box-shadow: 0 0 0 2px hsl(334 45% 26% / 0.22), var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05)); }
.katalog__kus--vkosiku:hover { box-shadow: 0 0 0 2px hsl(334 45% 26% / 0.3), var(--stin-zvednuta, 0 12px 32px hsl(334 20% 30% / 0.1)); }

.katalog__obrazek { position: relative; margin: 0 0 1.25rem; }
/* Přímý potomek schválně: uvnitř je ještě <img> odznaku ocenění a ten se
   roztáhnout nesmí. */
/* Fotky vín jsou 2:3 s lahví na 90 % výšky (bin/fotky_vin.py). Rámeček 3:4 je nižší, takže lahev
   vyjde asi o 11 % menší a nepůsobí mohutně; contain ji ukáže celou. */
.katalog__obrazek > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }

/* Odznak oceněného vína — stejná zlatá rozeta jako na starém webu. Vysí přes
   roh fotky a nepřekáží kliknutí na kartu. */
.katalog__medaile {
  position: absolute; top: -0.25rem; right: -0.25rem;
  display: block; width: 3.75rem; line-height: 0;
  filter: drop-shadow(0 2px 5px hsl(334 25% 25% / 0.28));
  pointer-events: none;
}
.katalog__medaile img { display: block; width: 100%; height: auto; }
.katalog__nazev { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1.125rem; margin: 0 0 0.25rem; }
.katalog__nazev a { color: inherit; text-decoration: none; }
.katalog__nazev a:hover, .katalog__nazev a:focus-visible { color: var(--c-akce, hsl(345 62% 36%)); }
.katalog__meta { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.25rem; }
.katalog__cena { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-size: 1.375rem; font-weight: 500; margin: auto 0 0.75rem; font-variant-numeric: tabular-nums; }
.katalog__cena span { font-family: var(--font-text, "DM Sans", sans-serif); font-size: 0.6875rem; color: var(--fg-muted, hsl(334 12% 42%)); }

/* --- Ovládání karty --- */
/* Dva stavy, které přepíná sám obsah košíku. Dokud v něm položka není, je vidět
   tlačítko Do košíku. Jakmile v něm je, nahradí ho počítadlo, jehož číslo JE stav
   košíku — ne samostatná hodnota, kterou by šlo rozepsat a zapomenout odeslat.
   Tlačítko i počítadlo mají stejnou výšku, aby karta při přidání nepodskočila. */
.katalog__akce { display: grid; gap: 0.5rem; }
.katalog__pridat { font: inherit; font-size: 0.9375rem; font-weight: 500; height: var(--v-ovladani, 2.75rem); padding: 0 0.75rem; border: none; border-radius: var(--r-ovladani, 10px); cursor: pointer; background: var(--c-akce, hsl(345 62% 36%)); color: hsl(36 40% 97%); transition: background-color 0.15s ease; }
.katalog__pridat:hover, .katalog__pridat:focus-visible { background: var(--c-akce-tmava, hsl(345 62% 30%)); }
.katalog__pocitadlo { display: flex; align-items: center; height: var(--v-ovladani, 2.75rem); border-radius: var(--r-ovladani, 10px); background: hsl(340 24% 93%); }
.katalog__krok { font: inherit; font-size: 1.0625rem; line-height: 1; width: var(--s-krok, 2.5rem); height: var(--v-ovladani, 2.75rem); border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); cursor: pointer; border-radius: var(--r-ovladani, 10px); transition: background-color 0.15s ease; }
.katalog__krok:hover, .katalog__krok:focus-visible { background: hsl(340 30% 87%); }
.katalog__ks { font: inherit; font-size: 0.9375rem; font-weight: 500; flex: 1; min-width: 0; width: 100%; text-align: center; border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); font-variant-numeric: tabular-nums; padding: 0; }
.katalog__jednotka { font-size: 0.6875rem; color: var(--fg-muted, hsl(334 12% 42%)); padding-right: 0.75rem; }

/* Dávky jsou vidět i u položky, která v košíku ještě není — nákup tu běžně
   začíná na desítkách kusů, ne na jednom. Stojí mimo přepínaný blok, aby je
   změna počtu nepřekreslovala. */
.katalog__davky { display: flex; gap: 0.3125rem; margin-top: 0.5rem; }
.katalog__davka { flex: 1; font: inherit; font-size: 0.75rem; padding: 0.375rem 0; border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-drobny, 8px); background: none; color: var(--fg-muted, hsl(334 12% 42%)); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.katalog__davka:hover, .katalog__davka:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); color: var(--c-bordo, hsl(334 45% 26%)); background: hsl(36 40% 97%); }

.katalog__prazdno { padding: 3rem 0; font-size: 1rem; color: var(--fg-muted, hsl(334 12% 42%)); }

/* --- Košík po boku --- */
/* Panel je sloupec: titulek a souhrn drží na místě, odroluje se jen seznam
   položek. Bez toho zmizí celková cena z dohledu, jakmile je v košíku deset vín
   a k tomu obaly — a právě cena je to, kvůli čemu se do panelu kouká. */
.katalog__panel {
  position: sticky; top: 1.5rem;
  background: var(--bg-karta, hsl(0 0% 100%));
  border-radius: var(--r-karta, 16px);
  padding: 1.5rem;
  box-shadow: var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
}
.katalog__paneltitul { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 1.25rem; flex: none; }
.katalog__seznam {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Místo pro fokusový obrys u krajních řádků, aby ho scroll neuřízl. */
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  scrollbar-width: thin;
}
.katalog__paticka { flex: none; }
.katalog__skupina { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted, hsl(334 12% 42%)); margin: 1rem 0 0.75rem; }
.katalog__skupina:first-child { margin-top: 0; }

/* Panel je úzký, tak v klidu ukazuje jen název, kusy a cenu. Editace je vzácnější
   akce — řádek si pro ni udělá místo až po kliknutí. Otevřený je vždy nejvýš
   jeden. Řádek je button, takže Enter i mezerník fungují. */
.katalog__polozka { border-radius: var(--r-ovladani, 10px); margin: 0 -0.5rem; transition: background-color 0.18s ease; }
.katalog__polozka--otevreno { background: hsl(36 40% 97%); }
.katalog__radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 0.875rem;
  gap: 0.125rem 0.625rem;
  align-items: baseline;
  width: 100%;
  padding: 0.625rem 0.5rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: inherit;
  text-align: left;
  border-radius: var(--r-ovladani, 10px);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.katalog__radek:hover { background: hsl(36 40% 97%); }
.katalog__radek:focus-visible { outline-offset: -2px; }
.katalog__nazevpolozky { min-width: 0; overflow-wrap: anywhere; }
.katalog__castka { font-variant-numeric: tabular-nums; white-space: nowrap; }
.katalog__kusy { grid-column: 1 / -1; font-size: 0.75rem; color: var(--fg-muted, hsl(334 12% 42%)); }
.katalog__sipka { width: 0.875rem; height: 0.875rem; align-self: center; opacity: 0; color: var(--fg-muted, hsl(334 12% 42%)); transition: opacity 0.18s ease, transform 0.18s ease; }
.katalog__radek:hover .katalog__sipka { opacity: 1; }
.katalog__polozka:focus-within .katalog__sipka { opacity: 1; }
.katalog__polozka--otevreno .katalog__sipka { opacity: 1; transform: rotate(180deg); }
/* Bez myši se nápověda nemá kde odhalit — šipka je vidět rovnou. */
@media (hover: none) { .katalog__sipka { opacity: 1; } }

/* Rozbalení přes grid-template-rows z 0fr na 1fr. `visibility` navíc vyřadí
   zavřenou editaci z pořadí tabulátoru, aby klávesnice neskákala naslepo. */
.katalog__editace { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.18s ease; }
.katalog__polozka--otevreno .katalog__editace { grid-template-rows: 1fr; }
.katalog__editvnitrek { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.18s; }
.katalog__polozka--otevreno .katalog__editvnitrek { visibility: visible; transition-delay: 0s; }
.katalog__editobsah { padding: 0.25rem 0.5rem 0.875rem; display: grid; gap: 0.625rem; }
.katalog__ovladani { display: flex; align-items: center; gap: 0.5rem; }
.katalog__stepper { display: flex; align-items: center; border-radius: var(--r-drobny, 8px); background: hsl(340 24% 93%); }
.katalog__stepkrok { font: inherit; font-size: 1rem; line-height: 1; width: 1.875rem; height: 1.875rem; border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); cursor: pointer; border-radius: var(--r-drobny, 8px); transition: background-color 0.15s ease; }
.katalog__stepkrok:hover, .katalog__stepkrok:focus-visible { background: hsl(340 30% 87%); }
.katalog__stepks { font: inherit; font-size: 0.8125rem; width: 3rem; text-align: center; border: none; background: none; color: inherit; font-variant-numeric: tabular-nums; padding: 0; }
.katalog__odebrat { font: inherit; font-size: 0.75rem; background: none; border: none; margin-left: auto; padding: 0.375rem 0.5rem; color: var(--fg-muted, hsl(334 12% 42%)); cursor: pointer; border-radius: var(--r-drobny, 8px); transition: color 0.15s ease, background-color 0.15s ease; }
.katalog__odebrat:hover, .katalog__odebrat:focus-visible { color: var(--c-akce, hsl(345 62% 36%)); background: hsl(345 35% 95%); }
.katalog__vypocet { font-size: 0.75rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0; font-variant-numeric: tabular-nums; }

.katalog__nevybrano { font-size: 0.875rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.5rem; }
.katalog__chybi { background: hsl(345 35% 95%); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; font-size: 0.8125rem; line-height: 1.6; }
.katalog__chybi b { display: block; margin-bottom: 0.25rem; }
.katalog__dopln { font: inherit; font-size: 0.8125rem; line-height: 1.4; font-weight: 500; width: 100%; margin-top: 0.5rem; padding: 0.5rem; border: none; border-radius: var(--r-ovladani, 10px); background: var(--c-akce, hsl(345 62% 36%)); color: hsl(36 40% 97%); cursor: pointer; transition: background-color 0.15s ease; }
.katalog__dopln:hover, .katalog__dopln:focus-visible { background: var(--c-akce-tmava, hsl(345 62% 30%)); }
.katalog__celkem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--c-linka, hsl(334 12% 89%)); }
.katalog__celkem b { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.katalog__doprava { font-size: 0.75rem; line-height: 1.6; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.25rem; }
.katalog__doobjednavky { display: block; text-align: center; font-size: 0.9375rem; font-weight: 500; padding: 0.875rem; background: var(--c-bordo, hsl(334 45% 26%)); color: hsl(36 40% 97%); text-decoration: none; border-radius: var(--r-ovladani, 10px); transition: background-color 0.15s ease; }
.katalog__doobjednavky:hover, .katalog__doobjednavky:focus-visible { background: var(--c-bordo-tmava, hsl(334 45% 20%)); }

/* Pod 1080 px se panel nemá kam postavit vedle mřížky a nad ní by zabral celou
   první obrazovku. Schová se — stav košíku hlásí odznak v hlavičce a počty jsou
   stejně vidět přímo na kartách. */
@media (max-width: 1080px) {
  .katalog__obal { grid-template-columns: 1fr; gap: 2rem; }
  .katalog__panel { display: none; }
}
@media (max-width: 900px) { .katalog { padding: 0 1.5rem 3rem; } .katalog__mrizka { gap: 1.5rem; } }

/* --- Úzké displeje -------------------------------------------------------
 * Dvě lahve vedle sebe musí vydržet až do nejmenších šířek. Vedení na tom
 * trvá: při rychlém výběru je lepší vidět dvě vína najednou než jedno velké.
 * Místo se bere z mezer, odsazení karty a velikostí písma — počet sloupců
 * zůstává na mřížce, dokud to jde.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
  .katalog { padding: 0 1rem 2.5rem; }
  .katalog__mrizka { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
  .katalog__kus { padding: 1rem; }
  .katalog__obrazek { margin-bottom: 0.875rem; }
  .katalog__nazev { font-size: 1rem; }
  .katalog__meta { font-size: 0.75rem; margin-bottom: 0.875rem; }
  .katalog__cena { font-size: 1.125rem; }
  .katalog__medaile { width: 2.75rem; }
}

/* Pod 400 px by si mřížka sama vynutila jeden sloupec, protože se dvě stopy
   po 10 rem nevejdou. Dva sloupce se tu proto předepíšou natvrdo a karta se
   ještě o kus stáhne. */
@media (max-width: 400px) {
  .katalog { padding: 0 0.75rem 2rem; }
  .katalog__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .katalog__kus { padding: 0.75rem; border-radius: 12px; }
  .katalog__davky { gap: 0.25rem; }
  .katalog__davka { font-size: 0.6875rem; padding: 0.3125rem 0; }
  /* Jednotka „ks“ by na úzké kartě překrývala počet; počet vstupu má aria-label. */
  .katalog__jednotka { display: none; }
  .katalog__medaile { width: 2.25rem; }
}