/* ===========================================================================
   Naturalky: dlaždice produktu, verze 1 (návrh 22. 10. 2026)

   Platí pro všechny karty produktu (.p) ve výpisech kategorií, na homepage
   i v souvisejících produktech. Načítá se v záhlaví ZA styles.css, obsah karty
   (skutečné hodnocení, měrná cena, sleva v Kč, stav skladu) doplňuje
   dlazdice.js. Zdůvodnění a zdroje: brands/naturalky/dlazdice-produktu-2026-10.md

   Pořadí v kartě: fotka · název · hodnocení · obsah balení (jen kde ho název
   neříká) · cena + měrná cena · sklad a doprava · tlačítko Do košíku.
   =========================================================================== */

/* 1. Šum pryč: obecné štítky a údaje, které nepomáhají vybrat
      (Oblíbené, Novinka, Tip, Kompostovatelné, „200 ubrousků v balení“).
      Na fotce zůstávají jen věcné výhody: doprava zdarma, 3+1 a sleva v Kč. */
body .products-block .custom-tags-under-name {
  display: none !important;
}

body .products-block .image .flags .flag:not(.flag-doprava-zdarma):not(.flag-3-1-zdarma):not(.nd-flag-sleva) {
  display: none !important;
}

/* Hvězdičky ze skriptu webu (dnes s vymyšlenými počty) dlaždice neukazuje;
   skutečné hodnocení přidá dlazdice.js jako .nd-rating, když SHOW_RATINGS = true */
body .products-block .p .stars-wrapper {
  display: none !important;
}

/* 2. Karta: bílá, jemný rámeček, stejné rohy jako na homepage (v131) */
body .products-block .p {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--cream-border, #e0ddd0);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px !important;
}

body .products-block .p .image {
  height: auto !important;
  margin-bottom: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

body .products-block .p .image img.fixed-orig-image {
  object-fit: contain;
}

/* Věcné štítky na fotce */
body .products-block .image .flags .flag {
  margin: 8px !important;
  padding: 6px 9px !important;
  border-radius: 6px;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

body .products-block .image .flags .flag.flag-doprava-zdarma,
body .products-block .image .flags .flag.flag-3-1-zdarma {
  background: var(--green, #007041) !important;
  color: #fff !important;
}

body .products-block .image .flags .nd-flag-sleva {
  background: var(--orange, #db7a51) !important;
  color: #fff !important;
}

/* 3. Obsah karty pod fotkou: pevné pořadí nezávisle na tom,
      jak prvky přeskládá script.js (reorderProducts) */
body .products-block .p-in {
  flex: 1 1 auto;
  height: auto !important;
  gap: 8px !important;
  padding: 12px 2px 2px !important;
}

/* Prvky se nesmí natahovat ani smršťovat (jinak cena „nafoukne“ mezery
   a název se ořízne na jeden řádek), dolů je tlačí jen tlačítko */
body .products-block .p-in > * { order: 20; flex: 0 0 auto !important; }
body .products-block .p-in > .name { order: 1; }
body .products-block .p-in > .nd-rating { order: 2; }
body .products-block .p-in > .nd-note { order: 3; }
body .products-block .p-in > .prices { order: 4; }
body .products-block .p-in > .ratings-wrapper { order: 5; }
body .products-block .p-in > .p-tools { order: 6; margin-top: auto !important; }

/* Název: menší než cena, nejvýš 3 řádky */
body .products-block.products .p .name,
body .products-block .p .name {
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--green, #007041) !important;
  overflow: visible !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
}

body .products-block .p .name span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Skutečné hodnocení: hvězdičky + počet, jen když nějaké je */
.nd-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  color: #4d4d4d;
}

.nd-rating .star-list {
  display: flex;
  gap: 1px;
}

.nd-rating .star {
  width: 14px !important;
  height: 14px !important;
}

/* Obsah balení u produktů, kde ho název neříká (Starter Pack, BABY) */
.nd-note {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #4d4d4d;
}

/* 4. Cena: výraznější než název, bez „včetně DPH“ (B2C cena je vždy s DPH,
      na detailu produktu zůstává) */
body .products-block .p-in .prices {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 2px 0 0 !important;
}

body .products-block.products .p .price strong,
body .products-block .p .price-final strong,
body .products-block .p .price-final {
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: var(--orange, #db7a51) !important;
}

body .products-block .p-in .prices .price-final::after {
  content: none !important;
}

/* Původní cena při slevě: vlevo od konečné, podobně velká, přeškrtnutá.
   Pozor na pravidlo 30 dní (nejnižší cena za posledních 30 dní). */
body .products-block .p-in .prices .price-standard {
  order: -1;
  font-size: 18px !important;
  font-weight: 500;
  color: #6b6b6b !important;
  text-decoration: line-through;
}

body .products-block .p-in .prices .price-standard span {
  font-size: inherit !important;
  color: inherit !important;
}

/* Sleva v % ze Shoptetu: místo ní ukazujeme štítek v Kč na fotce */
body .products-block .p-in .prices .price-save {
  display: none !important;
}

/* Měrná cena ze Shoptetu (.price-measure, dlazdice.js přidá .nd-unit):
   méně výrazná než cena, ale vždy po ruce. Prázdnou (produkt bez měrné
   jednotky, např. Starter Pack) skrýt, jinak dělá v kartě mezeru. */
body .products-block .p-in .prices .price-measure:not(.nd-unit) {
  display: none !important;
}

body .products-block .p-in .prices .nd-unit {
  flex-basis: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 500 !important;
  color: #4d4d4d !important;
}

/* 5. Sklad a doprava v jednom řádku. „Doprava 1–2 dny“ jen u zboží skladem
      (dřív se psala i u nedostupného). */
body .products-block .p-in > .ratings-wrapper {
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
}

body .products-block .p-in .ratings-wrapper .availability {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35;
  color: var(--green, #007041) !important;
}

body .products-block .p-in .availability::after {
  content: none !important;
}

body .products-block .p-in .availability > span {
  display: inline !important;
  font-weight: 600;
}

body .products-block .p.nd-skladem .p-in .availability > span {
  color: var(--green, #007041) !important;
}

body .products-block .p.nd-skladem .p-in .availability::after {
  content: " · Doprava 1–2 dny" !important;
  display: inline !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  color: var(--green, #007041) !important;
}

/* 6. Tlačítko s textem zůstává, jen sjednocená velikost */
body .products-block .p-in .p-tools .btn,
body .products-block .p-in .p-tools button {
  margin-top: 10px !important;
  min-height: 46px;
  padding: 10px 12px !important;
  font-size: 16px !important;
  line-height: 1.2;
}

/* 7. Mobil, výpisy kategorií a vyhledávání: 2 sloupce pod sebou
      místo vodorovného karuselu (homepage a související produkty zůstávají
      v karuselu, mají jen pár produktů) */
@media (max-width: 767px) {
  body.type-category #products.products-block,
  body.type-search #products.products-block {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    cursor: default;
    gap: 12px 10px !important;
    margin-inline: 14px !important;
    padding-bottom: 0;
  }

  body.type-category #products.products-block > div,
  body.type-search #products.products-block > div {
    flex: 0 0 calc(50% - 5px) !important;
    width: auto !important;
    max-width: calc(50% - 5px);
  }

  body.type-category #products .p,
  body.type-search #products .p {
    padding: 8px !important;
  }

  body.type-category #products .p-in,
  body.type-search #products .p-in {
    gap: 6px !important;
    padding: 10px 2px 2px !important;
  }

  body.type-category #products .p .name,
  body.type-search #products .p .name {
    font-size: 15px !important;
  }

  body.type-category #products .p .price-final strong,
  body.type-category #products .p .price-final,
  body.type-category #products.products .p .price strong,
  body.type-search #products .p .price-final strong,
  body.type-search #products .p .price-final {
    font-size: 20px !important;
  }

  body.type-category #products .p-in .prices .price-standard,
  body.type-search #products .p-in .prices .price-standard {
    font-size: 15px !important;
  }

  body.type-category #products .nd-rating,
  body.type-search #products .nd-rating {
    font-size: 12px;
    gap: 4px;
  }

  body.type-category #products .nd-rating .star,
  body.type-search #products .nd-rating .star {
    width: 12px !important;
    height: 12px !important;
  }

  body.type-category #products .nd-unit,
  body.type-category #products .nd-note,
  body.type-category #products .p-in .ratings-wrapper .availability,
  body.type-search #products .nd-unit,
  body.type-search #products .nd-note,
  body.type-search #products .p-in .ratings-wrapper .availability {
    font-size: 12px !important;
  }

  body.type-category #products .image .flags .flag,
  body.type-search #products .image .flags .flag {
    margin: 6px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
  }

  body.type-category #products .p-in .p-tools .btn,
  body.type-category #products .p-in .p-tools button,
  body.type-search #products .p-in .p-tools .btn,
  body.type-search #products .p-in .p-tools button {
    min-height: 42px;
    padding: 9px 6px !important;
    font-size: 15px !important;
    margin-top: 6px !important;
  }
}

/* 8. Počítač a tablet */
@media (min-width: 768px) {
  body .products-block.products .p .name,
  body .products-block .p .name {
    font-size: 20px !important;
  }

  body .products-block.products .p .price strong,
  body .products-block .p .price-final strong,
  body .products-block .p .price-final {
    font-size: 28px !important;
  }

  body .products-block .p-in .prices .price-standard {
    font-size: 20px !important;
  }

  body .products-block .p-in .prices .nd-unit,
  .nd-note,
  body .products-block .p-in .ratings-wrapper .availability {
    font-size: 15px !important;
  }

  .nd-rating {
    font-size: 14px;
  }

  body .products-block .p {
    padding: 14px !important;
  }

  body .products-block .p-in .p-tools .btn,
  body .products-block .p-in .p-tools button {
    min-height: 48px;
    font-size: 17px !important;
  }
}