/* Cleno.cz – všechny styly webu v jednom souboru (sestaveno 2026-10-10).
Části jsou ve stejném pořadí, v jakém je web načítal dřív jako samostatné soubory. */
/* ==================== lista2.css ==================== */
/* ==========================================================
CLENO — PLOVOUCÍ LIŠTA „PŘIDAT DO KOŠÍKU“
Sladěno s designem webu: tmavě modré texty, jemné modré okraje,
zelený štítek Skladem, zelené tlačítko s přechodem.
Header / menu se vůbec neupravují.
========================================================== */
/* ==========================================================
ZÁKLAD
========================================================== */
.cleno-sticky-atc {
--cls-head: #163d5c;
--cls-text: #6b7682;
--cls-blue: #0b6fb0;
--cls-border: #e0eef9;
--cls-soft: #f5faff;
--cls-green-1: #34c759;
--cls-green-2: #1f9d3a;
--cls-stock: #1f9d3a;
--cls-stock-bg: #e7f6ec;
position: fixed !important;
top: auto !important;
box-sizing: border-box !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid var(--cls-border) !important;
font-family: inherit !important;
z-index: 700 !important;
-webkit-font-smoothing: antialiased;
/* defaultně schovaná */
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(14px) !important;
transition:
opacity .25s ease,
visibility .25s ease,
transform .25s cubic-bezier(.2, .8, .2, 1) !important;
}
.cleno-sticky-atc *,
.cleno-sticky-atc *::before,
.cleno-sticky-atc *::after {
box-sizing: border-box !important;
}
/* původní obsah Pobo schováme */
.cleno-pobo-original {
display: none !important;
}
/* zobrazí se až po přejetí původního tlačítka Přidat do košíku */
body.cleno-sticky-visible .cleno-sticky-atc {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* ==========================================================
ROZLOŽENÍ
========================================================== */
.cleno-sticky-ui {
display: grid !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
}
/* ==========================================================
PRODUKT – obrázek + název
========================================================== */
.cleno-sticky-product {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
.cleno-sticky-image {
flex: 0 0 auto !important;
object-fit: contain !important;
background: #ffffff !important;
border: 1px solid #e6eef6 !important;
border-radius: 12px !important;
}
.cleno-sticky-title {
min-width: 0 !important;
color: var(--cls-head) !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ==========================================================
CENA
========================================================== */
.cleno-sticky-price-block {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
}
.cleno-sticky-price {
color: var(--cls-head) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
}
/* ==========================================================
DOSTUPNOST – stejný štítek jako na detailu produktu
========================================================== */
.cleno-sticky-stock {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
background: var(--cls-stock-bg) !important;
border: 0 !important;
border-radius: 999px !important;
color: var(--cls-stock) !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.cleno-sticky-stock::before {
content: "";
display: block !important;
width: 6px !important;
height: 6px !important;
margin-right: 5px !important;
border-radius: 50% !important;
background: currentColor !important;
}
.cleno-sticky-stock[data-state="warning"] {
color: #c78200 !important;
background: #fff6e0 !important;
}
.cleno-sticky-stock[data-state="no"] {
color: #e5484d !important;
background: #fdecec !important;
}
/* ==========================================================
POČET KUSŮ – stejné pole jako na detailu
========================================================== */
.cleno-sticky-qty {
display: grid !important;
align-items: center !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #d7e6f3 !important;
box-shadow: none !important;
}
.cleno-sticky-qty-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 9px !important;
background: transparent !important;
color: var(--cls-head) !important;
font-family: inherit !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background-color .18s ease, color .18s ease !important;
}
.cleno-sticky-qty-btn:hover {
background: #eef6fd !important;
color: var(--cls-blue) !important;
}
.cleno-sticky-qty-input {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
color: var(--cls-head) !important;
font-family: inherit !important;
font-weight: 800 !important;
text-align: center !important;
appearance: textfield !important;
-moz-appearance: textfield !important;
}
.cleno-sticky-qty-input::-webkit-inner-spin-button,
.cleno-sticky-qty-input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* ==========================================================
TLAČÍTKO – stejné jako „Vložit do košíku“ na detailu
========================================================== */
.cleno-sticky-cta {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
border: 0 !important;
background: linear-gradient(135deg, var(--cls-green-1) 0%, var(--cls-green-2) 100%) !important;
color: #ffffff !important;
font-family: inherit !important;
font-weight: 800 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
cursor: pointer !important;
box-shadow: 0 10px 20px -12px rgba(31, 157, 58, .9) !important;
transition: filter .18s ease, transform .18s ease !important;
}
.cleno-sticky-cta:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.cleno-sticky-cart-icon {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.1 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.cleno-cta-mobile {
display: none !important;
}
/* text v liště je psaný velkými písmeny – zobrazíme ho jako „Přidat do košíku“ */
.cleno-cta-desktop,
.cleno-cta-mobile {
text-transform: lowercase !important;
}
.cleno-cta-desktop {
display: inline-block !important;
}
.cleno-cta-desktop::first-letter,
.cleno-cta-mobile::first-letter {
text-transform: uppercase !important;
}
/* ==========================================================
POČÍTAČ
========================================================== */
@media (min-width: 1101px) {
.cleno-sticky-atc {
/* vlevo normální odsazení, vpravo prostor pro chat */
left: 18px !important;
right: 110px !important;
bottom: 16px !important;
width: auto !important;
min-height: 82px !important;
padding: 10px 14px 10px 10px !important;
border-radius: 20px !important;
box-shadow: 0 18px 40px -22px rgba(14, 47, 75, .32) !important;
}
.cleno-sticky-ui {
min-height: 60px !important;
grid-template-columns: minmax(0, 1fr) 128px 120px 230px !important;
column-gap: 26px !important;
}
.cleno-sticky-product {
gap: 18px !important;
}
.cleno-sticky-image {
width: 62px !important;
height: 62px !important;
flex-basis: 62px !important;
padding: 5px !important;
}
.cleno-sticky-title {
font-size: 16px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
}
.cleno-sticky-price {
font-size: 22px !important;
line-height: 1.05 !important;
}
.cleno-sticky-stock {
margin-top: 7px !important;
padding: 4px 10px 4px 8px !important;
font-size: 11px !important;
line-height: 1 !important;
}
.cleno-sticky-qty {
grid-template-columns: 36px 1fr 36px !important;
width: 120px !important;
height: 50px !important;
padding: 0 4px !important;
border-radius: 14px !important;
}
.cleno-sticky-qty-btn {
width: 32px !important;
height: 38px !important;
font-size: 19px !important;
}
.cleno-sticky-qty-input {
width: 100% !important;
height: 46px !important;
line-height: 46px !important;
font-size: 15px !important;
}
.cleno-sticky-cta {
width: 230px !important;
height: 50px !important;
padding: 0 18px !important;
gap: 9px !important;
border-radius: 14px !important;
font-size: 15px !important;
}
.cleno-sticky-cart-icon {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (min-width: 768px) and (max-width: 1100px) {
.cleno-sticky-atc {
left: 12px !important;
right: 92px !important;
bottom: 12px !important;
width: auto !important;
min-height: 72px !important;
padding: 9px 12px 9px 9px !important;
border-radius: 18px !important;
box-shadow: 0 16px 34px -20px rgba(14, 47, 75, .32) !important;
}
.cleno-sticky-ui {
grid-template-columns: minmax(0, 1fr) 100px 104px 180px !important;
column-gap: 16px !important;
}
.cleno-sticky-product {
gap: 14px !important;
}
.cleno-sticky-image {
width: 52px !important;
height: 52px !important;
padding: 4px !important;
}
.cleno-sticky-title {
font-size: 14px !important;
white-space: nowrap !important;
}
.cleno-sticky-price {
font-size: 18px !important;
}
.cleno-sticky-stock {
margin-top: 5px !important;
padding: 3px 8px 3px 7px !important;
font-size: 9.5px !important;
}
.cleno-sticky-qty {
grid-template-columns: 32px 1fr 32px !important;
width: 104px !important;
height: 46px !important;
padding: 0 3px !important;
border-radius: 13px !important;
}
.cleno-sticky-qty-btn {
width: 30px !important;
height: 36px !important;
font-size: 17px !important;
}
.cleno-sticky-qty-input {
width: 100% !important;
height: 42px !important;
line-height: 42px !important;
font-size: 14px !important;
}
.cleno-sticky-cta {
height: 46px !important;
border-radius: 13px !important;
gap: 7px !important;
font-size: 13.5px !important;
}
.cleno-sticky-cart-icon {
width: 16px !important;
height: 16px !important;
}
}
/* ==========================================================
MOBIL
========================================================== */
@media (max-width: 767px) {
.cleno-sticky-atc {
/* zleva malý odstup, vpravo prostor pro chatovací bublinu */
left: 8px !important;
right: 78px !important;
/* výškově zároveň s chatem */
bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
width: auto !important;
min-height: 60px !important;
padding: 7px !important;
border-radius: 16px !important;
/* na mobilu bez výrazného stínu – jen jemný okraj */
box-shadow: 0 6px 18px -12px rgba(14, 47, 75, .35) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.cleno-sticky-ui {
grid-template-columns: 76px 80px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
/* obrázek + název na mobilu nepotřebujeme */
.cleno-sticky-product {
display: none !important;
}
.cleno-sticky-price-block {
align-items: flex-start !important;
padding-left: 4px !important;
text-align: left !important;
}
.cleno-sticky-price {
font-size: 17px !important;
line-height: 1 !important;
}
.cleno-sticky-stock {
margin-top: 5px !important;
padding: 3px 7px 3px 6px !important;
font-size: 9px !important;
line-height: 1 !important;
}
.cleno-sticky-stock::before {
width: 5px !important;
height: 5px !important;
margin-right: 4px !important;
}
.cleno-sticky-qty {
grid-template-columns: 24px 1fr 24px !important;
width: 80px !important;
height: 44px !important;
padding: 0 2px !important;
border-radius: 12px !important;
}
.cleno-sticky-qty-btn {
width: 24px !important;
height: 34px !important;
font-size: 16px !important;
}
.cleno-sticky-qty-input {
width: 100% !important;
height: 42px !important;
line-height: 42px !important;
font-size: 14px !important;
}
.cleno-sticky-cta {
height: 44px !important;
padding: 0 8px !important;
border-radius: 12px !important;
font-size: 13.5px !important;
gap: 0 !important;
}
/* mobilní tlačítko bez ikonky, ať je víc místa */
.cleno-sticky-cart-icon,
.cleno-cta-desktop {
display: none !important;
}
.cleno-cta-mobile {
display: inline-block !important;
}
}
/* ==========================================================
MALÝ MOBIL
========================================================== */
@media (max-width: 374px) {
.cleno-sticky-atc {
left: 6px !important;
right: 68px !important;
bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
padding: 6px !important;
}
.cleno-sticky-ui {
grid-template-columns: 66px 70px minmax(0, 1fr) !important;
column-gap: 6px !important;
}
.cleno-sticky-price {
font-size: 15px !important;
}
.cleno-sticky-stock {
font-size: 8px !important;
}
.cleno-sticky-qty {
grid-template-columns: 21px 1fr 21px !important;
width: 70px !important;
}
.cleno-sticky-qty-btn {
width: 21px !important;
font-size: 14px !important;
}
.cleno-sticky-cta {
padding: 0 4px !important;
font-size: 12px !important;
}
}
/* ==================== kosik.css ==================== */
/* ==========================================================
CLENO.CZ — DOPLŇKOVÝ PRODEJ V KOŠÍKU
FINAL CLEAN VERSION
========================================================== */
/* ==========================================================
CELÝ BLOK
========================================================== */
.fvDoplnek {
box-sizing: border-box !important;
width: 100% !important;
margin: 24px 0 !important;
padding: 20px !important;
background:
linear-gradient(
135deg,
#F6FAFC 0%,
#FFFFFF 100%
) !important;
border: 1px solid #DCEAF0 !important;
border-radius: 18px !important;
box-shadow: none !important;
}
/* ==========================================================
NADPIS
========================================================== */
.fvDoplnek > h2,
.fvDoplnek > h3,
.fvDoplnek > h4 {
margin: 0 0 14px !important;
padding: 0 !important;
color: #20242A !important;
font-family: "Open Sans", Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 750 !important;
line-height: 1.25 !important;
letter-spacing: -.02em !important;
}
/* ==========================================================
PRODUKTOVÁ KARTA
========================================================== */
.fvDoplnek-produkt {
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
margin: 0 0 9px !important;
padding: 14px 16px !important;
background: #FFFFFF !important;
border: 1px solid #DFE8ED !important;
border-radius: 13px !important;
overflow: hidden !important;
box-shadow: none !important;
transition:
border-color .18s ease,
background-color .18s ease,
transform .18s ease !important;
}
.fvDoplnek-produkt:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
HOVER — DESKTOP
========================================================== */
@media (hover: hover) {
.fvDoplnek-produkt:hover {
border-color: #B9DCEA !important;
transform: translateY(-1px) !important;
}
}
/* ==========================================================
VYBRANÝ PRODUKT
========================================================== */
.fvDoplnek-produkt:has(input[type="checkbox"]:checked) {
background: #F2FAFE !important;
border-color: #0090C9 !important;
box-shadow:
0 0 0 2px
rgba(0, 144, 201, .07) !important;
}
/* modrý akcent vlevo */
.fvDoplnek-produkt:has(input[type="checkbox"]:checked)::after {
content: "";
position: absolute !important;
top: 8px !important;
bottom: 8px !important;
left: 0 !important;
width: 3px !important;
background: #0090C9 !important;
border-radius: 0 4px 4px 0 !important;
}
/* ==========================================================
FORM
========================================================== */
.fvDoplnek-produkt form {
margin: 0 !important;
padding: 0 !important;
}
.fvDoplnek-produkt form > p,
.fvDoplnek-produkt form > div {
margin-top: 0 !important;
margin-bottom: 6px !important;
}
.fvDoplnek-produkt form > p:last-child,
.fvDoplnek-produkt form > div:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
NÁZEV PRODUKTU
========================================================== */
.fvDoplnek-produkt a {
color: #20242A !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: none !important;
transition: color .15s ease !important;
}
.fvDoplnek-produkt a:hover {
color: #0090C9 !important;
}
/* ==========================================================
OBRÁZEK
========================================================== */
.fvDoplnek-produkt img {
border-radius: 9px !important;
object-fit: contain !important;
background: #FFFFFF !important;
}
/* ==========================================================
CENA
========================================================== */
.fvDoplnek-produkt .price,
.fvDoplnek-produkt .price-final,
.fvDoplnek-produkt .price-final-holder {
color: #17191F !important;
font-weight: 750 !important;
}
/* ==========================================================
CHECKBOX
========================================================== */
.fvDoplnek-produkt input[type="checkbox"] {
width: 21px !important;
height: 21px !important;
margin: 0 8px 0 0 !important;
accent-color: #0090C9 !important;
cursor: pointer !important;
vertical-align: middle !important;
}
.fvDoplnek-produkt label {
color: #3A4249 !important;
font-weight: 600 !important;
cursor: pointer !important;
}
/* ==========================================================
BUTTON
========================================================== */
.fvDoplnek-produkt .btn,
.fvDoplnek-produkt button {
min-height: 40px !important;
padding: 0 16px !important;
background: #0090C9 !important;
border: 0 !important;
border-radius: 9px !important;
color: #FFFFFF !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
box-shadow: none !important;
cursor: pointer !important;
transition:
background-color .15s ease,
transform .15s ease !important;
}
.fvDoplnek-produkt .btn:hover,
.fvDoplnek-produkt button:hover {
background: #007EB0 !important;
}
.fvDoplnek-produkt .btn:active,
.fvDoplnek-produkt button:active {
transform: scale(.985) !important;
}
/* ==========================================================
VARIANTY
========================================================== */
.fvDoplnek-variants {
margin-top: 9px !important;
padding-top: 9px !important;
border-top: 1px solid #EDF1F3 !important;
}
.fvDoplnek-variants select {
box-sizing: border-box !important;
min-height: 40px !important;
padding: 0 36px 0 12px !important;
background: #FFFFFF !important;
border: 1px solid #DCE5EA !important;
border-radius: 9px !important;
color: #252A31 !important;
font-family: inherit !important;
outline: none !important;
box-shadow: none !important;
transition:
border-color .15s ease,
box-shadow .15s ease !important;
}
.fvDoplnek-variants select:focus {
border-color: #0090C9 !important;
box-shadow:
0 0 0 3px
rgba(0, 144, 201, .07) !important;
}
/* ==========================================================
MOBIL
========================================================== */
@media (max-width: 767px) {
.fvDoplnek {
margin: 18px 0 !important;
padding: 11px !important;
border-radius: 15px !important;
}
.fvDoplnek > h2,
.fvDoplnek > h3,
.fvDoplnek > h4 {
margin-bottom: 11px !important;
font-size: 18px !important;
}
.fvDoplnek-produkt {
margin-bottom: 8px !important;
padding: 12px !important;
border-radius: 11px !important;
box-shadow: none !important;
}
.fvDoplnek-produkt:hover {
transform: none !important;
}
.fvDoplnek-produkt a {
font-size: 14px !important;
}
.fvDoplnek-produkt input[type="checkbox"] {
width: 22px !important;
height: 22px !important;
}
}
/* ==========================================================
MALÉ MOBILY
========================================================== */
@media (max-width: 400px) {
.fvDoplnek {
padding: 9px !important;
border-radius: 14px !important;
}
.fvDoplnek-produkt {
padding: 11px !important;
border-radius: 10px !important;
}
.fvDoplnek-produkt a {
font-size: 13.5px !important;
}
}
/* ==================== klient.css ==================== */
/* =========================================================
CLENO.CZ – MOJE SLEVY
Design sjednocený s produktovými popisy Cleno.cz
Používá pouze existující Shoptet strukturu:
#content
.content-inner
h1
.table.table-md-50
[data-testid="tableCustomerDiscounts"]
========================================================= */
/* =========================================================
HLAVNÍ WRAPPER
========================================================= */
#content .content-inner:has([data-testid="tableCustomerDiscounts"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
/* všechny prvky uvnitř */
#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) * {
box-sizing: border-box;
}
/* =========================================================
NADPIS STRÁNKY
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> h1 {
margin: 0 0 24px;
color: #063f56;
font-size: 29px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================
TABULKA
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"] {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-spacing: 0;
border-collapse: separate;
background: transparent;
overflow: visible;
}
/* tbody převedeme vizuálně na seznam karet */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody {
display: flex;
flex-direction: column;
width: 100%;
gap: 12px;
}
/* =========================================================
JEDNOTLIVÉ ŘÁDKY = CLENO KARTY
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: center;
width: 100%;
min-width: 0;
padding: 18px 20px;
background: #ffffff;
border: 1px solid #cde8f3;
border-radius: 12px;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.06);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease,
background-color 0.18s ease;
}
/* hover pouze desktop */
@media (hover: hover) and (pointer: fine) {
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr:hover {
border-color: #b7ddea;
box-shadow:
0 5px 16px rgba(0, 144, 201, 0.10);
transform: translateY(-1px);
}
}
/* =========================================================
BUŇKY
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
td,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
th {
display: block;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #444444;
font-size: 15px;
line-height: 1.5;
vertical-align: middle;
}
/* =========================================================
LEVÁ STRANA – NÁZEV
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:first-child {
min-width: 0;
padding-right: 22px;
color: #063f56;
font-size: 15px;
font-weight: 700;
overflow-wrap: anywhere;
}
/* =========================================================
PRAVÁ STRANA – HODNOTA / BADGE
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:last-child {
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: end;
min-width: 58px;
min-height: 36px;
padding: 7px 13px;
color: #0077a6;
font-size: 14px;
line-height: 1.2;
font-weight: 700;
text-align: center;
white-space: nowrap;
background: #e4f5fb;
border: 1px solid #b9e1f0;
border-radius: 18px;
}
/* prázdná hodnota */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child:empty::before {
content: "—";
color: #7895a1;
font-weight: 600;
}
/* =========================================================
VNITŘNÍ TEXTY
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
strong,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
b {
color: inherit;
font-weight: 700;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
span {
color: inherit;
}
/* =========================================================
ODKAZY
========================================================= */
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
a {
color: #0090c9;
font-weight: 700;
text-decoration: none;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
ODSTAVCE POD TABULKOU
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> p {
margin: 18px 0 0;
padding: 16px 18px;
color: #444444;
font-size: 14px;
line-height: 1.6;
background: #f2faff;
border: 1px solid #c7e7f3;
border-left: 4px solid #0090c9;
border-radius: 10px;
}
/* prázdný odstavec nezobrazuje prázdný box */
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> p:empty {
display: none;
}
/* =========================================================
ALERT / INFO BOX, POKUD HO SHOPTET POUŽIJE
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
.alert {
margin: 18px 0 0;
padding: 18px;
color: #314e59;
background: #edf9fd;
border: 1px solid #aedceb;
border-left: 5px solid #0090c9;
border-radius: 12px;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) {
max-width: 100%;
padding: 26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) {
width: 100%;
padding: 22px 18px;
border-radius: 14px;
}
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> h1 {
margin-bottom: 20px;
font-size: 25px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody {
gap: 10px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
padding: 16px;
border-radius: 12px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:first-child {
padding-right: 15px;
font-size: 14px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:last-child {
min-height: 34px;
padding: 6px 11px;
font-size: 13px;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) {
padding: 20px 14px;
}
#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> h1 {
margin-bottom: 18px;
font-size: 23px;
}
/*
Na malém mobilu:
název nahoře,
hodnota pod ním.
*/
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 15px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:first-child {
padding-right: 0;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child,
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:last-child {
justify-self: start;
}
}
/* =========================================================
MOBILE 390 PX
========================================================= */
@media screen and (max-width: 390px) {
#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) {
padding: 18px 12px;
}
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
padding: 14px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
transition: none;
}
}
/* =========================================================
CLENO.CZ – ZÁKAZNICKÉ CENTRUM / LEVÉ MENU
Design sjednocený s Cleno.cz
Reálná struktura:
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.sidebar-inner
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
li.logout
[data-testid="buttonSignout"]
========================================================= */
/* =========================================================
SIDEBAR
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"] {
box-sizing: border-box;
min-width: 0;
}
/* =========================================================
VNITŘNÍ WRAPPER
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.sidebar-inner {
width: 100%;
}
/* =========================================================
HLAVNÍ MENU CARD
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
width: 100%;
margin: 0;
padding: 12px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.08);
}
/* box sizing */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] * {
box-sizing: border-box;
}
/* =========================================================
UL
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
ul {
display: flex;
flex-direction: column;
width: 100%;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
/* =========================================================
LI
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li {
position: relative;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
/* =========================================================
MENU ODKAZY
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: 10px 13px;
color: #40535c;
font-size: 14px;
line-height: 1.35;
font-weight: 600;
text-decoration: none;
background: rgba(255, 255, 255, 0.68);
border: 1px solid transparent;
border-radius: 10px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li:not(.active):not(.logout)
> a:hover {
color: #0077a6;
background: #ffffff;
border-color: #cde8f3;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.06);
transform: translateX(2px);
}
}
/* =========================================================
AKTIVNÍ POLOŽKA
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a {
position: relative;
color: #0077a6;
font-weight: 700;
background: #e4f5fb;
border-color: #b9e1f0;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.06);
}
/* levý brand accent */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a::before {
content: "";
position: absolute;
top: 9px;
bottom: 9px;
left: 5px;
width: 3px;
background: #0090c9;
border-radius: 3px;
}
/* více prostoru kvůli accentu */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a {
padding-left: 15px;
}
/* =========================================================
ODHLAŠOVACÍ POLOŽKA
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.logout {
margin-bottom: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #dbeaf1;
}
/* Shoptet má zde .btn.btn-xs.btn-primary,
přepíšeme ho na decentní secondary akci */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 40px;
margin: 0;
padding: 9px 12px;
color: #657781;
font-size: 13px;
line-height: 1.3;
font-weight: 600;
text-align: left;
text-transform: none;
background: #ffffff;
border: 1px solid #dbe8ee;
border-radius: 9px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"]:hover {
color: #4f616b;
background: #f7fbfd;
border-color: #cbdde5;
box-shadow: none;
}
}
/* =========================================================
FOCUS / ACCESSIBILITY
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a:focus-visible {
outline: 2px solid #0090c9;
outline-offset: 2px;
}
/* =========================================================
PŘÍPADNÉ IKONY / SVG / FONT IKONY
pokud je Shoptet v jiných položkách používá
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-right: 9px;
color: #0090c9;
fill: currentColor;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a::before {
flex: 0 0 auto;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
padding: 10px;
border-radius: 12px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
min-height: 42px;
padding-top: 9px;
padding-bottom: 9px;
}
}
/* =========================================================
MOBILE
Pokud Shoptet sidebar zobrazí nad obsahem,
uděláme z menu kompaktní blok.
========================================================= */
@media screen and (max-width: 767px) {
.sidebar.sidebar-left[data-testid="sidebarMenu"] {
width: 100%;
max-width: 100%;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.sidebar-inner {
width: 100%;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
width: 100%;
padding: 10px;
border-radius: 12px;
box-shadow:
0 3px 12px rgba(0, 144, 201, 0.065);
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
ul {
gap: 5px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
min-height: 42px;
padding: 9px 12px;
font-size: 14px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a {
padding-left: 15px;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
padding: 8px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
min-height: 40px;
padding: 8px 11px;
font-size: 13.5px;
border-radius: 9px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
min-height: 38px;
padding: 8px 11px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a,
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
transition: none;
}
}
/* =========================================================
CLENO.CZ – MOJE HODNOCENÍ PRODUKTŮ
Design sjednocený s produktovými popisy Cleno.cz
Reálná Shoptet struktura:
#content
.content-inner
.table.customer-ratings.table-mobile-enriched
[data-testid="tableCustomerRatings"]
.client-table-font
.rating-authorization-pending
.cell--rating
.client-table-heading
.text-center
========================================================= */
/* =========================================================
HLAVNÍ WRAPPER
========================================================= */
#content .content-inner:has([data-testid="tableCustomerRatings"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
/* box sizing pouze uvnitř této stránky */
#content
.content-inner:has([data-testid="tableCustomerRatings"]) * {
box-sizing: border-box;
}
/* =========================================================
NADPIS
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerRatings"])
> h1 {
margin: 0 0 24px;
color: #063f56;
font-size: 29px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================
HLAVNÍ TABULKA
========================================================= */
#content
.table.customer-ratings.table-mobile-enriched[data-testid="tableCustomerRatings"] {
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0 10px;
background: transparent;
}
/* =========================================================
THEAD
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead {
background: transparent;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead
tr {
background: transparent;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead
th {
padding: 0 16px 7px;
border: 0;
background: transparent;
color: #607985;
font-size: 12px;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.035em;
}
/* =========================================================
ŘÁDEK HODNOCENÍ
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font {
transition:
transform 0.18s ease,
filter 0.18s ease;
}
/* jednotlivé buňky vytvářejí jednu společnou bílou kartu */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
min-width: 0;
padding: 17px 16px;
vertical-align: middle;
color: #444444;
font-size: 14px;
line-height: 1.5;
background: #ffffff;
border-top: 1px solid #cde8f3;
border-bottom: 1px solid #cde8f3;
}
/* první buňka */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:first-child {
border-left: 1px solid #cde8f3;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
/* poslední buňka */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:last-child {
border-right: 1px solid #cde8f3;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* jemný stín celé řádky */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.045);
}
/* aby nebyly vidět vnitřní stíny mezi td */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:not(:first-child) {
box-shadow:
4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}
/* =========================================================
HOVER DESKTOP
========================================================= */
@media (hover: hover) and (pointer: fine) {
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font:hover {
transform: translateY(-1px);
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font:hover
> td {
border-top-color: #b7ddea;
border-bottom-color: #b7ddea;
background: #ffffff;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font:hover
> td:first-child {
border-left-color: #b7ddea;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font:hover
> td:last-child {
border-right-color: #b7ddea;
}
}
/* =========================================================
AUTOR
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.client-table-heading {
display: block;
margin: 0 0 3px;
color: #78909b;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.035em;
}
/* text za nadpisem Autor */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td:has(> .client-table-heading) {
color: #063f56;
font-weight: 600;
}
/* =========================================================
E-MAIL / DELŠÍ TEXTY
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td {
overflow-wrap: anywhere;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
a {
color: #0090c9;
font-weight: 600;
text-decoration: none;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
RATING CELL
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.cell--rating {
min-width: 120px;
color: #063f56;
font-weight: 600;
}
/* případné hvězdy, pokud je Shoptet generuje uvnitř cell--rating */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.cell--rating
.stars {
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
/* =========================================================
TEXT-CENTER
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.text-center {
text-align: center;
}
/* =========================================================
ČEKAJÍCÍ AUTORIZACE
rating-authorization-pending je reálná class
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td {
background: #fbfdfe;
}
/*
Jemný modrý akcent na začátku řádku.
Nezasahuje do obsahu.
*/
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td:first-child {
position: relative;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td:first-child::before {
content: "";
position: absolute;
top: 12px;
bottom: 12px;
left: 5px;
width: 3px;
background: #0090c9;
border-radius: 3px;
}
/* =========================================================
FORM ELEMENTY, POKUD JS SHOPTETU PŘIDÁ EDITACI
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.form-control {
max-width: 100%;
min-height: 44px;
padding: 10px 13px;
color: #333333;
background: #ffffff;
border: 1px solid #cde8f3;
border-radius: 10px;
box-shadow: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease;
}
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.form-control:focus {
border-color: #0090c9;
outline: none;
box-shadow:
0 0 0 3px rgba(0, 144, 201, 0.10);
}
/* =========================================================
BUTTONY, POKUD JS SHOPTETU PŘIDÁ AKCI
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.btn-primary {
min-height: 42px;
padding: 9px 16px;
color: #ffffff;
font-weight: 700;
background: #0090c9;
border: 1px solid #0090c9;
border-radius: 10px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease;
}
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.btn-primary:hover {
color: #ffffff;
background: #007caf;
border-color: #007caf;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
#content
.content-inner:has([data-testid="tableCustomerRatings"]) {
max-width: 100%;
padding: 26px;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
padding: 15px 13px;
}
}
/* =========================================================
MOBILE
Respektujeme Shoptet .table-mobile-enriched
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has([data-testid="tableCustomerRatings"]) {
width: 100%;
padding: 22px 18px;
border-radius: 14px;
}
#content
.content-inner:has([data-testid="tableCustomerRatings"])
> h1 {
margin-bottom: 20px;
font-size: 25px;
line-height: 1.25;
}
/*
Nevnucujeme Shoptetu vlastní display:flex/table,
protože table-mobile-enriched řeší jeho mobilní strukturu.
*/
#content
.table.customer-ratings.table-mobile-enriched[data-testid="tableCustomerRatings"] {
width: 100%;
border-spacing: 0 12px;
}
/* každá recenze jako samostatná karta */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font {
border-radius: 12px;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
padding: 11px 15px;
background: #ffffff;
border-left: 1px solid #cde8f3;
border-right: 1px solid #cde8f3;
border-top: 0;
border-bottom: 0;
box-shadow: none;
text-align: left;
}
/* první viditelná buňka */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:first-child {
padding-top: 16px;
border-top: 1px solid #cde8f3;
border-radius:
12px
12px
0
0;
}
/* poslední buňka */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:last-child {
padding-bottom: 16px;
border-bottom: 1px solid #cde8f3;
border-radius:
0
0
12px
12px;
box-shadow:
0 4px 12px rgba(0, 144, 201, 0.06);
}
/* label Autor atd. */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.client-table-heading {
display: block;
margin-bottom: 3px;
color: #0077a6;
font-size: 11px;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.cell--rating {
min-width: 0;
}
/* na mobilu přepis text-center */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center {
text-align: left;
}
/*
pending akcent přizpůsoben mobilní kartě
*/
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td:first-child::before {
top: 10px;
bottom: 0;
left: 5px;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
#content
.content-inner:has([data-testid="tableCustomerRatings"]) {
padding: 20px 14px;
}
#content
.content-inner:has([data-testid="tableCustomerRatings"])
> h1 {
margin-bottom: 18px;
font-size: 23px;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
padding-left: 14px;
padding-right: 14px;
font-size: 14px;
}
}
/* =========================================================
MOBILE 390 PX
========================================================= */
@media screen and (max-width: 390px) {
#content
.content-inner:has([data-testid="tableCustomerRatings"]) {
padding: 18px 12px;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
padding-left: 13px;
padding-right: 13px;
}
}
/* =========================================================
PRÁZDNÁ TABULKA / PŘÍPADNÝ TEXT POD NÍ
========================================================= */
#content
.content-inner:has([data-testid="tableCustomerRatings"])
> p {
margin: 18px 0 0;
padding: 16px 18px;
color: #444444;
font-size: 14px;
line-height: 1.6;
background: #f2faff;
border: 1px solid #c7e7f3;
border-left: 5px solid #0090c9;
border-radius: 10px;
}
#content
.content-inner:has([data-testid="tableCustomerRatings"])
> p:empty {
display: none;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font,
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.form-control,
#content
.content-inner:has([data-testid="tableCustomerRatings"])
.btn-primary {
transition: none;
}
}
/* =========================================================
TLAČÍTKO SMAZAT – červené, bílý text
========================================================= */
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-xs,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-sm,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 14px;
color: #ffffff !important;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
background: #dc2626 !important;
border: 1px solid #dc2626 !important;
border-radius: 10px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn:hover,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn:hover,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-xs:hover,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-sm:hover,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-secondary:hover {
color: #ffffff !important;
background: #b91c1c !important;
border-color: #b91c1c !important;
transform: translateY(-1px);
}
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn:focus-visible,
#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn:focus-visible {
outline: 2px solid #dc2626;
outline-offset: 2px;
}
/* =========================================================
ODHLAŠOVACÍ TLAČÍTKO – ČERVENÉ
========================================================= */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 40px;
margin: 0;
padding: 9px 12px;
color: #ffffff !important;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
text-align: left;
text-transform: none;
background: #dc2626 !important;
border: 1px solid #dc2626 !important;
border-radius: 9px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"]:hover {
color: #ffffff !important;
background: #b91c1c !important;
border-color: #b91c1c !important;
transform: translateY(-1px);
}
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"]:focus-visible {
color: #ffffff !important;
outline: 2px solid #dc2626;
outline-offset: 2px;
}
/* =========================================================
CLENO.CZ – KLIENTSKÉ CENTRUM / POSLEDNÍ 3 OBJEDNÁVKY
Design sjednocený s Cleno.cz
Reálná struktura:
.content-inner
h1
h2
.table.table-mobile-enriched
.cell-price
========================================================= */
/* =========================================================
HLAVNÍ WRAPPER STRÁNKY
========================================================= */
#content .content-inner:has(> h2 + .table.table-mobile-enriched) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched) * {
box-sizing: border-box;
}
/* =========================================================
NADPISY
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h1 {
margin: 0 0 8px;
color: #063f56;
font-size: 29px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h2 {
margin: 0 0 22px;
color: #0090c9;
font-size: 23px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
TABULKA
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched {
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0 10px;
background: transparent;
}
/* =========================================================
THEAD
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead {
background: transparent;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead tr {
background: transparent;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead th {
padding: 0 16px 7px;
border: 0;
background: transparent;
color: #607985;
font-size: 12px;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.035em;
}
/* =========================================================
TĚLO TABULKY – ŘÁDKY JAKO KARTY
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr {
transition:
transform 0.18s ease,
filter 0.18s ease;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
min-width: 0;
padding: 17px 16px;
vertical-align: middle;
color: #444444;
font-size: 14px;
line-height: 1.5;
background: #ffffff;
border-top: 1px solid #cde8f3;
border-bottom: 1px solid #cde8f3;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.045);
}
/* první buňka */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:first-child {
border-left: 1px solid #cde8f3;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
/* poslední buňka */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:last-child {
border-right: 1px solid #cde8f3;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* aby nebyly moc vidět přechody mezi td */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:not(:first-child) {
box-shadow:
4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}
/* =========================================================
HOVER DESKTOP
========================================================= */
@media (hover: hover) and (pointer: fine) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr:hover {
transform: translateY(-1px);
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr:hover > td {
border-top-color: #b7ddea;
border-bottom-color: #b7ddea;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr:hover > td:first-child {
border-left-color: #b7ddea;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr:hover > td:last-child {
border-right-color: #b7ddea;
}
}
/* =========================================================
OBSAH BUNĚK
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched td {
overflow-wrap: anywhere;
}
/* kód objednávky – první sloupec */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:first-child {
color: #063f56;
font-weight: 700;
}
/* ceny */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched .cell-price {
color: #063f56;
font-weight: 700;
white-space: nowrap;
}
/* stav objednávky a stav platby – jemný emphasis */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:nth-child(5),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:nth-child(6) {
color: #40535c;
font-weight: 600;
}
/* sledování zásilky / odkazy */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched a {
color: #0090c9;
font-weight: 700;
text-decoration: none;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
PRÁZDNÁ TABULKA / INFO ODSTAVEC POD NÍ
========================================================= */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> p {
margin: 18px 0 0;
padding: 16px 18px;
color: #444444;
font-size: 14px;
line-height: 1.6;
background: #f2faff;
border: 1px solid #c7e7f3;
border-left: 5px solid #0090c9;
border-radius: 10px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> p:empty {
display: none;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched) {
max-width: 100%;
padding: 26px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
padding: 15px 13px;
}
}
/* =========================================================
MOBILE
Respektujeme Shoptet .table-mobile-enriched
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched) {
width: 100%;
padding: 22px 18px;
border-radius: 14px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h1 {
margin-bottom: 6px;
font-size: 25px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h2 {
margin-bottom: 18px;
font-size: 21px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched {
width: 100%;
border-spacing: 0 12px;
}
/* mobilní karta */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
padding: 11px 15px;
background: #ffffff;
border-left: 1px solid #cde8f3;
border-right: 1px solid #cde8f3;
border-top: 0;
border-bottom: 0;
box-shadow: none;
text-align: left;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:first-child {
padding-top: 16px;
border-top: 1px solid #cde8f3;
border-radius: 12px 12px 0 0;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:last-child {
padding-bottom: 16px;
border-bottom: 1px solid #cde8f3;
border-radius: 0 0 12px 12px;
box-shadow:
0 4px 12px rgba(0, 144, 201, 0.06);
}
/* labely uvnitř mobilní enriched tabulky */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched td::before,
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched .cell-label,
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched .client-table-heading {
color: #0077a6;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched .cell-price {
min-width: 0;
white-space: normal;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched) {
padding: 20px 14px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h1 {
font-size: 23px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h2 {
font-size: 20px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
padding-left: 14px;
padding-right: 14px;
font-size: 14px;
}
}
/* =========================================================
MOBILE 390 PX
========================================================= */
@media screen and (max-width: 390px) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched) {
padding: 18px 12px;
}
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
padding-left: 13px;
padding-right: 13px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr {
transition: none;
}
}
/* =========================================================
CLENO.CZ – MOJE OBJEDNÁVKY
Design sjednocený s Cleno.cz
Reálná Shoptet struktura:
#content
.content-inner
.client-link-bottom-lrem
.table.customer-orders.table-mobile-enriched
[data-testid="tableCustomerOrders"]
.cell--price
.cell--cell--price
========================================================= */
/* =========================================================
HLAVNÍ WRAPPER
========================================================= */
#content .content-inner:has([data-testid="tableCustomerOrders"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
/* box sizing jen uvnitř této stránky */
#content
.content-inner:has([data-testid="tableCustomerOrders"]) * {
box-sizing: border-box;
}
/* =========================================================
CLENO.CZ – KLIENTSKÁ ZÓNA
SJEDNOCENÝ DESIGN VŠECH CUSTOMER TABULEK
Automaticky pokrývá např.:
tableCustomerOrders
tableCustomerInvoices
tableCustomerProformaInvoices
tableCustomerRatings
tableCustomerDiscounts
a další Shoptet customer tabulky
Princip:
[data-testid^="tableCustomer"]
========================================================= */
/* =========================================================
1. HLAVNÍ CONTENT WRAPPER
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
#content
.content-inner:has([data-testid^="tableCustomer"]) * {
box-sizing: border-box;
}
/* =========================================================
2. H1
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
> h1 {
margin: 0 0 24px;
color: #063f56;
font-size: 29px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================
3. H2
např. Poslední 3 objednávky
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
> h2 {
margin: 0 0 20px;
color: #0090c9;
font-size: 22px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
4. VŠECHNY CUSTOMER TABULKY
========================================================= */
#content
.table[data-testid^="tableCustomer"] {
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0 10px;
background: transparent;
}
/* =========================================================
5. THEAD
========================================================= */
#content
.table[data-testid^="tableCustomer"]
thead {
background: transparent;
}
#content
.table[data-testid^="tableCustomer"]
thead
tr {
background: transparent;
}
#content
.table[data-testid^="tableCustomer"]
thead
th {
padding: 0 14px 7px;
color: #607985;
font-size: 11px;
line-height: 1.35;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.035em;
vertical-align: bottom;
background: transparent;
border: 0;
}
/* =========================================================
6. STANDARDNÍ CUSTOMER ŘÁDKY
========================================================= */
#content
.table[data-testid^="tableCustomer"]
tbody
tr {
transition:
transform 0.18s ease;
}
/* =========================================================
7. BUŇKY = BÍLÁ CLENO KARTA
========================================================= */
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td {
min-width: 0;
padding: 17px 14px;
color: #444444;
font-size: 14px;
line-height: 1.45;
vertical-align: middle;
background: #ffffff;
border-top: 1px solid #cde8f3;
border-bottom: 1px solid #cde8f3;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.045);
overflow-wrap: anywhere;
}
/* první buňka */
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:first-child {
border-left: 1px solid #cde8f3;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
/* poslední buňka */
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:last-child {
border-right: 1px solid #cde8f3;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* méně viditelné stíny mezi td */
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:not(:first-child) {
box-shadow:
4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}
/* =========================================================
8. DESKTOP HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
#content
.table[data-testid^="tableCustomer"]
tbody
tr:hover {
transform: translateY(-1px);
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr:hover
> td {
border-top-color: #b7ddea;
border-bottom-color: #b7ddea;
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr:hover
> td:first-child {
border-left-color: #b7ddea;
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr:hover
> td:last-child {
border-right-color: #b7ddea;
}
}
/* =========================================================
9. CLIENT TABLE HEADING
Mobilní label: Datum, Cena, Autor...
========================================================= */
#content
.table[data-testid^="tableCustomer"]
.client-table-heading {
display: block;
margin: 0 0 3px;
color: #0077a6;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* =========================================================
10. CENY
========================================================= */
#content
.table[data-testid^="tableCustomer"]
.cell--price,
#content
.table[data-testid^="tableCustomer"]
.cell--cell--price {
color: #063f56;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
11. ODKAZY
========================================================= */
#content
.table[data-testid^="tableCustomer"]
a {
color: #0090c9;
font-weight: 700;
text-decoration: none;
transition:
color 0.15s ease;
}
#content
.table[data-testid^="tableCustomer"]
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
12. BUTTONY V TABULKÁCH
========================================================= */
#content
.table[data-testid^="tableCustomer"]
a.btn,
#content
.table[data-testid^="tableCustomer"]
button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 12px;
color: #0077a6 !important;
font-size: 13px;
font-weight: 700;
text-decoration: none;
background: #e4f5fb;
border: 1px solid #b9e1f0;
border-radius: 9px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease;
}
#content
.table[data-testid^="tableCustomer"]
a.btn:hover,
#content
.table[data-testid^="tableCustomer"]
button.btn:hover {
color: #006b94 !important;
background: #dff2f9;
border-color: #a9dcea;
text-decoration: none;
}
/* =========================================================
13. TEXT CENTER
========================================================= */
#content
.table[data-testid^="tableCustomer"]
.text-center {
text-align: center;
}
/* =========================================================
14. CLIENT LINK POD/NAD TABULKOU
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem {
margin-bottom: 18px;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem
a {
color: #0090c9;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
15. TEXT / INFO POD TABULKOU
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
> p {
margin: 18px 0 0;
padding: 16px 18px;
color: #444444;
font-size: 14px;
line-height: 1.6;
background: #f2faff;
border: 1px solid #c7e7f3;
border-left: 5px solid #0090c9;
border-radius: 10px;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
> p:empty {
display: none;
}
/* =========================================================
16. FORM INPUTY V CLIENT ZÓNĚ
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
.form-control {
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 10px 13px;
color: #333333;
background: #ffffff;
border: 1px solid #cde8f3;
border-radius: 10px;
box-shadow: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
.form-control:focus {
border-color: #0090c9;
outline: none;
box-shadow:
0 0 0 3px rgba(0, 144, 201, 0.10);
}
/* =========================================================
17. OBECNÝ PRIMARY BUTTON
========================================================= */
#content
.content-inner:has([data-testid^="tableCustomer"])
.btn-primary {
min-height: 42px;
padding: 9px 16px;
color: #ffffff;
font-weight: 700;
background: #0090c9;
border: 1px solid #0090c9;
border-radius: 10px;
box-shadow: none;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
.btn-primary:hover {
color: #ffffff;
background: #007caf;
border-color: #007caf;
}
/* =========================================================
18. SPECIÁLNĚ – OBJEDNÁVKY
Cena včetně DPH zeleně
========================================================= */
#content
.table[data-testid="tableCustomerOrders"]
tbody
tr
> td:nth-child(4) {
color: #198754 !important;
font-weight: 800;
}
/* =========================================================
19. SPECIÁLNĚ – HODNOCENÍ PRODUKTŮ
SMAZAT ČERVENĚ
========================================================= */
#content
.table[data-testid="tableCustomerRatings"]
td.text-center
a.btn,
#content
.table[data-testid="tableCustomerRatings"]
td.text-center
button.btn {
color: #ffffff !important;
background: #dc2626 !important;
border-color: #dc2626 !important;
}
#content
.table[data-testid="tableCustomerRatings"]
td.text-center
a.btn:hover,
#content
.table[data-testid="tableCustomerRatings"]
td.text-center
button.btn:hover {
color: #ffffff !important;
background: #b91c1c !important;
border-color: #b91c1c !important;
}
/* =========================================================
20. DISCOUNTS
tableCustomerDiscounts má jednodušší 2sloupcový layout
========================================================= */
#content
.table[data-testid="tableCustomerDiscounts"] {
border-spacing: 0 10px;
}
#content
.table[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child {
color: #063f56;
font-weight: 700;
}
#content
.table[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child {
color: #0077a6;
font-weight: 700;
}
/* =========================================================
21. TABLET
========================================================= */
@media screen and (max-width: 991px) {
#content
.content-inner:has([data-testid^="tableCustomer"]) {
max-width: 100%;
padding: 26px;
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td {
padding: 15px 11px;
font-size: 13px;
}
#content
.table[data-testid^="tableCustomer"]
thead
th {
padding-left: 11px;
padding-right: 11px;
}
}
/* =========================================================
22. MOBILE
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has([data-testid^="tableCustomer"]) {
width: 100%;
max-width: 100%;
padding: 22px 18px;
border-radius: 14px;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
> h1 {
margin-bottom: 20px;
font-size: 25px;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
> h2 {
margin-bottom: 18px;
font-size: 21px;
}
#content
.table.table-mobile-enriched[data-testid^="tableCustomer"] {
width: 100%;
border-spacing: 0 12px;
}
/* =========================
KAŽDÝ ŘÁDEK = MOBILNÍ KARTA
========================= */
#content
.table.table-mobile-enriched[data-testid^="tableCustomer"]
tbody
tr
> td {
padding: 10px 15px;
color: #444444;
font-size: 14px;
background: #ffffff;
border-left: 1px solid #cde8f3;
border-right: 1px solid #cde8f3;
border-top: 0;
border-bottom: 0;
box-shadow: none;
text-align: left;
white-space: normal;
}
/* horní část */
#content
.table.table-mobile-enriched[data-testid^="tableCustomer"]
tbody
tr
> td:first-child {
padding-top: 16px;
border-top: 1px solid #cde8f3;
border-radius:
12px
12px
0
0;
}
/* spodní část */
#content
.table.table-mobile-enriched[data-testid^="tableCustomer"]
tbody
tr
> td:last-child {
padding-bottom: 16px;
border-bottom: 1px solid #cde8f3;
border-radius:
0
0
12px
12px;
box-shadow:
0 4px 12px rgba(0, 144, 201, 0.06);
}
#content
.table[data-testid^="tableCustomer"]
.cell--price,
#content
.table[data-testid^="tableCustomer"]
.cell--cell--price {
white-space: normal;
}
/* Shoptet labely */
#content
.table[data-testid^="tableCustomer"]
td::before,
#content
.table[data-testid^="tableCustomer"]
.client-table-heading {
color: #0077a6;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
#content
.table[data-testid^="tableCustomer"]
td.text-center {
text-align: left;
}
}
/* =========================================================
23. MOBILE 430
========================================================= */
@media screen and (max-width: 430px) {
#content
.content-inner:has([data-testid^="tableCustomer"]) {
padding: 20px 14px;
}
#content
.content-inner:has([data-testid^="tableCustomer"])
> h1 {
font-size: 23px;
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td {
padding-left: 14px;
padding-right: 14px;
}
}
/* =========================================================
24. MOBILE 390
========================================================= */
@media screen and (max-width: 390px) {
#content
.content-inner:has([data-testid^="tableCustomer"]) {
padding: 18px 12px;
}
#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td {
padding-left: 13px;
padding-right: 13px;
}
}
/* =========================================================
25. ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content
.table[data-testid^="tableCustomer"]
tbody
tr,
#content
.table[data-testid^="tableCustomer"]
a,
#content
.table[data-testid^="tableCustomer"]
button {
transition: none;
}
}
/* =========================================================
CLENO.CZ – KLIENTSKÉ DOBROPISY
Doplněk ke společnému designu klientské zóny
Reálná struktura:
#content
.content-inner
.table.table-mobile-enriched
[data-testid="customerCreditNotes"]
.table-th-code
.table-th-date
.cell--price
========================================================= */
/* =========================================================
HLAVNÍ WRAPPER
========================================================= */
#content
.content-inner:has([data-testid="customerCreditNotes"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 30px;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
#content
.content-inner:has([data-testid="customerCreditNotes"]) * {
box-sizing: border-box;
}
/* =========================================================
NADPIS
========================================================= */
#content
.content-inner:has([data-testid="customerCreditNotes"])
> h1 {
margin: 0 0 24px;
color: #063f56;
font-size: 29px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================
TABULKA
========================================================= */
#content
.table.table-mobile-enriched[data-testid="customerCreditNotes"] {
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0 10px;
background: transparent;
}
/* =========================================================
HLAVIČKA TABULKY
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
thead {
background: transparent;
}
#content
.table[data-testid="customerCreditNotes"]
thead
tr {
background: transparent;
}
#content
.table[data-testid="customerCreditNotes"]
thead
th {
padding: 0 14px 7px;
color: #607985;
font-size: 11px;
line-height: 1.35;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.035em;
vertical-align: bottom;
background: transparent;
border: 0;
}
/* =========================================================
ŘÁDKY
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr {
transition:
transform 0.18s ease;
}
/* =========================================================
BUŇKY = BÍLÁ CLENO KARTA
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
min-width: 0;
padding: 17px 14px;
color: #444444;
font-size: 14px;
line-height: 1.45;
vertical-align: middle;
background: #ffffff;
border-top: 1px solid #cde8f3;
border-bottom: 1px solid #cde8f3;
box-shadow:
0 3px 10px rgba(0, 144, 201, 0.045);
overflow-wrap: anywhere;
}
/* první buňka */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:first-child {
color: #063f56;
font-weight: 700;
border-left: 1px solid #cde8f3;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
/* poslední buňka */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:last-child {
border-right: 1px solid #cde8f3;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* zjemnění přechodů mezi TD */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:not(:first-child) {
box-shadow:
4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) and (pointer: fine) {
#content
.table[data-testid="customerCreditNotes"]
tbody
tr:hover {
transform: translateY(-1px);
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr:hover
> td {
border-top-color: #b7ddea;
border-bottom-color: #b7ddea;
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr:hover
> td:first-child {
border-left-color: #b7ddea;
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr:hover
> td:last-child {
border-right-color: #b7ddea;
}
}
/* =========================================================
MOBILNÍ LABELY
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
.client-table-heading {
display: block;
margin: 0 0 3px;
color: #0077a6;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* =========================================================
CENY
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
.cell--price {
color: #063f56;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
CENA CELKEM VČETNĚ DPH
5. sloupec = zeleně
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5) {
color: #198754 !important;
font-weight: 800;
}
/* případné elementy uvnitř ceny */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5)
strong,
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5)
span {
color: inherit !important;
}
/* =========================================================
DATUM
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(2) {
color: #617680;
}
/* =========================================================
JMÉNO A PŘÍJMENÍ
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(3) {
color: #40535c;
font-weight: 600;
}
/* =========================================================
ODKAZY
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
a {
color: #0090c9;
font-weight: 700;
text-decoration: none;
transition:
color 0.15s ease;
}
#content
.table[data-testid="customerCreditNotes"]
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
BUTTONY
pokud se v tabulce objeví
========================================================= */
#content
.table[data-testid="customerCreditNotes"]
a.btn,
#content
.table[data-testid="customerCreditNotes"]
button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 12px;
color: #0077a6 !important;
font-size: 13px;
font-weight: 700;
text-decoration: none;
background: #e4f5fb;
border: 1px solid #b9e1f0;
border-radius: 9px;
box-shadow: none;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease;
}
#content
.table[data-testid="customerCreditNotes"]
a.btn:hover,
#content
.table[data-testid="customerCreditNotes"]
button.btn:hover {
color: #006b94 !important;
background: #dff2f9;
border-color: #a9dcea;
text-decoration: none;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
#content
.content-inner:has([data-testid="customerCreditNotes"]) {
max-width: 100%;
padding: 26px;
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
padding: 15px 11px;
font-size: 13px;
}
#content
.table[data-testid="customerCreditNotes"]
thead
th {
padding-left: 11px;
padding-right: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has([data-testid="customerCreditNotes"]) {
width: 100%;
max-width: 100%;
padding: 22px 18px;
border-radius: 14px;
}
#content
.content-inner:has([data-testid="customerCreditNotes"])
> h1 {
margin-bottom: 20px;
font-size: 25px;
}
#content
.table.table-mobile-enriched[data-testid="customerCreditNotes"] {
width: 100%;
border-spacing: 0 12px;
}
/* =========================
KAŽDÝ DOBROPIS = KARTA
========================= */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
padding: 10px 15px;
color: #444444;
font-size: 14px;
background: #ffffff;
border-left: 1px solid #cde8f3;
border-right: 1px solid #cde8f3;
border-top: 0;
border-bottom: 0;
box-shadow: none;
text-align: left;
white-space: normal;
}
/* horní část karty */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:first-child {
padding-top: 16px;
border-top: 1px solid #cde8f3;
border-radius:
12px
12px
0
0;
}
/* spodní část */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:last-child {
padding-bottom: 16px;
border-bottom: 1px solid #cde8f3;
border-radius:
0
0
12px
12px;
box-shadow:
0 4px 12px rgba(0, 144, 201, 0.06);
}
#content
.table[data-testid="customerCreditNotes"]
.cell--price {
white-space: normal;
}
/* Shoptet mobilní labely */
#content
.table[data-testid="customerCreditNotes"]
td::before,
#content
.table[data-testid="customerCreditNotes"]
.client-table-heading {
color: #0077a6;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* cena celkem s DPH zůstane zelená */
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5) {
color: #198754 !important;
font-weight: 800;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
#content
.content-inner:has([data-testid="customerCreditNotes"]) {
padding: 20px 14px;
}
#content
.content-inner:has([data-testid="customerCreditNotes"])
> h1 {
font-size: 23px;
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
padding-left: 14px;
padding-right: 14px;
}
}
/* =========================================================
MOBILE 390 PX
========================================================= */
@media screen and (max-width: 390px) {
#content
.content-inner:has([data-testid="customerCreditNotes"]) {
padding: 18px 12px;
}
#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
padding-left: 13px;
padding-right: 13px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content
.table[data-testid="customerCreditNotes"]
tbody
tr,
#content
.table[data-testid="customerCreditNotes"]
a,
#content
.table[data-testid="customerCreditNotes"]
button {
transition: none;
}
}
/* =========================================================
CLENO – POSLEDNÍ OBJEDNÁVKY
DESKTOP: VŠE NA JEDNOM ŘÁDKU
========================================================= */
@media screen and (min-width: 768px) {
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched {
width: 100%;
table-layout: fixed;
border-spacing: 0 10px;
}
/* -----------------------------------------
Všechny hlavičky i hodnoty bez zalamování
----------------------------------------- */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th,
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td {
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none;
padding-left: 10px;
padding-right: 10px;
}
/* -----------------------------------------
Hlavička trochu kompaktnější
----------------------------------------- */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
thead
th {
font-size: 10.5px;
letter-spacing: 0.02em;
line-height: 1.25;
}
/* -----------------------------------------
Hodnoty
----------------------------------------- */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
tbody
td {
font-size: 13px;
}
/* =====================================================
ŠÍŘKY SLOUPCŮ
===================================================== */
/* Kód */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(1),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(1) {
width: 11%;
}
/* Datum */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(2),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(2) {
width: 14%;
}
/* Cena bez DPH */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(3),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(3) {
width: 13%;
}
/* Cena celkem včetně DPH */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(4),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(4) {
width: 20%;
}
/* Stav objednávky */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(5),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(5) {
width: 16%;
}
/* Stav platby */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(6),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(6) {
width: 11%;
}
/* Sledování zásilky */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
th:nth-child(7),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(7) {
width: 15%;
}
/* -----------------------------------------
Kód a tracking – nikdy nelámat číslo
----------------------------------------- */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(1),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(7),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(1) a,
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(7) a {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
/* -----------------------------------------
Stav objednávky – nerozbíjet slova
----------------------------------------- */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched
td:nth-child(5) {
white-space: nowrap !important;
word-break: keep-all !important;
}
}
/* =========================================================
CLENO.CZ – REGISTRACE / NASTAVENÍ ÚČTU
Design sjednocený s Cleno.cz
Reálná struktura ze Shoptetu:
#register-form[data-testid="formRegistration"]
.co-box.co-registration
fieldset.box.box-sm.box-bg-default
.form-group.smart-label-wrapper
.form-control-wrapper
.phone-form-group
.phone-combined-input
.country-flags
.js-country-flags-inner
.form-control
#billFullName
#phone
========================================================= */
/* =========================================================
HLAVNÍ CONTENT
========================================================= */
#content
.content-inner:has(#register-form[data-testid="formRegistration"]) {
box-sizing: border-box;
width: 100%;
max-width: 1000px;
margin: 0 auto;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #333333;
line-height: 1.7;
}
#content
.content-inner:has(#register-form[data-testid="formRegistration"]) * {
box-sizing: border-box;
}
/* =========================================================
H1 – NASTAVENÍ MÉHO ÚČTU
========================================================= */
#content
.content-inner:has(#register-form[data-testid="formRegistration"])
> h1 {
margin: 0 0 24px;
color: #063f56;
font-size: 29px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================
FORM
========================================================= */
#register-form[data-testid="formRegistration"] {
width: 100%;
max-width: 100%;
margin: 0;
}
/* =========================================================
HLAVNÍ REGISTRAČNÍ WRAPPER
========================================================= */
#register-form[data-testid="formRegistration"]
.co-box.co-registration {
width: 100%;
max-width: 100%;
margin: 0;
}
/* =========================================================
FIELDSET / HLAVNÍ CARD
========================================================= */
#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
width: 100%;
margin: 0 0 18px;
padding: 28px;
background: linear-gradient(
135deg,
#eaf7fc 0%,
#ffffff 100%
);
border: 1px solid #bfe3f1;
border-radius: 14px;
box-shadow:
0 4px 16px rgba(0, 144, 201, 0.10);
}
/* =========================================================
H2 UVNITŘ SEKCE
========================================================= */
#register-form[data-testid="formRegistration"]
fieldset
> h2 {
margin: 0 0 22px;
color: #063f56;
font-size: 23px;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.015em;
}
/* =========================================================
POMOCNÉ TEXTY
========================================================= */
#register-form[data-testid="formRegistration"]
fieldset
> p {
margin: 0 0 18px;
color: #60747e;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
FORM GROUP
========================================================= */
#register-form[data-testid="formRegistration"]
.form-group.smart-label-wrapper {
position: relative;
width: 100%;
min-width: 0;
margin: 0 0 17px;
}
/* phone varianta */
#register-form[data-testid="formRegistration"]
.form-group.phone-form-group {
width: 100%;
min-width: 0;
}
/* =========================================================
LABEL
========================================================= */
#register-form[data-testid="formRegistration"]
.form-group
> label {
display: block;
margin: 0 0 7px;
color: #063f56;
font-size: 13px;
line-height: 1.35;
font-weight: 700;
}
/* =========================================================
REQUIRED HVĚZDIČKA
pokud ji Shoptet dává přes pseudo-element
========================================================= */
#register-form[data-testid="formRegistration"]
.form-group.required
> label::after {
color: #0090c9;
}
/* =========================================================
CONTROL WRAPPER
========================================================= */
#register-form[data-testid="formRegistration"]
.form-control-wrapper {
position: relative;
width: 100%;
min-width: 0;
}
/* =========================================================
INPUTY
========================================================= */
#register-form[data-testid="formRegistration"]
.form-control {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 48px;
margin: 0;
padding: 11px 14px;
color: #333333;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.4;
font-weight: 500;
background: #ffffff;
border: 1px solid #cde8f3;
border-radius: 10px;
outline: none;
box-shadow:
0 2px 6px rgba(0, 144, 201, 0.025);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
/* placeholder */
#register-form[data-testid="formRegistration"]
.form-control::placeholder {
color: #91a2aa;
opacity: 1;
}
/* hover */
@media (hover: hover) and (pointer: fine) {
#register-form[data-testid="formRegistration"]
.form-control:hover {
border-color: #b6dce9;
}
}
/* focus */
#register-form[data-testid="formRegistration"]
.form-control:focus {
background: #ffffff;
border-color: #0090c9;
box-shadow:
0 0 0 3px rgba(0, 144, 201, 0.10);
}
/* autofill – Chrome/Safari */
#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill,
#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill:hover,
#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill:focus {
-webkit-text-fill-color: #333333;
-webkit-box-shadow:
0 0 0 1000px #ffffff inset;
transition:
background-color 9999s ease-in-out 0s;
}
/* =========================================================
BILL FULL NAME
========================================================= */
#register-form[data-testid="formRegistration"]
#billFullName {
width: 100%;
}
/* =========================================================
TELEFON – COMBINED INPUT
========================================================= */
#register-form[data-testid="formRegistration"]
.phone-combined-input {
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
background: #ffffff;
border: 1px solid #cde8f3;
border-radius: 10px;
overflow: visible;
box-shadow:
0 2px 6px rgba(0, 144, 201, 0.025);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease;
}
/* focus celé telefonní komponenty */
#register-form[data-testid="formRegistration"]
.phone-combined-input:focus-within {
border-color: #0090c9;
box-shadow:
0 0 0 3px rgba(0, 144, 201, 0.10);
}
/* =========================================================
COUNTRY FLAG ČÁST
========================================================= */
#register-form[data-testid="formRegistration"]
.phone-combined-input
.country-flags {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-width: 64px;
background: #f2faff;
border-right: 1px solid #cde8f3;
border-radius:
9px
0
0
9px;
cursor: pointer;
}
/* vnitřek */
#register-form[data-testid="formRegistration"]
.phone-combined-input
.js-country-flags-inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 11px;
color: #063f56;
}
/* =========================================================
TELEFON INPUT
odstraníme druhý border
========================================================= */
#register-form[data-testid="formRegistration"]
.phone-combined-input
#phone.form-control {
flex: 1 1 auto;
width: auto;
min-width: 0;
min-height: 46px;
border: 0;
border-radius:
0
9px
9px
0;
box-shadow: none;
}
/* vlastní focus už řeší parent */
#register-form[data-testid="formRegistration"]
.phone-combined-input
#phone.form-control:focus {
border: 0;
box-shadow: none;
}
/* =========================================================
COUNTRY SELECT
pokud zůstává v DOM
========================================================= */
#register-form[data-testid="formRegistration"]
.phone-combined-input
select[name="phoneCode"] {
max-width: 100%;
}
/* =========================================================
VALIDACE – ERROR
========================================================= */
#register-form[data-testid="formRegistration"]
.form-control.error,
#register-form[data-testid="formRegistration"]
.form-control.input-error,
#register-form[data-testid="formRegistration"]
.form-control.is-invalid {
border-color: #dc4545;
background: #fffafa;
box-shadow:
0 0 0 3px rgba(220, 69, 69, 0.08);
}
/* pokud chyba vznikne uvnitř telefonního wrapperu */
#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.error),
#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.input-error),
#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.is-invalid) {
border-color: #dc4545;
box-shadow:
0 0 0 3px rgba(220, 69, 69, 0.08);
}
/* validační zprávy */
#register-form[data-testid="formRegistration"]
.form-group
.error-message,
#register-form[data-testid="formRegistration"]
.form-group
.form-error,
#register-form[data-testid="formRegistration"]
.form-group
.validation-error {
margin-top: 5px;
color: #b42323;
font-size: 12px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
VALIDACE – SUCCESS
pokud Shoptet používá success class
========================================================= */
#register-form[data-testid="formRegistration"]
.form-control.valid,
#register-form[data-testid="formRegistration"]
.form-control.is-valid {
border-color: #98d6aa;
}
/* =========================================================
TEXTAREA
pokud je v dalších sekcích formuláře
========================================================= */
#register-form[data-testid="formRegistration"]
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* =========================================================
SELECT
========================================================= */
#register-form[data-testid="formRegistration"]
select.form-control {
cursor: pointer;
appearance: auto;
}
/* =========================================================
CHECKBOX / RADIO
========================================================= */
#register-form[data-testid="formRegistration"]
input[type="checkbox"],
#register-form[data-testid="formRegistration"]
input[type="radio"] {
accent-color: #0090c9;
}
/* =========================================================
CHECKBOX LABELY
========================================================= */
#register-form[data-testid="formRegistration"]
input[type="checkbox"] + label,
#register-form[data-testid="formRegistration"]
input[type="radio"] + label {
color: #40535c;
font-size: 14px;
line-height: 1.5;
cursor: pointer;
}
/* =========================================================
ODKAZY VE FORMULÁŘI
========================================================= */
#register-form[data-testid="formRegistration"]
a {
color: #0090c9;
font-weight: 600;
text-decoration: none;
}
#register-form[data-testid="formRegistration"]
a:hover {
color: #007caf;
text-decoration: underline;
}
/* =========================================================
SUBMIT BUTTON
scoped pouze na tento registrační formulář
========================================================= */
#register-form[data-testid="formRegistration"]
button[type="submit"],
#register-form[data-testid="formRegistration"]
input[type="submit"],
#register-form[data-testid="formRegistration"]
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 11px 20px;
color: #ffffff !important;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
text-decoration: none;
background: #0090c9;
border: 1px solid #0090c9;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
#register-form[data-testid="formRegistration"]
button[type="submit"]:hover,
#register-form[data-testid="formRegistration"]
input[type="submit"]:hover,
#register-form[data-testid="formRegistration"]
.btn-primary:hover {
color: #ffffff !important;
background: #007caf;
border-color: #007caf;
transform: translateY(-1px);
}
}
/* =========================================================
FOCUS ACCESSIBILITY
========================================================= */
#register-form[data-testid="formRegistration"]
button:focus-visible,
#register-form[data-testid="formRegistration"]
a:focus-visible,
#register-form[data-testid="formRegistration"]
input:focus-visible,
#register-form[data-testid="formRegistration"]
select:focus-visible,
#register-form[data-testid="formRegistration"]
textarea:focus-visible {
outline: 2px solid #0090c9;
outline-offset: 2px;
}
/* inputy mají vlastní focus ring */
#register-form[data-testid="formRegistration"]
.form-control:focus-visible {
outline: none;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 991px) {
#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
padding: 26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 767px) {
#content
.content-inner:has(#register-form[data-testid="formRegistration"])
> h1 {
margin-bottom: 20px;
font-size: 25px;
}
#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
padding: 20px 18px;
border-radius: 14px;
}
#register-form[data-testid="formRegistration"]
fieldset
> h2 {
margin-bottom: 18px;
font-size: 21px;
}
#register-form[data-testid="formRegistration"]
.form-group.smart-label-wrapper {
margin-bottom: 15px;
}
#register-form[data-testid="formRegistration"]
.form-control {
min-height: 46px;
font-size: 16px;
}
/*
16px na inputu zabrání automatickému zoomu
v iOS Safari.
*/
#register-form[data-testid="formRegistration"]
.phone-combined-input {
width: 100%;
}
#register-form[data-testid="formRegistration"]
.phone-combined-input
.country-flags {
min-width: 62px;
}
#register-form[data-testid="formRegistration"]
button[type="submit"],
#register-form[data-testid="formRegistration"]
input[type="submit"],
#register-form[data-testid="formRegistration"]
.btn-primary {
width: 100%;
min-height: 46px;
}
}
/* =========================================================
MOBILE 430 PX
========================================================= */
@media screen and (max-width: 430px) {
#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
padding: 18px 14px;
}
#content
.content-inner:has(#register-form[data-testid="formRegistration"])
> h1 {
font-size: 23px;
}
#register-form[data-testid="formRegistration"]
fieldset
> h2 {
font-size: 20px;
}
#register-form[data-testid="formRegistration"]
.form-control {
padding-left: 12px;
padding-right: 12px;
}
#register-form[data-testid="formRegistration"]
.phone-combined-input
.country-flags {
min-width: 58px;
}
}
/* =========================================================
MOBILE 390 PX
========================================================= */
@media screen and (max-width: 390px) {
#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
padding: 17px 12px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#register-form[data-testid="formRegistration"]
.form-control,
#register-form[data-testid="formRegistration"]
.phone-combined-input,
#register-form[data-testid="formRegistration"]
button,
#register-form[data-testid="formRegistration"]
.btn {
transition: none;
}
}
/* =========================================================
CLENO.CZ – FINÁLNÍ OPRAVY + MASTER MOBILE OVERRIDE
Tento blok je záměrně na konci a přebíjí starší mobilní
pravidla v klientské zóně.
========================================================= */
/* ---------------------------------------------------------
Registrační wrapper – odstranit původní Shoptet rámeček
--------------------------------------------------------- */
#register-form[data-testid="formRegistration"] .co-box.co-registration {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
Validační hlášky – jednotný radius
--------------------------------------------------------- */
.validator-msg,
.msg-error,
.validator-msg.msg-warning,
.js-validator-msg.msg-error,
.validator-msg.msg-info {
border-radius: 10px !important;
}
@media screen and (max-width: 767px) {
/* =====================================================
1. CELKOVÝ LAYOUT KLIENTSKÉ ZÓNY
===================================================== */
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
overflow-x: clip;
}
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) .content-wrapper-in {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 14px !important;
}
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) main#content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) #content .content-inner {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =====================================================
2. SIDEBAR → HORIZONTÁLNÍ MOBILNÍ NAVIGACE
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"] .sidebar-inner {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 8px !important;
background: linear-gradient(135deg, #eaf7fc 0%, #ffffff 100%) !important;
border: 1px solid #bfe3f1 !important;
border-radius: 12px !important;
box-shadow: 0 3px 12px rgba(0, 144, 201, 0.06) !important;
overflow: hidden !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] ul {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
width: 100% !important;
gap: 7px !important;
margin: 0 !important;
padding: 1px 1px 5px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] ul::-webkit-scrollbar {
display: none;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
scroll-snap-align: start;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: max-content !important;
min-height: 40px !important;
padding: 8px 12px !important;
color: #40535c;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 600;
white-space: nowrap !important;
background: #ffffff;
border: 1px solid #e0edf2;
border-radius: 9px !important;
box-shadow: none;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li.active > a {
position: relative;
padding: 8px 12px !important;
color: #0077a6;
background: #e4f5fb;
border-color: #b9e1f0;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li.active > a::before {
content: "";
position: absolute;
top: auto !important;
bottom: 3px !important;
left: 11px !important;
right: 11px !important;
width: auto !important;
height: 2px !important;
background: #0090c9;
border-radius: 3px;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li.logout {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
order: 999;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: max-content !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 12px !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
white-space: nowrap !important;
background: #dc2626 !important;
border: 1px solid #dc2626 !important;
border-radius: 9px !important;
}
/* =====================================================
3. CONTENT CARDS
===================================================== */
#content .content-inner:has([data-testid^="tableCustomer"]),
#content .content-inner:has([data-testid="customerCreditNotes"]),
#content .content-inner:has(> h2 + .table.table-mobile-enriched) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px 14px !important;
background: linear-gradient(135deg, #eaf7fc 0%, #ffffff 100%) !important;
border: 1px solid #bfe3f1 !important;
border-radius: 12px !important;
box-shadow: 0 3px 12px rgba(0, 144, 201, 0.07) !important;
overflow: hidden !important;
}
/* =====================================================
4. NADPISY
===================================================== */
#content .content-inner > h1 {
max-width: 100%;
margin-top: 0 !important;
font-size: 24px !important;
line-height: 1.2 !important;
overflow-wrap: anywhere;
}
#content .content-inner > h2 {
max-width: 100%;
font-size: 19px !important;
line-height: 1.3 !important;
overflow-wrap: anywhere;
}
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > h1 {
margin-bottom: 5px !important;
}
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > h2 {
margin-bottom: 16px !important;
}
/* =====================================================
5. CUSTOMER TABULKY → MOBILNÍ KARTY
===================================================== */
#content .table.table-mobile-enriched[data-testid^="tableCustomer"],
#content .table.table-mobile-enriched[data-testid="customerCreditNotes"],
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border: 0 !important;
border-spacing: 0 !important;
background: transparent !important;
overflow: visible !important;
}
#content .table.table-mobile-enriched[data-testid^="tableCustomer"] > thead,
#content .table.table-mobile-enriched[data-testid="customerCreditNotes"] > thead,
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched > thead {
display: none !important;
}
#content .table.table-mobile-enriched[data-testid^="tableCustomer"] > tbody,
#content .table.table-mobile-enriched[data-testid="customerCreditNotes"] > tbody,
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched > tbody {
display: block !important;
width: 100% !important;
}
#content .table.table-mobile-enriched[data-testid^="tableCustomer"] tbody > tr,
#content .table.table-mobile-enriched[data-testid="customerCreditNotes"] tbody > tr,
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched tbody > tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 12px !important;
padding: 0 !important;
background: #ffffff;
border: 1px solid #cde8f3 !important;
border-radius: 12px !important;
box-shadow: 0 3px 10px rgba(0, 144, 201, 0.055) !important;
overflow: hidden !important;
transform: none !important;
}
#content .table.table-mobile-enriched tbody > tr:last-child {
margin-bottom: 0 !important;
}
#content .table.table-mobile-enriched[data-testid^="tableCustomer"] tbody > tr > td,
#content .table.table-mobile-enriched[data-testid="customerCreditNotes"] tbody > tr > td,
#content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched tbody > tr > td {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 2px !important;
margin: 0 !important;
padding: 10px 13px !important;
color: #3f4d55;
font-size: 14px !important;
line-height: 1.4 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #edf3f6 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#content .table.table-mobile-enriched tbody > tr > td:last-child {
border-bottom: 0 !important;
}
#content .table.table-mobile-enriched .client-table-heading,
#content .table.table-mobile-enriched .cell-label {
display: block !important;
width: 100% !important;
margin: 0 0 2px !important;
color: #0077a6 !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.035em;
white-space: normal !important;
}
#content .table.table-mobile-enriched .cell--price,
#content .table.table-mobile-enriched .cell--cell--price,
#content .table.table-mobile-enriched .cell-price {
min-width: 0 !important;
white-space: normal !important;
}
#content .table.table-mobile-enriched td a {
max-width: 100% !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}
/* =====================================================
6. STAVY OBJEDNÁVEK
===================================================== */
#content .table.table-mobile-enriched tbody tr.cleno-order-success {
background: #f2fbf5 !important;
border-color: #c7e7d0 !important;
}
#content .table.table-mobile-enriched tbody tr.cleno-order-cancelled {
background: #fff5f5 !important;
border-color: #f0cccc !important;
}
#content .table.table-mobile-enriched tbody tr.cleno-order-pending {
background: #fffbea !important;
border-color: #eedf9f !important;
}
/* =====================================================
7. HODNOCENÍ – SMAZAT
===================================================== */
#content .table[data-testid="tableCustomerRatings"] td.text-center .btn,
#content .table[data-testid="tableCustomerRatings"] td.text-center a.btn,
#content .table[data-testid="tableCustomerRatings"] td.text-center button.btn {
width: 100% !important;
margin-top: 3px !important;
color: #ffffff !important;
background: #dc2626 !important;
border-color: #dc2626 !important;
border-radius: 9px !important;
}
/* =====================================================
8. MOJE SLEVY
===================================================== */
#content .table.table-md-50[data-testid="tableCustomerDiscounts"] {
display: block !important;
width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
#content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 9px !important;
}
#content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 8px !important;
padding: 13px !important;
background: #ffffff !important;
border: 1px solid #cde8f3 !important;
border-radius: 11px !important;
box-shadow: 0 3px 10px rgba(0, 144, 201, 0.05) !important;
}
#content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr > td {
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
#content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr > td:last-child {
align-self: flex-start !important;
width: auto !important;
padding: 6px 11px !important;
}
/* =====================================================
9. REGISTRACE / NASTAVENÍ ÚČTU
===================================================== */
#register-form[data-testid="formRegistration"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
#register-form[data-testid="formRegistration"] .co-box.co-registration {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#register-form[data-testid="formRegistration"] fieldset {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 12px !important;
padding: 16px 14px !important;
border-radius: 12px !important;
}
#register-form[data-testid="formRegistration"] fieldset > h2 {
margin-bottom: 16px !important;
font-size: 19px !important;
line-height: 1.3 !important;
}
#register-form[data-testid="formRegistration"] .form-group {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 0 14px !important;
}
#register-form[data-testid="formRegistration"] .form-group > label {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.3 !important;
text-align: left !important;
}
#register-form[data-testid="formRegistration"] .form-control-wrapper,
#register-form[data-testid="formRegistration"] .js-validated-element-wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
#register-form[data-testid="formRegistration"] .form-control {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 46px !important;
padding: 10px 12px !important;
font-size: 16px !important;
line-height: 1.35 !important;
border-radius: 10px !important;
}
#register-form[data-testid="formRegistration"] .phone-combined-input {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
border-radius: 10px !important;
}
#register-form[data-testid="formRegistration"]
.phone-combined-input .country-flags {
flex: 0 0 92px !important;
width: 92px !important;
min-width: 92px !important;
max-width: 92px !important;
}
#register-form[data-testid="formRegistration"]
.phone-combined-input input.form-control {
flex: 1 1 0 !important;
width: 1% !important;
min-width: 0 !important;
border-radius: 0 9px 9px 0 !important;
}
/* =====================================================
10. VALIDAČNÍ HLÁŠKY
Desktop Shoptet je má absolute; na mobilu musí být pod polem.
===================================================== */
.validator-msg,
.msg-error,
.validator-msg.msg-warning,
.js-validator-msg.msg-error,
.validator-msg.msg-info {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 6px 0 0 !important;
padding: 8px 10px !important;
font-size: 12px !important;
line-height: 1.35 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
#register-form[data-testid="formRegistration"] button[type="submit"],
#register-form[data-testid="formRegistration"] input[type="submit"],
#register-form[data-testid="formRegistration"] .btn-primary {
width: 100% !important;
max-width: 100% !important;
min-height: 46px !important;
margin-top: 4px !important;
border-radius: 10px !important;
}
/* =====================================================
11. OBECNÝ OVERFLOW FIX
===================================================== */
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) img,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) iframe,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) form,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) fieldset,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) table {
max-width: 100% !important;
}
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) input,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) select,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) textarea,
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) button {
min-width: 0 !important;
}
}
@media screen and (max-width: 430px) {
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
padding-left: 10px !important;
padding-right: 10px !important;
}
#content .content-inner:has([data-testid^="tableCustomer"]),
#content .content-inner:has([data-testid="customerCreditNotes"]),
#content .content-inner:has(> h2 + .table.table-mobile-enriched) {
padding: 14px 12px !important;
}
#content .content-inner > h1 {
font-size: 22px !important;
}
#content .content-inner > h2 {
font-size: 18px !important;
}
#register-form[data-testid="formRegistration"] fieldset {
padding: 14px 12px !important;
}
#content .table.table-mobile-enriched tbody > tr > td {
padding: 9px 11px !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] li > a,
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
min-height: 38px !important;
padding: 7px 10px !important;
font-size: 12.5px !important;
}
}
@media screen and (max-width: 390px) {
#content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
padding-left: 8px !important;
padding-right: 8px !important;
}
#content .content-inner:has([data-testid^="tableCustomer"]),
#content .content-inner:has([data-testid="customerCreditNotes"]),
#content .content-inner:has(> h2 + .table.table-mobile-enriched) {
padding: 12px 10px !important;
}
#content .table.table-mobile-enriched tbody > tr > td {
padding-left: 10px !important;
padding-right: 10px !important;
}
#register-form[data-testid="formRegistration"]
.phone-combined-input .country-flags {
flex-basis: 86px !important;
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
}
}
/* =========================================================
CLENO.CZ – FINÁLNÍ MOBILNÍ MENU + CHECKBOX FIX
vložit ÚPLNĚ NA KONEC CSS
========================================================= */
@media screen and (max-width: 767px) {
/* =====================================================
1. MOBILNÍ MENU – ČISTÁ 2SLOUPCOVÁ MŘÍŽKA
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
width: 100% !important;
padding: 9px !important;
background: linear-gradient(
135deg,
#edf9fd 0%,
#ffffff 100%
) !important;
border: 1px solid #bfe3f1 !important;
border-radius: 14px !important;
box-shadow:
0 3px 12px rgba(0, 144, 201, 0.06) !important;
overflow: hidden !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
ul {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
}
/* =====================================================
MENU LI
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 0 !important;
}
/* úplně odstranit tečky */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li::marker {
content: "" !important;
display: none !important;
}
/* =====================================================
VŠECHNY MENU POLOŽKY
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 7px 8px !important;
color: #40535c !important;
font-size: 13px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
text-align: center !important;
/* DŮLEŽITÉ – dlouhé názvy na 2 řádky */
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
overflow: visible !important;
text-overflow: clip !important;
background: #ffffff !important;
border: 1px solid #d5e8f0 !important;
border-radius: 11px !important;
box-shadow:
0 1px 3px rgba(0, 80, 110, 0.025) !important;
box-sizing: border-box !important;
transform: none !important;
}
/* odstranit staré čárky/accenty u položek */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a::before,
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a::after {
content: none !important;
display: none !important;
}
/* =====================================================
AKTIVNÍ POLOŽKA
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active > a {
color: #ffffff !important;
background: linear-gradient(
135deg,
#0088bd 0%,
#00a3d9 100%
) !important;
border-color: #0090c9 !important;
box-shadow:
0 3px 8px rgba(0, 144, 201, 0.16) !important;
}
/* =====================================================
ODHLÁSIT SE
Stejná velikost jako ostatní,
ale poslední osamocené tlačítko vycentrujeme.
===================================================== */
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.logout {
grid-column: 1 / -1 !important;
justify-self: center !important;
width: calc((100% - 8px) / 2) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 7px 8px !important;
color: #ffffff !important;
font-size: 13px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
text-align: center !important;
white-space: normal !important;
background: #dc2626 !important;
border: 1px solid #dc2626 !important;
border-radius: 11px !important;
box-shadow:
0 3px 8px rgba(220, 38, 38, 0.12) !important;
box-sizing: border-box !important;
}
/* =====================================================
2. CHECKBOXY – KOMPLETNÍ RESET
Shoptet checkbox už nebudeme nechávat skrytý.
Použijeme skutečný nativní checkbox.
===================================================== */
#register-form[data-testid="formRegistration"]
input[type="checkbox"],
#register-form[data-testid="formRegistration"]
input[type="radio"],
#shipping-address-form
input[type="checkbox"],
#shipping-address-form
input[type="radio"] {
/* zrušení případného Shoptet schování */
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
/* velikost */
flex: 0 0 20px !important;
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 1px 0 0 0 !important;
padding: 0 !important;
/* nativní checkbox */
-webkit-appearance: checkbox !important;
appearance: auto !important;
accent-color: #0090c9 !important;
transform: none !important;
float: none !important;
pointer-events: auto !important;
z-index: auto !important;
cursor: pointer !important;
}
/* radio */
#register-form[data-testid="formRegistration"]
input[type="radio"],
#shipping-address-form
input[type="radio"] {
-webkit-appearance: radio !important;
}
/* =====================================================
FORM GROUP OBSAHUJÍCÍ CHECKBOX
===================================================== */
#register-form[data-testid="formRegistration"]
.form-group:has(input[type="checkbox"]),
#register-form[data-testid="formRegistration"]
.form-group:has(input[type="radio"]),
#shipping-address-form
.form-group:has(input[type="checkbox"]),
#shipping-address-form
.form-group:has(input[type="radio"]) {
display: grid !important;
grid-template-columns:
20px
minmax(0, 1fr) !important;
align-items: start !important;
column-gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
/* =====================================================
LABEL ZA CHECKBOXEM
===================================================== */
#register-form[data-testid="formRegistration"]
.form-group:has(input[type="checkbox"])
> label,
#register-form[data-testid="formRegistration"]
.form-group:has(input[type="radio"])
> label,
#shipping-address-form
.form-group:has(input[type="checkbox"])
> label,
#shipping-address-form
.form-group:has(input[type="radio"])
> label {
grid-column: 2 !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #40535c !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
cursor: pointer !important;
}
/* =====================================================
KLASICKÉ INPUT + LABEL
===================================================== */
#register-form[data-testid="formRegistration"]
input[type="checkbox"] + label,
#register-form[data-testid="formRegistration"]
input[type="radio"] + label,
#shipping-address-form
input[type="checkbox"] + label,
#shipping-address-form
input[type="radio"] + label {
position: static !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #40535c !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
text-align: left !important;
white-space: normal !important;
transform: none !important;
}
/* =====================================================
ZRUŠIT SHOPTET VIRTUÁLNÍ CHECKBOX
Teď ho můžeme bezpečně vypnout, protože skutečný
input je výše natvrdo viditelný.
===================================================== */
#register-form[data-testid="formRegistration"]
input[type="checkbox"] + label::before,
#register-form[data-testid="formRegistration"]
input[type="checkbox"] + label::after,
#register-form[data-testid="formRegistration"]
input[type="radio"] + label::before,
#register-form[data-testid="formRegistration"]
input[type="radio"] + label::after,
#shipping-address-form
input[type="checkbox"] + label::before,
#shipping-address-form
input[type="checkbox"] + label::after,
#shipping-address-form
input[type="radio"] + label::before,
#shipping-address-form
input[type="radio"] + label::after {
content: none !important;
display: none !important;
}
/* =====================================================
VARIANTA, KDY JE INPUT UVNITŘ LABELU
===================================================== */
#register-form[data-testid="formRegistration"]
label:has(> input[type="checkbox"]),
#register-form[data-testid="formRegistration"]
label:has(> input[type="radio"]),
#shipping-address-form
label:has(> input[type="checkbox"]),
#shipping-address-form
label:has(> input[type="radio"]) {
display: grid !important;
grid-template-columns:
20px
minmax(0, 1fr) !important;
align-items: start !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
color: #40535c !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
}
}
/* =========================================================
VELMI MALÝ MOBIL
========================================================= */
@media screen and (max-width: 360px) {
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
ul {
grid-template-columns: 1fr !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.logout {
grid-column: auto !important;
width: 100% !important;
}
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a,
.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
height: auto !important;
min-height: 52px !important;
}
}
/* ==================== cleno-loga-slider.css ==================== */
/* ===== Cleno.cz – banner s logy značek (Dklab Loga slider) ===== */
/* Styl sladěný s kartami popisu kategorií (cleno-kategorie.css) */
#dklabLogaSliderWrapper {
position: relative;
margin: 56px auto 0;
padding: 40px 32px 34px;
background: linear-gradient(135deg, #ebf5fe 0%, #f3f9fe 50%, #fafcff 100%);
border: 1px solid #e0eef9;
border-radius: 24px;
box-shadow: none;
font-family: "Nunito Sans", sans-serif;
text-align: center;
}
/* Nadpis „Značky“ – sjednocený s ostatními nadpisy sekcí (tmavě modrý text + krátká linka pod nadpisem) */
#dklabLogaSliderWrapper::before {
content: "Značky";
display: block;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 36px;
font-weight: 800;
letter-spacing: -.015em;
color: #163d5c;
background: none;
}
/* krátká linka pod nadpisem (na střed) */
#dklabLogaSliderWrapper::after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 88px;
width: 44px;
height: 4px;
margin-left: -22px;
border-radius: 4px;
background: linear-gradient(90deg, #0b6fb0 0%, #239ceb 55%, #8fd0f7 100%);
}
#dklabLogaSliderContent { margin-top: 34px; }
/* Jemné zmizení log do stran */
#dklabLogaSliderContent {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
text-align: left;
}
#dklabLogaSlider {
padding: 6px 0 8px; /* místo pro zvednutí karty při najetí */
}
#dklabLogaSlider .logo.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
box-sizing: border-box;
}
/* Karta s logem – bílá, jemný modrý okraj, bez stínu */
#dklabLogaSlider .logo a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 92px;
padding: 18px 24px;
box-sizing: border-box;
background: #fff;
border: 1px solid #e0eef9;
border-radius: 16px;
box-shadow: none;
transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
}
/* Loga v klidu šedá, po najetí v barvě */
#dklabLogaSlider .logo img {
max-width: 100%;
max-height: 38px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: .55;
transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
#dklabLogaSlider .logo a:hover,
#dklabLogaSlider .logo a:focus-visible {
transform: translateY(-4px);
border-color: #239CEB;
}
#dklabLogaSlider .logo a:hover img,
#dklabLogaSlider .logo a:focus-visible img {
filter: none;
opacity: 1;
transform: scale(1.04);
}
/* Mobil */
@media (max-width: 767px) {
#dklabLogaSliderWrapper {
margin: 32px 16px 0;
padding: 26px 10px 18px;
border-radius: 18px;
}
#dklabLogaSliderWrapper::before {
font-size: 23px;
line-height: 30px;
}
#dklabLogaSliderWrapper::after {
top: 65px;
width: 36px;
height: 3px;
margin-left: -18px;
}
#dklabLogaSliderContent { margin-top: 26px; }
#dklabLogaSlider .logo.swiper-slide {
padding: 0 5px;
}
#dklabLogaSlider .logo a {
height: 68px;
padding: 12px 14px;
border-radius: 12px;
}
#dklabLogaSlider .logo img {
max-height: 30px;
}
#dklabLogaSlider .logo a:hover {
transform: none;
}
#dklabLogaSliderContent {
-webkit-mask-image: none;
mask-image: none;
}
}
/* mobil – blok Značky stejně široký jako ostatní bloky (okraj 12 px, dřív 16 px) */
@media (max-width:767px){
html body #dklabLogaSliderWrapper.container{margin-left:12px !important;margin-right:12px !important;width:auto !important;max-width:none !important;}
}
/* ==================== cleno-paticka.css ==================== */
/* ===== Cleno.cz – patička (tmavá prémiová varianta) ===== */
/* --- Pozadí patičky --- */
#footer {
background:
radial-gradient(ellipse 70% 60% at 85% 0%, rgba(35, 156, 235, .35) 0%, rgba(35, 156, 235, 0) 70%),
radial-gradient(ellipse 60% 50% at 0% 100%, rgba(7, 189, 252, .16) 0%, rgba(7, 189, 252, 0) 70%),
linear-gradient(180deg, #0a4378 0%, #0b5594 100%) !important;
color: rgba(255, 255, 255, .75);
}
/* --- Rozložení: kontakt + platby | Top kategorie | Užitečné odkazy --- */
#footer .custom-footer {
display: grid !important;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"kontakt kategorie odkazy"
"platby kategorie odkazy";
grid-template-rows: auto 1fr;
column-gap: 56px;
row-gap: 0;
padding: 64px 0 56px;
border-top: 0 !important;
}
#footer .custom-footer > div {
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
#footer .custom-footer__contact { grid-area: kontakt; }
#footer .custom-footer__banner4 { grid-area: platby; align-self: start; }
#footer .custom-footer__banner50 { grid-area: kategorie; }
#footer .custom-footer__articles { grid-area: odkazy; }
/* --- Kontaktní karta (matné sklo) – horní část --- */
#footer .contact-box {
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 32px 32px 24px !important;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-bottom: 0;
border-radius: 14px 14px 0 0;
box-shadow: none;
margin: 0 !important;
}
/* Bílé logo */
#footer .contact-box .site-name {
position: static !important;
order: -1;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 0 6px;
line-height: 0;
}
#footer .contact-box .site-name img {
display: block;
max-height: 44px;
width: auto;
margin: 0 !important;
filter: brightness(0) invert(1);
}
/* „Pomůžeme vám s výběrem“ */
#footer .contact-box::before {
width: auto !important;
max-width: none !important;
margin: 0;
font-size: 19px;
line-height: 1.3;
font-weight: 700;
color: #fff;
}
/* E-mail a telefon jako klikací dlaždice */
#footer .contact-box ul {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 10px;
margin: 4px 0 0;
padding: 0;
}
#footer .contact-box li {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap;
}
#footer .contact-box .mail,
#footer .contact-box .tel {
position: relative;
display: flex !important;
align-items: center;
gap: 14px;
padding: 10px 16px 10px 10px !important;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
text-align: left;
}
/* Ikona v kroužku */
#footer .contact-box .mail::before,
#footer .contact-box .tel::before {
position: static !important;
flex: 0 0 40px;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 18px !important;
text-align: center;
border-radius: 50%;
background: rgba(7, 189, 252, .15);
color: #07bdfc;
}
#footer .contact-box .mail a,
#footer .contact-box .tel a {
display: flex;
flex-direction: column;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
color: #fff;
text-decoration: none;
}
/* Popisek nad údajem */
#footer .contact-box .mail a::before,
#footer .contact-box .tel a::before {
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(255, 255, 255, .55);
}
#footer .contact-box .mail a::before { content: "Napište nám"; }
#footer .contact-box .tel a::before { content: "Zavolejte nám"; }
/* Klikací je jen e-mail a telefon – při najetí myší se zvýrazní */
#footer .contact-box .mail a,
#footer .contact-box .tel a {
transition: color .2s ease;
}
#footer .contact-box .mail a:hover,
#footer .contact-box .tel a:hover {
color: #07bdfc;
text-decoration: underline;
text-underline-offset: 3px;
}
/* popisek nad údajem se nepodtrhává */
#footer .contact-box .mail a::before,
#footer .contact-box .tel a::before {
text-decoration: none;
display: inline-block;
}
/* --- Platby kartou – spodní část kontaktní karty --- */
#footer .custom-footer > .custom-footer__banner4 {
padding: 0 32px 28px !important;
text-align: center;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-top: 0;
border-radius: 0 0 14px 14px;
}
#footer .custom-footer__banner4 .banner {
margin: 0;
padding: 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, .1);
}
#footer .custom-footer__banner4 .banner-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
/* Nápis jako bílý text (původní nápis v obrázku je oříznutý) */
#footer .custom-footer__banner4 .banner-wrapper::before {
content: "Přijímáme platby kartou";
margin-bottom: 10px;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
color: #fff;
}
/* Z obrázku zůstanou jen barevná loga VISA a Mastercard */
#footer .custom-footer__banner4 img {
display: block;
width: 250px !important;
height: 50px !important;
max-width: 100%;
object-fit: cover;
object-position: 50% 75%;
}
/* --- Sloupce s odkazy --- */
#footer .custom-footer > .custom-footer__banner50,
#footer .custom-footer > .custom-footer__articles {
padding-top: 8px !important;
}
#footer .custom-footer > .custom-footer__articles {
padding-left: 56px !important;
border-left: 1px solid rgba(255, 255, 255, .1);
}
#footer .custom-footer__banner50 h4,
#footer .custom-footer__articles h3 {
position: relative;
margin: 0 0 28px;
padding-bottom: 16px;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #fff;
}
/* Linka pod nadpisem (jen od tabletu výš – na mobilu je tu šipka rozbalování) */
@media (min-width: 768px) {
#footer .custom-footer__banner50 h4::after,
#footer .custom-footer__articles h3::after {
content: "";
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: 0;
width: 36px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #0c67b2 0%, #07bdfc 100%);
}
}
#footer .custom-footer__banner50 ul,
#footer .custom-footer__articles ul {
margin: 0;
padding: 0;
list-style: none;
}
#footer .custom-footer__banner50 li,
#footer .custom-footer__articles li {
margin: 0 0 13px !important;
padding: 0 !important;
line-height: 1.4 !important;
}
#footer .custom-footer__banner50 li::before,
#footer .custom-footer__articles li::before {
display: none !important;
}
#footer .custom-footer__banner50 li a,
#footer .custom-footer__articles li a {
display: inline-block;
font-size: 15px;
color: rgba(255, 255, 255, .72);
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
#footer .custom-footer__banner50 li a:hover,
#footer .custom-footer__articles li a:hover {
color: #fff;
transform: translateX(4px);
}
/* --- Odznaky (Heureka, 12 let, Mall, Firmy.cz…) – skleněné kartičky --- */
#footer .footer-links-icons {
margin: 0 auto !important;
padding: 8px 0 56px !important;
border: 0 !important;
}
#footer .footer-icons {
display: flex !important;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 16px;
padding: 0 !important;
background: none;
border: 0;
}
#footer .footer-icons::before {
content: "Nakupujte s jistotou";
flex: 0 0 100%;
margin-bottom: 12px;
text-align: center;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #fff;
}
#footer .footer-icon {
flex: 0 0 184px;
width: 184px !important;
height: 108px !important;
margin: 0 !important;
padding: 18px 20px !important;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 14px;
transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, border-color .3s ease;
}
#footer .footer-icon:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, .12);
border-color: #07bdfc;
}
#footer .footer-icon > div,
#footer .footer-icon a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#footer .footer-icon img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 70px;
object-fit: contain;
}
/* Logo „Filtry do chladniček“ má tmavý text – převedeno na bílou */
#footer .footer-icon img[src*="filtry-ikona"] {
filter: brightness(0) invert(1);
transform: scale(1.7); /* obrázek má kolem loga hodně prázdného místa */
}
/* MALL má vlastní bílý rámeček – jen jemně zaoblit */
#footer .footer-icon img[src*="nrholding"] {
border-radius: 6px;
}
/* Firmy.cz je široký odznak – dostane širší kartičku */
#footer .footer-icon:has(img[src*="firmy.cz"]) {
flex-basis: 264px;
width: 264px !important;
}
/* --- Spodní lišta --- */
#footer .footer-bottom {
justify-content: center !important;
padding: 24px 0 !important;
border-top: 1px solid rgba(255, 255, 255, .1) !important;
font-size: 14px;
text-align: center;
}
#footer .footer-bottom .copyright {
width: 100%;
margin: 0 auto;
text-align: center;
color: rgba(255, 255, 255, .55);
}
#footer .footer-bottom strong {
color: #fff;
}
#footer .footer-bottom a {
color: #07bdfc;
}
/* ===== Tablet ===== */
@media (max-width: 991px) {
#footer .custom-footer {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"kontakt kontakt"
"platby platby"
"kategorie odkazy";
grid-template-rows: auto;
column-gap: 32px;
padding-left: 16px;
padding-right: 16px;
}
#footer .custom-footer > .custom-footer__banner50,
#footer .custom-footer > .custom-footer__articles {
margin-top: 32px !important;
}
#footer .custom-footer > .custom-footer__articles {
padding-left: 32px !important;
}
#footer .footer-links-icons,
#footer .footer-bottom {
padding-left: 16px !important;
padding-right: 16px !important;
}
#footer .contact-box {
align-items: center;
text-align: center;
}
#footer .contact-box ul {
align-self: center;
width: 100%;
max-width: 360px;
}
#footer .custom-footer > .custom-footer__banner4 {
text-align: center;
}
}
/* ===== Mobil ===== */
@media (max-width: 767px) {
#footer .custom-footer {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"kontakt"
"platby"
"kategorie"
"odkazy";
padding: 40px 16px 24px;
}
#footer .contact-box {
gap: 12px;
padding: 28px 16px 20px !important;
}
#footer .contact-box .site-name img {
max-height: 34px;
}
#footer .contact-box::before {
font-size: 17px;
}
#footer .contact-box ul {
gap: 8px;
}
#footer .contact-box .mail,
#footer .contact-box .tel {
padding: 8px 14px 8px 8px !important;
}
#footer .contact-box .mail::before,
#footer .contact-box .tel::before {
flex-basis: 36px;
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
font-size: 16px !important;
}
#footer .contact-box .mail a,
#footer .contact-box .tel a {
font-size: 15px;
}
#footer .custom-footer > .custom-footer__banner4 {
padding: 0 16px 22px !important;
border-bottom: 1px solid rgba(255, 255, 255, .12) !important; /* šablona tu má šedou čáru */
}
#footer .custom-footer__banner4 .banner {
padding-top: 18px;
}
#footer .custom-footer__banner4 .banner-wrapper::before {
font-size: 15px;
}
#footer .custom-footer__banner4 img {
width: 220px !important;
height: 44px !important;
}
/* Top kategorie a Užitečné odkazy – jedna seskupená karta s rozbalováním (šipku a otevírání řeší šablona) */
#footer .custom-footer > .custom-footer__banner50,
#footer .custom-footer > .custom-footer__articles {
margin-top: 0 !important;
padding: 0 20px !important;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
}
#footer .custom-footer > .custom-footer__banner50 {
margin-top: 16px !important;
border-bottom: 0 !important;
border-radius: 14px 14px 0 0;
}
#footer .custom-footer > .custom-footer__articles {
border-top: 1px solid rgba(255, 255, 255, .1);
border-left: 1px solid rgba(255, 255, 255, .12);
border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
border-radius: 0 0 14px 14px;
}
#footer .custom-footer__banner50 h4,
#footer .custom-footer__articles h3 {
margin: 0;
padding: 17px 0;
font-size: 16px;
cursor: pointer;
}
#footer .custom-footer__banner50 h4::after,
#footer .custom-footer__articles h3::after {
color: #fff;
}
#footer .custom-footer__banner50 ul,
#footer .custom-footer__articles ul {
padding: 4px 0 16px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
#footer .custom-footer__banner50 li,
#footer .custom-footer__articles li {
margin: 0 !important;
}
#footer .custom-footer__banner50 li a,
#footer .custom-footer__articles li a {
display: block;
padding: 9px 0;
font-size: 15px;
}
#footer .custom-footer__banner50 li a:hover,
#footer .custom-footer__articles li a:hover {
transform: none;
}
/* Odznaky – bez kartiček, volně v řadě */
#footer .footer-links-icons {
padding: 16px 16px 28px !important;
}
#footer .footer-icons {
gap: 20px 28px;
}
#footer .footer-icons::before {
font-size: 16px;
margin-bottom: 0;
}
#footer .footer-icon {
flex: 0 0 auto;
width: auto !important;
height: auto !important;
padding: 0 !important;
background: none;
border: 0;
}
#footer .footer-icon:hover {
transform: none;
background: none;
}
#footer .footer-icon img {
max-height: 56px;
}
#footer .footer-icon img[src*="nrholding"] {
width: 120px !important;
max-width: none;
}
#footer .footer-icon img[src*="filtry-ikona"] {
transform: scale(1.3);
}
#footer .footer-icon:has(img[src*="firmy.cz"]) {
flex-basis: 100%;
width: 100% !important;
}
#footer .footer-icon:has(img[src*="firmy.cz"]) img {
max-width: 210px;
}
#footer .footer-bottom {
padding: 20px 16px !important;
font-size: 13px;
line-height: 1.6;
}
}
/* ==================== cleno-kategorie.css ==================== */
/* Cleno.cz – karty s popisem kategorie (horní i spodní popis) */
/* společný vzhled karty */
.cleno-cat-card,.type-category .category__secondDescription{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(135deg,#ebf5fe 0%,#f3f9fe 50%,#fafcff 100%);box-shadow:none!important;border:1px solid #e0eef9}
.cleno-cat-card>*,.type-category .category__secondDescription>*{position:relative;z-index:1}
/* horní karta */
.cleno-cat-card{margin:0 0 24px;padding:32px 40px 30px}
.cleno-cat-card .category-title{display:flex;align-items:center;gap:12px;margin:0 0 14px!important;padding:0!important;font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:32px;line-height:1.2;color:#163d5c;letter-spacing:-.4px}
.cleno-cat-card .category-title:before{content:"";flex:0 0 40px;height:40px;border-radius:12px;background:#239CEB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.5c-.3 0-.6.2-.8.4C9.6 5 6 9.8 6 13.5a6 6 0 0 0 12 0c0-3.7-3.6-8.5-5.2-10.6-.2-.2-.5-.4-.8-.4z'/%3E%3C/svg%3E") center/22px no-repeat}
.cleno-cat-card .category-perex{margin:0!important;padding:0!important;background:none!important;border:0!important}
/* text v obou kartách */
.cleno-cat-card .category-perex p,.type-category .category__secondDescription p,.type-category .category__secondDescription li{font-family:"Nunito Sans",sans-serif;font-size:16px;line-height:1.75;color:#4a4f57}
.cleno-cat-card .category-perex p,.type-category .category__secondDescription p{margin:0 0 10px}
.cleno-cat-card .category-perex p:last-child,.type-category .category__secondDescription>:last-child{margin-bottom:0}
.cleno-cat-card b,.cleno-cat-card strong,.type-category .category__secondDescription b,.type-category .category__secondDescription strong{color:#163d5c;font-weight:800}
.cleno-cat-card .category-perex a,.type-category .category__secondDescription a{color:#239CEB!important;font-weight:700;border:0!important;box-shadow:none!important;background:none!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-decoration-color:rgba(35,156,235,.45)!important;text-underline-offset:3px}
.cleno-cat-card .category-perex a:hover,.type-category .category__secondDescription a:hover{color:#0b6fb8!important;text-decoration-color:#0b6fb8!important}
.cleno-cat-card .category-perex a *,.type-category .category__secondDescription a *{text-decoration:none!important;border:0!important}
/* spodní karta */
.type-category .category__secondDescription{margin:32px 0 24px;padding:34px 40px 32px}
.type-category .category__secondDescription h2,.type-category .category__secondDescription h3,.type-category .category__secondDescription h4{display:block;position:relative;padding-left:18px;margin:26px 0 12px;font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:22px;line-height:1.3;color:#163d5c!important}
.type-category .category__secondDescription h2:first-of-type,.type-category .category__secondDescription h3:first-of-type,.type-category .category__secondDescription h4:first-of-type{margin-top:0}
.type-category .category__secondDescription h2 *,.type-category .category__secondDescription h3 *,.type-category .category__secondDescription h4 *{color:inherit!important}
.type-category .category__secondDescription h2:before,.type-category .category__secondDescription h3:before,.type-category .category__secondDescription h4:before{content:"";position:absolute;left:0;top:.12em;width:6px;height:1.1em;border-radius:4px;background:linear-gradient(180deg,#239CEB,#0b6fb8)}
.type-category .category__secondDescription ul{list-style:none;margin:0 0 14px;padding:0}
.type-category .category__secondDescription ul li{position:relative;margin:0 0 8px;padding-left:32px}
.type-category .category__secondDescription ul li:before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:#239CEB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.type-category .category__secondDescription img{max-width:100%;height:auto;border-radius:16px}
/* ikony podle typu kategorie (kapka je výchozí pro vodu/konvice/láhve) */
.cleno-cat-card.cleno-ico-voda .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.5c-.3 0-.6.2-.8.4C9.6 5 6 9.8 6 13.5a6 6 0 0 0 12 0c0-3.7-3.6-8.5-5.2-10.6-.2-.2-.5-.4-.8-.4z'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-led .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9.5 3.5L12 6l2.5-2.5M9.5 20.5L12 18l2.5 2.5'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-kava .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 10h1.5a2.5 2.5 0 0 1 0 5H16M8 3v3M12 3v3M3 21h14'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-hadice .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-vzduch .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 12h16a3 3 0 1 1-3 3M3 16h8'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-bazen .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8c2 0 2-1.5 4-1.5S8 8 10 8s2-1.5 4-1.5S16 8 18 8s2-1.5 4-1.5M2 13c2 0 2-1.5 4-1.5S8 13 10 13s2-1.5 4-1.5s2 1.5 4 1.5s2-1.5 4-1.5M2 18c2 0 2-1.5 4-1.5S8 18 10 18s2-1.5 4-1.5s2 1.5 4 1.5s2-1.5 4-1.5'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-soda .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='15' r='4'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Ccircle cx='17' cy='17' r='1.6'/%3E%3Ccircle cx='8' cy='5' r='1.6'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-zdravi .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 20.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.9c0 5.6-7.5 10-7.5 10z'/%3E%3C/svg%3E")}
.cleno-cat-card.cleno-ico-obecne .category-title:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM18.5 15.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E")}
/* nadpisy a odrážky uvnitř horní karty (stejně jako dole) */
.cleno-cat-card .category-perex h2,.cleno-cat-card .category-perex h3,.cleno-cat-card .category-perex h4{display:block;position:relative;padding-left:18px;margin:20px 0 10px;font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:20px;line-height:1.3;color:#163d5c!important}
.cleno-cat-card .category-perex h2 *,.cleno-cat-card .category-perex h3 *,.cleno-cat-card .category-perex h4 *{color:inherit!important}
.cleno-cat-card .category-perex h2:before,.cleno-cat-card .category-perex h3:before,.cleno-cat-card .category-perex h4:before{content:"";position:absolute;left:0;top:.12em;width:6px;height:1.1em;border-radius:4px;background:linear-gradient(180deg,#239CEB,#0b6fb8)}
.cleno-cat-card .category-perex ul{list-style:none;margin:0 0 12px;padding:0}
.cleno-cat-card .category-perex ul li{position:relative;margin:0 0 8px;padding-left:32px;font-family:"Nunito Sans",sans-serif;font-size:16px;line-height:1.75;color:#4a4f57}
.cleno-cat-card .category-perex ul li:before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:#239CEB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
/* banner pod horní kartou */
.cleno-cat-banner{margin:0 0 24px;text-align:center}
.cleno-cat-banner p,.cleno-cat-banner div,.cleno-cat-banner a{margin:0;line-height:0;font-size:0}
.cleno-cat-banner,.cleno-cat-banner *{background:none!important;border:0!important;box-shadow:none!important;padding:0}
.cleno-cat-banner img{max-width:100%;height:auto;border-radius:0;box-shadow:none!important}
.cleno-cat-banner-bottom img{display:block;margin:0 auto}
/* omylem vložený widget rozšíření prohlížeče (Words/Characters/Reading time) – skrýt */
.type-category .category-perex [class*="wc_div"],.type-category .category__secondDescription [class*="wc_div"]{display:none!important}
@media (max-width:767px){
.cleno-cat-card,.type-category .category__secondDescription{padding:22px 20px;border-radius:18px}
.cleno-cat-card .category-title{font-size:24px}
.cleno-cat-card .category-title:before{flex-basis:34px;height:34px;background-size:18px}
.cleno-cat-card .category-perex p,.type-category .category__secondDescription p,.type-category .category__secondDescription li{font-size:15px;line-height:1.65}
.type-category .category__secondDescription h2,.type-category .category__secondDescription h3,.type-category .category__secondDescription h4{font-size:19px}
}
/* ---------- úvodní text kategorie na mobilu zkrácený na 3 řádky ---------- */
.cleno-cat-card .cl-more{display:none}
@media (max-width:767px){
.cleno-cat-card .category-perex.cl-clamp{max-height:calc(15px * 1.65 * 3);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.cleno-cat-card .category-perex.cl-clamp > *:first-child{margin-top:0!important}
.cleno-cat-card .cl-more{display:flex;align-items:center;gap:6px;width:max-content;margin:10px auto 0;padding:0;border:0;background:none;color:#0b6fb0;font-family:"Nunito Sans",sans-serif;font-size:14px;font-weight:800;cursor:pointer}
.cleno-cat-card .cl-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cleno-cat-card .cl-more[aria-expanded="true"] svg{transform:rotate(180deg)}
}
/* ---------- proužek s Průvodcem výběrem v kartě kategorie ---------- */
.cl-guide-strip{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:12px 14px;border:1px solid #cfe2f2;border-radius:16px;background:#fff;text-decoration:none!important;transition:border-color .2s,background .2s}
.cl-guide-strip:hover{border-color:#9fcdf0;background:#f5faff}
.cl-guide-strip__ico{flex:0 0 40px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#239CEB,#0b6fb0);color:#fff}
.cl-guide-strip__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cl-guide-strip__txt{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;font-family:"Nunito Sans",sans-serif}
.cl-guide-strip__txt b{color:#163d5c;font-size:15px;font-weight:800;line-height:1.3}
.cl-guide-strip__txt span{color:#6b7682;font-size:13px;font-weight:600;line-height:1.35}
.cl-guide-strip__go{flex:0 0 34px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#eef6fd;color:#0b6fb0;transition:background .2s,color .2s,transform .2s}
.cl-guide-strip__go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cl-guide-strip:hover .cl-guide-strip__go{background:#0b6fb0;color:#fff;transform:translateX(2px)}
@media (min-width:768px){.cl-guide-strip{max-width:560px}}
@media (max-width:767px){.cl-guide-strip{margin-top:14px;padding:10px 12px}.cl-guide-strip__txt b{font-size:14px}.cl-guide-strip__txt span{font-size:12.5px}}
/* ---------- karta Průvodce výběrem na hlavní stránce ----------
mezera nad i pod kartou 30 px – stejně jako mezi ostatními bloky hlavní stránky (pod ní ji dělá okraj Oblíbených kategorií) */
.cl-guide{position:relative;overflow:hidden;margin:30px 0 0;padding:24px 26px;border:1px solid #e0eef9;border-radius:24px;background:linear-gradient(135deg,#ebf5fe 0%,#f3f9fe 50%,#fafcff 100%)}
.cl-guide__head{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.cl-guide__ico{flex:0 0 48px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#239CEB,#0b6fb0);color:#fff}
.cl-guide__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cl-guide .cl-guide__t{margin:0 0 3px!important;padding:0!important;border:0!important;background:none!important;font-family:"Nunito Sans",sans-serif;color:#163d5c!important;font-size:22px!important;font-weight:800!important;line-height:1.25!important;text-align:left!important}
.cl-guide .cl-guide__t:before,.cl-guide .cl-guide__t:after{display:none!important}
.cl-guide__s{margin:0!important;font-family:"Nunito Sans",sans-serif;color:#4a4f57;font-size:15px;line-height:1.5}
.cl-guide__opts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cl-guide__opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:14px 8px;border:1px solid #e0eef9;border-radius:18px;background:#fff;color:#163d5c!important;font-family:"Nunito Sans",sans-serif;font-size:14px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none!important;transition:border-color .2s,transform .2s,box-shadow .2s}
.cl-guide__opt svg{width:34px;height:34px;padding:7px;box-sizing:border-box;border-radius:11px;background:#eef6fd;color:#0b6fb0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:background .2s,color .2s}
.cl-guide__opt:hover{border-color:#9fcdf0;transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,61,92,.08)}
.cl-guide__opt:hover svg{background:#0b6fb0;color:#fff}
@media (max-width:991px){.cl-guide__opts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
.cl-guide{margin:30px 0 0;padding:18px 16px;border-radius:20px}
.cl-guide__head{align-items:flex-start;gap:12px;margin-bottom:14px}
.cl-guide__ico{flex-basis:42px;width:42px;height:42px;border-radius:13px}
.cl-guide__ico svg{width:23px;height:23px}
.cl-guide .cl-guide__t{font-size:18px!important}
.cl-guide__s{font-size:13.5px}
.cl-guide__opts{gap:8px}
.cl-guide__opt{min-height:82px;gap:6px;padding:10px 6px;border-radius:16px;font-size:12.5px}
.cl-guide__opt svg{width:32px;height:32px}
.cl-guide__opt:hover{transform:none;box-shadow:none}
}
/* ---------- bez skoku při načtení kategorie ----------
popis, podkategorie, Nejprodávanější i výpis přeskládá cleno.js; do té doby je obsah neviditelný (místo zůstává),
ukáže se rovnou hotový. Pojistka: kdyby se skript nenačetl, obsah se ukáže sám po 1,5 s. */
html:not(.cl-cat-ready) body.type-category :is(.category-top,.category-content-wrapper,.category__secondDescription){visibility:hidden;animation:clCatShow 0s linear 1.5s forwards;}
@keyframes clCatShow{to{visibility:visible;}}
/* ==================== cleno-menu.css ==================== */
/* =====================================================================
Cleno.cz – moderní levé menu (desktop) + mobilní menu (drawer)
Barvy navazují na karty kategorií
===================================================================== */
:root{
--clm-blue:#239ceb;
--clm-blue-d:#0b6fb0;
--clm-head:#163d5c;
--clm-text:#4a4f57;
--clm-soft:#eef6fd;
--clm-soft2:#f5faff;
--clm-border:#e0eef9;
}
/* ---------- DESKTOP: levé menu kategorií ---------- */
.sidebar .box-categories{
background:#fff !important;
border:1px solid var(--clm-border) !important;
border-radius:20px !important;
padding:16px 10px 10px !important;
overflow:hidden;
}
.sidebar .box-categories .pageElement__heading{
position:relative;
margin:0 10px 10px !important;
padding:0 0 0 14px !important;
background:none !important;
border:0 !important;
color:var(--clm-head) !important;
font-size:18px !important;
font-weight:800 !important;
line-height:24px !important;
}
.sidebar .box-categories .pageElement__heading::before{
content:"";
position:absolute;left:0;top:2px;
width:4px;height:20px;border-radius:4px;
background:#0090C9;
}
#categories .categories{
margin:0 0 2px !important;
padding:0 !important;
border:0 !important;
background:none !important;
}
#categories .categories .topic{background:none !important;border:0 !important;}
#categories .topic > a{
position:relative;
display:flex !important;
align-items:center;
gap:10px;
min-height:44px;
padding:7px 40px 7px 8px !important;
border-radius:12px;
background:transparent !important;
color:var(--clm-head) !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.3 !important;
text-decoration:none !important;
transition:background .2s,color .2s;
}
#categories .topic > a:hover{background:var(--clm-soft2) !important;color:var(--clm-blue-d) !important;}
#categories .categories.active > .topic > a{
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%) !important;
color:var(--clm-blue-d) !important;
}
/* ikona kategorie (vkládá JS) */
.cl-ico{
flex:0 0 32px;
width:32px;height:32px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:10px;
background:var(--clm-soft);
color:var(--clm-blue);
transition:background .2s,color .2s;
}
.cl-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* šablona stylovala všechny span v odkazu – ikonu chráníme */
#categories .topic > a > .cl-ico{
position:static !important;
display:inline-flex !important;
flex:0 0 32px !important;
width:32px !important;height:32px !important;
margin:0 !important;padding:0 !important;
border-radius:10px !important;
background:var(--clm-soft) !important;
color:var(--clm-blue) !important;
transform:none !important;
}
#categories .topic > a > .cl-ico::before,#categories .topic > a > .cl-ico::after{display:none !important;content:none !important;}
#categories .topic > a:hover > .cl-ico{background:#e2f0fc !important;}
#categories .categories.active > .topic > a > .cl-ico{background:var(--clm-blue) !important;color:#fff !important;}
/* šipka rozbalení – vpravo, vlastní chevron */
#categories .cat-trigger{
position:absolute !important;
left:auto !important;
right:8px !important;
top:50% !important;
width:26px !important;height:26px !important;
margin-top:-13px;
border-radius:50%;
display:flex !important;align-items:center;justify-content:center;
font-size:0 !important;
color:#8fb0c8 !important;
transition:background .2s,color .2s;
}
#categories .cat-trigger:hover{background:#e2f0fc;color:var(--clm-blue) !important;}
#categories .cat-trigger::before{
content:"" !important;
font-family:inherit !important;
display:block !important;
width:7px !important;height:7px !important;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(-45deg) !important;
margin-left:-2px;
transition:transform .2s;
}
#categories .expanded > .topic .cat-trigger::before,
#categories li.expanded > a .cat-trigger::before{transform:rotate(45deg) !important;margin:-3px 0 0 0;}
/* podkategorie */
#categories ul{
margin:4px 0 8px 24px !important;
padding:0 0 0 10px !important;
border-left:2px solid var(--clm-border);
background:none !important;
list-style:none;
}
#categories ul li{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
#categories ul li::before{display:none !important;}
#categories ul li > a{
position:relative;
display:block !important;
padding:7px 34px 7px 10px !important;
border-radius:10px;
color:var(--clm-text) !important;
font-size:13.5px !important;
font-weight:600 !important;
line-height:1.35 !important;
text-decoration:none !important;
transition:background .2s,color .2s;
}
#categories ul li > a::before{display:none !important;}
#categories ul li > a:hover{background:var(--clm-soft2) !important;color:var(--clm-blue-d) !important;}
#categories ul li.active > a{background:var(--clm-soft) !important;color:var(--clm-blue-d) !important;font-weight:800 !important;}
#categories ul li .cat-trigger{right:4px !important;}
#categories ul ul{margin-left:12px !important;}
/* ---------- MOBIL: drawer ---------- */
.clm-lock,.clm-lock body{overflow:hidden !important;}
.clm{position:fixed;inset:0;z-index:2147483600;pointer-events:none;font-family:"Nunito Sans",sans-serif;}
.clm.is-open{pointer-events:auto;}
.clm-backdrop{
position:absolute;inset:0;
background:rgba(14,38,60,.45);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;transition:opacity .3s;
}
.clm.is-open .clm-backdrop{opacity:1;}
/* panel přilepený k pravému okraji přes celou výšku
(isolation + maska: Safari jinak neořízne rolovaný obsah do zaoblených rohů a ten „leze ven“) */
.clm-panel{
position:absolute;top:0;right:0;bottom:0;
width:min(90vw,400px);
display:flex;flex-direction:column;
background:#fff;
border-radius:24px 0 0 24px;
transform:translateX(105%);
transition:transform .34s cubic-bezier(.2,.8,.2,1);
overflow:hidden;
isolation:isolate;
-webkit-mask-image:-webkit-radial-gradient(white, black);
}
/* při otevřeném menu schováme bublinu AI chatu, ať nepřekrývá položky */
html.clm-lock #whisper-chat-widget-root{opacity:0 !important;pointer-events:none !important;}
/* jemné zeslabení obsahu u spodního okraje – je vidět, že seznam pokračuje */
.clm-viewport::after{
content:"";
position:absolute;left:0;right:0;bottom:0;
height:28px;
background:linear-gradient(rgba(255,255,255,0),#fff);
pointer-events:none;
z-index:2;
}
.clm.is-open .clm-panel{transform:none;}
.clm-head{
flex:0 0 auto;
display:flex;align-items:center;gap:10px;
padding:16px 16px 12px 20px;
}
.clm-title{flex:1;color:var(--clm-head);font-size:20px;font-weight:800;line-height:1.2;}
.clm-iconbtn{
flex:0 0 40px;width:40px;height:40px;
display:inline-flex;align-items:center;justify-content:center;
border:0;border-radius:50%;
background:var(--clm-soft);color:var(--clm-head);
cursor:pointer;padding:0;
}
.clm-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.clm-title{min-width:0;}
/* přihlášení / můj účet vedle zavírání */
.clm-acc{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:7px;
height:40px;padding:0 15px 0 11px;
border-radius:20px;
background:linear-gradient(135deg,#239ceb,#0b6fb0);
color:#fff !important;
font-size:14px;font-weight:800;line-height:1;text-decoration:none !important;white-space:nowrap;
transition:filter .2s,transform .15s;
}
.clm-acc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.clm-acc:active{transform:scale(.97);}
.clm-acc:hover{filter:brightness(1.06);}
.clm-acc.is-in{background:var(--clm-soft);color:var(--clm-head) !important;}
.clm-viewport{position:relative;flex:1;overflow:hidden;}
.clm-view{
position:absolute;inset:0;
overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
padding:4px 14px 28px;
transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s;
}
.clm-sub{transform:translateX(100%);opacity:0;}
.clm.is-sub .clm-main{transform:translateX(-30%);opacity:0;pointer-events:none;}
.clm.is-sub .clm-sub{transform:none;opacity:1;}
.clm-label{
margin:14px 8px 8px;
color:#8aa3b8;
font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.clm-list{list-style:none;margin:0;padding:0;}
.clm-row{
width:100%;
display:flex;align-items:center;gap:12px;
min-height:54px;
padding:8px 10px;
border:0;border-radius:14px;
background:none;
color:var(--clm-head) !important;
font:inherit;font-size:15px;font-weight:700;line-height:1.25;text-align:left;
text-decoration:none !important;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:background .2s;
}
.clm-row:active{background:var(--clm-soft);}
.clm-row.is-current{background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%);color:var(--clm-blue-d) !important;}
.clm-row .cl-ico{flex-basis:38px;width:38px;height:38px;border-radius:12px;}
.clm-row .cl-ico svg{width:20px;height:20px;}
.clm-row.is-current .cl-ico{background:var(--clm-blue);color:#fff;}
.clm-row-txt{flex:1;}
.clm-chev{
flex:0 0 auto;width:8px;height:8px;margin-right:6px;
border-right:2px solid #a9c0d2;border-bottom:2px solid #a9c0d2;
transform:rotate(-45deg);
}
/* informace – dlaždice */
.clm-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 2px;}
.clm-info a{
display:flex;align-items:center;gap:9px;
padding:11px 12px;
border:1px solid var(--clm-border);border-radius:14px;
color:var(--clm-head) !important;
font-size:13.5px;font-weight:700;line-height:1.2;
text-decoration:none !important;
}
.clm-info a .cl-ico{flex-basis:28px;width:28px;height:28px;border-radius:9px;}
.clm-info a .cl-ico svg{width:16px;height:16px;}
/* kontakt */
.clm-help{
margin:18px 2px 0;
padding:16px;
border:1px solid var(--clm-border);border-radius:20px;
background:linear-gradient(135deg,#ebf5fe 0%,#f3f9fe 50%,#fafcff 100%);
}
.clm-help-t{color:var(--clm-head);font-size:15px;font-weight:800;margin:0 0 2px;}
.clm-help-s{color:var(--clm-text);font-size:13px;margin:0 0 12px;}
.clm-help-btns{display:flex;gap:8px;}
.clm-help-btns a{
flex:1;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 8px;border-radius:12px;
font-size:13.5px;font-weight:800;
text-decoration:none !important;
}
.clm-help-btns a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.clm-btn-p{background:var(--clm-blue);color:#fff !important;}
.clm-btn-s{background:#fff;color:var(--clm-blue-d) !important;border:1px solid var(--clm-border);}
/* podmenu */
.clm-all{
display:flex;align-items:center;justify-content:space-between;
margin:4px 2px 14px;
padding:14px 16px;
border-radius:16px;
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%);
border:1px solid var(--clm-border);
color:var(--clm-blue-d) !important;
font-size:14.5px;font-weight:800;
text-decoration:none !important;
}
.clm-all .clm-chev{border-color:var(--clm-blue);}
.clm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 2px;}
.clm-tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
min-height:104px;
padding:12px 8px 10px;
border:1px solid var(--clm-border);border-radius:16px;
background:#fff;
color:var(--clm-head) !important;
font-size:13px;font-weight:700;line-height:1.25;text-align:center;
text-decoration:none !important;
-webkit-tap-highlight-color:transparent;
transition:border-color .2s,background .2s;
}
.clm-tile:active{background:var(--clm-soft2);border-color:#bcdcf5;}
.clm-tile.is-current{border-color:var(--clm-blue);background:var(--clm-soft2);}
.clm-tile img{width:100%;height:52px;object-fit:contain;}
.clm-tile.no-img{min-height:64px;}
@media (prefers-reduced-motion:reduce){
.clm-panel,.clm-view,.clm-backdrop{transition:none;}
}
/* ==================== cleno-filtr.css ==================== */
/* =====================================================================
Cleno.cz – výpis podkategorií, filtr a boxy s články
Navazuje na cleno-kategorie.css a cleno-menu.css (stejné barvy)
===================================================================== */
:root{
--clf-blue:#239ceb;
--clf-blue-d:#0b6fb0;
--clf-head:#163d5c;
--clf-text:#4a4f57;
--clf-soft:#eef6fd;
--clf-soft2:#f5faff;
--clf-border:#e0eef9;
}
/* ---------- VÝPIS PODKATEGORIÍ (dlaždice) ---------- */
ul.subcategories{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:12px;
margin:24px 0 28px !important;
padding:0 !important;
list-style:none;
}
ul.subcategories::before,ul.subcategories::after{display:none !important;}
ul.subcategories > li{
float:none !important;
width:auto !important;max-width:none !important;
margin:0 !important;padding:0 !important;
}
ul.subcategories > li > a{
position:relative;
height:100%;
display:flex !important;
flex-direction:column;
align-items:center;justify-content:center;
gap:10px;
min-height:128px;
padding:16px 12px 14px !important;
background:#fff !important;
border:1px solid var(--clf-border) !important;
border-radius:18px !important;
box-shadow:none !important;
color:var(--clf-head) !important;
text-align:center;
text-decoration:none !important;
transition:border-color .2s,background .2s,transform .2s;
}
ul.subcategories > li > a:hover,
ul.subcategories > li > a:focus{
border-color:#c9d6e2 !important;
background:#fff !important;
color:var(--clf-head) !important;
text-decoration:none !important;
transform:translateY(-2px);
}
ul.subcategories .image img{transition:transform .25s;}
ul.subcategories > li > a:hover .image img{transform:scale(1.05);}
ul.subcategories .image{
display:flex !important;align-items:center;justify-content:center;
width:100% !important;height:64px !important;
margin:0 !important;padding:0 !important;
float:none !important;
}
ul.subcategories .image img{
max-width:100% !important;max-height:64px !important;
width:auto !important;height:auto !important;
object-fit:contain;
}
ul.subcategories .text{
display:block !important;
width:100% !important;max-width:none !important;
height:auto !important;max-height:none !important;
overflow:visible !important;
white-space:normal !important;
margin:0 !important;padding:0 !important;
float:none !important;
color:var(--clf-head) !important;
font-size:14px !important;
font-weight:500 !important;
line-height:1.3 !important;
text-align:center !important;
text-transform:none !important;
}
ul.subcategories:not(.with-image) .text{text-align:left !important;}
ul.subcategories > li > a:hover .text{color:var(--clf-head) !important;text-decoration:none !important;}
/* podkategorie bez obrázku – kompaktní řádek se šipkou */
ul.subcategories:not(.with-image){grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
ul.subcategories:not(.with-image) > li > a{
flex-direction:row;justify-content:space-between;
min-height:56px;
padding:12px 16px !important;
text-align:left;
}
ul.subcategories:not(.with-image) > li > a::after{
content:"";flex:0 0 auto;
width:7px;height:7px;
border-right:2px solid #a9c0d2;border-bottom:2px solid #a9c0d2;
transform:rotate(-45deg);
}
@media (max-width:767px){
/* podkategorie (značky) na mobilu kompaktně po třech vedle sebe */
ul.subcategories{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 18px !important;}
ul.subcategories > li > a{min-height:88px;gap:6px;padding:10px 6px 9px !important;border-radius:14px !important;}
ul.subcategories .image,ul.subcategories .image img{height:auto !important;max-height:36px !important;}
ul.subcategories .image{height:36px !important;}
ul.subcategories .text{font-size:12px !important;line-height:1.25 !important;}
ul.subcategories:not(.with-image){grid-template-columns:1fr 1fr;}
}
/* ---------- FILTR ---------- */
.sidebar .box-filters,
.box-filters{
background:#fff !important;
border:1px solid var(--clf-border) !important;
border-radius:20px !important;
padding:8px 18px 14px !important;
overflow:hidden;
}
/* nadpis "Filtrovat" (šablona ho vkládá přes ::before) */
.box-filters::before{
display:block !important;
margin:10px 0 4px !important;
padding:0 0 0 14px !important;
background:linear-gradient(#0090C9,#0090C9) left center / 4px 20px no-repeat !important;
color:var(--clf-head) !important;
font-size:18px !important;
font-weight:800 !important;
line-height:24px !important;
}
#filters .filter-sections,
#filters .slider-content,
#filters #category-filter-hover{background:none !important;}
#filters .slider-wrapper,
#filters .filter-section{
margin:0 !important;
padding:14px 0 !important;
background:none !important;
border:0 !important;
border-bottom:1px solid var(--clf-border) !important;
}
#filters .filter-section-button{border-bottom:0 !important;padding-bottom:4px !important;}
/* nadpisy sekcí + chevron vpravo */
#filters h4{
position:relative;
display:flex !important;align-items:center;justify-content:flex-start;gap:8px;
margin:0 0 12px !important;
padding:0 30px 0 0 !important;
background:none !important;
color:var(--clf-head) !important;
font-size:15px !important;
font-weight:800 !important;
line-height:1.3 !important;
cursor:pointer;
}
#filters h4::before{
content:"" !important;
font-family:inherit !important;
position:absolute;right:8px;top:50%;
width:7px !important;height:7px !important;
margin-top:-6px;
border-right:2px solid var(--clf-blue);
border-bottom:2px solid var(--clf-blue);
transform:rotate(45deg) !important;
transition:transform .2s;
}
#filters .otevreny > h4::before,
#filters .otevreny > .param-filter-top > h4::before{transform:rotate(-135deg) !important;margin-top:-2px;}
#filters h4 span{color:inherit !important;}
#filters h4 .question-tooltip{
display:inline-flex !important;align-items:center;justify-content:center;
width:18px !important;height:18px !important;
margin:0 !important;
border-radius:50% !important;
background:var(--clf-soft) !important;
color:var(--clf-blue-d) !important;
font-size:11px !important;font-weight:800 !important;
line-height:1 !important;
}
/* cenový posuvník */
#filters .slider-content{padding:10px 11px 4px !important;}
#filters #slider,#filters .ui-slider{
height:6px !important;
border:0 !important;border-radius:6px !important;
background:var(--clf-border) !important;
}
#filters .ui-slider-range{
border-radius:6px !important;
background:linear-gradient(90deg,#4fb3f2,var(--clf-blue)) !important;
}
#filters .ui-slider-handle{
top:-8px !important;
width:22px !important;height:22px !important;
margin-left:-11px !important;
border:3px solid var(--clf-blue) !important;
border-radius:50% !important;
background:#fff !important;
background-image:none !important;
box-shadow:none !important;
cursor:grab;
outline:none;
}
#filters .ui-slider-handle::before,#filters .ui-slider-handle::after{display:none !important;}
#filters .ui-slider-handle:focus,#filters .ui-slider-handle:hover{box-shadow:0 0 0 5px rgba(35,156,235,.15) !important;}
#filters .otevreny .slider-header{display:flex !important;}
#filters .slider-header{
justify-content:space-between;gap:8px;
margin:14px 0 0 !important;
}
#filters .slider-header .from,
#filters .slider-header .to{
float:none !important;
padding:6px 10px;
border:1px solid var(--clf-border);border-radius:10px;
background:var(--clf-soft2);
color:var(--clf-head) !important;
font-size:13px !important;font-weight:800 !important;
}
/* checkboxy */
#filters fieldset > div{margin:0 0 2px !important;}
#filters label.filter-label{
display:flex !important;align-items:center;gap:6px;
width:100% !important;min-height:34px;
padding:5px 8px 5px 32px !important;
border-radius:10px;
color:var(--clf-text) !important;
font-size:14px !important;font-weight:600 !important;
line-height:1.3 !important;
cursor:pointer;
transition:background .15s,color .15s;
}
#filters label.filter-label:hover{background:var(--clf-soft2);color:var(--clf-head) !important;}
#filters label.filter-label::before{
content:"" !important;
position:absolute !important;
left:4px !important;top:50% !important;
width:20px !important;height:20px !important;
transform:translateY(-50%) !important;
border:1.5px solid #c5d9ea !important;
border-radius:6px !important;
background:#fff !important;
transition:background .15s,border-color .15s;
}
#filters label.filter-label::after{
content:"" !important;
position:absolute !important;
left:11px !important;top:50% !important;
width:6px !important;height:11px !important;
margin-top:-7px !important;
border:solid #fff !important;
border-width:0 2px 2px 0 !important;
background:none !important;
transform:rotate(45deg) scale(0) !important;
transition:transform .15s;
}
#filters input:checked + label.filter-label{color:var(--clf-head) !important;font-weight:800 !important;}
#filters input:checked + label.filter-label::before{background:var(--clf-blue) !important;border-color:var(--clf-blue) !important;}
#filters input:checked + label.filter-label::after{transform:rotate(45deg) scale(1) !important;}
#filters input:disabled + label.filter-label{opacity:.45;cursor:default;}
/* počet produktů jako štítek */
#filters .filter-count{
margin-left:auto !important;
padding:2px 8px;
border-radius:20px;
background:var(--clf-soft);
color:var(--clf-blue-d) !important;
font-size:12px !important;font-weight:800 !important;
line-height:1.4 !important;
}
#filters .filter-count::before,#filters .filter-count::after{content:none !important;}
/* Rozbalit filtr */
#filters .toggle-filters{display:flex !important;}
#filters .toggle-filters,
.filters-wrapper .filters-unveil-button-wrapper .btn{
align-items:center;justify-content:center;gap:8px;
width:100% !important;
margin:4px 0 0 !important;
padding:11px 14px !important;
border:1px solid var(--clf-border) !important;
border-radius:12px !important;
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%) !important;
color:var(--clf-blue-d) !important;
font-size:14px !important;font-weight:800 !important;
text-transform:none !important;
text-decoration:none !important;
box-shadow:none !important;
}
#filters .toggle-filters::after{
content:"" !important;font-family:inherit !important;
width:7px !important;height:7px !important;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) !important;
margin-top:-4px;
}
/* filtr na mobilu – Shoptet ho přesouvá nad výpis produktů */
@media (max-width:767px){
.category-content-wrapper #filters{
margin:0 0 10px !important;
background:#fff !important;
border:1px solid var(--clf-border) !important;
border-radius:16px !important;
overflow:hidden;
}
#filters .filtrovat{
position:relative;
min-height:50px;
padding:15px 48px 15px 16px !important;
border:0 !important;
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%) !important;
color:var(--clf-head) !important;
font-size:15px !important;font-weight:800 !important;
line-height:20px !important;
cursor:pointer;
}
#filters .filtrovat::after{
content:"" !important;font-family:inherit !important;
position:absolute !important;right:22px !important;top:50% !important;
width:8px !important;height:8px !important;
margin-top:-6px;
border-right:2px solid var(--clf-blue);border-bottom:2px solid var(--clf-blue);
transform:rotate(45deg) !important;
transition:transform .2s;
}
#filters.otevreno .filtrovat::after{transform:rotate(-135deg) !important;margin-top:-2px;}
#filters .slider-wrapper,
#filters .filter-section{padding:0 16px !important;}
#filters .filter-section-button{padding:10px 16px 14px !important;}
#filters h4{margin:0 !important;padding:15px 30px 15px 0 !important;}
#filters .otevreny > h4,#filters .otevreny > .param-filter-top > h4{margin-bottom:6px !important;}
#filters .otevreny form,#filters .otevreny .slider-content,#filters .otevreny .slider-header{margin-bottom:14px !important;}
/* řazení (Doporučujeme…) – stejný zaoblený box jako Filtrovat, bez hranaté čáry šablony */
.listSorting{
border:1px solid var(--clf-border) !important;
border-radius:16px !important;
background:#fff !important;
}
.listSorting:not(.otevreno){overflow:hidden !important;}
.listSorting .listSorting__controls{
margin:0 !important;
border:0 !important;
border-radius:16px !important;
background:#fff !important;
box-shadow:none !important;
}
.listSorting.otevreno .listSorting__controls{
position:relative;z-index:20;
margin:-1px !important;
border:1px solid var(--clf-border) !important;
overflow:hidden;
box-shadow:0 18px 36px -20px rgba(14,47,75,.30) !important;
}
.listSorting .listSorting__control{
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
background:#fff !important;
color:var(--clf-head) !important;
}
.listSorting .listSorting__control--current{font-weight:800 !important;}
.listSorting.otevreno li + li .listSorting__control{border-top:1px solid #eef3f8 !important;}
.listSorting.otevreno .listSorting__control:not(.listSorting__control--current):hover{background:#f5faff !important;}
}
/* ---------- BOXY S ČLÁNKY v levém sloupci ---------- */
.sidebar .box[class*="box-section"]{
background:#fff !important;
border:1px solid var(--clf-border) !important;
border-radius:20px !important;
padding:18px 18px 10px !important;
}
.sidebar .box[class*="box-section"] .pageElement__heading{
position:relative;
margin:0 0 10px !important;
padding:0 0 0 14px !important;
background:none !important;border:0 !important;
color:var(--clf-head) !important;
font-size:16px !important;font-weight:800 !important;
line-height:1.3 !important;
text-transform:none !important;
}
.sidebar .box[class*="box-section"] .pageElement__heading::before{
content:"";position:absolute;left:0;top:2px;bottom:2px;
width:4px;border-radius:4px;background:#0090C9;
}
.sidebar .box[class*="box-section"] .pageElement__heading span{color:inherit !important;}
.sidebar .news-item-widget{
margin:0 !important;
padding:10px 0 !important;
border:0 !important;
border-top:1px solid var(--clf-border) !important;
background:none !important;
}
.sidebar .news-item-widget:first-of-type{border-top:0 !important;}
.sidebar .newsItemWidget__heading{margin:0 0 3px !important;padding:0 !important;}
.sidebar .newsItemWidget__heading a{
color:var(--clf-text) !important;
font-size:14px !important;font-weight:400 !important;
line-height:1.45 !important;
text-transform:none !important;
text-decoration:none !important;
}
.sidebar .newsItemWidget__heading a:hover{color:var(--clf-blue-d) !important;}
.sidebar .news-item-widget time{color:#8aa3b8 !important;font-size:12px !important;font-weight:600;}
/* dlaždice podkategorií – všechny stejně vysoké (šablona je zarovnávala na střed, takže se delší název natáhl jen u jedné) */
html body ul.subcategories{align-items:stretch !important;grid-auto-rows:1fr;}
html body ul.subcategories > li{display:flex !important;height:auto !important;}
html body ul.subcategories > li > a{flex:1 1 auto;width:100%;height:auto !important;box-sizing:border-box;}
/* ==================== cleno-hlavicka.css ==================== */
/* =====================================================================
Cleno.cz – hlavička webu + rozbalovací (mega) menu na desktopu
Barvy navazují na karty kategorií, levé menu a filtr
===================================================================== */
:root{
--clh-blue:#239ceb;
--clh-blue-d:#0b6fb0;
--clh-head:#163d5c;
--clh-text:#4a4f57;
--clh-soft:#eef6fd;
--clh-soft2:#f5faff;
--clh-border:#e0eef9;
}
/* ---------- horní lišta (kontakt, odkazy) ---------- */
.top-navigation-bar{
background:#fff !important;
border-bottom:1px solid var(--clh-border) !important;
}
.top-navigation-bar a,
.top-navigation-bar-menu a{
color:var(--clh-text) !important;
font-size:13px !important;
font-weight:600 !important;
text-decoration:none !important;
transition:color .2s;
}
.top-navigation-bar a:hover{color:var(--clh-blue-d) !important;}
.top-navigation-bar .top-navigation-contacts{
display:flex !important;align-items:center;justify-content:flex-end;gap:20px;
}
.top-navigation-bar .project-phone,
.top-navigation-bar .project-email{
display:inline-flex !important;align-items:center;gap:8px;
height:auto !important;
margin:0 !important;padding:0 !important;
border:0 !important;background:none !important;
color:var(--clh-head) !important;
font-size:13.5px !important;font-weight:700 !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
.top-navigation-bar .project-phone::before,
.top-navigation-bar .project-email::before{
position:static !important;
display:inline-flex !important;align-items:center;justify-content:center;
width:28px !important;height:28px !important;
margin:0 !important;
border-radius:50%;
background-color:var(--clh-soft) !important;
color:var(--clh-blue) !important;
font-size:14px !important;
line-height:28px !important;
transition:background .2s,color .2s;
}
.top-navigation-bar .project-email::before{
content:"" !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:15px 15px !important;
}
.top-navigation-bar .project-phone:hover::before,
.top-navigation-bar .project-email:hover::before{background-color:#d9ecfb !important;}
.top-navigation-bar .project-phone:hover,
.top-navigation-bar .project-email:hover{color:var(--clh-blue-d) !important;}
/* svislé čáry u rozbalovátka dalších odkazů pryč */
.top-navigation-bar .top-navigation-menu-trigger{border:0 !important;background:none !important;}
/* logo v hlavičce i patičce – vždy se zachovaným poměrem stran */
.site-name img,
#footer .site-name img,
footer .site-name img{object-fit:contain !important;}
/* ---------- drobečková navigace pod hlavičkou ---------- */
.breadcrumbs-wrapper{
background:var(--clh-soft2) !important;
border-bottom:1px solid var(--clh-border) !important;
}
@media (min-width:768px){
.breadcrumbs-wrapper .breadcrumbs{
display:flex !important;align-items:center;flex-wrap:wrap;
gap:4px 0;
padding-top:12px !important;padding-bottom:12px !important;
font-size:13.5px !important;
line-height:1.3 !important;
}
.breadcrumbs-wrapper .breadcrumbs::before{display:none !important;}
.breadcrumbs-wrapper .breadcrumbs > span{display:inline-flex !important;align-items:center;}
.breadcrumbs-wrapper .breadcrumbs a{
position:relative;
margin-right:26px !important;
color:var(--clh-blue-d) !important;
font-weight:600 !important;
text-decoration:none !important;
}
.breadcrumbs-wrapper .breadcrumbs a:hover{text-decoration:underline !important;}
/* oddělovač › */
.breadcrumbs-wrapper .breadcrumbs a::after{
content:"" !important;font-family:inherit !important;
position:absolute !important;
left:auto !important;right:-17px !important;top:50% !important;
width:6px !important;height:6px !important;
margin-top:-4px !important;
border-right:1.5px solid #a9c0d2;border-bottom:1.5px solid #a9c0d2;
transform:rotate(-45deg) !important;
}
/* domeček v kolečku */
.breadcrumbs-wrapper .breadcrumbs a.navigation-home-icon{
display:inline-flex !important;
width:32px !important;height:32px !important;
padding:0 !important;
border:1px solid var(--clh-border);
border-radius:50%;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h5v-6h4v6h5V9.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
transition:border-color .2s;
}
.breadcrumbs-wrapper .breadcrumbs a.navigation-home-icon:hover{border-color:#a9d3f3;}
/* aktuální stránka jako štítek */
.breadcrumbs-wrapper .breadcrumbs [data-testid="breadcrumbsLastLevel"] [itemprop="name"]{
display:inline-block;
padding:5px 12px;
border-radius:20px;
background:var(--clh-soft);
color:var(--clh-head) !important;
font-weight:700 !important;
}
.breadcrumbs-wrapper .navigation-bullet{display:none !important;}
}
/* mobil: Shoptet ukazuje jen odkaz zpět na nadřazenou kategorii – jen jemně dostylovat */
@media (max-width:767px){
.breadcrumbs-wrapper .breadcrumbs a{color:var(--clh-blue-d) !important;font-weight:700 !important;text-decoration:none !important;}
}
/* ---------- logo + vyhledávání + přihlášení / košík ---------- */
@media (min-width:768px){
#header .search .search-input,
#header .search input[type="search"]{
height:50px !important;
border:1.5px solid var(--clh-border) !important;
border-radius:14px !important;
background-color:var(--clh-soft2) !important;
color:var(--clh-head) !important;
font-size:15px !important;
box-shadow:none !important;
transition:border-color .2s,background-color .2s,box-shadow .2s;
}
#header .search .search-input::placeholder{color:#8aa3b8 !important;}
#header .search .search-input:focus{
border-color:var(--clh-blue) !important;
background-color:#fff !important;
box-shadow:0 0 0 4px rgba(35,156,235,.12) !important;
outline:none !important;
}
#header .search button[type="submit"]{
top:4px !important;right:4px !important;
height:42px !important;
line-height:42px !important;
padding:0 24px !important;
border:0 !important;
border-radius:11px !important;
background:linear-gradient(135deg,#2aa6f0 0%,var(--clh-blue-d) 100%) !important;
color:#fff !important;
font-weight:800 !important;
letter-spacing:.02em;
box-shadow:none !important;
transition:filter .2s;
}
#header .search button[type="submit"]:hover{filter:brightness(1.06);}
/* přihlášení + košík bez šedých dělicích čar */
#header .navigation-buttons > .top-nav-button,
#header .navigation-buttons > .cart-count{
height:108px !important;min-height:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:var(--clh-head) !important;
font-weight:700 !important;
transition:color .2s;
}
#header .navigation-buttons > .top-nav-button:hover,
#header .navigation-buttons > .cart-count:hover{color:var(--clh-blue-d) !important;}
#header .navigation-buttons > *::before,
#header .navigation-buttons > *::after{color:var(--clh-head) !important;transition:color .2s;}
#header .navigation-buttons > *:hover::before,
#header .navigation-buttons > *:hover::after{color:var(--clh-blue-d) !important;}
#header .navigation-buttons .cart-price{color:inherit !important;font-weight:700 !important;}
}
/* ---------- hlavní menu (lišta kategorií) ---------- */
@media (min-width:992px){
#header #navigation{
border:0 !important;
box-shadow:none !important;
background:transparent !important;
}
/* čára mezi horní částí a menu přes celou šířku stránky (menu má průhledné pozadí, takže ji nepřekryje) */
#header::after{
border:0 !important;
border-top:1px solid var(--clh-border) !important;
box-shadow:none !important;
background:transparent !important;
pointer-events:none;
z-index:5 !important;
}
/* svislé oddělovače mezi položkami menu
(kreslí se na odkazu, ne na – nesmí být position:relative, jinak se rozbije šířka rozbalovacího menu) */
#navigation .menu-level-1 > li > a{position:relative !important;}
#navigation .menu-level-1 > li + li > a::before{
content:"" !important;
position:absolute;left:-3px;top:50%;
width:1px;height:22px;margin-top:-11px;
background:var(--clh-border);
pointer-events:none;
}
#navigation .menu-level-1 > li{position:static !important;}
#header{border-bottom:1px solid var(--clh-border) !important;box-shadow:none !important;}
#navigation .menu-level-1 > li > a{
height:44px !important;
margin:9px 2px !important;
padding:0 14px !important;
display:flex !important;align-items:center;gap:6px;
border-radius:12px !important;
background:transparent !important;
color:var(--clh-head) !important;
font-size:14.5px !important;
font-weight:700 !important;
line-height:44px !important;
letter-spacing:0 !important;
transition:background .2s,color .2s;
}
#navigation .menu-level-1 > li > a.active{color:var(--clh-blue-d) !important;}
#navigation .menu-level-1 > li:hover > a,
#navigation .menu-level-1 > li.exp > a{
background:var(--clh-soft) !important;
color:var(--clh-blue-d) !important;
}
#header #navigation .menu-level-1 > li > a .submenu-arrow{
position:static !important;
display:inline-flex !important;align-items:center;justify-content:center;
width:14px !important;height:14px !important;
margin:0 0 0 2px !important;
color:#8fb0c8 !important;
transition:color .2s;
}
#header #navigation .menu-level-1 > li > a .submenu-arrow::before{display:none !important;}
#header #navigation .menu-level-1 > li > a .submenu-arrow::after{
content:"" !important;font-family:inherit !important;
position:static !important;
display:block !important;
box-sizing:content-box !important;
flex:0 0 auto !important;
width:6px !important;height:6px !important;
min-width:6px !important;
padding:0 !important;
margin-top:-3px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) !important;
transition:transform .2s,margin .2s;
}
#header #navigation .menu-level-1 > li:hover > a .submenu-arrow,
#header #navigation .menu-level-1 > li.exp > a .submenu-arrow{color:var(--clh-blue-d) !important;}
#header #navigation .menu-level-1 > li.exp > a .submenu-arrow::after{transform:rotate(-135deg) !important;margin-top:3px;}
/* trojúhelníček pod aktivní položkou pryč */
#navigation .menu-level-1 > li > a::after,
#navigation .menu-level-1 > li::after,
#navigation .menu-level-2::before{display:none !important;content:none !important;}
/* hamburger s dalšími položkami */
#header .menu-helper{border-radius:12px;}
#header .menu-helper:hover{background:var(--clh-soft);}
/* ---------- rozbalovací mega menu ---------- */
#navigation .menu-level-2{
flex-wrap:wrap !important;
align-content:flex-start;
align-items:stretch !important;
gap:10px;
padding:20px !important;
background:#fff !important;
border:1px solid var(--clh-border) !important;
border-top:0 !important;
border-radius:0 0 24px 24px !important;
box-shadow:0 28px 48px -20px rgba(22,61,92,.22) !important;
}
#navigation .menu-level-2 > li{
flex:0 0 calc((100% - 50px) / 6) !important;
width:auto !important;max-width:none !important;
min-height:0 !important;height:auto !important;
margin:0 !important;
padding:14px 8px 12px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:8px;
border:1px solid var(--clh-border) !important;
border-radius:16px !important;
background:#fff !important;
text-align:center !important;
transition:border-color .2s,transform .2s;
}
#navigation .menu-level-2 > li:hover{
border-color:#c9d6e2 !important;
transform:translateY(-2px);
}
#navigation .menu-level-2 .menu-image{
display:flex !important;align-items:center;justify-content:center;
width:100% !important;height:52px !important;
margin:0 !important;padding:0 !important;
float:none !important;
}
#navigation .menu-level-2 .menu-image img{
width:auto !important;height:auto !important;
max-width:100% !important;max-height:52px !important;
object-fit:contain;
transition:transform .25s;
}
#navigation .menu-level-2 > li:hover .menu-image img{transform:scale(1.05);}
#navigation .menu-level-2 > li > div{
display:flex !important;justify-content:center;
width:100%;min-height:0 !important;height:auto !important;
padding:0 !important;margin:0 !important;
}
#navigation .menu-level-2 > li > div > a,
#navigation .menu-level-2 > li > a:not(.menu-image){
display:block !important;
padding:0 !important;
color:var(--clh-head) !important;
font-size:13.5px !important;
font-weight:500 !important;
line-height:1.3 !important;
text-align:center !important;
text-transform:none !important;
text-decoration:none !important;
}
#navigation .menu-level-2 > li > div > a span{font-weight:inherit !important;text-transform:none !important;}
/* třetí úroveň (vnitřní / vnější filtry) v dlaždicích nezobrazujeme – je na stránce značky */
#navigation .menu-level-2 .menu-level-3{display:none !important;}
/* dlaždice „Zobrazit vše“ (vkládá JS) */
#navigation .menu-level-2 > li.cl-all{
border-color:transparent !important;
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%) !important;
}
#navigation .menu-level-2 > li.cl-all > a{
display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:8px;
width:100%;height:100%;
color:var(--clh-blue-d) !important;
font-size:13.5px !important;font-weight:800 !important;
text-decoration:none !important;
}
#navigation .menu-level-2 > li.cl-all .cl-all-arrow{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#fff;
}
#navigation .menu-level-2 > li.cl-all .cl-all-arrow::before{
content:"";width:8px;height:8px;margin-left:-3px;
border-right:2px solid var(--clh-blue);border-bottom:2px solid var(--clh-blue);
transform:rotate(-45deg);
}
}
/* ---------- rozbalovátko „Více“ (hamburger vpravo v menu) ---------- */
@media (min-width:992px){
#header .menu-helper > ul.menu-level-1{
top:44px !important;
width:340px !important;
padding:10px !important;
border:1px solid var(--clh-border) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 24px 48px -16px rgba(22,61,92,.22) !important;
max-height:calc(100vh - 230px) !important;
overflow-y:auto !important;
}
#header .menu-helper > ul.menu-level-1::after{content:"";display:block;clear:both;}
#header .menu-helper > ul > li{
margin:0 !important;padding:0 !important;
border:0 !important;
background:none !important;
}
/* nadpisy sekcí (vkládá JS) */
#header .menu-helper > ul > li.cl-label{
padding:8px 10px 6px !important;
color:#8aa3b8 !important;
font-size:11px !important;font-weight:800 !important;
letter-spacing:.08em;text-transform:uppercase;
}
#header .menu-helper > ul > li.cl-label:not(:first-child){
margin-top:8px !important;padding-top:14px !important;
border-top:1px solid var(--clh-border) !important;
}
/* kategorie */
#header .menu-helper > ul > li > a{
display:flex !important;align-items:center;gap:12px;
padding:6px 10px !important;
border:0 !important;
border-radius:12px !important;
background:transparent !important;
color:var(--clh-head) !important;
font-size:14px !important;font-weight:600 !important;
line-height:1.3 !important;
text-decoration:none !important;
transition:background .15s,color .15s;
}
#header .menu-helper > ul > li > a b{font-weight:inherit !important;}
#header .menu-helper > ul > li > a:hover,
#header .menu-helper > ul > li > a:focus,
#header .menu-helper > ul > li > a.active,
#header .menu-helper > ul > li.exp > a{
background:var(--clh-soft) !important;
color:var(--clh-blue-d) !important;
}
#header .menu-helper > ul > li > a .submenu-arrow,
#header .menu-helper .menu-level-2{display:none !important;}
#header .menu-helper > ul > li > a .cl-ico{
flex:0 0 32px;width:32px;height:32px;border-radius:10px;
background:var(--clh-soft);color:var(--clh-blue);
transition:background .15s,color .15s;
}
#header .menu-helper > ul > li > a .cl-ico svg{width:18px;height:18px;}
#header .menu-helper > ul > li > a:hover .cl-ico{background:var(--clh-blue);color:#fff;}
/* informace – dlaždice ve dvou sloupcích */
#header .menu-helper > ul > li.cl-info{
float:left;
width:calc(50% - 3px) !important;
margin:0 0 6px !important;
}
#header .menu-helper > ul > li.cl-info.cl-info-r{margin-left:6px !important;}
#header .menu-helper > ul > li.cl-info > a{
gap:9px;
padding:9px 10px !important;
border:1px solid var(--clh-border) !important;
border-radius:14px !important;
color:var(--clh-head) !important;
font-size:13px !important;font-weight:700 !important;
}
#header .menu-helper > ul > li.cl-info > a:hover{border-color:#a9d3f3 !important;background:var(--clh-soft2) !important;}
#header .menu-helper > ul > li.cl-info > a .cl-ico{flex-basis:28px;width:28px;height:28px;border-radius:9px;}
#header .menu-helper > ul > li.cl-info > a .cl-ico svg{width:16px;height:16px;}
#header .menu-helper > ul > li.cl-info > a:hover .cl-ico{background:var(--clh-soft);color:var(--clh-blue);}
}
@media (min-width:992px) and (max-width:1199px){
#navigation .menu-level-2 > li{flex-basis:calc((100% - 40px) / 5) !important;}
}
/* ---------- našeptávač vyhledávání ---------- */
#header .search-whisperer{
margin-top:8px !important;
padding:18px 18px 14px !important;
border:1px solid var(--clh-border) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 24px 48px -16px rgba(22,61,92,.22) !important;
overflow:hidden;
}
#header .search-whisperer::before,
#header .search-whisperer::after{display:none !important;}
/* nadpisy sekcí („Nalezeno v produktech“ …) */
#header .search-whisperer-products::before,
#header .search-whisperer .search-box::before{
display:block !important;
margin:0 0 10px 6px !important;
color:#8aa3b8 !important;
font-size:11.5px !important;
font-weight:800 !important;
letter-spacing:.08em;
text-transform:uppercase;
}
/* produkty – karty */
#header .search-whisperer-products{margin:0 -4px !important;padding:0 !important;}
#header .search-whisperer-products > li{
margin:0 !important;padding:4px !important;border:0 !important;
height:auto !important;max-height:none !important;
}
#header .search-whisperer-products > li > a{
position:relative !important;
display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:14px;
height:100% !important;min-height:88px;max-height:none !important;
padding:12px 12px 12px 12px !important;
border:1px solid var(--clh-border) !important;
border-radius:16px !important;
background:#fff !important;
text-decoration:none !important;
transition:border-color .15s,background .15s,transform .15s;
}
#header .search-whisperer-products > li > a:hover{
border-color:#a9d3f3 !important;
background:var(--clh-soft2) !important;
transform:translateY(-1px);
}
#header .search-whisperer-image{
flex:0 0 64px !important;
width:64px !important;height:64px !important;
display:flex !important;align-items:center;justify-content:center;
margin:0 !important;padding:6px !important;
border:0 !important;
border-radius:12px;
background:var(--clh-soft2);
}
#header .search-whisperer-products > li > a:hover .search-whisperer-image{background:#fff;}
#header .search-whisperer-image img{
max-width:100% !important;max-height:100% !important;
width:auto !important;height:auto !important;
object-fit:contain;
mix-blend-mode:multiply;
}
#header .search-whisperer .p-info{
flex:1 1 auto !important;min-width:0;
display:flex !important;flex-direction:column;gap:8px;
height:auto !important;max-height:none !important;
padding:0 0 0 0 !important;
}
#header .search-whisperer .p-name{
display:-webkit-box !important;
-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden !important;
height:auto !important;max-height:none !important;
padding:0 !important;
color:var(--clh-head) !important;
font-size:13.5px !important;font-weight:600 !important;
line-height:1.35 !important;
text-decoration:none !important;
}
#header .search-whisperer-products > li > a:hover .p-name{color:var(--clh-blue-d) !important;text-decoration:none !important;}
/* dostupnost – bez podkladu, jen barevná tečka + text (sedí na bílé i na modré při najetí) */
#header .search-whisperer .p-availability{
position:relative !important;
display:block !important;align-self:flex-start;
white-space:nowrap !important;
width:-webkit-fit-content !important;width:fit-content !important;
min-width:0 !important;max-width:100% !important;
overflow:visible !important;
margin:0 !important;padding:0 0 0 14px !important;
border-radius:0;
background:none !important;
font-size:12.5px !important;font-weight:700 !important;
line-height:1.3 !important;
}
#header .search-whisperer .p-availability::before{
content:"" !important;font-family:inherit !important;
display:block !important;
position:absolute !important;left:0 !important;top:50% !important;
width:8px !important;height:8px !important;
margin-top:-4px !important;
border-radius:50%;
background:currentColor !important;
box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
/* barvu dostupnosti posílá Shoptet přímo v atributu style (třída je „skladem“ u všech stavů) – jen ji zjemníme */
#header .search-whisperer .p-availability[style*="0, 153, 1"],
#header .search-whisperer .p-availability[style*="0, 153, 1"] *{color:#1f9d3a !important;}
#header .search-whisperer .p-availability[style*="203, 0, 0"],
#header .search-whisperer .p-availability[style*="203, 0, 0"] *{color:#d14343 !important;}
#header .search-whisperer .availability-label::before{display:none !important;}
#header .search-whisperer .p-availability-inner,
#header .search-whisperer .availability-label,
#header .search-whisperer .availability-label > span{
position:static !important;
display:inline !important;
margin:0 !important;padding:0 !important;
width:auto !important;max-width:none !important;
overflow:visible !important;
white-space:nowrap !important;
}
#header .search-whisperer .availability-label{font-size:12px !important;font-weight:700 !important;}
/* cena vpravo dole */
#header .search-whisperer .price-final{
position:absolute !important;
right:12px !important;bottom:13px !important;
color:var(--clh-head) !important;
font-size:15px !important;font-weight:800 !important;
white-space:nowrap;
}
/* články, značky, kategorie */
#header .search-whisperer-documents{
margin-top:10px !important;
padding-top:16px !important;
border-top:1px solid var(--clh-border) !important;
}
#header .search-whisperer-documents .search-box:empty{display:none !important;}
#header .search-whisperer-documents .search-box{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px !important;}
#header .search-whisperer-documents .search-box::before{flex-basis:100%;}
#header .search-whisperer-document{
display:inline-flex !important;align-items:center;gap:8px;
width:auto !important;
margin:0 !important;
padding:8px 14px 8px 10px !important;
border:1px solid var(--clh-border);
border-radius:12px;
background:var(--clh-soft2);
color:var(--clh-head) !important;
font-size:13.5px !important;font-weight:600 !important;
text-decoration:none !important;
transition:border-color .15s,background .15s;
}
#header .search-whisperer-document:hover{border-color:#a9d3f3;background:#fff;color:var(--clh-blue-d) !important;}
#header .search-whisperer-document em{font-size:0 !important;}
#header .search-whisperer-document em::before{color:var(--clh-blue) !important;font-size:15px !important;}
@media (max-width:767px){
#header .search-whisperer{padding:14px 10px 10px !important;border-radius:16px !important;}
#header .search-whisperer-products > li{width:100% !important;}
}
/* ---------- MOBIL: hlavička ---------- */
@media (max-width:767px){
/* logo – zachovat poměr stran (nikdy nedeformovat) */
#header .site-name img{width:auto !important;height:auto !important;max-width:150px !important;max-height:44px !important;object-fit:contain !important;}
/* e-mail, telefon, přihlášení, košík – samotné ikony bez koleček, v jedné řadě */
.top-navigation-bar .project-email,
.top-navigation-bar .project-phone,
#header a.toggle-window[data-target="login"],
.top-navigation-bar a.toggle-window[data-target="login"],
#header a.cart-count,
.top-navigation-bar a.cart-count{
display:inline-flex !important;align-items:center;justify-content:center;
width:34px !important;height:34px !important;
margin:0 !important;padding:0 !important;
border:0 !important;border-radius:10px !important;
background:transparent !important;
transform:none !important;
}
.top-navigation-bar .project-email{top:10px !important;left:auto !important;right:176px !important;}
.top-navigation-bar .project-phone{top:10px !important;left:auto !important;right:140px !important;}
#header a.toggle-window[data-target="login"],
.top-navigation-bar a.toggle-window[data-target="login"]{top:10px !important;left:auto !important;right:104px !important;}
#header a.cart-count,
.top-navigation-bar a.cart-count{top:-44px !important;left:auto !important;right:68px !important;}
.top-navigation-bar .project-phone::before,
.top-navigation-bar .project-email::before{
width:34px !important;height:34px !important;line-height:34px !important;
font-size:22px !important;
background-color:transparent !important;
color:var(--clh-head) !important;
}
.top-navigation-bar .project-email::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important;
background-size:24px 24px !important;
}
#header a.toggle-window[data-target="login"]::before,
.top-navigation-bar a.toggle-window[data-target="login"]::before,
#header a.cart-count::before,
.top-navigation-bar a.cart-count::before{
position:static !important;
margin:0 !important;
color:var(--clh-head) !important;
font-size:23px !important;
line-height:1 !important;
}
/* tlačítko MENU – modré, zaoblené, s odstupem od ikon */
#header a[data-target="navigation"],
.top-navigation-bar a[data-target="navigation"]{
top:4px !important;left:auto !important;right:12px !important; /* pravý okraj = konec vyhledávání */
width:46px !important;height:46px !important;
border-radius:14px !important;
background:linear-gradient(135deg,#2aa6f0 0%,var(--clh-blue-d) 100%) !important;
color:#fff !important;
transform:none !important;
}
#header a[data-target="navigation"]::before,
.top-navigation-bar a[data-target="navigation"]::before{color:#fff !important;font-size:18px !important;margin-top:-6px;}
#header a[data-target="navigation"]::after,
.top-navigation-bar a[data-target="navigation"]::after{color:#fff !important;font-size:9px !important;font-weight:800 !important;letter-spacing:.04em;bottom:5px !important;}
/* vyhledávání – víc vzduchu nad i pod */
#header,
#header .navigation-wrapper,
#header .header-top,
#header .search{height:auto !important;}
#header .search{padding:10px 12px 14px !important;}
#header .search .search-input,
#header .search input[type="search"]{
height:48px !important;
border:1.5px solid var(--clh-border) !important;
border-radius:14px !important;
background-color:var(--clh-soft2) !important;
color:var(--clh-head) !important;
font-size:16px !important;
box-shadow:none !important;
}
#header .search .search-input:focus{border-color:var(--clh-blue) !important;background-color:#fff !important;outline:none !important;}
#header .search button[type="submit"]{
top:5px !important;right:5px !important;
height:38px !important;line-height:38px !important;
padding:0 18px !important;
border:0 !important;border-radius:10px !important;
background:linear-gradient(135deg,#2aa6f0 0%,var(--clh-blue-d) 100%) !important;
color:#fff !important;font-weight:800 !important;
}
#header{border-bottom:1px solid var(--clh-border) !important;box-shadow:none !important;}
.top-navigation-bar{border-bottom:0 !important;box-shadow:none !important;}
/* první banner na stránce (úvodní slider) odsadit od čáry pod vyhledáváním */
#content > h1.sr-only:first-child + .banners-row,
#content > .banners-row:first-child{margin-top:14px !important;}
}
/* ==================== cleno-homepage.css ==================== */
/* =====================================================================
Cleno.cz – úvodní stránka: „Oblíbené kategorie“ + výhody (benefity v jednom bloku)
Prémiový vzhled – široké karty s „plovoucím“ produktem, tmavý pás výhod
===================================================================== */
:root{
--clp-blue:#239ceb;
--clp-blue-d:#0b6fb0;
--clp-navy:#0e2f4b;
--clp-head:#163d5c;
--clp-text:#5a6470;
--clp-soft:#eef6fd;
--clp-border:#e0eef9;
}
/* ---------- Oblíbené kategorie ---------- */
.top-category-addon{margin:56px 0 48px !important;background:transparent !important;}
/* nadpis sekce je sjednocený v cleno-nadpisy.css */
/* mřížka 3 × 2 */
.top-category-addon .menu-level-2{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin:0 !important;padding:0 !important;
list-style:none;
}
.top-category-addon .menu-level-2 > li{
width:auto !important;max-width:none !important;
margin:0 !important;padding:0 !important;
list-style:none;
}
.top-category-addon .menu-level-2 > li::before{display:none !important;}
/* karta: vlevo text, vpravo produkt */
.top-category-addon .menu-content{
position:relative;
display:grid !important;
grid-template-columns:minmax(0,1fr) 46%;
align-items:center;
height:100% !important;
min-height:168px;
padding:0 !important;
overflow:hidden;
border:1px solid rgba(35,156,235,.14) !important;
border-radius:24px !important;
background:linear-gradient(135deg,#f7fbff 0%,#eaf4fd 100%) !important;
box-shadow:none !important;
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
.top-category-addon .menu-content:hover{
transform:translateY(-4px);
border-color:rgba(35,156,235,.32) !important;
box-shadow:0 10px 22px -16px rgba(11,111,176,.30) !important;
}
/* produkt – „plovoucí“ s měkkým stínem pod sebou */
.top-category-addon .menu-image{
order:2;
position:relative;
display:flex !important;align-items:center;justify-content:center;
width:100% !important;height:100% !important;
min-height:168px;
margin:0 !important;padding:18px 18px 22px 0 !important;
background:none !important;
}
.top-category-addon .menu-image::after{
content:"";
position:absolute;left:18%;right:22%;bottom:16px;
height:12px;
border-radius:50%;
background:radial-gradient(ellipse at center,rgba(14,47,75,.22) 0%,rgba(14,47,75,0) 70%);
transition:transform .35s,opacity .35s;
}
.top-category-addon .menu-image img{
position:relative;z-index:1;
width:auto !important;height:auto !important;
max-width:100% !important;max-height:128px !important;
object-fit:contain;
mix-blend-mode:multiply;
transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.top-category-addon .menu-content:hover .menu-image img{transform:translateY(-6px) scale(1.06);}
.top-category-addon .menu-content:hover .menu-image::after{transform:scale(.85);opacity:.7;}
/* text vlevo */
.top-category-addon .top-category-text-block{
order:1;
display:flex !important;flex-direction:column;justify-content:center;
width:100% !important;height:100%;
margin:0 !important;
padding:24px 8px 24px 26px !important;
text-align:left !important;
}
.top-category-addon .top-category-text-block a{
color:var(--clp-navy) !important;
font-size:19px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.01em;
text-decoration:none !important;
}
/* celá karta klikací */
.top-category-addon .top-category-text-block a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:24px;}
/* „Prohlédnout →“ – text se šipkou, která při najetí popojede */
.top-category-addon .top-category-text-block > div{display:flex;flex-direction:column;align-items:flex-start;}
.top-category-addon .top-category-text-block > div::after{
content:"Prohlédnout";
display:inline-block;
margin-top:14px;
padding:7px 34px 7px 14px;
border-radius:20px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") right 12px center / 14px 14px no-repeat;
box-shadow:0 1px 0 rgba(14,47,75,.04),0 0 0 1px rgba(35,156,235,.16);
color:var(--clp-blue-d);
font-size:13px;
font-weight:700;
line-height:1.2;
transition:background-color .25s,background-position .25s,color .25s,box-shadow .25s;
}
.top-category-addon .menu-content:hover .top-category-text-block > div::after{
background-color:var(--clp-blue-d);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E");
background-position:right 9px center;
box-shadow:0 6px 14px -6px rgba(11,111,176,.6);
color:#fff;
}
/* ---------- Výhody – jeden blok, výhody oddělené jemnými čárkami ---------- */
.benefitBanner.position--benefitHomepage{
display:flex !important;
gap:0;
height:auto !important;
margin:0 0 56px !important;
padding:20px 0 !important;
border:1px solid #e6eef6 !important;
border-radius:20px !important;
background:linear-gradient(180deg,#f7fbff 0%,#ffffff 70%) !important;
box-shadow:none !important;
}
.benefitBanner.position--benefitHomepage::before,
.benefitBanner.position--benefitHomepage::after,
.benefitBanner.position--benefitHomepage .benefitBanner__item::before,
.benefitBanner.position--benefitHomepage .benefitBanner__item::after{display:none !important;content:none !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__item{
display:flex !important;flex-direction:row !important;
align-items:center !important;justify-content:flex-start;gap:16px;
width:auto !important;max-width:none !important;height:auto !important;
flex:1 1 0;
margin:0 !important;
padding:6px 26px !important;
text-align:left !important;
transform:none !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
/* jemná svislá čárka mezi výhodami */
.benefitBanner.position--benefitHomepage .benefitBanner__item + .benefitBanner__item{border-left:1px solid #e3ecf5 !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__item .benefitBanner__picture{
flex:0 0 42px !important;
align-self:center !important;
width:42px !important;height:42px !important;
min-width:42px !important;max-width:42px !important;
margin:0 !important;padding:0 !important;
border:0 !important;border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
.benefitBanner.position--benefitHomepage .benefitBanner__item .benefitBanner__picture > div{
width:42px !important;height:42px !important;
padding:0 !important;margin:0 !important;
border:0 !important;border-radius:0 !important;
background:none !important;box-shadow:none !important;
}
.benefitBanner.position--benefitHomepage .benefitBanner__item .benefitBanner__img{
display:block;
width:42px !important;height:42px !important;
max-width:none !important;
object-fit:contain !important;
}
.benefitBanner.position--benefitHomepage .benefitBanner__content{
display:block !important;
flex:1 1 auto;
align-self:center !important;
width:auto !important;max-width:none !important;
margin:0 !important;padding:0 !important;
text-align:left !important;
}
.benefitBanner.position--benefitHomepage .benefitBanner__title{
display:block;
width:auto !important;
margin:0 0 3px !important;
color:var(--clp-navy) !important;
font-size:16px !important;font-weight:800 !important;
line-height:1.3 !important;
}
.benefitBanner.position--benefitHomepage .benefitBanner__data{
width:auto !important;max-width:none !important;
color:var(--clp-text) !important;
font-size:13.5px !important;
line-height:1.5 !important;
}
/* ---------- užší obsah (vedle levého menu) a tablet ---------- */
@media (max-width:1199px){
.top-category-addon .top-category-text-block a{font-size:17px !important;}
.multiple-columns-body .top-category-addon .menu-level-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:991px){
.top-category-addon .menu-level-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ---------- mobil – kategorie 3 × 2, všechny vidět ---------- */
@media (max-width:767px){
.top-category-addon{margin:30px 0 28px !important;}
.top-category-addon .menu-level-2{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px;
}
.top-category-addon .menu-content{
display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;
min-height:0;
padding:10px 6px 12px !important;
border-radius:16px !important;
}
.top-category-addon .menu-image{
order:1;
width:100% !important;height:auto !important;
min-height:0;
aspect-ratio:1/1;
padding:6px 6px 12px !important;
}
.top-category-addon .menu-image img{max-height:100% !important;}
.top-category-addon .menu-image::after{bottom:4px;height:8px;left:20%;right:20%;}
.top-category-addon .top-category-text-block{
order:2;
height:auto;
padding:0 2px !important;
text-align:center !important;
}
.top-category-addon .top-category-text-block > div{align-items:center;}
.top-category-addon .top-category-text-block a{font-size:12.5px !important;line-height:1.25 !important;letter-spacing:0;}
.top-category-addon .top-category-text-block a::after{border-radius:16px;}
.top-category-addon .top-category-text-block > div::after{display:none;}
.benefitBanner.position--benefitHomepage{flex-direction:column;margin:0 0 34px !important;padding:4px 0 !important;border-radius:18px !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__item{flex:0 0 auto;padding:15px 18px !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__item + .benefitBanner__item{border-left:0 !important;border-top:1px solid #e3ecf5 !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__title{font-size:15px !important;}
.benefitBanner.position--benefitHomepage .benefitBanner__data{font-size:13px !important;}
}
/* ---------- karty B2B / Reklamace / Doprava (blok #custom-promo v úvodním textu) – na mobilu kompaktní řádky ----------
původní styl v textu používá zdvojené třídy, proto i tady (vyšší priorita) */
@media (max-width:767px){
html body #custom-promo .custom-promo__row.custom-promo__row{display:flex !important;flex-direction:column !important;gap:10px !important;}
html body #custom-promo .custom-promo__item.custom-promo__item{
display:grid !important;grid-template-columns:88px minmax(0,1fr) 20px;align-items:center;gap:0 12px;
min-height:0 !important;height:auto !important;
padding:10px 14px 10px 10px !important;
border:1px solid #e0eef9 !important;border-radius:18px !important;
background:#fff !important;box-shadow:none !important;transform:none !important;cursor:pointer;
}
html body #custom-promo .custom-promo__item.custom-promo__item::after{
content:"";width:18px;height:18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb6c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #custom-promo .custom-promo__img.custom-promo__img{width:88px !important;height:88px !important;max-height:none !important;aspect-ratio:auto !important;object-fit:cover !important;border-radius:14px !important;margin:0 !important;}
html body #custom-promo .custom-promo__content.custom-promo__content{display:block !important;padding:0 !important;text-align:left !important;min-width:0;}
html body #custom-promo .custom-promo__label.custom-promo__label{display:inline-block !important;margin:0 0 4px !important;padding:3px 9px !important;border:0 !important;border-radius:12px !important;background:#eef6fd !important;color:#0b6fb0 !important;font-size:11.5px !important;font-weight:800 !important;text-transform:none !important;letter-spacing:0 !important;}
html body #custom-promo .custom-promo__title.custom-promo__title{margin:0 0 2px !important;color:#163d5c !important;font-size:15px !important;font-weight:800 !important;line-height:1.3 !important;text-align:left !important;}
html body #custom-promo .custom-promo__text.custom-promo__text{margin:0 !important;color:#6b7682 !important;font-size:12.5px !important;line-height:1.4 !important;text-align:left !important;}
html body #custom-promo .custom-promo__btn.custom-promo__btn{display:none !important;}
}
/* karty B2B / Reklamace / Doprava stejně široké jako ostatní bloky hlavní stránky
(šablona dává úvodnímu textu odsazení 12 px a vpravo 80 px, řádek karet měl omezenou šířku) */
html body .welcome:has(#custom-promo){padding-left:0 !important;padding-right:0 !important;}
html body .welcome > div:has(> #custom-promo){padding-left:0 !important;padding-right:0 !important;}
html body #custom-promo,
html body #custom-promo .custom-promo__row.custom-promo__row{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;}
/* ===== KARTY B2B / REKLAMACE / DOPRAVA – bílé karty bez modrého podkladu (2026-10-09) ===== */
html body #custom-promo .custom-promo__row.custom-promo__row{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-sizing:border-box !important;}
html body #custom-promo .custom-promo__item.custom-promo__item{background:#fff !important;border:1px solid #e0eef9 !important;box-shadow:0 4px 14px rgba(22,61,92,.05) !important;transition:border-color .2s,box-shadow .2s,transform .2s;}
html body #custom-promo .custom-promo__item.custom-promo__item:hover{border-color:#9fcdf0 !important;box-shadow:0 10px 24px rgba(22,61,92,.10) !important;transform:translateY(-2px);}
@media (max-width:767px){
html body #custom-promo .custom-promo__row.custom-promo__row{padding:0 !important;gap:12px !important;border-radius:0 !important;}
html body #custom-promo .custom-promo__item.custom-promo__item{grid-template-columns:104px minmax(0,1fr) 34px !important;gap:0 14px !important;min-height:128px;padding:12px 14px 12px 12px !important;border-radius:20px !important;}
html body #custom-promo .custom-promo__img.custom-promo__img{width:104px !important;height:104px !important;border-radius:16px !important;}
html body #custom-promo .custom-promo__item.custom-promo__item::after{width:34px !important;height:34px !important;border-radius:50%;background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat !important;}
}
/* mobil – větší písmo v kartách B2B / Reklamace / Doprava */
@media (max-width:767px){
html body #custom-promo .custom-promo__item.custom-promo__item .custom-promo__title{font-size:16.5px !important;line-height:1.25 !important;}
html body #custom-promo .custom-promo__item.custom-promo__item .custom-promo__text{font-size:13.5px !important;line-height:1.45 !important;}
html body #custom-promo .custom-promo__item.custom-promo__item .custom-promo__label{font-size:11.5px !important;}
}
/* ==================== cleno-nadpisy.css ==================== */
/* =====================================================================
Cleno.cz – jednotné nadpisy sekcí na celém webu
Tmavě modrý text + krátká modrá linka s přechodem kousek pod nadpisem
===================================================================== */
:root{
--clt-head:#163d5c;
--clt-line:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%);
}
/* úvodní stránka (Oblíbené kategorie, Nejprodávanější, Oblíbené filtry…),
kategorie (Nejprodávanější), detail produktu (Detailní popis, Parametry),
Hodnocení obchodu */
.homepage-group-title,
.top-category-addon .homepage-group-title,
.products-top-header,
.basic-description > .popis-nadpis,
.extended-description > h3,
#hodnoceniobchodu > h2{
position:relative !important;
display:block;
margin-top:0 !important;
margin-bottom:26px !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--clt-head) !important;
font-size:30px !important;
font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.015em !important;
text-align:left !important;
text-transform:none !important;
}
/* případné starší ozdoby (nadtitulek, svislá linka) vypnout */
.homepage-group-title::before,
.top-category-addon .homepage-group-title::before,
.products-top-header::before,
.basic-description > .popis-nadpis::before,
.extended-description > h3::before,
#hodnoceniobchodu > h2::before{display:none !important;content:none !important;}
/* krátká linka pod nadpisem */
.homepage-group-title::after,
.top-category-addon .homepage-group-title::after,
.products-top-header::after,
.basic-description > .popis-nadpis::after,
.extended-description > h3::after,
#hodnoceniobchodu > h2::after{
content:"" !important;
display:block !important;
position:static !important;
width:44px !important;height:4px !important;
margin:12px 0 0 !important;
border:0 !important;
border-radius:4px;
background:var(--clt-line) !important;
}
.homepage-group-title a,
.products-top-header a,
#hodnoceniobchodu > h2 a{color:inherit !important;text-decoration:none !important;}
/* sekce s obsahem na střed (Hodnocení obchodu) – nadpis i linka na střed */
#hodnoceniobchodu > h2{
display:table !important;
margin-left:auto !important;margin-right:auto !important;
text-align:center !important;
}
#hodnoceniobchodu > h2::after{margin:12px auto 0 !important;}
/* menší nadpisy v kartách a dlaždicích – stejná barva */
.custom-promo__title{color:var(--clt-head) !important;font-weight:800 !important;}
/* ---------- tablet ---------- */
@media (max-width:991px){
.homepage-group-title,
.top-category-addon .homepage-group-title,
.products-top-header,
.basic-description > .popis-nadpis,
.extended-description > h3,
#hodnoceniobchodu > h2{font-size:26px !important;}
}
/* ---------- mobil ---------- */
@media (max-width:767px){
.homepage-group-title,
.top-category-addon .homepage-group-title,
.products-top-header,
.basic-description > .popis-nadpis,
.extended-description > h3,
#hodnoceniobchodu > h2{
margin-bottom:18px !important;
font-size:23px !important;
}
.homepage-group-title::after,
.top-category-addon .homepage-group-title::after,
.products-top-header::after,
.basic-description > .popis-nadpis::after,
.extended-description > h3::after,
#hodnoceniobchodu > h2::after{width:36px !important;height:3px !important;margin-top:9px !important;}
}
/* ==================== cleno-detail.css ==================== */
/* =====================================================================
Cleno.cz – detail produktu
Fotka bez rámečku, výrazný název, přehledný nákupní box, moderní záložky
===================================================================== */
:root{
--cld-head:#163d5c;
--cld-blue:#239ceb;
--cld-blue-d:#0b6fb0;
--cld-text:#6b7682;
--cld-border:#e6eef6;
--cld-soft:#f5faff;
--cld-red:#e31e53;
--cld-green:#1f9d3a;
}
/* ---------- galerie ---------- */
.p-detail .p-image:not(.swiper-wrapper),
.p-detail .dklabSliderplusDetail{
position:relative;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:#fff !important;
}
.p-detail .dklabSliderplusDetail{overflow:hidden !important;}
.p-detail .dklabSliderplusDetail .p-image.swiper-wrapper{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;}
.p-detail .dklabSliderplusDetail .swiper-slide{display:flex !important;align-items:center;justify-content:center;}
.p-detail .dklabSliderplusDetail .swiper-slide img{width:auto !important;max-width:100% !important;max-height:300px;object-fit:contain;}
.p-detail .dklabSliderplusDetail .swiper-pagination{left:0 !important;right:0;bottom:8px !important;width:100% !important;text-align:center;}
.p-detail .dklabSliderplusDetail .swiper-pagination-bullet{width:7px !important;height:7px !important;margin:0 3px !important;border:0 !important;background:#d6e6f3 !important;opacity:1 !important;transition:width .25s,background .25s;}
.p-detail .dklabSliderplusDetail .swiper-pagination-bullet-active{width:20px !important;border-radius:7px !important;background:var(--cld-blue-d) !important;}
/* fotka s galerií je vlastní vrstva – tečky galerie (z-index 10) jinak při scrollu přejížděly přes přilepenou hlavičku */
.p-detail .p-image-wrapper{position:relative;z-index:1;}
.p-detail .p-image #wrap,
.p-detail .p-main-image{display:flex !important;align-items:center;justify-content:center;}
.p-detail .p-main-image img{
width:auto !important;height:auto !important;
max-width:100% !important;max-height:440px;
object-fit:contain;
}
/* štítky – v rozích fotky, zarovnané s jejím okrajem (s galerií i bez ní) */
.p-detail .p-image-wrapper .flags-default{
top:0 !important;left:12px !important;
display:flex !important;flex-direction:column;align-items:flex-start;gap:5px;
z-index:3;
}
.p-detail .p-image-wrapper .flags-default .flag{
margin:0 !important;
padding:5px 11px !important;
border-radius:9px !important;
font-size:12.5px !important;font-weight:800 !important;
line-height:1.3 !important;
}
.p-detail .p-image-wrapper .flag-action{background:var(--cld-red) !important;}
.p-detail .p-image-wrapper .flags-extra{
top:0 !important;right:12px !important;left:auto !important;bottom:auto !important;
width:auto !important;height:auto !important;
z-index:3;
}
.p-detail .p-image-wrapper .flag-discount{
width:auto !important;height:auto !important;min-width:0 !important;
display:flex !important;flex-direction:column;align-items:center;
margin:0 !important;
padding:8px 12px 7px !important;
border-radius:14px !important;
background:var(--cld-red) !important;
box-shadow:0 8px 16px -10px rgba(227,30,83,.8) !important;
}
.p-detail .p-image-wrapper .flag-discount .price-save{
width:auto !important;height:auto !important;
font-size:19px !important;font-weight:800 !important;line-height:1.1 !important;
}
.p-detail .p-image-wrapper .flag-discount .price-standard{
order:2;
font-size:11.5px !important;font-weight:600 !important;line-height:1.2 !important;
opacity:.85;
}
/* náhledy */
.p-detail .p-thumbnails-wrapper{margin-top:14px !important;}
.p-detail .p-thumbnails a:not(.thumbnail-prev):not(.thumbnail-next){
margin-right:10px !important;
border:1px solid var(--cld-border) !important;
border-radius:14px !important;
background:#fff !important;
overflow:hidden;
transition:border-color .2s;
}
.p-detail .p-thumbnails a:not(.thumbnail-prev):not(.thumbnail-next):hover{border-color:#bcd9ef !important;}
.p-detail .p-thumbnails a.highlighted{border:2px solid var(--cld-blue) !important;}
.p-detail .p-thumbnails .thumbnail-prev,
.p-detail .p-thumbnails .thumbnail-next{
width:34px !important;height:34px !important;
border:1px solid var(--cld-border) !important;
border-radius:50% !important;
background:#fff !important;
color:var(--cld-head) !important;
box-shadow:0 6px 14px -10px rgba(14,47,75,.4) !important;
}
.p-detail .p-thumbnails .thumbnail-prev::before,
.p-detail .p-thumbnails .thumbnail-next::before{color:var(--cld-head) !important;}
/* ---------- název, hodnocení, kód ---------- */
.p-detail .p-detail-inner-header{margin:0 0 12px !important;padding:0 !important;}
.p-detail .p-detail-inner-header h1,
.p-detail .p-detail-inner-header .h1{
margin:0 !important;
color:var(--cld-head) !important;
font-size:32px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.015em;
}
.p-detail .p-detail-info{
flex-wrap:wrap;align-items:center;gap:8px 16px;
margin:0 0 18px !important;
border:0 !important;
}
.p-detail .p-detail-info .stars-wrapper{
display:flex !important;align-items:center;gap:8px;
margin:0 !important;
}
.p-detail .p-detail-info .stars .star::before{font-size:16px !important;}
.p-detail .p-detail-info .stars-label{color:var(--cld-text) !important;font-size:13px !important;}
.p-detail .p-detail-info .stars-link{
color:var(--cld-blue-d) !important;
font-size:13px !important;font-weight:700;
text-decoration:none !important;
}
.p-detail .p-detail-info .stars-link:hover{color:var(--cld-blue) !important;}
.p-detail .p-detail-info .p-code{
margin:0 0 0 auto !important;
padding:4px 10px !important;
border-radius:8px;
background:var(--cld-soft);
color:var(--cld-text) !important;
font-size:12px !important;
}
.p-detail .p-detail-info .p-code span{color:var(--cld-head) !important;font-weight:700;}
.p-detail .p-detail-info .p-code .p-code-label{color:var(--cld-text) !important;font-weight:400;}
/* krátký popis */
.p-detail .p-short-description{padding:0 !important;margin:0 0 6px !important;}
.p-detail .p-short-description > div:first-child{margin-top:0 !important;}
.p-detail .vice-info{margin:4px 0 0 !important;}
.p-detail .vice-info a{
color:var(--cld-blue-d) !important;
font-size:14px !important;font-weight:700;
text-decoration:none !important;
}
.p-detail .vice-info a:hover{color:var(--cld-blue) !important;}
/* ---------- nákupní box ---------- */
.p-detail .availability-value{
margin:20px 0 0 !important;
padding:16px 22px 0 !important;
border:1px solid #e0eef9;border-bottom:0;
border-radius:20px 20px 0 0;
background:var(--cld-soft);
}
.p-detail .availability-value .availability-label{
display:inline-flex !important;align-items:center;gap:7px;
padding:5px 12px 5px 10px !important;
border-radius:20px;
background:#e7f6ec;
font-size:13.5px !important;font-weight:800 !important;
}
.p-detail .availability-value .availability-label::before{
content:"" !important;
display:block;
width:8px;height:8px;
border-radius:50%;
background:currentColor;
font-size:0 !important;
}
.p-detail .availability-value .availability-label .show-tooltip{
padding:0 !important;
border:0 !important;
color:inherit !important;
font-size:inherit !important;
text-decoration:none !important;
}
.p-detail .availability-value .availability-label[style*="0, 153, 1"],
.p-detail .availability-value .availability-label[style*="0, 153, 1"] *{color:var(--cld-green) !important;}
/* podklad štítku = světlý odstín barvy písma (Skladem zelená, Není skladem červená, Na objednávku …) */
.p-detail .availability-value .availability-label{background:color-mix(in srgb, currentColor 11%, #fff) !important;}
.p-detail .availability-value .availability-label[style*="203, 0, 0"],
.p-detail .availability-value .availability-label[style*="#cb0000" i]{background:#fdecec;}
.p-detail .buy-box{
margin:0 0 18px !important;
padding:12px 22px 22px !important;
border:1px solid #e0eef9 !important;border-top:0 !important;
border-radius:0 0 20px 20px !important;
background:var(--cld-soft) !important;
}
.p-detail .p-final-price-wrapper{
display:flex !important;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
margin:0 0 16px !important;
}
.p-detail .p-final-price-wrapper .price-standard{
order:2;
color:var(--cld-text) !important;
font-size:16px !important;
text-decoration:line-through;
}
.p-detail .p-final-price-wrapper .price-standard *{color:inherit !important;}
.p-detail .p-final-price-wrapper .price-final{
order:1;
width:auto !important;
color:var(--cld-head) !important;
font-size:36px !important;font-weight:800 !important;
line-height:1.1 !important;
letter-spacing:-.02em;
}
.p-detail .p-final-price-wrapper .price-final *{color:inherit !important;}
.p-detail .p-final-price-wrapper .price-save{
order:3;
padding:3px 8px;
border-radius:8px;
background:#fdecec;
color:var(--cld-red) !important;
font-size:13px !important;font-weight:800 !important;
}
/* sleva na vlastním řádku pod cenou: [−34 %] Ušetříte 90 Kč (doplňuje cleno-produkt-zalozky.js) */
.p-detail .p-final-price-wrapper .cl-save{
order:3;
flex-basis:100%;
display:flex;align-items:center;gap:8px;
margin:2px 0;
color:var(--cld-green);
font-size:13.5px;font-weight:800;line-height:1.2;
}
.p-detail .p-final-price-wrapper .cl-save__pct{
padding:4px 8px;
border-radius:8px;
background:#fdecec;
color:var(--cld-red);
font-size:13px;font-weight:800;
}
.p-detail .p-final-price-wrapper .price-additional,
.p-detail .p-final-price-wrapper .price-measure{
order:4;
flex-basis:100%;
color:var(--cld-text) !important;
font-size:13px !important;
}
.p-detail .add-to-cart{
display:flex !important;align-items:stretch;gap:10px;
width:100% !important;
}
.p-detail .add-to-cart .quantity{
flex:0 0 auto;
height:54px !important;
border:1px solid #d7e6f3 !important;
border-radius:14px !important;
background:#fff !important;
overflow:hidden;
}
.p-detail .add-to-cart .quantity input{
border:0 !important;
color:var(--cld-head) !important;
font-size:16px !important;font-weight:800 !important;
background:transparent !important;
}
.p-detail .add-to-cart .quantity .increase,
.p-detail .add-to-cart .quantity .decrease{
border:0 !important;
background:transparent !important;
color:var(--cld-head) !important;
}
.p-detail .add-to-cart .add-to-cart-button{
flex:1 1 auto;
display:inline-flex !important;align-items:center;justify-content:center;gap:9px;
height:54px !important;
margin:0 !important;
padding:0 22px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.9) !important;
transition:filter .2s,transform .2s;
}
.p-detail .add-to-cart .add-to-cart-button::before{
content:"" !important;
display:block;
width:20px;height:20px;
margin:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h15l-1.5 8.5a2 2 0 0 1-2 1.5H9a2 2 0 0 1-2-1.6L5 3H2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1'/%3E%3Ccircle cx='17.5' cy='20.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat !important;
font-size:0 !important;
}
.p-detail .add-to-cart .add-to-cart-button:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* ---------- odkazy pod košíkem, značka, záruka ---------- */
.p-detail .social-buttons-wrapper{margin:0 !important;padding:0 !important;border:0 !important;}
.p-detail .link-icons{
display:flex !important;flex-wrap:wrap;gap:6px 18px;
margin:0 0 14px !important;
padding:0 0 14px !important;
border-bottom:1px solid var(--cld-border) !important;
}
.p-detail .link-icons .link-icon{
margin:0 !important;
color:var(--cld-head) !important;
font-size:13.5px !important;font-weight:600;
text-decoration:none !important;
transition:color .2s;
}
.p-detail .link-icons .link-icon::before{color:var(--cld-blue) !important;}
.p-detail .link-icons .link-icon:hover{color:var(--cld-blue-d) !important;}
.p-detail .addit-info{
display:flex !important;flex-wrap:wrap;gap:6px 22px;
color:var(--cld-text) !important;
font-size:13px !important;
}
.p-detail .addit-info > *{display:block !important;margin:0 !important;}
.p-detail .addit-info a{color:var(--cld-blue-d) !important;font-weight:700;text-decoration:none !important;}
/* ---------- výhody pod produktem – jeden blok, výhody oddělené jemnými čárkami ---------- */
.benefitBanner.position--benefitProduct{
display:flex !important;
gap:0;
height:auto !important;
margin:14px 0 40px !important;
padding:20px 0 !important;
border:1px solid var(--cld-border) !important;
border-radius:20px !important;
background:linear-gradient(180deg,#f7fbff 0%,#ffffff 70%) !important;
box-shadow:none !important;
}
.benefitBanner.position--benefitProduct::before,.benefitBanner.position--benefitProduct::after,
.benefitBanner.position--benefitProduct .benefitBanner__item::before,.benefitBanner.position--benefitProduct .benefitBanner__item::after{display:none !important;content:none !important;}
.benefitBanner.position--benefitProduct .benefitBanner__item{
flex:1 1 0;
display:flex !important;flex-direction:row !important;align-items:center !important;gap:16px;
width:auto !important;max-width:none !important;height:auto !important;
margin:0 !important;
padding:6px 24px !important;
border:0 !important;border-radius:0 !important;
background:none !important;
overflow:visible !important;
text-align:left !important;
}
/* jemná svislá čárka mezi výhodami */
.benefitBanner.position--benefitProduct .benefitBanner__item + .benefitBanner__item{border-left:1px solid #e3ecf5 !important;}
/* ikona – pevně 40 × 40, nikdy se nezúží */
.benefitBanner.position--benefitProduct .benefitBanner__item .benefitBanner__picture{
flex:0 0 40px !important;
width:40px !important;min-width:40px !important;max-width:40px !important;
height:40px !important;
margin:0 !important;padding:0 !important;
}
.benefitBanner.position--benefitProduct .benefitBanner__item .benefitBanner__picture > div{width:40px !important;height:40px !important;margin:0 !important;padding:0 !important;}
.benefitBanner.position--benefitProduct .benefitBanner__item .benefitBanner__img{
display:block;
width:40px !important;height:40px !important;
max-width:none !important;
object-fit:contain !important;
}
.benefitBanner.position--benefitProduct .benefitBanner__content{display:block !important;flex:1 1 auto;padding:0 !important;margin:0 !important;}
.benefitBanner.position--benefitProduct .benefitBanner__content,
.benefitBanner.position--benefitProduct .benefitBanner__title,
.benefitBanner.position--benefitProduct .benefitBanner__data{width:auto !important;max-width:none !important;}
.benefitBanner.position--benefitProduct .benefitBanner__title{
display:block;
margin:0 0 3px !important;
color:var(--cld-head) !important;
font-size:15px !important;font-weight:800 !important;
line-height:1.3 !important;
}
.benefitBanner.position--benefitProduct .benefitBanner__data{color:var(--cld-text) !important;font-size:13px !important;line-height:1.5 !important;}
/* ---------- záložky (Popis, Recenze, Diskuze…) ---------- */
.p-detail-tabs-wrapper .shp-tabs-holder{border:0 !important;background:none !important;}
.p-detail-tabs-wrapper .p-detail-tabs{
display:flex !important;flex-wrap:wrap;gap:4px;
padding:5px !important;
border:1px solid #e0eef9 !important;
border-radius:16px !important;
background:var(--cld-soft) !important;
}
.p-detail-tabs-wrapper .p-detail-tabs::before,
.p-detail-tabs-wrapper .p-detail-tabs::after{display:none !important;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab{
flex:1 1 auto;
margin:0 !important;
border:0 !important;
background:none !important;
}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab-link{
display:flex !important;align-items:center;justify-content:center;
height:46px !important;
padding:0 16px !important;
border:0 !important;
border-radius:12px !important;
background:none !important;
color:var(--cld-text) !important;
font-size:14.5px !important;font-weight:700 !important;
text-transform:none !important;
letter-spacing:0 !important;
text-decoration:none !important;
transition:background .2s,color .2s;
}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab-link:hover{color:var(--cld-head) !important;background:rgba(255,255,255,.7) !important;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab.active .shp-tab-link{
background:#fff !important;
color:var(--cld-head) !important;
box-shadow:0 4px 12px -6px rgba(14,47,75,.25) !important;
}
.p-detail-tabs-wrapper .tab-content{border:0 !important;padding-top:30px !important;}
/* nadpis „K tomuto produktu doporučujeme…“ – stejný styl jako ostatní nadpisy */
.products-related-header,
#productsAlternative h2,
.products-alternative-header{
margin:0 0 24px !important;
color:var(--cld-head) !important;
font-size:26px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.015em;
text-align:left !important;
}
.products-related-header::after,
.products-alternative-header::after{
content:"";
display:block;
width:44px;height:4px;
margin-top:12px;
border-radius:4px;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%);
}
/* ---------- prémiové doladění ---------- */
/* krátký popis – sjednocené písmo a rámeček s nákupním boxem */
.p-detail .p-short-description > div:first-child{
padding:20px 22px !important;
border:1px solid #e0eef9 !important;
border-radius:18px !important;
background:linear-gradient(135deg,#f3f9fe 0%,#ffffff 70%) !important;
box-shadow:none !important;
font-family:inherit !important;
}
.p-detail .p-short-description > div:first-child *{font-family:inherit !important;}
/* počet kusů vodorovně: − 1 + */
.p-detail .add-to-cart .quantity{width:132px !important;padding:0 !important;}
@media (min-width:768px){.p-detail .add-to-cart .quantity{position:relative !important;}}
.p-detail .add-to-cart .quantity label{display:block;height:100%;margin:0;}
.p-detail .add-to-cart .quantity input{
width:100% !important;height:100% !important;
padding:0 40px !important;
text-align:center;
-moz-appearance:textfield;
}
.p-detail .add-to-cart .quantity input::-webkit-outer-spin-button,
.p-detail .add-to-cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.p-detail .add-to-cart .quantity .increase,
.p-detail .add-to-cart .quantity .decrease{
position:absolute !important;top:6px !important;bottom:6px !important;
width:34px !important;height:auto !important;
display:flex !important;align-items:center;justify-content:center;
margin:0 !important;padding:0 !important;
border-radius:10px !important;
font-size:20px !important;font-weight:600 !important;line-height:1 !important;
transition:background .2s,color .2s;
}
.p-detail .add-to-cart .quantity .decrease{left:6px !important;right:auto !important;}
.p-detail .add-to-cart .quantity .increase{right:6px !important;left:auto !important;}
.p-detail .add-to-cart .quantity .increase:hover,
.p-detail .add-to-cart .quantity .decrease:hover{background:#eef6fd !important;color:var(--cld-blue-d) !important;}
.p-detail .add-to-cart .quantity .increase *,
.p-detail .add-to-cart .quantity .decrease *{color:inherit !important;font-size:inherit !important;}
/* značka a záruka jako jemné štítky */
.p-detail .addit-info > *{
padding:5px 12px !important;
border-radius:20px;
background:#f3f7fb;
color:var(--cld-text) !important;
font-size:12.5px !important;
}
.p-detail .addit-info > * td,.p-detail .addit-info > * th{padding:0 !important;border:0 !important;}
.p-detail .addit-info > * td + td,.p-detail .addit-info > * th + td{padding-left:4px !important;}
/* ---------- počítač: fotka | název + popis, pod nimi panel košíku přes celou šířku ---------- */
@media (min-width:1200px){
.p-detail .product-top{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:auto auto 1fr auto auto;
column-gap:40px;
margin-left:0 !important;margin-right:0 !important;
}
.p-detail .product-top::before,.p-detail .product-top::after{display:none !important;}
.p-detail .product-top > *{grid-column:1 / -1;float:none !important;}
/* levý sloupec – fotka a náhledy, stejně vysoký jako pravý */
.p-detail .product-top > .p-image-wrapper{
grid-column:1;grid-row:1 / 4;
width:auto !important;
padding:0 !important;
display:flex !important;flex-direction:column;
}
.p-detail .p-image-wrapper .p-image{flex:1 1 auto;display:flex !important;align-items:center;justify-content:center;}
.p-detail .p-image-wrapper .p-image #wrap{width:100%;}
/* pravý sloupec – název, hodnocení, krátký popis */
.p-detail .product-top > .p-info-wrapper{display:contents !important;}
.p-detail .p-info-wrapper > *{grid-column:2;}
.p-detail .p-info-wrapper > .p-detail-inner-header{grid-row:1;}
.p-detail .p-info-wrapper > .p-detail-info{grid-row:2;}
.p-detail .p-info-wrapper > .p-short-description{grid-row:3;align-self:start;margin-bottom:0 !important;}
.p-detail .p-detail-inner-header h1{font-size:34px !important;}
/* panel košíku přes celou šířku (design jako na mobilu)
vlevo pod sebou: Skladem, cena, cena bez DPH | vpravo: počet kusů + košík, svisle na střed */
.p-detail .p-info-wrapper > .buy-box{
grid-column:1 / -1;grid-row:4;
display:flex !important;align-items:center;justify-content:space-between;gap:32px;flex-wrap:nowrap !important;
margin:28px 0 0 !important;
padding:22px 26px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:var(--cld-soft) !important;
box-shadow:none !important;
}
.p-detail .p-info-wrapper > .availability-value{
grid-column:1 / -1;grid-row:4;
justify-self:start;align-self:start;
position:relative;z-index:2;
margin:51px 0 0 27px !important;
padding:0 !important;
border:0 !important;border-radius:0 !important;
background:none !important;
}
.p-detail .p-info-wrapper > .buy-box .p-final-price-wrapper{
flex:1 1 0;min-width:0;width:auto !important;
margin:0 !important;
padding-top:44px !important;
gap:2px 12px;
}
.p-detail .p-info-wrapper > .buy-box .p-final-price-wrapper .price-final{font-size:36px !important;white-space:nowrap;}
.p-detail .p-info-wrapper > .buy-box .add-to-cart{flex:0 0 auto;width:auto !important;align-items:center;gap:12px;}
.p-detail .p-info-wrapper > .buy-box .add-to-cart .quantity,
.p-detail .p-info-wrapper > .buy-box .add-to-cart .add-to-cart-button{height:58px !important;}
.p-detail .p-info-wrapper > .buy-box .add-to-cart .add-to-cart-button{min-width:300px;font-size:16.5px !important;}
/* pod panelem: odkazy vlevo, značka a záruka vpravo */
.p-detail .p-info-wrapper > .social-buttons-wrapper{
grid-column:1 / -1;grid-row:5;
display:flex !important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
margin:16px 6px 0 !important;
}
.p-detail .p-info-wrapper > .social-buttons-wrapper .link-icons{margin:0 !important;padding:0 !important;border:0 !important;}
}
/* ---------- tablet ---------- */
@media (max-width:1199px){
.p-detail .p-image-wrapper{margin-bottom:24px;}
}
/* záložky na tabletu – v jednom řádku, při nedostatku místa posuvné */
@media (min-width:768px) and (max-width:1199px){
.p-detail-tabs-wrapper .p-detail-tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;}
.p-detail-tabs-wrapper .p-detail-tabs::-webkit-scrollbar{display:none;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab{flex:0 0 auto;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab-link{white-space:nowrap;}
}
/* ---------- mobil ---------- */
@media (max-width:767px){
.p-detail .p-main-image img{max-height:300px;}
.p-detail .p-image-wrapper .flags-default .flag{padding:4px 9px !important;font-size:11.5px !important;}
.p-detail .p-image-wrapper .flag-discount{padding:6px 10px 5px !important;border-radius:12px !important;}
.p-detail .p-image-wrapper .flag-discount .price-save{font-size:16px !important;}
.p-detail .p-thumbnails a:not(.thumbnail-prev):not(.thumbnail-next){border-radius:12px !important;margin-right:8px !important;}
.p-detail .p-detail-inner-header h1,
.p-detail .p-detail-inner-header .h1{font-size:25px !important;}
.p-detail .p-detail-info{margin-bottom:14px !important;padding:0 12px !important;}
.p-detail .p-detail-info .stars-link{display:none !important;}
.p-detail .availability-value{padding:14px 16px 0 !important;border-radius:18px 18px 0 0;}
.p-detail .buy-box{padding:10px 16px 16px !important;border-radius:0 0 18px 18px !important;}
.p-detail .p-final-price-wrapper .price-final{font-size:30px !important;}
.p-detail .add-to-cart .quantity{height:50px !important;}
.p-detail .add-to-cart .add-to-cart-button{height:50px !important;padding:0 14px !important;font-size:15px !important;}
.benefitBanner.position--benefitProduct{flex-direction:column;margin:22px 0 28px !important;padding:4px 0 !important;border-radius:18px !important;}
.benefitBanner.position--benefitProduct .benefitBanner__item{flex:0 0 auto;padding:15px 18px !important;}
.benefitBanner.position--benefitProduct .benefitBanner__item + .benefitBanner__item{border-left:0 !important;border-top:1px solid #e3ecf5 !important;}
/* záložky se na mobilu mění na rozbalovací sekce */
.p-detail-tabs-wrapper .tab-mobil{
display:flex !important;align-items:center;justify-content:space-between;
height:auto !important;min-height:50px;
margin:0 0 10px !important;
padding:0 18px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:var(--cld-soft) !important;
color:var(--cld-head) !important;
font-size:15px !important;font-weight:800 !important;
}
.p-detail-tabs-wrapper .tab-mobil::after{color:var(--cld-blue-d) !important;}
.p-detail-tabs-wrapper .otevreno > .tab-mobil{background:#fff !important;border-color:#cfe2f2 !important;}
.p-detail-tabs-wrapper .tab-content{padding-top:6px !important;}
.p-detail-tabs-wrapper .p-detail-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.p-detail-tabs-wrapper .p-detail-tabs::-webkit-scrollbar{display:none;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab{flex:0 0 auto;}
.p-detail-tabs-wrapper .p-detail-tabs .shp-tab-link{height:42px !important;padding:0 14px !important;font-size:14px !important;white-space:nowrap;}
.products-related-header,
.products-alternative-header{font-size:22px !important;margin-bottom:18px !important;}
.products-related-header::after,
.products-alternative-header::after{width:36px;height:3px;margin-top:9px;}
}
/* ---------- vyprodaná položka – srozumitelná hláška místo „Položka byla vyprodána…“ ---------- */
.p-detail .p-info-wrapper > table.detail-parameters:has(.sold-out){
display:block !important;
width:100% !important;
margin:18px 0 0 !important;
border:0 !important;
background:none !important;
}
.p-detail table.detail-parameters:has(.sold-out) tbody{display:block !important;}
.p-detail table.detail-parameters tr.sold-out{
display:grid !important;
grid-template-columns:44px minmax(0,1fr);
align-items:center;
gap:14px;
padding:14px 18px !important;
border:1px solid #f6d3d3 !important;
border-radius:18px !important;
background:#fdf3f3 !important;
}
.p-detail table.detail-parameters tr.sold-out::before{
content:"";
width:44px;height:44px;
border-radius:50%;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cb0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / 22px no-repeat;
box-shadow:inset 0 0 0 1px #f6d3d3;
}
.p-detail table.detail-parameters tr.sold-out td{
display:block !important;
padding:0 !important;
border:0 !important;
background:none !important;
font-size:0 !important;line-height:0 !important;
text-align:left !important;
}
.p-detail table.detail-parameters tr.sold-out td::before{
content:"Tato položka je vyprodaná";
display:block;
color:#b42318;
font-size:15.5px;font-weight:800;line-height:1.35;
}
.p-detail table.detail-parameters tr.sold-out td::after{
content:"Momentálně ji nemáme skladem. Zapněte si Hlídacího psa nebo vyberte náhradu níže.";
display:block;
margin-top:3px;
color:#6b7682;
font-size:13.5px;font-weight:600;line-height:1.45;
}
/* počítač: hláška přes celou šířku nad panelem s cenou */
@media (min-width:1200px){
.p-detail .product-top:has(> .p-info-wrapper > table.detail-parameters .sold-out){grid-template-rows:auto auto 1fr auto auto auto;}
.p-detail .p-info-wrapper > table.detail-parameters:has(.sold-out){grid-column:1 / -1;grid-row:4;margin:28px 0 0 !important;}
.p-detail .product-top:has(> .p-info-wrapper > table.detail-parameters .sold-out) .p-info-wrapper > .buy-box{grid-row:5;margin-top:14px !important;}
.p-detail .product-top:has(> .p-info-wrapper > table.detail-parameters .sold-out) .p-info-wrapper > .availability-value{grid-row:5;margin-top:37px !important;}
.p-detail .product-top:has(> .p-info-wrapper > table.detail-parameters .sold-out) .p-info-wrapper > .social-buttons-wrapper{grid-row:6;}
}
@media (max-width:767px){
.p-detail .p-info-wrapper > table.detail-parameters:has(.sold-out){margin:14px 0 0 !important;}
.p-detail table.detail-parameters tr.sold-out{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:13px 14px !important;border-radius:16px !important;}
.p-detail table.detail-parameters tr.sold-out::before{width:40px;height:40px;background-size:20px;}
.p-detail table.detail-parameters tr.sold-out td::before{font-size:15px;}
.p-detail table.detail-parameters tr.sold-out td::after{font-size:13px;}
}
/* ---------- informace o odeslání (doplňuje cleno-produkt-zalozky.js) ---------- */
.p-detail .cl-ship{
display:flex;align-items:center;gap:6px;
color:var(--cld-text,#6b7682);font-size:13.5px;font-weight:700;line-height:1.2;
}
.p-detail .cl-ship svg{flex:0 0 17px;width:17px;height:17px;fill:none;stroke:var(--cld-green,#1f9d3a);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
/* počítač: pod cenou na celou šířku sloupce s cenou */
.p-detail .p-final-price-wrapper > .cl-ship{flex:1 1 100%;margin-top:6px;}
/* mobil: vycentrovaně pod tlačítkem Vložit do košíku */
@media (max-width:767px){.p-detail .buy-box > .cl-ship{justify-content:center;margin-top:12px;font-size:13px;}}
/* =====================================================================
KARTY PRODUKTŮ – slidery na detailu (Doporučujeme / Alternativní náhrady), pásy na hlavní stránce a výpis v kategorii
bílé karty se zakulacením, obrázek na bílém, štítky jako malé pilulky, sleva vpravo nahoře,
cena + přeškrtnutá původní cena v řádku, tlačítko přes celou šířku, bez popisu a kódu
===================================================================== */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).products{border:0 !important;background:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider .slick-track{display:flex !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider .slick-slide{height:auto !important;float:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.product{padding:8px 7px 14px !important;border:0 !important;background:none !important;box-shadow:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p{
display:flex !important;flex-direction:column;height:100%;box-sizing:border-box;padding:12px 12px 14px !important;
border:1px solid #e0eef9 !important;border-radius:20px !important;background:#fff !important;
box-shadow:0 4px 14px rgba(22,61,92,.05);transition:transform .2s,box-shadow .2s,border-color .2s;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover{transform:translateY(-3px);border-color:#9fcdf0 !important;box-shadow:0 12px 26px rgba(22,61,92,.11);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.image{display:flex !important;align-items:center;justify-content:center;aspect-ratio:4/3;max-height:280px;height:auto !important;margin:0 0 12px !important;padding:6px !important;border-radius:14px;background:#fff !important;overflow:hidden;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.image img{width:100% !important;height:100% !important;max-height:none !important;object-fit:contain;transition:transform .3s;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover a.image img{transform:scale(1.04);}
/* štítky Akce / Naše doporučení – pilulky v řadě */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default{position:absolute !important;top:10px !important;left:10px !important;display:flex !important;flex-wrap:wrap;gap:5px;max-width:65%;margin:0 !important;z-index:2;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default .flag{display:inline-flex !important;align-items:center;height:22px;margin:0 !important;padding:0 9px !important;border-radius:999px !important;font-size:11px !important;font-weight:800 !important;line-height:1 !important;letter-spacing:0;text-transform:none !important;box-shadow:0 2px 6px rgba(22,61,92,.12);}
/* sleva – červená pilulka vpravo nahoře (původní cena je u ceny) */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra{position:absolute !important;top:10px !important;right:10px !important;bottom:auto !important;left:auto !important;width:auto !important;height:auto !important;z-index:2;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;align-items:flex-end !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flag-discount.flag-discount{display:flex !important;flex-direction:column !important;align-items:flex-end;gap:3px;width:auto !important;height:auto !important;padding:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flag-discount .price-save{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:linear-gradient(135deg,#ff4d6d,#e31e53);color:#fff !important;font-size:12.5px !important;font-weight:900 !important;line-height:1;box-shadow:0 3px 8px rgba(227,30,83,.28);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flag-discount .price-standard{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.85);color:#8a96a3 !important;font-size:11.5px !important;font-weight:700 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flag-discount .price-standard span{color:#8a96a3 !important;text-decoration:line-through;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.cl-has-old .flag-discount .price-standard{display:none !important;}
/* text a cena */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-in{display:flex !important;flex-direction:column;flex:1 1 auto;padding:0 2px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars-wrapper{margin:0 0 6px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars .star{width:15px !important;height:15px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars .star::before{font-size:14px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.name{margin:0 0 10px !important;color:#163d5c !important;font-size:14.5px !important;font-weight:800 !important;line-height:1.35 !important;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.35em * 2);text-decoration:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover a.name{color:#0b6fb0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom{display:flex !important;flex-direction:column !important;gap:12px;margin-top:auto !important;padding:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom > div[data-micro=offer]{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:12px;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices{display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;width:100% !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow{order:1;display:flex;align-items:baseline;flex-wrap:wrap;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-final{order:1;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-final strong{color:#163d5c !important;font-size:20px !important;font-weight:900 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-old{margin-left:8px;color:#8a96a3;font-size:13px;font-weight:700;text-decoration:line-through;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-additional{order:2;color:#8a96a3 !important;font-size:12px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-measure{display:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability{order:3;margin-top:6px;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability::before{display:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px !important;font-weight:800 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability span::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools{width:100% !important;margin:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools form,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools .btn{width:100% !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools .btn{height:44px !important;justify-content:center;border-radius:13px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-desc,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-code{display:none !important;}
/* šipky a tečky */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow{width:42px !important;height:42px !important;border:1px solid #e0eef9 !important;border-radius:50% !important;background:#fff !important;color:#163d5c !important;box-shadow:0 4px 12px rgba(22,61,92,.08);transition:background .2s,color .2s,border-color .2s;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow::before{color:inherit !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow:hover{border-color:transparent !important;background:linear-gradient(135deg,#239ceb,#0b6fb0) !important;color:#fff !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-disabled{opacity:.4;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-dots{display:flex !important;justify-content:center;gap:6px;margin:6px 0 0 !important;padding:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-dots li{width:auto !important;height:auto !important;margin:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-dots li button{width:8px !important;height:8px !important;padding:0 !important;border-radius:999px !important;background:#cfe2f2 !important;font-size:0 !important;transition:width .25s,background .25s;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-dots li button::before{display:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-dots li.slick-active button{width:24px !important;background:#0b6fb0 !important;}
/* oprava mobilu: šablona dává cenám flex:1 0 100 % (roztáhly kartu a tlačítko vypadlo ven),
aktuální cena má být před přeškrtnutou, obrázek na mobilu větší */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices{flex:none !important;height:auto !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools{flex:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .cl-pricerow .price-final{order:0 !important;}
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.image{aspect-ratio:1/1;max-height:190px;}
}
/* název až na 3 řádky (šablona mu dávala pevnou výšku a třetí řádek se usekl napůl) */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.name.name{display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;height:auto !important;max-height:calc(1.35em * 3) !important;min-height:calc(1.35em * 2);overflow:hidden !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.name.name span{display:inline !important;}
/* štítek doprava zdarma – zelená pilulka místo velkého kolečka */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra{gap:4px;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra .flag-freeshipping{display:inline-flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:5px;width:auto !important;height:24px !important;min-width:0 !important;margin:0 !important;padding:0 9px !important;border-radius:999px !important;background:linear-gradient(135deg,#34c759,#1f9d3a) !important;color:#fff !important;box-shadow:0 3px 8px rgba(31,157,58,.25);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra .flag-freeshipping .icon-van{position:static !important;display:inline-flex !important;width:auto !important;height:auto !important;margin:0 !important;font-size:13px !important;line-height:1;color:#fff !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra .flag-freeshipping .icon-van::before{position:static !important;font-size:13px !important;margin:0 !important;color:#fff !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra .flag-freeshipping .flag-text{position:static !important;display:inline !important;margin:0 !important;color:#fff !important;font-size:11px !important;font-weight:800 !important;line-height:1;text-transform:none;}
/* menší stín a menší mezery mezi kartami */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.product{padding:6px 4px 10px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p{box-shadow:0 2px 8px rgba(22,61,92,.04) !important;}
/* karta reaguje jen jemně (mírné zvednutí a stín), obrázek ani název se nemění */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover{transform:translateY(-2px) !important;border-color:#cfe2f2 !important;box-shadow:0 6px 16px rgba(22,61,92,.07) !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover a.image img{transform:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p:hover a.name{color:#163d5c !important;}
/* počítač: další karta je z kraje částečně vidět (je jasné, že se dá posouvat) */
@media (min-width:768px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider:has(.slick-dots li:nth-child(2)) .slick-list{padding-right:9% !important;}
}
/* částečně viditelná karta vpravo plynule mizí (přechod do ztracena) – jen když je víc produktů, než se vejde */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider:has(.slick-dots li:nth-child(2)) .slick-list{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
}
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider:has(.slick-dots li:nth-child(2)) .slick-list{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
}
}
/* mobil – menší štítky v jednom řádku, karty nepřetékají z kraje */
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default{top:8px !important;left:8px !important;gap:4px;max-width:calc(100% - 70px);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default .flag{height:20px;padding:0 7px !important;font-size:10px !important;white-space:nowrap;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra{top:8px !important;right:8px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flag-discount .price-save{height:22px;padding:0 7px;font-size:11.5px !important;}
html body :is(.type-category,.type-search) #products.products{margin-left:-4px !important;margin-right:-4px !important;width:auto !important;}
html body :is(.type-category,.type-search) #products .product.product{padding:5px 3px 8px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p{padding:10px 10px 12px !important;border-radius:18px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-final strong{font-size:18px !important;}
}
/* sleva u ceny – jen na mobilu (na počítači je štítek v rohu obrázku) */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .cl-save{display:none;}
@media (max-width:767px){
/* sleva se přesouvá k ceně, obrázek zůstává volný */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-extra .flag-discount{display:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .cl-save{display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,#ff4d6d,#e31e53);color:#fff;font-size:11px;font-weight:900;line-height:1;align-self:center;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow{column-gap:0;row-gap:2px;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final{flex:0 0 100%;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-old{margin-left:0;font-size:12px;}
/* posouvání: 2 celé karty vedle sebe, bez náhledu další a bez přechodu */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider:has(.slick-dots li:nth-child(2)) .slick-list,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products).slick-slider .slick-list{padding-right:0 !important;-webkit-mask-image:none !important;mask-image:none !important;}
/* šipky menší a nadpis jim uvolní místo */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow{width:36px !important;height:36px !important;}
html body .homepage-group-title,
html body .p-detail .products-related-header,
html body .p-detail #productsAlternative h2{padding-right:88px !important;}
}
/* hvězdičky v toku pod obrázkem (šablona je posouvá absolutně nahoru – na mobilu zasahovaly do štítků) */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars-wrapper{position:static !important;top:auto !important;}
/* bez šedých čar šablony kolem pásů produktů (svislá čára vpravo u posouvání, okraje buněk) */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-list,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-track{border:0 !important;box-shadow:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.product,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.product:focus,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.product a:focus{border:0 !important;outline:0 !important;}
/* šipky slideru – vedle sebe s mezerou (šablona je posouvala přes sebe), ikonka přesně uprostřed */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow{
display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;line-height:1 !important;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow::before{margin:0 !important;line-height:1 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-next{right:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev{right:52px !important;left:auto !important;}
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev{right:44px !important;}
}
/* tlačítko „Zobrazit“ u zboží, které není skladem – stejný tvar jako „Do košíku“, modré */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools a.btn:not(.btn-cart),
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools .btn:not(.btn-cart){
display:inline-flex !important;align-items:center;justify-content:center;width:100% !important;height:44px !important;padding:0 14px !important;
border:0 !important;border-radius:13px !important;background:linear-gradient(135deg,#239ceb,#0b6fb0) !important;color:#fff !important;
font-size:14px !important;font-weight:800 !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
}
/* šipky slideru – vlastní ikonka (místo písma šablony), přesně uprostřed kolečka */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow{
width:40px !important;height:40px !important;padding:0 !important;font-size:0 !important;color:transparent !important;
border:1px solid #d6e7f5 !important;border-radius:50% !important;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
box-shadow:0 3px 10px rgba(22,61,92,.08) !important;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .15s;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev.slick-arrow{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow::before,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow::after{display:none !important;content:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow:hover{
border-color:#0b6fb0 !important;background-color:#0b6fb0 !important;box-shadow:0 6px 14px rgba(11,111,176,.25) !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev.slick-arrow:hover{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow:active{transform:scale(.94);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-next.slick-arrow{right:0 !important;left:auto !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev.slick-arrow{right:48px !important;left:auto !important;}
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-arrow.slick-arrow{width:36px !important;height:36px !important;background-size:16px 16px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .slick-prev.slick-arrow{right:44px !important;}
}
/* mobil – štítky na obrázku v levém horním rohu (malé), cena se slevou jako výrazný blok:
nahoře pruh „Zlevněno –22 %“, pod ním velká cena na červeném (stejná červená jako štítek Akce) a přeškrtnutá původní cena */
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.name.name{margin-bottom:8px !important;font-size:13.5px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom > div[data-micro=offer]{gap:10px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default{top:8px !important;left:8px !important;gap:3px !important;max-width:calc(100% - 16px) !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default .flag{height:18px !important;padding:0 6px !important;font-size:9.5px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices{gap:2px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow{
display:inline-grid !important;grid-template-columns:auto;justify-items:start;row-gap:0;
overflow:hidden;border-radius:10px;background:#e31e53;box-shadow:0 4px 10px rgba(227,30,83,.2);
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-save{
order:-1;display:block;width:100%;height:auto;margin:0;padding:4px 10px;box-sizing:border-box;border-radius:0;
background:#ffe14d;color:#163d5c;font-size:10.5px;font-weight:900;letter-spacing:.2px;text-align:left;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-save::before{content:"Zlevněno ";}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final{flex:none !important;padding:5px 10px 0;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final strong{color:#fff !important;font-size:19px !important;line-height:1.1;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-old{margin:0;padding:0 10px 6px;color:rgba(255,255,255,.8);font-size:11.5px;text-decoration-color:rgba(255,255,255,.8);}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-additional{margin-top:4px;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability{margin-top:2px;}
}
/* hlavní stránka (počítač): 3 celé produkty uprostřed, z obou stran kousek dalších s přechodem do ztracena,
šipky po stranách (vlevo / vpravo) svisle uprostřed karet */
@media (min-width:768px){
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider).slick-slider{position:relative;}
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider).slick-slider .slick-list.slick-list{
padding:0 7% !important;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
}
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider) .slick-arrow.slick-arrow{
top:calc(50% - 20px) !important;bottom:auto !important;transform:none;z-index:5 !important;
}
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider) .slick-prev.slick-arrow{left:4px !important;right:auto !important;}
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider) .slick-next.slick-arrow{right:4px !important;left:auto !important;}
html body .products-block[class*="homepage-products"]:is(#cl-hp,.products-block):is(#cl-hp,.slick-slider) .slick-arrow.slick-arrow:active{transform:scale(.94);}
}
/* mobil – pásy produktů zarovnané s ostatními kartami (stejný okraj stránky), šipky nevyčuhují z obrazovky */
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], #cl-x).slick-slider{margin-left:0 !important;margin-right:0 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], #cl-x).slick-slider .slick-list.slick-list{margin:0 -4px !important;width:calc(100% + 8px) !important;max-width:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], #cl-x) .slick-next.slick-arrow{right:0 !important;}
}
/* mobil – výpis v kategorii zarovnaný s ostatními bloky (karty od okraje stránky 12 px, šablona dávala −12 px) */
@media (max-width:767px){
html body:is(.type-category,.type-search) #content #products.products.products{margin-left:-4px !important;margin-right:-4px !important;width:auto !important;}
html body:is(.type-category,.type-search) #content #products .product.product{padding-left:4px !important;padding-right:4px !important;}
}
/* =====================================================================
MOBIL – KOMPAKTNÍ KARTA PRODUKTU (kratší): menší obrázek, menší mezery,
cena se slevou ve dvou řádcích – červená cena + žlutý štítek slevy, pod tím původní cena;
bez akce jen cena; cena bez DPH malým písmem pod cenou, tlačítko nižší
===================================================================== */
@media (max-width:767px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p{padding:10px 10px 12px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.image{aspect-ratio:auto !important;height:140px !important;max-height:none !important;margin:0 0 8px !important;padding:2px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.image img{height:100% !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default{top:6px !important;left:6px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .flags-default .flag{height:16px !important;padding:0 5px !important;font-size:9px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars-wrapper{margin:0 0 5px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars .star{width:12px !important;height:12px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .stars .star::before{font-size:11.5px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product a.name.name{margin:0 0 8px !important;font-size:13.5px !important;line-height:1.3 !important;-webkit-line-clamp:2 !important;max-height:calc(1.3em * 2) !important;min-height:calc(1.3em * 2) !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom,
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-bottom > div[data-micro=offer]{gap:10px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-additional{display:block !important;margin-top:2px !important;font-size:11px !important;line-height:1.3;color:#8a96a3 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .price-final strong{font-size:17px !important;}
/* cena se slevou: [červená cena][žlutý štítek] / původní cena */
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow{
display:grid !important;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:6px;row-gap:2px;
width:auto !important;overflow:visible !important;border-radius:0 !important;background:none !important;box-shadow:none !important;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final{grid-column:1;grid-row:1;padding:3px 8px !important;border-radius:8px;background:#e31e53;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final strong{color:#fff !important;font-size:16px !important;line-height:1.15;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-save{grid-column:2;grid-row:1;order:0;display:inline-flex;width:auto;height:20px;margin:0;padding:0 6px !important;border-radius:6px;background:#ffe14d !important;color:#163d5c !important;font-size:11px;font-weight:900;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-save::before{content:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-old{grid-column:1 / -1;grid-row:2;padding:0 !important;margin:0 !important;color:#8a96a3 !important;font-size:11.5px;text-decoration-color:#8a96a3 !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability{margin-top:3px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .availability span{font-size:11.5px !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .p-tools .btn{height:42px !important;font-size:13.5px !important;border-radius:12px !important;}
}
/* detail produktu – bez řádku „Odešleme do 24 hodin“ (i kdyby ho vložila starší verze skriptu z mezipaměti) */
html body .p-detail .cl-ship{display:none !important;}
/* =====================================================================
KATEGORIE – „NEJPRODÁVANĚJŠÍ“: jednoduchý žebříček v bílé kartě
řádek = pořadí (modré číslo) · obrázek · název + stav skladu · cena (pod ní původní cena a sleva); řádky oddělené linkou
sbaleno: první 2 produkty + 3. s přechodem do ztracena, „Zobrazit více produktů“ jako jemný pruh se šipkou (po rozbalení otočená)
===================================================================== */
html body .products-top-wrapper{margin:0 0 20px !important;padding:14px 16px 12px !important;border:1px solid #e0eef9 !important;border-radius:20px !important;background:#fff !important;box-shadow:0 2px 10px rgba(22,61,92,.04);}
html body .products-top-wrapper .products-top-header{margin:0 0 4px !important;padding:0 !important;color:#163d5c !important;font-size:18px !important;font-weight:800 !important;line-height:1.3;}
html body .products-top-wrapper .products-top-header::after{display:none !important;}
html body .products-top-wrapper #productsTop.products{display:block !important;height:auto !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;counter-reset:cltop;overflow:visible !important;}
html body .products-top-wrapper #productsTop .product{counter-increment:cltop;display:block !important;width:100% !important;max-width:none !important;height:auto !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-top:1px solid #eef3f8 !important;background:none !important;opacity:1 !important;transform:none !important;}
html body .products-top-wrapper #productsTop .product:first-child{border-top:0 !important;}
/* sbaleno: první 2 produkty celé, 3. jen naznačený s přechodem do ztracena, další schované */
html body .products-top-wrapper.has-inactive #productsTop .product:nth-child(n+4){display:none !important;}
html body .products-top-wrapper.has-inactive #productsTop .product:nth-child(3){
max-height:44px !important;overflow:hidden !important;pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 45%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 45%,transparent 100%);
}
html body .products-top-wrapper #productsTop .product .p{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:12px;margin:0 !important;padding:12px 0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;}
html body .products-top-wrapper #productsTop .product .p::before{content:counter(cltop) ".";position:static !important;flex:0 0 18px;color:#0b6fb0;font-size:14px;font-weight:900;text-align:left;}
html body .products-top-wrapper #productsTop .product a.image{flex:0 0 52px;display:flex !important;align-items:center;justify-content:center;width:52px !important;height:52px !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
html body .products-top-wrapper #productsTop .product a.image img{width:100% !important;height:100% !important;object-fit:contain;}
html body .products-top-wrapper #productsTop .product .extra-flags,
html body .products-top-wrapper #productsTop .product .p-code,
html body .products-top-wrapper #productsTop .product .price-additional,
html body .products-top-wrapper #productsTop .product .price-standard-label{display:none !important;}
/* stav skladu pod názvem (barva podle stavu) */
html body .products-top-wrapper #productsTop .product .ratings-wrapper{display:flex !important;align-items:center;margin:3px 0 0 !important;padding:0 !important;}
html body .products-top-wrapper #productsTop .product .availability{margin:0 !important;}
html body .products-top-wrapper #productsTop .product .availability::before{display:none !important;}
html body .products-top-wrapper #productsTop .product .availability span{display:inline-flex;align-items:center;gap:5px;border:0 !important;font-size:11.5px !important;font-weight:800 !important;text-decoration:none !important;}
html body .products-top-wrapper #productsTop .product .availability span::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor;}
/* sleva pod cenou – malý červený štítek (jako Akce) bez závorek */
html body .products-top-wrapper #productsTop .product .price-save{order:3;display:inline-flex !important;align-items:center;height:17px;margin-top:3px;padding:0 6px;border-radius:5px;background:#e31e53;color:#fff !important;font-size:10.5px !important;font-weight:900 !important;white-space:nowrap;}
html body .products-top-wrapper #productsTop .product .p-in{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:12px;flex:1 1 0 !important;width:auto !important;min-width:0;margin:0 !important;padding:0 !important;}
html body .products-top-wrapper #productsTop .product .p-in-in{flex:1 1 auto;min-width:0;margin:0 !important;padding:0 !important;}
html body .products-top-wrapper #productsTop .product a.name{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 !important;color:#163d5c !important;font-size:13.5px !important;font-weight:700 !important;line-height:1.35 !important;text-decoration:none !important;}
html body .products-top-wrapper #productsTop .product a.name:hover{color:#0b6fb0 !important;}
html body .products-top-wrapper #productsTop .product .p-bottom,
html body .products-top-wrapper #productsTop .product .offers,
html body .products-top-wrapper #productsTop .product .prices,
html body .products-top-wrapper #productsTop .product .price-final{width:auto !important;min-width:max-content !important;max-width:none !important;margin:0 !important;padding:0 !important;}
html body .products-top-wrapper #productsTop .product .p-bottom{flex:0 0 auto;text-align:right;}
html body .products-top-wrapper #productsTop .product .prices{display:flex !important;flex-direction:column;align-items:flex-end;gap:0;}
html body .products-top-wrapper #productsTop .product .price-final{order:1;}
html body .products-top-wrapper #productsTop .product .price-final strong{color:#163d5c !important;font-size:15px !important;font-weight:900 !important;white-space:nowrap;}
html body .products-top-wrapper #productsTop .product .price-standard-wrapper{order:2;display:block !important;font-size:11.5px !important;white-space:nowrap;}
html body .products-top-wrapper #productsTop .product .price-standard,
html body .products-top-wrapper #productsTop .product .price-standard *{color:#8a96a3 !important;text-decoration:line-through;}
/* Zobrazit více / méně produktů */
html body .products-top-wrapper .button-wrapper{margin:4px 0 0 !important;padding:0 !important;background:none !important;}
html body .products-top-wrapper .button-wrapper::before,html body .products-top-wrapper .button-wrapper::after{display:none !important;}
html body .products-top-wrapper .toggle-top-products.toggle-top-products{
display:flex !important;align-items:center;justify-content:center;gap:8px;width:100% !important;height:42px !important;margin:0 !important;padding:0 16px !important;
border:0 !important;border-radius:12px !important;background:#f5faff !important;color:#0b6fb0 !important;
font-size:13.5px !important;font-weight:800 !important;text-transform:none !important;box-shadow:none !important;transition:background .2s;
}
html body .products-top-wrapper .toggle-top-products.toggle-top-products:hover{background:#eaf4fd !important;}
html body .products-top-wrapper .toggle-top-products.toggle-top-products::before{display:none !important;}
html body .products-top-wrapper .toggle-top-products.toggle-top-products::after{
content:"" !important;display:block !important;flex:0 0 16px;width:16px !important;height:16px !important;margin:0 !important;border:0 !important;transform:none;transition:transform .25s;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}
html body .products-top-wrapper .toggle-top-products.toggle-top-products[aria-expanded="true"]::after{transform:rotate(180deg);}
@media (max-width:767px){
html body .products-top-wrapper{padding:12px 14px 10px !important;}
html body .products-top-wrapper #productsTop .product .p{gap:10px;padding:10px 0 !important;}
html body .products-top-wrapper #productsTop .product a.image{flex-basis:46px;width:46px !important;height:46px !important;}
html body .products-top-wrapper #productsTop .product a.name{font-size:13px !important;}
}
/* Nejprodávanější – přebití šablony: tlačítko nesmí zasahovat do posledního řádku, číslo pořadí bez rámečku */
html body .products-top-wrapper:is(#cl-top,.products-top-wrapper) .button-wrapper{margin:6px 0 0 !important;top:auto !important;background:none !important;}
html body .products-top-wrapper #productsTop .product:nth-child(n) .p::before{border:0 !important;background:none !important;width:auto !important;height:auto !important;border-radius:0 !important;display:block !important;box-shadow:none !important;color:#0b6fb0 !important;}
/* mobil – kategorie: stejné svislé mezery (Nejprodávanější → filtr 16 px, řazení → první karty 16 px, dřív 21 a 38 px) */
@media (max-width:767px){
html body .products-top-wrapper{margin-bottom:16px !important;}
html body.type-category .category-header{margin-bottom:10px !important;}
}
/* Nejprodávanější – po rozbalení šablona přesune fokus na první nově zobrazený produkt; bez rámečku kolem názvu */
html body .products-top-wrapper #productsTop .product a:focus{outline:0 !important;box-shadow:none !important;}
/* Nejprodávanější – cena, původní cena a sleva vždy pod sebou (šablona dávala zalamování do dalšího sloupce) */
html body .products-top-wrapper #productsTop .product .prices{flex-wrap:nowrap !important;height:auto !important;max-height:none !important;}
/* =====================================================================
SLEVA – JEDNOTNĚ VŠUDE (karty na počítači i mobilu, detail produktu):
cena na červeném podkladu #e31e53 (stejná červená jako štítek Akce), vedle žlutý štítek „−22 %“,
pod tím přeškrtnutá původní cena
===================================================================== */
/* počítač – karty: štítek slevy už není přes obrázek, je u ceny jako na mobilu */
@media (min-width:768px){
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product.cl-has-old .flags-extra .flag-discount{display:none !important;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow{
display:grid !important;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:8px;row-gap:3px;
}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final{grid-column:1;grid-row:1;padding:4px 10px !important;border-radius:10px;background:#e31e53;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .price-final strong{color:#fff !important;font-size:19px !important;line-height:1.15;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-save{grid-column:2;grid-row:1;display:inline-flex;align-items:center;height:24px;margin:0;padding:0 8px;border-radius:7px;background:#ffe14d;color:#163d5c;font-size:12.5px;font-weight:900;line-height:1;}
html body :is(.p-detail .products-additional, .products-block[class*="homepage-products"], .type-category #products, .type-search #products) .product .prices .cl-pricerow .cl-old{grid-column:1 / -1;grid-row:2;margin:0;color:#8a96a3;font-size:12.5px;}
}
/* ostatní výpisy (šablonový štítek slevy) – stejná červená */
html body .products .product .flag-discount{background:#e31e53 !important;box-shadow:0 6px 14px -8px rgba(227,30,83,.7) !important;}
html body .products-top-wrapper #productsTop .product .price-save{background:#ffe14d !important;color:#163d5c !important;}
/* detail produktu – cena se slevou ve stejném stylu jako karty */
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper{align-items:center;row-gap:6px;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper::after{content:"";order:3;flex:0 0 100%;height:0;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-final{order:1;padding:4px 14px 5px;border-radius:14px;background:#e31e53;color:#fff !important;box-shadow:0 8px 18px -10px rgba(227,30,83,.7);}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper > .cl-save__pct{order:2;display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:9px;background:#ffe14d;color:#163d5c;font-size:15px;font-weight:900;line-height:1;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-standard{order:4;color:#8a96a3 !important;font-size:15px !important;font-weight:700;text-decoration-color:#8a96a3;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-save{display:none !important;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .cl-save{order:5;flex-basis:auto;margin:0;color:var(--cld-green);font-size:14px;font-weight:800;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .cl-save .cl-save__pct{display:none;}
/* štítek slevy přes obrázek pryč – sleva je u ceny (stejně jako u karet produktů) */
html body .p-detail:has(.buy-box.cl-has-save) .p-image-wrapper .flags-extra .flag-discount{display:none !important;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-additional,
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-measure{order:6;}
@media (min-width:768px){
html body .p-detail .p-info-wrapper > .buy-box.cl-has-save .p-final-price-wrapper .price-final{font-size:32px !important;}
}
@media (max-width:767px){
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper .price-final{padding:3px 12px 4px;border-radius:12px;font-size:26px !important;}
html body .p-detail .buy-box.cl-has-save .p-final-price-wrapper > .cl-save__pct{height:26px;padding:0 8px;font-size:13.5px;}
}
/* detail produktu – štítky (Akce, Tip, Naše doporučení…) stejné jako na kartách produktů:
pilulky vedle sebe v levém horním rohu fotky, na počítači i na mobilu */
html body .p-detail .p-image-wrapper .flags-default.flags-default{top:10px !important;left:12px !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:5px !important;max-width:70%;}
html body .p-detail .p-image-wrapper .flags-default .flag.flag{display:inline-flex !important;align-items:center;height:22px;margin:0 !important;padding:0 9px !important;border-radius:999px !important;font-size:11px !important;font-weight:800 !important;line-height:1 !important;letter-spacing:0;text-transform:none !important;white-space:nowrap;box-shadow:0 2px 6px rgba(22,61,92,.12);}
html body .p-detail .p-image-wrapper .flags-default .flag-action{background:#e31e53 !important;}
/* detail produktu – štítek Doprava zdarma stejný jako na kartách (zelená pilulka s autíčkem místo modrého kruhu) */
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping.flag-freeshipping{display:inline-flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:5px;width:auto !important;height:24px !important;min-width:0 !important;margin:0 !important;padding:0 9px !important;border-radius:999px !important;background:linear-gradient(135deg,#34c759,#1f9d3a) !important;color:#fff !important;box-shadow:0 3px 8px rgba(31,157,58,.25) !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van{position:static !important;display:inline-flex !important;width:auto !important;height:auto !important;margin:0 !important;font-size:13px !important;line-height:1;color:#fff !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van::before{position:static !important;font-size:13px !important;margin:0 !important;color:#fff !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .flag-text{position:static !important;display:inline !important;margin:0 !important;color:#fff !important;font-size:11px !important;font-weight:800 !important;line-height:1;text-transform:none;}
html body .p-detail .p-image-wrapper .flags-extra{top:10px !important;right:12px !important;}
/* detail – Doprava zdarma o něco větší než na kartách (velká fotka) */
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping.flag-freeshipping{gap:7px;height:34px !important;padding:0 14px !important;box-shadow:0 6px 14px -6px rgba(31,157,58,.55) !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van,
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van::before{font-size:18px !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .flag-text{font-size:14px !important;font-weight:900 !important;letter-spacing:.2px;}
@media (max-width:767px){
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping.flag-freeshipping{height:30px !important;padding:0 12px !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van,
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .icon-van::before{font-size:16px !important;}
html body .p-detail .p-image-wrapper .flags-extra .flag-freeshipping .flag-text{font-size:13px !important;}
}
/* =====================================================================
NEJPRODÁVANĚJŠÍ v2 – řádek: [pořadí v kroužku][obrázek][štítek · název · cena · skladem][košík]
cena stejně jako na kartách (červená cena + žlutá sleva + přeškrtnutá původní cena);
na mobilu i počítači stejný seznam (2 produkty + 3. do ztracena)
===================================================================== */
html body .products-top-wrapper #productsTop .product.product .p{display:grid !important;grid-template-columns:26px 60px minmax(0,1fr) 40px;align-items:center;column-gap:10px;padding:12px 0 !important;}
html body .products-top-wrapper #productsTop .product.product .p::before{content:none !important;display:none !important;}
html body .products-top-wrapper #productsTop .product.product .cl-top-rank{grid-column:1;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #e0eef9;border-radius:50%;background:#f5faff;color:#0b6fb0;font-size:12.5px;font-weight:900;line-height:1;}
html body .products-top-wrapper #productsTop .product.cl-top-1 .cl-top-rank{border-color:transparent;background:linear-gradient(135deg,#239ceb,#0b6fb0);color:#fff;box-shadow:0 4px 10px -4px rgba(11,111,176,.6);}
html body .products-top-wrapper #productsTop .product.product a.image{grid-column:2;width:60px !important;height:60px !important;padding:4px !important;border:1px solid #eef3f8 !important;border-radius:12px !important;background:#fff !important;box-sizing:border-box;}
html body .products-top-wrapper #productsTop .product.product .p-in{grid-column:3;display:flex !important;flex-direction:column !important;align-items:flex-start;gap:4px;min-width:0;}
html body .products-top-wrapper #productsTop .product.product .p-in-in{display:contents !important;}
html body .products-top-wrapper #productsTop .product.product .cl-top-badge{order:0;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:#eaf4fd;color:#0b6fb0;font-size:10.5px;font-weight:800;line-height:1;}
html body .products-top-wrapper #productsTop .product.product a.name{order:1;width:100%;}
html body .products-top-wrapper #productsTop .product.product .p-bottom{order:2;flex:none !important;min-width:0 !important;text-align:left;}
html body .products-top-wrapper #productsTop .product.product .ratings-wrapper{order:3;margin:0 !important;}
html body .products-top-wrapper #productsTop .product.product .offers,
html body .products-top-wrapper #productsTop .product.product .prices{min-width:0 !important;}
html body .products-top-wrapper #productsTop .product.product .prices{align-items:flex-start !important;}
html body .products-top-wrapper #productsTop .product.cl-has-old .prices > .price-save,
html body .products-top-wrapper #productsTop .product.cl-has-old .prices > .price-standard-wrapper{display:none !important;}
html body .products-top-wrapper #productsTop .product.product .cl-pricerow{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:6px;row-gap:2px;}
html body .products-top-wrapper #productsTop .product.product .cl-pricerow .price-final{grid-column:1;grid-row:1;min-width:0 !important;padding:2px 8px !important;border-radius:8px;background:#e31e53;}
html body .products-top-wrapper #productsTop .product.product .cl-pricerow .price-final strong{color:#fff !important;font-size:14.5px !important;line-height:1.2;}
html body .products-top-wrapper #productsTop .product.product .cl-pricerow .cl-save{grid-column:2;grid-row:1;display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:6px;background:#ffe14d;color:#163d5c;font-size:11px;font-weight:900;line-height:1;}
html body .products-top-wrapper #productsTop .product.product .cl-pricerow .cl-old{grid-column:1 / -1;grid-row:2;color:#8a96a3;font-size:11.5px;font-weight:700;text-decoration:line-through;}
html body .products-top-wrapper #productsTop .product.product .cl-top-cart{grid-column:4;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff !important;box-shadow:0 6px 14px -8px rgba(31,157,58,.8);text-decoration:none !important;transition:transform .15s,filter .15s;}
html body .products-top-wrapper #productsTop .product.product .cl-top-cart:hover{filter:brightness(1.05);transform:translateY(-1px);}
html body .products-top-wrapper #productsTop .product.product .cl-top-cart:active{transform:scale(.94);}
html body .products-top-wrapper #productsTop .product.product .cl-top-cart.is-busy{opacity:.6;pointer-events:none;}
/* sbaleno na mobilu: 3. produkt jen naznačený (vyšší řádky → víc místa) */
html body .products-top-wrapper.has-inactive #productsTop .product.product:nth-child(3){max-height:58px !important;}
@media (max-width:767px){
html body .products-top-wrapper #productsTop .product.product .p{grid-template-columns:24px 56px minmax(0,1fr) 38px;column-gap:9px;}
html body .products-top-wrapper #productsTop .product.product .cl-top-rank{width:24px;height:24px;font-size:12px;}
html body .products-top-wrapper #productsTop .product.product a.image{width:56px !important;height:56px !important;}
html body .products-top-wrapper #productsTop .product.product .cl-top-cart{width:38px;height:38px;}
}
/* šablona dávala názvu odsazení 120 px a ceně absolutní pozici vpravo – v novém rozložení je cena pod názvem */
html body .products-top-wrapper #productsTop .product.product a.name{padding-right:0 !important;}
html body .products-top-wrapper #productsTop .product.product .prices{position:static !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;transform:none !important;}
/* detail – větší mezera mezi štítkem Skladem a cenou */
html body .p-detail .buy-box .p-final-price-wrapper{margin-top:8px !important;}
@media (min-width:1200px){
html body .p-detail .p-info-wrapper > .buy-box .p-final-price-wrapper{margin-top:0 !important;padding-top:58px !important;}
}
/* =====================================================================
MALÁ SLEVA (pod 15 %) – nezvýrazňuje se: běžná modrá cena, bez štítku slevy,
jen malá šedá přeškrtnutá původní cena (třídu cl-small-save přidává cleno-produkt-zalozky.js)
===================================================================== */
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .flag-discount{display:none !important;}
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .cl-save{display:none !important;}
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .prices .cl-pricerow{display:flex !important;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:0;background:none !important;box-shadow:none !important;border-radius:0 !important;overflow:visible !important;}
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .prices .cl-pricerow .price-final{flex:none !important;padding:0 !important;border-radius:0 !important;background:none !important;}
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .prices .cl-pricerow .price-final strong{color:#163d5c !important;}
html body .product.product:is(#cl-x,.cl-small-save):is(#cl-x,.cl-small-save) .prices .cl-pricerow .cl-old{flex:none;margin:0 !important;padding:0 !important;color:#8a96a3 !important;font-size:11.5px !important;font-weight:600 !important;text-decoration-color:#8a96a3 !important;}
/* Nejprodávanější */
html body .products-top-wrapper #productsTop .product.cl-small-save.cl-small-save .prices > .price-save{display:none !important;}
/* detail produktu */
html body .p-detail .buy-box.cl-small-save .p-final-price-wrapper .price-save{display:none !important;}
html body .p-detail .buy-box.cl-small-save .p-final-price-wrapper .price-standard{color:#8a96a3 !important;font-size:14px !important;font-weight:600;}
html body .p-detail:has(.buy-box.cl-small-save) .p-image-wrapper .flags-extra .flag-discount{display:none !important;}
/* ==================== cleno-popup-kosik.css ==================== */
/* =====================================================================
Cleno.cz – okno „Přidáno do košíku“ (po kliknutí na Do košíku)
Fotka přidaného produktu, doprava zdarma přes celou šířku, pod ní tlačítka,
řádek důvěry a kompaktní doporučené produkty
===================================================================== */
:root{
--clk-head:#163d5c;
--clk-blue:#239ceb;
--clk-blue-d:#0b6fb0;
--clk-text:#6b7682;
--clk-border:#e0eef9;
--clk-soft:#f5faff;
}
/* ---------- pozadí a okno ---------- */
#cboxOverlay{background:rgba(14,47,75,.55) !important;opacity:1 !important;}
#colorbox,#cboxWrapper{border-radius:24px !important;}
#colorbox{
background:none !important;
box-shadow:0 34px 80px -34px rgba(14,47,75,.55) !important;
}
#cboxContent{
border-radius:24px !important;
background:#fff !important;
overflow:hidden !important;
}
#cboxLoadedContent{border-radius:24px;}
/* zavírací křížek */
#cboxClose{
top:16px !important;right:16px !important;
width:38px !important;height:38px !important;
display:flex !important;align-items:center;justify-content:center;
border-radius:50% !important;
background:#f3f7fb !important;
color:var(--clk-head) !important;
transition:background .2s,color .2s;
z-index:5;
}
#cboxClose::before{position:static !important;margin:0 !important;color:inherit !important;font-size:13px !important;line-height:1 !important;}
#cboxClose:hover{background:#e6f0f9 !important;color:var(--clk-blue-d) !important;}
/* ---------- hlavička: Přidáno do košíku + název produktu ---------- */
.advanced-order{position:relative;}
.advanced-order .h1:not(.advanced-order-suggestion){
display:flex;align-items:center;
min-height:48px;
margin:4px 0 0 !important;
padding:0 54px 0 64px !important;
color:var(--clk-head) !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.01em;
}
.advanced-order .h1:not(.advanced-order-suggestion)::before{
width:48px !important;height:48px !important;
border-radius:50% !important;
background:#e7f6ec !important;
color:#1f9d3a !important;
}
.advanced-order .h2{
margin:0 0 28px !important;
padding:0 54px 0 64px !important;
color:var(--clk-text) !important;
font-size:15px !important;font-weight:600 !important;
line-height:1.45 !important;
}
.advanced-order .h2 a{color:var(--clk-blue-d) !important;font-weight:700;text-decoration:none !important;}
.advanced-order .h2 a:hover{color:var(--clk-blue) !important;}
/* fotka přidaného produktu (vkládá cleno-popup-kosik.js) – fajfka se změní na malý odznak v rohu fotky */
.advanced-order .cl-added-thumb{
position:absolute;left:0;top:0;
width:76px;height:76px;
display:flex;align-items:center;justify-content:center;
padding:6px;
border:1px solid #e6eef6;
border-radius:16px;
background:#fff;
}
.advanced-order .cl-added-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.advanced-order.cl-has-img .h1:not(.advanced-order-suggestion),
.advanced-order.cl-has-img .h2{padding-left:96px !important;}
.advanced-order.cl-has-img .h1:not(.advanced-order-suggestion){min-height:44px;}
.advanced-order.cl-has-img .h2{min-height:34px;}
.advanced-order.cl-has-img .h1:not(.advanced-order-suggestion)::before{
left:58px !important;top:46px !important;
width:24px !important;height:24px !important;
line-height:20px !important;
font-size:10px !important;
border:2px solid #fff !important;
background:#1f9d3a !important;
color:#fff !important;
z-index:2;
}
/* ---------- pás: doprava zdarma přes celou šířku, pod ní tlačítka a řádek důvěry ---------- */
.advanced-order .extras-wrap{
display:grid !important;
grid-template-columns:auto auto;
justify-content:space-between;
align-items:center !important;
gap:16px 24px;
padding:22px 32px 18px !important;
border-top:1px solid var(--clk-border) !important;
border-bottom:1px solid var(--clk-border) !important;
background:var(--clk-soft) !important;
}
.advanced-order .extras-wrap > div{margin:0 !important;width:auto !important;max-width:none !important;}
.advanced-order .extra.delivery{grid-column:1 / -1;grid-row:1;text-align:center !important;}
.advanced-order .do-obchodu{grid-column:1;grid-row:2;justify-self:start;}
.advanced-order .extra.step{grid-column:2;grid-row:2;justify-self:end;}
/* řádek důvěry */
.advanced-order .extras-wrap::after{
content:"✓ Odesíláme do 24 hodin ✓ Ověřený obchod ✓ Bezpečná platba";
grid-column:1 / -1;grid-row:3;
white-space:pre;
text-align:center;
color:var(--clk-text);
font-size:12.5px;font-weight:600;
letter-spacing:.01em;
}
/* Zpět do obchodu – jemné obrysové tlačítko */
.advanced-order .next-step-back{
display:inline-flex !important;align-items:center;gap:8px;
height:50px !important;
padding:0 20px 0 16px !important;
border:1px solid #d7e6f3 !important;
border-radius:14px !important;
background:#fff !important;
color:var(--clk-head) !important;
font-size:14.5px !important;font-weight:700 !important;
text-transform:none !important;
text-decoration:none !important;
white-space:nowrap;
transition:border-color .2s,color .2s;
}
.advanced-order .next-step-back::before{color:var(--clk-blue-d) !important;font-size:12px !important;}
.advanced-order .next-step-back:hover{border-color:#bcd9ef !important;color:var(--clk-blue-d) !important;}
/* doprava zdarma + ukazatel */
.advanced-order .extra.delivery > span{
display:block;
width:100% !important;
color:var(--clk-head) !important;
font-size:14.5px !important;
line-height:1.45 !important;
}
.advanced-order .extra.delivery > span::before{color:var(--clk-blue-d) !important;}
.advanced-order .extra.delivery strong{color:var(--clk-head) !important;font-weight:800 !important;}
.advanced-order .price-range{
height:8px !important;
margin-top:10px !important;
border-radius:8px !important;
background:#e3ecf5 !important;
overflow:hidden;
}
.advanced-order .price-range > div{
height:100% !important;
border-radius:8px !important;
background:linear-gradient(90deg,#8fd0f7 0%,#239ceb 45%,#0b6fb0 100%) !important;
}
/* Nákupní košík – stejné zelené tlačítko jako na detailu produktu */
.advanced-order .extras-wrap .btn-conversion{
display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
min-width:260px;
height:52px !important;
padding:0 26px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
white-space:nowrap;
box-shadow:0 10px 20px -12px rgba(31,157,58,.9) !important;
transition:filter .2s,transform .2s;
}
.advanced-order .extras-wrap .btn-conversion:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* ---------- Ostatní zákazníci také nakoupili ---------- */
.advanced-order .advanced-order-suggestion{
margin:0 -33px !important;
padding:24px 0 18px !important;
border-top:0 !important;
color:var(--clk-head) !important;
font-size:19px !important;font-weight:800 !important;
letter-spacing:-.01em;
text-align:center !important;
}
.advanced-order .advanced-order-suggestion::after{
content:"";
display:block;
width:40px;height:4px;
margin:10px auto 0;
border-radius:4px;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%);
}
/* doporučené produkty – úhledné stejně vysoké karty: obrázek, název, cena, tlačítko */
#colorbox .advanced-order .products-additional{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
width:auto !important;
margin:0 0 4px !important;
padding:0 0 28px !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
#colorbox .advanced-order .products-additional::before,#colorbox .advanced-order .products-additional::after{display:none !important;}
#colorbox .advanced-order .products-additional .product{
display:block !important;
justify-self:stretch !important;
width:100% !important;max-width:none !important;min-width:0 !important;
margin:0 !important;padding:0 !important;
float:none !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
#colorbox .advanced-order .products-additional .product::before,
#colorbox .advanced-order .products-additional .product::after{display:none !important;}
/* na počítači stačí tři doporučené produkty v jednom řádku */
@media (min-width:768px){
#colorbox .advanced-order .products-additional .product:nth-child(n+4){display:none !important;}
}
#colorbox .advanced-order .products-additional .product > .p{
display:flex !important;flex-direction:column !important;
width:100% !important;height:100%;
padding:14px !important;
border:1px solid #e6eef6 !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:none !important;
transform:none !important;
}
#colorbox .advanced-order .products-additional .product:hover > .p{border-color:#cfe2f2 !important;}
#colorbox .advanced-order .products-additional .image{
display:flex !important;align-items:center;justify-content:center;
width:100% !important;height:110px !important;
aspect-ratio:auto !important;max-height:none !important;
margin:0 0 12px !important;padding:6px !important;
border-radius:12px !important;
background:#fff !important;
}
#colorbox .advanced-order .products-additional .image img{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;object-fit:contain;}
#colorbox .advanced-order .products-additional .flags,
#colorbox .advanced-order .products-additional .stars-wrapper,
#colorbox .advanced-order .products-additional .p-desc,
#colorbox .advanced-order .products-additional .p-code,
#colorbox .advanced-order .products-additional .price-additional,
#colorbox .advanced-order .products-additional .price-measure,
#colorbox .advanced-order .products-additional .availability{display:none !important;}
#colorbox .advanced-order .products-additional .p-in{flex:1 1 auto;min-width:0;display:flex !important;flex-direction:column;}
#colorbox .advanced-order .products-additional .p-in-in{margin:0 !important;}
#colorbox .advanced-order .products-additional .name{
display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
height:2.7em !important;min-height:0 !important;
margin:0 0 10px !important;
color:var(--clk-head) !important;
font-size:14px !important;font-weight:700 !important;
line-height:1.35 !important;
text-align:left !important;
}
#colorbox .advanced-order .products-additional .p-bottom{margin-top:auto !important;}
#colorbox .advanced-order .products-additional .p-bottom > div{
display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
align-items:center !important;justify-content:space-between;gap:10px;
}
#colorbox .advanced-order .products-additional .prices{flex:1 1 auto;min-width:0;width:auto !important;margin:0 !important;}
#colorbox .advanced-order .products-additional .price-final,
#colorbox .advanced-order .products-additional .price-final strong{color:var(--clk-head) !important;font-size:18px !important;font-weight:800 !important;white-space:nowrap;}
#colorbox .advanced-order .products-additional .p-tools{flex:0 0 auto;width:auto !important;margin:0 !important;}
#colorbox .advanced-order .products-additional .btn-cart{
display:inline-flex !important;align-items:center;justify-content:center;gap:6px;
width:auto !important;
height:38px !important;
padding:0 14px !important;
border-radius:11px !important;
font-size:13px !important;font-weight:800 !important;
text-transform:none !important;
white-space:nowrap;
box-shadow:none !important;
}
#colorbox .advanced-order .products-additional .btn-cart::before{width:15px !important;height:15px !important;}
/* ---------- mobil ---------- */
@media (max-width:767px){
#colorbox,#cboxWrapper,#cboxContent,#cboxLoadedContent{border-radius:20px !important;}
#cboxClose{top:12px !important;right:12px !important;width:34px !important;height:34px !important;}
/* fajfka (nebo fotka) nahoře uprostřed, pod ní nadpis a název produktu */
.advanced-order .h1:not(.advanced-order-suggestion){
display:block;
min-height:0;
margin-top:6px !important;
padding:54px 36px 0 !important;
font-size:19px !important;
text-align:center !important;
}
.advanced-order .h1:not(.advanced-order-suggestion)::before{
left:50% !important;top:0 !important;right:auto !important;
width:44px !important;height:44px !important;line-height:44px !important;
margin:0 0 0 -22px !important;
transform:none !important;
}
.advanced-order .h2{margin:4px 0 20px !important;padding:0 8px !important;font-size:14px !important;text-align:center !important;}
.advanced-order .cl-added-thumb{left:50%;top:6px;width:68px;height:68px;margin-left:-34px;}
.advanced-order.cl-has-img .h1:not(.advanced-order-suggestion){padding:84px 36px 0 !important;}
.advanced-order.cl-has-img .h2{padding-left:8px !important;min-height:0;}
.advanced-order.cl-has-img .h1:not(.advanced-order-suggestion)::before{
left:50% !important;top:50px !important;
width:24px !important;height:24px !important;line-height:20px !important;
margin:0 0 0 18px !important;
}
.advanced-order .extras-wrap{
grid-template-columns:1fr;
gap:12px;
padding:18px 20px 16px !important;
}
.advanced-order .extra.delivery{grid-row:1;}
.advanced-order .extra.step{grid-column:1;grid-row:2;justify-self:stretch;}
.advanced-order .do-obchodu{grid-column:1;grid-row:3;justify-self:stretch;}
.advanced-order .extras-wrap::after{
grid-row:4;
white-space:normal;
content:"✓ Odesíláme do 24 h ✓ Ověřený obchod";
font-size:11.5px;
line-height:1.5;
}
.advanced-order .extra.delivery > span{font-size:13.5px !important;}
.advanced-order .extras-wrap .btn-conversion{width:100% !important;min-width:0;height:50px !important;}
.advanced-order .next-step-back{width:100% !important;justify-content:center;height:46px !important;}
.advanced-order .advanced-order-suggestion{padding:22px 0 14px !important;font-size:17px !important;}
.advanced-order .advanced-order-suggestion::after{width:34px;height:3px;margin-top:8px;}
/* doporučené produkty – posun prstem do strany, vidět jsou dvě karty */
#colorbox .advanced-order .products-additional{
display:flex !important;
flex-direction:row !important;flex-wrap:nowrap !important;
gap:10px;
margin:0 -20px 4px !important;
padding:0 20px 22px !important;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
#colorbox .advanced-order .products-additional::-webkit-scrollbar{display:none;}
#colorbox .advanced-order .products-additional .product{flex:0 0 46% !important;width:46% !important;scroll-snap-align:start;border:0 !important;outline:0 !important;box-shadow:none !important;}
#colorbox .advanced-order .products-additional{border:0 !important;}
#colorbox .advanced-order .products-additional .product > .p{padding:10px !important;border-radius:16px !important;}
#colorbox .advanced-order .products-additional .image{height:84px !important;margin-bottom:8px !important;}
#colorbox .advanced-order .products-additional .name{font-size:13px !important;}
#colorbox .advanced-order .products-additional .p-bottom > div{flex-direction:column !important;align-items:stretch !important;gap:8px;}
#colorbox .advanced-order .products-additional .price-final,#colorbox .advanced-order .products-additional .price-final strong{font-size:16px !important;}
#colorbox .advanced-order .products-additional .btn-cart{width:100% !important;height:36px !important;padding:0 8px !important;font-size:12.5px !important;}
}
/* ==================== cleno-kosik.css ==================== */
/* =====================================================================
Cleno.cz – košík a objednávka
Krok 1 Košík · Krok 2 Doprava a platba · Krok 3 Informace o vás · Dokončení
Bílé zaoblené karty, jemné modré okraje, tmavě modré texty, zelená tlačítka
===================================================================== */
:root{
--clc-head:#163d5c;
--clc-blue:#239ceb;
--clc-blue-d:#0b6fb0;
--clc-text:#6b7682;
--clc-border:#e0eef9;
--clc-line:#eef3f8;
--clc-soft:#f5faff;
--clc-green:#1f9d3a;
--clc-red:#e5484d;
}
/* =====================================================================
KROKY NAHOŘE (1 Košík › 2 Doprava a platba › 3 Informace o vás)
===================================================================== */
.cart-header{
display:flex !important;gap:12px;
margin:6px 0 34px !important;
padding:0 !important;
background:none !important;
border:0 !important;
list-style:none;
}
.cart-header::before,.cart-header::after{display:none !important;}
.cart-header .step{
flex:1 1 0;
float:none !important;
width:auto !important;
margin:0 !important;padding:0 !important;
background:none !important;
}
.cart-header .step::after{display:none !important;}
.cart-header .step > a,
.cart-header .step > strong{
position:relative;
display:flex !important;align-items:center;
height:64px !important;
padding:0 18px !important;
border:1px solid var(--clc-border) !important;
border-radius:18px !important;
background:#fff !important;
color:var(--clc-text) !important;
font-size:15px !important;font-weight:700 !important;
text-decoration:none !important;
transition:border-color .2s,background .2s;
}
.cart-header .step > a::before,
.cart-header .step > strong::before{display:none !important;}
.cart-header .step span{display:flex !important;align-items:center;}
.cart-header .step span::before{
flex:0 0 34px;
width:34px !important;height:34px !important;
margin-right:12px !important;
display:inline-flex !important;align-items:center;justify-content:center;
border:0 !important;
border-radius:50% !important;
background:#eef3f8 !important;
color:var(--clc-text) !important;
font-size:14px !important;font-weight:800 !important;
line-height:34px !important;
text-align:center;
}
/* aktivní krok */
.cart-header .step.active > a,
.cart-header .step.active > strong{
border-color:#bcd9ef !important;
background:#eef6fd !important;
color:var(--clc-head) !important;
}
.cart-header .step.active span::before{
background:linear-gradient(135deg,#239ceb 0%,#0b6fb0 100%) !important;
color:#fff !important;
}
/* hotový krok – zelená fajfka */
.cart-header .step.completed > a,
.cart-header .step.completed > strong{color:var(--clc-head) !important;}
.cart-header .step.completed > a:hover{border-color:#bcd9ef !important;}
.cart-header .step.completed span::before{
background:#e7f6ec !important;
color:var(--clc-green) !important;
font-size:12px !important;
}
/* =====================================================================
SPOLEČNÉ – karty, nadpisy, tlačítka
===================================================================== */
#cart-wrapper .co-box,
.ordering-process .co-box,
#checkoutContent .co-box{
margin:0 0 20px !important;
padding:28px 30px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
#checkoutContent .co-box h2,
.ordering-process .co-box h2,
#checkoutContent .co-box .h4{
display:flex;align-items:center;gap:10px;
margin:0 0 18px !important;
padding:0 !important;
color:var(--clc-head) !important;
font-size:21px !important;font-weight:800 !important;
letter-spacing:-.01em;
}
#checkoutContent .co-box h2::before,
.ordering-process .co-box h2::before{
display:inline-flex !important;align-items:center;justify-content:center;
flex:0 0 32px;
width:32px;height:32px;
margin:0 !important;
border-radius:10px;
background:#eef6fd;
color:var(--clc-blue-d) !important;
font-size:15px !important;font-weight:800 !important;
}
/* hlavní tlačítko Pokračovat / Odeslat objednávku */
.next-step-forward,
#continue-order-button,
#orderFormButton,
#submit-order{
display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
width:100% !important;
min-height:58px !important;height:auto !important;
padding:0 24px !important;
border:0 !important;
border-radius:16px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:17px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
box-shadow:0 12px 24px -14px rgba(31,157,58,.9) !important;
transition:filter .2s,transform .2s;
}
.next-step-forward:hover,#continue-order-button:hover,#orderFormButton:hover,#submit-order:hover{filter:brightness(1.06);transform:translateY(-1px);}
.next-step-forward *{color:#fff !important;}
/* Zpět / Zpět do obchodu */
.next-step-back{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
width:100% !important;
margin-top:12px !important;
padding:12px 0 !important;
border:0 !important;
background:none !important;
color:var(--clc-blue-d) !important;
font-size:14px !important;font-weight:700 !important;
text-transform:none !important;
text-decoration:none !important;
}
.next-step-back *{color:inherit !important;text-transform:none !important;text-decoration:none !important;}
.next-step-back:hover{color:var(--clc-blue) !important;}
/* =====================================================================
KROK 1 – KOŠÍK
===================================================================== */
.cart-table{
width:100%;
margin:0 0 22px !important;
border:1px solid var(--clc-border) !important;
border-collapse:separate !important;border-spacing:0;
border-radius:22px !important;
background:#fff !important;
overflow:hidden;
}
.cart-table tr{border:0 !important;}
.cart-table tr + tr td{border-top:1px solid var(--clc-line) !important;}
.cart-table td{padding:18px 12px !important;vertical-align:middle !important;border-bottom:0 !important;}
.cart-table td:first-child{padding-left:20px !important;}
.cart-table td:last-child{padding-right:20px !important;}
/* obrázek */
.cart-table .cart-p-image a{
display:flex !important;align-items:center;justify-content:center;
width:72px !important;height:72px !important;
padding:6px;
border:1px solid #e6eef6;
border-radius:14px;
background:#fff;
}
.cart-table .cart-p-image img{max-width:100% !important;max-height:100% !important;object-fit:contain;}
/* název dostane víc místa, dostupnost bez ikonky šablony */
.cart-table .p-name{width:38%;}
.cart-table td.p-availability::before{display:none !important;}
.cart-table .cart-p-image{width:88px !important;}
/* název */
.cart-table .p-name .main-link{
color:var(--clc-head) !important;
font-size:15px !important;font-weight:800 !important;
line-height:1.35 !important;
text-decoration:none !important;
}
.cart-table .p-name .main-link:hover{color:var(--clc-blue-d) !important;}
.cart-table .p-name .show-related{
display:inline-block;
margin-top:6px;
color:var(--clc-blue-d) !important;
font-size:13px !important;font-weight:700;
text-decoration:none !important;
}
/* dostupnost – zelený štítek s tečkou */
.cart-table .p-availability .availability-label{
display:inline-flex !important;align-items:center;gap:6px;
padding:4px 10px 4px 8px !important;
border:0 !important;
border-radius:20px;
background:#e7f6ec;
color:var(--clc-green) !important;
font-size:12.5px !important;font-weight:800 !important;
text-decoration:none !important;
white-space:nowrap;
}
.cart-table .p-availability .availability-label::before{
content:"" !important;
width:7px;height:7px;
margin:0 !important;
border-radius:50%;
background:currentColor;
font-size:0 !important;
}
/* počet kusů − 1 + */
.cart-table .p-quantity .p-label{display:none !important;}
.cart-table .quantity{
position:relative !important;
display:block;
width:112px !important;height:46px !important;
padding:0 !important;
border:1px solid #d7e6f3 !important;
border-radius:13px !important;
background:#fff !important;
overflow:hidden;
}
.cart-table .quantity label{display:block;height:100%;margin:0;}
.cart-table .quantity input{
width:100% !important;height:100% !important;
padding:0 34px !important;
border:0 !important;
background:transparent !important;
color:var(--clc-head) !important;
font-size:15px !important;font-weight:800 !important;
text-align:center;
-moz-appearance:textfield;
}
.cart-table .quantity input::-webkit-outer-spin-button,
.cart-table .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-table .quantity .increase,
.cart-table .quantity .decrease{
position:absolute !important;top:5px !important;bottom:5px !important;
width:30px !important;height:auto !important;
display:flex !important;align-items:center;justify-content:center;
margin:0 !important;padding:0 !important;
border:0 !important;
border-radius:9px !important;
background:transparent !important;
color:var(--clc-head) !important;
font-size:18px !important;font-weight:600 !important;line-height:1 !important;
}
.cart-table .quantity .decrease{left:4px !important;right:auto !important;}
.cart-table .quantity .increase{right:4px !important;left:auto !important;}
.cart-table .quantity .increase:hover,
.cart-table .quantity .decrease:hover{background:#eef6fd !important;color:var(--clc-blue-d) !important;}
.cart-table .quantity .increase *,
.cart-table .quantity .decrease *{color:inherit !important;font-size:inherit !important;}
/* ceny */
.cart-table .p-price,
.cart-table .p-price *{color:var(--clc-text) !important;font-size:13px !important;font-weight:600 !important;white-space:nowrap;}
.cart-table td.p-total{position:relative;white-space:nowrap;text-align:right;padding-right:62px !important;}
.cart-table .p-total form{position:absolute !important;left:auto !important;right:18px !important;top:50% !important;transform:translateY(-50%);margin:0 !important;}
.cart-table .p-total .price-final{
color:var(--clc-head) !important;
font-size:18px !important;font-weight:800 !important;
letter-spacing:-.01em;
}
/* odstranit – kulaté tlačítko s křížkem */
.cart-table .remove-item{
width:32px !important;height:32px !important;
margin:0 !important;
display:inline-flex !important;align-items:center;justify-content:center;
vertical-align:middle;
border:0 !important;
border-radius:50% !important;
background:#f3f7fb !important;
color:var(--clc-text) !important;
transition:background .2s,color .2s;
}
.cart-table .remove-item::before{color:inherit !important;font-size:11px !important;}
.cart-table .remove-item:hover{background:#fdecec !important;color:var(--clc-red) !important;}
/* doporučujeme přidat k nákupu (doplněk fvStudio) */
.fvDoplnek.fvDoplnek-upsell{
margin:0 0 22px !important;
padding:24px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
.fvDoplnek-upsell h4{
margin:0 0 16px !important;
color:var(--clc-head) !important;
font-size:19px !important;font-weight:800 !important;
}
.fvDoplnek-upsell .fvDoplnek-produkt{
margin:0 0 10px !important;
padding:14px 16px !important;
border:1px solid #e6eef6 !important;
border-radius:16px !important;
background:#fff !important;
box-shadow:none !important;
transition:border-color .2s,background .2s;
}
.fvDoplnek-upsell .fvDoplnek-produkt:last-child{margin-bottom:0 !important;}
.fvDoplnek-upsell .fvDoplnek-produkt:hover{border-color:#cfe2f2 !important;background:var(--clc-soft) !important;}
.fvDoplnek-upsell .fvDoplnek-product-image{
width:60px !important;height:60px !important;
padding:4px;
border:1px solid #e6eef6;
border-radius:12px;
background:#fff;
object-fit:contain;
}
.fvDoplnek-upsell .fvDoplnek-text .name{
color:var(--clc-head) !important;
font-size:14.5px !important;font-weight:800 !important;
text-transform:none !important;
text-decoration:none !important;
}
.fvDoplnek-upsell .fvDoplnek-text:hover .name{color:var(--clc-blue-d) !important;}
.fvDoplnek-upsell .common_price{color:#9aa6b2 !important;font-size:13px !important;text-decoration:line-through;white-space:nowrap;margin:0 6px !important;}
.fvDoplnek-upsell .price,.fvDoplnek-upsell .action_price{white-space:nowrap;}
.fvDoplnek-upsell .price,
.fvDoplnek-upsell .action_price{color:var(--clc-green) !important;font-size:15px !important;font-weight:800 !important;}
.fvDoplnek-upsell .fvDoplnek-description{color:var(--clc-text) !important;font-size:13px !important;line-height:1.5 !important;}
.fvDoplnek-upsell .fvDoplnek-variant-checkbox{
width:20px;height:20px;
accent-color:var(--clc-green);
cursor:pointer;
}
/* slevový kupón + doprava zdarma */
.cart-summary{margin:0 0 20px !important;}
.cart-summary .extras-wrapper{
padding:20px 24px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:var(--clc-soft) !important;
}
.cart-summary .extras-col{display:flex !important;flex-wrap:wrap;align-items:center;gap:16px 28px;}
.cart-summary .extras-col > div{flex:1 1 260px;width:auto !important;margin:0 !important;float:none !important;}
.discount-coupon .input-group{display:flex !important;gap:8px;width:100% !important;}
.discount-coupon .input-group > *{position:static !important;float:none !important;}
.discount-coupon .form-control{width:auto !important;min-width:0;}
.discount-coupon .form-control{
flex:1 1 auto;
height:48px !important;
padding:0 16px !important;
border:1px solid #d7e6f3 !important;
border-radius:13px !important;
background:#fff !important;
color:var(--clc-head) !important;
font-size:14px !important;
box-shadow:none !important;
}
.discount-coupon .form-control:focus{border-color:var(--clc-blue) !important;box-shadow:0 0 0 3px rgba(35,156,235,.15) !important;}
.discount-coupon .btn{
flex:0 0 auto;
height:48px !important;
padding:0 20px !important;
border:0 !important;
border-radius:13px !important;
background:var(--clc-head) !important;
color:#fff !important;
font-size:14px !important;font-weight:800 !important;
text-transform:none !important;
}
.discount-coupon .btn:hover{background:var(--clc-blue-d) !important;}
.cart-summary .extra.delivery,
.cart-summary .extra.delivery *{color:var(--clc-head) !important;font-size:14px !important;}
.cart-summary .extra.delivery strong{font-weight:800 !important;}
.cart-summary .extra.delivery > span::before{color:var(--clc-blue-d) !important;}
.cart-summary .price-range{
height:8px !important;
margin-top:10px !important;
border-radius:8px !important;
background:#e3ecf5 !important;
overflow:hidden;
}
.cart-summary .price-range > div{
height:100% !important;
border-radius:8px !important;
background:linear-gradient(90deg,#8fd0f7 0%,#239ceb 45%,#0b6fb0 100%) !important;
}
/* =====================================================================
PRAVÝ SLOUPEC – pomoc, souhrn, pokračovat (všechny kroky)
===================================================================== */
.sidebar-in-cart .box,
#checkoutSidebar .checkout-box,
#checkoutSidebar .order-summary-inner,
.summary-wrapper .box{
margin:0 0 16px !important;
padding:22px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
.sidebar-in-cart .cart-content,
#checkoutSidebar .cart-content{padding:0 !important;background:none !important;border:0 !important;}
#checkoutSidebar .checkout-box > .box,
.sidebar-in-cart .checkout-box-wrapper .box{margin:0 !important;padding:0 !important;border:0 !important;}
/* Potřebujete pomoc? */
.cart-row .contact-box h2,
.cart-row .contact-box .h4{
margin:0 0 4px !important;
color:var(--clc-head) !important;
font-size:17px !important;font-weight:800 !important;
}
.cart-row .contact-box strong{color:var(--clc-head) !important;}
.cart-row .contact-box ul{margin:14px 0 0 !important;padding:14px 0 0 !important;border-top:1px solid var(--clc-line);}
.cart-row .contact-box li{margin:0 0 8px !important;}
.cart-row .contact-box li,.cart-row .contact-box li a,.cart-row .contact-box li span{color:var(--clc-head) !important;font-size:14px !important;font-weight:700 !important;text-decoration:none !important;}
.cart-row .contact-box li ::before{color:var(--clc-blue-d) !important;}
/* souhrn ceny */
.cart-row .price-wrapper{display:grid !important;grid-template-columns:1fr auto;align-items:baseline;gap:4px 10px;}
.cart-row .price-wrapper .price-label{color:var(--clc-text) !important;font-size:13.5px !important;font-weight:600 !important;}
.cart-row .price-wrapper .price-primary.price-label{color:var(--clc-head) !important;font-weight:800 !important;}
.cart-row .price-wrapper .price.price-primary,
.cart-row .price-wrapper .price.price-primary *{color:var(--clc-head) !important;font-size:24px !important;font-weight:800 !important;letter-spacing:-.02em;}
.cart-row .price-wrapper .price.price-secondary,
.cart-row .price-wrapper .price.price-secondary *{color:var(--clc-text) !important;font-size:13px !important;font-weight:600 !important;}
.summary-wrapper .next-step,
#checkoutSidebar .next-step{margin:18px 0 0 !important;padding:0 !important;}
/* Rekapitulace objednávky (krok 2 a 3) */
.order-summary-inner h2,
.order-summary-inner .h4{
margin:0 0 14px !important;
color:var(--clc-head) !important;
font-size:18px !important;font-weight:800 !important;
}
.order-summary-inner .cart-item{padding:0 0 12px !important;margin:0 0 12px !important;border-bottom:1px solid var(--clc-line) !important;}
.order-summary-inner .cart-item-name a{color:var(--clc-head) !important;font-size:13.5px !important;font-weight:700 !important;text-decoration:none !important;}
.order-summary-inner .cart-item-amount,
.order-summary-inner .cart-item-amount *{color:var(--clc-text) !important;font-size:13px !important;}
.order-summary-inner .cart-item-price{color:var(--clc-head) !important;font-size:14px !important;font-weight:800 !important;}
.order-summary-inner .order-summary-item{padding:12px 0 !important;border-top:0 !important;border-bottom:1px solid var(--clc-line) !important;}
.order-summary-inner .order-summary-item,
.order-summary-inner .order-summary-item strong{color:var(--clc-head) !important;font-size:14px !important;}
.order-summary-inner .order-summary-item.price{border-bottom:0 !important;padding-bottom:0 !important;}
.order-recapitulation{padding:12px 0 !important;border-bottom:1px solid var(--clc-line) !important;}
.order-recapitulation .recapitulation-single{margin:0 0 10px !important;padding:0 !important;border:0 !important;}
.order-recapitulation .recapitulation-single.last{margin-bottom:0 !important;}
.recapitulation-shipping-billing-label{color:var(--clc-text) !important;font-size:12.5px !important;font-weight:600 !important;}
.recapitulation-shipping-billing-info,
.recapitulation-shipping-billing-info *{color:var(--clc-head) !important;font-size:13.5px !important;font-weight:700 !important;}
/* =====================================================================
KROK 2 – DOPRAVA A PLATBA
===================================================================== */
/* informační lišta (Doprava nad 1000 Kč zdarma) */
.site-msg-custom{
margin:0 0 20px !important;
padding:14px 20px !important;
border:1px solid #cfe9d6 !important;
border-radius:16px !important;
background:#effaf2 !important;
color:#17672b !important;
}
.site-msg-custom::before{color:var(--clc-green) !important;}
.site-msg-custom p,.site-msg-custom strong{margin:0 !important;color:#17672b !important;font-size:14.5px !important;}
/* volby dopravy a platby jako karty */
.shipping-billing-table .radio-wrapper{
margin:0 0 10px !important;
padding:0 20px !important;
border:1px solid #e3ecf5 !important;
border-radius:16px !important;
background:#fff !important;
transition:border-color .2s,background .2s,box-shadow .2s;
}
.shipping-billing-table .radio-wrapper:last-child{margin-bottom:0 !important;}
.shipping-billing-table .radio-wrapper:hover{border-color:#bcd9ef !important;}
.shipping-billing-table .radio-wrapper.active{
border-color:var(--clc-blue) !important;
background:linear-gradient(135deg,#f2f8fe 0%,#ffffff 100%) !important;
box-shadow:0 0 0 3px rgba(35,156,235,.12) !important;
}
.shipping-billing-table .radio-wrapper.inactive,
.shipping-billing-table .radio-wrapper.disabled{opacity:.55;}
.shipping-billing-table label{
display:flex !important;align-items:center;gap:16px;
min-height:72px;
padding:14px 0 14px 36px !important;
cursor:pointer;
}
/* vlastní kulatý přepínač */
.shipping-billing-table label::before{
top:50% !important;margin-top:0 !important;transform:translateY(-50%) !important;
width:22px !important;height:22px !important;
border:2px solid #c9d9e8 !important;
background:#fff !important;
}
.shipping-billing-table label::after{
top:50% !important;margin-top:0 !important;transform:translateY(-50%) !important;left:6px !important;
width:10px !important;height:10px !important;
border-radius:50% !important;
background:transparent !important;
border:0 !important;
}
.shipping-billing-table .radio-wrapper.active label::before{border-color:var(--clc-blue) !important;}
.shipping-billing-table .radio-wrapper.active label::after{background:var(--clc-blue) !important;}
.shipping-billing-table .payment-logo{
flex:0 0 76px;
width:76px !important;height:44px !important;
display:flex !important;align-items:center;justify-content:center;
padding:4px 6px;
border:1px solid #e6eef6;
border-radius:11px;
background:#fff;
}
.shipping-billing-table .payment-logo img{max-width:100% !important;max-height:100% !important;object-fit:contain;}
.shipping-billing-table .payment-info{flex:1 1 auto;min-width:0;}
.shipping-billing-table .shipping-billing-name{
color:var(--clc-head) !important;
font-size:15px !important;font-weight:800 !important;
line-height:1.35 !important;
}
.shipping-billing-table .question-tooltip{
width:18px !important;height:18px !important;
border-radius:50% !important;
background:#e6f0f9 !important;
color:var(--clc-blue-d) !important;
font-size:11px !important;line-height:18px !important;
}
.shipping-billing-table .sublabel{display:block;margin-top:4px;color:var(--clc-text) !important;font-size:13px !important;}
.shipping-billing-table .sublabel a{
color:var(--clc-blue-d) !important;
font-weight:700;
text-decoration:none !important;
}
.shipping-billing-table .sublabel a:hover{color:var(--clc-blue) !important;}
.shipping-billing-table .payment-shipping-price{
flex:0 0 auto;
margin-left:auto;
color:var(--clc-head) !important;
font-size:15px !important;font-weight:800 !important;
white-space:nowrap;
}
.shipping-billing-table .payment-shipping-price.for-free{
padding:4px 10px;
border-radius:20px;
background:#e7f6ec;
color:var(--clc-green) !important;
font-size:12.5px !important;
line-height:1.4 !important;
}
/* =====================================================================
KROK 3 – INFORMACE O VÁS (formulář)
===================================================================== */
#checkoutContent label,
.ordering-process label{color:var(--clc-head) !important;font-size:14px !important;font-weight:700 !important;}
#checkoutContent .form-control,
#checkoutContent input[type="text"],
#checkoutContent input[type="email"],
#checkoutContent input[type="tel"],
#checkoutContent select,
#checkoutContent textarea{
min-height:50px;
padding:0 16px !important;
border:1px solid #d7e6f3 !important;
border-radius:13px !important;
background:#fff !important;
color:var(--clc-head) !important;
font-size:15px !important;
box-shadow:none !important;
transition:border-color .2s,box-shadow .2s;
}
#checkoutContent textarea{padding:12px 16px !important;min-height:110px;}
#checkoutContent .form-control:focus,
#checkoutContent input:focus,
#checkoutContent select:focus,
#checkoutContent textarea:focus{
border-color:var(--clc-blue) !important;
box-shadow:0 0 0 3px rgba(35,156,235,.15) !important;
outline:0;
}
#checkoutContent .form-control::placeholder{color:#9aa6b2;}
#checkoutContent .has-error .form-control,
#checkoutContent .form-control.error{border-color:var(--clc-red) !important;box-shadow:0 0 0 3px rgba(229,72,77,.12) !important;}
#checkoutContent .form-group{margin-bottom:16px !important;}
#checkoutContent .co-box .checkbox label,
#checkoutContent .co-box .radio label{font-weight:600 !important;}
#checkoutContent input[type="checkbox"],
#checkoutContent input[type="radio"]{accent-color:var(--clc-blue);}
#checkoutContent .co-box a{color:var(--clc-blue-d) !important;font-weight:700;text-decoration:none !important;}
#checkoutContent .co-box a:hover{color:var(--clc-blue) !important;}
#checkoutContent .co-box .btn-secondary,
#checkoutContent .co-box .btn-default{
height:44px;
padding:0 18px !important;
border:1px solid #d7e6f3 !important;
border-radius:12px !important;
background:#fff !important;
color:var(--clc-head) !important;
font-weight:700 !important;
text-transform:none !important;
}
/* zaškrtávací políčka (Nakupuji na firmu, Doručit jinam, souhlasy…) */
.cart-row input[type="checkbox"] + label::before{
width:22px !important;height:22px !important;
border:2px solid #c9d9e8 !important;
border-radius:7px !important;
background:#fff !important;
}
.cart-row input[type="checkbox"]:checked + label::after{
width:22px !important;height:22px !important;
border-radius:7px !important;
background:var(--clc-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important;
}
.cart-row label.whole-width{color:var(--clc-head) !important;font-size:14px !important;font-weight:600 !important;}
/* přihlášení – informační lišta nahoře */
#checkoutContent p.ucet{
margin:0 0 20px !important;
padding:14px 20px !important;
border:1px solid var(--clc-border) !important;
border-radius:16px !important;
background:var(--clc-soft) !important;
color:var(--clc-head) !important;
font-size:14.5px !important;
}
#checkoutContent p.ucet::before{color:var(--clc-blue-d) !important;}
#checkoutContent p.ucet a{color:var(--clc-blue-d) !important;font-weight:800;text-decoration:none !important;}
/* fakturační adresa – vnitřní rámeček pryč (karta už je kolem) */
#checkoutContent .co-box > fieldset.box{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
/* telefon – vlajka a číslo jako jedno pole */
#checkoutContent .phone-combined-input{display:flex !important;}
#checkoutContent .phone-combined-input .country-flags{
height:50px !important;
border:1px solid #d7e6f3 !important;border-right:0 !important;
border-radius:13px 0 0 13px !important;
background:#f7fafd !important;
}
#checkoutContent .phone-combined-input input{border-radius:0 13px 13px 0 !important;}
/* souhlasy a obchodní podmínky v pravém sloupci */
#checkoutContent .co-box-additional::before{display:none !important;}
#checkoutSidebar .consents{
margin:0 0 6px !important;
padding:10px 12px !important;
border-radius:12px !important;
background:#f7fafd !important;
color:var(--clc-text) !important;
font-size:13px !important;
}
#checkoutSidebar .consents label,
#checkoutSidebar .consents p{color:var(--clc-text) !important;font-size:13px !important;font-weight:500 !important;line-height:1.5 !important;}
#checkoutSidebar .consents strong{color:var(--clc-head) !important;}
#checkoutSidebar .consents a{color:var(--clc-blue-d) !important;font-weight:700;text-decoration:none !important;}
#submit-order{flex-direction:column;gap:0;padding:10px 20px !important;}
#submit-order .order-button-suffix{font-size:12px !important;font-weight:600 !important;opacity:.85;text-transform:none !important;}
/* kontakt a cena v pravém sloupci – nic nepřetéká z karty */
.cart-row .contact-box ul{width:auto !important;margin-left:-96px !important;margin-right:0 !important;}
.cart-row .contact-box li{white-space:nowrap;}
.cart-row .contact-box li,.cart-row .contact-box li a,.cart-row .contact-box li span{font-size:13.5px !important;}
.order-summary-inner .order-summary-item.price{
width:auto !important;
margin:0 !important;
padding:14px 0 0 !important;
background:none !important;
}
/* =====================================================================
OPRAVY PO NASAZENÍ
===================================================================== */
/* žádné šedé pozadí ani čáry kolem tlačítek Pokračovat / Objednat */
.next-step,
#checkoutSidebar .next-step,
.summary-wrapper .next-step{border:0 !important;background:none !important;box-shadow:none !important;}
/* 1. krok – podpora jako karta se světle modrým pozadím */
.sidebar-in-cart .checkout-box-wrapper,
#checkoutSidebar .checkout-box{
margin:0 0 16px !important;
padding:20px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:var(--clc-soft) !important;
}
.sidebar-in-cart .checkout-box-wrapper .box,
#checkoutSidebar .checkout-box .box{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
.cart-row .contact-box ul{border-top-color:#dceaf6 !important;background:none !important;}
.cart-row .contact-box,.cart-row .contact-box li{background:none !important;}
/* 1. krok – souhrn ceny jako samostatná karta, tlačítko Pokračovat pod ní zvlášť */
.summary-wrapper .box{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;}
.summary-wrapper .price-wrapper{
padding:20px 22px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:#fff !important;
}
.summary-wrapper .next-step{margin:14px 0 0 !important;}
/* souhlasy v pravém sloupci – bez rámečků, políčko zarovnané s prvním řádkem textu */
#checkoutSidebar .consents{
margin:0 0 4px !important;
padding:8px 2px !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
}
#checkoutSidebar .consents + .consents{border-top:1px solid var(--clc-line) !important;}
#checkoutSidebar .consents p{margin:0 !important;}
#checkoutSidebar .consents label{min-height:22px;padding-left:34px !important;}
#checkoutSidebar .consents label::before,
#checkoutSidebar .consents label::after{top:0 !important;transform:none !important;margin-top:0 !important;}
/* souhrn ceny – „Celkem“ nahoře, pod ním velká cena, dole cena bez DPH v jednom řádku */
.cart-row .price-wrapper{margin:0 !important;gap:2px 10px !important;}
.cart-row .price-wrapper .price-label.price-primary,
.cart-row .price-wrapper .price.price-primary{grid-column:1 / -1;}
.cart-row .price-wrapper .price.price-primary{margin:0 0 8px !important;line-height:1.15 !important;text-align:left !important;}
.cart-row .price-wrapper .price-label,
.cart-row .price-wrapper .price.price-secondary{white-space:nowrap;}
.cart-row .price-wrapper .price.price-secondary{text-align:right;}
/* informační lišty – ikonka vlevo uprostřed, text vedle ní */
#checkoutContent p.ucet,
.site-msg-custom{position:relative;padding-left:52px !important;}
#checkoutContent p.ucet::before,
.site-msg-custom::before{left:18px !important;top:50% !important;transform:translateY(-50%) !important;margin:0 !important;}
/* mobil – okraje stránky, ať karty nesahají až k hraně displeje */
@media (max-width:767px){
.cart-inner{padding-left:12px !important;padding-right:12px !important;}
}
/* odkaz Zpět bez podtržení, cena bez odsazení */
a.btn.next-step-back,
a.btn.next-step-back span{text-decoration:none !important;}
.cart-row .price-wrapper .price{padding:0 !important;}
/* mobil – rozbalovací „Rekapitulace objednávky“ bez šedého pruhu */
@media (max-width:767px){
#summary-box > h2,
#summary-box > .h4{
display:flex !important;align-items:center;justify-content:space-between;
margin:0 0 12px !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--clc-head) !important;
font-size:16px !important;
text-decoration:none !important;
}
#summary-box > h2::after,#summary-box > .h4::after{color:var(--clc-blue-d) !important;}
}
/* slevový kupón – pole a tlačítko se vždy vejdou do boxu */
.discount-coupon,
.discount-coupon form{width:100% !important;max-width:100% !important;}
.discount-coupon .input-group{flex-wrap:nowrap !important;}
.discount-coupon .form-control{flex:1 1 0 !important;min-width:0 !important;}
/* doporučené doplňky – obrázek, vedle zaškrtávátko s názvem a cenou, pod tím popis */
.fvDoplnek-upsell .fvDoplnek-produkt form{display:flex !important;align-items:flex-start !important;gap:14px;}
.fvDoplnek-upsell .fvDoplnek-product-image{flex:0 0 60px;}
.fvDoplnek-upsell .fvcontent{flex:1 1 auto;min-width:0;}
.fvDoplnek-upsell .fvcontent .header{display:flex !important;align-items:flex-start;gap:10px;}
.fvDoplnek-upsell .fvcontent .header > span:first-child{flex:0 0 auto;padding-top:1px;}
.fvDoplnek-upsell .fvDoplnek-text{display:block !important;line-height:1.45 !important;}
.fvDoplnek-upsell .fvDoplnek-text .name{display:inline;margin-right:6px;}
.fvDoplnek-upsell .common_price{margin:0 6px 0 0 !important;}
.fvDoplnek-upsell .fvDoplnek-description{margin:6px 0 0 30px !important;padding:0 !important;}
@media (max-width:767px){
.fvDoplnek-upsell .fvDoplnek-produkt form{gap:10px;}
.fvDoplnek-upsell .fvDoplnek-product-image{flex-basis:52px;width:52px !important;height:52px !important;}
.fvDoplnek-upsell .fvDoplnek-description{margin-left:0 !important;}
}
/* telefon – vlajka i číslo stejně vysoké, bez dvojité čáry */
#checkoutContent .phone-combined-input .country-flags,
#checkoutContent .phone-combined-input input{height:50px !important;min-height:50px !important;}
#checkoutContent .phone-combined-input .country-flags{display:flex !important;align-items:center;}
#checkoutContent .phone-combined-input input{border-left:0 !important;}
/* =====================================================================
DOLADĚNÍ 2
===================================================================== */
/* víc místa mezi hlavičkou webu a kroky */
.cart-header{margin-top:30px !important;}
/* zákaznická podpora – všude stejně: bílá karta s jemným okrajem */
.sidebar-in-cart .checkout-box-wrapper,
#checkoutSidebar .checkout-box{background:#fff !important;}
#checkoutSidebar .contact-box h2,
#checkoutSidebar .contact-box .h4,
.sidebar-in-cart .contact-box h2,
.sidebar-in-cart .contact-box .h4{color:var(--clc-head) !important;}
/* vybraná doprava / platba – výraznější modrý přechod */
#checkoutContent .shipping-billing-table .radio-wrapper.active,
.shipping-billing-table .radio-wrapper.active{
border-color:var(--clc-blue) !important;
background:linear-gradient(135deg,#dcefff 0%,#eef7ff 55%,#f7fbff 100%) !important;
box-shadow:0 0 0 3px rgba(35,156,235,.12) !important;
}
/* vybraná volba – šablona přes ni dává zelenou vrstvu, tu schovat */
.shipping-billing-table .radio-wrapper::after,
.shipping-billing-table .radio-wrapper::before{display:none !important;}
/* karty ve 3. kroku – stejná mezera nahoře i dole (poslední řádek bez spodního okraje) */
#checkoutContent .co-box .form-group:last-child,
#checkoutContent .co-box fieldset:last-child,
#checkoutContent .co-box fieldset > .form-group:last-child{margin-bottom:0 !important;}
/* informační lišta – ikonka napevno vlevo, text zarovnaný vlevo */
#checkoutContent p.ucet,
.site-msg-custom,
.site-msg-custom p{text-align:left !important;}
#checkoutContent p.ucet::before,
.site-msg-custom::before{position:absolute !important;display:block !important;float:none !important;}
/* =====================================================================
IKONKY KONTROLY POLÍ (Foxentry) – zelená fajfka ve světle zeleném kolečku
Pozici a velikost si Foxentry počítá samo, měníme jen vzhled (pozadí).
===================================================================== */
.foxentry-input-icon::before,
.foxentry-input-icon::after{display:none !important;}
div.foxentry-input-icon{
background-color:transparent !important;
background-position:center center,center center !important;
background-repeat:no-repeat,no-repeat !important;
border-radius:0 !important;
box-shadow:none !important;
}
div.foxentry-input-icon.foxentry-input-icon-valid{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d3a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"),radial-gradient(circle at center,#e7f6ec 0 13px,transparent 13.5px) !important;
background-size:12px 12px,28px 28px !important;
}
div.foxentry-input-icon.foxentry-input-icon-invalid{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"),radial-gradient(circle at center,#fdecec 0 13px,transparent 13.5px) !important;
background-size:11px 11px,28px 28px !important;
}
div.foxentry-input-icon.foxentry-input-icon-warning{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c78200' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.5'/%3E%3C/svg%3E"),radial-gradient(circle at center,#fff6e0 0 13px,transparent 13.5px) !important;
background-size:12px 12px,28px 28px !important;
}
/* načítání (tmavé točící se kolečko vypadá jako černý puntík) – schovat */
div.foxentry-input-icon.foxentry-input-icon-loading{display:none !important;}
/* místo pro ikonku, ať nepřekrývá text */
#checkoutContent .foxentry-input{padding-right:46px !important;}
/* Novější Foxentry (SVG značky) – barvy bere z proměnných, které na cleno.cz chybí,
takže by se kolečko vybarvilo černě. Doplníme je: zelená fajfka ve světle zeleném kolečku. */
:root{
--fox-mark-success-bg-color:#e7f6ec;
--fox-mark-success-symbol-color:#1f9d3a;
--fox-mark-help-bg-color:#eef6fd;
--fox-mark-help-symbol-color:#0b6fb0;
--fox-mark-alert-bg-color:#fff6e0;
--fox-mark-alert-symbol-color:#c78200;
--fox-mark-error-bg-color:#fdecec;
--fox-mark-error-symbol-color:#e5484d;
--fox-input-help-border-color:#239ceb;
--fox-input-error-border-color:#e5484d;
--fox-input-alert-border-color:#e1a100;
--fox-input-success-border-color:#1f9d3a;
--fox-input-typing-border-color:#9fb3c4;
--fox-message-alert-icon-color:#c78200;
--fox-message-error-icon-color:#e5484d;
--fox-loading-bg:#eef3f8;
--fox-loading-color:#6b7682;
--fox-delete-bg:#eef3f8;
--fox-delete-hover-bg:#e3ecf5;
--fox-delete-color:#6b7682;
--fox-delete-hover-color:#163d5c;
--fox-mark-z-index:10;
--fox-loader-z-index:12;
--fox-delete-z-index:11;
/* bublina se zprávou (např. „E-mailová adresa neexistuje“) */
--fox-message-z-index:30;
--fox-message-alert-bg:#ffffff;
--fox-message-alert-icon-color:#c78200;
--fox-message-alert-icon-bg:#fff6e0;
--fox-message-alert-text-color:#163d5c;
--fox-message-error-bg:#ffffff;
--fox-message-error-icon-color:#e5484d;
--fox-message-error-icon-bg:#fdecec;
--fox-message-error-text-color:#163d5c;
--fox-message-info-bg:#ffffff;
--fox-message-info-text-color:#163d5c;
--fox-message-info-link-color:#0b6fb0;
--fox-message-close-icon-color:#9aa6b2;
--fox-message-close-icon-color-hover:#163d5c;
}
/* bublina Foxentry – bílá zaoblená karta nad ostatními poli */
.foxentry-message{z-index:30 !important;}
.foxentry-message .foxentry-message__content{
align-items:center;
position:relative !important;
padding:10px 40px 10px 12px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:0 14px 30px -14px rgba(14,47,75,.35) !important;
}
.foxentry-message.is-error .foxentry-message__content{border-color:#f5c6c8 !important;}
.foxentry-message.is-alert .foxentry-message__content{border-color:#f1dca6 !important;}
.foxentry-message:before{background:#fff !important;border-left:1px solid #e0eef9;border-top:1px solid #e0eef9;z-index:1;}
.foxentry-message.is-error:before{border-color:#f5c6c8;}
.foxentry-message.is-alert:before{border-color:#f1dca6;}
.foxentry-message p,
.foxentry-message .foxentry-message__txt{
font-family:inherit !important;
color:var(--clc-head) !important;
font-size:13.5px !important;font-weight:700 !important;
line-height:1.35 !important;
}
.foxentry-message .foxentry-message__close{
position:absolute !important;
top:50% !important;right:10px !important;bottom:auto !important;left:auto !important;
width:22px !important;height:22px !important;
margin:-11px 0 0 !important;
transform:none !important;
display:flex !important;align-items:center;justify-content:center;
border-radius:50%;
background:#f3f7fb;
}
.foxentry-message .foxentry-message__close svg{width:10px !important;height:10px !important;}
.foxentry-message .foxentry-message__close svg path{fill:#9aa6b2;}
.foxentry-message .foxentry-message__close:hover svg path{fill:var(--clc-head);}
/* pojistka i bez proměnných */
.foxentry-mark__success .foxentry-mark__bg{fill:var(--fox-mark-success-bg-color,#e7f6ec);}
.foxentry-mark__success .foxentry-mark__scale{fill:var(--fox-mark-success-symbol-color,#1f9d3a);}
.foxentry-mark__help .foxentry-mark__bg{fill:var(--fox-mark-help-bg-color,#eef6fd);}
.foxentry-mark__help .foxentry-mark__scale{fill:var(--fox-mark-help-symbol-color,#0b6fb0);}
.foxentry-mark__alert .foxentry-mark__bg{fill:var(--fox-mark-alert-bg-color,#fff6e0);}
.foxentry-mark__alert .foxentry-mark__scale{fill:var(--fox-mark-alert-symbol-color,#c78200);}
.foxentry-mark__error .foxentry-mark__bg{fill:var(--fox-mark-error-bg-color,#fdecec);}
.foxentry-mark__error .foxentry-mark__scale{fill:var(--fox-mark-error-symbol-color,#e5484d);}
/* chybová / upozorňující hláška pod polem */
#checkoutContent .validator-msg.msg-error,
#checkoutContent .js-validator-msg.msg-error,
#checkoutContent .validator-msg.msg-warning,
#checkoutContent .validator-msg.msg-info{
height:auto !important;min-height:0 !important;
margin:8px 0 0 !important;
padding:9px 14px !important;
border:1px solid #f5c6c8 !important;
border-radius:12px !important;
background:#fdecec !important;
color:#b42328 !important;
font-size:13px !important;font-weight:600 !important;
line-height:1.45 !important;
}
#checkoutContent .validator-msg.msg-warning{border-color:#f1dca6 !important;background:#fff6e0 !important;color:#8a5a00 !important;}
#checkoutContent .validator-msg.msg-info{border-color:#cfe2f2 !important;background:#eef6fd !important;color:var(--clc-blue-d) !important;}
/* hláška u telefonu – zarovnat pod pole, ne pod popisek */
@media (min-width:768px){
/* všechny hlášky v řádcích „popisek | pole“ zarovnat pod pole */
#checkoutContent .form-group--inline .js-validator-msg,
#checkoutContent .form-group--inline .validator-msg{margin-left:173px !important;max-width:336px;}
}
#checkoutContent .js-error-field{border-color:var(--clc-red) !important;box-shadow:0 0 0 3px rgba(229,72,77,.12) !important;}
#checkoutContent .js-validator-msg.msg-warning{border-color:#f1dca6 !important;background:#fff6e0 !important;color:#8a5a00 !important;}
#checkoutContent .validator-msg + input,
#checkoutContent .js-validator-msg + input,
#checkoutContent .validator-msg + .phone-combined-input{margin-bottom:0 !important;}
/* automatické vyplnění prohlížečem – bez žlutého pozadí */
#checkoutContent input:-webkit-autofill,
#checkoutContent input:-webkit-autofill:hover,
#checkoutContent input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px #fff inset !important;
-webkit-text-fill-color:var(--clc-head) !important;
caret-color:var(--clc-head);
transition:background-color 9999s ease-out 0s;
}
/* =====================================================================
DOKONČENÍ OBJEDNÁVKY – /objednavka/dekujeme/
===================================================================== */
.in-dekujeme h1.sr-only{position:absolute !important;height:1px !important;padding:0 !important;margin:0 !important;overflow:hidden;}
.in-dekujeme #content .content-inner{
max-width:760px !important;
margin:36px auto 80px !important;
padding:44px 40px 40px !important;
border:1px solid var(--clc-border) !important;
border-radius:28px !important;
background:#fff !important;
}
/* hlavička – zelená fajfka, nadpis, číslo objednávky */
.in-dekujeme .order-summary-heading{
margin:0 0 10px !important;
padding:86px 0 0 !important;
color:var(--clc-head) !important;
font-size:32px !important;font-weight:800 !important;
letter-spacing:-.015em;
text-align:center !important;
}
.in-dekujeme .order-summary-heading::before{
width:68px !important;height:68px !important;
line-height:68px !important;
border-radius:50% !important;
background:#e7f6ec !important;
color:var(--clc-green) !important;
font-size:24px !important;
box-shadow:0 0 0 8px #f3fbf5 !important;
}
.in-dekujeme .recapitulation-wrapper{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;border:0 !important;}
.in-dekujeme .reca-number{
display:flex !important;justify-content:center;
margin:0 0 30px !important;
padding:0 0 30px !important;
border-bottom:1px solid var(--clc-line) !important;
}
.in-dekujeme .reca-number::before{display:none !important;}
.in-dekujeme .reca-number strong{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
border:1px solid var(--clc-border);
border-radius:20px;
background:var(--clc-soft);
color:var(--clc-head) !important;
font-size:15px !important;font-weight:800 !important;
letter-spacing:.02em;
}
.in-dekujeme .reca-number strong::before{content:"Číslo objednávky";color:var(--clc-text);font-size:13px;font-weight:600;letter-spacing:0;}
/* karty Platba a doručení / Obsah objednávky */
.in-dekujeme .recapitulation-wrapper .co-box{
width:100% !important;max-width:none !important;
margin:0 0 18px !important;
padding:24px 26px !important;
border:1px solid var(--clc-border) !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
.in-dekujeme .recapitulation-wrapper .co-box h4{
margin:0 0 14px !important;padding:0 !important;
color:var(--clc-head) !important;
font-size:19px !important;font-weight:800 !important;
}
.in-dekujeme .recapitulation-wrapper .co-box h4::before{display:none !important;content:none !important;}
.in-dekujeme .recapitulation-table{margin:0 !important;border:0 !important;background:none !important;}
.in-dekujeme .recapitulation-table th,
.in-dekujeme .recapitulation-table td{
padding:12px 0 !important;
border:0 !important;border-bottom:1px solid var(--clc-line) !important;
background:none !important;
vertical-align:middle !important;
}
.in-dekujeme .recapitulation-table tr:last-child th,
.in-dekujeme .recapitulation-table tr:last-child td{border-bottom:0 !important;padding-bottom:0 !important;}
.in-dekujeme .recapitulation-table th{color:var(--clc-text) !important;font-size:14px !important;font-weight:600 !important;text-align:left;}
.in-dekujeme .recapitulation-table td{text-align:right;}
.in-dekujeme .recapitulation-table td strong{color:var(--clc-head) !important;font-size:14.5px !important;font-weight:800 !important;}
.in-dekujeme .recapitulation-table tr:last-child td strong{font-size:20px !important;letter-spacing:-.01em;}
/* QR platba – samostatný světle modrý blok s kódem v bílé kartě */
.in-dekujeme .recapitulation-table:has(.qrcode),
.in-dekujeme .recapitulation-table:has(.qrcode) tbody{display:block !important;width:100% !important;}
.in-dekujeme .recapitulation-table:has(.qrcode){margin-top:12px !important;border-top:1px solid var(--clc-line) !important;}
.in-dekujeme .recapitulation-table:has(.qrcode) tr{
display:flex !important;align-items:center;justify-content:space-between;gap:12px;
border-bottom:1px solid var(--clc-line) !important;
}
.in-dekujeme .recapitulation-table:has(.qrcode) th,
.in-dekujeme .recapitulation-table:has(.qrcode) td{display:block !important;border:0 !important;}
.in-dekujeme .recapitulation-table tr:has(.qrcode){display:block !important;border-bottom:0 !important;}
.in-dekujeme .recapitulation-table tr:has(.qrcode) th{display:none !important;}
.in-dekujeme .recapitulation-table tr:has(.qrcode) td,
.in-dekujeme .recapitulation-table td:has(> .qrcode){
display:block !important;
width:100% !important;
margin:14px 0 0 !important;
padding:20px 18px 18px !important;
border:1px solid var(--clc-border) !important;
border-radius:18px !important;
background:var(--clc-soft) !important;
text-align:center !important;
}
.in-dekujeme .recapitulation-table td:has(> .qrcode)::before{
content:"Zaplaťte rychle QR platbou";
display:block;
margin:0 0 12px;
color:var(--clc-head);
font-size:16px;font-weight:800;
}
.in-dekujeme .recapitulation-table td:has(> .qrcode)::after{
content:"Naskenujte kód v aplikaci své banky – číslo účtu, částka i variabilní symbol se vyplní samy.";
display:block;
max-width:340px;
margin:12px auto 0;
color:var(--clc-text);
font-size:13px;font-weight:500;line-height:1.5;
}
.in-dekujeme img.qrcode{
display:block !important;
width:176px !important;height:176px !important;
margin:0 auto !important;
padding:12px !important;
border:1px solid var(--clc-border) !important;
border-radius:16px !important;
background:#fff !important;
image-rendering:pixelated;
}
/* variabilní symbol zvýraznit */
.in-dekujeme .recapitulation-table tr:has(+ tr .qrcode) td strong{
padding:3px 10px;
border-radius:8px;
background:#eef6fd;
color:var(--clc-blue-d) !important;
}
/* položky objednávky – malá fotka, název, počet a cena */
.in-dekujeme .co-order .cart-table{display:table !important;width:100% !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;}
.in-dekujeme .co-order .cart-table tr{display:table-row !important;}
.in-dekujeme .co-order .cart-table td{
display:table-cell !important;
padding:12px 10px !important;
border:0 !important;border-top:1px solid var(--clc-line) !important;
vertical-align:middle !important;
}
.in-dekujeme .co-order .cart-table tr:first-child td{border-top:0 !important;padding-top:4px !important;}
.in-dekujeme .co-order .cart-table td:first-child{padding-left:0 !important;}
.in-dekujeme .co-order .cart-table td:last-child{padding-right:0 !important;}
.in-dekujeme .co-order .cart-table td.cart-p-image{width:78px !important;min-width:78px;padding-right:14px !important;}
.in-dekujeme .co-order .cart-table td.p-name{width:100% !important;}
.in-dekujeme .co-order .cart-table td.p-total,
.in-dekujeme .co-order .cart-table td:last-child:not(.p-quantity){white-space:nowrap;text-align:right;color:var(--clc-head) !important;font-size:15px !important;font-weight:800 !important;}
.in-dekujeme .co-order .cart-table td.p-total *{color:inherit !important;font-size:inherit !important;}
.in-dekujeme .co-order .cart-p-image img{
display:block;
width:64px !important;height:64px !important;
padding:5px;
border:1px solid #e6eef6;
border-radius:12px;
background:#fff;
object-fit:contain;
}
.in-dekujeme .co-order .p-name,
.in-dekujeme .co-order .p-name *{color:var(--clc-head) !important;font-size:14.5px !important;font-weight:700 !important;line-height:1.4 !important;}
.in-dekujeme .co-order .p-quantity{white-space:nowrap;text-align:right;color:var(--clc-text) !important;font-size:13.5px !important;}
.in-dekujeme .co-order .p-quantity span{margin:0 4px;color:#c3ced8 !important;}
.in-dekujeme .co-order .p-quantity strong{color:var(--clc-head) !important;font-size:15px !important;font-weight:800 !important;}
/* poděkování a tlačítko */
.in-dekujeme .order-summary-item.total{margin:22px 0 4px !important;padding:0 !important;border:0 !important;color:var(--clc-text) !important;font-size:14.5px !important;text-align:center !important;}
.in-dekujeme .order-summary-item.summary-thx{margin:0 0 22px !important;padding:0 !important;border:0 !important;color:var(--clc-head) !important;font-size:20px !important;font-weight:800 !important;text-align:center !important;}
.in-dekujeme .order-complete-links{text-align:center !important;}
.in-dekujeme .order-complete-links p{margin:0 !important;}
.in-dekujeme .order-complete-links .btn{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
height:52px !important;
padding:0 28px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:15.5px !important;font-weight:800 !important;
text-transform:none !important;
text-decoration:none !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.9) !important;
}
/* =====================================================================
TABLET + MOBIL
===================================================================== */
@media (max-width:1199px){
/* v užším košíku schovat cenu za kus – víc místa pro název */
.cart-table .p-price{display:none !important;}
}
@media (max-width:991px){
.cart-header .step > a,
.cart-header .step > strong{height:56px !important;padding:0 12px !important;font-size:13.5px !important;}
.cart-header .step span::before{flex-basis:30px;width:30px !important;height:30px !important;line-height:30px !important;margin-right:9px !important;}
}
@media (max-width:767px){
/* kroky – jen čísla, u aktivního kroku i název */
.cart-header{gap:8px;margin:22px 0 20px !important;}
/* iPhone přibližuje stránku u polí s písmem menším než 16 px – všechna pole 16 px */
#checkoutContent input[type],
#checkoutContent input.form-control,
#checkoutContent select.form-control,
#checkoutContent textarea.form-control,
#checkoutContent select,
#checkoutContent textarea,
.discount-coupon input.form-control,
.cart-table .quantity input{font-size:16px !important;}
.cart-header .step{flex:0 0 auto;}
.cart-header .step.active{flex:1 1 auto;}
.cart-header .step > a,
.cart-header .step > strong{height:50px !important;padding:0 8px !important;border-radius:14px !important;font-size:14px !important;}
.cart-header .step:not(.active) span{font-size:0 !important;}
.cart-header .step:not(.active) span::before{margin-right:0 !important;font-size:13px !important;}
.cart-header .step.completed:not(.active) span::before{font-size:11px !important;}
#checkoutContent .co-box,
.ordering-process .co-box{padding:20px 16px !important;border-radius:18px !important;}
#checkoutContent .co-box h2{font-size:18px !important;}
/* košík – každá položka jako kompaktní karta: obrázek | název + dostupnost, dole počet a cena */
.cart-table{display:block !important;border-radius:18px !important;}
.cart-table tbody{display:block !important;}
.cart-table tr.removeable{
position:relative;
display:grid !important;
grid-template-columns:64px minmax(0,1fr);
align-items:center;
gap:6px 12px;
padding:14px !important;
}
.cart-table tr + tr{border-top:1px solid var(--clc-line) !important;}
.cart-table tr.removeable td,
.cart-table tr.removeable td:first-child,
.cart-table tr.removeable td:last-child,
.cart-table tr.removeable td.p-total{
display:block !important;
width:auto !important;
padding:0 !important;
border:0 !important;
text-align:left;
}
.cart-table .p-label{display:none !important;}
.cart-table tr.removeable td.cart-p-image{grid-column:1;grid-row:1 / 3;width:auto !important;align-self:start;}
.cart-table .cart-p-image a{width:64px !important;height:64px !important;border-radius:12px;}
.cart-table tr.removeable td.p-name{grid-column:2;grid-row:1;width:auto !important;padding-right:40px !important;}
.cart-table .p-name .main-link{font-size:14px !important;}
.cart-table .p-name .show-related{display:none !important;}
.cart-table .p-availability{grid-column:2;grid-row:2;}
.cart-table .p-quantity{grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:6px;}
.cart-table tr.removeable td.p-total{grid-column:1 / -1;grid-row:3;justify-self:end;margin-top:6px;position:static;}
.cart-table .p-total form{top:14px !important;right:14px !important;transform:none;}
.cart-table .quantity{width:108px !important;height:42px !important;}
.cart-table .p-total .price-final{font-size:17px !important;}
.fvDoplnek.fvDoplnek-upsell{padding:16px !important;border-radius:18px !important;}
.fvDoplnek-upsell h4{font-size:17px !important;}
.fvDoplnek-upsell .fvDoplnek-produkt{padding:12px !important;border-radius:14px !important;}
.cart-summary .extras-wrapper{padding:16px !important;border-radius:18px !important;}
.sidebar-in-cart .box,
#checkoutSidebar .checkout-box,
#checkoutSidebar .order-summary-inner,
.summary-wrapper .price-wrapper{padding:18px !important;border-radius:18px !important;}
/* doprava a platba */
.shipping-billing-table .radio-wrapper{padding:0 14px !important;border-radius:14px !important;}
.shipping-billing-table label{gap:10px;min-height:64px;padding:12px 0 12px 32px !important;flex-wrap:nowrap !important;}
.shipping-billing-table .payment-logo{flex:0 0 52px !important;width:52px !important;height:34px !important;padding:3px 4px !important;}
.shipping-billing-table .payment-info{flex:1 1 auto !important;width:auto !important;}
.shipping-billing-table .shipping-billing-name{font-size:14px !important;}
.shipping-billing-table .payment-shipping-price{flex:0 0 auto !important;width:auto !important;font-size:13.5px !important;}
.shipping-billing-table .payment-shipping-price.for-free{padding:3px 8px !important;font-size:11px !important;}
/* dokončení objednávky */
.in-dekujeme #content .content-inner{margin:22px 12px 44px !important;padding:6px 0 0 !important;border:0 !important;border-radius:0 !important;background:none !important;}
.in-dekujeme .recapitulation-table th{white-space:nowrap;padding-right:12px !important;}
.in-dekujeme .recapitulation-table td{line-height:1.4 !important;}
.in-dekujeme .order-summary-heading{padding-top:78px !important;font-size:25px !important;}
.in-dekujeme .order-summary-heading::before{width:58px !important;height:58px !important;line-height:58px !important;font-size:20px !important;}
.in-dekujeme .reca-number{margin-bottom:20px !important;padding-bottom:20px !important;}
.in-dekujeme .recapitulation-wrapper .co-box{padding:18px 16px !important;border-radius:18px !important;}
.in-dekujeme .recapitulation-table th,.in-dekujeme .recapitulation-table td{font-size:13.5px !important;}
.in-dekujeme .co-order .cart-table td.cart-p-image{width:64px !important;min-width:64px;padding-right:10px !important;}
.in-dekujeme .co-order .cart-table td.p-quantity{display:none !important;}
.in-dekujeme .co-order .cart-p-image img{width:52px !important;height:52px !important;}
.in-dekujeme .co-order .p-name,.in-dekujeme .co-order .p-name *{font-size:13.5px !important;}
.in-dekujeme .order-complete-links .btn{width:100% !important;}
.in-dekujeme img.qrcode{width:164px !important;height:164px !important;}
.in-dekujeme .recapitulation-table td strong.nowrap{white-space:normal !important;word-break:break-all;}
}
/* =====================================================================
PRÁZDNÝ KOŠÍK (/kosik/ bez produktů)
===================================================================== */
.cart-inner.cart-empty{padding:36px 0 64px !important;}
/* nadpis s ikonou a podtitulkem */
.cart-inner.cart-empty .cart-heading{
position:relative !important;
margin:0 auto 34px !important;
padding:112px 16px 0 !important;
border:0 !important;
color:#163d5c !important;
font-size:32px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.01em;
text-align:center !important;
}
.cart-inner.cart-empty .cart-heading::before{
content:"" !important;
position:absolute !important;
top:0 !important;left:50% !important;right:auto !important;bottom:auto !important;
width:88px !important;height:88px !important;
margin:0 0 0 -44px !important;
border-radius:26px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h15l-1.5 8.5a2 2 0 0 1-2 1.5H9a2 2 0 0 1-2-1.6L5 3H2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1'/%3E%3Ccircle cx='17.5' cy='20.5' r='1'/%3E%3C/svg%3E") center / 42px no-repeat !important;
font-size:0 !important;
color:transparent !important;
transform:none !important;
}
.cart-inner.cart-empty .cart-heading::after{
content:"Zatím jste si nic nevybrali. Podívejte se do naší nabídky – filtry máme skladem a odesíláme rychle." !important;
position:static !important;
display:block !important;
width:auto !important;height:auto !important;
max-width:560px;
margin:12px auto 0 !important;
border:0 !important;
background:none !important;
color:#6b7682 !important;
font-family:inherit !important;
font-size:16px !important;font-weight:500 !important;
line-height:1.55 !important;
letter-spacing:0;
transform:none !important;
}
/* tlačítko Začít nakupovat pod textem (doplňuje cleno-kosik.js) */
.cart-inner.cart-empty .cl-shop-cta{
display:inline-flex;align-self:center;align-items:center;justify-content:center;gap:10px;
height:52px;margin:24px auto 0;padding:0 28px;
border-radius:16px;
background:linear-gradient(135deg,#34c759,#1f9d3a);
color:#fff !important;
font-size:16px;font-weight:800;text-decoration:none !important;white-space:nowrap;
transition:filter .2s,transform .15s;
}
.cart-inner.cart-empty .cl-shop-cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.cart-inner.cart-empty .cl-shop-cta:hover{filter:brightness(1.05);}
.cart-inner.cart-empty .cl-shop-cta:hover svg{transform:translateX(3px);}
.cart-inner.cart-empty .cl-shop-cta:active{transform:scale(.98);}
@media (max-width:767px){
.cart-inner.cart-empty .cl-shop-cta{align-self:stretch;width:100%;height:50px;margin:18px 0 0;}
}
/* kotva Oblíbené kategorie na hlavní stránce – nadpis nesmí zajet pod přilepenou hlavičku */
#oblibene-kategorie{scroll-margin-top:150px;}
/* dva sloupce: nabídka + podpora */
.cart-inner.cart-empty .cart-row{
display:flex !important;align-items:stretch;gap:24px;
margin:0 !important;
padding:0 !important;
}
.cart-inner.cart-empty .cart-row::before,
.cart-inner.cart-empty .cart-row::after{display:none !important;}
.cart-inner.cart-empty .cart-row > .col-md-8{flex:1 1 auto;width:auto !important;min-width:0;padding:0 !important;float:none !important;}
.cart-inner.cart-empty .cart-row > .col-md-4{flex:0 0 310px;width:310px !important;padding:0 !important;float:none !important;opacity:1 !important;visibility:visible !important;}
.cart-inner.cart-empty .cart-content{
margin:0 !important;
padding:26px !important;
border:1px solid #e0eef9 !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:none !important;
}
.cart-inner.cart-empty .cart-row > .col-md-8 .cart-content{display:flex !important;flex-direction:column;justify-content:center;height:100%;}
.cart-inner.cart-empty .cart-row > .col-md-8 .cart-heading{margin:0 auto !important;}
/* nabídka kategorií – šablona ji přesouvá pod řádek, vlastní karta přes celou šířku */
.cart-inner.cart-empty .empty-cart-boxes{
margin:24px 0 0 !important;
padding:26px !important;
border:1px solid #e0eef9 !important;
border-radius:24px !important;
background:#fff !important;
}
.cart-inner.cart-empty .cart-content .empty-cart-boxes{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;}
.cart-inner.cart-empty .empty-cart-boxes::before,
.cart-inner.cart-empty .empty-cart-boxes::after{display:none !important;}
.cart-inner.cart-empty .empty-cart-boxes > .col-md-6{width:100% !important;padding:0 !important;float:none !important;}
.cart-inner.cart-empty .empty-cart-boxes h3{
margin:0 0 18px !important;
padding:0 !important;
border:0 !important;
color:#163d5c !important;
font-size:20px !important;font-weight:800 !important;
line-height:1.25 !important;
text-align:left !important;
}
.cart-inner.cart-empty .empty-cart-boxes h3::before,
.cart-inner.cart-empty .empty-cart-boxes h3::after{display:none !important;}
/* kategorie jako dlaždice */
.cart-inner.cart-empty .empty-cart-boxes ul{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
margin:0 !important;padding:0 !important;
list-style:none !important;
}
.cart-inner.cart-empty .empty-cart-boxes li{
width:auto !important;
margin:0 !important;padding:0 !important;
list-style:none !important;
}
.cart-inner.cart-empty .empty-cart-boxes li::before{display:none !important;}
.cart-inner.cart-empty .empty-cart-boxes li a{
position:relative !important;
display:flex !important;align-items:center;gap:12px;
width:100% !important;height:100% !important;
min-height:60px;
margin:0 !important;
padding:10px 34px 10px 10px !important;
border:1px solid #e6eef6 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#163d5c !important;
font-size:14px !important;font-weight:700 !important;
line-height:1.3 !important;
text-align:left !important;
text-decoration:none !important;
transition:border-color .2s,background .2s;
}
.cart-inner.cart-empty .empty-cart-boxes li a::before{
content:"" !important;
position:static !important;
flex:0 0 38px;
width:38px !important;height:38px !important;
margin:0 !important;
border-radius:11px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7C9 6.4 6 9.7 6 13.5a6 6 0 0 0 12 0c0-3.8-3-7.1-6-10.8z'/%3E%3C/svg%3E") center / 19px no-repeat !important;
font-size:0 !important;
color:transparent !important;
transform:none !important;
}
.cart-inner.cart-empty .empty-cart-boxes li a::after{
content:"" !important;
position:absolute !important;
top:50% !important;right:12px !important;left:auto !important;
width:14px !important;height:14px !important;
margin:-7px 0 0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
font-size:0 !important;
transition:transform .2s;
}
.cart-inner.cart-empty .empty-cart-boxes li a:hover{border-color:#bcdcf4 !important;background:#f5faff !important;color:#0b6fb0 !important;}
.cart-inner.cart-empty .empty-cart-boxes li a:hover::after{transform:translateX(2px);}
/* podpora vpravo */
.cart-inner.cart-empty .cart-row > .col-md-4 .box{
margin:0 !important;padding:0 !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
.cart-inner.cart-empty .cart-row > .col-md-4 .checkout-box-wrapper{height:100%;padding:20px !important;border-radius:22px !important;}
/* ---------- mobil ---------- */
@media (max-width:1199px){
.cart-inner.cart-empty .cart-row > .col-md-4{flex-basis:300px;width:300px !important;}
.cart-inner.cart-empty .empty-cart-boxes ul{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:991px){
.cart-inner.cart-empty .empty-cart-boxes ul{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
/* pořadí: prázdný košík → nabídka → podpora */
.cart-inner.cart-empty{display:flex !important;flex-direction:column;gap:16px;}
.cart-inner.cart-empty .cart-row{display:contents !important;}
.cart-inner.cart-empty .cart-row > .col-md-8{order:1;}
.cart-inner.cart-empty .empty-cart-boxes{order:2;margin:0 !important;padding:18px !important;border-radius:20px !important;}
.cart-inner.cart-empty .cart-row > .col-md-4{order:3;flex:0 0 auto;width:100% !important;}
.cart-inner.cart-empty .cart-row > .col-md-4 .checkout-box-wrapper{display:block !important;}
.cart-inner.cart-empty{padding:22px 16px 40px !important;}
.cart-inner.cart-empty .cart-heading{padding-top:88px !important;margin-bottom:24px !important;font-size:24px !important;}
.cart-inner.cart-empty .cart-heading::before{width:70px !important;height:70px !important;margin-left:-35px !important;border-radius:20px;background-size:34px !important;}
.cart-inner.cart-empty .cart-heading::after{font-size:14.5px !important;}
.cart-inner.cart-empty .cart-row{gap:16px;}
.cart-inner.cart-empty .cart-content{padding:18px !important;border-radius:20px !important;}
.cart-inner.cart-empty .empty-cart-boxes h3{font-size:18px !important;margin-bottom:14px !important;}
.cart-inner.cart-empty .empty-cart-boxes ul{gap:8px;}
.cart-inner.cart-empty .empty-cart-boxes li a{min-height:52px;padding:10px 26px 10px 12px !important;font-size:13px !important;}
.cart-inner.cart-empty .empty-cart-boxes li a::before{display:none !important;}
.cart-inner.cart-empty .empty-cart-boxes li a::after{right:8px !important;width:12px !important;height:12px !important;margin-top:-6px !important;}
}
/* =====================================================================
MOBIL – stejné mezery mezi bloky + podpora dole v každém kroku
===================================================================== */
@media (max-width:767px){
/* všechny bloky přes celou šířku, mezi nimi vždy 16px */
.cart-row > .col-md-4.sidebar-in-cart,
.cart-row > #checkoutSidebar{padding-left:0 !important;padding-right:0 !important;}
.cart-row .site-msg-custom,
#checkoutContent p.ucet{width:100% !important;max-width:none !important;margin:0 0 16px !important;}
.cart-row .cart-table{margin:0 0 16px !important;}
.cart-row .fvDoplnek.fvDoplnek-upsell{margin:0 0 16px !important;}
.cart-row .cart-summary{margin:0 0 16px !important;padding:0 !important;}
.cart-row .cart-summary .extras-wrapper{margin:0 !important;}
.cart-row .cart-summary .extra.delivery{margin-bottom:0 !important;}
#checkoutContent > .cart-content{margin:0 !important;padding:0 !important;}
#checkoutContent .co-box{margin:0 0 16px !important;}
.sidebar-in-cart .summary-wrapper .box,
.sidebar-in-cart .checkout-box-wrapper .box{padding:0 !important;}
.summary-wrapper .next-step,
#checkoutSidebar .next-step{margin:12px 0 0 !important;}
.cart-row a.next-step-back{margin:6px 0 0 !important;}
/* 1. krok: souhrn → Pokračovat → Zpět → podpora */
.sidebar-in-cart{display:flex !important;flex-direction:column;padding-bottom:32px !important;}
.sidebar-in-cart .summary-wrapper{order:1;}
.sidebar-in-cart .next-step-back{order:2;}
.sidebar-in-cart .checkout-box-wrapper{display:block !important;order:3;margin:16px 0 0 !important;}
/* 2. a 3. krok: rekapitulace → Pokračovat → Zpět → podpora */
#checkoutSidebar{display:flex !important;flex-direction:column;padding-bottom:32px !important;}
#checkoutSidebar > .cart-content,
#checkoutSidebar .order-summary{display:contents !important;}
#checkoutSidebar #summary-box{order:1;margin:0 !important;}
#checkoutSidebar .next-step{order:2;}
#checkoutSidebar .next-step-back{order:3;}
#checkoutSidebar .checkout-box{display:block !important;order:4;margin:16px 0 0 !important;}
/* podpora jako informační okno – avatar, krátký text a dvě tlačítka (zavolat / napsat) */
#checkoutSidebar .checkout-box,
.sidebar-in-cart .checkout-box-wrapper,
.cart-inner.cart-empty .cart-row > .col-md-4 .checkout-box-wrapper{padding:16px !important;border:1px solid #cfe2f2 !important;border-radius:18px !important;background:#eef6fd !important;box-shadow:none !important;}
.cart-row .contact-box{position:relative !important;min-height:52px !important;margin:0 !important;padding:0 0 0 64px !important;}
.cart-row .contact-box,
.cart-row .contact-box *{text-align:left !important;}
.cart-row .contact-box > img{position:absolute !important;top:0 !important;left:0 !important;width:52px !important;height:52px !important;margin:0 !important;border:2px solid #fff !important;border-radius:50% !important;background:#fff !important;object-fit:cover;object-position:center top;}
.cart-row .contact-box h2,
.cart-row .contact-box h4,
.cart-row .contact-box .h4{margin:3px 0 !important;color:#163d5c !important;font-size:16px !important;font-weight:800 !important;line-height:1.25 !important;}
.cart-row .contact-box > strong{display:block !important;margin:0 !important;font-size:0 !important;line-height:0 !important;}
.cart-row .contact-box > strong::after{content:"Rádi vám poradíme s výběrem i objednávkou." !important;display:block !important;color:#4f6577 !important;font-size:13px !important;font-weight:600 !important;line-height:1.4 !important;}
.cart-row .contact-box ul{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0 -64px !important;padding:0 !important;border:0 !important;}
.cart-row .contact-box li{margin:0 !important;padding:0 !important;}
.cart-row .contact-box li span{position:relative !important;display:flex !important;align-items:center;justify-content:center;gap:7px;width:100% !important;height:44px;padding:0 8px !important;border:1px solid #d6e8f6;border-radius:12px;background:#fff;}
.cart-row .contact-box li span::before{position:static !important;margin:0 !important;font-size:17px !important;line-height:1 !important;}
.cart-row .contact-box li a{color:#163d5c !important;font-size:13px !important;font-weight:800 !important;white-space:nowrap;text-decoration:none !important;}
.cart-row .contact-box li a::after{content:"";position:absolute;inset:0;}
}
/* =====================================================================
KŘÍŽEK PRO ODEBRÁNÍ PRODUKTU – čtvereček s ikonou přesně uprostřed
===================================================================== */
.cart-table button.remove-item{
position:relative !important;
display:block !important;
width:34px !important;height:34px !important;
margin:0 !important;padding:0 !important;
border:1px solid #e6eef6 !important;
border-radius:10px !important;
background:#fff !important;
font-size:0 !important;line-height:0 !important;
cursor:pointer;
transition:background .2s,border-color .2s;
}
.cart-table button.remove-item::before{
content:"" !important;
position:absolute !important;
top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
width:12px !important;height:12px !important;
margin:auto !important;
font-size:0 !important;line-height:0 !important;
transform:none !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%238a96a3' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.cart-table button.remove-item::after{display:none !important;}
.cart-table button.remove-item:hover{border-color:#f6c9cb !important;background:#fdecec !important;}
.cart-table button.remove-item:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23e5484d' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.cart-table .p-total form .inline{display:block !important;}
/* =====================================================================
PRÁZDNÝ KOŠÍK – podpora jako kompaktní karta (ne roztažená na výšku)
===================================================================== */
@media (min-width:768px){
.cart-inner.cart-empty .cart-row{align-items:flex-start !important;}
.cart-inner.cart-empty .cart-row > .col-md-4 .checkout-box-wrapper{height:auto !important;padding:22px !important;}
.cart-inner.cart-empty .contact-box{min-height:0 !important;padding-left:98px !important;}
.cart-inner.cart-empty .contact-box > img{width:80px !important;height:auto !important;top:2px !important;}
.cart-inner.cart-empty .contact-box h2{margin:2px 0 6px !important;font-size:19px !important;line-height:1.3 !important;}
.cart-inner.cart-empty .contact-box > strong{margin:0 !important;font-size:15px !important;line-height:1.3 !important;}
.cart-inner.cart-empty .contact-box > strong::after{margin-top:2px;font-size:14px !important;font-weight:500 !important;}
.cart-inner.cart-empty .contact-box ul{margin:18px 0 0 -98px !important;padding:16px 0 0 !important;}
.cart-inner.cart-empty .contact-box li{margin:0 0 10px !important;}
.cart-inner.cart-empty .contact-box li:last-child{margin-bottom:0 !important;}
.cart-inner.cart-empty .contact-box li,
.cart-inner.cart-empty .contact-box li a,
.cart-inner.cart-empty .contact-box li span{font-size:15px !important;}
}
/* kroky nahoře – kroužek s číslem přesně uprostřed (bez spodního odsazení) */
.cart-header .step > * > span::before{margin-bottom:0 !important;}
@media (max-width:767px){
.cart-header .step:not(.active) > *{justify-content:center !important;padding:0 8px !important;}
}
/* =====================================================================
SOUVISEJÍCÍ PRODUKTY (rozbalení pod produktem) + cena za kus na mobilu
===================================================================== */
.cart-table tr.related td{padding:8px 16px !important;border:1px solid #e0eef9 !important;border-radius:16px !important;background:#f5faff !important;}
.cart-table tr.related .cart-related-product{
display:grid !important;
grid-template-columns:56px minmax(0,1fr) auto;
align-items:center;
gap:4px 14px;
width:100% !important;
margin:0 !important;padding:12px 0 !important;
border:0 !important;
float:none !important;
}
.cart-table tr.related .cart-related-product + .cart-related-product{border-top:1px solid #e0eef9 !important;}
.cart-table tr.related .cart-related-info,
.cart-table tr.related .cart-related-button{display:contents !important;}
.cart-table tr.related .cart-related-img{
grid-column:1;grid-row:1 / 3;
display:flex !important;align-items:center;justify-content:center;
width:56px !important;height:56px !important;
padding:5px !important;
border:1px solid #e6eef6;border-radius:12px;
background:#fff;
}
.cart-table tr.related .cart-related-img img{width:100% !important;height:100% !important;object-fit:contain;}
.cart-table tr.related .cart-related-name{
grid-column:2;grid-row:1;align-self:end;
width:auto !important;height:auto !important;max-height:none !important;overflow:visible !important;
padding:0 !important;
color:#163d5c !important;
font-size:13.5px !important;font-weight:700 !important;
line-height:1.35 !important;
text-decoration:none !important;
}
.cart-table tr.related .cart-related-name:hover{color:#0b6fb0 !important;}
.cart-table tr.related .cart-related-availability{
grid-column:2;grid-row:2;align-self:start;
display:flex !important;justify-content:flex-start !important;
width:auto !important;
margin:0 !important;padding:0 !important;
font-size:12.5px !important;font-weight:700 !important;
text-align:left !important;
}
.cart-table tr.related .cart-related-availability span{display:inline !important;margin:0 !important;padding:0 !important;}
.cart-table tr.related .cart-related-availability,
.cart-table tr.related .cart-related-availability *{color:#1f9d3a !important;}
.cart-table tr.related .cart-related-availability::before{display:none !important;}
.cart-table tr.related .price{
grid-column:3;grid-row:1;align-self:end;justify-self:end;
width:auto !important;float:none !important;
padding:0 !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
white-space:nowrap;
}
.cart-table tr.related form{grid-column:3;grid-row:2;align-self:start;justify-self:end;width:auto !important;float:none !important;margin:0 !important;}
.cart-table tr.related .add-to-cart-button{
width:auto !important;min-width:0 !important;height:34px !important;
margin:0 !important;padding:0 14px !important;
border:0 !important;border-radius:10px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:13px !important;font-weight:800 !important;
line-height:34px !important;
white-space:nowrap;
text-transform:none !important;letter-spacing:0 !important;
box-shadow:none !important;
}
.cart-table tr.removeable td.p-price .show-tooltip,
.cart-table tr.removeable td.p-price .acronym{border:0 !important;text-decoration:none !important;}
@media (max-width:767px){
/* odkaz Související produkty i na mobilu */
.cart-table .p-name .show-related{display:inline-flex !important;margin-top:4px !important;font-size:13px !important;}
.cart-table tr.related td{padding:4px 12px !important;}
.cart-table tr.related .cart-related-product{grid-template-columns:48px minmax(0,1fr) auto;gap:4px 10px;padding:10px 0 !important;}
.cart-table tr.related .cart-related-img{width:48px !important;height:48px !important;padding:4px !important;border-radius:10px;}
.cart-table tr.related .cart-related-name{font-size:13px !important;}
.cart-table tr.related .price{font-size:14px !important;}
.cart-table tr.related .add-to-cart-button{height:32px !important;padding:0 12px !important;font-size:12.5px !important;line-height:32px !important;}
}
/* related – šipka nahoře ve stejné barvě jako box */
.cart-table tr.related td::before{background:#f5faff !important;border-top:1px solid #e0eef9 !important;border-left:1px solid #e0eef9 !important;top:-9px !important;box-shadow:none !important;}
@media (max-width:767px){
/* Skladem nad počítadlem, cena za kus nad celkovou cenou */
.cart-table tr.removeable td.cart-p-image{grid-row:1 / 3 !important;}
.cart-table tr.removeable td.p-availability{grid-column:1 / -1 !important;grid-row:3 !important;justify-self:start;align-self:center;margin-top:8px !important;}
.cart-table tr.removeable td.p-quantity{grid-row:4 !important;align-self:center !important;margin:0 !important;}
.cart-table tr.removeable td.p-total{grid-row:4 !important;display:flex !important;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;align-self:center !important;margin:0 !important;padding:0 !important;}
/* šablona na mobilu přesouvá buňku s cenou za kus do buňky Součet */
.cart-table tr.removeable td.p-price,
.cart-table tr.removeable td.p-total td.p-price{order:-1;display:block !important;width:auto !important;margin:0 !important;padding:0 !important;border:0 !important;text-align:right;}
.cart-table tr.removeable .p-price,
.cart-table tr.removeable .p-price *{color:#6b7682 !important;font-size:12.5px !important;font-weight:600 !important;white-space:nowrap !important;}
/* související: název a Skladem vedle fotky, pod tím cena vlevo a Do košíku vpravo */
.cart-table tr.related .cart-related-product{grid-template-columns:48px minmax(0,1fr) auto !important;gap:2px 12px !important;}
.cart-table tr.related .cart-related-img{grid-row:1 / 4 !important;align-self:start;}
.cart-table tr.related .cart-related-name{grid-column:2 / -1 !important;grid-row:1 !important;}
.cart-table tr.related .cart-related-availability{grid-column:2 / -1 !important;grid-row:2 !important;}
.cart-table tr.related .price{grid-column:2 !important;grid-row:3 !important;justify-self:start !important;align-self:center !important;margin-top:6px !important;}
.cart-table tr.related form{grid-column:3 !important;grid-row:3 !important;align-self:center !important;margin-top:6px !important;}
}
/* odkaz Související produkty – šipka v řádku s textem, při rozbalení se jen otočí */
.cart-table .p-name .show-related{display:inline-flex !important;align-items:center !important;gap:6px;padding:0 !important;line-height:1.3 !important;text-decoration:none !important;}
.cart-table .p-name .show-related::after{
content:"" !important;
display:block !important;
flex:0 0 12px;
width:12px !important;height:12px !important;
margin:0 !important;
font-size:0 !important;line-height:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important;
transform-origin:50% 50% !important;
transition:transform .2s;
}
@media (max-width:767px){
.cart-table .p-name .show-related{margin-top:4px !important;font-size:13px !important;}
}
/* =====================================================================
KROK 2 NA MOBILU – doprava a platba: kroužek, logo i cena svisle
uprostřed karty, text širší, otazník hned za názvem
===================================================================== */
@media (max-width:767px){
#checkoutContent .co-box{padding:16px 14px !important;}
.shipping-billing-table .radio-wrapper{padding:0 12px !important;}
.shipping-billing-table .radio-wrapper > label,
.shipping-billing-table label{
display:grid !important;
grid-template-columns:44px minmax(0,1fr) auto;
align-items:center;
column-gap:10px;row-gap:0;
min-height:64px;
padding:12px 0 12px 34px !important;
}
.shipping-billing-table .payment-logo{grid-column:1;grid-row:1;align-self:center !important;width:44px !important;height:30px !important;flex:none !important;margin:0 !important;padding:3px !important;}
.shipping-billing-table .payment-info{grid-column:2;grid-row:1;align-self:center;width:auto !important;min-width:0;}
.shipping-billing-table .payment-shipping-price{grid-column:3;grid-row:1;align-self:center !important;width:auto !important;margin:0 !important;padding:0 !important;white-space:nowrap;}
.shipping-billing-table .shipping-billing-name{display:inline !important;font-size:14px !important;line-height:1.35 !important;}
.shipping-billing-table .payment-info b.shipping-billing-name + span{display:inline !important;margin-left:4px !important;white-space:nowrap;}
.shipping-billing-table .payment-info .sublabel{display:block !important;margin-top:4px !important;font-size:13px !important;line-height:1.35 !important;}
}
/* =====================================================================
VŠECHNY KROKY – karta s celkovou cenou: cena vpravo vedle popisku,
pod tím světle modrý pruh s cenou bez DPH
===================================================================== */
.summary-wrapper .price-wrapper,
#checkoutSidebar #summary-box .price-wrapper{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:12px;
padding:0 !important;
overflow:hidden;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
}
/* podklad spodního řádku (cena bez DPH) */
.summary-wrapper .price-wrapper::before,
#checkoutSidebar #summary-box .price-wrapper::before{
content:"";
grid-column:1 / -1;grid-row:2;
align-self:stretch;
border-top:1px solid #e0eef9;
background:#f5faff;
}
.summary-wrapper .price-wrapper > *,
#checkoutSidebar #summary-box .price-wrapper > *{position:relative;z-index:1;width:auto !important;margin:0 !important;float:none !important;}
.summary-wrapper .price-wrapper .price-label.price-primary,
#checkoutSidebar #summary-box .price-wrapper .price-label.price-primary{
grid-column:1;grid-row:1;
padding:20px 0 20px 20px !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
line-height:1.3 !important;
}
.summary-wrapper .price-wrapper .price.price-primary,
#checkoutSidebar #summary-box .price-wrapper .price.price-primary{
grid-column:2;grid-row:1;
padding:20px 20px 20px 0 !important;
color:#163d5c !important;
font-size:26px !important;font-weight:800 !important;
line-height:1.1 !important;
letter-spacing:-.01em;
text-align:right;
white-space:nowrap;
}
.summary-wrapper .price-wrapper .price-label.price-secondary,
#checkoutSidebar #summary-box .price-wrapper .price-label.price-secondary{
grid-column:1;grid-row:2;
padding:12px 0 12px 20px !important;
color:#6b7682 !important;
font-size:13px !important;font-weight:600 !important;
line-height:1.3 !important;
}
.summary-wrapper .price-wrapper .price.price-secondary,
#checkoutSidebar #summary-box .price-wrapper .price.price-secondary{
grid-column:2;grid-row:2;
padding:12px 20px 12px 0 !important;
color:#6b7682 !important;
font-size:13px !important;font-weight:700 !important;
line-height:1.3 !important;
text-align:right;
white-space:nowrap;
}
@media (max-width:767px){
.summary-wrapper .price-wrapper,
#checkoutSidebar #summary-box .price-wrapper{border-radius:18px !important;}
.summary-wrapper .price-wrapper .price-label.price-primary,
#checkoutSidebar #summary-box .price-wrapper .price-label.price-primary{padding:18px 0 18px 18px !important;}
.summary-wrapper .price-wrapper .price.price-primary,
#checkoutSidebar #summary-box .price-wrapper .price.price-primary{padding:18px 18px 18px 0 !important;font-size:24px !important;}
.summary-wrapper .price-wrapper .price-label.price-secondary,
#checkoutSidebar #summary-box .price-wrapper .price-label.price-secondary{padding:11px 0 11px 18px !important;}
.summary-wrapper .price-wrapper .price.price-secondary,
#checkoutSidebar #summary-box .price-wrapper .price.price-secondary{padding:11px 18px 11px 0 !important;}
}
/* kroky 2 a 3 – rekapitulace: nadpis nahoře, celková cena přes celou šířku karty dole */
#checkoutSidebar #summary-box{padding:0 !important;overflow:hidden;}
#checkoutSidebar #summary-box > h2{margin:0 !important;padding:18px 18px 16px !important;}
#checkoutSidebar #summary-box > .cart-items,
#checkoutSidebar #summary-box > .order-summary-item.helper,
#checkoutSidebar #summary-box > .order-recapitulation{margin:0 !important;padding-left:18px !important;padding-right:18px !important;}
#checkoutSidebar #summary-box .order-summary-item.price{margin:0 !important;padding:0 !important;border-top:1px solid #e0eef9 !important;}
#checkoutSidebar #summary-box .price-wrapper{border:0 !important;border-radius:0 !important;}
/* =====================================================================
3. KROK – souhlasy u objednávky: zaškrtávací políčka v jedné kartě,
informace o podmínkách ve světle modrém okně s ikonou
===================================================================== */
#checkoutSidebar .consents,
#checkoutSidebar .consents + .consents{
position:relative;
margin:0 !important;
border-style:solid !important;
border-color:#e0eef9 !important;
border-width:0 1px !important;
background:#fff !important;
}
#checkoutSidebar .consents.consents-first{margin-top:16px !important;border-top-width:1px !important;border-radius:16px 16px 0 0 !important;}
/* zaškrtávací políčka */
#checkoutSidebar .consents:has(input[type="checkbox"]){padding:13px 14px !important;}
#checkoutSidebar .consents:has(input[type="checkbox"]) + .consents:has(input[type="checkbox"])::before{
content:"";
position:absolute;
top:0;left:14px;right:14px;
height:1px;
background:#eef3f8;
}
#checkoutSidebar .consents:has(input[type="checkbox"]):has(+ .consents p.label){border-bottom-width:1px !important;border-radius:0 0 16px 16px !important;}
#checkoutSidebar .consents label.whole-width{
display:block !important;
min-height:20px;
margin:0 !important;
padding:0 0 0 32px !important;
color:#4f6577 !important;
font-size:13.5px !important;font-weight:600 !important;
line-height:1.45 !important;
cursor:pointer;
}
#checkoutSidebar .consents label.whole-width a{color:#0b6fb0 !important;font-weight:700 !important;text-decoration:none !important;}
#checkoutSidebar .consents label.whole-width::before{
content:"" !important;
position:absolute !important;
top:0 !important;left:0 !important;
width:20px !important;height:20px !important;
margin:0 !important;
border:1.5px solid #cfe0ee !important;
border-radius:6px !important;
background:#fff !important;
transform:none !important;
transition:background .2s,border-color .2s;
}
#checkoutSidebar .consents label.whole-width::after{display:none !important;}
#checkoutSidebar .consents input[type="checkbox"]:checked + label.whole-width::before{
border-color:#1f9d3a !important;
background:#1f9d3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat !important;
}
/* informace „Kliknutím na tlačítko…“ */
#checkoutSidebar .consents:has(p.label){padding:11px 14px 11px 40px !important;background:#f5faff !important;}
#checkoutSidebar .consents:has(input[type="checkbox"]) + .consents:has(p.label){margin-top:12px !important;border-top-width:1px !important;border-radius:16px 16px 0 0 !important;}
#checkoutSidebar .consents:has(p.label) + .consents:has(p.label){box-shadow:inset 0 1px 0 #e0eef9 !important;}
#checkoutSidebar .consents:has(p.label):not(:has(+ .consents)){border-bottom-width:1px !important;border-radius:0 0 16px 16px !important;}
#checkoutSidebar .consents:has(p.label)::after{
content:"";
position:absolute;
top:13px;left:14px;
width:16px;height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
#checkoutSidebar .consents p.label{margin:0 !important;padding:0 !important;color:#6b7682 !important;font-size:12.5px !important;font-weight:500 !important;line-height:1.5 !important;}
#checkoutSidebar .consents p.label *{color:inherit !important;font-size:inherit !important;}
#checkoutSidebar .consents p.label strong{color:#163d5c !important;font-weight:800 !important;}
#checkoutSidebar .consents p.label a{color:#0b6fb0 !important;font-weight:700 !important;text-decoration:none !important;}
#checkoutSidebar #summary-box{margin-top:16px !important;}
/* =====================================================================
MOBIL – hlavička v objednávce: čára ve stejné výšce jako horní okraj
vyhledávání na ostatních stránkách, ikona košíku jen na mobilu
===================================================================== */
@media (max-width:767px){
body.ordering-process #header{margin-top:10px !important;}
/* logo a ikony svisle na střed prostoru nad čárou (čára je o 10 px níž) */
body.ordering-process .top-navigation-bar{transform:translateY(5px);}
}
@media (min-width:768px){
.cl-cart-link{display:none !important;}
}
/* =====================================================================
DOPORUČENÉ PRODUKTY V KOŠÍKU (doplněk fvStudio)
pod položkou „Hodí se k tomu“ + blok „Doporučujeme přidat k nákupu“
karta: obrázek, normálně psaný název, ceny, krátký popis, vpravo kulaté tlačítko + (zaškrtnuto = ✓)
===================================================================== */
html body .fvDoplnek-attached-products{margin:0 !important;padding:0 !important;text-align:left !important;}
html body .fvDoplnek-attached-products::before{content:"Hodí se k tomu";display:block;margin:0 0 8px;color:#6b7682;font-size:12.5px;font-weight:800;line-height:1.2;}
html body .fvDoplnek-upsell{margin:24px 0 0 !important;padding:0 !important;border:0 !important;background:none !important;}
html body .fvDoplnek-upsell > h4{margin:0 0 12px !important;padding:0 !important;color:#163d5c !important;font-size:19px !important;font-weight:800 !important;line-height:1.3 !important;text-transform:none !important;text-align:left !important;}
html body .fvDoplnek-upsell .fvDoplnek-category{display:flex !important;flex-direction:column;gap:10px;}
html body .fvDoplnek-produkt{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt + .fvDoplnek-produkt{margin-top:10px !important;}
html body .fvDoplnek-produkt form.fvDoplnek-alignCenter{
display:flex !important;align-items:center !important;gap:12px !important;
margin:0 !important;padding:12px !important;
border:1px solid #e0eef9 !important;border-radius:16px !important;background:#f5faff !important;
}
html body .fvDoplnek-produkt img.fvDoplnek-product-image{flex:0 0 56px;width:56px !important;height:56px !important;margin:0 !important;padding:4px !important;border:1px solid #e0eef9 !important;border-radius:12px !important;background:#fff !important;object-fit:contain !important;}
html body .fvDoplnek-produkt .fvcontent{display:block !important;flex:1 1 auto;min-width:0;text-align:left !important;}
html body .fvDoplnek-produkt .fvcontent .header{display:flex !important;align-items:center !important;gap:10px !important;margin:0 !important;padding:0 !important;}
html body .fvDoplnek-produkt .fvcontent .header > span:first-child{order:2;flex:0 0 auto;margin:0 !important;}
html body .fvDoplnek-produkt .fvDoplnek-text{display:flex !important;flex:1 1 auto;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0;cursor:pointer;}
html body .fvDoplnek-produkt .fvDoplnek-text .name{flex:1 1 100%;color:#163d5c !important;font-size:14px !important;font-weight:800 !important;line-height:1.3 !important;text-transform:none !important;letter-spacing:0 !important;}
html body .fvDoplnek-produkt .fvDoplnek-text .common_price{color:#8a96a3 !important;font-size:12.5px !important;font-weight:600 !important;text-decoration:line-through !important;}
html body .fvDoplnek-produkt .fvDoplnek-text .price,
html body .fvDoplnek-produkt .fvDoplnek-text .action_price{color:#1f9d3a !important;font-size:15px !important;font-weight:800 !important;}
html body .fvDoplnek-produkt .fvDoplnek-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 0 !important;color:#6b7682 !important;font-size:12.5px !important;line-height:1.4 !important;}
html body .fvDoplnek-produkt input.fvDoplnek-variant-checkbox{
-webkit-appearance:none !important;appearance:none !important;display:block !important;
width:36px !important;height:36px !important;margin:0 !important;
border:1.5px solid #1f9d3a !important;border-radius:50% !important;cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d3a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}
html body .fvDoplnek-produkt input.fvDoplnek-variant-checkbox:checked{
border-color:transparent !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat,linear-gradient(135deg,#34c759,#1f9d3a) !important;
}
html body .fvDoplnek-produkt input.fvDoplnek-variant-checkbox::before,
html body .fvDoplnek-produkt input.fvDoplnek-variant-checkbox::after{display:none !important;}
/* mobil: řádek s doporučením přes celou šířku karty položky (bez prázdného sloupce vlevo) */
@media (max-width:767px){
html body tr.fvDoplnek-attached-products-row > td.fvDoplnek-attached-products-offset{display:none !important;}
html body tr.fvDoplnek-attached-products-row > td.fvDoplnek-attached-products-cell{
display:block !important;flex:1 1 100% !important;width:100% !important;min-width:0 !important;max-width:100% !important;box-sizing:border-box !important;
padding:4px 0 6px !important;border:0 !important;background:none !important;text-align:left !important;
}
}
/* =====================================================================
PRUH „DOPRAVA ZDARMA“ POD KROKY (košík + Doprava & platba) – mobil i počítač
stejně velký jako lišta „Máte u nás účet?“ v posledním kroku
===================================================================== */
@media all{
html body .cl-freeship{
display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative;
flex:0 0 100% !important;width:100% !important;max-width:none !important;box-sizing:border-box !important;margin:0 0 16px !important;
padding:14px 20px 14px 52px !important;min-height:52px;
border:1px solid #e0eef9;border-radius:16px;background:#f5faff;
color:#163d5c;font-size:14.5px;line-height:1.35;text-align:left;
}
html body .cl-freeship::before{
content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:22px;height:22px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v9H3zM14 9.5h3.6l3.4 3.4v2.6h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .cl-freeship strong{color:#0b6fb0;font-weight:800;}
html body .cl-freeship__bar{display:block;height:6px;border-radius:6px;background:#e0eef9;overflow:hidden;}
html body .cl-freeship__bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#239ceb,#0b6fb0);}
/* doprava zdarma = zelená lišta */
html body .cl-freeship.is-free{border-color:#cfe9d6;background:#effaf2;}
html body .cl-freeship.is-free strong{color:#17672b;}
html body .cl-freeship.is-free::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d3a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v9H3zM14 9.5h3.6l3.4 3.4v2.6h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");}
/* původní informace o dopravě zdarma jsou teď navíc */
html body:has(.cl-freeship) .site-msg-custom,
html body:has(.cl-freeship) .cart-summary .extra.delivery{display:none !important;}
}
/* doporučené produkty – bez prostředního rámečku (starší pravidlo šablony doplňku), karta jemně modrá,
tlačítko + svisle uprostřed karty */
html body .fvDoplnek .fvDoplnek-produkt.fvDoplnek-produkt,
html body .fvDoplnek .fvDoplnek-produkt.fvDoplnek-produkt:hover{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;}
html body .fvDoplnek .fvDoplnek-produkt form.fvDoplnek-alignCenter.fvDoplnek-alignCenter{position:relative !important;align-items:center !important;padding:12px 60px 12px 12px !important;background:#f5faff !important;border:1px solid #e0eef9 !important;}
html body .fvDoplnek .fvDoplnek-produkt .fvcontent .header > span:first-child{position:absolute !important;right:12px;top:50%;transform:translateY(-50%);}
/* =====================================================================
SLEVOVÝ KUPÓN (mobil i počítač): nízká karta na střed – nadpis + pole s tlačítkem uvnitř (jako vyhledávání)
===================================================================== */
@media all{
html body .cart-summary .extras-wrapper{padding:14px 16px 16px !important;text-align:center !important;}
html body .cart-summary .extras-col{display:block !important;}
html body .cart-summary .extras-col:not(:has(*)){display:none !important;}
html body .cart-summary .discount-coupon{display:flex !important;flex-direction:column;align-items:stretch;}
html body .cart-summary .discount-coupon::before{
content:"Máte slevový kód?";display:block;order:-2;margin:0 0 2px;
color:#163d5c;font-family:"Nunito Sans",sans-serif;font-size:15.5px;font-weight:800;line-height:1.3;letter-spacing:0;text-align:center;
}
html body .cart-summary .discount-coupon::after{
content:"Zadejte ho a sleva se hned odečte z ceny.";display:block;order:-1;margin:0 0 10px;
color:#6b7682;font-family:"Nunito Sans",sans-serif;font-size:12.5px;font-weight:400;line-height:1.35;text-align:center;
}
html body .cart-summary .discount-coupon form.input-group{
display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:6px !important;
padding:4px !important;border:1px solid #d7e6f3 !important;border-radius:14px !important;background:#fff !important;box-sizing:border-box;
}
html body .cart-summary .discount-coupon form.input-group:focus-within{border-color:#239ceb !important;box-shadow:0 0 0 3px rgba(35,156,235,.15) !important;}
html body .cart-summary .discount-coupon .form-control,
html body .cart-summary .discount-coupon .form-control:focus{flex:1 1 0 !important;min-width:0 !important;height:42px !important;padding:0 10px !important;border:0 !important;border-radius:10px !important;background:transparent !important;box-shadow:none !important;text-align:left;}
html body .cart-summary .discount-coupon .btn{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;height:42px !important;line-height:1 !important;padding:0 20px !important;border-radius:10px !important;background:linear-gradient(135deg,#239ceb,#0b6fb0) !important;box-shadow:none !important;}
}
/* mobil – stejná mezera 16px i pod kroky, nad souhrnem a nad tlačítkem Pokračovat */
@media (max-width:767px){
html body .cart-row > ol.cart-header{margin-bottom:16px !important;}
html body .cart-row .next-step,
html body #checkoutSidebar .next-step{margin-top:16px !important;}
/* souhrn objednávky v dalších krocích: nad ním už je mezera 16px od karty platby (dohromady bylo 32px) */
html body #checkoutSidebar #summary-box{margin-top:0 !important;}
}
/* doporučené produkty – název, ceny i šedý popis zarovnané na stejnou levou hranu */
html body .fvDoplnek .fvDoplnek-produkt .fvDoplnek-text,
html body .fvDoplnek .fvDoplnek-produkt .fvDoplnek-description{padding-left:0 !important;margin-left:0 !important;}
/* šablona doplňku dává popisu odsazení 25px silnějším pravidlem – přebít */
html body .fvDoplnek .fvDoplnek-produkt form .fvcontent p.fvDoplnek-description.fvDoplnek-description{padding-left:0 !important;padding-inline-start:0 !important;margin-left:0 !important;}
/* kulaté tlačítko +/✓ bez čtverečku po klepnutí (zvýraznění dotyku a obrys fokusu) */
html body .fvDoplnek .fvDoplnek-produkt .header > span:first-child,
html body .fvDoplnek .fvDoplnek-produkt input.fvDoplnek-variant-checkbox{-webkit-tap-highlight-color:transparent !important;outline:0 !important;}
html body .fvDoplnek .fvDoplnek-produkt input.fvDoplnek-variant-checkbox:focus{outline:0 !important;box-shadow:none !important;}
html body .fvDoplnek .fvDoplnek-produkt input.fvDoplnek-variant-checkbox:focus-visible{box-shadow:0 0 0 3px rgba(31,157,58,.25) !important;}
/* ceny také od levé hrany (šablona doplňku jim dává odsazení 1em) */
html body .fvDoplnek .fvDoplnek-produkt form .fvDoplnek-text span.common_price,
html body .fvDoplnek .fvDoplnek-produkt form .fvDoplnek-text span.price{padding-left:0 !important;padding-inline-start:0 !important;margin-left:0 !important;}
/* zaškrtnuté kolečko: průhledný okraj ukazoval opakovaný přechod z protější strany (jiný odstín po stranách) */
html body .fvDoplnek .fvDoplnek-produkt input.fvDoplnek-variant-checkbox:checked{border:0 !important;background-origin:border-box !important;background-clip:border-box !important;}
/* počítač – pruh dopravy a kupón: ukazatel i pole nejsou přes celou šířku */
@media (min-width:768px){
html body .cart-summary .discount-coupon{max-width:460px !important;margin:0 auto !important;}
html body .cart-summary .extras-col > div{flex:none !important;}
html body:has(.cl-freeship) .cart-summary .extras-wrap:not(:has(.extra:not(.delivery))){display:none !important;}
}
/* =====================================================================
„HODÍ SE K TOMU“ POD POLOŽKOU KOŠÍKU – kompaktní kartička
nahoře tip proč (text z doplňku s žárovkou), pod ním obrázek, název, cena a tlačítko „+ Přidat“ / „✓ Přidáno“
===================================================================== */
html body .fvDoplnek-attached-products::before{content:"Hodí se k tomu";display:block;margin:0 0 8px;color:#163d5c;font-size:13px;font-weight:800;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt form.fvDoplnek-alignCenter.fvDoplnek-alignCenter{
display:grid !important;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"desc desc desc" "img text btn";
column-gap:12px !important;row-gap:10px;align-items:center !important;
padding:12px !important;background:#f5faff !important;border:1px solid #e0eef9 !important;border-radius:16px !important;
}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent,
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent .header{display:contents !important;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt img.fvDoplnek-product-image{grid-area:img;width:52px !important;height:52px !important;margin:0 !important;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvDoplnek-text{grid-area:text;padding-left:0 !important;column-gap:6px !important;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvDoplnek-text .name{font-size:13.5px !important;display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* tip – proč se produkt hodí */
html body .fvDoplnek-attached-products .fvDoplnek-produkt form .fvcontent p.fvDoplnek-description.fvDoplnek-description{
grid-area:desc;display:block !important;-webkit-line-clamp:unset;overflow:visible;margin:0 !important;padding:0 0 10px 24px !important;position:relative;
border-bottom:1px dashed #cfe2f2;color:#0b6fb0 !important;font-size:12.5px !important;font-weight:700;line-height:1.4 !important;
}
html body .fvDoplnek-attached-products .fvDoplnek-produkt form .fvcontent p.fvDoplnek-description::before{
content:"";position:absolute;left:0;top:0;width:17px;height:17px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* tlačítko „+ Přidat“ (zaškrtávátko doplňku je průhledné přes celé tlačítko) */
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent .header > span:first-child{
grid-area:btn;position:relative !important;right:auto !important;top:auto !important;transform:none !important;
display:inline-flex !important;align-items:center;justify-content:center;height:38px;padding:0 11px;
border:1.5px solid #1f9d3a;border-radius:12px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent .header > span:first-child::after{content:"+ Přidat";color:#1f9d3a;font-size:13px;font-weight:800;white-space:nowrap;pointer-events:none;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt input.fvDoplnek-variant-checkbox.fvDoplnek-variant-checkbox{
position:absolute !important;inset:0;width:100% !important;height:100% !important;margin:0 !important;border:0 !important;border-radius:12px !important;
background:transparent !important;opacity:0;cursor:pointer;
}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent .header > span:first-child:has(input:checked){border-color:transparent;background:linear-gradient(135deg,#34c759,#1f9d3a);}
html body .fvDoplnek-attached-products .fvDoplnek-produkt .fvcontent .header > span:first-child:has(input:checked)::after{content:"✓ Přidáno";color:#fff;}
/* modrý proužek a stín doplňku u vybraného produktu – stav už ukazuje tlačítko */
html body .fvDoplnek-produkt.fvDoplnek-produkt.fvDoplnek-produkt.fvDoplnek-produkt.fvDoplnek-produkt::after{display:none !important;content:none !important;width:0 !important;background:none !important;}
html body .fvDoplnek .fvDoplnek-produkt.fvDoplnek-produkt.fvDoplnek-produkt{box-shadow:none !important;}
/* produkt bez popisu v doplňku → bez řádku s tipem (žádná prázdná mezera nahoře) */
html body .fvDoplnek-attached-products .fvDoplnek-produkt form .fvcontent p.fvDoplnek-description:empty{display:none !important;}
html body .fvDoplnek-attached-products .fvDoplnek-produkt form.fvDoplnek-alignCenter.fvDoplnek-alignCenter:not(:has(p.fvDoplnek-description:not(:empty))){grid-template-areas:"img text btn";row-gap:0;}
/* =====================================================================
PRUH „DOPRAVA ZDARMA“ – obsah (text + podtext) a počítačová podoba
mobil: jen hlavní text (podtext schovaný), ukazatel pod ním
počítač: v levém sloupci nad produkty – ikonka v kolečku | text a podtext | ukazatel vpravo
===================================================================== */
html body .cl-freeship__txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
html body .cl-freeship__badge{display:none;}
html body .cl-freeship__txt small{display:none;color:#6b7682;font-size:12.5px;font-weight:600;line-height:1.35;}
@media (min-width:768px){
html body .cl-freeship.cl-freeship{
flex-direction:row !important;align-items:center;justify-content:flex-start;gap:20px;
margin:0 0 20px !important;padding:14px 20px 14px 76px !important;min-height:72px;
border-radius:20px;background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 60%,#fafcff 100%);
font-size:15.5px;
}
html body .cl-freeship.cl-freeship::before{left:20px;width:42px;height:42px;border-radius:50%;background-color:#fff;background-size:22px;box-shadow:0 2px 8px rgba(22,61,92,.08);}
html body .cl-freeship__txt{flex:1 1 auto;}
html body .cl-freeship__txt small{display:block;}
html body .cl-freeship__bar{flex:0 0 200px;width:200px;height:8px;}
html body .cl-freeship.is-free{background:linear-gradient(135deg,#e6f7eb 0%,#effaf2 60%,#f7fdf9 100%);}
html body .cl-freeship.is-free .cl-freeship__txt small{color:#3c7a4c;}
html body .cl-freeship__badge{display:inline-flex;flex:0 0 auto;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff;font-size:13.5px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(31,157,58,.22);}
}
/* mobil – stejný vzhled pruhu jako na počítači: ikonka v kolečku, text s podtextem, štítek / ukazatel */
@media (max-width:767px){
html body .cl-freeship.cl-freeship{
flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:10px 12px;
padding:12px 14px 12px 64px !important;min-height:64px;border-radius:18px;
background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 60%,#fafcff 100%);font-size:14.5px;
}
html body .cl-freeship.cl-freeship::before{left:14px;width:38px;height:38px;border-radius:50%;background-color:#fff;background-size:20px;box-shadow:0 2px 8px rgba(22,61,92,.08);}
html body .cl-freeship__txt{flex:1 1 0;}
html body .cl-freeship__txt small{display:block;font-size:12px;}
html body .cl-freeship__bar{flex:0 0 100%;height:7px;}
html body .cl-freeship.is-free{background:linear-gradient(135deg,#e6f7eb 0%,#effaf2 60%,#f7fdf9 100%);}
html body .cl-freeship.is-free .cl-freeship__txt small{color:#3c7a4c;}
html body .cl-freeship__badge{display:inline-flex;flex:0 0 auto;align-items:center;height:30px;padding:0 11px;border-radius:999px;background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(31,157,58,.22);}
}
/* nadpis karty s produkty v košíku – „Váš košík · 2 produkty“ (první řádek tabulky) */
html body .cart-row table.cart-table tr.cl-cart-head > td{padding:16px 20px 14px !important;border:0 !important;background:none !important;text-align:left;}
html body .cl-cart-head__in{display:flex;align-items:center;gap:10px;color:#163d5c;font-size:17px;font-weight:800;line-height:1.2;}
html body .cl-cart-head__ico{
flex:0 0 34px;width:34px;height:34px;border-radius:50%;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html body .cl-cart-head strong{color:#163d5c;font-weight:800 !important;}
html body .cl-cart-head__count{margin-left:auto;padding:4px 10px;border-radius:999px;background:#eef6fd;color:#0b6fb0;font-size:12.5px;font-weight:800;white-space:nowrap;}
@media (max-width:767px){
html body .cart-row table.cart-table tr.cl-cart-head{display:block !important;margin:0 !important;padding:0 !important;border:0 !important;}
html body .cart-row table.cart-table tr.cl-cart-head > td{display:block !important;width:auto !important;padding:0 4px 14px !important;margin:-8px 0 4px !important;}
html body .cl-cart-head__in{font-size:16px;}
}
/* počítač – slevový kód v pravém sloupci pod „Potřebujete pomoc?“ */
@media (min-width:768px){
html body .sidebar-in-cart .cart-summary.cl-in-sidebar{margin:0 0 16px !important;padding:0 !important;}
html body .sidebar-in-cart .cart-summary.cl-in-sidebar .extras-wrapper{padding:16px !important;border-radius:20px !important;}
html body .sidebar-in-cart .cart-summary.cl-in-sidebar .discount-coupon{max-width:none !important;}
html body .sidebar-in-cart .cart-summary.cl-in-sidebar .discount-coupon .btn{padding:0 12px !important;}
html body .sidebar-in-cart .cart-summary.cl-in-sidebar .discount-coupon .form-control{padding:0 8px !important;font-size:13px !important;}
html body .sidebar-in-cart .checkout-box-wrapper{margin-bottom:16px !important;}
}
/* slevový kód na rozkliknutí (jen počítač) – zavřené: jen řádek „Máte slevový kód?“ se šipkou;
na mobilu zůstává rovnou otevřený jako dřív (tlačítko pro rozbalení se tam neukazuje) */
html body .cart-summary .cl-coupon-toggle{display:none;}
@media (min-width:768px){
html body .cart-summary .discount-coupon.cl-coupon-collapsible::before{content:none !important;display:none !important;}
html body .cart-summary .discount-coupon.cl-coupon-collapsible:not(.is-open)::after,
html body .cart-summary .discount-coupon.cl-coupon-collapsible:not(.is-open) form{display:none !important;}
html body .cart-summary .discount-coupon.cl-coupon-collapsible.is-open .cl-coupon-toggle{margin-bottom:6px;}
html body .cart-summary .cl-coupon-toggle{
order:-3;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0;padding:2px 0;
border:0;background:none;cursor:pointer;color:#163d5c;font-family:"Nunito Sans",sans-serif;font-size:15.5px;font-weight:800;line-height:1.3;
-webkit-tap-highlight-color:transparent;
}
html body .cart-summary .cl-coupon-toggle::before{
content:"";flex:0 0 18px;width:18px;height:18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3H5a2 2 0 0 0-2 2v6l9.6 9.6a2 2 0 0 0 2.8 0l5.2-5.2a2 2 0 0 0 0-2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .cart-summary .cl-coupon-toggle::after{
content:"";flex:0 0 16px;width:16px;height:16px;transition:transform .25s;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
}
html body .cart-summary .cl-coupon-toggle[aria-expanded="true"]::after{transform:rotate(180deg);}
html body .cart-summary .cl-coupon-toggle:focus{outline:0;}
html body .cart-summary .cl-coupon-toggle:focus-visible{outline:2px solid #9fcdf0;outline-offset:3px;border-radius:8px;}
/* zavřený stav – nižší karta */
html body .cart-summary .extras-wrapper:has(.cl-coupon-collapsible:not(.is-open)){padding-bottom:12px !important;}
/* horní odsazení stejné zavřené i otevřené – text „Máte slevový kód?“ se při rozbalení neposune */
html body .cart-summary.cart-summary .extras-wrapper.extras-wrapper:has(.cl-coupon-collapsible){padding-top:12px !important;}
}
/* ==================== cleno-hlavicka-popup.css ==================== */
/* =====================================================================
Cleno.cz – rozbalovací okna v hlavičce: Přihlášení + Košík
===================================================================== */
/* ---------- společný panel ---------- */
.popup-widget.login-widget,
.popup-widget.cart-widget{
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 24px 50px -24px rgba(14,47,75,.35) !important;
}
.popup-widget.login-widget .popup-widget-inner,
.popup-widget.cart-widget .popup-widget-inner{background:#fff !important;border-radius:20px;box-shadow:none !important;}
/* šablona dává oknu přihlášení horní odsazení a vnitřku vlastní stín – vznikal pruh nahoře */
.popup-widget.login-widget{padding:0 !important;}
.popup-widget.cart-widget .popup-widget-inner{border-radius:20px 20px 0 0;}
.popup-widget.cart-widget .cart-widget-button{border-radius:0 0 20px 20px;}
/* všechna okna začínají na čáře nad menu */
@media (min-width:768px){
.popup-widget.login-widget{margin-top:51px !important;}
.popup-widget.cart-widget{margin-top:50px !important;}
.empty-cart-hover.popup-widget{margin-top:32px !important;}
}
/* bílé „můstky“ nad okny nejsou vidět (u košíku drží hover, u přihlášení nejsou potřeba) */
.popup-widget.login-widget::before{display:none !important;}
.popup-widget.cart-widget::before,
.empty-cart-hover.popup-widget::before{
top:-24px !important;
height:26px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* vždy jen jedno okno – při najetí na košík se přihlášení schová */
body.cart-window-visible .popup-widget.login-widget,
body.empty-cart-hover-visible .popup-widget.login-widget{display:none !important;}
/* =====================================================================
PŘIHLÁŠENÍ
===================================================================== */
body.login-window-visible .popup-widget.login-widget{max-height:calc(100vh - 110px) !important;overflow-y:auto !important;}
.login-widget .popup-widget-inner{padding:26px 26px 22px !important;}
.login-widget h2{
margin:0 0 18px !important;
color:#163d5c !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.01em;
text-transform:none !important;
}
.login-widget .form-group{margin:0 0 12px !important;}
.login-widget .form-group label{
color:#6b7682 !important;
font-size:13px !important;font-weight:600 !important;
}
.login-widget input.form-control,
.login-widget input[type="email"],
.login-widget input[type="password"],
.login-widget input[type="text"]{
height:50px !important;
padding:0 18px !important;
border:1px solid #d9e7f3 !important;
border-radius:14px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:15px !important;
box-shadow:none !important;
transition:border-color .2s,background .2s,box-shadow .2s;
}
.login-widget input:focus{
border-color:#239ceb !important;
background:#fff !important;
box-shadow:0 0 0 4px rgba(35,156,235,.12) !important;
outline:0 !important;
}
.login-widget a.lost-pass{
display:inline-block;
margin:0 0 16px !important;
color:#0b6fb0 !important;
font-size:13.5px !important;font-weight:600 !important;
text-decoration:none !important;
}
.login-widget a.lost-pass:hover{text-decoration:underline !important;}
/* registrace + tlačítko */
.login-widget .submit-wrapper{
display:flex !important;flex-direction:column-reverse;align-items:stretch;gap:12px;
margin:0 !important;
}
.login-widget .submit-wrapper .alternative-links{
width:100% !important;
margin:0 !important;
text-align:center;
color:#6b7682;
font-size:14px !important;
}
.login-widget .submit-wrapper .alternative-links a{
color:#0b6fb0 !important;
font-weight:700 !important;
text-decoration:none !important;
float:none !important;
display:inline !important;
}
.login-widget .submit-wrapper .alternative-links a:hover{text-decoration:underline !important;}
.login-widget .submit-wrapper .btn{
width:100% !important;height:52px !important;
margin:0 !important;
padding:0 20px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.8) !important;
transition:filter .2s,transform .2s;
}
.login-widget .submit-wrapper .btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* oddělovač „nebo“ */
.login-widget .social-login-buttons{margin:18px 0 0 !important;padding:0 !important;border:0 !important;}
.login-widget .social-login-buttons-divider{
display:flex !important;align-items:center;gap:12px;
margin:0 0 14px !important;
border:0 !important;
background:none !important;
}
.login-widget .social-login-buttons-divider::before,
.login-widget .social-login-buttons-divider::after{
content:"" !important;
display:block !important;
flex:1 1 auto;
height:1px;
position:static !important;
background:#e6eef6 !important;
}
.login-widget .social-login-buttons-divider span{
position:static !important;
padding:0 !important;
background:none !important;
color:#8a96a3 !important;
font-size:13px !important;font-weight:600 !important;
text-transform:none !important;
}
/* sociální tlačítka */
.login-widget .social-login-buttons > div:not(.social-login-buttons-divider),
.login-widget .social-login-buttons .social-login-buttons-inner{
display:flex !important;flex-direction:column;gap:8px;
}
.login-widget a.login-btn{
display:flex !important;align-items:center;justify-content:center;gap:10px;
width:100% !important;height:46px !important;
margin:0 0 8px !important;
padding:0 16px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
color:#163d5c !important;
font-size:14.5px !important;font-weight:700 !important;
text-decoration:none !important;
text-transform:none !important;
box-shadow:none !important;
transition:border-color .2s,background .2s;
}
.login-widget a.login-btn:last-child{margin-bottom:0 !important;}
.login-widget a.login-btn:hover{border-color:#bcdcf4 !important;background:#f5faff !important;}
.login-widget a.login-btn strong{color:inherit !important;font-weight:700 !important;}
.login-widget a.login-btn .login-facebook-icon{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877f2'/%3E%3Cpath d='M15.1 12.6l.4-2.7h-2.6V8.2c0-.7.4-1.5 1.5-1.5h1.2V4.4s-1.1-.2-2.1-.2c-2.2 0-3.6 1.3-3.6 3.7v2h-2.4v2.7h2.4V24h3V12.6z' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.login-widget a.login-btn span[class*="login-"][class*="-icon"]{
position:static !important;
flex:0 0 22px;
width:22px !important;height:22px !important;
margin:0 !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
/* =====================================================================
KOŠÍK
===================================================================== */
.cart-widget .cart-widget-inner{padding:22px 22px 8px !important;}
.cart-widget .cart-widget-inner::before{
content:"Ve vašem košíku máte:";
display:block;
margin:0 0 14px;
color:#163d5c;
font-size:18px;font-weight:800;
line-height:1.2;
}
/* pokud šablona nadpis už vypisuje, schováme ho */
.cart-widget .cart-widget-inner > h2,
.cart-widget .cart-widget-inner > strong:first-child,
.cart-widget .cart-widget-inner > .cart-widget-title{display:none !important;}
.cart-widget .cart-widget-products{max-height:340px;overflow:auto;margin:0 !important;padding:0 !important;border:0 !important;}
.cart-widget .cart-widget-product{
display:flex !important;align-items:center;gap:14px;
margin:0 0 10px !important;
padding:12px !important;
border:1px solid #e6eef6 !important;
border-radius:16px !important;
background:#fff !important;
}
.cart-widget .cart-widget-product:last-child{margin-bottom:0 !important;}
.cart-widget .cart-widget-product-image{
flex:0 0 64px !important;
width:64px !important;height:64px !important;
padding:6px !important;
border:1px solid #e6eef6;
border-radius:12px;
background:#fff;
}
.cart-widget .cart-widget-product-image a{display:block !important;width:100%;height:100%;}
.cart-widget .cart-widget-product-image img{
width:100% !important;height:100% !important;
max-width:none !important;
object-fit:contain;
}
.cart-widget .cart-widget-product-name{flex:1 1 auto !important;min-width:0;width:auto !important;padding:0 !important;}
.cart-widget .cart-widget-product-name strong,
.cart-widget .cart-widget-product-name a{
display:-webkit-box !important;
-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
color:#163d5c !important;
font-size:14px !important;font-weight:700 !important;
line-height:1.35 !important;
text-decoration:none !important;
}
.cart-widget .cart-widget-product-name a:hover{color:#0b6fb0 !important;}
/* množství − 1 + */
.cart-widget .cart-widget-product-amount{flex:0 0 auto !important;width:auto !important;padding:0 !important;}
.cart-widget .cart-widget-product-amount .quantity{
position:relative !important;
display:flex !important;align-items:center;
width:104px !important;height:40px !important;
padding:0 !important;
border:1px solid #e0eef9 !important;
border-radius:12px !important;
background:#f5faff !important;
overflow:hidden;
}
.cart-widget .cart-widget-product-amount .quantity label{
order:2;
flex:1 1 auto;
margin:0 !important;
height:100%;
}
.cart-widget .cart-widget-product-amount input.amount{
width:100% !important;height:100% !important;
margin:0 !important;padding:0 !important;
border:0 !important;
background:transparent !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
text-align:center;
box-shadow:none !important;
-moz-appearance:textfield;
}
.cart-widget .cart-widget-product-amount input.amount::-webkit-outer-spin-button,
.cart-widget .cart-widget-product-amount input.amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-widget .cart-widget-product-amount button.increase,
.cart-widget .cart-widget-product-amount button.decrease{
position:relative !important;
top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
flex:0 0 32px;
width:32px !important;height:100% !important;
margin:0 !important;padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#163d5c !important;
font-size:0 !important;
cursor:pointer;
transition:background .2s,color .2s;
}
.cart-widget .cart-widget-product-amount button.decrease{order:1;}
.cart-widget .cart-widget-product-amount button.increase{order:3;}
.cart-widget .cart-widget-product-amount button.increase::before,
.cart-widget .cart-widget-product-amount button.decrease::before{
content:"" !important;
display:block;
position:absolute !important;inset:0 !important;
width:12px;height:12px;
margin:auto !important;
transform:none !important;
font-size:0 !important;
background:center / contain no-repeat;
}
.cart-widget .cart-widget-product-amount button.increase::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23163d5c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cart-widget .cart-widget-product-amount button.decrease::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23163d5c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cart-widget .cart-widget-product-amount button.increase::after,
.cart-widget .cart-widget-product-amount button.decrease::after{display:none !important;}
.cart-widget .cart-widget-product-amount button.increase:hover,
.cart-widget .cart-widget-product-amount button.decrease:hover{background:#e3f1fc !important;}
/* cena */
.cart-widget .cart-widget-product > span{
flex:0 0 auto !important;
width:auto !important;min-width:78px;
padding:0 !important;
color:#163d5c !important;
font-size:16px !important;font-weight:800 !important;
text-align:right;
white-space:nowrap;
}
/* odebrat × */
.cart-widget .cart-widget-product-delete{flex:0 0 32px !important;width:32px !important;padding:0 !important;}
.cart-widget .cart-widget-product-delete .inline{display:block !important;}
.cart-widget button.remove-item{
position:relative !important;
display:block !important;
width:32px !important;height:32px !important;
margin:0 !important;padding:0 !important;
border:0 !important;
border-radius:10px !important;
background:#f5faff !important;
font-size:0 !important;
transition:background .2s;
}
.cart-widget button.remove-item::before{
content:"" !important;
position:absolute;inset:0;
margin:auto;
width:11px;height:11px;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%238a96a3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cart-widget button.remove-item:hover{background:#fdecec !important;}
.cart-widget button.remove-item:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23e5484d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* doprava zdarma + tlačítko */
.cart-widget .cart-widget-button{
display:flex !important;flex-direction:column;align-items:stretch;gap:12px;
margin:0 !important;
padding:14px 22px 22px !important;
border:0 !important;
background:#fff !important;
}
.cart-widget .cart-free-shipping{
width:100% !important;
margin:0 !important;
padding:12px 16px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:14px !important;font-weight:600 !important;
line-height:1.45 !important;
text-align:center !important;
}
.cart-widget .cart-free-shipping::before,
.cart-widget .cart-free-shipping::after{display:none !important;}
.cart-widget .cart-free-shipping > div{
display:block !important;
width:auto !important;
margin:0 !important;padding:0 !important;
background:none !important;
text-align:center !important;
}
.cart-widget .cart-free-shipping > div::before{
content:"";
display:inline-block;
width:18px;height:18px;
margin:-3px 8px 0 0;
vertical-align:middle;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h14v11H1zM15 8h4l4 4v3h-8z'/%3E%3Ccircle cx='5.5' cy='18' r='2'/%3E%3Ccircle cx='18.5' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cart-widget .cart-free-shipping strong{color:#0b6fb0 !important;font-weight:800 !important;}
.cart-widget .cart-widget-button .btn-conversion,
.cart-widget .cart-widget-button .btn{
display:flex !important;align-items:center;justify-content:center;gap:10px;
width:100% !important;height:54px !important;
margin:0 !important;
padding:0 20px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
text-decoration:none !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.8) !important;
transition:filter .2s,transform .2s;
}
.cart-widget .cart-widget-button .btn::after{
content:"" !important;
display:block;
position:static !important;
transform:none !important;
width:16px;height:16px;
margin:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
font-size:0 !important;
}
.cart-widget .cart-widget-button .btn::before{display:none !important;}
.cart-widget .cart-widget-button .btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* =====================================================================
PRÁZDNÝ KOŠÍK
===================================================================== */
.empty-cart-hover.popup-widget{
min-height:0 !important;
padding:22px 26px 22px 98px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:0 24px 50px -24px rgba(14,47,75,.35) !important;
}
.empty-cart-hover.popup-widget::after{
content:"" !important;
top:50% !important;left:24px !important;right:auto !important;
width:54px !important;height:54px !important;
margin:-27px 0 0 !important;
border-radius:16px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h15l-1.5 8.5a2 2 0 0 1-2 1.5H9a2 2 0 0 1-2-1.6L5 3H2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1'/%3E%3Ccircle cx='17.5' cy='20.5' r='1'/%3E%3C/svg%3E") center / 26px no-repeat !important;
font-size:0 !important;
color:transparent !important;
}
.empty-cart-hover.popup-widget h5{
margin:0 0 6px !important;
color:#163d5c !important;
font-size:17px !important;font-weight:800 !important;
line-height:1.3 !important;
}
.empty-cart-hover.popup-widget p{
margin:0 !important;
color:#6b7682 !important;
font-size:14px !important;
line-height:1.55 !important;
}
/* =====================================================================
MOBIL
===================================================================== */
@media (max-width:767px){
.popup-widget.cart-widget{
border-radius:0 0 20px 20px !important;
border-left:0 !important;border-right:0 !important;
}
/* přihlášení – samostatná karta zaoblená ze všech stran, kousek od okrajů */
.popup-widget.login-widget{
left:8px !important;right:8px !important;
width:auto !important;
margin-top:8px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
}
body.login-window-visible .popup-widget.login-widget,
body.cart-window-visible .popup-widget.cart-widget{
bottom:auto !important;
height:auto !important;
max-height:calc(100vh - 70px) !important;
overflow-y:auto !important;
}
.login-widget .popup-widget-inner{padding:22px 16px 18px !important;height:auto !important;min-height:0 !important;}
/* formulář měl dole 40 px prázdného místa pod tlačítky sociálních sítí */
.login-widget form.login-form{margin-bottom:0 !important;}
/* plynulé otevření */
body.login-window-visible .popup-widget.login-widget{animation:cl-login-in .22s cubic-bezier(.2,.8,.2,1);}
@keyframes cl-login-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.login-widget h2{font-size:20px !important;margin-bottom:14px !important;}
.login-widget input.form-control,
.login-widget input[type="email"],
.login-widget input[type="password"],
.login-widget input[type="text"]{font-size:16px !important;height:50px !important;}
.cart-widget .cart-widget-inner{padding:18px 16px 6px !important;}
.cart-widget .cart-widget-inner::before{font-size:17px;margin-bottom:12px;}
.cart-widget .cart-widget-products{max-height:46vh;}
.cart-widget .cart-widget-product{
display:grid !important;
grid-template-columns:56px 1fr auto;
grid-template-areas:"img name del" "img qty price";
align-items:center;
gap:8px 12px;
padding:10px !important;
}
.cart-widget .cart-widget-product-image{grid-area:img;width:56px !important;height:56px !important;align-self:start;}
.cart-widget .cart-widget-product-name{grid-area:name;}
.cart-widget .cart-widget-product-name strong,
.cart-widget .cart-widget-product-name a{font-size:13.5px !important;}
.cart-widget .cart-widget-product-amount{grid-area:qty;}
.cart-widget .cart-widget-product-amount .quantity{width:96px !important;height:36px !important;}
.cart-widget .cart-widget-product-amount input.amount{font-size:16px !important;}
.cart-widget .cart-widget-product > span{grid-area:price;justify-self:end;min-width:0;font-size:15px !important;}
.cart-widget .cart-widget-product-delete{grid-area:del;align-self:start;}
.cart-widget .cart-widget-button{padding:12px 16px 18px !important;}
.cart-widget .cart-free-shipping{font-size:13.5px !important;}
}
/* =====================================================================
PŘIHLÁŠENÍ – křížek na zavření (vkládá cleno-hlavicka-popup.js)
===================================================================== */
.login-widget .popup-widget-inner{position:relative !important;}
.login-widget .cl-popup-close{
position:absolute;
top:18px;right:18px;
z-index:5;
width:38px;height:38px;
padding:0;
border:1px solid #e0eef9;
border-radius:12px;
background:#f5faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23163d5c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
cursor:pointer;
transition:background-color .2s,border-color .2s;
}
.login-widget .cl-popup-close:hover{border-color:#bcdcf4;background-color:#eaf4fd;}
@media (max-width:767px){
/* otevřené přihlášení – místo bílého „jazýčku“ jemně modré pozadí ikony */
body.login-window-visible .responsive-tools a.toggle-window[data-target="login"]::after{display:none !important;}
body.login-window-visible .responsive-tools a.toggle-window[data-target="login"]{border-radius:12px !important;background:#eef6fd !important;}
.login-widget .cl-popup-close{top:16px;right:16px;}
}
/* =====================================================================
PŘILEPENÁ HLAVIČKA (po odscrollování) – okna přihlášení i košíku
začínají na čáře pod hlavičkou, stejně jako nahoře na stránce
===================================================================== */
@media (min-width:768px){
body.sticky-mobile .popup-widget.login-widget,
body.sticky-mobile .popup-widget.cart-widget{
margin-top:0 !important;
top:70px !important;
}
/* prázdný košík šablona nechává na pevném místě stránky – při přilepené hlavičce by zmizel nahoře */
body.sticky-mobile .empty-cart-hover.popup-widget{
position:fixed !important;
margin-top:0 !important;
top:70px !important;
}
}
/* ==================== cleno-login.css ==================== */
/* =====================================================================
Cleno.cz – stránka Přihlášení (/login/)
===================================================================== */
.in-login #content .content-inner{
max-width:480px;
margin:36px auto 64px !important;
padding:0 !important;
}
/* nadpis s ikonou */
.in-login #content .content-inner > h1{
position:relative;
margin:0 0 22px !important;
padding:84px 0 0 !important;
border:0 !important;
color:#163d5c !important;
font-size:30px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.01em;
text-align:center !important;
}
.in-login #content .content-inner > h1::before{
content:"";
position:absolute;
top:0;left:50%;
width:66px;height:66px;
margin-left:-33px;
border-radius:20px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.in-login #content .content-inner > h1::after{
content:"Přihlaste se ke svému účtu a objednávejte rychleji.";
display:block;
margin-top:8px;
color:#6b7682;
font-size:15.5px;font-weight:500;
line-height:1.5;
letter-spacing:0;
}
/* stejné písmo na počítači i mobilu (šablona dává formulářům na počítači Open Sans) */
.in-login #formLogin,
.in-login #formLogin *,
.in-registrace #register-form,
.in-registrace #register-form *{font-family:"Nunito Sans",sans-serif !important;}
/* karta s formulářem */
.in-login #formLogin{
margin:0 !important;
padding:30px !important;
border:1px solid #e0eef9 !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:none !important;
}
.in-login #formLogin .form-group{position:relative;margin:0 0 14px !important;}
.in-login #formLogin .form-group label{
margin:0 0 6px !important;
color:#6b7682 !important;
font-size:13px !important;font-weight:700 !important;
}
.in-login #formLogin input.form-control{
height:52px !important;
padding:0 18px !important;
border:1px solid #d9e7f3 !important;
border-radius:14px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:15px !important;
box-shadow:none !important;
transition:border-color .2s,background .2s,box-shadow .2s;
}
.in-login #formLogin input.form-control:focus{
border-color:#239ceb !important;
background:#fff !important;
box-shadow:0 0 0 4px rgba(35,156,235,.12) !important;
outline:0 !important;
}
.in-login #formLogin a.lost-pass{
position:absolute !important;
top:0 !important;right:0 !important;
margin:0 !important;
color:#0b6fb0 !important;
font-size:13px !important;font-weight:700 !important;
text-decoration:none !important;
}
.in-login #formLogin a.lost-pass:hover{text-decoration:underline !important;}
/* tlačítko + registrace */
.in-login #formLogin .submit-wrapper{margin:20px 0 0 !important;}
.in-login #formLogin .submit-wrapper .btn{
width:100% !important;height:54px !important;
margin:0 !important;
padding:0 20px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.8) !important;
transition:filter .2s,transform .2s;
}
.in-login #formLogin .submit-wrapper .btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.in-login #formLogin .alternative-links{
margin:14px 0 0 !important;
color:#6b7682 !important;
font-size:14px !important;
text-align:center !important;
}
.in-login #formLogin .alternative-links::before{content:"Nemáte účet?\00a0";}
.in-login #formLogin .alternative-links a{
float:none !important;
color:#0b6fb0 !important;
font-weight:800 !important;
text-decoration:none !important;
}
.in-login #formLogin .alternative-links a:hover{text-decoration:underline !important;}
/* oddělovač „nebo“ */
.in-login #formLogin .social-login-buttons{margin:22px 0 0 !important;padding:0 !important;border:0 !important;}
.in-login #formLogin .social-login-buttons-divider{
display:flex !important;align-items:center;gap:12px;
margin:0 0 16px !important;
border:0 !important;
background:none !important;
}
.in-login #formLogin .social-login-buttons-divider::before,
.in-login #formLogin .social-login-buttons-divider::after{
content:"" !important;
display:block !important;
position:static !important;
flex:1 1 auto;
height:1px;
background:#e6eef6 !important;
}
.in-login #formLogin .social-login-buttons-divider span{
position:static !important;
padding:0 !important;
background:none !important;
color:#8a96a3 !important;
font-size:13px !important;font-weight:600 !important;
text-transform:none !important;
}
/* sociální tlačítka */
.in-login #formLogin .social-login-buttons .form-group{margin:0 0 10px !important;}
.in-login #formLogin .social-login-buttons .form-group:last-child{margin-bottom:0 !important;}
.in-login #formLogin a.login-btn{
position:relative !important;
display:flex !important;align-items:center;justify-content:center;gap:10px;
width:100% !important;height:50px !important;
margin:0 !important;
padding:0 16px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
color:#163d5c !important;
text-decoration:none !important;
box-shadow:none !important;
transition:border-color .2s,background .2s;
}
.in-login #formLogin a.login-btn:hover{border-color:#bcdcf4 !important;background:#f5faff !important;}
.in-login #formLogin a.login-btn strong{
flex:0 1 auto !important;
width:auto !important;height:auto !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:#163d5c !important;
font-size:14.5px !important;font-weight:700 !important;
line-height:1.2 !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.in-login #formLogin a.login-btn span[class*="-icon"]{
position:static !important;
flex:0 0 22px;
width:22px !important;height:22px !important;
margin:0 !important;
border:0 !important;
background-color:transparent !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
.in-login #formLogin a.login-btn .login-facebook-icon{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877f2'/%3E%3Cpath d='M15.1 12.6l.4-2.7h-2.6V8.2c0-.7.4-1.5 1.5-1.5h1.2V4.4s-1.1-.2-2.1-.2c-2.2 0-3.6 1.3-3.6 3.7v2h-2.4v2.7h2.4V24h3V12.6z' fill='%23fff'/%3E%3C/svg%3E") !important;
}
/* ---------- mobil ---------- */
@media (max-width:767px){
.in-login #content .content-inner{margin:24px 4px 44px !important;}
.in-login #content .content-inner > h1{padding-top:72px !important;margin-bottom:18px !important;font-size:25px !important;}
.in-login #content .content-inner > h1::before{width:58px;height:58px;margin-left:-29px;border-radius:18px;background-size:28px;}
.in-login #content .content-inner > h1::after{font-size:14.5px;}
.in-login #formLogin{padding:20px 16px !important;border-radius:20px !important;}
.in-login #formLogin input.form-control{font-size:16px !important;height:50px !important;}
.in-login #formLogin a.login-btn{height:48px !important;}
}
/* =====================================================================
REGISTRACE (/registrace/) – stejný styl jako přihlášení
===================================================================== */
.in-registrace #content .content-inner{
width:auto !important;
max-width:480px !important;
margin:36px auto 64px !important;
padding:0 !important;
}
.in-registrace #content .content-inner > h1{
position:relative;
margin:0 0 22px !important;
padding:84px 0 0 !important;
border:0 !important;
color:#163d5c !important;
font-size:30px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.01em;
text-align:center !important;
}
.in-registrace #content .content-inner > h1::before{
content:"";
position:absolute;
top:0;left:50%;
width:66px;height:66px;
margin-left:-33px;
border-radius:20px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c0-4 3.4-6.5 7.5-6.5 1.6 0 3 .4 4.2 1M19 14v6M16 17h6'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.in-registrace #content .content-inner > h1::after{
content:"Založte si účet a mějte přehled o svých objednávkách.";
display:block;
margin-top:8px;
color:#6b7682;
font-size:15.5px;font-weight:500;
line-height:1.5;
letter-spacing:0;
}
/* karta */
.in-registrace #register-form{
margin:0 !important;
padding:30px !important;
border:1px solid #e0eef9 !important;
border-radius:24px !important;
background:#fff !important;
box-shadow:none !important;
}
.in-registrace #register-form .co-box,
.in-registrace #register-form fieldset,
.in-registrace #register-form fieldset.box{
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
.in-registrace #register-form .co-box::before,
.in-registrace #register-form .co-box::after{display:none !important;}
.in-registrace #register-form .form-group{position:relative;margin:0 0 14px !important;padding:0 !important;}
.in-registrace #register-form .form-group > label:not(.whole-width){
margin:0 0 6px !important;
color:#6b7682 !important;
font-size:13px !important;font-weight:700 !important;
}
.in-registrace #register-form input.form-control{
height:52px !important;
padding:0 18px !important;
border:1px solid #d9e7f3 !important;
border-radius:14px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:15px !important;
box-shadow:none !important;
transition:border-color .2s,background .2s,box-shadow .2s;
}
.in-registrace #register-form input.form-control:focus{
border-color:#239ceb !important;
background:#fff !important;
box-shadow:0 0 0 4px rgba(35,156,235,.12) !important;
outline:0 !important;
}
/* zaškrtávací políčka (newsletter, souhlas) */
.in-registrace #register-form .stay-in-touch{margin:6px 0 0 !important;}
.in-registrace #register-form label.whole-width{
position:relative !important;
display:block !important;
min-height:22px;
margin:0 !important;
padding:1px 0 0 32px !important;
color:#4f6577 !important;
font-size:14px !important;font-weight:600 !important;
line-height:1.45 !important;
cursor:pointer;
}
.in-registrace #register-form label.whole-width span{color:inherit !important;font:inherit !important;}
.in-registrace #register-form label.whole-width::before{
content:"" !important;
position:absolute !important;
top:0 !important;left:0 !important;
width:22px !important;height:22px !important;
margin:0 !important;
border:1.5px solid #cfe0ee !important;
border-radius:7px !important;
background:#fff !important;
transform:none !important;
transition:background .2s,border-color .2s;
}
.in-registrace #register-form label.whole-width::after{display:none !important;}
.in-registrace #register-form input[type="checkbox"]:checked + label.whole-width::before{
border-color:#1f9d3a !important;
background:#1f9d3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}
/* tlačítko Registrovat */
.in-registrace #register-form .submit-wrapper{margin:20px 0 0 !important;}
.in-registrace #register-form .submit-wrapper .btn{
width:100% !important;height:54px !important;
margin:0 !important;
padding:0 20px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.8) !important;
transition:filter .2s,transform .2s;
}
.in-registrace #register-form .submit-wrapper .btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* sociální registrace s oddělovačem „nebo“ */
.in-registrace #register-form .social-login{margin:22px 0 0 !important;padding:0 !important;border:0 !important;background:none !important;}
.in-registrace #register-form .social-login::before{
content:"nebo";
display:flex;align-items:center;gap:12px;
margin:0 0 16px;
color:#8a96a3;
font-size:13px;font-weight:600;
background:linear-gradient(#e6eef6,#e6eef6) left center / calc(50% - 30px) 1px no-repeat,
linear-gradient(#e6eef6,#e6eef6) right center / calc(50% - 30px) 1px no-repeat;
justify-content:center;
}
.in-registrace #register-form .social-login .form-group{margin:0 0 10px !important;}
.in-registrace #register-form .social-login .form-group:last-child{margin-bottom:0 !important;}
.in-registrace #register-form a.login-btn{
position:relative !important;
display:flex !important;align-items:center;justify-content:center;gap:10px;
width:100% !important;height:50px !important;
margin:0 !important;
padding:0 16px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
color:#163d5c !important;
text-decoration:none !important;
box-shadow:none !important;
transition:border-color .2s,background .2s;
}
.in-registrace #register-form a.login-btn:hover{border-color:#bcdcf4 !important;background:#f5faff !important;}
.in-registrace #register-form a.login-btn strong{
flex:0 1 auto !important;
width:auto !important;height:auto !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:#163d5c !important;
font-size:14.5px !important;font-weight:700 !important;
line-height:1.2 !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.in-registrace #register-form a.login-btn span[class*="-icon"]{
position:static !important;
flex:0 0 22px;
width:22px !important;height:22px !important;
margin:0 !important;
border:0 !important;
background-color:transparent !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
.in-registrace #register-form a.login-btn .login-facebook-icon{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877f2'/%3E%3Cpath d='M15.1 12.6l.4-2.7h-2.6V8.2c0-.7.4-1.5 1.5-1.5h1.2V4.4s-1.1-.2-2.1-.2c-2.2 0-3.6 1.3-3.6 3.7v2h-2.4v2.7h2.4V24h3V12.6z' fill='%23fff'/%3E%3C/svg%3E") !important;
}
/* ---------- mobil ---------- */
@media (max-width:767px){
.in-registrace .sidebar.sidebar-left{display:none !important;}
html body.in-registrace #content .content-inner{margin:24px auto 44px !important;padding:0 8px !important;}
.in-registrace #content .content-inner > h1{padding-top:72px !important;margin-bottom:18px !important;font-size:25px !important;}
.in-registrace #content .content-inner > h1::before{width:58px;height:58px;margin-left:-29px;border-radius:18px;background-size:28px;}
.in-registrace #content .content-inner > h1::after{font-size:14.5px;}
.in-registrace #register-form{padding:20px 16px !important;border-radius:20px !important;}
.in-registrace #register-form input.form-control{font-size:16px !important;height:50px !important;}
.in-registrace #register-form a.login-btn{height:48px !important;}
}
/* ==================== cleno-hodnoceni.css ==================== */
/* =====================================================================
Cleno.cz – hodnocení obchodu + newsletter v patičce
===================================================================== */
/* původní blok hodnocení (ratings-in container) skrýt */
.ratings-in.container,
.ratings:has(> .ratings-in){display:none !important;}
/* =====================================================================
HODNOCENÍ OBCHODU (#hodnoceniobchodu)
===================================================================== */
#hodnoceniobchodu{margin-top:8px !important;margin-bottom:56px !important;}
#hodnoceniobchodu > br{display:none !important;}
/* souhrn – 5,0 ★★★★★ 5467 hodnocení jako pilulka */
#hodnoceniobchodu .shop-eval-stars{display:flex !important;justify-content:center;margin:6px 0 26px !important;}
#hodnoceniobchodu .rate-average-inner{
display:inline-flex !important;align-items:center;gap:12px;
width:auto !important;
padding:10px 20px !important;
border:1px solid #e0eef9;
border-radius:50px;
background:#f5faff;
}
#hodnoceniobchodu .rate-average{color:#163d5c !important;font-size:22px !important;font-weight:800 !important;line-height:1 !important;}
#hodnoceniobchodu .rate-star-wrap{display:inline-flex !important;align-items:center;gap:10px;margin:0 !important;}
#hodnoceniobchodu .stars-label{color:#4f6577 !important;font-size:14.5px !important;font-weight:700 !important;}
/* karty recenzí */
#hodnoceniobchodu .shop-eval{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
width:auto !important;
margin:0 !important;padding:0 !important;
}
#hodnoceniobchodu .shop-eval::before,
#hodnoceniobchodu .shop-eval::after{display:none !important;}
#hodnoceniobchodu .vote-wrap{
position:relative !important;
display:flex !important;flex-direction:column;
width:auto !important;height:auto !important;min-height:0 !important;
margin:0 !important;
padding:20px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:none !important;
float:none !important;
}
/* uvozovky vpravo nahoře */
#hodnoceniobchodu .vote-wrap::after{
content:"";
position:absolute;
top:18px;right:18px;
width:28px;height:28px;
border-radius:9px;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23239ceb'%3E%3Cpath d='M9.6 6C6.5 7.3 4.5 10 4.5 13.6V18h6v-6H8c0-2.2 1.2-3.8 3.1-4.6L9.6 6zm9 0c-3.1 1.3-5.1 4-5.1 7.6V18h6v-6H17c0-2.2 1.2-3.8 3.1-4.6L18.6 6z'/%3E%3C/svg%3E") center / 15px no-repeat;
}
#hodnoceniobchodu .vote-header{margin:0 0 12px !important;padding:0 40px 0 0 !important;}
#hodnoceniobchodu .vote-summary{display:block !important;}
#hodnoceniobchodu .vote-name,
#hodnoceniobchodu .vote-name span{
display:block !important;
margin:0 0 6px !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#hodnoceniobchodu .vote-rating{display:flex !important;align-items:center;gap:8px;margin:0 !important;}
#hodnoceniobchodu .vote-rating .star::before{font-size:15px !important;}
#hodnoceniobchodu .vote-delimeter{display:none !important;}
#hodnoceniobchodu .vote-time{color:#8a96a3 !important;font-size:12.5px !important;font-weight:600 !important;line-height:1 !important;}
/* doplněk hodnocení dává hlavičce i textu karty flex-basis:100 % – ve sloupcové kartě se pak hlavička
smrskne a řádek s hvězdičkami a datem se ořízne (na iPhonu skoro celý) */
html body #hodnoceniobchodu .vote-wrap > :not(.no-display){flex:0 0 auto !important;}
#hodnoceniobchodu .vote-rating{min-height:18px !important;overflow:visible !important;}
#hodnoceniobchodu .vote-content{
display:-webkit-box !important;
-webkit-line-clamp:4;-webkit-box-orient:vertical;
overflow:hidden;
margin:0 !important;padding:0 !important;
color:#4f6577 !important;
font-size:14.5px !important;font-weight:500 !important;
line-height:1.55 !important;
}
/* tlačítko Zobrazit více – světlé, bez velkých písmen */
#hodnoceniobchodu .shop-stat-all{display:flex !important;justify-content:center;margin:24px 0 0 !important;padding:0 !important;}
#hodnoceniobchodu .shop-stat-all .btn{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
height:48px !important;
padding:0 24px !important;
border:1px solid #cfe2f2 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:15px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
transition:background .2s,border-color .2s;
}
#hodnoceniobchodu .shop-stat-all .btn::after{
content:"";
width:15px;height:15px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* při najetí modré tlačítko s bílým textem (šablona jinak dává bílý text na světlé pozadí) */
#hodnoceniobchodu .shop-stat-all .btn:hover,
#hodnoceniobchodu .shop-stat-all .btn:focus{
border-color:#0b6fb0 !important;
background:#0b6fb0 !important;
background-image:none !important;
color:#fff !important;
}
#hodnoceniobchodu .shop-stat-all .btn::before{display:none !important;}
#hodnoceniobchodu .shop-stat-all .btn:hover::after,
#hodnoceniobchodu .shop-stat-all .btn:focus::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* =====================================================================
NEWSLETTER V PATIČCE
===================================================================== */
.custom-footer__newsletter{
align-items:center !important;
gap:32px;
padding:30px 36px !important;
border-radius:24px !important;
background:linear-gradient(120deg,#0b6fb0 0%,#239ceb 100%) !important;
box-shadow:none !important;
}
.custom-footer__newsletter .newsletter-header{
position:relative;
display:flex !important;flex-direction:column;justify-content:center;
min-height:56px;
padding-left:72px !important;
margin:0 !important;
}
.custom-footer__newsletter .newsletter-header::before{
content:"";
position:absolute;
left:0;top:50%;
width:56px;height:56px;
margin-top:-28px;
border-radius:18px;
background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.custom-footer__newsletter .newsletter-header h3{
margin:0 !important;
color:#fff !important;
font-size:23px !important;font-weight:800 !important;
line-height:1.25 !important;
}
.custom-footer__newsletter .newsletter-header::after{
content:"Novinky, tipy na údržbu filtrů a slevy jen pro odběratele.";
margin-top:4px;
color:rgba(255,255,255,.82);
font-size:14.5px;font-weight:500;
line-height:1.45;
}
.custom-footer__newsletter form,
.custom-footer__newsletter fieldset{margin:0 !important;padding:0 !important;border:0 !important;}
.custom-footer__newsletter form{flex:0 1 520px;min-width:0;}
/* tlačítko Odebírat je umístěné absolutně – musí se vždy držet formuláře,
jinak se při načítání stránky na chvíli roztáhne přes celou výšku (zelený pruh) */
.custom-footer__newsletter form,
.custom-footer__newsletter fieldset{position:relative !important;}
.custom-footer__newsletter .form-control-wrapper{position:relative !important;}
.custom-footer__newsletter input.form-control{
height:58px !important;
padding:0 150px 0 20px !important;
border:0 !important;
border-radius:16px !important;
background:#fff !important;
color:#163d5c !important;
font-size:16px !important;
box-shadow:none !important;
}
.custom-footer__newsletter .smart-label-wrapper label{z-index:2;left:20px !important;padding:0 !important;color:#8a96a3 !important;pointer-events:none;}
.custom-footer__newsletter button.btn{
position:absolute !important;
top:6px !important;right:6px !important;bottom:6px !important;
height:auto !important;
margin:0 !important;
padding:0 22px !important;
border:0 !important;
border-radius:12px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-size:15px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
box-shadow:none !important;
transition:filter .2s;
}
.custom-footer__newsletter button.btn:hover{filter:brightness(1.06);}
/* bezpečnostní kontrola (obrázek s kódem), kterou Shoptet někdy přidá do formuláře:
tlačítko Odebírat pak není uvnitř pole e-mailu, ale pod formulářem přes celou šířku */
.custom-footer__newsletter form:has(.captcha-image) input.form-control{padding-right:20px !important;}
.custom-footer__newsletter form:has(.captcha-image) button.btn{position:static !important;display:flex !important;align-items:center;justify-content:center;width:100% !important;height:54px !important;margin:12px 0 0 !important;}
.custom-footer__newsletter form fieldset.box{display:flex !important;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:14px 0 0 !important;padding:0 !important;background:none !important;box-shadow:none !important;}
.custom-footer__newsletter form fieldset.box h2{flex:1 1 100%;margin:0 !important;padding:0 !important;background:none !important;color:rgba(255,255,255,.92) !important;font-size:14px !important;font-weight:800 !important;line-height:1.3 !important;text-align:left !important;}
.custom-footer__newsletter form fieldset.box h2::before,
.custom-footer__newsletter form fieldset.box h2::after{display:none !important;}
.custom-footer__newsletter form fieldset.box .captcha-image{flex:0 0 auto;margin:0 !important;}
.custom-footer__newsletter form fieldset.box .captcha-image img{display:block;width:auto !important;height:54px !important;border-radius:14px !important;background:#fff;}
.custom-footer__newsletter form fieldset.box .smart-label-wrapper{flex:1 1 160px;min-width:0;margin:0 !important;}
/* ---------- tablet ---------- */
@media (max-width:1199px){
#hodnoceniobchodu .shop-eval{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ---------- mobil ---------- */
@media (max-width:767px){
#hodnoceniobchodu{margin-bottom:40px !important;}
#hodnoceniobchodu .shop-eval-stars{margin:4px 0 18px !important;}
#hodnoceniobchodu .rate-average-inner{gap:9px;padding:8px 16px !important;}
#hodnoceniobchodu .rate-average{font-size:19px !important;}
#hodnoceniobchodu .stars-label{font-size:13.5px !important;}
/* karty pod sebou */
#hodnoceniobchodu .shop-eval{grid-template-columns:1fr !important;gap:12px;}
#hodnoceniobchodu .vote-wrap{padding:18px !important;border-radius:18px !important;}
#hodnoceniobchodu .vote-content{font-size:14px !important;}
#hodnoceniobchodu .shop-stat-all{margin-top:18px !important;}
#hodnoceniobchodu .shop-stat-all .btn{width:100%;}
.custom-footer__newsletter{
flex-direction:column !important;align-items:stretch !important;
gap:18px;
margin-left:12px !important;margin-right:12px !important;
padding:22px 18px !important;
border-radius:20px !important;
text-align:left !important;
}
.custom-footer__newsletter .newsletter-header,
.custom-footer__newsletter .newsletter-header h3{text-align:left !important;align-items:flex-start !important;}
.custom-footer__newsletter .newsletter-header{min-height:48px;padding-left:62px !important;}
.custom-footer__newsletter .newsletter-header::before{width:48px;height:48px;margin-top:-24px;border-radius:15px;background-size:22px;}
.custom-footer__newsletter .newsletter-header h3{font-size:19px !important;}
.custom-footer__newsletter .newsletter-header::after{font-size:13.5px;}
.custom-footer__newsletter form{flex:none;width:100%;}
.custom-footer__newsletter input.form-control{height:54px !important;padding-right:128px !important;}
.custom-footer__newsletter button.btn{padding:0 16px !important;font-size:14px !important;}
}
/* ==================== cleno-hodnoceni-stranka.css ==================== */
/* =====================================================================
Cleno.cz – stránka Hodnocení obchodu (/hodnoceni-obchodu/)
===================================================================== */
/* ---------- nadpis ---------- */
html body.in-hodnoceni-obchodu #content .content-inner > h1{
margin:8px 0 6px !important;
padding:0 !important;
border:0 !important;
color:#163d5c !important;
font-size:38px !important;font-weight:800 !important;
line-height:1.15 !important;
letter-spacing:-.015em !important;
text-align:center !important;}
html body.in-hodnoceni-obchodu #content .content-inner > h1::after{
content:"Ověřené recenze od zákazníků, kteří u nás opravdu nakoupili." !important;
display:block !important;
margin-top:10px !important;
color:#6b7682 !important;
font-size:16.5px !important;font-weight:500 !important;
line-height:1.5 !important;
letter-spacing:0 !important;}
/* ---------- souhrnný panel ---------- */
html body.in-hodnoceni-obchodu #content #ratingWrapper{
margin:30px 0 40px !important;
padding:28px !important;
border:1px solid #e0eef9 !important;
border-radius:28px !important;
background:linear-gradient(135deg,#f5faff 0%,#eaf4fd 100%) !important;
box-shadow:none !important;}
html body.in-hodnoceni-obchodu #content .rate-wrap{
display:grid !important;
grid-template-columns:280px minmax(0,1fr) !important;
align-items:center !important;
gap:36px !important;
margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-wrap::before,
html body.in-hodnoceni-obchodu #content .rate-wrap::after{display:none !important;}
/* velké skóre vlevo */
html body.in-hodnoceni-obchodu #content .rate-average-wrap{
width:auto !important;
margin:0 !important;
padding:28px 24px !important;
border:1px solid #e0eef9 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
text-align:center !important;}
html body.in-hodnoceni-obchodu #content .rate-average-inner{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;width:auto !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-average{
display:block !important;
width:auto !important;height:auto !important;
color:#163d5c !important;
font-size:60px !important;font-weight:800 !important;
line-height:1 !important;
letter-spacing:-.02em !important;}
html body.in-hodnoceni-obchodu #content .rate-average::after{
content:" / 5" !important;
color:#9fb3c4 !important;
font-size:22px !important;font-weight:700 !important;
letter-spacing:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-star-wrap{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;width:auto !important;}
html body.in-hodnoceni-obchodu #content .rate-average-wrap .stars .star{width:26px !important;height:26px !important;}
html body.in-hodnoceni-obchodu #content .rate-average-wrap .stars .star::before{font-size:24px !important;}
html body.in-hodnoceni-obchodu #content .rate-average-wrap .stars-label{
display:block !important;
width:auto !important;
padding:6px 14px !important;
border-radius:50px !important;
background:#eef6fd !important;
color:#0b6fb0 !important;
font-size:13.5px !important;font-weight:800 !important;
line-height:1.4 !important;}
/* rozložení hodnocení vpravo */
html body.in-hodnoceni-obchodu #content .votes{display:flex !important;flex-direction:column !important;gap:12px !important;width:auto !important;margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-list{
display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
align-items:center !important;
gap:14px !important;
width:auto !important;
margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-star{
display:flex !important;align-items:center !important;gap:6px !important;
width:auto !important;
margin:0 !important;}
html body.in-hodnoceni-obchodu #content .rate-value{color:#163d5c !important;font-size:15px !important;font-weight:800 !important;line-height:1 !important;}
html body.in-hodnoceni-obchodu #content .rate-star .star{width:16px !important;height:16px !important;}
html body.in-hodnoceni-obchodu #content .rate-star .star::before{color:#fecb3e !important;font-size:16px !important;}
html body.in-hodnoceni-obchodu #content .rate-block{
position:relative !important;
width:auto !important;height:12px !important;
margin:0 72px 0 0 !important;
border-radius:12px !important;
background:#dbe8f4 !important;
overflow:visible !important;}
html body.in-hodnoceni-obchodu #content .rate-bar{
position:relative !important;
display:block !important;
width:var(--rate-bar-width,0%) !important;
min-width:0 !important;
height:100% !important;
border-radius:12px !important;
background:linear-gradient(90deg,#239ceb 0%,#0b6fb0 100%) !important;}
html body.in-hodnoceni-obchodu #content .rate-count{
position:absolute !important;
top:50% !important;left:auto !important;
right:-72px !important;
width:60px !important;
margin:0 !important;
transform:translateY(-50%) !important;
color:#4f6577 !important;
font-size:13.5px !important;font-weight:700 !important;
text-align:left !important;
white-space:nowrap !important;}
/* počet je uvnitř pruhu – posunout na konec celé dráhy */
html body.in-hodnoceni-obchodu #content .rate-block{display:flex !important;}
html body.in-hodnoceni-obchodu #content .rate-bar{position:static !important;}
html body.in-hodnoceni-obchodu #content .rate-count{right:-72px !important;}
html body.in-hodnoceni-obchodu #content .rate-count.active{color:#163d5c !important;font-weight:800 !important;}
/* ---------- recenze (masonry) ---------- */
html body.in-hodnoceni-obchodu #content #ratingsList{
display:block !important;
column-count:3 !important;
column-gap:18px !important;
width:auto !important;
margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content #ratingsList::before,
html body.in-hodnoceni-obchodu #content #ratingsList::after{display:none !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap{
position:relative !important;
display:inline-block !important;
width:100% !important;height:auto !important;min-height:0 !important;
margin:0 0 18px !important;
padding:22px !important;
border:1px solid #e0eef9 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
float:none !important;
break-inside:avoid !important;
vertical-align:top !important;
transition:border-color .2s,transform .2s !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap:hover{border-color:#bcdcf4 !important;transform:translateY(-2px) !important;}
/* uvozovky */
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap::after{
content:"" !important;
position:absolute !important;
top:22px !important;right:22px !important;
width:30px !important;height:30px !important;
border-radius:10px !important;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23239ceb'%3E%3Cpath d='M9.6 6C6.5 7.3 4.5 10 4.5 13.6V18h6v-6H8c0-2.2 1.2-3.8 3.1-4.6L9.6 6zm9 0c-3.1 1.3-5.1 4-5.1 7.6V18h6v-6H17c0-2.2 1.2-3.8 3.1-4.6L18.6 6z'/%3E%3C/svg%3E") center / 16px no-repeat !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-header{
display:flex !important;align-items:center !important;gap:12px !important;
margin:0 0 14px !important;
padding:0 42px 0 0 !important;}
/* avatar s iniciálami */
html body.in-hodnoceni-obchodu #content #ratingsList .vote-pic{
position:relative !important;
display:block !important;
flex:0 0 46px !important;
width:46px !important;height:46px !important;
margin:0 !important;
border-radius:50% !important;
overflow:hidden !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-initials{
position:absolute !important;
inset:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;
width:100% !important;height:100% !important;
border-radius:50% !important;
background:linear-gradient(135deg,#239ceb 0%,#0b6fb0 100%) !important;
color:#fff !important;
font-size:15px !important;font-weight:800 !important;
letter-spacing:.02em !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-pic img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-summary{display:block !important;min-width:0 !important;flex:1 1 auto !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-name,
html body.in-hodnoceni-obchodu #content #ratingsList .vote-name span{
display:block !important;
margin:0 0 4px !important;
color:#163d5c !important;
font-size:15.5px !important;font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-rating{display:flex !important;align-items:center !important;gap:8px !important;margin:0 !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-rating .star::before{font-size:15px !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-delimeter{display:none !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-time{color:#8a96a3 !important;font-size:12.5px !important;font-weight:600 !important;line-height:1 !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-content{
margin:0 !important;padding:0 !important;
color:#4f6577 !important;
font-size:15px !important;font-weight:500 !important;
line-height:1.6 !important;}
/* ---------- stránkování + nahoru ---------- */
html body.in-hodnoceni-obchodu #content .listingControls{
display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;
margin:14px 0 0 !important;
padding:18px 0 0 !important;
border-top:1px solid #e6eef6 !important;}
html body.in-hodnoceni-obchodu #content .pagination{order:2 !important;margin:0 !important;}
html body.in-hodnoceni-obchodu #content .goToTop{order:1 !important;margin:0 !important;width:auto !important;}
html body.in-hodnoceni-obchodu #content .pagination__list{display:flex !important;align-items:center !important;gap:8px !important;margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .pagination__list li{margin:0 !important;padding:0 !important;}
html body.in-hodnoceni-obchodu #content .pagination__currentPage,
html body.in-hodnoceni-obchodu #content .pagination__link{
display:flex !important;align-items:center !important;justify-content:center !important;
min-width:46px !important;width:auto !important;height:46px !important;
margin:0 !important;
padding:0 14px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
line-height:1 !important;
text-decoration:none !important;
transition:border-color .2s,background .2s !important;}
html body.in-hodnoceni-obchodu #content .pagination__currentPage{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
html body.in-hodnoceni-obchodu #content .pagination__link:hover{border-color:#9fcdf0 !important;background:#f5faff !important;color:#0b6fb0 !important;}
html body.in-hodnoceni-obchodu #content .pagination__link--next::before,
html body.in-hodnoceni-obchodu #content .pagination__link--prev::before{
content:"" !important;
width:16px !important;height:16px !important;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;}
html body.in-hodnoceni-obchodu #content .pagination__link--prev::before{transform:rotate(180deg) !important;}
html body.in-hodnoceni-obchodu #content .pagination__link--next::after,
html body.in-hodnoceni-obchodu #content .pagination__link--prev::after{display:none !important;}
html body.in-hodnoceni-obchodu #content .goToTop__button{
display:inline-flex !important;align-items:center !important;gap:8px !important;
height:46px !important;
margin:0 !important;
padding:0 18px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:14.5px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;}
html body.in-hodnoceni-obchodu #content .goToTop__button:hover{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
/* ---------- tablet ---------- */
@media (max-width:1199px){
html body.in-hodnoceni-obchodu #content #ratingsList{column-count:2 !important;}
}
@media (max-width:991px){
html body.in-hodnoceni-obchodu #content .rate-wrap{grid-template-columns:240px minmax(0,1fr) !important;gap:24px !important;}
}
/* ---------- mobil ---------- */
@media (max-width:767px){
html body.in-hodnoceni-obchodu #content .content-inner > h1{margin-top:4px !important;font-size:28px !important;}
html body.in-hodnoceni-obchodu #content .content-inner > h1::after{font-size:14.5px !important;}
html body.in-hodnoceni-obchodu #content #ratingWrapper{margin:20px 0 24px !important;padding:16px !important;border-radius:22px !important;}
html body.in-hodnoceni-obchodu #content .rate-wrap{grid-template-columns:1fr !important;gap:18px !important;}
html body.in-hodnoceni-obchodu #content .rate-average-wrap{padding:22px 16px !important;border-radius:18px !important;}
html body.in-hodnoceni-obchodu #content .rate-average{font-size:50px !important;}
html body.in-hodnoceni-obchodu #content .votes{gap:10px !important;padding:0 4px !important;}
html body.in-hodnoceni-obchodu #content .rate-list{grid-template-columns:44px minmax(0,1fr) !important;gap:10px !important;}
html body.in-hodnoceni-obchodu #content .rate-block{margin-right:58px !important;height:10px !important;}
html body.in-hodnoceni-obchodu #content .rate-count{right:-58px !important;width:52px !important;font-size:12.5px !important;}
html body.in-hodnoceni-obchodu #content #ratingsList{column-count:1 !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap{margin-bottom:12px !important;padding:18px !important;border-radius:18px !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap::after{top:18px !important;right:18px !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-content{font-size:14.5px !important;}
html body.in-hodnoceni-obchodu #content .listingControls{flex-direction:column-reverse !important;align-items:center !important;}
html body.in-hodnoceni-obchodu #content .pagination{order:0 !important;}
}
/* =====================================================================
DOLADĚNÍ – šablona má na této stránce silná pravidla, proto mřížka
místo sloupců a avatar obtékaný vlevo
===================================================================== */
html body.in-hodnoceni-obchodu #content .rate-value{display:inline-block !important;}
html body.in-hodnoceni-obchodu #content #ratingsList{
column-count:auto !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:stretch !important;
/* karty mají ze šablony okraj 7,5px – vyrovnat, aby lícovaly s panelem nahoře */
margin-left:-7.5px !important;margin-right:-7.5px !important;
column-gap:3px !important;row-gap:4px !important;
}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-wrap{display:block !important;width:auto !important;align-self:stretch !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-header::after{content:"" !important;display:block !important;clear:both !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-pic{float:left !important;margin:0 12px 0 0 !important;}
html body.in-hodnoceni-obchodu #content #ratingsList .vote-summary{width:auto !important;max-width:none !important;float:none !important;overflow:hidden !important;padding-top:4px !important;}
@media (max-width:1199px){
html body.in-hodnoceni-obchodu #content #ratingsList{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:767px){
html body.in-hodnoceni-obchodu #content #ratingsList{grid-template-columns:1fr !important;row-gap:0 !important;}
/* seznam kategorií nad obsahem na mobilu schovat */
html body.in-hodnoceni-obchodu .sidebar.sidebar-left{display:none !important;}
html body.in-hodnoceni-obchodu #content .content-inner{padding:0 8px !important;}
}
/* ==================== cleno-razeni.css ==================== */
/* =====================================================================
Cleno.cz – řazení produktů, „Zobrazit více produktů“, stránkování
(globálně pro všechny výpisy)
===================================================================== */
/* ---------- Zobrazit více produktů (top produkty v kategorii) ---------- */
.button-wrapper{display:flex !important;justify-content:center;margin:-14px 0 18px !important;padding:0 !important;}
.button-wrapper .toggle-top-products{
display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
width:auto !important;
height:48px !important;
margin:0 !important;
padding:0 7px 0 22px !important;
border:1px solid #cfe2f2 !important;
border-radius:50px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:14.5px !important;font-weight:800 !important;
text-decoration:none !important;
text-transform:none !important;
transition:background .2s,border-color .2s,color .2s;
}
/* šipka ve světle modrém kolečku */
.button-wrapper .toggle-top-products::after{
content:"" !important;
flex:0 0 34px;
width:34px !important;height:34px !important;
margin:0 !important;
border:0 !important;
border-radius:50% !important;
font-size:0 !important;
transform:none !important;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat !important;
transition:transform .25s,background-color .2s;
}
.button-wrapper .toggle-top-products[aria-expanded="true"]::after{transform:rotate(180deg) !important;}
.button-wrapper .toggle-top-products:hover{border-color:#0b6fb0 !important;background:#fff !important;color:#0b6fb0 !important;}
.button-wrapper .toggle-top-products:hover::after{
background:#0b6fb0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}
/* náhled dalšího produktu – vidět je jen jeho horní část, která se ztrácí do bílé,
tlačítko Zobrazit více je až pod ním */
.products-top-wrapper.has-inactive .products-top .product.active + .product.inactive{
display:block !important;
position:relative !important;
height:64px !important;max-height:64px !important;min-height:0 !important;
overflow:hidden !important;
visibility:visible !important;
opacity:1 !important;
transform:none !important;
pointer-events:none;
}
.products-top-wrapper.has-inactive .products-top .product.active + .product.inactive::after{
content:"";
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 45%,#fff 100%);
}
.products-top-wrapper.has-inactive .button-wrapper{position:relative;z-index:3;margin-top:-18px !important;}
/* ---------- řazení – stejný styl jako záložky na detailu produktu ---------- */
@media (min-width:768px){
.listSorting{
margin:0 0 20px !important;
padding:0 !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
.listSorting .listSorting__controls{
display:flex !important;flex-wrap:wrap;gap:4px;
width:auto !important;
margin:0 !important;
padding:5px !important;
border:1px solid #e0eef9 !important;
border-radius:16px !important;
background:#f5faff !important;
list-style:none !important;
}
.listSorting .listSorting__controls::before,
.listSorting .listSorting__controls::after{display:none !important;}
.listSorting .listSorting__controls li{flex:1 1 auto;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
.listSorting .listSorting__controls li::before,
.listSorting .listSorting__controls li::after{display:none !important;}
.listSorting .listSorting__control{
display:flex !important;align-items:center;justify-content:center;
width:100% !important;height:46px !important;
margin:0 !important;
padding:0 16px !important;
border:0 !important;
border-radius:12px !important;
background:none !important;
box-shadow:none !important;
color:#6b7682 !important;
font-size:14.5px !important;font-weight:700 !important;
line-height:1 !important;
text-transform:none !important;
letter-spacing:0 !important;
text-decoration:none !important;
white-space:nowrap;
cursor:pointer;
transition:background .2s,color .2s;
}
.listSorting .listSorting__control::before,
.listSorting .listSorting__control::after{display:none !important;}
.listSorting .listSorting__control:hover{color:#163d5c !important;background:rgba(255,255,255,.7) !important;}
.listSorting .listSorting__control--current,
.listSorting .listSorting__control--current:hover{
background:#fff !important;
color:#163d5c !important;
font-weight:700 !important;
box-shadow:0 4px 12px -6px rgba(14,47,75,.25) !important;
}
}
/* ---------- ovládání pod výpisem: Načíst další, stránkování, Nahoru ---------- */
.listingControls{
display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;
gap:14px 16px;
margin:28px 0 0 !important;
padding:22px 0 0 !important;
border-top:1px solid #e6eef6 !important;
}
.listingControls .loadMore{order:1;flex:0 0 100%;display:flex !important;justify-content:center;margin:0 0 4px !important;}
.listingControls .loadMore__button{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
min-width:240px;height:50px !important;
margin:0 !important;
padding:0 26px !important;
border:1px solid #cfe2f2 !important;
border-radius:50px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:15px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
transition:background .2s,border-color .2s,color .2s;
}
.listingControls .loadMore__button::before{
content:"" !important;
width:16px;height:16px;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.listingControls .loadMore__button::after{display:none !important;}
.listingControls .loadMore__button:hover{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
.listingControls .loadMore__button:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.listingControls .pagination{order:2;margin:0 !important;}
.listingControls .itemsTotal{order:3;margin:0 !important;color:#6b7682 !important;font-size:14px !important;}
.listingControls .itemsTotal strong{color:#163d5c !important;font-weight:800 !important;}
.listingControls .goToTop{order:4;margin:0 !important;width:auto !important;}
.pagination__list{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 !important;padding:0 !important;list-style:none !important;}
.pagination__list li{margin:0 !important;padding:0 !important;}
.pagination__list li::before{display:none !important;}
.pagination__currentPage,
.pagination__link{
display:flex !important;align-items:center;justify-content:center;
min-width:46px !important;width:auto !important;height:46px !important;
margin:0 !important;
padding:0 14px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;
line-height:1 !important;
text-decoration:none !important;
transition:border-color .2s,background .2s,color .2s;
}
.pagination__currentPage{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
.pagination__link:hover{border-color:#9fcdf0 !important;background:#f5faff !important;color:#0b6fb0 !important;}
.pagination__link--next::before,
.pagination__link--prev::before{
content:"" !important;
width:16px !important;height:16px !important;
margin:0 !important;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* šablona šipku otáčí a dává tlačítku šedé pozadí – srovnat */
.pagination__list .pagination__link,
.pagination__list .pagination__link.btn,
.pagination__list .pagination__link.btn-secondary{border:1px solid #e0eef9 !important;background:#fff !important;color:#163d5c !important;}
.pagination__list .pagination__link:hover{border-color:#9fcdf0 !important;background:#f5faff !important;color:#0b6fb0 !important;}
.pagination__list .pagination__link--next::before{transform:none !important;}
.pagination__list .pagination__link--prev::before{transform:rotate(180deg) !important;}
.pagination__link--next::after,
.pagination__link--prev::after{display:none !important;}
.goToTop__button{
display:inline-flex !important;align-items:center;gap:8px;
height:46px !important;
margin:0 !important;
padding:0 18px !important;
border:1px solid #e0eef9 !important;
border-radius:14px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:14.5px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
transition:background .2s,border-color .2s,color .2s;
}
.goToTop__button::before{
content:"" !important;
width:14px;height:14px;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.goToTop__button::after{display:none !important;}
.goToTop__button:hover{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
.goToTop__button:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
/* ---------- mobil ---------- */
@media (max-width:767px){
/* otevřené řazení – šipka nahoru u vybrané položky (zavře se klepnutím na ni) */
.listSorting.otevreno .listSorting__control--current{position:relative !important;}
.listSorting.otevreno .listSorting__control--current::after{
content:"" !important;
display:block !important;
position:absolute !important;
top:50% !important;right:16px !important;
width:14px !important;height:14px !important;
margin-top:-7px !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.listingControls{gap:12px;margin-top:22px !important;padding-top:18px !important;}
.listingControls .loadMore__button{width:100%;min-width:0;}
.pagination__currentPage,
.pagination__link{min-width:42px !important;height:42px !important;border-radius:12px !important;font-size:14px !important;}
.listingControls .itemsTotal{flex:0 0 100%;text-align:center;}
}
/* ==================== cleno-produkt-zalozky.css ==================== */
/* =====================================================================
Cleno.cz – detail produktu: recenze, diskuze, parametry,
záložky na mobilu a nadpis Alternativní náhrady
===================================================================== */
/* ---------- jednotné nadpisy sekcí (jako „K tomuto produktu doporučujeme…“) ---------- */
html body.type-detail #ratingTab > h2,
html body.type-detail #productDiscussion h2,
html body.type-detail .extended-description > h3{
margin:0 0 18px !important;
padding:0 0 12px !important;
border:0 !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:#163d5c !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.015em;
text-align:left !important;
text-transform:none !important;
}
html body.type-detail #ratingTab > h2::before,html body.type-detail #ratingTab > h2::after,
html body.type-detail #productDiscussion h2::before,html body.type-detail #productDiscussion h2::after,
html body.type-detail .extended-description > h3::before,html body.type-detail .extended-description > h3::after{display:none !important;}
/* nadpis Alternativní náhrady (šablona ho vypisuje přes ::before) */
html body.type-detail #productsAlternative::before{
display:block !important;
margin:30px 0 18px !important;
padding:0 0 12px !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:#163d5c !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.015em;
text-align:left !important;
text-transform:none !important;
}
/* =====================================================================
RECENZE – stejný design jako stránka Hodnocení obchodu
===================================================================== */
html body.type-detail #ratingTab #ratingWrapper{margin:30px 0 40px !important;
padding:28px !important;
border:1px solid #e0eef9 !important;
border-radius:28px !important;
background:linear-gradient(135deg,#f5faff 0%,#eaf4fd 100%) !important;
box-shadow:none !important;}
html body.type-detail #ratingTab .rate-wrap{display:grid !important;
grid-template-columns:280px minmax(0,1fr) !important;
align-items:center !important;
gap:36px !important;
margin:0 !important;padding:0 !important;}
html body.type-detail #ratingTab .rate-wrap::before,
html body.type-detail #ratingTab .rate-wrap::after{display:none !important;}
html body.type-detail #ratingTab .rate-average-wrap{width:auto !important;
margin:0 !important;
padding:28px 24px !important;
border:1px solid #e0eef9 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
text-align:center !important;}
html body.type-detail #ratingTab .rate-average-inner{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;width:auto !important;padding:0 !important;}
html body.type-detail #ratingTab .rate-average{display:block !important;
width:auto !important;height:auto !important;
color:#163d5c !important;
font-size:60px !important;font-weight:800 !important;
line-height:1 !important;
letter-spacing:-.02em !important;}
html body.type-detail #ratingTab .rate-average::after{content:" / 5" !important;
color:#9fb3c4 !important;
font-size:22px !important;font-weight:700 !important;
letter-spacing:0 !important;}
html body.type-detail #ratingTab .rate-star-wrap{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;width:auto !important;}
html body.type-detail #ratingTab .rate-average-wrap .stars .star{width:26px !important;height:26px !important;}
html body.type-detail #ratingTab .rate-average-wrap .stars .star::before{font-size:24px !important;}
html body.type-detail #ratingTab .rate-average-wrap .stars-label{display:block !important;
width:auto !important;
padding:6px 14px !important;
border-radius:50px !important;
background:#eef6fd !important;
color:#0b6fb0 !important;
font-size:13.5px !important;font-weight:800 !important;
line-height:1.4 !important;}
html body.type-detail #ratingTab .votes{display:flex !important;flex-direction:column !important;gap:12px !important;width:auto !important;margin:0 !important;padding:0 !important;}
html body.type-detail #ratingTab .rate-list{display:grid !important;
grid-template-columns:52px minmax(0,1fr) !important;
align-items:center !important;
gap:14px !important;
width:auto !important;
margin:0 !important;padding:0 !important;}
html body.type-detail #ratingTab .rate-star{display:flex !important;align-items:center !important;gap:6px !important;
width:auto !important;
margin:0 !important;}
html body.type-detail #ratingTab .rate-value{color:#163d5c !important;font-size:15px !important;font-weight:800 !important;line-height:1 !important;}
html body.type-detail #ratingTab .rate-star .star{width:16px !important;height:16px !important;}
html body.type-detail #ratingTab .rate-star .star::before{color:#fecb3e !important;font-size:16px !important;}
html body.type-detail #ratingTab .rate-block{position:relative !important;
width:auto !important;height:12px !important;
margin:0 72px 0 0 !important;
border-radius:12px !important;
background:#dbe8f4 !important;
overflow:visible !important;}
html body.type-detail #ratingTab .rate-bar{position:relative !important;
display:block !important;
width:var(--rate-bar-width,0%) !important;
min-width:0 !important;
height:100% !important;
border-radius:12px !important;
background:linear-gradient(90deg,#239ceb 0%,#0b6fb0 100%) !important;}
html body.type-detail #ratingTab .rate-count{position:absolute !important;
top:50% !important;left:auto !important;
right:-72px !important;
width:60px !important;
margin:0 !important;
transform:translateY(-50%) !important;
color:#4f6577 !important;
font-size:13.5px !important;font-weight:700 !important;
text-align:left !important;
white-space:nowrap !important;}
html body.type-detail #ratingTab .rate-block{display:flex !important;}
html body.type-detail #ratingTab .rate-bar{position:static !important;}
html body.type-detail #ratingTab .rate-count{right:-72px !important;}
html body.type-detail #ratingTab .rate-count.active{color:#163d5c !important;font-weight:800 !important;}
html body.type-detail #ratingTab #ratingsList{display:block !important;
column-count:3 !important;
column-gap:18px !important;
width:auto !important;
margin:0 !important;padding:0 !important;}
html body.type-detail #ratingTab #ratingsList::before,
html body.type-detail #ratingTab #ratingsList::after{display:none !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap{position:relative !important;
display:inline-block !important;
width:100% !important;height:auto !important;min-height:0 !important;
margin:0 0 18px !important;
padding:22px !important;
border:1px solid #e0eef9 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
float:none !important;
break-inside:avoid !important;
vertical-align:top !important;
transition:border-color .2s,transform .2s !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap:hover{border-color:#bcdcf4 !important;transform:translateY(-2px) !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap::after{content:"" !important;
position:absolute !important;
top:22px !important;right:22px !important;
width:30px !important;height:30px !important;
border-radius:10px !important;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23239ceb'%3E%3Cpath d='M9.6 6C6.5 7.3 4.5 10 4.5 13.6V18h6v-6H8c0-2.2 1.2-3.8 3.1-4.6L9.6 6zm9 0c-3.1 1.3-5.1 4-5.1 7.6V18h6v-6H17c0-2.2 1.2-3.8 3.1-4.6L18.6 6z'/%3E%3C/svg%3E") center / 16px no-repeat !important;}
html body.type-detail #ratingTab #ratingsList .vote-header{display:flex !important;align-items:center !important;gap:12px !important;
margin:0 0 14px !important;
padding:0 42px 0 0 !important;}
html body.type-detail #ratingTab #ratingsList .vote-pic{position:relative !important;
display:block !important;
flex:0 0 46px !important;
width:46px !important;height:46px !important;
margin:0 !important;
border-radius:50% !important;
overflow:hidden !important;}
html body.type-detail #ratingTab #ratingsList .vote-initials{position:absolute !important;
inset:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;
width:100% !important;height:100% !important;
border-radius:50% !important;
background:linear-gradient(135deg,#239ceb 0%,#0b6fb0 100%) !important;
color:#fff !important;
font-size:15px !important;font-weight:800 !important;
letter-spacing:.02em !important;}
html body.type-detail #ratingTab #ratingsList .vote-pic img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;}
html body.type-detail #ratingTab #ratingsList .vote-summary{display:block !important;min-width:0 !important;flex:1 1 auto !important;}
html body.type-detail #ratingTab #ratingsList .vote-name,
html body.type-detail #ratingTab #ratingsList .vote-name span{display:block !important;
margin:0 0 4px !important;
color:#163d5c !important;
font-size:15.5px !important;font-weight:800 !important;
line-height:1.3 !important;
white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
html body.type-detail #ratingTab #ratingsList .vote-rating{display:flex !important;align-items:center !important;gap:8px !important;margin:0 !important;}
html body.type-detail #ratingTab #ratingsList .vote-rating .star::before{font-size:15px !important;}
html body.type-detail #ratingTab #ratingsList .vote-delimeter{display:none !important;}
html body.type-detail #ratingTab #ratingsList .vote-time{color:#8a96a3 !important;font-size:12.5px !important;font-weight:600 !important;line-height:1 !important;}
html body.type-detail #ratingTab #ratingsList .vote-content{margin:0 !important;padding:0 !important;
color:#4f6577 !important;
font-size:15px !important;font-weight:500 !important;
line-height:1.6 !important;}
@media (max-width:1199px){
html body.type-detail #ratingTab #ratingsList{column-count:2 !important;}
}
@media (max-width:991px){
html body.type-detail #ratingTab .rate-wrap{grid-template-columns:240px minmax(0,1fr) !important;gap:24px !important;}
}
@media (max-width:767px){
html body.type-detail #ratingTab #ratingWrapper{margin:20px 0 24px !important;padding:16px !important;border-radius:22px !important;}
html body.type-detail #ratingTab .rate-wrap{grid-template-columns:1fr !important;gap:18px !important;}
html body.type-detail #ratingTab .rate-average-wrap{padding:22px 16px !important;border-radius:18px !important;}
html body.type-detail #ratingTab .rate-average{font-size:50px !important;}
html body.type-detail #ratingTab .votes{gap:10px !important;padding:0 4px !important;}
html body.type-detail #ratingTab .rate-list{grid-template-columns:44px minmax(0,1fr) !important;gap:10px !important;}
html body.type-detail #ratingTab .rate-block{margin-right:58px !important;height:10px !important;}
html body.type-detail #ratingTab .rate-count{right:-58px !important;width:52px !important;font-size:12.5px !important;}
html body.type-detail #ratingTab #ratingsList{column-count:1 !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap{margin-bottom:12px !important;padding:18px !important;border-radius:18px !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap::after{top:18px !important;right:18px !important;}
html body.type-detail #ratingTab #ratingsList .vote-content{font-size:14.5px !important;}
}
html body.type-detail #ratingTab .rate-value{display:inline-block !important;}
html body.type-detail #ratingTab #ratingsList{column-count:auto !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:stretch !important;
margin-left:-7.5px !important;margin-right:-7.5px !important;
column-gap:3px !important;row-gap:4px !important;}
html body.type-detail #ratingTab #ratingsList .vote-wrap{display:block !important;width:auto !important;align-self:stretch !important;}
html body.type-detail #ratingTab #ratingsList .vote-header::after{content:"" !important;display:block !important;clear:both !important;}
html body.type-detail #ratingTab #ratingsList .vote-pic{float:left !important;margin:0 12px 0 0 !important;}
html body.type-detail #ratingTab #ratingsList .vote-summary{width:auto !important;max-width:none !important;float:none !important;overflow:hidden !important;padding-top:4px !important;}
@media (max-width:1199px){
html body.type-detail #ratingTab #ratingsList{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:767px){
html body.type-detail #ratingTab #ratingsList{grid-template-columns:1fr !important;row-gap:0 !important;}
}
html body.type-detail #ratingTab .rate-value{display:inline-block !important;}
html body.type-detail #ratingTab #ratingWrapper{margin:0 0 24px !important;}
html body.type-detail #ratingTab .rate-average-wrap .stars-label span{color:inherit !important;}
html body.type-detail #ratingTab .rate-average-wrap .no-add,
html body.type-detail #ratingTab .rate-average-inner > p{
margin:4px 0 0 !important;
color:#6b7682 !important;
font-size:13.5px !important;font-weight:600 !important;
line-height:1.45 !important;
text-align:center;
}
/* tlačítko Přidat hodnocení */
html body.type-detail #ratingTab .add-comment{grid-column:1 / -1;display:flex !important;justify-content:center;margin:6px 0 0 !important;padding:0 !important;}
html body.type-detail #ratingTab .add-comment .btn,
html body.type-detail #productDiscussion .add-comment .btn,
html body.type-detail #productDiscussion .discussion-form-trigger .btn{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
height:46px !important;
margin:0 !important;
padding:0 22px !important;
border:1px solid #cfe2f2 !important;
border-radius:50px !important;
background:#fff !important;
box-shadow:none !important;
color:#0b6fb0 !important;
font-size:14.5px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
}
html body.type-detail #ratingTab .add-comment .btn:hover,
html body.type-detail #productDiscussion .add-comment .btn:hover,
html body.type-detail #productDiscussion .discussion-form-trigger .btn:hover{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
html body.type-detail #ratingTab .add-comment .btn::before,
html body.type-detail #productDiscussion .add-comment .btn::before{
content:"" !important;
width:15px;height:15px;
font-size:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body.type-detail #ratingTab .add-comment .btn:hover::before,
html body.type-detail #productDiscussion .add-comment .btn:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
/* recenze na detailu – 2 sloupce, na mobilu 1 */
html body.type-detail #ratingTab #ratingsList{grid-template-columns:repeat(2,minmax(0,1fr)) !important;margin:8px 0 0 !important;column-gap:16px !important;}
@media (max-width:767px){
html body.type-detail #ratingTab #ratingsList{grid-template-columns:1fr !important;}
}
/* =====================================================================
FORMULÁŘE (přidat hodnocení, diskuze)
===================================================================== */
html body.type-detail #ratingTab .vote-form,
html body.type-detail #rate-form,
html body.type-detail #productDiscussion .discussion-form.vote-form{
margin:16px 0 0 !important;
padding:24px !important;
border:1px solid #e0eef9 !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
html body.type-detail #ratingTab .vote-form .form-group,
html body.type-detail #productDiscussion .form-group{margin:0 0 14px !important;}
html body.type-detail #ratingTab .vote-form label,
html body.type-detail #productDiscussion form label{color:#6b7682 !important;font-size:13px !important;font-weight:700 !important;}
html body.type-detail #ratingTab .vote-form .form-control,
html body.type-detail #productDiscussion form .form-control{
height:50px !important;
padding:0 16px !important;
border:1px solid #d9e7f3 !important;
border-radius:14px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:15px !important;
box-shadow:none !important;
}
html body.type-detail #ratingTab .vote-form textarea.form-control,
html body.type-detail #productDiscussion form textarea.form-control{height:auto !important;min-height:120px;padding:14px 16px !important;line-height:1.5 !important;}
html body.type-detail #ratingTab .vote-form .form-control:focus,
html body.type-detail #productDiscussion form .form-control:focus{border-color:#239ceb !important;background:#fff !important;box-shadow:0 0 0 4px rgba(35,156,235,.12) !important;outline:0 !important;}
html body.type-detail #ratingTab .vote-form .btn,
html body.type-detail #ratingTab .vote-form [type="submit"],
html body.type-detail #productDiscussion form [type="submit"]{
height:50px !important;
padding:0 26px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
box-shadow:0 10px 20px -12px rgba(31,157,58,.8) !important;
color:#fff !important;
font-size:15px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
}
/* =====================================================================
DISKUZE
===================================================================== */
html body.type-detail #productDiscussion .discussionContainer > p:not(.helpNote){
margin:0 0 12px !important;
color:#163d5c !important;
font-size:15px !important;font-weight:700 !important;
}
html body.type-detail #productDiscussion .helpNote{
position:relative;
margin:0 0 16px !important;
padding:13px 16px 13px 44px !important;
border:1px solid #e0eef9 !important;
border-radius:16px !important;
background:#f5faff !important;
color:#4f6577 !important;
font-size:14px !important;font-weight:600 !important;
line-height:1.5 !important;
}
html body.type-detail #productDiscussion .helpNote::before{
content:"";
position:absolute;
left:16px;top:15px;
width:18px;height:18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23239ceb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body.type-detail #productDiscussion .helpNote a{color:#0b6fb0 !important;font-weight:800 !important;text-decoration:none !important;}
/* příspěvky a odpovědi */
html body.type-detail #productDiscussion .vote-wrap{
position:relative;
margin:0 0 12px !important;
padding:20px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:none !important;
}
html body.type-detail #productDiscussion .vote-wrap .vote-wrap,
html body.type-detail #productDiscussion .vote-wrap.admin-contribution,
html body.type-detail #productDiscussion .vote-wrap.admin-response{background:#f5faff !important;}
html body.type-detail #productDiscussion .vote-name,
html body.type-detail #productDiscussion .vote-name span{color:#163d5c !important;font-size:15px !important;font-weight:800 !important;}
html body.type-detail #productDiscussion .vote-time{color:#8a96a3 !important;font-size:12.5px !important;font-weight:600 !important;}
html body.type-detail #productDiscussion .vote-title{color:#163d5c !important;font-size:15px !important;font-weight:800 !important;}
html body.type-detail #productDiscussion .vote-content{color:#4f6577 !important;font-size:15px !important;line-height:1.6 !important;}
html body.type-detail #productDiscussion .vote-pic{border-radius:50%;overflow:hidden;}
html body.type-detail #productDiscussion .vote-initials{background:linear-gradient(135deg,#239ceb 0%,#0b6fb0 100%) !important;color:#fff !important;font-weight:800 !important;}
/* =====================================================================
PARAMETRY PRODUKTU
===================================================================== */
html body.type-detail .extended-description{margin:28px 0 0 !important;padding:0 !important;border:0 !important;background:none !important;}
html body.type-detail .extended-description table.detail-parameters{
width:100% !important;
margin:0 !important;
border:1px solid #e0eef9 !important;
border-collapse:separate !important;
border-spacing:0 !important;
border-radius:20px !important;
overflow:hidden;
background:#fff !important;
}
html body.type-detail .extended-description table.detail-parameters tr{background:#fff !important;}
html body.type-detail .extended-description table.detail-parameters tr:nth-child(even){background:#f8fbfe !important;}
html body.type-detail .extended-description table.detail-parameters th,
html body.type-detail .extended-description table.detail-parameters td{
padding:14px 20px !important;
border:0 !important;
border-top:1px solid #eef3f8 !important;
vertical-align:middle !important;
font-size:14.5px !important;
line-height:1.45 !important;
}
html body.type-detail .extended-description table.detail-parameters tr:first-child th,
html body.type-detail .extended-description table.detail-parameters tr:first-child td{border-top:0 !important;}
html body.type-detail .extended-description table.detail-parameters th{width:45%;color:#6b7682 !important;font-weight:600 !important;text-align:left !important;}
html body.type-detail .extended-description table.detail-parameters td{color:#163d5c !important;font-weight:800 !important;text-align:right !important;}
html body.type-detail .extended-description table.detail-parameters td a{color:#0b6fb0 !important;text-decoration:none !important;}
html body.type-detail .extended-description .row-header-label{display:inline-flex !important;align-items:center;gap:8px;color:inherit !important;}
html body.type-detail .extended-description .row-header-label-colon{display:none !important;}
html body.type-detail .extended-description .question-tooltip{
display:inline-flex !important;align-items:center;justify-content:center;
flex:0 0 18px;
width:18px !important;height:18px !important;
margin:0 !important;
border:1px solid #9fcdf0 !important;
border-radius:50% !important;
background:#eef6fd !important;
color:#0b6fb0 !important;
font-size:11px !important;font-weight:800 !important;
line-height:1 !important;
}
@media (max-width:767px){
html body.type-detail .extended-description table.detail-parameters th,
html body.type-detail .extended-description table.detail-parameters td{padding:12px 14px !important;font-size:13.5px !important;}
html body.type-detail #ratingTab > h2,
html body.type-detail #productDiscussion h2,
html body.type-detail .extended-description > h3,
html body.type-detail #productsAlternative::before{font-size:20px !important;}
}
/* =====================================================================
ZÁLOŽKY NA MOBILU – vodorovné menu s posouváním prstem
(vytváří ho skript cleno-produkt-zalozky.js, rozbalovací hlavičky šablony se schovají)
===================================================================== */
.cl-mtabs{display:none;}
@media (max-width:767px){
html body.cl-mtabs-on .p-detail-tabs-wrapper .tab-mobil{display:none !important;}
html body.cl-mtabs-on .p-detail-tabs-wrapper .tab-content > *:not(.otevreno){display:none !important;}
html body.cl-mtabs-on .p-detail-tabs-wrapper .tab-content > .otevreno{display:block !important;padding-top:18px !important;}
html body.cl-mtabs-on .p-detail-tabs-wrapper .tab-content > .extended-description{margin-top:0 !important;}
.cl-mtabs{
position:relative;
display:flex;
margin:0;
padding:0;
overflow-x:auto;
scrollbar-width:none;
background:none;
-webkit-overflow-scrolling:touch;
}
.cl-mtabs::-webkit-scrollbar{display:none;}
.cl-mtabs__inner{
display:flex;gap:4px;
flex:0 0 auto;
min-width:100%;
padding:5px;
border:1px solid #e0eef9;
border-radius:16px;
background:#f5faff;
}
.cl-mtabs button{
flex:0 0 auto;
height:42px;
padding:0 16px;
border:0;
border-radius:12px;
background:none;
color:#6b7682;
font-family:inherit;
font-size:14px;font-weight:700;
white-space:nowrap;
cursor:pointer;
transition:background .2s,color .2s;
}
.cl-mtabs button.is-active{
background:#fff;
color:#163d5c;
box-shadow:0 4px 12px -6px rgba(14,47,75,.25);
}
}
/* =====================================================================
PLOVOUCÍ LIŠTA POBO – schovat, dokud ji náš skript nepředělá
(jinak se při načtení na chvíli ukáže zelený pruh přes stránku)
===================================================================== */
#js-plugin-header:not(.cleno-sticky-atc){display:none !important;}
/* =====================================================================
VIDEA – nadpis jako ostatní sekce, video v poměru 16:9 se zaoblenými rohy
(šablona dává videu pevnou výšku 812 px)
===================================================================== */
html body.type-detail #productVideos > h3{
margin:0 0 14px !important;
padding:0 0 12px !important;
border:0 !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:#163d5c !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.015em;
text-align:left !important;
}
html body.type-detail #productVideos > h3::before,
html body.type-detail #productVideos > h3::after{display:none !important;}
html body.type-detail #productVideos iframe{
display:block !important;
width:100% !important;max-width:960px;
height:auto !important;
aspect-ratio:16 / 9;
margin:0 0 28px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#0d1b26;
overflow:hidden;
}
@media (max-width:767px){
html body.type-detail #productVideos > h3{font-size:20px !important;}
html body.type-detail #productVideos iframe{margin-bottom:20px !important;border-radius:16px !important;}
}
/* =====================================================================
HLÁŠKY – diskuze jen pro přihlášené, už ohodnoceno
===================================================================== */
html body.type-detail #productDiscussion .helpNote.cl-login-note{
display:flex !important;flex-direction:column;gap:6px;
margin:0 0 16px !important;
padding:20px 20px 20px 62px !important;
border:1px solid #cfe2f2 !important;
border-radius:20px !important;
background:#f5faff !important;
}
/* ikona zámku */
html body.type-detail #productDiscussion .helpNote.cl-login-note::before{
content:"" !important;
position:absolute;
left:18px;top:20px;
width:30px;height:30px;
border:1px solid #d6e8f6;
border-radius:10px;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}
.cl-login-note__title{color:#163d5c;font-size:15.5px;font-weight:800;line-height:1.35;}
.cl-login-note__text{color:#4f6577;font-size:14px;font-weight:500;line-height:1.5;}
.cl-login-note__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
html body.type-detail #productDiscussion .helpNote a.cl-login-note__btn{
display:inline-flex;align-items:center;justify-content:center;
height:44px;
padding:0 20px;
border:1px solid #cfe2f2;
border-radius:12px;
background:#fff;
color:#0b6fb0 !important;
font-size:14.5px;font-weight:800 !important;
text-decoration:none !important;
}
html body.type-detail #productDiscussion .helpNote a.cl-login-note__btn--primary{
border:0;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%);
color:#fff !important;
}
html body.type-detail #ratingTab .cl-voted-note{
margin:6px 0 0 !important;
padding:8px 14px !important;
border-radius:12px;
background:#e7f6ec;
color:#1f9d3a !important;
font-size:13.5px !important;font-weight:700 !important;
text-align:center;
}
@media (max-width:767px){
html body.type-detail #productDiscussion .helpNote.cl-login-note{padding:16px !important;}
html body.type-detail #productDiscussion .helpNote.cl-login-note::before{position:static;display:block;margin-bottom:4px;}
.cl-login-note__btn{flex:1 1 0;}
}
/* záložky na počítači – po kliknutí se obsah „zaměří“, bez modrého rámečku */
.p-detail-tabs-wrapper .tab-content [tabindex="-1"]:focus,
.p-detail-tabs-wrapper .tab-content [tabindex="-1"]:focus-visible,
.p-detail-tabs-wrapper .tab-pane:focus,
.p-detail-tabs-wrapper .tab-pane:focus-visible{outline:none !important;box-shadow:none !important;}
/* recenze – hláška „Buďte první…“ (zatím žádná slovní recenze) jako jemná karta pod panelem hodnocení */
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]{
display:flex !important;align-items:center !important;gap:12px !important;
margin:-16px 0 40px !important;
padding:14px 18px !important;
border:1px dashed #cfe2f2 !important;
border-radius:18px !important;
background:#fff !important;
color:transparent !important;
font-size:0 !important;line-height:0 !important;
}
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]::before{
content:"" !important;
flex:0 0 38px;width:38px;height:38px;
border-radius:50%;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E") center / 19px no-repeat;
}
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]::after{
content:"Zatím tu není žádná slovní recenze. Napište první – pomůžete ostatním s výběrem." !important;
color:#6b7682 !important;
font-size:14px !important;font-weight:600 !important;line-height:1.45 !important;
}
/* dokud ji skript nepřesune, nad panelem by se jen mihla */
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]:not(.cl-comment-notice){display:none !important;}
@media (max-width:767px){
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]{margin:-8px 0 24px !important;padding:12px 14px !important;border-radius:16px !important;}
html body.type-detail #ratingTab > [data-testid="textCommentNotice"]::after{font-size:13.5px !important;}
}
/* =====================================================================
OKNO „PŘIDEJTE HODNOCENÍ“
počítač: okno uprostřed se ztmaveným pozadím, mobil: vyjede zespodu
hvězdičky nahoře ve zvýrazněném boxu, pod nimi jméno, e-mail, komentář a tlačítko
===================================================================== */
html body.type-detail #rate-form.vote-form.visible{
position:fixed !important;left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;
transform:translate(-50%,-50%) !important;
width:min(560px,calc(100vw - 32px)) !important;height:auto !important;max-height:calc(100dvh - 48px) !important;
overflow-y:auto !important;margin:0 !important;padding:26px 26px 24px !important;
border:0 !important;border-radius:24px !important;background:#fff !important;
box-shadow:0 0 0 100vmax rgba(14,40,62,.45),0 24px 60px rgba(14,40,62,.25) !important;
z-index:2147483000 !important;animation:clRateIn .22s ease-out;
}
html body.type-detail #rate-form.visible > h3{display:none !important;}
/* šablona formulář umisťuje absolutně – v okně musí být normálně v toku, jinak okno nemá výšku */
html body.type-detail #rate-form.visible form{
position:static !important;inset:auto !important;width:auto !important;height:auto !important;max-height:none !important;overflow:visible !important;
display:flex !important;flex-direction:column;gap:12px;margin:0 !important;padding:0 !important;
}
html body.type-detail #rate-form.visible form::before{
content:"Přidejte hodnocení";order:-2;
display:block !important;position:static !important;margin:0 48px 4px 0 !important;padding:0 !important;
color:#163d5c !important;font-size:22px !important;font-weight:800 !important;line-height:1.25 !important;text-align:left !important;
}
html body.type-detail #rate-form.visible .close{
position:absolute !important;top:20px !important;right:20px !important;width:38px !important;height:38px !important;margin:0 !important;
border-radius:50% !important;opacity:1 !important;cursor:pointer;
background:#eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163d5c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px no-repeat !important;
}
html body.type-detail #rate-form.visible .close::before,
html body.type-detail #rate-form.visible .close::after{display:none !important;}
html body.type-detail #rate-form.visible .form-legend{display:none !important;}
html body.type-detail #rate-form.visible .form-group{margin:0 !important;}
/* hvězdičky jako první a hlavní krok */
html body.type-detail #rate-form.visible .rating-stars-group{
order:-1;margin:0 0 4px !important;padding:16px 12px 14px !important;
border:1px solid #e0eef9 !important;border-radius:18px !important;
background:linear-gradient(135deg,#ebf5fe 0%,#f3f9fe 50%,#fafcff 100%) !important;text-align:center !important;
}
html body.type-detail #rate-form.visible .rating-stars-description,
html body.type-detail #rate-form.visible .rating-stars-description *{margin:0 0 8px !important;font-size:0 !important;line-height:0 !important;text-align:center !important;}
html body.type-detail #rate-form.visible .rating-stars-description::before{content:"Kolik hvězdiček dáváte?";display:block;color:#163d5c;font-size:16px;font-weight:800;line-height:1.3;}
html body.type-detail #rate-form.visible .rating-stars-description::after{content:"Klepněte na hvězdičku – 5 je nejlepší";display:block;margin-top:2px;color:#6b7682;font-size:13px;font-weight:600;line-height:1.3;}
html body.type-detail #rate-form.visible .rating-stars-wrapper{justify-content:center !important;gap:4px !important;}
html body.type-detail #rate-form.visible .rating-star{width:50px !important;height:46px !important;margin:0 !important;cursor:pointer;}
html body.type-detail #rate-form.visible .rating-star::before{font-size:40px !important;color:#d3dee8 !important;transition:color .15s,transform .15s;}
html body.type-detail #rate-form.visible .rating-star.full::before{color:#fecb3e !important;}
html body.type-detail #rate-form.visible .rating-star:active::before{transform:scale(.92);}
html body.type-detail #rate-form.visible label{color:#6b7682 !important;font-size:13px !important;font-weight:700 !important;}
html body.type-detail #rate-form.visible textarea.form-control{min-height:110px !important;}
html body.type-detail #rate-form.visible [type="submit"],
html body.type-detail #rate-form.visible .btn{width:100% !important;height:54px !important;margin-top:4px !important;border-radius:16px !important;}
/* při otevřeném okně nic nepřekáží */
body:has(#rate-form.visible) .clb,
body:has(#rate-form.visible) #whisper-chat-widget-root,
body:has(#rate-form.visible) .cleno-sticky-atc{display:none !important;}
@keyframes clRateIn{from{opacity:0;}}
@keyframes clRateUp{from{transform:translateY(40px);opacity:.6;}}
@media (max-width:767px){
html body.type-detail #rate-form.vote-form.visible{
left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;transform:none !important;width:auto !important;
max-height:92dvh !important;padding:22px 18px calc(20px + env(safe-area-inset-bottom,0px)) !important;
border-radius:24px 24px 0 0 !important;animation:clRateUp .26s ease-out;
}
html body.type-detail #rate-form.visible form::before{font-size:20px !important;}
html body.type-detail #rate-form.visible .close{top:16px !important;right:16px !important;}
}
/* ==================== cleno-spodni-lista.css ==================== */
/* =====================================================================
Cleno.cz – spodní navigační lišta na mobilu
Plovoucí lišta: Účet · Domů · Košík · Hledat · Kategorie
Košík ukazuje cenu a kroužek „kolik zbývá do dopravy zdarma“.
Hlavička se při scrollu dolů schová, při scrollu nahoru nebo klepnutí na Hledat se vrátí.
===================================================================== */
.clb-clear{display:none;} /* křížek ve vyhledávání jen na mobilu (viz níže) */
.clb{display:none;}
@media (max-width:767px){
:root{--clb-h:62px;--clb-gap:10px;--clb-safe:env(safe-area-inset-bottom,0px);}
.clb{
position:fixed;
left:var(--clb-gap);right:var(--clb-gap);
bottom:calc(var(--clb-gap) + var(--clb-safe));
z-index:900;
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
height:var(--clb-h);
padding:0 4px;
border:1px solid #e0eef9;
border-radius:22px;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
box-shadow:0 2px 6px rgba(22,61,92,.05);
font-family:"Nunito Sans",sans-serif;
transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s;
}
/* při psaní (otevřená klávesnice) a v objednávce lištu schováme */
body.clb-typing .clb,
body.clb-chat-open .clb{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none;}
.clb__item{
position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-width:0;height:100%;
padding:0;margin:0;
border:0;background:none;
color:#5d6d7c !important;
font:inherit;font-size:11px;font-weight:700;line-height:1.1;
text-decoration:none !important;
-webkit-tap-highlight-color:transparent;
cursor:pointer;
}
.clb__ico{
position:relative;
display:flex;align-items:center;justify-content:center;
width:46px;height:30px;
border-radius:12px;
transition:background .2s,transform .15s;
}
.clb__ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.clb__lbl{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.clb__item:active .clb__ico{transform:scale(.9);}
/* aktivní položka – modrá ikona v jemné pilulce */
.clb__item.is-active{color:#0b6fb0 !important;}
.clb__item.is-active .clb__ico{background:#eef6fd;}
.clb__item.is-active .clb__lbl{color:#163d5c;font-weight:800;}
/* košík – počet kusů */
.clb__badge{
position:absolute;top:-3px;right:4px;
min-width:18px;height:18px;
padding:0 5px;
border:2px solid #fff;
border-radius:10px;
background:linear-gradient(135deg,#34c759,#1f9d3a);
color:#fff;
font-size:10.5px;font-weight:800;line-height:14px;text-align:center;
box-sizing:border-box;
}
.clb__badge[hidden]{display:none;}
.clb__badge.is-bump{animation:clb-bump .45s cubic-bezier(.3,1.6,.5,1);}
@keyframes clb-bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
/* košík – kroužek postupu k dopravě zdarma (zelená část = kolik už máte) */
.clb__ring{
position:absolute;left:50%;top:50%;
width:34px;height:34px;
margin:-17px 0 0 -17px;
border-radius:50%;
background:conic-gradient(#34c759 calc(var(--clb-p,0) * 1%),#e3eef8 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
transition:background .4s;
}
.clb__ring[hidden]{display:none;}
.clb__item--cart .clb__ico svg{width:19px;height:19px;}
.clb__item--cart .clb__ring{width:32px;height:32px;margin:-16px 0 0 -16px;}
.clb__item--cart .clb__badge{top:-5px;right:2px;}
/* aktivní košík: místo hranaté pilulky (kolidovala s kroužkem) jen kulaté podbarvení uvnitř kroužku */
.clb__item--cart.is-active .clb__ico{background:none;}
.clb__item--cart.is-active .clb__ico::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#eef6fd;}
.clb__item--cart.is-active .clb__ico svg{position:relative;}
/* bublina nad košíkem po přidání zboží: kolik zbývá do dopravy zdarma */
.clb__tip{
position:absolute;
left:50%;bottom:calc(100% + 10px);
max-width:240px;
padding:9px 12px;
border-radius:14px;
background:#163d5c;
color:#fff;
font-size:12.5px;font-weight:700;line-height:1.35;
white-space:nowrap;
opacity:0;transform:translate(-50%,6px);
transition:opacity .25s,transform .25s;
pointer-events:none;
}
.clb__tip::after{
content:"";
position:absolute;left:50%;top:100%;margin-left:-7px; /* šipka míří na košík uprostřed */
border:7px solid transparent;border-top-color:#163d5c;border-bottom:0;
}
.clb__tip b{color:#7ee59a;font-weight:800;}
.clb__tip.is-show{opacity:1;transform:translate(-50%,0);}
/* na detailu produktu je nad lištou ještě „Do košíku“ – bublina jde nad ni */
body.clb-on.cleno-sticky-visible:has(.cleno-sticky-atc) .clb__tip{bottom:calc(100% + 76px);}
body.clb-on.cleno-sticky-visible:has(.cleno-sticky-atc) .clb__tip::after{display:none;}
.clb__item--cart .clb__lbl.is-price{color:#163d5c;font-weight:800;}
.clb__item--cart.is-free .clb__lbl::after{content:" ✓";color:#1f9d3a;}
/* ikony, které jsou teď dole, v hlavičce schováme (zůstává e-mail a telefon) */
body.clb-on .top-navigation-bar a[data-target="navigation"],
body.clb-on .top-navigation-bar a.toggle-window[data-target="login"],
body.clb-on .top-navigation-bar .responsive-tools > a:not(.project-email):not(.project-phone),
html body.clb-on #header a.cart-count,
html body.clb-on .navigation-buttons a.cart-count{display:none !important;}
body.clb-on .top-navigation-bar a.project-phone{right:12px !important;}
body.clb-on .top-navigation-bar a.project-email{right:48px !important;}
/* řádek s vyhledáváním se při scrollu dolů schová (logo, které šablona posouvá z hlavičky nahoru, zůstává) */
/* (dolní okraj ořezu je daleko pod hlavičkou, ať se neořezávají okna přihlášení, košíku a našeptávač) */
body.clb-on #header{clip-path:inset(-80px 0 -100vh 0);}
body.clb-on #header .search{transition:opacity .2s,transform .25s;}
body.clb-on.clb-head-hidden #header{clip-path:inset(-80px 0 100% 0);}
body.clb-on.clb-head-hidden #header .search{opacity:0;transform:translateY(-10px);pointer-events:none;}
/* křížek pro smazání hledaného textu – ukáže se, jen když je v poli něco napsané (vedle tlačítka HLEDAT) */
#header .search-form.clb-has-q .clb-clear{
display:flex;position:absolute;top:50%;right:96px;z-index:3;
width:30px;height:30px;margin:0;padding:0;
align-items:center;justify-content:center;
border:0;border-radius:50%;
background:#eef6fd;color:#163d5c;
transform:translateY(-50%);cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
#header .search-form .clb-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}
#header .search-form .clb-clear:active{background:#dcebf8;}
#header .search-form.clb-has-q .query-input{padding-right:132px !important;}
/* vlastní křížek prohlížeče (u některých) schováme, ať nejsou dva */
#header .search-form .query-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
/* obsah stránky nesmí skončit pod lištou – musí jít dojet až pod poslední blok (např. „Potřebujete pomoc?“).
Šablona má body i html na výšku okna a stránka se roluje v obalu .overall-wrapper, proto odsazujeme jeho. */
body.clb-on .overall-wrapper{padding-bottom:calc(var(--clb-h) + var(--clb-gap) * 2 + var(--clb-safe)) !important;}
body.clb-on:not(:has(.overall-wrapper)){padding-bottom:calc(var(--clb-h) + var(--clb-gap) * 2 + var(--clb-safe)) !important;}
/* patička je na mobilu přesunutá do obalu (kvůli hlavičce) – místo pro lištu patří do patičky, ať pod ní není šedý pruh */
body.clb-on .overall-wrapper:has(> footer:last-child){padding-bottom:0 !important;}
body.clb-on .overall-wrapper > footer:last-child{padding-bottom:calc(var(--clb-h) + var(--clb-gap) * 2 + var(--clb-safe) + 8px) !important;}
/* s lištou „Do košíku“ nad navigací je potřeba ještě víc místa */
body.clb-on.cleno-sticky-visible:has(.cleno-sticky-atc) .overall-wrapper{padding-bottom:calc(var(--clb-h) + 64px + var(--clb-gap) * 2 + var(--clb-safe)) !important;}
/* ---------- detail produktu: „Do košíku“ + navigace = jeden společný panel ----------
horní část s cenou a tlačítkem, pod ní oddělená navigace, kolem jeden rámeček */
body.clb-on .cleno-sticky-atc{
left:var(--clb-gap) !important;right:var(--clb-gap) !important;
bottom:calc(var(--clb-gap) + var(--clb-safe) + var(--clb-h) - 1px) !important;
min-height:64px !important;
padding:8px 10px !important;
border:1px solid #e0eef9 !important;border-bottom:0 !important;
border-radius:22px 22px 0 0 !important;
background:#fff !important;
box-shadow:0 -2px 6px rgba(22,61,92,.04) !important;
}
/* cena vycentrovaná ve svém sloupci (ne přilepená vlevo nahoře), vedle počet kusů a tlačítko */
body.clb-on .cleno-sticky-ui{grid-template-columns:minmax(0,1fr) 96px auto !important;column-gap:10px !important;align-items:center !important;}
body.clb-on .cleno-sticky-price-block{align-items:center !important;justify-content:center !important;padding:0 !important;text-align:center !important;}
body.clb-on .cleno-sticky-price{font-size:19px !important;line-height:1.1 !important;}
body.clb-on .cleno-sticky-stock{margin-top:4px !important;}
body.clb-on .cleno-sticky-qty{width:96px !important;}
body.clb-on .cleno-sticky-cta{min-width:112px !important;padding:0 16px !important;font-size:14.5px !important;}
/* při otevřeném AI chatu schováme i „Do košíku“ */
body.clb-on.clb-chat-open .cleno-sticky-atc{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
/* tlačítko „Do košíku“ bez stínu */
.cleno-sticky-atc .cleno-sticky-cta,
.cleno-sticky-atc .cleno-sticky-cta:hover,
.cleno-sticky-atc .cleno-sticky-cta:focus{box-shadow:none !important;}
body.clb-on.cleno-sticky-visible:has(.cleno-sticky-atc) .clb{
border-top-color:transparent;
border-radius:0 0 22px 22px;
background:#fff;
box-shadow:0 2px 6px rgba(22,61,92,.05);
}
/* jemná dělicí čára mezi „Do košíku“ a navigací, odsazená od krajů */
body.clb-on.cleno-sticky-visible:has(.cleno-sticky-atc) .clb::before{
content:"";
position:absolute;left:16px;right:16px;top:-1px;
height:1px;background:#e6eef6;
}
/* ---------- otevřené přihlášení / košík v hlavičce ----------
ztmavené pozadí patří k hlavičce – když je hlavička při scrollu schovaná (ořez), zmizelo by i ztmavení */
body.clb-on.user-action-visible #header{clip-path:none !important;}
body.clb-on.user-action-visible #header .search{opacity:1;transform:none;pointer-events:auto;}
/* „Do košíku“ a AI chat by byly nad oknem přihlášení */
body.clb-on.user-action-visible .cleno-sticky-atc{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
body.clb-on.user-action-visible #whisper-chat-widget-root{opacity:0 !important;pointer-events:none !important;}
/* „Do košíku“ je schované – navigace zase samostatná, zaoblená i nahoře */
body.clb-on.user-action-visible .clb{border-radius:22px;border-top-color:#e0eef9;}
body.clb-on.user-action-visible .clb::before{display:none;}
/* okno přihlášení vyjede zespodu nad lištou – ve stejné výšce a šířce jako okno Pomoc;
na menších telefonech se uvnitř roluje */
body.clb-on.login-window-visible .popup-widget.login-widget{
top:auto !important;
bottom:calc(var(--clb-h) + var(--clb-gap) * 2 + var(--clb-safe)) !important;
left:var(--clb-gap) !important;right:var(--clb-gap) !important;
margin:0 !important;
border-radius:22px !important;
max-height:calc(100vh - var(--clb-h) - var(--clb-gap) * 2 - var(--clb-safe) - 16px) !important;
max-height:calc(100dvh - var(--clb-h) - var(--clb-gap) * 2 - var(--clb-safe) - 16px) !important;
animation:clb-sheet-up .25s cubic-bezier(.2,.8,.2,1) !important;
}
@keyframes clb-sheet-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* prázdný košík má dole navíc 40 px – s lištou má být mezera pod „Potřebujete pomoc?“ stejná jako v plném košíku */
body.clb-on .cart-inner.cart-empty{padding-bottom:0 !important;}
/* ---------- košík: okno „Potřebujete pomoc?“ (tlačítko Pomoc místo Hledat) ---------- */
.clb-help{
position:absolute;
left:0;right:0;bottom:calc(100% + 10px);
padding:18px 16px 16px;
border:1px solid #e0eef9;
border-radius:22px;
background:#fff;
box-shadow:0 2px 6px rgba(22,61,92,.05);
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);
}
body.clb-help-open .clb-help{opacity:1;transform:none;pointer-events:auto;}
.clb-help__x{
position:absolute;top:14px;right:14px;
width:34px;height:34px;padding:0;
border:1px solid #e0eef9;border-radius:11px;
background:#f5faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='%23163d5c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.clb-help__t{display:block;padding-right:44px;color:#163d5c;font-size:17px;font-weight:800;line-height:1.3;}
.clb-help__s{display:block;margin:3px 0 14px;padding-right:44px;color:#6b7682;font-size:13.5px;font-weight:600;line-height:1.4;}
.clb-help__btns{display:flex;flex-direction:column;gap:8px;}
.clb-help__btn{
display:flex;align-items:center;gap:12px;
width:100%;
padding:10px 12px;
border:1px solid #e0eef9;border-radius:14px;
background:#f5faff;
color:#4f6577 !important;
font:inherit;font-size:13px;font-weight:600;line-height:1.3;text-align:left;
text-decoration:none !important;
cursor:pointer;
}
.clb-help__btn svg{
flex:0 0 38px;width:38px;height:38px;
padding:9px;box-sizing:border-box;
border-radius:50%;
background:#fff;
fill:none;stroke:#0b6fb0;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.clb-help__btn span{display:flex;flex-direction:column;min-width:0;}
.clb-help__btn b{color:#163d5c;font-size:14.5px;font-weight:800;}
.clb-help__btn--p{border-color:transparent;background:linear-gradient(135deg,#34c759,#1f9d3a);color:rgba(255,255,255,.9) !important;}
.clb-help__btn--p b{color:#fff;}
.clb-help__btn--p svg{background:rgba(255,255,255,.2);stroke:#fff;}
.clb-help__btn:active{transform:scale(.98);}
/* ztmavení stránky pod oknem; lišta zůstává nad ním, chat se schová */
body.clb-help-open::before{content:"";position:fixed;inset:0;z-index:899;background:rgba(14,38,60,.45);}
body.clb-help-open #whisper-chat-widget-root{opacity:0 !important;pointer-events:none !important;}
/* v košíku a objednávce bublinu chatu neukazujeme – otevírá se tlačítkem „Zeptat se asistenta“ v okně Pomoc */
body.clb-on.ordering-process:not(.clb-chat-open) #whisper-chat-widget-root{opacity:0 !important;pointer-events:none !important;}
/* v košíku už ikonu košíku v hlavičce nepotřebujeme – je dole */
body.clb-on .cl-cart-link{display:none !important;}
}
/* ==================== cleno-ucet.css ==================== */
/* =====================================================================
Cleno.cz – zákaznický účet (/klient/…)
Menu s ikonkami, nástěnka (cleno-ucet.js), tabulky jako karty, formuláře.
Platí na všech stránkách účtu (poznají se podle menu .client-center-box).
===================================================================== */
html body:has(.client-center-box):has(#content){
--ca-head:#163d5c;
--ca-text:#4f6577;
--ca-muted:#6b7682;
--ca-blue:#239ceb;
--ca-blue-d:#0b6fb0;
--ca-line:#e0eef9;
--ca-soft:#f5faff;
--ca-soft2:#eef6fd;
--ca-green:#1f9d3a;
}
/* obsah bez rámečku kolem – karty mají vlastní */
html body:has(.client-center-box):has(#content) #content .content-inner{
padding:0 !important;
border:0 !important;border-radius:0 !important;
background:none !important;
box-shadow:none !important;
}
/* ---------- nadpisy stránek ---------- */
html body:has(.client-center-box):has(#content) #content .content-inner > h1{
margin:0 0 20px !important;
padding:0 0 12px !important;
border:0 !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:var(--ca-head) !important;
font-size:28px !important;font-weight:800 !important;
line-height:1.2 !important;letter-spacing:-.015em;
text-align:left !important;text-transform:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > h2,
html body:has(.client-center-box):has(#content) #content .content-inner h2{
margin:26px 0 14px !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--ca-head) !important;
font-size:19px !important;font-weight:800 !important;
line-height:1.3 !important;
text-align:left !important;text-transform:none !important;
}
/* na nástěnce je nadpis v úvodní kartě */
html body:has(.client-center-box):has(#content) #content .content-inner.cl-has-dash > h1{display:none !important;}
/* podnadpis hned pod nadpisem stránky bez další velké mezery */
html body:has(.client-center-box):has(#content) #content .content-inner > h1 + h2,
html body:has(.client-center-box):has(#content) #content .content-inner > h1 + .client-link + h2,
html body:has(.client-center-box):has(#content) #content .content-inner > h1 + input + form > fieldset:first-child{margin-top:0 !important;}
/* =====================================================================
MENU ÚČTU
===================================================================== */
html body:has(.client-center-box):has(#content) .client-center-box{
margin:0 !important;
padding:10px !important;
border:1px solid var(--ca-line) !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:none !important;
}
html body:has(.client-center-box):has(#content) .client-center-box ul{
display:flex !important;flex-direction:column !important;gap:2px !important;
margin:0 !important;padding:0 !important;
list-style:none !important;
grid-template-columns:none !important;
}
html body:has(.client-center-box):has(#content) .client-center-box li{
display:block !important;
width:auto !important;
margin:0 !important;padding:0 !important;
border:0 !important;background:none !important;
list-style:none !important;
}
html body:has(.client-center-box):has(#content) .client-center-box li::before,
html body:has(.client-center-box):has(#content) .client-center-box li::after,
html body:has(.client-center-box):has(#content) .client-center-box a::before,
html body:has(.client-center-box):has(#content) .client-center-box a::after{display:none !important;content:none !important;}
html body:has(.client-center-box):has(#content) .client-center-box li > a{
display:flex !important;align-items:center !important;gap:11px !important;
width:100% !important;height:auto !important;min-height:0 !important;
margin:0 !important;
padding:9px 10px !important;
border:0 !important;border-radius:13px !important;
background:none !important;
box-shadow:none !important;
color:var(--ca-text) !important;
font-size:14.5px !important;font-weight:700 !important;
line-height:1.25 !important;
text-align:left !important;text-transform:none !important;text-decoration:none !important;
white-space:normal !important;
transition:background .2s,color .2s;
}
html body:has(.client-center-box):has(#content) .client-center-box li > a:hover{background:var(--ca-soft) !important;color:var(--ca-head) !important;}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico{
flex:0 0 34px;
display:flex;align-items:center;justify-content:center;
width:34px;height:34px;
border-radius:11px;
background:var(--ca-soft);
color:var(--ca-blue-d);
transition:background .2s,color .2s;
}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico svg{display:block !important;width:18px !important;height:18px !important;margin:0 !important;fill:none !important;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-txt{flex:1 1 auto;min-width:0;}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-count{
flex:0 0 auto;
min-width:26px;
padding:3px 8px;
border-radius:20px;
background:var(--ca-soft2);
color:var(--ca-blue-d);
font-size:12px;font-weight:800;line-height:1.2;text-align:center;
}
/* aktivní stránka */
html body:has(.client-center-box):has(#content) .client-center-box li.active > a{background:var(--ca-soft2) !important;color:var(--ca-head) !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.active .cl-acc-ico{background:linear-gradient(135deg,#239ceb,#0b6fb0);color:#fff;}
html body:has(.client-center-box):has(#content) .client-center-box li.active .cl-acc-count{background:#fff;}
/* odhlášení – na konci, nenápadně červeně */
html body:has(.client-center-box):has(#content) .client-center-box li.logout{order:99;margin-top:6px !important;padding-top:6px !important;border-top:1px solid #edf3f9 !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a{color:#c0392b !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout .cl-acc-ico{background:#fdecec;color:#d14343;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a:hover{background:#fdf3f3 !important;}
/* =====================================================================
NÁSTĚNKA (cleno-ucet.js na /klient/)
===================================================================== */
html body:has(.client-center-box):has(#content) #content .cl-dash{display:flex;flex-direction:column;gap:16px;margin:0 0 8px;font-family:inherit;}
html body:has(.client-center-box):has(#content) #content .cl-dash svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
/* úvodní karta s pozdravem a slevou */
html body:has(.client-center-box):has(#content) #content .cl-dash__hero{
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:26px 28px;
border-radius:24px;
background:linear-gradient(135deg,#163d5c 0%,#0b6fb0 62%,#239ceb 100%);
color:#fff;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__hero::before{
content:"";
position:absolute;right:-60px;top:-80px;
width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
pointer-events:none;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__hi{position:relative;min-width:0;}
html body:has(.client-center-box):has(#content) #content .cl-dash__eyebrow{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.14);color:#d9eefc;font-size:12px;font-weight:800;letter-spacing:.02em;}
html body:has(.client-center-box):has(#content) #content .cl-dash .cl-dash__title{
margin:0 !important;padding:0 !important;
background:none !important;border:0 !important;
color:#fff !important;
font-size:30px !important;font-weight:800 !important;line-height:1.15 !important;letter-spacing:-.02em;
text-align:left !important;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__sub{margin:8px 0 0;color:#cfe6f7;font-size:14.5px;font-weight:600;line-height:1.45;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal{
position:relative;flex:0 0 auto;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:170px;
padding:16px 20px;
border:1px solid rgba(255,255,255,.22);
border-radius:20px;
background:rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
color:#fff !important;
text-align:center;text-decoration:none !important;
transition:background .2s;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal:hover{background:rgba(255,255,255,.18);}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-lbl{color:#d9eefc;font-size:12.5px;font-weight:700;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-num{margin:2px 0;color:#fff;font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-.02em;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-num.is-loading{opacity:.5;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-group{color:#bfe0f6;font-size:12px;font-weight:700;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-group:empty{display:none;}
/* dlaždice s počty */
html body:has(.client-center-box):has(#content) #content .cl-dash__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:16px;
border:1px solid var(--ca-line);
border-radius:20px;
background:#fff;
color:var(--ca-head) !important;
text-decoration:none !important;
transition:border-color .2s,transform .2s;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile:hover{border-color:#bcdcf4;transform:translateY(-2px);}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:8px;border-radius:12px;background:var(--ca-soft2);color:var(--ca-blue-d);}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-ico svg{width:20px;height:20px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-num{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-lbl{color:var(--ca-muted);font-size:13px;font-weight:700;}
/* poslední objednávka */
html body:has(.client-center-box):has(#content) #content .cl-dash__last{padding:18px 20px;border:1px solid var(--ca-line);border-radius:22px;background:#fff;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__label{color:var(--ca-muted);font-size:13px;font-weight:800;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-main{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--ca-soft);}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-ico{flex:0 0 46px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--ca-blue-d);}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-ico svg{width:22px;height:22px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;color:var(--ca-muted);font-size:13px;font-weight:600;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-info b{color:var(--ca-head);font-size:16px;font-weight:800;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-total{flex:0 0 auto;color:var(--ca-head);font-size:18px;font-weight:800;white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:44px;padding:0 18px;
border:1px solid #cfe2f2;border-radius:13px;
background:#fff;
color:var(--ca-blue-d) !important;
font-size:14px;font-weight:800;text-decoration:none !important;
transition:background .2s,border-color .2s;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__btn svg{width:17px;height:17px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__btn:hover{background:var(--ca-soft);border-color:#bcdcf4;}
html body:has(.client-center-box):has(#content) #content .cl-dash__btn--p{border-color:transparent;background:linear-gradient(135deg,#239ceb,#0b6fb0);color:#fff !important;}
html body:has(.client-center-box):has(#content) #content .cl-dash__btn--p:hover{background:linear-gradient(135deg,#2aa6f0,#0b6fb0);filter:brightness(1.05);}
/* rychlé odkazy */
html body:has(.client-center-box):has(#content) #content .cl-dash__quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a{
display:flex;align-items:center;gap:12px;
padding:14px;
border:1px solid var(--ca-line);border-radius:18px;
background:#fff;
color:var(--ca-muted) !important;
font-size:12.5px;font-weight:600;line-height:1.35;text-decoration:none !important;
transition:border-color .2s,background .2s;
}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a:hover{border-color:#bcdcf4;background:var(--ca-soft);}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a svg{flex:0 0 36px;width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:11px;background:var(--ca-soft2);color:var(--ca-blue-d);}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a span{display:flex;flex-direction:column;min-width:0;}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a b{color:var(--ca-head);font-size:14px;font-weight:800;}
/* =====================================================================
STAVY (objednávka, platba)
===================================================================== */
html body:has(.client-center-box):has(#content) #content .cl-st{
display:inline-flex !important;align-items:center;gap:6px;
padding:4px 10px !important;
border-radius:20px !important;
font-size:12.5px !important;font-weight:800 !important;line-height:1.3 !important;
white-space:nowrap;
}
html body:has(.client-center-box):has(#content) #content .cl-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
html body:has(.client-center-box):has(#content) #content .cl-st--ok{background:#e7f6ec !important;color:#1f9d3a !important;}
html body:has(.client-center-box):has(#content) #content .cl-st--wait{background:#fff4e0 !important;color:#b26a00 !important;}
html body:has(.client-center-box):has(#content) #content .cl-st--bad{background:#fdecec !important;color:#d14343 !important;}
/* =====================================================================
TABULKY (objednávky, doklady, platby, hodnocení…)
===================================================================== */
html body:has(.client-center-box):has(#content) #content .content-inner table.table{
width:100% !important;
margin:0 0 20px !important;
border:1px solid var(--ca-line) !important;
border-collapse:separate !important;border-spacing:0 !important;
border-radius:20px !important;
overflow:hidden;
background:#fff !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table th{
padding:12px 14px !important;
border:0 !important;border-bottom:1px solid var(--ca-line) !important;
background:var(--ca-soft) !important;
color:var(--ca-muted) !important;
font-size:12.5px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;
vertical-align:middle !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td{
padding:13px 14px !important;
border:0 !important;border-top:1px solid #eef4fa !important;
background:#fff !important;
color:var(--ca-text) !important;
font-size:14px !important;font-weight:600 !important;
vertical-align:middle !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr:first-child td{border-top:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr:hover td{background:#fbfdff !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td strong{color:var(--ca-head) !important;font-weight:800 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td a{color:var(--ca-blue-d) !important;font-weight:800 !important;text-decoration:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td a:hover{color:var(--ca-blue) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .client-link a,
html body:has(.client-center-box):has(#content) #content .content-inner a.btn{border-radius:12px !important;}
/* ---------- detail objednávky ---------- */
/* souhrn (datum, stav, sledování zásilky, Znovu nakoupit) jako karta */
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]){
margin:0 0 8px !important;
padding:18px 20px !important;
border:1px solid var(--ca-line) !important;border-radius:20px !important;
background:#fff !important;
color:var(--ca-text) !important;font-size:14px !important;line-height:1.6 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) p{margin:0 0 12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) p:last-child{margin:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) a:not(.btn){color:var(--ca-blue-d) !important;font-weight:800 !important;text-decoration:none !important;}
/* „Znovu nakoupit“ vkládá zboží do košíku – stejné zelené tlačítko jako „Do košíku“ */
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) .btn{
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px;
height:46px !important;padding:0 20px !important;
border:0 !important;border-radius:13px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
box-shadow:none !important;
color:#fff !important;font-size:15px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;text-decoration:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) .btn::before{
content:"";width:18px;height:18px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.3L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.3L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* fakturační a doručovací adresa jako dvě karty */
html body:has(.client-center-box):has(#content) #content .content-inner > .row{
display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px !important;
margin:0 0 8px !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > .row::before,
html body:has(.client-center-box):has(#content) #content .content-inner > .row::after{display:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > .row > [class*="col-"]{
width:auto !important;float:none !important;
margin:0 !important;
padding:18px 20px !important;
border:1px solid var(--ca-line) !important;border-radius:20px !important;
background:#fff !important;
color:var(--ca-text) !important;font-size:14px !important;line-height:1.6 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > .row h4{
margin:0 0 8px !important;padding:0 !important;
color:var(--ca-head) !important;font-size:16px !important;font-weight:800 !important;
text-transform:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner > .row a{color:var(--ca-blue-d) !important;font-weight:700 !important;text-decoration:none !important;}
/* položky objednávky: název produktu a kód pod ním */
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name{text-align:left !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name .p-name__itemLink{display:block !important;margin:0 0 3px !important;color:var(--ca-head) !important;font-size:14.5px !important;font-weight:800 !important;line-height:1.35 !important;text-decoration:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name .p-name__itemLink:hover{color:var(--ca-blue-d) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name .p-name__codeLabel,
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name .p-name__code{color:var(--ca-muted) !important;font-size:12.5px !important;font-weight:600 !important;font-style:normal !important;}
/* součet objednávky */
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr.row-summary td{padding:14px 16px !important;background:var(--ca-soft) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary{
display:grid !important;grid-template-columns:1fr auto;gap:6px 16px;
max-width:360px;margin:0 0 0 auto !important;padding:0 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dt,
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dd{float:none !important;width:auto !important;margin:0 !important;padding:0 !important;color:var(--ca-text) !important;font-size:14px !important;font-weight:600 !important;text-align:left !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dd{text-align:right !important;white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dt:first-of-type,
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dd:first-of-type,
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary dd:first-of-type strong{color:var(--ca-head) !important;font-size:17px !important;font-weight:800 !important;}
/* ozdobné proužky ze starého stylu u buněk pryč */
html body:has(.client-center-box):has(#content) #content .content-inner table.table td::before,
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr::before{display:none !important;content:none !important;}
/* hodnocení produktů: název produktu nad hvězdičkami, čekající hodnocení se štítkem */
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.cell--rating a{display:block !important;margin:0 0 4px !important;color:var(--ca-head) !important;font-weight:800 !important;line-height:1.35 !important;text-align:left !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.cell--rating .product-rating-wrap{display:inline-flex !important;align-items:center;gap:8px;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.cell--rating .stars .star::before{color:#fecb3e !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr.rating-authorization-pending td.cell--rating .product-rating-wrap::after{
content:"Čeká na schválení";
padding:3px 8px;border-radius:20px;
background:#fff4e0;color:#b26a00;
font-size:11.5px;font-weight:800;white-space:nowrap;
}
/* tlačítko Smazat – nenápadné červené, ne přes celou kartu */
html body:has(.client-center-box):has(#content) #content .content-inner table.table a[title="Smazat položku"]{
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:6px;
width:auto !important;height:34px !important;
padding:0 12px !important;
border:1px solid #f3cccc !important;border-radius:10px !important;
background:#fff !important;
box-shadow:none !important;
color:#d14343 !important;
font-size:13px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;text-decoration:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table a[title="Smazat položku"]::before{
content:"";width:14px;height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d14343' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table a[title="Smazat položku"]:hover{background:#fdf3f3 !important;}
/* prázdný stav (doplňuje cleno-ucet.js) */
html body:has(.client-center-box):has(#content) #content .content-inner .cl-empty{
display:flex !important;align-items:center;gap:12px;
margin:0 0 16px !important;
padding:16px 18px !important;
border:1px dashed #cfe2f2 !important;border-radius:18px !important;
background:var(--ca-soft) !important;
color:var(--ca-muted) !important;font-size:14px !important;font-weight:700 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .cl-empty::before{
content:"";flex:0 0 36px;width:36px;height:36px;border-radius:50%;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5V8z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* doklady ke stažení – u čísla dokladu štítek PDF */
html body:has(.client-center-box):has(#content) #content .content-inner table.table a[href*="/action/download/"]{display:inline-flex !important;align-items:center;gap:8px;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table a[href*="/action/download/"]::after{
content:"PDF";
padding:2px 7px;
border-radius:7px;
background:#fdecec;
color:#d14343;
font-size:11px;font-weight:800;letter-spacing:.02em;
}
/* stránka „Moje slevy“ – řádky jako přehledné položky s hodnotou vpravo */
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"]{max-width:560px;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td{display:table-cell !important;padding:15px 18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td:last-child{text-align:right !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td:last-child strong{
display:inline-block;padding:4px 12px;border-radius:20px;background:var(--ca-soft2);color:var(--ca-blue-d) !important;font-size:14px !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr:last-child td{background:var(--ca-soft) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr:last-child td:first-child{color:var(--ca-head) !important;font-weight:800 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr:last-child td:last-child strong{background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff !important;font-size:16px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] + p{color:var(--ca-muted) !important;font-size:13px !important;}
/* =====================================================================
FORMULÁŘE (osobní údaje, adresy)
===================================================================== */
html body:has(.client-center-box):has(#content) #content .content-inner .form-control,
html body:has(.client-center-box):has(#content) #content .content-inner input[type="text"],
html body:has(.client-center-box):has(#content) #content .content-inner input[type="email"],
html body:has(.client-center-box):has(#content) #content .content-inner input[type="tel"],
html body:has(.client-center-box):has(#content) #content .content-inner input[type="password"],
html body:has(.client-center-box):has(#content) #content .content-inner select{
height:48px !important;
padding:0 14px !important;
border:1px solid #d7e6f3 !important;
border-radius:12px !important;
background:#fff !important;
box-shadow:none !important;
color:var(--ca-head) !important;
font-size:15px !important;font-weight:600 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .form-control:focus,
html body:has(.client-center-box):has(#content) #content .content-inner input:focus,
html body:has(.client-center-box):has(#content) #content .content-inner select:focus{border-color:var(--ca-blue) !important;box-shadow:0 0 0 3px rgba(35,156,235,.15) !important;outline:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner label{color:var(--ca-head) !important;font-size:13.5px !important;font-weight:700 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner fieldset,
html body:has(.client-center-box):has(#content) #content .content-inner .registration-form > .box,
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses{
margin:0 0 16px !important;
padding:20px !important;
border:1px solid var(--ca-line) !important;
border-radius:20px !important;
background:#fff !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner legend{
float:none;width:auto;
margin:0 0 12px !important;padding:0 !important;
border:0 !important;
color:var(--ca-head) !important;
font-size:17px !important;font-weight:800 !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner button[type="submit"],
html body:has(.client-center-box):has(#content) #content .content-inner input[type="submit"]{
height:48px !important;
padding:0 24px !important;
border:0 !important;border-radius:13px !important;
background:linear-gradient(135deg,#239ceb,#0b6fb0) !important;
box-shadow:none !important;
color:#fff !important;
font-size:15px !important;font-weight:800 !important;
text-transform:none !important;
}
/* osobní údaje: bloky formuláře jako karty, popisek vždy nad polem (ne vedle v úzkém sloupci) */
html body:has(.client-center-box):has(#content) #content .content-inner .co-box{margin:0 0 16px !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .co-box > .box{
margin:0 !important;
padding:22px !important;
border:1px solid var(--ca-line) !important;
border-radius:20px !important;
background:#fff !important;
box-shadow:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group{margin:0 0 14px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > label{
display:block !important;float:none !important;
width:auto !important;max-width:none !important;
margin:0 0 6px !important;padding:0 !important;
line-height:1.3 !important;text-align:left !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group .form-control-wrapper,
html body:has(.client-center-box):has(#content) #content .content-inner .form-group .phone-combined-input,
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > .form-control,
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > input{width:100% !important;max-width:none !important;margin-left:0 !important;float:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .co-box h2,
html body:has(.client-center-box):has(#content) #content .content-inner .co-box h4,
html body:has(.client-center-box):has(#content) #content .content-inner .co-box legend{margin:0 0 16px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .submit-wrapper{margin:4px 0 16px !important;}
/* poslední prvek v kartě bez spodní mezery – karty mají stejné vnitřní okraje nahoře i dole */
html body:has(.client-center-box):has(#content) #content .content-inner .co-box > .box > :last-child,
html body:has(.client-center-box):has(#content) #content .content-inner fieldset > :last-child,
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses > :last-child{margin-bottom:0 !important;}
/* nadpis na začátku karty formuláře bez horní mezery (vnitřní okraj karty stačí) */
html body:has(.client-center-box):has(#content) #content .content-inner fieldset > h2,
html body:has(.client-center-box):has(#content) #content .content-inner fieldset > h3,
html body:has(.client-center-box):has(#content) #content .content-inner .co-box > .box > h2:first-child,
html body:has(.client-center-box):has(#content) #content .content-inner .co-box > .box > h4:first-child{margin:0 0 14px !important;font-size:18px !important;}
/* doručovací adresy */
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses h2{margin:0 0 8px !important;font-size:18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses p{margin:0 0 14px !important;color:var(--ca-muted) !important;font-size:14px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses .btn,
html body:has(.client-center-box):has(#content) #content .content-inner .btn.btn-secondary{
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px;
height:44px !important;
padding:0 18px !important;
border:1px solid #cfe2f2 !important;border-radius:13px !important;
background:#fff !important;
box-shadow:none !important;
color:var(--ca-blue-d) !important;
font-size:14px !important;font-weight:800 !important;
text-transform:none !important;letter-spacing:0 !important;text-decoration:none !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses .btn::before{
content:"+";
font-size:18px;font-weight:800;line-height:1;
}
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses .btn:hover,
html body:has(.client-center-box):has(#content) #content .content-inner .btn.btn-secondary:hover{background:var(--ca-soft) !important;border-color:#bcdcf4 !important;}
/* zaškrtávací políčko (newsletter) – jako v košíku */
html body:has(.client-center-box):has(#content) #content .content-inner input[type="checkbox"]{
-webkit-appearance:none;appearance:none;
flex:0 0 22px;
width:22px !important;height:22px !important;
margin:0 !important;
border:1.5px solid #bcd3e6 !important;border-radius:7px !important;
background:#fff center / 13px no-repeat !important;
vertical-align:middle;
cursor:pointer;
}
html body:has(.client-center-box):has(#content) #content .content-inner input[type="checkbox"]:checked{
border-color:transparent !important;
background-color:#0b6fb0 !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group:has(> input[type="checkbox"]){display:flex !important;align-items:center !important;gap:12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > input[type="checkbox"] + label{
display:block !important;flex:1 1 auto;
width:auto !important;
margin:0 !important;padding:0 !important;
font-size:14px !important;font-weight:700 !important;line-height:1.35 !important;
cursor:pointer;
}
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > input[type="checkbox"] + label::before,
html body:has(.client-center-box):has(#content) #content .content-inner .form-group > input[type="checkbox"] + label::after{display:none !important;}
/* telefon: výběr země a číslo jako jedno pole s jedním rámečkem */
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input{
display:flex !important;align-items:stretch !important;
height:48px !important;
padding:0 !important;
border:1px solid #d7e6f3 !important;border-radius:12px !important;
background:#fff !important;
box-shadow:none !important;
overflow:visible !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input:focus-within{border-color:var(--ca-blue) !important;box-shadow:0 0 0 3px rgba(35,156,235,.15) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flags{
flex:0 0 auto;
display:flex !important;align-items:center !important;
height:100% !important;
margin:0 !important;padding:0 10px !important;
border:0 !important;border-right:1px solid var(--ca-line) !important;border-radius:11px 0 0 11px !important;
background:var(--ca-soft) !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flags:not(.active) .country-flags-inner,
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flags:not(.active) .country-flag{border:0 !important;padding:0 !important;margin:0 !important;background:none !important;}
/* otevřený seznam zemí – nad ostatními poli */
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flags.active .country-flags-inner{z-index:20 !important;border-radius:12px !important;}
/* vlajka a předvolba vedle sebe, svisle na středu */
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flags:not(.active) .country-flags-inner{display:flex !important;align-items:center !important;width:auto !important;height:auto !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .country-flag.selected{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:6px !important;width:auto !important;height:auto !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input .shp-flag-label{white-space:nowrap !important;color:var(--ca-head) !important;font-size:14px !important;font-weight:700 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .phone-combined-input input.form-control{
flex:1 1 auto;
width:auto !important;min-width:0;
height:100% !important;
margin:0 !important;
border:0 !important;border-radius:0 11px 11px 0 !important;
background:none !important;
box-shadow:none !important;
}
/* =====================================================================
POČÍTAČ – menu vlevo jako karta, obsah vpravo
===================================================================== */
@media (min-width:768px){
/* popisky buněk patří jen do mobilních karet */
html body:has(.client-center-box):has(#content) #content .content-inner table.table .client-table-heading{display:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td:first-child strong,
html body:has(.client-center-box):has(#content) #content .content-inner table.table td .cl-st{white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .tracking-link{word-break:break-all;}
}
@media (max-width:1199px) and (min-width:768px){
html body:has(.client-center-box):has(#content) #content .cl-dash__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* =====================================================================
MOBIL
===================================================================== */
@media (max-width:767px){
/* menu: vodorovně posuvné štítky místo velké mřížky tlačítek */
/* stejný okraj 12 px od kraje jako vyhledávání v hlavičce (šablona tu má jen 8 px) */
html body:has(.client-center-box):has(#content) .sidebar-left{margin:0 !important;padding:0 4px !important;}
/* mezera menu → obsah: 12 px od štítků jako mezi bloky nástěnky (6 px tvoří spodní odsazení seznamu) */
html body:has(.client-center-box):has(#content) #content-wrapper .content-wrapper-in{row-gap:6px !important;gap:6px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner{padding:0 4px !important;}
html body:has(.client-center-box):has(#content) .client-center-box{padding:0 !important;border:0 !important;background:none !important;}
html body:has(.client-center-box):has(#content) .client-center-box ul{
flex-direction:row !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:8px !important;
margin:0 -16px !important;padding:2px 16px 6px !important;
overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;
touch-action:pan-x pan-y;overscroll-behavior-x:contain;
scroll-snap-type:none !important;
}
html body:has(.client-center-box):has(#content) .client-center-box ul::-webkit-scrollbar{display:none;}
html body:has(.client-center-box):has(#content) .client-center-box li{flex:0 0 auto !important;}
html body:has(.client-center-box):has(#content) .client-center-box li > a{
gap:7px !important;
padding:7px 12px 7px 7px !important;
border:1px solid var(--ca-line) !important;border-radius:22px !important;
background:#fff !important;
font-size:13.5px !important;white-space:nowrap !important;
}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico{flex-basis:28px;width:28px;height:28px;border-radius:50%;}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico svg{width:15px !important;height:15px !important;}
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-count{min-width:22px;padding:2px 7px;font-size:11.5px;}
html body:has(.client-center-box):has(#content) .client-center-box li.active > a{border-color:transparent !important;background:#0b6fb0 !important;color:#fff !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.active .cl-acc-ico{background:rgba(255,255,255,.18);}
html body:has(.client-center-box):has(#content) .client-center-box li.active .cl-acc-count{background:rgba(255,255,255,.18);color:#fff;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout{margin:0 !important;padding:0 !important;border:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > h1{font-size:24px !important;margin-bottom:16px !important;}
html body:has(.client-center-box):has(#content) #content .cl-dash{gap:12px;margin-bottom:0;}
html body:has(.client-center-box):has(#content) #content .content-inner > h2{margin:24px 0 12px !important;}
html body:has(.client-center-box):has(#content) #content .cl-dash__hero{flex-direction:column;align-items:stretch;gap:16px;padding:22px 17px;border-radius:22px;} /* 17 px = 16 px + 1 px rámečku ostatních karet → obsah ve stejné linii */
html body:has(.client-center-box):has(#content) #content .cl-dash .cl-dash__title{font-size:25px !important;}
html body:has(.client-center-box):has(#content) #content .cl-dash__sub{font-size:13.5px;}
/* sleva na mobilu vycentrovaná pod sebou: popisek, velké číslo, skupina */
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal{flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:14px 16px;text-align:center;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-lbl{font-size:13px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-num{margin:2px 0;font-size:34px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__loyal-group{font-size:12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile{padding:16px;border-radius:18px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-ico{width:34px;height:34px;margin-bottom:6px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-num{font-size:22px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__tile-lbl{font-size:12.5px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last{padding:16px;border-radius:20px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-main{flex-wrap:wrap;gap:12px;padding:12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-total{flex-basis:100%;padding-left:58px;font-size:17px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__last-btns a{flex:1 1 auto;}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick{grid-template-columns:1fr;gap:12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick a{padding:12px 16px;border-radius:16px;}
/* tabulky: každý řádek jako karta, popisek vlevo, hodnota vpravo */
html body:has(.client-center-box):has(#content) #content .content-inner table.table{border:0 !important;border-radius:0 !important;background:none !important;overflow:visible;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table thead,
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr:has(> th){display:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tbody{display:flex !important;flex-direction:column;gap:12px;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr{
display:block !important;
padding:6px 16px !important;
border:1px solid var(--ca-line) !important;
border-radius:18px !important;
background:#fff !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td{
display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
width:auto !important;
padding:9px 0 !important;
border:0 !important;border-top:1px solid #eef4fa !important;
background:none !important;
text-align:right !important;
font-size:14px !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td:first-child{border-top:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.cell--rating{display:block !important;padding:10px 0 !important;text-align:left !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.cell--rating .client-table-heading{margin:0 0 4px !important;max-width:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.text-center:has(a[title="Smazat položku"]){justify-content:flex-end !important;}
/* název produktu v kartě: celý řádek, kód produktu pod názvem */
html body:has(.client-center-box):has(#content) #content .content-inner table.table td.p-name{display:block !important;padding:10px 0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr.row-summary{padding:0 !important;overflow:hidden;background:var(--ca-soft) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr.row-summary td{display:block !important;padding:14px 16px !important;border:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .list-summary{max-width:none;}
/* oddělovací čáry i v první kartě (na počítači tam první řádek čáru nemá) */
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr:first-child td:not(:first-child){border-top:1px solid #eef4fa !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table td:empty{display:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table .client-table-heading{
display:block !important;
flex:0 0 auto;
margin:0 !important;
color:var(--ca-muted) !important;
font-size:12.5px !important;font-weight:700 !important;
text-align:left !important;text-transform:none !important;letter-spacing:0 !important;
width:auto !important;max-width:55% !important;float:none !important;position:static !important;
}
html body:has(.client-center-box):has(#content) #content .content-inner table.table tr:hover td{background:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr{display:flex !important;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td{display:block !important;border:0 !important;padding:0 !important;text-align:left !important;background:none !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td:last-child{text-align:right !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr:last-child{background:var(--ca-soft) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > .row{grid-template-columns:1fr;gap:12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > .row > [class*="col-"],
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]){padding:16px !important;border-radius:18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner > h2 + div:not([class]) .btn{width:100%;}
html body:has(.client-center-box):has(#content) #content .content-inner fieldset,
html body:has(.client-center-box):has(#content) #content .content-inner .co-box > .box,
html body:has(.client-center-box):has(#content) #content .content-inner .shipping-addresses{padding:16px !important;border-radius:18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner button[type="submit"],
html body:has(.client-center-box):has(#content) #content .content-inner input[type="submit"]{width:100%;}
}
/* =====================================================================
OBJEDNÁVKY A DOKLADY JAKO KARTY (vytváří cleno-ucet.js, tabulka zůstává skrytá)
===================================================================== */
html body:has(.client-center-box):has(#content) #content .content-inner table.table.cl-carded{display:none !important;}
html body:has(.client-center-box):has(#content) #content .cl-list{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;}
html body:has(.client-center-box):has(#content) #content .cl-oc{
position:relative;
display:grid;grid-template-columns:44px minmax(0,1fr) auto auto 18px;grid-template-areas:"ico main tags price go";
align-items:center;gap:6px 16px;
padding:14px 18px 14px 14px;
border:1px solid var(--ca-line);border-radius:18px;
background:#fff;
transition:border-color .2s,background .2s,transform .2s;
}
html body:has(.client-center-box):has(#content) #content .cl-oc:hover{border-color:#bcdcf4;background:var(--ca-soft);}
html body:has(.client-center-box):has(#content) #content .cl-oc__ico{grid-area:ico;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:var(--ca-soft2);color:var(--ca-blue-d);}
html body:has(.client-center-box):has(#content) #content .cl-oc__ico svg,html body:has(.client-center-box):has(#content) #content .cl-oc__go svg,html body:has(.client-center-box):has(#content) #content .cl-oc__track svg,html body:has(.client-center-box):has(#content) #content .cl-oc__pdf svg,html body:has(.client-center-box):has(#content) #content .cl-acct svg,html body:has(.client-center-box):has(#content) #content .cl-sec-head a svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html body:has(.client-center-box):has(#content) #content .cl-oc__ico svg{width:20px;height:20px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__main{grid-area:main;display:flex;flex-direction:column;gap:3px;min-width:0;}
html body:has(.client-center-box):has(#content) #content .cl-oc__title{color:var(--ca-head) !important;font-size:15px;font-weight:800;line-height:1.3;text-decoration:none !important;}
/* celá karta objednávky je odkaz na detail */
html body:has(.client-center-box):has(#content) #content .cl-oc a.cl-oc__title::after{content:"";position:absolute;inset:0;border-radius:inherit;}
html body:has(.client-center-box):has(#content) #content .cl-oc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;color:var(--ca-muted);font-size:13px;font-weight:600;}
html body:has(.client-center-box):has(#content) #content .cl-oc__meta > * + *::before{content:"·";margin-right:10px;color:#b7c6d3;}
html body:has(.client-center-box):has(#content) #content .cl-oc__track,html body:has(.client-center-box):has(#content) #content .cl-oc__ord{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;color:var(--ca-blue-d) !important;font-weight:800;text-decoration:none !important;}
html body:has(.client-center-box):has(#content) #content .cl-oc__track svg{width:15px;height:15px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__track:hover,html body:has(.client-center-box):has(#content) #content .cl-oc__ord:hover{color:var(--ca-blue) !important;}
html body:has(.client-center-box):has(#content) #content .cl-oc__tags{grid-area:tags;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__tags .cl-st{white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price{grid-area:price;display:flex;flex-direction:column;align-items:flex-end;min-width:118px;text-align:right;white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price b{color:var(--ca-head);font-size:16px;font-weight:800;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price span{color:var(--ca-muted);font-size:12px;font-weight:600;}
html body:has(.client-center-box):has(#content) #content .cl-oc__go{grid-area:go;display:flex;color:#9fb6c9;transition:color .2s,transform .2s;}
html body:has(.client-center-box):has(#content) #content .cl-oc__go svg{width:18px;height:18px;}
html body:has(.client-center-box):has(#content) #content .cl-oc:hover .cl-oc__go{color:var(--ca-blue-d);transform:translateX(2px);}
/* doklady: místo šipky tlačítko PDF */
html body:has(.client-center-box):has(#content) #content .cl-oc--doc{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"ico main price pdf";}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc .cl-oc__title{font-size:14.5px;}
html body:has(.client-center-box):has(#content) #content a.cl-oc__pdf{
grid-area:pdf;position:relative;z-index:1;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:38px;padding:0 14px;
border:1px solid #f3d3d3;border-radius:12px;
background:#fff;color:#d14343 !important;
font-size:13px;font-weight:800;text-decoration:none !important;white-space:nowrap;
transition:background .2s,border-color .2s;
}
html body:has(.client-center-box):has(#content) #content a.cl-oc__pdf svg{width:16px;height:16px;}
html body:has(.client-center-box):has(#content) #content a.cl-oc__pdf:hover{border-color:#eab4b4;background:#fdf3f3;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc .cl-oc__ico{background:#f2f7fc;}
/* záporné částky u dobropisů */
html body:has(.client-center-box):has(#content) #content .cl-list--docs .cl-oc__price b{font-variant-numeric:tabular-nums;}
/* stránkování (jen jedna stránka → bez čísel, jen počet položek) */
html body:has(.client-center-box):has(#content) #content .pagination-wrapper:not(:has(.pagination a)) .pagination{display:none !important;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper:not(:has(.pagination a)){justify-content:flex-end;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:4px 0 20px !important;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination{display:flex !important;flex-wrap:wrap;gap:6px;margin:0 !important;padding:0 !important;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination > *{
display:inline-flex !important;align-items:center;justify-content:center;
width:auto !important;min-width:46px;height:46px;padding:0 14px !important;margin:0 !important;
border:1px solid #e0eef9 !important;border-radius:14px !important;
background:#fff !important;color:#163d5c !important;
font-size:15px !important;font-weight:800 !important;text-decoration:none !important;
transition:border-color .2s,background .2s,color .2s;
}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination > a:hover{border-color:#9fcdf0 !important;background:#f5faff !important;color:#0b6fb0 !important;}
/* stránkování stejně jako ve výpisech produktů na webu */
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination > .current{border-color:#0b6fb0 !important;background:#0b6fb0 !important;color:#fff !important;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination-total{margin:0 !important;color:var(--ca-muted) !important;font-size:13px !important;font-weight:600 !important;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination-total strong{color:var(--ca-head) !important;}
html body:has(.client-center-box):has(#content) #content .content-inner .client-link:empty{display:none !important;}
/* nástěnka: „Poslední 3 objednávky“ s odkazem na všechny, větší odstup od rychlých odkazů */
html body:has(.client-center-box):has(#content) #content .cl-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:36px 0 14px;}
html body:has(.client-center-box):has(#content) #content .content-inner .cl-sec-head h2{margin:0 !important;}
html body:has(.client-center-box):has(#content) #content .cl-sec-head a{display:inline-flex;align-items:center;gap:6px;color:var(--ca-blue-d) !important;font-size:14px;font-weight:800;text-decoration:none !important;white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .cl-sec-head a svg{width:16px;height:16px;transition:transform .2s;}
html body:has(.client-center-box):has(#content) #content .cl-sec-head a:hover svg{transform:translateX(2px);}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
/* přihlášený účet + odhlášení */
html body:has(.client-center-box):has(#content) #content .cl-acct{
display:flex;align-items:center;gap:14px;
margin:28px 0 8px;
padding:16px 16px 16px 18px;
border:1px solid var(--ca-line);border-radius:20px;
background:linear-gradient(135deg,#f7fbff,#eef6fd);
}
html body:has(.client-center-box):has(#content) #content .cl-acct__ava{flex:0 0 44px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ca-blue-d);box-shadow:0 0 0 1px var(--ca-line);}
html body:has(.client-center-box):has(#content) #content .cl-acct__ava svg{width:20px;height:20px;}
html body:has(.client-center-box):has(#content) #content .cl-acct__txt{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;}
html body:has(.client-center-box):has(#content) #content .cl-acct__txt b{color:var(--ca-head);font-size:14.5px;font-weight:800;}
html body:has(.client-center-box):has(#content) #content .cl-acct__mail{overflow:hidden;color:var(--ca-muted);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content a.cl-acct__out,
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a{
display:inline-flex !important;align-items:center;justify-content:center;gap:8px;
height:44px !important;min-height:44px;padding:0 18px !important;
border:1px solid #f1cfcf !important;border-radius:14px !important;
background:#fff !important;
color:#c0392b !important;
font-size:14px !important;font-weight:800 !important;text-decoration:none !important;white-space:nowrap;
transition:background .2s,border-color .2s,color .2s;
}
html body:has(.client-center-box):has(#content) #content a.cl-acct__out svg{width:18px;height:18px;}
html body:has(.client-center-box):has(#content) #content a.cl-acct__out:hover,
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a:hover{border-color:#e9a9a9 !important;background:#fdf1f1 !important;color:#a93226 !important;}
/* odhlášení v menu: místo červeného řádku úhledné tlačítko přes celou šířku */
/* ikonka aktivní položky menu byla modrá na modrém – vždy barvou textu */
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico svg,
html body:has(.client-center-box):has(#content) .client-center-box .cl-acc-ico svg *{color:inherit !important;stroke:currentColor !important;fill:none !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout{margin-top:10px !important;padding-top:10px !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a{display:flex !important;width:100%;justify-content:center !important;gap:8px !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout .cl-acc-ico{flex:0 0 auto !important;width:auto !important;height:auto !important;background:none !important;color:inherit !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout .cl-acc-txt{flex:0 0 auto !important;}
/* detail objednávky na počítači: název produktu se zalomí a nepřetéká přes další sloupce */
@media (min-width:768px){
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details{table-layout:auto !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details th{white-space:normal !important;line-height:1.3 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td{white-space:nowrap !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td,
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details th{padding-left:10px !important;padding-right:10px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td:first-child,
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details th:first-child{padding-left:18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td:last-child,
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details th:last-child{padding-right:18px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td.p-name,
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td:first-child{width:42%;min-width:260px;white-space:normal !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table.table.table-order-details td.p-name .p-name__itemLink{white-space:normal !important;}
}
@media (max-width:1199px) and (min-width:768px){
html body:has(.client-center-box):has(#content) #content .cl-oc{grid-template-columns:44px minmax(0,1fr) auto 18px;grid-template-areas:"ico main price go" "ico tags tags go";}
html body:has(.client-center-box):has(#content) #content .cl-oc__tags{justify-content:flex-start;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"ico main price pdf";}
}
/* =====================================================================
MOBIL – doplňky
===================================================================== */
@media (max-width:767px){
/* menu: klepnutá položka se zvýrazní hned, přechod barev plynule */
html body:has(.client-center-box):has(#content) .client-center-box li > a{transition:background-color .18s ease,color .18s ease,border-color .18s ease !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.cl-acc-going > a{border-color:transparent !important;background:#0b6fb0 !important;color:#fff !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.cl-acc-going .cl-acc-ico{background:rgba(255,255,255,.18);}
html body:has(.client-center-box):has(#content) .client-center-box ul{scroll-behavior:auto !important;}
/* dokud skript nedoplní ikonky, menu se neukazuje – nic neposkakuje (pojistka: po 1,5 s se ukáže vždy) */
html body:has(.client-center-box):has(#content) .client-center-box:not(.cl-acc-ready) ul{opacity:0;animation:clAccShow 0s 1.5s forwards;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout{margin:0 !important;padding:0 !important;}
html body:has(.client-center-box):has(#content) .client-center-box li.logout > a{width:auto;height:auto !important;min-height:0;padding:7px 14px 7px 9px !important;border-radius:22px !important;font-size:13.5px !important;}
html body:has(.client-center-box):has(#content) #content .cl-list{gap:12px;margin-bottom:16px;}
html body:has(.client-center-box):has(#content) #content .cl-oc{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ico main price" "tags tags tags";gap:12px;padding:14px 16px;border-radius:18px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__ico{width:40px;height:40px;border-radius:12px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__ico svg{width:18px;height:18px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__title{font-size:14.5px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__meta{font-size:12.5px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price{min-width:0;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price b{font-size:15px;}
html body:has(.client-center-box):has(#content) #content .cl-list--orders .cl-oc{align-items:start;}
html body:has(.client-center-box):has(#content) #content .cl-list--orders .cl-oc__price{padding-top:1px;}
/* u objednávky stačí na mobilu cena s DPH, datum a sledování zásilky pod sebou */
html body:has(.client-center-box):has(#content) #content .cl-list--orders .cl-oc__price span{display:none;}
html body:has(.client-center-box):has(#content) #content .cl-oc__meta{flex-direction:column;align-items:flex-start;gap:4px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__meta > * + *::before{content:none;display:none;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc .cl-oc__meta{flex-direction:row;flex-wrap:wrap;gap:2px 8px;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc .cl-oc__meta > * + *::before{content:"·";display:inline;margin-right:8px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__price span{font-size:11.5px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__tags{justify-content:flex-start;padding-top:12px;border-top:1px solid #eef4fa;}
html body:has(.client-center-box):has(#content) #content .cl-oc__tags:empty{display:none;}
html body:has(.client-center-box):has(#content) #content .cl-oc__go{display:none;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ico main pdf" "ico price pdf";row-gap:6px;align-items:start;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc .cl-oc__price{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;text-align:left;}
html body:has(.client-center-box):has(#content) #content .cl-oc--doc a.cl-oc__pdf{align-self:center;height:36px;padding:0 11px;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper{justify-content:center;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none;}
html body:has(.client-center-box):has(#content) #content .pagination-wrapper .pagination > *{flex:0 0 auto;min-width:42px;height:42px;padding:0 12px !important;border-radius:12px !important;font-size:14px !important;}
html body:has(.client-center-box):has(#content) #content .cl-sec-head{margin:28px 0 12px;}
html body:has(.client-center-box):has(#content) #content .cl-dash__quick{grid-template-columns:1fr !important;}
html body:has(.client-center-box):has(#content) #content .cl-acct{flex-wrap:wrap;gap:12px;margin:24px 0 4px;padding:16px;}
html body:has(.client-center-box):has(#content) #content a.cl-acct__out{flex:1 1 100%;}
/* Moje slevy: hodnoty vycentrované pod popiskem, stejné mezery mezi kartami */
html body:has(.client-center-box):has(#content) #content .content-inner .cl-dash--slevy{margin:0 0 12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"]{margin:0 0 12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tbody{gap:12px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] tr{flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:8px !important;padding:16px !important;text-align:center !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td,
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td:last-child{width:auto !important;align-self:center !important;text-align:center !important;color:var(--ca-muted) !important;font-size:14px !important;font-weight:700 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] td:last-child strong{margin:0 !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] + p{margin:0 !important;}
}
@keyframes clAccShow{to{opacity:1;}}
/* =====================================================================
MOJE SLEVY – dlaždice místo tabulky
===================================================================== */
html body:has(.client-center-box):has(#content) #content .content-inner .cl-dash--slevy{margin:0 0 16px !important;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"].cl-carded{display:none !important;}
html body:has(.client-center-box):has(#content) #content .cl-disc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 16px;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
min-width:0;padding:20px 14px;
border:1px solid var(--ca-line);border-radius:20px;
background:#fff;text-align:center;
}
html body:has(.client-center-box):has(#content) #content .cl-disc__ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:4px;border-radius:12px;background:var(--ca-soft2);color:var(--ca-blue-d);}
html body:has(.client-center-box):has(#content) #content .cl-disc__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html body:has(.client-center-box):has(#content) #content .cl-disc__lbl{color:var(--ca-muted);font-size:13px;font-weight:700;line-height:1.3;}
html body:has(.client-center-box):has(#content) #content .cl-disc__val{color:var(--ca-head);font-size:24px;font-weight:800;line-height:1.2;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--group .cl-disc__val{font-size:16px;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--now{border-color:#c9ecd3;background:linear-gradient(160deg,#f2fbf5,#e3f6e9);}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--now .cl-disc__ico{background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--now .cl-disc__lbl{color:#1f7a34;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--now .cl-disc__val{color:#1f9d3a;}
html body:has(.client-center-box):has(#content) #content .content-inner table[data-testid="tableCustomerDiscounts"] + p{margin:0 !important;}
/* =====================================================================
MOJE HODNOCENÍ PRODUKTŮ – karty s hvězdičkami
===================================================================== */
html body:has(.client-center-box):has(#content) #content .content-inner table.customer-ratings.cl-carded{display:none !important;}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ico main side";}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate .cl-oc__ico{background:#fff7e0;color:#e0a100;}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate .cl-oc__title{font-size:14.5px;}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate a.cl-oc__title::after{content:none;}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate a.cl-oc__title:hover{color:var(--ca-blue-d) !important;}
html body:has(.client-center-box):has(#content) #content .cl-rate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--ca-muted);font-size:13px;font-weight:600;}
html body:has(.client-center-box):has(#content) #content .cl-rate__stars{display:inline-flex;gap:2px;}
html body:has(.client-center-box):has(#content) #content .cl-rate__stars svg{width:16px;height:16px;fill:#e3e9ef;stroke:none;}
html body:has(.client-center-box):has(#content) #content .cl-rate__stars svg.on{fill:#fecb3e;}
html body:has(.client-center-box):has(#content) #content .cl-rate b{color:var(--ca-head);font-size:13px;font-weight:800;}
html body:has(.client-center-box):has(#content) #content .cl-rate__date::before{content:"·";margin-right:8px;color:#b7c6d3;}
html body:has(.client-center-box):has(#content) #content .cl-oc__side{grid-area:side;display:flex;align-items:center;gap:10px;}
html body:has(.client-center-box):has(#content) #content .cl-oc__side .cl-st{white-space:nowrap;}
html body:has(.client-center-box):has(#content) #content .cl-oc__side a[title="Smazat položku"]{
display:inline-flex !important;align-items:center !important;gap:6px;
width:auto !important;min-width:0 !important;height:36px !important;padding:0 12px !important;
border:1px solid #f3d3d3 !important;border-radius:12px !important;
background:#fff !important;box-shadow:none !important;
color:#d14343 !important;font-size:13px !important;font-weight:800 !important;
text-transform:none !important;text-decoration:none !important;
}
html body:has(.client-center-box):has(#content) #content .cl-oc__side a[title="Smazat položku"]::before{
content:"";width:14px;height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d14343' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body:has(.client-center-box):has(#content) #content .cl-oc__side a[title="Smazat položku"]:hover{border-color:#eab4b4 !important;background:#fdf3f3 !important;}
@media (max-width:1199px) and (min-width:768px){
html body:has(.client-center-box):has(#content) #content .cl-disc{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
html body:has(.client-center-box):has(#content) #content .content-inner .cl-dash--slevy{margin:0 0 12px !important;}
html body:has(.client-center-box):has(#content) #content .cl-disc{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item{padding:16px 12px;border-radius:18px;}
html body:has(.client-center-box):has(#content) #content .cl-disc__val{font-size:22px;}
html body:has(.client-center-box):has(#content) #content .cl-disc__item--group .cl-disc__val{font-size:15px;}
html body:has(.client-center-box):has(#content) #content .cl-oc--rate{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico main" "side side";align-items:start;}
html body:has(.client-center-box):has(#content) #content .cl-oc__side{justify-content:space-between;padding-top:12px;border-top:1px solid #eef4fa;}
}
/* ==================== cleno-vyhledavani.css ==================== */
/* =====================================================================
Cleno.cz – výsledky vyhledávání (/vyhledavani/)
Nadpis s hledaným výrazem, skupiny Kategorie / Značky / Články jako karty se štítky,
nadpis produktů ve stylu ostatních sekcí. Produktové karty zůstávají jako v kategoriích.
===================================================================== */
/* ---------- nadpis: „Výsledky vyhledávání“ + hledaný výraz ---------- */
html body.in-vyhledavani #content > h2,
html body.in-vyhledavani #content .content-inner > h2{
margin:8px 0 22px !important;
padding:0 !important;
color:#6b7682 !important;
font-size:15px !important;font-weight:700 !important;
line-height:1.3 !important;
text-align:left !important;
text-transform:none !important;
}
html body.in-vyhledavani #content h2 .highlight{
display:block !important;
margin-top:4px !important;
padding-bottom:12px !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:#163d5c !important;
font-size:30px !important;font-weight:800 !important;
line-height:1.2 !important;
letter-spacing:-.015em;
word-break:break-word;
}
/* ---------- skupiny: Nalezeno v kategoriích / Značky / Články ---------- */
html body.in-vyhledavani #content .search-results-groups{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
align-items:start;
gap:16px !important;
margin:0 0 34px !important;
padding:0 !important;
}
html body.in-vyhledavani #content .search-results-group{
display:flex !important;flex-direction:column;
margin:0 !important;
padding:20px !important;
border:1px solid #e0eef9 !important;
border-radius:20px !important;
background:#fff !important;
}
html body.in-vyhledavani #content .search-results-group > h4{
display:flex !important;align-items:center;gap:10px;
margin:0 0 14px !important;
padding:0 !important;
color:#163d5c !important;
font-size:17px !important;font-weight:800 !important;
line-height:1.3 !important;
text-transform:none !important;
}
/* ikonka ve čtverečku u nadpisu skupiny */
html body.in-vyhledavani #content .search-results-group > h4::before{
content:"";
flex:0 0 34px;
width:34px;height:34px;
border-radius:11px;
background-color:#eef6fd;background-position:center;background-size:18px;background-repeat:no-repeat;
}
html body.in-vyhledavani #search-group-categories > h4::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
html body.in-vyhledavani #search-group-manufacturers > h4::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E");
}
html body.in-vyhledavani #search-group-articles > h4::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}
/* položky jako štítky vedle sebe */
html body.in-vyhledavani #content .search-results-group-list{margin:0 !important;padding:0 !important;}
html body.in-vyhledavani #content .search-results-group-list ul{
display:flex !important;flex-wrap:wrap !important;gap:8px !important;
margin:0 !important;padding:0 !important;
list-style:none !important;
}
html body.in-vyhledavani #content .search-results-group-list li{
margin:0 !important;padding:0 !important;
width:auto !important;max-width:100%;
list-style:none !important;
background:none !important;border:0 !important;
}
html body.in-vyhledavani #content .search-results-group-list li:not(.no-display){display:block !important;}
html body.in-vyhledavani #content .search-results-group-list li.no-display{display:none !important;}
html body.in-vyhledavani #content .search-results-group-list li::before,
html body.in-vyhledavani #content .search-results-group-list li::after,
html body.in-vyhledavani #content .search-results-group-list a::before,
html body.in-vyhledavani #content .search-results-group-list a::after{display:none !important;content:none !important;}
html body.in-vyhledavani #content .search-results-group-list a{
display:inline-flex !important;align-items:center;
min-height:0 !important;height:auto !important;
margin:0 !important;
padding:9px 14px !important;
border:1px solid #e0eef9 !important;
border-radius:12px !important;
background:#f5faff !important;
color:#163d5c !important;
font-size:14px !important;font-weight:700 !important;
line-height:1.3 !important;
text-decoration:none !important;
transition:background .2s,border-color .2s,color .2s;
}
html body.in-vyhledavani #content .search-results-group-list a:hover{border-color:#bcdcf4 !important;background:#eaf4fd !important;color:#0b6fb0 !important;}
/* „Zobrazit vše (17)“ – textové tlačítko se šipkou */
html body.in-vyhledavani #content .search-results-group .display-results-group{
display:inline-flex !important;align-items:center;gap:6px;
align-self:flex-start;
margin:14px 0 0 !important;
padding:0 !important;
color:#0b6fb0 !important;
font-size:14px !important;font-weight:800 !important;
text-decoration:none !important;
}
html body.in-vyhledavani #content .search-results-group .display-results-group::after{
content:"";
width:14px;height:14px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body.in-vyhledavani #content .search-results-group .display-results-group:hover{color:#239ceb !important;}
/* po rozbalení ho šablona schovává (inline display:none) */
html body.in-vyhledavani #content .search-results-group .display-results-group[style*="none"]{display:none !important;}
/* ---------- nadpis „Nalezeno v produktech“ jako ostatní sekce ---------- */
html body.in-vyhledavani #content .search-products-heading{
margin:0 0 18px !important;
padding:0 0 12px !important;
border:0 !important;
background:linear-gradient(90deg,#0b6fb0 0%,#239ceb 55%,#8fd0f7 100%) left bottom / 36px 3px no-repeat !important;
color:#163d5c !important;
font-size:22px !important;font-weight:800 !important;
line-height:1.25 !important;
letter-spacing:-.015em;
text-align:left !important;
text-transform:none !important;
}
/* ---------- mobil ---------- */
@media (max-width:767px){
html body.in-vyhledavani #content > h2,
html body.in-vyhledavani #content .content-inner > h2{margin:4px 0 18px !important;font-size:14px !important;}
html body.in-vyhledavani #content h2 .highlight{font-size:26px !important;}
html body.in-vyhledavani #content .search-results-groups{grid-template-columns:1fr;gap:12px !important;margin-bottom:28px !important;}
html body.in-vyhledavani #content .search-results-group{padding:16px !important;border-radius:18px !important;}
html body.in-vyhledavani #content .search-results-group > h4{font-size:16px !important;margin-bottom:12px !important;}
html body.in-vyhledavani #content .search-results-group-list a{padding:8px 12px !important;font-size:13.5px !important;}
html body.in-vyhledavani #content .search-products-heading{font-size:20px !important;}
}
/* ==================== cleno-tlacitko-kosik.css ==================== */
/* =====================================================================
Cleno.cz – tlačítko „Do košíku“ jednotně na celém webu
Stejný vzhled jako na detailu produktu: zelený přechod, zaoblení,
ikonka košíku, bez velkých písmen a bez stínu.
(výpisy kategorií, vyhledávání, úvodní stránka, slidery, související produkty)
===================================================================== */
.products .product .btn-cart,
.products .product .add-to-cart-button,
.product .p-tools .btn-cart,
.product .p-tools .add-to-cart-button,
.p-detail .add-to-cart .add-to-cart-button,
.cleno-sticky-atc .cleno-sticky-cta{
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
border:0 !important;
border-radius:14px !important;
background:linear-gradient(135deg,#34c759 0%,#1f9d3a 100%) !important;
color:#fff !important;
font-weight:800 !important;
text-transform:none !important;
letter-spacing:0 !important;
text-decoration:none !important;
box-shadow:none !important;
transition:filter .2s,transform .15s !important;
}
.products .product .btn-cart *,
.products .product .add-to-cart-button *{color:inherit !important;text-transform:none !important;}
.products .product .btn-cart:hover,
.products .product .add-to-cart-button:hover,
.p-detail .add-to-cart .add-to-cart-button:hover,
.cleno-sticky-atc .cleno-sticky-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
.products .product .btn-cart:active,
.products .product .add-to-cart-button:active{transform:scale(.98);}
/* ve výpisech: stejná výška a písmo, ikonka košíku vlevo */
.products .product .btn-cart,
.products .product .add-to-cart-button,
.product .p-tools .btn-cart,
.product .p-tools .add-to-cart-button{
width:100%;
height:46px !important;min-height:0 !important;
padding:0 14px !important;
font-size:15px !important;line-height:1 !important;
}
.products .product .btn-cart::before,
.products .product .add-to-cart-button::before,
.product .p-tools .btn-cart::before,
.product .p-tools .add-to-cart-button::before{
content:"" !important;
display:block !important;
flex:0 0 18px;
width:18px;height:18px;
margin:0 !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h15l-1.5 8.5a2 2 0 0 1-2 1.5H9a2 2 0 0 1-2-1.6L5 3H2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1'/%3E%3Ccircle cx='17.5' cy='20.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat !important;
font-size:0 !important;
position:static !important;
}
@media (max-width:767px){
.products .product .btn-cart,
.products .product .add-to-cart-button,
.product .p-tools .btn-cart,
.product .p-tools .add-to-cart-button{height:44px !important;padding:0 10px !important;font-size:14px !important;border-radius:12px !important;}
.products .product .btn-cart::before,
.products .product .add-to-cart-button::before{flex-basis:16px;width:16px;height:16px;}
}
/* ---------- karty produktů: hlavní cena nahoře, cena bez DPH a měrná cena menší pod ní ---------- */
.products .product .prices{display:flex !important;flex-direction:column;align-items:flex-start;}
.products .product .prices > *{float:none !important;}
.products .product .prices .price-final{order:1;margin:0 0 2px !important;}
.products .product .prices .price-additional,
.products .product .prices .price-measure{margin:0 !important;color:#6b7682 !important;font-size:12.5px !important;line-height:1.4 !important;}
.products .product .prices .price-additional{order:2;}
.products .product .prices .price-measure{order:3;}
.products .product .prices .availability{order:4;}
/* ==================== cleno-blog.css ==================== */
/* =====================================================================
Cleno.cz – blog (výpis článků a rubriky)
Úvodní karta, rubriky s obrázky, články jako karty s tématem, stránkování.
Doplňuje cleno-blog.js. Mobil první, počítač od 768 px.
===================================================================== */
body.type-posts-listing{
--cb-head:#163d5c;
--cb-text:#4f6577;
--cb-muted:#6b7682;
--cb-blue:#239ceb;
--cb-blue-d:#0b6fb0;
--cb-line:#e0eef9;
--cb-soft:#f5faff;
--cb-soft2:#eef6fd;
}
body.type-posts-listing #content .clb-hidden,
body.type-posts-listing #content .clb-empty{display:none !important;}
/* ---------- úvodní karta ---------- */
body.type-posts-listing #content .sectionDescription.clb-hero{
position:relative;overflow:hidden;
margin:0 0 16px !important;
padding:28px 28px 24px !important;
border:0 !important;border-radius:24px !important;
background:linear-gradient(135deg,#163d5c 0%,#0b6fb0 62%,#239ceb 100%) !important;
color:#fff !important;
}
/* jemné kruhy v pozadí */
body.type-posts-listing #content .clb-hero::before,
body.type-posts-listing #content .clb-hero::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%);
}
body.type-posts-listing #content .clb-hero::before{width:320px;height:320px;right:-110px;top:-140px;}
body.type-posts-listing #content .clb-hero::after{width:220px;height:220px;right:60px;bottom:-150px;}
body.type-posts-listing #content .clb-hero > *{position:relative;z-index:1;}
body.type-posts-listing #content .clb-hero__eyebrow{
display:inline-flex;align-items:center;gap:7px;
margin:0 0 12px;padding:6px 12px 6px 9px;
border-radius:20px;background:rgba(255,255,255,.16);
color:#fff;font-size:13px;font-weight:800;line-height:1;
}
body.type-posts-listing #content .clb-hero__eyebrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-hero h1{
max-width:760px;
margin:0 0 12px !important;padding:0 !important;
border:0 !important;background:none !important;
color:#fff !important;
font-size:34px !important;font-weight:800 !important;line-height:1.15 !important;letter-spacing:-.015em;
text-align:left !important;
}
body.type-posts-listing #content .clb-hero h1::before,
body.type-posts-listing #content .clb-hero h1::after{display:none !important;}
body.type-posts-listing #content .clb-hero p{
max-width:720px;
margin:0 !important;
color:rgba(255,255,255,.88) !important;
font-size:16px !important;line-height:1.6 !important;
}
body.type-posts-listing #content .clb-hero p strong{color:#fff !important;font-weight:800;}
body.type-posts-listing #content .clb-hero__stats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
body.type-posts-listing #content .clb-hero__stats span{
display:inline-flex;align-items:center;gap:5px;
padding:7px 12px;border-radius:12px;
background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
color:rgba(255,255,255,.9);font-size:13px;font-weight:700;line-height:1.2;
}
body.type-posts-listing #content .clb-hero__stats b{color:#fff;font-weight:800;}
/* dekorace vpravo (jen velké obrazovky) */
body.type-posts-listing #content .clb-hero__art{display:none;}
@media (min-width:992px){
body.type-posts-listing #content .sectionDescription.clb-hero{padding-right:320px !important;}
body.type-posts-listing #content .clb-hero__art{position:absolute !important;right:36px;top:50%;display:block;width:250px;height:190px;transform:translateY(-50%);}
body.type-posts-listing #content .clb-art{
position:absolute;display:flex;align-items:center;justify-content:center;
border-radius:24px;background:#fff;color:var(--t-fg);
box-shadow:0 14px 30px rgba(8,30,50,.22);
}
body.type-posts-listing #content .clb-art svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-art--1{left:0;top:18px;width:96px;height:96px;transform:rotate(-8deg);}
body.type-posts-listing #content .clb-art--1 svg{width:48px;height:48px;}
body.type-posts-listing #content .clb-art--2{left:112px;top:0;width:78px;height:78px;transform:rotate(6deg);}
body.type-posts-listing #content .clb-art--2 svg{width:38px;height:38px;}
body.type-posts-listing #content .clb-art--3{left:96px;top:100px;width:84px;height:84px;transform:rotate(-3deg);}
body.type-posts-listing #content .clb-art--3 svg{width:42px;height:42px;}
body.type-posts-listing #content .clb-art--4{left:194px;top:72px;width:58px;height:58px;border-radius:18px;transform:rotate(10deg);}
body.type-posts-listing #content .clb-art--4 svg{width:28px;height:28px;}
}
/* ---------- rubriky ---------- */
body.type-posts-listing #content .clb-rub{margin:0 0 28px;}
body.type-posts-listing #content .clb-rub__list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;}
body.type-posts-listing #content .clb-rub__item{
display:flex;flex-direction:column;align-items:stretch;gap:0;
overflow:hidden;
border:1px solid var(--cb-line);border-radius:18px;
background:#fff;
color:var(--cb-head) !important;text-decoration:none !important;
transition:border-color .2s,transform .2s,box-shadow .2s;
}
body.type-posts-listing #content .clb-rub__item:hover{border-color:#bcdcf4;transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,61,92,.08);}
body.type-posts-listing #content .clb-rub__img{display:flex;align-items:center;justify-content:center;aspect-ratio:7/5;overflow:hidden;background:var(--cb-soft2);color:var(--cb-blue-d);}
body.type-posts-listing #content .clb-rub__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s;}
body.type-posts-listing #content .clb-rub__item:hover .clb-rub__img img{transform:scale(1.05);}
body.type-posts-listing #content .clb-rub__img svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-rub__txt{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;font-size:13.5px;font-weight:800;line-height:1.25;text-align:center;}
body.type-posts-listing #content .clb-rub__item.is-active{border-color:var(--cb-blue-d);background:var(--cb-blue-d);color:#fff !important;box-shadow:none;}
body.type-posts-listing #content .clb-rub__all.is-active .clb-rub__img{background:rgba(255,255,255,.1);color:#fff;}
/* ---------- nadpis výpisu ---------- */
body.type-posts-listing #content .clb-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;}
body.type-posts-listing #content .clb-list-head h2{
margin:0 !important;padding:0 !important;border:0 !important;background:none !important;
color:var(--cb-head) !important;font-size:22px !important;font-weight:800 !important;line-height:1.25 !important;text-align:left !important;
}
body.type-posts-listing #content .clb-list-head h2::before,
body.type-posts-listing #content .clb-list-head h2::after{display:none !important;}
/* ---------- karty článků ---------- */
body.type-posts-listing #content #newsWrapper.clb-grid{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
margin:0 0 24px !important;padding:0 !important;
}
body.type-posts-listing #content .clb-grid .news-item.clb-card{
display:block !important;float:none !important;width:auto !important;
margin:0 !important;padding:0 !important;border:0 !important;background:none !important;
}
body.type-posts-listing #content .clb-card__link{
display:flex;flex-direction:column;height:100%;
overflow:hidden;
border:1px solid var(--cb-line);border-radius:20px;
background:#fff;
color:inherit !important;text-decoration:none !important;
transition:border-color .2s,transform .2s,box-shadow .2s;
}
body.type-posts-listing #content .clb-card__link:hover{border-color:#bcdcf4;transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,61,92,.09);}
/* barevný pruh s ikonkou a štítkem tématu (články nemají obrázky) */
body.type-posts-listing #content .clb-card__vis{
position:relative;overflow:hidden;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
height:128px;
background:var(--t-bg,#eef6fd);color:var(--t-fg,#0b6fb0);
}
body.type-posts-listing #content .clb-card__vis::before,
body.type-posts-listing #content .clb-card__vis::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;}
body.type-posts-listing #content .clb-card__vis::before{width:160px;height:160px;left:-46px;bottom:-96px;}
body.type-posts-listing #content .clb-card__vis::after{width:96px;height:96px;right:-24px;top:-34px;background:rgba(255,255,255,.35);}
body.type-posts-listing #content .clb-card__vis > svg{
position:relative;z-index:1;
width:60px;height:60px;padding:14px;box-sizing:border-box;
border-radius:18px;background:#fff;box-shadow:0 6px 16px rgba(22,61,92,.08);
fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
transition:transform .3s;
}
body.type-posts-listing #content .clb-card__link:hover .clb-card__vis > svg{transform:scale(1.06) rotate(-3deg);}
body.type-posts-listing #content .clb-card__tag{
display:inline-flex;align-items:center;
height:24px;padding:0 10px;border-radius:12px;
background:#fff;color:var(--t-fg,#0b6fb0);
font-size:12px;font-weight:800;line-height:1;white-space:nowrap;
}
/* štítek tématu na barevném pruhu vlevo nahoře */
body.type-posts-listing #content .clb-card__vis .clb-card__tag{position:absolute;left:14px;top:14px;z-index:2;box-shadow:0 2px 8px rgba(22,61,92,.06);}
body.type-posts-listing #content .clb-card__meta .clb-card__tag{display:none;background:var(--t-bg,#eef6fd);}
body.type-posts-listing #content .clb-card__body{display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 18px 16px;}
body.type-posts-listing #content .clb-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:24px;}
body.type-posts-listing #content .clb-card__meta time{
display:inline-flex !important;align-items:center;gap:6px;
margin:0 !important;padding:0 !important;
color:var(--cb-muted) !important;font-size:13px !important;font-weight:600 !important;line-height:1 !important;
}
/* ikonka kalendáře ze šablony nahrazená vlastní, srovnanou s textem */
body.type-posts-listing #content .clb-card__meta time::before,
body.type-posts-listing #content .clb-card__meta time::after{display:none !important;content:none !important;}
body.type-posts-listing #content .clb-card__meta time svg{flex:0 0 14px;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-card__new{
display:inline-flex;align-items:center;
height:24px;padding:0 10px;border-radius:12px;
background:linear-gradient(135deg,#34c759,#1f9d3a);color:#fff;
font-size:12px;font-weight:800;line-height:1;
}
body.type-posts-listing #content .clb-card__title{
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
color:var(--cb-head);font-size:17px;font-weight:800;line-height:1.35;
}
/* patička karty: odkaz a šipka vždy dole, stejně u všech karet */
body.type-posts-listing #content .clb-card__foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:12px;
border-top:1px solid #eef4fa;
}
body.type-posts-listing #content .clb-card__more{color:var(--cb-blue-d);font-size:14px;font-weight:800;line-height:1.2;}
body.type-posts-listing #content .clb-card__go{
display:flex;align-items:center;justify-content:center;flex:0 0 32px;
width:32px;height:32px;border-radius:50%;
background:var(--cb-soft2);color:var(--cb-blue-d);
transition:background .2s,color .2s,transform .2s;
}
body.type-posts-listing #content .clb-card__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-card__link:hover .clb-card__go{background:var(--cb-blue-d);color:#fff;transform:translateX(2px);}
body.type-posts-listing #content .clb-card__body > .clb-card__title{margin-top:2px;}
/* nejnovější článek přes dva sloupce, pruh s ikonkou vlevo */
body.type-posts-listing #content .clb-card--feat{grid-column:span 2;}
body.type-posts-listing #content .clb-card--feat .clb-card__link{flex-direction:row;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis{flex:0 0 40%;height:auto;min-height:230px;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis > svg{width:88px;height:88px;padding:20px;border-radius:26px;}
body.type-posts-listing #content .clb-card--feat .clb-card__body{justify-content:center;gap:12px;padding:24px 26px 20px;}
body.type-posts-listing #content .clb-card--feat .clb-card__title{font-size:23px;line-height:1.3;-webkit-line-clamp:4;}
body.type-posts-listing #content .clb-card--feat .clb-card__foot{margin-top:6px;}
/* barvy témat */
body.type-posts-listing #content .clb-t--fridge{--t-bg:#e6f2fc;--t-fg:#0b6fb0;}
body.type-posts-listing #content .clb-t--coffee{--t-bg:#f6eee6;--t-fg:#8a5a2b;}
body.type-posts-listing #content .clb-t--vac{--t-bg:#eeedfb;--t-fg:#5a52b5;}
body.type-posts-listing #content .clb-t--air{--t-bg:#e4f6f1;--t-fg:#13836a;}
body.type-posts-listing #content .clb-t--water{--t-bg:#e3f5fd;--t-fg:#0a7fb5;}
body.type-posts-listing #content .clb-t--jug{--t-bg:#e8f1fd;--t-fg:#2c6fc4;}
body.type-posts-listing #content .clb-t--pool{--t-bg:#e0f6f7;--t-fg:#0d8a93;}
body.type-posts-listing #content .clb-t--hood{--t-bg:#edf1f5;--t-fg:#4f6577;}
body.type-posts-listing #content .clb-t--termo{--t-bg:#fdf1e3;--t-fg:#b26a00;}
body.type-posts-listing #content .clb-t--soda{--t-bg:#e6f6fb;--t-fg:#147a99;}
body.type-posts-listing #content .clb-t--tips{--t-bg:#eef6fd;--t-fg:#163d5c;}
/* ---------- stránkování ----------
Bez vlastního vzhledu – přebírá stejný styl jako výpisy produktů na celém webu (cleno-razeni.css). */
/* ---------- O blogu (text pro vyhledávače, pod výpisem) ---------- */
body.type-posts-listing #content .clb-about{
position:relative;
margin:28px 0 32px;padding:24px 26px 22px 86px;
border:1px solid var(--cb-line);border-radius:22px;
background:linear-gradient(135deg,#f7fbff,#eef6fd);
}
body.type-posts-listing #content .clb-about__ico{
position:absolute;left:24px;top:24px;
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:14px;background:#fff;color:var(--cb-blue-d);
box-shadow:0 0 0 1px var(--cb-line);
}
body.type-posts-listing #content .clb-about__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
body.type-posts-listing #content .clb-about h3{
margin:0 0 10px !important;padding:0 !important;border:0 !important;background:none !important;
color:var(--cb-head) !important;font-size:19px !important;font-weight:800 !important;line-height:1.3 !important;text-align:left !important;
}
body.type-posts-listing #content .clb-about h3 strong{font-weight:800;}
body.type-posts-listing #content .clb-about h3::before,
body.type-posts-listing #content .clb-about h3::after{display:none !important;}
body.type-posts-listing #content .clb-about p{margin:0 0 10px !important;color:var(--cb-text) !important;font-size:15px !important;line-height:1.65 !important;}
body.type-posts-listing #content .clb-about p:last-child{margin:0 !important;}
body.type-posts-listing #content .clb-about p strong{color:var(--cb-head) !important;}
/* ---------- menší počítače a tablety ---------- */
@media (max-width:1199px){
body.type-posts-listing #content .clb-rub__list{grid-template-columns:repeat(4,minmax(0,1fr));}
body.type-posts-listing #content #newsWrapper.clb-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* =====================================================================
MOBIL
===================================================================== */
@media (max-width:767px){
body.type-posts-listing #content .sectionDescription.clb-hero{margin:4px 0 14px !important;padding:22px 18px 18px !important;border-radius:22px !important;}
body.type-posts-listing #content .clb-hero::before{width:220px;height:220px;right:-90px;top:-100px;}
body.type-posts-listing #content .clb-hero::after{display:none;}
body.type-posts-listing #content .clb-hero__eyebrow{margin-bottom:10px;font-size:12.5px;}
body.type-posts-listing #content .clb-hero h1{font-size:25px !important;line-height:1.2 !important;margin-bottom:10px !important;}
body.type-posts-listing #content .clb-hero p{font-size:14.5px !important;line-height:1.55 !important;}
body.type-posts-listing #content .clb-hero__stats{gap:6px;margin-top:14px;}
body.type-posts-listing #content .clb-hero__stats span{padding:6px 10px;font-size:12.5px;}
/* rubriky: vodorovně posuvný pás */
body.type-posts-listing #content .clb-rub{margin:0 -12px 22px;}
body.type-posts-listing #content .clb-rub__list{
display:flex;gap:10px;
padding:2px 12px 6px;
overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
body.type-posts-listing #content .clb-rub__list::-webkit-scrollbar{display:none;}
body.type-posts-listing #content .clb-rub__item{flex:0 0 118px;scroll-snap-align:start;border-radius:16px;}
body.type-posts-listing #content .clb-rub__item:hover{transform:none;box-shadow:none;}
body.type-posts-listing #content .clb-rub__txt{min-height:44px;padding:7px 8px;font-size:12.5px;}
body.type-posts-listing #content .clb-list-head{margin-bottom:12px;}
body.type-posts-listing #content .clb-list-head h2{font-size:20px !important;}
/* články: přehledné řádky – ikonka vlevo, štítek a datum na jednom řádku, šipka vpravo */
body.type-posts-listing #content #newsWrapper.clb-grid{grid-template-columns:1fr;gap:12px;margin-bottom:20px !important;}
body.type-posts-listing #content .clb-card__link{flex-direction:row;align-items:stretch;min-height:118px;border-radius:18px;}
body.type-posts-listing #content .clb-card__link:hover{transform:none;box-shadow:none;}
body.type-posts-listing #content .clb-card__vis{flex:0 0 84px;height:auto;}
body.type-posts-listing #content .clb-card__vis::before{width:90px;height:90px;left:-30px;bottom:-50px;}
body.type-posts-listing #content .clb-card__vis::after{display:none;}
body.type-posts-listing #content .clb-card__vis > svg{width:46px;height:46px;padding:11px;border-radius:14px;}
body.type-posts-listing #content .clb-card__vis .clb-card__tag{display:none;}
body.type-posts-listing #content .clb-card__meta .clb-card__tag{display:inline-flex;height:22px;padding:0 8px;font-size:11.5px;}
body.type-posts-listing #content .clb-card__body{justify-content:center;gap:7px;padding:13px 14px 13px 14px;}
body.type-posts-listing #content .clb-card__meta{min-height:22px;gap:6px 8px;}
body.type-posts-listing #content .clb-card__meta time{font-size:12px !important;}
body.type-posts-listing #content .clb-card__meta time svg{flex-basis:13px;width:13px;height:13px;}
body.type-posts-listing #content .clb-card__title{font-size:15.5px;line-height:1.35;}
body.type-posts-listing #content .clb-card__foot{display:none;}
/* šipka vpravo – je hned jasné, že se řádek dá otevřít */
body.type-posts-listing #content .clb-card:not(.clb-card--feat) .clb-card__body{position:relative;padding-right:36px;}
body.type-posts-listing #content .clb-card:not(.clb-card--feat) .clb-card__body::after{
content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb6c9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.type-posts-listing #content .clb-card--feat{grid-column:auto;}
body.type-posts-listing #content .clb-card--feat .clb-card__link{flex-direction:column;min-height:0;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis{flex:0 0 auto;height:132px;min-height:0;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis::before{width:170px;height:170px;left:-44px;bottom:-104px;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis::after{display:block;width:90px;height:90px;right:-24px;top:-34px;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis > svg{width:68px;height:68px;padding:15px;border-radius:20px;}
body.type-posts-listing #content .clb-card--feat .clb-card__vis .clb-card__tag{display:inline-flex;}
body.type-posts-listing #content .clb-card--feat .clb-card__meta .clb-card__tag{display:none;}
body.type-posts-listing #content .clb-card--feat .clb-card__body{gap:10px;padding:16px 16px 14px;}
body.type-posts-listing #content .clb-card--feat .clb-card__title{font-size:19px;}
body.type-posts-listing #content .clb-card--feat .clb-card__foot{display:flex;margin-top:2px;}
body.type-posts-listing #content .clb-about{margin:22px 0 24px;padding:20px 18px 18px;border-radius:20px;}
body.type-posts-listing #content .clb-about__ico{position:static;margin:0 0 12px;}
body.type-posts-listing #content .clb-about h3{font-size:18px !important;}
body.type-posts-listing #content .clb-about p{font-size:14.5px !important;}
}
@media (prefers-reduced-motion:reduce){
body.type-posts-listing #content .clb-card__link,
body.type-posts-listing #content .clb-rub__item,
body.type-posts-listing #content .clb-card__vis svg{transition:none !important;}
}
/* ==================== cleno-navody.css ==================== */
/* ==================================================
NÁVODY CLENO.CZ
Společný styl pro rozcestník, seznamy návodů
a jednotlivé návody.
Vzhled odpovídá stránce B2B spolupráce (#cleno-b2b).
================================================== */
.cleno-navody,
.pageArticleDetail .filter-container,
.cn-detail-nav,
.cn-detail-cta {
--cn-primary: #0090c9;
--cn-dark: #063f56;
--cn-medium: #007caf;
--cn-deep: #0074a2;
--cn-light: #e4f5fb;
--cn-pale: #eaf7fc;
--cn-soft: #f5fbfe;
--cn-border: #cde8f3;
--cn-border-strong: #bfe3f1;
--cn-text: #333333;
--cn-muted: #666666;
--cn-white: #ffffff;
--cn-radius-l: 14px;
--cn-radius-m: 12px;
--cn-shadow: 0 4px 14px rgba(0, 144, 201, 0.07);
--cn-shadow-hover: 0 8px 22px rgba(0, 144, 201, 0.13);
--cn-font: "Open Sans", Arial, Helvetica, sans-serif;
}
.cleno-navody {
width: 100%;
max-width: 1000px;
margin: 20px auto;
color: var(--cn-text);
font-family: var(--cn-font);
line-height: 1.7;
box-sizing: border-box;
}
.cleno-navody *,
.cleno-navody *::before,
.cleno-navody *::after,
.cn-detail-nav *,
.cn-detail-cta * {
box-sizing: border-box;
}
.cleno-navody h1,
.cleno-navody h2,
.cleno-navody h3,
.cleno-navody p {
margin-top: 0;
font-family: var(--cn-font);
text-transform: none;
}
.cleno-navody a,
.cleno-navody a:hover,
.cleno-navody a * {
text-decoration: none !important;
}
.cleno-navody img {
max-width: 100%;
border: 0;
}
.cleno-navody ul {
margin: 0;
padding: 0;
list-style: none;
}
.cleno-navody ul li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: none;
}
.cleno-navody ul li::before,
.cleno-navody ul li::marker {
content: none !important;
display: none !important;
}
/* ==================================================
ŠTÍTKY
================================================== */
.cleno-navody .cn-eyebrow,
.cleno-navody .cn-label,
.cleno-navody .cn-card-label,
.cleno-navody .cn-cta-label,
.cn-detail-cta .cn-cta-label {
display: inline-block;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
}
.cleno-navody .cn-eyebrow {
margin-bottom: 14px;
padding: 7px 14px;
color: var(--cn-white);
background: var(--cn-primary);
border-radius: 20px;
font-size: 13px;
letter-spacing: 0.02em;
}
.cleno-navody .cn-label {
margin-bottom: 9px;
padding: 6px 13px;
color: var(--cn-deep);
background: var(--cn-light);
border-radius: 18px;
font-size: 12px;
letter-spacing: 0.04em;
}
/* ==================================================
ZÁLOŽKY (navigace mezi stránkami návodů)
================================================== */
.cn-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px !important;
padding: 0 !important;
list-style: none !important;
}
.cn-tabs li {
margin: 0 !important;
padding: 0 !important;
}
.cn-tabs li::before {
content: none !important;
}
.cn-tabs a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px 7px 11px;
color: var(--cn-deep) !important;
background: var(--cn-soft);
border: 1px solid var(--cn-border);
border-radius: 20px;
font-family: var(--cn-font);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-decoration: none !important;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cn-tabs a::before {
content: "";
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.cn-tabs a:hover,
.cn-tabs a.is-active {
color: var(--cn-white) !important;
background: var(--cn-primary);
border-color: var(--cn-primary);
}
/* ==================================================
ÚVODNÍ SEKCE
================================================== */
.cleno-navody .cn-hero {
margin-bottom: 52px;
overflow: hidden;
background: var(--cn-white);
border: 1px solid var(--cn-border-strong);
border-radius: var(--cn-radius-l);
box-shadow: 0 5px 18px rgba(0, 144, 201, 0.1);
}
.cleno-navody .cn-hero > img {
display: block;
width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
}
.cleno-navody .cn-hero-content {
padding: 32px;
background: linear-gradient(135deg, var(--cn-pale) 0%, var(--cn-white) 100%);
}
.cleno-navody .cn-hero h2 {
margin-bottom: 12px;
color: var(--cn-dark);
font-size: 30px;
line-height: 1.25;
}
.cleno-navody .cn-hero p {
max-width: 800px;
margin-bottom: 0;
color: #444444;
font-size: 17px;
}
.cleno-navody .cn-hero a:not(.cn-chip) {
color: var(--cn-primary);
font-weight: 700;
}
.cleno-navody .cn-hero a:not(.cn-chip):hover {
color: var(--cn-dark);
}
.cleno-navody .cn-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.cleno-navody .cn-chip,
.cn-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px 6px 10px;
color: var(--cn-dark);
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: 18px;
font-family: var(--cn-font);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.cleno-navody a.cn-chip:hover {
color: var(--cn-white);
background: var(--cn-primary);
border-color: var(--cn-primary);
}
.cn-chip::before {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.cn-chip:not([class*="ci-"])::before {
display: none;
}
/* ==================================================
NADPISY SEKCÍ
================================================== */
.cleno-navody .cn-section {
margin-bottom: 56px;
}
.cleno-navody .cn-section-heading {
max-width: 760px;
margin: 0 auto 26px;
text-align: center;
}
.cleno-navody .cn-section-heading h2 {
margin-bottom: 9px;
color: var(--cn-dark);
font-size: 26px;
line-height: 1.3;
}
.cleno-navody .cn-section-heading p {
margin-bottom: 0;
color: var(--cn-muted);
font-size: 15px;
}
/* ==================================================
ROZCESTNÍK (/navody/)
================================================== */
.cleno-navody .cn-hub {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 30px;
}
.cleno-navody .cn-hub-card {
position: relative;
display: flex;
min-width: 0;
padding: 32px 24px 24px;
flex-direction: column;
align-items: center;
overflow: hidden;
color: var(--cn-text);
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-l);
text-align: center;
box-shadow: var(--cn-shadow);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cleno-navody .cn-hub-card::before {
content: "";
position: absolute;
top: -72px;
right: -72px;
width: 155px;
height: 155px;
background: var(--cn-pale);
border-radius: 50%;
opacity: 0.74;
}
.cleno-navody .cn-hub-card > * {
position: relative;
z-index: 1;
}
.cleno-navody .cn-hub-card:hover {
transform: translateY(-3px);
border-color: var(--cn-primary);
box-shadow: var(--cn-shadow-hover);
}
.cleno-navody .cn-hub-card .cn-icon {
width: 84px;
height: 84px;
margin-bottom: 18px;
background-size: 40px 40px;
}
.cleno-navody .cn-hub-title {
display: block;
margin: 0 0 8px;
font-weight: 700;
color: var(--cn-dark);
font-size: 24px;
line-height: 1.25;
}
.cleno-navody .cn-hub-text {
display: block;
margin-bottom: 16px;
color: var(--cn-muted);
font-size: 14px;
line-height: 1.6;
}
.cleno-navody .cn-hub-count {
display: inline-block;
margin-bottom: 20px;
padding: 4px 12px;
color: var(--cn-deep);
background: var(--cn-light);
border-radius: 14px;
font-size: 13px;
font-weight: 700;
line-height: 1.5;
}
.cleno-navody .cn-more {
position: relative;
display: block;
width: 100%;
margin-top: auto;
padding: 10px 35px 10px 14px;
color: var(--cn-deep);
background: var(--cn-soft);
border: 1px solid var(--cn-border);
border-radius: 9px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-align: left;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cleno-navody .cn-hub-card:hover .cn-more {
color: var(--cn-white);
background: var(--cn-primary);
border-color: var(--cn-primary);
}
.cleno-navody .cn-hub-card:hover .cn-more::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 4 6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ==================================================
KARTY KATEGORIÍ (rozcestník)
================================================== */
.cleno-navody .cn-categories {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.cleno-navody .cn-category-card {
position: relative;
display: flex;
min-width: 0;
padding: 27px 22px;
flex-direction: column;
align-items: center;
overflow: hidden;
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-m);
text-align: center;
box-shadow: var(--cn-shadow);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cleno-navody .cn-category-card::before,
.cleno-navody .cn-manual-card::before {
content: "";
position: absolute;
top: -72px;
right: -72px;
width: 155px;
height: 155px;
background: var(--cn-pale);
border-radius: 50%;
opacity: 0.74;
}
.cleno-navody .cn-category-card:hover {
transform: translateY(-3px);
border-color: var(--cn-primary);
box-shadow: var(--cn-shadow-hover);
}
.cleno-navody .cn-category-card > * {
position: relative;
z-index: 1;
}
.cleno-navody .cn-icon,
.cleno-navody .cn-feature-icon,
.cleno-navody .cn-cta-icon,
.cn-detail-cta .cn-cta-icon {
display: block;
flex: 0 0 auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.cleno-navody .cn-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
background-color: var(--cn-light);
background-size: 31px 31px;
border-radius: 50%;
}
.cleno-navody .cn-card-label {
margin-bottom: 7px;
color: var(--cn-primary);
font-size: 12px;
letter-spacing: 0.04em;
}
.cleno-navody .cn-category-card h3 {
margin-bottom: 9px;
color: var(--cn-dark);
font-size: 19px;
line-height: 1.35;
}
.cleno-navody .cn-category-card > p {
margin-bottom: 16px;
color: var(--cn-muted);
font-size: 14px;
line-height: 1.6;
}
.cleno-navody .cn-link-list {
display: grid;
width: 100%;
gap: 8px;
margin: auto 0 0;
}
/* odkazové tlačítko jako .b2b-link */
.cleno-navody .cn-link,
.cn-detail-cta .cn-link {
position: relative;
display: block;
padding: 9px 35px 9px 13px;
color: var(--cn-deep);
background: var(--cn-soft);
border: 1px solid var(--cn-border);
border-radius: 9px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-align: left;
text-decoration: none;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cleno-navody .cn-link::after,
.cn-detail-cta .cn-link::after,
.cleno-navody .cn-more::after {
content: "";
position: absolute;
top: 50%;
right: 13px;
width: 15px;
height: 15px;
margin-top: -7.5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 4 6 6-6 6' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.cleno-navody .cn-link:hover,
.cn-detail-cta .cn-link:hover,
.cleno-navody .cn-manual-card:hover .cn-more {
color: var(--cn-white);
background: var(--cn-primary);
border-color: var(--cn-primary);
}
.cleno-navody .cn-link:hover::after,
.cn-detail-cta .cn-link:hover::after,
.cleno-navody .cn-manual-card:hover .cn-more::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 4 6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-link-main {
color: var(--cn-white);
background: var(--cn-primary);
border-color: var(--cn-primary);
}
.cleno-navody .cn-link-main::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 4 6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-link-main:hover {
background: var(--cn-deep);
border-color: var(--cn-deep);
}
/* ==================================================
SEZNAMY NÁVODŮ (lednice, kávovary, konvice)
================================================== */
/* záhlaví stránky */
.cleno-navody .cn-page-head {
position: relative;
display: flex;
margin-bottom: 36px;
padding: 28px 32px;
align-items: center;
gap: 22px;
overflow: hidden;
background: linear-gradient(135deg, var(--cn-pale) 0%, var(--cn-white) 70%);
border: 1px solid var(--cn-border-strong);
border-radius: var(--cn-radius-l);
box-shadow: 0 5px 18px rgba(0, 144, 201, 0.1);
}
.cleno-navody .cn-page-head::before,
.cleno-navody .cn-page-head::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.cleno-navody .cn-page-head::before {
top: -70px;
right: -40px;
width: 200px;
height: 200px;
background: var(--cn-light);
opacity: 0.7;
}
.cleno-navody .cn-page-head::after {
bottom: -60px;
right: 150px;
width: 110px;
height: 110px;
border: 2px solid var(--cn-border);
}
.cleno-navody .cn-page-head > * {
position: relative;
z-index: 1;
}
.cleno-navody .cn-page-head .cn-icon {
width: 76px;
height: 76px;
margin: 0;
background-color: var(--cn-white);
background-size: 38px 38px;
box-shadow: 0 6px 16px rgba(0, 144, 201, 0.16);
}
.cleno-navody .cn-page-head-text {
flex: 1 1 auto;
min-width: 0;
}
.cleno-navody .cn-page-head h2 {
margin: 0 0 6px;
color: var(--cn-dark);
font-size: 28px;
line-height: 1.25;
}
.cleno-navody .cn-page-head p {
max-width: 620px;
margin: 0;
color: #444444;
font-size: 15px;
line-height: 1.6;
}
.cleno-navody .cn-page-count {
display: flex;
flex: 0 0 auto;
min-width: 96px;
padding: 12px 16px;
flex-direction: column;
align-items: center;
color: var(--cn-muted);
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-m);
box-shadow: var(--cn-shadow);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cleno-navody .cn-page-count strong {
color: var(--cn-primary);
font-size: 30px;
line-height: 1.1;
}
/* skupiny */
.cleno-navody .cn-group {
margin-bottom: 42px;
}
.cleno-navody .cn-group-title {
display: flex;
margin: 0 0 18px;
padding-left: 14px;
align-items: center;
gap: 12px;
color: var(--cn-dark);
border-left: 4px solid var(--cn-primary);
font-size: 22px;
line-height: 1.3;
}
.cleno-navody .cn-group-title span {
padding: 3px 11px;
color: var(--cn-deep);
background: var(--cn-light);
border-radius: 14px;
font-size: 13px;
font-weight: 700;
}
/* karty */
.cleno-navody .cn-guides {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.cleno-navody .cn-guide {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
color: var(--cn-text);
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: 16px;
box-shadow: var(--cn-shadow);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* modrý proužek nahoře při najetí */
.cleno-navody .cn-guide::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2;
height: 4px;
background: linear-gradient(90deg, var(--cn-primary) 0%, #4cc3ee 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.cleno-navody .cn-guide:hover {
transform: translateY(-4px);
border-color: var(--cn-border-strong);
box-shadow: 0 14px 30px rgba(0, 144, 201, 0.16);
}
.cleno-navody .cn-guide:hover::before {
transform: scaleX(1);
}
.cleno-navody .cn-guide-img {
position: relative;
display: flex;
height: 200px;
padding: 20px;
align-items: center;
justify-content: center;
overflow: hidden;
background: #ffffff;
}
.cleno-navody .cn-guide-img img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.35s ease;
}
.cleno-navody .cn-guide:hover .cn-guide-img img {
transform: scale(1.06);
}
.cleno-navody .cn-guide-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
display: inline-flex;
padding: 5px 11px 5px 9px;
align-items: center;
gap: 6px;
color: var(--cn-white);
background: var(--cn-dark);
border-radius: 14px;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.cleno-navody .cn-guide-badge::before {
content: "";
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 7px solid #4cc3ee;
}
.cleno-navody .cn-guide-body {
display: flex;
padding: 18px 22px 0;
flex: 1 1 auto;
flex-direction: column;
border-top: 1px solid var(--cn-border);
background: linear-gradient(180deg, var(--cn-soft) 0%, var(--cn-white) 60%);
}
.cleno-navody .cn-guide-brand {
margin-bottom: 4px;
color: var(--cn-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.cleno-navody .cn-guide-title {
display: block;
margin: 0 0 8px;
color: var(--cn-dark);
font-size: 22px;
font-weight: 800;
line-height: 1.2;
}
.cleno-navody .cn-guide-codes {
display: -webkit-box;
margin-bottom: 18px;
overflow: hidden;
color: var(--cn-muted);
font-size: 13px;
line-height: 1.55;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cleno-navody .cn-guide-foot {
display: flex;
margin: auto -22px 0;
padding: 14px 22px;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px dashed var(--cn-border);
}
.cleno-navody .cn-guide-more {
color: var(--cn-deep);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
transition: color 0.2s ease;
}
.cleno-navody .cn-guide-arrow {
display: block;
flex: 0 0 36px;
width: 36px;
height: 36px;
background: var(--cn-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4 4 4-4 4' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
border-radius: 50%;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.cleno-navody .cn-guide:hover .cn-guide-more {
color: var(--cn-primary);
}
.cleno-navody .cn-guide:hover .cn-guide-arrow {
background-color: var(--cn-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4 4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transform: translateX(3px);
}
@media screen and (max-width: 850px) {
.cleno-navody .cn-guides {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cleno-navody .cn-page-count {
display: none;
}
}
@media screen and (max-width: 600px) {
.cleno-navody .cn-page-head {
margin-bottom: 26px;
padding: 20px;
align-items: flex-start;
gap: 16px;
}
.cleno-navody .cn-page-head::after {
display: none;
}
.cleno-navody .cn-page-head .cn-icon {
width: 56px;
height: 56px;
background-size: 28px 28px;
}
.cleno-navody .cn-page-head h2 {
font-size: 22px;
}
.cleno-navody .cn-group-title {
font-size: 19px;
}
.cleno-navody .cn-guides {
grid-template-columns: 1fr;
gap: 12px;
}
.cleno-navody .cn-guide {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
}
.cleno-navody .cn-guide:hover {
transform: none;
}
.cleno-navody .cn-guide-img {
height: auto;
min-height: 100%;
padding: 10px;
border-right: 1px solid var(--cn-border);
}
.cleno-navody .cn-guide-badge {
top: 8px;
left: 8px;
padding: 4px 6px;
font-size: 0;
gap: 0;
}
.cleno-navody .cn-guide-body {
padding: 14px 16px 0;
border-top: 0;
}
.cleno-navody .cn-guide-title {
margin-bottom: 4px;
font-size: 19px;
}
.cleno-navody .cn-guide-codes {
margin-bottom: 10px;
font-size: 12px;
}
.cleno-navody .cn-guide-foot {
margin: auto -16px 0;
padding: 10px 16px;
}
.cleno-navody .cn-guide-arrow {
flex-basis: 30px;
width: 30px;
height: 30px;
background-size: 15px 15px;
}
}
/* ==================================================
VÝHODY / TIPY (jako .b2b-feature-card)
================================================== */
.cleno-navody .cn-features-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.cleno-navody .cn-feature-card {
position: relative;
display: flex;
min-width: 0;
padding: 23px 22px;
align-items: flex-start;
gap: 17px;
overflow: hidden;
color: var(--cn-text);
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-m);
box-shadow: var(--cn-shadow);
}
.cleno-navody a.cn-feature-card {
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cleno-navody a.cn-feature-card:hover {
transform: translateY(-3px);
border-color: var(--cn-primary);
box-shadow: var(--cn-shadow-hover);
}
.cleno-navody .cn-feature-icon {
width: 54px;
height: 54px;
background-color: var(--cn-light);
background-size: 27px 27px;
border-radius: 50%;
}
.cleno-navody .cn-feature-card > div:last-child {
flex: 1 1 auto;
min-width: 0;
}
.cleno-navody .cn-feature-number {
display: inline-block;
margin-bottom: 3px;
color: var(--cn-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
}
.cleno-navody .cn-feature-card h3 {
margin-bottom: 6px;
color: var(--cn-dark);
font-size: 18px;
line-height: 1.35;
}
.cleno-navody .cn-feature-card p {
margin-bottom: 0;
color: var(--cn-muted);
font-size: 14px;
line-height: 1.6;
}
/* ==================================================
CTA (jako .b2b-cta)
================================================== */
.cleno-navody .cn-cta,
.cn-detail-cta {
position: relative;
display: flex;
margin-bottom: 30px;
padding: 31px 32px;
align-items: center;
gap: 24px;
overflow: hidden;
color: var(--cn-white);
background: linear-gradient(135deg, var(--cn-medium) 0%, #009bd2 100%);
border-radius: var(--cn-radius-l);
box-shadow: 0 7px 20px rgba(0, 125, 175, 0.2);
font-family: var(--cn-font);
line-height: 1.7;
}
.cleno-navody .cn-cta::before,
.cleno-navody .cn-cta::after,
.cn-detail-cta::before,
.cn-detail-cta::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
pointer-events: none;
}
.cleno-navody .cn-cta::before,
.cn-detail-cta::before {
top: -90px;
right: -65px;
width: 220px;
height: 220px;
}
.cleno-navody .cn-cta::after,
.cn-detail-cta::after {
bottom: -100px;
left: 45%;
width: 180px;
height: 180px;
}
.cleno-navody .cn-cta-icon,
.cn-detail-cta .cn-cta-icon {
position: relative;
z-index: 1;
width: 76px;
height: 76px;
background-color: var(--cn-white);
background-size: 39px 39px;
border-radius: 50%;
box-shadow: 0 5px 14px rgba(0, 78, 110, 0.22);
}
.cleno-navody .cn-cta-content,
.cn-detail-cta .cn-cta-content {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
}
.cleno-navody .cn-cta-label,
.cn-detail-cta .cn-cta-label {
margin-bottom: 5px;
color: var(--cn-white);
font-size: 12px;
letter-spacing: 0.05em;
}
.cleno-navody .cn-cta h2,
.cn-detail-cta h2 {
margin: 0 0 7px;
color: var(--cn-white) !important;
font-family: var(--cn-font);
font-size: 24px;
line-height: 1.3;
text-align: left !important;
}
.cleno-navody .cn-cta p,
.cn-detail-cta p {
margin: 0 0 17px;
color: var(--cn-white);
font-size: 14px;
}
.cleno-navody .cn-buttons,
.cn-detail-cta .cn-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cleno-navody .cn-btn,
.cn-detail-cta .cn-btn {
display: inline-flex;
min-height: 46px;
padding: 10px 18px;
align-items: center;
justify-content: center;
gap: 9px;
color: var(--cn-deep) !important;
background: var(--cn-white);
border: 2px solid var(--cn-white);
border-radius: 24px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-decoration: none !important;
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.cleno-navody .cn-btn:hover,
.cn-detail-cta .cn-btn:hover {
color: var(--cn-white) !important;
background: transparent;
transform: translateY(-2px);
}
.cleno-navody .cn-btn-ghost,
.cn-detail-cta .cn-btn-ghost {
color: var(--cn-white) !important;
background: transparent;
border-color: rgba(255, 255, 255, 0.7);
}
.cleno-navody .cn-btn-ghost:hover,
.cn-detail-cta .cn-btn-ghost:hover {
color: var(--cn-deep) !important;
background: var(--cn-white);
border-color: var(--cn-white);
}
.cleno-navody .cn-btn-icon,
.cn-detail-cta .cn-btn-icon {
display: block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
/* ==================================================
JEDNOTLIVÉ NÁVODY
Přestyluje stávající stránky (.filter-container)
bez nutnosti je přepisovat.
================================================== */
.pageArticleDetail .filter-container {
max-width: 1000px;
margin: 10px auto 30px;
padding: 0;
color: var(--cn-text);
font-family: var(--cn-font);
line-height: 1.7;
}
/* sjednocení starých inline stylů v textu návodů */
.pageArticleDetail .filter-container span[style],
.pageArticleDetail .filter-container strong[style] {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
}
.pageArticleDetail .filter-container h2,
.pageArticleDetail .filter-container h3,
.pageArticleDetail .filter-container p {
font-family: var(--cn-font);
text-transform: none;
}
/* záhlaví návodu */
.pageArticleDetail .filter-container .filter-header {
margin-bottom: 26px;
padding: 28px 32px;
background: linear-gradient(135deg, var(--cn-pale) 0%, var(--cn-white) 100%);
border: 1px solid var(--cn-border-strong);
border-radius: var(--cn-radius-l);
box-shadow: 0 5px 18px rgba(0, 144, 201, 0.1);
text-align: left;
}
.pageArticleDetail .filter-container .filter-header h2 {
display: inline-block;
margin: 0 0 12px;
padding: 7px 14px;
color: var(--cn-white);
background: var(--cn-primary);
border-radius: 20px;
font-size: 13px !important;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
text-align: left !important;
text-transform: uppercase;
}
.pageArticleDetail .filter-container .filter-header h2 a,
.pageArticleDetail .filter-container .filter-header h2 .filter-link {
color: var(--cn-white) !important;
text-decoration: underline;
}
.pageArticleDetail .filter-container .filter-description {
max-width: 800px;
margin: 0;
color: #444444;
font-size: 17px !important;
line-height: 1.7;
text-align: left !important;
}
.pageArticleDetail .filter-container .cn-detail-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
/* karty sekcí */
.pageArticleDetail .filter-container .steps-card,
.pageArticleDetail .filter-container .gallery-card,
.pageArticleDetail .filter-container .video-card,
.pageArticleDetail .filter-container .image-card {
margin-bottom: 22px;
padding: 28px 30px;
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-l);
box-shadow: var(--cn-shadow);
}
.pageArticleDetail .filter-container .steps-card h3,
.pageArticleDetail .filter-container .gallery-card h3,
.pageArticleDetail .filter-container .video-card h3,
.pageArticleDetail .filter-container .image-card h3 {
margin: 0 0 20px;
color: var(--cn-dark) !important;
font-size: 24px !important;
font-weight: 700;
line-height: 1.3;
text-align: left !important;
}
/* kroky */
.pageArticleDetail .filter-container .steps-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step-counter;
}
.pageArticleDetail .filter-container .steps-list li {
position: relative;
margin: 0;
padding: 18px 20px 18px 74px;
background: var(--cn-soft);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-m);
counter-increment: step-counter;
font-size: 15px;
list-style: none;
}
.pageArticleDetail .filter-container .steps-list li::before {
content: counter(step-counter);
position: absolute;
top: 18px;
left: 18px;
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--cn-white);
background: var(--cn-primary);
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 144, 201, 0.25);
font-family: var(--cn-font);
font-size: 16px;
font-weight: 700;
}
.pageArticleDetail .filter-container .steps-list li > strong,
.pageArticleDetail .filter-container .steps-list li > span:first-child {
display: block;
color: var(--cn-dark);
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.pageArticleDetail .filter-container .steps-list li > span:first-child strong {
font-weight: 700;
}
.pageArticleDetail .filter-container .steps-list li p {
margin: 5px 0 0;
color: var(--cn-muted);
font-size: 14px !important;
line-height: 1.6;
}
.pageArticleDetail .filter-container .steps-list a {
color: var(--cn-primary);
font-weight: 700;
}
/* krok s obrázkem (doplní cleno-navody.js) */
.pageArticleDetail .filter-container .steps-list li.cn-has-img {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
align-items: start;
column-gap: 20px;
}
.pageArticleDetail .filter-container .cn-step-text {
min-width: 0;
}
.pageArticleDetail .filter-container .cn-step-text > strong,
.pageArticleDetail .filter-container .cn-step-text > span:first-child {
display: block;
color: var(--cn-dark);
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.pageArticleDetail .filter-container .cn-step-text p {
margin: 5px 0 0;
color: var(--cn-muted);
font-size: 14px !important;
line-height: 1.6;
}
.pageArticleDetail .filter-container .cn-step-img {
display: block;
overflow: hidden;
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pageArticleDetail .filter-container .cn-step-img:hover {
border-color: var(--cn-primary);
box-shadow: var(--cn-shadow-hover);
}
.pageArticleDetail .filter-container .cn-step-img img {
display: block;
width: 100%;
height: auto;
}
/* galerie (když obrázky nejdou spárovat s kroky) */
.pageArticleDetail .filter-container .gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.pageArticleDetail .filter-container .gallery figure {
position: relative;
margin: 0;
overflow: hidden;
background: var(--cn-white);
border: 1px solid var(--cn-border);
border-radius: var(--cn-radius-m);
box-shadow: none;
}
.pageArticleDetail .filter-container .gallery img {
display: block;
width: 100%;
height: auto;
}
/* video */
.pageArticleDetail .filter-container .video-card > div,
.pageArticleDetail .filter-container .video-wrapper {
margin: 0 !important;
text-align: left !important;
}
.pageArticleDetail .filter-container .video-card iframe {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--cn-radius-m);
}
/* samostatný obrázek */
.pageArticleDetail .filter-container .image-card figure {
margin: 0;
text-align: center;
}
.pageArticleDetail .filter-container .image-card img {
max-width: 100%;
height: auto;
border-radius: var(--cn-radius-m);
}
.pageArticleDetail .filter-container .image-card figcaption {
margin-top: 10px;
color: var(--cn-muted);
font-size: 13px;
}
/* navigace nad návodem a CTA pod ním (doplní cleno-navody.js) */
.cn-detail-nav {
max-width: 1000px;
margin: 0 auto;
font-family: var(--cn-font);
}
.cn-detail-cta {
max-width: 1000px;
margin: 0 auto 30px;
}
/* ==================================================
IKONY (stejný styl jako stránka B2B)
================================================== */
.cleno-navody .icon-fridge,
.cn-tabs .ti-fridge::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='8' y='4' width='16' height='24' rx='2' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='M8 13h16M12 8v3M12 17v4' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-coffee,
.cn-tabs .ti-coffee::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 9h16v8a8 8 0 0 1-16 0V9zM23 12h2a4 4 0 0 1 0 8h-3M8 27h16M12 4c-2 2 2 3 0 5M18 4c-2 2 2 3 0 5' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-pitcher,
.cn-tabs .ti-pitcher::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 6h13l-2 20H10L8 6zM21 10h3a5 5 0 0 1 0 10h-4M12 12h6' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-book,
.cn-tabs .ti-book::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 8c-3-2-7-3-11-3v19c4 0 8 1 11 3 3-2 7-3 11-3V5c-4 0-8 1-11 3zM16 8v19' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-compass {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='m20.5 11.5-3 6-6 3 3-6z' fill='none' stroke='%230090c9' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-hose {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='11' y='10' width='10' height='12' rx='3' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='M16 10V6c0-2 2-2 4-2h6M16 22v4c0 2-2 2-4 2H6' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-cartridge {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='11' y='4' width='10' height='24' rx='3' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='M14 10h4M14 14h4M14 18h4' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-air {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 12h15a4 4 0 1 0-4-4M4 18h20a4 4 0 1 1-4 4M4 24h9' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-drop {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4c-5 7-8 11-8 15a8 8 0 0 0 16 0c0-4-3-8-8-15zM12 20a4 4 0 0 0 4 4' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-tap {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h12a6 6 0 0 1 6 6v2M10 12V8M6 8h8M24 25v1' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-towel {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 6h16v20H8zM8 11h16M12 20h8' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-calendar {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='7' width='22' height='20' rx='2' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='M5 13h22M11 4v6M21 4v6M11 19l3 3 6-6' fill='none' stroke='%230090c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-steps,
.ci-steps::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 8h15M12 16h15M12 24h15' fill='none' stroke='%230090c9' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8' r='2' fill='%230090c9'/%3E%3Ccircle cx='6' cy='16' r='2' fill='%230090c9'/%3E%3Ccircle cx='6' cy='24' r='2' fill='%230090c9'/%3E%3C/svg%3E");
}
.cleno-navody .icon-image,
.ci-image::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='6' width='24' height='20' rx='3' fill='none' stroke='%230090c9' stroke-width='2.5'/%3E%3Ccircle cx='11' cy='13' r='2.5' fill='none' stroke='%230090c9' stroke-width='2'/%3E%3Cpath d='m5 24 8-7 5 4 4-3 6 5' fill='none' stroke='%230090c9' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-play,
.ci-play::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%230090c9' stroke-width='2.5'/%3E%3Cpath d='m13 11 8 5-8 5z' fill='%230090c9'/%3E%3C/svg%3E");
}
.cleno-navody .icon-clock,
.ci-clock::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%230090c9' stroke-width='2.5'/%3E%3Cpath d='M16 9v7l5 3' fill='none' stroke='%230090c9' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-help,
.cn-detail-cta .icon-help {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 11a8 8 0 0 1 16 0v7a4 4 0 0 1-4 4h-2M8 11H5v9h5v-9H8zm16 0h3v9h-5v-9h2z' fill='none' stroke='%230074a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 25h4' fill='none' stroke='%230074a2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cn-detail-cta .icon-cart {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 5h4l3 15h14l3-10H10' fill='none' stroke='%230074a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='25' r='2' fill='none' stroke='%230074a2' stroke-width='2'/%3E%3Ccircle cx='23' cy='25' r='2' fill='none' stroke='%230074a2' stroke-width='2'/%3E%3C/svg%3E");
}
.cleno-navody .icon-phone,
.cn-detail-cta .icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h3l1.5 4.5-2.2 1.5a10.5 10.5 0 0 0 5.2 5.2l1.5-2.2L20.5 14v3a1.5 1.5 0 0 1-1.5 1.5A14.5 14.5 0 0 1 4 5a1.5 1.5 0 0 1 1.5-1.5z' fill='none' stroke='%230074a2' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .icon-mail,
.cn-detail-cta .icon-mail {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' fill='none' stroke='%230074a2' stroke-width='1.8'/%3E%3Cpath d='m5 8 7 5.5L19 8' fill='none' stroke='%230074a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-btn:hover .icon-phone,
.cn-detail-cta .cn-btn:hover .icon-phone,
.cleno-navody .cn-btn-ghost .icon-phone,
.cn-detail-cta .cn-btn-ghost .icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h3l1.5 4.5-2.2 1.5a10.5 10.5 0 0 0 5.2 5.2l1.5-2.2L20.5 14v3a1.5 1.5 0 0 1-1.5 1.5A14.5 14.5 0 0 1 4 5a1.5 1.5 0 0 1 1.5-1.5z' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-btn:hover .icon-mail,
.cn-detail-cta .cn-btn:hover .icon-mail,
.cleno-navody .cn-btn-ghost .icon-mail,
.cn-detail-cta .cn-btn-ghost .icon-mail {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='m5 8 7 5.5L19 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-btn-ghost:hover .icon-phone,
.cn-detail-cta .cn-btn-ghost:hover .icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h3l1.5 4.5-2.2 1.5a10.5 10.5 0 0 0 5.2 5.2l1.5-2.2L20.5 14v3a1.5 1.5 0 0 1-1.5 1.5A14.5 14.5 0 0 1 4 5a1.5 1.5 0 0 1 1.5-1.5z' fill='none' stroke='%230074a2' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cleno-navody .cn-btn-ghost:hover .icon-mail,
.cn-detail-cta .cn-btn-ghost:hover .icon-mail {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' fill='none' stroke='%230074a2' stroke-width='1.8'/%3E%3Cpath d='m5 8 7 5.5L19 8' fill='none' stroke='%230074a2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ikony v záložkách zbělají při najetí a u aktivní záložky */
.cn-tabs a:hover::before,
.cn-tabs a.is-active::before {
filter: brightness(0) invert(1);
}
/* ==================================================
TABLET
================================================== */
@media screen and (max-width: 850px) {
.cleno-navody .cn-hub {
grid-template-columns: 1fr;
}
.cleno-navody .cn-hub-card {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 18px;
align-items: center;
padding: 22px 20px;
text-align: left;
}
.cleno-navody .cn-hub-card .cn-icon {
grid-row: 1 / span 3;
width: 72px;
height: 72px;
margin: 0;
background-size: 34px 34px;
}
.cleno-navody .cn-hub-card .cn-card-label,
.cleno-navody .cn-hub-title,
.cleno-navody .cn-hub-text {
grid-column: 2;
margin-bottom: 4px;
}
.cleno-navody .cn-hub-count {
grid-column: 2;
justify-self: start;
margin-bottom: 0;
}
.cleno-navody .cn-hub-card .cn-more {
grid-column: 1 / -1;
margin-top: 16px;
}
.cleno-navody .cn-categories,
.cleno-navody .cn-manuals.is-three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==================================================
MOBIL
================================================== */
@media screen and (max-width: 600px) {
.cleno-navody {
margin-top: 12px;
font-size: 10.5pt;
}
.cleno-navody .cn-hero {
margin-bottom: 40px;
}
.cleno-navody .cn-hero-content {
padding: 25px 20px;
}
.cleno-navody .cn-hero h2 {
font-size: 24px;
}
.cleno-navody .cn-hero p {
font-size: 15px;
}
.cleno-navody .cn-section {
margin-bottom: 46px;
}
.cleno-navody .cn-section-heading h2 {
font-size: 22px;
}
.cleno-navody .cn-categories,
.cleno-navody .cn-manuals,
.cleno-navody .cn-manuals.is-three,
.cleno-navody .cn-features-grid {
grid-template-columns: 1fr;
}
.cleno-navody .cn-category-card:hover,
.cleno-navody .cn-hub-card:hover,
.cleno-navody .cn-manual-card:hover,
.cleno-navody a.cn-feature-card:hover {
transform: none;
}
.cleno-navody .cn-cta,
.cn-detail-cta {
align-items: flex-start;
flex-direction: column;
gap: 17px;
padding: 26px 21px;
}
.cleno-navody .cn-cta-icon,
.cn-detail-cta .cn-cta-icon {
width: 68px;
height: 68px;
background-size: 34px 34px;
}
.cleno-navody .cn-cta h2,
.cn-detail-cta h2 {
font-size: 21px;
}
.cleno-navody .cn-buttons,
.cn-detail-cta .cn-buttons,
.cleno-navody .cn-btn,
.cn-detail-cta .cn-btn {
width: 100%;
}
.cn-tabs {
flex-wrap: nowrap;
margin-right: -16px !important;
padding-right: 16px !important;
padding-bottom: 4px !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.cn-tabs::-webkit-scrollbar {
display: none;
}
.cn-tabs li {
flex: 0 0 auto;
}
.cn-tabs a {
font-size: 12px;
white-space: nowrap;
}
.pageArticleDetail .filter-container .filter-header {
padding: 22px 20px;
}
.pageArticleDetail .filter-container .filter-description {
font-size: 15px !important;
}
.pageArticleDetail .filter-container .steps-card,
.pageArticleDetail .filter-container .gallery-card,
.pageArticleDetail .filter-container .video-card,
.pageArticleDetail .filter-container .image-card {
padding: 22px 16px;
}
.pageArticleDetail .filter-container .steps-card h3,
.pageArticleDetail .filter-container .gallery-card h3,
.pageArticleDetail .filter-container .video-card h3,
.pageArticleDetail .filter-container .image-card h3 {
font-size: 20px !important;
}
.pageArticleDetail .filter-container .steps-list li {
padding: 16px 16px 16px 62px;
}
.pageArticleDetail .filter-container .steps-list li::before {
top: 16px;
left: 14px;
width: 36px;
height: 36px;
font-size: 15px;
}
.pageArticleDetail .filter-container .steps-list li.cn-has-img {
grid-template-columns: minmax(0, 1fr);
}
.pageArticleDetail .filter-container .cn-step-img {
max-width: 220px;
margin-top: 12px;
}
.pageArticleDetail .filter-container .gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.cleno-navody .cn-category-card,
.cleno-navody .cn-hub-card,
.cleno-navody .cn-guide,
.cleno-navody .cn-guide::before,
.cleno-navody .cn-guide-img img,
.cleno-navody .cn-manual-card,
.cleno-navody .cn-link,
.cleno-navody .cn-more,
.cleno-navody .cn-btn,
.cn-detail-cta .cn-btn {
transition: none;
}
}
/* ==================================================
VYLEPŠENÍ VZHLEDU A MOBILNÍ OPTIMALIZACE
(přebíjí starší pravidla výše)
================================================== */
/* přístupnost a dotyk */
.cleno-navody a,
.cn-detail-nav a,
.cn-detail-cta a {
-webkit-tap-highlight-color: transparent;
}
.cleno-navody a:focus-visible,
.cn-detail-nav a:focus-visible,
.cn-detail-cta a:focus-visible,
.pageArticleDetail .filter-container a:focus-visible {
outline: 3px solid rgba(0, 144, 201, 0.45);
outline-offset: 3px;
}
/* ---------- záložky jako jeden přepínač ---------- */
.cn-tabs {
display: flex;
width: fit-content;
max-width: 100%;
margin: 0 0 26px !important;
padding: 5px !important;
gap: 4px;
background: var(--cn-soft);
border: 1px solid var(--cn-border);
border-radius: 26px;
}
.cn-tabs a {
min-height: 38px;
padding: 8px 16px 8px 12px;
background: transparent;
border-color: transparent;
border-radius: 20px;
}
.cn-tabs a:hover:not(.is-active) {
color: var(--cn-primary) !important;
background: var(--cn-white);
border-color: transparent;
}
.cn-tabs a:hover:not(.is-active)::before {
filter: none;
}
.cn-tabs a.is-active {
box-shadow: 0 4px 12px rgba(0, 144, 201, 0.28);
}
/* ---------- rozcestník ---------- */
.cleno-navody .cn-hero {
margin-bottom: 32px;
}
.cleno-navody .cn-hero > img {
max-height: 300px;
object-position: center 35%;
}
.cleno-navody .cn-hub-card {
background: linear-gradient(90deg, var(--cn-primary) 0%, #4cc3ee 100%) no-repeat left top / 0 4px, var(--cn-white);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.3s ease;
}
.cleno-navody .cn-hub-card:hover {
transform: translateY(-4px);
border-color: var(--cn-border-strong);
background-size: 100% 4px, auto;
box-shadow: 0 14px 30px rgba(0, 144, 201, 0.16);
}
.cleno-navody .cn-hub-card .cn-icon {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cleno-navody .cn-hub-card:hover .cn-icon {
transform: scale(1.06);
box-shadow: 0 0 0 7px var(--cn-pale);
}
.cleno-navody .cn-hub-text {
margin-bottom: 14px;
}
.cleno-navody .cn-hub-card .cn-hub-foot {
margin-top: auto;
}
.cleno-navody .cn-hub-foot {
display: flex;
width: 100%;
margin-top: 16px;
padding-top: 14px;
align-items: center;
justify-content: space-between;
gap: 10px;
border-top: 1px dashed var(--cn-border);
}
.cleno-navody .cn-hub-card .cn-hub-count {
margin: 0 0 4px;
}
.cleno-navody .cn-hub-go {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
white-space: nowrap;
gap: 10px;
color: var(--cn-deep);
font-size: 14px;
font-weight: 700;
transition: color 0.2s ease;
}
.cleno-navody .cn-hub-card:hover .cn-hub-go {
color: var(--cn-primary);
}
.cleno-navody .cn-hub-card:hover .cn-guide-arrow {
background-color: var(--cn-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4 4 4-4 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transform: translateX(3px);
}
/* ---------- detail návodu: časová osa kroků ---------- */
.pageArticleDetail .filter-container .steps-list li::before {
z-index: 2;
box-shadow: 0 0 0 4px var(--cn-white), 0 4px 10px rgba(0, 144, 201, 0.25);
}
.pageArticleDetail .filter-container .steps-list li::after {
content: "";
position: absolute;
top: 62px;
bottom: -30px;
left: 37px;
z-index: 1;
width: 2px;
background: linear-gradient(180deg, var(--cn-primary) 0%, var(--cn-border-strong) 100%);
opacity: 0.55;
}
.pageArticleDetail .filter-container .steps-list li:last-child::after {
display: none;
}
/* ---------- tablet ---------- */
@media screen and (max-width: 850px) {
.cleno-navody .cn-hub-card {
grid-template-columns: 64px minmax(0, 1fr);
}
.cleno-navody .cn-hub-card .cn-hub-count {
grid-column: 2;
justify-self: start;
margin: 2px 0 0;
}
.cleno-navody .cn-hub-card .cn-icon {
grid-row: 1 / span 3;
width: 64px;
height: 64px;
background-size: 30px 30px;
}
.cleno-navody .cn-hub-foot {
grid-column: 1 / -1;
margin-top: 14px;
padding-top: 14px;
}
}
/* ---------- mobil ---------- */
@media screen and (max-width: 600px) {
/* záložky */
.cn-tabs {
width: auto;
margin-right: 0 !important;
padding: 4px !important;
border-radius: 24px;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
}
.cn-tabs a {
min-height: 40px;
padding: 8px 14px 8px 11px;
font-size: 13px;
}
/* rozcestník */
.cleno-navody .cn-hero {
margin-bottom: 24px;
}
.cleno-navody .cn-hero > img {
max-height: 170px;
}
.cleno-navody .cn-hero-content {
padding: 20px 18px 22px;
}
.cleno-navody .cn-hero h2 {
margin-bottom: 8px;
font-size: 22px;
}
.cleno-navody .cn-hero p {
font-size: 14px;
}
.cleno-navody .cn-hub {
gap: 12px;
}
.cleno-navody .cn-hub-card {
padding: 18px 16px 16px;
column-gap: 14px;
}
.cleno-navody .cn-hub-card .cn-icon {
width: 54px;
height: 54px;
background-size: 26px 26px;
}
.cleno-navody .cn-hub-title {
font-size: 20px;
}
.cleno-navody .cn-hub-text {
font-size: 13px;
line-height: 1.5;
}
.cleno-navody .cn-hub-go {
font-size: 13px;
}
.cleno-navody .cn-hub-card .cn-guide-arrow {
flex-basis: 32px;
width: 32px;
height: 32px;
background-size: 16px 16px;
}
/* záhlaví seznamu */
.cleno-navody .cn-page-head {
padding: 18px;
align-items: center;
gap: 14px;
}
.cleno-navody .cn-page-head .cn-icon {
width: 48px;
height: 48px;
background-size: 24px 24px;
}
.cleno-navody .cn-page-head h2 {
margin-bottom: 4px;
font-size: 20px;
}
.cleno-navody .cn-page-head p {
font-size: 13px;
line-height: 1.5;
}
/* kontaktní banner – kompaktní */
.cleno-navody .cn-cta,
.cn-detail-cta {
gap: 0;
padding: 22px 18px;
}
.cleno-navody .cn-cta-icon,
.cn-detail-cta .cn-cta-icon {
display: none;
}
.cleno-navody .cn-cta h2,
.cn-detail-cta h2 {
font-size: 19px;
}
.cleno-navody .cn-cta p,
.cn-detail-cta p {
margin-bottom: 14px;
font-size: 13px;
line-height: 1.55;
}
.cleno-navody .cn-buttons,
.cn-detail-cta .cn-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.cleno-navody .cn-btn,
.cn-detail-cta .cn-btn {
width: auto;
min-height: 44px;
padding: 8px 10px;
font-size: 13px;
}
.cleno-navody .cn-btn-icon,
.cn-detail-cta .cn-btn-icon {
width: 17px;
height: 17px;
background-size: 17px 17px;
}
/* detail návodu */
.pageArticleDetail .filter-container .filter-header {
margin-bottom: 22px;
padding: 18px;
}
.pageArticleDetail .filter-container .filter-header h2 {
margin-bottom: 10px;
padding: 6px 12px;
font-size: 12px !important;
}
.pageArticleDetail .filter-container .filter-description {
font-size: 14px !important;
line-height: 1.6;
}
.pageArticleDetail .filter-container .cn-detail-chips {
gap: 6px;
margin-top: 14px;
}
.pageArticleDetail .filter-container .cn-detail-chips .ci-clock {
display: none;
}
.pageArticleDetail .filter-container .cn-detail-chips .cn-chip {
padding: 6px 9px;
font-size: 12px;
}
/* sekce bez rámečku = víc místa pro obsah */
.pageArticleDetail .filter-container .steps-card,
.pageArticleDetail .filter-container .gallery-card,
.pageArticleDetail .filter-container .video-card,
.pageArticleDetail .filter-container .image-card {
margin-bottom: 28px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.pageArticleDetail .filter-container .steps-card h3,
.pageArticleDetail .filter-container .gallery-card h3,
.pageArticleDetail .filter-container .video-card h3,
.pageArticleDetail .filter-container .image-card h3 {
margin-bottom: 14px;
font-size: 19px !important;
}
.pageArticleDetail .filter-container .steps-list {
gap: 10px;
}
.pageArticleDetail .filter-container .steps-list li {
padding: 14px 14px 16px 56px;
background: var(--cn-white);
box-shadow: var(--cn-shadow);
}
.pageArticleDetail .filter-container .steps-list li::before {
top: 14px;
left: 12px;
width: 32px;
height: 32px;
font-size: 14px;
}
.pageArticleDetail .filter-container .steps-list li::after {
top: 50px;
bottom: -28px;
left: 27px;
}
.pageArticleDetail .filter-container .steps-list li > strong,
.pageArticleDetail .filter-container .steps-list li > span:first-child,
.pageArticleDetail .filter-container .cn-step-text > strong,
.pageArticleDetail .filter-container .cn-step-text > span:first-child {
font-size: 15px;
}
.pageArticleDetail .filter-container .steps-list li p,
.pageArticleDetail .filter-container .cn-step-text p {
font-size: 13.5px !important;
}
.pageArticleDetail .filter-container .cn-step-img {
max-width: 180px;
}
}
/* Editor Shoptetu vkládá za obrázky a mezi bloky prázdné
.
Uvnitř rozvržení návodů je skryjeme, aby nedělaly mezery. */
.cleno-navody > br,
.cleno-navody .cn-hero > br,
.cleno-navody .cn-hub > br,
.cleno-navody .cn-hub-card > br,
.cleno-navody .cn-page-head > br,
.cleno-navody .cn-group > br,
.cleno-navody .cn-guides > br,
.cleno-navody .cn-guide > br,
.cleno-navody .cn-guide-img > br,
.cleno-navody .cn-cta > br {
display: none;
}
/* Obrázky v návodech zarovnané na střed */
.pageArticleDetail .filter-container .cn-step-img {
justify-self: center;
}
.pageArticleDetail .filter-container .image-card figure,
.pageArticleDetail .filter-container .gallery figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pageArticleDetail .filter-container .image-card img,
.pageArticleDetail .filter-container .gallery img {
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 600px) {
/* text kroku je odsazený o 56 px vlevo a 14 px vpravo,
posun o polovinu rozdílu vycentruje obrázek na celou kartu */
.pageArticleDetail .filter-container .cn-step-img {
position: relative;
left: -21px;
width: 100%;
margin: 14px auto 0;
}
}
/* ==================== modification.css ==================== */
@media screen and (max-width: 767px){
body:not(.ordering-process) .top-navigation-bar {position: sticky !important;}
}
#content .p-detail {
display: flex;
flex-direction: column;
}
#content .p-detail .products-related-header {
order: 30;
}
#content .p-detail .products-related.products-additional {
order: 31;
}
#content .p-detail .browse-p {
order: 32;
}
.msg-success{
display: none !important;
}
.extended-description { width: 100%; } @media screen and (min-width: 600px)
display: none !important;
}
#content .basic-description {
padding-left: 0px !important;
}
.shp-tabs-row a[href$="#parameters"] {
display: yes !important;
}
.top-category-addon .menu-content>div>div>a{
line-height: 1.4;
}
.type-category #content {
display: flex;
flex-direction: column;
}
.type-category #content h1 {
order: -2;
}
.type-category #content .category-perex {
order: -1;
}
.product .btn.add-to-cart-button{
border-radius: 10px;
}
.next-step .btn.next-step-forward{
border-radius: 10px;
}
.extra.step .btn-conversion{
border-radius: 10px;
}
.flag.flag-action {
border-radius: 3px;
}
.flag.flag-custom1 {
border-radius: 3px;
}
.flag.flag-new {
border-radius: 3px;
}
.flag.flag-sale {
border-radius: 3px;
}
.flag.flag-tip {
border-radius: 3px;
}
.flag.flag-custom2 {
border-radius: 3px;
}
.flag.flag-custom3 {
border-radius: 3px;
}
.flag
{
line-height: 8px;
}
#productsAlternative:before {
font-size: 140%;
margin-top: 30px;
display: block;
}
.add-to-cart .add-to-cart-button{
border-radius: 10px;
}
.p-tools .btn-primary{
border-radius: 10px;
}
.cart-related-button .btn.btn-sm.btn-conversion.add-to-cart-button{
border-radius: 5px;
}
#signature .vam{
display: none !important;
}
.newsletter{
border-radius: 10px;
}
#signature .title{
display: none !important;
}
.topic.active {
font-size: 113%;
font-weight: bold;
}
.topic {
font-size: 110%;
}
.welcome h1, .welcome .h1{
display: none;
}
.btn.btn-default{
border-radius: 5px;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img{
border-radius: 10px;
}
.carousel-control.left, .carousel-control.right{
border-radius: 5px;
}
.discount-coupon:not(.uplatneno) form {display: block;margin-top: 0;}
.kupon-odkaz{
display: none;
}
.multiple-columns-body .extended-description{
width: 150%;
}
.produkt-kat{
display: none;
}
@media screen and (max-width: 640px) {
.multiple-columns-body .extended-description {max-width: 100%;}
}
#productsAlternative:before {
content:'Alternativní náhrady';
}
.extended-description {
padding-top: 56px;
}
.products-block.products-additional{
border-radius: 10px;
}
.type-index .products > div{
border-radius: 10px;
}
.slick-prev, .slick-next{
border-radius: 3px;
}
.top-navigation-bar-menu
{
text-align: center;
}
.radio-wrapper{
border-radius: 5px;
}
.form-control{
border-radius: 3px;
}
.compact-form .btn{
border-radius: 3px;
}
.navigation-in > ul > li > a{
border-radius: 5px;
}
.products-block{
border-radius: 10px;
}
.products-block.products .product{
border-radius: 10px;
}
.sidebar-inner>div{
border-radius: 5px;
}
#ratingWrapper{
border-radius: 10px;
}
.add-comment .btn{
border-radius: 10px;
}
#productDiscussion > .add-comment{
border-radius: 10px;
}
.subcategories li a{
border-radius: 10px;
}
#dklabLogaSliderContent .lSSlideOuter{
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
@media screen and (min-width: 1200px){
.top-navigation-bar .project-email {display: inline-block;font-size: 16px;font-weight: bold;margin-left: 24px;color: var(--color-primary);}
a.project-email::before {content: '\e910';font-size: 16px;}
}
@media screen and (min-width: 360px) and (max-width: 767px){
.top-navigation-contacts{display: block !important;}
.top-navigation-contacts .project-phone{display: none !important;}
.top-navigation-contacts .project-email{display: block !important;position: absolute;right: 164px;top: 15px;color: #A3A3AF;}
a.project-email::before {content: '\e910';}
.top-navigation-contacts .project-email span{display: none;}
}
.newsletter{
Background: linear-gradient(90deg, rgba(12,103,178,1) 0%,rgba(7,189,252,1) 100%);
}
.top-category-addon .h4.homepage-group-title {
display: none;
}
.js-top-category-addon .h4.homepage-group-title {
display: block;
opacity: 1;
}
.js-top-category-addon .menu-level-2 {
display: flex;
}
.js-top-category-addon .submenu-arrow{
display: none;
}
.top-category-addon .menu-content{
border-radius: 10px;
}
.top-category-addon .menu-content{
box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
.benefitBanner.position--benefit{
order: -1;
}
#header .site-name a img{
max-height: 90px;
}
#header .search-form .btn{
Background: linear-gradient(90deg, rgba(12,103,178,1) 0%,rgba(7,189,252,1) 100%);
}
#dklabDopravaBanner.type4{
Background: linear-gradient(90deg, rgba(12,103,178,1) 0%,rgba(7,189,252,1) 100%);
}
.footer-rows .site-name a img{
margin-top: 45px;
}
#category-filter-hover .filter-section:first-child{
display: none;
}
.discount-coupon:not(.uplatneno) form .btn{
Background: linear-gradient(90deg, rgba(12,103,178,1) 0%,rgba(7,189,252,1) 100%);
border-radius: 5px;
}
.empty-cart-boxes ul li a {
border-radius: 5px;
}
.cart-content.checkout-box-wrapper, .cart-content.summary-wrapper, .checkout-box {
border-radius: 5px;
}
#checkoutSidebar .order-summary-inner {
border-radius: 5px;
}
h2, .h2{
font-size: 31px;
color:#0090c9
}
.news-item .text .title {
font-size: 24px;
}
h3, .h3{
font-size: 28px;
color:#0090c9
}
h4, .h4{
font-size: 19px;
color:#0090c9
}
.news-item .text .description{
display: none;
}
.dklab-delivery-box.transport{
Background: linear-gradient(90deg, rgba(12,103,178,1) 0%,rgba(7,189,252,1) 100%);
}
.welcome h1
{
display: none;
}
.carousel-control.left, .carousel-control.right{
opacity: 0.3;
}
h4.homepage-group-title, .h4.homepage-group-title{
font-size: 32px;
}
.pagination>a, .pagination-top>a, .pagination>strong, .pagination-top>strong{
border-radius: 10px;
}
#content .btn.unveil-button, #footer .btn.unveil-button{
border-radius: 10px;
}
.empty-cart-hover{
border-radius: 10px;
}
.cart-widget .popup-widget-inner.full+.cart-widget-button{
border-radius: 10px;
}
.sidebar h4, .sidebar
.h4{
font-size: 17px;
}
#productsAlternative:before{
font-size: 28px;
color:#0090c9
}
#content .vote-wrap{
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1)
}
.dklabSliderplusCarousel.hasMobileArrows .carousel-control{
opacity: 40%;
display: none;
}
.dklabSliderplusCarousel.hasDesktopIndicators .carousel-indicators{
margin-bottom: -20px;
opacity: 40%;
display: none;
}
@media only screen and (max-width: 767px) {
.dklabSliderplusCarousel.hasDesktopIndicators .carousel-indicators {
margin-bottom: -10px;
opacity: 0.4;
}
.fvDoplnek-produkt {
border-radius: 10px !important;
}
#cboxPrevious,
#cboxNext {
position: absolute !important;
top: 50% !important;
width: 44px !important;
height: 52px !important;
margin-top: -26px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
font-size: 0 !important;
line-height: 1 !important;
cursor: pointer !important;
opacity: 0.5 !important;
z-index: 9999 !important;
transition:
opacity 0.2s ease,
transform 0.2s ease !important;
}
#cboxPrevious {
left: 14px !important;
right: auto !important;
}
#cboxNext {
right: 14px !important;
left: auto !important;
}
#cboxPrevious::before,
#cboxNext::before {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 35px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #222 !important;
opacity: 1 !important;
}
#cboxPrevious::before {
content: "←" !important;
}
#cboxNext::before {
content: "→" !important;
}
#cboxPrevious:hover,
#cboxNext:hover {
opacity: 0.85 !important;
}
#cboxPrevious:hover {
transform: translateX(-2px) !important;
}
#cboxNext:hover {
transform: translateX(2px) !important;
}
.ratings.ready {
display: none !important;
}
@media (max-width: 768px) {
#cboxPrevious,
#cboxNext {
width: 28px !important;
height: 38px !important;
margin-top: -19px !important;
opacity: 0.4 !important;
transform: none !important;
}
#cboxPrevious {
left: 5px !important;
}
#cboxNext {
right: 5px !important;
}
#cboxPrevious::before,
#cboxNext::before {
font-size: 20px !important;
}
#cboxPrevious:hover,
#cboxNext:hover {
opacity: 0.4 !important;
transform: none !important;
}
.stars .star.is-active:hover,
.stars .star.star-half:before,
.stars .star.star-on:before,
.icon-starHalf-before,
.icon-starOn-before,
.product-ratings .icon-starOff-before:hover,
.product-ratings .star-off:hover,
.star.star-half,
.star.star-on,
.rate-average,
.tursky-apollo .rate-wrapper.unveil-wrapper .rate-list .stars span.star-off::before {
color: #fecb3e !important;
}
}