/**
 * NejenHra - lepici lista na detailu produktu
 *
 * Vklada se do Editoru HTML kodu (hlavicka):
 *   <link rel="stylesheet" href="/user/documents/upload/RKupravy/detail-lista.css?v=2">
 * Pri kazde zmene bumpnout ?v=.
 *
 * POZOR: eshop ma DVE slozky RKupravy. Tenhle soubor patri do te s /upload/.
 *
 * Patri k detail-lista.js - bloky jsou v obou souborech oznacene stejnym markerem.
 *
 * NEDELA VLASTNI LISTU. Sablona template-11 uz jednu ma
 * (#js-plugin-header.plugin-fixed-header) a vykresluje v ni obrazek, nazev,
 * dostupnost, cenu i tlacitko do kosiku. Tenhle soubor ji jen:
 *   - presouva na PC zhora dolu
 *   - na mobilu odkryva produkt, ze ktereho sablona necha jen tlacitko
 *   - odstrkuje nad ni chat
 * Psat druhou listu vedle ni by znamenalo dve tlacitka pres sebe.
 */

/* ========================================================================
   1-lista-detail
   ======================================================================== */

/* Sablona listu neschovava transformem, ale posunem o -200 px: na PC
   pres `top`, na mobilu pres `bottom`. Staci tedy prehodit, ktera strana
   se posouva, a animace (0.15s) zustane sablony.

   O tom, jestli je lista videt, UZ NEROZHODUJE sablonova trida `active`,
   ale nase `nhd-videt` - sablona ji ukazovala az po 1000 px (PC) resp.
   1400 px (mobil) scrollu, takze nahore na strance nebylo zadne tlacitko
   do kosiku vubec (to hlavni je az na y=960 na PC a y=1541 na mobilu,
   tedy pod prvni obrazovkou). Trida `active` se dal prepina, jen uz nic
   nedela - pozice je rizena jen odsud. */
#js-plugin-header {
  top: auto !important;
  bottom: -200px !important;
}

/* --nhd-posun resi listu prohlizece: `bottom: 0` je spodek LAYOUTOVEHO
   viewportu, ktery je na mobilu zcasti za adresnim radkem - lista by byla
   videt jen napul. JS sem dosazuje rozdil proti visualViewportu.
   Stejna past uz jednou byla u listy v kosiku, viz upravy-kosik.css. */
#js-plugin-header.nhd-videt {
  bottom: var(--nhd-posun, 0px) !important;
}

/* ---- mobil: vlevo produkt, vpravo do kosiku ---- */
/* Sablona pod 992 px schovava obrazek, nazev i cenu a necha jen tlacitko
   pres celou sirku. Zadani chce videt produkt, takze je vracime. */
@media (max-width: 991px) {

  .plugin-fixed-header__container {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
  }

  .plugin-fixed-header__image {
    display: block !important;
    flex: 0 0 auto;
    width: 42px;
  }

  .plugin-fixed-header__img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  /* Nazev se smrskne na jeden radek s vypustkou, aby cena ani tlacitko
     nikdy nespadly mimo. */
  .plugin-fixed-header__name {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;          /* bez toho dlouhy nazev rozstrka tlacitko */
    font-size: 13px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dostupnost je uvnitr nazvu a na uzkem displeji jen bere misto. */
  .plugin-fixed-header__availability {
    display: none !important;
  }

  /* Sablona dava cene pevnych 200 px a boxu s tlacitkem celou sirku listy
     (merene 366 z 390). Ve flexu se nezmensi, takze na nazev zbylo 0 px
     a tlacitko vyjelo za pravy okraj. Obema je proto nutne sirku uvolnit -
     `flex: 0 0 auto` samo nestaci, to drzi prave tu zmerenou sirku. */
  .plugin-fixed-header__price {
    display: block !important;
    flex: 0 0 auto;
    width: auto !important;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .plugin-fixed-header__basket {
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Tlacitko uz nesmi brat celou sirku - vedle nej je ted produkt. */
  .plugin-fixed-header__basket .btn {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* Na uzkych displejich ustoupi cena - nazev a tlacitko jsou dulezitejsi
   a cena je o kousek vys v obsahu stranky. */
@media (max-width: 359px) {
  .plugin-fixed-header__price { display: none !important; }
}

/* ---- chat nad listu ---- */
/* Chat ani lead-gen banner nesmi lezet na tlacitku. Oba maji vlastni
   z-index v milionech, pretlacit je nejde - jde je jen odstrcit.
   Trida na <body> prichazi z JS, protoze chat neni sourozenec listy
   a selektorem se k nemu od ni nedostaneme. */
body.nhd-lista-videt #chatgo-messenger-chat-widget,
body.nhd-lista-videt .LEAD_GENERATION {
  bottom: var(--nhd-chat-bottom, 90px) !important;
  transition: bottom .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.nhd-lista-videt #chatgo-messenger-chat-widget,
  body.nhd-lista-videt .LEAD_GENERATION { transition: none; }
}