/* ══════════════════════════════════════════════════════════
   Tlačítka „Do košíku“ — nahrazuje kosik_new.gif a kosik.gif
   Zapoj až za global3.css, aby přebilo .button / .small-button
   ══════════════════════════════════════════════════════════ */

.kosik{
  --kosik-cerv:    #d60a15;   /* stejná červená jako menu */
  --kosik-cerv-tm: #a80811;

  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; isolation:isolate;
  border:0; padding:0; margin:0; cursor:pointer;
  text-decoration:none; vertical-align:middle;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:#fff; background:var(--kosik-cerv); border-radius:8px;
  transition:background .18s ease, box-shadow .18s ease, transform .16s ease;
}

/* prebiji globalni pravidlo  a {color:#000}  z global3.css */
.kosik,
.kosik:link,
.kosik:visited,
.kosik:hover,
.kosik:active{ color:#fff; text-decoration:none; }

.kosik svg{
  display:block; flex:0 0 auto;
  transition:transform .26s cubic-bezier(.34,1.4,.64,1);
}

/* sikmy odlesk, ktery pri najeti prejede zleva doprava */
.kosik::before{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:55%; z-index:-1;
  background:rgba(255,255,255,.22); transform:skewX(-18deg);
  transition:left .42s cubic-bezier(.4,0,.2,1);
}

.kosik:hover,
.kosik:focus-visible{
  background:var(--kosik-cerv-tm);
  box-shadow:0 4px 13px rgba(214,10,21,.34);
}
.kosik:hover::before,
.kosik:focus-visible::before{ left:115%; }

/* vozik se rozjede doprava */
.kosik:hover svg,
.kosik:focus-visible svg{ transform:translateX(5px); }

.kosik:active{ transform:translateY(1px) scale(.985); }
.kosik:focus-visible{ outline:2px solid var(--kosik-cerv); outline-offset:2px; }


/* ── velké — detail produktu (bývalo kosik_new.gif 97×73) ── */
.kosik--velke{
  flex-direction:column; gap:3px;
  width:97px; height:73px; font-size:10.5px; line-height:1.1;
}
.kosik--velke svg{ width:21px; height:21px; }

/* ── střední — obrázkový výpis (bývalo .button / .small-button) ── */
.kosik--stredni{
  gap:6px; height:32px; padding:0 13px;
  font-size:11px; line-height:1; border-radius:7px;
}
.kosik--stredni svg{ width:16px; height:16px; }

/* ── malé — řádkový výpis (bývalo kosik.gif 18×18) ── */
.kosik--ikona{ width:26px; height:26px; border-radius:6px; }
.kosik--ikona svg{ width:15px; height:15px; }
.kosik--ikona::before{ display:none; }      /* odlesk je tu příliš malý */
.kosik--ikona:hover{ box-shadow:0 2px 7px rgba(214,10,21,.4); }


/* dotyková zařízení — hover efekty se tam chovají nespolehlivě */
@media (hover:none){ .kosik::before{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .kosik, .kosik::before, .kosik svg{ transition:none; }
}


/* ══════════════════════════════════════════════════════════
   Ikony dostupnosti — nahrazuje skladem / naceste / obj /
   neskladem.gif (17×17)
   ══════════════════════════════════════════════════════════ */

.dost{
  display:inline-block;
  vertical-align:middle;
  width:20px; height:20px;
}

/* větší varianta, kdyby se hodila jinde než v tabulce */
.dost--velka{ width:26px; height:26px; }


/* ══════════════════════════════════════════════════════════
   Zarovnání buněk v řádkovém výpisu
   ──────────────────────────────────────────────────────────
   global3.css má  table {vertical-align:top}  a  td {font:13px/21px},
   takže se obsah buněk lepil nahoru a 21px řádkový box roztahoval
   řádek do výšky. Tohle to srovná.
   ══════════════════════════════════════════════════════════ */

.tablerowdark1,
.tablerowlight1{ vertical-align:middle; }

.kosikcell,
.dostcell{
  vertical-align:middle;
  text-align:center;
  line-height:0;          /* zruší vliv textového řádku na výšku buňky */
  white-space:nowrap;
  padding:2px 4px;
}