table,input,select,a.link--previous,fieldset,textarea,a#edit-login-returning-customer-forgot-password,.tablink{border-radius:0px}
input[type=text],input[type=email],input[type=tel],input[type=submit],input[type=number],input[type=password],input[type=date],input[type="file"]::file-selector-button,select,textarea{padding:8px 12px;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
input[type=checkbox],input[type=radio]{display:inline-block;padding:5px;height:16px;width:16px;background-size:100%;margin:0 10px 0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}
input[type=radio]{border-radius:50%;border:0}
.blue input,.blue textarea {border:0}
br.responsive {display:none}
.desktop{display:block}
.mobile{display:none}
.sirka{width:100%;margin:0 auto;padding:0}
.sirka80{width:70%;margin:0 auto;padding:0}
.banner{width:13%;box-sizing:border-box}
.banner img{width:100%;height:auto;float:left}
.banner1{padding:0 0px 0 0;position:fixed;top:54px;left:0}
.banner2{padding:0 0 0 0px;position:fixed;top:54px;right:0}
h2{margin-bottom:20px}
h3{margin:20px 0}
p+h2{margin-top:20px}
ul+h2{margin-top:20px}
p+h3{margin-top:20px}
ol li{margin:20px 0}
.block{display:block}
.padtop{padding-top:40px}
.padbot{padding-bottom:40px}
.padbot20{padding-bottom:20px}
.padtopbot{padding:40px 0}
.pad80{padding:80px}
.pad0-80{padding:0 80px}
.pad0-150{padding:0 150px}
.pad0-40{padding:0 40px}
.pad40{padding:40px}
.pad20{padding:20px}
.pad020{padding:0 20px}
.pad2{padding:2%}
.pad0-2-2-2{padding:0 2% 2% 2%}
.pad10{padding:10px}
.pad5{padding:5px}
.padleftright{padding:0 40px}

.marg10{margin:10px 0}
.marg20{margin:20px 0}
.marg40{margin:40px 0}
.margtop{margin-top:40px}
.margtop20{margin-top:20px}
.margbot{margin-bottom:40px}
.margbot20{margin-bottom:20px}
.margauto{margin-bottom:0 auto}
.marg0-150{margin:0 150px}

.box{box-sizing:border-box}
.half{width:50%;float:left}
.third{width:33.333%;float:left}
.quater{width:25%;float:left}
.floatleft{float:left}
.floatright{float:right}
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.centerimg{text-align:center;display:flex;justify-content:center}
.centered{margin:0 auto}
.cleardiv{clear:both}
.block{display:block}
.fullwidth{width:100%}
.width80{width:80%;margin:0 auto}
.h10px .item{height:10px;overflow:hidden}
.h20px .item{height:20px;overflow:hidden}
.visually-hidden{display:none}
.fixed{position:fixed}
.vertspacer{height:40px;clear:both}
.vertspacer20{height:20px;clear:both}
td,th{padding:10px 20px;text-align:left;vertical-align:top}
p+p{margin:20px 0}
ol,ul{margin:20px;list-style-position:outside}
li{margin:5px 0}
pre{text-align:left}
.inline{display:inline}
.inline-block{display:inline-block}
.char75{max-width:75ch}
picture{overflow:hidden}
img{line-height:0;font-size:0;display:block}

/* výška tvého fixního menu, třeba 50px */
:root { --header-h: 50px; }
/* při skoku na #kotva nech 50px mezeru nahoře */
html { scroll-padding-top: var(--header-h); }
/* volitelné: plynulé rolování */
html { scroll-behavior: smooth; }
.anchor-target { scroll-margin-top: 70px; }

/* buttons */

.button a, .kariera .views-field-view-node a{background:#C00D0D;color:#fffce5;padding:10px 15px;text-decoration:none;font-size:1.25em}

/* menu */
#topmenuspacer{height:54px;display:block}
#topmenuspacer.only-mobile{display:none}

#topmenu{height:54px;top:0;width:100%;z-index:999;line-height:54px;position:fixed; }
#topmenu ul,#topmenu li{margin:0;padding:0;float:left}
#topmenu nav{float:left}
#topmenu a{float:left;padding:0 .8vw;text-decoration:none}
#topmenu .floatright a{padding:15px .8vw;line-height:0}
#topmenu svg {height:24px;width:auto}
#topmenu .sirka{position:relative}
#topmenu #logo{position:absolute;width:160px;height:190px;top:0;left:20px; transition: 0.5s;transform-origin: top left}
#topmenu #logo a{padding:0;margin:0}
#topmenu #logo img{padding:0;margin: 0;width:100%;height:auto;scale:1;transition:.5s}
#topmenu #logo img:hover{scale:1.1;transition:.5s}
/* #topmenu #logo img{background: rgb(55,1,1);
background: linear-gradient(180deg, rgba(55,1,1,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 33%)} */
#topmenu .socialicons{margin:0 .8vw}

#megamenu-mobile{display:none}

/* megamenu */
#megamenu {
position: fixed;
top: 54px;
left: 50%;
transform: translateX(-50%);
background: #fff;
z-index: 999999;
color: #000;
font-size: 0.8em;
max-width:90%;

/* volitelné pro vzhled */
padding: 20px;
/* border-radius: 10px; */
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
#megamenu a{color:#641506;text-decoration:underline}
#megamenu a:hover{text-decoration:underline;color:#C00D0D}
#megamenu a.kategorie__more-link {color:#777;margin-top:10px;}
#megamenu .snacky a.kategorie__more-link {color:#641506;}
#megamenu .grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 4 sloupce */
gap: 0 20px; /* mezery mezi boxy */
padding: 0 20px;
box-sizing: border-box;
}
#megamenu .views-field-field-ikona-kategorie {
  /* background: aqua; */
  height: 100px;

  display: flex;
  /* Vertikální vycentrování */
  align-items: center;
  /* Zarovnání obsahu doleva (výchozí hodnota, ale pro jistotu) */
  justify-content: flex-start;
}

/* Přidání odsazení zleva, aby se obrázek nelepil úplně na hranu */
#megamenu .views-field-field-ikona-kategorie img {
  margin-left: 10px;
  max-height: 100%;
}

#megamenu .grid .megamenu-item {
padding: 20px;
text-align: left;
}

#megamenu .snacky{background:#ffe482}
#megamenu .nazev{font-size:1.5em;padding:20px 20px 0 20px;color:#641506}


#megamenu .megamenu-item img {
padding: 0;margin:10px 0;
}

#megamenu .megamenu-item strong {
font-size:1.5em;
padding: 0;margin:0;
}

#megamenu .megamenu-item.ostatni .views-row {
width: 100%;
padding:0;
margin-bottom: 0;

display: flex;
align-items: center; /* vertikální zarovnání */
}

/* #megamenu .grid.ostatni.radek .views-row {
background:aqua;
} */
#megamenu .grid.ostatni.radek .views-row {
display: flex; /* Seřadí prvky (img a strong) vedle sebe */
align-items: center; /* Vertikálně vycentruje text na střed obrázku */
gap: 15px; /* Mezera mezi obrázkem a textem */
margin-bottom: 10px; /* Volitelná mezera mezi řádky pod sebou */
}

#megamenu .grid.ostatni.radek .views-row img {
width: 64px; /* Fixní rozměry obrázku */
height: 64px;
object-fit: contain; /* Zabrání deformaci obrázku, pokud není čtvercový */
flex-shrink: 0; /* Zabrání zmenšení obrázku, pokud je text dlouhý */
display: block;
}

#megamenu .grid.ostatni.radek .views-row strong {
font-weight: bold; /* Styl textu */
line-height: 1.2; /* Lepší čitelnost víceřádkového textu */
}

#megamenu .megamenu-item.ostatni .views-row img {
width: 64px;
height: 64px;
margin-right: 20px;
flex-shrink: 0; /* aby se nezmenšoval */
}

#megamenu .megamenu-item.ostatni strong {
font-size: 1.2em;
display: block;
}



#megamenu[hidden] { display:none !important; }

.close {
position: absolute;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}


.marginleftlogo{margin-left:calc(145px + 20px)}


/* frontpage */
#mainpic{background: #000;width:100%}
#mainpic img{width:100%;height:auto}
#heroimage{position:relative}
#heroimage img{width:100%;height:auto;line-height:0}
#heroimage .image{width:100%;height:auto}
#heroimage .anotace{width:50%;position:absolute;bottom:10%;left:15%;color:#fff;font-style: italic;text-align:left;font-size:3em;text-shadow: 0px 0px 10px #000;}
.claim{font-size:1.5em;height:100px;line-height:100px;margin:0}
.frontpage h1{display:none}

/* slider */


/* aktuality a novinky */
.aktuality{width:100%;font-size:1.25em}
.aktuality .pad20{margin:0;padding:0}
.aktuality .views-row{width:100%;float:left;box-sizing: border-box;padding:0;text-align:left;overflow: hidden;}
.aktuality .views-row .views-field-field-anotace{width:50%;float:right;padding:80px;box-sizing: border-box;}
/* .aktuality.redbckgr .views-row .views-field-field-anotace{color:aqua} */
.aktuality.redbckgr .views-row .views-field-field-anotace{float:left}
.aktuality .views-row .views-field-field-image{width:50%;float:right;overflow: hidden;}
.aktuality.redbckgr .views-row .views-field-field-image{width:50%;float:right}
.aktuality .views-row .views-field-field-image img{width:100%;height:auto}
.aktuality.redbckgr{background:#C00D0D;color:#fff}
.aktuality.redbckgr,.aktuality.redbckgr a{color:#fff}

.aktuality h2{font-size:2em;}
.aktuality-list .views-row {margin:2%;width:29.333%;float:left;padding:40px;box-sizing: border-box;height:auto;overflow: hidden;color:#C00D0D}
.aktuality-list .views-row:hover {background:#C00D0D;color:#fff}
.aktuality-list .views-row h2 a{color:#C00D0D}
.aktuality-list .views-row:hover h2 a{color:#fff}
.aktuality-list .views-row img{width:100%;height:auto;margin-bottom:20px;overflow: hidden;}
.aktuality .views-row{transform:scale(1);transition:all 0.2s}
.aktuality .views-row:hover{background:#f3e4c0;color:#FFF}
.aktuality.redbckgr .views-row:hover{background:#890707;color:#FFF}
.aktuality .views-row:hover a, .aktuality .views-row:hover .views-field-field-anotace{color:#C00D0D}
.aktuality.redbckgr .views-row:hover .views-field-field-anotace{color:#FFF}
.aktuality .views-row:hover a h2{color:#C00D0D}
.aktuality.redbckgr .views-row:hover a h2{color:#FFF}
.aktuality.redbckgr .views-row:hover a{color:#FFF}
.aktuality .views-row:hover img{transform:scale(1.05);transition:all 0.5s}
.aktuality a{text-decoration:none;color:#C00D0D}
.aktuality a.btn{display:table;padding:10px 12px;border-radius:0;border:1px solid #C00D0D;margin-top:40px}
.aktuality a.btn:hover{background:#C00D0D;color:#fff;border:1px solid #C00D0D}

.aktuality.redbckgr a,.aktuality.redbckgr a:hover{text-decoration:none;color:#fff}
.aktuality.redbckgr a.btn{display:table;padding:10px 12px;border-radius:0;border:1px solid #fff;margin-top:40px}
.aktuality.redbckgr a.btn:hover{background:#fff;color:#C00D0D;border:1px solid #fff}



.novinky-list .views-row {background:#fff;margin:2%;width:29.333%;float:left;padding:40px;box-sizing: border-box;height:auto;overflow: hidden}

.novinky-list .views-row img{width:100%;height:auto;margin-bottom:20px}
.novinky-list .views-row .views-field-title {height:80px;display:flex}

/* obsah */
#block-pagetitle{display:block;width:100%;text-align:center}
#obsah{margin-top:54px;width:100%;float:left;min-height:calc(100vh - 360px)}
/* node */
#mood {position:relative}
#mood.slim{height:400px;overflow: hidden}
#mood img{width:100%;height:auto;position:relative}
#mood .nadpis{background:rgba(0, 0, 0, 0.75);padding:20px 30px 10px 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40px}
#mood .nadpis h1{color:#fff;padding:0;margin:0}
.google-map-responsive{
overflow:hidden;
padding-bottom:34.5%;
position:relative;
height:500px;
margin-top:80px;
}
.google-map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

/* kariera */
.kariera-node h1{border:0 solid #C00D0D;padding:20px;font-weight:bold;background:#e5e3cb}
.kariera .text{float:left;width:100%}
.kariera .anotace{margin:0 auto;padding:0}
.grid-item.img {padding:0}
.grid-item.img img{display: block;width: 100%;height: auto;}
#benefity .grid-item {border:1px solid #000}
.grid-item .label{display:block;float:left;width:100%;line-height:50px;height:50px;margin-bottom:20px;display: flex;align-items: center; /* vertikální zarovnání */}
.grid-item .label img,.grid-item .label strong {float:left}
.grid-item .label strong,.grid-item .label img{margin-right:20px}
#benefity .views-row{text-align: left !important}
#benefity .views-row strong{margin-bottom:20px;width:100%;display:block}
#benefity .views-row ul {margin:0;padding:0;list-style-position:outside;margin-left:40px}
#formular.pad0-80{padding:0}

#formular :is(
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea
){
width:96.5%;
max-width:96.5%;
}


/* salamovna */
.salamovna a img{width:100%;height:auto}
#newsletter h2{color:#fff}
.salamovna table,.salamovna td{border:1px solid #641506}
/* salamovna */
.salamovna table{width:80%;border:1px solid #641506;height:500px}
.salamovna table td{vertical-align: middle}
.salamovna table td:nth-child(1) {
background:#C00D0D;color:#fff;
}
.salamovna table td:nth-child(2) {
text-align: right;
}

/* grid */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Dvě sloupce se stejnou šířkou */
gap: 40px; /* Mezeru 40px mezi divy */
width: 100%; /* Kontejner zabírá celou šířku rodiče */
max-width: 100%; /* Zabrání přetečení */
padding: 0; /* Odstranění výchozího paddingu, pokud je potřeba */
margin: 0; /* Odstranění výchozího marginu */
}

.grid-item {
padding: 20px; /* Volitelný vnitřní odstup */
}

/* responsive yotube iframe */
.video-container{position:relative;padding-bottom:53%;padding-top:30px;height:0;overflow:hidden}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}
iframe{border:0}

/* Hlavní kontejner (sirka) už máte jako flex, to je dobře */
#stats .sirka {
    display: flex;
    justify-content: center;
    align-items: center; /* Centruje tři bloky mezi sebou */
    gap: 80px;
    padding: 40px 0; /* Horní a dolní odsazení celého pruhu */
}

/* Úprava samotné položky - uděláme z ní taky flex */
#stats .polozka {
    display: flex;       /* Aktivuje flexbox pro vnitřek */
    align-items: center; /* SVISLÉ CENTROVÁNÍ textu vůči číslu */
    height: auto;
}

/* Odstraníme floaty, které dělají neplechu */
#stats strong {
    font-size: 3em;
    float: none;         /* Zrušeno */
    line-height: 1;      /* Pomáhá lepšímu centrování */
}

#stats .big {
    font-size: 5em;
    line-height: 0.8;    /* Korekce pro obří symbol nekonečna */
}

#stats span {
    float: none;         /* Zrušeno */
    padding: 0 0 0 20px; /* Zrušen horní padding, o centrování se stará flex */
    font-size: 1.5em;
    line-height: 1.1;
}


/* footer */
.footer-grid{
display:grid;
grid-template-columns: 32% 20% 24% 20%; /* nastav si podle potřeby */
gap:2%;
align-items:start;
}
/* footer .sloupec {background: aqua;border:2px solid red;} */

/* drobnosti */
.footer-grid .logo{ display:block; }
.footer-grid svg, .footer-grid img{width:100%;height:auto; min-height:20px}


footer .icons{height:40px;display:flex;align-items:left;justify-content:left}
footer .icons a{padding:0;margin:0}
footer .logo svg {width:auto;height:170px;display:inline-block}
footer .social .icons svg {width:auto;height:30px;display:inline-block}
footer .social a{height:40px;margin:0;transition:all 0.2s;margin:0 40px 0 0}
footer .social a:hover{transform:scale(1.15);transition:all 0.2s}
footer ul{padding:0;margin:0} */
footer nav li a{font-size:2em}
footer .adresa {font-size:.8em}
footer .adresa a{margin:0;padding:0}
.padfooter{padding: 60px 120px}
/* footer .adresa{text-align:right} */

/* eshop stránka */

/* ikony */
.eshop #ikony{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
gap:20px;
}
.eshop #ikony .icon{
display:grid;
justify-items:center; /* střed vodorovně pro všechny děti */
text-align:center;
gap:12px;
/* border-radius:10px; */
padding:20px;
}
.eshop #ikony .icon strong{
display:block;
width:100%;
text-align:center; /* ⬅️ tohle opraví tvůj problém s dvouslovným textem */
height:40px;
}

.eshop #ikony .icon img{
display:block;
margin:12px auto 0; /* obraz vždy přesně na střed */
}
/* /ikony */

.eshop #polozky{text-align:center}
/* univerzál: střed + čitelná šířka */
.eshop .views-field-description__value .char75{
display:block; /* ať je to block */
max-width:75ch; /* lepší než pevná width */
width:100%; /* ať se na mobilu zúží */
margin-left:auto; /* centrování v běžném flow i flexu */
margin-right:auto;
text-align:center; /* text zůstane vlevo (lepší čitelnost) */
}


.eshop .product h3{height:80px;margin:0;}
.eshop .product h2{height:80px;}
.eshop .product {background:#fff}
.eshop .product:hover {background:#f3e4c0}
.eshop .cena{border:2px solid #641506;width:65%;margin:0 auto}
.eshop .product .img img{scale:1;transition:.5s}
.eshop .product .img img:hover{scale:1.1;transition:.5s}
.eshop h2{margin:0;padding:0}
.eshop input[type=submit]{margin:20px auto;padding:5px 10px}
.eshop .form-actions{width:100%;text-align:center;padding:10px 0}
.eshop .fieldset-wrapper{height:100px}
#limitovane,#special{padding:24px}

/* gridy */
/* =========================
GRID (obecně pro Views uvnitř .grid)
========================= */

.grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
align-items: stretch; /* důležité: grid itemy v řádku se natáhnou na stejnou výšku */
}
.grid2{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch; /* důležité: grid itemy v řádku se natáhnou na stejnou výšku */
}

.grid > .views-element-container{ display: contents; }
.grid > .views-element-container > [class^="js-view-dom-id-"]{ display: contents; }

.grid > .views-element-container > [class^="js-view-dom-id-"] > header{
grid-column: 1 / -1;
margin: 0;
padding: 0;
}

/* Grid itemy (produkty) – natáhnout, sjednotit vnitřní layout */
.grid > .views-element-container > [class^="js-view-dom-id-"] > div{
min-width: 0;
height: 100%; /* pomůže s „stejnou výškou“ */
display: flex; /* ať lze uvnitř skládat obsah */
flex-direction: column;
}

/* Pokud je uvnitř tvůj .product box (viz twig), natáhni i jeho */
.grid .product.box{
height: 100%;
display: flex;
flex-direction: column;
}

/* =========================
OBRÁZEK: střed / střed a bez deformace
========================= */

/* .img jako konzistentní „okno“ na obrázek */
.grid .product .img{
height: 180px; /* nastav dle designu (např. 160–220px) */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* volitelné */
}

/* samotný obrázek */
.grid .product .img img{
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* nedeformuje, vejde se dovnitř */
object-position: center; /* střed / střed */
}

/* =========================
Volitelně: spodní část (cena + tlačítko) vždy dolů
========================= */
.grid .product .cena-koupit{
margin-top: auto; /* posune cenu/tlačítko na spodní okraj karty */
}



/* /stranka eshopu */

.eshop #kmotrovky,.eshop #kmotrenky,.eshop #darky,.eshop #klobasy,.eshop #salamy{padding:0 24px;box-sizing: border-box}

/* stranka produktu */
.product h1{color:#641506}
.product .anotace {margin-top:20px}
/* .obrazek-produktu {background: aqua} */
.obrazek-produktu{padding-left:40px;position:relative}
.obrazek-produktu img{max-width:100%;height:auto;max-height:400px}

.img-wrap.special {
  max-height: 850px;
  /* background: aqua; */
  display: flex;          /* Pomůže s centrováním */
  justify-content: center;
  align-items: center;    /* Vycentruje menší obrázek v aqua poli */
  overflow: hidden;
}

.img-wrap.special img {
  display: block;
  max-width: 100%;        /* Nepřeteče šířku kontejneru */
  max-height: 700px;      /* Nepřeteče váš limit */
  width: auto;            /* Zachová poměr a originální šířku */
  height: auto;           /* Zachová poměr a originální výšku */
}

.rot90{
position: relative;
width: 50%;
overflow: hidden;
}
.rot90::before{
content:"";
display:block;
/* po otočení 90° se poměr stran převrátí: výška = (původná šířka / původná výška) * šířka */
padding-top: 100%;
}
.rot90 > img{
position:absolute;
left:50%; top:50%;
transform: translate(-50%, -50%) rotate(90deg);
max-width:none; width:auto; height:28%;
}

/* rodič už necentrujeme na výšku, ať top=40px platí vizuálně */
.obrazek-produktu {
display: flex;
justify-content: center; /* Toto vycentruje obsah (obrázek) vodorovně */
align-items: flex-start; /* Ponechá zarovnání k hornímu okraji */
gap: 0;
padding-left: 0;
position: relative;
width: 100%; /* Ujisti se, že kontejner bere celou šířku */
}
.obrazek-produktu .img-wrap,
.obrazek-produktu .piktogramy{
float: none !important;
}
.obrazek-produktu .img-wrap {
display: flex; /* Uděláme z obalu flexbox */
justify-content: center; /* Vycentruje img vodorovně */
align-items: center; /* Vycentruje img svisle */

width: 100%; /* Nebo šířka, kterou potřebuješ, např. 80% */
min-height: 500px; /* Aby bylo vidět svislé centrování */
}
.obrazek-produktu img{max-height:100%}

/* sloupec piktogramů – fixní šířka 200px */
.obrazek-produktu .piktogramy{
width: 20%;
display: flex;
flex-direction: column;
align-items: center; /* centrování piktogramů v rámci 200px sloupce */
gap: 8px;
padding: 0; /* případně doplň padding-top/left, pokud chceš odsazení */
text-align: left;
padding-top: 40px;
}

/* jednotlivý piktogram – box 70×70, centrovaný obsah */
.obrazek-produktu .piktogramy .piktogram{
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
margin: 0;
}

/* samotné SVG/IMG – fixní velikost 70×70 */
.obrazek-produktu .piktogramy .piktogram img,
.obrazek-produktu .piktogramy .piktogram svg{
display: block;
width: 70px !important;
height: 70px !important;
object-fit: contain;
}

/* pikrogram na stránce */
#piktogram-page {
display: flex;
flex-wrap: wrap; /* Povolí zalomení na mobilu, aby piktogramy neutekly z obrazovky */
gap: 12px; /* Mezera mezi jednotlivými piktogramy */
align-items: center; /* Svislé zarovnání na střed */
}

#piktogram-page .piktogram {
width: 80px; /* Šířka kontejneru */
height: 80px; /* Výška kontejneru */
display: flex; /* Vycentrování obrázku uvnitř divu */
align-items: center;
justify-content: center;
}

#piktogram-page .piktogram img {
max-width: 100%; /* Obrázek se přizpůsobí 50px kontejneru */
max-height: 100%;
height: auto; /* Zachová poměr stran */
display: block;
}



/* .palivost{background:aqua;height:100px;} */

.palivost{
display:flex; gap:6px; padding:0; margin:0; list-style:none;
}
.palivost .icon svg{ width: 2em; height: auto; } /* 1em = velikost písma */
.palivost .icon svg path{ fill: #C1881E; }
.palivost .icon.is-active svg path{ fill: #C00D0D; }

/* Rodič: vedle sebe, vertikálně vycentrovat */
.cena.fullproduct{
display: flex;
align-items: center; /* ← vertikální zarovnání obou divů */
justify-content: left;/* cena vlevo, tlačítko vpravo */
gap: 30px;
font-size: 30px; /* jednotná velikost písma pro oba */
width:300px;
color:#641506;
}
.cena input{font-size: 24px;}


.slozeni.pad40{padding:0 80px;}

/* Základní reset */
.nutricnihodnoty ul, 
.nutricnihodnoty li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nutricnihodnoty ul.pa-dot-leaders {
    max-width: 60em;
    padding: 15px 20px; /* Upraven padding podle obrázku */
    margin: 0;
}

.nutricnihodnoty ul.pa-dot-leaders li {
    display: flex;       /* Zapneme flexbox pro řádek */
    align-items: baseline; /* Zarovnáme text na linku */
    width: 100%;
    margin-bottom: 5px;  /* Mezera mezi řádky */
}

/* Tečky jako flexibilní výplň */
.nutricnihodnoty ul.pa-dot-leaders li::after {
    content: "";
    flex-grow: 1;        /* Vyplní veškeré prázdné místo */
    order: 2;            /* Umístí se mezi první a druhý span */
    border-bottom: 2px dotted #641506; /* Barva a styl teček */
    margin: 0 5px;       /* Mezera mezi tečkami a textem */
    height: 10px;        /* Aby tečky nebyly úplně nalepené na spodku */
    position: relative;
    top: -4px;           /* Doladění výšky teček vůči textu */
}

.nutricnihodnoty ul.pa-dot-leaders span:first-child {
    order: 1;            /* Text vlevo */
    white-space: nowrap;
}

.nutricnihodnoty ul.pa-dot-leaders span + span {
    order: 3;            /* Hodnota vpravo */
    white-space: nowrap;
    text-align: right;
    font-weight: bold;   /* Podle obrázku jsou hodnoty výraznější */
}

.nutricnihodnoty .tabulka {
    border: 1px solid #641506;
    background-color: #fffce5; /* Barva pozadí z obrázku */
}

/* kontakt */
.kontakt .body{border:2px solid #C00D0D;background:#C00D0D;padding:0}
.kontakt .jedna{background:#C00D0D;color:#fff}
.kontakt .dva{background:#fffce5;color:#C00D0D}
.kontakt .jedna h2,.kontakt .jedna a{color:#fff}
html .webform input[type=tel],
html .webform input[type=text],
html .webform input[type=email],
html .webform textarea
{width:100% !important}
html .webform {width:80%;margin:40px auto;}
html .grid-kontakt .webform {width:100%;margin:0;}
.webform-confirmation{text-align:center}

.grid-kontakt h1{text-align:left}

.grid-kontakt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px; /* Pokud chcete, aby mapa seděla přesně na okraji */
    align-items: stretch;
}

/* Levý sloupec (webform) */
.grid-kontakt > .webform {
    justify-self: start;
    width: 100%;
}

/* Pravý sloupec (mapa) */
.grid-kontakt > .map {
    justify-self: end;
    width: 100%;
    display: flex; /* Zajistí, že iframe uvnitř poslechne výšku */
}

.grid-kontakt > .map iframe {
    width: 100%;
    flex-grow: 1;
}
/* Cílíme na iframe uvnitř kontejneru s mapou */
.grid-kontakt .map iframe {
    /* Nastavte přesnou výšku v pixelech, která vám vizuálně sedí */
    height: 402px !important;

    /* Zajistí, že se mapa nebude snažit centrovat vertikálně,
       pokud je zbytek buňky vyšší */
    display: block;
    align-self: start;

    width: 100%;
    border: 0;
}

/* Volitelně: zarovnání kontejneru mapy k hornímu okraji */
.grid-kontakt > .map {
    align-self: start;
    height: auto;
}


/* kategorie */
.eshop a{text-decoration:none}
/* 1) Hlavní grid pro celou sekci */
.eshop{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
padding:24px;
align-items: start; /* prevence "odskočení" přes baseline */
}

.eshop.nakupte{
display:block;
}

/* 2) Header kategorie: zabere celý řádek */
.eshop #header-kategorie, .eshop #footer-kategorie{
grid-column: 1 / -1; /* přes všechny 4 sloupce */
padding: 0; /* bez paddingu */
margin: 0; /* volitelně, ať si nepřidává vlastní */
}

/* 3) Karty kategorií: 4 vedle sebe, uvnitř padding */
.eshop .produkty-kategorie{
padding: 0;
box-sizing: border-box;
/* volitelně: aby všechny karty působily konzistentně */
height: 100%;
}

/* 4) Pokud má #header-kategorie nebo .produkty-kategorie defaultní šířky/floaty, zruš je */
.eshop #header-kategorie,
.eshop .produkty-kategorie{
width: auto;
float: none;
}
.eshop .product{
width:100%;
height:300px;
padding:30px;
box-sizing:border-box;
}

.eshop .produkty-kategorie .img{
height: 180px; /* nastav podle designu */
display: flex;
align-items: center;
justify-content: center;
}

.eshop .produkty-kategorie .img img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}


/* custom css dle taxonomií na body */
/* .trvanlive-salamy .product .img{height: 4vw !important;} */
/* .darkove-zbozi .product .img{height: 20vw !important;} */
.kmotrenky h1,html .kmotrovky h1{text-transform: uppercase;!important}

/* ------------------------------------------------------------
KROMĚŘÍŽSKÝ SPECIAL – GRID + ŘÁDKOVÉ BARVY + CENTER + COVER
------------------------------------------------------------ */

body.kromerizsky-special .product,
body.kromerizsky-special .product:hover { background: none; }

body.kromerizsky-special h1{display:none}
/* 0) Hlavní grid (4 sloupce, 2 prvky na řádek protože každý span 2) */
body.kromerizsky-special #footer-kategorie{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 0;
row-gap: 0;
align-items: stretch; /* grid itemy se natáhnou na výšku řádku */
grid-auto-rows: 440px; /* fixní výška řádku – uprav dle designu */
}

/* 1) Barvy po řádcích = vždy dvojice přímých potomků (1–2, 3–4, …) */
body.kromerizsky-special #footer-kategorie > :nth-child(1),
body.kromerizsky-special #footer-kategorie > :nth-child(2){
background: #f4d8a6; color: #641506;
}
body.kromerizsky-special #footer-kategorie > :nth-child(3),
body.kromerizsky-special #footer-kategorie > :nth-child(4){
background: #b2926d; color: #641506;
}
body.kromerizsky-special #footer-kategorie > :nth-child(5),
body.kromerizsky-special #footer-kategorie > :nth-child(6){
background: #775839; color: #f4d8a6;
}
body.kromerizsky-special #footer-kategorie > :nth-child(7),
body.kromerizsky-special #footer-kategorie > :nth-child(8){
background: #482c14; color: #f4d8a6;
}
body.kromerizsky-special #footer-kategorie > :nth-child(9),
body.kromerizsky-special #footer-kategorie > :nth-child(10){
background: #f4d8a6; color: #641506;
}
body.kromerizsky-special #footer-kategorie > :nth-child(11),
body.kromerizsky-special #footer-kategorie > :nth-child(12){
background: #b2926d; color: #641506;
}

/* 2) Ať se typografie v produktech řídí barvou buňky (ne natvrdo) */
body.kromerizsky-special #footer-kategorie .product,
body.kromerizsky-special #footer-kategorie .product a,
body.kromerizsky-special #footer-kategorie .product h2{
color: inherit;
}

/* 3) Layout: .eshop a .perokresba přes 2 sloupce */
body.kromerizsky-special #footer-kategorie > .eshop,
body.kromerizsky-special #footer-kategorie > .perokresba{
grid-column: span 2;
height: 100%; /* důležité pro centrování / cover */
min-height: 0;
}

/* 4) ESHOP: buňka = flex, vnořený obsah na střed vertikálně i horizontálně */
body.kromerizsky-special #footer-kategorie > .eshop{
display: flex;
align-items: center;
justify-content: center;
}

/* volitelné: když uvnitř máš svůj vnořený grid / wrapper */
body.kromerizsky-special #footer-kategorie > .eshop > *{
max-width: 100%;
}

/* 5) PEROKRESBA: „viewport“ + cover + ořez (bez flex konfliktů) */
body.kromerizsky-special #footer-kategorie > .perokresba{
position: relative;
overflow: hidden; /* ořez */
display: block; /* držíme konzistentně block */
}

/* aby cover fungoval i když je tam <a>, <picture>, apod. */
    body.kromerizsky-special #footer-kategorie > .perokresba > a,
    body.kromerizsky-special #footer-kategorie > .perokresba > picture{
    display: block;
    width: 100%;
    height: 100%;
    }

    /* finální „tvrdé“ přepsání globálního img {height:auto} */
    body.kromerizsky-special #footer-kategorie > .perokresba img{
    display: block;
    width: 100% !important;
    height: 100% !important; /* často jinak přepere globální height:auto */
    max-width: none; /* ať max-width:100% neškodí */
    max-height: none;
    object-fit: cover;
    object-position: center;
    }
    /* ============================================================
    FIX: perokresba = skutečný cover + ořez + střed
    ============================================================ */

    /* perokresba je viewport */
    body.kromerizsky-special #footer-kategorie > .perokresba{
    position: relative;
    overflow: hidden;
    height: 100%; /* důležité: opírá se o grid-auto-rows */
    min-height: 0;
    }

    /* V Drupalu bývá img obalené několika divy/fieldy – ty MUSÍ mít 100% výšku */
    body.kromerizsky-special #footer-kategorie > .perokresba > *,
    body.kromerizsky-special #footer-kategorie > .perokresba .field,
    body.kromerizsky-special #footer-kategorie > .perokresba .field__item,
    body.kromerizsky-special #footer-kategorie > .perokresba picture,
    body.kromerizsky-special #footer-kategorie > .perokresba a,
    body.kromerizsky-special #footer-kategorie > .perokresba figure{
    display: block;
    width: 100%;
    height: 100%;
    }

    /* Nejspolehlivější varianta: img absolutně přes celý box */
    body.kromerizsky-special #footer-kategorie > .perokresba img{
    position: absolute;
    inset: 0;
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover;
    object-position: 50% 50%;
    }


    /* ============================================================
    FIX: eshop = 2 produkty uprostřed (vertikálně i horizontálně)
    ============================================================ */

    body.kromerizsky-special .eshop{
    gap: 0;
    row-gap:0;
    padding:0;
    align-items: start; /* prevence "odskočení" přes baseline */
    }

    /* Udělej z .eshop vnořený grid 2 sloupce a celý obsah vycentruj */
    body.kromerizsky-special #footer-kategorie > .eshop{
    height: 100%;
    min-height: 0;
    display: grid; /* místo flex – spolehlivější pro 2 položky */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center; /* vertikální centrování celé dvojice */
    justify-content: center;
    place-items: center; /* centrování položek v jejich buňkách */
    }

    /* Aby každý produkt sám byl „center box“ */
    body.kromerizsky-special #footer-kategorie > .eshop .product{
    height: 100%;
    width: 100%;
    padding:24px;
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontálně */
    justify-content: center; /* vertikálně */

    background: none;
    }

    body.kromerizsky-special #footer-kategorie > .eshop .product .img{height:380px;}

    /* Typicky bývá v .product ještě wrapper kolem img a title – ten taky centruj */
    body.kromerizsky-special #footer-kategorie > .eshop .product > *{
    max-width: 100%;
    }
    /* ============================================================
    Barvy odkazů podle řádků (vždy 2 buňky = 1 řádek)
    ============================================================ */

    /* Řádek 1: buňky 1–2 */
    body.kromerizsky-special #footer-kategorie > :nth-child(1) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(2) a{
    color: #641506;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(1) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(2) a:hover{
    color: #641506;
    text-decoration: underline;
    }

    /* Řádek 2: buňky 3–4 */
    body.kromerizsky-special #footer-kategorie > :nth-child(3) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(4) a{
    color: #641506;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(3) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(4) a:hover{
    color: #641506;
    text-decoration: underline;
    }

    /* Řádek 3: buňky 5–6 */
    body.kromerizsky-special #footer-kategorie > :nth-child(5) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(6) a{
    color: #f4d8a6;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(5) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(6) a:hover{
    color: #f4d8a6;
    text-decoration: underline;
    }

    /* Řádek 4: buňky 7–8 */
    body.kromerizsky-special #footer-kategorie > :nth-child(7) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(8) a{
    color: #f4d8a6;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(7) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(8) a:hover{
    color: #f4d8a6;
    text-decoration: underline;
    }

    /* Řádek 5: buňky 9–10 */
    body.kromerizsky-special #footer-kategorie > :nth-child(9) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(10) a{
    color: #641506;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(9) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(10) a:hover{
    color: #641506;
    text-decoration: underline;
    }

    /* Řádek 6: buňky 11–12 */
    body.kromerizsky-special #footer-kategorie > :nth-child(11) a,
    body.kromerizsky-special #footer-kategorie > :nth-child(12) a{
    color: #641506;
    }
    body.kromerizsky-special #footer-kategorie > :nth-child(11) a:hover,
    body.kromerizsky-special #footer-kategorie > :nth-child(12) a:hover{
    color: #641506;
    text-decoration: underline;
    }

    /* Volitelně: sjednocení visited, aby ti to Drupal/browser neobarvoval do fialova */
    body.kromerizsky-special #footer-kategorie a:visited{
    color: inherit;
    }







    /* 1) Skryj viditelný text uvnitř .nadpis (ale nech ho pro čtečky) */
    .snackid .nadpis {
    position: relative;
    display: inline-block; /* případně block podle layoutu */
    width: 800px; /* nastav šířku loga */
    aspect-ratio: 220 / 56; /* poměr loga; uprav dle tvého SVG */
    line-height: 0;
    color: transparent;
    }
    .snackid #mood .nadpis{background:none;bottom:40%}
    .snackid .nadpis > * {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* 2) Vlož logo jako pozadí přes ::before */
    .snackid .nadpis::before{
    content: "";
    position: absolute; inset: 0;
    background: url("/themes/d9theme/images/snackid.svg") center/contain no-repeat;
    }

    .snackid #mood::after {
    content: "... sváča pro holku i kluka";
    position: absolute;
    color:#fff;
    /* POZICOVÁNÍ – uprav si jak potřebuješ */
    bottom: 5%;
    left: 5%;
    /* STYL BLOKU – aby se choval jako nový div */
    display: block;
    padding: 6px 12px;
    font-size: 48px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    }

    body.kmotrovky-snack,.kmotrovky-snack #obsah,.kmotrovky-snack .eshop .product,body.party-snack,.party-snack #obsah,.party-snack .eshop .product{background:#000;color:#fffce5;}
    .kmotrovky-snack #obsah h2,.party-snack #obsah h2{font-family:'Ubuntu',sans-serif}
    .kmotrovky-snack .eshop .product h2, .party-snack .eshop .product h2{color:#fff;}
    .kmotrovky-snack .eshop .product, .party-snack .eshop .product {background:#222222}
    .kmotrovky-snack .eshop .product:hover, .party-snack .eshop .product:hover {background:#333333}

    .kmotrovky-snack h1, .party-snack h1{font-size:4em}
    .kmotrovky-snack .popisek, .party-snack .popisek{margin-top:10px}
    @font-face {
    font-family: "Trade Gothic Next Rust W01 Hv";
    src: url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.eot");
    src: url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.eot?#iefix") format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.woff2") format("woff2"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.woff") format("woff"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.ttf") format("truetype"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.svg#Trade Gothic Next Rust W01 Hv") format("svg");
    }
    .kmotrovky-snack h1,.party-snack h1{font-family:"Trade Gothic Next Rust W01 Hv",sans-serif;text-transform:uppercase}



    .snackid #obsah{
    background-image:url('/themes/d9theme/images/snackidBackgr.png');
    background-size:cover;background-repeat:no-repeat;background-position:bottom;
    }







    .popisek{color:#fff}
    /* #header-kategorie,#produkty-kategorie,#footer-kategorie{float:left;width:100%;display:block;clear: both} */
    /* .foto-kategorie-block img{float:left;padding:1%;height:300px;width:auto} */
    .youtube-block{
    position: relative;
    box-sizing:border-box;
    width: 100%;
    margin: 2% 0 2% 0;
    overflow: hidden; /* klíč: schováme přesahy */
    }

    /* default 16:9 (ponecháváš 16/8 → 2:1) */
    .youtube-block:not([class*="ar-"]) {
    aspect-ratio: 16 / 8;
    }

    /* „cinematic“ výřez (ponecháváš 16/8) */
    .youtube-block.ar-239{
    aspect-ratio: 16 / 8;
    }

    .youtube-block iframe{
    position: absolute; inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }

    .youtube-block:not(:has(iframe)){ display:none; }

    /* kategorie snacky */
    @font-face {
    font-family: "Trade Gothic Next Rust W01 Hv";
    src: url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.eot");
    src: url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.eot?#iefix") format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.woff2") format("woff2"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.woff") format("woff"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.ttf") format("truetype"),
    url("https://db.onlinewebfonts.com/t/08d650113a671928fa80a338975338ec.svg#Trade Gothic Next Rust W01 Hv") format("svg");
    }
    #snacky h1{font-family:"Trade Gothic Next Rust W01 Hv",sans-serif;text-transform:uppercase;font-size:7em}
    #snacky #mood .nadpis{background:none}
    #snacky .popisek{margin-top:20px}
    .grid-2clm{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    }
    .grid-2clm img{width:100%;height:auto}
    .grid-2clm .snacky-item{position:relative;}
    .grid-2clm .snacky-item .nadpis{position:absolute;bottom:40px;left:40px;}
    .grid-2clm .snacky-item .nadpis h2{font-family:'Ubuntu',sans-serif;text-transform:uppercase;color:#fff;font-size:2.8em;padding:0;margin:0;height:55px;text-shadow: 3px 3px 5px #000}

    /* Udělej z wrapperu grid: 3 sloupce + 20px mezery */
    .foto-kategorie-block{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    }

    /* Zplošť VŠECHNY obaly až po <img>, ať jsou obrázky skutečné grid položky */
    .foto-kategorie-block :not(img){
    display: contents !important;
    }

    /* Samotné obrázky = dlaždice s fixní výškou */
    .foto-kategorie-block img{
    display: block;
    width: 100%;
    height: 300px; /* fixní výška */
    object-fit: cover; /* pěkné vyplnění, i za cenu ořezu */
    float: none; /* jistota, že floaty z předchozích stylů neruší */
    }

    /* slider na kategorie obrázcích */




    #cards {display:flex;justify-content:center;align-items:center;width:100%;padding:10px 0}
    #cards svg {width:auto;height:40px;display:inline-block}
    #cardsdole svg{height:20px;padding-top:0px}
    #cardsdole {vertical-align:middle;line-height:20px}
    .cena.fullproduct div{float:left}

    .eshop.related{display:block}
    .eshop.related .eshop {display:grid}


    .related .product, .listing .product{text-align:center}
    .related .product .skladem, .listing .product .skladem, .eshop .skladem{text-align:center;display:inline-block}
    .related .product h3{height:60px}

    /* kategorie */
    .eshop .views-field-description__value{margin:40px 0}
    .listing h1 a{text-decoration:none}

    /* stranka produktu */
    .koupit{padding:30px 60px;width:60%}
    .obrazek{width:40%;padding:30px 0;text-align:center;display: flex;
    justify-content: center; /* vodorovně */
    align-items: center; /* svisle */
    min-height: 200px; /* nebo jiná výška parentu */}
    #eshopbtns{width:80%;margin:0 auto;text-align:center;float:left;margin:0 10%}
    #eshopbtns a {padding:20px 30px;display:inline;text-decoration:none;margin:1%;white-space: nowrap;width:31.333%}
    #ionizatory,#filtry,#doplnky,#koupelna,#uchovani{padding-top:50px;margin:0}
    .atributy {position:relative}
    .atributy fieldset{margin:0;padding:0;width:50%;float:left}
    .skladem,.naobjednavku{padding:5px 8px;display:table;/* margin:auto; */}
    .eshop .atributy form input.form-submit{margin:20px auto;display:table}
    .atributy form input.form-submit{margin:20px auto}
    #breadcrumb {width:100%;float:left;padding:0;margin:0 0 10px 0}
    .kategorie a{padding:9px 13px;margin-right:10px}
    html .kategorie a:hover{text-decoration:none;background:#C00D0D;color:#fff}



    #thankyou {margin:24px auto;text-align:left;padding:24px;box-sizing: border-box;width:768px}

    /* registrace po objednávce */
    .commerce-checkout-completion-register{background:#fff;margin:40px 0;padding:24px;box-sizing: border-box;width:100%}
    .commerce-checkout-completion-register summary{display:none}
    .commerce-checkout-completion-register .address-line2,#edit-completion-register-pass--description{display:none}
    .commerce-checkout-completion-register label{width:250px;display:block}
    .commerce-checkout-completion-register input[type=text],.commerce-checkout-completion-register input[type=password]{width:100%}

    /* admin toolbar */
    #toolbar-administration{display:none}
    /* views */


    /* pager */
    .pager {width:100%;float:left;padding:40px 0;text-align:center}
    .pager ul{width:auto;text-align:center;margin:0 auto}
    .pager li{text-align:center;display:inline;margin:10px}
    .pager li a, .pager li.is-active a{text-align:center;border:1px solid;padding:10px 15px;text-decoration:none}
    .pager li.is-active a{border:1px solid #000}
    /* Custom ajax throbber style */
    .ajax-progress,.ajax-progress-throbber,.views-throbbing{display:none}

    /* formulare */
    .form-item{margin:20px 0}
    .form-item input, .form-item textarea{border:1px solid #999}

    /* messages */
    /* div[role=contentinfo]{text-align:center;padding:10px;box-sizing:border-box;width:100%;margin:0px auto;border:2px solid #C00D0D}
    div[role=contentinfo] ul,div[role=contentinfo] li{margin:0;padding:0;list-style-type:none} */

    /* jen zprávy, ne footer – omezíme selektor na messages wrapper */
    [data-drupal-messages] > div[role="contentinfo"]{
    max-width: 760px; /* uprav podle sebe */
    width: 90%;
    margin: 12px auto; /* centrování */
    padding: 10px;
    box-sizing: border-box;
    /* border: 2px solid #C00D0D; */
    text-align: center;
    color:#fff;
    background:#648D25;
    }
    [data-drupal-messages] > div[role="contentinfo"] a {color:yellow}


    .copyrightnahore{width:100%;height:350px;overflow:hidden;top:0;border:0;z-index:-2;padding-top:20px;display:block}


    /* tabs */
    #block-d9theme-primary-local-tasks{display:block}
    #block-d9theme-primary-local-tasks ul,#block-d9theme-primary-local-tasks--2 ul{width:100%;margin:20px auto 40px auto}
    #block-d9theme-primary-local-tasks li,#block-d9theme-primary-local-tasks--2 li{list-style-type:none;display:inline-block;padding:0;margin:0}
    #block-d9theme-primary-local-tasks a,#block-d9theme-primary-local-tasks--2 a{padding:10px 15px;text-decoration:none;border-radius:0px;border:1px solid;margin:0 10px}




    /* maintenance */
    body.maintenance-page{padding:40px;box-sizing: border-box}
    body.maintenance-page header{display:none}

    /* mobil */

    @media (max-width: 768px) {
    /* general */
    body,input,textarea{font-size:14px}
    input[type=text],input[type=email],input[type=tel],input[type=submit],input[type=number],input[type=password],input[type=date],select,textarea{max-width:100%;width:100% !important}
    input[type=checkbox]{height:20px;width:20px;-webkit-appearance:none;-moz-appearance:none;border-radius:0;border:0}

    .banner{display:none}
    .sirka,.half,.third,.quarter,.sirka80{width:100%}
    .desktop{display:none}
    .mobile{display:block}
    .margtop{margin-top:0}
    .margtop20{margin-top:0}
    .sirka.pad40{padding:0}
    .sirka.pad80{padding:0}
    .pad0-150{padding:0}
    .footer-grid{
    display:grid;
    grid-template-columns: 100%; /* nastav si podle potřeby */
    gap:2%;
    align-items:start;
    }
    .padfooter{padding:40px}
    #obsah{margin:0;padding:0}
    .node,#node{padding:0 0;box-sizing: border-box;width:100%}
    .claim{font-size:1.5em;margin:40px auto;height:auto;line-height:1.75em;margin:0;float:left}
    #node .node { padding: 0 }
    h1{font-size:2em}
    .anotace{margin:0 0 0 0;padding:0 40px}
    #node .eshop .product{width:100%;margin:0 0 20px 0}
    /* #megamenu{position:relative;top:55px;z-index:99997} */
    #megamenu .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    }
    #megamenu-mobile{display:block}
    #megamenu #header-kategorie{margin:0}

    /* Hlavní kontejner - teď funguje jako fixní rám */
    #megamenu {
    width: 100%;
    /* Priorita pro moderní prohlížeče, fallback pro starší */
    height: calc(100vh - 55px);
    height: calc(100dvh - 55px);
    width:100%;max-width:100%;
    overflow: hidden;
    z-index: 9999;
    }

    /* Vnitřní prvek, který skutečně scrolluje */
    .megamenu-scroller {
    height: 100%; /* Vyplní celý fixní #megamenu */
    overflow-y: auto; /* Povolí vertikální scroll */
    -webkit-overflow-scrolling: touch;
    }




    #mobilelogo{position:absolute;width:80px;height:100px;top:0;left:20px;}
    #mobilelogo img{padding:0;margin: 0;width:100%;height:auto;}

    #mobiletopmenu{height:55px;width:100%;display:block;position:fixed;top:0;right:0;z-index:99998}
    #topmenuspacer.only-mobile{display:block;height:55px}
    #hamburger{position:fixed;top:0;right:0;width:55px;height:55px;background: #C00D0D;padding:15px;z-index:99999}
    #hamburger ul, #hamburger li{list-style-type: none}
    .mobile #menu{position:fixed;top:55px;right:0;text-align:right;width:50%;background:#fff}
    .mobile #menu a{width:100%;height:50px;line-height:50px;padding:10px}


    #mobiletopmenu #megamenu {
    position: fixed !important;
    top: 55px !important;
    left: 0 !important;
    width: 100vw !important; /* 100% šířky okna prohlížeče */
    height: calc(100vh - 54px) !important; /* Výška zbytku okna */
    z-index: 999999;

    /* Zajištění, že ignoruje transformace rodičů (u moderních prohlížečů) */
    margin: 0;
    transform: none !important;
    }

    #megamenu .grid .megamenu-item{padding:20px 10px;}
    #megamenu .megamenu-item strong{font-size:15px}
    #megamenu .megamenu-item img {margin-bottom:0;}
    #megamenu .grid {
    gap: 0; /* Mezera mezi obrázkem a textem */
    margin-bottom: 0; /* Volitelná mezera mezi řádky pod sebou */
    }
    /* #megamenu .grid .megamenu-item {
    text-align: center;
    } */

    /* .megamenu-item span,.megamenu-item .kategorie__more-link{display:none} */

    .mobile a#megamenu-toggle{display: block;line-height:55px;height:55px;margin-left:100px;color:#fff;padding:0 20px;float:left;text-decoration: none}
    #mobiletopmenu .socialicons{position:fixed;right:75px}
    #mobiletopmenu .socialicons a {
    display: flex;
    align-items: center; /* Vycentruje svisle */
    justify-content: center; /* Vycentruje vodorovně */

    /* FIXNÍ ČTVEREC PRO KAŽDOU IKONU */
    height: 55px;
    width: 45px; /* Tady ladíš mezeru mezi ikonami */

    float: left;
    padding: 0 !important; /* Zruš padding, ten to rozhazuje */
    box-sizing: border-box;
    }

    #mobiletopmenu .socialicons a svg {
    display: block;

    /* NASTAVÍME PEVNOU MAXIMÁLNÍ VELIKOST */
    /* Ikonka se ve čtverci 45x55 zmenší tak, aby se vešla, ale neztratila poměr */
    width: 24px;
    height: 24px;

    /* Pokud jsou ikonky typu YouTube širší, object-fit je podrží */
    object-fit: contain;

    fill: #ffffff;
    stroke: #ffffff;
    }
    .hamburger-trigger {
    position: relative; /* Nutné pro absolutní pozicování čárek */
    display: block !important;
    width: 30px;
    height: 30px; /* Celková výška ikony */
    cursor: pointer;
    margin:0;
    /* Vycentrování v 80px liště menu */
    margin-top: auto;
    margin-bottom: auto;
    }

    .hamburger-trigger span {
    display: block !important;
    width: 100%;
    height: 5px;
    background-color: #fff !important;
    margin-bottom:5px;
    }



    /* homepage */
    #mainpic{margin:0 0 20px 0}
    .slider{display:none}
    .slider{width:100%;}
    /* .slider .views-row{display:flex;margin:0;padding:O;height:auto;} */
    .slider .views-field-field-anotace{display:none}
    .slider-dots{display:none}
    .claim{padding:0 40px;}


    #stats,.copyrightnahore{display:none}
    .aktuality .views-row .views-field-field-image,.aktuality .views-row .views-field-field-anotace{width:100%;padding:40px}
    .aktuality.redbckgr .views-row .views-field-field-image{padding:0}
    .aktuality .views-row .views-field-field-image{padding:0;}
    .aktuality .views-row .views-field-field-image img{width:100%}
    .aktuality.redbckgr .views-row .views-field-field-image {width:100%;float:none}
    .aktuality.redbckgr .views-row .views-field-field-image img{width:100%;float:none}

    /* novinky */
    .aktuality-list .views-row{width:100%;padding:20px}

    /* ESHOP */
    .eshop #ikony{
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    }
    #node .eshop .product {margin:0}

    #mood .nadpis {
    background: none;
    padding: 0;
    position:relative;
    display:block;
    left:0;
    transform: translateX(0);
    bottom: 0;
    margin:24px 0
    }
    #mood .nadpis h1{color:#641506;margin:0 0 20px 0}
    #mood .nadpis .popisek{color:#641506}
    #snacky h1{font-size:5em}
    .tid-20 #mood .nadpis h1,.tid-21 #mood .nadpis h1{font-size:3em;color:#fff}


    .tid-20 #mood .nadpis h1, .tid-20 #mood .nadpis .popisek,.tid-20 #mood .nadpis h1, .tid-21 #mood .nadpis .popisek{color:#fff}

    .grid, .grid2,.grid-kontakt,.eshop.related .eshop, .eshop,.foto-kategorie-block, .grid-2clm {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-kontakt{padding:0 24px}

    .foto-kategorie-block {gap: 24px;}

    .youtube-block {
    margin: 24px 0;
    }


    .eshop.pad80{padding:0}
    .eshop .product{width:100%;margin:0%;height:auto;}
    .eshop .produkty-kategorie .img {
    height: 300px;
    }
    .eshop .product h2 {
    height: auto;
    }


    /* produkt */
    .tempBtn{display:none;background: aqua}
    .product.pad80{padding:0 40px}
    .cena.fullproduct input[type=submit]{font-size:18px}
    .cena.fullproduct{
    justify-content: space-between;/* cena vlevo, tlačítko vpravo */
    width:100%;
    }
    .related .nadpis{padding:0 0 40px 0}
    .related .pad40{padding:0}
    .product h1{text-align:center;padding:0;margin:0}
    .product .anotace{text-align:center;padding:0;margin:0}
    .product .left.half .vertspacer{height:10px;background:left}

    .vertspacer.mobile{display:none}

    /* Vybereme kontejner, který drží .left a .right */
    .product.pad80 {
    display: flex;
    flex-direction: column; /* Položíme je pod sebe */
    }

    .product.pad80 .right {
    order: 1; /* Bude první (nahoře) */
    width: 100%;
    float: none; /* Zrušíme případný float z desktopu */
    }

    .product.pad80 .left {
    order: 2; /* Bude druhý (dole) */
    width: 100%;
    float: none;
    }

    /* Reset mezer, aby to na mobilu vypadalo k světu */
    .product.pad80 .vertspacer {
    display: none; /* Pokud tam máš spacer, který by teď zavázel */
    }



    /* Opravená mobilní verze v @media (max-width: 768px) */

    .obrazek-produktu {
    display: flex;
    flex-direction: column; /* Obrázek a piktogramy pod sebe */
    padding-left: 0;
    }

    .obrazek-produktu .img-wrap {
    width: 100%;
    display: flex; /* ZABÍJÍ MEZERU DOLE */
    flex-direction: column;
    min-height: 0; /* Zrušíme desktopových 500px, aby se wrap přizpůsobil fotce */
    }

    .obrazek-produktu img {
    display: block;
    width: 100%; /* Roztáhne se na šířku kontejneru... */
    height: 400px; /* ...ale vnutíš mu fixní výšku... */
    max-width: 100%;

    /* KLÍČOVÁ VLASTNOST: */
    object-fit: contain; /* Obrázek se v těch 400px zmenší/zvětší tak,
    aby byl vidět celý a NEZDEFORMOVAL SE. */

    object-position: center; /* Vycentrování v rámci těch 400px */

    }
    .piktogramy{margin-top:40px}
    #piktogram-page {
    display: flex;
    flex-wrap: nowrap; /* Změna: držíme vše v jedné lince (nebo wrap, pokud chceš víc řádků) */
    gap: 12px;
    align-items: center;
    margin:24px 0;
    width: 100%; /* Zajistí roztažení kontejneru na celou šířku */
    }

    #piktogram-page .piktogram {
    /* Klíčová změna: flex-grow: 1 (roztáhne se), flex-shrink: 1 (zmenší se), flex-basis: 0 (začíná od nuly) */
    flex: 1;

    height: 80px; /* Výšku klidně nechej fixní, nebo ji dej pryč */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* Prevence přetečení u flexboxu */
    }

    #piktogram-page .piktogram img {
    max-width: 100%; /* Obrázek nikdy nepřeleze svůj díl */
    max-height: 100%;
    height: auto;
    display: block;
    }
    .palivost {
    display: grid;
    grid-auto-flow: column; /* řadí do řádku */
    justify-content: center; /* střed v rámci .palivost */
    align-items: center;
    column-gap: 10px;
    padding:20px 0;
    }
    .slozeni.pad40{padding:0 40px}

    .obrazek-produktu{padding-left:0px;}

    .salamovna table{width:100%;}
    .salamovna a img{width:100%;box-sizing: border-box}
    .salamovna .sirka80 {width:100%;box-sizing: border-box}
    .salamovna h2{font-size:90%}
    .google-map-responsive{
    overflow:hidden;
    padding-bottom:80%;
    position:relative;
    height:0;
    margin-top:80px;
    }
    .google-map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    }

    .kontakt table{width:100%;}
    .kontakt .sirka80 {width:100%;box-sizing: border-box}

  div > p:first-child {
        margin-top: 0;
        padding-top: 0;
    }


    /* kariera */
    .kariera{padding:0 24px;width:100%;box-sizing:border-box}
    .kariera .views-row{width:100%;padding:20px;height:auto;margin:0 0 40px 0}
    .kariera.pad80{padding:0 24px;width:100%}
    .kariera .grid-container{ grid-template-columns: 100%}
    .kariera .pad0-80{padding:0}
    .kariera #edit-soubor-upload{margin:0 0 20px 0;width:100%}
    .kariera #edit-soubor--description{margin:20px 0 0 0}
    .kariera .grid-container.misto{gap:0px;}
    .kariera .grid-container.misto .grid-item{padding:0}
    .kariera .grid-item.redbckgr a{color:#fff}
    #benefity .views-row ul {margin-left:0;width:90%}

    /* novinky */
    #node .node{padding:0 24px;}

    /* salamovna */
    .salamovna .center{padding:24px}
    .salamovna #mood .nadpis{position:relative;background:none;
    padding:0;
    left: 0%;
    transform: translateX(0);
    bottom:0;
    }
    .salamovna .anotace{ margin:auto;padding:24px;width:100%;box-sizing: border-box}

    /* novinky */
    .anotace {padding: 0 24px;}

    /* kontakt */
    /* .map{width:80%;padding:0}
    .map iframe{width:100%} */

    .split-2v {
    grid-template-columns: 100%;
    }

    #cardsdole{width:100%;}
    #cardsdole .half{width:100%;padding:0;float:left;margin:0;box-sizing:border-box}
    #cardsdole .half svg{width:100%}
    #cardsdole .comgate{display:none}
    #block-d9theme-primary-local-tasks li,#block-d9theme-primary-local-tasks--2 li{padding:10px 0}
    #block-d9theme-primary-local-tasks ul,#block-d9theme-primary-local-tasks--2 ul{width:100%;margin:20px 0}
    #block-d9theme-primary-local-tasks a,#block-d9theme-primary-local-tasks--2 a{display:inline-block;margin-bottom:5px}
    #thankyou {margin:0;height:100%;width:100%;padding:24px;box-sizing: border-box}

.eshop #header-kategorie{
    margin:55px 0 0 0;
    }

    /* kromerizsky mobil */
    body.kromerizsky-special #footer-kategorie{
    display:block;
    }
    body.kromerizsky-special #header-kategorie{
    margin:55px 0 0 0;
    }
    body.kromerizsky-special #header-kategorie .nadpis{
    padding:24px;
    }
    }