/* =========================================================
   KORY Essence - vlastni CSS
   Nahrat pres FTP do /user/documents/kory.css
   Odkaz je v: Vzhled a obsah -> Editor -> HTML kod -> Zahlavi
   Po kazde zmene souboru zvednout cislo za ?v= v odkazu.
   ========================================================= */

/* ---------- 1. LISTA, CENY, TLACITKA, HLAVICKA, MENU ---------- */
.site-msg.information{position:static;bottom:auto;left:auto;max-width:none;opacity:1;box-shadow:none;background-color:#111;color:#fff;text-align:center;font-size:12px;letter-spacing:.04em;line-height:1.5;padding:13px 16px}
.site-msg.information .close{display:none}
.site-msg.information .text{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px 40px;padding-right:0}
.site-msg.information .text .ib{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.site-msg.information .text .ib::before{font-family:shoptet;font-style:normal;font-weight:400;speak:none;font-size:15px;line-height:1;display:inline-block;vertical-align:middle;opacity:.8}
.site-msg.information .text .ib-van::before{content:"\e92e"}
.site-msg.information .text .ib-pin::before{content:"\e923"}
.site-msg.information .text .ib-back::before{content:"\e943"}
.site-msg.information .text .ib-sm{display:none}
@media (max-width:767px){.site-msg.information{font-size:11px;padding:10px 12px;letter-spacing:.02em}.site-msg.information .text{gap:5px 18px}}
@media (max-width:640px){.site-msg.information .text .ib-lg{display:none}.site-msg.information .text .ib-sm{display:inline}}

.price-final{color:#1a1a1a}
.p-detail-inner .price .price-final{font-weight:600}

.btn.btn-conversion,a.btn.btn-conversion{background-color:#111;border-color:#111;color:#fff;font-size:14px;min-height:52px;letter-spacing:.08em}
.btn.btn-conversion:hover,.btn.btn-conversion:focus-visible,a.btn.btn-conversion:hover,a.btn.btn-conversion:focus-visible{background-color:#000;border-color:#000;color:#fff}

@media (max-width:767px){
.add-to-cart .btn.btn-cart.btn-icon{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;background-color:#111;border:2px solid #111;color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.add-to-cart .btn.btn-cart.btn-icon .sr-only{position:static;width:auto;height:auto;margin:0;padding:0;clip:auto;clip-path:none;overflow:visible;white-space:nowrap}
}

.p-detail-inner .stars-wrapper{display:none}
.p-detail-inner .stars-wrapper:has(.star-on,.star-half){display:flex}

.p-detail-inner .p-short-description,.p-detail-inner .p-short-description p,#description,#description p{font-size:15px;line-height:1.6;text-align:left!important}

body > .container{display:none}

@media (min-width:768px) and (max-width:991px){
#header,.type-index #header{padding-bottom:0;margin-bottom:10px}
#header .container.navigation-wrapper{display:flex;align-items:center;height:58px;padding:0 16px;margin:0;max-width:none}
#header .site-name{position:static;order:1;flex:0 0 auto;padding:0;text-align:left;height:auto}
#header .site-name img{max-height:46px;max-width:none;width:auto;padding:0}
#header .top-nav{order:2;flex:1 1 auto;height:auto;min-height:0;padding:0;justify-content:flex-end}
#header .top-nav .project-phone,#header .top-nav .project-email{display:none}
#header .top-nav .top-nav-right{flex:0 0 auto;width:auto;margin:0}
#header .menu-trigger{display:block;padding:15px 0 15px 10px;margin-left:22px}
#header .menu-helper{opacity:0;pointer-events:none}
#navigation{position:fixed;top:0;right:0;left:auto;width:0;height:100%;z-index:1000;overflow:hidden;background:#fff}
.navigation-window-visible #navigation{width:420px;max-width:85%;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
#navigation .navigation-in{position:static;width:100%;height:100%;overflow-y:auto;overflow-x:hidden}
#navigation .navigation-in ul{display:block;width:auto}
#navigation .navigation-in ul li{display:block!important;visibility:visible!important;position:relative;float:none;width:auto}
#navigation .navigation-in>ul>li>a{display:block;padding:14px 22px;font-size:14px;border-bottom:1px solid #eee}
#navigation .navigation-in ul.menu-level-2{position:static;width:auto;left:auto;right:auto;margin:0;border:0;background:#f7f7f7;box-shadow:none;clip-path:none}
#navigation .navigation-in ul.menu-level-2 li a{padding:11px 22px 11px 38px;font-size:13px}
}

@media (min-width:992px){
#header .container.navigation-wrapper{display:flex;align-items:center;gap:34px;padding-top:12px;padding-bottom:12px}
#header .site-name{order:1;flex:0 0 auto;padding:0;text-align:left}
#header .site-name img{max-height:72px;width:auto}
#header .top-nav{order:3;flex:0 0 auto;width:auto;height:auto;min-height:0;padding-top:0}
#header,.type-index #header{padding-bottom:0;margin-bottom:10px}
#header #navigation .navigation-in ul.menu-level-1>li>a{padding-left:13px;padding-right:13px}
#header #navigation{order:2;flex:1 1 auto;width:auto}
#header .top-nav .project-phone,#header .top-nav .project-email{display:none}
#header .top-nav .top-nav-right{width:auto;margin:0}
#header .fitted .navigation-in ul.menu-level-1{justify-content:flex-start}
}

@media (min-width:992px) and (max-width:1399px){
#header .top-nav .cart-count .cart-price{display:none!important}
#header .container.navigation-wrapper{gap:22px}
}

@media (min-width:992px){
#navigation .navigation-in>ul>li>a{position:relative}
#navigation .navigation-in>ul>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;background:#111;transform:scaleX(0);transition:transform .18s ease-out}
#navigation .navigation-in>ul>li>a:hover::after,#navigation .navigation-in>ul>li.exp>a::after{transform:scaleX(1)}
#navigation .navigation-in>ul>li.exp>a{color:#111;background:#fafafa}
#navigation .navigation-in>ul>li>a:hover::before,#navigation .navigation-in>ul>li.exp>a::before{content:"";position:absolute;left:0;right:0;top:100%;height:34px;background:transparent}
#navigation .navigation-in>ul>li{position:static}
#navigation .navigation-in>ul>li>ul.menu-level-2{left:0;right:0;width:auto;min-width:0;margin-left:0;top:calc(100% + 30px);flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 40px;padding:20px 30px 22px 15px;background:#fafafa;border:0;box-shadow:0 0 0 100vmax #fafafa;clip-path:inset(0 -100vmax 0 -100vmax)}
#navigation .navigation-in>ul>li>ul.menu-level-2>li{border-top:0;flex:0 0 auto}
#navigation .navigation-in>ul>li>ul.menu-level-2>li>a{padding:8px 0!important;font-size:13px;white-space:nowrap;color:#333}
#navigation .navigation-in>ul>li>ul.menu-level-2>li>a:hover{color:#111;text-decoration:underline;text-underline-offset:3px}
.submenu-visible #navigation .navigation-in>ul>li.ext.exp>ul.menu-level-2{display:flex}
}


/* ---------- 2. UVODNI STRANKA: vonne rodiny + nadpis vyberu ---------- */
/* --- pořadí bloků na úvodní stránce ---
   Pozn.: sekce .kory-fam a .kory-selhead jsou v uvodnim textu, ktery Shoptet
   zanoruje .welcome-wrapper > .welcome > div. Aby se z nich staly polozky
   flexu #content a sly seradit, musi mit display:contents cela ta cesta,
   ne jen .welcome-wrapper. Zbytek uvodniho textu zustava dole (order 6). */
.type-index #content.content{display:flex;flex-direction:column}
.type-index #content.content > .welcome-wrapper,
.type-index #content.content .welcome-wrapper .welcome,
.type-index #content.content .welcome-wrapper .welcome > div{display:contents}
.type-index #content.content .welcome > *,
.type-index #content.content .welcome > div > *{order:6}
.type-index #content.content .welcome .kory-fam{order:1}
.type-index #content.content .welcome .kory-selhead{order:2}
.type-index #content.content > .homepage-group-title{order:3}
.type-index #content.content > .products-block{order:4}
.type-index #content.content > .benefitBanner{order:5}
.type-index #content.content > .footer-banners{order:7}

/* --- společné --- */
.kory-eyebrow{font-family:Archivo,sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8a8375;margin:0}
.kory-fam,.kory-selhead{width:100%;padding-left:20px;padding-right:20px}

/* --- vonné rodiny --- */
.kory-fam{padding:56px 0 10px}
.kory-fam .kory-eyebrow{margin-bottom:26px}
.kory-fam-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0 34px}
.kory-fam-grid li{border-top:1px solid rgba(23,20,15,.16)}
.kory-fam-grid a{display:block;padding:20px 0 22px;font-family:Cormorant,serif;font-weight:300;font-size:25px;line-height:1;color:#17140f;text-decoration:none;text-transform:lowercase}
.kory-fam-grid a:hover{opacity:.55}

/* --- nadpis výběru --- */
.kory-selhead{padding:64px 0 6px}
.kory-selhead-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.kory-allink{font-family:Archivo,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#17140f;text-decoration:none;border-bottom:1px solid #17140f;padding-bottom:3px}
.kory-allink:hover{opacity:.6}
.kory-h2{font-family:Cormorant,serif!important;font-weight:300;font-size:40px;line-height:1.08;letter-spacing:-.01em;color:#17140f;margin:0;text-transform:none!important;text-align:left}

@media (max-width:991px){
.kory-fam-grid{grid-template-columns:repeat(3,1fr);gap:0 26px}
.kory-fam-grid a{font-size:26px}
.kory-h2{font-size:38px}
}
@media (max-width:600px){
.kory-fam-grid{grid-template-columns:repeat(2,1fr);gap:0 20px}
.kory-fam-grid a{font-size:23px;padding:16px 0 18px}
.kory-h2{font-size:29px}
.kory-fam{padding-top:36px}.kory-selhead{padding-top:44px}
}


/* ---------- 3. TEXTY V BANNERU ----------
   Pozn. 1: v obsahu banneru je odkaz vnorenny v odkazu, takze prohlizec
   presune .banner-overlay-content primo do .item. Proto se cili takto.
   Pozn. 2: na .item se NESMI davat position:relative. Sablona ho tam uz ma
   (.carousel-inner>.item), ale prichazejicimu snimku dava position:absolute
   (.carousel-inner>.next). Vlastni pravidlo s vyssi specificitou to prebilo,
   oba snimky pak byly v toku pod sebou, slider se behem prechodu zdvojnasobil
   z 539 na 1078 px a stranka poskocila. */
.wide-carousel .carousel-inner .item .banner-overlay-content{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  max-width:1355px;margin:0 auto;padding:0 20px;color:#fff;z-index:3;
  text-shadow:0 1px 16px rgba(0,0,0,.4)}
.wide-carousel .banner-overlay-content .banner-title{
  font-family:Cormorant,serif;font-weight:300;font-size:54px;line-height:1.06;
  margin:0 0 16px;color:#fff;text-transform:none;max-width:15ch}
.wide-carousel .banner-overlay-content .banner-text{
  font-family:Archivo,sans-serif;font-size:15px;line-height:1.6;margin:0 0 26px;
  color:#fff;max-width:46ch}
.wide-carousel .banner-overlay-content .banner-btn{
  display:inline-block;background:#fff;color:#111;text-decoration:none;
  font-family:Archivo,sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 30px;text-shadow:none}
.wide-carousel .banner-overlay-content .banner-btn:hover{background:#f0ece4;color:#111}
@media (max-width:991px){
.wide-carousel .banner-overlay-content{padding:0 16px}
.wide-carousel .banner-overlay-content .banner-title{font-size:36px;margin-bottom:12px}
.wide-carousel .banner-overlay-content .banner-text{font-size:14px;margin-bottom:20px;max-width:38ch}
}
@media (max-width:600px){
.wide-carousel .banner-overlay-content .banner-title{font-size:26px}
.wide-carousel .banner-overlay-content .banner-text{display:none}
.wide-carousel .banner-overlay-content .banner-btn{padding:12px 22px;font-size:10px}
}


/* ---------- 4. VYSKA SLIDERU NA POCITACI ----------
   Banner je pres celou sirku okna, takze na sirokem monitoru roste do vysky
   (obrazky jsou 1900x800, na 2560 px je to 1078 px). Tady se jen zastropuje,
   aby pod nim byl videt zacatek vonnych rodin. max-height + object-fit:cover
   znamena: dokud se banner vejde, nic se nedeje, nad limit se orizne
   ze stredu. Vysku neurcujeme napevno, aby se uzsi okna nenatahovala.
   min-height na .carousel-inner nastavuje skript Shoptetu inline podle
   pomeru stran banneru, takze se musi prebit pres !important - jinak
   pod orriznutym obrazkem zustane bily pruh. */
@media (min-width:992px){
.wide-carousel .carousel-inner{min-height:0!important}
.wide-carousel .carousel-inner .item img{
  max-height:min(55vh,620px);object-fit:cover;object-position:center}
}