/* --------------------------------------------------------------------------
   .seznamBox - wrapper seznamového zobrazení výpisu zboží (alternativa
   ke katalogovému zobrazení .katalogBox). Stejná PHP funkce vypisuje
   .sezZboItem i v košíku/objednávce, proto typ zobrazení nese třída
   na .seznamBox (rodič) - je to vlastnost celého seznamu, ne jednotlivé
   položky:
     .seznamBox.list    - běžný výpis zboží (výchozí, bez modifikátoru
                           by fungoval stejně, ale třída je v markupu
                           vždy explicitně kvůli čitelnosti/ladění)
     .seznamBox.kosik   - sdílený layout pro košík i objednávku (rozdíl
                           je jen v obsahu buněk, ne v gridu samotném)

   Na rozdíl od katalogových karet nemá položka vlastní rámeček -
   odděluje se jen vodorovnou čárou (border-bottom), aby zůstal seznam
   vizuálně hutnější a odlišný od katalogu. Cokoli následuje za seznamem
   (stránkování, souhrn cen v košíku...) musí být vždy MIMO .seznamBox,
   jinak :last-child odstraní čáru u posledního produktu omylem.
   -------------------------------------------------------------------------- */
.seznamBox {
  margin: 0;
}

/* --------------------------------------------------------------------------
   .sezZboItem - grid řádek položky.
   Sloupce (grid-template-areas):
     list:  text | cena | buy
     kosik: text | cena | buy | celkem | kos
   Šířka sloupce "text" (název zboží) je jediná, která roste (1fr) -
   ostatní sloupce mají pevnou šířku, aby se opticky zarovnaly mezi
   všemi položkami v seznamu.
   -------------------------------------------------------------------------- */
.sezZboItem {
  display: grid;
  grid-template-columns: 90px 1fr 120px 190px;
  grid-template-areas: "img text cena buy";
  align-items: start;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}

.sezZboItem:last-child {
  border-bottom: 0px;
}

.seznamBox.kosik .sezZboItem {
  grid-template-columns: 90px 1fr 160px 190px 110px 40px;
  grid-template-areas: "img text cena buy celkem kos";
}

/* --------------------------------------------------------------------------
   Obrázek - vlastní grid sloupec (stejná logika jako u cena/buy/celkem/kos
   - každý typ obsahu má svou area), díky tomu jsou obrázky přesně pod
   sebou ve všech položkách seznamu bez ohledu na délku názvu.
   -------------------------------------------------------------------------- */
.sezZboImageBox {
  grid-area: img;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  box-sizing: border-box;
}

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

/* --------------------------------------------------------------------------
   Text sloupec - název/výrobce/kód + štítky.
   -------------------------------------------------------------------------- */
.sezZboTxtCont {
  grid-area: text;
  min-width: 0; /* umožní zalomení dlouhého názvu v grid kontextu */
  padding-top: 10px;
}

.sezZboTitle {
  display: block;
  margin-bottom: var(--space-xs);
}

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

.sezZboKod {
  color: var(--color-text-muted);
}

/* Štítky - pod textem, mírně zaoblený obdélník (na rozdíl od katalogu,
   kde jsou to "vlaječky" kotvené na rohu karty - v seznamu žádný roh
   není, takže se drží stejného tvaru jako ostatní ovládací prvky). */
.sezZboStitekList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-xs);
}

/* Štítky - pod textem. Vzhled štítku je sdílený (.zboziStitek v eshop.css),
   tady jen rozložení řádku. */



/* --------------------------------------------------------------------------
   Cena sloupec.
   list: cena, případně .sezZboSlevaAkcni (kolečko -X%) v pravém horním
         rohu + přeškrtnutá stará cena pod aktuální (bez DPH se v listu
         nezobrazuje).
   kosik/objednavka: cena/ks + bez DPH (bez slevy - v košíku/objednávce
   je vidět jen výsledná jednotková cena, sleva už je promítnutá v ceně).
   -------------------------------------------------------------------------- */
.sezZboCenaBox {
  position: relative; /* kotva pro .sezZboSlevaAkcni */
  grid-area: cena;
  text-align: right;
  padding-right: 35px;
  padding-top: 10px;
}

.seznamBox.kosik .sezZboCenaBox {
  padding-right: 0px;
}

/* Sleva (list) - kolečko v pravém horním rohu cenového boxu, stejný
   vzor jako .katalogSlevaAkcni. */
.sezZboSlevaAkcni {
  position: absolute;
  top: -8px;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #ff741e;
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Formulář (počet + Koupit/změnit, v objednávce prostý text "X ks")
   + dostupnost pod ním.
   -------------------------------------------------------------------------- */
.sezZboAddFormBox {
  grid-area: buy;
}

.sezZboDostupnost {
  margin-top: var(--space-xs);
  font-size: var(--font-size-small);
}

.sezZboDarekKs {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-accent);
}

.sezZboKs {
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text);
  padding-top: 10px;
  display: block;
}

/* --------------------------------------------------------------------------
   Celkem cena + koš na smazání (jen kosik/objednavka; v objednávce
   sloupec "kos" zůstane prázdný, formulář na smazání se nevypisuje).
   -------------------------------------------------------------------------- */
.sezZboCenaCelkemBox {
  grid-area: celkem;
  text-align: right;
  padding-top: 10px;
}

.kosikZboziDelForm {
  grid-area: kos;
  justify-self: end;
}

.kosikZboziDelButt {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
  background-image: url('/_content/sablony/eshop/html_default/images/icon-trash.svg');
  background-size: 1.5rem;  /* 24px */
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.kosikZboziDelButt:hover {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}


/* --------------------------------------------------------------------------
   RESPONSIVE: do 969px - text na celou šířku nahoře, zbytek pod sebou.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 969px) {
  .sezZboItem {
    grid-template-columns: 90px max-content 1fr;
    grid-template-areas:
      "img text text"
      "img cena buy";
    gap: var(--space-sm);
  }

  .seznamBox.kosik .sezZboItem {
    grid-template-columns: 90px max-content 1fr;
    grid-template-areas:
      "img text   text"
      "img cena   celkem"
      "img buy    kos";
  }

  .sezZboTxtCont {
    padding-top: 0;
  }

  .sezZboCenaBox {
    margin-top: 8px; /* zarovnání ceny na vertikální střed tlačítka (38px), ne celého sloupce s dostupností pod ním */
    text-align: left;
    padding-right: 35px;
    padding-top: 0;
  }

  .sezZboSlevaAkcni {
    top: 0;
    right: 0;
    transform: translateY(-50%);
  }

  .sezZboCenaCelkemBox {
    text-align: left;
	padding-top: 0;
  }
  .kosikZboziDelForm {
	justify-self: start;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: do 530px (nejmenší mobil) - cena a formulář se už nevejdou
   vedle sebe na jeden řádek (viz breakpoint 969px výše), proto každý
   dostane vlastní plnošířkový řádek vedle obrázku (ten se táhne přes
   všechny řádky položky). Řeší zároveň nekonzistentní šířku sloupce
   ceny (dřív max-content sdílený s formulářem na jednom řádku).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 530px) {
  .sezZboItem {
    grid-template-columns: 90px 1fr;
    grid-template-areas:
      "img text"
      "img cena"
      "img buy";
  }

  .sezZboCenaBox {
    margin-top: 0; /* triky pro zarovnání se sousedním sloupcem formuláře (969px breakpoint) tu nejsou potřeba - cena má vlastní řádek */
  }

  .sezZboSlevaAkcni {
    top: -4px;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: do 400px - kosik/objednavka. Cena+celkem sdílí sloupec
   s formulářem (jako na 969px), ale koš zůstává vedle formuláře (buy),
   ne vedle celkové ceny - významově patří k akci, ne k částce.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 390px) {
  .seznamBox.kosik .sezZboItem {
    grid-template-columns: 70px max-content 1fr 40px;
    grid-template-areas:
      "img text   text   text"
      "img cena   celkem celkem"
      "img buy    buy    kos";
  }
  
  .seznamBox.kosik .sezZboImageBox {
    width: 70px;
  }
  .kosikZboziDelForm {
	justify-self: start;
  }
  .sezZboCenaCelkemBox {
    text-align: right;
	padding-top: 0;
  }
}