/* ============================================================
   TISKNE.cz - Landing Page Stylesheet
   Brand: Tiskárna Tiskne.cz, Domažlice
   Methodology: BEM, mobile-first
   SYNC_PROBE_20260526_001
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand palette (extracted from official Corel logo) */
    --color-brand:        #E5097F;  /* magenta - primary CTA / accents */
    --color-brand-dark:   #B70765;
    --color-brand-light:  #FCE4F0;
    --color-yellow:       #FFED00;  /* secondary - hero highlight */
    --color-yellow-soft:  #FFC845;
    --color-cyan:         #00A0E3;  /* tertiary */
    --color-ink:          #2B2A29;  /* primary text */
    --color-ink-soft:     #4A4948;
    --color-muted:        #7A7976;
    --color-line:         #E6E4E1;
    --color-surface:      #F7F5F2;
    --color-surface-2:    #FFFFFF;
    --color-footer:       #2B2A29;
    --color-footer-link:  #C9C7C4;

    /* Typography */
    --font-sans: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   2rem;
    --fs-2xl:  2.75rem;
    --fs-3xl:  3.5rem;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Layout */
    --container:    1200px;
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:    0 6px 18px rgba(0,0,0,0.08);
    --shadow-lg:    0 16px 40px rgba(229,9,127,0.18);
    --transition:   200ms ease;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--color-ink);
    background: var(--color-surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- 3. Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}
@media (min-width: 768px) {
    .container { padding-inline: var(--sp-6); }
}

.section-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-ink);
    text-align: center;
    margin-bottom: var(--sp-7);
    position: relative;
    padding-bottom: var(--sp-4);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 64px; height: 3px;
    background: var(--color-brand);
    transform: translateX(-50%);
    border-radius: 2px;
}
.section-title--light { color: #fff; }
.section-title--light::after { background: var(--color-yellow); }

@media (min-width: 768px) {
    .section-title { font-size: var(--fs-2xl); }
}

/* ---------- 4. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--fs-base);
    letter-spacing: 0.02em;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
    cursor: pointer;
}
.btn--primary {
    background: var(--color-brand);
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.btn--primary:hover {
    background: var(--color-brand-dark);
    transform: translateY(-2px);
}

/* ---------- 5. Header & top bar ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--shadow-sm); }

.topbar {
    background: var(--color-ink);
    color: #fff;
    font-size: var(--fs-sm);
}
.topbar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
}
.topbar__contact, .topbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    justify-content: center;
}
.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: #fff;
    opacity: 0.92;
}
.topbar__link:hover { color: var(--color-yellow); opacity: 1; }
/* FIX-031: ikony kosik / clovek / obalka / telefon - purpurove (default SVG color)
   FB/IG socials - zustanou bile pres invert filter */
.topbar__icon { width: 14px; height: 14px; filter: none; }
.topbar__follow { opacity: 0.7; }
.topbar__social { display: inline-flex; align-items: center; }
.topbar__social img { width: 18px; height: 18px; filter: brightness(0) invert(1); transition: filter var(--transition), transform var(--transition); }
.topbar__social:hover img { filter: none; transform: scale(1.1); }
/* Topbar Config DB ikony (vlozene v hlavickakontakt) - take purpurove */
.topbar__contact img,
.topbar__contact i.fa { color: var(--color-brand); }
.topbar__contact img { filter: none; vertical-align: middle; }

@media (min-width: 992px) {
    .topbar__inner { flex-direction: row; justify-content: space-between; }
    .topbar__contact, .topbar__actions { justify-content: flex-start; }
}

.navbar { padding-block: var(--sp-4); }
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
}
.navbar__brand img { height: 36px; width: auto; }
@media (min-width: 768px) {
    .navbar__brand img { height: 44px; }
}

.navbar__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.navbar__toggle span {
    width: 26px; height: 3px;
    background: var(--color-ink);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: #fff;
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}
.navbar__nav.is-open { max-height: 500px; }
.navbar__nav > ul {
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    gap: var(--sp-2);
}
.navbar__nav a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.navbar__nav a:hover { background: var(--color-brand-light); color: var(--color-brand); }

@media (min-width: 992px) {
    .navbar__toggle { display: none; }
    .navbar__nav {
        position: static;
        max-height: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .navbar__nav > ul { flex-direction: row; padding: 0; gap: var(--sp-1); }
}

/* ---------- 6. Hero (FIX-030 banner) ---------- */
.hero {
    /* Overlay gradient (50% opacity) + banner image */
    background:
        linear-gradient(135deg,
            rgba(255,200,69,0.45) 0%,
            rgba(248,155,30,0.40) 50%,
            rgba(229,9,127,0.55) 100%),
        url("/resources/assets/hero/banner.jpg") center 60%/cover no-repeat;
    color: #fff;
    overflow: hidden;
    position: relative;
    min-height: 480px;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 10% 90%, rgba(229,9,127,0.25), transparent 55%);
    pointer-events: none;
}
.hero__inner {
    display: grid;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
    position: relative;
    z-index: 1;
}
.hero__content { text-align: center; }
.hero__title {
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--sp-4);
    text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.hero__line { display: block; }
.hero__line:nth-child(2) { color: var(--color-yellow); }
.hero__subtitle {
    font-size: var(--fs-md);
    font-weight: 500;
    margin-bottom: var(--sp-6);
    opacity: 0.95;
}
.hero__cta { background: #fff; color: var(--color-brand); }
.hero__cta:hover { background: var(--color-yellow); color: var(--color-ink); transform: translateY(-2px); }

/* FIX-020 + FIX-030: blob skryt, banner ho nahrazuje */
.hero__visual { display: none !important; }
.hero__blob { display: none !important; }

/* Silnejsi text-shadow nad bannerem pro citelnost */
.hero__title { text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 0 6px rgba(0,0,0,0.25); }
.hero__subtitle { text-shadow: 0 1px 8px rgba(0,0,0,0.45); }

@media (min-width: 992px) {
    .hero__inner {
        align-items: center;
        padding-block: var(--sp-9);
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero__content { text-align: center; }
    .hero__title { font-size: var(--fs-3xl); }
    .hero__subtitle { font-size: var(--fs-lg); }
}

/* ---------- 7. Features ---------- */
.features {
    padding-block: var(--sp-9) var(--sp-8);
    background: var(--color-surface-2);
}
.features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 600px)  { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .features__grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
    background: var(--color-surface);
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-line);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand-light);
}
.feature-card__icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--color-brand-light);
    border-radius: 14px;
    flex-shrink: 0;
}
.feature-card__icon img { width: 32px; height: 32px; }
.feature-card__title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-ink);
}
.feature-card__text {
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
    line-height: 1.6;
}

/* ---------- 8. Products ---------- */
.products {
    padding-block: var(--sp-9);
    background: var(--color-surface);
}
.products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}
@media (min-width: 768px) { .products__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1100px){ .products__grid { grid-template-columns: repeat(6, 1fr); } }

.product-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--color-line);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand);
}
.product-card__media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #fce4f0 0%, #fff 100%);
    position: relative;
}
.product-card__media::before {
    content: '';
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    opacity: 0.85;
}
.product-card__media--vizitky::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Crect x='2' y='4' width='52' height='30' rx='3' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Crect x='8' y='12' width='22' height='3' fill='%23E5097F'/%3E%3Crect x='8' y='20' width='32' height='2' fill='%232B2A29'/%3E%3Crect x='8' y='25' width='28' height='2' fill='%232B2A29'/%3E%3C/svg%3E"); }
.product-card__media--pozvanky::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='8' width='44' height='48' rx='3' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Cpath d='M22 22h20M22 30h20M22 38h14' stroke='%232B2A29' stroke-width='2'/%3E%3Cpath d='M28 48l4 4 4-4' stroke='%23E5097F' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.product-card__media--letaky::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='14' y='6' width='36' height='52' rx='2' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Crect x='20' y='14' width='24' height='12' fill='%23E5097F' opacity='0.3'/%3E%3Cpath d='M20 32h24M20 38h24M20 44h18' stroke='%232B2A29' stroke-width='2'/%3E%3C/svg%3E"); }
.product-card__media--brozury::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 12c8-4 16-4 24 0v40c-8-4-16-4-24 0z' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Cpath d='M56 12c-8-4-16-4-24 0v40c8-4 16-4 24 0z' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Cpath d='M14 20h12M14 28h12M38 20h12M38 28h12' stroke='%232B2A29' stroke-width='1.5'/%3E%3C/svg%3E"); }
.product-card__media--plakaty::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='6' width='44' height='52' rx='2' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Ccircle cx='24' cy='22' r='6' fill='%23FFED00' stroke='%232B2A29' stroke-width='1.5'/%3E%3Cpath d='M14 38l10-8 10 10 10-12 8 8v18H14z' fill='%23E5097F' opacity='0.45'/%3E%3C/svg%3E"); }
.product-card__media--textil::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M16 14l8-6 8 4 8-4 8 6-4 8-4-2v28H24V20l-4 2z' fill='%23ffffff' stroke='%23E5097F' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='6' fill='%23E5097F' opacity='0.7'/%3E%3C/svg%3E"); }

.product-card__title {
    padding: var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-ink);
}
.product-card:hover .product-card__title { color: var(--color-brand); }

.products__cta { text-align: center; margin-top: var(--sp-7); }

/* ---------- 9. Contact band ---------- */
.contact {
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
    color: #fff;
    padding-block: var(--sp-9);
    position: relative;
    overflow: hidden;
}
.contact::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 10%, rgba(255,237,0,0.18), transparent 50%);
}
.contact .container { position: relative; }
.contact__grid {
    display: grid;
    gap: var(--sp-5);
    max-width: 860px;
    margin-inline: auto;
}
@media (min-width: 768px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

.contact-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-md);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: background var(--transition), transform var(--transition);
}
.contact-card:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}
.contact-card__icon {
    width: 52px; height: 52px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
}
.contact-card__big {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 700;
}
.contact-card__small {
    display: block;
    font-size: var(--fs-sm);
    opacity: 0.85;
}

/* ---------- 10. Trust / logos ---------- */
.trust {
    padding-block: var(--sp-8);
    background: #fff;
}
.trust__title {
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: var(--sp-6);
}
.trust__logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    align-items: center;
}
@media (min-width: 600px)  { .trust__logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .trust__logos { grid-template-columns: repeat(5, 1fr); } }
.trust__logo {
    display: grid;
    place-items: center;
    padding: var(--sp-3);
}
.trust__logo img {
    max-height: 48px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter var(--transition), opacity var(--transition);
}
.trust__logo:hover img { filter: none; opacity: 1; }

/* ---------- 17. Scroll-reveal animace ---------- */
.feature-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease,
                box-shadow var(--transition), border-color var(--transition);
}
.feature-card.is-visible          { opacity: 1; transform: translateY(0); }
.feature-card.is-visible:hover    { transform: translateY(-4px); }
.trust__logo {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.trust__logo.is-visible           { opacity: 1; transform: translateY(0); }

/* ---------- 11. Footer ---------- */
.site-footer {
    background: var(--color-footer);
    color: var(--color-footer-link);
    font-size: var(--fs-sm);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-7);
}
@media (min-width: 600px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
    .site-footer__inner {
        grid-template-columns: repeat(4, 1fr) auto;
    }
    /* Social sloupec uzsi, sleduje obsah */
    .site-footer__col--social { min-width: 140px; }
}

/* FIX-032: Footer social ikony - bile na tmavem footer BG */
.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-2);
}
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    transition: background var(--transition), transform var(--transition);
}
.site-footer__social-link:hover {
    background: var(--color-brand);
    transform: translateY(-2px);
}
.site-footer__social-link img {
    width: 20px; height: 20px;
    filter: brightness(0) invert(1);
    transition: filter var(--transition);
}

.site-footer__heading {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-4);
}
/* Footer column — no explicit layout needed (grid child), but reset for safe stacking */
.site-footer__col { min-width: 0; }

.site-footer__list li + li { margin-top: var(--sp-2); }
.site-footer__list a:hover, .site-footer__bottom a:hover { color: var(--color-yellow); }
.site-footer__text { margin-bottom: var(--sp-3); line-height: 1.7; }
.site-footer__text strong { color: #fff; }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-block: var(--sp-4);
    font-size: var(--fs-xs);
}
.site-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    text-align: center;
}
.site-footer__bottom a { color: var(--color-footer-link); text-decoration: underline; }
@media (min-width: 768px) {
    .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- 12. Back-to-top ---------- */
.back-to-top {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--color-brand);
    color: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
    font-size: var(--fs-lg);
    font-weight: 700;
    z-index: 40;
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--color-brand-dark); }

/* ---------- 13. Navbar: položky a dropdown (LUYA dynamické podmenu) ---------- */
/* Base nav item — needed for active state + mobile expand */
.navbar__item { list-style: none; }
.navbar__item--has-children { position: relative; }

/* FIX-033: dropdown se nepripojuje top: 100%+4px (mezera = mouse leave bug).
   Misto toho:
   1) Dropdown se priklada primo (top: 100%, bez mezery)
   2) Vizualni mezera resena padding-top + background-clip
   3) Pseudo-element ".navbar__item--has-children::after" jako neviditelny
      most pres potencialni mezeru pro hover-keep-open. */
.navbar__item--has-children::after {
    content: '';
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 12px;
    background: transparent;
    z-index: 99;
    pointer-events: none;
}
.navbar__item--has-children:hover::after,
.navbar__item--has-children:focus-within::after { pointer-events: auto; }

.navbar__dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-3) var(--sp-2);
    margin: 0;
    z-index: 100;
    list-style: none;
    background-clip: padding-box;
}
.navbar__item--has-children:hover .navbar__dropdown,
.navbar__item--has-children:focus-within .navbar__dropdown,
.navbar__item--has-children.is-expanded .navbar__dropdown { display: block; }
.navbar__dropdown li a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    font-size: var(--fs-sm);
    color: var(--color-ink);
}
.navbar__dropdown li a:hover { background: var(--color-brand-light); color: var(--color-brand); }
.navbar__item.is-active > .navbar__link { color: var(--color-brand); }

/* FIX-035: chevron sipka u rozbalovacich polozek. Rotace pri hover/expand. */
.navbar__item--has-children > .navbar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.navbar__item--has-children > .navbar__link::after {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.navbar__item--has-children:hover > .navbar__link::after,
.navbar__item--has-children:focus-within > .navbar__link::after,
.navbar__item--has-children.is-expanded > .navbar__link::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* FIX-034 + FIX-038 (oprava): mobile dropdown - .navbar__nav ma BILE pozadi
   takze text musi byt TMAVY (ne bily). Dropdown je stacked sub-list. */
@media (max-width: 991px) {
    .navbar__item--has-children::after { display: none; }
    .navbar__dropdown {
        position: static;
        min-width: 0;
        background: var(--color-surface);   /* svetly tint, viditelny na bilem navbar */
        border: 0;
        border-left: 3px solid var(--color-brand);
        border-radius: 0;
        box-shadow: none;
        margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
        padding: var(--sp-2);
    }
    .navbar__dropdown li {
        list-style: none;
    }
    .navbar__dropdown li a {
        white-space: normal;
        padding: var(--sp-2) var(--sp-3);
        color: var(--color-ink) !important;   /* tmavy text na svetlem pozadi */
        font-weight: 500;
        font-size: var(--fs-sm);
        opacity: 1;
        display: block;
        text-decoration: none;
    }
    .navbar__dropdown li a:hover,
    .navbar__dropdown li a:focus {
        background: var(--color-brand-light);
        color: var(--color-brand) !important;
        opacity: 1;
    }
    .navbar__item--has-children > .navbar__link::after {
        margin-left: auto;
    }

    /* Vetsi max-height pro otevrene menu - drive bylo 500px coz nestacilo
       pri expandnutem dropdownu (vice polozek = vice vysky) */
    .navbar__nav { max-height: 0; overflow-y: auto; }
    .navbar__nav.is-open {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile - hover nefunguje, ale tap focus-within otevre dropdown.
       Pri opetovnem tapu na cely <a> nicmene navigauje pryc - to je
       OK chovani: pokud uzivatel chce videt podpolozky, klikne na sipku
       (samostatne by vyzadovalo JS pro intercept).
       Zatim zachovavame focus-within otevreni - po prvnim tapu se rolovaci
       menu vysune, druhy tap navigauje. */
}

/* ---------- 14. Breadcrumb bar ---------- */
.breadcrumb-bar {
    border-top: 1px solid var(--color-line);
    background: var(--color-surface);
    padding-block: var(--sp-2);
    font-size: var(--fs-xs);
}
.breadcrumb-bar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
    color: var(--color-muted);
}
.breadcrumb-bar__item + .breadcrumb-bar__item::before {
    content: '/';
    margin-right: var(--sp-2);
    opacity: 0.4;
}
.breadcrumb-bar__item a { color: var(--color-muted); }
.breadcrumb-bar__item a:hover { color: var(--color-brand); }
.breadcrumb-bar__item.is-active a { color: var(--color-ink); font-weight: 600; pointer-events: none; }

/* ---------- 15. Topbar: uživatelské menu (přihlášený stav) ---------- */
.topbar__user-menu { position: relative; }
.topbar__link--user { cursor: pointer; }
.topbar__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2);
    z-index: 200;
}
.topbar__user-menu:hover .topbar__dropdown,
.topbar__user-menu:focus-within .topbar__dropdown { display: block; }
.topbar__dropdown a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    color: var(--color-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
}
.topbar__dropdown a:hover { background: var(--color-brand-light); color: var(--color-brand); }

/* Košík — zvýraznění vedle ostatních topbar odkazů */
.topbar__link--cart { gap: var(--sp-1); font-weight: 600; }
.topbar__link--cart .basket-status { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ---------- 16. Topbar: konfigurační HTML z Config DB ---------- */
/* Zajistí, že HTML vložené z Config (p tagy, a, i) odpovídá novému designu */
.topbar__contact p { margin: 0; display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.topbar__contact a { color: #fff; opacity: 0.92; display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__contact a:hover { color: var(--color-yellow); opacity: 1; }
.topbar__contact i.fa { font-size: 13px; }

/* ---------- 17. Utility / a11y ---------- */
:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   18. UIkit shim - kompatibilita s LUYA CMS bloky (FIX-008)
   ------------------------------------------------------------
   LUYA CMS renderuje obsahove bloky s UIkit class names
   (uk-grid, uk-width-*, uk-container...). Novy design nepouziva
   UIkit, takze bez techto pravidel se vse rozpadne do 1 sloupce.
   Tato sekce minimalne reimplementuje UIkit grid system, aby
   CMS bloky vypadaly spravne (3-4 sloupce desktop, 1 mobile).
   ============================================================ */

/* Kontejnery */
.uk-container,
.uk-container-expand {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
    box-sizing: border-box;
}
.uk-container-expand { max-width: none; }
.uk-container-small { max-width: 900px; }
.uk-container-large { max-width: 1400px; }

/* Grid - flex wrap, jako UIkit.
   LUYA pouziva uk-grid jako ATRIBUT (uk-grid="") - UIkit JS by mu
   normalne pridal tridu .uk-grid, ale bez JS je potreba selektor
   na atribut. */
.uk-grid,
[uk-grid] {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--sp-5));
    list-style: none;
    padding: 0;
}
.uk-grid > *,
[uk-grid] > * {
    padding-left: var(--sp-5);
    box-sizing: border-box;
}
.uk-grid-margin,
.uk-grid > .uk-grid-margin,
[uk-grid] > .uk-grid-margin {
    margin-top: var(--sp-5);
}
.uk-grid-small,
[uk-grid="small"] {
    margin-left: calc(-1 * var(--sp-3));
}
.uk-grid-small > *,
[uk-grid="small"] > * {
    padding-left: var(--sp-3);
}
.uk-grid-small > .uk-grid-margin { margin-top: var(--sp-3); }
.uk-grid-large,
[uk-grid="large"] {
    margin-left: calc(-1 * var(--sp-7));
}
.uk-grid-large > *,
[uk-grid="large"] > * {
    padding-left: var(--sp-7);
}
.uk-grid-large > .uk-grid-margin { margin-top: var(--sp-7); }
.uk-grid-collapse,
[uk-grid="collapse"] {
    margin-left: 0;
}
.uk-grid-collapse > *,
[uk-grid="collapse"] > * {
    padding-left: 0;
}

/* Sirky - mobile first: vse 100 % */
.uk-width-1-1,
.uk-width-1-2,
.uk-width-1-3,
.uk-width-2-3,
.uk-width-1-4,
.uk-width-3-4,
.uk-width-1-5,
.uk-width-2-5,
.uk-width-3-5,
.uk-width-4-5,
.uk-width-1-6,
.uk-width-5-6,
.uk-width-auto,
.uk-width-expand {
    box-sizing: border-box;
    max-width: 100%;
}
.uk-width-1-1 { width: 100%; }
.uk-width-auto { width: auto; }
.uk-width-expand { flex: 1; min-width: 1px; }

/* Tablet a vyssi (small breakpoint @s = 640px+) */
@media (min-width: 640px) {
    .uk-width-1-2\@s { width: 50%; }
    .uk-width-1-3\@s { width: calc(100% / 3); }
    .uk-width-2-3\@s { width: calc(200% / 3); }
    .uk-width-1-4\@s { width: 25%; }
    .uk-width-3-4\@s { width: 75%; }
    .uk-width-1-5\@s { width: 20%; }
    .uk-width-2-5\@s { width: 40%; }
    .uk-width-3-5\@s { width: 60%; }
    .uk-width-4-5\@s { width: 80%; }
    .uk-width-1-6\@s { width: calc(100% / 6); }
    .uk-width-5-6\@s { width: calc(500% / 6); }
    .uk-width-auto\@s { width: auto; }
    .uk-width-expand\@s { flex: 1; min-width: 1px; }
}

/* Desktop (medium breakpoint @m = 960px+) - hlavni breakpoint v UIkit */
@media (min-width: 960px) {
    .uk-width-1-2\@m { width: 50%; }
    .uk-width-1-3\@m { width: calc(100% / 3); }
    .uk-width-2-3\@m { width: calc(200% / 3); }
    .uk-width-1-4\@m { width: 25%; }
    .uk-width-3-4\@m { width: 75%; }
    .uk-width-1-5\@m { width: 20%; }
    .uk-width-2-5\@m { width: 40%; }
    .uk-width-3-5\@m { width: 60%; }
    .uk-width-4-5\@m { width: 80%; }
    .uk-width-1-6\@m { width: calc(100% / 6); }
    .uk-width-5-6\@m { width: calc(500% / 6); }
    .uk-width-auto\@m { width: auto; }
    .uk-width-expand\@m { flex: 1; min-width: 1px; }
}

/* Large desktop (@l = 1200px+) */
@media (min-width: 1200px) {
    .uk-width-1-2\@l { width: 50%; }
    .uk-width-1-3\@l { width: calc(100% / 3); }
    .uk-width-2-3\@l { width: calc(200% / 3); }
    .uk-width-1-4\@l { width: 25%; }
    .uk-width-3-4\@l { width: 75%; }
    .uk-width-1-5\@l { width: 20%; }
    .uk-width-4-5\@l { width: 80%; }
    .uk-width-1-6\@l { width: calc(100% / 6); }
    .uk-width-auto\@l { width: auto; }
    .uk-width-expand\@l { flex: 1; min-width: 1px; }
}

/* Zarovnani - flex utility */
.uk-flex { display: flex; }
.uk-flex-inline { display: inline-flex; }
.uk-flex-wrap { flex-wrap: wrap; }
.uk-flex-nowrap { flex-wrap: nowrap; }
.uk-flex-middle { align-items: center; }
.uk-flex-top { align-items: flex-start; }
.uk-flex-bottom { align-items: flex-end; }
.uk-flex-stretch { align-items: stretch; }
.uk-flex-left { justify-content: flex-start; }
.uk-flex-center { justify-content: center; }
.uk-flex-right { justify-content: flex-end; }
.uk-flex-between { justify-content: space-between; }
.uk-flex-around { justify-content: space-around; }
.uk-flex-column { flex-direction: column; }
.uk-flex-row { flex-direction: row; }
.uk-first-column { /* UIkit pridava na prvni sloupec - jen marker */ }

/* Text utility - zakladni UIkit */
.uk-text-center { text-align: center; }
.uk-text-left { text-align: left; }
.uk-text-right { text-align: right; }
.uk-text-bold { font-weight: 700; }
.uk-text-lead { font-size: 1.25rem; line-height: 1.5; }
.uk-text-meta { font-size: 0.875rem; color: var(--color-muted, #707070); }
.uk-text-small { font-size: 0.875rem; }
.uk-text-large { font-size: 1.5rem; }

/* Margin utility */
.uk-margin { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.uk-margin-small { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
.uk-margin-large { margin-top: var(--sp-7); margin-bottom: var(--sp-7); }
.uk-margin-remove { margin: 0 !important; }
.uk-margin-remove-top { margin-top: 0 !important; }
.uk-margin-remove-bottom { margin-bottom: 0 !important; }
.uk-margin-top { margin-top: var(--sp-5); }
.uk-margin-bottom { margin-bottom: var(--sp-5); }
.uk-margin-small-top { margin-top: var(--sp-3); }
.uk-margin-small-bottom { margin-bottom: var(--sp-3); }

/* Padding utility */
.uk-padding { padding: var(--sp-5); }
.uk-padding-small { padding: var(--sp-3); }
.uk-padding-large { padding: var(--sp-7); }
.uk-padding-remove { padding: 0; }
.uk-padding-remove-vertical { padding-top: 0; padding-bottom: 0; }
.uk-padding-remove-horizontal { padding-left: 0; padding-right: 0; }

/* Sekce - UIkit section */
.uk-section {
    box-sizing: border-box;
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
}
.uk-section-small { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.uk-section-large { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.uk-section-muted { background-color: var(--color-bg-soft, #f8f8f8); }
.uk-section-default { background-color: #fff; }
.uk-section-primary { background-color: var(--color-brand); color: #fff; }
.uk-section-secondary { background-color: var(--color-ink, #222); color: #fff; }

/* Karta - UIkit card */
.uk-card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition);
}
.uk-card-body { padding: var(--sp-5); }
.uk-card-small > .uk-card-body { padding: var(--sp-4); }
.uk-card-default {
    background-color: #fff;
    box-shadow: var(--shadow-sm);
}
.uk-card-default:hover { box-shadow: var(--shadow-md); }
.uk-card-muted { background-color: var(--color-bg-soft, #f8f8f8); }
.uk-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--sp-3);
}
.uk-card-media-top img,
.uk-card-media-bottom img { width: 100%; height: auto; display: block; }

/* Obrazky / figure - aby SVG/img v LUYA blocich nepretekaly */
.uk-grid figure,
.uk-grid .image,
.uk-grid img {
    max-width: 100%;
    height: auto;
}

/* Skryti pomocnych UIkit trid pro state */
.uk-hidden { display: none !important; }
.uk-invisible { visibility: hidden; }
.uk-invisible-hover:not(:hover):not(:focus):not(:focus-within) { opacity: 0 !important; }
@media (max-width: 639px) {
    .uk-hidden\@s { display: none !important; }
    .uk-visible\@s { display: none !important; }
}
@media (max-width: 959px) {
    .uk-hidden\@m { display: none !important; }
}
@media (min-width: 960px) {
    .uk-visible\@m { display: initial; }
}

/* UIkit pozicovani + inline + background utility (FIX-027) */
.uk-inline { display: inline-block; max-width: 100%; vertical-align: middle; position: relative; }
.uk-inline-clip { display: inline-block; max-width: 100%; vertical-align: middle; position: relative; overflow: hidden; }
.uk-position-relative { position: relative; }
.uk-position-absolute { position: absolute; }
.uk-position-top { top: 0; left: 0; right: 0; }
.uk-position-bottom { bottom: 0; left: 0; right: 0; }
.uk-position-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.uk-position-cover { top: 0; left: 0; right: 0; bottom: 0; }
.uk-background-norepeat { background-repeat: no-repeat; }
.uk-background-center-center { background-position: 50% 50%; }
.uk-background-contain { background-size: contain; }
.uk-background-cover { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.uk-background-blend-multiply { background-blend-mode: multiply; }

/* UIkit child-width - aplikuje sirku na primy potomek
   POZN: LUYA CMS nekdy generuje neuplne nazvy (napr. uk-child-width-1-)
   bez modifikatoru. Bezpecna defaultni hodnota = ~3 sloupce (auto fit). */
.uk-child-width-1-1 > * { width: 100%; }
.uk-child-width-1-2 > * { width: 50%; }
.uk-child-width-1-3 > * { width: calc(100% / 3); }
.uk-child-width-1-4 > * { width: 25%; }
.uk-child-width-1-5 > * { width: 20%; }
.uk-child-width-1-6 > * { width: calc(100% / 6); }
.uk-child-width-auto > * { width: auto; }
.uk-child-width-expand > :not([class*="uk-width"]) { flex: 1; min-width: 1px; }

@media (min-width: 640px) {
    .uk-child-width-1-1\@s > * { width: 100%; }
    .uk-child-width-1-2\@s > * { width: 50%; }
    .uk-child-width-1-3\@s > * { width: calc(100% / 3); }
    .uk-child-width-1-4\@s > * { width: 25%; }
    .uk-child-width-1-5\@s > * { width: 20%; }
    .uk-child-width-1-6\@s > * { width: calc(100% / 6); }
}
@media (min-width: 960px) {
    .uk-child-width-1-1\@m > * { width: 100%; }
    .uk-child-width-1-2\@m > * { width: 50%; }
    .uk-child-width-1-3\@m > * { width: calc(100% / 3); }
    .uk-child-width-1-4\@m > * { width: 25%; }
    .uk-child-width-1-5\@m > * { width: 20%; }
    .uk-child-width-1-6\@m > * { width: calc(100% / 6); }
}

/* Fallback pro neuplnou tridu "uk-child-width-1-" (chyba LUYA template) */
.uk-child-width-1- > * { width: calc(100% / 6); }
@media (max-width: 959px) { .uk-child-width-1- > * { width: calc(100% / 3); } }
@media (max-width: 639px) { .uk-child-width-1- > * { width: 50%; } }

/* LUYA / UIkit slider polozka.
   Dva pripady:
   A) .el-image je DIV s inline background-image (uk-background-cover)
      -> uvnitr je IMG.uk-invisible (default UIkit dava IMG dimenze
         a DIVu pak background-image)
   B) .el-image je primo IMG element (3D tisk slideshow) */

/* .el-item muze byt <li> ve slideshow nebo <div class="el-item uk-inline-clip">
   v e-shop galerii. V obou pripadech chceme BLOCK display
   (override inline-block z .uk-inline-clip). */
.el-item,
.el-item.uk-inline-clip,
li.el-item {
    display: block;
    box-sizing: border-box;
    padding: var(--sp-2);
    list-style: none;
    text-align: center;
}
.el-item::marker { content: ''; }

/* A) .el-image jako DIV s background-image.
   POZOR: NELZE pouzit width: 100% + aspect-ratio kdyz parent
   je inline-block bez explicitni width (circular dependency = 0x0).
   Reseni: pevne rozmery, nezavisle na obsahu/rodici. */
div.el-image,
.el-image.uk-inline,
.el-image.uk-background-cover,
.el-image.uk-inline.uk-background-cover {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
div.el-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* IMG uvnitr DIV.el-image - obrazek je background-image na DIVu,
   IMG je jen pro alt/SEO (display: none kompletne odstrani) */
div.el-image > img,
.el-image > img.uk-invisible {
    display: none;
}

/* B) .el-image jako IMG - slideshow obrazky (3D tisk) */
img.el-image {
    display: block;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: var(--sp-3) auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    visibility: visible;
}

/* Pro mobilni viewport zmensime fixed velikost */
@media (max-width: 639px) {
    div.el-image,
    .el-image.uk-inline,
    .el-image.uk-background-cover,
    .el-image.uk-inline.uk-background-cover {
        width: 140px;
        height: 140px;
    }
}

/* uk-lightbox / galerie - link wrapper kolem obrazku */
a[uk-lightbox],
a[data-type="image"] {
    display: block;
    text-decoration: none;
}

/* Caption pod thumbnaily */
.el-caption,
.el-title {
    display: block;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: var(--sp-2);
    color: var(--color-ink);
}

/* Obecne omezeni pro vsechny IMG v main (zachrana pred 800x800 PNG) */
main img:not(.navbar__brand img):not(.topbar__icon):not(.contact-card__icon) {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
}

/* Velke obrazky v storage (LUYA file uploads) - vetsi limit nez galerie */
main img[src*="/storage/"] {
    max-height: 300px;
}

/* UIkit slideshow - bez JS by se vsechny polozky zobrazily stacked.
   Resime jako horizontalni scroll-snap gallery. */
.uk-slideshow,
.uk-slider,
.uk-position-relative {
    position: relative;
}
.uk-slideshow-items,
.uk-slider-items {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    margin: 0;
    list-style: none;
}
.uk-slideshow-items::-webkit-scrollbar,
.uk-slider-items::-webkit-scrollbar { height: 8px; }
.uk-slideshow-items::-webkit-scrollbar-thumb,
.uk-slider-items::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 4px;
}

.uk-slideshow-items > .el-item,
.uk-slider-items > .el-item,
.uk-slideshow-items > li,
.uk-slider-items > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: min(280px, 80vw);
    list-style: none;
}
.uk-slideshow-items > .el-item img,
.uk-slider-items > .el-item img,
.uk-slideshow-items > li img,
.uk-slider-items > li img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: block;
}

/* w500/w300/w400 - LUYA helper trida pro sirku containeru */
.w500 { max-width: 500px; margin-left: auto; margin-right: auto; }
.w400 { max-width: 400px; margin-left: auto; margin-right: auto; }
.w300 { max-width: 300px; margin-left: auto; margin-right: auto; }
.w600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.w700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.w800 { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Slideshow navigation - dots & arrows (UIkit) */
.uk-dotnav,
.uk-slidenav-container {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    padding: var(--sp-3) 0;
    margin: 0;
    list-style: none;
}
.uk-dotnav > * > * {
    display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-line);
    border: 0;
    cursor: pointer;
}
.uk-slidenav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: var(--color-brand);
    border: 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.uk-slidenav:hover { background: #fff; }

/* LUYA text-teaser - styl karty s textem + obrazkem */
.text-teaser {
    display: block;
    padding: var(--sp-4) var(--sp-5);
    color: var(--color-brand);
    font-weight: 700;
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    text-decoration: none;
    line-height: 1.2;
    transition: color var(--transition);
}
.text-teaser:hover { color: var(--color-brand-dark, #b3005f); }

/* LUYA figure s image_text blokem - obrazek napravo, text nalevo */
.uk-grid figure {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 0;
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.uk-grid figure:hover { box-shadow: var(--shadow-md); }
.uk-grid figure img {
    max-height: 140px;
    width: auto;
    object-fit: contain;
    margin: var(--sp-3) auto;
    display: block;
}

/* ---------- 19. LUYA uk-breadcrumb (FIX-012) ---------- */
ul.uk-breadcrumb,
ol.uk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none !important;
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-4) 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}
.uk-breadcrumb > li,
.uk-breadcrumb > .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    list-style: none !important;
    color: var(--color-muted);
}
.uk-breadcrumb > li::marker,
.uk-breadcrumb > .breadcrumb-item::marker { content: ''; }
.uk-breadcrumb > li + li::before,
.uk-breadcrumb > .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin-right: var(--sp-2);
    color: var(--color-muted);
    opacity: 0.6;
}
.uk-breadcrumb a {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.uk-breadcrumb a:hover { color: var(--color-brand-dark, #b3005f); text-decoration: underline; }
.uk-breadcrumb > li.active,
.uk-breadcrumb > .breadcrumb-item.active,
.uk-breadcrumb > li:last-child,
.uk-breadcrumb > .breadcrumb-item:last-child {
    color: var(--color-ink);
    font-weight: 600;
}
.uk-breadcrumb > li.active a,
.uk-breadcrumb > .breadcrumb-item.active a,
.uk-breadcrumb > li:last-child a,
.uk-breadcrumb > .breadcrumb-item:last-child a {
    color: var(--color-ink);
    pointer-events: none;
    cursor: default;
}

/* Vychozi list-style reset pro vsechny CMS ol/ul ktere nemaji svuj BEM styl */
main ol.breadcrumb-bar__list { list-style: none; padding: 0; }
main ol:not([class]):not([style*="list-style"]) > li::marker { content: ''; }

/* ---------- 20. Main spacing (FIX-015) ---------- */
main {
    min-height: 50vh;
    display: block;
}
main > .uk-section:first-child,
main > article:first-child,
main > .container:first-child {
    padding-top: var(--sp-6);
}
main > .uk-section:last-child,
main > article:last-child,
main > .container:last-child {
    padding-bottom: var(--sp-7);
}

/* CMS bloky vychozi spacing kdyz LUYA renderuje primo do main */
main > .uk-container,
main > .uk-container-expand {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

/* ---------- 21. Trust logos sizing fallback (FIX-019) ---------- */
.trust__logo img {
    max-width: 140px;
    max-height: 60px;
    object-fit: contain;
}

/* ---------- 22. CMS image/img obecny sizing (FIX-018) ---------- */
/* Vsechny obrazky uvnitr LUYA CMS bloku musi mit responzivni chovani */
main img,
main figure img,
.uk-card img,
.uk-grid img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* LUYA standard image bloky */
.image img,
figure.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Limit pro velke obrazky v CMS - zabrani "huge pictures" problemu */
.uk-grid > .uk-width-1-2\@m img,
.uk-grid > .uk-width-1-3\@m img,
.uk-grid > .uk-width-1-4\@m img {
    max-height: 240px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Plnosirky obrazek v jednoslupcovem CMS bloku - omezit vysku */
main > .uk-container img:not(.navbar__brand img):not(.topbar__icon) {
    max-height: 500px;
}

/* ---------- 23. CMS typografie h1-h6 v main (sjednoceni s designem) ---------- */
main h1 { font-size: var(--fs-2xl); font-weight: 700; margin: var(--sp-5) 0 var(--sp-3); color: var(--color-ink); }
main h2 { font-size: var(--fs-xl); font-weight: 700; margin: var(--sp-5) 0 var(--sp-3); color: var(--color-ink); }
main h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); color: var(--color-ink); }
main h4 { font-size: var(--fs-md); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); color: var(--color-ink); }
main p { line-height: 1.6; margin-bottom: var(--sp-3); }
main ul:not(.uk-breadcrumb):not([class*="navbar"]):not([class*="topbar"]):not([class*="footer"]),
main ol:not(.breadcrumb-bar__list):not(.uk-breadcrumb) {
    margin: var(--sp-3) 0;
    padding-left: var(--sp-5);
}
/* Pink linky jen pro CMS-renderovany obsah uvnitr p, li, td, h2-h6.
   Nikoli pro karty / tlacitka / strukturalni komponenty (.product-card,
   .contact-card, .feature-card, .breadcrumb, atd.) */
main p a,
main li a,
main td a,
main h1 a, main h2 a, main h3 a, main h4 a, main h5 a, main h6 a {
    color: var(--color-brand);
    text-decoration: underline;
}
main p a:hover,
main li a:hover,
main td a:hover,
main h1 a:hover, main h2 a:hover, main h3 a:hover,
main h4 a:hover, main h5 a:hover, main h6 a:hover {
    color: var(--color-brand-dark, #b3005f);
}

/* Force fix: contact-card musi mit bilou barvu (pink BG pod nim).
   contact-card je <a> takze defaultni link-color by ho prebil */
.contact .contact-card,
.contact .contact-card:link,
.contact .contact-card:visited,
.contact .contact-card:hover,
.contact .contact-card:active {
    color: #fff !important;
    text-decoration: none !important;
}
.contact .contact-card__big,
.contact .contact-card__small {
    color: #fff !important;
    text-decoration: none !important;
}

/* Product card a feature card take nemohou byt pink-on-* */
.product-card,
.product-card:link,
.product-card:visited,
.product-card:hover {
    color: var(--color-ink);
    text-decoration: none;
}
.product-card .product-card__title { color: var(--color-ink); }
.product-card:hover .product-card__title { color: var(--color-brand); }

/* ---------- 24. UIkit buttons (LUYA CMS muze pouzivat uk-button) ---------- */
.uk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill, 999px);
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.uk-button-default {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-line);
}
.uk-button-default:hover { background: var(--color-surface); }
.uk-button-primary {
    background: var(--color-brand);
    color: #fff;
}
.uk-button-primary:hover { background: var(--color-brand-dark, #b3005f); }
.uk-button-secondary {
    background: var(--color-ink);
    color: #fff;
}
.uk-button-link {
    background: transparent;
    color: var(--color-brand);
    text-decoration: underline;
    padding: 0;
}
.uk-button-large { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }
.uk-button-small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }


/*Calc form*/
.durationtab label {
  padding-left:50px;
  height:50px;
  line-height: 1.2;
  padding-top:10px;
  margin-bottom:20px;
  margin-left:5px;
  }


.durationtab .form-check {
  margin-bottom: 1rem;
  }  

  .durationtab .form-check input {
  float: right;
  margin-top:10px;
  }  

.durationhr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.duration-standard {
  background: url(/img/turtle1.svg) no-repeat left center;
  background-size:35px;
  
}

.duration-express {
  background: url(/img/rocket1.svg) no-repeat left center;
  background-size:35px;
}


.durationtab input[type="radio"] + label {
   color: #aaa;
}    

.durationtab input[type="radio"]:checked + label {
   color: black;
}    

.durationtab input[type="radio"]:checked + label span {
   background-color: black;
} 

.durationtab .card input {visibility: hidden;}

.form-group {
    margin-bottom: 1rem;
}

/*Popup window*/
/* Modal overlay / backdrop */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

/* Modal dialog box */
.uk-modal {
   /* display: none;*/
   
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px 15px;
    background: rgba(0,0,0,.6);
    opacity: 0;
    transition: opacity .15s linear;
    padding: 50px 30px;
}

.uk-modal.uk-open {
    opacity: 1;
}


@media (min-width: 960px) {
    .uk-modal {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 640px) {
    .uk-modal {
        padding: 50px 30px;
    }
}

.modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  margin: 0 auto;
}

/* Close button (top-right ✕) */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}

.modal-close:hover {
  background: #f3f3f3;
  color: #222;
}

/* Body / text content area */
.modal-body {
  padding: 1.5rem;
  padding-right: 2.5rem; /* avoid overlap with close button */
  font-size: 15px;
  line-height: 1.6;
  color: #222;
}

.modal-body a {
  color: #1a6fcf;
  text-decoration: none;
  font-weight: 600;
}

.modal-body a:hover {
  text-decoration: underline;
}

/* Image at the bottom */
.modal-image {
  width: 100%;
  display: block;
  line-height: 0;
}

.modal-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/*Alert*/
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 3.5rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1rem;
  color: inherit;
}

.alert-primary {
  color: #073984;
  background-color: #cfe2ff;
  border-color: #bbd6fe;
}

.alert-primary .alert-link {
  color: #042454;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark .alert-link {
  color: #040505;
}

/* Order */
.btn-primary {

  /*  --primary-color: #d7df23;
  --primary-dark: #08853d; 
  --secondary-color:  rgba(243, 156, 18, 0.6);  
  --secondary-dark: #c2410c;
  --light-bg: #f8f9fa;
  --dark-bg: #212529;
  --bs-link-color: #9f6d1b; 
  --bs-link-color-rgb:  159, 109, 27; */
  background-color: #000

}

.objednavka-navigace {
  font-size: 14px;
}

.objednavka-navigace > div {
  position: relative;
  padding: 15px 10px;
}

.objednavka-navigace .triangle {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #e0e0e0;
  margin: 0 auto 10px;
}

.objednavka-navigace .active .triangle {
  border-left-color: #28a745;
}

.objednavka-navigace .possible .triangle {
  border-left-color: #6c757d;
}

.objednavka-navigace a {
  color: #6c757d;
  text-decoration: none;
  font-weight: 500;
}

.objednavka-navigace .active a {
  color: #28a745;
  font-weight: 700;
}

.objednavka-navigace .possible a.undisabled {
  color: #007bff;
}

.objednavka-navigace a.disabled {
  pointer-events: none;
  color: #adb5bd;
}

.objednavka-navigace a.undisabled:hover {
  text-decoration: underline;
}

.objednavka-navigace .active .triangle[data-v-83c3f80f] {
    border-left-color: #E5097F
}
.objednavka-navigace .active a[data-v-83c3f80f] {
    color: #E5097F;
}
.btn-success {
    color: #fff;
    background-color: #E5097F;
    border-color: #d7df23
}

.btn-success:hover:not(:disabled) {
    background-color: #E5097F;
    border-color: #d7df23
}