/* ============================================================================
   Choco Fleurs — drobné kosmetické úpravy (šablona Waltz)
   Barvy obchodu: tyrkysová #99d5dd, tmavě modrá #383a55, růžová #e65988.

   INSTALACE: Správce souborů → /user/documents/upload/CSS/chocofleurs.css
   Návrhář šablon → HTML kódy → Záhlaví:
     <link rel="stylesheet" href="/user/documents/upload/CSS/chocofleurs.css?v=1">
   ========================================================================== */

/* 1) Detail produktu: bez hodnocení neukazovat prázdné hvězdy
      „☆☆☆☆☆ Neohodnoceno · Podrobnosti hodnocení“ (stejně jako SecretCorner).
      Jakmile produkt dostane první hodnocení, blok se objeví sám. */
.type-product .p-detail .stars-wrapper:not(:has(.star-on, .star-half)),
.type-product .pr-action > .stars-wrapper:not(:has(.star-on, .star-half)) { display: none; }

/* 2) Tlačítka: bílý text na tyrkysové má kontrast 1,6 : 1 (norma 4,5 : 1).
      Tmavě modrý text na stejné tyrkysové = 6,8 : 1. Platí pro „Do košíku“,
      „Pokračovat“, „Otevřít filtr“, „Hledat“, „Potřebujete pomoc?“. */
.btn.btn-conversion,
.btn.btn-default {
  color: #383a55 !important;
  font-weight: 700;
}
.btn.btn-conversion:hover, .btn.btn-conversion:focus,
.btn.btn-default:hover, .btn.btn-default:focus {
  color: #383a55 !important;
}

/* 3) Ceny: tyrkysová na bílé (1,6 : 1) → tmavě modrá. */
.price-final, .price-final strong,
.variant-price-wrap .price-final,
.cart-table .p-price, .cart-table .p-total, .price-wrapper .price {
  color: #383a55 !important;
}

/* 4) Detail: košík u variant je jen šedá ikonka v bílém poli —
      uděláme z ní výrazné tyrkysové tlačítko, aby bylo jasné, kam kliknout. */
.variant-table .variant-submit .add-to-cart-button {
  min-width: 46px;
  height: 40px;
  border: 0 !important;
  border-radius: 999px !important;
  background: #99d5dd !important;
  color: #383a55 !important;
  transition: background-color .15s;
}
.variant-table .variant-submit .add-to-cart-button:hover { background: #ffccc9 !important; }

/* 5) Mobil: hlavička. Obrázek pozadí obsahuje slogan „Ukažte svou lásku jinak!“;
      v nízké mobilní hlavičce z něj trčí jen useknutý kousek písma. */
@media (max-width: 767px) {
  #header { background-image: none !important; background-color: #383a55 !important; }
  /* Plovoucí lišta při rolování je v šabloně z 90 % průhledná — prosvítají přes ni fotky. */
  .header-navigation { background-color: #383a55 !important; }
}

/* 6) Mobil: kroky objednávky zabírají 165 px na výšku (3 řádky) → jeden řádek. */
@media (max-width: 767px) {
  ol.cart-header {
    display: flex !important;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 16px !important;
  }
  ol.cart-header > li.step {
    flex: 1 1 0;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
  }
  /* Číslo kroku (span::before s counter) nad popisek, ne vedle něj. */
  ol.cart-header > li.step span { display: block; }
  ol.cart-header > li.step span::before { display: block !important; margin: 0 auto 4px !important; }
}

/* 7) Rekapitulace objednávky: náhled produktu (vkládá chocofleurs.js). */
.order-summary-item.cf-recap-item > div:first-child > a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-recap-img {
  flex: 0 0 56px;
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e3f2f4;
}

/* 8) K1 — růžové „Objednávejte minimálně 1 den předem“ u každé varianty a pod cenou.
      Schováme ho jen tehdy, když je na stránce odpočet uzávěrky (.st-dc z modulu
      delivery-cutoff) — ten říká totéž konkrétně. Bez odpočtu zůstane, jak je.
      Barva #e65988 = právě tahle dostupnost; jiné dostupnosti mají jinou barvu. */
body:has(.st-dc) .p-detail .variant-name-wrapper [style*="e65988"],
body:has(.st-dc) .p-detail .availability-wrapper:has([style*="e65988"]) { display: none !important; }

/* 9) K2 — mobil, produkt s variantami: cena a košík hned pod fotkou.
      Dnes je pořadí foto → popis → „Tisk / Zeptat se“ → varianty (druhá obrazovka).
      Nově: název → foto → krátký popis → odpočet → varianty → kategorie → „Zeptat se“.
      p-info-wrapper „rozpustíme“ (display: contents), aby šlo řadit i jeho děti. */
@media (max-width: 767px) {
  .pr-action:has(> .variant-table) { display: flex; flex-direction: column; }
  .pr-action:has(> .variant-table) > *,
  .pr-action:has(> .variant-table) > .p-info-wrapper > * { order: 7; }
  .pr-action:has(> .variant-table) > .p-info-wrapper { display: contents; }
  .pr-action:has(> .variant-table) > .p-detail-top { order: 0; }
  .pr-action:has(> .variant-table) > h1 { order: 1; }
  .pr-action:has(> .variant-table) > .stars-wrapper { order: 2; }
  .pr-action:has(> .variant-table) > .p-image-wrapper { order: 3; }
  .pr-action:has(> .variant-table) > .p-info-wrapper > .p-details { order: 4; }
  .pr-action:has(> .variant-table) > .st-dc { order: 5; }
  .pr-action:has(> .variant-table) > .table-variants-heading { order: 5; margin-top: 8px; }
  .pr-action:has(> .variant-table) > .variant-table { order: 6; }
  .pr-action:has(> .variant-table) > .p-info-wrapper > .p-details-bottom { order: 7; margin-top: 12px; }
  .pr-action:has(> .variant-table) > .p-info-wrapper > .link-icons { order: 8; }
  .pr-action:has(> .variant-table) > .p-info-wrapper > .social-icons { order: 9; }
}
/* „Tisk“ nikdo nepotřebuje (na mobilu ho šablona už skrývá, na desktopu ne). */
.link-icons .link-icon.print { display: none !important; }

/* 10) K3 — 1. krok objednávky: růžový box s obrázkem ruky (~220 px na mobilu)
       → jeden řádek. Text boxu se zadává v administraci, tady jen vzhled. */
.site-msg-custom.step-1 > p:has(img[src*="Pozor"]) { display: none; }
.site-msg-custom.step-1 > div {
  margin: 0 0 14px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
}
.site-msg-custom.step-1 > div > strong { display: inline !important; margin: 0 !important; font-size: 14px !important; }
.site-msg-custom.step-1 > div > span { display: none; }