/* ==========================================================================
   ESHOP.CSS
   Styly modulu eshopu vkládané do hlavičky šablony: vyhledávání,
   uživatelské menu (dropdown), košík (dropdown, badge).
   Vyžaduje global.css a web.css (.topButton, .topButtonWrapper,
   .headerDropDown jsou definovány ve web.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   headWrapper - doplnění o flex-wrap, aby vyhledávání mohlo na užší
   obrazovce přejít na vlastní řádek bez nutnosti HTML duplicity.
   -------------------------------------------------------------------------- */
.headWrapper {
  flex-wrap: wrap;
}

/* ----------------------------------------------------- Vyhledávání  ----------------------------------------------------- */
.searchTopForm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  order: 2;
  padding: var(--space-xs) 0; /* sladění výšky s .topButtonWrapper (align-items: center v .headWrapper) */
}

.searchTopInput {
  width: 100%;
  max-width: 400px;
  height: 2.375rem; /* 38px */
  box-sizing: border-box;
  font-size: var(--font-size-body);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0 var(--space-md);
}

.searchTopSubmit {
  width: 2.375rem;
  height: 2.375rem;
  box-sizing: border-box;
  margin-left: calc(var(--space-sm) * -1 - 2.375rem);
  border: 0;
  background: url('/_content/sablony/eshop/html_default/images/lupa_32.png') no-repeat center;
  background-size: 2rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ----------------------------------------------------- User menu  ----------------------------------------------------- */
/* 
   Uživatelské menu wrapper - order v hlavičce
   Dropdown (vzhled) je v .headerDropDown (web.css), jen override níže.
   -------------------------------------------------------------------------- */
.usrMnuWrapper {
  order: 3;
}

.usrMnuDropDown a {
  display: block;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-xs);
  font-size: var(--font-size-body);
  font-weight: 300;
  border-top: 1px solid var(--color-bg-light);
}

.usrMnuDropDown a:first-child {
  border-top: 0;
}

.usrMnuDropDown a:link,
.usrMnuDropDown a:visited,
.usrMnuDropDown a:active {
  color: var(--color-text);
  text-decoration: none;
}

.usrMnuDropDown a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ----------------------------------------------------- Kosik menu  ----------------------------------------------------- */
/* 
   Košík wrapper - order v hlavičce
   Dropdown obsah (KosikTopLine atd.) níže.
   -------------------------------------------------------------------------- */
.kosikMnuWrapper {
  order: 4;
}

.cartIconWrap {
  position: relative;
  display: inline-flex;
}

.cartBadge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 3px;
  border-radius: 999px;
  background-color: var(--color-chip-border);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
}

/* --------------------------------------------------------------------------
   Košík dropdown obsah
   -------------------------------------------------------------------------- */
.kosikMnuRow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-bg-light);
  padding: var(--space-sm) 0;
  font-size: var(--font-size-body);
  font-weight: 300;
  color: var(--color-text);
}

.kosikMnuRow:first-child {
  border-top: 0;
}

.kosikMnuImageBox {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}

.kosikMnuImageBox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.kosikMnuTextBox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.kosikMnuNazev {
  font-size: var(--font-size-body);
  font-weight: 300;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.kosikMnuNazev:link,
.kosikMnuNazev:visited,
.kosikMnuNazev:active {
  color: var(--color-text);
  text-decoration: none;
}

.kosikMnuNazev:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.kosikMnuPriceBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kosikMnuPocet {
  color: var(--color-accent);
}

.kosikMnuCena {
  color: var(--color-accent);
}

/* ----------------------------------------------------- Sdilene definice  ----------------------------------------------------- */

/* --------------------------------------------------------------------------
   Štítky (Akce, Novinka, Doprodej...) definice barev
   Barvy jako proměnné - kromě pozadí štítku je používají i bloky slev
   v nákupním boxu detailu (barevný proužek = barva odpovídajícího štítku).
   -------------------------------------------------------------------------- */
:root {
  --color-stitek-akce: #ff741e;
  --color-stitek-doprodej: #a15c3e;
  --color-stitek-mnslevy: var(--color-accent);
  --color-stitek-novinka: #009adc;
  --color-stitek-darek: #ffb700;
  --color-stitek-xzdarma: #7b3f9e;
}

.stitekAkce      { background-color: var(--color-stitek-akce); }
.stitekDoprodej  { background-color: var(--color-stitek-doprodej); }
.stitekMnSlevy   { background-color: var(--color-stitek-mnslevy); }
.stitekNovinka   { background-color: var(--color-stitek-novinka); }
.stitekDarek     { background-color: var(--color-stitek-darek); }
.stitekXzdarma   { background-color: var(--color-stitek-xzdarma); }

/* .zboziStitek - sdílený vzhled štítku (detail, seznam, katalog).
   Výchozí tvar: mírně zaoblený obdélník (detail, seznam).
   Katalog přepisuje jen tvar na "vlaječku" přes kontext
   (.katalogStitekList .zboziStitek v zbozi_katalog.css).
   Barva pozadí se doplňuje třídou .stitek* výše.
   HTML generuje PHP funkce zbozi_stitky_get(). */
.zboziStitek {
  display: inline-block;
  padding: 2px var(--space-sm);
  border-radius: 4px;
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 500;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   .souvisejiciZboziSection - sekce se seznamem zboží (Alternativy,
   Související zboží...). Nadpis = sdílený .sekceNadpis (components.css),
   karty a mřížka = .katalogBox / .katalogItemBox (zbozi_katalog.css -
   musí být načtený i na stránce, kde se sekce vypisuje).
   Spodní okraj mřížky se v sekci ruší - rozestupy mezi sekcemi řeší
   jejich nadřazený obal (např. gap v .zboDetSections).
   PHP: print_souvisejici_zbozi_section()
   -------------------------------------------------------------------------- */
.souvisejiciZboziSection .katalogBox {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   .zboziTitle - sdílený styl odkazu na název produktu (barvy, hover).
   Používá se jak v katalogové kartě (.katalogItemTitle), tak v seznamovém
   zobrazení (.sezZboItem) - velikost/mezery řeší vždy kontextová třída,
   tohle je jen společný vizuální základ.
   -------------------------------------------------------------------------- */
.zboziTitle {
  font-size: var(--font-size-body);
  font-weight: 700;
}

.zboziTitle:link,
.zboziTitle:visited,
.zboziTitle:active {
  color: var(--color-text);
  text-decoration: none;
}

.zboziTitle:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Odebírané zboží v košíku/objednávce (množství 0) - musí přebít barvu
   z .zboziTitle:link/:visited (stejná specificita 0,2,0 přes kombinovaný
   selektor, jinak by .zboziListItemRemoving samotné prohrálo). */
.zboziTitle.zboziListItemRemoving:link,
.zboziTitle.zboziListItemRemoving:visited,
.zboziTitle.zboziListItemRemoving:active {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Dostupnost - definice barev */
.zboziDostupnost0 { color: var(--color-text); }
.zboziDostupnost1 { color: var(--color-accent); font-weight: 700; }
.zboziDostupnost2 { color: var(--color-accent); }


/* Cena zboží - společná definice pro katalog, seznam i detail zboží */
.zboziCena {
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--color-text);
}

.zboziCena2 {
  font-size: var(--font-size-small);
  color: var(--color-text-light);
}

.zboziCenaOld {
  text-decoration: line-through;
}


/* --------------------------------------------------------------------------
   .addToCartForm - sdílený formulář (katalog, seznam, detail, košík -
   viz zbozi_addToCartForm()). Stepper (+/-) zatím jen mění hodnotu
   inputu, bez odesílání - AJAX/submit chování v košíku bude řešeno
   samostatně později.
   -------------------------------------------------------------------------- */
.addToCartForm {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.addToCartStepper {
  display: flex;
  align-items: center;
}

.addToCartStepButton {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.125rem;
  height: 2.375rem; /* 38px - sjednoceno s ostatními ovládacími prvky webu */
  padding: 0;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.addToCartStepButton:hover {
  background-color: #e0e0e0;
}

.addToCartStepButton.stepDown {
  border-radius: 4px 0 0 4px;
}

.addToCartStepButton.stepUp {
  border-radius: 0 4px 4px 0;
}

.addToCartInPoc {
  box-sizing: border-box;
  width: 2rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  text-align: center;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.addToCartSubmit {
  box-sizing: border-box;
  height: 2.375rem;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 4px;
  background-color: #ff741e;
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.addToCartSubmit:hover {
  background-color: var(--color-accent);
}



/* --------------------------------------------------------------------------
   RESPONSIVE: do 969px včetně (mobil)
   Vyhledávání na vlastní řádek, dropdown vypnut na touch.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 969px) {

  .searchTopForm {
    order: 10;
    flex: 1 1 100%;
	justify-content: flex-start;
    margin-bottom: var(--space-xs); /* 4px - spolu s headWrapper padding-bottom (4px) dá 8px mezeru k topMnu */
  }

  .searchTopInput {
    max-width: none;
  }

  /* Dropdown vypnut na touch zařízeních */
  .topButtonWrapper:hover .headerDropDown {
    display: none;
  }
}