@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap");
/* =========================================================
   kontaktni-lepidla.cz – nový vzhled (říjen 2026)
   Šablona: Shoptet Classic (template-11)
   Vkládá se do: Vzhled a obsah → Editor → HTML kód → Záhlaví
   (celý obsah souboru hlavicka.html, kde je tento styl už zabalený)
   Návrat: smazat vložený blok → web je zpět v původním vzhledu.
   ========================================================= */

/* ---------- Paleta: přepis barev šablony ---------- */
html:root{
  --kl-ink:#16191D; --kl-ink-2:#2A2F36; --kl-paper:#F6F4EF; --kl-card:#FFFFFF;
  --kl-amber:#F2A516; --kl-amber-hover:#FFB62E; --kl-amber-deep:#B87400;
  --kl-steel:#5B6470; --kl-line:#E3DFD6; --kl-green:#2F8F5B;

  --color-primary:#16191D; --color-primary-h:213; --color-primary-s:12%; --color-primary-l:10%;
  --color-primary-hover:#2A2F36; --color-primary-hover-h:213; --color-primary-hover-s:12%; --color-primary-hover-l:19%;
  --color-secondary:#F2A516; --color-secondary-h:39; --color-secondary-s:89%; --color-secondary-l:52%;
  --color-secondary-hover:#FFB62E; --color-secondary-hover-h:39; --color-secondary-hover-s:100%; --color-secondary-hover-l:59%;
  --color-tertiary:#16191D; --color-tertiary-h:213; --color-tertiary-s:12%; --color-tertiary-l:10%;
  --color-tertiary-hover:#2A2F36; --color-tertiary-hover-h:213; --color-tertiary-hover-s:12%; --color-tertiary-hover-l:19%;
  --template-font:"IBM Plex Sans"; --template-headings-font:"Archivo";
  --cookies-notice-background:#16191D;
}

/* ---------- Základ ---------- */
body{background:var(--kl-paper)!important;color:var(--kl-ink);font-family:"IBM Plex Sans",system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:"Archivo",sans-serif!important;font-stretch:112%;font-weight:800!important;letter-spacing:-.015em;color:var(--kl-ink)}
a{color:var(--kl-ink)}
a:hover{color:var(--kl-amber-deep)}
.overall-wrapper,.content-wrapper,#content-wrapper{background:transparent!important}

/* ---------- Horní lišta ---------- */
.top-navigation-bar{background:var(--kl-ink)!important;border:0!important;color:#C9CED4}
.top-navigation-bar .container,.top-navigation-bar .top-navigation-menu,.top-navigation-bar .top-navigation-bar-menu,.top-navigation-bar .top-navigation-contacts,.top-navigation-bar .top-navigation-tools{background:transparent!important;border:0!important}
.top-navigation-bar a,.top-navigation-bar strong,.top-navigation-bar span,.top-navigation-bar button{color:#C9CED4!important}
.top-navigation-bar a:hover{color:#fff!important}
.top-navigation-bar-menu a{text-transform:none!important;font-size:13px}
.top-navigation-contacts strong{display:none}
.top-navigation-contacts a::before{filter:invert(1) brightness(1.4)}

/* ---------- Hlavička + logo ---------- */
#header{background:var(--kl-card)!important;border-bottom:1px solid var(--kl-line)}
#header .header-top{padding-top:14px;padding-bottom:14px}
.site-name img{max-height:56px!important;width:auto!important}
#header .search-form{border-radius:999px;overflow:hidden;background:var(--kl-paper);border:1px solid var(--kl-line)}
#header .search-form .form-control,#header .search-input{background:transparent!important;border:0!important;box-shadow:none!important;height:46px;padding-left:20px;font-size:15px}
#header .search-form .btn{background:var(--kl-ink)!important;border:0!important;color:#fff!important;border-radius:999px!important;margin:4px;font-weight:600;text-transform:none;letter-spacing:0}
#header .search-form .btn:hover{background:var(--kl-ink-2)!important}
.cart-count,.navigation-buttons .btn{color:var(--kl-ink)!important}
.cart-count i,.cart-count .cart-price,.cart-widget-button .cart-price{color:var(--kl-ink)!important;font-weight:600}

/* ---------- Hlavní menu ---------- */
#navigation,#navigation .navigation-in,.navigation-in{background:var(--kl-ink)!important;border:0!important}
#navigation .menu-level-1 > li > a{color:#E6E8EB!important;font-family:"IBM Plex Sans",sans-serif;font-size:14px;letter-spacing:.02em;padding:14px 18px!important;transition:background .15s,color .15s}
#navigation .menu-level-1 > li > a b{font-weight:600}
#navigation .menu-level-1 > li > a:hover,#navigation .menu-level-1 > li.active > a{background:var(--kl-ink-2)!important;color:#fff!important}
/* položka AKCE zvýrazněná jantarově */
#navigation .menu-item-724 > a{color:var(--kl-amber)!important}
#navigation .menu-item-724 > a b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--kl-amber);margin-right:8px;vertical-align:1px}
#navigation .menu-helper,#navigation .menu-helper > a{background:var(--kl-ink)!important;color:#fff!important}

/* ---------- Banner (karusel) ---------- */
.wide-carousel{background:var(--kl-ink)}
.wide-carousel .carousel-inner img{width:100%;height:auto;display:block}
.carousel-indicators li{border-color:#fff}
.carousel-indicators .active{background:var(--kl-amber);border-color:var(--kl-amber)}
.carousel-control{opacity:.7}

/* ---------- Nadpis sekce na úvodu ---------- */
.homepage-group-title{font-size:clamp(28px,3.4vw,44px)!important;text-align:left!important;text-transform:none!important;margin:56px 0 28px!important;letter-spacing:-.02em}
.homepage-group-title::before{content:"Sortiment";display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--kl-steel);margin-bottom:10px}

/* ---------- Karty produktů ---------- */
.products-block{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0!important}
.products-block::before,.products-block::after{display:none!important}
.products-block > .product{width:auto!important;float:none!important;padding:0!important;margin:0!important;border:0!important}
.products-block .p{background:var(--kl-card);border:1px solid var(--kl-line)!important;border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column;padding:0!important;transition:border-color .15s,transform .15s,box-shadow .15s}
.products-block .p:hover{border-color:var(--kl-ink)!important;transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,25,29,.08)}
.products-block .p .image{display:block;background:#fff;aspect-ratio:423/318;overflow:hidden;position:relative;margin:0!important;border-bottom:1px solid var(--kl-line)}
.products-block .p .image img{width:100%!important;height:100%!important;object-fit:contain;max-height:none!important;transition:transform .4s}
.products-block .p:hover .image img{transform:scale(1.04)}
.products-block .p-in{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.products-block .p-in-in{flex:none}
.products-block .p .name{font-family:"Archivo",sans-serif;font-stretch:108%;font-weight:800;font-size:18px;line-height:1.2;color:var(--kl-ink)!important;text-transform:none;min-height:0!important;height:auto!important}
.products-block .p .name:hover{color:var(--kl-amber-deep)!important}
.products-block .p-bottom{display:flex;flex-direction:column;flex:1;margin-top:10px}
.products-block .p-bottom > div{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:space-between;justify-content:space-between;gap:12px;flex:1}
.products-block .p-desc{order:0;flex:0 0 100%;padding-bottom:16px;border-bottom:1px solid var(--kl-line);font-size:14px!important;line-height:1.5;color:var(--kl-steel)!important;margin:0!important;max-height:none!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.products-block .prices{order:1;width:auto!important;display:flex;flex-direction:column-reverse;text-align:left!important;float:none!important}
.products-block .price-final,.products-block .price-final strong{font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:850!important;font-size:26px!important;color:var(--kl-ink)!important;letter-spacing:-.01em;line-height:1}
.products-block .price-additional{font-size:12.5px!important;color:var(--kl-steel)!important;margin-top:4px}
.products-block .p-tools{order:2;float:none!important;margin:0 0 0 auto!important;width:auto!important}
.products-block .p-code{display:none!important}

/* tlačítko Do košíku = jantarová pilulka */
.btn-cart,.add-to-cart-button,.btn-conversion,.btn.btn-primary{background:var(--kl-amber)!important;border:0!important;color:var(--kl-ink)!important;border-radius:999px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;padding:12px 20px!important;box-shadow:none!important;transition:background .15s,transform .15s}
.btn-cart:hover,.add-to-cart-button:hover,.btn-conversion:hover,.btn.btn-primary:hover{background:var(--kl-amber-hover)!important;transform:translateY(-1px)}
.btn-cart::before,.add-to-cart-button::before{color:var(--kl-ink)!important}

/* štítky */
.flags{top:12px!important;left:12px!important}
.flag{border-radius:999px!important;font-size:12px!important;font-weight:600!important;padding:5px 11px!important;text-transform:none!important}
.flag-action{background:var(--kl-amber)!important;color:var(--kl-ink)!important}
.flag-tip{background:var(--kl-ink)!important;color:#fff!important}
.flags-extra{right:12px!important;bottom:12px!important;left:auto!important;top:auto!important}
.flag-discount{background:var(--kl-ink)!important;color:#fff!important;border-radius:14px!important;width:auto!important;height:auto!important;padding:8px 12px!important;line-height:1.2!important}
.flag-discount .price-standard span{color:#9AA3AE!important;text-decoration:line-through}
.flag-discount .price-save{color:var(--kl-amber)!important;font-weight:800}

/* ---------- Detail produktu ---------- */
.type-detail .p-detail-inner h1,.type-detail h1{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.1}
.type-detail .price-final-holder,.type-detail .price-final{font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:850;color:var(--kl-ink)!important}
.type-detail .p-image,.type-detail .p-image-wrapper img{border-radius:16px;overflow:hidden}
.type-detail .add-to-cart .btn,.type-detail .btn-lg{padding:16px 30px!important;font-size:17px!important}
.shp-tabs-wrapper,.p-detail-tabs-wrapper{background:var(--kl-card);border-radius:16px;border:1px solid var(--kl-line)}

/* ---------- Textové stránky (Postup, O lepidlech…) ---------- */
.content-inner,.type-page .content{line-height:1.65}
.type-page .content h1{font-size:clamp(32px,4vw,48px)!important;margin-bottom:24px}

/* ---------- Formuláře ---------- */
.form-control{border-radius:10px!important;border-color:var(--kl-line)!important}
.form-control:focus{border-color:var(--kl-ink)!important;box-shadow:0 0 0 3px rgba(242,165,22,.3)!important}

/* ---------- Patička ---------- */
#footer,.footer{background:var(--kl-ink)!important;color:#9AA3AE;border:0!important;margin-top:72px}
#footer a,#footer .copyright,#footer strong{color:#C9CED4!important}
#footer a:hover{color:#fff!important}
#footer .footer-bottom{padding-top:28px;padding-bottom:28px;border-top:0!important}
.kl-footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.kl-footer-brand img{height:40px;width:auto}

/* ---------- Lišta „doprava zdarma“ / cookies ---------- */
.site-msg{background:var(--kl-ink)!important;color:#E6E8EB!important}
.site-msg .btn,.site-msg .CookiesOK{background:var(--kl-amber)!important;color:var(--kl-ink)!important;border:0!important;border-radius:999px!important;font-weight:600}

/* ---------- Mobil ---------- */
@media (max-width:991px){
  .products-block{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-name img{max-height:44px!important}
}
@media (max-width:575px){
  .products-block{grid-template-columns:1fr;gap:14px}
  .homepage-group-title{margin:36px 0 20px!important}
  #navigation .menu-level-1 > li > a{padding:14px 16px!important}
}

/* =========== Obsah úvodní stránky (Úvodní text) =========== */
.welcome-wrapper,.welcome{background:transparent!important;padding:0!important;border:0!important;max-width:none!important}
.kl-home{font-family:"IBM Plex Sans",sans-serif;color:var(--kl-ink);text-align:left}
.kl-home section{margin:72px 0}
.kl-home h2{font-size:clamp(28px,3.6vw,46px)!important;line-height:1.05;margin:8px 0 28px!important;text-transform:none!important;text-align:left!important}
.kl-home p{margin:0}
.kl-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--kl-steel)}
.kl-uses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kl-use{display:flex;flex-direction:column;gap:12px;background:var(--kl-card);border:1px solid var(--kl-line);border-radius:16px;padding:26px;text-decoration:none!important;color:var(--kl-ink)!important;transition:border-color .15s,transform .15s;min-height:240px}
.kl-use:hover{border-color:var(--kl-ink);transform:translateY(-2px)}
.kl-use strong{font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:800;font-size:22px}
.kl-use-txt{color:var(--kl-steel);font-size:15px;flex:1;line-height:1.5}
.kl-use-go{font-weight:600;font-size:14px;border-top:1px solid var(--kl-line);padding-top:14px}
.kl-use--dark{background:var(--kl-ink);border-color:var(--kl-ink);color:#fff!important}
.kl-use--dark .kl-use-txt{color:#9AA3AE}.kl-use--dark .kl-use-go{border-color:rgba(255,255,255,.15)}
.kl-use-ico{width:50px;height:50px;border-radius:14px;background:#FCEBC4;position:relative}
.kl-use--dark .kl-use-ico{background:rgba(242,165,22,.18)}
.kl-ico-desky::before,.kl-ico-desky::after{content:"";position:absolute;left:12px;right:12px;height:8px;border:2px solid #B87400;border-radius:2px}
.kl-ico-desky::before{top:13px}.kl-ico-desky::after{bottom:13px}
.kl-use--dark .kl-ico-desky::before,.kl-use--dark .kl-ico-desky::after{border-color:#F2A516}
.kl-ico-calo::before{content:"";position:absolute;left:11px;right:11px;bottom:14px;height:16px;border:2px solid #B87400;border-radius:14px 14px 3px 3px}
.kl-ico-podlaha::before{content:"";position:absolute;inset:12px;border:2px solid #B87400;border-radius:3px;background:linear-gradient(#B87400,#B87400) 50% 50%/2px 100% no-repeat,linear-gradient(#B87400,#B87400) 50% 50%/100% 2px no-repeat}
.kl-steps{background:var(--kl-card);border:1px solid var(--kl-line);border-radius:20px;padding:44px}
.kl-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.kl-step{border-left:1px solid var(--kl-line);padding-left:24px}
.kl-step:first-child{border-left:0;padding-left:0}
.kl-n{display:block;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:64px;line-height:1;color:var(--kl-amber)}
.kl-step strong{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:800;font-size:21px;margin:12px 0 8px}
.kl-step p{color:var(--kl-steel);font-size:15px;line-height:1.55}
.kl-more{margin-top:28px!important}.kl-more a{font-weight:600;color:var(--kl-ink)!important}
.kl-founder{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:0;background:var(--kl-ink);border-radius:20px;overflow:hidden;color:#fff}
.kl-founder-photo img{display:block;width:100%;height:100%;object-fit:cover;min-height:100%}
.kl-founder-txt{padding:48px;display:flex;flex-direction:column;justify-content:center;gap:16px;position:relative}
.kl-founder-txt .kl-eyebrow{color:var(--kl-amber)}
.kl-founder-txt h2{color:#fff!important;margin:0!important}
.kl-founder-txt p{color:#C9CED4;font-size:17px;line-height:1.6;max-width:620px}
.kl-sign strong{display:block;font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:800;font-size:22px;color:#fff}
.kl-sign span{font-size:14px;color:#9AA3AE}
.kl-founder-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.kl-btn{display:inline-flex;align-items:center;background:var(--kl-amber);color:var(--kl-ink)!important;font-weight:600;padding:14px 22px;border-radius:999px;text-decoration:none!important;transition:background .15s}
.kl-btn:hover{background:var(--kl-amber-hover)}
.kl-btn--ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.kl-btn--ghost:hover{background:rgba(255,255,255,.08)}
.kl-why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kl-why-item{background:var(--kl-card);border:1px solid var(--kl-line);border-radius:16px;padding:22px}
.kl-why-item strong{display:block;font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:850;font-size:28px}
.kl-why-item span{color:var(--kl-steel);font-size:14.5px}
@media (max-width:991px){
  .kl-uses-grid{grid-template-columns:1fr 1fr}
  .kl-why{grid-template-columns:1fr 1fr}
  .kl-founder{grid-template-columns:1fr}
  .kl-founder-photo{max-height:420px;overflow:hidden}
  .kl-founder-photo img{object-position:center 20%}
}
@media (max-width:575px){
  .kl-home section{margin:48px 0}
  .kl-uses-grid,.kl-steps-grid{grid-template-columns:1fr}
  .kl-steps{padding:26px}
  .kl-step{border-left:0;padding-left:0;border-top:1px solid var(--kl-line);padding-top:20px}
  .kl-step:first-child{border-top:0;padding-top:0}
  .kl-founder-txt{padding:28px}
  .kl-why{grid-template-columns:1fr 1fr;gap:10px}
}
.welcome > div,.welcome .kl-home,.welcome .kl-home div{max-width:none!important}
#footer .container,#footer .footer-bottom,#footer > div{background:transparent!important}

/* =========== Mobil – opravy po nasazení =========== */
.kl-uses-grid,.kl-steps-grid,.kl-why{min-width:0}
.kl-why-item,.kl-use,.kl-step{min-width:0;overflow-wrap:anywhere}
@media (max-width:767px){
  /* mobilní hlavička = horní lišta s logem → světlá, aby bylo logo čitelné */
  .top-navigation-bar{background:#fff!important;border-bottom:1px solid var(--kl-line)!important;box-shadow:0 2px 10px rgba(22,25,29,.06)}
  .top-navigation-bar a,.top-navigation-bar button,.top-navigation-bar span,.top-navigation-bar strong{color:var(--kl-ink)!important}
  #header .header-top{padding-top:0;padding-bottom:0}
  .kl-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-why-item{padding:16px}
  .kl-why-item strong{font-size:20px;font-stretch:100%}
  .kl-home h2{font-size:28px!important}
  .kl-founder-txt h2{font-size:26px!important}
  .homepage-group-title{font-size:28px!important}
  .products-block .price-final,.products-block .price-final strong{font-size:22px!important}
}
/* detail produktu: sleva je u ceny, štítek přes obrázek nezakrývá grafiku */
.type-product .p-image .flags-extra,.type-product .p-image-wrapper .flags-extra{display:none!important}
.top-navigation-contacts a{white-space:nowrap}
/* kategorie: box Nejprodávanější v šabloně přetékal na mobilu */
.products-top-wrapper{overflow-x:clip}

/* =========== Úpravy 5. 10. – přání klienta =========== */
/* rozcestník jen 2 oblasti (čalounictví vypuštěno) */
.kl-uses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* fotka zakladatele menší, méně „naplno“ */
.kl-founder{grid-template-columns:260px 1fr;align-items:center}
.kl-founder-photo{padding:40px 0 40px 44px}
.kl-founder-photo img{width:200px;height:200px;min-height:0;border-radius:50%;object-fit:cover;object-position:center 22%;border:4px solid rgba(242,165,22,.85);margin:0 auto}
@media (max-width:991px){
  .kl-founder{grid-template-columns:1fr}
  .kl-founder-photo{padding:32px 28px 0;max-height:none}
  .kl-founder-photo img{width:150px;height:150px;margin:0}
}
@media (max-width:575px){ .kl-uses-grid{grid-template-columns:1fr} }
