/* Hlavička – vyladenie v4 (Bio-racio-dia, 24. 10. 2026) Vyhľadávanie, ikony, košík a menu v štýle e-shopu. Na PC ostáva výška hlavičky rovnaká – nič neposkočí. Mobil: vyhľadávacie pole je natrvalo pod logom a ikonami (hlavička 106 px, od 480 px 136 px), lupa v rade ikon je skrytá. Farbu srdiečka a jeho kolieska nastavuje doplnok Obľúbené produkty (Barva ikony, Barva kolečka u ikony). */ :root{--brdh-lupa-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");--brdh-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");--brdh-srdce:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-7.6-4.6-7.6-10.3A4.3 4.3 0 0 1 12 7.4a4.3 4.3 0 0 1 7.6 2.6c0 5.7-7.6 10.3-7.6 10.3z'/%3E%3C/svg%3E");--brdh-srdce-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-7.6-4.6-7.6-10.3A4.3 4.3 0 0 1 12 7.4a4.3 4.3 0 0 1 7.6 2.6c0 5.7-7.6 10.3-7.6 10.3z'/%3E%3C/svg%3E");--brdh-kosik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1 11.5h-11z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E");--brdh-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");--brdh-zavriet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");--brdh-darcek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v9H4z'/%3E%3Cpath d='M3 7h18v4H3z'/%3E%3Cpath d='M12 7v13'/%3E%3Cpath d='M12 7C10.5 4 7 3.6 7 5.6 7 7 9.5 7 12 7zm0 0c1.5-3 5-3.4 5-1.4C17 7 14.5 7 12 7z'/%3E%3C/svg%3E");--brdh-ucet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E");--brdh-tint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='12' fill='%23F4E9DF'/%3E%3C/svg%3E");--brdh-tint-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='12' fill='%23EEDAC9'/%3E%3C/svg%3E")} /* príklady vo vyhľadávaní len na PC a tablete */ #formSearchForm .brdh-ex{display:none} /* ===== PC a tablet (od 768 px) ===== */ @media (min-width:768px){ #header{position:relative;box-shadow:0 1px 0 rgba(31,61,41,.07),0 14px 24px -22px rgba(31,61,41,.55)} #header .header-bottom{border-top-color:transparent} /* logo o 15 % väčšie, horná medzera o to menšia – výška hlavičky ostáva */ #header .header-top{padding-top:42px} #header .header-top-wrapper .site-name{flex:0 0 auto;display:flex;align-items:center} #header .header-top-wrapper .site-name a{display:block} #header .header-top-wrapper .site-name img{width:auto;height:69px;max-height:none;aspect-ratio:auto 300/226} /* vyhľadávanie od loga až po ikony */ #header .header-top-wrapper .search{flex:1 1 auto;min-width:0;padding:0 40px 0 44px} #header .header-top-wrapper .navigation-buttons{flex:0 0 auto;padding:0 14px 0 0;gap:6px} #header #formSearchForm{position:relative;align-items:center;width:100%;height:50px;margin:0;padding:0;border:1.5px solid transparent;border-radius:12px;background:#F4E9DF;transition:background-color .2s,border-color .2s,box-shadow .2s} #header #formSearchForm:hover{border-color:#E9D3C0} #header #formSearchForm:focus-within{background:#fff;border-color:#1F3D29;box-shadow:0 0 0 4px rgba(31,61,41,.12)} #header #formSearchForm .search-input-icon{display:none} #header #formSearchForm .search-input,#header #formSearchForm .search-input:hover,#header #formSearchForm .search-input:focus{flex:1 1 auto;min-width:0;width:auto;height:100%;margin:0;padding:0 12px 0 20px;border:0;border-radius:12px 0 0 12px;outline:0;background:transparent;box-shadow:none;font:400 16px/1.25 Roboto,Arial,sans-serif;color:#1F1F1F;-webkit-appearance:none;appearance:none} #header #formSearchForm .search-input::placeholder{color:#7A5836;opacity:1} #header #formSearchForm .search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none} #header #formSearchForm .search-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;width:auto;min-width:0;height:42px;margin:0 3px 0 0;padding:0 20px 0 16px;border:0;border-radius:9px;background:#1F3D29;color:#fff;font:700 15px/1 Roboto,Arial,sans-serif;letter-spacing:normal;text-transform:none;text-shadow:none;box-shadow:none;cursor:pointer;transition:background-color .2s} #header #formSearchForm .search-button::after{content:none} #header #formSearchForm .search-button:hover,#header #formSearchForm .search-button:focus{border:0;background:#2C5539;color:#fff} #header #formSearchForm .search-button:focus-visible{outline:2px solid #fff;outline-offset:-5px} /* striedajúce sa príklady v poli (pridáva ich skript) */ #header #formSearchForm .brdh-ex{position:absolute;top:50%;left:20px;right:130px;height:20px;margin-top:-10px;display:flex;align-items:center;gap:6px;overflow:hidden;text-align:left;font:400 16px/20px Roboto,Arial,sans-serif;color:#7A5836;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s} #header #formSearchForm.brdh-ex-on .brdh-ex{opacity:1} #header #formSearchForm .brdh-ex-w{position:relative;display:block;flex:none;height:20px;overflow:hidden} #header #formSearchForm .brdh-ex-l{display:block;color:#1F1F1F;font-weight:500;transition:transform .5s cubic-bezier(.6,0,.2,1)} #header #formSearchForm .brdh-ex-l>span{display:block;height:20px} #header #formSearchForm.brdh-ex-on .search-input::placeholder{color:transparent} #header #formSearchForm.brdh-ex-on:focus-within .search-input::placeholder{color:#7A5836} #header #formSearchForm.brdh-ex-on:focus-within .brdh-ex,#header #formSearchForm.brdh-ex-on.brdh-val .brdh-ex,#header #formSearchForm.brdh-ex-on .search-input:not(:placeholder-shown)~.brdh-ex{opacity:0} /* Obľúbené a Košík – rovnaké ikony, popis pod ikonou (od 992 px) */ #header .navigation-buttons #dkLabFavHeaderWrapper{display:flex;align-items:center;margin:0} #header .navigation-buttons .dkLabFavHeaderIconBtn,#header .navigation-buttons a.cart-count{position:relative;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:auto;min-width:64px;height:58px;margin:0;padding:0 6px;border-radius:10px;font-size:0;line-height:1;text-decoration:none;transition:background-color .2s} #header .navigation-buttons .dkLabFavHeaderIconBtn{display:flex} #header .navigation-buttons a.cart-count,#header .navigation-buttons a.cart-count:hover{color:#1F3D29} #header .navigation-buttons .dkLabFavHeaderIconBtn:hover,#header .navigation-buttons a.cart-count:hover{background:#F2F5F1} #header .navigation-buttons .dkLabFavHeaderIconBtn:focus-visible,#header .navigation-buttons a.cart-count:focus-visible{outline:2px solid #1F3D29;outline-offset:2px} #header .navigation-buttons .dkLabFavHeaderIconBtn::before,#header .navigation-buttons a.cart-count::before{content:"";flex:none;top:0;width:26px;height:26px;margin:0;font-size:0;line-height:0;background:currentColor;transition:transform .2s ease} #header .navigation-buttons a.cart-count i,#header .navigation-buttons .dkLabFavHeaderIconBtn em{position:absolute;top:4px;left:calc(50% + 4px);right:auto;bottom:auto;width:auto;min-width:19px;height:19px;margin:0;padding:0 5px;border-radius:999px;font:700 11px/19px Roboto,Arial,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff} #header .navigation-buttons a.cart-count i{background:#1F3D29;color:#fff} #header .navigation-buttons a.cart-count i.brdh-bump{animation:brdh-bump .45s ease} #header .navigation-buttons a.cart-count .cart-price{display:none!important} /* ikony ako masky (spoločné nastavenie, potom obrázok pre každú ikonu) */ #header #formSearchForm .search-button::before,#header .navigation-buttons .dkLabFavHeaderIconBtn::before,#header .navigation-buttons a.cart-count::before,#navigation .menu-level-1>li.menu-item-3554>a>b::after{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} #header #formSearchForm .search-button::before{content:"";flex:none;width:18px;height:18px;margin:0;background:currentColor;-webkit-mask-image:var(--brdh-lupa-b);mask-image:var(--brdh-lupa-b)} #header .navigation-buttons .dkLabFavHeaderIconBtn::before{-webkit-mask-image:var(--brdh-srdce);mask-image:var(--brdh-srdce)} #header .navigation-buttons .dkLabFavHeaderIconBtn:hover::before{-webkit-mask-image:var(--brdh-srdce-p);mask-image:var(--brdh-srdce-p);background:#7AB536;transform:scale(1.08)} #header .navigation-buttons a.cart-count::before{-webkit-mask-image:var(--brdh-kosik);mask-image:var(--brdh-kosik)} /* menu – podčiarknutie pri prejdení myšou, viditeľný rámik pri ovládaní klávesnicou */ #navigation .menu-level-1>li>a>b{position:relative;display:inline-block} #navigation .menu-level-1>li>a>b::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:3px;border-radius:3px;background:#7AB536;transform:scaleX(0);transition:transform .22s ease;pointer-events:none} #navigation .menu-level-1>li>a:hover>b::after,#navigation .menu-level-1>li.exp>a>b::after{transform:scaleX(1)} #navigation .menu-level-1>li>a:focus-visible>b::after{transform:scaleX(1)} #navigation .menu-level-1>li>a:hover{color:#1F3D29} #navigation .menu-level-1>li>a:focus-visible{outline:2px solid #1F3D29;outline-offset:-8px;border-radius:14px} /* Vianoce – béžová pilulka s darčekom */ #navigation .menu-level-1>li.menu-item-3554>a>b{z-index:0;padding-left:36px;color:#683B15} #navigation .menu-level-1>li.menu-item-3554>a>b::before{content:"";position:absolute;top:-10px;bottom:-10px;left:0;right:-16px;z-index:-1;border-radius:999px;background:#F4E9DF;transition:background-color .2s} #navigation .menu-level-1>li.menu-item-3554>a>b::after{left:13px;right:auto;top:50%;bottom:auto;width:16px;height:16px;margin-top:-8px;border-radius:0;background:currentColor;-webkit-mask-image:var(--brdh-darcek);mask-image:var(--brdh-darcek);transform:none;transition:none} #navigation .menu-level-1>li.menu-item-3554>a:hover{color:#683B15} #navigation .menu-level-1>li.menu-item-3554>a:hover>b::before,#navigation .menu-level-1>li.menu-item-3554.exp>a>b::before{background:#EEDAC9} } /* popisy pod ikonami (od 992 px); pevná šírka – pri zmene sumy v košíku sa nič neposunie */ @media (min-width:992px){ #header .navigation-buttons .dkLabFavHeaderIconBtn,#header .navigation-buttons a.cart-count{width:80px;min-width:0} #header .navigation-buttons .dkLabFavHeaderIconBtn::after{content:"Obľúbené";font:500 12.5px/1 Roboto,Arial,sans-serif;color:#4A4F4B;white-space:nowrap} #header .navigation-buttons a.cart-count .cart-price{display:block!important;max-width:68px;height:auto;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;font:500 12.5px/1 Roboto,Arial,sans-serif;color:#4A4F4B;white-space:nowrap} #header .navigation-buttons a.cart-count:not(.full) .cart-price{font-size:0} #header .navigation-buttons a.cart-count:not(.full) .cart-price::after{content:"Košík";content:"Košík" / "";font-size:12.5px} #header .navigation-buttons a.cart-count.full .cart-price{color:#1F1F1F;font-weight:700} /* miesto pre srdiečko vopred – doplnok Obľúbené ho vkladá až po načítaní, vyhľadávanie sa tak neposunie */ body:not(.ordering-process) #header .header-top-wrapper .navigation-buttons{min-width:180px;justify-content:flex-end} } @media (min-width:768px) and (max-width:991px){ #header .navigation-buttons .dkLabFavHeaderIconBtn,#header .navigation-buttons a.cart-count{min-width:50px;height:50px} #header .navigation-buttons .dkLabFavHeaderIconBtn::after{content:none} body:not(.ordering-process) #header .header-top-wrapper .navigation-buttons{min-width:120px;justify-content:flex-end} } /* ===== mobil (do 767 px) ===== */ @media (max-width:767px){ #header{background:#fff;box-shadow:0 1px 0 #E7EAE5,0 8px 18px -14px rgba(31,61,41,.4)} #header .header-top-wrapper .site-name img{width:auto;height:46px;max-height:none;aspect-ratio:auto 300/226} #header .navigation-buttons>a[data-target="search"],#header .navigation-buttons>a[data-target="cart"],#header .navigation-buttons>a[data-target="navigation"],#header .navigation-buttons>a[data-target="login"],#header .navigation-buttons .dkLabFavHeaderIconBtn{position:relative;color:#1F3D29} #header .navigation-buttons>a[data-target="search"]:hover,#header .navigation-buttons>a[data-target="cart"]:hover,#header .navigation-buttons>a[data-target="navigation"]:hover,#header .navigation-buttons>a[data-target="login"]:hover,#header .navigation-buttons .dkLabFavHeaderIconBtn:hover{color:#1F3D29} #header .navigation-buttons>a[data-target="search"]:focus-visible,#header .navigation-buttons>a[data-target="cart"]:focus-visible,#header .navigation-buttons>a[data-target="navigation"]:focus-visible,#header .navigation-buttons>a[data-target="login"]:focus-visible,#header .navigation-buttons .dkLabFavHeaderIconBtn:focus-visible{outline:2px solid #1F3D29;outline-offset:-3px;border-radius:12px} /* ikona 24 px presne v strede tlačidla (50 aj 80 px) */ #header .navigation-buttons>a[data-target="search"]::before,#header .navigation-buttons>a[data-target="cart"]::before,#header .navigation-buttons>a[data-target="navigation"]::before,#header .navigation-buttons>a[data-target="login"]::before,#header .navigation-buttons .dkLabFavHeaderIconBtn::before{content:"";display:block;position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;font-size:0;line-height:0;background:currentColor;-webkit-mask-image:var(--brdh-i);mask-image:var(--brdh-i);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} #header .navigation-buttons>a[data-target="search"]{--brdh-i:var(--brdh-lupa);background:var(--brdh-tint) center/42px 42px no-repeat} #header .navigation-buttons>a[data-target="cart"]{--brdh-i:var(--brdh-kosik)} #header .navigation-buttons>a[data-target="navigation"]{--brdh-i:var(--brdh-menu)} #header .navigation-buttons>a[data-target="login"]{--brdh-i:var(--brdh-ucet)} .search-window-visible #header .navigation-buttons>a[data-target="search"]{--brdh-i:var(--brdh-zavriet);background-image:var(--brdh-tint-a)} .navigation-window-visible #header .navigation-buttons>a[data-target="navigation"]{--brdh-i:var(--brdh-zavriet)} #header .navigation-buttons .dkLabFavHeaderIconBtn{--brdh-i:var(--brdh-srdce)} #header .navigation-buttons a.cart-count i,#header .navigation-buttons .dkLabFavHeaderIconBtn em{top:calc(50% - 19px);left:calc(50% + 3px);right:auto;bottom:auto;width:auto;min-width:18px;height:18px;margin:0;padding:0 5px;border-radius:999px;font:700 11px/18px Roboto,Arial,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff} #header .navigation-buttons a.cart-count i{background:#1F3D29;color:#fff} #header .navigation-buttons a.cart-count i.brdh-bump{animation:brdh-bump .45s ease} } /* ===== mobil: vyhľadávanie natrvalo pod logom (okrem košíka a pokladne) ===== */ @media (max-width:767px){ body:not(.ordering-process) #header .navigation-buttons>a[data-target="search"]{display:none} body:not(.ordering-process) #header .search{display:block;order:3;width:100%;margin:0;padding:2px 16px 10px;background:#fff} /* pri otvorenom mobilnom menu sa pole skryje – menu Shoptetu začína pevne pod radom ikon (50 px, od 480 px 80 px) */ body.navigation-window-visible:not(.ordering-process) #header .search{display:none} body:not(.ordering-process) #header #formSearchForm{position:relative;display:flex;align-items:center;width:100%;height:44px;margin:0;padding:0;border:1.5px solid transparent;border-radius:999px;background:#F4E9DF;transition:background-color .2s,border-color .2s} body:not(.ordering-process) #header #formSearchForm:focus-within{background:#fff;border-color:#1F3D29} body:not(.ordering-process) #header #formSearchForm .search-input-icon{display:none} body:not(.ordering-process) #header #formSearchForm .search-input,body:not(.ordering-process) #header #formSearchForm .search-input:hover,body:not(.ordering-process) #header #formSearchForm .search-input:focus{flex:1 1 auto;min-width:0;width:auto;height:100%;margin:0;padding:0 6px 0 18px;border:0;border-radius:999px 0 0 999px;outline:0;background:transparent;box-shadow:none;font:400 16px/1.25 Roboto,Arial,sans-serif;color:#1F1F1F;-webkit-appearance:none;appearance:none} body:not(.ordering-process) #header #formSearchForm .search-input::placeholder{color:#7A5836;opacity:1} body:not(.ordering-process) #header #formSearchForm .search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none} body:not(.ordering-process) #header #formSearchForm .search-button{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:44px;height:41px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#1F3D29;font-size:0;line-height:0;text-shadow:none;box-shadow:none;cursor:pointer} body:not(.ordering-process) #header #formSearchForm .search-button::after{content:none} body:not(.ordering-process) #header #formSearchForm .search-button::before{content:"";display:block;width:22px;height:22px;margin:0;background:currentColor;-webkit-mask-image:var(--brdh-lupa-b);mask-image:var(--brdh-lupa-b);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} body:not(.ordering-process) #header #formSearchForm .search-button:focus-visible{outline:2px solid #1F3D29;outline-offset:-3px} /* striedajúce sa príklady aj na mobile */ body:not(.ordering-process) #header #formSearchForm .brdh-ex{position:absolute;top:50%;left:18px;right:50px;height:20px;margin-top:-10px;display:flex;align-items:center;gap:6px;overflow:hidden;text-align:left;font:400 16px/20px Roboto,Arial,sans-serif;color:#7A5836;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s} body:not(.ordering-process) #header #formSearchForm.brdh-ex-on .brdh-ex{opacity:1} body:not(.ordering-process) #header #formSearchForm .brdh-ex-w{position:relative;display:block;flex:none;height:20px;overflow:hidden} body:not(.ordering-process) #header #formSearchForm .brdh-ex-l{display:block;color:#1F1F1F;font-weight:500;transition:transform .5s cubic-bezier(.6,0,.2,1)} body:not(.ordering-process) #header #formSearchForm .brdh-ex-l>span{display:block;height:20px} body:not(.ordering-process) #header #formSearchForm.brdh-ex-on .search-input::placeholder{color:transparent} body:not(.ordering-process) #header #formSearchForm.brdh-ex-on:focus-within .search-input::placeholder{color:#7A5836} body:not(.ordering-process) #header #formSearchForm.brdh-ex-on:focus-within .brdh-ex,body:not(.ordering-process) #header #formSearchForm.brdh-ex-on.brdh-val .brdh-ex,body:not(.ordering-process) #header #formSearchForm.brdh-ex-on .search-input:not(:placeholder-shown)~.brdh-ex{opacity:0} /* kým je pole zamerané, hlavička sa pri rolovaní neschová (Shoptet ju inak posúva o -100 %) */ html.scrolled-down body:not(.ordering-process) #header:focus-within{transform:none} /* obsah a lišta doručenia pod vyššou hlavičkou (rovnaké hranice ako Shoptet: 50 + 56, 80 + 56) */ body:not(.ordering-process) .overall-wrapper{padding-top:106px} } @media (min-width:480px) and (max-width:767px){ body:not(.ordering-process) .overall-wrapper{padding-top:136px} } @media (min-width:480px) and (max-width:480px){ /* presne 480 px: Shoptet má rad ikon 50 px a logo 60 px, teda hlavička 60 + 56 */ body:not(.ordering-process) .overall-wrapper{padding-top:116px} } /* väčší mobil / malý tablet na výšku: od 520 px má hlavička 80 px (logo 69 px); medzi 480 a 519 px ostáva pôvodná výška loga 60 px, aby sa hlavička nezväčšila */ @media (min-width:520px) and (max-width:767px){ #header .header-top-wrapper .site-name img{height:69px} } @media (min-width:481px) and (max-width:767px){ #header .navigation-buttons>a[data-target="search"]{background-size:56px 56px} } @media (min-width:480px) and (max-width:519px){ #header .header-top-wrapper .site-name img{height:60px} } /* najužšie mobily (do 359 px): pôvodná veľkosť loga – hlavička nikdy nebude vyššia ako dnes */ @media (max-width:359px){ #header .header-top-wrapper .site-name img{height:40px} } /* režim vysokého kontrastu (Windows) – ikony ostanú viditeľné */ @media (forced-colors:active){ #header .navigation-buttons>a[data-target="search"]::before,#header .navigation-buttons>a[data-target="cart"]::before,#header .navigation-buttons>a[data-target="navigation"]::before,#header .navigation-buttons>a[data-target="login"]::before,#header .navigation-buttons .dkLabFavHeaderIconBtn::before,#header .navigation-buttons a.cart-count::before,#header #formSearchForm .search-button::before,#navigation .menu-level-1>li.menu-item-3554>a>b::after{forced-color-adjust:none;background:CanvasText} #header .navigation-buttons>a[data-target="search"],.search-window-visible #header .navigation-buttons>a[data-target="search"]{background-image:none} body:not(.ordering-process) #header #formSearchForm .search-button::before{forced-color-adjust:none;background:CanvasText} } @keyframes brdh-bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){ #header .navigation-buttons a.cart-count i.brdh-bump{animation:none} #header #formSearchForm,#header #formSearchForm .brdh-ex,#header #formSearchForm .brdh-ex-l,#navigation .menu-level-1>li>a>b::after,#header .navigation-buttons .dkLabFavHeaderIconBtn::before,#header .navigation-buttons a.cart-count::before,body:not(.ordering-process) #header #formSearchForm,body:not(.ordering-process) #header #formSearchForm .brdh-ex,body:not(.ordering-process) #header #formSearchForm .brdh-ex-l{transition:none} }