/* ==========================================================================
   Květiny Kašík – vzhled e-shopu (Shoptet, šablona Samba)
   Podle webu: krémové pozadí, lesní zelená, pilulková tlačítka, zaoblené karty.
   Nahrává se do Shoptet → Správce souborů a načítá se z <head> (viz zahlavi.html).

   Pozn.: Šablonové CSS ze CDN Shoptetu je cross-origin a přebíjí běžná pravidla,
   proto se tu na místech označených [!] používá "body …" nebo "!important".
   ========================================================================== */


/* 1. Tokeny
   -------------------------------------------------------------------------- */
:root {
  --kk-cream:       #F0E4D3;
  --kk-cream-soft:  #F7EDDC;
  --kk-line:        #DCCBAE;
  --kk-pink:        #E7C0BD;
  --kk-coral:       #E57579;
  --kk-forest:      #2F3B2F;
  --kk-forest-deep: #1F2A20;
  --kk-ink-mute:    #4B5448;

  --kk-r-sm: 14px;
  --kk-r-md: 22px;
  --kk-r-lg: 32px;
  --kk-r-pill: 999px;

  --kk-gutter: clamp(16px, 4vw, 56px);
  --kk-container: 1320px;
  --kk-gap: clamp(10px, 1.4vw, 16px);

  /* Proměnné šablony Samba (barvy tlačítek, hlavičky, písmo) */
  --color-header-background: var(--kk-cream);
  --color-primary:           var(--kk-cream);
  --color-primary-hover:     var(--kk-pink);
  --color-secondary:         var(--kk-forest);
  --color-secondary-hover:   var(--kk-forest-deep);
  --color-tertiary:          var(--kk-cream-soft);
  --color-tertiary-hover:    var(--kk-forest);
  --template-font:           "Google Sans";
  --template-headings-font:  "Google Sans";
}


/* 2. Základ
   -------------------------------------------------------------------------- */
body,
.overall-wrapper,
.content-wrapper,
.content-wrapper-in,
#content {
  background: var(--kk-cream);
}

body {
  color: var(--kk-forest);
  font-family: "Google Sans", "DM Sans", system-ui, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: "Google Sans", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--kk-forest);
}

a { color: var(--kk-forest); }
a:hover { color: var(--kk-coral); }

:focus-visible {
  outline: 2px solid var(--kk-coral);
  outline-offset: 2px;
}


/* 2b. Jednotná osa: hlavička, obsah i patička mají stejnou šířku a jsou na středu,
   i na širokém monitoru (Samba je jinak roztahuje na 1 712 px). */
body .container {                                         /* [!] */
  width: 100%;
  max-width: var(--kk-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--kk-gutter) !important;
}


/* 3. Hlavička a navigace
   Samba dává logo doprostřed; tady je vlevo a ikony vpravo, menu pod nimi.
   -------------------------------------------------------------------------- */
#header,
#header .header-top,
#header .header-bottom {
  background: var(--kk-cream);
}

#header .header-bottom {
  border-block: 1px solid var(--kk-line);
}

#header .site-name img {
  height: 34px;
  width: auto;
  max-width: 100%;
}

#header .navigation-buttons,
#header .navigation-buttons a,
#header .navigation-buttons button {
  background: transparent;
}

#navigation .menu-level-1 > li > a {
  text-transform: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--kk-forest);
}

#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a:focus {
  color: var(--kk-coral);
}

.menu-level-2 {
  background: var(--kk-cream-soft);
  border-radius: var(--kk-r-md);
}

@media (min-width: 768px) {
  #header .header-top-wrapper .site-name { order: -1; width: auto; flex: 0 0 auto; }
  #header .navigation-tools              { width: auto; flex: 0 0 auto; }
  #header .navigation-buttons            { width: auto; margin-left: auto; justify-content: flex-end; }
}

@media (max-width: 767px) {
  #header .site-name img { height: 28px; }
}


/* 3b. Informační proužek nad hlavičkou: tři sdělení, která pomáhají nákupu */
.site-msg.information {
  padding: 0;
  background: var(--kk-forest);
  color: var(--kk-cream);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  border: 0;
}

.site-msg.information .container,
.site-msg.information > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  padding: 10px var(--kk-gutter);
}

.site-msg.information span { display: inline-flex; align-items: center; gap: 8px; }
.site-msg.information .close,
.site-msg.information button { display: none; }           /* sdělení nemá jít zavřít */

.site-msg.information span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kk-coral);
}

@media (max-width: 767px) {
  .site-msg.information { position: static !important; }   /* [!] šablona ho na mobilu připíná přes obsah */
}

@media (max-width: 599px) {
  .site-msg.information span + span { display: none; }   /* na telefonu jen první sdělení */
}


/* 4. Tlačítka a formuláře
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--kk-r-pill);
  font-family: "Google Sans", sans-serif;
  font-weight: 500;
}

.btn-primary,
.btn-conversion,
.add-to-cart-button {
  background: var(--kk-forest);
  border-color: var(--kk-forest);
  color: var(--kk-cream-soft);
}

.btn-primary:hover,
.btn-conversion:hover,
.add-to-cart-button:hover {
  background: var(--kk-forest-deep);
  border-color: var(--kk-forest-deep);
  color: var(--kk-cream-soft);
}

input, select, textarea, .form-control {
  border-radius: var(--kk-r-sm);
  border-color: var(--kk-line);
}


/* 5. Texty v bannerech (titulek, text a odkaz se zadávají v bannerech v Návrháři)
   -------------------------------------------------------------------------- */
.extended-banner-texts {                                  /* [!] */
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left !important;
}

.extended-banner-title {                                  /* [!] */
  display: block;
  margin: 0 0 .4em !important;
  color: var(--kk-forest) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}

.extended-banner-text {                                   /* [!] */
  display: block;
  margin: 0 0 1.4em !important;
  color: var(--kk-ink-mute) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
}

.extended-banner-link {                                   /* [!] */
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  padding: .9em 2em !important;
  background: var(--kk-forest) !important;
  color: var(--kk-cream-soft) !important;
  border-radius: var(--kk-r-pill) !important;
  font-weight: 500;
}


/* 6. Úvodní stránka
   -------------------------------------------------------------------------- */

/* 6a. Společný rám: carousel, dlaždice a banner v zápatí mají šířku obsahu */
body .banners-row {                                       /* [!] řádek s carouselem a dlaždicemi: na střed */
  max-width: var(--kk-container);
  margin: var(--kk-gap) auto 0 !important;
  padding-inline: var(--kk-gutter);
}

.wide-carousel { max-width: none; margin: 0; padding: 0; }

.homepage-banners-full-width .banners-content {
  max-width: var(--kk-container);
  margin: var(--kk-gap) auto 0;
  padding-inline: var(--kk-gutter);
}

.homepage-banners-full-width,
.benefit-banners-full-width {
  background: transparent;
}

.carousel,
.carousel-inner,
.carousel .item,
.banner-wrapper,
.banner-wrapper img {
  border-radius: var(--kk-r-lg);
  overflow: hidden;
  background: transparent;
}

/* 6b. Carousel: text přes fotku, na mobilu pod ní */
.carousel .extended-banner-texts {                        /* [!] */
  position: absolute !important;
  top: 50% !important;
  left: 7% !important;
  right: auto !important;
  bottom: auto !important;
  width: 44% !important;
  max-width: 620px;
  transform: translateY(-50%);
}

.carousel .extended-banner-title { font-size: clamp(30px, 4.3vw, 66px) !important; }
.carousel .extended-banner-text  { font-size: clamp(14px, 1.3vw, 19px) !important; }

/* 6c. Dlaždice pod carouselem: karty jako na webu.
   Nahoře portrétní fotka se štítkem (pole "Text odkazu" banneru), pod ní krémový panel
   s nadpisem, popisem a kulatým tlačítkem se šipkou. */
.next-to-carousel-banners {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;                                   /* všechny karty stejně vysoké */
  gap: var(--kk-gap);
  margin-top: var(--kk-gap);
}

.next-to-carousel-banners .banner-wrapper {
  margin: 0;
  background: var(--kk-cream-soft);
  box-shadow: 0 6px 22px rgba(47, 59, 47, .05), 0 1px 2px rgba(47, 59, 47, .04);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}

.next-to-carousel-banners .banner-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(47, 59, 47, .14), 0 4px 10px rgba(47, 59, 47, .05);
}

.next-to-carousel-banners a {
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  aspect-ratio: auto;
}

.next-to-carousel-banners a img {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
}

.next-to-carousel-banners a::after { content: none; }

.next-to-carousel-banners .extended-banner-texts {        /* [!] */
  position: static !important;
  display: block !important;
  width: auto !important;
  padding: 22px 76px 26px 24px !important;
  transform: none !important;
  flex: 1;
}

.next-to-carousel-banners .extended-banner-title {        /* [!] */
  margin: 0 0 8px !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  color: var(--kk-forest) !important;
}

.next-to-carousel-banners .extended-banner-text {         /* [!] */
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--kk-ink-mute) !important;
  opacity: 1;
}

/* Štítek v rohu fotky */
.next-to-carousel-banners .extended-banner-link {         /* [!] */
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px !important;
  background: var(--kk-cream-soft) !important;
  color: var(--kk-forest) !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--kk-r-pill) !important;
}

.next-to-carousel-banners .extended-banner-link::after { display: none !important; }   /* [!] šipka ze šablony */

/* Kulaté tlačítko se šipkou v rohu panelu */
.next-to-carousel-banners .extended-banner-texts::after {
  content: "\2197";
  position: absolute;
  right: 22px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kk-line);
  border-radius: 50%;
  font-size: 16px;
  color: var(--kk-forest);
  transition: background .3s, color .3s;
}

.next-to-carousel-banners .banner-wrapper:hover .extended-banner-texts::after {
  background: var(--kk-forest);
  color: var(--kk-cream-soft);
}

/* 6d. Konkurenční výhody: čtyři stejné karty v rámu obsahu */
.benefit-banners-full-width { margin-block: clamp(32px, 5vw, 64px); }

.benefit-banners-full-width .container-full-width {      /* [!] */
  width: 100%;
  max-width: none;
  padding: 0;
}

.benefitBanner {                                          /* [!] */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));  /* 4 na úvodní, 3 na detailu */
  gap: var(--kk-gap);
  max-width: var(--kk-container);
  margin-inline: auto;
  padding-inline: var(--kk-gutter);
}

.benefitBanner__item {                                    /* [!] */
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.benefitBanner__item > a,
.benefitBanner__item:not(:has(> a)) {                     /* banner s odkazem i bez něj */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 22px 24px;
  background: var(--kk-cream-soft);
  border-radius: var(--kk-r-md);
  text-align: left !important;
}

body .benefitBanner__item:not(:has(> a)) {                /* [!] bez odkazu: stejná karta jako s odkazem */
  padding: 22px 24px !important;
  gap: 16px;
}

.benefitBanner__item:not(:has(> a)) > div {              /* [!] bez odkazu je obsah přímo v položce */
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

.benefitBanner__item:not(:has(> a)) { flex-direction: row !important; }

.benefitBanner__picture { flex: 0 0 60px; margin: 0 !important; }

.benefitBanner__picture img,
.benefitBanner__link img { width: 60px !important; height: 60px !important; }

.benefitBanner__content { padding: 0 !important; text-align: left !important; }

.benefitBanner__title {
  display: block;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  color: var(--kk-forest) !important;
}

.benefitBanner__data {
  font-size: 14px !important;
  line-height: 1.35;
  color: var(--kk-ink-mute) !important;
}

/* 6e. Banner v zápatí (O nás): fotka vlevo, text vpravo */
.footer-banners .banner-wrapper { margin: 0 0 var(--kk-gap); }

.footer-banners a {
  display: flex !important;
  background: var(--kk-cream-soft);
  border-radius: var(--kk-r-lg);
  overflow: hidden;
}

.footer-banners a img { width: 50%; object-fit: cover; }

.footer-banners .extended-banner-texts {                  /* [!] */
  position: static !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50% !important;
  padding: clamp(24px, 4vw, 64px) !important;
}

.footer-banners .extended-banner-title { font-size: clamp(26px, 3vw, 46px) !important; }
.footer-banners .extended-banner-text  { font-size: clamp(14px, 1.2vw, 17px) !important; }


/* 6f. Nadpis sekce a karty produktů na úvodní stránce */
.homepage-group-title {
  margin: 0 0 28px !important;
  text-align: center;
  font-size: clamp(28px, 3vw, 44px) !important;
  font-weight: 500 !important;
  letter-spacing: -.02em;
  color: var(--kk-forest) !important;
}

.homepage-group-title::before {
  content: "Z naší nabídky";
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kk-coral);
}

@media (min-width: 1190px) {
  /* Produkty na úvodní stránce: vystředěná mřížka, max. 3 v řadě.
     Šablona z nich dělá posuvný slider s pevnou šířkou, tady se místo posunu zalamují. */
  [class*="homepage-products-"] {                                    /* [!] */
    left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  [class*="homepage-products-"] .products-block {                    /* [!] */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kk-gap);
    width: 100%;
  }

  [class*="homepage-products-"] .products-block .product {           /* [!] */
    float: none !important;
    width: calc(33.333% - 11px) !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }

}

.products-block .product .p { padding: 14px 14px 22px; text-align: center; }
.products-block .product .image { display: block; border-radius: 16px; overflow: hidden; }
.products-block .p-desc { display: none; }
body .products-block .p-code { display: none !important; } /* [!] */

.products-block .product .name { font-size: 17px; font-weight: 500; color: var(--kk-forest); }
.products-block .prices { margin-top: 6px; }
.products-block .prices strong,
.products-block .price-final strong { font-size: 18px; font-weight: 500; }

.products-block .availability { margin: 8px 0 14px; }

.products-block .availability span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--kk-r-pill);
  background: rgba(47, 59, 47, .08);
  color: var(--kk-ink-mute) !important;
  font-size: 13px;
  font-weight: 400;
}


/* 7. Produkty: karty, kategorie, detail
   -------------------------------------------------------------------------- */
.product .p,
.products-block .product {
  background: var(--kk-cream-soft);
  border: 0;
  border-radius: var(--kk-r-md);
  overflow: hidden;
}

.price-final,
.price-final strong {
  color: var(--kk-forest);
  font-weight: 500;
}

.flag,
.flag-action,
.flag-new,
.flag-tip {
  background: var(--kk-coral);
  color: #fff;
  border-radius: var(--kk-r-pill);
}

body .flag-new { background: var(--kk-forest); }          /* [!] */

.subcategories li a,
.subcategories .text { border-radius: var(--kk-r-md); }

.breadcrumbs,
.breadcrumbs-wrapper { background: transparent; }

.listSorting__control,
.listSorting__control--current {
  background: var(--kk-cream-soft);
  color: var(--kk-forest);
  border-radius: var(--kk-r-pill);
}

.products .product .btn {
  background: transparent;
  border: 1px solid var(--kk-forest);
  color: var(--kk-forest);
}

.products .product .btn:hover {
  background: var(--kk-forest);
  color: var(--kk-cream-soft);
}

/* Miniatury z Shoptetu mají bílé okraje – ať splynou s kartou */
.products .image img,
.p-main-image img,
.p-thumbnails img { mix-blend-mode: multiply; }

body #tab-content,                                        /* [!] */
body .shp-tab-link,
body .shp-tab-link.active {
  background: var(--kk-cream-soft) !important;
  border-radius: var(--kk-r-md);
}

body .p-image-wrapper,                                    /* [!] */
body .p-image-wrapper .p-image,
body a.p-main-image,
body .p-image #wrap {
  background: var(--kk-cream-soft) !important;
  border-radius: var(--kk-r-md);
}

body .p-main-image img { mix-blend-mode: multiply !important; } /* [!] */


/* 7b. Detail produktu: fotka vedle informací, výrazná cena a tlačítko */
.p-detail-inner {
  align-items: flex-start;
  gap: clamp(20px, 3vw, 48px);
}

body .p-image-wrapper {                                   /* [!] */
  align-self: flex-start;
  padding: 0 !important;
  overflow: hidden;
}

.p-image-wrapper .p-image,
.p-image-wrapper .p-image img { width: 100%; }

.p-detail-inner-header h1 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.p-short-description {
  color: var(--kk-ink-mute);
  font-size: 16px;
  line-height: 1.55;
}

.p-final-price-wrapper .price-final,
.p-final-price-wrapper .price-final strong {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
}

.add-to-cart-button,
.pr-action .btn-conversion {
  padding: 1em 2.4em;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(47, 59, 47, .18);
}

.quantity input.amount { border-radius: var(--kk-r-pill); }

.subcategories li a,
.subcategories .text { white-space: normal; }             /* celý název podkategorie */

/* 8. Patička
   -------------------------------------------------------------------------- */
#footer,
#footer .footer-rows {
  background: var(--kk-forest);
  color: var(--kk-cream);
}

#footer a,
#footer h2, #footer h3, #footer h4 { color: var(--kk-cream); }
#footer a:hover { color: var(--kk-pink); }

#footer .footer-bottom-full-width { background: var(--kk-forest-deep); color: var(--kk-cream); }
#footer .footer-bottom            { background: transparent; color: var(--kk-cream); }
#footer .footer-bottom *          { color: inherit; }

#footer .footer-rows { padding-block: 56px 28px; }

/* Tři sloupce patičky: stejně široké, na středu */
body #footer .custom-footer {                             /* [!] */
  display: flex !important;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  margin: 0 !important;
}

body #footer .custom-footer > * {                         /* [!] */
  float: none !important;
  flex: 1 1 0;
  width: auto !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  body #footer .custom-footer { flex-direction: column; gap: 32px; }
  body #footer .custom-footer > * { flex: 0 0 auto; }     /* v sloupci nesmí mít výšku 0, jinak se bloky překrývají */
}


/* Textové bloky v patičce (Prodejny, Nákup) mají vzhled jako blok Kontakt */
#footer .custom-footer h3,
#footer .custom-footer h4 {
  margin: 0 0 18px !important;                            /* „Kontakt“ (h3) měl 40 px nahoře a byl níž než ostatní sloupce */
  font-size: 20px;
  font-weight: 500;
  color: var(--kk-cream);
}

#footer .custom-footer h3::after,
#footer .custom-footer h4::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 14px;
  background: var(--kk-cream);
}

#footer .custom-footer p { margin: 0 0 14px; line-height: 1.6; }
#footer .custom-footer a:not(.social-icon) { color: var(--kk-cream) !important; text-decoration: none; }   /* [!] */
#footer .banner-wrapper { overflow: visible; border-radius: 0; }   /* zaoblení z úvodní stránky by ořezávalo text */
#footer .custom-footer a:not(.social-icon):hover { text-decoration: underline; }

#footer .social-icon       { background: var(--kk-cream); color: var(--kk-forest); }
#footer .social-icon:hover { background: var(--kk-pink); }


/* 9. Responzivita
   Breakpointy: desktop od 1024 px, tablet 600–1023 px, telefon do 599 px.
   -------------------------------------------------------------------------- */

/* Tablet a menší notebook */
@media (max-width: 1023px) {
  .next-to-carousel-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .carousel .extended-banner-texts { left: 6% !important; width: 52% !important; }
  .carousel .extended-banner-text  { display: none; }   /* na tabletu zůstane titulek a tlačítko */

}

/* Telefon */
@media (max-width: 599px) {
  .carousel,
  .carousel-inner,
  .carousel .item,
  .banner-wrapper,
  .banner-wrapper img { border-radius: 18px; }

  /* Carousel: text pod fotkou místo přes ni; fotka se ořízne na kytici/věnec */
  .carousel .item { background: var(--kk-cream); }           /* stejný odstín jako pozadí fotek */
  .carousel .item a { display: block; }
  .carousel .item img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 80% 50%; }

  .carousel .extended-banner-texts {                      /* [!] */
    position: static !important;
    width: 100% !important;
    max-width: none;
    padding: 18px 22px 24px !important;
    transform: none !important;
  }

  .carousel .extended-banner-title { font-size: 26px !important; }
  .carousel .extended-banner-text  { display: block; font-size: 15px !important; }

  /* Dlaždice: pod sebe, nižší, aby se nemusely dlouho rolovat */
  .next-to-carousel-banners { grid-template-columns: minmax(0, 1fr); }
  .next-to-carousel-banners a img { aspect-ratio: 4 / 3; }

  /* Banner O nás: fotka nad textem */
  .footer-banners a { flex-direction: column; }
  .footer-banners a img,
  .footer-banners .extended-banner-texts { width: 100% !important; }
  .footer-banners .extended-banner-texts { padding: 20px 22px 26px !important; }

  /* Výhody: pod sebou jako kompaktní řádky, menší ikony */
  .benefitBanner {                                        /* [!] */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .benefitBanner__item > a { padding: 14px 18px; }
  body .benefitBanner__item:not(:has(> a)) { padding: 14px 18px !important; }

  .benefitBanner__item { width: auto !important; max-width: none !important; }

  .benefitBanner__picture img,
  .benefitBanner__link img { width: 56px; height: 56px; }
}

/* 10. Audit UX (2026-10-01): klikací plochy, čitelnost, drobnosti */
.site-msg.information a { color: var(--kk-cream) !important; text-decoration: underline; text-underline-offset: 3px; }   /* [!] */

#footer .custom-footer p a {                              /* odkazy v patičce: min. 44 px na dotyk */
  display: inline-block;
  padding-block: 7px;
}

#footer .signature a,
#footer .signature a.title,
#footer #signature a { color: var(--kk-cream) !important; opacity: .75; }   /* [!] podpis Shoptetu byl tmavý na tmavém */

@media (max-width: 767px) {
  .carousel-control { width: 44px; }                      /* šipky carouselu: dotyková plocha */
  #footer .custom-footer p a { padding-block: 10px; }
}

/* Úsporné animace pro lidi, kterým vadí pohyb */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


/* 11. Produkty: jednotné čtvercové fotky, na úvodní stránce bez šipek slideru */
body .products .product .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 1190px) {
  body [class*="homepage-products-"] ~ .product-slider-navigation,
  body [class*="homepage-products-"] ~ .product-slider-pagination { display: none !important; }
}

/* 12. Mezery mezi kartami produktů na úvodní stránce (šablona přebíjela gap a šířku) */
@media (min-width: 1190px) {
  body [class*="homepage-products-"] .products-block {
    gap: 20px !important;
    column-gap: 20px !important;
  }

  body [class*="homepage-products-"] .products-block .product {
    width: calc((100% - 40px) / 3) !important;
  }
}


/* 13. Informační proužek: spany jsou ve vnořeném .text, tečky centrované v mezeře */
body .site-msg.information .text {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 32px;
}

body .site-msg.information span { position: relative; display: inline-block; line-height: 1.4; }

body .site-msg.information span + span::before {
  position: absolute;
  left: -18px;                                            /* střed tečky = polovina mezery 32 px */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
}

@media (max-width: 767px) {
  body .site-msg.information span + span::before { display: none; }
}


/* 14. Štítky produktů (Novinka, Akce) stejně jako štítky kategorií: v rohu fotky, 16 px od okraje */
body .product .flags {
  top: 30px;                                              /* fotka začíná 14 px od okraje karty + 16 px */
  left: 30px;
}

body .product .flags .flag {
  padding: 8px 16px;
  background: var(--kk-cream-soft);
  color: var(--kk-forest);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--kk-r-pill);
}

body .product .flags .flag-new { background: var(--kk-cream-soft); }

/* Novinka a Akce výrazně v korálové */
body .product .flags .flag,
body .product .flags .flag-new,
body .product .flags .flag-action,
body .product .flags .flag-tip {
  background: var(--kk-coral);
  color: #fff;
  font-weight: 600;
}


/* 15. Výpis kategorie: mřížka s mezerami, řazení jako přepínač, bez neověřených plateb */
body #products.products-page {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 !important;
}

body #products.products-page .product {
  float: none !important;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

body #products.products-page .product .p { height: 100%; }

body .category-content-wrapper .listSorting { margin: 0 0 20px; }

body .listSorting__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .listSorting__control {
  box-shadow: none !important;
  background: transparent !important;
  border: 1px solid rgba(47, 59, 47, .25) !important;
  border-radius: var(--kk-r-pill) !important;
  padding: 10px 22px !important;
  font-size: 15px;
  font-weight: 500;
  color: var(--kk-forest) !important;
  cursor: pointer;
}

body .listSorting__control:hover { border-color: var(--kk-forest) !important; }

body .listSorting__control--current {
  background: var(--kk-forest) !important;
  border-color: var(--kk-forest) !important;
  color: var(--kk-cream) !important;
}

body .listSorting__control::before,
body .listSorting__control::after { display: none !important; }

body .box-onlinePayments { display: none !important; }    /* platba kartou zatím není ověřená */

body .pagination-wrapper,
body .pagination { margin-top: 28px; text-align: center; }

@media (max-width: 1023px) {
  body #products.products-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  body #products.products-page { gap: 12px; }
  body .listSorting__control { padding: 8px 16px !important; font-size: 14px; }
}


/* 16. Detail produktu: bez postranního panelu (fotka dostane šířku), štítek jako na kartách, bez šumu */
body.type-detail .sidebar,
body.type-detail .sidebar-left { display: none !important; }

body.type-detail main.content,
body.type-detail .content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin-left: 0 !important;
}

body .p-image-wrapper { position: relative; }

body .p-image-wrapper .flags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
}

body .p-image-wrapper .flags .flag {
  padding: 8px 16px;
  background: var(--kk-coral);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--kk-r-pill);
}

body .sold-out-wrapper,                                   /* „Položka byla vyprodána…“ u neobjednatelných produktů */
body.type-detail .p-code { display: none !important; }

/* Posuvník ceny ve filtru: kulaté úchyty */
body .ui-slider-handle {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--kk-forest) !important;
  border: 3px solid var(--kk-cream-soft) !important;
  box-shadow: 0 2px 6px rgba(47, 59, 47, .3);
  top: -9px !important;
}

body .ui-slider-handle > * { display: none !important; }

body .detail-parameter-product-code { display: none !important; }   /* interní kód produktu zákazníka nezajímá */

@media (max-width: 599px) {
  body .site-msg.information span + span { display: none !important; }   /* na telefonu jen první sdělení */
}


/* 17. Řazení: bez krémového pásu, pilulky přímo na pozadí, mezera před produkty */
body .listSorting,
body .listSorting__controls,
body .category-content-wrapper .listSorting {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

body .category-content-wrapper .listSorting { margin: 0 0 24px !important; }

body .listSorting__control:not(.listSorting__control--current) { background: var(--kk-cream-soft) !important; }

body .category-header { background: transparent !important; padding: 0 0 4px !important; }


/* 18. Detail produktu: dvě karty vedle sebe (fotka + informace), kompaktní akce, jednotné záložky */
@media (min-width: 768px) {
  body.type-detail .p-detail-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
    align-items: stretch;
  }

  body.type-detail .p-image-wrapper { order: 1; aspect-ratio: 1 / 1; align-self: start; }
  body.type-detail .p-data-wrapper  { order: 2; }
}

body.type-detail .p-data-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.4vw, 52px);
  background: var(--kk-cream-soft);
  border-radius: var(--kk-r-md);
}

body.type-detail .p-image-wrapper,
body.type-detail .p-image-wrapper .p-image,
body.type-detail .p-image-wrapper a.p-main-image { height: 100%; }

body.type-detail .p-image-wrapper img.p-main-image,
body.type-detail .p-image-wrapper a.p-main-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

body.type-detail .p-detail-inner-header h1 { margin: 0 0 16px; }
body.type-detail .p-short-description { margin: 0 0 24px; }

body .p-price-wrapper { margin: 0 0 12px; }

body .detail-parameter-availability {                     /* dostupnost jako pilulka jako na kartách */
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--kk-r-pill);
  background: rgba(47, 59, 47, .08);
}

body .detail-parameter-availability,
body .detail-parameter-availability * {
  color: var(--kk-ink-mute) !important;                   /* přebíjí inline červenou ze šablony */
  font-size: 14px;
  font-weight: 500;
}

body .availability-desc-label { display: none; }

body .detail-parameters { margin: 0 0 24px; }

body .social-buttons-wrapper { margin: 8px 0 0 !important; }

body .social-buttons-wrapper .link-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body .social-buttons-wrapper .link-icon {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 9px 18px;
  border: 1px solid rgba(47, 59, 47, .25);
  border-radius: var(--kk-r-pill);
  color: var(--kk-forest);
  font-size: 14px;
}

body .social-buttons-wrapper .link-icon:hover { border-color: var(--kk-forest); }

/* Výhody pod produktem: celá šířka obsahu, bližší k produktu */
body.type-detail .benefitBanner {
  margin: clamp(20px, 2.4vw, 32px) 0 !important;
  padding: 0 !important;
}

/* Záložka Popis: pilulka jako řazení, obsah v jedné kartě */
body .shp-tabs-wrapper,
body .shp-tabs { background: transparent !important; border: 0 !important; box-shadow: none !important; }

body .shp-tab-link,
body .shp-tab-link.active {
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: var(--kk-r-pill) !important;
  background: var(--kk-forest) !important;
  color: var(--kk-cream) !important;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none !important;
}

body #tab-content {
  margin-top: 16px;
  padding: clamp(24px, 3vw, 40px) !important;
}

body #tab-content .basic-description h4 { margin: 0 0 12px; font-size: 20px; }
body #tab-content .basic-description p { line-height: 1.6; max-width: 70ch; }

/* 18b. Opravy detailu: clearfix pseudo-prvky nesmí být položky mřížky, šířky z Bootstrapu */
body.type-detail .p-detail-inner::before,
body.type-detail .p-detail-inner::after { display: none !important; content: none !important; }

body.type-detail .p-data-wrapper,
body.type-detail .p-image-wrapper {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

body.type-detail .p-image-wrapper a.p-main-image { display: block; width: 100%; height: 100%; }

/* Popis: jedna karta, odstup od patičky */
body .p-detail-full-width {
  background: transparent !important;
  padding: 0 0 clamp(40px, 5vw, 72px) !important;
}

body #tab-content { box-shadow: none !important; }

body .social-buttons-wrapper .link-icon {
  margin: 0 !important;
  line-height: 1;
}

body .social-buttons-wrapper .link-icon * { margin: 0 !important; }

/* 18c. Detail: zarovnání s ostatními bloky, kompaktnější rytmus, čistý pás záložek */
body .p-detail-full-width .container-full-width { padding: 0 !important; }
body .p-detail-full-width .row { margin: 0 !important; }
body .p-detail-full-width .col-sm-12 { padding: 0 !important; }

body .shp-tabs,
body .shp-tab,
body .p-detail-tabs,
body .p-detail-tabs-wrapper ul,
body .p-detail-tabs-wrapper li { background: none !important; border: 0 !important; box-shadow: none !important; }

body .p-detail-tabs-wrapper::before,
body .p-detail-tabs-wrapper::after,
body .shp-tabs::before,
body .shp-tabs::after { display: none !important; }

body.type-detail .p-short-description { margin: 0 0 12px !important; }
body .p-price-wrapper { margin: 0 0 16px !important; }
body .p-detail-inner-header h1 { margin: 0 0 12px !important; }

body .shp-tabs-holder,
body .shp-tabs-row { background: transparent !important; box-shadow: none !important; border: 0 !important; }


/* 19. Úvodní stránka: společná osa, rytmus sekcí, hero jako karta (ladí se v demu) */
@media (min-width: 1190px) {
  body.type-index .product-slider-holder,
  body.in-index .product-slider-holder {
    margin-inline: -16px;                                   /* karty produktů přesně pod šířkou dlaždic */
    width: calc(100% + 32px);
    padding: 0 !important;
  }

}

body .homepage-group-title { margin-top: clamp(48px, 6vw, 88px) !important; }

body .homepage-group-title::before { content: "Z naší nabídky"; }
body .homepage-group-title ~ .homepage-group-title::before { content: "Čerstvě navázané"; }

body .carousel {                                          /* hero bez karty a bez stínu (jako na webu) */
  background: transparent !important;
  box-shadow: none !important;
}

body .wide-carousel { margin-bottom: 28px; }              /* mezera mezi hero a dlaždicemi */

/* Karty produktů: výraznější cena a název */
body .products-block .product .name { font-size: 18px; }
body .products-block .prices strong,
body .products-block .price-final strong { font-size: 20px; font-weight: 600; }


/* 20. Výhody: jednotné zarovnání vlevo, stejně velké ikony, čistá responzivita (3 → 1 sloupec) */
body .benefitBanner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

body .benefitBanner__item > a,
body .benefitBanner__item:not(:has(> a)) {
  justify-content: flex-start !important;                 /* dřív se obsah vystředil a každá karta vypadala jinak */
  gap: 14px;
}

body .benefitBanner__picture {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body .benefitBanner__picture img,
body .benefitBanner__link img {                           /* piktogram je v PNG malý, kruh splývá s kartou */
  width: 84px !important;
  height: 84px !important;
  max-width: none;
  flex: none;
}

body .benefitBanner__content { flex: 1 1 auto; min-width: 0; }

@media (max-width: 1023px) {
  body .benefitBanner__item > a,
  body .benefitBanner__item:not(:has(> a)) {
    flex-direction: column !important;                    /* ikona nad textem, vše na střed */
    align-items: center;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 8px;
    padding: 18px !important;
  }
  body .benefitBanner__content { text-align: center !important; }
  body .benefitBanner__picture { flex-basis: 56px; width: 56px; height: 56px; }
  body .benefitBanner__picture img,
  body .benefitBanner__link img { width: 72px !important; height: 72px !important; }
}

@media (max-width: 599px) {
  body .benefitBanner { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .benefitBanner__item > a,
  body .benefitBanner__item:not(:has(> a)) {
    flex-direction: row !important;
    align-items: center;
    text-align: left !important;
    gap: 12px;
    padding: 14px 16px !important;
  }
  body .benefitBanner__content { text-align: left !important; }
}


@media (max-width: 599px) {
  body .benefitBanner { padding-inline: 0 !important; }   /* karty výhod stejně široké jako dlaždice nad nimi */
}


/* 21. Úvodní stránka do 1189 px (mobil, tablet, malý notebook): šablona tu dělá posuvník s jednou nebo dvěma kartami bez mezer
   a duplikuje položky. Přepínám na nativní posuvník (scroll-snap): karty s mezerou, přetéká až k okraji obrazovky,
   šipky po najetí obsluhuje malý skript v Zápatí <BODY> (shoptet/zapati.html). */
@media (max-width: 1189px) {
  body { overflow-x: clip; }                              /* posuvník přetéká k okraji, stránka se ale nesmí posouvat do strany */

  body [class*="homepage-products-"] {
    left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  body .product-slider-holder { padding: 0 !important; margin-inline: -16px; width: calc(100% + 32px); overflow: visible !important; position: relative; }

  body .product-slider-holder > .product-slider-pagination { display: none !important; }

  body [class*="homepage-products-"] .products-block {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;                              /* od okraje k okraji obrazovky */
    max-width: none !important;
    margin-inline: calc(-1 * var(--kk-gutter));
    padding-inline: var(--kk-gutter);                     /* první karta začíná na ose obsahu */
    scroll-padding-inline: var(--kk-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none;
  }

  body [class*="homepage-products-"] .products-block::-webkit-scrollbar { display: none; }

  body [class*="homepage-products-"] .products-block .product {
    flex: 0 0 calc((100% - 16px) / 2.3) !important;       /* tablet: dvě a kousek třetí */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  /* duplicity posuvníku: 1 na každé straně (5 položek) nebo 2 (7 položek) */
  body .products-block .product:nth-child(1):nth-last-child(5),
  body .products-block .product:nth-child(5):nth-last-child(1),
  body .products-block .product:nth-child(1):nth-last-child(7),
  body .products-block .product:nth-child(2):nth-last-child(6),
  body .products-block .product:nth-child(6):nth-last-child(2),
  body .products-block .product:nth-child(7):nth-last-child(1) { display: none !important; }

  /* šipky šablony: kulaté, viditelné po najetí myší (na dotykových zařízeních se jen táhne) */
  body .product-slider-holder > .product-slider-navigation {
    display: block !important;
    position: absolute;
    top: 38%;
    z-index: 5;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kk-cream-soft);
    color: var(--kk-forest);
    box-shadow: 0 6px 18px rgba(47, 59, 47, .25);
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .2s;
  }
  body .product-slider-holder > .navigation-prev { left: 8px; right: auto; }
  body .product-slider-holder > .navigation-next { right: 8px; left: auto; }
}

@media (max-width: 1189px) and (hover: hover) {
  body .product-slider-holder:hover > .product-slider-navigation { opacity: 1 !important; pointer-events: auto; }
}

@media (max-width: 767px) {
  body .product-slider-holder { margin-inline: 0; width: auto; }   /* na telefonu už obsah nemá vnitřní odsazení navíc */
}

@media (max-width: 599px) {
  body [class*="homepage-products-"] .products-block { gap: 12px; }
  body [class*="homepage-products-"] .products-block .product { flex-basis: 62% !important; }   /* telefon: jedna a kousek druhé */
}


/* 22. Hero: banner je obyčejná fotka (ne hotová kompozice), rozložení dělá CSS:
   na desktopu text vlevo a fotka vpravo, na mobilu fotka nahoře a text pod ní. */
body .carousel .item > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(8px, 2vw, 24px) 0;                      /* bez karty: text na ose obsahu jako na webu */
  background: transparent !important;
}

body .carousel .item > a > img {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-height: 540px;
  object-fit: cover;
  border-radius: var(--kk-r-md);
  transform: none;
}

body .carousel .item > a > .extended-banner-texts {
  grid-column: 1;
  grid-row: 1;
  position: static !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

body .carousel .extended-banner-text { display: block !important; }

body .carousel,
body .carousel-inner { min-height: 0 !important; height: auto !important; box-shadow: none !important; }

body .carousel .item,
body .carousel-inner { background: transparent !important; }   /* šablona počítá výšku z 1920×940 */

@media (max-width: 767px) {
  body .carousel .item > a {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 8px;
  }
  body .carousel .item > a > img { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; max-height: none; }
  body .carousel .item > a > .extended-banner-texts { grid-column: 1; grid-row: 2; padding: 0 !important; }
  body .carousel .extended-banner-title { font-size: 26px !important; }
  body .carousel .extended-banner-text { font-size: 15px !important; }
}


/* 23. Šipky hero carouselu: klikací plocha je vysoký pruh přes celou výšku hero (snadno se trefí),
   vidět je jen kulaté tlačítko uprostřed – stejné jako u posuvníku produktů. Ukáže se po najetí na hero nebo boční pruh. */
body .carousel { overflow: visible !important; }
body .carousel-inner { overflow: hidden; }

body .carousel-control {
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: 0 !important;
  bottom: 0 !important;
  width: max(44px, var(--kk-gutter)) !important;          /* celá mezera vedle obsahu, ne přes text ani fotku */
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;                        /* šablona ovladače vypíná pro kliknutí */
  z-index: 5;
  cursor: pointer;
}

body .carousel-control.left  { left:  calc(-1 * var(--kk-gutter)) !important; right: auto !important; }
body .carousel-control.right { right: calc(-1 * var(--kk-gutter)) !important; left: auto !important; }

body .carousel-control::before {                          /* viditelné tlačítko: kruh se šipkou */
  position: static !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 50%;
  background: var(--kk-cream-soft) !important;
  box-shadow: 0 6px 18px rgba(47, 59, 47, .25);
  color: var(--kk-forest) !important;
  font-size: 16px !important;
  line-height: 44px !important;
  text-align: center;
  opacity: 0;                                             /* tlačítko se ukáže po najetí na hero nebo na boční pruh */
  transition: opacity .2s, transform .15s, box-shadow .15s;
}

@media (hover: hover) {
  body .carousel:hover .carousel-control::before { opacity: 1; }
}

@media (hover: none), (max-width: 1189px) {
  body .carousel-control::before { opacity: 1; }         /* tablet a mobil: tlačítka jsou vidět pořád */
}

body .carousel-control:focus-visible::before { opacity: 1; }

body .carousel-control:hover::before {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 22px rgba(47, 59, 47, .32);
}

body .carousel-control:focus-visible::before { outline: 2px solid var(--kk-forest); outline-offset: 2px; }

@media (max-width: 767px) {
  body .carousel-control {                                /* pruh přes výšku fotky (4:3 nahoře) */
    top: 0 !important;
    bottom: auto !important;
    height: calc((100vw - 2 * var(--kk-gutter)) * .75) !important;
    width: 56px !important;
  }
  body .carousel-control.left  { left: 0 !important; }
  body .carousel-control.right { right: 0 !important; }
}

/* Odstup posledních produktů od patičky na úvodní stránce */
body.type-index .content-wrapper { padding-bottom: clamp(48px, 6vw, 96px); }


/* 24. Rytmus mezer na úvodní stránce (8px mřížka, pravidlo blízkosti):
   sekce od sekce = --kk-section, související bloky = --kk-related, nadpis k obsahu = --kk-heading. */
:root {
  --kk-section: clamp(56px, 7vw, 96px);
  --kk-related: clamp(20px, 2.5vw, 32px);
  --kk-heading: 24px;
}

body.type-index .banners-row { margin-top: clamp(32px, 4vw, 56px) !important; }  /* hlavička → hero */
body.type-index .wide-carousel { margin-bottom: 0 !important; }
body.type-index .next-to-carousel-banners { margin-top: var(--kk-section) !important; margin-bottom: 0 !important; }   /* hero → dlaždice: stejně jako ostatní sekce */

body.type-index .benefit-banners-full-width {                                  /* dlaždice → výhody → produkty */
  margin-top: var(--kk-section) !important;               /* jen svisle: vodorovné okraje šablona používá k roztažení na šířku */
  margin-bottom: 0 !important;
  padding-block: 0 !important;
}

body.type-index .benefitBanner { margin-block: 0 !important; }                /* šablona přidávala 40 px nahoře i dole */

/* výhody na stejné ose jako dlaždice a produkty (šablona je roztahovala přes 100vw s posunem o šířku posuvníku) */
body.type-index .benefit-banners-full-width {
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  width: auto !important;
}
body.type-index .benefitBanner { max-width: none !important; padding-inline: 0 !important; }

@media (max-width: 767px) {
  body.type-index .benefit-banners-full-width { margin-left: 0 !important; margin-right: 0 !important; }
}

body.type-index .homepage-group-title {
  margin-top: var(--kk-section) !important;
  margin-bottom: var(--kk-heading) !important;
  padding: 0 !important;
}

body.type-index .product-slider-holder { margin-top: 0 !important; margin-bottom: 0 !important; }
body.type-index .content-wrapper { padding-bottom: var(--kk-section) !important; }   /* poslední sekce → patička */

@media (max-width: 599px) {
  body.type-index .banners-row { margin-top: 24px !important; }
}