/* Panakei: rezerva místa proti skákání stránky (CLS). Patrik Zukal, patrikz.dev
   Prvky níž vkládají skripty až po načtení stránky. Místo pro ně držíme dopředu
   a uvolníme ho ve chvíli, kdy prvek opravdu je, takže se obsah neposune.
   Výšky změřené 15. 10. 2026 (SK i CZ stejné). */

/* 1) Pruh nad hlavičkou: hodnocení obchodu, přihlášení, doprava zdarma
      (vkládá skript jg-media, text o dopravě doplní dkLab). V košíku a pokladně je skrytý.
      Minimální výška platí, dokud v pruhu není hodnocení (jg-media) i text o dopravě (dkLab),
      pak má pruh svou přirozenou výšku. Na mobilu přichází text dřív než hodnocení. */
body:not(.ordering-process) #header { margin-top: 64px; }
.dklab-delivery-box.position-above-header:not(:has(.store-link)),
.dklab-delivery-box.position-above-header:not(:has(.dopravaBannerClone:not(:empty))) { min-height: 64px; }
@media (min-width: 768px) {
  body:not(.ordering-process) #header { margin-top: 58px; }
  .dklab-delivery-box.position-above-header:not(:has(.store-link)),
  .dklab-delivery-box.position-above-header:not(:has(.dopravaBannerClone:not(:empty))) { min-height: 58px; }
}
@media (min-width: 1024px) {
  body:not(.ordering-process) #header { margin-top: 27px; }
  .dklab-delivery-box.position-above-header:not(:has(.store-link)),
  .dklab-delivery-box.position-above-header:not(:has(.dopravaBannerClone:not(:empty))) { min-height: 27px; }
}
body .dklab-delivery-box.position-above-header + #header { margin-top: 0; }

/* 2) Úvodní: dlaždice kategorií, které skript přesune z patičky pod hlavní banner.
      Padding, ne margin: margin by se slil s okrajem dalšího bloku. */
.type-index .banners-row:has(#carousel) { padding-bottom: calc(73.1vw + 100px); } /* mobil: s dlaždicemi se posune i blok pod nimi */
@media (min-width: 768px)  { .type-index .banners-row:has(#carousel) { padding-bottom: 312px; } }
@media (min-width: 992px)  { .type-index .banners-row:has(#carousel) { padding-bottom: 357px; } }
@media (min-width: 1200px) { .type-index .banners-row:has(#carousel) { padding-bottom: 399px; } }
@media (min-width: 1440px) { .type-index .banners-row:has(#carousel) { padding-bottom: 447px; } }
.type-index .banners-row:has(#carousel):has(+ .container > .top-categories-splide) { padding-bottom: 0; }

/* 3) Úvodní: tlačítko „Zobraziť všetky produkty“ pod záložkami s produkty. */
.type-index #tab-content:not(:has(~ .hp-cat-btn)) { margin-bottom: 78px; }

/* 4) Kategorie: odkaz s hodnocením obchodu pod záhlavím kategorie
      (19 px je původní okraj záhlaví, zbytek je řádek s odkazem). */
.type-category #category-header:not(:has(+ .store-link)) { margin-bottom: calc(19px + 49px); }
@media (min-width: 768px) {
  .type-category #category-header:not(:has(+ .store-link)) { margin-bottom: calc(19px + 36px); }
}

/* 5) Detail produktu: odkaz s hodnocením obchodu pod blokem s tlačítkem do košíku. */
.type-detail .p-to-cart-block:not(:has(+ .store-link)) { margin-bottom: 44px; }
@media (min-width: 768px) {
  .type-detail .p-to-cart-block:not(:has(+ .store-link)) { margin-bottom: 47px; }
}

/* 5b) Detail produktu: Shoptet po načtení obalí hlavní fotku zoomem (#wrap) a blok povyroste o 41 px.
       Dokud fotka není obalená, je odkaz přímým potomkem .p-image a drží těch 41 px. */
.type-detail .p-image > a.p-main-image { margin-bottom: 41px; }

/* 5c) Mobil: v HTML je blok s fotkou až za údaji o produktu (zobrazuje se nad nimi).
       Na pomalé síti se údaje vykreslí dřív a fotka je pak odsune. Držíme pro ni místo. */
@media (max-width: 767px) {
  .type-detail .p-detail-inner:not(:has(> .p-image-wrapper))::before {
    content: ""; display: block; order: 1;
    height: calc((100vw - 40px) * 1.333 + 150px); /* fotka 3:4 + náhledy */
  }
  .type-detail.in-granule-pre-psov .p-detail-inner:not(:has(> .p-image-wrapper))::before,
  .type-detail.in-granule-pro-psy .p-detail-inner:not(:has(> .p-image-wrapper))::before {
    height: calc((100vw - 40px) * 1.893 + 170px); /* + promo video */
  }
}
/* Desktop: fotka je levý sloupec (50 %), bez rezervy by údaje chvíli stály vlevo. */
@media (min-width: 992px) {
  .type-detail .p-detail-inner:not(:has(> .p-image-wrapper))::before {
    content: ""; display: block; order: 1; flex: 0 0 50%;
  }
}

/* 6) Detail granulí: promo video pod fotkou (vkládá ho HTML kód zápatí). */
#topVideoContent { display: block; width: 100%; max-width: 750px; height: auto; aspect-ratio: 750 / 420; }
.type-detail.in-granule-pre-psov .p-image-wrapper:not(:has(> #topVideoContent))::after,
.type-detail.in-granule-pro-psy .p-image-wrapper:not(:has(> #topVideoContent))::after {
  content: ""; display: block; width: 100%; max-width: 750px; aspect-ratio: 750 / 420; margin-bottom: 20px;
}

/* 7) Prázdný košík: blok „Rovnaké granule ako minule?“ (vkládá skript jg-media). */
.cart-inner.cart-empty .col-xl-7 .cart-content { display: flow-root; } /* horní okraj vloženého bloku zůstane uvnitř */
.cart-inner.cart-empty .col-xl-7 .cart-content:not(:has(.jgm-cart-empty-cta)) { padding-top: 143px; } /* blok se vkládá na začátek */

/* 8) Úvodní: viditelný nadpis z pole „Nadpis“ na titulní straně. Shoptet ho vkládá jako div.h1 na začátek .welcome
      (skutečné H1 pro vyhledávače je zvlášť, sr-only). Vzhled stejný jako ostatní nadpisy sekcí na úvodní stránce. */
.type-index .welcome > .h1 { font-family: "Amatic SC", cursive; font-size: 34px; font-weight: 700; line-height: 1.1; color: #7f583c; text-align: center; margin: 0 0 32px; }
@media (min-width: 768px) { .type-index .welcome > .h1 { font-size: 51px; margin-bottom: 48px; } }