[open] */
animation: co-langs-menu-open .18s cubic-bezier(.4, 0, .2, 1);
transform-origin: top right;
}
@keyframes co-langs-menu-open {
from { opacity: 0; transform: translateY(-6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.co-langs-menu li { margin: 0; padding: 0; }
/* Položka v menu */
.co-lang {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
color: #001B54;
font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.co-lang:hover,
.co-lang:focus-visible {
background: rgba(0, 27, 84, 0.06);
color: #001B54;
outline: none;
}
.co-lang-label { flex: 1; }
.co-lang-check {
color: #A6CE38;
flex-shrink: 0;
}
/* Aktivní jazyk — vždycky svítí (i bez hoveru / openu) */
.co-lang-active {
background: #001B54;
color: #ffffff;
}
.co-lang-active:hover,
.co-lang-active:focus-visible {
background: #001B54;
color: #ffffff;
}
.co-lang-active .co-lang-check { color: #A6CE38; }
@media (max-width: 640px) {
.co-langs { top: 8px; right: 8px; }
.co-langs-current { padding: 9px 14px 9px 18px; font-size: 15px; gap: 6px; }
.co-langs-menu { min-width: 160px; }
.co-lang { padding: 9px 12px; font-size: 13px; }
}
/* ----- Track & cards ----- */
.co-track { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.co-card {
position: absolute;
top: 50%;
left: 50%;
border: 0;
padding: 0;
text-align: left;
background: var(--co-card-bg);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transform-origin: center center;
/* ŽÁDNÝ CSS transition na opacity — rAF loop ji setuje každý frame v JS
a CSS transition by ji "lakovala" 450 ms zpožděním → skoky a lag.
JS smoothstep + 60 fps interpolace dělají fade plynulý sám. */
will-change: transform, opacity, box-shadow;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
text-decoration: none;
color: inherit;
/* Flex column: picture má fixní výšku, detail vyplní zbytek karty.
Bez tohoto by se při krátkém popisu (1 řádek) objevila bílá mezera
mezi koncem textu a spodním okrajem karty (card-bg prosvítal). */
display: flex;
flex-direction: column;
}
.co-card:focus { outline: none; }
.co-card:focus-visible { box-shadow: 0 0 0 3px var(--co-accent), 0 20px 50px rgba(0, 0, 0, 0.45); }
.co-card-picture {
position: relative;
width: 100%;
display: grid;
place-items: center;
overflow: hidden;
/* Eliminuje subpixel-rendering bílou štěrbinu mezi card top a obrázkem */
margin-top: 0;
padding-top: 0;
line-height: 0;
/* Picture je fixní (`pictureHeight` set inline), detail vyplní zbytek */
flex-shrink: 0;
}
/* Bílý radial gradient overlay (`::after`) byl odebrán — vytvářel viditelný
bílý wash u dolního okraje obrázku, působilo to jako "bíle místo" v obraze. */
.co-card-picture img.co-product-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
display: block; /* eliminuje baseline gap u ![]()
*/
}
.co-card-picture .co-picture-label {
position: relative;
z-index: 2;
text-align: center;
color: rgba(255, 255, 255, 0.95);
padding: 0 20px;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 2em;
line-height: 1.05;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.co-card-detail {
/* Padding-top zmenšen 18 → 10 px aby se název produktu vystrčil výš,
padding-bottom 18 → 14 px aby zbylo víc místa pro popis.
Defaultní `card_height: 460` − `picture_height: 320` = 140 px detail.
Viz line-clamp na .co-tag a .co-desc dole — chrání layout před
dlouhými hodnotami od uživatele.
`flex: 1 1 auto` zajišťuje, že detail vždy vyplní zbytek karty
i když je obsah krátký (1 řádek popisu) — nechá vlastní bílé pozadí
místo aby prosvítalo card-bg pod ním. */
flex: 1 1 auto;
overflow: hidden;
padding: 10px 18px 14px;
text-align: center;
color: var(--co-card-text);
background: var(--co-card-bg);
}
.co-card-detail h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.4em;
margin: 0;
color: var(--co-card-text);
line-height: 1.12;
font-weight: 700;
/* Dlouhé názvy ořežeme na 2 řádky max (defenzivní safety pro fixní detail) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Brand — vlastní řádek pod názvem, mírně výraznější než tag */
.co-card-detail .co-card-brand {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.74em;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--co-card-text);
font-weight: 700;
margin: 4px 0 0;
}
/* Tag / kategorie — line-clamp 1 řádek aby dlouhý tag (např. "SYNBIOTIKA ·
PROBIOTIKA NOVÉ GENERACE · AKUTNÍ PODPORA MIKROBIOMU") nesnížil prostor
pro popis. Zbytek se zkrátí přes ellipsis ("…"). */
.co-card-detail .co-tag {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Inter', sans-serif;
font-size: 0.68em;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--co-card-muted);
font-weight: 600;
margin: 3px 0 0;
}
/* Krátký popis — line-clamp na 2 řádky aby se vždycky vešel do
fixní výšky detailu i když má uživatel delší text. */
.co-card-detail .co-desc {
font-family: 'Inter', sans-serif;
font-size: 0.84em;
color: var(--co-card-muted);
line-height: 1.45;
margin: 6px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Side shadow overlays — dim non-active cards */
.co-card::before,
.co-card-shadow-r {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100%;
pointer-events: none;
opacity: 0;
transition: opacity .6s ease;
z-index: 3;
border-radius: 16px;
}
.co-card::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 60%);
}
.co-card-shadow-r {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 60%);
display: block;
}
.co-card[data-side="left"]::before { opacity: calc(0.15 * var(--co-depth, 1)); }
.co-card[data-side="right"] .co-card-shadow-r { opacity: calc(0.15 * var(--co-depth, 1)); }
.co-card[data-side="left"] .co-card-shadow-r,
.co-card[data-side="right"]::before { opacity: 0; }
/* ----- Controls row (only dots — arrows are positioned on the sides) ----- */
.co-controls {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
z-index: 50;
pointer-events: none;
}
.co-controls > * { pointer-events: auto; }
.co-ctrl {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid var(--co-border);
background: var(--co-ctrl-bg);
color: var(--co-text);
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
padding: 0;
box-shadow: 0 4px 14px rgba(0, 27, 84, 0.08);
}
/* Side-positioned arrows — vertically centered on the carousel */
.co-prev,
.co-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 60;
}
.co-prev { left: 12px; }
.co-next { right: 12px; }
/* ŽÁDNÝ posun při hoveru — šipky drží fixní pozici (uživateli `předskočily`
pod kurzor a působilo to neklidně). Hover je jen barevný feedback. */
.co-prev:hover,
.co-next:hover,
.co-prev:active,
.co-next:active {
transform: translateY(-50%);
}
.co-ctrl:hover {
background: var(--co-ctrl-bg-hover);
border-color: var(--co-accent);
color: #001B54;
box-shadow: 0 8px 22px rgba(0, 27, 84, 0.16);
}
/* Active stav také bez transform — šipka v žádném stavu nemění pozici/velikost */
.co-ctrl:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
@media (max-width: 640px) {
.co-prev { left: 6px; }
.co-next { right: 6px; }
.co-prev,
.co-next { width: 44px; height: 44px; }
}
/* Force arrow icon stroke color (themes often override currentColor on SVG)
Brand blue in both light and dark theme — works on both white and translucent backgrounds. */
.co-ctrl svg {
width: 22px !important;
height: 22px !important;
stroke: #001B54 !important;
stroke-width: 2.6 !important;
fill: none !important;
color: #001B54 !important;
}
.co-ctrl:hover svg { stroke: #001B54 !important; color: #001B54 !important; }
.co-dots { display: flex; gap: 8px; justify-content: center; align-items: center; }
.co-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--co-dot);
border: 0;
cursor: pointer;
transition: all .3s cubic-bezier(.25, .8, .25, 1);
padding: 0;
}
.co-dot:hover { filter: brightness(1.4); }
.co-dot.active { background: var(--co-accent); width: 28px; border-radius: 5px; }
/* ----- Subcategory: trigger card indicator ----- */
.co-card.co-card-has-sub .co-card-detail::after {
content: "";
display: block;
margin: 10px auto 0;
width: 24px;
height: 2px;
border-radius: 2px;
background: var(--co-accent);
opacity: .5;
transition: opacity .25s, width .25s;
}
.co-card.co-card-has-sub:hover .co-card-detail::after,
.co-card.co-card-sub-open .co-card-detail::after { opacity: 1; width: 40px; }
/* ----- „Připravujeme" karta — disabled state ----- */
/* Karta zůstává plně viditelná (uživatel vidí produkt + dozví se, že je
připravován), jen ji nejde rozkliknout — cursor: default + badge přes
obrázek. Bez opacity-50 % nebo grayscale, ať produkt nevypadá jako vada. */
.co-card.co-card-coming-soon {
cursor: default !important;
}
.co-card.co-card-coming-soon .co-card-picture {
position: relative;
}
.co-card-coming-soon-badge {
position: absolute !important;
top: 12px;
left: 12px;
z-index: 5;
padding: 6px 12px;
background: rgba(0, 27, 84, 0.92);
color: #ffffff;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
pointer-events: none;
border: 1px solid rgba(166, 206, 56, 0.6);
}
/* ----- Subcategory swap panel (REPLACES parent) ----- */
.co-sub-panel {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: none;
will-change: height, opacity;
}
.co-sub-panel.co-sub-open {
display: block;
}
.co-sub-panel .co-sub-body {
position: relative;
}
.co-sub-panel .co-sub-body > .co-carousel {
margin-top: 0;
}
/* Toolbar with back button */
.co-sub-toolbar {
display: flex;
align-items: center;
padding: 8px 16px;
margin-bottom: 4px;
z-index: 60;
position: relative;
}
.co-sub-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px 8px 12px;
border-radius: 100px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.9);
color: #001B54;
font: 600 13px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.co-sub-back:hover {
background: #A6CE38;
color: #001B54;
border-color: #A6CE38;
transform: translateX(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.co-sub-back:active { transform: translateX(-1px); }
.co-sub-back:focus-visible { outline: 2px solid var(--co-accent, #A6CE38); outline-offset: 2px; }
.co-sub-back svg { width: 14px; height: 14px; }
.co-sub-back span { padding-right: 2px; }
/* Carousel root needs a transition for the swap — applied inline by JS too */
.co-carousel {
will-change: height, opacity;
}
/* =====================================================
Video modal (YouTube lightbox)
===================================================== */
.co-video-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px 10px 14px;
margin: 0 0 8px;
border-radius: 100px;
border: 2px solid #001B54;
background: transparent;
color: #001B54;
font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
text-decoration: none;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.co-video-btn:hover {
background: #A6CE38;
color: #001B54;
border-color: #A6CE38;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 27, 84, 0.18);
}
.co-video-btn:active { transform: translateY(0); }
.co-video-btn:focus-visible { outline: 2px solid #A6CE38; outline-offset: 3px; }
.co-video-btn-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0, 27, 84, 0.08);
color: #001B54;
display: grid;
place-items: center;
transition: background .2s, color .2s;
}
.co-video-btn:hover .co-video-btn-icon {
background: rgba(0, 27, 84, 0.16);
}
.co-video-btn-icon svg { width: 11px; height: 11px; margin-left: 1px; fill: currentColor; }
/* Doplňkové tlačítko (PDF, manuál, link) — decentní outline pill,
stejný styl jako .co-video-btn ale s download/external ikonou + jemný margin pro vizuální oddělení. */
.co-extra-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px 10px 14px;
margin: 0 0 8px;
border-radius: 100px;
border: 2px solid #001B54;
background: transparent;
color: #001B54;
font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif;
cursor: pointer;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.co-extra-btn:hover {
background: #001B54;
color: #ffffff;
border-color: #001B54;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 27, 84, 0.18);
}
.co-extra-btn:active { transform: translateY(0); }
.co-extra-btn:focus-visible { outline: 2px solid #A6CE38; outline-offset: 3px; }
.co-extra-btn-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0, 27, 84, 0.08);
color: #001B54;
display: grid;
place-items: center;
transition: background .2s, color .2s;
}
.co-extra-btn:hover .co-extra-btn-icon {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.co-extra-btn-icon svg { width: 13px; height: 13px; stroke-width: 2.2; }
body.co-video-open { overflow: hidden; }
.co-video-modal {
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
opacity: 0;
transition: opacity .26s ease;
padding: 20px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.co-video-modal.co-video-visible { opacity: 1; }
.co-video-modal.co-video-closing { opacity: 0; }
.co-video-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.88);
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.co-video-content {
position: relative;
width: min(1100px, 100%);
background: #000;
border-radius: 14px;
overflow: visible;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
transform: scale(0.96);
transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.co-video-modal.co-video-visible .co-video-content { transform: scale(1); }
.co-video-close {
position: absolute;
top: -54px;
right: -4px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
transition: background .2s, border-color .2s, transform .2s;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.co-video-close:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.08) rotate(90deg);
}
.co-video-close:active { transform: scale(0.95) rotate(90deg); }
.co-video-close:focus-visible { outline: 2px solid #A6CE38; outline-offset: 3px; }
.co-video-close svg { width: 20px; height: 20px; }
.co-video-iframe-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 14px;
overflow: hidden;
}
.co-video-iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 640px) {
.co-video-modal { padding: 12px; }
.co-video-close { top: -48px; right: 0; width: 38px; height: 38px; }
.co-video-close svg { width: 16px; height: 16px; }
}
/* =====================================================
Scroll-to-top floating button
===================================================== */
.co-scroll-top {
position: fixed;
right: 20px;
bottom: 88px; /* stay above sticky CTA bar */
z-index: 9989;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #001B54;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
opacity: 0;
transform: translateY(16px) scale(0.85);
pointer-events: none;
transition: opacity .28s cubic-bezier(.4, 0, .2, 1),
transform .28s cubic-bezier(.4, 0, .2, 1),
background .2s, color .2s;
}
.co-scroll-top.co-scroll-top-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.co-scroll-top:hover {
background: #A6CE38;
color: #001B54;
transform: translateY(-2px) scale(1.05);
}
.co-scroll-top:focus-visible { outline: 2px solid #A6CE38; outline-offset: 3px; }
.co-scroll-top svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
.co-scroll-top { right: 12px; bottom: 78px; width: 40px; height: 40px; }
.co-scroll-top svg { width: 16px; height: 16px; }
}
/* =====================================================
Share buttons row (product detail)
===================================================== */
.co-share {
display: flex;
align-items: center;
gap: 10px;
margin: 28px 0 8px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.co-share-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #6b7280;
margin-right: 4px;
}
.co-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #001B54;
text-decoration: none;
padding: 0;
cursor: pointer;
position: relative;
transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.co-share-btn:hover {
background: #A6CE38;
color: #001B54;
border-color: #A6CE38;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 27, 84, 0.18);
}
.co-share-btn:focus-visible { outline: 2px solid #A6CE38; outline-offset: 2px; }
.co-share-btn svg { width: 16px; height: 16px; display: block; }
.co-share-copy .co-share-copy-done {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: #10b981;
color: #ffffff;
border-radius: 50%;
opacity: 0;
transform: scale(0.6);
transition: opacity .2s, transform .2s;
pointer-events: none;
}
.co-share-copy.co-share-copied { border-color: #10b981; }
.co-share-copy.co-share-copied .co-share-copy-done {
opacity: 1;
transform: scale(1);
}
.co-share-copy.co-share-copied .co-share-copy-icon { opacity: 0; }
/* ----- „Odkaz zkopírován" toast (plovoucí popup) ----- */
.co-copy-toast {
position: fixed;
z-index: 999999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #001B54;
color: #ffffff;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
border-radius: 999px;
border: 1px solid rgba(166, 206, 56, 0.6);
box-shadow: 0 8px 28px rgba(0, 27, 84, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.22s ease, transform 0.22s ease;
white-space: nowrap;
max-width: calc(100vw - 16px);
}
.co-copy-toast.co-copy-toast-visible {
opacity: 1;
transform: translateY(0);
}
.co-copy-toast svg {
flex-shrink: 0;
color: #A6CE38;
}
/* =====================================================
Related products section
===================================================== */
.co-product-related {
margin: 60px auto 40px;
padding-top: 32px;
border-top: 0;
position: relative;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Decorative gradient divider replaces the gray border */
.co-product-related::before {
content: "";
display: block;
width: 64px;
height: 3px;
background: linear-gradient(90deg, #001B54 0%, #A6CE38 100%);
border-radius: 3px;
margin: 0 auto 36px;
opacity: 0.85;
}
.co-product-related-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.6em, 2.8vw, 2.2em);
font-weight: 700;
line-height: 1.15;
color: #001B54;
text-align: center;
margin: 0 0 36px;
letter-spacing: -0.01em;
}
/* =====================================================
Quick info badges (under short_desc, above video btn)
===================================================== */
.co-product-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 4px 0 24px;
color: #4b4f5f;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 0.86em;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.4;
}
.co-product-badge {
display: inline-flex;
align-items: center;
padding: 0;
}
.co-product-badge::after {
content: "•";
margin: 0 12px;
color: rgba(0, 27, 84, 0.35);
font-weight: 700;
pointer-events: none;
}
.co-product-badge:last-child::after { display: none; }
/* =====================================================
Scroll-in fade-up animation
(cosmetic only — disabled when prefers-reduced-motion)
===================================================== */
@media (prefers-reduced-motion: no-preference) {
.co-fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease,
transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: opacity, transform;
}
.co-fade-up.co-visible {
opacity: 1;
transform: translateY(0);
}
}
/* =====================================================
Back link (history.back) — sits above breadcrumb
===================================================== */
.co-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
color: #001B54;
text-decoration: none;
margin-bottom: 10px;
padding: 4px 0;
letter-spacing: 0.005em;
transition: color .2s, transform .2s;
}
.co-back-link svg { transition: transform .2s; flex: 0 0 auto; color: #001B54; }
.co-back-link:hover { color: #A6CE38; }
.co-back-link:hover svg { transform: translateX(-3px); color: #A6CE38; }
.co-back-link:focus-visible { outline: 2px solid #A6CE38; outline-offset: 4px; border-radius: 3px; }
/* =====================================================
Breadcrumb navigation
===================================================== */
.co-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
color: #6b7280;
margin-bottom: 28px;
letter-spacing: 0.005em;
}
.co-breadcrumb a {
color: #6b7280;
text-decoration: none;
transition: color .2s;
}
.co-breadcrumb a:hover { color: #A6CE38; text-decoration: underline; text-underline-offset: 3px; }
.co-breadcrumb-sep { color: #9ca3af; font-size: 15px; line-height: 1; }
.co-breadcrumb-cat { color: #6b7280; }
.co-breadcrumb-current { color: #001B54; font-weight: 500; }
/* =====================================================
Product detail layout — article wrapper, 2-col grid, headings
(Refactored from inline styles in single-co_product.php for responsive control.)
Breakpoints:
> 980px = full desktop 2-col with sticky media
<= 980px = tighter gap, sticky disabled (image scrolls naturally)
<= 760px = single column stack (image first, then content)
<= 480px = compact paddings + tightened typography
===================================================== */
.co-product-detail {
max-width: 1360px;
margin: 40px auto 80px; /* extra bottom space — sticky CTA bar can overlap */
padding: 0 32px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
/* Box-sizing reset uvnitř article — některá blank/minimal témata
(intentionally-blank) nemají globální `*, *::before, *::after { box-sizing: border-box }`.
Bez něj `padding: 0 32px` přibije k width:100% → 64 px overflow.
Plus `overflow-x: clip` jako safety net pokud by nějaký descendant
přesto vyrostl přes viewport (např. embed, image bez max-width:100%). */
box-sizing: border-box;
overflow-x: clip;
}
.co-product-detail,
.co-product-detail *,
.co-product-detail *::before,
.co-product-detail *::after {
box-sizing: border-box;
}
.co-product-detail img,
.co-product-detail video,
.co-product-detail iframe { max-width: 100%; }
.co-product-grid {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) 1.3fr;
gap: 60px;
align-items: start;
}
.co-product-media-sticky {
min-width: 0; /* allow grid item to shrink below content size */
}
/* Sticky variant — aplikuje se jen pokud má plugin Settings „Sticky hlavní foto" ON.
Default ON, ale user může v admin vypnout (CarouselOne → Nastavení → Layout detailu).
POZN.: Sticky funguje JEN pokud žádný předek nemá `overflow: hidden`.
Bricks Section / Container má často `overflow: hidden` kvůli clip-pathu — pak
sticky tiše selže. Fix v Bricks: Section → Settings → Layout → Overflow → Visible. */
.co-product-media-sticky-on {
position: sticky !important;
top: 20px;
align-self: start; /* grid item musí být start-aligned pro sticky */
}
.co-product-meta-line {
font-size: 0.78em;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #666;
font-weight: 600;
margin-bottom: 12px;
}
.co-product-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.4em, 5vw, 3.6em);
line-height: 1.05;
margin: 0 0 20px;
letter-spacing: -0.01em;
font-weight: 700;
color: #001B54;
}
.co-product-lead {
font-size: 1.2em;
color: #4b4f5f;
line-height: 1.55;
margin: 0 0 24px;
font-weight: 400;
}
.co-product-content {
font-size: 1em;
line-height: 1.75;
color: #222;
margin-top: 24px;
}
/* ----- Tablet < 980px: tighter spacing, still 2-col ----- */
@media (max-width: 980px) {
.co-product-detail { padding: 0 24px; margin: 32px auto 80px; }
.co-product-grid { gap: 40px; grid-template-columns: minmax(280px, 0.9fr) 1.2fr; }
.co-product-title { font-size: clamp(2em, 4.6vw, 3em); }
.co-product-lead { font-size: 1.08em; }
}
/* ----- Mobile <= 760px: collapse to single column, disable sticky ----- */
@media (max-width: 760px) {
.co-product-detail {
padding: 0 18px;
margin: 24px auto 90px;
}
.co-product-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.co-product-media-sticky,
.co-product-media-sticky-on {
position: static !important;
top: auto;
}
.co-product-meta-line {
font-size: 0.72em;
letter-spacing: 0.18em;
margin-bottom: 10px;
}
.co-product-title {
font-size: clamp(1.85em, 7.5vw, 2.4em);
margin-bottom: 14px;
}
.co-product-lead {
font-size: 1em;
line-height: 1.5;
margin-bottom: 18px;
}
.co-product-content { font-size: 0.96em; line-height: 1.65; }
.co-product-content ul { padding: 22px 22px; margin: 22px 0; border-radius: 14px; }
.co-product-content ul li { padding-left: 22px; }
/* Logos centered under image, smaller circles */
.co-product-logos { gap: 8px; padding: 0; }
}
/* NOTE: mobile overrides for `.co-block-tabs` are defined AFTER the desktop
block at line ~1477+ to win the cascade (same specificity). See the media
query right after `.co-block-tabs.co-tabs-stuck` definition. */
/* ----- Small mobile <= 480px: compact ----- */
@media (max-width: 480px) {
.co-product-detail { padding: 0 14px; margin: 18px auto 90px; }
.co-product-grid { gap: 22px; }
.co-back-link { font-size: 12px; margin-bottom: 8px; }
.co-breadcrumb { font-size: 12px; gap: 6px; margin-bottom: 18px; }
.co-breadcrumb-sep { font-size: 13px; }
.co-product-title { font-size: clamp(1.7em, 8vw, 2.1em); line-height: 1.1; }
.co-product-content ul { padding: 18px 18px; margin: 18px 0; }
.co-product-content ul li::before { width: 12px; }
}
/* =====================================================
Sticky bottom CTA bar
Appears when the primary CTA scrolls out of viewport.
===================================================== */
.co-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9990;
background: #ffffff;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
padding: 12px 20px;
transform: translateY(120%);
transition: transform .32s cubic-bezier(.4, 0, .2, 1);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-backdrop-filter: saturate(180%);
backdrop-filter: saturate(180%);
}
/* Bar is appended to , so it doesn't inherit the border-box reset
from `.co-product-detail`. Without this, `width: 100%` btn + padding
overflows on themes without a global box-sizing rule. */
.co-sticky-cta,
.co-sticky-cta *,
.co-sticky-cta *::before,
.co-sticky-cta *::after { box-sizing: border-box; }
.co-sticky-cta.co-sticky-cta-visible { transform: translateY(0); }
.co-sticky-cta-inner {
max-width: 1360px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.co-sticky-cta-title {
font-size: 15px;
font-weight: 700;
color: #001B54;
line-height: 1.3;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.co-sticky-cta-brand {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 2px;
}
.co-sticky-cta-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px 13px 24px;
border-radius: 100px;
background: #001B54;
color: #ffffff;
text-decoration: none;
font: 700 14px/1 'Inter', sans-serif;
letter-spacing: 0.015em;
transition: background .2s, transform .2s, gap .2s, box-shadow .2s;
}
.co-sticky-cta-btn:hover {
background: #A6CE38;
color: #001B54;
gap: 12px;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 27, 84, 0.22);
}
.co-sticky-cta-btn svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
.co-sticky-cta { padding: 10px 14px; }
.co-sticky-cta-title { display: none; }
.co-sticky-cta-inner { justify-content: stretch; }
.co-sticky-cta-btn {
width: 100%;
justify-content: center;
padding: 14px;
}
}
/* =====================================================
Product detail — long_desc content styling
(applies to the apply_filters('the_content', …) output
from _co_long_desc. Arrow-bullets, tightened headings.)
===================================================== */
.co-product-content {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.co-product-content > *:first-child { margin-top: 0; }
.co-product-content h2,
.co-product-content h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.3em, 2.2vw, 1.7em);
font-weight: 700;
line-height: 1.2;
margin: 32px 0 12px;
color: #001B54;
}
.co-product-content h4 {
font-size: 1.1em;
font-weight: 700;
margin: 24px 0 10px;
color: #001B54;
}
.co-product-content p { margin: 0 0 14px; line-height: 1.7; }
/* Highlight box pro klíčové benefity / přehledy — sladěno s `.co-block-tab`:
bílý card, layered brand-blue shadow, 18px radius. Žádný left border / šedé pozadí. */
.co-product-content ul {
list-style: none;
padding: 28px 32px;
margin: 28px 0;
background: #ffffff;
border: 0;
border-radius: 18px;
box-shadow:
0 1px 2px rgba(0, 27, 84, 0.04),
0 6px 16px rgba(0, 27, 84, 0.06),
0 16px 32px rgba(0, 27, 84, 0.04);
}
.co-product-content ul li {
position: relative;
padding-left: 26px;
margin-bottom: 12px;
line-height: 1.65;
}
.co-product-content ul li:last-child { margin-bottom: 0; }
/* Decentní vodorovná čárka místo zelené šipky — editorial vzhled na bílém card-stylu
highlight boxu. Renderována jako CSS obdélník (spolehlivější než unicode em-dash). */
.co-product-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em; /* zarovnáno na střed první řádky */
width: 14px;
height: 2px;
background: #001B54;
border-radius: 1px;
}
/* Reset for nested lists — no double-card */
.co-product-content ul ul,
.co-product-content ol ul,
.co-product-content ul ol {
background: transparent;
border-left: 0;
padding: 8px 0 0 24px;
margin: 0;
border-radius: 0;
}
.co-product-content ol { margin: 0 0 18px; padding-left: 24px; }
.co-product-content ol li { margin-bottom: 10px; line-height: 1.6; }
.co-product-content strong { color: #001B54; font-weight: 700; }
.co-product-content a {
color: #001B54;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.co-product-content a:hover { color: #A6CE38; }
/* =====================================================
Features / trust badges row
(richer than chips: icon + label + hint)
===================================================== */
.co-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 16px 0 28px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.co-feature {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #f7f8fa;
border: 1px solid #e5e7eb;
border-radius: 12px;
transition: background .2s, border-color .2s, transform .2s;
}
.co-feature:hover {
background: #ffffff;
border-color: #001B54;
transform: translateY(-1px);
}
.co-feature-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
font-size: 20px;
line-height: 1;
background: #ffffff;
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.co-feature-text {
flex: 1;
min-width: 0;
}
.co-feature-label {
font-size: 14px;
font-weight: 700;
color: #001B54;
line-height: 1.3;
letter-spacing: -0.005em;
}
.co-feature-hint {
font-size: 12px;
font-weight: 500;
color: #6b7280;
line-height: 1.4;
margin-top: 2px;
}
/* =====================================================
Benefits chip row
===================================================== */
.co-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0 28px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.co-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px 7px 12px;
border-radius: 100px;
background: #f4f6f8;
color: #001B54;
font-size: 0.82em;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid #e5e7eb;
transition: background .2s, border-color .2s, transform .2s;
}
.co-chip:hover {
background: #ffffff;
border-color: #001B54;
transform: translateY(-1px);
}
.co-chip::before {
content: "✓";
color: #A6CE38;
font-weight: 800;
font-size: 0.95em;
line-height: 1;
}
/* =====================================================
Certification logos (under main image — circle badges)
===================================================== */
.co-product-logos {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
align-items: center;
justify-content: center; /* center logos under the main image */
}
.co-product-logo {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 50%;
/* overflow visible — allows hover tooltip pseudo-elements to escape the circle.
Image/SVG content stays inside thanks to 70/100% sizing + centered grid. */
overflow: visible;
background: #ffffff;
border: 1px solid rgba(0, 27, 84, 0.12);
display: grid;
place-items: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s, border-color .22s;
}
/* Ensure attachment ![]()
stays clipped to circle even though parent overflow is visible.
Native border-radius on the img itself does the clipping for raster images. */
.co-product-logo > img {
border-radius: 50%;
}
.co-product-logo:hover {
transform: scale(1.08);
border-color: #A6CE38;
box-shadow: 0 8px 18px rgba(0, 27, 84, 0.16);
}
.co-product-logo img {
width: 70%;
height: 70%;
object-fit: contain;
display: block;
}
/* Preset SVG already includes the white circle + ring, fill the container */
.co-product-logo-preset {
background: transparent;
border: 0;
box-shadow: 0 4px 10px rgba(0, 27, 84, 0.08);
}
.co-product-logo-preset:hover {
border: 0;
box-shadow: 0 8px 18px rgba(0, 27, 84, 0.16);
}
.co-product-logo svg {
width: 100%;
height: 100%;
display: block;
}
/* Tooltip on hover — appears above the badge with a small arrow */
.co-product-logo[data-tooltip] {
position: relative;
}
.co-product-logo[data-tooltip]::before,
.co-product-logo[data-tooltip]::after {
position: absolute;
left: 50%;
pointer-events: none;
opacity: 0;
transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, .2, 1);
z-index: 60;
}
.co-product-logo[data-tooltip]::before {
content: "";
bottom: calc(100% + 4px);
transform: translateX(-50%) translateY(4px);
border: 6px solid transparent;
border-top-color: #001B54;
}
.co-product-logo[data-tooltip]::after {
content: attr(data-tooltip);
bottom: calc(100% + 14px);
transform: translateX(-50%) translateY(4px);
background: #001B54;
color: #ffffff;
padding: 9px 14px;
border-radius: 10px;
font: 600 12px/1.45 'Inter', system-ui, sans-serif;
letter-spacing: 0.01em;
text-align: center;
max-width: 220px;
width: max-content;
white-space: normal;
box-shadow: 0 10px 24px rgba(0, 27, 84, 0.28);
}
.co-product-logo[data-tooltip]:hover::before,
.co-product-logo[data-tooltip]:hover::after,
.co-product-logo[data-tooltip]:focus-within::before,
.co-product-logo[data-tooltip]:focus-within::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 720px) {
.co-product-logos { justify-content: center; gap: 10px; }
.co-product-logo { width: 48px; height: 48px; }
}
/* =====================================================
Product media — main image + vertical thumbnail strip
===================================================== */
.co-product-media {
display: flex;
gap: 14px;
align-items: flex-start;
/* CSS vars for sizing; --co-thumb-count is set inline by PHP */
--co-thumb-w: 72px;
--co-thumb-gap: 10px;
--co-image-min-h: 480px;
/* Computed natural height of the strip (n thumbs + (n-1) gaps) */
--co-strip-h: calc(var(--co-thumb-count, 0) * var(--co-thumb-w) + (var(--co-thumb-count, 0) - 1) * var(--co-thumb-gap));
}
/* Main image wrapper: height matches the side strip exactly when strip
is taller, otherwise falls back to a sensible minimum. No fixed aspect
ratio anymore — alignment with thumbnail strip wins for product UX. */
.co-product-main-image {
flex: 1 1 auto;
position: relative;
display: block;
height: max(var(--co-strip-h, 0px), var(--co-image-min-h));
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15);
cursor: zoom-in;
text-decoration: none;
min-width: 0;
}
.co-product-main-image img,
.co-product-main-image .co-product-main-image-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.co-product-main-image:hover img,
.co-product-main-image:hover .co-product-main-image-img { transform: scale(1.05); }
/* Zoom badge — appears on hover, hints at lightbox */
.co-product-main-image-zoom {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
color: #001B54;
display: grid;
place-items: center;
opacity: 0;
transform: scale(0.85);
transition: opacity .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1), background .2s, color .2s;
box-shadow: 0 6px 16px rgba(0, 27, 84, 0.2);
pointer-events: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.co-product-main-image:hover .co-product-main-image-zoom {
opacity: 1;
transform: scale(1);
}
.co-product-main-image:hover .co-product-main-image-zoom:hover {
background: #A6CE38;
color: #001B54;
}
.co-product-main-image-zoom svg { width: 18px; height: 18px; }
/* Fallback when no featured image: centered title on gradient */
.co-product-main-image-placeholder {
cursor: default;
display: grid;
place-items: center;
color: #fff;
font-family: 'Playfair Display', Georgia, serif;
font-size: 2em;
text-align: center;
padding: 20px;
}
.co-product-main-image-label { display: block; }
/* Gallery thumbs — default (grid) style, overridden by .co-product-gallery-strip */
.co-product-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
margin-top: 14px;
}
/* Vertical thumbnail strip beside the main image (desktop) — natural height,
no scroll cap (the main image grows to match the strip via --co-strip-h). */
.co-product-gallery-strip {
display: flex;
flex-direction: column;
gap: var(--co-thumb-gap, 10px);
margin-top: 0;
flex-shrink: 0;
width: var(--co-thumb-w, 72px);
overflow: visible;
padding-right: 0;
}
@media (max-width: 720px) {
.co-product-media {
flex-direction: column-reverse;
align-items: stretch; /* fill width on mobile, no shrink-to-content */
}
.co-product-gallery-strip {
flex-direction: row;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.co-product-gallery-strip .co-gallery-thumb { flex: 0 0 72px; }
/* On mobile, drop the strip-driven min-height (strip is below image) */
.co-product-main-image {
width: 100%;
max-width: 100%;
height: var(--co-image-min-h, 480px) !important;
}
}
.co-gallery-thumb {
display: block;
position: relative;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: #f0f0f0;
text-decoration: none;
cursor: zoom-in;
transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s, outline-color .22s;
outline: 2px solid transparent;
outline-offset: -2px;
}
.co-gallery-thumb:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
outline-color: #001B54;
}
.co-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.co-gallery-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.15) 100%);
opacity: 0;
transition: opacity .2s;
}
.co-gallery-thumb:hover::after { opacity: 1; }
/* =====================================================
Image lightbox (gallery click → full view)
===================================================== */
.co-image-lightbox {
position: fixed;
inset: 0;
z-index: 999997;
display: grid;
place-items: center;
opacity: 0;
transition: opacity .25s ease;
padding: 24px;
}
.co-image-lightbox.co-lightbox-visible { opacity: 1; }
.co-image-lightbox .co-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 12, 20, 0.88);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
cursor: zoom-out;
}
.co-image-lightbox img {
position: relative;
z-index: 2;
max-width: 92vw;
max-height: 88vh;
width: auto;
height: auto;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
transform: scale(0.96);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.co-image-lightbox.co-lightbox-visible img { transform: scale(1); }
.co-image-lightbox .co-lightbox-close {
position: fixed;
top: 24px;
right: 24px;
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.12);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
transition: background .2s, transform .2s;
}
.co-image-lightbox .co-lightbox-close:hover { background: #fff; color: #001B54; transform: rotate(90deg); }
.co-image-lightbox .co-lightbox-close svg { width: 20px; height: 20px; }
.co-image-lightbox .co-lightbox-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.1);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
transition: background .2s, transform .2s;
}
.co-image-lightbox .co-lightbox-prev { left: 24px; }
.co-image-lightbox .co-lightbox-next { right: 24px; }
.co-image-lightbox .co-lightbox-nav:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.05); }
.co-image-lightbox .co-lightbox-nav svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
.co-image-lightbox .co-lightbox-nav { width: 44px; height: 44px; }
.co-image-lightbox .co-lightbox-prev { left: 10px; }
.co-image-lightbox .co-lightbox-next { right: 10px; }
}
/* =====================================================
Product detail — content blocks (page builder output)
Tab bar above + modal dialog on click
===================================================== */
.co-blocks {
margin-top: 40px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
--co-tab-bg: #f7f8fa;
--co-tab-text: #001B54;
--co-tab-border: #e5e7eb;
--co-tab-hover-bg: #001B54;
--co-tab-hover-fg: #ffffff;
--co-accent: #A6CE38;
--co-modal-bg: #ffffff;
--co-modal-text: #001B54;
--co-modal-strong: #000000;
}
/* ----- Floating tab cards — modern elevated look ----- */
.co-block-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin: 28px -8px 36px;
padding: 8px;
background: transparent;
border: 0;
border-radius: 16px;
/* Sticky to top of viewport when user scrolls past — keeps quick navigation in reach */
position: sticky;
top: 12px;
z-index: 40;
transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.co-block-tabs.co-tabs-stuck {
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 18px rgba(0, 27, 84, 0.1);
}
.co-block-tab {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 22px 20px 22px 24px;
border-radius: 18px;
border: 0;
background: #ffffff;
color: #001B54;
font: 700 15px/1.25 'Inter', system-ui, -apple-system, sans-serif;
letter-spacing: -0.005em;
text-align: left;
cursor: pointer;
box-shadow:
0 1px 2px rgba(0, 27, 84,0.04),
0 6px 16px rgba(0, 27, 84,0.06),
0 16px 32px rgba(0, 27, 84,0.04);
transform: translateY(0);
transition: transform .32s cubic-bezier(.4, 0, .2, 1),
box-shadow .32s cubic-bezier(.4, 0, .2, 1),
background .2s ease;
isolation: isolate;
}
/* Gold accent line that grows across on hover */
.co-block-tab::after {
content: "";
position: absolute;
left: 24px;
right: 20px;
bottom: 12px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #A6CE38 0%, rgba(166, 206, 56,0) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform .4s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
}
.co-block-tab:hover {
transform: translateY(-5px);
box-shadow:
0 2px 4px rgba(0, 27, 84,0.05),
0 10px 20px rgba(0, 27, 84,0.08),
0 28px 56px rgba(0, 27, 84,0.14);
}
.co-block-tab:hover::after { transform: scaleX(1); }
.co-block-tab:active { transform: translateY(-2px); }
.co-block-tab:focus-visible {
outline: 2px solid #A6CE38;
outline-offset: 3px;
}
.co-block-tab-label {
display: inline-block;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 4px; /* room for the accent line */
}
.co-block-tab-arrow {
display: inline-flex;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: #001B54;
color: #ffffff;
align-items: center;
justify-content: center;
transition: transform .32s cubic-bezier(.4, 0, .2, 1),
background .25s ease;
}
.co-block-tab:hover .co-block-tab-arrow {
background: #A6CE38;
transform: translateX(4px) rotate(-8deg);
}
.co-block-tab-arrow svg { width: 13px; height: 13px; }
/* ----- Mobile tabs override -----
Desktop default je `auto-fit, minmax(200px, 1fr)` + sticky top. Na mobilu
pod 760 px chceme jeden sloupec a žádné sticky (zbytečně překrývá obsah).
Definováno AŽ ZDE (po desktop deklaraci) aby v kaskádě vyhrálo. */
@media (max-width: 760px) {
.co-block-tabs {
grid-template-columns: 1fr;
gap: 10px;
margin: 22px -4px 28px;
padding: 4px;
position: static;
top: auto;
}
.co-block-tabs.co-tabs-stuck {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.co-block-tab {
padding: 16px 14px 16px 18px;
border-radius: 14px;
font-size: 14px;
}
.co-block-tab-arrow { width: 28px; height: 28px; }
.co-block-tab-arrow svg { width: 11px; height: 11px; }
}
/* ----- Block modal -----
NOTE: heavy use of !important + hard-coded colors on visual properties
because themes (Elementor, Astra, etc.) often target [role=dialog] or
generic `.modal`/button classes and would otherwise override our styles. */
/* Lock both a . Některá themes (Bricks, Uncode, Astra) mají
`html { overflow-y: scroll }` → body overflow:hidden je nepřebije a
stránka pod popup oknem se dál scrolluje. Zamykáme oba elementy.
`overscroll-behavior: contain` na html dodatečně zabrání chain scrollu. */
html.co-modal-open,
body.co-modal-open {
overflow: hidden !important;
overscroll-behavior: contain !important;
/* touch-action: none na `` by zlikvidoval scroll uvnitř popup —
místo toho je touch-action řešený přímo na .co-block-modal-scroll. */
}
.co-block-modal {
position: fixed !important;
inset: 0 !important;
z-index: 999998 !important;
display: block !important;
opacity: 0;
transition: opacity .26s ease;
padding: 0 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
isolation: isolate;
/* Cancel any theme-level filters that could bleed through */
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Modal je `appendChild` na , takže nedědí border-box reset z `.co-product-detail`.
Bez něj `width: 100%` + padding přibíjí k content-box → horizontal overflow. */
.co-block-modal,
.co-block-modal *,
.co-block-modal *::before,
.co-block-modal *::after { box-sizing: border-box; }
.co-block-modal.co-modal-visible { opacity: 1; }
.co-block-modal.co-modal-closing { opacity: 0; }
.co-block-modal-backdrop {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: rgba(10, 12, 20, 0.72) !important;
cursor: pointer;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
/* Fullscreen transparent "glass" content — fills entire viewport */
.co-block-modal-content {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
width: 100% !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
border: 0 !important;
overflow: hidden !important;
overflow-x: clip !important; /* safety net — žádný descendant nesmí ven */
display: flex !important;
flex-direction: column !important;
box-shadow: none !important;
transform: translateY(20px);
transition: transform .32s cubic-bezier(.4, 0, .2, 1);
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
color: #ffffff !important;
}
.co-block-modal.co-modal-visible .co-block-modal-content { transform: translateY(0); }
.co-block-modal-close {
position: fixed !important;
top: 24px !important;
right: 24px !important;
z-index: 10 !important;
width: 48px !important;
height: 48px !important;
min-width: 0 !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
background: rgba(255, 255, 255, 0.12) !important;
background-color: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
cursor: pointer;
display: grid !important;
place-items: center !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
box-shadow: none !important;
transition: background .2s, color .2s, transform .2s, border-color .2s;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.co-block-modal-close:hover {
background: #ffffff !important;
background-color: #ffffff !important;
color: #001B54 !important;
border-color: #ffffff !important;
transform: rotate(90deg);
}
.co-block-modal-close:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; }
.co-block-modal-close svg { width: 22px !important; height: 22px !important; display: block !important; }
.co-block-modal-scroll {
overflow-y: auto !important;
overflow-x: clip !important;
overscroll-behavior: contain !important;
/* `none` na touch-action umožní pinch-zoom, ale stoppuje scroll chain
z popup na stránku pod ním (touchpad/tablet). */
-webkit-overflow-scrolling: touch;
flex: 1 !important;
background: transparent !important;
width: 100%;
max-width: 100vw !important;
display: flex;
flex-direction: column !important;
/* Změněno z `center` → `flex-start`: dlouhá tabulka už se neořezává
nahoře. Pro krátký obsah dáme padding-top, ať to nedrží těsně u
horního okraje (kde sedí close ✕ button). */
justify-content: flex-start !important;
align-items: center;
/* 80 → 30 px (v0.1.160): posun nadpisu „Složení" o 50 px nahoru.
Close ✕ tlačítko je `position: fixed` v rohu, takže 30 px stačí
jako breathing room od horního okraje viewportu. */
padding-top: 30px !important;
padding-bottom: 40px !important;
}
.co-block-modal-scroll > * {
width: 100%;
/* 820 → 1100 px — širší text v popup pro lepší využití velkých displejů.
Vyšší max stále chrání proti přílišně dlouhým řádkům (>~80 znaků),
které by se hůř četly. */
max-width: min(1100px, 100vw) !important;
margin: 0 auto;
}
.co-block-modal-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 800 !important;
/* Clamp s `vw` lower bound + max-width na rodičovi zamezí přesahu na úzkých
displejích, kde by jedno dlouhé slovo (např. „Dávkování") přesáhlo viewport. */
font-size: clamp(1.6em, 7vw, 3.2em) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
color: #ffffff !important;
padding: clamp(80px, 12vh, 120px) clamp(16px, 4vw, 60px) 24px !important;
margin: 0 !important;
background: transparent !important;
opacity: 1 !important;
/* `text-align` BEZ !important — uživatelovo zarovnání z editoru
(`
` atd.) má vyhrát nad defaultem. */ text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); overflow-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; /* 2-layer crossfade stack */ display: grid !important; grid-template-areas: "stack" !important; } .co-block-modal-body { padding: 0 clamp(16px, 4vw, 60px) clamp(40px, 6vh, 80px) !important; color: #ffffff !important; background: transparent !important; font-size: clamp(1em, 1.15vw, 1.15em) !important; line-height: 1.75 !important; font-weight: 500 !important; opacity: 1 !important; filter: none !important; /* `text-align` BEZ !important — uživatelovo zarovnání z editoru má vyhrát. */ text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); overflow-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; /* 2-layer crossfade stack */ display: grid !important; grid-template-areas: "stack" !important; } /* Cross-fade layers — both stack in same grid cell, only active is visible */ .co-block-modal-title > .co-modal-layer, .co-block-modal-body > .co-modal-layer { grid-area: stack; opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(2px); transition: opacity .42s cubic-bezier(.4, 0, .2, 1), transform .42s cubic-bezier(.4, 0, .2, 1), filter .42s cubic-bezier(.4, 0, .2, 1); pointer-events: none; will-change: opacity, transform, filter; } .co-block-modal-title > .co-modal-layer-active, .co-block-modal-body > .co-modal-layer-active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); pointer-events: auto; } /* Popup je celý centrovaný — lists, items i bullets respektují text-align: center na všech rozlišeních. Bullet (decorativní pomlčka) se renderuje jako inline prefix přes ::before, takže zůstává součástí centrované řádky. */ .co-block-modal-body p { margin: 0 0 14px !important; color: #ffffff !important; opacity: 1 !important; /* Inherituje text-align z `.co-block-modal-body` — bez !important, takže `
` z editoru má override. */ } .co-block-modal-body p:last-child { margin-bottom: 0 !important; } .co-block-modal-body ul, .co-block-modal-body ol { list-style: none !important; padding: 0 !important; margin: 0 auto 18px !important; /* Bez !important — `
- ` z editoru přebíjí. */
}
.co-block-modal-body li {
position: static !important;
padding: 0 !important;
margin-bottom: 10px !important;
line-height: 1.55 !important;
color: #ffffff !important;
opacity: 1 !important;
/* Bez !important — uživatelovo zarovnání z editoru přebíjí default. */
}
.co-block-modal-body li:last-child { margin-bottom: 0 !important; }
/* Decentní bílá pomlčka jako inline prefix — zůstává v centrovaném tokenu. */
.co-block-modal-body li::before {
content: "— " !important;
color: rgba(255, 255, 255, 0.7) !important;
font-weight: 700 !important;
margin-right: 2px !important;
}
.co-block-modal-body li ul,
.co-block-modal-body li ol { margin-top: 8px !important; }
/* =====================================================
Table v popup obsahu (např. nutriční hodnoty v „Složení")
Uživatel vloží `