@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* =========================================================
KRILL AIRCRAFT — vlastní styly
Soubor: /user/documents/code/krill-site.css
Šablona: Shoptet Classic / Opal (Shoptak.cz)
---------------------------------------------------------
POZOR: v .css souboru NESMÍ být \3c style> ani \3c /style>.
Vkládá se přes v HTML kódu hlavičky:
Po každé úpravě zvyš ?v= číslo (kvůli cache).
---------------------------------------------------------
OBSAH
1. Barevné proměnné
2. Základní pozadí
3. Horní navigační lišta
4. Hlavní header
5. Ikony v headeru
6. Mega menu (desktop)
7. Mobilní menu
8. Homepage — wrappery, bannery, benefity
9. Sekce "Novinky" (#products-1)
10. Sekce "Nabídka produktů" (#products-2)
11. Sidebar — kategorie
12. Sidebar — filtry
13. Dlaždice podkategorií
14. Kategorie — produktové karty
15. Detail produktu — obecné
16. Detail produktu — parametry pod obrázkem
17. Footer / newsletter
18. Objednávkový proces (košík, doprava/platba, údaje)
19. Objednávkový proces — dočištění zbytků Opalu
20. Objednávkový proces — dorovnání detailů
========================================================= */
/* =========================================================
1. BAREVNÉ PROMĚNNÉ
Pozn.: proměnné používej jen v nových pravidlech.
Stávající pravidla mají barvy zapsané přímo,
aby se nic nerozbilo při případném přepisu.
========================================================= */
:root {
--krill-red: #e53a24;
--krill-dark: #1f1b20;
--krill-grey: #e8e6e6;
--krill-white: #ffffff;
--krill-text: #222222;
--krill-muted: #6f6f72;
--krill-border: #d8d6d6;
}
/* =========================================================
1.1 TYPOGRAFIE — CELÝ WEB
---------------------------------------------------------
Poppins = nadpisy
Inter = veškerý ostatní text a formulářové prvky
========================================================= */
body,
input,
textarea,
select,
button,
.form-control,
.button,
.btn,
label,
table {
font-family: "Inter", Arial, sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.pageElement__heading,
.homepage-group-title,
.category-title,
.products-related-header,
.p-detail-inner h1 {
font-family: "Poppins", Arial, sans-serif !important;
}
/* =========================================================
2. ZÁKLADNÍ POZADÍ
========================================================= */
body,
body.blank-mode,
.external-fonts-loaded body {
color: #222222;
background: #e8e6e6 !important;
}
/* Homepage — nejvnější obal */
body.in-index .overall-wrapper {
background: #e8e6e6 !important;
}
/* Homepage — hlavní kontejnery */
body.in-index .content-wrapper.container,
body.in-index .content-wrapper-in,
body.in-index main.content,
.benefitBanner.position--benefitHomepage {
background: #e8e6e6 !important;
}
/* =========================================================
3. HORNÍ NAVIGAČNÍ LIŠTA
========================================================= */
.top-navigation-bar {
background: #1f1b20 !important;
}
.top-navigation-bar,
.top-navigation-bar a,
.top-navigation-contacts,
.top-navigation-bar-menu a {
color: #e8e6e6 !important;
}
/* =========================================================
4. HLAVNÍ HEADER
========================================================= */
#header,
#header.fixed-menu,
#header.down,
#header.fixed-menu.down,
#header.fixed-menu-down {
background: #1f1b20 !important;
}
/* Texty hlavní navigace */
#header a,
#navigation ul.menu-level-1 > li > a,
#navigation ul.menu-level-1 > li > a b,
.top-nav-button-login span,
#header .navigation-buttons .btn .cart-price {
color: #ffffff !important;
}
/* Logo v hlavním menu — větší, ale bez zásahu do mobilního headeru */
@media (min-width: 1200px) {
#header .site-name {
width: 210px !important;
}
#header .site-name img {
display: block !important;
width: 210px !important;
max-width: 210px !important;
height: auto !important;
max-height: 44px !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#header .site-name {
width: 185px !important;
}
#header .site-name img {
display: block !important;
width: 185px !important;
max-width: 185px !important;
height: auto !important;
max-height: 40px !important;
}
}
/* "Více" v hlavní navigaci */
.menu-helper,
.menu-helper span,
.menu-helper::before,
.menu-helper::after {
color: #ffffff !important;
}
/* =========================================================
5. IKONY V HEADERU (hledání / přihlášení / košík)
---------------------------------------------------------
Pozn.: Shoptet vykresluje ikony přes ::before.
Ikony jako obrázek (background-image) se barví
BUĎ vlastním bílým SVG, NEBO filtrem — nikdy oběma
způsoby zároveň, jinak se efekt vyruší.
========================================================= */
/* Obecně bílý text a rámečky v pravé části headeru */
#header .navigation-buttons,
#header .navigation-buttons a,
#header .navigation-buttons button,
#header .navigation-buttons .btn,
#header .navigation-buttons .top-nav-button {
color: #ffffff !important;
}
#header .navigation-buttons a::before,
#header .navigation-buttons a::after,
#header .navigation-buttons button::before,
#header .navigation-buttons button::after,
#header .navigation-buttons .btn::before,
#header .navigation-buttons .btn::after,
#header .navigation-buttons .top-nav-button::before,
#header .navigation-buttons .top-nav-button::after,
#header .top-nav-button-login::before,
#header .top-nav-button-cart::before,
#header .cart-count::before {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #ffffff !important;
}
/* Pojistka pro SVG ikony */
#header .navigation-buttons svg,
#header .search-toggle svg,
#header .top-nav-button-login svg,
#header .top-nav-button-cart svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
#header .navigation-buttons svg *,
#header .search-toggle svg *,
#header .top-nav-button-login svg *,
#header .top-nav-button-cart svg * {
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* Hover ikon */
#header .navigation-buttons a:hover,
#header .navigation-buttons button:hover,
#header .navigation-buttons .top-nav-button:hover {
color: #ffffff !important;
opacity: 0.72;
}
/* Počítadlo košíku zůstává plně výrazné */
#header .navigation-buttons .cart-count,
#header .navigation-buttons .cart-count span {
opacity: 1 !important;
}
/* --- Vlastní ikona: PŘIHLÁŠENÍ --- */
/* --- Vlastní ikona: KOŠÍK --- */
/* --- Vlastní ikona: HLEDÁNÍ --- */
#header .search-toggle,
#header .search-toggle:hover,
#header .search-toggle:focus,
#header .search-toggle:active {
background-image: url("/user/documents/imgs/search_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
}
/* Vypnutí původní ikony hledání z pseudo-elementu */
#header .search-toggle::before,
#header .search-toggle::after {
content: none !important;
display: none !important;
}
/* =========================================================
6. MEGA MENU / PODKATEGORIE (desktop)
========================================================= */
#navigation ul.menu-level-2,
#navigation .menu-level-2,
#navigation ul.menu-level-3,
#navigation .menu-level-3 {
background: #1f1b20 !important;
color: #ffffff !important;
border: 0 !important;
}
#navigation .menu-level-2 > li,
#navigation .menu-level-3 > li {
background: transparent !important;
color: #ffffff !important;
}
#navigation .menu-level-2 a,
#navigation .menu-level-2 a span,
#navigation .menu-level-2 a b,
#navigation .menu-level-3 a,
#navigation .menu-level-3 a span,
#navigation .menu-level-3 a b {
color: #ffffff !important;
}
/* Nadpisy sloupců */
#navigation .menu-level-2 > li > a:not(.menu-image) {
color: #ffffff !important;
font-weight: 700 !important;
}
/* Běžné položky 3. úrovně jsou o odstín tlumenější */
#navigation .menu-level-3 a {
color: rgba(255, 255, 255, 0.78) !important;
}
#navigation .menu-level-2 a:hover,
#navigation .menu-level-3 a:hover {
color: #ffffff !important;
opacity: 1 !important;
}
/* --- Ikony v mega menu --- */
/* Obrázkové ikony kategorií (folder.svg) — pouze filtr */
#navigation .menu-level-2 a.menu-image,
#navigation .menu-level-3 a.menu-image {
filter: brightness(0) invert(1);
opacity: 0.9;
}
#navigation .menu-level-2 a.menu-image:hover,
#navigation .menu-level-3 a.menu-image:hover {
opacity: 1;
}
/* Fontové / SVG ikony — pouze barva */
#navigation .menu-level-2 [class*="icon"],
#navigation .menu-level-3 [class*="icon"],
#navigation .menu-level-2 svg,
#navigation .menu-level-3 svg {
color: #ffffff !important;
}
#navigation .menu-level-2 svg path,
#navigation .menu-level-2 svg line,
#navigation .menu-level-2 svg polyline,
#navigation .menu-level-2 svg circle,
#navigation .menu-level-3 svg path,
#navigation .menu-level-3 svg line,
#navigation .menu-level-3 svg polyline,
#navigation .menu-level-3 svg circle {
stroke: #ffffff !important;
}
/* =========================================================
7. MOBILNÍ MENU
========================================================= */
@media (max-width: 767px) {
#navigation,
#navigation.navigation-window-visible,
#navigation .navigation-in {
background: #1f1b20 !important;
color: #ffffff !important;
}
/* Hlavní položky */
#navigation .menu-level-1 > li {
background: transparent !important;
}
#navigation .menu-level-1 > li > a {
background: transparent !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
border-radius: 7px !important;
margin-bottom: 8px !important;
}
#navigation .menu-level-1 > li > a b,
#navigation .menu-level-1 > li > a span {
color: #ffffff !important;
}
/* Aktivní / rozbalená hlavní položka */
#navigation .menu-level-1 > li > a[aria-expanded="true"],
#navigation .menu-level-1 > li.expanded > a,
#navigation .menu-level-1 > li.active > a {
background: #1f1b20 !important;
color: #ffffff !important;
border-color: #ffffff !important;
}
#navigation .menu-level-1 > li > a[aria-expanded="true"] b,
#navigation .menu-level-1 > li > a[aria-expanded="true"] span,
#navigation .menu-level-1 > li.expanded > a b,
#navigation .menu-level-1 > li.expanded > a span {
color: #ffffff !important;
}
/* Rozbalovací šipky */
#navigation .submenu-arrow,
#navigation .submenu-arrow::before,
#navigation .submenu-arrow::after,
#navigation .menu-level-1 > li > a[aria-expanded="true"] .submenu-arrow,
#navigation
.menu-level-1
> li
> a[aria-expanded="true"]
.submenu-arrow::before,
#navigation
.menu-level-1
> li
> a[aria-expanded="true"]
.submenu-arrow::after {
color: #ffffff !important;
border-color: #ffffff !important;
}
/* Podkategorie */
#navigation .menu-level-2,
#navigation .menu-level-3 {
background: #1f1b20 !important;
}
#navigation .menu-level-2 li,
#navigation .menu-level-3 li {
background: transparent !important;
}
#navigation .menu-level-2 a,
#navigation .menu-level-3 a,
#navigation .menu-level-2 a span,
#navigation .menu-level-3 a span {
background: transparent !important;
color: #ffffff !important;
}
/* Tlačítko "zpět" nad submenu */
#navigation .menu-level-2::before,
#navigation .menu-level-3::before,
#navigation .menu-level-2 > .menu-back,
#navigation .menu-level-3 > .menu-back,
#navigation .menu-level-2 > .menu-back a,
#navigation .menu-level-3 > .menu-back a {
background-color: #1f1b20 !important;
color: #ffffff !important;
border-color: #ffffff !important;
}
#navigation .menu-level-2::after,
#navigation .menu-level-3::after,
#navigation .menu-back::before,
#navigation .menu-back::after,
#navigation .menu-back a::before,
#navigation .menu-back a::after {
color: #ffffff !important;
border-color: #ffffff !important;
}
/* Přihlášení v patičce menu */
#navigation .navigationActions,
#navigation .navigationActions > li {
background: transparent !important;
}
#navigation .navigationActions > li > a {
background: transparent !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
border-radius: 7px !important;
}
#navigation .navigationActions > li > a span {
color: #ffffff !important;
}
/* Zavírací křížek */
#navigation .navigation-close {
border-color: #ffffff !important;
background-color: transparent !important;
}
#navigation .navigation-close::before,
#navigation .navigation-close::after {
background: #ffffff !important;
}
/* Ikony v mobilním menu */
#navigation svg,
#navigation svg * {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
}
/* =========================================================
8. HOMEPAGE — WRAPPERY, BANNERY, BENEFITY
========================================================= */
body.in-index #content-wrapper.content-wrapper {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
background: transparent !important;
}
/* ARCHIVED 2026-10-16: legacy banner button spacing
/ * Brand bannery * /
.brand-banner__btn {
padding: 20px 40px;
}
@media (max-width: 1024px) {
.brand-banner__btn {
padding: 16px 28px;
}
}
@media (max-width: 640px) {
.brand-banner__btn {
padding: 16px 24px;
}
}
END ARCHIVED */
.content-wrapper.homepage-box.middle-banners-wrapper {
background: #e8e6e6 !important;
padding-top: 56px !important;
}
/* Konkurenční výhody */
.benefitBanner.position--benefitHomepage {
padding: 48px 0 !important;
}
/* Jednotný výřez obrázků v obou produktových sekcích homepage.
Shoptet generuje náhledy na plátno 4 : 3 a u širokých fotografií
do něj přidává bílé pruhy. Pevný viewport 16 : 9 a cover pruhy
oříznou, zachovají poměr fotografie a zabrání poskakování layoutu. */
body.in-index #products-1 .product .p > a.image,
body.in-index #products-2 .product .p > a.image {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
margin: 0 0 18px !important;
padding: 0 !important;
background: transparent !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
body.in-index #products-1 .product .p > a.image > img,
body.in-index #products-1 .product .p > a.image > picture > img,
body.in-index #products-1 .product .p > a.image img.swap-image,
body.in-index #products-2 .product .p > a.image > img,
body.in-index #products-2 .product .p > a.image > picture > img,
body.in-index #products-2 .product .p > a.image img.swap-image {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
background: transparent !important;
transform: scale(1.01) !important;
z-index: 0 !important;
}
body.in-index #products-1 .product .flags,
body.in-index #products-2 .product .flags {
position: absolute !important;
z-index: 5 !important;
}
body.in-index #products-1 .product .image::before,
body.in-index #products-1 .product .image::after,
body.in-index #products-2 .product .image::before,
body.in-index #products-2 .product .image::after {
display: none !important;
content: none !important;
}
/* =========================================================
9. SEKCE "NOVINKY" (#products-1)
---------------------------------------------------------
POZOR: ID sekcí (#products-1 / #products-2) se
PŘEHAZUJÍ při změně pořadí widgetů v editoru vzhledu.
Po každém přesunu sekcí zkontroluj homepage.
========================================================= */
.homepage-products-heading-1,
#products-1 {
position: relative;
z-index: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Tmavý pás přes celou šířku viewportu */
.homepage-products-heading-1::before,
#products-1::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #1f1b20;
z-index: -1;
}
.homepage-products-heading-1 {
color: #ffffff !important;
padding-top: 40px !important;
padding-bottom: 20px !important;
}
#products-1 {
padding-bottom: 44px !important;
}
/* Karty bez bílého pozadí */
#products-1 .product,
#products-1 .p,
#products-1 .p-in,
#products-1 .p-in-in,
#products-1 .p-bottom,
#products-1 .p-tools {
background: transparent !important;
box-shadow: none !important;
}
/* Textová část karty */
#products-1 .p-in {
box-sizing: border-box !important;
margin-top: 0 !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
#products-1 .p-in-in {
margin-top: 0 !important;
}
#products-1 .p-bottom {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
/* Cena, název, kód — bílé na tmavém pozadí */
#products-1 .prices,
#products-1 .prices *,
#products-1 .price-final,
#products-1 .price-final *,
#products-1 .price {
color: #ffffff !important;
font-weight: 700 !important;
}
#products-1 .name,
#products-1 .name *,
#products-1 a.name,
#products-1 a.name * {
color: #ffffff !important;
font-weight: 500 !important;
text-decoration: none !important;
}
#products-1 .p-code,
#products-1 .p-code * {
color: #ffffff !important;
}
#products-1 .p-desc {
color: #e8e6e6 !important;
}
/* Dostupnost — barvu Shoptetu necháváme, jen zvýrazníme */
#products-1 .availability {
font-weight: 700 !important;
}
/* Tlačítko "Detail / Do košíku" — text bez pozadí */
#products-1 .product .p-tools a.btn,
#products-1 .product .p-tools button.btn,
#products-1 .product .p-tools button.btn.btn-cart,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 700 !important;
line-height: 1.4 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 6px 0 !important;
text-decoration: none !important;
opacity: 1 !important;
}
#products-1 .product .p-tools a.btn span,
#products-1 .product .p-tools button.btn span,
#products-1 .product .p-tools button.btn.btn-cart span,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#products-1 .product .p-tools a.btn::before,
#products-1 .product .p-tools a.btn::after,
#products-1 .product .p-tools button.btn::before,
#products-1 .product .p-tools button.btn::after,
#products-1 .product .p-tools button.btn.btn-cart::before,
#products-1 .product .p-tools button.btn.btn-cart::after,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button::before,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button::after {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #ffffff !important;
background: transparent !important;
}
#products-1 .product .p-tools a.btn:hover,
#products-1 .product .p-tools a.btn:focus,
#products-1 .product .p-tools button.btn:hover,
#products-1 .product .p-tools button.btn:focus,
#products-1 .product .p-tools button.btn.btn-cart:hover,
#products-1 .product .p-tools button.btn.btn-cart:focus,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button:hover,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button:focus {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
opacity: 0.7 !important;
}
/* --- Typografie: desktop --- */
@media (min-width: 992px) {
#products-1 .prices,
#products-1 .prices *,
#products-1 .price-final,
#products-1 .price-final *,
#products-1 .price,
#products-1 .name,
#products-1 .name *,
#products-1 a.name,
#products-1 a.name * {
font-size: 17px !important;
line-height: 1.45 !important;
}
#products-1 .availability,
#products-1 .availability * {
font-size: 15px !important;
line-height: 1.45 !important;
}
#products-1 .product .p-tools a.btn,
#products-1 .product .p-tools button.btn,
#products-1 .product .p-tools button.btn.btn-cart,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button {
font-size: 17px !important;
}
#products-1 .p-in {
padding-left: 22px !important;
padding-right: 22px !important;
}
}
/* --- Typografie: tablet --- */
@media (min-width: 641px) and (max-width: 991px) {
#products-1 .p-in {
padding-left: 14px !important;
padding-right: 14px !important;
}
#products-1 .name,
#products-1 .name *,
#products-1 .prices,
#products-1 .prices *,
#products-1 .product .p-tools a.btn,
#products-1 .product .p-tools button.btn {
font-size: 15px !important;
}
}
/* --- Typografie: mobil --- */
@media (max-width: 640px) {
.homepage-products-heading-1 {
padding-top: 30px !important;
padding-bottom: 16px !important;
}
#products-1 {
padding-bottom: 32px !important;
}
#products-1 .p-in {
padding-left: 10px !important;
padding-right: 10px !important;
}
#products-1 .product .p-tools a.btn,
#products-1 .product .p-tools button.btn,
#products-1 .product .p-tools button.btn.btn-cart,
#products-1 .product .p-tools button.btn.btn-cart.add-to-cart-button {
font-size: 14px !important;
padding: 5px 0 !important;
}
}
/* =========================================================
10. SEKCE "NABÍDKA PRODUKTŮ" (#products-2)
Stejný layout jako Novinky, ale na světlém pozadí.
Barvy textu se ZÁMĚRNĚ nepřepisují.
========================================================= */
#products-2 .product,
#products-2 .p,
#products-2 .p-in,
#products-2 .p-in-in,
#products-2 .p-bottom,
#products-2 .p-tools {
background: transparent !important;
box-shadow: none !important;
}
#products-2 .p-in {
box-sizing: border-box !important;
margin-top: 0 !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
#products-2 .p-in-in {
margin-top: 0 !important;
}
#products-2 .p-bottom {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
@media (min-width: 992px) {
#products-2 .prices,
#products-2 .prices *,
#products-2 .price-final,
#products-2 .price-final *,
#products-2 .price {
font-size: 17px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
#products-2 .name,
#products-2 .name *,
#products-2 a.name,
#products-2 a.name * {
font-size: 17px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
}
#products-2 .availability,
#products-2 .availability * {
font-size: 15px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
#products-2 .p-tools a.btn,
#products-2 .p-tools button.btn,
#products-2 .p-tools button.btn-cart,
#products-2 .p-tools .add-to-cart-button {
font-size: 17px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
#products-2 .p-in {
padding-left: 22px !important;
padding-right: 22px !important;
}
}
@media (min-width: 641px) and (max-width: 991px) {
#products-2 .p-in {
padding-left: 14px !important;
padding-right: 14px !important;
}
#products-2 .name,
#products-2 .name *,
#products-2 .prices,
#products-2 .prices *,
#products-2 .p-tools .btn {
font-size: 15px !important;
}
}
@media (max-width: 640px) {
#products-2 .p-in {
padding-left: 10px !important;
padding-right: 10px !important;
}
#products-2 .p-tools .btn {
font-size: 14px !important;
}
}
/* ---------------------------------------------------------
10.1 Varianty — POUZE sekce "Nabídka produktů" (#products-2)
---------------------------------------------------------
Přepisuje obecné homepage pravidlo s bílým textem.
Novinky (#products-1) zůstávají beze změny.
--------------------------------------------------------- */
#products-2 .widget-parameter-wrapper {
width: 100% !important;
}
#products-2 .widget-parameter-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
#products-2 .widget-parameter-value {
margin: 0 !important;
padding: 0 !important;
}
#products-2 .widget-parameter-value a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 30px !important;
padding: 6px 10px !important;
background: #ffffff !important;
border: 1px solid #c9c6c7 !important;
border-radius: 4px !important;
color: #1f1b20 !important;
-webkit-text-fill-color: #1f1b20 !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
#products-2 .widget-parameter-value a:hover,
#products-2 .widget-parameter-value a:focus {
background: #e53a24 !important;
border-color: #e53a24 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#products-2 .widget-parameter-more,
#products-2 .widget-parameter-more span {
color: #1f1b20 !important;
-webkit-text-fill-color: #1f1b20 !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
}
/* =========================================================
11. SIDEBAR — KATEGORIE
========================================================= */
aside.sidebar .box {
background: #1f1b20 !important;
}
.sidebar-left .box-categories,
.sidebar-left .box-categories .categories,
.sidebar-left .box-categories ul,
.sidebar-left .box-categories li,
.sidebar-left .box-categories .topic,
.sidebar-left .box-categories .topic > a,
.sidebar-left .box-categories .subcategories,
.sidebar-left .box-categories .subcategories li,
.sidebar-left .box-categories .subcategories li a {
background: #1f1b20 !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
.sidebar-left .box-categories a,
.sidebar-left .box-categories span,
.sidebar-left .box-categories strong,
.sidebar-left .box-categories div {
color: #ffffff !important;
}
/* Current category is marked by module 08 in krill-site.js (20261006a).
Native .active/.expanded also occur on ancestors: do not style them alike.
Inset shadows avoid changing indentation or moving the category tree. */
.sidebar-left .box-categories #categories a.krill-category-ancestor {
background: #29252a !important;
}
.sidebar-left .box-categories #categories a.krill-current-category,
.sidebar-left .box-categories #categories a.krill-current-category:hover,
.sidebar-left .box-categories #categories a.krill-current-category:focus-visible {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: #42282b !important;
box-shadow: inset 3px 0 0 #e53a24 !important;
}
.sidebar-left .box-categories #categories .topic > a:focus-visible,
.sidebar-left .box-categories #categories li > a:focus-visible {
outline: 2px solid #ff897b !important;
outline-offset: -2px !important;
}
/* Šipky a odrážky */
.sidebar-left .box-categories a::before,
.sidebar-left .box-categories a::after,
.sidebar-left .box-categories li::before,
.sidebar-left .box-categories li::after,
.sidebar-left .box-categories .topic::before,
.sidebar-left .box-categories .topic::after {
color: #ffffff !important;
border-color: #ffffff !important;
}
.sidebar-left .box-categories .expander,
.sidebar-left .box-categories .expandable {
color: #ffffff !important;
}
/* Jemné oddělení položek */
.sidebar-left .box-categories li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Hover — červená */
.sidebar-left .box-categories .categories a:hover,
.sidebar-left .box-categories .categories .topic > a:hover,
.sidebar-left .box-categories .categories li > a:hover {
color: #e53a24 !important;
-webkit-text-fill-color: #e53a24 !important;
}
.sidebar-left .box-categories .categories .topic > a:hover::before,
.sidebar-left .box-categories .categories .topic > a:hover::after,
.sidebar-left .box-categories .categories li > a:hover::before,
.sidebar-left .box-categories .categories li > a:hover::after {
color: #e53a24 !important;
-webkit-text-fill-color: #e53a24 !important;
border-color: #e53a24 !important;
}
/* Nadpis "Kategorie"
Pozn.: Shoptet používá .skip-link__wrapper (DVA podtržítka). */
.sidebar-left .box-categories h3.pageElement__heading,
.sidebar-left .box-categories .skip-link__wrapper,
.sidebar-left .box-categories .skip-link__wrapper h3 {
background: #1f1b20 !important;
color: #ffffff !important;
}
.sidebar-left .box-categories h3.pageElement__heading span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: transparent !important;
}
.sidebar-left .box-categories h3.pageElement__heading::before,
.sidebar-left .box-categories h3.pageElement__heading::after,
.sidebar-left .box-categories .skip-link__wrapper::before,
.sidebar-left .box-categories .skip-link__wrapper::after {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #ffffff !important;
}
/* =========================================================
12. SIDEBAR — FILTRY
========================================================= */
.sidebar-left .box-filters,
.sidebar-left .box-filters #filters-default-position,
.sidebar-left .box-filters .filters-wrapper,
.sidebar-left .box-filters #filters,
.sidebar-left .box-filters fieldset,
.sidebar-left .box-filters .form-group,
.sidebar-left .box-filters .filter-section,
.sidebar-left .box-filters .filter-section > div,
.sidebar-left #filters > div,
.sidebar-left #filters .filter-section,
.sidebar-left #filters .filter-section-parametric,
.sidebar-left #filters .filter-section-boolean {
background-color: #1f1b20 !important;
color: #ffffff !important;
border: 0 !important;
}
.sidebar-left #filters > div,
.sidebar-left #filters .filter-section,
.sidebar-left #filters .filter-section-parametric,
.sidebar-left #filters .filter-section-boolean {
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
/* Nadpisy filtrů */
.sidebar-left .box-filters .filters-wrapper > h4,
.sidebar-left #filters h4,
.sidebar-left #filters .filter-section h4,
.sidebar-left #filters .filter-section-parametric h4,
.sidebar-left #filters .filter-section-boolean h4 {
background: #1f1b20 !important;
color: #ffffff !important;
margin: 0 !important;
padding: 12px 15px !important;
border: 0 !important;
font-weight: 700 !important;
}
.sidebar-left .box-filters .filters-wrapper > h4 {
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.sidebar-left .box-filters .filters-wrapper > h4 *,
.sidebar-left .box-filters .filters-wrapper > h4 span {
color: #ffffff !important;
}
/* Texty a odkazy */
.sidebar-left #filters label,
.sidebar-left #filters span,
.sidebar-left #filters p,
.sidebar-left #filters strong,
.sidebar-left #filters .filter-label {
color: #ffffff !important;
}
.sidebar-left #filters a {
color: #ffffff !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.sidebar-left #filters a:hover,
.sidebar-left #filters label:hover,
.sidebar-left #filters h4:hover,
.sidebar-left #filters a:hover span,
.sidebar-left #filters label:hover span {
color: #e53a24 !important;
}
/* Šipky u nadpisů filtrů */
.sidebar-left #filters h4::before,
.sidebar-left #filters h4::after,
.sidebar-left #filters .filter-section h4::before,
.sidebar-left #filters .filter-section h4::after {
color: #ffffff !important;
border-color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.sidebar-left #filters h4:hover::before,
.sidebar-left #filters h4:hover::after,
.sidebar-left #filters .filter-section h4:hover::before,
.sidebar-left #filters .filter-section h4:hover::after {
color: #e53a24 !important;
border-color: #e53a24 !important;
-webkit-text-fill-color: #e53a24 !important;
}
/* Checkboxy a radia — POUZE v sidebaru s filtry.
Původní globální pravidlo dělalo bílé rámečky
i v košíku a objednávce (bílá na bílé = neviditelné). */
.sidebar-left #filters input[type="checkbox"],
.sidebar-left #filters input[type="radio"] {
border-color: #ffffff !important;
background-color: transparent !important;
}
.sidebar-left #filters input[type="checkbox"] + label::before,
.sidebar-left #filters input[type="radio"] + label::before {
border-color: #ffffff !important;
}
.sidebar-left #filters input[type="checkbox"]:checked,
.sidebar-left #filters input[type="radio"]:checked {
border-color: #e53a24 !important;
background-color: #e53a24 !important;
}
/* Cenový slider */
.sidebar-left #filters .slider-wrapper,
.sidebar-left #filters .slider-wrapper span,
.sidebar-left #filters .slider-wrapper strong {
color: #ffffff !important;
}
.sidebar-left #filters .ui-slider {
background: rgba(255, 255, 255, 0.35) !important;
}
.sidebar-left #filters .ui-slider-range {
background: #ffffff !important;
}
.sidebar-left #filters .ui-slider-handle {
background: #ffffff !important;
border-color: #ffffff !important;
}
.sidebar-left #filters .ui-slider-handle:hover,
.sidebar-left #filters .ui-slider-handle:focus {
background: #e53a24 !important;
border-color: #e53a24 !important;
}
/* Počty produktů u filtrů */
.sidebar-left #filters .filter-count,
.sidebar-left #filters .count {
color: rgba(255, 255, 255, 0.55) !important;
}
/* Tlačítko "Vymazat filtry" — hover */
#filters #clear-filters a:hover,
#filters #clear-filters a:focus {
background: #e53a24 !important;
background-color: #e53a24 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #e53a24 !important;
}
#filters #clear-filters a:hover *,
#filters #clear-filters a:focus * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
13. DLAŽDICE PODKATEGORIÍ
========================================================= */
.subcategories.with-image li a {
background: #1f1b20 !important;
}
.subcategories.with-image li a .text {
color: #ffffff !important;
}
/* Šipka v dlaždici — obrázková ikona, pouze filtr */
.subcategories.with-image li a::before {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* =========================================================
14. KATEGORIE — PRODUKTOVÉ KARTY
========================================================= */
.type-category .products-block.products .product .image {
background: #e8e6e6 !important;
}
.type-category #products .product,
.type-category #products .p,
.type-category #products .p-in,
.type-category #products .p-in-in,
.type-category #products .p-bottom,
.type-category #products .p-tools {
background: #e8e6e6 !important;
box-shadow: none !important;
}
/* Obrázek — odstranění mezery mezi obrázkem a texty */
@media (min-width: 992px) {
.type-category #products .product .p > a.image,
.type-category #products .product .p .image {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
background: #e8e6e6 !important;
}
.type-category #products .product .p > a.image img,
.type-category #products .product .p .image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* Textová část */
.type-category #products .p-in {
box-sizing: border-box !important;
margin-top: 0 !important;
padding: 0 16px 18px 16px !important;
}
.type-category #products .p-in-in {
margin: 0 !important;
padding: 0 !important;
}
.type-category #products .p-bottom {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
.type-category #products .ratings-wrapper {
margin-top: 5px !important;
margin-bottom: 0 !important;
}
/* Typografie — desktop */
@media (min-width: 992px) {
.type-category #products .prices,
.type-category #products .prices *,
.type-category #products .price,
.type-category #products .price *,
.type-category #products .price-final,
.type-category #products .price-final * {
font-size: 17px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
.type-category #products .name,
.type-category #products .name *,
.type-category #products a.name,
.type-category #products a.name * {
font-size: 17px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
}
.type-category #products .availability,
.type-category #products .availability * {
font-size: 15px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
.type-category #products .p-tools a,
.type-category #products .p-tools button,
.type-category #products .p-tools .btn {
font-size: 16px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
}
/* Typografie — tablet */
@media (min-width: 641px) and (max-width: 991px) {
.type-category #products .p-in {
padding: 0 14px 16px 14px !important;
}
.type-category #products .name,
.type-category #products .name *,
.type-category #products .prices,
.type-category #products .prices *,
.type-category #products .p-tools .btn {
font-size: 15px !important;
}
}
/* Typografie — mobil */
@media (max-width: 640px) {
.type-category #products .p-in {
padding: 0 10px 14px 10px !important;
}
.type-category #products .p-tools .btn {
font-size: 14px !important;
}
}
/* =========================================================
15. DETAIL PRODUKTU — OBECNÉ
========================================================= */
.type-detail .shp-tabs-wrapper {
border-top: 0 !important;
}
/* =========================================================
16. DETAIL PRODUKTU — PARAMETRY POD OBRÁZKEM
---------------------------------------------------------
Blok "Doplňkové parametry" přesouvá JavaScript
z tabu Popis do .p-image-wrapper (jen desktop).
Styluje se pouze přesunutá varianta
(.extended-description.krill-params--moved),
v tabu na mobilu zůstává původní vzhled šablony.
========================================================= */
.p-image-wrapper .krill-params-under-image {
margin: 28px 0 0 !important;
}
/* Karta */
.extended-description.krill-params--moved {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #ffffff !important;
font-family: "Inter", Arial, sans-serif;
}
/* Hlavička — tmavý pruh s červeným akcentem */
.extended-description.krill-params--moved > h3 {
position: relative;
margin: 0 !important;
padding: 17px 22px 17px 30px !important;
background: #1f1b20 !important;
color: #ffffff !important;
font-family: "Poppins", Arial, sans-serif;
font-size: 14px !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.extended-description.krill-params--moved > h3::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: #e53a24;
}
/* Zrušení podtržení nadpisu ze šablony */
.extended-description.krill-params--moved > h3::after {
display: none !important;
content: none !important;
background: none !important;
}
/* Tabulka */
.extended-description.krill-params--moved table.detail-parameters {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
background: #ffffff !important;
table-layout: fixed;
}
.extended-description.krill-params--moved table.detail-parameters tr {
border-bottom: 1px solid #d8d6d6 !important;
}
.extended-description.krill-params--moved
table.detail-parameters
tr:last-child {
border-bottom: 0 !important;
}
/* Zebra */
.extended-description.krill-params--moved
table.detail-parameters
tr:nth-child(even) {
background: #f5f4f4 !important;
}
/* Popisek parametru */
.extended-description.krill-params--moved table.detail-parameters th {
width: 48%;
padding: 13px 14px 13px 30px !important;
border: 0 !important;
background: transparent !important;
color: #6f6f72 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.35;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: left !important;
vertical-align: middle !important;
}
/* Hodnota parametru */
.extended-description.krill-params--moved table.detail-parameters td {
padding: 13px 24px 13px 14px !important;
border: 0 !important;
background: transparent !important;
color: #1f1b20 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4;
text-align: right !important;
vertical-align: middle !important;
word-break: break-word;
}
/* Odkaz v hodnotě (např. Kategorie) */
.extended-description.krill-params--moved table.detail-parameters td a {
color: #e53a24 !important;
text-decoration: none;
}
.extended-description.krill-params--moved table.detail-parameters td a:hover {
text-decoration: underline;
}
/* U uppercase popisku je dvojtečka nadbytečná */
.extended-description.krill-params--moved .row-header-label-colon {
display: none !important;
}
/* VOLITELNÉ: skrytí řádku "Kategorie"
(duplikuje drobečkovou navigaci) — odkomentuj:
.extended-description.krill-params--moved table.detail-parameters tr:first-child {
display: none !important;
}
*/
/* Pozadí oblasti se záložkami na detailu produktu
Pozn.: totéž je i v HTML kódu hlavičky.
Až to odtud budeš mazat, uprav i tam. */
.type-detail .shp-tabs-wrapper {
background: #e8e6e6 !important;
border-top-color: #e8e6e6 !important;
}
/* =========================================================
17. FOOTER / NEWSLETTER
========================================================= */
/* ARCHIVED 2026-10-16: former red homepage newsletter
#footer .custom-footer__newsletter.extended {
display: block !important;
box-sizing: border-box;
width: 100%;
max-width: 1740px;
margin: 0 auto 50px !important;
padding: 100px 15px !important;
background: #e53a24 !important;
text-align: center;
}
.newsletter {
background: #e53a24 !important;
}
END ARCHIVED */
body:not(.in-index) #footer .custom-footer__newsletter.extended {
display: block !important;
box-sizing: border-box;
width: 100%;
max-width: 1740px;
margin: 0 auto 50px !important;
padding: 100px 15px !important;
background: #e53a24 !important;
text-align: center;
}
body:not(.in-index) .newsletter {
background: #e53a24 !important;
}
/* =========================================================
18. OBJEDNÁVKOVÝ PROCES — košík / doprava a platba / údaje
---------------------------------------------------------
Platí pro body.ordering-process, tj. /kosik/,
/objednavka/krok-1/ a /objednavka/krok-2/.
Princip: šedý podklad (#E8E6E6), bílé karty s červeným
pruhem nahoře, tmavé texty, červená pouze jako akcent.
========================================================= */
/* ---------------------------------------------------------
18.1 Podklady — všechny obaly na KRILL šedou
Opal má bílé .cart-content i .cart-inner, proto je
zprůhledňujeme a necháme prosvítat šedé pozadí.
--------------------------------------------------------- */
body.ordering-process .content-wrapper.container,
body.ordering-process .content-wrapper-in,
body.ordering-process main.content,
body.ordering-process .content-inner,
body.ordering-process #cart-wrapper,
body.ordering-process .cart-inner,
body.ordering-process .cart-content,
body.ordering-process .cart-content.checkout-box-wrapper,
body.ordering-process .checkout-box,
body.ordering-process .order-summary,
body.ordering-process .cart-table,
body.ordering-process .cart-table tbody,
body.ordering-process .cart-table tr,
body.ordering-process .cart-table td {
background: transparent !important;
box-shadow: none !important;
}
body.ordering-process .overall-wrapper {
background: #e8e6e6 !important;
}
/* ---------------------------------------------------------
18.2 Kroky objednávky (Nákupní košík / Doprava & platba /
Informace o vás)
Šedé pozadí místo bílého, neaktivní kroky tmavé.
--------------------------------------------------------- */
body.ordering-process ol.cart-header li a span,
body.ordering-process ol.cart-header li strong span {
background: #e8e6e6 !important;
color: #1f1b20 !important;
font-family: "Poppins", Arial, sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
}
/* Aktivní krok — KRILL červená */
body.ordering-process ol.cart-header li.active strong span {
color: #e53a24 !important;
}
/* Hover na dokončených krocích */
body.ordering-process ol.cart-header li a:hover span {
color: #e53a24 !important;
}
/* Spojovací linka mezi kroky — jemná šedá */
body.ordering-process ol.cart-header::before,
body.ordering-process ol.cart-header::after {
background: #d8d6d6 !important;
border-color: #d8d6d6 !important;
}
/* Menší velikost na mobilu, aby se text nelámal */
@media (max-width: 640px) {
body.ordering-process ol.cart-header li a span,
body.ordering-process ol.cart-header li strong span {
font-size: 20px !important;
padding: 0 10px !important;
}
}
/* ---------------------------------------------------------
18.3 Popisky sloupců v košíku (POČET / SOUČET /
DOSTUPNOST / CENA ZA M. J.)
Opal je má #B0BACE na bílé — na šedé nejsou vidět.
--------------------------------------------------------- */
body.ordering-process .p-label {
background: #e8e6e6 !important;
color: #1f1b20 !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
}
/* ---------------------------------------------------------
18.4 Tabulka košíku
--------------------------------------------------------- */
body.ordering-process .cart-table tbody tr.removeable {
border-bottom: 1px solid #d8d6d6 !important;
}
body.ordering-process .cart-table tbody tr.removeable:last-child {
border-bottom: 0 !important;
}
/* Název produktu */
body.ordering-process .cart-table .p-name a.main-link {
color: #1f1b20 !important;
font-weight: 600 !important;
}
body.ordering-process .cart-table .p-name a.main-link:hover {
color: #e53a24 !important;
}
body.ordering-process .main-link-variant {
color: #6f6f72 !important;
font-weight: 400 !important;
}
/* Ceny */
body.ordering-process .cart-table .price-final {
color: #1f1b20 !important;
font-weight: 700 !important;
}
body.ordering-process .cart-table .unit-value {
color: #6f6f72 !important;
}
/* Množství */
body.ordering-process .quantity .amount {
background: #ffffff !important;
border: 1px solid #1f1b20 !important;
border-radius: 0 !important;
color: #1f1b20 !important;
font-weight: 700 !important;
}
body.ordering-process .quantity .increase,
body.ordering-process .quantity .decrease {
color: #1f1b20 !important;
background: transparent !important;
}
body.ordering-process .quantity .increase:hover,
body.ordering-process .quantity .decrease:hover {
color: #e53a24 !important;
background: transparent !important;
}
/* Odstranění položky */
body.ordering-process .remove-item {
background: transparent !important;
opacity: 0.55;
transition: opacity 0.15s ease;
}
body.ordering-process .remove-item:hover {
opacity: 1;
}
/* ---------------------------------------------------------
18.5 Karty (bílá plocha + červený pruh nahoře)
Pokrývá: Zvolte způsob dopravy, Zvolte způsob platby,
Osobní údaje, Fakturační adresa, poznámka, kontakt,
rekapitulace, souhrn v košíku.
--------------------------------------------------------- */
body.ordering-process .box.box-bg-default,
body.ordering-process .order-summary-inner,
body.ordering-process .cart-summary {
background: #ffffff !important;
border: 1px solid #d8d6d6 !important;
border-top: 3px solid #e53a24 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.ordering-process .order-summary-inner,
body.ordering-process .cart-summary {
padding: 22px 24px !important;
}
body.ordering-process .cart-summary {
margin-top: 24px !important;
}
/* Košík — pravý souhrnný box (CELKEM ZA ZBOŽÍ)
Stejné vnitřní odsazení jako ostatní bílé karty. */
body.ordering-process
.cart-content.summary-wrapper
> .box.box-sm.box-bg-default {
padding: 22px 24px !important;
}
body.ordering-process
.cart-content.summary-wrapper
> .box.box-sm.box-bg-default
.price-wrapper {
margin-bottom: 18px !important;
}
body.ordering-process
.cart-content.summary-wrapper
> .box.box-sm.box-bg-default
.next-step {
margin-top: 18px !important;
}
/* ---------------------------------------------------------
18.6 Nadpisy sekcí
--------------------------------------------------------- */
body.ordering-process .cart-content h2,
body.ordering-process .cart-summary h2,
body.ordering-process .order-summary-inner h2 {
margin: 0 0 20px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid #d8d6d6 !important;
color: #1f1b20 !important;
font-family: "Poppins", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Zrušení Opal červeného podtržení pod nadpisem
(nahrazuje ho spodní linka + červený pruh karty) */
body.ordering-process .cart-content h2::after,
body.ordering-process .cart-summary h2::after,
body.ordering-process .order-summary-inner h2::after {
display: none !important;
content: none !important;
background: none !important;
}
/* ---------------------------------------------------------
18.7 Výběr dopravy a platby
--------------------------------------------------------- */
body.ordering-process .shipping-billing-table .radio-wrapper {
border-bottom: 1px solid #d8d6d6 !important;
transition:
background-color 0.15s ease,
box-shadow 0.15s ease;
}
body.ordering-process .shipping-billing-table .radio-wrapper:last-child {
border-bottom: 0 !important;
}
body.ordering-process .shipping-billing-table .radio-wrapper:hover {
background: #f5f4f4 !important;
}
/* Zvolená možnost — jemné podbarvení + červený pruh vlevo.
:has() nepodporují starší prohlížeče; tam zůstane
pouze standardní zvýraznění radia, layout se nerozbije. */
body.ordering-process
.shipping-billing-table
.radio-wrapper:has(input:checked) {
background: #f5f4f4 !important;
box-shadow: inset 3px 0 0 0 #e53a24 !important;
}
/* Název dopravy / platby */
body.ordering-process .shipping-billing-name {
color: #1f1b20 !important;
font-weight: 700 !important;
}
/* Cena dopravy / platby */
body.ordering-process .payment-shipping-price {
color: #1f1b20 !important;
font-weight: 700 !important;
}
body.ordering-process .payment-shipping-price.for-free {
color: #e53a24 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Odkaz "Zvolte odběrné místo" */
body.ordering-process .sublabel a {
color: #e53a24 !important;
font-weight: 600 !important;
}
body.ordering-process .sublabel a.chosen {
color: #1f1b20 !important;
}
/* Nedostupná kombinace dopravy a platby */
body.ordering-process .not-possible-info {
color: #6f6f72 !important;
}
/* ---------------------------------------------------------
18.8 Formuláře (krok 2)
--------------------------------------------------------- */
body.ordering-process .form-control,
body.ordering-process select.form-control,
body.ordering-process textarea.form-control {
background: #ffffff !important;
border: 1px solid #d8d6d6 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #1f1b20 !important;
}
body.ordering-process .form-control:focus,
body.ordering-process select.form-control:focus,
body.ordering-process textarea.form-control:focus {
border-color: #1f1b20 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* Popisky polí */
body.ordering-process .form-group > label,
body.ordering-process .form-group .label {
color: #1f1b20 !important;
font-weight: 600 !important;
}
/* Povinné pole — KRILL červená */
body.ordering-process .required-asterisk::after,
body.ordering-process .required-asterisk--before::before {
color: #e53a24 !important;
}
/* Zaškrtávací políčka a radia */
body.ordering-process input[type="checkbox"] + label::before,
body.ordering-process input[type="radio"] + label::before {
border-color: #1f1b20 !important;
background-color: #ffffff !important;
}
body.ordering-process input[type="checkbox"]:checked + label::before,
body.ordering-process input[type="radio"]:checked + label::before {
border-color: #e53a24 !important;
}
/* Souhlasy a nápovědy */
body.ordering-process .consents .label,
body.ordering-process .helpNote,
body.ordering-process .additional-information {
color: #6f6f72 !important;
}
body.ordering-process .consents a {
color: #e53a24 !important;
}
/* ---------------------------------------------------------
18.9 Rekapitulace objednávky (pravý sloupec)
--------------------------------------------------------- */
body.ordering-process .order-summary-inner .cart-item {
border-bottom: 1px solid #edecec !important;
}
body.ordering-process .order-summary-inner .cart-item:last-child {
border-bottom: 0 !important;
}
body.ordering-process .cart-item-name a {
color: #1f1b20 !important;
}
body.ordering-process .cart-item-name a:hover {
color: #e53a24 !important;
}
body.ordering-process .cart-item-amount,
body.ordering-process .cart-item-amount .unit-value {
color: #6f6f72 !important;
}
body.ordering-process .cart-item-price {
color: #1f1b20 !important;
font-weight: 600 !important;
}
/* Doprava / platba v rekapitulaci */
body.ordering-process .recapitulation-single {
border-bottom: 1px solid #edecec !important;
}
body.ordering-process .recapitulation-single span {
color: #6f6f72 !important;
}
body.ordering-process .recapitulation-single strong {
color: #1f1b20 !important;
}
/* Mezisoučet */
body.ordering-process .order-summary-item.helper {
border-top: 1px solid #d8d6d6 !important;
}
body.ordering-process .order-summary-item.helper strong,
body.ordering-process .order-summary-item.helper div {
color: #1f1b20 !important;
}
/* Celkem k úhradě */
body.ordering-process .price-label.price-primary {
color: #6f6f72 !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.ordering-process .price.price-primary,
body.ordering-process .price.price-primary span {
color: #1f1b20 !important;
font-family: "Inter", Arial, sans-serif !important;
font-weight: 700 !important;
}
/* ---------------------------------------------------------
18.10 Kontaktní box v postranním panelu
--------------------------------------------------------- */
body.ordering-process .contact-box strong {
color: #1f1b20 !important;
}
body.ordering-process .contact-box a {
color: #1f1b20 !important;
}
body.ordering-process .contact-box a:hover {
color: #e53a24 !important;
}
/* ---------------------------------------------------------
18.11 Tlačítka
Opal má hover #2f5c65 (modrozelená) — mimo brand.
--------------------------------------------------------- */
body.ordering-process .next-step .btn-conversion,
body.ordering-process .cart-content .next-step .btn-conversion {
background: #1f1b20 !important;
border: 0 !important;
border-radius: 0 !important;
color: #ffffff !important;
}
body.ordering-process .next-step .btn-conversion:hover,
body.ordering-process .next-step .btn-conversion:focus,
body.ordering-process .cart-content .next-step .btn-conversion:hover,
body.ordering-process .cart-content .next-step .btn-conversion:focus {
background: #e53a24 !important;
color: #ffffff !important;
}
/* Tlačítko "Zpět" / "Zpět do obchodu" — pouze text */
body.ordering-process .next-step .next-step-back {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #6f6f72 !important;
}
body.ordering-process .next-step .next-step-back:hover,
body.ordering-process .next-step .next-step-back:focus {
background: transparent !important;
color: #e53a24 !important;
}
/* Přihlásit se do mého účtu */
body.ordering-process .login-button.btn-secondary {
background: transparent !important;
border: 1px solid #1f1b20 !important;
border-radius: 0 !important;
color: #1f1b20 !important;
font-weight: 600 !important;
}
body.ordering-process .login-button.btn-secondary:hover {
background: #1f1b20 !important;
color: #ffffff !important;
}
/* ---------------------------------------------------------
18.12 Dárky a slevy (košík)
--------------------------------------------------------- */
body.ordering-process .cart-summary .extra strong {
color: #1f1b20 !important;
}
body.ordering-process .cart-summary .extra span {
color: #6f6f72 !important;
}
/* =========================================================
19. OBJEDNÁVKOVÝ PROCES — dočištění zbytků Opalu
---------------------------------------------------------
Opal má pravidlo:
#checkoutContent .cart-content .co-box {
padding:20px !important; background:#f8f9fb;
border-radius:10px; margin-bottom:15px; }
které dělá modrošedé zakulacené rámy. .co-box je ale
u některých bloků POUZE obal karty (Fakturační adresa,
doplňkový blok) a u jiných je to karta sama
(Osobní údaje, Doprava, Platba) — proto se to musí
rozlišit přes :not(.box).
Tato sekce je záměrně až za sekcí 18 a některá její
pravidla přebíjí.
========================================================= */
/* ---------------------------------------------------------
19.1 .co-box jako pouhý obal — zrušit rám i zakulacení
--------------------------------------------------------- */
body.ordering-process #checkoutContent .co-box:not(.box) {
margin-bottom: 24px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
19.2 .co-box, který je zároveň karta (.box)
--------------------------------------------------------- */
body.ordering-process #checkoutContent .co-box.box {
margin-bottom: 24px !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #d8d6d6 !important;
border-top: 3px solid #e53a24 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
19.3 Doplňkový blok (poznámka / newsletter / registrace)
Obsahuje zaškrtávátka mimo jakoukoli .box, proto z něj
uděláme kartu a vnořené fieldsety zprůhledníme.
--------------------------------------------------------- */
body.ordering-process #checkoutContent .co-box.co-box-additional {
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #d8d6d6 !important;
border-top: 3px solid #e53a24 !important;
border-radius: 0 !important;
}
body.ordering-process .co-box-additional .box,
body.ordering-process .co-box-additional .box.box-bg-default,
body.ordering-process .co-box-additional fieldset {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.ordering-process .co-box-additional #note {
margin-top: 14px !important;
}
body.ordering-process .co-box-additional .stay-in-touch {
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid #edecec !important;
}
/* ---------------------------------------------------------
19.4 Žádná zakulacení nikde v objednávce
--------------------------------------------------------- */
body.ordering-process .box,
body.ordering-process .btn,
body.ordering-process button,
body.ordering-process .form-control,
body.ordering-process .radio-wrapper,
body.ordering-process .order-summary-inner,
body.ordering-process .cart-summary,
body.ordering-process .checkout-box,
body.ordering-process .co-box {
border-radius: 0 !important;
}
/* ---------------------------------------------------------
19.5 Zvolená doprava / platba
Shoptet přidává na zvolený řádek třídu .active,
:has() je jen pojistka. Odsazení, aby červený pruh
nebyl nalepený na kolečku radia.
--------------------------------------------------------- */
body.ordering-process .shipping-billing-table .radio-wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
border-left: 4px solid transparent !important;
box-shadow: none !important;
transition:
background-color 0.15s ease,
border-left-color 0.15s ease;
}
body.ordering-process .shipping-billing-table .radio-wrapper:hover {
background: #f7f6f6 !important;
}
body.ordering-process .shipping-billing-table .radio-wrapper.active,
body.ordering-process
.shipping-billing-table
.radio-wrapper:has(input:checked) {
background: #f5f4f4 !important;
border-left-color: #e53a24 !important;
box-shadow: none !important;
}
/* Logo dopravce — ať se nekrčí */
body.ordering-process .payment-logo img {
max-height: 28px !important;
width: auto !important;
}
/* ---------------------------------------------------------
19.6 Cena dopravy / platby
8× červené "ZDARMA" bylo příliš mnoho akcentu —
tmavá varianta. Pro vrácení červené stačí u
.for-free přepsat color na #E53A24.
--------------------------------------------------------- */
body.ordering-process .payment-shipping-price,
body.ordering-process .payment-shipping-price.for-free {
color: #1f1b20 !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* ---------------------------------------------------------
19.7 Tlačítko "Přihlásit se do mého účtu"
Opal mu nedává padding ani line-height, po nasazení
rámečku se scvrklo na 12 px vysoký pásek.
--------------------------------------------------------- */
body.ordering-process .login-button,
body.ordering-process .login-button.btn-secondary {
display: inline-block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 11px 22px !important;
background: transparent !important;
border: 1px solid #1f1b20 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #1f1b20 !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
body.ordering-process .login-button:hover,
body.ordering-process .login-button:focus,
body.ordering-process .login-button.btn-secondary:hover,
body.ordering-process .login-button.btn-secondary:focus {
background: #1f1b20 !important;
border-color: #1f1b20 !important;
color: #ffffff !important;
text-decoration: none !important;
}
/* ---------------------------------------------------------
19.8 Telefon — jednoduché sjednocení předvolby a čísla
---------------------------------------------------------
Záměrně NEPŘEPISUJEME vnitřní Shoptet prvky
.country-flags-inner, .country-flag, .shp-flag ani
.shp-flag-label. Shoptet tak dál řeší otevírání seznamu,
výběr země, zobrazení vlajky a předvolby nativně.
Pouze sjednotíme výšku, barvy a rámeček s ostatními poli.
--------------------------------------------------------- */
body.ordering-process .phone-combined-input .country-flags {
height: 44px !important;
background: #f5f4f4 !important;
border-color: #d8d6d6 !important;
border-radius: 0 !important;
}
body.ordering-process .phone-combined-input .js-phone-form-control {
height: 44px !important;
min-height: 44px !important;
background: #ffffff !important;
border-color: #d8d6d6 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.ordering-process .phone-combined-input:focus-within .country-flags,
body.ordering-process
.phone-combined-input:focus-within
.js-phone-form-control {
border-color: #1f1b20 !important;
}
/* ---------------------------------------------------------
19.9 Sjednocení výšky formulářových prvků
--------------------------------------------------------- */
body.ordering-process .form-control {
min-height: 44px !important;
}
/* =========================================================
20. OBJEDNÁVKOVÝ PROCES — dorovnání detailů
========================================================= */
/* ---------------------------------------------------------
20.1 Fakturační adresa = stejné odsazení jako Osobní údaje
---------------------------------------------------------
Osobní údaje jsou fieldset.box.co-box (padding z 19.2),
Fakturační adresa je div.co-box > fieldset.box, kde
vnořenému fieldsetu zbyl padding z Opalu. Selektor je
záměrně přes přímého potomka, aby se netýkal vnořeného
fieldsetu v doplňkovém bloku (poznámka).
--------------------------------------------------------- */
body.ordering-process #checkoutContent .co-box:not(.box) > .box,
body.ordering-process #checkoutContent .co-box:not(.box) > fieldset.box {
margin: 0 !important;
padding: 24px !important;
background: #ffffff !important;
border: 1px solid #d8d6d6 !important;
border-top: 3px solid #e53a24 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Doplňkový blok si drží nulový padding u vnořených částí */
body.ordering-process #checkoutContent .co-box-additional .box,
body.ordering-process #checkoutContent .co-box-additional fieldset {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.ordering-process #checkoutContent .co-box-additional .stay-in-touch {
padding-top: 14px !important;
border-top: 1px solid #edecec !important;
}
/* =========================================================
DETAIL PRODUKTU – BENEFIT BANNER / VÝHODY
4 položky na jednom řádku
========================================================= */
.type-detail .benefitBanner.position--benefitProduct {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 100% !important;
}
/* Jednotlivá výhoda */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__item {
display: flex !important;
align-items: center !important;
flex: 1 1 25% !important;
width: 25% !important;
min-width: 0 !important;
padding: 12px 16px !important;
margin: 0 !important;
}
/* Box s ikonou */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__picture {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 38px !important;
width: 38px !important;
height: 38px !important;
margin-right: 12px !important;
}
/* Samotná ikona */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__img {
width: auto !important;
height: auto !important;
max-width: 34px !important;
max-height: 34px !important;
object-fit: contain !important;
}
/* Textová část */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__content {
flex: 1 1 auto !important;
min-width: 0 !important;
font-family: "Inter", Arial, sans-serif !important;
}
/* Nadpis výhody */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__title {
display: block !important;
margin: 0 0 2px !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* Popisek */
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__data {
font-family: "Inter", Arial, sans-serif !important;
font-size: 11px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* =========================================================
TABLET
Na menší šířce dovolíme 2 × 2
========================================================= */
@media (max-width: 1000px) {
.type-detail .benefitBanner.position--benefitProduct {
flex-wrap: wrap !important;
}
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__item {
flex: 0 0 50% !important;
width: 50% !important;
}
}
/* =========================================================
MOBIL
Jedna výhoda na řádek
========================================================= */
@media (max-width: 560px) {
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__item {
flex: 0 0 100% !important;
width: 100% !important;
padding: 10px 12px !important;
}
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__title,
.type-detail .benefitBanner.position--benefitProduct .benefitBanner__data {
white-space: normal !important;
}
}
/* =========================================================
21. KRILL – POSTRANNÍ KONTAKTNÍ PANEL
Odkaz vede na /kontakty/
========================================================= */
.krill-shopping-help {
position: fixed !important;
top: 50% !important;
right: 0 !important;
z-index: 9999 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 46px !important;
min-height: 220px !important;
padding: 12px 8px !important;
background: #e53a24 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 0 !important;
border-radius: 6px 0 0 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
text-decoration: none !important;
transform: translateY(-50%) !important;
transition:
background-color 0.18s ease,
width 0.18s ease !important;
}
.krill-shopping-help::before {
content: "?" !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 24px !important;
width: 24px !important;
height: 24px !important;
border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 50% !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.krill-shopping-help__text {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
writing-mode: vertical-rl !important;
transform: rotate(180deg) !important;
}
.krill-shopping-help:hover,
.krill-shopping-help:focus {
background: #1f1b20 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
outline: none !important;
}
@media (max-width: 767px) {
.krill-shopping-help {
display: none !important;
}
}
/* =========================================================
22. KRILL – NATIVNÍ SHOPTET / OPAL "VÍCE"
---------------------------------------------------------
DŮLEŽITÉ:
- žádný JS zde nepřesouvá položky menu
- necháváme Shoptet, aby overflow položky přesunul sám
- pouze zajišťujeme viditelnost a barvy nativního helperu
========================================================= */
@media (min-width: 768px) {
#header .menu-helper {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer !important;
z-index: 1001 !important;
}
/*
* Zobraz helper pouze tehdy, když do něj Shoptet
* skutečně přesunul alespoň jednu položku.
*/
#header .menu-helper:has(> ul > li) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#header .menu-helper:not(:has(> ul > li)) {
display: none !important;
}
/* Text "Více" */
#header .menu-helper > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 0 10px !important;
background: transparent !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
opacity: 1 !important;
visibility: visible !important;
}
/*
* Nativní hamburger / ikona helperu.
* V Shoptet šablonách je kreslen přes ::after.
*/
#header .menu-helper::after {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background-color: transparent !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Hover */
#header .menu-helper:hover,
#header .menu-helper:hover > span,
#header .menu-helper:hover::after {
color: #e53a24 !important;
-webkit-text-fill-color: #e53a24 !important;
}
/* Dropdown s položkami, které se nevešly */
#header .menu-helper > ul {
z-index: 10000 !important;
background: #1f1b20 !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}
#header .menu-helper > ul > li {
background: #1f1b20 !important;
}
#header .menu-helper > ul > li > a,
#header .menu-helper > ul > li > a b,
#header .menu-helper > ul > li > a span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: #1f1b20 !important;
}
#header .menu-helper > ul > li > a:hover,
#header .menu-helper > ul > li > a:hover b,
#header .menu-helper > ul > li > a:hover span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: #e53a24 !important;
}
}
/* =========================================================
KRILL AIRCRAFT
HOMEPAGE — HERO + BRAND BANNERS
========================================================= */
/* =========================================================
1. ACCESSIBILITY / SEO
========================================================= */
.krill-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ARCHIVED 2026-10-16: legacy hero + stacked banners
/ * =========================================================
2. ŠÍŘKA CELÉ BANNEROVÉ SEKCE
========================================================= * /
/ * Desktop — o malinko užší než minule * /
@media (min-width: 1200px) {
body.in-index
.content-wrapper.homepage-box.before-carousel
> .content-wrapper-in
> .container {
width: calc(100% - 40px) !important;
max-width: 1880px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
/ * Tablet * /
@media (min-width: 768px) and (max-width: 1199px) {
body.in-index
.content-wrapper.homepage-box.before-carousel
> .content-wrapper-in
> .container {
width: calc(100% - 32px) !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
/ * =========================================================
3. HLAVNÍ SHOPTET LAYOUT
========================================================= * /
body.in-index
.content-wrapper.homepage-box.before-carousel
.banners-row.has-text-banner {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.banners-row.has-text-banner
> .col-sm-8,
body.in-index
.content-wrapper.homepage-box.before-carousel
.banners-row.has-text-banner
> .col-sm-4 {
float: none !important;
display: block !important;
width: 100% !important;
max-width: none !important;
flex: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/ * =========================================================
4. SHOPTET CAROUSEL WRAPPERY
========================================================= * /
body.in-index .content-wrapper.homepage-box.before-carousel #carousel {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
#carousel
.carousel-inner {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
#carousel
.carousel-inner
> .item {
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
#carousel
.carousel-inner
> .item
> span {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box !important;
}
/ * =========================================================
5. HERO — KRILL AIRCRAFT
========================================================= * /
.hero-banner-photo {
position: relative;
display: block !important;
width: 100% !important;
max-width: none !important;
/ * o něco vyšší než předtím * /
aspect-ratio: 1920 / 760;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e8e6e6 !important;
border: 0 !important;
color: inherit !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/ * =========================================================
6. HERO — FOTOGRAFIE
========================================================= * /
.hero-banner-photo__img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
/ * o chlup vyváženější kompozice * /
object-position: center 49% !important;
transition: transform 0.45s ease;
box-sizing: border-box !important;
}
@media (hover: hover) {
.hero-banner-photo:hover .hero-banner-photo__img {
transform: scale(1.01);
}
}
/ * =========================================================
7. HERO — BÍLÁ KARTA
========================================================= * /
body.in-index #carousel .hero-banner-photo .hero-banner-photo__card {
position: absolute !important;
z-index: 2 !important;
top: auto !important;
right: auto !important;
left: clamp(22px, 2vw, 38px) !important;
bottom: clamp(22px, 2vw, 38px) !important;
display: block !important;
width: 290px !important;
max-width: calc(100% - 44px) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 19px 20px !important;
background: #ffffff !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14) !important;
transform: none !important;
box-sizing: border-box !important;
}
/ * =========================================================
8. HERO — KRILL LOGO
========================================================= * /
/ * Logo zůstává celé viditelné i přes obecné styly obrázků v Opalu. * /
body.in-index #carousel .hero-banner-photo__heading {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 220px !important;
max-width: 100% !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 0 13px !important;
padding: 0 !important;
overflow: hidden !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
body.in-index #carousel .hero-banner-photo__logo {
position: static !important;
display: block !important;
width: 220px !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: left center !important;
transform: none !important;
box-sizing: border-box !important;
}
/ * fallback — pokud by zůstal textový title * /
.hero-banner-photo__title {
margin: 0 0 12px !important;
padding: 0 !important;
font-family: "Poppins", Arial, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.15;
color: #15171a !important;
}
/ * =========================================================
9. HERO — TEXT
========================================================= * /
body.in-index #carousel .hero-banner-photo__text {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 0 14px !important;
padding: 0 !important;
font-family: "Roboto", Arial, sans-serif;
font-size: 12.5px !important;
font-weight: 400;
line-height: 1.45 !important;
color: #555258 !important;
}
/ * =========================================================
10. HERO — TLAČÍTKO
========================================================= * /
body.in-index #carousel .hero-banner-photo__btn {
position: static !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 0 !important;
min-height: 37px !important;
margin: 0 !important;
padding: 9px 17px !important;
font-family: "Roboto", Arial, sans-serif;
font-size: 12px !important;
font-weight: 600;
line-height: 1.2 !important;
background: #e53a24 !important;
color: #ffffff !important;
border-radius: 3px !important;
box-sizing: border-box !important;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
@media (hover: hover) {
.hero-banner-photo:hover .hero-banner-photo__btn {
background: #1f1b20 !important;
}
}
/ * =========================================================
11. BANNERY POD HERO — WRAPPER
========================================================= * /
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 18px 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/ * =========================================================
12. DVA SLOUPCE
========================================================= * /
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 18px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners
> .banner-wrapper.half-banner {
float: none !important;
display: block !important;
flex: 1 1 0 !important;
width: calc(50% - 9px) !important;
max-width: calc(50% - 9px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.banner-wrapper.half-banner
> span {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/ * =========================================================
13. STACK V KAŽDÉM SLOUPCI
========================================================= * /
.brand-banner-stack {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/ * =========================================================
14. JEDNOTLIVÝ BRAND BANNER
========================================================= * /
.brand-banner {
position: relative;
display: block !important;
width: 100% !important;
max-width: none !important;
/ * o něco vyšší než předtím * /
aspect-ratio: 1920 / 1040;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #1f1b20;
border: 0 !important;
color: inherit !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/ * =========================================================
15. BRAND FOTOGRAFIE
========================================================= * /
.brand-banner__img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center 49% !important;
transition: transform 0.45s ease;
box-sizing: border-box !important;
}
@media (hover: hover) {
.brand-banner:hover .brand-banner__img {
transform: scale(1.012);
}
}
/ * =========================================================
16. BRAND — BÍLÁ KARTA
========================================================= * /
.brand-banner__card {
position: absolute !important;
z-index: 2;
top: auto !important;
right: auto !important;
left: 4.5% !important;
bottom: 6% !important;
display: block !important;
width: min(285px, 48%) !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 19px 20px !important;
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
box-sizing: border-box !important;
}
/ * =========================================================
17. BRAND LOGA
========================================================= * /
.brand-banner__heading {
position: relative;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 0 11px !important;
padding: 0 !important;
line-height: 1 !important;
}
.brand-banner__logo {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
max-width: 145px !important;
max-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: left center !important;
}
.brand-banner__logo--skywing {
max-width: 150px !important;
}
.brand-banner__logo--sebart {
max-width: 140px !important;
}
.brand-banner__logo--mvvs {
max-width: 122px !important;
}
/ * =========================================================
18. SPARE PARTS NADPIS
========================================================= * /
.brand-banner__title {
margin: 0 0 8px !important;
padding: 0 !important;
font-family: "Poppins", Arial, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #15171a !important;
}
/ * =========================================================
19. BRAND TEXT
========================================================= * /
.brand-banner__text {
margin: 0 0 13px !important;
padding: 0 !important;
font-family: "Roboto", Arial, sans-serif;
font-size: 12px;
line-height: 1.45;
color: #68666c !important;
}
/ * =========================================================
20. BRAND TLAČÍTKA
========================================================= * /
.brand-banner__btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 9px 16px !important;
font-family: "Roboto", Arial, sans-serif;
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
background: #1f1b20 !important;
color: #ffffff !important;
border-radius: 3px;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
@media (hover: hover) {
.brand-banner:hover .brand-banner__btn {
background: #e53a24 !important;
}
}
/ * =========================================================
21. TABLET
========================================================= * /
@media (min-width: 768px) and (max-width: 1199px) {
.hero-banner-photo {
aspect-ratio: 16 / 8.8;
}
body.in-index #carousel .hero-banner-photo .hero-banner-photo__card {
left: 22px !important;
bottom: 22px !important;
width: 270px !important;
max-width: calc(100% - 44px) !important;
padding: 18px 19px !important;
}
body.in-index #carousel .hero-banner-photo__heading {
width: 190px !important;
height: 31px !important;
min-height: 31px !important;
max-height: 31px !important;
}
body.in-index #carousel .hero-banner-photo__logo {
width: 190px !important;
}
body.in-index #carousel .hero-banner-photo__text {
font-size: 12px !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners {
gap: 16px !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners
> .banner-wrapper.half-banner {
width: calc(50% - 8px) !important;
max-width: calc(50% - 8px) !important;
}
.brand-banner-stack {
gap: 16px !important;
}
.brand-banner {
aspect-ratio: 16 / 9;
}
.brand-banner__card {
left: 4.5% !important;
bottom: 5.5% !important;
width: min(245px, 57%) !important;
padding: 17px 18px !important;
}
.brand-banner__logo {
max-width: 125px !important;
max-height: 29px !important;
}
.brand-banner__logo--skywing {
max-width: 130px !important;
}
.brand-banner__logo--sebart {
max-width: 122px !important;
}
.brand-banner__logo--mvvs {
max-width: 108px !important;
}
.brand-banner__text {
margin-bottom: 11px !important;
font-size: 11.5px;
}
.brand-banner__btn {
min-height: 34px;
padding: 8px 13px !important;
font-size: 11px;
}
}
/ * =========================================================
22. MOBIL
========================================================= * /
@media (max-width: 767px) {
body.in-index
.content-wrapper.homepage-box.before-carousel
> .content-wrapper-in
> .container {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
.hero-banner-photo {
display: flex !important;
flex-direction: column;
width: 100% !important;
aspect-ratio: auto !important;
background: transparent !important;
}
.hero-banner-photo__img {
position: static !important;
display: block !important;
flex: none;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
body.in-index #carousel .hero-banner-photo .hero-banner-photo__card {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 19px 18px !important;
background: #ffffff !important;
box-shadow: none !important;
}
body.in-index #carousel .hero-banner-photo__heading {
width: 180px !important;
max-width: 100% !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin-bottom: 12px !important;
}
body.in-index #carousel .hero-banner-photo__logo {
width: 180px !important;
}
body.in-index #carousel .hero-banner-photo__text {
margin-bottom: 15px !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
body.in-index #carousel .hero-banner-photo__btn {
display: flex !important;
width: 100% !important;
min-height: 42px !important;
padding: 12px 16px !important;
font-size: 13px !important;
text-align: center;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners {
margin-top: 18px !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners {
flex-direction: column !important;
gap: 18px !important;
}
body.in-index
.content-wrapper.homepage-box.before-carousel
.next-to-carousel-banners
.normal-banners-line.half-banners
> .banner-wrapper.half-banner {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
}
.brand-banner-stack {
gap: 18px !important;
}
.brand-banner {
display: flex !important;
flex-direction: column;
width: 100% !important;
aspect-ratio: auto !important;
background: transparent;
}
.brand-banner__img {
position: static !important;
display: block !important;
flex: none;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
.brand-banner__card {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 19px 18px !important;
box-shadow: none !important;
}
.brand-banner__heading {
margin-bottom: 11px !important;
}
.brand-banner__logo {
max-width: 138px !important;
max-height: 31px !important;
}
.brand-banner__logo--skywing {
max-width: 143px !important;
}
.brand-banner__logo--sebart {
max-width: 133px !important;
}
.brand-banner__logo--mvvs {
max-width: 118px !important;
}
.brand-banner__title {
font-size: 18px;
}
.brand-banner__text {
margin-bottom: 14px !important;
font-size: 13px;
line-height: 1.5;
}
.brand-banner__btn {
display: flex !important;
width: 100% !important;
min-height: 42px;
padding: 12px 16px !important;
font-size: 13px;
text-align: center;
}
}
/ * =========================================================
23. MALÉ TELEFONY
========================================================= * /
@media (max-width: 420px) {
body.in-index
.content-wrapper.homepage-box.before-carousel
> .content-wrapper-in
> .container {
padding-left: 12px !important;
padding-right: 12px !important;
}
body.in-index #carousel .hero-banner-photo .hero-banner-photo__card {
padding: 18px 16px !important;
}
body.in-index #carousel .hero-banner-photo__heading {
width: 170px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
}
body.in-index #carousel .hero-banner-photo__logo {
width: 170px !important;
}
.brand-banner__card {
padding: 18px 16px !important;
}
}
/ * =========================================================
24. REDUCED MOTION
========================================================= * /
@media (prefers-reduced-motion: reduce) {
.hero-banner-photo__img,
.brand-banner__img,
.hero-banner-photo__btn,
.brand-banner__btn {
transition: none !important;
}
}
END ARCHIVED */
/* =========================================================
KRILL AIRCRAFT
BAREVNÉ VARIANTY PRODUKTŮ
KARTY PRODUKTŮ + DETAIL PRODUKTU
========================================================= */
/* =========================================================
1. PRODUCT CARDS — WRAPPER PARAMETRU BARVA
========================================================= */
.products .product .widget-parameter-wrapper[data-parameter-name="Barva"] {
width: 100% !important;
margin-top: 12px !important;
}
/* =========================================================
2. PRODUCT CARDS — SEZNAM VARIANT
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-list {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* =========================================================
3. PRODUCT CARDS — JEDNOTLIVÁ POLOŽKA
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* =========================================================
4. PRODUCT CARDS — KLIKACÍ BOX
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant {
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
background: #f5f5f5 !important;
border: 1px solid #dddddd !important;
border-radius: 8px !important;
color: transparent !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: visible !important;
cursor: pointer;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
/* =========================================================
5. PRODUCT CARDS — ŠEDÝ HOVER
========================================================= */
@media (hover: hover) {
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant:hover {
background: #eeeeee !important;
border-color: #a9a9a9 !important;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-1px);
}
}
/* =========================================================
6. PRODUCT CARDS — FOCUS
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant:focus-visible {
outline: 2px solid #8d8d8d !important;
outline-offset: 2px !important;
}
/* =========================================================
7. PRODUCT CARDS — AKTIVNÍ VARIANTA
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value.selected
> a.krill-color-variant,
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value.active
> a.krill-color-variant,
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant.active {
background: #ececec !important;
border-color: #858585 !important;
box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.12) !important;
}
/* =========================================================
8. PRODUCT CARDS — BAREVNÉ KOLEČKO
========================================================= */
.krill-color-swatch {
position: relative;
display: block !important;
flex: none;
width: 29px !important;
height: 29px !important;
min-width: 29px !important;
min-height: 29px !important;
border-radius: 50% !important;
background: var(--krill-swatch-background, #777777) !important;
/* kolečko samotné nemá border */
border: none !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 0, 0, 0.12);
overflow: hidden !important;
box-sizing: border-box !important;
pointer-events: none;
transform: translateZ(0);
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
/* jemný plastický highlight */
.krill-color-swatch::after,
.krill-detail-color-swatch::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.17) 0%,
rgba(255, 255, 255, 0.06) 25%,
rgba(255, 255, 255, 0) 48%,
rgba(0, 0, 0, 0.04) 100%
);
pointer-events: none;
}
@media (hover: hover) {
a.krill-color-variant:hover .krill-color-swatch {
transform: scale(1.06);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13);
}
}
/* =========================================================
9. PRODUCT CARDS — SKRYTÝ PŮVODNÍ TEXT
========================================================= */
.krill-color-variant__label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =========================================================
10. "+ DALŠÍ"
========================================================= */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-more {
display: flex !important;
align-items: center !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 3px !important;
font-family: "Roboto", Arial, sans-serif;
font-size: 12px !important;
line-height: 1.2;
color: inherit !important;
}
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-more
a,
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-more
span {
color: inherit !important;
font-size: 12px !important;
text-decoration: none !important;
}
/* =========================================================
DETAIL PRODUKTU
========================================================= */
/* =========================================================
11. DETAIL — JEDNOTLIVÁ VARIANTA
========================================================= */
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
margin: 0 7px 8px 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
/* =========================================================
12. DETAIL — PŮVODNÍ INNER
========================================================= */
/*
* Tohle je důležité:
*
* Původní span ani obrázek nemažeme.
*
* Stále zůstávají součástí varianty,
* jen přes ně zobrazujeme naše kolečko.
*/
.type-detail
#simple-variants
.advanced-parameter-inner.krill-detail-color-ready {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* =========================================================
13. DETAIL — PŮVODNÍ OBRÁZEK
========================================================= */
/*
* Obrázek zůstává v DOM a Shoptet
* si dál zachovává jeho vazby.
*
* Pouze ho zákazník nevidí.
*/
.type-detail
#simple-variants
.advanced-parameter-inner.krill-detail-color-ready
> img {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
object-fit: cover !important;
}
/* =========================================================
14. DETAIL — NOVÉ BAREVNÉ KOLEČKO
========================================================= */
.krill-detail-color-swatch {
position: relative;
z-index: 2;
display: block !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
flex: none;
border-radius: 50% !important;
background: var(--krill-swatch-background, #777777) !important;
border: none !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 0, 0, 0.12);
overflow: hidden !important;
pointer-events: none !important;
box-sizing: border-box !important;
transform: translateZ(0);
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
/* =========================================================
15. DETAIL — DECENTNÍ ŠEDÝ HOVER
========================================================= */
@media (hover: hover) {
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option:hover {
background: #ededed !important;
box-shadow: 0 0 0 1px #c9c9c9 !important;
}
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option:hover
.krill-detail-color-swatch {
transform: scale(1.06);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
}
/* =========================================================
16. DETAIL — VYBRANÁ VARIANTA
========================================================= */
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option.is-selected {
background: #e9e9e9 !important;
box-shadow: 0 0 0 2px #888888 !important;
}
/* =========================================================
17. DETAIL — FOCUS KLÁVESNICE
========================================================= */
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option:focus-within {
outline: 2px solid #8b8b8b !important;
outline-offset: 2px !important;
}
/* =========================================================
18. DETAIL — POTLAČENÍ PŮVODNÍCH OBRYSŮ ŠABLONY
========================================================= */
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option
.advanced-parameter-inner {
border: none !important;
box-shadow: none !important;
}
/* =========================================================
19. MOBIL
========================================================= */
@media (max-width: 767px) {
/* produktové karty */
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-list {
gap: 7px !important;
}
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.krill-color-swatch {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
/* detail produktu */
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
margin-right: 6px !important;
}
.type-detail
#simple-variants
.advanced-parameter-inner.krill-detail-color-ready {
width: 43px !important;
height: 43px !important;
min-width: 43px !important;
min-height: 43px !important;
}
.krill-detail-color-swatch {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
}
}
/* =========================================================
20. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.krill-color-swatch,
.krill-detail-color-swatch,
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value
> a.krill-color-variant,
.type-detail
#simple-variants
label.advanced-parameter.krill-detail-color-option {
transition: none !important;
}
}
/* =========================================================
HOMEPAGE PRODUCT CARDS — LIMIT VARIANT A TYPOGRAFIE
========================================================= */
/* Skript označí šestou a další variantu; přepisuje starší !important. */
body.in-index
#products-1
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value.krill-card-variant--overflow,
body.in-index
#products-2
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-value.krill-card-variant--overflow {
display: none !important;
}
/* "+ další" je viditelné pouze tehdy, když produkt má více než 5 variant. */
body.in-index
#products-1
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more,
body.in-index
#products-2
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more {
display: none !important;
}
body.in-index
#products-1
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more.krill-card-variant-more--visible,
body.in-index
#products-2
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more.krill-card-variant-more--visible {
display: flex !important;
}
body.in-index
#products-1
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more,
body.in-index
#products-1
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more
* {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
body.in-index
#products-2
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more,
body.in-index
#products-2
.widget-parameter-wrapper[data-parameter-name="Barva"]
> .widget-parameter-more
* {
color: #1f1b20 !important;
-webkit-text-fill-color: #1f1b20 !important;
}
/* Běžné popisky karet používají Inter. */
body.in-index #products-1 .product .flags,
body.in-index #products-1 .product .flags *,
body.in-index #products-1 .product .availability,
body.in-index #products-1 .product .availability *,
body.in-index #products-1 .product .p-code,
body.in-index #products-1 .product .p-code *,
body.in-index #products-1 .product .p-desc,
body.in-index #products-1 .product .p-desc *,
body.in-index #products-1 .product .widget-parameter-wrapper,
body.in-index #products-1 .product .widget-parameter-wrapper *,
body.in-index #products-2 .product .flags,
body.in-index #products-2 .product .flags *,
body.in-index #products-2 .product .availability,
body.in-index #products-2 .product .availability *,
body.in-index #products-2 .product .p-code,
body.in-index #products-2 .product .p-code *,
body.in-index #products-2 .product .p-desc,
body.in-index #products-2 .product .p-desc *,
body.in-index #products-2 .product .widget-parameter-wrapper,
body.in-index #products-2 .product .widget-parameter-wrapper * {
font-family: "Inter", Arial, sans-serif !important;
}
/* Název, cena a akce Detail / Do košíku používají Poppins. */
body.in-index #products-1 .product .name,
body.in-index #products-1 .product .name *,
body.in-index #products-1 .product .prices,
body.in-index #products-1 .product .prices *,
body.in-index #products-1 .product .price,
body.in-index #products-1 .product .price *,
body.in-index #products-1 .product .price-final,
body.in-index #products-1 .product .price-final *,
body.in-index #products-1 .product .p-tools .btn,
body.in-index #products-1 .product .p-tools .btn *,
body.in-index #products-2 .product .name,
body.in-index #products-2 .product .name *,
body.in-index #products-2 .product .prices,
body.in-index #products-2 .product .prices *,
body.in-index #products-2 .product .price,
body.in-index #products-2 .product .price *,
body.in-index #products-2 .product .price-final,
body.in-index #products-2 .product .price-final *,
body.in-index #products-2 .product .p-tools .btn,
body.in-index #products-2 .product .p-tools .btn * {
font-family: "Poppins", Arial, sans-serif !important;
}
/* =========================================================
HLAVNÍ NAVIGACE — TYPOGRAFIE A RESPONZIVNÍ MOBILNÍ MENU
========================================================= */
/* Všechny hlavní položky včetně nativního helperu "Více". */
#navigation ul.menu-level-1 > li > a,
#navigation ul.menu-level-1 > li > a > b,
#header .menu-helper > span,
#header .menu-helper > ul > li > a,
#header .menu-helper > ul > li > a > b {
font-family: "Poppins", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
}
@media (min-width: 768px) {
#header #navigation ul.menu-level-1 > li > a:hover,
#header #navigation ul.menu-level-1 > li > a:focus-visible,
#header #navigation ul.menu-level-1 > li.exp > a,
#header #navigation ul.menu-level-1 > li > a:hover > b,
#header #navigation ul.menu-level-1 > li > a:focus-visible > b,
#header #navigation ul.menu-level-1 > li.exp > a > b {
color: #e53a24 !important;
-webkit-text-fill-color: #e53a24 !important;
}
}
@media (max-width: 767px) {
:root {
--krill-mobile-nav-width: clamp(280px, 88vw, 360px);
}
#navigation {
width: var(--krill-mobile-nav-width) !important;
max-width: 100vw !important;
left: -100vw !important;
height: 100vh !important;
height: 100dvh !important;
background: #1f1b20 !important;
overscroll-behavior: contain;
}
.navigation-window-visible #header #navigation {
left: 0 !important;
}
.navigation-window-visible .overall-wrapper::after {
width: calc(100% - var(--krill-mobile-nav-width)) !important;
background: rgba(15, 13, 16, 0.78) !important;
}
#navigation .navigation-in,
#navigation ul.menu-level-1,
#navigation ul.menu-level-1 > li,
#navigation ul.menu-level-1 > li.ext.exp,
#navigation ul.menu-level-1 > li .menu-level-2,
#navigation ul.menu-level-1 > li .menu-level-2 > li,
#navigation ul.menu-level-1 > li .menu-level-2 > li > div,
#navigation
ul.menu-level-1
> li
.menu-level-2
> li.has-third-level.clicked
> div,
#navigation .menu-level-3,
#navigation .navigationActions {
background: #1f1b20 !important;
}
#navigation ul.menu-level-1 > li > a,
#navigation ul.menu-level-1 > li.ext.exp > a {
min-height: 44px !important;
background: transparent !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#navigation ul.menu-level-1 > li.ext.exp > a {
background: rgba(229, 58, 36, 0.16) !important;
border-color: #e53a24 !important;
}
/* Opal používá šipku rozbalené položky také jako mobilní tlačítko zpět. */
#navigation ul.menu-level-1 > li.ext.exp > a .submenu-arrow {
background: #1f1b20 !important;
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.14) !important;
}
#navigation ul.menu-level-1 > li.ext.exp > a .submenu-arrow::after {
filter: brightness(0) invert(1);
}
#navigation .menu-level-2 a,
#navigation .menu-level-2 a > span,
#navigation .menu-level-3 a,
#navigation .menu-level-3 a > span,
#navigation .navigationActions a,
#navigation .navigationActions a > span {
font-family: "Inter", Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.35 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: transparent !important;
}
#navigation .menu-level-2 > li > div > a {
font-weight: 600 !important;
}
#navigation .menu-level-3 a {
color: rgba(255, 255, 255, 0.78) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
font-weight: 500 !important;
}
#navigation
ul.menu-level-1
> li
.menu-level-2
> li.has-third-level.clicked
> div
> a {
background: rgba(229, 58, 36, 0.16) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#navigation
ul.menu-level-1
> li
.menu-level-2
> li.has-third-level
> div
> a::after {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#navigation .navigation-close {
z-index: 20 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: transparent !important;
}
#navigation .navigation-close::before {
content: "\e912" !important;
display: block !important;
font-family: shoptet !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
}
#navigation .navigation-close::after {
content: none !important;
display: none !important;
}
}
/* Current category in the existing mobile menu. Keep native expand/back
controls, sizing and desktop navigation intact. */
@media (max-width: 767px) {
#header #navigation a.krill-category-ancestor,
#header #navigation li.ext.exp > a.krill-category-ancestor,
#header #navigation .menu-level-2 > li.has-third-level.clicked > div > a.krill-category-ancestor {
background: #29252a !important;
}
#header #navigation a.krill-current-category,
#header #navigation li.ext.exp > a.krill-current-category,
#header #navigation .menu-level-2 > li.has-third-level.clicked > div > a.krill-current-category {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: #42282b !important;
box-shadow: inset 3px 0 0 #e53a24 !important;
}
#header #navigation a.krill-current-category > b,
#header #navigation a.krill-current-category > span:not(.submenu-arrow) {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#header #navigation a[data-testid="headerMenuItem"]:not(.menu-image):hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
#header #navigation a[data-testid="headerMenuItem"]:not(.menu-image):focus-visible {
outline: 2px solid #ff897b !important;
outline-offset: -2px !important;
}
}
/* PŘIHLÁŠENÍ */
#header .top-nav-button-login::before {
background-image: url("/user/documents/imgs/person_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 24px 24px !important;
}
/* KOŠÍK */
#header .cart-count::before {
background-image: url("/user/documents/imgs/shopping_cart_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 24px 24px !important;
}
#header .search-toggle {
background-image: url("/user/documents/imgs/search_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
width: 30px !important;
height: 30px !important;
}
#header .search-toggle:hover,
#header .search-toggle:focus,
#header .search-toggle:active {
background-image: url("/user/documents/imgs/search_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 22px 22px !important;
}
/* Produktový detail – pozadí oblasti se záložkami */
.type-detail .shp-tabs-wrapper {
background: #e8e6e6 !important;
border-top-color: #e8e6e6 !important;
}
/* =========================================================
DETAIL PRODUKTU – GALERIE 16:9 BEZ BÍLÝCH PRUHŮ
========================================================= */
body.type-detail .p-image-wrapper .p-image {
position: relative !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e8e6e6 !important;
}
body.type-detail .p-image #wrap {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e8e6e6 !important;
}
/* Hlavní odkaz obrázku – PŘEBÍJÍ Opal #wrap a */
body.type-detail .p-image #wrap > a.p-main-image,
body.type-detail .p-image > a.p-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e8e6e6 !important;
}
/* Samotná fotografie */
body.type-detail .p-image #wrap > a.p-main-image > img,
body.type-detail .p-image > a.p-main-image > img {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
background: #e8e6e6 !important;
}
/* CloudZoom průhledná vrstva musí kopírovat nový rozměr */
body.type-detail .p-image #wrap .mousetrap {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* Pro jistotu odstraníme případné bílé pozadí celé levé části */
body.type-detail .p-image-wrapper {
background: #e8e6e6 !important;
}
/* =========================================================
KATEGORIE – PRODUKTOVÉ OBRÁZKY BEZ BÍLÝCH PRUHŮ
OPAL OVERRIDE
========================================================= */
/* 1. Přesný viewport produktového obrázku */
body.type-category #products.products-block .product .p > a.image {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e8e6e6 !important;
line-height: 0 !important;
}
/* 2. PŘÍMO samotný obrázek – přebití OPALu */
body.type-category #products.products-block .product .p > a.image > img,
body.type-category
#products.products-block
.product
.p
> a.image
> picture
> img,
body.type-category
#products.products-block
.product
.p
> a.image
img.swap-image {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
background: #e8e6e6 !important;
transform: scale(1.01) !important;
z-index: 0 !important;
}
/* 3. Badge Akce / Novinka / Tip musí zůstat nad obrázkem */
body.type-category #products.products-block .product .flags {
position: absolute !important;
z-index: 5 !important;
}
/* 4. Odstranění případného prostoru vytvořeného šablonou */
body.type-category #products.products-block .product .image::before,
body.type-category #products.products-block .product .image::after {
display: none !important;
content: none !important;
}
/* 5. Podklad karty – kdyby někde přece jen vzniklo volné místo,
bude KRILL šedé, nikoliv bílé */
body.type-category #products.products-block .product .p,
body.type-category #products.products-block .product .image {
background-color: #e8e6e6 !important;
}
/* KRILL variant consistency v2. Native checkout and image mapping stay authoritative. */
body.type-detail .krill-vp {
margin: 0 0 20px;
}
body.type-detail .krill-vg + .krill-vg {
margin-top: 16px;
}
body.type-detail .krill-vl {
display: block;
margin: 0 0 9px;
font:
700 15px Poppins,
Arial,
sans-serif;
color: #222;
}
body.type-detail .krill-vo {
display: flex;
flex-wrap: wrap;
gap: 0 7px;
}
body.type-detail .krill-vc {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 52px !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
box-sizing: border-box !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none !important;
cursor: pointer;
transform: none !important;
}
body.type-detail .krill-vs {
position: relative;
display: block !important;
flex: 0 0 38px !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 50% !important;
background: var(--krill-swatch) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0, 0, 0, 0.12) !important;
overflow: hidden;
pointer-events: none;
transition: transform 0.16s ease;
}
body.type-detail .krill-vs:after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.17),
rgba(255, 255, 255, 0.06) 25%,
transparent 48%,
rgba(0, 0, 0, 0.04)
);
}
body.type-detail .krill-vc:hover {
background: #ededed !important;
box-shadow: 0 0 0 1px #c9c9c9 !important;
}
body.type-detail .krill-vc:hover .krill-vs {
transform: scale(1.06);
}
body.type-detail .krill-vc.active {
background: #e9e9e9 !important;
box-shadow: 0 0 0 2px #888 !important;
}
body.type-detail .krill-vb {
min-height: 44px;
margin-bottom: 8px;
padding: 9px 16px;
border: 1px solid #b9b9b9;
border-radius: 4px;
background: #fff;
color: #222;
font:
600 14px Poppins,
Arial,
sans-serif;
white-space: normal;
}
body.type-detail .krill-vb.active {
border-color: #b62a20;
background: #b62a20;
color: #fff;
}
body.type-detail .krill-vc:focus-visible,
body.type-detail .krill-vb:focus-visible {
outline: 2px solid #8b8b8b !important;
outline-offset: 3px;
}
body.type-detail .krill-vb:disabled {
cursor: not-allowed;
opacity: 0.42;
}
body.type-detail #simple-variants.krill-src > span,
body.type-detail #simple-variants.krill-src > label {
display: none !important;
}
body
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-more.no-display,
body
.products
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
[hidden] {
display: none !important;
}
body .products .product .krill-variant-overflow {
display: none !important;
}
body
.products
.product
.widget-parameter-wrapper.krill-variant-list-managed[data-parameter-name="Barva"]
.widget-parameter-more {
display: none !important;
}
body .products .product .krill-variant-more {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 6px;
font:
500 12px Inter,
Arial,
sans-serif;
text-decoration: underline;
color: inherit;
}
@media (max-width: 767px) {
body.type-detail .krill-vc {
flex-basis: 48px !important;
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
}
body.type-detail .krill-vs {
flex-basis: 36px !important;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
}
body.type-detail .krill-vo {
gap: 0 6px;
}
}
@media (prefers-reduced-motion: reduce) {
body.type-detail .krill-vs {
transition: none;
}
}
body
.products.products-block
.product
.widget-parameter-wrapper[data-parameter-name="Barva"]
.widget-parameter-list
> .widget-parameter-value.krill-variant-overflow {
display: none !important;
}
/* ==========================================================
KRILL / SKYWING PRODUCT DESCRIPTION
Scoped pouze na #description .krill-product-content
========================================================== */
#description .krill-product-content {
--krill-red: #e53a24;
--krill-dark: #1f1b20;
--krill-grey: #e8e6e6;
--krill-white: #ffffff;
--krill-text: #222222;
--krill-muted: #6f6f72;
--krill-border: #d8d6d6;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--krill-text);
font-family: "Inter", Arial, sans-serif;
box-sizing: border-box;
}
#description .krill-product-content *,
#description .krill-product-content *::before,
#description .krill-product-content *::after {
box-sizing: border-box;
}
/* ==========================================================
SPOLEČNÉ SEKCE
========================================================== */
#description .krill-product-section {
margin: 0;
padding: 64px 48px;
background: #ffffff;
border-bottom: 1px solid var(--krill-border);
}
#description .krill-product-section--light {
background: var(--krill-grey);
}
#description .krill-product-section--dark {
background: var(--krill-dark);
border-bottom: 0;
}
#description .krill-product-section--shipping {
background: var(--krill-grey);
}
/* ==========================================================
ÚVOD
========================================================== */
#description .krill-product-intro {
position: relative;
padding: 72px 48px;
overflow: hidden;
background: var(--krill-dark);
color: var(--krill-white);
}
#description .krill-product-intro::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--krill-red);
}
#description .krill-product-intro__eyebrow {
margin-bottom: 14px;
color: var(--krill-red);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.16em;
}
#description .krill-product-intro__title {
margin: 0 0 24px !important;
color: var(--krill-white) !important;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 700;
line-height: 1.12;
}
#description .krill-product-intro__lead {
max-width: 900px;
margin: 0 !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 17px;
line-height: 1.7;
}
#description .krill-product-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-top: 48px;
background: rgba(255, 255, 255, 0.16);
}
#description .krill-product-stat {
display: flex;
flex-direction: column;
padding: 24px 22px;
background: rgba(255, 255, 255, 0.045);
}
#description .krill-product-stat__label {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#description .krill-product-stat__value {
color: var(--krill-white);
font-size: 20px;
font-weight: 700;
}
#description .krill-product-stat__note {
margin-top: 4px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
}
/* ==========================================================
NADPISY SEKCÍ
========================================================== */
#description .krill-product-heading {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 36px;
}
#description .krill-product-heading__number {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
background: var(--krill-red);
color: var(--krill-white);
font-size: 13px;
font-weight: 800;
}
#description .krill-product-heading__overline {
display: block;
margin-bottom: 5px;
color: var(--krill-red);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
}
#description .krill-product-heading h3 {
margin: 0 !important;
color: var(--krill-dark) !important;
font-family: "Poppins", Arial, sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.2;
}
#description .krill-product-heading--dark h3 {
color: var(--krill-white) !important;
}
/* ==========================================================
FEATURES
========================================================== */
#description .krill-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--krill-border);
}
#description .krill-feature {
display: flex;
gap: 16px;
padding: 22px 24px 22px 0;
border-bottom: 1px solid var(--krill-border);
}
#description .krill-feature:nth-child(odd) {
padding-right: 36px;
}
#description .krill-feature:nth-child(even) {
padding-left: 36px;
border-left: 1px solid var(--krill-border);
}
#description .krill-feature__mark {
width: 10px;
height: 10px;
flex: 0 0 10px;
margin-top: 6px;
background: var(--krill-red);
}
#description .krill-feature strong {
display: block;
margin-bottom: 6px;
color: var(--krill-dark);
font-size: 15px;
font-weight: 700;
}
#description .krill-feature p {
margin: 0 !important;
color: var(--krill-muted) !important;
font-size: 14px;
line-height: 1.55;
}
/* ==========================================================
TURBÍNY
========================================================== */
#description .krill-turbine-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
#description .krill-turbine-card {
display: flex;
flex-direction: column;
min-height: 180px;
padding: 30px;
background: var(--krill-dark);
color: var(--krill-white);
}
#description .krill-turbine-card--accent {
background: var(--krill-red);
}
#description .krill-turbine-card__label {
margin-bottom: 22px;
color: rgba(255, 255, 255, 0.65);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
#description .krill-turbine-card strong {
margin-bottom: 10px;
color: var(--krill-white);
font-family: "Poppins", Arial, sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 1;
}
#description .krill-turbine-card__description {
margin-top: auto;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
}
/* ==========================================================
TABULKA
========================================================== */
#description .krill-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#description .krill-table {
width: 100%;
min-width: 660px;
margin: 0 !important;
border-collapse: collapse;
border: 0 !important;
}
#description .krill-table thead {
background: var(--krill-dark);
}
#description .krill-table th {
padding: 16px 18px !important;
border: 0 !important;
color: var(--krill-white) !important;
font-size: 13px;
font-weight: 700;
text-align: left;
}
#description .krill-table td {
padding: 16px 18px !important;
border: 0 !important;
border-bottom: 1px solid var(--krill-border) !important;
background: var(--krill-white);
color: var(--krill-text) !important;
font-size: 14px;
}
#description .krill-table tbody tr:nth-child(even) td {
background: #f5f4f4;
}
#description .krill-table strong {
color: var(--krill-dark) !important;
}
/* ==========================================================
VÝCHYLKY
========================================================== */
#description .krill-throws-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
#description .krill-throws-card {
overflow: hidden;
background: #ffffff;
}
#description .krill-throws-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 20px;
background: #343035;
color: #ffffff;
}
#description .krill-throws-card__header--red {
background: var(--krill-red);
}
#description .krill-throws-card__header span {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
}
#description .krill-throws-card__header strong {
color: #ffffff;
font-size: 15px;
}
#description .krill-throws-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 20px;
border-bottom: 1px solid var(--krill-border);
color: var(--krill-text);
}
#description .krill-throws-row:last-child {
border-bottom: 0;
}
#description .krill-throws-row span {
font-size: 14px;
}
#description .krill-throws-row strong {
color: var(--krill-dark);
font-size: 14px;
text-align: right;
}
/* ==========================================================
OBSAH BALENÍ
========================================================== */
#description .krill-package-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 36px;
}
#description .krill-package-item {
position: relative;
padding: 15px 15px 15px 26px;
border-bottom: 1px solid var(--krill-border);
color: var(--krill-text);
font-size: 14px;
line-height: 1.45;
}
#description .krill-package-item::before {
content: "";
position: absolute;
top: 21px;
left: 4px;
width: 8px;
height: 8px;
background: var(--krill-red);
}
/* ==========================================================
PŘEPRAVA
========================================================== */
#description .krill-shipping-intro {
margin: -12px 0 28px !important;
color: var(--krill-muted) !important;
font-size: 14px;
}
#description .krill-shipping-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
#description .krill-shipping-card {
overflow: hidden;
background: #ffffff;
}
#description .krill-shipping-card__top {
display: flex;
flex-direction: column;
padding: 22px 24px;
background: var(--krill-dark);
}
#description .krill-shipping-card__top span {
margin-bottom: 4px;
color: var(--krill-red);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
}
#description .krill-shipping-card__top strong {
color: #ffffff;
font-size: 18px;
}
#description .krill-shipping-card__data {
display: grid;
grid-template-columns: 2fr 1fr;
}
#description .krill-shipping-card__data > div {
display: flex;
flex-direction: column;
padding: 22px 24px;
border-right: 1px solid var(--krill-border);
}
#description .krill-shipping-card__data > div:last-child {
border-right: 0;
}
#description .krill-shipping-card__data span {
margin-bottom: 7px;
color: var(--krill-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
#description .krill-shipping-card__data strong {
color: var(--krill-dark);
font-size: 16px;
}
#description .krill-shipping-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
padding: 20px 24px;
background: var(--krill-red);
color: #ffffff;
}
#description .krill-shipping-total span {
font-size: 14px;
font-weight: 600;
}
#description .krill-shipping-total strong {
color: #ffffff;
font-family: "Poppins", Arial, sans-serif;
font-size: 22px;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 991px) {
#description .krill-product-intro,
#description .krill-product-section {
padding-left: 32px;
padding-right: 32px;
}
#description .krill-product-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#description .krill-feature-grid {
grid-template-columns: 1fr;
}
#description .krill-feature,
#description .krill-feature:nth-child(odd),
#description .krill-feature:nth-child(even) {
padding-left: 0;
padding-right: 0;
border-left: 0;
}
}
/* ==========================================================
MOBIL
========================================================== */
@media (max-width: 640px) {
#description .krill-product-intro {
padding: 42px 20px;
}
#description .krill-product-section {
padding: 42px 20px;
}
#description .krill-product-intro__title {
font-size: 28px;
}
#description .krill-product-intro__lead {
font-size: 15px;
line-height: 1.6;
}
#description .krill-product-stats {
grid-template-columns: 1fr 1fr;
margin-top: 32px;
}
#description .krill-product-stat {
padding: 18px 15px;
}
#description .krill-product-stat__value {
font-size: 16px;
}
#description .krill-product-heading {
gap: 12px;
margin-bottom: 28px;
}
#description .krill-product-heading__number {
width: 36px;
height: 36px;
flex-basis: 36px;
}
#description .krill-product-heading h3 {
font-size: 22px;
}
#description .krill-turbine-grid,
#description .krill-throws-grid,
#description .krill-shipping-grid {
grid-template-columns: 1fr;
}
#description .krill-turbine-card {
min-height: 150px;
padding: 24px 20px;
}
#description .krill-turbine-card strong {
font-size: 30px;
}
#description .krill-package-list {
grid-template-columns: 1fr;
}
#description .krill-shipping-card__data {
grid-template-columns: 1fr;
}
#description .krill-shipping-card__data > div {
border-right: 0;
border-bottom: 1px solid var(--krill-border);
}
#description .krill-shipping-card__data > div:last-child {
border-bottom: 0;
}
#description .krill-shipping-total {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
/* ==========================================================
MALÉ TELEFONY
========================================================== */
@media (max-width: 420px) {
#description .krill-product-stats {
grid-template-columns: 1fr;
}
#description .krill-throws-row {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
#description .krill-throws-row strong {
text-align: left;
}
}
/* Shared typography and safe layout; limited to the actual long description. */
#description .krill-product-content {
font-family: "Inter", Arial, sans-serif !important;
font-size: 15px;
line-height: 1.65;
overflow-wrap: anywhere;
min-width: 0;
}
#description .krill-product-content :is(h1, h2, h3, h4, h5, h6),
#description .krill-product-stat__value,
#description .krill-feature strong,
#description .krill-shipping-card__top strong {
font-family: "Poppins", Arial, sans-serif !important;
}
#description .krill-product-content :is(p, li, td, th) {
font-family: "Inter", Arial, sans-serif;
}
#description .krill-product-content img {
max-width: 100%;
height: auto;
}
#description .krill-product-content iframe {
max-width: 100%;
}
#description .krill-product-content a {
text-decoration: underline;
text-underline-offset: 3px;
}
#description .krill-product-content :focus-visible {
outline: 2px solid var(--krill-red);
outline-offset: 4px;
}
#description
.krill-product-content
:is(.krill-product-intro, .krill-product-section) {
min-width: 0;
}
#description .krill-product-intro > p + p {
margin-top: 16px !important;
}
#description .krill-product-intro__eyebrow,
#description .krill-product-heading__overline {
font-family: "Poppins", Arial, sans-serif;
}
#description .krill-product-heading :is(h2, h3) {
margin: 0 !important;
color: var(--krill-dark) !important;
font-size: 27px;
font-weight: 700;
line-height: 1.2;
}
#description .krill-product-heading--dark :is(h2, h3) {
color: #fff !important;
}
#description .krill-product-heading > div {
min-width: 0;
}
#description .krill-product-stat__label,
#description .krill-product-stat__note {
color: rgba(255, 255, 255, 0.76);
}
#description .krill-product-section > p {
color: var(--krill-text);
line-height: 1.65;
}
#description .krill-product-section--dark > p {
color: rgba(255, 255, 255, 0.85);
}
#description .krill-description-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none;
padding: 0;
margin: 0;
gap: 0 32px;
border-top: 1px solid var(--krill-border);
}
#description .krill-description-list > li {
position: relative;
margin: 0;
padding: 20px 0 20px 24px;
border-bottom: 1px solid var(--krill-border);
min-width: 0;
}
#description .krill-description-list > li::before {
content: "";
position: absolute;
left: 0;
top: 28px;
width: 8px;
height: 8px;
background: var(--krill-red);
}
#description .krill-table-wrapper {
min-width: 0;
max-width: 100%;
}
#description .krill-table--compact {
min-width: 0;
table-layout: fixed;
}
#description .krill-table--compact th,
#description .krill-table--compact td {
overflow-wrap: anywhere;
}
#description .krill-table--compact tbody th {
width: 38%;
background: var(--krill-dark);
border-bottom: 1px solid #514b52 !important;
}
#description .krill-table td {
text-align: left;
}
#description .krill-table th {
text-transform: none;
}
#description .krill-turbine-card__label,
#description .krill-turbine-card__description {
color: #fff;
}
/* Legacy Laser content: preserve every number and label, share Warhawk components. */
#description .krill-laser-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
background: var(--krill-red);
color: #fff;
font:
700 11px "Inter",
Arial,
sans-serif;
}
#description .krill-laser-package-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 20px;
background: var(--krill-red);
color: #fff;
}
#description .krill-laser-package-summary > div {
display: flex;
flex-direction: column;
padding: 20px 24px;
}
#description .krill-laser-package-summary span {
color: #fff;
font-size: 12px;
}
#description .krill-laser-package-summary strong {
color: #fff;
font:
700 22px "Poppins",
Arial,
sans-serif;
}
#description .krill-laser-colors {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
#description .krill-laser-color {
display: flex;
align-items: center;
gap: 16px;
padding: 22px;
background: #343035;
color: #fff;
}
#description .krill-laser-color strong {
color: #fff;
}
#description .krill-laser-color-index {
color: #fff;
background: var(--krill-red);
padding: 6px 10px;
}
@media (max-width: 991px) {
#description .krill-description-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
#description .krill-product-heading :is(h2, h3) {
font-size: 22px;
}
#description .krill-product-intro__title {
overflow-wrap: anywhere;
}
#description .krill-table--compact :is(td, th) {
padding: 12px 10px !important;
font-size: 13px;
}
#description .krill-laser-package-summary,
#description .krill-laser-colors {
grid-template-columns: 1fr;
}
#description .krill-laser-color {
padding: 18px;
}
}
/* Consolidated 2026-09-22. Sources and safe duplicate removals: local audit.json. */
/* ARCHIVED 2026-10-16: previous 2x2 homepage
/ * KRILL homepage 20261006c. This module is included in krill-site.css, not loaded twice. * /
body.in-index .before-carousel:has(.krill-home-brands) { padding-top: 16px; }
body.in-index .before-carousel:has(.krill-home-brands) .banners-row > [class*="col-sm-"] {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
padding: 0 !important;
}
/ * Scope overrides to the five new cards; never affect product photos or other carousels. * /
body.in-index #carousel .krill-home-brands {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1vw, 18px);
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
body.in-index #carousel .krill-home-brand {
position: relative;
display: block;
min-width: 0;
width: 100%;
aspect-ratio: 3 / 2;
margin: 0;
padding: 0;
overflow: hidden;
background: #1f1b20;
color: #1f1b20;
border: 0;
border-radius: 0;
text-decoration: none;
}
body.in-index #carousel .krill-home-brand__photo {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
object-fit: cover;
object-position: center;
transition: transform 300ms ease;
}
body.in-index #carousel .krill-home-brand__card {
position: absolute;
z-index: 1;
left: clamp(16px, 2vw, 32px);
bottom: clamp(16px, 2vw, 32px);
width: clamp(225px, 43%, 290px);
max-width: calc(100% - 32px);
padding: clamp(16px, 1.5vw, 24px);
background: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
box-sizing: border-box;
}
body.in-index #carousel .krill-home-brand__heading {
position: relative;
display: flex;
align-items: center;
height: 42px;
margin: 0 0 10px;
padding: 0;
color: #1f1b20;
font: 700 clamp(22px, 2vw, 30px)/1.2 "Poppins", Arial, sans-serif;
text-transform: none;
}
body.in-index #carousel .krill-home-brand__logo {
position: static;
display: block;
width: 100% !important;
max-width: 220px !important;
height: 42px !important;
max-height: 42px !important;
min-width: 0 !important;
min-height: 0 !important;
flex: none;
margin: 0 !important;
object-fit: contain;
object-position: left center;
}
body.in-index #carousel .krill-home-brand--sebart .krill-home-brand__logo { max-width: 144px !important; }
body.in-index #carousel .krill-home-brand--mvvs .krill-home-brand__logo { max-width: 116px !important; }
body.in-index #carousel .krill-home-brand__text {
min-height: 4.5em;
margin: 0 0 14px;
color: #38343a;
font: 400 14px/1.5 "Inter", Arial, sans-serif;
}
body.in-index #carousel .krill-home-brand__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 44px;
padding: 10px 16px;
background: #1f1b20;
color: #fff;
border-radius: 3px;
font: 600 12px/1.5 "Poppins", Arial, sans-serif;
transition: background-color 180ms ease;
}
body.in-index #carousel .krill-home-brand--krill .krill-home-brand__cta { background: #c92d1b; }
body.in-index #carousel .krill-home-brand--parts {
grid-column: 1 / -1;
aspect-ratio: 5.4 / 1;
min-height: 250px;
}
body.in-index #carousel .krill-home-brand--parts .krill-home-brand__card { width: 365px; }
body.in-index #carousel .krill-home-brand--parts .krill-home-brand__text { min-height: 0; }
body.in-index #carousel .krill-home-brand:focus-visible {
outline: 3px solid #e53a24;
outline-offset: -3px;
}
body.in-index #carousel .krill-home-brand:focus-visible .krill-home-brand__cta {
text-decoration: underline;
}
@media (hover: hover) {
body.in-index #carousel .krill-home-brand:hover .krill-home-brand__photo { transform: scale(1.015); }
body.in-index #carousel .krill-home-brand:hover .krill-home-brand__cta { background: #c92d1b; }
}
@media (max-width: 1023px) {
body.in-index #carousel .krill-home-brand {
display: flex;
flex-direction: column;
aspect-ratio: auto;
background: #fff;
}
body.in-index #carousel .krill-home-brand__photo {
position: static;
flex: none;
height: auto !important;
aspect-ratio: 3 / 2;
transform: none !important;
}
body.in-index #carousel .krill-home-brand__card {
position: static;
flex: 1;
width: 100% !important;
max-width: none;
padding: 18px;
box-shadow: none;
}
body.in-index #carousel .krill-home-brand__text { min-height: 3em; }
body.in-index #carousel .krill-home-brand--parts { min-height: 0; }
body.in-index #carousel .krill-home-brand--parts .krill-home-brand__photo { aspect-ratio: 4 / 1; }
}
@media (max-width: 767px) {
/ * Opal uses a fixed 60px mobile header outside document flow. * /
body.in-index .before-carousel:has(.krill-home-brands) { padding-top: 72px; }
body.in-index #carousel .krill-home-brands { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.in-index #carousel .krill-home-brand__cta { display: flex; width: 100%; }
body.in-index #carousel .krill-home-brand--parts .krill-home-brand__photo { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
body.in-index #carousel .krill-home-brand__photo,
body.in-index #carousel .krill-home-brand__cta { transition: none; }
}
END ARCHIVED */
/* Shared native dropdown styling, based on SkyWing (2026-10-06).
Category hierarchy lives in Shoptet, not a duplicated JavaScript menu.
Keep native responsive columns, nested categories, opening and keyboard behaviour. */
@media (min-width: 768px) {
#navigation .menu-level-1 > li > .menu-level-2 > li {
min-height: 44px;
margin-bottom: 8px !important;
align-items: stretch !important;
}
#navigation .menu-level-1 > li > .menu-level-2 > li > .menu-image {
display: none;
}
#navigation .menu-level-1 > li > .menu-level-2 > li > div {
width: 100%;
padding: 0 12px 0 0;
}
#header #navigation .menu-level-1 > li > .menu-level-2 > li > div > a,
#header .menu-helper > .menu-level-1 > li > a {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
margin: 0 !important;
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 3px;
font: 600 14px/1.45 "Poppins", Arial, sans-serif;
}
#navigation .menu-level-1 > li > .menu-level-2 > li > div > a > span,
#header .menu-helper > .menu-level-1 > li > a > b {
font: inherit;
}
/* Hide only the legacy comma text between links, not any category or
native show-more control. Explicit link sizing keeps text readable. */
#header #navigation .menu-level-3 > li {
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
#header #navigation .menu-level-3 > li > a,
#header #navigation .menu-level-3 > .cat-more {
display: flex;
align-items: center;
min-height: 36px;
margin: 0 !important;
padding: 8px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 3px;
font: 500 14px/1.45 "Poppins", Arial, sans-serif;
color: rgba(255, 255, 255, 0.88);
}
/* A single group (e.g. SebArt kity) uses the available width while
remaining a genuine nested category. Native rolled/show-more stays. */
#header #navigation .menu-level-2 > li:only-child {
flex-basis: 100% !important;
}
#header #navigation .menu-level-2 > li:only-child > div > .menu-level-3 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 12px;
}
#header #navigation .menu-level-2 a:not(.menu-image):is(:hover, :focus-visible, .krill-current-category),
#header .menu-helper > .menu-level-1 > li > a:is(:hover, :focus-visible, .krill-current-category) {
background: #42282b !important;
color: #fff !important;
box-shadow: inset 3px 0 0 #ed3825;
}
#header #navigation .menu-level-2 a:not(.menu-image):is(:hover, :focus-visible, .krill-current-category) > span,
#header .menu-helper > .menu-level-1 > li > a:is(:hover, :focus-visible, .krill-current-category) > b {
color: #fff !important;
}
#header #navigation .menu-level-2 a:not(.menu-image):focus-visible,
#header .menu-helper > .menu-level-1 > li > a:focus-visible {
outline: 2px solid #ed3825;
outline-offset: -2px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#header #navigation .menu-level-2 > li:only-child > div > .menu-level-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) and (max-width: 991px) {
#header #navigation .menu-level-2 > li:only-child > div > .menu-level-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Opal draws both the More hamburger and its open-state close icon as SVG
backgrounds. Text color alone cannot recolor them. Keep both white. */
#header .menu-helper::after {
filter: brightness(0) invert(1) !important;
}
/* ARCHIVED 2026-10-16: legacy inline CSS from Shoptet banner 103
/ * =========================================================
BRANDS BANNER
========================================================= * /
.brands-banner {
position: relative;
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
background: #E53A24;
border: 0 !important;
box-sizing: border-box;
aspect-ratio: 1700 / 480 !important;
}
/ * =========================================================
HLAVNÍ OBRÁZEK
========================================================= * /
.brands-banner__img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
/ * =========================================================
TEXTOVÁ KARTA
========================================================= * /
.brands-banner__card {
position: absolute;
z-index: 2;
left: 64px;
bottom: 64px;
width: 420px;
max-width: calc(100% - 128px);
padding: 36px 40px;
background: #FFFFFF;
box-sizing: border-box;
box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
/ * Nadpis * /
.brands-banner__title {
margin: 0 0 12px;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: #15171A !important;
}
/ * Text * /
.brands-banner__text {
margin: 0 0 22px;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
color: #4A4A4A !important;
}
/ * Tlačítko * /
.brands-banner__btn {
display: inline-block;
padding: 16px 32px;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
background: #1F1B20;
color: #FFFFFF !important;
border-radius: 3px;
box-sizing: border-box;
}
/ * =========================================================
MOBILNÍ LOGA
Na desktopu skrytá
========================================================= * /
.brands-banner__logos-mobile {
display: none !important;
}
/ * =========================================================
TABLET
========================================================= * /
@media (min-width: 641px) and (max-width: 1024px) {
.brands-banner {
display: flex !important;
flex-direction: column;
width: 100% !important;
aspect-ratio: auto !important;
background: #E8E6E6 !important;
}
.brands-banner__img {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
aspect-ratio: 1700 / 480;
object-fit: cover !important;
object-position: center !important;
flex: none;
}
.brands-banner__card {
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 30px 28px;
background: #FFFFFF;
box-shadow: none !important;
flex: none;
}
.brands-banner__title {
margin-bottom: 10px;
font-size: 23px;
}
.brands-banner__text {
margin-bottom: 18px;
font-size: 14px;
}
.brands-banner__btn {
padding: 13px 26px;
}
/ * Logo obrázky samostatně na tabletu nezobrazujeme * /
.brands-banner__logos-mobile {
display: none !important;
}
}
/ * =========================================================
MOBIL
========================================================= * /
@media (max-width: 640px) {
.brands-banner {
display: flex !important;
flex-direction: column;
width: 100% !important;
aspect-ratio: auto !important;
background: #E8E6E6 !important;
overflow: hidden;
}
/ * Hlavní banner obrázek schováme,
protože už obsahuje loga * /
.brands-banner > .brands-banner__img {
display: none !important;
}
/ * =====================================================
KARTA
===================================================== * /
.brands-banner__card {
position: static !important;
order: 1;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 26px 20px;
background: #FFFFFF;
box-shadow: none !important;
box-sizing: border-box;
}
.brands-banner__title {
margin: 0 0 10px;
font-size: 21px;
line-height: 1.25;
}
.brands-banner__text {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.5;
}
.brands-banner__btn {
display: block;
width: 100% !important;
padding: 15px 16px;
text-align: center;
font-size: 14px;
box-sizing: border-box;
}
/ * =====================================================
LOGA
===================================================== * /
.brands-banner__logos-mobile {
order: 2;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
justify-items: center;
gap: 28px 22px;
width: 100% !important;
margin: 0 !important;
padding: 30px 20px !important;
background: #E8E6E6;
box-sizing: border-box;
}
.brands-banner
.brands-banner__logos-mobile
.brands-banner__logo-mobile {
position: static !important;
display: block !important;
width: 100% !important;
height: 52px !important;
max-width: 145px !important;
max-height: 52px !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
aspect-ratio: auto !important;
}
}
/ * =========================================================
MALÉ TELEFONY
========================================================= * /
@media (max-width: 420px) {
.brands-banner__card {
padding: 24px 20px;
}
.brands-banner__title {
font-size: 20px;
}
.brands-banner__text {
font-size: 13px;
}
.brands-banner__btn {
padding: 14px 15px;
font-size: 13.5px;
}
.brands-banner__logos-mobile {
gap: 24px 18px;
padding: 28px 18px !important;
}
.brands-banner
.brands-banner__logos-mobile
.brands-banner__logo-mobile {
width: 100% !important;
height: 44px !important;
max-width: 130px !important;
max-height: 44px !important;
}
}
END ARCHIVED */
/* KRILL homepage 20261016b — PDF layout. Native Shoptet commerce stays untouched. */
body.in-index { --ka-gutter: clamp(16px, 2.5vw, 48px); }
body.in-index .before-carousel:has(.ka-home) { padding: 6px 0 0 !important; }
body.in-index .before-carousel:has(.ka-home) > .content-wrapper-in > .container,
body.in-index .before-carousel:has(.ka-home) .banners-row,
body.in-index .before-carousel:has(.ka-home) .banners-row > [class*="col-sm-"],
body.in-index .before-carousel:has(.ka-home) #carousel,
body.in-index .before-carousel:has(.ka-home) .carousel-inner,
body.in-index .before-carousel:has(.ka-home) .carousel-inner > .item,
body.in-index .before-carousel:has(.ka-home) span[data-ec-promo-id="82"] {
width: 100% !important; max-width: none !important; height: auto !important;
min-height: 0 !important; margin: 0 !important; padding: 0 !important;
float: none !important; flex: 0 0 100% !important; background: transparent !important;
box-sizing: border-box;
}
body.in-index .before-carousel:has(.ka-home) .banners-row,
body.in-index .before-carousel:has(.ka-home) span[data-ec-promo-id="82"] { display: block !important; }
body.in-index #carousel .ka-home { display: grid; gap: 6px; width: 100%; margin: 0; text-align: left; }
body.in-index #carousel .ka-home__main,
body.in-index #carousel .ka-home__secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.in-index #carousel :is(.ka-home-card, .ka-home-feature) {
position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 0;
overflow: hidden; background: #1f1b20; color: #fff; text-decoration: none;
isolation: isolate; border: 0; border-radius: 5px;
}
body.in-index #carousel .ka-home__main .ka-home-card { aspect-ratio: 1; }
body.in-index #carousel .ka-home__secondary .ka-home-card { aspect-ratio: 3832 / 1642; border-radius: 0; }
body.in-index #carousel .ka-home .ka-home__photo {
position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important;
max-width: none !important; max-height: none !important; min-height: 0 !important;
margin: 0 !important; object-fit: cover; object-position: center;
transition: transform 350ms ease;
}
body.in-index #carousel .ka-home__main .ka-home-card::after {
content: ""; position: absolute; inset: 50% 0 0; z-index: 0; pointer-events: none;
background: linear-gradient(transparent, rgb(0 0 0 / 72%));
}
body.in-index #carousel .ka-home__brandline {
position: absolute; z-index: 1; inset: auto clamp(20px, 2.2vw, 44px) clamp(20px, 2.2vw, 44px);
display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
body.in-index #carousel .ka-home__brandline h2 { margin: 0; padding: 0; line-height: 1; flex: 1; min-width: 0; }
body.in-index #carousel .ka-home .ka-home__logo {
position: static; display: block; width: clamp(130px, 14vw, 280px) !important;
max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: 80px !important;
margin: 0 !important; object-fit: contain; object-position: left center;
filter: brightness(0) invert(1);
}
body.in-index #carousel .ka-home .ka-home__logo--skywing { width: clamp(125px, 12vw, 240px) !important; }
body.in-index #carousel .ka-home .ka-home__logo--sebart { width: clamp(115px, 10vw, 200px) !important; }
body.in-index #carousel .ka-home__arrow {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: clamp(40px, 3vw, 58px); height: clamp(40px, 3vw, 58px);
border: 1.5px solid #fff; border-radius: 50%; background: rgb(0 0 0 / 18%);
color: #fff; font: 400 clamp(23px, 2vw, 36px)/1 Arial, sans-serif;
transition: background-color 180ms ease;
}
body.in-index #carousel .ka-home-feature { aspect-ratio: 6 / 1; min-height: 250px; border-radius: 0; }
body.in-index #carousel .ka-home-feature::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(90deg, rgb(0 0 0 / 74%), rgb(0 0 0 / 12%) 50%, transparent 68%);
}
body.in-index #carousel .ka-home-feature__copy {
position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center;
align-items: flex-start; width: 45%; height: 100%; min-height: inherit;
padding: clamp(24px, 2.2vw, 44px); box-sizing: border-box;
}
body.in-index #carousel .ka-home-feature__intro {
margin: 0 0 6px; color: #fff; font: 400 clamp(15px, 1.65vw, 30px)/1.3 "Inter", Arial, sans-serif;
}
body.in-index #carousel .ka-home-feature h2 {
margin: 0 0 18px; padding: 0; color: #f32929;
font: 800 clamp(30px, 3.8vw, 72px)/1.1 "Poppins", Arial, sans-serif; letter-spacing: -.025em;
}
body.in-index #carousel .ka-home-feature__cta {
display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px;
padding: 10px 20px; border-radius: 30px; background: #d92121; color: #fff;
font: 600 14px/1.4 "Poppins", Arial, sans-serif;
}
body.in-index #carousel .ka-home-feature__cta span { font-size: 25px; line-height: 1; }
body.in-index #carousel .ka-home__secondary .ka-home-card::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(90deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 12%) 60%, transparent);
}
body.in-index #carousel .ka-home-card__copy {
position: absolute; z-index: 1; inset: clamp(20px, 1.8vw, 36px); display: flex;
flex-direction: column; align-items: flex-start;
}
body.in-index #carousel .ka-home-card__copy::before { content: ""; width: 36px; height: 2px; background: #ed2929; margin-bottom: 10px; }
body.in-index #carousel .ka-home-card__copy h2 { margin: 0 0 3px; color: #fff; font: 700 clamp(19px, 1.7vw, 32px)/1.25 "Poppins", Arial, sans-serif; }
body.in-index #carousel .ka-home-card__copy p { margin: 0 0 12px; color: #fff; font: 400 clamp(12px, .8vw, 16px)/1.5 "Inter", Arial, sans-serif; }
body.in-index #carousel .ka-home-card__copy .ka-home__arrow { margin-top: auto; }
body.in-index #carousel :is(.ka-home-card, .ka-home-feature):focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
@media (hover: hover) {
body.in-index #carousel :is(.ka-home-card, .ka-home-feature):hover .ka-home__photo { transform: scale(1.012); }
body.in-index #carousel .ka-home-card:hover .ka-home__arrow { background: #c92d1b; }
body.in-index #carousel .ka-home-feature:hover .ka-home-feature__cta { background: #b61919; }
}
/* Expand only homepage content containers, never the global header or product/category pages. */
body.in-index .overall-wrapper > .content-wrapper.container:not(#content-wrapper),
body.in-index .middle-banners-wrapper > .content-wrapper-in > .container,
body.in-index #footer > .container {
width: calc(100% - var(--ka-gutter) * 2) !important; max-width: none !important;
margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.in-index .content-wrapper.homepage-box.middle-banners-wrapper { padding-top: clamp(32px, 3vw, 56px) !important; }
body.in-index .middle-banners-wrapper .banner-wrapper,
body.in-index .middle-banners-wrapper span[data-ec-promo-id="103"] { display: block; width: 100%; margin: 0; }
body.in-index .ka-brands {
display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 80px);
align-items: center; width: 100%; padding: clamp(28px, 4vw, 72px); box-sizing: border-box;
background: #1f1b20; color: #fff;
}
body.in-index .ka-brands h2 { margin: 0 0 14px; color: #fff; font: 700 clamp(24px, 2.3vw, 42px)/1.25 "Poppins", Arial, sans-serif; }
body.in-index .ka-brands p { margin: 0; color: #e8e6e6; font: 400 16px/1.65 "Inter", Arial, sans-serif; }
body.in-index .ka-brands__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: center; justify-items: center; }
body.in-index .ka-brands__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 8px; }
body.in-index .ka-brands__link:first-child { grid-column: 1 / -1; padding: 8px 10%; }
body.in-index .ka-brands__link img { display: block; width: 100% !important; min-width: 0 !important; max-width: 220px !important; height: auto !important; min-height: 0 !important; max-height: 100px !important; object-fit: contain; }
body.in-index .ka-brands__link:first-child img { max-width: 590px !important; max-height: none !important; }
body.in-index .ka-brands__link--dark img { filter: brightness(0) invert(1); }
body.in-index .ka-brands__link--sebart img { max-width: 170px !important; }
body.in-index .ka-brands__link--mvvs img { max-width: 200px !important; }
body.in-index .ka-brands__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Hide the obsolete welcome content, retaining it reversibly in administration. */
body.in-index .content-wrapper.homepage-box.welcome-wrapper { display: none !important; }
/* Native form, field names, consent and validation remain unchanged. */
body.in-index .custom-footer__newsletter.extended.newsletter {
width: calc(100% - var(--ka-gutter) * 2) !important; max-width: none !important;
margin: 40px auto 48px !important; padding: clamp(36px, 5vw, 80px) 24px !important;
background: #1f1b20 !important; color: #fff !important; text-align: center;
}
body.in-index .custom-footer__newsletter :is(h2,h3,h4,.newsletter-header,.newsletter-text,p,label,.consents,.consents-first,.form-group) { color: #fff !important; }
body.in-index .custom-footer__newsletter a { color: #fff !important; text-decoration: underline; }
body.in-index .custom-footer__newsletter .smart-label-wrapper > label {
position: static !important; display: block !important; margin: 0 0 6px;
color: #fff !important; text-align: left; transform: none !important;
}
body.in-index .custom-footer__newsletter .captcha-image {
position: static !important; width: auto !important; max-width: 100%; margin: 12px auto;
}
body.in-index .custom-footer__newsletter input[type="email"] {
background: #fff !important; color: #1f1b20 !important; border: 1px solid #fff !important; min-height: 48px;
}
body.in-index .custom-footer__newsletter input[type="email"]::placeholder { color: #666; opacity: 1; }
body.in-index .custom-footer__newsletter button[type="submit"] {
background: #fff !important; color: #1f1b20 !important; border: 1px solid #fff !important; min-height: 48px;
font-family: "Poppins", Arial, sans-serif; align-self: flex-end;
}
body.in-index .custom-footer__newsletter button[type="submit"]:hover { background: #e8e6e6 !important; }
body.in-index .custom-footer__newsletter :is(a,input,button):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1100px) {
body.in-index #carousel .ka-home__brandline { inset: auto 16px 20px; gap: 12px; }
body.in-index #carousel .ka-home-card__copy { inset: 18px; }
body.in-index #carousel .ka-home__secondary .ka-home-card { min-height: 180px; }
body.in-index #carousel .ka-home-feature__copy { width: 52%; }
}
@media (max-width: 767px) {
/* Opal's mobile header is fixed and is not part of document flow. */
body.in-index .before-carousel:has(.ka-home) { padding-top: 66px !important; }
body.in-index #carousel .ka-home__main,
body.in-index #carousel .ka-home__secondary { grid-template-columns: minmax(0, 1fr); }
body.in-index #carousel .ka-home__brandline { inset: auto 24px 24px; }
body.in-index #carousel .ka-home .ka-home__logo { width: 55% !important; min-width: 160px; }
body.in-index #carousel .ka-home .ka-home__logo--skywing { width: 48% !important; min-width: 150px; }
body.in-index #carousel .ka-home .ka-home__logo--sebart { width: 38% !important; min-width: 120px; }
body.in-index #carousel .ka-home-feature { aspect-ratio: auto; min-height: 0; }
body.in-index #carousel .ka-home-feature .ka-home__photo { position: static; height: auto !important; aspect-ratio: 3844 / 1268; transform: none; }
body.in-index #carousel .ka-home-feature::after { display: none; }
body.in-index #carousel .ka-home-feature__copy { width: 100%; height: auto; padding: 24px; }
body.in-index #carousel .ka-home-feature__intro { font-size: 16px; }
body.in-index #carousel .ka-home-feature h2 { font-size: clamp(30px, 7vw, 44px); }
body.in-index #carousel .ka-home-card__copy { inset: 22px; }
body.in-index #carousel .ka-home__secondary .ka-home-card { min-height: 170px; }
body.in-index #carousel .ka-home-card__copy h2 { font-size: 23px; }
body.in-index #carousel .ka-home-card__copy p { font-size: 13px; }
body.in-index .ka-brands { grid-template-columns: minmax(0,1fr); gap: 30px; padding: 28px 20px; }
body.in-index .ka-brands__logos { gap: 16px; }
body.in-index .ka-brands__link { min-height: 50px; padding: 0; }
body.in-index .custom-footer__newsletter.extended.newsletter { padding: 36px 20px !important; margin: 24px auto 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
body.in-index #carousel .ka-home .ka-home__photo,
body.in-index #carousel .ka-home__arrow { transition: none; }
}
/* Native Shoptet currency switcher — dark header, 2026-10-20.
Opal moves the desktop control into .header-top. Keep all native
positioning, open/close behaviour, links and exchange-rate logic. */
[data-testid="topnavCurrencyDropdown"] > button {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: transparent !important;
font-family: "Poppins", Arial, sans-serif !important;
font-weight: 600;
}
[data-testid="topnavCurrencyDropdown"] > button::after,
[data-testid="topnavCurrencyDropdown"] > button > .caret {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
[data-testid="topnavCurrencyDropdown"] > .dropdown-menu {
background: #1f1b20 !important;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 3px;
box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
padding: 6px !important;
}
[data-testid="topnavCurrencyDropdown"] > .dropdown-menu > li > a {
min-height: 44px;
padding: 12px 16px !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, .14);
border-radius: 3px;
font: 600 14px/1.45 "Poppins", Arial, sans-serif;
}
[data-testid="topnavCurrencyDropdown"] > .dropdown-menu > li:last-child > a {
border-bottom: 0;
}
[data-testid="topnavCurrencyDropdown"] > .dropdown-menu > li > a:is(:hover, :focus-visible) {
background: #42282b !important;
box-shadow: inset 3px 0 0 #ed3825;
}
[data-testid="topnavCurrencyDropdown"] > button:focus-visible,
[data-testid="topnavCurrencyDropdown"] > .dropdown-menu > li > a:focus-visible {
outline: 2px solid #ed3825;
outline-offset: -2px;
}
@media (max-width: 767px) {
#navigation .navigationActions .navigationActions__submenu {
background: #1f1b20 !important;
color: #fff !important;
}
#navigation .navigationActions .navigationActions__submenu__item > a {
min-height: 44px;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-bottom: 1px solid rgba(255, 255, 255, .14);
font: 600 14px/1.45 "Poppins", Arial, sans-serif;
}
#navigation .navigationActions .navigationActions__submenu__item--active > a,
#navigation .navigationActions .navigationActions__submenu__item > a:is(:hover, :focus-visible) {
background: #42282b !important;
box-shadow: inset 3px 0 0 #ed3825;
}
#navigation .navigationActions .navigationActions__submenu__item > a:focus-visible {
outline: 2px solid #ed3825;
outline-offset: -2px;
}
}