:root{
      
      --background: #fcfdfe;
      --foreground: #24303a;
      --mutedforeground:#185c73;
      --text:#6b7280;
      --secbackground:#f7f7f7;
      --secforeground:#dce6ed;
      --sechighlight:#107A9E;
      --navbackground:#ededed;
      --navforeground:#3f3e42;
      --highlight: #1397C3;  /*#15a1d0;#16a2d0*/
      --highlightcta:#0b6f92;
      --boxshadow:0 12px 25px rgba(0,0,0,.15);
      --bigshadow:0 20px 40px rgba(0,0,0,.08);
      --white:rgba(255,255,255,1);
      --brand:#16a2d0;
   
 
}

 /*#16a2d0*/
 
 .tooltip{background-color:silver; color:#333;padding:5px 10px;border-radius:5px;font-size:1em;}
 a.tt svg,
a.tt svg *{
  pointer-events:none;
}

#searchbox{ position:relative; }
.block{display:block !important}



/* modal  */
.popup-modal{
  position: absolute;
  left: 50%;
  top: 20px;                 
  transform: translateX(-50%);

  z-index: 99;    

  width: min(820px, 92vw);

  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 14px 50px rgba(0,0,0,.25);

  max-height: none;
  overflow: visible;
   overflow-wrap: anywhere;  /* moderní, nejlepší */
  word-break: break-word; 
}
.popup-modal pre{
  white-space: pre-wrap;     /* dovol zalomení */
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;                 /* volitelně */
}

.popup-modal code{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.popup-modal img{ max-width:100%; height:auto; }
.popup-modal iframe{ max-width:100%; }






.sp{
  position:absolute;
  left:0; 
   width: min(820px, 92vw);
  top:calc(100% + 10px);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  box-shadow:var(--bigshadow);
  padding:10px;
  z-index:9999;
}

.sp .sec{ padding:8px 6px; }
.sp .h{
  font-size:.78em;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.65;
  margin:0 0 6px;
}
.sp a{
  text-decoration:none;
  color:inherit;
  display:flex;
  gap:10px;
  padding:8px;
  border-radius:12px;
  align-items:center;
}
.sp a:hover{ background:rgba(0,0,0,.04); }

.sp .row{ display:flex; gap:12px; }
.sp .col{ flex:1 1 0; min-width:0; }

@media (max-width:760px){.sp .row{ flex-wrap:wrap; }.sp .col{ min-width:100%;  }}

.sp .badge{
  margin-left:auto;
  opacity:.6;
  font-size:.78em;
  letter-spacing:.08em;
  text-transform:uppercase;
}




/************  base / reset  ****************/
*{box-sizing:border-box;}

html{
  font-size:clamp(16px, 0.9vw + 0.6rem, 18px);
  letter-spacing: clamp(0.018rem, 0.04vw, 0.03rem);
  font-synthesis:none;
  font-family: "Segoe UI", system-ui, -apple-system,
  BlinkMacSystemFont,Roboto,  Helvetica, Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
 
}



body{
  font-size:1.1rem;     /* zachovává tvuj puvodní pocit */
  line-height:1.5;
  color:var(--foreground);
  font-family: inherit;
  background:var(--background);
  padding:0;
  margin:0;
   letter-spacing: -0.005rem;
 
}

p,
li{
  font-size:1rem;
  line-height:1.5;
}

small,
.small{
  font-size:0.9rem;
  line-height:1.4;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.08rem; 
}


h1{
  font-size:clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem);
  letter-spacing: 0.06rem;
  line-height:1.2;
  margin:0 0 0.6em 0;
}

h2{
  font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem);
  letter-spacing: 0.05rem;
  line-height:1.25;
  margin:0 0 0.5em 0;
}

h3{
  font-size:clamp(1.2rem, 0.9vw + 0.9rem, 1.6rem);
  letter-spacing: 0.04rem;
  line-height:1.3;
  margin:0 0 0.4em 0;
}

h4{
  font-size:1.1rem;
  letter-spacing: 0.03rem;
  line-height:1.4;
  margin:0 0 0.3em 0;
}


.heading {
  letter-spacing: 0.08rem;
  font-weight: 600;
}

#menu,
#mainnav,
nav{
  font-size:0.95rem;
}

.mainmenu > label > a{
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.03em;
}

.dropdown a{
  font-size:0.9rem;
  line-height:1.4;
}

button,
.button,
input[type="submit"]{
  font-size:0.95rem;
  line-height:1.2;
  letter-spacing: 0.1rem;
}

button,
input,
select,
label,
.nav,
.menu {
  letter-spacing: 0.03rem;
}

/* =========================
  LAYOUT KOSTRA
  
   ========================= */




.wrapper{
  margin:10px;
}
#menu .wrapper{
  margin:0 10px;
}

#wrapper{
  display:flex;
  flex-direction:column;
  overflow-x:hidden!important;
  max-width:100%;
}
#wrapper:after{
  content:"";
  display:block;
  clear:both;
  height:0;
}
#menu{
  min-height:2em;
  position:relative;
  width:100%;
  background:var(--navbackground);
  
}
#filter{
  order:3;
  background:#f5f5f5;
  width:100%;
  min-height:2em;
  height:auto;
  position:relative;
}

#topbar{
display:flex;
width:100%;
order:10;
background:var(--secbackground);
padding:6px 20px 0 20px;
gap:20px;
justify-content:flex-end;

}


#header a{text-decoration:none;color:var(--text);}
#header a svg{height:20px;width:auto;}
a:hover svg,label:hover svg{color:var(--highlight);}

#content{
  order:30;
  padding:0;
  margin:0;
}
#footer{
  order:40;
  color:var(--secforeground);
 color:var(--secbackground);
  
}
#header{
  order:20;
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content:space-between;
  align-items:center;  
  background:var(--white);
  
}



/* header top (ikony + logo + košík) – FALLBACK (bez gridu) */
#headertop{
  width:100%;
  display:flex;                 /* fallback */
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  gap:14px;
  background:var(--white);
}

.ht-leftwrap{
  display:flex;
  align-items:center;
  
  min-width:0;
  flex:1 1 0;
 
}

/* fallback rozložení: left | logo | right (logo vizuálně ve středu přes auto margin) */
#headertop .ht-left,
#headertop .ht-right{
  display:flex;
   align-items:center;
 gap:14px;

  min-width:0;
 
}

#headertop #logo{
  margin:0 auto;                 /* ve flex fallbacku drží střed */
 
}

#headertop .ht-right{
  margin-left:auto;
  justify-content:flex-end;
}

/* GRID enhancement – tvoje 3 sloupce (logo uprostřed přesně) */
@supports (display:grid){
  #headertop{
    display:grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    padding:10px 20px;
    gap:14px;
    background:var(--white);
  }
  /* levý sloupec = wrapper */
.ht-leftwrap{
  grid-column:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr); /* ikony | search */
  align-items:center;
  gap:18px;
  min-width:0;
}

#logo{ grid-column:2; }

.ht-right{ grid-column:3; display:flex; justify-content:flex-end; gap:40px; }

  #headertop .ht-right{
    justify-content:flex-end;
  }

  /* v gridu margin:auto na logo nechceme */
  #headertop #logo{
    margin:0;
  }
}

/* ikonky */
#headertop .ht-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  width:34px;
  border-radius:10px;
  color: var(--text);
  text-decoration:none;
}
#headertop .ht-ico svg{ width:20px; height:20px; }
#headertop .ht-ico:hover, #headertop button:hover svg{ color: var(--highlight); }

/* logo */
#headertop #logo{
  width:auto;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#headertop #logo .logo,
#headertop #logo a.logo{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  color:var(--brand);
}
#headertop #logo svg{ width:100%; height:100%; display:block; }

/* SEARCH: tvoje (pill + expand) */
#search{
  display:flex;
  align-items:center;
  min-width:0;
  height:36px;

  flex:0 0 auto;
  max-width:108px;
  transition:max-width .45s cubic-bezier(.25,.8,.25,1);
}
#search:focus-within{
  flex:1 1 0;        /* v gridu ignorováno, ve flexu pomůže */
  max-width:420px;
}

#searchbox{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;

  background:#fff;
  border:1px solid silver;
  border-radius:999px;

  padding:0 6px 0 10px;
  gap:6px;
}
#searchbox input[type=text]{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;

  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
#searchbox button{
  flex:0 0 28px;
  width:28px;
  height:28px;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  cursor:pointer;
}
#searchbox button svg{ width:18px; height:18px; display:block; }

#search:focus-within #searchbox input[type=text]{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   MOBILE <760px
   ========================= */
@media (max-width:760px){

  /* zachovej: menší logo */
  #headertop #logo{ height:42px; }

  /* GRID mobil: 2 řádky + search dolů */
  @supports (display:grid){
    #headertop{
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "left logo right"
        "search search search";
      padding:10px 12px;
      gap:10px;
    }

    .ht-leftwrap{ display:contents; }
     .ht-left{ grid-area:left; }
    #logo{ grid-area:logo; }
    .ht-right{ grid-area:right; }
    #search{ grid-area:search; }
  }

  /* FALLBACK mobil (bez gridu): flex-wrap + pořadí */
  @supports not (display:grid){
    #headertop{
      flex-wrap:wrap;
      padding:10px 12px;
      gap:10px;
    }

    /* první řádek: left | logo | right */
    #headertop .ht-leftwrap{ order:1;  flex:1 0 100%; }
    #headertop #logo{ order:2; margin:0 auto; }
    #headertop .ht-right{ order:3; margin-left:auto; }

    /* druhý řádek: search přes celou šířku */
    #headertop #search{
      order:10;
      flex:1 0 100%;
      max-width:100% !important;
    }
  }

  /* zachovej: skrývání .tt a qc-total */
  .ht-right .tt,
  .ht-left .tt,
  .ht-right .qc-total{
    display:none;
  }

  /* a na mobilu: search full width + input vždy vidět */
  #search{
    max-width:none !important;
    height:40px;
  }
  #searchbox input[type="text"]{
    opacity:1 !important;
    pointer-events:auto !important;
  }
}



/* =====   Links / Buttons / Searchbox  ===== */

/* LINKS */
#content a{
  color:#1e758d;
 /* will-change:border;
    border-bottom:1px dashed #185c73;
  transition:border-bottom .6s ease;*/
  text-decoration:none;

}

#content a:hover{
  color:#185c73;
  /*border-bottom:0!important;*/
}



a img,
#prodimg a{
  text-decoration:none!important;
  border-bottom:0!important;
}


/* BUTTONS (neutral default) */
.submit,
.button,
input[type="submit"],
button{
  display:flex;
  justify-content:center;
  align-items:center;
  line-height:1.2em;
  font-size:1em;
  background:#dce6ed;
  color:#185c73;
  transition:background .3s ease,color .4s ease;
  cursor:pointer!important;
  padding:5px 15px;
  text-align:center;
  border-radius:5px;
  width:max-content;
  border:0;
}

.submit:hover,
.button:hover,
input[type="submit"]:hover,
button:hover{
  background:#b0c4d1;
  color:#0f3a4a;
}


.add2cart{
}





/* =====   Logo / Icons / Popups / Fixed header clone ===== */



/* ICONS */
.remove{
  display:inline-block;
  min-width:1em;
  min-height:1em;
  height:auto!important;
  vertical-align:middle;
  background:url('https://cdn.megalops.eu/css/remove.png') 0 0 no-repeat;
  text-decoration:none!important;
  margin:0;
  opacity:.4;
  cursor:pointer;
}

.remove:hover{
  opacity:.8;
}


/* POPUP (general) */



/* FIXED HEADER + CLONE (anti-jump) */
#header.fixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:auto;
  z-index:1000;
  transition:visibility 0s linear 300ms,opacity 300ms;
}

.header-clone{
  display:block;
  width:100%;
  height:0;
  margin:0;
  padding:0;
  border:0;
}

.header-clone{
  position:absolute;
  top:0;
  left:0;
}


/* POPUP behavior */
.popup{
  position:fixed;
  left:50%;
  top:12vh;
  transform:translateX(-50%);
  z-index:10050;
}

.popup.is-open{
  display:block;
}




/* =====  Grid / Product card / Text clamp / Toast ===== */

/* GRID */
#products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
  width:100%;
  margin-top:30px;
  grid-auto-rows:minmax(100px,auto);
}

@supports not (display:grid){
  #products{
    display:flex;
    flex-wrap:wrap;
  }
  .product{
    flex:1 1 250px;
  }
}


/* PRODUCT CARD */
.product{
  background:#fff;
  padding:10px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:12px 25px 30px -25px rgba(0,0,0,.1);
}

.prodimg{
  width:200px;
  height:200px;
  display:flex;
  margin:0 auto 1rem;
}

.ph{
  display:block;
  min-height:2.4em;
  margin-bottom:1em;
  line-height:1.2rem;
}


/* TEXT CELL + READ MORE */
#expandText{
  display:none;
}

.text{
  position:relative;
  grid-column:span 1;
  display:flex;
}

.text .wrapper{
  margin:0;
  max-height:20em;
  overflow:hidden;
  position:relative;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:20;
}

.text .wrapper::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1.5em;
  background:linear-gradient(to bottom,rgba(255,255,0,0) 0%,#fff 100%);
  pointer-events:none;
}

.text label{
  cursor:pointer;
  padding:5px 15px;
  text-align:center;
  border-radius:5px;
  visibility:hidden;
  width:max-content;
  margin:5px auto 0;
}

.text label::after{
  content:" read more ";
}

#expandText:checked ~ .text .wrapper{
  max-height:none;
  overflow:visible;
  display:block;
}

#expandText:checked ~ .text .wrapper::after{
  display:none;
}

#expandText:checked + .text{
  grid-column:span 2;
}

#expandText:checked + .text label::after{
  content:" close ";
}


/* TOASTS */
.toast-wrap{
  position:fixed;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(92vw,560px);
  pointer-events:none;
}

.toast-wrap .toast{
  pointer-events:auto;
}

.toast{
  width:100%;
  max-width:560px;
  padding:12px 40px 12px 12px;
  border-radius:10px;
  background:var(--secbackground);
  color:#222;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
}

.toast.is-in{
  opacity:1;
  transform:translateY(0);
}

.toast.is-out{
  opacity:0;
  transform:translateY(6px);
}

.toast.is-ok{
  border-color:#2fb36d;
}

.toast.is-ko{
  border-color:#e23e3e;
}

.toast .toast-close{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  opacity:.6;
}

.toast .toast-close:hover{
  opacity:1;
}

.toast .title{
  font-weight:600;
  margin-bottom:2px;
}

.toast .meta{
  opacity:.8;
  font-size:12px;
}


/* =====   Menu baseline (bez @media) ===== */

/* NAV + MAIN ITEMS */
#mainnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  font-size:1em;
  width:auto;
  list-style-type:none;
}

.mainmenu{
  float:left;
  padding:5px 20px;
}

.mainmenu label{
  margin:0!important;
  padding:0!important;
}

/* LINKY V MENU */
#mainnav a{
  text-decoration:none;
  color:var(--navforeground);
  pointer-events:auto;
}

#mainnav li label a{
  color:var(--navforeground);
  font-weight:600;
  text-transform:uppercase;
}

/* DROPDOWN  */
.dropdown{
  background:#fff;
  display:inherit;
  z-index:999;
  position:absolute;
  left:-9999px;
  width:100%;
  min-width:100%;
  max-width:100%!important;
  padding:0;
  box-shadow:12px 25px 30px -25px rgba(0,0,0,.1);
  min-height:6em;
  padding-bottom:2em;
}

/* grid uvnitr dropdownu */
.ddwrapper{
  width:96%;
  margin:0 auto;
  margin-top:1em;
}

.ddwrapper>ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:1em;
  justify-items:center;
  max-width:100%;
}

.ddwrapper .grid-item{
  display:flex;
  flex-direction:column;
  font-weight:400;
  width:200px;
  min-width:calc(16.6% - 10px);
  max-width:100%;
  padding:0;
  margin:0;
  list-style:none;
}

.ddwrapper .grid-item ul li{
  display:block;
  font-size:.8em;
  width:100%;
  line-height:1em;
  padding:5px;
  margin:0;
}

/* checkboxy pro submenu (desktop baseline: skryté) */
.menu-toggle{
  display:none;
}

/* otevrení dropdownu: checkbox   */
#mainnav input[type="checkbox"]:checked + label + .dropdown{
  left:0;
}

/* simulace hoveru: focus-within (  pro klávesnici i touch “focus”) */
#mainnav li:focus-within .dropdown{
  left:0;
}

/* hover jen pro zarízení, co fakt umí hover */
@media (hover:hover) and (pointer:fine){
  #mainnav > li:hover > .dropdown{
    left:0;
  }
  #mainnav > li.delay-lock:hover > .dropdown{
    left:-9999px;
  }
}

/* “open” class (pro  mini JS na touch desktop) */
#mainnav li.open .dropdown{
  left:0;
}


/* OVERLAY (pro menu / cokoliv) */
body.is-locked{
  overflow:hidden;
   touch-action:none;
   padding-right:16px;  
}


/* iOS/Safari jistota  */
html.is-locked,
body.is-locked{
overscroll-behavior:contain;
}


/* když je UI v toggle režimu */
body.is-locked #mainnav label a{
  pointer-events:none;
  cursor:pointer;
}


/* overlay */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 9;

  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;

  /* mléčné sklo */
 background: rgba(255,255,255,.08);
backdrop-filter: blur(16px) saturate(120%);
 
  -webkit-backdrop-filter: blur(16px) saturate(120%);

  will-change: opacity, backdrop-filter;
}

#overlay.active {
  opacity: 1;
  visibility: visible;
}



/* hide toggles (keep accessible) */
#menutoggle,#filtertoggle,#mainnav input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}




/* ===== Shared: overlay triggers + panels (used elsewhere too) ===== */

.fireoverlay{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.filter{
  position:fixed;
  top:0;
  right:0;
  width:50%;
  height:100vh;
  max-height:100vh;
 background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
  z-index:25;
  border:0!important;
  box-shadow:0 none!important;
  padding:10px;
}

.nav-wrapper{
  position:relative;
  max-height:calc(100vh - 2em);
  margin-top:2em;
  overflow-y:auto!important;
  height:auto;
  padding-bottom:2em;
  padding-right:16px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  
}

.nav-wrapper::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* open panel when checkbox checked (generic pattern) */
.fireoverlay:checked + .filterfire + .filter,.fireoverlay:checked + .filterfire + .currency-dd +.filter{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease,visibility 0s;
}



/* ===== QCart: trigger button + header row ===== */

#qcart{
  position:relative;
  display:inline-flex;
}

#qcart .wrapper{
  position:relative;display:flex;  gap:16px;
}

#qcart #qcart-button{
 position:relative;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:2em;
  line-height:2em;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}


#qcart .cart-ico{
position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:20px;
color:var(--text);

}


#qcart.notempty .qc-count{
  position:absolute;
  top:-6px;
  right:-6px;

  min-width:16px;
  height:16px;
  padding:0 4px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:11px;
  font-weight:400;
  line-height:1;

  background:var(--highlight);
  color:#fff;
  border-radius:999px;
   box-shadow:
    0 0 0 2px var(--white);
   
}

#qcart .qc-total b{
font-size:13px;
 font-weight:400;

}



/* panel specifics */
#qcart #qcart-panel{
  z-index:35;
}

#qcart #qcart-title{
  margin:0;
}

/* quick links row */
#qcart .qc-edit,
#qcart .qc-login,
#qcart .qc-checkout{
  text-decoration:none;
}

/* content area placeholder */
#qcart .qc-content{
  display:block;
  margin-top:10px;
}


#qcart .qc-empty{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#qcart .qc-empty-title{
  margin:0;
  font-weight:700;
}

#qcart .qc-empty-sub{
  margin:0;
}

#qcart .qc-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}

#qcart .qc-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px;
  border-radius:10px;
  background:#f5f5f5;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
}

#qcart .qc-tile:hover{
  background:#e9eef2;
}

#qcart .qc-cats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

#qcart .qc-cat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  text-decoration:none;
  white-space:nowrap;
}

#qcart .qc-cat:hover{
  background:#f5f5f5;
}

#qcart .qc-trust{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.10);
  font-size:.95em;
  opacity:.85;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}

/* mobile: tiles pod sebe */
@media (max-width:480px){
  #qcart .qc-tiles{
    grid-template-columns:1fr;
  }
  #qcart .qc-tile{
    justify-content:flex-start;
  }
}

.qcartbar{
  display:flex;
  align-items:center;
  gap:.35rem;

}

/* currency wrapper */
.currency-dd{
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  line-height:1;
  font-size:.7em;

}

.currency-dd > *{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.curtoggle{
  position:absolute;
  width:1px; 
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* trigger */
.currency-trigger{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.22rem .5rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.55);
  font-weight:400;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.currency-trigger:hover{
  background:rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.28);
}

.currency-chev{ opacity:.75; font-size:.9em; }

/* currency menu */
.currency-menu{
  position:absolute;
  top:calc(100% + .35rem);
  right:0;
  min-width:9.5rem;
  padding:.35rem;
  border-radius:.8rem;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  display:none;
  z-index:9999;
}

/* open when checked */
.curtoggle:checked + .currency-trigger + .currency-menu{
  display:block;
}

.currency-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.45rem .55rem;
  border-radius:.6rem;
  text-decoration:none;
  color:inherit;
  font-weight:400;
}

.currency-item:hover{ background:rgba(22,162,208,.10); }

.currency-item.is-active{
  background:rgba(22,162,208,.14);
}
.currency-item.is-active::after{
  content:"✓";
  font-weight:900;
  opacity:.85;
}



/* focus outline jen kde dává smysl (klávesnice) */
:focus{
  outline:none;
}
:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* lock scroll stránky, když je otevrený panel */
body.is-panel-open{
  overflow:hidden;
}












/* ===== 



Breakpoints 




===== */

/* MOBILE / touch-offcanvas */
@media (max-width:760px){
  .filter{
    width:70%;
  }
}

/* SMALL MOBILE */
@media (max-width:480px){
  .filter{
    width:85%;
  }
}

body.is-locked .panel-close{display:block !important;}


@media (max-width:760px){

#menu .panel-close{display:block !important;}

  /* hamburger */
  #menutoggle,
  .hamburger{
    display:flex;
  }

  .hamburger{
    cursor:pointer;
    width:2em;
    height:2em;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    padding:5px;
    z-index:8;
  }

  .hamburger div{
    width:2em;
    height:5px;
    border-radius:3px;
    background:#000;
    transition:.3s ease;
  }



  /* off-canvas nav */
  .navmob{
    position:fixed;
    top:0;
    right:0;
    width:70%;
    height:100vh;
    background:#fff;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:35;
    transition:opacity .3s ease;
  }

  #menutoggle:checked ~ .navmob{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  
  .mainmenu-title{
  display:inline;
  color:inherit;
  font-weight:inherit;
  text-transform:inherit;
  cursor:pointer;
}

  .menu-wrapper{
    margin-top:2em;
    max-height:calc(100vh - 2em);
    overflow-y:auto;
    padding-bottom:2em;
    scrollbar-width:none;
  }

  .menu-wrapper::-webkit-scrollbar{
    display:none;
  }

  /* mobile nav structure */
  #mainnav{
    display:block;
    width:100%;
    text-align:center;
  }

  #mainnav > li{
    margin:10px 0;
  }

  #mainnav a{
    display:block;
    padding:5px;
  }

  .mainmenu{
    float:none;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:0;
    padding:0;
  }

  /* mobile dropdown */
  .dropdown{
    position:relative;
    left:0;
    display:none;
    box-shadow:none;
    min-height:auto;
    padding-bottom:0;
  }

  #mainnav input[type="checkbox"]:checked + label + .dropdown{
    display:block;
  }

  /* dropdown content stack */
  .ddwrapper{
    width:100%;
    margin:0;
    padding-bottom:2em;
  }

  .ddwrapper > ul{
    display:block;
    gap:0;
  }

  .ddwrapper .grid-item{
    width:100%;
    min-width:100%;
    max-width:100%;
    padding:5px;
  }

  .ddwrapper .grid-item ul{
    display:none;
  }
}


@media (max-width:480px){

  .navmob{
    width:70%;
  }

  #logo,
  #cart{
    width:50%;
  }

  .ddwrapper .grid-item{
    min-width:100%;
  }
  
 .breadcrumb li:last-child{
    display:none;
  }
}


/* breadcrumb */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:0;
  margin:0;
  list-style:none;
}

.breadcrumb li{
  font-size:0.9em;
  white-space:nowrap;
  color:var(--text);
}

.breadcrumb li::after{
  content:"/";
  margin-left:10px;
  color:#aaa;
}

.breadcrumb li:last-child::after{
  content:"";
}

.breadcrumb a{
  text-decoration:none;
  border:none !important;
  color:#1e758d;
  font-weight:600;
  padding:.25em .5em;
}

.breadcrumb a:hover{
  color:#185c73;
}




/* homepage slider */

.scroll-container{
  position:relative;
  width:100%;
  margin:60px 0;
}

.scroll-content{
  display:flex;
  flex-wrap:nowrap;
  gap:30px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:10px 60px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.scroll-content::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.scroll-content .item{
  flex:0 0 auto;
  width:260px;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:12px 25px 30px -25px rgba(0,0,0,.1);
}

.scroll-content .item a{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
  height:220px;
  text-decoration:none;
  color:#000;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}

.scroll-content .item a span{
  display:block;
  padding:10px;
  font-size:14px;
  line-height:1.2;
  color:#000;
  background:rgba(255,255,255,.92);
}

.arrow-wrapper{
  position:absolute;
  top:0;
  bottom:0;
  width:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}

.arrow-wrapper.lt{
  left:0;
}

.arrow-wrapper.rt{
  right:0;
}

.arrow{
  pointer-events:auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:rgba(0,0,0,.5);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
}

@media (max-width:760px){
  .scroll-container{
    margin:30px 0;
  }
  .scroll-content{
    gap:16px;
    padding:10px 45px;
  }
  .scroll-content .item{
    width:220px;
  }
  .scroll-content .item a{
    height:200px;
  }
  .arrow-wrapper{
    width:45px;
  }
}

@media (max-width:480px){
  .scroll-content{
    padding:10px 40px;
  }
  .scroll-content .item{
    width:200px;
  }
  .scroll-content .item a{
    height:190px;
  }
  .arrow{
    width:36px;
    height:36px;
    font-size:18px;
  }
}

.panel-close{
  position: fixed;
  top: 0;
  right:0;
  display: inline-block;
  padding: .5em .75em;
  cursor: pointer;
  font-size: 1em;
  opacity: .6;
  z-index: 5;
}

.panel-close:hover{
  opacity: 1;
}

.panel-close::after{
  content: "✕";
}



.filterfire{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.6em;

}


.filterimg {
display: inline-block;
  width:1.4em;
  height:1.4em;
  display:inline-block;
  opacity:.85;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAUCAYAAADPym6aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTI5MTY5M0ZFQUYwMTFFRkJFNDdDNUYxQUQ4RDVBQkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTI5MTY5NDBFQUYwMTFFRkJFNDdDNUYxQUQ4RDVBQkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MjkxNjkzREVBRjAxMUVGQkU0N0M1RjFBRDhENUFCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MjkxNjkzRUVBRjAxMUVGQkU0N0M1RjFBRDhENUFCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn9pj64AAATRSURBVHjaxFdZSFxnFD7qVcd93+KOqCioVQvGlWgegoIxpZQajbVUKygWqmKxPjQl0NQF6UutfSiSpMRgSaBoHw0SxT6oVUTFouAaFzSOdRl3Z/qdn3tFpjOOL04PfHrn/uf+96zf+a9VTk4OzczMkDGxs7OjhoYGCg8Pp9HRUYqOjg61tbVtcnR0rLW2tr4LleP09PS/W1paKCEhgXp6esjcEhISQpIpJQsLCzo7OyNJkggOfDIxMfFUT+Xe9PT0Uysrq09tbGzo/xJLNvAy4XU2UK1WRxwcHChO/AbcAuqA0+Xl5eLu7u66jY0N8Yi5neBgS0dHRx/h+hGgBs70dFQ7OztalNHNra2tu1qtlu+9BD6W198AC8CLvr6+4oKCgobg4OCahYWFctxbNIcPwA3gMUd7DRe6S3DU1tZG9fX1j+XfBXqbeSu6KSkplJWV9YWJ/a4DW5aQf0x4bdPV1UXAsfw7QW89jP+gf96FhYURMudn7tJycHDYl6qqqora29sfeHt7a3BPe1Hh5OTEGkoWGRkZtLS01I1Gf4jbNcBb4CfgPeBX1oXOq9jYWJqcnJyOjIxsQ6bVZugNy8XFRcfi4uLnkr+//1BaWtqQi4vLfxR1Oh2dnp4SskZQ/qu/v795fHy8Fks/yBDi4eEx09zcXA1Hyd3d/UliYuITZjpTwvuD7cR/JycnOjw8pL29PUH5V3me7QoMDCRnZ2eSNBoNbW9vi87XF25u3pBfBsaioKCgr9bX1//E9bcggTguS+j8UlFR8SguLm4fDS/0UF4mjdjf3yeQiDCGg4UAkZubGwUEBNDa2hphf2GgSqUSjhpzhG0HYZElG8qKxsD0u7q6SrOzs+KFiPjvqamp8XDc28fHxy8qKqoW/bHLuisrK4Qheel+LMfHx+Tl5SX+Dw0NCcMHBwfPn+cA5ubmCtpHeV+637md/DB7b8xz9npsbIxrX1yjZ7gEdHiJGBpcEuxodXU1jYyMiChzVowJr7ET+fn51NraSpubmwTK5iVPBIcJZcfe3p7Ky8uFTR0dHcRlb6hi+B6XIzsrKRlRalZfOAscJdbjCPn5+YnrzMxMoc8vxWQXKfb09DS6zwUCEc+4urqKbEP31vDwcAOWkrDP6dzc3LO8vLyH0HmrZOey/ZQ1iRuLa5EhDzyTU1SZ+LwJO8UvRMld7SghZ5WjjGx8iQCckwaiKwGfdXZ2flhYWBgPEpnj93HvGLKN17jXOHPS7u7uTdTpAzSZBoZpr5su8T5nUHkNIm6LQ6jiRDPwDeDPdI6sJdfV1f1cVlZ2B6V7e2Bg4D70NwzFBXs54iD7jKlu1ZxTGD20U1JSQjExMZ/L917pGRek6BYVFRFO5/dN7QknVyzRfCpzTmHMCQ0iTSgd5ag8rKeyKJ/fmGBuoBTfXYHKVZJ8yKvH7zX9yX4NYg3Yl5aWWuD7RjlUfgB8f0EnDWAaOwDNr4Ca43G9BMwbKi3AF3t9R6GhoWb/duBpXFlZ6QDmWpfL4zVwByiXT+G67OzsHxsbGwW9m5KIiAhSONyskpSURE1NTeTr63vbUM3j3PdHb28vTU1NiUlvSvjr1ewfQSxM2XysAIO9hhE8fL6en59/Hxnaw3B+kZyc/JyPRTgOGRyEhuRfAQYAz861LUSYHG0AAAAASUVORK5CYII=)center/contain no-repeat
}

.filterfire:hover .filterimg{
  opacity:1;
}

/**********  yt  *************/
.video-placeholder{position:relative;cursor:pointer;max-width:100%;padding-top:56.25%;background:#000;}
.video-placeholder img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;border:0;}
.video-placeholder button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:60px;height:60px;font-size:24px;line-height:60px;text-align:center;cursor:pointer;}

/*********   clone header  *************/
#header.fixed{position:fixed;transition:visibility 0s linear 300ms,opacity 300ms;top:0;left:0;width:100%;height:auto;z-index:1000;}
.header-clone{display:block;width:100%;border:0;padding:0;height:0;margin:0;}
.header-clone{position:absolute;top:0;left:0;}

/************  js  ****************/
#sign_up,.popup{-moz-border-radius:6px;-webkit-border-radius:6px;border:1px solid #536376;-webkit-box-shadow:rgba(0,0,0,.6) 0 2px 12px;-moz-box-shadow:rgba(0,0,0,.6) 0 2px 12px;background:#fff;width:auto!important;width:400px;min-width:30%;max-width:90%;position:relative;display:none;padding:10px;}
.popup{text-align:left;}
.popup ul,.styled{list-style:square;}
.popup li,.styled li{color:#333;margin-left:15px;}
#sign_up label{display:block;margin-top:10px;color:#536376;font-size:.9em;}
#sign_up label input{display:block;width:393px;height:31px;background-position:-201px 0;padding:2px 8px;font-size:1.2em;line-height:31px;}
.popup .close{float:right;display:block;position:relative;margin-top:-25px;margin-right:-25px;height:32px;width:32px;text-decoration:none!important;cursor:pointer;text-indent:2000px;overflow:hidden;opacity:.5;}
.popup .close:hover{opacity:1;}

/************  switch  ****************/
.switcher{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;height:2em;gap:.5em;width:auto!important;}
.switch-text{font-size:1em;line-height:1em;vertical-align:middle;}
.switch{margin-top:.2em;position:relative;display:inline-block;width:auto!important;max-width:60px;aspect-ratio:60/34;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:background .3s ease;border-radius:50px;}
.slider:before{position:absolute;content:"";width:43%;height:76%;left:7%;bottom:12%;background:#fff;transition:transform .3s ease;border-radius:50%;}
input:checked + .slider{background:#2196F3;}
input:checked + .slider:before{transform:translateX(100%);}
input:focus-visible + .slider{box-shadow:0 0 4px #2196F3;}
.slider:hover{background:#b3b3b3;}
#filter .switch{height:1em;line-height:1.5;}



#scrollUp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Skryté na zacátku */
    z-index: 10;
}


#scrollUp:hover {
    background: #1289b7;
}

.heading{margin-top:30px;}



/*  Footer  */

.footer-contact{
  padding:3em 1em;

}



.footer-avatar{
  width:220px;
  height:220px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:var(--boxshadow);
}

.footer-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.footer-title{
  font-size:1.8em;
  letter-spacing:.15em;
  color:var(--sechighlight);
  margin:0;
}

.footer-title small{letter-spacing:.1em;}

.footer-subtitle{
  margin:.5em 0 1.5em;
  letter-spacing:.25em;
  color:#707070;
  text-transform:uppercase;
  font-size:.85em;
}

.footer-info{
  display:flex;
  flex-direction:column;
  gap:1.2em;

}

.footer-info li{
  display:flex;
  align-items:start;
  gap:.8em;
  font-size:1em;
  width:100%;

}

.footer-info span{color: var(--foreground);}






/* icon box */
.footer-info i{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background:#15a1d01A;
  display: flex;
  justify-content: center; 
  align-items: center; 
  color:#16a2d0;             
}

/* samotná SVG ikona */
.footer-info svg{
  width: 24px;              
  height: 24px;

  stroke: currentColor;
  fill: none;

  display: block;
}



.footer-info a{
  color:#333;
  text-decoration:none;
}

.open-hours{
  min-width:260px;
  padding:1.8em;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(
    135deg,
    #16a2d0 0%,
    #1ea8e6 50%,
    #0f7aa3 100%
  );
  box-shadow:var(--boxshadow);
}

.open-hours p{
  margin:1em 0 .5em;
  line-height:1.4;
}

.open-hours small{
  opacity:.95;
}

.oh-header{
  display:flex;
  align-items:center;
  gap:.6em;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.85em;
}

.footer-card{
  max-width:1200px;
  margin:0 auto;
  background:#fff;
  border-radius:24px;
  padding:2.5em;

  display:grid;
  gap:2.5em;

  /* 3 sloupce na desktopu */
  grid-template-columns: 220px minmax(0,1fr) minmax(260px, 360px);
  grid-template-areas: "left middle right";

  box-shadow:var(--bigshadow);
  /* border:1px solid red;  debug pryč */
}

/* přiřazení oblastí */
.footer-left{ grid-area:left; }
.footer-middle{ grid-area:middle; min-width:0; }  /* důležité */
.footer-right{ grid-area:right; }

/* mezistav: open-hours pod textem přes celou šířku */
@media (max-width: 980px){
  .footer-card{
    grid-template-columns: 220px minmax(0,1fr);
    grid-template-areas:
      "left middle"
      "right right";
  }

  .footer-right{
    display:flex;
    justify-content:flex-start; /* ať není divně uprostřed */
  }

  .open-hours{
    width:100%;
    min-width:0; /* zruší tvrdý limit 260, aby nikdy nepřeteklo */
  }
}

/* mobil: vše pod sebe + hezké centrování */
@media (max-width: 720px){
  .footer-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "middle"
      "right";
    text-align:center;
  }

  .footer-avatar{ margin:0 auto; }

  .footer-right{
    justify-content:center;
  }

  .footer-info li{
    justify-content:flex-start;
  }
}












.center{margin-left:50%;margin-right:50%;}

.contact-ico{width: 44px;
  height: 44px;}
  
  
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

main{margin:30px;}

.after-ico{font-size:13px;}

.category-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.category-shortcuts .shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 90%;
    line-height: 1;
    color: #1a1a1a;
    background: #f3f6f8;
    border: 1px solid #e0e6eb;
    border-radius: 999px;
    text-decoration: none;
    transition: all .15s ease;
}

.category-shortcuts .shortcut span {
    font-size:80%;
    color: #777;
}

/* hover */
.category-shortcuts .shortcut:hover {
 

  box-shadow: 0 4px 11px rgba(0,0,0,.10);
}

.category-shortcuts .shortcut:hover span {
   
}

/* active / selected (pokud budeš někdy používat) */
.category-shortcuts .shortcut.active {
    background: #32b768;
    border-color: #32b768;
    color: #fff;
}

/* mobile */
@media (max-width: 720px) {
    .category-shortcuts {
        gap: 6px;
    }

    .category-shortcuts .shortcut {
        font-size: 12px;
        padding: 5px 8px;
    }
}