/* ==================================================
OXYBAG - MENU A HEADER
Preskladano z puvodnich souboru bez zmeny CSS pravidel.
================================================== */
/* ===== PUvodni zdroj: style.css ===== */
@media (min-width:992px){
.navigation-in>ul>li>a{padding-bottom:23px;padding-left:10px;padding-right:10px}
}
@media (min-width:1440px){
.navigation-in>ul>li>a{padding-left:14px;padding-right:14px}
}
@media (min-width:992px){
.navigation-in>ul>li>a>b{border-bottom:3px solid transparent;padding-bottom:6px}
}
@media (min-width:992px){
.navigation-in>ul>li.ext.exp>a>b,.navigation-in>ul>li>a:hover>b{border-bottom:3px solid #de337f}
}
.navigation-in>ul .menu-item-712>ul .menu-item-1111>a>img,.navigation-in>ul .menu-item-712>ul .menu-item-1112>a>img{height:60px!important}
@media (min-width:992px){
.menu-helper>ul>li a:hover{color:#de337f}
}
.site-msg.information{background-color:#db3383;border-radius:0;bottom:unset;max-width:100%;min-height:auto;padding:0;position:static;text-align:center}
.site-msg.information .container>.text{color:#fff;font-size:14px;padding:8px 10px;text-align:center}
.site-msg.information .container>.text:before{display:none}
.site-msg.information .container>.text img{margin:0 5px;max-width:14px;min-width:14px}
.site-msg.information .close{display:none}
.site-msg.information .close:after,.site-msg.information .close:before{background-color:#fff}
@media (max-width:767px){
.template-12 #header{position:sticky!important}
}
body.layout-fullwidth .breadcrumbs,
body.layout-fullwidth .page-title,
body.layout-fullwidth .category-title,
body.layout-fullwidth aside.sidebar,
body.layout-fullwidth .sidebar,
body.layout-fullwidth .sidebar-left,
body.layout-fullwidth .box-topProducts,
body.layout-fullwidth .box-onlinePayments {
display: none !important;
}
@media (max-width: 1023px){
#header::before {
font-size: 12px;
}
}
@media (max-width: 767px){
#header::before {
font-size: 12px;
}
}
@media (max-width: 568px){
#header::before {
font-size: 12px;
}
}
@media (width <= 991px){
.breadcrumbs > span > a:after {
color: #666;
content: "";
font-size: 12px;
padding: 10px 10px 10px 10px;
}
}
@media (width <= 991px){
.breadcrumbs {
display: flex;
padding: 20px 0px 0px 20px;
flex-wrap: wrap;
}
}
#header {
z-index: 99 !important;
}
/* ===== PUvodni zdroj: design/style.css ===== */
.submenu-image {
display: none;
}
@media (min-width: 480px){
.navigation-buttons {
z-index: 1000;
}
}
@media (min-width: 992px){
.submenu-visible .navigation-in > ul > li.ext.exp > ul {
left: -160px;
width: 820px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 992px){
.submenu-visible .navigation-in > ul > li.ext.exp > ul > li > a {
display: flex;
align-items: center;
}
}
@media (min-width: 992px){
.submenu-visible .navigation-in > ul > li.ext.exp > ul > li > a:not([data-image]):before {
content: "";
display: block;
width: 80px;
height: 80px;
background: url(https://cdn.myshoptet.com/prj/dist/master/cms/templates/frontend_templates/00/img/folder.svg) 50% 50% / contain no-repeat;
flex: none;
}
}
@media (min-width: 992px){
.submenu-visible .navigation-in > ul > li.ext.exp > ul .submenu-image {
display: block;
width: 80px;
height: 80px;
-o-object-fit: contain;
object-fit: contain;
flex: none;
}
}
/* ==================================================
OXYBAG - SJEDNOCENY DESIGN HEADERU A VYHLEDAVANI v13
Finalni konsolidovana pravidla. Standardni radius: 10 px.
================================================== */
.search-window {
--oxy-pink: #de337f;
--oxy-pink-dark: #c92870;
--oxy-pink-soft: #fff3f8;
--oxy-pink-soft-2: #fff7fa;
--oxy-border: #dedede;
--oxy-border-soft: #f1dbe5;
--oxy-separator: #f4e8ee;
--oxy-radius: 10px;
}
/* ---------- Hlavni vyhledavaci pole ---------- */
.search-window form input[type="search"],
.search-window form input[type="text"] {
border-color: var(--oxy-border) !important;
border-radius: var(--oxy-radius) 0 0 var(--oxy-radius) !important;
box-shadow: none !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
.search-window form input[type="search"]:focus,
.search-window form input[type="text"]:focus {
border-color: var(--oxy-pink) !important;
box-shadow: 0 0 0 3px rgba(222, 51, 127, .10) !important;
outline: none !important;
}
.search-window form button[type="submit"],
.search-window form input[type="submit"],
.search-window form .btn {
border-color: var(--oxy-pink) !important;
border-radius: 0 var(--oxy-radius) var(--oxy-radius) 0 !important;
background-color: var(--oxy-pink) !important;
color: #fff !important;
box-shadow: none !important;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.search-window form button[type="submit"]:hover,
.search-window form input[type="submit"]:hover,
.search-window form .btn:hover {
border-color: var(--oxy-pink-dark) !important;
background-color: var(--oxy-pink-dark) !important;
box-shadow: 0 5px 14px rgba(222, 51, 127, .16) !important;
}
/* Vlastni jednoducha sipka > v odesilacim tlacitku. */
.search-window form button[type="submit"] {
position: relative;
font-size: 0 !important;
}
.search-window form button[type="submit"]:before {
display: none !important;
content: none !important;
}
.search-window form button[type="submit"]:after {
content: ">" !important;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit !important;
font-size: 42px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #fff !important;
}
.search-window form button[type="submit"] > * {
opacity: 0 !important;
}
/* ---------- Zpet do obchodu ---------- */
.search-window .toggle-window-arr {
display: inline-flex !important;
align-items: center;
gap: 8px;
border-radius: var(--oxy-radius) !important;
background: transparent !important;
color: #333 !important;
box-shadow: none !important;
transition: color .2s ease, background-color .2s ease;
}
.search-window .toggle-window-arr:before {
content: "<" !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
border: 0 !important;
font-family: inherit !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: var(--oxy-pink) !important;
position: relative !important;
top: 1px !important;
transform: none !important;
}
.search-window .toggle-window-arr:after {
display: none !important;
content: none !important;
}
.search-window .toggle-window-arr:hover,
.search-window .toggle-window-arr:focus-visible {
background: var(--oxy-pink-soft) !important;
color: var(--oxy-pink) !important;
}
/* ---------- Nadpis Doporucujeme ---------- */
.search-window h3:before,
.search-window .h3:before {
background-color: var(--oxy-pink) !important;
border-color: var(--oxy-pink) !important;
}
.search-window h3:after,
.search-window .h3:after {
background-color: #fde7f1 !important;
border-color: #fde7f1 !important;
}
/* ---------- Doporucene produkty ---------- */
@media (hover:hover) {
.search-window .product,
.search-window .p {
transition: transform .2s ease, box-shadow .2s ease;
}
.search-window .product:hover,
.search-window .p:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}
}
/* ---------- Sipky carouselu ---------- */
/* DULEZITE: nemenime display ani position ovladacu. Ty ridi Shoptet.
Tim zustava neaktivni sipka skryta a aktivni sipka na puvodnim miste. */
.search-window .slick-arrow,
.search-window .owl-prev,
.search-window .owl-next,
.search-window .next,
.search-window .prev,
.search-window .previous,
.search-window [class~="next"],
.search-window [class~="prev"],
.search-window [class~="previous"],
.search-window [class*="-next"],
.search-window [class*="-prev"],
.search-window [class*="Next"],
.search-window [class*="Prev"],
.search-window [aria-label="Následující"],
.search-window [aria-label="Předchozí"],
.search-window [aria-label="Next"],
.search-window [aria-label="Previous"],
.search-window [title="Následující"],
.search-window [title="Předchozí"] {
border: 1px solid rgba(222, 51, 127, .40) !important;
border-radius: 50% !important;
background: #fff !important;
color: var(--oxy-pink) !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, .05) !important;
font-size: 0 !important;
overflow: hidden !important;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}
/* Schovame jen puvodni grafickou ikonku uvnitr, ne samotny ovladac. */
.search-window .next > *,
.search-window .prev > *,
.search-window .previous > *,
.search-window [class~="next"] > *,
.search-window [class~="prev"] > *,
.search-window [class~="previous"] > *,
.search-window [class*="-next"] > *,
.search-window [class*="-prev"] > *,
.search-window [aria-label="Následující"] > *,
.search-window [aria-label="Předchozí"] > *,
.search-window [aria-label="Next"] > *,
.search-window [aria-label="Previous"] > * {
opacity: 0 !important;
}
/* Vlastni jednoduche < a >, ale bez zasahu do pozice tlacitka. */
.search-window .slick-next:before,
.search-window .owl-next:before,
.search-window .next:before,
.search-window [class~="next"]:before,
.search-window [class*="-next"]:before,
.search-window [class*="Next"]:before,
.search-window [aria-label="Následující"]:before,
.search-window [aria-label="Next"]:before,
.search-window [title="Následující"]:before {
content: ">" !important;
}
.search-window .slick-prev:before,
.search-window .owl-prev:before,
.search-window .prev:before,
.search-window .previous:before,
.search-window [class~="prev"]:before,
.search-window [class~="previous"]:before,
.search-window [class*="-prev"]:before,
.search-window [class*="Prev"]:before,
.search-window [aria-label="Předchozí"]:before,
.search-window [aria-label="Previous"]:before,
.search-window [title="Předchozí"]:before {
content: "<" !important;
}
.search-window .slick-arrow:before,
.search-window .owl-prev:before,
.search-window .owl-next:before,
.search-window .next:before,
.search-window .prev:before,
.search-window .previous:before,
.search-window [class~="next"]:before,
.search-window [class~="prev"]:before,
.search-window [class~="previous"]:before,
.search-window [class*="-next"]:before,
.search-window [class*="-prev"]:before,
.search-window [class*="Next"]:before,
.search-window [class*="Prev"]:before,
.search-window [aria-label="Následující"]:before,
.search-window [aria-label="Předchozí"]:before,
.search-window [aria-label="Next"]:before,
.search-window [aria-label="Previous"]:before,
.search-window [title="Následující"]:before,
.search-window [title="Předchozí"]:before {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-family: inherit !important;
font-size: 32px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: var(--oxy-pink) !important;
opacity: 1 !important;
transform: none !important;
}
.search-window .slick-arrow:after,
.search-window .owl-prev:after,
.search-window .owl-next:after,
.search-window .next:after,
.search-window .prev:after,
.search-window .previous:after,
.search-window [class~="next"]:after,
.search-window [class~="prev"]:after,
.search-window [class~="previous"]:after,
.search-window [class*="-next"]:after,
.search-window [class*="-prev"]:after,
.search-window [class*="Next"]:after,
.search-window [class*="Prev"]:after,
.search-window [aria-label="Následující"]:after,
.search-window [aria-label="Předchozí"]:after,
.search-window [aria-label="Next"]:after,
.search-window [aria-label="Previous"]:after {
display: none !important;
content: none !important;
}
@media (hover:hover) {
.search-window .slick-arrow:hover,
.search-window .owl-prev:hover,
.search-window .owl-next:hover,
.search-window .next:hover,
.search-window .prev:hover,
.search-window .previous:hover,
.search-window [class~="next"]:hover,
.search-window [class~="prev"]:hover,
.search-window [class~="previous"]:hover,
.search-window [class*="-next"]:hover,
.search-window [class*="-prev"]:hover,
.search-window [aria-label="Následující"]:hover,
.search-window [aria-label="Předchozí"]:hover,
.search-window [aria-label="Next"]:hover,
.search-window [aria-label="Previous"]:hover {
border-color: var(--oxy-pink) !important;
background: #fde7f1 !important;
box-shadow: 0 5px 14px rgba(222, 51, 127, .12) !important;
}
}
/* ---------- Naseptavac / vysledky vyhledavani ---------- */
.search-window .search-results,
.search-window .search-results-window,
.search-window .search-suggest,
.search-window .search-suggest-results,
.search-window .search-whisper,
.search-window .search-whisperer,
.search-window .search-whisper-results,
.search-window .ui-autocomplete,
.search-window .ui-menu,
.search-window .tt-menu,
.search-window .tt-dropdown-menu,
.search-window .autocomplete-results,
.search-window [class*="search-result"],
.search-window [class*="search-whisper"],
.search-window [class*="autocomplete"] {
margin-top: 8px !important;
border: 1px solid var(--oxy-border-soft) !important;
border-radius: var(--oxy-radius) !important;
background: #fff !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .07) !important;
overflow: hidden !important;
}
/* Vnorene wrappery uz dalsi ramecek nedostanou. */
.search-window [class*="search-result"] [class*="search-result"],
.search-window [class*="search-result"] [class*="search-whisper"],
.search-window [class*="search-result"] [class*="autocomplete"],
.search-window [class*="search-whisper"] [class*="search-result"],
.search-window [class*="search-whisper"] [class*="search-whisper"],
.search-window [class*="search-whisper"] [class*="autocomplete"],
.search-window [class*="autocomplete"] [class*="search-result"],
.search-window [class*="autocomplete"] [class*="search-whisper"],
.search-window [class*="autocomplete"] [class*="autocomplete"],
.search-window .search-results ul,
.search-window .search-suggest ul,
.search-window .search-whisper ul,
.search-window [class*="search-result"] ul,
.search-window [class*="search-whisper"] ul,
.search-window [class*="autocomplete"] ul {
margin-top: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Produktove radky. */
.search-window .search-results li:has(img),
.search-window .search-suggest li:has(img),
.search-window .search-whisper li:has(img),
.search-window .ui-menu-item:has(img),
.search-window .tt-suggestion:has(img),
.search-window [class*="search-result"] li:has(img),
.search-window [class*="autocomplete"] li:has(img),
.search-window .search-results > a:has(img),
.search-window .search-suggest > a:has(img),
.search-window .search-whisper > a:has(img),
.search-window [class*="search-result"] > a:has(img),
.search-window [class*="autocomplete"] > a:has(img) {
position: relative !important;
min-height: 64px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: #fff !important;
transition: background-color .18s ease !important;
}
/* Jemne oddeleni produktu, ne tabulkova cara pres celou sirku. */
.search-window .search-results li:has(img)::after,
.search-window .search-suggest li:has(img)::after,
.search-window .search-whisper li:has(img)::after,
.search-window .ui-menu-item:has(img)::after,
.search-window [class*="search-result"] li:has(img)::after,
.search-window [class*="autocomplete"] li:has(img)::after,
.search-window .search-results > a:has(img)::after,
.search-window .search-suggest > a:has(img)::after,
.search-window .search-whisper > a:has(img)::after,
.search-window [class*="search-result"] > a:has(img)::after,
.search-window [class*="autocomplete"] > a:has(img)::after {
content: "" !important;
position: absolute !important;
left: 70px !important;
right: 14px !important;
bottom: 0 !important;
height: 1px !important;
background: var(--oxy-separator) !important;
pointer-events: none !important;
}
.search-window .search-results img,
.search-window .search-suggest img,
.search-window .search-whisper img,
.search-window .ui-autocomplete img,
.search-window .ui-menu img,
.search-window .tt-suggestion img,
.search-window [class*="search-result"] img,
.search-window [class*="autocomplete"] img {
border: 0 !important;
border-radius: var(--oxy-radius) !important;
outline: 0 !important;
box-shadow: none !important;
background: #fafafa !important;
}
/* Horni navrhy kategorii. */
.search-window .search-results li:not(:has(img)):not(:last-child),
.search-window .search-suggest li:not(:has(img)):not(:last-child),
.search-window .search-whisper li:not(:has(img)):not(:last-child),
.search-window .ui-menu-item:not(:has(img)):not(:last-child),
.search-window [class*="search-result"] li:not(:has(img)):not(:last-child),
.search-window [class*="autocomplete"] li:not(:has(img)):not(:last-child) {
min-height: 34px !important;
border: 0 !important;
border-bottom: 1px solid #f7e6ee !important;
background: #fff8fb !important;
box-shadow: none !important;
}
.search-window .search-results li:not(:has(img)):not(:last-child) > a,
.search-window .search-suggest li:not(:has(img)):not(:last-child) > a,
.search-window .search-whisper li:not(:has(img)):not(:last-child) > a,
.search-window .ui-menu-item:not(:has(img)):not(:last-child) > a,
.search-window [class*="search-result"] li:not(:has(img)):not(:last-child) > a,
.search-window [class*="autocomplete"] li:not(:has(img)):not(:last-child) > a {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Zobrazit vsechny vysledky. */
.search-window .search-results li:last-child:not(:has(img)),
.search-window .search-suggest li:last-child:not(:has(img)),
.search-window .search-whisper li:last-child:not(:has(img)),
.search-window .ui-menu-item:last-child:not(:has(img)),
.search-window [class*="search-result"] li:last-child:not(:has(img)),
.search-window [class*="autocomplete"] li:last-child:not(:has(img)) {
background: var(--oxy-pink-soft) !important;
border: 0 !important;
border-top: 1px solid #f3d8e4 !important;
box-shadow: none !important;
}
.search-window .search-results li:last-child:not(:has(img)) > a,
.search-window .search-suggest li:last-child:not(:has(img)) > a,
.search-window .search-whisper li:last-child:not(:has(img)) > a,
.search-window .ui-menu-item:last-child:not(:has(img)) > a,
.search-window [class*="search-result"] li:last-child:not(:has(img)) > a,
.search-window [class*="autocomplete"] li:last-child:not(:has(img)) > a {
display: flex !important;
align-items: center !important;
min-height: 42px !important;
padding: 10px 14px !important;
border: 0 !important;
color: var(--oxy-pink) !important;
font-weight: 600 !important;
box-shadow: none !important;
}
@media (hover:hover) {
.search-window .search-results li:has(img):hover,
.search-window .search-suggest li:has(img):hover,
.search-window .search-whisper li:has(img):hover,
.search-window .ui-menu-item:has(img):hover,
.search-window .tt-suggestion:has(img):hover,
.search-window [class*="search-result"] li:has(img):hover,
.search-window [class*="autocomplete"] li:has(img):hover,
.search-window .search-results > a:has(img):hover,
.search-window .search-suggest > a:has(img):hover,
.search-window .search-whisper > a:has(img):hover,
.search-window [class*="search-result"] > a:has(img):hover,
.search-window [class*="autocomplete"] > a:has(img):hover {
background: var(--oxy-pink-soft-2) !important;
}
}
/* ---------- Rozbalovaci desktop menu ---------- */
@media (min-width: 992px) {
.submenu-visible .navigation-in > ul > li.ext.exp > ul {
background: #fff !important;
border: 1px solid rgba(222, 51, 127, .10) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .07) !important;
overflow: hidden;
}
}
/* ---------- Mobil ---------- */
@media (max-width: 767px) {
.search-window form input[type="search"],
.search-window form input[type="text"] {
border-radius: var(--oxy-radius) 0 0 var(--oxy-radius) !important;
}
.search-window form button[type="submit"],
.search-window form input[type="submit"],
.search-window form .btn {
border-radius: 0 var(--oxy-radius) var(--oxy-radius) 0 !important;
}
.search-window .toggle-window-arr:before {
font-size: 26px !important;
}
.search-window form button[type="submit"]:after {
font-size: 34px !important;
}
.search-window .slick-arrow:before,
.search-window .owl-prev:before,
.search-window .owl-next:before,
.search-window .next:before,
.search-window .prev:before,
.search-window .previous:before {
font-size: 30px !important;
}
.search-window .search-results,
.search-window .search-results-window,
.search-window .search-suggest,
.search-window .search-suggest-results,
.search-window .search-whisper,
.search-window .search-whisperer,
.search-window .search-whisper-results,
.search-window .ui-autocomplete,
.search-window .ui-menu,
.search-window .tt-menu,
.search-window .tt-dropdown-menu,
.search-window .autocomplete-results,
.search-window [class*="search-result"],
.search-window [class*="search-whisper"],
.search-window [class*="autocomplete"] {
margin-top: 6px !important;
border-radius: var(--oxy-radius) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .06) !important;
}
.search-window .search-results li:has(img)::after,
.search-window .search-suggest li:has(img)::after,
.search-window .search-whisper li:has(img)::after,
.search-window .ui-menu-item:has(img)::after,
.search-window [class*="search-result"] li:has(img)::after,
.search-window [class*="autocomplete"] li:has(img)::after,
.search-window .search-results > a:has(img)::after,
.search-window .search-suggest > a:has(img)::after,
.search-window .search-whisper > a:has(img)::after,
.search-window [class*="search-result"] > a:has(img)::after,
.search-window [class*="autocomplete"] > a:has(img)::after {
left: 60px !important;
right: 10px !important;
}
}
/* ==================================================
OXYBAG - PRAZDNY KOSIK v15
Sjednoceni s fullscreen vyhledavanim.
Aktivuje se pouze kdyz JS oznaci #cart-widget jako .oxy-cart-empty.
Standardni radius: 10 px.
================================================== */
#cart-widget.oxy-cart-empty {
--oxy-pink: #de337f;
--oxy-pink-dark: #c92870;
--oxy-pink-soft: #fff3f8;
--oxy-border: #dedede;
--oxy-radius: 10px;
}
/* ---------- Zpet do obchodu: stejny styl jako ve vyhledavani ---------- */
#cart-widget.oxy-cart-empty .toggle-window-arr {
display: inline-flex !important;
align-items: center;
gap: 8px;
border-radius: var(--oxy-radius) !important;
background: transparent !important;
color: #333 !important;
box-shadow: none !important;
transition: color .2s ease, background-color .2s ease;
}
#cart-widget.oxy-cart-empty .toggle-window-arr:before {
content: "<" !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
border: 0 !important;
font-family: inherit !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: var(--oxy-pink) !important;
position: relative !important;
top: 1px !important;
transform: none !important;
}
#cart-widget.oxy-cart-empty .toggle-window-arr:after {
display: none !important;
content: none !important;
}
#cart-widget.oxy-cart-empty .toggle-window-arr:hover,
#cart-widget.oxy-cart-empty .toggle-window-arr:focus-visible {
background: var(--oxy-pink-soft) !important;
color: var(--oxy-pink) !important;
}
/* ---------- Vyhledavani v prazdnem kosiku ---------- */
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="search"],
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="text"] {
border-color: var(--oxy-border) !important;
border-radius: var(--oxy-radius) 0 0 var(--oxy-radius) !important;
box-shadow: none !important;
outline: none !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="search"]:focus,
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="text"]:focus {
border-color: var(--oxy-pink) !important;
box-shadow: 0 0 0 3px rgba(222, 51, 127, .10) !important;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"],
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="submit"] {
border-color: var(--oxy-pink) !important;
border-radius: 0 var(--oxy-radius) var(--oxy-radius) 0 !important;
background-color: var(--oxy-pink) !important;
color: #fff !important;
box-shadow: none !important;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"]:hover,
#cart-widget.oxy-cart-empty .oxy-cart-search-form input[type="submit"]:hover {
border-color: var(--oxy-pink-dark) !important;
background-color: var(--oxy-pink-dark) !important;
box-shadow: 0 5px 14px rgba(222, 51, 127, .16) !important;
}
/* Vlastni jednoducha sipka > jako v hlavnim fullscreen vyhledavani. */
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"] {
position: relative;
font-size: 0 !important;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"]:before {
display: none !important;
content: none !important;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"]:after {
content: ">" !important;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit !important;
font-size: 42px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #fff !important;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"] > * {
opacity: 0 !important;
}
/* ---------- Odkazy: jen barevne sjednoceni, bez dalsich boxu ---------- */
#cart-widget.oxy-cart-empty .oxy-cart-offer a,
#cart-widget.oxy-cart-empty .oxy-cart-help a {
transition: color .18s ease;
}
#cart-widget.oxy-cart-empty .oxy-cart-offer a:hover,
#cart-widget.oxy-cart-empty .oxy-cart-offer a:focus-visible,
#cart-widget.oxy-cart-empty .oxy-cart-help a:hover,
#cart-widget.oxy-cart-empty .oxy-cart-help a:focus-visible {
color: var(--oxy-pink) !important;
}
/* Jemny ruzovy detail u odrazek nabidky, bez zmeny struktury. */
#cart-widget.oxy-cart-empty .oxy-cart-offer li::marker {
color: var(--oxy-pink);
}
@media (max-width: 767px) {
#cart-widget.oxy-cart-empty .toggle-window-arr:before {
font-size: 26px !important;
}
#cart-widget.oxy-cart-empty .oxy-cart-search-form button[type="submit"]:after {
font-size: 34px !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v16
Sjednoceni oddelovaci sipky se stylem < / > pouzivanym na webu.
================================================== */
.breadcrumbs > span > a:after {
content: ">" !important;
display: inline-block !important;
position: relative !important;
top: 1px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 11px !important;
border: 0 !important;
background: transparent !important;
font-family: inherit !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #de337f !important;
transform: none !important;
}
@media (max-width: 767px) {
.breadcrumbs > span > a:after {
font-size: 17px !important;
padding-left: 9px !important;
padding-right: 9px !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v17
Jemnejsi a citelnejsi separator v nasem stylu.
================================================== */
.breadcrumbs > span > a:after {
content: ">" !important;
display: inline-block !important;
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 12px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-family: inherit !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 400 !important;
color: #111 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
@media (max-width: 767px) {
.breadcrumbs > span > a:after {
margin-left: 10px !important;
margin-right: 10px !important;
font-size: 15px !important;
color: #111 !important;
transform: translateY(-1px) !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v18
Opticke vycentrovani separatoru mezi texty.
================================================== */
.breadcrumbs > span > a:after {
margin-left: 16px !important;
margin-right: 10px !important;
vertical-align: baseline !important;
transform: translateY(0) !important;
}
@media (max-width: 767px) {
.breadcrumbs > span > a:after {
margin-left: 14px !important;
margin-right: 8px !important;
vertical-align: baseline !important;
transform: translateY(0) !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v19
Separator opticky presne mezi sousednimi texty.
================================================== */
.breadcrumbs > span > a:after {
margin-left: 13px !important;
margin-right: 13px !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 400 !important;
color: #111 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
@media (max-width: 767px) {
.breadcrumbs > span > a:after {
margin-left: 12px !important;
margin-right: 12px !important;
font-size: 15px !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v20
Opticky posun separatoru doprava do stredu mezery.
Zachovava stejne rozestupy textu, posouva jen samotny znak >.
================================================== */
.breadcrumbs > span > a:after {
margin-left: 13px !important;
margin-right: 13px !important;
transform: translate(5px, -1px) !important;
}
@media (max-width: 767px) {
.breadcrumbs > span > a:after {
margin-left: 12px !important;
margin-right: 12px !important;
transform: translate(5px, -1px) !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v21
Mobil: kompaktni rozestupy a separator patri k nasledujici polozce,
aby znak > nezustaval osamoceny na konci radku.
Desktop v20 zustava beze zmeny.
================================================== */
@media (max-width: 767px) {
.breadcrumbs {
column-gap: 0 !important;
row-gap: 4px !important;
}
/* Na mobilu vypneme desktopovy separator za odkazem. */
.breadcrumbs > span > a:after {
display: none !important;
content: none !important;
}
/* Kazdy drobecek se zalomi jako jeden celek. */
.breadcrumbs > span {
display: inline-flex !important;
align-items: center !important;
min-width: 0 !important;
white-space: nowrap;
}
/* Separator patri k nasledujicimu drobecku, takze nezustane na konci radku. */
.breadcrumbs > span + span:before {
content: ">" !important;
display: inline-block !important;
flex: 0 0 auto !important;
margin: 0 8px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-family: inherit !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 400 !important;
color: #111 !important;
vertical-align: middle !important;
transform: translateY(-1px) !important;
}
}
/* ==================================================
OXYBAG - BREADCRUMBS v22
Mobil: vertikalni dorovnani separatoru k textu.
================================================== */
@media (max-width: 767px) {
.breadcrumbs > span + span:before {
transform: translateY(1px) !important;
}
}
/* ==================================================
OXYBAG - NOVY DESKTOP HEADER PODLE WIREFRAME V8
NATIVE SEARCH WINDOW / CISTA VERZE
--------------------------------------------------
Zasady:
- pouze desktop >= 992 px
- mobil/tablet zustava puvodni
- #navigation se nepresouva
- .navigation-buttons se nepresouvaji
- puvodni .search-window se presouva CELA, aby zustal
zachovan nativni Shoptet autocomplete i budouci Luigi's Box
- z puvodniho fullscreen search okna se v headeru zobrazi jen
formular + dynamicky search-whisperer
================================================== */
@media (min-width: 992px) {
#header.oxy-wireframe-v8-active {
position: relative !important;
height: 124px !important;
min-height: 124px !important;
background: #fff !important;
box-shadow: none !important;
overflow: visible !important;
z-index: 99 !important;
}
/* ---------- 1. radek ---------- */
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top {
position: relative !important;
display: block !important;
width: 100% !important;
height: 76px !important;
min-height: 76px !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
border-bottom: 1px solid #f2f2f2 !important;
box-sizing: border-box !important;
overflow: visible !important;
z-index: 2000 !important;
}
.oxy-wireframe-v8-top__inner {
position: relative !important;
display: flex !important;
align-items: center !important;
width: calc(100% - 40px) !important;
max-width: 1380px !important;
height: 76px !important;
min-height: 76px !important;
margin: 0 auto !important;
padding: 0 370px 0 205px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* ---------- Logo: puvodni Shoptet node, pouze pozicovani ---------- */
#header.oxy-wireframe-v8-active .site-name {
position: absolute !important;
top: 12px !important;
left: max(20px, calc((100% - 1380px) / 2)) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 165px !important;
height: 52px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2300 !important;
}
#header.oxy-wireframe-v8-active .site-name a,
#header.oxy-wireframe-v8-active .site-name img {
display: block !important;
}
#header.oxy-wireframe-v8-active .site-name img {
width: auto !important;
max-width: 160px !important;
max-height: 52px !important;
object-fit: contain !important;
}
/* ---------- Search host ---------- */
.oxy-wireframe-v8-search-host {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 560px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
z-index: 2600 !important;
}
/*
* TOTO JE PUvodni Shoptet .search-window. Zachovavame stejny DOM,
* jen fullscreen okno zmensime na inline search v headeru.
*/
.search-window.oxy-wireframe-v8-inline-search-window {
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
width: 100% !important;
max-width: none !important;
height: 44px !important;
min-height: 44px !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
pointer-events: auto !important;
z-index: 2600 !important;
}
.search-window.oxy-wireframe-v8-inline-search-window > :not(.search-window-in) {
display: none !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
width: 100% !important;
max-width: none !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in > :not(.container) {
display: none !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in > .container {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in > .container > :not(.search) {
display: none !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .search {
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: visible !important;
}
/* Skryjeme pouze staticky obsah fullscreen okna (Doporucujeme atd.). */
.search-window.oxy-wireframe-v8-inline-search-window .search > :not(form) {
display: none !important;
}
.search-window.oxy-wireframe-v8-inline-search-window #formSearchForm,
.search-window.oxy-wireframe-v8-inline-search-window .search-form {
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.search-window.oxy-wireframe-v8-inline-search-window fieldset {
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: visible !important;
}
/* ---------- Pole podle wireframu ---------- */
.search-window.oxy-wireframe-v8-inline-search-window .query-input,
.search-window.oxy-wireframe-v8-inline-search-window input[type="search"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="text"] {
position: relative !important;
display: block !important;
width: 100% !important;
height: 44px !important;
margin: 0 !important;
padding: 0 50px 0 16px !important;
border: 1px solid #d9d9d9 !important;
border-radius: 12px !important;
background: #fff !important;
color: #222 !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 44px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .query-input::placeholder,
.search-window.oxy-wireframe-v8-inline-search-window input::placeholder {
color: #929292 !important;
opacity: 1 !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .query-input:focus,
.search-window.oxy-wireframe-v8-inline-search-window input[type="search"]:focus,
.search-window.oxy-wireframe-v8-inline-search-window input[type="text"]:focus {
border-color: #de337f !important;
box-shadow: 0 0 0 3px rgba(222, 51, 127, .10) !important;
}
/* ---------- Lupa uvnitr pole ---------- */
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window form .btn {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
display: block !important;
width: 48px !important;
min-width: 48px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 12px 12px 0 !important;
background: transparent !important;
color: #222 !important;
box-shadow: none !important;
font-size: 0 !important;
cursor: pointer !important;
z-index: 4 !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]::before,
.search-window.oxy-wireframe-v8-inline-search-window form .btn::before {
content: "" !important;
position: absolute !important;
left: 14px !important;
top: 12px !important;
display: block !important;
width: 17px !important;
height: 17px !important;
border: 1.7px solid currentColor !important;
border-radius: 50% !important;
background: transparent !important;
box-sizing: border-box !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]::after,
.search-window.oxy-wireframe-v8-inline-search-window form .btn::after {
content: "" !important;
position: absolute !important;
left: 29px !important;
top: 28px !important;
display: block !important;
width: 7px !important;
height: 1.7px !important;
background: currentColor !important;
border: 0 !important;
border-radius: 2px !important;
transform: rotate(45deg) !important;
transform-origin: left center !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"] > *,
.search-window.oxy-wireframe-v8-inline-search-window form .btn > * {
opacity: 0 !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]:hover,
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]:focus-visible,
.search-window.oxy-wireframe-v8-inline-search-window form .btn:hover,
.search-window.oxy-wireframe-v8-inline-search-window form .btn:focus-visible {
color: #de337f !important;
background: transparent !important;
}
/* ---------- Nativni naseptavac ----------
DULEZITE: stylujeme jen samotny koren .search-whisperer.
V7 chybne absolutne pozicovala i vnitrni search-result elementy. */
.search-window.oxy-wireframe-v8-inline-search-window .search-whisperer {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: none !important;
max-height: min(460px, calc(100vh - 150px)) !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #f1dbe5 !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .12) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 6000 !important;
box-sizing: border-box !important;
}
/* ---------- Kontakt ---------- */
.oxy-wireframe-v8-contact {
position: absolute !important;
top: 12px !important;
right: 110px !important;
display: grid !important;
grid-template-columns: 44px auto !important;
align-items: center !important;
column-gap: 9px !important;
width: 230px !important;
min-height: 52px !important;
color: #222 !important;
text-decoration: none !important;
z-index: 2300 !important;
}
.oxy-wireframe-v8-contact__avatar {
display: block !important;
width: 44px !important;
height: 44px !important;
border: 1px solid #f0d4e0 !important;
border-radius: 50% !important;
background: #fff6f9 !important;
object-fit: cover !important;
box-sizing: border-box !important;
}
.oxy-wireframe-v8-contact__text {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
}
.oxy-wireframe-v8-contact__label {
color: #888 !important;
font-size: 11px !important;
line-height: 1.15 !important;
font-weight: 400 !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact__phone {
color: #202020 !important;
font-size: 13px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact__hours {
margin-top: 1px !important;
color: #999 !important;
font-size: 10px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact:hover .oxy-wireframe-v8-contact__phone {
color: #de337f !important;
}
/* ---------- Ucet + kosik: puvodni Shoptet ovladace ---------- */
#header.oxy-wireframe-v8-active .navigation-buttons {
position: absolute !important;
top: 16px !important;
right: max(20px, calc((100% - 1380px) / 2)) !important;
left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
overflow: visible !important;
z-index: 2400 !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons [data-target="search"],
#header.oxy-wireframe-v8-active .navigation-buttons .search-toggle {
display: none !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a,
#header.oxy-wireframe-v8-active .navigation-buttons > button {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------- 2. radek: puvodni Shoptet menu ---------- */
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 48px !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#header.oxy-wireframe-v8-active #navigation {
position: relative !important;
display: block !important;
width: calc(100% - 40px) !important;
max-width: 1380px !important;
height: 48px !important;
min-height: 48px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
z-index: 1800 !important;
}
#header.oxy-wireframe-v8-active .navigation-in {
width: 100% !important;
max-width: none !important;
height: 48px !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
min-height: 48px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
min-height: 48px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#header.oxy-wireframe-v8-active {
height: 120px !important;
min-height: 120px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top,
.oxy-wireframe-v8-top__inner {
height: 72px !important;
min-height: 72px !important;
}
.oxy-wireframe-v8-top__inner {
padding-left: 180px !important;
padding-right: 335px !important;
}
.oxy-wireframe-v8-search-host {
max-width: 500px !important;
}
.oxy-wireframe-v8-contact {
right: 105px !important;
width: 205px !important;
}
#header.oxy-wireframe-v8-active .site-name {
width: 150px !important;
}
#header.oxy-wireframe-v8-active .site-name img {
max-width: 145px !important;
}
}
/* MOBIL/TABLET: zadny novy layout. Vse zustava v puvodnim stabilnim stavu. */
@media (max-width: 991px) {
.oxy-wireframe-v8-top {
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V9
SPOLEHLIVA LUPA VE VYHLEDAVANI
--------------------------------------------------
Pseudo-elementy na input[type=submit] nejsou spolehlive.
Lupu proto kreslime jako SVG na fieldsetu.
Pouze desktop; mobil/tablet beze zmeny.
================================================== */
@media (min-width: 992px) {
.search-window.oxy-wireframe-v8-inline-search-window fieldset::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: 15px !important;
width: 20px !important;
height: 20px !important;
transform: translateY(-50%) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
pointer-events: none !important;
z-index: 8 !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window form .btn {
width: 50px !important;
min-width: 50px !important;
opacity: 1 !important;
background: transparent !important;
}
/* Vypneme predchozi kresleni lupy na tlacitku, aby nebyla dvojita. */
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]::before,
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"]::after,
.search-window.oxy-wireframe-v8-inline-search-window form .btn::before,
.search-window.oxy-wireframe-v8-inline-search-window form .btn::after {
content: none !important;
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V10
FINALNI ROZLOZENI DESKTOP HEADERU PODLE NAVRHU
--------------------------------------------------
- pouze desktop >= 992 px
- mobil/tablet se vubec nemeni
- 1. radek ma vlastni vysku a dostatek prostoru
- ruzova linka oddeluje horni radek od menu
- kontakt a ikony se uz neprekryvaji
- menu zacina az pod ruzovou linkou
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active {
height: 132px !important;
min-height: 132px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top {
height: 82px !important;
min-height: 82px !important;
border-bottom: 0 !important;
}
.oxy-wireframe-v8-top__inner {
height: 82px !important;
min-height: 82px !important;
padding: 0 420px 0 205px !important;
}
/* Ruzova oddelovaci linka pres stejnou obsahovou osu jako header. */
.oxy-wireframe-v8-top__inner::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 1px !important;
background: #de337f !important;
pointer-events: none !important;
z-index: 1 !important;
}
#header.oxy-wireframe-v8-active .site-name {
top: 15px !important;
height: 50px !important;
}
#header.oxy-wireframe-v8-active .site-name img {
max-height: 50px !important;
}
.oxy-wireframe-v8-search-host {
max-width: 520px !important;
height: 42px !important;
min-height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window,
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in,
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in > .container,
.search-window.oxy-wireframe-v8-inline-search-window .search,
.search-window.oxy-wireframe-v8-inline-search-window #formSearchForm,
.search-window.oxy-wireframe-v8-inline-search-window .search-form,
.search-window.oxy-wireframe-v8-inline-search-window fieldset {
height: 42px !important;
min-height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .query-input,
.search-window.oxy-wireframe-v8-inline-search-window input[type="search"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="text"] {
height: 42px !important;
line-height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window form .btn {
height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window fieldset::after {
right: 14px !important;
width: 19px !important;
height: 19px !important;
background-size: 19px 19px !important;
}
/*
* Akce jsou uplne vpravo.
* Kontakt je posunuty vlevo o sirku akci + mezeru,
* takze uz se s ikonami nikdy neprekryva.
*/
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 19px !important;
right: max(20px, calc((100% - 1380px) / 2)) !important;
width: 100px !important;
height: 44px !important;
}
.oxy-wireframe-v8-contact {
top: 15px !important;
right: calc(max(20px, calc((100% - 1380px) / 2)) + 120px) !important;
width: 220px !important;
min-height: 50px !important;
}
.oxy-wireframe-v8-contact__avatar {
width: 42px !important;
height: 42px !important;
}
/* 2. radek - menu */
#header.oxy-wireframe-v8-active .container.navigation-wrapper,
#header.oxy-wireframe-v8-active #navigation,
#header.oxy-wireframe-v8-active .navigation-in {
height: 50px !important;
min-height: 50px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
min-height: 50px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
min-height: 50px !important;
}
}
/* Mensi desktop: porad dva oddelene radky, jen kompaktnejsi rozmery. */
@media (min-width: 992px) and (max-width: 1199px) {
#header.oxy-wireframe-v8-active {
height: 126px !important;
min-height: 126px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top {
height: 78px !important;
min-height: 78px !important;
border-bottom: 0 !important;
}
.oxy-wireframe-v8-top__inner {
height: 78px !important;
min-height: 78px !important;
padding: 0 330px 0 165px !important;
}
.oxy-wireframe-v8-top__inner::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 1px !important;
background: #de337f !important;
pointer-events: none !important;
}
#header.oxy-wireframe-v8-active .site-name {
top: 14px !important;
width: 140px !important;
height: 48px !important;
}
#header.oxy-wireframe-v8-active .site-name img {
max-width: 138px !important;
max-height: 48px !important;
}
.oxy-wireframe-v8-search-host {
max-width: 440px !important;
height: 42px !important;
min-height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window,
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in,
.search-window.oxy-wireframe-v8-inline-search-window .search-window-in > .container,
.search-window.oxy-wireframe-v8-inline-search-window .search,
.search-window.oxy-wireframe-v8-inline-search-window #formSearchForm,
.search-window.oxy-wireframe-v8-inline-search-window .search-form,
.search-window.oxy-wireframe-v8-inline-search-window fieldset,
.search-window.oxy-wireframe-v8-inline-search-window .query-input,
.search-window.oxy-wireframe-v8-inline-search-window input[type="search"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="text"],
.search-window.oxy-wireframe-v8-inline-search-window button[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="submit"],
.search-window.oxy-wireframe-v8-inline-search-window form .btn {
height: 42px !important;
min-height: 42px !important;
}
.search-window.oxy-wireframe-v8-inline-search-window .query-input,
.search-window.oxy-wireframe-v8-inline-search-window input[type="search"],
.search-window.oxy-wireframe-v8-inline-search-window input[type="text"] {
line-height: 42px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 17px !important;
right: 20px !important;
width: 92px !important;
gap: 4px !important;
}
.oxy-wireframe-v8-contact {
top: 14px !important;
right: 128px !important;
width: 185px !important;
min-height: 48px !important;
}
.oxy-wireframe-v8-contact__avatar {
width: 40px !important;
height: 40px !important;
}
.oxy-wireframe-v8-contact__label {
font-size: 10px !important;
}
.oxy-wireframe-v8-contact__phone {
font-size: 12px !important;
}
#header.oxy-wireframe-v8-active .container.navigation-wrapper,
#header.oxy-wireframe-v8-active #navigation,
#header.oxy-wireframe-v8-active .navigation-in {
height: 48px !important;
min-height: 48px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V12
SAFE MENU ROW FIX
--------------------------------------------------
Oprava bez zasahu do Shoptet menu-helper logiky:
- NEMENIME display top-level
- navigation-wrapper zustava position: static
- menu dostane jen vlastni vysku
- top-level odkazy se vertikalne vycentruji
- oddelovaci linka je jemne seda
- pouze desktop >= 992 px
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active {
height: 140px !important;
min-height: 140px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top,
.oxy-wireframe-v8-top__inner {
height: 82px !important;
min-height: 82px !important;
}
.oxy-wireframe-v8-top__inner::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 1px !important;
background: #e2e6eb !important;
pointer-events: none !important;
z-index: 1 !important;
}
/*
* DULEZITE:
* position: static zachovava pozicovani loga vuci #header.
* V11 bylo position: relative a logo se proto propadlo do menu radku.
*/
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
position: static !important;
width: 100% !important;
max-width: none !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#header.oxy-wireframe-v8-active #navigation {
position: relative !important;
width: calc(100% - 40px) !important;
max-width: 1380px !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
}
#header.oxy-wireframe-v8-active .navigation-in {
width: 100% !important;
max-width: none !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
height: 58px !important;
min-height: 58px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* Sahame pouze na odkazy, NE na .
* Shoptet tak muze dal sam skryvat prebytecne polozky do "Vice".
*/
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
display: flex !important;
align-items: center !important;
height: 58px !important;
min-height: 58px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#header.oxy-wireframe-v8-active {
height: 134px !important;
min-height: 134px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top,
.oxy-wireframe-v8-top__inner {
height: 78px !important;
min-height: 78px !important;
}
.oxy-wireframe-v8-top__inner::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 1px !important;
background: #e2e6eb !important;
pointer-events: none !important;
z-index: 1 !important;
}
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
position: static !important;
width: 100% !important;
max-width: none !important;
height: 56px !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#header.oxy-wireframe-v8-active #navigation,
#header.oxy-wireframe-v8-active .navigation-in {
height: 56px !important;
min-height: 56px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
height: 56px !important;
min-height: 56px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
display: flex !important;
align-items: center !important;
height: 56px !important;
min-height: 56px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V13
FINE TUNING DLE PRIPOMINEK
- bez deliaci cary
- menu text o trochu niz
- podpora + ucet + kosik vertikalne na stred se search
- mobil beze zmeny
================================================== */
@media (min-width: 1200px) {
/* vypnout carku pod hornim radkem */
.oxy-wireframe-v8-top__inner::after {
content: none !important;
display: none !important;
}
/* search / kontakt / login-kosik na jednu osu */
.oxy-wireframe-v8-search-host {
top: 19px !important;
}
.oxy-wireframe-v8-contact {
top: 15px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 19px !important;
}
/* menu opticky trochu niz v jeho radku */
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
position: relative !important;
top: 4px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-top__inner::after {
content: none !important;
display: none !important;
}
.oxy-wireframe-v8-search-host {
top: 17px !important;
}
.oxy-wireframe-v8-contact {
top: 13px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 17px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
position: relative !important;
top: 4px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V14
SROVNANI HORNIHO RADKU + MENSI MEZERA K HERO
--------------------------------------------------
- search je znovu prirozene vycentrovany flexem
- poradce, ucet a kosik sedi na stejne vertikalni ose
- menu zustava ve stavu z V13
- carousel na homepage je bliz menu
- mobil/tablet se nemeni
================================================== */
@media (min-width: 1200px) {
/*
* V13 posouvala search pres top:19px, ale search-host je relative
* uvnitr flex radku s align-items:center. Tedy se posunul POD osu,
* zatimco poradce a ikony byly absolutne centrovane.
* Nyni search nechavame na prirozene stredove ose.
*/
.oxy-wireframe-v8-search-host {
top: 0 !important;
}
/* Horni radek 82 px: 52px kontakt => (82 - 52) / 2 = 15 px. */
.oxy-wireframe-v8-contact {
top: 15px !important;
}
/* Horni radek 82 px: 44px akce => (82 - 44) / 2 = 19 px. */
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 19px !important;
}
/*
* Homepage hero ma ve 01-HOMEPAGE vlastni margin-top:26px.
* Pro novy dvouradkovy header je to uz zbytecne moc.
* Stahujeme jen DESKTOP homepage, zadny mobilni layout.
*/
body.in-index .banners-row,
body.type-index .banners-row {
margin-top: 12px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-search-host {
top: 0 !important;
}
.oxy-wireframe-v8-contact {
top: 13px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 17px !important;
}
body.in-index .banners-row,
body.type-index .banners-row {
margin-top: 10px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V15
KOMPAKTNEJSI DESKTOP HEADER + PRESNE VYCENTROVANI
--------------------------------------------------
- bez deliaci cary
- mensi vyska horniho radku i menu
- menu ma stejnou vzdalenost textu shora i zdola
- ucet + kosik jsou vytazene nahoru na osu se search/podporou
- homepage carousel je bliz k menu
- mobil/tablet beze zmeny
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active {
height: 124px !important;
min-height: 124px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top,
.oxy-wireframe-v8-top__inner {
height: 72px !important;
min-height: 72px !important;
}
/* Zadna oddelovaci linka. */
.oxy-wireframe-v8-top__inner::after {
content: none !important;
display: none !important;
}
/* Logo / search / poradce v jedne ose. */
#header.oxy-wireframe-v8-active .site-name {
top: 10px !important;
height: 52px !important;
}
.oxy-wireframe-v8-search-host {
top: 0 !important;
}
.oxy-wireframe-v8-contact {
top: 10px !important;
}
/*
* Shoptet ikonky maji vlastni vnitrni vertikalni odsazeni.
* Proto je cely blok posunuty vys nez matematicky stred wrapperu.
*/
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 2px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a,
#header.oxy-wireframe-v8-active .navigation-buttons > button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* Kompaktni samostatny radek menu. */
#header.oxy-wireframe-v8-active .container.navigation-wrapper,
#header.oxy-wireframe-v8-active #navigation,
#header.oxy-wireframe-v8-active .navigation-in {
height: 52px !important;
min-height: 52px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
height: 52px !important;
min-height: 52px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
position: relative !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
height: 52px !important;
min-height: 52px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
/* Homepage hero tesneji pod menu. */
body.in-index .banners-row,
body.type-index .banners-row {
margin-top: 4px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#header.oxy-wireframe-v8-active {
height: 118px !important;
min-height: 118px !important;
}
#header.oxy-wireframe-v8-active > .oxy-wireframe-v8-top,
.oxy-wireframe-v8-top__inner {
height: 68px !important;
min-height: 68px !important;
}
.oxy-wireframe-v8-top__inner::after {
content: none !important;
display: none !important;
}
#header.oxy-wireframe-v8-active .site-name {
top: 8px !important;
height: 52px !important;
}
.oxy-wireframe-v8-search-host {
top: 0 !important;
}
.oxy-wireframe-v8-contact {
top: 8px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a,
#header.oxy-wireframe-v8-active .navigation-buttons > button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
#header.oxy-wireframe-v8-active .container.navigation-wrapper,
#header.oxy-wireframe-v8-active #navigation,
#header.oxy-wireframe-v8-active .navigation-in {
height: 50px !important;
min-height: 50px !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul {
height: 50px !important;
min-height: 50px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li > a {
position: relative !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
height: 50px !important;
min-height: 50px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}
body.in-index .banners-row,
body.type-index .banners-row {
margin-top: 4px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V16
DESKTOP AKCE V OSE + BEZ AUTOMATICKEHO HAMBURGERU
--------------------------------------------------
- ucet + kosik znovu vertikalne na stred horniho radku
- automaticky Shoptet "Vice" / hamburger je na desktopu skryty
- samotne hlavni menu a jeho dropdowny zustavaji funkcni
- mobil/tablet beze zmeny
================================================== */
@media (min-width: 1200px) {
/* Horni radek ma ve V15 72 px, akce maji 44 px => idealni top je 14 px. */
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 14px !important;
}
/*
* Shoptet pri prebytku polozek vytvari desktopovy pomocny hamburger / "Vice".
* Na testovaci verzi ho ted nechceme zobrazovat.
*/
#header.oxy-wireframe-v8-active .navigation-buttons [data-target="navigation"],
#header.oxy-wireframe-v8-active .navigation-buttons [aria-label*="menu" i],
#header.oxy-wireframe-v8-active .navigation-buttons [title*="menu" i] {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
/* Horni radek 68 px, akce 44 px => top 12 px. */
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 12px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons [data-target="navigation"],
#header.oxy-wireframe-v8-active .navigation-buttons [aria-label*="menu" i],
#header.oxy-wireframe-v8-active .navigation-buttons [title*="menu" i] {
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V17
VYRAZNEJSI IKONY PRIHLASENI A KOSIKU
--------------------------------------------------
- pouze desktop / tablet-desktop
- ucet i kosik jsou lehce vetsi a citelnejsi
- mobil beze zmeny
================================================== */
@media (min-width: 992px) {
#header.oxy-wireframe-v8-active .navigation-buttons {
width: 116px !important;
gap: 14px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a,
#header.oxy-wireframe-v8-active .navigation-buttons > button {
flex: 0 0 48px !important;
width: 48px !important;
height: 48px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a::before,
#header.oxy-wireframe-v8-active .navigation-buttons > button::before,
#header.oxy-wireframe-v8-active .navigation-buttons > a i,
#header.oxy-wireframe-v8-active .navigation-buttons > button i,
#header.oxy-wireframe-v8-active .navigation-buttons > a svg,
#header.oxy-wireframe-v8-active .navigation-buttons > button svg,
#header.oxy-wireframe-v8-active .navigation-buttons > a [class*="icon"],
#header.oxy-wireframe-v8-active .navigation-buttons > button [class*="icon"] {
font-size: 24px !important;
width: 24px !important;
height: 24px !important;
color: #1f1f1f !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a svg,
#header.oxy-wireframe-v8-active .navigation-buttons > button svg {
min-width: 24px !important;
min-height: 24px !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a:hover::before,
#header.oxy-wireframe-v8-active .navigation-buttons > button:hover::before,
#header.oxy-wireframe-v8-active .navigation-buttons > a:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > button:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > a:hover svg,
#header.oxy-wireframe-v8-active .navigation-buttons > button:hover svg,
#header.oxy-wireframe-v8-active .navigation-buttons > a:hover [class*="icon"],
#header.oxy-wireframe-v8-active .navigation-buttons > button:hover [class*="icon"] {
color: #de337f !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V18
AKCE PRESNE NA OSE + OBNOVENY NATIVNI "VICE"
--------------------------------------------------
- zvetsene ikony zustavaji
- ucet + kosik jsou matematicky vycentrovane s vyhledavanim a podporou
- horní hamburger zustava schovany
- nativni Shoptet menu-helper / "Vice" uz NENI blokovan
- pokud se nova hlavni kategorie nevejde, Shoptet ji muze dat pod "Vice"
- mobil beze zmeny
================================================== */
@media (min-width: 1200px) {
/* Horni radek 72 px, tlacitka 48 px => presny stred je 12 px. */
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 12px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
/* Horni radek 68 px, tlacitka 48 px => presny stred je 10 px. */
#header.oxy-wireframe-v8-active .navigation-buttons {
top: 10px !important;
}
}
@media (min-width: 992px) {
/* Ikon-font / pseudo-element uz nesmi mit vlastni posun baseline. */
#header.oxy-wireframe-v8-active .navigation-buttons > a::before,
#header.oxy-wireframe-v8-active .navigation-buttons > button::before {
position: static !important;
inset: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
line-height: 24px !important;
transform: none !important;
vertical-align: middle !important;
}
/*
* Schovavame jen skutecny spoustec hamburger navigace vpravo nahore.
* .menu-helper z hlavniho menu sem zamerne NEPATRI - ten Shoptet potrebuje
* pro textove "Vice" a pro prebytecne hlavni kategorie.
*/
#header.oxy-wireframe-v8-active .navigation-buttons [data-target="navigation"],
#header.oxy-wireframe-v8-active .navigation-buttons [aria-label*="menu" i],
#header.oxy-wireframe-v8-active .navigation-buttons [title*="menu" i] {
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V19
NATIVNI "VICE" ZPET DO RADKU MENU
--------------------------------------------------
Problem ve V18 nebyl v samotnem menu-helperu, ale v tom,
ze navigation-wrapper byl zmenen na block. Shoptet ma
#navigation a .menu-helper jako sourozence a pocita s tim,
ze sdileji jeden radek.
V19 proto:
- vraci navigation-wrapper na flex
- #navigation zabere dostupne misto
- nativni .menu-helper / "Vice" zustane na konci radku
- jeho vlastni dropdown a Shoptet logiku neprepisujeme
- mobil/tablet se nemeni
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
position: static !important;
display: flex !important;
align-items: stretch !important;
width: calc(100% - 80px) !important;
max-width: 1380px !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
background: #fff !important;
box-sizing: border-box !important;
}
#header.oxy-wireframe-v8-active #navigation {
position: relative !important;
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#header.oxy-wireframe-v8-active .menu-helper {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 0 0 auto !important;
align-self: stretch !important;
width: auto !important;
min-width: 72px !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 0 0 8px !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
z-index: 1900 !important;
}
#header.oxy-wireframe-v8-active .menu-helper > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 10px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
position: static !important;
display: flex !important;
align-items: stretch !important;
width: calc(100% - 40px) !important;
max-width: 1380px !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
background: #fff !important;
box-sizing: border-box !important;
}
#header.oxy-wireframe-v8-active #navigation {
position: relative !important;
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#header.oxy-wireframe-v8-active .menu-helper {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 0 0 auto !important;
align-self: stretch !important;
width: auto !important;
min-width: 68px !important;
max-width: none !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 0 0 6px !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
z-index: 1900 !important;
}
#header.oxy-wireframe-v8-active .menu-helper > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 8px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V22
ADMIN POLOZKY PRIMO V HLAVNIM MENU NA SIROKEM DESKTOPU
--------------------------------------------------
Z realneho DOMu je potvrzeno, ze Shoptet ponechava polozky
jako "Detske doplnky" a "Poradce" uz v hlavnim menu,
pouze jim pri prepoctu nastavi visibility:hidden a kopii
zobrazi uvnitr .menu-helper / "Vice".
Proto nic v DOMu nepresouvame. Na sirokem desktopu pouze:
- zviditelnime top-level polozky oznacene .splitted
- schovame textove "Vice"
- #navigation muze vyuzit celou sirku radku
Mensi desktop 992-1199 px nechava nativni Shoptet "Vice"
jako bezpecny fallback. Mobil/tablet se nemeni.
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active .container.navigation-wrapper {
display: flex !important;
width: calc(100% - 80px) !important;
max-width: 1380px !important;
}
#header.oxy-wireframe-v8-active #navigation {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* Shoptet uz tyto admin polozky ma v hlavnim UL, jen je skryva. */
#header.oxy-wireframe-v8-active
#navigation .navigation-in > ul > li.splitted:not(.appended-category) {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Na sirokem desktopu je nechceme duplikovat pod "Vice". */
#header.oxy-wireframe-v8-active .menu-helper {
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V23
EMAIL V KONTAKTU V DESKTOP HEADERU
--------------------------------------------------
- telefon a e-mail jsou samostatne klikaci odkazy
- e-mail je mezi telefonem a oteviraci dobou
- blok zustava kompaktni a vycentrovany v hornim radku
- mobil se nemeni
================================================== */
@media (min-width: 992px) {
.oxy-wireframe-v8-contact {
min-height: 56px !important;
}
.oxy-wireframe-v8-contact__phone,
.oxy-wireframe-v8-contact__email {
display: block !important;
width: max-content !important;
max-width: 100% !important;
text-decoration: none !important;
}
.oxy-wireframe-v8-contact__email {
margin-top: 1px !important;
color: #666 !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact__hours {
margin-top: 0 !important;
}
.oxy-wireframe-v8-contact__phone:hover,
.oxy-wireframe-v8-contact__email:hover {
color: #de337f !important;
}
}
@media (min-width: 1200px) {
/* Horni radek 72 px, kontakt 56 px => presny stred je 8 px. */
.oxy-wireframe-v8-contact {
top: 8px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-contact {
top: 7px !important;
min-height: 54px !important;
}
.oxy-wireframe-v8-contact__email {
font-size: 10px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V24
ZVYRAZNENI EMAILU + VICE VZDUCHU V KONTAKTNIM BLOKU
--------------------------------------------------
- e-mail je stejne vyrazny jako telefon
- vice mezer mezi radky, aby blok nebyl "nanahnaný"
- pouze desktop
================================================== */
@media (min-width: 992px) {
.oxy-wireframe-v8-contact {
width: 250px !important;
min-height: 64px !important;
}
.oxy-wireframe-v8-contact__text {
gap: 2px !important;
}
.oxy-wireframe-v8-contact__label {
line-height: 1.2 !important;
}
.oxy-wireframe-v8-contact__phone,
.oxy-wireframe-v8-contact__email {
display: block !important;
width: max-content !important;
max-width: 100% !important;
color: #202020 !important;
font-size: 13px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact__email {
margin-top: 1px !important;
}
.oxy-wireframe-v8-contact__hours {
margin-top: 1px !important;
line-height: 1.2 !important;
}
.oxy-wireframe-v8-contact__phone:hover,
.oxy-wireframe-v8-contact__email:hover {
color: #de337f !important;
}
}
@media (min-width: 1200px) {
.oxy-wireframe-v8-contact {
top: 4px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-contact {
top: 5px !important;
width: 240px !important;
min-height: 62px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V25
KONTAKTNI BLOK: HODINY POD TELEFON + LEPSI KLIKACÍ KOMFORT
--------------------------------------------------
- poradi: label / telefon / hodiny / email
- blok vracen nize, aby nebyl moc nahore u okraje
- vice prostoru okolo kvuli pohodlnejsimu kliknuti
================================================== */
@media (min-width: 992px) {
.oxy-wireframe-v8-contact {
width: 250px !important;
min-height: 66px !important;
}
.oxy-wireframe-v8-contact__text {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 1px !important;
}
.oxy-wireframe-v8-contact__label {
order: 1 !important;
}
.oxy-wireframe-v8-contact__phone {
order: 2 !important;
}
.oxy-wireframe-v8-contact__hours {
order: 3 !important;
margin-top: 0 !important;
color: #999 !important;
font-size: 10px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
.oxy-wireframe-v8-contact__email {
order: 4 !important;
margin-top: 3px !important;
color: #202020 !important;
font-size: 11px !important;
line-height: 1.15 !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
}
@media (min-width: 1200px) {
.oxy-wireframe-v8-contact {
top: 10px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-contact {
top: 10px !important;
width: 240px !important;
min-height: 64px !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V26
HOVER JEN NA KONKRETNI ODKAZ
--------------------------------------------------
- pri hoveru na e-mail se nema zvyraznit telefon
- pri hoveru na telefon se nema zvyraznit e-mail
- rusi se puvodni hover pres cely rodicovsky blok
================================================== */
@media (min-width: 992px) {
.oxy-wireframe-v8-contact:hover .oxy-wireframe-v8-contact__phone,
.oxy-wireframe-v8-contact:hover .oxy-wireframe-v8-contact__email {
color: #202020 !important;
}
.oxy-wireframe-v8-contact__phone:hover,
.oxy-wireframe-v8-contact__phone:focus-visible,
.oxy-wireframe-v8-contact__email:hover,
.oxy-wireframe-v8-contact__email:focus-visible {
color: #de337f !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V27
OPRAVA POCTU POLOZEK U KOSIKU
--------------------------------------------------
V17 zvetsoval vsechny uvnitr navigation-buttons na 24x24 px.
Shoptet ale pouziva uvnitr kosiku jako pocitadlo polozek,
proto se z maleho cisla pri hoveru stal velky cerny kruh.
Tady pocitadlo vracime na male, ciste cislo bez kolecka.
Ikona kosiku si ponechava puvodni hover do ruzova.
================================================== */
@media (min-width: 992px) {
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"] i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"] i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count i {
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #de337f !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700 !important;
transform: none !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"]:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"]:focus-visible i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"]:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"]:focus-visible i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count:focus-visible i {
background: transparent !important;
color: #de337f !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V28
MALY KRUHOVY BADGE POCTU POLOZEK U KOSIKU
--------------------------------------------------
- vraci pocet polozek do maleho krouzku jako na ostrem webu
- krouzek zustava kompaktni a neleze pres ikonu
- hover kosiku meni ikonu, badge zustava citelny
================================================== */
@media (min-width: 992px) {
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"],
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"],
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count {
position: relative !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"] i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"] i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count i {
position: absolute !important;
top: 4px !important;
right: 3px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
min-height: 18px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: #111 !important;
box-shadow: none !important;
color: #fff !important;
font-size: 10px !important;
line-height: 18px !important;
font-weight: 700 !important;
text-align: center !important;
transform: none !important;
z-index: 3 !important;
}
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"]:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > a[data-target="cart"]:focus-visible i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"]:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons > button[data-target="cart"]:focus-visible i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count:hover i,
#header.oxy-wireframe-v8-active .navigation-buttons .cart-count:focus-visible i {
background: #111 !important;
color: #fff !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V32
NAVRAT K PUVODNIMU ROZMISTENI + SKRYTI EMAILU
--------------------------------------------------
- zachovava puvodni umisteni a vzhled kontaktniho bloku
- z hlavicky se pouze odebere e-mail
================================================== */
@media (min-width: 992px) {
.oxy-wireframe-v8-contact__email {
display: none !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V34
VYRAZNEJSI JEMNE VYCENTROVANI KONTAKTU K VYHLEDAVANI
--------------------------------------------------
- kontakt je posunuty o 5 px nahoru oproti puvodnimu stavu
- ostatni rozmisteni zustava beze zmeny
================================================== */
@media (min-width: 1200px) {
.oxy-wireframe-v8-contact {
top: 5px !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.oxy-wireframe-v8-contact {
top: 5px !important;
}
}
/* ==================================================
OXYBAG - HALLOWEEN POLOZKA V HLAVNIM MENU
--------------------------------------------------
- samostatny 10px badge jen kolem nazvu Halloween
- jemny oranžovy podklad + oranžovy obrys
- dyne je generovana pres CSS, takze nezavisi na tom,
jestli Shoptet emoji z nazvu kategorie ponecha
- hover je vyraznejsi, ale bez zasahu do layoutu menu
================================================== */
#header .oxy-halloween-menu-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
box-sizing: border-box !important;
padding: 6px 9px !important;
margin: 0 !important;
border: 1px solid rgba(242, 140, 40, .58) !important;
border-radius: 10px !important;
background: linear-gradient(180deg, rgba(243, 163, 92, .13), rgba(243, 163, 92, .07)) !important;
color: #2b1c27 !important;
line-height: 1.1 !important;
text-decoration: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
0 0 0 0 rgba(242, 140, 40, 0) !important;
transition:
color .18s ease,
background-color .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease !important;
}
#header .oxy-halloween-menu-label::before {
content: "🎃" !important;
display: inline-block !important;
flex: 0 0 auto !important;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 400 !important;
transform: translateY(-.5px) !important;
}
/* Zrusime puvodni ruzove podtrzeni jen u Halloween polozky. */
#header .navigation-in > ul > li.oxy-halloween-menu-item > a > .oxy-halloween-menu-label,
#header .navigation-in > ul > li.oxy-halloween-menu-item.ext.exp > a > .oxy-halloween-menu-label,
#header .menu-helper > ul > li.oxy-halloween-menu-item > a > .oxy-halloween-menu-label {
border-bottom: 1px solid rgba(242, 140, 40, .58) !important;
}
@media (hover: hover) and (pointer: fine) {
#header li.oxy-halloween-menu-item > a:hover .oxy-halloween-menu-label,
#header li.oxy-halloween-menu-item:hover > a .oxy-halloween-menu-label,
#header a.oxy-halloween-menu-link:hover .oxy-halloween-menu-label {
color: #f28c28 !important;
border-color: #f28c28 !important;
border-bottom-color: #f28c28 !important;
background: linear-gradient(180deg, rgba(243, 163, 92, .20), rgba(243, 163, 92, .10)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 0 0 2px rgba(242, 140, 40, .07),
0 5px 15px rgba(242, 140, 40, .10) !important;
transform: translateY(-1px) !important;
}
}
/* Na Halloween landing page zustane badge citelny na tmavem headeru. */
body.oxy-halloween-page #header .oxy-halloween-menu-label {
color: #fff !important;
border-color: rgba(243, 163, 92, .58) !important;
border-bottom-color: rgba(243, 163, 92, .58) !important;
background: linear-gradient(180deg, rgba(243, 163, 92, .13), rgba(243, 163, 92, .07)) !important;
}
@media (hover: hover) and (pointer: fine) {
body.oxy-halloween-page #header li.oxy-halloween-menu-item > a:hover .oxy-halloween-menu-label,
body.oxy-halloween-page #header li.oxy-halloween-menu-item:hover > a .oxy-halloween-menu-label {
color: #f3a35c !important;
}
}
/* Mobil/tablet: stejny motiv, jen kompaktnejsi. */
@media (max-width: 991px) {
#header .oxy-halloween-menu-label {
padding: 6px 9px !important;
border-radius: 10px !important;
}
}
/* ==================================================
OXYBAG - HALLOWEEN MENU BADGE V3 FINAL ALIGN
================================================== */
@media (min-width: 992px) {
#header li.oxy-halloween-menu-item {
display: flex !important;
align-items: center !important;
}
#header li.oxy-halloween-menu-item > a,
#header li.oxy-halloween-menu-item > a.oxy-halloween-menu-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#header li.oxy-halloween-menu-item .oxy-halloween-menu-label {
top: 0 !important;
transform: translateY(-5px) !important;
}
}
/* ==================================================
OXYBAG - HALLOWEEN MENU BADGE V4 REAL VERTICAL ALIGN
Globalni desktop menu posouva bezne odkazy top:4px.
Badge je vyssi, proto jeho odkaz vratime o 4px nahoru.
================================================== */
@media (min-width: 992px) {
#header.oxy-wireframe-v8-active .navigation-in > ul > li.oxy-halloween-menu-item > a,
#header.oxy-wireframe-v8-active .navigation-in > ul > li.oxy-halloween-menu-item > a.oxy-halloween-menu-link {
position: relative !important;
top: 0 !important;
}
#header.oxy-wireframe-v8-active .navigation-in > ul > li.oxy-halloween-menu-item .oxy-halloween-menu-label {
transform: translateY(-5px) !important;
}
}
/* ==================================================
OXYBAG - WIREFRAME V35
STABILNI HLAVNI MENU PRI OTEVRENEM DROPDOWNU
--------------------------------------------------
Shoptet pri hoveru nad polozkou s podmenu znovu spousti
prepocet menu-helperu. Pri nem muze docasne nastavit
visibility:hidden i dalsim top-level polozkam, ktere se
pritom na sirokem desktopu normalne do radku vejdou.
V22 vracela viditelnost jen polozkam oznacenym .splitted.
Pri hover prepocitu ale nemusi mit vsechny docasne skryte
polozky tuto tridu. Proto na sirokem desktopu drzime
viditelne vsechny skutecne top-level polozky hlavniho menu.
.appended-category vynechavame, aby se nezobrazily pripadne
pomocne/duplikovane polozky vytvorene Shoptetem.
Mensi desktop 992-1199 px si ponechava nativni menu-helper.
================================================== */
@media (min-width: 1200px) {
#header.oxy-wireframe-v8-active
#navigation .navigation-in > ul > li:not(.appended-category) {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* ==================================================
OXYBAG - V36 / DESKTOP NAVIGATION DISPLAY GUARD
Shoptet may toggle display as well as visibility on
top-level items during submenu/menu-helper recalculation.
On wide layouts keep the original main-menu LI rendered.
No change to dropdown LI, mobile or the sticky plugin.
================================================== */
@media screen and (min-width: 1440px) and (hover: hover) {
#header.oxy-wireframe-v8-active #navigation .navigation-in > ul > li:not(.appended-category) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}