@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-custom.css
Šablona: Shoptet Classic / Opal (Shoptak.cz)
---------------------------------------------------------
POZOR: v .css souboru NESMÍ být .
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: 190px !important;
}
#header .site-name img {
display: block !important;
width: 190px !important;
max-width: 190px !important;
height: auto !important;
max-height: 44px !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#header .site-name {
width: 175px !important;
}
#header .site-name img {
display: block !important;
width: 175px !important;
max-width: 175px !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Í --- */
#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;
}
/* --- Vlastní ikona: 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;
}
/* --- 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;
}
#header .search-toggle {
width: 30px !important;
height: 30px !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 {
color: #ffffff !important;
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;
}
/* 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;
}
}
.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;
}
.sidebar-left .box-categories li.active > a,
.sidebar-left .box-categories li.expanded > a {
color: #ffffff !important;
background: #1f1b20 !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
========================================================= */
#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;
}
/* =========================================================
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;
}
/* =========================================================
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;
}
}
/* =========================================================
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;
}
}