/* ======================================== FONT - Barlow (Google Fonts) Načtení přes v administraci Shoptetu ======================================== */ /* Aplikace Barlow na celý e-shop */ body, html, * { font-family: "Barlow", sans-serif !important; } /* Základní velikost písma a řádkování */ body { font-size: 17px !important; line-height: 1.384615; } /* Podkategorie s obrázkem */ .subcategories.with-image li a .text { display: inline-block; flex-grow: 0; overflow: visible; padding-left: 10px; text-align: left; text-overflow: ellipsis; width: 75%; /* Reset absolutního pozicování ze šablony, aby korektně fungoval rodičovský align-items: center */ position: static !important; transform: none !important; line-height: 1.2 !important; /* Mírné sražení řádků, pokud jsou dva */ } .subcategories.with-image li a { align-items: center; display: flex; padding-left: 15px; padding-right: 15px; height: 80px; border-left: 3px solid #000000; } /* ======================================== Carousel na celou šířku */ .banners-row .col-sm-8, .banners-row .col-sm-4 { width: 100%; float: none; } /* 3 bannery vedle sebe pod carouselem */ .next-to-carousel-banners { display: flex; gap: 10px; padding-top:10px; } .next-to-carousel-banners .banner-wrapper { flex: 1; overflow: hidden; } .next-to-carousel-banners .banner-wrapper img { width: 100%; height: auto; display: block; } .banners-row .banner-wrapper+.banner-wrapper { margin-top: unset; } @media (min-width: 768px) { .banners-row .col-sm-4 { padding-left: 0; } } .carousel-inner { min-height: unset !important; } .carousel-inner img { width: 100%; height: auto; max-height: 600px; /* maximální výška */ object-fit: cover; display: block; } /* Základní nastavení pro všechny ikony */ .menu-level-1 > li > a::before { content: ''; display: inline-block; width: 35px; height: 35px; margin-right: 7px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; flex-shrink: 0; } /* Příprava kávy - vlastní ikona */ .menu-item-705 > a::before { background-image: url("/user/documents/upload/kava.svg"); } /* Káva Café Gape - vlastní ikona */ .menu-item-720 > a::before { background-image: url("/user/documents/upload/kava%20gape.svg"); } /* Kávovary - vlastní ikona */ .menu-item-732 > a::before { background-image: url("/user/documents/upload/prislusenstvi.svg"); } /* Horká čokoláda 🍫 */ .menu-item-747 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M18 8h1a4 4 0 0 1 0 8h-1'/%3E%3Cpath d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cline x1='6' y1='2' x2='6' y2='4'/%3E%3Cline x1='12' y1='2' x2='12' y2='4'/%3E%3C/svg%3E"); } /* Oblečení 👕 */ .menu-item-673 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.57a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.57a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E"); } /* Módní doplňky 👜 */ .menu-item-674 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); } /* Do domácnosti 🏠 */ .menu-item-683 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); } /* Obchodní podmínky 📄 */ .menu-item-39 > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); } /* ======================================== BENEFIT BANNER - ikona nahoře, text dole, vše na střed ======================================== */ .benefitBanner__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 30px; } /* Bílé kolečko kolem ikony */ .benefitBanner__picture { margin: 0; width: 80px; height: 80px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Ikona uvnitř kolečka */ .benefitBanner__img { width: 40px !important; height: 40px !important; object-fit: contain; } .benefitBanner__content { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Větší nadpis a text v benefit banneru */ .benefitBanner__title { font-size: 18px; } .benefitBanner__data { font-size: 16px; } /* ======================================== PRODUKTY - border s mezerami mezi kartami Border dáváme na .p (inner wrapper), ne na .product Tím se neporuší grid a vznikne vizuální gap ======================================== */ .product .p { border-radius: 6px; margin: 5px; justify-content: space-between; padding: 28px; background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.08); border-bottom: 5px solid #1a1a1a; transition: box-shadow 0.2s; } .product .p:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.14); } /* Štítky (Novinka, Tip) - absolutně vlevo nahoře, vedle sebe */ .product .p { position: relative; } .product .flags { position: absolute; top: 0; left: 0; display: flex; flex-direction: row; gap: 4px; z-index: 2; } .product .flag { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 0 0 6px 0; text-transform: uppercase; letter-spacing: 0.4px; color: #ffffff; } .product .flag-new:first-child { border-radius: 6px 0 6px 0; } /* 100% ARABICA štítek - kolečko s textem a ikonou jako after */ .product .flag-100--arabica { position: absolute; top: 10px; right: 10px; width: 68px; height: 68px; border-radius: 50%; background-color: #ffffff !important; border: 1.5px solid #1a1a1a; display: flex !important; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.3; letter-spacing: 0.3px; z-index: 3; padding: 0; } .product .flag-100--arabica::after { content: ''; display: block; width: 18px; height: 18px; margin-top: 3px; background-image: url("/user/documents/upload/kava.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Pořadí položek v produktové kartě: popis → cena → tlačítko */ .product [data-micro="offer"] { display: flex; flex-direction: row; } .product .p-desc { order: 1; margin-bottom: 10px; } .product .prices { order: 2; } .product .p-tools { order: 3; } /* Název produktu - větší a tučný */ .product .name span { font-size: 24px; font-weight: 700; color: #1a1a1a; } /* Skrytí "Skladem" / dostupnosti */ .product .availability { display: none; } /* Cena + tlačítko na jednom řádku */ .product .prices { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .product .p-tools { flex-shrink: 0; padding-top: 25px; } /* Cena - netučná */ .product .price-final strong { font-weight: 400; } /* Tlačítka - červená */ .product .btn-primary, .product .btn-cart { background-color: #B4242A !important; border-color: #B4242A !important; color: #ffffff !important; } .product .btn-primary:hover, .product .btn-cart:hover { background-color: #b71c1c !important; border-color: #b71c1c !important; } /* ======================================== SEKCE ROZCESTNÍK - "Jak si kávu připravíte?" ======================================== */ .cg-rozcestnik { padding: 60px 20px; text-align: center; background-color: #f8f7f5; background-image: url('/user/documents/upload/bg.jpg'); background-repeat: no-repeat; background-position: top right; background-size: 420px auto; } .cg-rozcestnik__title { font-size: 32px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; } .cg-rozcestnik__subtitle { font-size: 16px; color: #666; margin-bottom: 40px; } /* 3 bloky vedle sebe */ .cg-rozcestnik__blocks { display: flex; gap: 20px; height: 300px; margin: 0 auto; } /* Každý blok */ .cg-rozcestnik__block { flex: 1; display: flex; justify-content: space-between; align-items: center; border-radius: 16px; padding: 32px 28px; text-align: left; min-height: 220px; position: relative; overflow: hidden; } /* Barvy bloků */ .cg-rozcestnik__block--espresso { background-color: rgb(166, 223, 210); } .cg-rozcestnik__block--filtr { background-color: rgb(252, 164, 159); } .cg-rozcestnik__block--nevim { background-color: rgb(203, 189, 214); } /* Obsah (text) */ .cg-rozcestnik__content { flex: 1; z-index: 1; } .cg-rozcestnik__block-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; } .cg-rozcestnik__block-desc { font-size: 14px; color: #333; margin-bottom: 16px; line-height: 1.5; } .cg-rozcestnik__block-desc a { color: #1a1a1a; text-decoration: underline; } /* Seznam odkazů */ .cg-rozcestnik__links { list-style: none; padding: 0; margin: 0; } .cg-rozcestnik__links li { margin-bottom: 6px; } .cg-rozcestnik__links a { font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; } .cg-rozcestnik__links a:hover { opacity: 0.65; } /* Wrapper pro fotku - vyčnívá z levého okraje bloku */ .cg-rozcestnik__img-wrap { flex-shrink: 0; width: 150px; margin-left: -40px; margin-right: 10px; display: flex; align-items: center; justify-content: center; } .cg-rozcestnik__img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); } /* Responzivita - na mobilu pod sebou */ @media (max-width: 767px) { .cg-rozcestnik__blocks { flex-direction: column; } } /* ======================================== HOMEPAGE BOX ======================================== */ .homepage-box { background-color: #ffffff; } @media (min-width: 768px) { .navigation-in { background-color: unset; } } @media (min-width: 768px) { .navigation-in>ul>li>a { background-color: transparent; color: black; } } .benefitBanner { margin: unset; margin-bottom: 0px !important; width: 100%; } @media (min-width: 992px) { .benefitBanner { flex-wrap: unset; gap: 90px; background-color: #f7f7f7; border-radius: 10px; padding: 60px 20px; margin-bottom: 0px; margin-top: 0px; } } .h4.homepage-group-title, h4.homepage-group-title Specificity: (0,1,1) { font-size: 26px; margin-top: 57px; text-align: center; font-weight: 700; } .product{ border-style: none !important; } .content-wrapper { background-color: #ffffff; } @media (min-width: 768px) { .content { padding-bottom: 20px;} } .navigation-in ul li a b { font-weight: 600; font-size: 17px; text-transform: uppercase; } .homepage-box.before-carousel { margin-top: 0; background-color: #ffffff; } .content-wrapper-in { background-color: #ffffff; } @media (min-width: 768px) { .content { flex-grow: 1; flex-shrink: 1; min-width: 0; padding-left: unset; padding-right: unset; width: 100%; background-color: #f7f7f7; } } @media (min-width: 480px) { .benefitBanner { flex-wrap: unset; gap: 90px; background-color: #f7f7f7; border-radius: 10px; padding: 60px 20px; padding-bottom: 100px; margin-bottom: 30px; } } .homepage-box { background-color: #f7f7f7; border-top-style: unset; } .content-wrapper-in { background-color: unset; } @media (min-width: 768px) { .navigation-in>ul>li { border-bottom-style: none; border-left-style: unset; border-left-width: unset; border-top-style: none; } } /* ======================================== MEGA MENU - dropdown styling ======================================== */ @media (min-width: 992px) { /* Hlavní dropdown kontejner */ .menu-level-1 > li > .menu-level-2 { background: #ffffff; border: none; border-top: 3px solid #000000; border-radius: 0 0 12px 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06); padding: 20px 24px; min-width: 220px; } /* Vlastní rozložení třetinových sloupečků a velikosti ikonek dle uživatele */ .navigation-in>ul>li.ext>ul>li { align-items: start; display: flex; flex-basis: 33.333333%; flex-grow: 0; flex-shrink: 1; min-height: 75px; width: 33.333333%; } .navigation-in>ul>li.ext>ul>li>a img { display: flex; height: 35px; max-height: 54px; max-width: 76px; } .navigation-in>ul>li.ext>ul>li>a { font-weight: 700; padding: 10px; width: 100%; } /* Wrapper s názvem kategorie a pod-položkami */ .menu-level-2 li > div { padding: 2px 0; } /* Odkaz na kategorii (hlavní název) */ .menu-level-2 li > div > a { display: block; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s; } /* Třetí úroveň - pod-položky pod sebou */ .menu-level-3 { list-style: none; padding: 4px 0 8px 12px; margin: 0; display: block; } .menu-level-3 > li { display: block; font-size: 0; /* skryje čárky (textové uzly) mezi položkami */ padding: 2px 0; } .menu-level-3 > li > a { display: block; font-size: 13px; color: #666; text-decoration: none; padding: 4px 0; transition: color 0.15s; } .menu-level-3 > li > a:hover { color: #1a1a1a; } /* Vysoce specifický override - přebije výchozí Shoptet pravidlo .navigation-in>ul>li.ext>ul>li>div>ul { display: inline-block } které nutí položky 3. úrovně vedle sebe */ .navigation-in > ul > li.ext > ul > li > div > ul { display: block; line-height: 1.3; overflow: visible; max-height: auto; } .navigation-in > ul > li.ext > ul > li > div > ul > li { display: block; font-size: 0; /* skryje čárky (textové uzly) mezi položkami */ padding: 2px 0; } .navigation-in > ul > li.ext > ul > li > div > ul > li > a { display: block; font-size: 15px; padding: 4px 0; } /* Mega menu je flex kontejner (display: flex; flex-wrap: wrap) se sloupci o pevné šířce 33.33%. To způsobovalo, že 4. sloupec se zalomil na druhý řádek a přetékal ven z bílého bloku. Řešení: - align-items: flex-start → nadpisy začínají nahoře na stejné úrovni (výchozí align-items: center je svisle centroval) - height/max-height auto → flex kontejner se sám natáhne podle obsahu POZN.: žádný clearfix - na flex kontejneru by se ::after stalo prázdným flex-itemem a rozbilo layout. */ .navigation-in > ul > li.ext > ul { align-items: flex-start !important; height: auto !important; max-height: none !important; } /* Sloupce vždy do jednoho řádku, rovnoměrná šířka (flex: 1). Díky flex: 1 + nowrap se sloupce vejdou na jeden řádek bez ohledu na jejich počet (2-4) a nikdy nepřetečou - tím se bílý blok drží. Vyloučeno menu Značky (#nav-manufacturers), které je jednoduchý svislý seznam, ne sloupce. */ .navigation-in > ul > li.ext:not(#nav-manufacturers) > ul { flex-wrap: nowrap !important; } .navigation-in > ul > li.ext:not(#nav-manufacturers) > ul > li { flex: 1 1 0 !important; width: auto !important; max-width: none !important; } /* Zobrazit celý seznam 3. úrovně - zrušit truncaci ("...") ze šablony */ .navigation-in > ul > li.ext .menu-level-3 { max-height: none !important; overflow: visible !important; } .navigation-in .more-items-trigger { display: none !important; } /* Dropdown pro značky */ #nav-manufacturers .menu-level-2 { min-width: 180px; } #nav-manufacturers .menu-level-2 li > a { display: block; padding: 8px 12px; font-size: 14px; font-weight: 500; color: #1a1a1a; text-decoration: none; border-radius: 6px; transition: background 0.15s, color 0.15s; } #nav-manufacturers .menu-level-2 li > a:hover { background: #f0f8f4; color: #4a9b78; } } /* Konec media query pro MEGA MENU */ @media (min-width: 768px) { #navigation { height: 56px; } } .overall-wrapper{ background-color: #f7f7f7; } .products-block .ratings-wrapper { /* display: none; */ } .products-block .ratings-wrapper .availability { flex: 1 1 60%; text-align: left; } .products-block.products .p .name { height: unset; } .products-block .p a.image { position: static; } /* ======================================== HOMEPAGE - pozadí s fixed obrázkem ======================================== */ div.content-wrapper.homepage-box.before-carousel { background: url('https://786677.myshoptet.com/user/documents/upload/cafegape_bg-main.jpg') fixed center; background-size: cover; padding: 4em 0; } /* ======================================== HEADER & NAVIGATION ======================================== */ #header .site-name a img { max-height: 110px; } @media (min-width: 768px) { /* .navigation-in je position:absolute; bez omezení šířky se roztáhne a blok s položkami začíná vlevo (schovaný pod logem). Omezíme na šířku wrapperu a položky vycentrujeme. (Shoptet třídu .fitted nepřidává spolehlivě.) */ .navigation-in { width: 100%; left: 0; } .navigation-in ul.menu-level-1 { justify-content: center !important; gap: 20px; } } .menu-level-1 li a:before { display: none; } .navigation-in ul li a b { font-size: 20px; } .navigation-in ul li a { padding-top: 17px; } .menu-item-720.ext.exp{ padding-left: unset; padding-right: unset; padding-top: unset; } .menu-item-744.ext.exp{ padding-left: unset; padding-right: unset; padding-top: unset; } .menu-item-705.ext.exp{ padding-left: unset; padding-right: unset; padding-top: unset; } .menu-item-732.ext.exp{ padding-left: unset; padding-right: unset; padding-top: unset; } .menu-item-786.ext.exp{ padding-left: unset; padding-right: unset; padding-top: unset; } .header-top .search { margin-bottom: 30px; } @media (min-width: 768px) { .top-navigation-bar { display: none; } } .top-nav-button-login { color: black; padding: 8px 20px 0px; } .navigation-buttons { margin-bottom: 28px; } .menu-level-2 li > div > a { font-size: 18px; } @media (min-width: 992px) { .admin-logged .popup-widget.login-widget { top: 119px; } } @media (min-width: 1440px) { .popup-widget { margin-left: 112px; } } .content-wrapper.container { margin-top: 0px !important; } /* ======================================== PRODUKTY - reset rámečků + breadcrumbs ======================================== */ .product .p { box-shadow: unset; border-radius: unset; } .products-block.products > div { padding: 20px; } .breadcrumbs { background-color: unset; border: unset; } .content-wrapper.container { margin-top: 30px; } .breadcrumbs-wrapper { margin-top: 25px; } .social-buttons-wrapper { display: none; } .p-detail-inner-header h1 { font-size: 32px; font-weight: 700; } /* ======================================== VARIANTY PRODUKTU - čtverečky místo radio buttonů ======================================== */ /* Zrušení fixních rozměrů od Shoptetu pro obal varianty */ #simple-variants .advanced-parameter.custom-variant-box { width: auto !important; height: auto !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; float: none !important; line-height: normal !important; } /* Skrytí rádio tlačítek a nepoužívaných spanů */ #simple-variants input[type="radio"], #simple-variants > span { display: none !important; } /* Rozložení boxíků vedle sebe */ #simple-variants { display: flex !important; flex-wrap: wrap; width: 100%; } /* Skrytí sloupce s textem "Varianta" a roztažení */ .detail-parameters .variant-list th { display: none !important; } .detail-parameters .variant-list td { display: block !important; width: 100% !important; padding-left: 0 !important; } /* Stylizace čtverců - neaktivní stav (zašedlá) */ .custom-variant-content { box-sizing: border-box !important; border: 2px solid #d4d4d4 !important; background-color: #f2f2f2 !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; /* Rozměry čtverce */ width: 100px !important; height: 100px !important; padding: 20px !important; gap: 0px !important; margin-right: 15px !important; } /* Název varianty (neaktivní) - šedý */ .custom-variant-name { display: block !important; font-size: 20px !important; font-weight: 700 !important; color: #000000 !important; font-family: inherit !important; } /* Cena (neaktivní) - světle šedá */ .custom-variant-price { display: block !important; font-size: 18px !important; color: #707070 !important; font-weight: 500 !important; } /* Aktivní (vybraný) stav - bílé pozadí + červený rámeček */ .advanced-parameter.custom-variant-box input[type="radio"]:checked ~ .custom-variant-content { background-color: #ffffff !important; border-color: #B4242A !important; } .advanced-parameter.custom-variant-box input[type="radio"]:checked ~ .custom-variant-content .custom-variant-name { color: #000000 !important; } .advanced-parameter.custom-variant-box input[type="radio"]:checked ~ .custom-variant-content .custom-variant-price { color: #8c8a8a !important; } /* ======================================== FOOTER - černé pozadí, 3 sloupce na desktopu ======================================== */ #footer { background-color: black; color: white; } /* Celý kontejner footeru - dekorativní větev vlevo dole */ #footer .custom-footer { background-image: url('/user/documents/upload/vetev.png') !important; background-repeat: no-repeat !important; background-position: left bottom !important; background-size: auto 84% !important; position: relative; } /* Skrytí loga v zápatí */ #footer .site-name { display: none !important; } /* Hlavní kontejner zápatí na celou šířku */ #footer .custom-footer { color: white; background-color: transparent; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; display: flex !important; flex-wrap: wrap !important; } /* Mobilní zobrazení - 1 sloupec */ #footer .custom-footer > div { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 15px !important; box-sizing: border-box !important; } /* Desktop - 3 sloupce vedle sebe */ @media (min-width: 992px) { #footer .custom-footer > div { width: 33.3333% !important; max-width: 33.3333% !important; flex: 0 0 33.3333% !important; } } .custom-footer { padding-left: unset !important; } /* Footer - všechny texty bílé */ #footer .custom-footer, #footer .custom-footer h1, #footer .custom-footer h2, #footer .custom-footer h3, #footer .custom-footer h4, #footer .custom-footer h5, #footer .custom-footer h6, #footer .custom-footer span, #footer .custom-footer p, #footer .custom-footer li, #footer .custom-footer a, #footer .custom-footer strong, #footer .custom-footer b { color: #ffffff !important; } #footer .custom-footer a:hover, #footer .custom-footer a:focus { color: #cccccc !important; } /* H4 a odstavce ve footeru - jednotná velikost a tučnost */ #footer .h4, #footer h4, #footer p { margin-bottom: 22px; font-weight: 700; font-size: 20px; } /* Trustindex widget - hlavička bez rámečku, tmavé pozadí */ .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-widget-header { border-style: unset !important; background-color: #171717 !important; } /* Trustindex widget - kontejner widgetu */ .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-widget-container { display: block !important; color: #ffffff !important; margin-bottom: 15px !important; } /* Trustindex widget - jednotlivé recenze a tlačítko "načíst další" */ .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-review-item > .ti-inner, .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-load-more-reviews-container .ti-load-more-reviews-button { border-top-width: 2px !important; border-bottom-width: 2px !important; border-left-width: 2px !important; border-right-width: 2px !important; background-color: #171717 !important; backdrop-filter: blur(0px) !important; } /* Trustindex widget - jméno recenzenta */ .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-widget-container .ti-name { font-weight: 600 !important; font-size: 15px !important; overflow: hidden !important; padding-right: 25px !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: #ffffff !important; } /* Trustindex widget - tlačítko "načíst další recenze" */ .ti-widget[data-layout-id='81'][data-set-id='soft'] .ti-load-more-reviews-container .ti-load-more-reviews-button { display: inline-block !important; margin-top: 16px !important; border-color: #ffffff !important; color: #ffffff !important; background: #171717 !important; border-radius: 12px !important; padding: 10px 20px !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.3s ease-in-out !important; } /* Footer - vnitřní container černý */ #footer > .container { background-color: #000000; } /* Detail produktu - základní font-size */ body.type-detail { font-size: 18px; } /* Detail produktu - obrázek a 360° view se spodním rámečkem */ .image360, .p-image { border-color: var(--colors-foregrounds-borders-secondary); border-bottom: solid 5px; } /* Detail produktu - panel s info (název, cena, varianty) - bílé pozadí + spodní rámeček a změna pořadí přes Flex */ .p-info-wrapper { background: white !important; padding: 30px !important; border-bottom: 5px solid !important; display: flex !important; flex-direction: column !important; } /* Explicitní definice pořadí pro všechny přímé potomky, aby nic neskákalo nahoru */ .p-info-wrapper > * { order: 10; } /* Vytažení variant nad cenu a dostupnost */ .p-info-wrapper > .p-detail-inner-header { order: 1 !important; } .p-info-wrapper > .p-detail-info { order: 2 !important; } .p-info-wrapper > .detail-parameters { order: 3 !important; } /* Varianty */ .p-info-wrapper > .p-final-price-wrapper { order: 4 !important; } /* Cena posunuta pod varianty */ .p-info-wrapper > .availability-value { order: 5 !important; display: block !important; } /* Skladem posunuto pod varianty a vynuceno zobrazení */ /* Jednotné odsazení pro tyto přeskládané bloky, jak bylo požadováno */ .p-info-wrapper .add-to-cart, .p-info-wrapper .availability-value, .p-info-wrapper .detail-parameters, .p-info-wrapper .p-final-price-wrapper { margin-top: 15px; margin-bottom: 19px; } .responsive-nav .shp-tabs-holder { margin-bottom: 0; display: none; } /* ======================================== BANNER KATEGORIE - 3 barevné karty s ikonou a odkazy ======================================== */ .cg-cat-banner { padding: 40px 0; } .cg-cat-banner__grid { display: flex; gap: 35px; width: 100%; margin: 0 auto; } .cg-cat-banner__card { flex: 1; display: flex; align-items: center; gap: 80px; border-radius: 20px; padding: 40px 35px 40px 0; overflow: hidden; text-decoration: none; } .cg-cat-banner__card--dark { background-color: #000000; } .cg-cat-banner__card--red { background-color: #B4242A; } .cg-cat-banner__card--gray { background-color: #4a4a4a; } /* Ikona - velká, zarovnaná k levému kraji karty Pevná VÝŠKA (ne šířka) → všechny ikony stejně vysoké bez ohledu na jejich poměr stran. Šířka se dopočítá automaticky. */ .cg-cat-banner__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .cg-cat-banner__icon img { height: 160px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); /* bílá barva ikony */ } /* Nadpis */ .cg-cat-banner__title { font-size: 24px; font-weight: 700; color: #ffffff; margin-bottom: 12px; } /* Odkazy */ .cg-cat-banner__links { list-style: none; padding: 0; margin: 0; } .cg-cat-banner__links li { margin-bottom: 4px; } .cg-cat-banner__links a { font-size: 17px; color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.15s; } .cg-cat-banner__links a:hover { color: #ffffff; } /* Responzivita */ @media (max-width: 767px) { .cg-cat-banner__grid { flex-direction: column; } } /* FB a IG ikony v negativu (bílé) ve footeru */ #footer .social-icon.facebook, #footer .social-icon.instagram { filter: invert(1) brightness(2); } .category-header { align-items: center; -moz-column-gap: 20px; column-gap: 20px; display: flex; flex-wrap: wrap; margin-bottom: 19px; border-bottom: 3px solid #e8e8e8; } /* ======================================== IKONA PŘED TLAČÍTKEM "Otevřít filtr" ======================================== */ .unveil-button[data-unveil="filters"] { display: inline-flex !important; align-items: center; gap: 8px; /* mezera mezi ikonou a textem */ } .unveil-button[data-unveil="filters"]::before { content: "filter_list"; font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; /* Podpora pro ligatury, přes které Material Icons fungují */ font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Skrytí drobečkové navigace a nastavení marginu */ .breadcrumbs-wrapper { margin-top: 25px; display: none; } /* ======================================== MEGAMENU SLUŽBY A O PRAŽÍRNĚ - úprava přesunutých položek ======================================== */ .menu-item-1283 .menu-level-2 .menu-level-2 .menu-image, .menu-item-1292 .menu-level-2 .menu-level-2 .menu-image { display: none !important; /* Skryje nechtěné fotky (foťáky) u pod-položek */ } .menu-item-1283 .menu-level-2 .menu-level-2, .menu-item-1292 .menu-level-2 .menu-level-2 { display: block !important; padding-left: 0; } .menu-item-1283 .menu-level-2 .menu-level-2 > li, .menu-item-1292 .menu-level-2 .menu-level-2 > li { display: block !important; width: 100% !important; min-height: auto !important; padding: 5px 0 !important; } .menu-item-1283 .menu-level-2 .menu-level-2 > li > div, .menu-item-1292 .menu-level-2 .menu-level-2 > li > div { padding: 0 !important; } .menu-item-1283 .menu-level-2 .menu-level-2 > li > div > a > span, .menu-item-1292 .menu-level-2 .menu-level-2 > li > div > a > span { font-weight: 400 !important; /* Netučný text pro pod-položky, aby vypadal jako normální odkaz */ font-size: 15px !important; color: #666 !important; } .menu-item-1283 .menu-level-2 .menu-level-2 > li > div > a:hover > span, .menu-item-1292 .menu-level-2 .menu-level-2 > li > div > a:hover > span { color: #1a1a1a !important; } /* Pojistka: Shoptet dynamicky přidává rubrikám a jejich pod-položkám třídu .splitted, kterou jádrové CSS (.navigation-in ul li.splitted { visibility:hidden }) skryje. custom-scripts.js ji sice odebírá, ale toto je záloha pro případ, že by se JS nenasadil nebo Shoptet třídu přidal znovu po jeho doběhnutí. */ .navigation-in .menu-item-1283.splitted, .navigation-in .menu-item-1292.splitted, .navigation-in .menu-item-1283 li.splitted, .navigation-in .menu-item-1292 li.splitted { visibility: visible !important; } /* --- Sjednocení rubrik se vzhledem produktových kategorií (jen desktop mega menu) --- Rubriky (Služby, O pražírně) mají jinou HTML strukturu než produktové kategorie: sloupce jsou li.ext (ne li.has-third-level), nadpis je v se šipkou a vnořený seznam je position:absolute. Tyto rozdíly níže srovnáváme. Scope .navigation-in + 992px, aby se neovlivnilo mobilní hamburger menu. */ @media (min-width: 992px) { /* Megamenu rubrik držet otevřené po celou dobu, co je myš nad položkou nebo jejím dropdownem. Sloupce rubrik jsou (na rozdíl od kategorií) interaktivní submenu s aria-haspopup, takže Shoptet JS při přejezdu mezi nimi odebere třídu .exp a menu se sbalí. Pravidlo přes :hover je na JS nezávislé – li:hover platí i při najetí na potomka (dropdown), takže přejezd mezi sloupci menu nezavře. */ .navigation-in .menu-item-1283:hover > .menu-level-2, .navigation-in .menu-item-1292:hover > .menu-level-2 { display: flex !important; } /* #navigation má overflow:hidden a výšku 56px (Shoptet ho přepíná na visible jen přes JS při třídě .exp). Při hoveru rubriky proto rozbalené menu ořízne. Přes :has() udržíme #navigation neořezané, dokud je rubrika pod myší. */ #navigation:has(.menu-item-1283:hover), #navigation:has(.menu-item-1292:hover) { overflow: visible !important; } /* Sloupec rubriky (Pro zákazníky, Náš příběh, ...) – nadpis NAD položkami (výchozí display:flex stavěl nadpis vedle seznamu položek). */ .navigation-in .menu-item-1283 > .menu-level-2 > li.ext, .navigation-in .menu-item-1292 > .menu-level-2 > li.ext { display: block !important; } /* Nadpis sloupce jako u kategorií: tučně, bez verzálek a bez rozbalovací šipky. */ .navigation-in .menu-item-1283 > .menu-level-2 > li.ext > a > b, .navigation-in .menu-item-1292 > .menu-level-2 > li.ext > a > b { text-transform: none !important; font-size: 14px !important; font-weight: 600 !important; color: #1a1a1a !important; } .navigation-in .menu-item-1283 > .menu-level-2 > li.ext > a .submenu-arrow, .navigation-in .menu-item-1292 > .menu-level-2 > li.ext > a .submenu-arrow { display: none !important; } /* Vnořený seznam pod-položek vrátit do běžného toku pod nadpis (Shoptet ho má position:absolute, takže "odlétal" mimo svůj sloupec a překrýval ostatní). */ .navigation-in .menu-item-1283 > .menu-level-2 > li.ext > .menu-level-2, .navigation-in .menu-item-1292 > .menu-level-2 > li.ext > .menu-level-2 { position: static !important; background: transparent !important; border: none !important; box-shadow: none !important; min-width: 0 !important; padding: 4px 0 4px 12px !important; } }