/* =========================================================
   La Craftia – styly.css
   Verze 14 (20. 10. 2026) – sjednoceno s brand manuálem La Craftia
   Barvy, písma, zaoblení a pravidla bere z tokenů manuálu
   (kapitoly Barvy, Písmo a Použití v praxi).
   ========================================================= */

:root {
  /* Značkové barvy */
  --zelena-lesni: #4B745F;   /* nadpisy, odkazy, hlavní tlačítko */
  --salvej: #7C9E90;         /* jen plochy, štítek Právě vybaleno */
  --ruzova: #C88079;         /* jen plochy, štítek Srdcovka */
  --zluta: #E2C383;          /* jen plochy a zvýraznění, nikdy text */
  --ruzova-text: #95534D;    /* růžová pro malý text */

  /* Text na barevných plochách */
  --na-zelene: #FFFFFF;      /* text na zelena-lesni */
  --na-barve: #1E2A24;       /* text na salvej, ruzova, zluta (nikdy bílá) */

  /* Neutrální */
  --papir: #FBF8F2;          /* pozadí stránky */
  --papir-bila: #FFFFFF;     /* karty a dlaždice */
  --inkoust: #26332C;        /* hlavní text */
  --inkoust-tlumeny: #5E6B63;/* popisky a meta údaje */
  --linka: #E6DFD2;
  --linka-silna: #8C8576;    /* obrysy polí a vedlejších tlačítek */

  /* Světlé tinty */
  --zluta-svetla: #F7EEDB;   /* pozadí sekcí, informační pruh */
  --ruzova-svetla: #F5E3E0;  /* recenze, dárky */
  --salvej-svetla: #EAF1ED;  /* lišta výhod, novinky */

  /* Zaoblení a stín */
  --zaobleni-s: 6px;         /* formulářová pole */
  --zaobleni-m: 12px;        /* karty, dlaždice */
  --zaobleni-l: 24px;        /* bannery, velké fotky */
  --zaobleni-pilulka: 999px; /* tlačítka a štítky */
  --stin-karta: 0 1px 2px rgba(38,51,44,0.06), 0 6px 18px rgba(38,51,44,0.07);

  /* Písma */
  --font-nadpisy: "Bricolage Grotesque", "Mulish", system-ui, sans-serif;
  --font-text: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===== Základ: písmo, text, pozadí ===== */
body {
  background-color: var(--papir) !important;
  color: var(--inkoust);
}
body, p, a, button, input, select, textarea {
  font-family: var(--font-text);
}
body, p {
  line-height: 1.625; /* telo 16/26 */
}

#header,
#content,
.content-wrapper-in,
.breadcrumbs.navigation-home-icon-wrapper,
.container-full-width,
.welcome-wrapper,
.navigation-in,
#header .toggle-window,
#header .top-nav-button {
  background-color: var(--papir) !important;
}

/* ===== Nadpisy (Bricolage Grotesque, lesní zelená) ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.homepage-group-title,
.extended-banner-title,
.benefitBanner__title,
.blog-wrapper .title,
.pageElement__heading {
  font-family: var(--font-nadpisy) !important;
  font-optical-sizing: auto;
  color: var(--zelena-lesni) !important;
}
h1, .h1 {
  font-size: 44px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h2, .h2,
.homepage-group-title {
  font-size: 32px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

/* Odkazy */
a {
  color: var(--zelena-lesni);
}

/* Focus ring pro klávesnici */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--zelena-lesni) !important;
  outline-offset: 2px !important;
}

/* Hlavní menu – verzálky vždy s prostrkáním */
.navigation-in > ul > li > a {
  color: var(--zelena-lesni) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ===== Tlačítka: pilulky, lesní zelená, text malými písmeny ===== */
.btn.btn-primary,
.btn.btn-conversion,
.btn.btn-cart,
.p-bottom .btn,
.add-to-cart-button,
.carousel .extended-banner-link,
.homepage-banners-full-width .extended-banner-link {
  background-color: var(--zelena-lesni) !important;
  border-color: var(--zelena-lesni) !important;
  color: var(--na-zelene) !important;
  border-radius: var(--zaobleni-pilulka) !important;
  font-family: var(--font-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.btn.btn-primary:hover,
.btn.btn-conversion:hover,
.btn.btn-cart:hover,
.p-bottom .btn:hover,
.add-to-cart-button:hover,
.carousel .extended-banner-link:hover,
.homepage-banners-full-width .extended-banner-link:hover {
  background-color: var(--inkoust) !important;
  border-color: var(--inkoust) !important;
  color: var(--papir) !important;
}

/* Formulářová pole */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-color: var(--linka-silna) !important;
  border-radius: var(--zaobleni-s) !important;
}

/* ===== Carousel na HP ===== */
.extended-banner-texts {
  opacity: 0.9;
}
.carousel-wrapper {
  width: 90%;
  max-width: 2000px;
  margin: 0 auto !important;
}
.carousel, .carousel-inner {
  border-radius: var(--zaobleni-l);
}
.carousel .extended-banner-title {
  font-size: 44px !important;
  line-height: 48px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
.carousel .extended-banner-text {
  color: var(--inkoust) !important;
  font-size: 19px;
  line-height: 30px; /* perex */
}

/* ===== Bannery TOP (kategorie pod carouselem) ===== */
.next-to-carousel-banners .banner-wrapper {
  padding: 20px 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.next-to-carousel-banners .banner-wrapper:first-child {
  padding-left: 0 !important;
}
.next-to-carousel-banners .banner-wrapper:last-child {
  padding-right: 0 !important;
}
.next-to-carousel-banners .banner-wrapper img {
  transition: transform 0.3s ease;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--zaobleni-m);
  transform-origin: center center;
}
.next-to-carousel-banners .banner-wrapper:hover img {
  transform: scale(1.05);
}

/* Štítek s názvem kategorie – úzký pruh dole.
   Šablona dává textu min-height 50 % a šířku asi 64 %,
   proto se dřív místo pruhu ukazoval velký průsvitný obdélník. */
.next-to-carousel-banners .extended-banner-texts {
  position: absolute !important;
  bottom: 30px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 8px 14px !important;
  border-radius: var(--zaobleni-m) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  opacity: 1 !important;
}
.next-to-carousel-banners .banner-wrapper:first-child .extended-banner-texts {
  left: 10px !important;
}
.next-to-carousel-banners .banner-wrapper:last-child .extended-banner-texts {
  right: 10px !important;
}
.next-to-carousel-banners .extended-banner-texts .extended-banner-link {
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: 0.1em;
  color: var(--zelena-lesni) !important;
}

/* ===== Lišta výhod (USP) – plocha šalvějová tinta ===== */
.benefit-banners-full-width .container-full-width,
.container-full-width:has(.benefitBanner) {
  background-color: var(--papir) !important;
}
.benefitBanner.position--benefitHomepage {
  background-color: var(--salvej-svetla) !important;
  border-radius: var(--zaobleni-l);
  padding: 32px 24px !important;
}
.benefitBanner .benefitBanner__title {
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  color: var(--zelena-lesni) !important;
}
.benefitBanner .benefitBanner__data {
  color: var(--inkoust-tlumeny) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/* ===== Nadpisy sekcí na HP – medový akcent ===== */
.homepage-group-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 12px auto 0;
  background-color: var(--zluta);
  border-radius: var(--zaobleni-pilulka);
}

/* ===== Produktové dlaždice ===== */
.products-block .p {
  background-color: var(--papir-bila);
  border: 1px solid var(--linka) !important;
  border-radius: var(--zaobleni-m);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.products-block .p:hover {
  box-shadow: var(--stin-karta);
}
.p .name {
  font-family: var(--font-nadpisy) !important;
  font-size: 20px !important;
  line-height: 25px !important;
  font-weight: 600 !important;
  color: var(--inkoust) !important;
}
.p .price-final,
.p-detail .price-final {
  font-family: var(--font-nadpisy) !important;
  font-weight: 700 !important;
  color: var(--zelena-lesni) !important;
  font-variant-numeric: tabular-nums;
}
.p .price-final {
  font-size: 24px !important;
  line-height: 28px !important;
}
/* Krátký popis v dlaždici */
.p .p-desc {
  color: var(--inkoust-tlumeny);
  font-size: 14px;
  line-height: 20px;
}

/* Dostupnost Skladem – barva z administrace (#3c840f) je mimo paletu.
   Lepší je změnit ji přímo v administraci, tohle ji přebije do té doby. */
[style*="3c840f"],
[style*="3C840F"] {
  color: var(--zelena-lesni) !important;
}

/* ===== Štítky produktů – pilulky, text vždy na-barve ===== */
.flags-default {
  top: 12px !important;
  left: 12px !important;
  display: flex;
  gap: 8px;
}
.flag {
  width: auto !important;
  min-width: 0 !important;
  border-radius: var(--zaobleni-pilulka) !important;
  color: var(--na-barve) !important;
  font-family: var(--font-text) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px !important;
}
.flag.flag-new {            /* Právě vybaleno */
  background-color: var(--salvej) !important;
}
.flag.flag-tip {            /* Srdcovka */
  background-color: var(--ruzova) !important;
}
.flag.flag-action,
.flag.flag-discount {       /* Akce, sleva */
  background-color: var(--zluta) !important;
}

/* ===== Bannery middle + footer (Kontakt, Velkoobchod) ===== */
.homepage-banners-full-width.middle-banners,
.homepage-banners-full-width.footer-banners {
  background-color: var(--zluta-svetla) !important;
}
.homepage-banners-full-width.middle-banners .extended-banner-title,
.homepage-banners-full-width.footer-banners .extended-banner-title {
  font-size: 32px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
}
.homepage-banners-full-width.middle-banners .extended-banner-text,
.homepage-banners-full-width.footer-banners .extended-banner-text {
  color: var(--inkoust) !important;
}
.homepage-banners-full-width.middle-banners .extended-banner-link,
.homepage-banners-full-width.footer-banners .extended-banner-link {
  min-height: 48px;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center;
}

/* ===== Šířka obsahu ===== */
.content-inner {
  max-width: 1000px !important;
  margin: 0 auto !important;
}

/* ===== Detailní popis produktu ===== */
.videobanner .videopart, .photobanner .photopart {
  padding-right: 15px;
}
.videopart, .textpart, .photopart {
  width: calc(50% - 10px);
  display: inline-block;
  vertical-align: middle;
}
.photopart img {
  border-radius: var(--zaobleni-m);
}
.in-skladacky-z-papiru-navod .videobanner, .photobanner {
  margin-bottom: 0px;
}
.videobanner, .photobanner {
  margin-bottom: 30px;
}

/* ===== Články na HP ===== */
.blog-wrapper .image img {
  border-radius: var(--zaobleni-l);
}
.blog-wrapper .image+.text {
  background: rgba(255, 255, 255, 0.92);
  padding: 20px;
  width: fit-content;
  max-width: 85%;
  height: auto !important;
  flex: 0 1 auto !important;
  align-self: flex-end;
  margin-top: auto !important;
  border-radius: var(--zaobleni-m);
}
.blog-wrapper .image+.text .description {
  display: none !important;
}
.blog-wrapper .image+.text .title {
  color: var(--zelena-lesni) !important;
  font-weight: 600 !important;
}
.blog-wrapper .image+.text .read-article {
  color: var(--zelena-lesni) !important;
  font-weight: 700;
}
/* Při najetí myší šablona ztmavila pole s textem na černou a zelený název
   se ztrácel. Pole zůstává světlé, ztmaví se název a fotka se jemně přiblíží. */
.blog-wrapper a:hover .image+.text,
.blog-wrapper a:focus-visible .image+.text {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--inkoust) !important;
}
.blog-wrapper a:hover .image+.text .title {
  color: var(--inkoust) !important;
}
.blog-wrapper a:hover .image+.text .read-article {
  color: var(--zelena-lesni) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-wrapper .image {
  overflow: hidden;
}
.blog-wrapper .image img {
  transition: transform 0.4s ease;
}
.blog-wrapper a:hover .image img {
  transform: scale(1.04);
}

/* ===== Recenze – plocha růžová tinta ===== */
.reviews-widget {
  background-color: var(--ruzova-svetla) !important;
}

/* ===== Patička – papír, jemná linka nahoře ===== */
#footer,
#footer .footer-rows .rate-wrapper {
  background-color: var(--papir) !important;
  border-top: 1px solid var(--linka);
}
#footer .footer-rows.container {
  background-color: transparent !important;
}
#footer,
#footer a {
  color: var(--inkoust) !important;
}
#footer a:hover {
  color: var(--zelena-lesni) !important;
}
#footer .pageElement__heading {
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}
/* Linka pod nadpisy v patičce – dřív bílá, teď medová */
#footer .pageElement__heading::after {
  background-color: var(--zluta) !important;
  border-bottom-color: var(--zluta) !important;
}
/* Názvy článků v patičce – malé, proto Mulish (Bricolage až od 18 px) */
#footer .newsItemWidget__heading {
  font-family: var(--font-text) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 12px;
}
/* ===== MOBIL ===== */
@media (max-width: 768px) {

  /* Nadpisy podle manuálu */
  h1, .h1,
  .carousel .extended-banner-title {
    font-size: 32px !important;
    line-height: 36px !important;
  }
  h2, .h2,
  .homepage-group-title,
  .homepage-banners-full-width.middle-banners .extended-banner-title,
  .homepage-banners-full-width.footer-banners .extended-banner-title {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  /* Logo */
  .site-name img {
    max-height: 70px !important;
    width: auto !important;
  }

  /* Detailní popis – text vždy před obrázkem */
  .photobanner,
  .videobanner {
    display: flex !important;
    flex-direction: column !important;
  }
  .photobanner .textpart,
  .videobanner .textpart {
    order: 1 !important;
    width: 100% !important;
    display: block !important;
    padding-right: 0 !important;
  }
  .photobanner .photopart,
  .videobanner .photopart,
  .photobanner .videopart,
  .videobanner .videopart {
    order: 2 !important;
    width: 100% !important;
    display: block !important;
    padding-right: 0 !important;
  }
  .photobanner .photopart img,
  .videobanner .photopart img {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--zaobleni-m);
  }

  /* Bannery TOP – 2 sloupce */
  .next-to-carousel-banners {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .next-to-carousel-banners .banner-wrapper {
    position: relative !important;
    width: calc(50% - 8px) !important;
    min-width: 0 !important;
    flex: 0 0 calc(50% - 8px) !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .next-to-carousel-banners .banner-wrapper:first-child {
    padding-left: 4px !important;
  }
  .next-to-carousel-banners .banner-wrapper:last-child {
    padding-right: 4px !important;
  }
  .next-to-carousel-banners .banner-wrapper img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: var(--zaobleni-m) !important;
  }
  .next-to-carousel-banners .extended-banner-texts,
  .next-to-carousel-banners .banner-wrapper:first-child .extended-banner-texts,
  .next-to-carousel-banners .banner-wrapper:last-child .extended-banner-texts {
    bottom: 4px !important;
    left: 4px !important;
    right: 4px !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    border-radius: 0 0 var(--zaobleni-m) var(--zaobleni-m) !important;
  }
  .next-to-carousel-banners .extended-banner-link {
    font-size: 11px !important;
    line-height: 14px !important;
    letter-spacing: 0.06em !important;
  }

  /* Lišta výhod – dva sloupce, menší vnitřní okraj */
  .benefitBanner.position--benefitHomepage {
    padding: 24px 16px !important;
  }
}

/* =========================================================
   Verze 9 (17. 10. 2026) – dlaždice, menu, newsletter, výhody
   ========================================================= */

/* ===== Produktové dlaždice: vnitřní okraj a celé názvy ===== */
.products-block .p .p-in {
  padding: 16px 16px 20px !important;
}
.p .p-in-in {
  height: auto !important;
}
/* Šablona dává názvu pevnou výšku 40 px, takže delší názvy se useknou
   uprostřed řádku. Teď se název zalomí a případně skončí třemi tečkami. */
.products-block .p a.name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  min-height: 50px;           /* dva řádky, aby ceny zůstaly v jedné linii */
  margin-bottom: 8px;
}
.products-block .p a.name span {
  display: inline !important;
}

/* ===== Hlavní menu – výraznější ===== */
@media (min-width: 768px) {
  #navigation {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  .navigation-in > ul > li > a {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    padding: 16px 20px !important;   /* svislý okraj drží text uprostřed lišty */
  }
  /* Text položky je v <b> s vlastní váhou 400 ze šablony */
  .navigation-in > ul > li > a > b {
    font-weight: inherit !important;
  }
  /* Šablona dávala položce při najetí růžové pozadí */
  .navigation-in > ul > li > a,
  .navigation-in > ul > li.active > a {
    background-color: transparent !important;
    color: var(--zelena-lesni) !important;
  }
  .navigation-in > ul > li > a:hover,
  .navigation-in > ul > li.exp > a {
    background-color: transparent !important;
    color: var(--inkoust) !important;
  }
}

/* ===== Lišta výhod – ikony z brand manuálu ===== */
.benefitBanner .benefitBanner__picture {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.benefitBanner .benefitBanner__img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
}
/* Stejná lišta i na detailu produktu */
.benefitBanner.position--benefitProduct {
  background-color: var(--salvej-svetla) !important;
  border-radius: var(--zaobleni-l);
  padding: 24px !important;
}
.benefitBanner.position--benefitProduct .benefitBanner__img {
  width: 40px !important;
  height: 40px !important;
}

/* ===== Newsletter – karta s textem ===== */
.footer-newsletter-full-width,
.footer-newsletter-full-width .container-full-width {
  background-color: var(--papir) !important;
}
.footer-newsletter {
  max-width: 1040px;
  margin: 48px auto 72px !important;
  padding: 40px 48px 36px !important;
  background-color: var(--zluta-svetla);
  border-radius: var(--zaobleni-l);
  box-sizing: border-box;
}
/* Nadpis „Odebírat newsletter“ nahrazený vlastním textem */
.footer-newsletter > h2 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 0 12px !important;
  text-align: center;
}
.footer-newsletter > h2::before {
  content: "Newsletter";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ruzova-text);
}
.footer-newsletter > h2::after {
  content: "Kreativní jiskra rovnou do schránky";
  display: block;
  font-family: var(--font-nadpisy);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zelena-lesni);
}
.footer-newsletter .subscribe-form::before {
  content: "Jednou za čas vám pošleme novinky, nápady na společné tvoření s dětmi i tipy na dárky. Žádný spam, jen inspirace na chvíle u jednoho stolu.";
  display: block;
  max-width: 480px;
  margin: 0 auto 24px;
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--inkoust);
}
/* Kontrola proti robotům bez druhého velkého nadpisu */
.footer-newsletter fieldset.box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-newsletter fieldset.box h2 {
  display: none !important;
}
.footer-newsletter input[type="email"],
.footer-newsletter input[type="text"] {
  background-color: var(--papir-bila) !important;
  min-height: 48px;
}
.footer-newsletter .consents .label {
  font-size: 14px;
  line-height: 20px;
  color: var(--inkoust-tlumeny);
}
/* Formulář na střed karty, pole a tlačítko na celou šířku */
.footer-newsletter .subscribe-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
.footer-newsletter .subscribe-form fieldset {
  min-width: 0 !important;
  width: 100% !important;
}
.footer-newsletter .subscribe-form::before {
  max-width: 560px;
  margin: 0 auto 28px;
}
.footer-newsletter .subscribe-form input[type="email"] {
  width: 100% !important;
  max-width: none !important;
}
.footer-newsletter .btn.btn-primary {
  min-height: 48px;
  padding: 0 32px !important;
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Na počítači formulář do šířky: e-mail | kontrolní kód | tlačítko,
   pod tím souhlas. Na mobilu zůstává pod sebou. */
@media (min-width: 769px) {
  .footer-newsletter .subscribe-form > fieldset {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: end;
  }
  .footer-newsletter .subscribe-form > fieldset > input[type="hidden"],
  .footer-newsletter .subscribe-form > fieldset > .sr-only {
    position: absolute !important;
  }
  .footer-newsletter .subscribe-form > fieldset > .form-group.smart-label-wrapper {
    grid-column: 1;
    margin: 0 !important;
  }
  .footer-newsletter fieldset.box {
    grid-column: 2;
    display: flex !important;
    align-items: flex-end;
    gap: 12px;
  }
  .footer-newsletter fieldset.box .form-group {
    margin: 0 !important;
  }
  .footer-newsletter fieldset.box .captcha-image img {
    display: block;
    height: 48px;
    width: auto;
    border-radius: var(--zaobleni-s);
  }
  .footer-newsletter fieldset.box input {
    width: 140px !important;
  }
  .footer-newsletter .subscribe-form > fieldset > .btn.btn-primary {
    grid-column: 3;
    width: auto !important;
    margin: 0 !important;
  }
  .footer-newsletter .subscribe-form > fieldset > .consents {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
    text-align: center;
  }
}

/* ===== Mobil ===== */
@media (max-width: 768px) {
  .products-block .p .p-in {
    padding: 12px 10px 16px !important;
  }
  .products-block .p a.name {
    font-size: 16px !important;
    line-height: 21px !important;
    -webkit-line-clamp: 3 !important;
    min-height: 63px;          /* tři řádky */
  }
  .products-block .p a.name span {
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .p .price-final {
    font-size: 20px !important;
    line-height: 24px !important;
  }
  .footer-newsletter {
    margin: 32px 16px 48px !important;
    padding: 28px 20px 24px !important;
  }
  .footer-newsletter > h2::after {
    font-size: 26px;
    line-height: 32px;
  }
  .benefitBanner .benefitBanner__img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* =========================================================
   Verze 12 (20. 10. 2026) – Instagram v pruhu nad patičkou
   Pruh vytváří skript v HTML kódu záhlaví: přesune fotky
   z patičky sem a zbylé tři sloupce patičky roztáhne.
   ========================================================= */
.lc-instagram {
  background-color: var(--salvej-svetla);
  padding: 64px 16px;
}
.lc-instagram__in {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.lc-instagram__nadtitulek {
  margin: 0 0 10px !important;
  font-family: var(--font-text);
  font-size: 13px !important;
  line-height: 16px !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ruzova-text);
}
.lc-instagram__nadpis {
  margin: 0 0 14px !important;
  font-size: 32px !important;
  line-height: 38px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--zelena-lesni) !important;
}
.lc-instagram__popis {
  margin: 0 0 24px !important;
  font-size: 16px;
  line-height: 26px;
  color: var(--inkoust);
}
.lc-instagram__popis strong {
  color: var(--zelena-lesni);
}
.lc-instagram .lc-instagram__tlacitko {
  display: inline-flex !important;
  align-items: center;
  min-height: 48px;
  padding: 0 28px !important;
}
.lc-instagram .instagram-widget {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  max-width: none !important;
}
.lc-instagram .instagram-widget > a {
  display: block;
  width: auto !important;
  aspect-ratio: 4 / 5;         /* formát příspěvků na Instagramu */
  border-radius: var(--zaobleni-m);
  overflow: hidden;
  background-color: var(--papir-bila);
}
.lc-instagram .instagram-widget > a {
  position: relative;
}
/* Šablona při najetí posouvala fotku o půl výšky dolů a nahoře zbyla
   bílá plocha. Fotka teď stojí na místě a přes ni se objeví překryv. */
.lc-instagram .instagram-widget > a img,
.lc-instagram .instagram-widget > a:hover img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transform: none !important;
  transition: none !important;
}
/* Překryv při najetí: lesní zelená, ikona Instagramu a text */
.lc-instagram .instagram-widget > a::after {
  content: "Zobrazit příspěvek";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
  background: rgba(75, 116, 95, 0.86) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%220.6%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") no-repeat center calc(50% - 16px) / 40px 40px;
  color: #FFFFFF;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lc-instagram .instagram-widget > a:hover::after,
.lc-instagram .instagram-widget > a:focus-visible::after {
  opacity: 1;
}
.lc-instagram .instagram-widget > a:focus-visible {
  outline: 2px solid var(--zelena-lesni);
  outline-offset: 2px;
}
/* Tlačítko z widgetu nahrazuje vlastní tlačítko v textu */
.lc-instagram .instagram-follow-btn {
  display: none !important;
}
/* Patička bez sloupce Instagram – tři sloupce na celou šířku */
@media (min-width: 768px) {
  .custom-footer.lc-paticka-bez-instagramu > div {
    flex: 0 1 33.333% !important;
    max-width: 33.333% !important;
  }
}
@media (max-width: 991px) {
  .lc-instagram__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    text-align: center;
  }
  .lc-instagram__popis {
    max-width: 520px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 768px) {
  .lc-instagram {
    padding: 48px 16px;
  }
  .lc-instagram__nadpis {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  .lc-instagram .instagram-widget {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* =========================================================
   Verze 14 (20. 10. 2026) – doporučený věk v kolečku
   Kolečko vkládá skript v HTML kódu záhlaví do rohu hlavní
   fotky v detailu produktu, hodnotu bere z parametru
   „Doporučený věk“. Produkt bez parametru kolečko nemá.
   ========================================================= */
.lc-vek {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--papir-bila);
  border: 2px solid var(--zelena-lesni);
  box-shadow: 0 2px 10px rgba(38, 51, 44, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;        /* kliknutí projde na fotku (zvětšení) */
}
.lc-vek__cislo {
  font-family: var(--font-nadpisy);
  font-size: 26px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zelena-lesni);
}
.lc-vek__popis {
  margin-top: 2px;
  font-family: var(--font-text);
  font-size: 10px;
  line-height: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkoust-tlumeny);
}
@media (max-width: 768px) {
  .lc-vek {
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
  }
  .lc-vek__cislo {
    font-size: 20px;
    line-height: 20px;
  }
  .lc-vek__popis {
    font-size: 9px;
  }
}

/* ~~~~~ Opravy 25. 10. 2026 (zaloha: styly-zaloha-2026-10-25.css) ~~~~~ */
/* bile okraje v kategorii a na detailu */
#content-wrapper,.content-wrapper,.p-detail-full-width{background-color:var(--papir)!important;}
.category-header{background-color:transparent!important;border-radius:0!important;border-bottom:1px solid var(--linka);}
/* razeni Nejprodavanejsi / Nejlevnejsi... */
.listSorting__control{background-color:transparent!important;box-shadow:none!important;border-radius:0!important;border-bottom:3px solid transparent!important;color:var(--inkoust-tlumeny)!important;font-weight:600!important;}
.listSorting__control:hover{color:var(--zelena-lesni)!important;}
.listSorting__control--current{border-bottom-color:var(--zluta)!important;color:var(--zelena-lesni)!important;font-weight:800!important;}
/* podkategorie: bile dlazdice, hover zvyrazni text */
.subcategories li a{background-color:var(--papir-bila)!important;border:1px solid var(--linka)!important;border-radius:var(--zaobleni-m)!important;color:var(--zelena-lesni)!important;transition:border-color .15s ease,box-shadow .15s ease;}
.subcategories li a:hover,.subcategories li a:focus-visible{background-color:var(--papir-bila)!important;border-color:var(--zelena-lesni)!important;box-shadow:var(--stin-karta);}
.subcategories li a:hover .text,.subcategories li a:focus-visible .text{color:var(--zelena-lesni)!important;text-decoration:underline;text-decoration-color:var(--zluta);text-decoration-thickness:2px;text-underline-offset:4px;}
/* HP dlazdice kategorii - jednotna vyska popisku */
.next-to-carousel-banners .extended-banner-texts{min-height:46px!important;}
.next-to-carousel-banners .extended-banner-texts .extended-banner-link{width:100%!important;justify-content:space-between!important;align-items:center!important;gap:8px;letter-spacing:0.06em!important;}
.next-to-carousel-banners .extended-banner-texts .extended-banner-link::after{flex:0 0 auto;}
@media (max-width:767px){
.next-to-carousel-banners .extended-banner-texts{min-height:44px!important;height:44px!important;padding:0 8px!important;display:flex!important;align-items:center!important;}
.next-to-carousel-banners .extended-banner-texts .extended-banner-link{font-size:11px!important;letter-spacing:0.01em!important;white-space:nowrap!important;}
}
/* USP ikony zarovnane vlevo */
.benefitBanner__item{align-items:stretch!important;justify-content:flex-start!important;}
.benefitBanner__link{justify-content:flex-start!important;}