/* ============================================================
   Mobilni responzivita - "faze 2"
   ------------------------------------------------------------
   Puvodni layout (global3.css) pocita s absolutne pozicovanym
   280px sirokym postrannim menu (#navalpha) a hlavnim obsahem
   posunutym o 287px zprava (.content { margin-left: 287px }).
   Bez viewport tagu to mobilni prohlizece jen zmensily jako celek,
   takze to "fungovalo" - jen bylo malicke. S viewport tagem (SEO
   oprava) uz prohlizec sirku respektuje doslova, a hlavni obsah tak
   zbyva jen ~90px siroky sloupecek.
   Toto pravidlo to na mensich obrazovkach preskladame pod sebe
   a odstranime pevne odsazeni, aniz by se cokoliv menilo na
   desktopu (vse je schovane v @media pravidlu).
   ============================================================ */

/* Hamburger tlacitko a "Kategorie" prepinac - na desktopu vzdy schovane,
   viditelne az uvnitr @media pravidla nize */
.rk-nav-toggle, .rk-cat-toggle {
  display: none;
}

@media (max-width: 900px) {

  /* Uvodni velky obrazek (395px) na mobilu jen zabira misto - pryc */
  #top-box {
    display: none !important;
  }

  /* Hamburger tlacitko vlevo v cervene liste */
  .rk-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.18);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
  }
  #menu-box {
    position: relative;
    padding-left: 46px;
    box-sizing: border-box;
  }

  /* Horni navigace (INFORMACE O NAS / DODACI PODMINKY / ...) - schovana,
     dokud se nerozklikne hamburger. Po rozbaleni jde o cistou svisly
     seznam - odstranuje se desktopovy border-right (delal divne svisle
     carky) a inline padding-top:15px z lista.php (proto !important). */
  #menu li {
    display: none;
    width: 100%;
    box-sizing: border-box;
  }
  /* Puvodne melo #menu.is-open sve pozadi (rgba(0,0,0,0.12)) na celem <ul>,
     ktery ale obsahuje i logo (je to <a> primo v #menu, ne v <li>) - takze
     za logem byl videt obdelnikovy "pruh" jinou barvou. Pozadi ted davame
     jen jednotlivym <li> polozkam, logo zustava bez pozadi. */
  #menu.is-open {
    flex-direction: column;
    align-items: stretch;
    border-radius: 8px;
    padding: 4px 0 4px 0 !important;
    margin-top: 8px;
  }
  #menu.is-open li {
    display: block;
    padding-top: 0 !important;
    width: 100%;
    background: rgba(0,0,0,0.12);
  }
  #menu.is-open li:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  #menu.is-open li:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  #menu.is-open li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding: 13px 16px;
    line-height: normal;
  }
  #menu.is-open li:last-child a {
    border-bottom: none;
  }

  /* Prepinac kategorii - misto rovnou vypsaneho dlouheho seznamu */
  .rk-cat-toggle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 10px 14px;
    background: #f5f5f5;
    border: 1px solid #dedddd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    margin: 10px 0;
  }
  /* Ikona (stejny styl jako hamburger nahore) - aby bylo na prvni pohled
     jasne, ze jde o rozbalovaci nabidku, ne jen staticky nadpis */
  .rk-cat-toggle .fa-bars {
    margin-right: 6px;
  }

  /* Postranni menu (kategorie) - z absolutniho pozicovani na normalni tok,
     aby se zaradilo NAD hlavni obsah misto prekryvani, a schovane dokud
     se nerozklikne prepinac vyse */
  #navalpha {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    box-sizing: border-box;
    margin-bottom: 15px;
    display: none;
  }
  #navalpha.is-open {
    display: block;
  }

  /* Dalsi absolutne pozicovane bloky ze stareho desktopoveho layoutu */
  #navhledej, #nav3 {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    box-sizing: border-box;
  }

  /* Hlavni obsah a paticka - odstranit pevne odsazeni zleva, ktere
     pocitalo s mistem pro 280px sirokou postranni listu */
  .content, .spodek {
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Horni navigace (INFORMACE O NAS / DODACI PODMINKY / ...) - povolit
     zalamovani radku misto plovouciho preteceni mimo obrazovku.
     #menu je <ul> a prohlizec mu defaultne dava padding-left:40px
     (odsazeni pro odrazky) - na desktopu si toho nikdo nevsiml (dost
     volneho mista), na 375px obrazovce to zpusobovalo presne 40px
     horizontalni pretečení cele stranky. */
  #menu {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-left: 0;
  }
  #menu li {
    float: none;
  }
  #menu li a {
    font-size: 14px;
    padding: 0 6px;
    line-height: 34px;
  }

  /* Obrazky a tabulky nesmi byt sirsi nez obrazovka - stare sablony
     casto pouzivaji pevne HTML atributy width="..." */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  table {
    max-width: 100% !important;
  }
  table[width] {
    width: 100% !important;
  }
  td[width] {
    width: auto !important;
  }

  /* Bezpecnostni pojistka proti hodorizontalnimu preteceni - JEN na body,
     ne na html! overflow-x:hidden primo na <html> je znamy problem na
     iOS Safari - umi rozbit nativni momentum/rubber-band scrollovani cele
     stranky (stranka jde spatne/vubec odrolovat dolu, "gumovy" pocit).
     Testovanim (scrollWidth vs clientWidth) jsme overili, ze po opravach
     vyse uz nic fakticky nepreteka, takze tohle je jen doplnkova pojistka. */
  body {
    overflow-x: hidden;
  }

  /* ============================================================
     Kosik - "Prehled objednavky" tabulka na mobilu jako karty
     ------------------------------------------------------------
     Puvodni tabulka ma 6 sloupcu (Mnozstvi/Nazev/2x cena/Celkem/Smazat) -
     na 375px sirokou obrazovku se nevejde, nazev produktu se lame na
     tenky svisly sloupecek. Klasicky trik "tabulka -> karty": kazdy
     radek se stane blokem, bunky se serad pod sebe s popiskem vlevo
     (z data-label atributu pridaneho v kosik.php).
     ============================================================ */
  .rk-cart tr.rk-cart-head {
    display: none !important;
  }
  .rk-cart, .rk-cart tbody, .rk-cart tr, .rk-cart td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .rk-cart tr {
    border: 1px solid #dedddd;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
  }
  .rk-cart td {
    border-bottom: none !important;
    text-align: right;
    padding: 4px 0 4px 46% !important;
    position: relative;
    min-height: 20px;
  }
  .rk-cart td[data-label]:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 4px;
    width: 44%;
    text-align: left;
    font-size: 11px;
    color: #777;
    font-weight: bold;
  }
  .rk-cart td.rk-nazev {
    text-align: left;
    padding-left: 0 !important;
    font-weight: bold;
    margin-bottom: 6px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .rk-cart td.rk-remove-cell {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 !important;
    width: auto !important;
    min-height: 0;
  }
  /* Tlacitko "+" (navyseni mnozstvi) je pravym okrajem sveho radku
     (rk-qty-wrap ma justify-content:flex-end) presne v miste, kam
     rk-remove-cell (krizek na smazani, viz vyse) absolutne pozicuje
     sam sebe do praveho horniho rohu karty - prekryvaly se. Rezervujeme
     mnozstevnimu bloku misto napravo, aby na krizek nezasahoval. */
  .rk-cart .rk-qty-wrap {
    padding-right: 30px;
  }
  .rk-foot {
    flex-direction: column;
  }
  .rk-sumbox, .rk-sum-row, .rk-sum-total {
    justify-content: space-between !important;
  }

  /* ============================================================
     Detail produktu - hlavni obrazek + tlacitko Do kosiku + srdicko
     (main.php) byly na mobilu namacknute vedle sebe a malicke.
     Pricina: cela tahle cast je (kvuli chybejicim/nepresnym </tr>
     v puvodnim PHP) JEDEN radek tabulky (table.bordereddiv) se
     CTYRMI bunkami vedle sebe - obrazek | tlacitko Do kosiku |
     srdicko | prazdny distancni sloupec. Na desktopu to funguje
     (dost mista), na 375px displeji se vsechny 4 sloupce vecpaly
     do jednoho uzkeho radku. V main.php jsme kazde bunce pridali
     vlastni tridu (rk-gallery-td / rk-buy-td / rk-heart-td /
     rk-spacer-td), aby sla cilene prerovnat: radek tabulky ->
     flex s wrapem, obrazek dostane cely radek pro sebe (flex-basis
     100%), tlacitko+srdicko se pak zabali na dalsi radek vedle
     sebe, distancni sloupec je na mobilu k nicemu - schovany.
     POZOR: selektor MUSI byt primy potomek (">"), ne obecny potomek
     (mezera) - uvnitr teto bunky je jeste VNORENA dalsi tabulka
     (specifikace Nazev/Cena/Dostupnost...) a obecny selektor by
     rozbil i JEJI radky/bunky na flex (presne tohle se stalo a
     rozsypalo to tabulku se specifikacemi na mobilu). */
  .product-gallery-table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .product-gallery-table > tbody > tr > td {
    box-sizing: border-box;
  }
  .rk-gallery-td {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .rk-buy-td {
    flex: 1 1 auto;
  }
  .rk-heart-td {
    flex: 0 0 auto;
  }
  .rk-spacer-td {
    display: none !important;
  }
  .product-gallery {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 !important;
  }
  .main-image img {
    width: 92% !important;
  }
  .thumbnail-container {
    width: 100%;
    justify-content: center;
  }

  /* ============================================================
     Detail produktu - hlavicka (nazev produktu + kategorie-odznak +
     tlacitko Zpet). Puvodne flex radek s justify-content:space-
     between a BEZ wrapu - na 375px displeji se nazev produktu
     (h1) tisnil o misto s cervenym odznakem kategorie a tlacitkem
     Zpet, takze byl zbytecne maly a zalamovany (viz main.php -
     tridy rk-product-header/-title/-crumbs pridane primo u divu,
     aby se dalo cilit bez zasahu do inline stylu). Na mobilu:
     hlavicka se preklopi do sloupce - nazev produktu nahore fontem
     dost velkym, aby byl jasne dominantni, kategorie+zpet pod nim
     jako mensi, druhorady radek odkazu (pouzivaji vsechny stejny
     inline styl padding/font-size, ktery musime prebit !important). */
  .rk-product-header-outer {
    margin: 10px !important;
  }
  .rk-product-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 8px;
  }
  .rk-product-title {
    width: 100%;
  }
  .rk-product-title h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .rk-product-crumbs {
    width: 100%;
    text-align: left !important;
  }
  .rk-product-crumbs a {
    padding: 5px 10px !important;
    font-size: 11px !important;
    margin: 0 6px 6px 0 !important;
  }
}

@media (max-width: 480px) {
  #menu li a {
    font-size: 12px;
    padding: 0 4px;
  }
}