/* ===================== */
/*  Header / navigace    */
/* ===================== */
@media screen and (min-width: 1200px){
  .type-index #header { position: relative !important; top: 0 !important; background-color: #000 !important; }
  .type-index .top-navigation-bar { z-index: 2 !important; top: 0 !important; position: relative !important; background-color: #272727 !important; }
  .one-column-body .carousel-inner > .item.carousel-link a::before,
  .one-column-body .carousel-inner > .item:not(.carousel-link)::before { display: none; }
}

@media screen and (min-width: 768px){
  .navigation-in > ul > li.ext > ul > li > a { display: block; }
  .navigation-in > ul > li.ext > ul > li > div { padding-left: 12px; }
  .navigation-in > ul > li.ext > ul > li:not(.has-third-level) > div > a {
    margin-bottom: 0; line-height: 22px; height: 64px; display: flex; align-items: center;
  }
}



/* ========================= */
/*  Akční zboží – karty      */
/* ========================= */

/* menší mezera k názvu + větší fotka */
#products-1 .product .p > a.image{
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}
#products-1 .product .p > a.image img{
  max-height: 360px !important;
  width: auto; height: auto; display: block; margin: 0 auto;
}
#products-1 .product .p-in{ padding-top: 4px !important; }
#products-1 .product .p .name,
#products-1 .product .p a.name,
#products-1 .product .p h3{
  margin-top: 4px !important;
  margin-bottom: 2px !important;   /* co nejmenší mezera pod názvem */
  line-height: 1.15;
}

/* krátký popisek – hned pod názvem, dál od ceny */
#products-1 .product .p-desc{
  display: block;
  margin-top: 2px !important;       /* blíž k názvu */
  margin-bottom: 16px !important;   /* větší mezera od ceny */
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: #434343;
  max-height: none !important;
  overflow: visible !important;
}

/* blend mód pro fotky + šedé pozadí celé karty na hover */
.products-block .product .p > a.image img {
  mix-blend-mode: multiply;
  transform: translateZ(0);
}
.products-block.products .product {
  isolation: isolate;
  background-color: #fff;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.products-block.products .product:hover {
  background-color: #F4F4F2;
  box-shadow: none;
}
/* jemná kompenzace na hover (volitelné) */
.products-block .product:hover .p > a.image img { filter: brightness(1.03); }

/* jen zařízení s opravdovým hoverem */
@media (hover: hover) and (pointer: fine) {
  .products-block.products .product:hover { background-color: #F4F4F2; }
}

/* (oprava – chybějící závorka v původním kódu) */
.products-block.products .p .name {
  display: block;
  height: 20px;
}


/* ================================= */
/*  Globální chování VŠECH tlačítek  */
/* ================================= */
button,
a.btn, .btn,
input[type="submit"], input[type="button"], input[type="reset"] {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  border-radius: 50px; /* sjednocení zaoblení */
}

/* GLOBÁLNÍ HOVER = #434343, bílý obrys */
button:not([disabled]):hover,
a.btn:hover, .btn:hover,
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
  background-color: #434343 !important;
  color: #fff !important;
  border-color: #fff !important;   /* obrys zůstává bílý */
}

/* active */
button:active,
a.btn:active, .btn:active,
input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
  transform: translateY(1px);
}

/* focus ring */
button:focus-visible,
a.btn:focus-visible, .btn:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible, input[type="reset"]:focus-visible {
  outline: 2px solid #9e9e9e;
  outline-offset: 2px;
}

/* outline varianty (pokud je šablona používá) */
.btn--outline:hover,
a.btn.btn--outline:hover {
  background-color: #434343 !important;
  color: #fff !important;
  border-color: #fff !important;
}



/* ========== Mobil: lehké odsazení hlavního nadpisu/hero ========== */
/* Následující selektor míří na typické nadpisy v hero/úvodu.
   Kdyby se netrefil, stačí stejný padding přidat přímo na konkrétní
   element, který v inspektoru uvidíš (případně mi pošli jeho selektor). */
@media (max-width: 767px){
  .homepage h1,
  .hero h1,
  .content h1,
  .banner h1{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

----

/* ===== HERO / HEADER ========================================= */
/* Wrapper s fotkou na pozadí */
.x-hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 48vw, 680px);

  /* fotka – funguje jak s inline background-image,
     tak s CSS proměnnou --bg (viz HTML níže) */
  background-color:#000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* pokud používáte styl style="--bg:url(...)" */
.x-hero{ background-image: var(--bg, none); }

/* tmavý přechod přes fotku, ať je text čitelný */
.x-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%,
                                     rgba(0,0,0,.35) 45%,
                                     rgba(0,0,0,0) 70%);
  pointer-events:none;
}

.x-hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:1200px;
  margin:0 auto;
  padding:56px 20px;                /* mobilní odsazení zleva/pravá */
}

.x-hero__title{
  margin:0 0 18px;
  color:#fff;
  font-family:'PT Serif', serif;
  font-weight:700;
  line-height:1.1;
  font-size:clamp(28px, 5vw, 64px);
}
.x-hero__lead{
  max-width:620px;
  margin:0 0 22px;
  color:#fff;
  font-size:18px;
  line-height:1.5;
}
.x-hero__btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 500;!important; 
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* jemné úpravy na menších displejích */
@media (max-width:920px){
  .x-hero{ background-position:center; }
  .x-hero__inner{ padding:40px 16px; }
}

/* ===== HERO – jisté načtení pozadí, i když šablona přepisuje styly ===== */
.x-hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 48vw, 680px);

  background-color:#000;
  background-repeat:no-repeat;
  background-size:cover;
  Background-position:auto;
}

/* a) když je obrázek poslán přes CSS proměnnou --bg */
.x-hero[style*="--bg:"]{
  background-image: var(--bg) !important;
}

/* b) když je obrázek poslán rovnou jako inline background-image */
.x-hero[style*="background-image"]{
  background-size:cover;
  Background-position:auto;
}

/* tmavý overlay kvůli čitelnosti textu */
.x-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%,
                                     rgba(0,0,0,.35) 45%,
                                     rgba(0,0,0,0) 70%);
  pointer-events:none;
}

/* obsah + odsazení (funguje i na mobilu) */
.x-hero__inner{ position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:56px 20px; }
.x-hero__title{ margin:0 0 18px; color:#fff; font-family:'PT Serif',serif; font-weight:700; line-height:1.1; font-size:clamp(28px,5vw,64px); }
.x-hero__lead { max-width:620px; margin:0 0 22px; color:#fff; font-size:18px; line-height:1.5; }
.x-hero__btn  { display:inline-block; padding:14px 26px; border-radius:999px; background:#fff; color:#000; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:920px){
  .x-hero__inner{ padding:40px 16px; }
}

/* ===== Globální nastavení tlačítek ===== */
:root{ --brand-accent:#9162B5; }


/* 2) Bílé „pill“ tlačítko – výchozí vzhled */
button,
input[type="submit"],
input[type="button"],
a.button, .button,
a.btn, .btn,
.x-hero__btn,
.x-news__btn {
  border-radius: 999px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s;
}

/* 3) Hover – brand fialová (bez obrysu) */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover, .button:hover,
a.btn:hover, .btn:hover,
.x-hero__btn:hover,
.x-news__btn:hover {
  background: var(--brand-accent);
  color: #fff;
  border-color: var(--brand-accent);
}

/* 4) Bez obrysu při focusu/active */
button:focus, button:active,
input[type="submit"]:focus, input[type="submit"]:active,
input[type="button"]:focus, input[type="button"]:active,
a.button:focus, a.button:active, .button:focus, .button:active,
a.btn:focus, a.btn:active, .btn:focus, .btn:active,
.x-hero__btn:focus, .x-hero__btn:active,
.x-news__btn:focus, .x-news__btn:active {
  outline: none !important;
  box-shadow: none !important;
}

---
.x-hero__btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* =============================================================
   CAROUSEL – 3 bannery vedle sebe: živý text + CTA + gradient
   (přesuň z administrace do main.css)
   ============================================================= */

/* 0) Obrázky bez rámečků/stínů */
.next-to-carousel-banners img{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* 1) Kotva + výchozí proměnné (jen tady měň odsazení) */
.next-to-carousel-banners .banner-wrapper > a{
  position: relative;
  display: block;
  /* desktop odsazení textu od spodku a zleva */
  --xbottom: 120px;
  --xleft: 48px;
  --xgap: 14px;
}

/* 2) Kontejner s texty – absolutně vlevo dole */
.next-to-carousel-banners .banner-wrapper > a .extended-banner-texts{
  position: absolute;
  left: var(--xleft); right: auto;
  bottom: var(--xbottom); top: auto;
  width: min(520px, calc(100% - (var(--xleft) * 2)));
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--xgap);
  z-index: 2;
  pointer-events: none; /* kliká stále celý banner */
}

/* 3) Ztmavení levého banneru pro čitelnost */
.next-to-carousel-banners .col1 .banner-wrapper > a::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}

/* 4) Zrušení defaultního systémového „pilulkového“ tlačítka */
.next-to-carousel-banners .banner-wrapper > a::after{
  content: none !important;
  border: 0 !important;
}

/* 5) Typografie */
.next-to-carousel-banners .extended-banner-title{
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.next-to-carousel-banners .extended-banner-title em{
  font-style: italic; font-weight: 400;
}
.next-to-carousel-banners .extended-banner-text{
  font: 18px/1.45 "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#fff; opacity:.92;
}

/* 6) CTA – pseudo-prvek na konci overlaye (vizuální, ale klikací) */
.next-to-carousel-banners .extended-banner-texts::after{
  content:"OBJEVIT";
  margin-top: var(--xgap);
  display: inline-flex;
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: background .2s, color .2s, border-color .2s;
  pointer-events: auto; /* ať jde kliknout jako tlačítko */
}
.next-to-carousel-banners .banner-wrapper:hover .extended-banner-texts::after{
  background: #9162B5; border-color:#9162B5; color:#fff;
}

/* 7) Pravý banner – světlá varianta (bez ztmavení + centrování) */
.next-to-carousel-banners .col3 .banner-wrapper > a::before{ content:none; }
.next-to-carousel-banners .col3 .extended-banner-texts{
  left:50%; transform:translateX(-50%);
  bottom: 110px; /* můžeš doladit */
  width:min(560px, 90%);
  align-items:center; text-align:center;
}
.next-to-carousel-banners .col3 .extended-banner-title,
.next-to-carousel-banners .col3 .extended-banner-text{
  color:#111; text-shadow:none; opacity:1;
}

/* 8) Responsivita */
@media (max-width: 1200px){
  .next-to-carousel-banners .banner-wrapper > a{ --xbottom: 110px; --xleft: 36px; }
  .next-to-carousel-banners .extended-banner-title{ font-size:42px; }
}
@media (max-width: 980px){
  .next-to-carousel-banners .banner-wrapper > a{ --xbottom: 84px; --xleft: 24px; }
  .next-to-carousel-banners .extended-banner-title{ font-size:34px; }
  .next-to-carousel-banners .extended-banner-text{ font-size:16px; }
  .next-to-carousel-banners .extended-banner-texts::after{ padding:12px 22px; }
}
@media (max-width: 640px){
  .next-to-carousel-banners .banner-wrapper > a{ --xbottom: 64px; --xleft: 20px; }
  .next-to-carousel-banners .extended-banner-title{ font-size:28px; }
  .next-to-carousel-banners .extended-banner-text{ font-size:15px; }
}

/* ==== BLOG: karty s náhledy – nadpis přes obrázek + zoom na hover ==== */

/* Celá karta je klikací a má polohovací kontext */
.homepage-blog-wrapper .news-item a{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
}

/* Obrázek – nechte jej vyplnit blok, skryjeme přetečení kvůli zoomu */
.homepage-blog-wrapper .news-item a .image{
  overflow:hidden;
}
.homepage-blog-wrapper .news-item a .image img{
  display:block;
  width:100%;
  height:auto;
  transform-origin:center;
  transition:transform .6s ease;
}
.homepage-blog-wrapper .news-item a:hover .image img{
  transform:scale(1.06);
}

/* Jemné ztmavení dole pro čitelnost textu */
.homepage-blog-wrapper .news-item a::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:1;
}

/* Textový box přes obrázek vlevo dole */
.homepage-blog-wrapper .news-item a .text{
  position:absolute;
  left:24px; right:24px; bottom:22px;
  z-index:2;
  color:#fff;
}

/* Titulek – „parfémový“ serif, bílý, se stínem */
.homepage-blog-wrapper .news-item a .text .title{
  font-family:"PT Serif", serif;
  font-weight:700;
  font-size:clamp(20px, 2.2vw, 36px);
  line-height:1.15;
  margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Schovat doprovodný text a defaultní „číst článek“ pod obrázkem */
.homepage-blog-wrapper .news-item .description,
.homepage-blog-wrapper .news-item .read-article{
  display:none !important;
}

/* Drobná responsivita */
@media (max-width: 980px){
  .homepage-blog-wrapper .news-item a .text{ left:18px; right:18px; bottom:18px; }
}
@media (max-width: 640px){
  .homepage-blog-wrapper .news-item a .text{ left:14px; right:14px; bottom:14px; }
  .homepage-blog-wrapper .news-item a .text .title{ font-size:clamp(18px, 5.2vw, 26px); }
}


/* ==== BLOG: karty s náhledy – titulek přes obrázek + zoom na hover ==== */
.homepage-blog-wrapper .news-item a{
  display:block; position:relative; color:inherit; text-decoration:none;
}
.homepage-blog-wrapper .news-item a .image{ overflow:hidden; }
.homepage-blog-wrapper .news-item a .image img{
  display:block; width:100%; height:auto;
  transform-origin:center; transition:transform .6s ease;
}
.homepage-blog-wrapper .news-item a:hover .image img{ transform:scale(1.06); }

/* jemné ztmavení spodku kvůli čitelnosti */
.homepage-blog-wrapper .news-item a::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none; z-index:1;
}
/* textový box vlevo dole */
.homepage-blog-wrapper .news-item a .text{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:#fff;
}
.homepage-blog-wrapper .news-item a .text .title{
  margin:0;
  font-family:"PT Serif", serif; font-weight:700;
  font-size:clamp(20px, 2.2vw, 36px); line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
/* skryj defaultní popisek/cta pod kartou */
.homepage-blog-wrapper .news-item .description,
.homepage-blog-wrapper .news-item .read-article{ display:none !important; }

@media (max-width: 980px){
  .homepage-blog-wrapper .news-item a .text{ left:18px; right:18px; bottom:18px; }
}
@media (max-width: 640px){
  .homepage-blog-wrapper .news-item a .text{ left:14px; right:14px; bottom:14px; }
  .homepage-blog-wrapper .news-item a .text .title{ font-size:clamp(18px, 5.2vw, 26px); }
}

/* ==== BANNERY vedle carouselu – jemné doladění pozice textu a CTA ==== */
/* posuň CTA (pseudo-prvek) níž */
.next-to-carousel-banners .extended-banner-texts::after{
  margin-top: 64px !important; /* klidně 80px pokud chceš delší mezeru */
}
/* posuň celý overlay blíž ke spodnímu okraji banneru */
.next-to-carousel-banners .banner-wrapper > a{
  --xbottom: 30px; /* dřív 120px – teď níž k okraji */
}
/* pravý světlý banner: text zůstává tmavý, centrovaný – to už v souboru máš,
   jen nic globálně nezesvětluj/nezšedivuj pro všechny bannery */

/* ==========================================================================
   COMPAT PATCH — zachování posledních úprav (bez rozbití headeru)
   ========================================================================== */

/* 1) HERO/CTA – tenčí řez */
.x-hero__btn{ font-weight:500 !important; }

/* 2) Navigace v menu (tlustší b pro položky) */
.navigation-in ul li a b{
  font-weight:500;
  font-family:"Poppins", sans-serif;
  font-size:15px;
  text-transform:uppercase;
  color:inherit;
  transition:color .2s ease;
}


/* 4) Bannery vedle carouselu – CTA pilulka: řez 500 + větší mezera nad ní */
.next-to-carousel-banners .extended-banner-texts::after{
  font-weight:500 !important;
  margin-top:80px !important;
}

/* 5) Bannery – overlay blíž ke spodní hraně (ponecháme i proměnnou pro jistotu) */
:root{ --banner-bottom:30px; }
.next-to-carousel-banners .banner-wrapper > a{ --xbottom:30px; }

/* — Titulky v bannerech (levý + pravý) — */
.next-to-carousel-banners .col1 .extended-banner-title,
.next-to-carousel-banners .col3 .extended-banner-title{
  font-size: 30px !important;
}

/* — Černá CTA jen v OBSAHU (header zůstane beze změny) — */
.content .btn,
.content a.btn,
.content .button,
.x-hero__btn,
.x-news__btn{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

/* hover zůstává fialový (#9162B5) */
.content .btn:hover,
.content a.btn:hover,
.content .button:hover,
.x-hero__btn:hover,
.x-news__btn:hover{
  background:#9162B5 !important;
  border-color:#9162B5 !important;
  color:#fff !important;
}




/* =====================
   SAFE CUSTOM CSS (scoped)
   ===================== */

/* 1) HERO – bílé CTA, hover fialový */
.x-hero .x-hero__btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid #fff;
  transition:background .2s,color .2s,border-color .2s,transform .15s ease;
}
.x-hero .x-hero__btn:hover{
  background:#9162B5;
  border-color:#9162B5;
  color:#fff;
  transform:translateY(-1px);
}

/* 2) BANNERY VEDLE SLIDERU – text vlevo dole + CTA pilulka */
.next-to-carousel-banners .banner-wrapper > a{
  position:relative;
  display:block;
  --xleft:48px;
  --xbottom:36px;           /* posun celého bloku níž ke kraji */
  --xgap:14px;
}
.next-to-carousel-banners .banner-wrapper > a .extended-banner-texts{
  position:absolute;
  left:var(--xleft);
  bottom:var(--xbottom);
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--xgap);
  width:min(560px, calc(100% - (var(--xleft)*2)));
  z-index:2;
  pointer-events:none;      /* kliká celý banner */
}
/* ztmavení jen levého banneru */
.next-to-carousel-banners .col1 .banner-wrapper > a::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 55%);
}
/* pravý banner – světlý, centrovaný text */
.next-to-carousel-banners .col3 .banner-wrapper > a::before{content:none;}
.next-to-carousel-banners .col3 .extended-banner-texts{
  left:50%;transform:translateX(-50%);
  align-items:center;text-align:center;
}
/* typografie */
.next-to-carousel-banners .extended-banner-title{
  font-family:"PT Serif",serif;font-weight:700;
  font-size:48px;line-height:1.12;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}
.next-to-carousel-banners .extended-banner-title em{font-style:italic;font-weight:400;}
.next-to-carousel-banners .extended-banner-text{
  font:18px/1.45 "Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;opacity:.92;
}
/* CTA pilulka (vizuální, ale klikací) */
.next-to-carousel-banners .extended-banner-texts::after{
  content:"OBJEVIT";
  margin-top:64px;              /* jen posun CTA níž */
  display:inline-flex;
  align-self:flex-start;
  padding:14px 28px;border-radius:999px;
  background:#fff;color:#000;border:1px solid #fff;
  font-weight:600;letter-spacing:.06em;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition:background .2s,color .2s,border-color .2s;
  pointer-events:auto;
}
.next-to-carousel-banners .banner-wrapper:hover .extended-banner-texts::after{
  background:#9162B5;border-color:#9162B5;color:#fff;
}
/* světlý pravý banner – tmavý text, centrování */
.next-to-carousel-banners .col3 .extended-banner-title,
.next-to-carousel-banners .col3 .extended-banner-text{
  color:#111;text-shadow:none;opacity:1;
}
/* volitelné sjednocení velikosti titulků, jak chceš */
.next-to-carousel-banners .col1 .extended-banner-title,
.next-to-carousel-banners .col3 .extended-banner-title{ font-size:30px; }

/* 3) BLOG – bílý titulek přes obrázek + zoom na hover (text zůstává bílý) */
.homepage-blog-wrapper .news-item a{display:block;position:relative;color:inherit;text-decoration:none;}
.homepage-blog-wrapper .news-item a .image{overflow:hidden;}
.homepage-blog-wrapper .news-item a .image img{
  display:block;width:100%;height:auto;
  transform-origin:center;transition:transform .6s ease;
}
.homepage-blog-wrapper .news-item a:hover .image img{ transform:scale(1.06); }
/* jemný gradient pro čitelnost */
.homepage-blog-wrapper .news-item a::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
/* textový box vlevo dole */
.homepage-blog-wrapper .news-item a .text{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff;
}
.homepage-blog-wrapper .news-item a .text .title{
  margin:0;font-family:"PT Serif",serif;font-weight:700;
  font-size:clamp(20px,2.2vw,36px);line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
/* schovat původní popisek a „číst článek“ pod kartou */
.homepage-blog-wrapper .news-item .description,
.homepage-blog-wrapper .news-item .read-article{ display:none !important; }

/* 4) Jemná responsivita */
@media (max-width: 980px){
  .homepage-blog-wrapper .news-item a .text{ left:18px; right:18px; bottom:18px; }
}
@media (max-width: 640px){
  .homepage-blog-wrapper .news-item a .text{ left:14px; right:14px; bottom:14px; }
  .homepage-blog-wrapper .news-item a .text .title{ font-size:clamp(18px,5.2vw,26px); }
}

/* 5) Drobné kompatibilní úpravy, které jsi měla:
   – tenčí řez CTA, menu bolder, černá CTA jen v obsahu */
.x-hero__btn{ font-weight:500 !important; }
.navigation-in ul li a b{
  font-weight:500;font-family:"Poppins",sans-serif;
  font-size:15px;text-transform:uppercase;color:inherit;transition:color .2s ease;
}
.content .btn,.content a.btn,.content .button,.x-news__btn{
  background:#000 !important;color:#fff !important;border-color:#000 !important;
}
.content .btn:hover,.content a.btn:hover,.content .button:hover,.x-news__btn:hover{
  background:#9162B5 !important;border-color:#9162B5 !important;color:#fff !important;
}



/* PARFAME – rychlý PATCH (bezpečně přidat na KONEC main.css)
   Poslední změny: hero tlačítko, sjednocení pravého banneru, blog dlaždice.
   Verze: 2025‑08‑27 */

/* Brand barva pro hover CTA */
:root { --brand-accent:#9162B5; }

/* 1) HERO – bílé CTA, hover do fialové (přebije starší pravidla) */
.x-hero .x-hero__btn{
  background:#fff !important;
  color:#000 !important;
  border-color:#fff !important;
}
.x-hero .x-hero__btn:hover{
  background:var(--brand-accent) !important;
  border-color:var(--brand-accent) !important;
  color:#fff !important;
}

/* 2) BANNERY vedle slideru – posun bloku dolů + sjednocení pravého banneru */
.next-to-carousel-banners .banner-wrapper > a .extended-banner-texts{
  position:absolute !important;
  left:48px !important;
  bottom:30px !important;
  top:auto !important; right:auto !important;
  display:flex !important;
  flex-direction:column; align-items:flex-start;
  gap:14px;
  pointer-events:none;
  z-index:2;
}
/* CTA pilulka níž – zůstává klikací */
.next-to-carousel-banners .extended-banner-texts::after{
  margin-top:64px !important; pointer-events:auto;
}
/* Pravý banner (col3) – chovat se jako levý: text vlevo dole + zesvětlení fotky vlevo */
.next-to-carousel-banners .col3 .extended-banner-texts{
  left:48px !important; bottom:30px !important;
  transform:none !important; text-align:left !important; align-items:flex-start !important;
}
.next-to-carousel-banners .col3 .banner-wrapper > a::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}
/* Titulky a podtitulky na bannerech – bílé, se stínem; sjednocená velikost */
.next-to-carousel-banners .extended-banner-title{
  color:#fff !important; text-shadow:0 2px 16px rgba(0,0,0,.25) !important;
  font-size:30px !important; line-height:1.12;
}
.next-to-carousel-banners .extended-banner-text{ color:#fff !important; opacity:.92 !important; }

/* 3) BLOG – bílý titulek přes obrázek + jemný zoom pouze na hover */
.homepage-blog-wrapper .news-item a{
  display:block; position:relative; color:inherit; text-decoration:none;
}
.homepage-blog-wrapper .news-item a .image{ overflow:hidden; }
.homepage-blog-wrapper .news-item a .image img{
  display:block; width:100%; height:auto;
  transform-origin:center; transition:transform .6s ease;
}
.homepage-blog-wrapper .news-item a:hover .image img{ transform:scale(1.06); }
/* jemný gradient dole pro čitelnost textu */
.homepage-blog-wrapper .news-item a::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
/* textový box vlevo dole, bílý text bez bílých „cedulek“ */
.homepage-blog-wrapper .news-item a .text{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:#fff !important;
}
.homepage-blog-wrapper .news-item a .text .title,
.homepage-blog-wrapper .news-item a .text .title *{
  color:#fff !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
}
/* schovat výchozí popisek/CTA pod kartou */
.homepage-blog-wrapper .news-item .description,
.homepage-blog-wrapper .news-item .read-article{ display:none !important; }

/* drobná responsivita textového boxu */
@media (max-width: 980px){
  .homepage-blog-wrapper .news-item a .text{ left:18px; right:18px; bottom:18px; }
}
@media (max-width: 640px){
  .homepage-blog-wrapper .news-item a .text{ left:14px; right:14px; bottom:14px; }
}


/* =========================
   BLOG / Nové články – bez bílé cedulky + bez podtržení
   ========================= */

/* odebrat bílou cedulku */
.homepage-blog-wrapper .news-item .text,
.homepage-blog-wrapper .news-item .title {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* titulek i odkaz bílý, bez podtržení/borderu */
.homepage-blog-wrapper .news-item .title,
.homepage-blog-wrapper .news-item .title a {
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* lepší čitelnost textu na fotce */
.homepage-blog-wrapper .news-item .title {
  text-shadow: 0 8px 28px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.35);
}

/* pro jistotu skryj případné pseudo-pozadí, kdyby ho šablona přidávala */
.homepage-blog-wrapper .news-item .text::before,
.homepage-blog-wrapper .news-item .text::after,
.homepage-blog-wrapper .news-item .title::before,
.homepage-blog-wrapper .news-item .title::after {
  display: none !important;
  content: none !important;
}

/* HEADER – ikonky (hledání, účet, košík) bez pozadí a bez polštářů */
.site-header .btn.btn-icon,
header .btn.btn-icon,
.header .btn.btn-icon,
.header-top .btn.btn-icon,
.navigation-wrapper .btn.btn-icon,
.header .btn.btn-icon.cart-count {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Košík – drž počet malý, ať nezvětšuje celé tlačítko (pokud je v samostatném elementu) */
.site-header .btn.btn-icon.cart-count b,
.site-header .btn.btn-icon.cart-count .count,
.header .btn.btn-icon.cart-count b,
.header .btn.btn-icon.cart-count .count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  font-size: 11px;
  border-radius: 999px;
  background: #9162B5;
  color: #fff;
}

/* Pro jistotu: žádné bílé kruhy při hoveru v hlavičce */
.site-header .btn.btn-icon:hover,
.header .btn.btn-icon:hover {
  background: transparent !important;
}





/* === BLOG DLAŽDICE – JISTÝ OVERLAY A STEJNÉ CHOVÁNÍ NA VŠECH ZAŘÍZENÍCH === */
.homepage-blog-wrapper .news-item{
  position: relative;            /* rodič pro absolutní text */
  overflow: hidden;              /* ať nic nepřetéká při zoomu */
}

/* Obrázek + zoom na hover (na mobilech hover není, takže nevadí) */
.homepage-blog-wrapper .news-item .image img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .6s ease;
}
.homepage-blog-wrapper .news-item:hover .image img{
  transform: scale(1.06);
}

/* Textový overlay (přilepený ke spodnímu okraji fotky) */
.homepage-blog-wrapper .news-item .text{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 20px 18px;
  z-index:2;

  /* jemný přechod pro čitelnost (nahoře průhledný → dole tmavší) */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.65) 100%);

  color:#fff;
}

/* Titulek – bílý, bez podtržení, se stínem kvůli čitelnosti */
.homepage-blog-wrapper .news-item .title,
.homepage-blog-wrapper .news-item .title a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  line-height:1.22;
  display:block;
}
.homepage-blog-wrapper .news-item .title a:hover{
  text-decoration:none !important;
}

/* Skryj krátké popisky / “číst článek” v dlaždici (ne na detailu) */
.homepage-blog-wrapper .news-item .description,
.homepage-blog-wrapper .news-item .read-article{
  display:none !important;
}

/* Pokud někde zůstaly naše staré bílá-kartička pseudo-elementy, stopneme je */
.homepage-blog-wrapper .news-item .text:before,
.homepage-blog-wrapper .news-item .text:after,
.homepage-blog-wrapper .news-item .title:before,
.homepage-blog-wrapper .news-item .title:after{
  content:none !important;
  display:none !important;
}


/* ===== BLOG – telefon: stejné titulky jako desktop ===== */
@media (max-width: 680px){
  /* dlaždice + ořez kvůli zoomu */
  .homepage-blog-wrapper .news-item{
    position: relative;
  }
  .homepage-blog-wrapper .news-item > a{
    display: block;
    position: relative;
    overflow: hidden;
  }

  /* obrázek */
  .homepage-blog-wrapper .news-item .image{ line-height: 0; }
  .homepage-blog-wrapper .news-item .image img{
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
  }
  .homepage-blog-wrapper .news-item:hover .image img{
    transform: scale(1.04);
  }

  /* textový overlay jako na desktopu */
  .homepage-blog-wrapper .news-item .text{
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 16px !important;
    margin: 0 !important;
    background: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.7) 100%) !important;
    color: #fff !important;
    display: block !important;
  }

  /* titulek – bílý, bez podtržení, stejné písmo jako desktop */
  .homepage-blog-wrapper .news-item .title,
  .homepage-blog-wrapper .news-item .title a{
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-family: "PT Serif", serif;      /* pokud desktop používá jiné písmo, změň */
    line-height: 1.22 !important;
    font-size: 20px !important;          /* případně uprav 18–22px */
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
  }

  /* pryč bílá kartička a dekorace šablony */
  .homepage-blog-wrapper .news-item .text:before,
  .homepage-blog-wrapper .news-item .text:after,
  .homepage-blog-wrapper .news-item .title:before,
  .homepage-blog-wrapper .news-item .title:after{
    content: none !important;
    display: none !important;
  }

  /* na HP nechceme popisek/„číst článek“ */
  .homepage-blog-wrapper .news-item .description,
  .homepage-blog-wrapper .news-item .read-article{
    display: none !important;
  }
}


/* BLOG – oprav zobrazení titulku na mobilu (stejně jako desktop) */
@media (max-width: 680px){

  /* rodič/odkaz = ukotvení pro absolutní text */
  .homepage-blog-wrapper .news-item > a{
    position: relative !important;
    display: block !important;
    overflow: hidden;
  }

  /* obrázek a jeho zoom */
  .homepage-blog-wrapper .news-item .image{ line-height: 0; }
  .homepage-blog-wrapper .news-item .image img{
    display:block; width:100%; height:auto;
    transition: transform .5s ease;
  }
  .homepage-blog-wrapper .news-item:hover .image img{
    transform: scale(1.04);
  }

  /* textový box dole přes fotku (musí být navrchu) */
  .homepage-blog-wrapper .news-item .text{
    position:absolute !important;
    left:0; right:0; bottom:0;
    padding:14px 16px 16px !important;
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.70) 100%) !important;
    display:block !important;           /* přepíše mobilní „display:none“ */
    visibility:visible !important;
    opacity:1 !important;
    z-index:5 !important;
    color:#fff !important;
  }

  /* samotný titulek – zapnout a obarvit */
  .homepage-blog-wrapper .news-item .title,
  .homepage-blog-wrapper .news-item .title a{
    display:block !important;           /* některé šablony ho skrývají */
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700 !important;
    font-family:"PT Serif", serif;      /* stejné jako desktop */
    line-height:1.22 !important;
    font-size:20px !important;          /* klidně uprav 18–22px */
    text-shadow:0 2px 14px rgba(0,0,0,.35);
  }

  /* dekorace šablony pryč */
  .homepage-blog-wrapper .news-item .text:before,
  .homepage-blog-wrapper .news-item .text:after,
  .homepage-blog-wrapper .news-item .title:before,
  .homepage-blog-wrapper .news-item .title:after{
    content:none !important; display:none !important;
  }
}


/* ===== BLOG – MOBIL: stejně jako desktop, bez bílé cedulky ===== */
@media (max-width: 768px){
  /* rodič drží pozicování, ať overlay leží přes fotku */
  .homepage-blog-wrapper .news-item{
    position: relative !important;
    overflow: hidden !important;
  }

  /* obrázek (jen jistota) */
  .homepage-blog-wrapper .news-item .image,
  .homepage-blog-wrapper .news-item .image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* textový overlay – zapnout, přilepit ke spodnímu okraji a dát nad fotku */
  .homepage-blog-wrapper .news-item .text{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 16px !important;
    z-index: 5 !important;

    /* jemný přechod pro čitelnost */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.70) 100%
    ) !important;
    color: #fff !important;
  }

  /* titulek – bílý, bez podtržení, stejné písmo jako na desktopu */
  .homepage-blog-wrapper .news-item .title,
  .homepage-blog-wrapper .news-item .title a,
  .homepage-blog-wrapper .news-item .title *{
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;

    font-family: "PT Serif", serif !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    font-size: 20px !important; /* klidně 18–22px podle chuti */
    text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
  }

  /* definitivně vypnout bílé cedulky z šablony */
  .homepage-blog-wrapper .news-item .text::before,
  .homepage-blog-wrapper .news-item .text::after,
  .homepage-blog-wrapper .news-item .title::before,
  .homepage-blog-wrapper .news-item .title::after{
    content: none !important;
    display: none !important;
  }

  /* na HP nechceme doprovodný text/„číst článek“ */
  .homepage-blog-wrapper .news-item .description,
  .homepage-blog-wrapper .news-item .read-article{
    display: none !important;
  }
}



/* === BLOG – MOBIL: vynucený overlay z <a title="..."> === */
@media (max-width: 768px){
  /* karta drží pozicování */
  .homepage-blog-wrapper .news-item{
    position: relative !important;
    overflow: hidden !important;
  }

  /* odkaz přes celou dlaždici jako kotva pro overlay */
  .homepage-blog-wrapper .news-item > a{
    display: block !important;
    position: relative !important;
  }

  /* VLASTNÍ OVERLAY – text z atributu title */
  .homepage-blog-wrapper .news-item > a::after{
    content: attr(title) !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 16px !important;
    z-index: 5 !important;

    color: #fff !important;
    font-family: "PT Serif", serif !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;

    /* čitelnost na fotce */
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.70) 100%
    ) !important;
  }

  /* původní bílé “cedulky” a/nebo text šablony schovej */
  .homepage-blog-wrapper .news-item .text,
  .homepage-blog-wrapper .news-item .text::before,
  .homepage-blog-wrapper .news-item .text::after,
  .homepage-blog-wrapper .news-item .title::before,
  .homepage-blog-wrapper .news-item .title::after{
    display: none !important;
    content: none !important;
  }

  /* obrázek jistota */
  .homepage-blog-wrapper .news-item .image,
  .homepage-blog-wrapper .news-item .image img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ===== Newsletter doplněk – styl podle návrhu (tmavý pruh, pilulky) ===== */

/* 0) volitelně firemní barva */
:root { --brand-accent: #9162B5; }

/* 1) obal newsletteru */
.custom-footer__newsletter{
  background:#000;
  color:#fff;
  padding:48px 18px;
}

/* šablony někdy kreslí dekorativní pseudo-elementy – vypneme */
.custom-footer__newsletter::before,
.custom-footer__newsletter::after{
  content:none !important;
  display:none !important;
}

/* 2) hlavička (nadpis) */
.custom-footer__newsletter .newsletter-header{
  max-width:920px;
  margin:0 auto 14px;
  text-align:center;
}
.custom-footer__newsletter .newsletter-header .topic{
  margin:0;
  font-family:"PT Serif", serif;
  font-weight:700;
  line-height:1.12;
  font-size:clamp(26px,5.2vw,44px);
  color:#fff;
}

/* 3) formulář – řádek s inputem a tlačítkem */
.custom-footer__newsletter #formNewsletterWidget{
  max-width:920px;
  margin:0 auto;
}
.custom-footer__newsletter #formNewsletterWidget fieldset{
  margin:0; padding:0; border:0;
  display:flex; gap:12px;
  justify-content:center; align-items:center; flex-wrap:wrap;
}

/* 4) email input */
.custom-footer__newsletter #formNewsletterWidget .form-control{
  appearance:none;
  display:block;
  height:48px;
  border-radius:999px;
  background:#fff;
  color:#111;
  border:1px solid #fff;
  padding:10 18px;
  min-width:260px;
  flex:1 1 360px;          /* roztáhne se podle místa */
  max-width:100%;
  outline:none;
}
.custom-footer__newsletter #formNewsletterWidget .form-control::placeholder{
  color:#7a7a7a; opacity:1;
}

/* 5) tlačítko */
.custom-footer__newsletter #formNewsletterWidget .btn{
  height:48px;
  border-radius:999px;
  padding:0 26px;
  background:var(--brand-accent);
  border:1px solid var(--brand-accent);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  transition:background .2s, border-color .2s, transform .15s ease;
}
.custom-footer__newsletter #formNewsletterWidget .btn:hover{
  background:#7c49a3; border-color:#7c49a3; transform:translateY(-1px);
}
.custom-footer__newsletter #formNewsletterWidget .btn:active{
  transform:translateY(0);
}

/* 6) validační hlášky – ať se nerozhází layout */
.custom-footer__newsletter #formNewsletterWidget .validator-msg-holder{
  width:100%;
}
.custom-footer__newsletter #formNewsletterWidget .validator-msg-holder .error{
  margin-top:8px;
  color:#ffb0b0;
  font-size:13px;
}

/* 7) responsivní drobnosti */
@media (max-width:640px){
  .custom-footer__newsletter{ padding:36px 14px; }
  .custom-footer__newsletter .newsletter-header{ margin-bottom:10px; }
}

.odber, #footer {
  border-top: 0px solid #fff;
}

.odber {
background-color: #f1f1f1;
padding: 0px 20px;
background-color: #000;
padding: 50px 20px;
margin-top: 0px;
}

/* --- newsletter: jemnější rozestupy + bez kapitálek --- */

/* 1) Nadpis bez kapitálek */
.custom-footer__newsletter .newsletter-header .topic{
  text-transform: none !important;   /* vypne uppercase */
  letter-spacing: normal;            /* zruší případné roztažení písmen */
}

/* 2) Pole + tlačítko blíž k sobě */
.custom-footer__newsletter #formNewsletterWidget fieldset{
  gap: 8px !important;               /* původně 12px */
  margin: 0 !important;              /* jistota, že nic „neodstkuje“ */
}

/* na úzkých displejích menší svislá mezera mezi řádky */
@media (max-width: 640px){
  .custom-footer__newsletter #formNewsletterWidget fieldset{
    gap: 6px !important;            /* když se láme na 2 řádky */
  }
}

/* volitelné: ať se tlačítko vizuálně „lepí“ víc k inputu i když je delší text */
.custom-footer__newsletter #formNewsletterWidget .btn{
  white-space: nowrap;
}

.custom-footer__newsletter .newsletter-header .topic {
font-size: clamp(26px,5.2vw,30px);
}



.subscribe-form.compact-form .btn {
  right: 0px;
  top: 0px;
}

.custom-footer__newsletter #formNewsletterWidget .btn {
background: #000;
border: 1px solid #FFF;
font-weight: 500;
}

button:not([disabled]):hover, a.btn:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
background-color: #9162B5 !important;
}

.btn, a.btn {
font-weight: normal;
}

.navigation-buttons > a[data-target="cart"] i, .cart-count:not(.full)::after {
left: 15px;
top: 18px;
}


style.css
.btn.cart-count::before, a.btn.cart-count::before {
margin-right: -7px;
margin-right: 0px;
}

@media (min-width: 768px) {
#header .cart-count {
top: 0;
margin-left: -4px;
top: 25px;
margin-left: 0px;
}
}

@media (max-width: 768px){
  .homepage-blog-wrapper .news-item > a::after{
    font-family: "PT Serif", serif !important;
    font-weight: 500 !important;
    font-size: 25px !important;
   /* volitelné – syntetická kurzíva s větším náklonem */
font-style: oblique 10deg !important;
  }
}

.homepage-blog-wrapper .news-item a .text .title {
font-weight: 500;
font-style: oblique 10deg !important;
font-size: 25px !important;
}


/* BANNERY – stabilní mezera mezi textem a CTA tlačítkem */

.next-to-carousel-banners .extended-banner-title{
  margin: 0 0 8px !important;
}

.next-to-carousel-banners .extended-banner-text{
  margin: 0 !important;
}

/* Kontejner textů: rezervuj prostor pro tlačítko */
.next-to-carousel-banners .extended-banner-texts{
  position: relative !important;
  /* výška tlačítka ~48–56px + mezera 20–24px */
  padding-bottom: 34px !important;          /* uprav dle reálné výšky CTA */
}

/* Tlačítko (::after) drž o chlup nad spodním okrajem */
.next-to-carousel-banners .extended-banner-texts::after{
  bottom: 18px !important;                  /* vzdálenost od spodního okraje */
}

/* Na užších displejích je CTA obvykle vyšší → přidej rezervu navíc */
@media (max-width: 768px){
  .next-to-carousel-banners .extended-banner-texts{
    padding-bottom: 16px !important;        /* např. 56px tlačítko + 24–32px mezera */
  }
  .next-to-carousel-banners .extended-banner-texts::after{
    bottom: 16px !important;
  }
}

.next-to-carousel-banners .extended-banner-texts::after {
margin-top: 74px !important;
}

.custom-footer {
padding-top: 50px;
padding-top: 0px;
}

/* === Newsletter – opravdové roztažení nadpisu v mobilu === */
@media (max-width: 768px){
  /* uvolni rodiče, ať nadpis není v úzkém sloupku */
  .custom-footer__newsletter .newsletter-header{
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;   /* bezpečný vnitřní okraj */
    margin: 0 auto 14px !important;
  }

  /* samotný nadpis – blok přes celou šířku, bez „fit-content“ stylů */
  .custom-footer__newsletter .newsletter-header .topic{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;      /* neponechávat 1 sloupek */
    overflow-wrap: anywhere !important;  /* pro jistotu u dlouhých slov */
    hyphens: auto !important;
    text-transform: none !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  /* menší mezery pod blokem, ať se přisune k patičce */
  .custom-footer__newsletter{
    padding-bottom: 8px !important;
  }
  
  .odber {
padding: 20px 20px;
}
}

/* ===== Typografie: PT Serif (nadpisy) + Poppins (text) ===== */
 :root{
 --font-heading: "PT Serif", Georgia, serif;
 --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 
 --lh-tight: 1.1;
 --lh-snug: 1.25;
 }
 
 /* Běžný text */
 html, body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 18px; /* základní velikost podle tvého stylguidu */
 line-height: 1.6;
 }
 
 /* Nadpisy */
 h1, h2, h3, h4, h5, h6,
 .homepage-group-title,
 .products-heading,
 .products-heading-1,
 .products-heading-2 {
 font-family: var(--font-heading) !important;
 font-weight: 700;
 line-height: var(--lh-tight);
 letter-spacing: 0;
 }
 
 /* Velikosti z tvého designu */
 h1, .products-heading-1, .homepage-products-heading-1 { font-size: 60px; }
 h2, .products-heading-2, .homepage-products-heading-2 { font-size: 40px; line-height: var(--lh-snug); }
 h3 { font-size: 28px; line-height: var(--lh-snug); }
 h4 { font-size: 22px; line-height: 1.3; }
 h5 { font-size: 14px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
 h6 { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; }
 
 /* Paragrafy, textové bloky */
 p, .text, .product-description, .content-wrapper-in, .hp-text {
 font-family: var(--font-body);
 font-size: 18px;
 line-height: 1.6;
 }
 
 /* Odkazy v textu – zvýraznění */
 p a { font-weight: 500; text-underline-offset: 2px; }
 
 /* Responsivní zmenšení pro mobily */
 @media (max-width: 767px){
 h1, .products-heading-1, .homepage-products-heading-1 { font-size: 38px; }
 h2, .products-heading-2, .homepage-products-heading-2 { font-size: 28px; }
 h3 { font-size: 22px; }
 p, .text { font-size: 16px; }
 }
 
 </style>
<style>
@media screen and (max-width: 767px) {

.benefitBanner__item {
    text-align: left;
    padding: 0 60px;
    margin-top: 8px;
}
}
.next-to-carousel-banners .banner-wrapper > a .extended-banner-texts {
z-index: auto;
}

/* 1) Vypnout stmavovací overlay přes obrázek (ať nic nekryje text/CTA) */
.next-to-carousel-banners .banner-wrapper > a::before,
.next-to-carousel-banners .banner-wrapper > a::after {
  content: none !important;
  background: none !important;
}

.next-to-carousel-banners .banner-wrapper > a {
--xleft: 8px;
}

@media screen and (max-width: 767px) {
  .type-index .benefitBanner {
    margin-top: 32px;
    margin-bottom: 52px;
  }
}


/* PATCH pro mobily (iPhone fix):
   – zruší šedé pozadí při tapu
   – zruší tap highlight / stín kolem obrázků
*/
@media (max-width: 767px) {
  /* karta zůstane bílá, žádný hover efekt */
  .products-block.products .product:hover,
  .products-block.products .product:active {
    background-color: #fff !important;
    box-shadow: none !important;
  }

  /* žádný šedý highlight na obrázku/kartě (iOS Safari) */
  .products-block.products .product a,
  .products-block.products .product a img {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }
}

/* Jemný zoom na bannerech */
.next-to-carousel-banners .banner-wrapper > a img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s ease;  /* plynulý přechod */
}

.next-to-carousel-banners .banner-wrapper:hover > a img {
  transform: scale(1.02);          /* zvětšení o 5 % */
}

/* BLOG: titulek na fotkách = čistě bílý text bez šednutí */
.homepage-blog-wrapper .news-item .title,
.homepage-blog-wrapper .news-item .title a,
.homepage-blog-wrapper .news-item > a::after {
  color: #fff !important;             /* čistě bílá */
  opacity: 1 !important;              /* žádná průhlednost */
  text-shadow: none !important;       /* žádný stín */
  background: transparent !important; /* pro jistotu */
}

@media (max-width: 768px) {
.homepage-blog-wrapper .news-item > a::after {
z-index: 2 !important;
}
}

/* BLOG – čistě bílý titulek nad overlayem, ale nikdy nad headerem */
.homepage-blog-wrapper .news-item { 
  position: relative; 
  overflow: hidden;                 /* ať nic „nepřetéká“ */
}

.homepage-blog-wrapper .news-item > a{
  position: relative;               /* lokální stacking context */
  display: block;
  z-index: 0;                       /* karta pod headerem */
}

.homepage-blog-wrapper .news-item > a::before{
  /* tvůj tmavý gradient */
  z-index: 1 !important;            /* overlay */
}

.homepage-blog-wrapper .news-item > a::after{
  color: #fff !important;           /* čistě bílá */
  opacity: 1 !important;
  background: transparent !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.35) !important; /* volitelně pro čitelnost */
  z-index: 2 !important;            /* text NAD overlayem, ale v kartě */
  pointer-events: none;             /* ať nepřebírá klik */
}

}


/* PRODUCTS – jednotný fix pro všechny sekce (Novinky, Akční zboží, …) */

/* karta jako kotva */
.products-block .product .p { 
  position: relative !important; 
  padding: 0 !important;
  margin: 0 !important;
}

/* obrázek bez odskoků */
.products-block .product .p > a.image {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.products-block .product .p > a.image img {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  padding-bottom: 20px
  vertical-align: top !important;
}

/* štítky absolutně – ať nikdy neposouvají layout */
.products-block .product .p > .flags,
.products-block .product .p > .flags-default,
.products-block .product .p > a.image > .flags,
.products-block .product .p > a.image > .flags-default {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
  z-index: 3 !important;
  pointer-events: none;
}

/* zrušit pseudo-elementy, co dělají „duchovské“ mezery */
.products-block .product .p::before,
.products-block .product .p::after,
.products-block .product .p a::before,
.products-block .product .p a::after {
  content: none !important;
  display: none !important;
  float: none !important;
}

@media (max-width: 767px) {
  .products-block .product .p > .flags,
  .products-block .product .p > .flags-default,
  .products-block .product .p > a.image > .flags,
  .products-block .product .p > a.image > .flags-default {
    top: 8px !important;
    left: 8px !important;
  }
}



/* Rezerva nahoře pro štítky – u všech produktů */
.products-block .product .p > a.image {
  padding-top: 48px !important; /* desktop, uprav podle výšky štítků */
}

/* Štítky zůstanou absolutně nahoře */
.products-block .product .p > .flags,
.products-block .product .p > .flags-default,
.products-block .product .p > a.image > .flags,
.products-block .product .p > a.image > .flags-default {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
  z-index: 3 !important;
  pointer-events: none;
}


/* NOVINKY (group 2) */
#products-2 .product .p > a.image,
.products.products-block.homepage-products-2 .product .p > a.image,
[data-testid="productGroup_2"] .product .p > a.image {
  padding-top: 48px !important;
}

/* AKČNÍ ZBOŽÍ (group 1) */
#products-1 .product .p > a.image,
.products.products-block.homepage-products-1 .product .p > a.image,
[data-testid="productGroup_1"] .product .p > a.image {
  padding-top: 48px !important;
}





/* === Colorbox (detail fotek) – čisté konturové šipky === */

/* 1) Vypnout výchozí pseudo-elementy/pozadí šablony */
#colorbox #cboxPrevious::before,
#colorbox #cboxNext::before {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Tlačítka (klikací plocha) */
#colorbox #cboxPrevious,
#colorbox #cboxNext {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer !important;

  /* schovat text "Předchozí / Následující" */
  text-indent: -9999px !important;
  overflow: hidden !important;

  /* barva obrysu šipek (na bílém pozadí obrazu) */
  color: #9162B5 !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

#colorbox #cboxPrevious { left: 14px !important; }
#colorbox #cboxNext     { right: 14px !important; }

/* 3) Vykreslení konturové šipky (dvě hrany čtverce) */
#colorbox #cboxPrevious::after,
#colorbox #cboxNext::after {
  content: "" !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(-45deg);
  border: 2px solid currentColor !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  box-sizing: border-box;
}

/* směr pro „další“ */
#colorbox #cboxNext::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* 4) Hover – jen zlehka zesvětlit, nic neskrývat */
#colorbox #cboxPrevious:hover,
#colorbox #cboxNext:hover {
  color: #555 !important;
  background: transparent !important;
  opacity: 1 !important;
}
#colorbox #cboxPrevious:hover::after,
#colorbox #cboxNext:hover::after {
  border-color: currentColor !important;
}

/* 5) Zneškodnit případné jiné styly šablony, co cílí na :hover::after apod. */
#colorbox #cboxPrevious:hover:before,
#colorbox #cboxNext:hover:before {
  content: none !important;
}

/* --- Colorbox šipky: oprav hover, aby se neobjevoval druhý (diamant) --- */

/* 1) Zruš cizí hover pseudo-elementy */
#colorbox #cboxPrevious:hover::before,
#colorbox #cboxNext:hover::before {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Na hover explicitně přepiš naši šipku (pořád jen kontura ↑/→) */
#colorbox #cboxPrevious:hover::after,
#colorbox #cboxNext:hover::after {
  content: "" !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px !important;
  height: 26px !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important; /* základ (←) */
  border: 2px solid currentColor !important;
  border-bottom-color: transparent !important;  /* ať nevznikne diamant */
  border-right-color:  transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) Směr pro „další“ – ať hover nepřepíše rotaci */
#colorbox #cboxNext:hover::after {
  transform: translate(-50%, -50%) rotate(135deg) !important;
}

/* Skryje text/button uvnitř banneru banner3 */
.banner3 .extended-banner-texts {
  display: none !important;
}

/* celý banner je pořád klikací */
.banner3 a.extended-empty {
  display: block;
  cursor: pointer;
}

[data-editorid="element-96"] .extended-banner-texts {
  display: none !important;
}

/* Skryj "button" jen pro banner s názvem banner3 (editor id = element-96) */
.banner-wrapper[data-editorid="element-96"] .extended-banner-texts,
.banner-wrapper[data-editorid="element-96"] .extended-banner-texts::before,
.banner-wrapper[data-editorid="element-96"] .extended-banner-texts::after {
  display: none !important;
  content: none !important;
}

/* Pro jistotu i při hoveru – přepíše pravidla z .next-to-carousel-banners ... */
.next-to-carousel-banners .banner-wrapper[data-editorid="element-96"]:hover .extended-banner-texts,
.next-to-carousel-banners .banner-wrapper[data-editorid="element-96"]:hover .extended-banner-texts::before,
.next-to-carousel-banners .banner-wrapper[data-editorid="element-96"]:hover .extended-banner-texts::after {
  display: none !important;
  content: none !important;
}
/* Banner "Nový banner 5" – skrýt fialové pseudo-tlačítko, ale nechat banner proklikový */
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"] .extended-banner-texts,
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"] .extended-banner-texts::before,
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"] .extended-banner-texts::after {
  display: none !important;
  content: none !important;
}

/* Pro jistotu i na hover (Shoptet tam dopisuje vlastní obsah a pozici) */
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"]:hover .extended-banner-texts,
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"]:hover .extended-banner-texts::before,
.next-to-carousel-banners a.extended-empty[href*="/osobnosti/"]:hover .extended-banner-texts::after {
  display: none !important;
  content: none !important;
}

.benefitBanner__item {
padding: 0 10px;
padding: 0 90px;
}
@media screen and (max-width: 767px) {
.benefitBanner__item {
margin-bottom: 20px;
margin-bottom: 15px;
}
}

@media screen and (max-width: 767px) {
h4.homepage-group-title, .h4.homepage-group-title {
margin-top: 48px;
margin-top: 8px;
}
}
@media (max-width: 767px) {
h4.homepage-group-title:first-of-type, .h4.homepage-group-title:first-of-type {
margin-top: 19px;
margin-top: 30px;
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
h4.homepage-group-title, .h4.homepage-group-title {
margin-bottom: 32px;
margin-bottom: 0px;
}
}


.next-to-carousel-banners .extended-banner-texts::after {
padding: 14px 28px;
padding: 10px 32px;
}

.x-hero .x-hero__btn {
padding: 10px 32px;
}



/* ---------------------------------------------------------
   Sjednocení stylu tlačítek v košíku
   --------------------------------------------------------- */
.btn.next-step-forward,
#continue-order-button,
.btn.next-step-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;                       /* mezera mezi textem a šipkou */

  min-height: 56px;                /* sjednocená výška */
  padding: 18px 32px !important;   /* odsazení uvnitř */
  border-radius: 50px !important;  /* zaoblení */
  border: none !important;

  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px !important;      /* stejné jako horní */
  font-weight: 600 !important;     /* stejné tahy */
  text-transform: uppercase !important;
  text-decoration: none !important; /* vypnutí podtržení */
  line-height: 1.2 !important;
  letter-spacing: 0.5px;

  color: #fff !important;
  background-color: #000 !important;
  cursor: pointer !important;

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover efekt */
.btn.next-step-forward:hover,
#continue-order-button:hover,
.btn.next-step-back:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   Šipky – obrysové (border) stejné pro oba buttony
   --------------------------------------------------------- */
:root {
  --arrow-size: 10px;
  --arrow-weight: 2px;
}

/* doprava */
.btn.next-step-forward::after,
#continue-order-button::after {
  content: "" !important;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-top: var(--arrow-weight) solid #fff;
  border-right: var(--arrow-weight) solid #fff;
  transform: rotate(45deg);
  display: inline-block;
}

/* doleva */
.btn.next-step-back::before {
  content: "" !important;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-bottom: var(--arrow-weight) solid #fff;
  border-left: var(--arrow-weight) solid #fff;
  transform: rotate(45deg);
  display: inline-block;
}

/* Tvrdý reset všeho, co šablona kreslí do pseudo-elementů tlačítek */
.btn.next-step-forward::after,
#continue-order-button::after,
.btn.next-step-back::before {
  content: "" !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font: 0/0 a !important;   /* deaktivuje případnou icon-font glyph */
}
.btn.next-step-forward,
#continue-order-button,
.btn.next-step-back {
  text-decoration: none !important;
}

.btn.next-step-forward, #continue-order-button, .btn.next-step-back {
font-weight: 600 !important;
font-weight: 400 !important;
}

/* ---------------------------------------------------------
   úprava fontu v košíku
   --------------------------------------------------------- */

/* Checkout – názvy způsobů dopravy/platby = běžný text Poppins */
.shipping-billing-table label .payment-info,
.shipping-billing-table label .payment-info b,
.shipping-billing-table label .payment-info strong,
.shipping-billing-table label .shipping-billing-name {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;   /* Regular */
  text-transform: none !important;
  letter-spacing: normal !important;
}



/* Checkout – sjednocení stylu cen i textu "ZDARMA" ve volbě dopravy/platby */
.payment-shipping-price {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;      /* normální váha */
  text-transform: none !important;  /* žádné uppercase */
  letter-spacing: normal !important;
  font-size: 15px !important;       /* sjednocená velikost */
  color: #000 !important;           /* černá, stejně jako zbytek textu */
}



/* ---------------------------------------------------------
   odsazení košíku od pravého okraje
   --------------------------------------------------------- */
@media (min-width: 768px) {
.header-top > div:last-child {
padding-right: 20px;
}
}

.cart-widget-button .btn {
width: 258px;
width: auto;
}

@media screen and (max-width: 767px) {
.cart-row > div.col-md-4 .next-step-back {

margin-bottom: 24px;
margin-left: 0px;
margin-right: 0px;
}
}

.btn-conversion.next-step-forward:hover,
#orderFormButton:hover {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

/* Zarovnání produktů na levou stranu */
#products.products-page.products-block {
  justify-content: flex-start !important;
}

/* Znovu zobrazit loga plateb v košíku */
.radio-wrapper .payment-logo,
.b-payment .payment-logo {
  display: inline-flex !important;
  align-items: center;
  margin-right: 10px;
}

.radio-wrapper .payment-logo img,
.b-payment .payment-logo img {
  max-height: 22px;   /* případně 24px, podle potřeby */
  width: auto;
  display: block;
  vertical-align: middle;
}



.products-block .product .p > a.image img {
  padding-bottom: 20px !important;
}

@media screen and (max-width: 767px) {
  .type-index .benefitBanner {
    margin-top: 32px !important;
    margin-bottom: 5px !important;
    padding-left: 20px !important;   /* větší odsazení zleva */
    padding-right: 15px !important;  /* odsazení zprava */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* zarovnání vlevo */
  }

  .type-index .benefitBanner__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 6px !important;
    text-align: left !important;
  }

  .type-index .benefitBanner__title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .type-index .benefitBanner__data {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .type-index .benefitBanner__picture img {
    max-width: 28px !important;
    margin-bottom: 4px !important;
  }
  }
  
/* DESKTOP / TABLET (>= 768px) */
@media (min-width: 768px) {
  .x-hero__inner {
    max-width: 1500px !important;   /* klidně změň na 1200px, pokud je to lepší */
    padding: 56px 50px !important;  /* běžné desktopové odsazení */
  }
}

/* MOBIL (<= 767px) – přesně jak chceš */
@media (max-width: 767px) {
  .x-hero__inner {
    max-width: 1500px !important;   /* může klidně zůstat 1500px – wrapper tě stejně omezí */
    padding: 56px 30px !important;  /* tvé požadované mobilní odsazení */
  }
}

fieldset {
  margin-bottom: 50px;
}


/* MOBILE: fix pro ikonky v detailu osobnosti/kategorie */
@media (max-width: 767px) {
  .benefitBanner.position--benefitCategory,
  .benefitBanner.position--benefitProduct {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* zarovnání doleva */
  }

  .benefitBanner.position--benefitCategory .benefitBanner__item,
  .benefitBanner.position--benefitProduct .benefitBanner__item {
    flex: 0 0 50% !important;   /* vždy polovina */
    max-width: 50% !important;
    box-sizing: border-box;
    padding: 8px 10px;          /* mezery */
    min-width: 0;               /* Safari fix proti přetečení */
    text-align: left;           /* text vlevo */
  }

  .benefitBanner.position--benefitCategory .benefitBanner__title,
  .benefitBanner.position--benefitProduct .benefitBanner__title {
    font-size: 13px;
    line-height: 1.3;
  }

  .benefitBanner.position--benefitCategory .benefitBanner__data,
  .benefitBanner.position--benefitProduct .benefitBanner__data {
    font-size: 12px;
    line-height: 1.2;
  }

  .benefitBanner.position--benefitCategory .benefitBanner__picture img,
  .benefitBanner.position--benefitProduct .benefitBanner__picture img {
    max-width: 28px;
    height: auto;
  }
}

/* MOBILE: zmenšení horní mezery u ikonek v detailu produktu */
@media (max-width: 767px) {
  /* stačí 8–12px, uprav podle chuti */
  .type-product .benefitBanner,
  .type-product .benefitBanner.position--benefitProduct {
    margin-top: 0px !important;
    margin-bottom: 0px;          /* volitelné, ať je to kompaktní i zespodu */
  }

}