/* Primavino — „moja vinotéka“ (košík), pokladňa a dopyty. Nadstavba nad styles.css.
 *
 * Nič sa tu nepredefinuje: preberajú sa značkové premenné (--garnet, --chalk,
 * --f-display…), takže zásuvka vyzerá ako zvyšok webu aj po zmene témy
 * (`html[data-mode="chalk"]`). Tmavá aj svetlá podoba fungujú bez druhej sady
 * farieb — preto sú tu farby vždy z premennej, nikdy natvrdo.
 *
 * Panel má pevnú šírku na veľkej obrazovke a celú šírku na telefóne. Vnútro
 * roluje samo (`overflow:auto`), aby dlhá pokladňa neposúvala stránku pod ním.
 *
 * Odsadenie je v pixeloch, NIE v `vw` ako vo zvyšku webu. `5vw` sa počíta zo
 * šírky okna, nie panela: na širokej obrazovke by z 460 px panela zjedlo
 * 144 px a názov vína by sa lámal na štyri riadky. (Zistené meraním 14. 9. 2026.)
 */

.kos-tl { position: relative; height: 44px; padding: 0 20px; }
.kos-pocet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px;
  border-radius: 10px; background: rgba(255,255,255,.22);
  font: 500 11px/1 var(--f-mono); letter-spacing: .06em;
}

/* Zámok rolovania stránky pod otvorenou zásuvkou. `position:fixed` sa tu
   zámerne nepoužíva — na iOS by stránka po zavretí skočila na začiatok. */
body.kos-zamknute { overflow: hidden; }

.kos-vrstva { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.kos-vrstva.otvorena { visibility: visible; }
.kos-pozadie {
  position: absolute; inset: 0; background: rgba(10,5,8,.62);
  opacity: 0; transition: opacity .3s var(--ease);
}
.kos-vrstva.otvorena .kos-pozadie { opacity: 1; }

.kos-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .34s var(--ease-soft);
}
.kos-vrstva.otvorena .kos-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kos-panel, .kos-pozadie { transition: none; }
}

.kos-hlava {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 22px 24px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.kos-hlava h2 { font-size: clamp(22px, 3vw, 30px); }
.kos-x { font-size: 30px; line-height: 1; color: var(--fg-2); padding: 0 4px; }
.kos-x:hover { color: var(--fg); }

.kos-telo { padding: 18px 24px 32px; overflow: auto; flex: 1 1 auto; }
.kos-telo > .btn, .kos-telo > form .btn { width: 100%; margin-top: 18px; }
.kos-telo > .btn-text, .kos-telo form .btn-text { margin-top: 14px; }

.kos-prazdny, .kos-hotovo { color: var(--fg-2); margin-bottom: 6px; }
.kos-hotovo { color: var(--fg); font-size: 19px; }
.kos-pozn { color: var(--fg-2); font-size: 13px; line-height: 1.5; margin-top: 10px; }
.kos-chyba { color: var(--garnet-hi); font-size: 14px; margin-top: 12px; }

/* ------------------------------------------- prah dopravy zdarma vo vinotéke */
/* Bola to šedá veta v poznámkach pod súčtom — presne tá informácia, kvôli
 * ktorej si zákazník pridá ešte jednu fľašu, sa strácala. Teraz má vlastný
 * pruh a rovno vedľa aj cestu späť do ponuky. */
.kos-prah {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; padding: 13px 16px;
  border: 1px solid var(--garnet); border-left-width: 3px;
  background: rgba(122, 33, 56, .18);
}
/* Text sa zalomí, tlačidlo zostane vedľa neho — o to tu ide. */
.kos-prah-text {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 14px; line-height: 1.45; color: var(--fg);
}
/* Chýbajúca suma je to jediné číslo, kvôli ktorému sa pruh číta — má byť
   vidieť na prvý pohľad. Farba je `--accent`, nie `--straw`: slamová je
   svetlá krémová a v svetlej téme (`chalk`) splývala s podkladom. */
.kos-prah-text b {
  font-weight: 500; font-family: var(--f-mono); font-size: 17px;
  letter-spacing: .02em; color: var(--accent); white-space: nowrap;
}
.kos-prah-viac {
  flex: none; background: none; border: 1px solid var(--garnet-hi);
  color: var(--fg); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 12px; cursor: pointer; transition: background .25s, border-color .25s;
}
.kos-prah-viac:hover, .kos-prah-viac:focus-visible {
  background: var(--garnet); border-color: var(--garnet);
}
/* Splnený prah je jediné miesto v zásuvke, kde sa hlási dobrá správa —
   ide preto do zelenej, aby sa nedal pomýliť s upozornením. Odtieň je tlmený
   (machová, nie signálna), aby nevypadol z palety vína; v svetlej téme je
   tmavší, inak by na krémovom podklade nebol čitateľný.
   Merané 21. 9. 2026: tmavá 7,4 : 1, svetlá 5,5 : 1. */
.kos-prah { --zelena: #7FB68C; }
html[data-mode="chalk"] .kos-prah { --zelena: #2F6B45; }
.kos-prah.splneny { border-color: var(--zelena); background: rgba(127, 182, 140, .12); }
.kos-prah.splneny .kos-prah-text { color: var(--zelena); }
.kos-prah.splneny .kos-prah-viac { border-color: rgba(127, 182, 140, .55); }
.kos-prah.splneny .kos-prah-viac:hover,
.kos-prah.splneny .kos-prah-viac:focus-visible {
  background: rgba(127, 182, 140, .18); border-color: var(--zelena); color: var(--fg);
}
html[data-mode="chalk"] .kos-prah.splneny { background: rgba(47, 107, 69, .10); }
html[data-mode="chalk"] .kos-prah.splneny .kos-prah-viac { border-color: rgba(47, 107, 69, .55); }
html[data-mode="chalk"] .kos-prah.splneny .kos-prah-viac:hover,
html[data-mode="chalk"] .kos-prah.splneny .kos-prah-viac:focus-visible {
  background: rgba(47, 107, 69, .14); border-color: var(--zelena);
}
/* Tlačidlo „Pridať ďalšie" má v svetlej téme text na priesvitnom podklade —
   po prejdení sa podklad vyplní granátovou, text preto musí zosvetlieť. */
html[data-mode="chalk"] .kos-prah-viac:hover, html[data-mode="chalk"] .kos-prah-viac:focus-visible { color: #F1E9DD; }
.kos-prah.splneny .kos-prah-viac { border-color: rgba(228, 214, 176, .5); }
.kos-prah.splneny .kos-prah-viac:hover, .kos-prah.splneny .kos-prah-viac:focus-visible {
  background: rgba(228, 214, 176, .18); border-color: var(--straw);
}

@media (max-width: 460px) {
  .kos-prah { flex-wrap: wrap; padding: 12px 14px; }
  .kos-prah-viac { width: 100%; text-align: center; }
}

/* --------------------------------------------- odporúčanie v prázdnej vinotéke */
.kos-tip {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px;
  margin-top: 18px; padding: 16px; border: 1px solid var(--line);
  background: rgba(241, 233, 221, .03);
}
.kos-tip > img, .kos-tip > .kos-bez {
  width: 92px; height: 210px; object-fit: contain; align-self: center;
}
.kos-tip-text { min-width: 0; display: flex; flex-direction: column; }
.kos-tip-uvod {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2); margin: 0 0 8px;
}
.kos-tip-text b { font-weight: 400; font-size: 17px; line-height: 1.25; }
.kos-tip-fakt {
  font-size: 12px; letter-spacing: .06em; color: var(--fg-2); margin-top: 6px;
}
.kos-tip-preco {
  font-size: 13px; line-height: 1.55; color: var(--fg-2); margin: 10px 0 0;
}
.kos-telo > .kos-tip .btn { width: 100%; margin-top: 14px; }

@media (max-width: 460px) {
  .kos-tip { grid-template-columns: 68px 1fr; gap: 12px; padding: 14px; }
  .kos-tip > img, .kos-tip > .kos-bez { width: 68px; height: 160px; }
  .kos-tip-preco { display: none; }
}

/* ---------------------------------------------------------- zoznam vo vinotéke */
.kos-zoznam { list-style: none; margin: 0; padding: 0; }
.kos-zoznam li {
  display: grid; grid-template-columns: 52px 1fr auto auto 24px;
  align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.kos-zoznam img, .kos-bez { width: 52px; height: 52px; object-fit: contain; }
.kos-zoznam b { display: block; font-weight: 400; font-size: 15px; line-height: 1.3; }
.kos-cena, .kos-spolu { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; }
.kos-cena { color: var(--fg-2); }

/* Každý `li` je vlastná mriežka, takže stĺpec so šírkou `auto` si každý riadok
   vymeria sám: „9,30 €" je o 8 px užšie než „30,75 €" a celá dvojica −1+ sa
   v tom riadku posunie. Pri jednej položke to nevidno, pri druhej už áno.
   Preto má súčet riadka pevné minimum — stĺpce potom sedia nad sebou.
   (Zmerané 21. 9. 2026: ľavý okraj .kos-mn 1230 px v dvoch riadkoch, 1238 v treťom.) */
.kos-zoznam .kos-spolu { min-width: 74px; text-align: right; }

/* Množstvo je jediné miesto v zásuvke, kde zákazník mení objednávku. Nie je
   preto decentné ako zvyšok drobného textu, ale čitateľné: ohraničená dvojica
   tlačidiel s číslom medzi nimi. */
.kos-mn {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--glass-bg);
  outline: 2px solid transparent; outline-offset: 2px;
}
.kos-mn button {
  width: 30px; height: 30px; border: 0; color: var(--fg); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.kos-mn button:hover { background: var(--accent); color: #fff; }
.kos-mn span {
  min-width: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 13px; color: var(--fg);
}

/* Čerstvo pridaná (alebo práve zmenená) položka sa raz zvýrazní, aby bolo
   vidieť, kde sa množstvo mení. Trieda sa pridáva zo skriptu po vykreslení. */
.kos-mn.je-nova { animation: kos-mn-puls 1.8s ease-out 1 both; }
.kos-mn.je-nova span { animation: kos-mn-cislo 1.8s ease-out 1 both; }
@keyframes kos-mn-puls {
  0%, 15% { border-color: var(--accent); outline-color: var(--accent); outline-offset: 2px; }
  70%     { border-color: var(--accent); outline-color: transparent; outline-offset: 8px; }
  100%    { border-color: var(--line);   outline-color: transparent; outline-offset: 8px; }
}
@keyframes kos-mn-cislo {
  0%, 70% { color: var(--accent); }
  100%    { color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
  .kos-mn.je-nova, .kos-mn.je-nova span { animation: none; }
  .kos-mn.je-nova { border-color: var(--accent); }
  .kos-mn.je-nova span { color: var(--accent); }
}
.kos-prec { color: var(--fg-dim); font-size: 20px; line-height: 1; }
.kos-prec:hover { color: var(--accent); }

.kos-sucet {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.kos-sucet b { font-weight: 400; font-family: var(--f-mono); font-size: 14px; }
.kos-sucet.kos-spolu-r b { font-family: var(--f-display); font-size: 22px; }

/* ------------------------------------------------------------------ formuláre */
.kos-pole { margin-top: 14px; }
.kos-pole label {
  display: block; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 6px;
}
.kos-pole input, .kos-pole textarea {
  width: 100%; padding: 11px 12px; font: 300 16px/1.4 var(--f-body);
  color: var(--fg); background: var(--glass-bg);
  border: 1px solid var(--line); border-radius: 0;
}
.kos-pole input:focus, .kos-pole textarea:focus { border-color: var(--accent); outline: none; }
.kos-dvojica { display: grid; grid-template-columns: 1fr 110px; gap: 12px; }
.kos-dvojica .kos-pole { margin-top: 14px; }

.kos-skupina { border: 0; padding: 0; margin: 22px 0 0; }
.kos-skupina legend {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-2); padding: 0 0 6px;
}
.kos-volba {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.kos-volba em { display: block; font-style: normal; font-size: 12px; color: var(--fg-2); }
.kos-volba b { font-weight: 400; font-family: var(--f-mono); font-size: 12px; }
.kos-suhlas {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; margin-top: 20px; font-size: 14px; color: var(--fg-2);
  line-height: 1.5; cursor: pointer;
}

/* Členstvo Primavino — súhlas s vysvetlením, čo z neho zákazník má. */
.kos-clenstvo {
  margin-top: 14px; padding: 13px 16px 14px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--garnet-hi);
  background: rgba(241, 233, 221, .03);
}
.kos-clenstvo b { display: block; font-weight: 400; color: var(--fg); font-size: 15px; }
.kos-clenstvo em {
  display: block; font-style: normal; margin-top: 5px;
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}
.kos-clenstvo-ok {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--straw); background: rgba(228, 214, 176, .1);
  font-size: 13px; line-height: 1.55; color: var(--fg);
}

/* ------------------------------------ alokované fľaše a vypredané v paneli vína */
.panel-alokacia {
  margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--accent);
  font-size: 14px; color: var(--fg-2);
}
.btn.vypredane { background: var(--line); color: var(--fg-2); pointer-events: none; }

/* ------------------------------------- odkazy na nástroje pri kontaktnej sekcii */
/* „Čo ešte vieme" — služby, ktoré sa nedajú vybrať z katalógu (poradenstvo,
 * svadba, firemné predplatné, degustačné sety). Blok dopĺňa `kosik.js` pod
 * kontaktný formulár; adresy aj texty chodia z rozhrania.
 *
 * Predtým to bol štvorstĺpcový prúžok bez medzier, v ktorom text jednej služby
 * nadväzoval na druhú a na nič sa nedalo kliknúť inde než na nadpis. Teraz je
 * to mriežka dlaždíc s rímskym číslom, ako kritériá prevádzok a stupne
 * firemných darov — rovnaký jazyk, nie štvrtý spôsob, ako ukázať zoznam.
 */
.sluzby-blok { margin-top: clamp(44px, 6vw, 80px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.sluzby-hlava { max-width: 62ch; }
.sluzby-blok h3 {
  font-family: var(--f-display); font-weight: 400; margin: 12px 0 0;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1;
}
.sluzby-uvod { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); }

.sluzby-mriezka { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 600px) { .sluzby-mriezka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sluzby-mriezka { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.sluzby-mriezka a {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%;
  padding: 22px 20px 52px; border: 1px solid var(--line);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.sluzby-mriezka a:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--glass-bg); }
.sluzby-mriezka a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sluzby-n { font-family: var(--f-display); font-size: 22px; line-height: 1; color: var(--accent); }
.sluzby-mriezka b {
  display: block; font-family: var(--f-display); font-weight: 400;
  font-size: 21px; line-height: 1.2; transition: color .25s var(--ease);
}
.sluzby-popis { display: block; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.sluzby-sip {
  position: absolute; left: 20px; bottom: 18px; font-size: 15px; color: var(--fg-dim);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.sluzby-mriezka a:hover b { color: var(--accent); }
.sluzby-mriezka a:hover .sluzby-sip { color: var(--accent); transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .sluzby-mriezka a, .sluzby-sip { transition: none; }
  .sluzby-mriezka a:hover { transform: none; }
}

/* Na telefóne sa päť stĺpcov nezmestí; riadok sa láme na dva a každá položka
   dostane miesto natvrdo — automatické umiestňovanie by pri piatich prvkoch
   a troch stĺpcoch rozhádzalo poradie. */
@media (max-width: 767px) {
  .kos-zoznam li { grid-template-columns: 44px 1fr auto; row-gap: 8px; }
  .kos-zoznam img, .kos-bez { width: 44px; height: 44px; grid-column: 1; grid-row: 1 / 3; }
  .kos-zoznam li > div:first-of-type { grid-column: 2; grid-row: 1; }
  .kos-prec { grid-column: 3; grid-row: 1; justify-self: end; }
  /* `justify-self` musí byť `start`: v mriežke by sa ohraničená dvojica
     roztiahla na celú šírku stĺpca (merané 219 px) a rám by visel v prázdne. */
  .kos-mn { grid-column: 2; grid-row: 2; justify-self: start; }
  .kos-spolu { grid-column: 3; grid-row: 2; text-align: right; }
}

/* ------------------------------------------- panel vína: množstvo a potvrdenie
 *
 * Dodaný web má v `index.html` označenie `.qty` / `.qty-btn` / `.qty-val`
 * a celý blok `#panel-added` (potvrdenie, odporúčanie someliéra, akcie), ale
 * v `styles.css` k nim NIE JE ani jedno pravidlo. Bez štýlu to nie je drobná
 * kozmetika: „−1+" splynie do troch znakov vedľa tlačidla, potvrdenie vykreslí
 * fajku ako čierny trojuholník cez pol panela a odporúčané fľaše sa zobrazia
 * v pôvodnej veľkosti — panel mal po pridaní vína 2 608 px (merané 21. 9. 2026).
 *
 * Panel je tmavý VŽDY, aj v svetlej téme (`.panel` má natvrdo `--lees`
 * a `#F1E9DD`), preto sa tu farby berú z rovnakej pevnej palety ako vo
 * `styles.css`, nie z premenných `--fg`/`--line`, ktoré sa v `chalk` prepnú.
 */
.qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid #3E2A34; border-radius: 2px; background: rgba(255,255,255,.05);
}
.qty-btn {
  width: 44px; height: 46px; border: 0; color: #F1E9DD; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.qty-btn:hover { background: var(--garnet); color: #fff; }
.qty-val {
  min-width: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-left: 1px solid #3E2A34; border-right: 1px solid #3E2A34;
  font-family: var(--f-mono); font-size: 15px; color: #F1E9DD; font-variant-numeric: tabular-nums;
}

.panel-added {
  flex: none; padding: 20px 28px 24px; border-top: 1px solid #3E2A34;
  max-height: 58vh; overflow-y: auto;
}
.added-head { display: flex; align-items: center; gap: 12px; }
.added-check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--garnet-hi); color: var(--garnet-hi);
  display: inline-grid; place-items: center;
}
.added-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
#added-name { display: block; font-family: var(--f-display); font-size: 19px; line-height: 1.25; }
.added-head .mono { display: block; margin-top: 3px; font-size: 10px; color: #B9AAB2; }
.added-som { margin: 18px 0 10px; font-size: 10px; color: #B9AAB2; }

.upsell { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.upsell button {
  width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  padding: 8px 10px; text-align: left; border: 1px solid #3E2A34; background: rgba(255,255,255,.04);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.upsell button:hover { border-color: var(--garnet-hi); background: rgba(255,255,255,.07); }
.upsell img { width: 44px; height: 54px; object-fit: contain; }
.upsell .un { display: block; font-size: 14px; line-height: 1.3; color: #F1E9DD; }
.upsell .up {
  display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #B9AAB2;
}
.upsell .uw { display: block; margin-top: 2px; font-size: 12px; font-style: italic; color: rgba(241,233,221,.5); }

.added-actions { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-top: 18px; }
.added-actions .btn { flex: 1; }
/* `.btn-text` berie farbu z `--fg`; v svetlej téme sa prepne na tmavú a na
   paneli, ktorý je tmavý vždy, by odkaz takmer zmizol. */
.added-actions .btn-text { color: #F1E9DD; }
.added-actions .btn-text::after { background: rgba(241,233,221,.42); }
.added-actions .btn-text:hover::after { background: var(--garnet-hi); }

@media (max-width: 767px) {
  .panel-added { padding: 16px 20px 20px; max-height: 50vh; }
  .added-actions { flex-wrap: wrap; }
  .added-actions .btn { flex: 1 1 100%; }
}

/* Balík „Víno s venovaním" — zabalený riadok s konečnou sumou, ktorý sa
   rozbalí na vína s cenami a na cenu venovania s taškou. `details` je natívne:
   funguje klávesnicou aj bez skriptu a čítačka ho prečíta ako rozbaľovací blok. */
.kos-bundle { border: 1px solid var(--line); background: var(--glass-bg); }
.kos-bundle > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 16px 16px 40px; cursor: pointer; position: relative; list-style: none;
}
.kos-bundle > summary::-webkit-details-marker { display: none; }
/* Vlastná šípka — natívny trojuholník nesedí do písma stránky. */
.kos-bundle > summary::before {
  content: ""; position: absolute; left: 17px; top: 50%; width: 7px; height: 7px;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: translateY(-70%) rotate(-45deg); transition: transform .25s var(--ease);
}
.kos-bundle[open] > summary::before { transform: translateY(-30%) rotate(45deg); }
.kos-bundle > summary:hover { background: rgba(255,255,255,.03); }
.kos-bundle > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kos-bundle-nazov { display: block; }
.kos-bundle-nazov .mono { display: block; font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.kos-bundle-nazov b { display: block; margin-top: 4px; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.kos-bundle-nazov em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--fg-2); line-height: 1.45; }
.kos-bundle-cena { font-family: var(--f-display); font-size: 24px; white-space: nowrap; }
/* Vnútro balíka je o dva rámy užšie než panel, takže stĺpec s názvom by sa
   pri pôvodnej mriežke lámal na štyri riadky. Fotka aj medzery sa preto
   vnútri zmenšujú. */
.kos-bundle-telo { padding: 0 12px 8px; border-top: 1px solid var(--line); }
.kos-bundle-telo .kos-zoznam li { grid-template-columns: 44px 1fr auto auto 20px; gap: 10px; }
.kos-bundle-telo .kos-zoznam img, .kos-bundle-telo .kos-bez { width: 44px; height: 44px; }
.kos-bundle-telo .kos-zoznam b { font-size: 14px; }
.kos-bundle-telo .kos-spolu { min-width: 66px; }
.kos-bundle-telo .kos-zoznam li:first-child { padding-top: 12px; }
.kos-bundle-telo .kos-sucet:last-child { border-bottom: 0; }

/* Oddiel s vínami, ktoré do darčeka nepatria. */
.kos-oddiel { margin: 22px 0 2px; font-size: 10px; letter-spacing: .14em; color: var(--fg-2); }
.kos-bundle-prazdny { padding: 14px 0 4px; }

/* Rozpis ceny pri tlačidle a nákup na firmu (25. 9. 2026) */
.kos-rekap { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.kos-rekap .kos-sucet:last-of-type { border-bottom: 0; }
.kos-rekap .kos-pozn { margin-top: 8px; }
.kos-na-firmu { margin-top: 16px; }
.kos-firma[hidden] { display: none; }
.kos-dvojica.kos-dvojica-rovna { grid-template-columns: 1fr 1fr; }
/* Suma na úhradu písmom čísel, nie Bodoni — v nej € vyzerá ako C a čiarka ako bodka. */
.kos-rekap .kos-sucet.kos-spolu-r span { font-weight: 500; color: var(--fg); }
.kos-rekap .kos-sucet.kos-spolu-r b { font-family: var(--f-mono); font-size: 20px; font-weight: 500; color: var(--fg); }
/* Samostatná fakturačná adresa firmy (25. 9. 2026) */
.kos-ina-fakt[hidden], .kos-fakt-adresa[hidden] { display: none; }
.kos-ina-fakt { margin-top: 14px; }
.kos-fakt-adresa { margin-top: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.kos-podnadpis { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2); margin: 14px 0 0; }

/* Odmietnutie tipov na víno v pokladni (26. 9. 2026) — vysvetlenie pod textom. */
.kos-ponuky { margin-top: 12px; }
.kos-ponuky em { display: block; font-style: normal; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--fg-2); }