/*============================================================================
   09-sections.css — hero patterns, color blocky, pricing/compare/FAQ, článkové komponenty, blurb/CTA, per-page
============================================================================*/

/*============================================================================
   09 — HERO PATTERNS

   Defaultní hero = cream s tvary. Premium hero = full color block.
   Vlož ke .et_pb_section třídu .hero--cream nebo .hero--berry.
============================================================================*/

/* Cream hero (default pro browsing stránky) */
.hero--cream {
    background: var(--cream);
    padding: 64px 0 56px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hero--cream .et_pb_row { position: relative; z-index: 1; }

/* Full color block hero (Premium landing pouze) */
.hero--berry {
    background: var(--berry);
    color: #fff;
    padding: 96px 0 120px;
    position: relative;
    overflow: hidden;
}
.hero--berry h1,
.hero--berry h2,
.hero--berry h3 { color: #fff; }
.hero--berry p { color: rgba(255,255,255,.92); }
.hero--berry .eyebrow { color: var(--yellow); }
.hero--berry .marker { color: var(--ink); }


/* === Dekorativní geometrické tvary v hero ===
   Vlož 3-5 prázdných divů se třídou .hero-shape a variantou. */
.hero-shape {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.hero-shape--1 { width: 280px; height: 280px; background: var(--yellow); top: -100px; right: -80px; opacity: .5; }
.hero-shape--2 { width: 200px; height: 200px; background: var(--teal); bottom: -90px; left: -70px; opacity: .45; border-radius: 50px; transform: rotate(18deg); }
.hero-shape--3 { width: 70px; height: 70px; background: var(--lilac); top: 42%; right: 22%; opacity: .6; }
.hero-shape--4 { width: 54px; height: 54px; background: var(--berry); bottom: 16%; left: 36%; opacity: .55; }

/* Hero stats (3-4 čísla pod sebou s line dividery) */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0;
    justify-content: start;
}
.hero-stats > div {
    padding: 0 28px;
    border-left: 1px solid var(--line);
}
.hero-stats > div:first-child { border-left: none; padding-left: 0; }
.hero-stats strong {
    font-family: 'Manrope', sans-serif;
    font-size: 1.9rem; font-weight: 800;
    display: block; line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
}
.hero-stats span {
    font-size: .74rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 6px; display: block;
    font-weight: 500;
}
.hero-stats .berry { color: var(--berry); }


/*============================================================================
   10 — COLOR BLOCK SEKCE (sezónní banner, premium CTA, newsletter, final CTA…)
============================================================================*/

/* Universal color block — berry default. Vlož na .et_pb_module wrapper */
.color-block {
    border-radius: var(--radius-2xl);
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
    background: var(--berry);
    color: #fff;
}
.color-block::before,
.color-block::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.color-block::before {
    width: 280px; height: 280px;
    background: var(--yellow);
    top: -100px; left: -80px;
    opacity: .28;
}
.color-block::after {
    width: 200px; height: 200px;
    background: var(--lilac);
    bottom: -80px; right: -50px;
    opacity: .35;
}
.color-block > * { position: relative; z-index: 1; }
.color-block h2,
.color-block h3,
.color-block h4 { color: #fff; }
.color-block p { color: rgba(255,255,255,.92); }
.color-block .eyebrow { color: var(--yellow); }

/* Varianty */
.color-block--teal { background: var(--teal); }
.color-block--berry { background: var(--berry); }
.color-block--lilac { background: var(--lilac); }
.color-block--yellow { background: var(--yellow); color: var(--ink); }
.color-block--yellow h2,
.color-block--yellow h3,
.color-block--yellow p { color: var(--ink); }
.color-block--yellow .eyebrow { color: var(--berry); }


/*============================================================================
   12 — KOMPONENTY: PRICING / COMPARE / FAQ
============================================================================*/

/* Pricing block (Premium landing + homepage section) */
.pricing-block {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-2xl);
    padding: 48px;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}
/* Text štítků (⭐ nejvýhodnější, ⭐ doporučené, ⭐ tvůj tarif) je v atributu
   data-stitek, aby šel přeložit. Vypisuje ho PHP (includes/premium.php,
   page-premium.php), viz docs/13-preklady.md. */
.pricing-block::before {
    content: attr(data-stitek);
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--yellow);
    color: var(--ink);
    padding: 7px 18px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.pricing-tabs {
    display: flex; gap: 4px;
    margin-bottom: 32px;
    padding: 4px;
    background: var(--cream);
    border-radius: var(--radius-pill);
}
.pricing-tabs button {
    flex: 1;
    background: none; border: none;
    color: var(--ink-soft);
    padding: 12px;
    border-radius: var(--radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: all var(--t-base);
}
.pricing-tabs button.active {
    background: var(--berry);
    color: #fff;
}
.pricing-tabs .save {
    background: var(--yellow);
    color: var(--ink);
    font-size: .62rem;
    padding: 2px 6px;
    margin-left: 6px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    letter-spacing: .04em;
}
.price-display {
    display: flex; align-items: baseline;
    gap: 10px; margin-bottom: 6px;
    justify-content: center;
}
.price-display strong {
    font-family: 'Manrope', sans-serif;
    font-size: 4.4rem; font-weight: 800;
    color: var(--ink); line-height: 1;
    letter-spacing: -.05em;
}
.price-display span { color: var(--ink-soft); font-size: 1rem; }
.price-note {
    color: var(--berry);
    font-size: .92rem;
    margin-bottom: 28px;
    font-weight: 600;
    text-align: center;
}
.price-list {
    list-style: none; padding: 0;
    display: grid; gap: 12px;
    margin-bottom: 32px;
}
.price-list li {
    display: flex; align-items: center; gap: 14px;
    font-size: .95rem; color: var(--ink);
    padding: 4px 0;
    margin: 0;
}
.price-list .check {
    width: 22px; height: 22px;
    background: var(--teal-soft);
    color: var(--teal-deep);
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: .75rem;
}
.price-trust {
    margin-top: 18px;
    text-align: center;
    font-size: .82rem;
    color: var(--ink-soft);
    line-height: 1.6;
}
.price-trust strong { color: var(--ink); font-weight: 600; }


/* === Compare table (Free vs Premium) === */
.compare-table {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto;
}
.compare-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    align-items: center;
    padding: 18px 32px;
    border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: none; }
.compare-row.header {
    background: var(--cream);
    padding: 28px 32px;
    font-family: 'Manrope', sans-serif;
    border-bottom: 1px solid var(--border-soft);
}
.compare-row.section-label {
    background: var(--cream);
    padding: 14px 32px;
    font-family: 'Manrope', sans-serif;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-soft);
    font-weight: 700;
    grid-template-columns: 1fr;
}
.compare-row .col-premium {
    background: var(--berry-soft);
    margin: -18px 0;
    padding: 18px 0;
}
.compare-row.header .col-premium {
    margin: -28px 0;
    padding: 28px 0;
    position: relative;
}
.compare-row.header .col-premium::before {
    content: attr(data-stitek);
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--yellow);
    color: var(--ink);
    padding: 5px 14px;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.col-plan { text-align: center; font-size: .92rem; color: var(--ink); }
.col-plan .check { color: var(--teal); font-size: 1.3rem; font-weight: 800; display: inline-block; }
.col-plan .x { color: var(--muted); font-size: 1.2rem; display: inline-block; }
.col-plan .limited { color: var(--ink-soft); font-size: .85rem; font-style: italic; }
.col-plan.col-premium .check { color: var(--berry); }
.col-plan .num {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--ink);
}
.col-feature { font-size: .95rem; color: var(--ink); font-weight: 500; }
.col-feature .hint {
    display: block;
    font-size: .78rem;
    color: var(--ink-soft);
    font-weight: 400;
    margin-top: 2px;
}


/* === FAQ accordion (Divi 5 .et_pb_toggle override) ===
   Divi 5 toggle = .et_pb_toggle. Náš design = cream box s berry+ ikonou. */
.et_pb_toggle,
.faq-item {
    background: var(--cream) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: all var(--t-base);
    margin-bottom: 12px !important;
    padding: 0 !important;
}
.et_pb_toggle.et_pb_toggle_open,
.faq-item.open {
    background: #fff !important;
    border-color: var(--berry-soft) !important;
}
.et_pb_toggle_title,
.faq-q {
    font-family: 'Manrope', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    padding: 22px 26px !important;
    cursor: pointer;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    line-height: 1.3 !important;
}
.et_pb_toggle_content,
.faq-a {
    padding: 0 26px 22px !important;
    color: var(--ink) !important;
    font-size: .94rem !important;
    line-height: 1.65 !important;
}
.et_pb_toggle_content p { color: var(--ink); font-size: .94rem; line-height: 1.65; }
/* Divi 5 vlastní toggle ikona — schovat */
.et_pb_toggle .et_pb_toggle_title:before {
    color: var(--berry) !important;
    background: var(--berry-soft) !important;
    border-radius: 50% !important;
    width: 28px; height: 28px;
    display: grid !important;
    place-items: center;
    font-size: 1rem !important;
    right: 18px !important;
    top: 18px !important;
    line-height: 1 !important;
}
.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
    background: var(--berry) !important;
    color: #fff !important;
}

/*============================================================================
   15 — SEO BLOCK, TIP CALLOUT, PULL QUOTE, INLINE CTA (článkové komponenty)
============================================================================*/

/* SEO block (kategorie spec) */
.seo-block {
    background: var(--cream);
    padding: 64px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-soft);
}
.seo-block__body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
}
.seo-block .seo-tips {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    align-self: start;
}
@media (max-width: 1100px) {
    .seo-block { padding: 40px; }
    .seo-block__body { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 780px) {
    .seo-block { padding: 28px 20px; border-radius: var(--radius-xl); }
}

/* Tip callout (žlutý box v článku) */
.tip-callout {
    background: var(--yellow-soft);
    border: 1px solid var(--yellow);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin: 36px 0;
}
.tip-callout__head {
    display: flex; align-items: center;
    gap: 12px; margin-bottom: 10px;
}
.tip-callout__head .ico {
    width: 32px; height: 32px;
    background: var(--yellow);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1rem;
    color: var(--ink);
    flex-shrink: 0; font-weight: 800;
}
.tip-callout__head strong {
    font-family: 'Manrope', sans-serif;
    font-size: .95rem;
    color: var(--ink); font-weight: 700;
}
.tip-callout p {
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
}

/* Pull quote (citace v článku) */
.pull-quote {
    background: var(--cream);
    border-left: 4px solid var(--berry);
    padding: 32px 36px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: 40px -16px 40px 0;
    font-family: 'Source Serif 4', Georgia, serif;
}
.pull-quote p {
    font-size: 1.32rem;
    color: var(--ink);
    line-height: 1.45;
    margin-bottom: 14px;
    font-style: italic;
    font-weight: 500;
    font-family: 'Source Serif 4', Georgia, serif;
}
.pull-quote cite {
    font-style: normal;
    font-size: .88rem;
    color: var(--ink-soft);
    font-weight: 600;
    display: block;
    font-family: 'Inter', sans-serif;
}
.pull-quote cite::before { content: "— "; }

/* Premium lock callout (yellow box) */
.premium-lock {
    background: var(--yellow-soft);
    border: 1px solid var(--yellow);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex; gap: 16px;
    align-items: start;
}
.premium-lock__ico {
    width: 40px; height: 40px;
    background: var(--yellow);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0; color: var(--ink);
}
.premium-lock strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}
.premium-lock p {
    font-size: .88rem;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
    opacity: .85;
}
.premium-lock p a {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

/*============================================================================
   18 — DIVI 5 BLURB / PRICING / CTA OVERRIDES
============================================================================*/

/* Blurb — používaný na benefit cards (B2B, Premium feature listy) */
.et_pb_blurb {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 32px !important;
    transition: transform var(--t-base), border-color var(--t-base);
}
.et_pb_blurb:hover {
    transform: translateY(-4px);
    border-color: var(--berry-soft);
}
.et_pb_blurb .et_pb_main_blurb_image {
    margin-bottom: 18px !important;
}
.et_pb_blurb_content h4 {
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
    letter-spacing: -.01em;
}
.et_pb_blurb_description {
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.55;
}
.et_pb_blurb.blurb--plain {
    background: transparent;
    border: none;
    padding: 0 !important;
}

/* CTA module */
.et_pb_cta {
    border-radius: var(--radius-2xl) !important;
    padding: 48px 56px !important;
    background: var(--berry) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}
.et_pb_cta h2 { color: #fff !important; }
.et_pb_cta p { color: rgba(255,255,255,.92); }

/* Pricing table */
.et_pb_pricing_table {
    background: #fff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-xl) !important;
    padding: 36px !important;
}
.et_pb_pricing_table.et_pb_featured_table {
    border-color: var(--berry) !important;
}
.et_pb_best_value {
    background: var(--yellow) !important;
    color: var(--ink) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: .66rem !important;
    letter-spacing: .1em !important;
}

/* Obchodní podmínky — víceúrovňové číslování */
#obchodni-podminky ol { counter-reset: item; }
#obchodni-podminky li { display: block; }
#obchodni-podminky li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
}


/*============================================================================
   HOMEPAGE (mockup v5) — sekce 2–12
   Markup 1:1 z _design/homepage-mockup-v5.html. Postup: exports/homepage.html
============================================================================*/

/* === 2. HERO (bílá) === */
.hero.ok-section {
    padding: 64px 0 120px !important;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.hero-shape-1 {
    position: absolute; width: 300px; height: 300px; background: var(--yellow); border-radius: 50%;
    top: 8%; left: -120px; z-index: 0; opacity: .7;
}
.hero-shape-2 {
    position: absolute; width: 200px; height: 200px; background: var(--teal);
    bottom: 14%; right: -80px; z-index: 0; transform: rotate(20deg); border-radius: 60px; opacity: .7;
}
.hero-shape-3 {
    position: absolute; width: 70px; height: 70px; background: var(--lilac); border-radius: 50%;
    top: 32%; right: 36%; z-index: 0; opacity: .7;
}
.hero-shape-4 {
    position: absolute; width: 60px; height: 60px; background: var(--berry); border-radius: 50%;
    bottom: 30%; left: 42%; z-index: 0; opacity: .6;
}
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.hero-headline h1 { margin-bottom: 28px; }
.hero-lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 520px; margin-bottom: 36px; }
.hero-search-wrap { position: relative; max-width: 560px; margin-bottom: 24px; }
.hero-search {
    width: 100%; border: 1px solid var(--border-soft); background: var(--cream); border-radius: 999px;
    padding: 20px 168px 20px 28px; font-family: inherit; font-size: 1.05rem; color: var(--ink);
    transition: all .2s;
}
.hero-search::placeholder { color: var(--muted); }
.hero-search:focus { outline: none; background: #fff; border-color: var(--berry); box-shadow: 0 0 0 4px var(--berry-soft); }
.hero-search-btn {
    position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 28px; border-radius: 999px;
    background: var(--berry); color: #fff; border: 1px solid var(--berry); font-family: inherit; font-weight: 600;
    cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.hero-search-btn:hover { background: var(--berry-deep); border-color: var(--berry-deep); }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-soft); align-items: center; }
.hero-tags strong { font-weight: 600; color: var(--ink); margin-right: 6px; }
.hero-tags a {
    padding: 6px 14px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 999px; color: var(--ink-soft);
    transition: all .2s; font-weight: 500;
}
.hero-tags a:hover { background: var(--berry); border-color: var(--berry); color: #fff; }
/* hero visual — vějíř karet ([ok_hero_cards])
   Ladí se proměnnými na .hero-visual níže, jednotlivé karty už jen dosazují
   násobky --step, takže rozestup i náklon se mění na jednom místě.
   Počet karet drží konstanta WPLAMA_HERO_CARDS ve functions.php. */
.hero-visual {
    --card-w: min(142px, calc(13vw - 32px)); /* šířka karty; dvousloupcové hero má nejmíň místa těsně nad 1100 px */
    --step:   calc(var(--card-w) * .64);    /* rozestup středů karet */
    --angle:  19deg;                        /* náklon krajní karty */
    --arc:    20px;                         /* o kolik krajní karty klesnou */
    --lift:   26px;                         /* zvednutí karty při vytažení dopředu */
    --push:   26px;                         /* uhnutí sousedů vytažené karty */
    --nudge:  0px;                          /* dorovnání na střed, když se část karet skryje */

    position: relative;
    height: calc(var(--card-w) * 1.5 + 118px);
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* měkká podložka pod vějířem, ať karty neplavou v bílé */
.hero-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--step) * 5 + var(--card-w) + 96px);
    height: calc(var(--card-w) * 1.5 + 104px);
    transform: translate(-50%, -50%) rotate(-4deg);
    background: var(--cream-2);
    border-radius: 72px;
    z-index: 0;
    pointer-events: none;
}

.stack-card {
    --shift: 0px;
    position: absolute;
    width: var(--card-w);
    padding: 14px 14px 16px;
    border-radius: 22px;
    transform-origin: 50% 50%;
    transform: translate(calc(var(--x) + var(--shift) + var(--nudge)), var(--y)) rotate(var(--rot));
    z-index: var(--z);
    box-shadow: 0 10px 26px rgba(27, 31, 58, .12);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s;
    will-change: transform;
}
.stack-card .thumb { aspect-ratio: 2 / 3; background: var(--white); border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.stack-card .thumb svg { width: 75%; height: 75%; }
.stack-card .cap {
    font-family: 'Manrope', sans-serif; font-size: .8rem; font-weight: 700; color: var(--ink);
    margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden;
}
.stack-card .cap span { font-family: 'Inter', sans-serif; font-size: .68rem; color: var(--ink-soft); font-weight: 500; flex: 0 0 auto; }

.stack-1 { --x: calc(var(--step) * -2.5); --y: var(--arc);             --rot: calc(var(--angle) * -1);  --z: 1; background: var(--berry); }
.stack-2 { --x: calc(var(--step) * -1.5); --y: calc(var(--arc) * .36); --rot: calc(var(--angle) * -.6); --z: 2; background: var(--teal); }
.stack-3 { --x: calc(var(--step) * -0.5); --y: calc(var(--arc) * .04); --rot: calc(var(--angle) * -.2); --z: 3; background: var(--yellow); }
.stack-4 { --x: calc(var(--step) *  0.5); --y: calc(var(--arc) * .04); --rot: calc(var(--angle) *  .2); --z: 4; background: var(--lilac); }
.stack-5 { --x: calc(var(--step) *  1.5); --y: calc(var(--arc) * .36); --rot: calc(var(--angle) *  .6); --z: 5; background: var(--berry); }
.stack-6 { --x: calc(var(--step) *  2.5); --y: var(--arc);             --rot: var(--angle);             --z: 6; background: var(--teal); }
.stack-1 .cap, .stack-1 .cap span,
.stack-2 .cap, .stack-2 .cap span,
.stack-4 .cap, .stack-4 .cap span,
.stack-5 .cap, .stack-5 .cap span,
.stack-6 .cap, .stack-6 .cap span { color: #fff; }

/* vytažení dopředu: klávesový fokus a klepnutí na dotykovém displeji */
.stack-card:focus-visible,
.stack-card.is-active {
    transform: translate(calc(var(--x) + var(--nudge)), calc(var(--y) - var(--lift))) rotate(calc(var(--rot) * .2)) scale(1.06);
    z-index: 20;
    box-shadow: 0 26px 52px rgba(27, 31, 58, .24);
}
.stack-card.is-active ~ .stack-card { --shift: var(--push); }
.stack-card:has(~ .stack-card.is-active) { --shift: calc(var(--push) * -1); }
.stack-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* totéž myší. Na dotyku se hover neuplatní, tam stav drží .is-active z hero-cards.js */
@media (hover: hover) {
    .stack-card:hover {
        transform: translate(calc(var(--x) + var(--nudge)), calc(var(--y) - var(--lift))) rotate(calc(var(--rot) * .2)) scale(1.06);
        z-index: 20;
        box-shadow: 0 26px 52px rgba(27, 31, 58, .24);
    }
    .stack-card:hover ~ .stack-card { --shift: var(--push); }
    .stack-card:has(~ .stack-card:hover) { --shift: calc(var(--push) * -1); }
}

@media (prefers-reduced-motion: reduce) {
    .stack-card { transition: none; }
}

.hero-meta { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; z-index: 1; }
.hero-meta div { padding: 0 24px; border-left: 1px solid var(--line); }
.hero-meta div:first-child { border-left: none; padding-left: 0; }
.hero-meta strong { font-family: 'Manrope', sans-serif; font-size: 2.6rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.hero-meta span { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin-top: 8px; display: block; font-weight: 500; }
.hero-meta .berry { color: var(--berry); }

/* === SEC-HEAD (eyebrow + h2 + sub vlevo, link vpravo) === */
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: 48px; }
.sec-head h2 .teal { color: var(--teal); }
.sec-head .sub { color: var(--ink-soft); font-size: 1rem; margin-top: 8px; max-width: 560px; }
.sec-head .link {
    font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--ink);
    padding: 10px 18px; border-radius: 999px; background: var(--cream); border: 1px solid var(--border-soft); transition: all .2s;
}
.sec-head .link:hover { background: var(--berry); border-color: var(--berry); color: #fff; }

/* === 3. SEASONAL (berry blok se žlutým razítkem) === */
.seasonal {
    display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
    background: var(--berry); color: #fff; padding: 36px 48px; border-radius: 32px; position: relative; overflow: hidden;
}
.seasonal::before {
    content: ""; position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%;
    top: -80px; right: -60px; opacity: .25;
}
.seasonal-stamp {
    width: 110px; height: 110px; background: var(--yellow); border-radius: 50%;
    display: grid; place-items: center; color: var(--ink); text-align: center;
    transform: rotate(-12deg); font-size: .72rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
    flex-shrink: 0; font-weight: 700; font-family: 'Manrope', sans-serif; position: relative; z-index: 1;
}
.seasonal-stamp strong { display: block; font-size: 1.5rem; letter-spacing: -.02em; text-transform: none; margin: 2px 0; font-weight: 800; color: var(--ink); }
.seasonal > div:nth-child(2) { position: relative; z-index: 1; }
.seasonal h3 { color: #fff; font-size: 1.7rem; margin-bottom: 4px; font-weight: 700; }
.seasonal h3 em { color: var(--yellow); font-style: normal; font-weight: 700; }
.seasonal p { color: rgba(255,255,255,.9); margin: 0; font-size: 1rem; }
.seasonal > a { position: relative; z-index: 1; }

/* === 4. CATEGORIES (cream, 5×3 dlaždice — mockup varianta s .ill/.name/.meta) === */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cat-grid .cat-tile:hover .ill { background: #fff !important; }
.cat-grid .cat-tile:hover .ill svg { color: var(--berry) !important; }
.cat-grid .cat-tile:hover .name,
.cat-grid .cat-tile:hover .meta { color: #fff; }
.cat-tile .ill {
    width: 84px; height: 84px; margin: 8px auto 16px; display: grid; place-items: center;
    border-radius: 50%; transition: all .2s;
}
.cat-tile .ill svg { width: 60%; height: 60%; color: var(--ink); transition: color .2s; }
.cat-tile .name { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 2px; transition: color .2s; letter-spacing: -.01em; }
.cat-tile .meta { font-size: .72rem; color: var(--muted); font-weight: 500; transition: color .2s; }
.cat-grid .cat-tile:nth-child(5n+1) .ill { background: var(--berry-soft); }
.cat-grid .cat-tile:nth-child(5n+1) .ill svg { color: var(--berry); }
.cat-grid .cat-tile:nth-child(5n+2) .ill { background: var(--teal-soft); }
.cat-grid .cat-tile:nth-child(5n+2) .ill svg { color: var(--teal-deep); }
.cat-grid .cat-tile:nth-child(5n+3) .ill { background: var(--yellow-soft); }
.cat-grid .cat-tile:nth-child(5n+3) .ill svg { color: #A57100; }
.cat-grid .cat-tile:nth-child(5n+4) .ill { background: var(--lilac-soft); }
.cat-grid .cat-tile:nth-child(5n+4) .ill svg { color: var(--lilac); }
.cat-grid .cat-tile:nth-child(5n+5) .ill { background: var(--sky-soft); }
.cat-grid .cat-tile:nth-child(5n+5) .ill svg { color: #1B6FB8; }
.cat-all { background: var(--lilac); color: #fff; border-color: var(--lilac) !important; }
.cat-all .name, .cat-all .meta { color: #fff; }
.cat-all .ill { background: #fff !important; }
.cat-all .ill svg { color: var(--lilac) !important; }
.cat-all:hover { background: var(--berry); }
.cat-all:hover .ill { background: #fff !important; }
.cat-all:hover .ill svg { color: var(--berry) !important; }

/* === 5. FEATURE ONLINE (teal blok s demo rámem) === */
.feature-online {
    background: var(--teal); color: #fff; border-radius: 32px;
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; overflow: hidden; position: relative;
}
.feature-online::before {
    content: ""; position: absolute; width: 300px; height: 300px; background: var(--yellow); border-radius: 50%;
    top: -100px; left: -80px; opacity: .18;
}
.fo-copy { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.fo-copy .eyebrow { color: var(--yellow); }
.fo-copy h2 { color: #fff; margin-bottom: 18px; }
.fo-copy h2 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.fo-copy p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: 32px; max-width: 480px; }
.fo-list { list-style: none; display: grid; gap: 0; margin-bottom: 36px; max-width: 480px; padding: 0 !important; }
.fo-list li { display: flex; align-items: start; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.2); margin: 0; }
.fo-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.fo-list .num {
    font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; color: var(--teal-deep); background: #fff;
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.fo-list strong { font-family: 'Manrope', sans-serif; font-size: 1.05rem; font-weight: 700; color: #fff; display: block; margin-bottom: 2px; }
.fo-list span { font-size: .88rem; color: rgba(255,255,255,.8); }
.fo-visual { background: rgba(255,255,255,.15); display: grid; place-items: center; padding: 60px; position: relative; z-index: 1; }
.demo-frame { background: #fff; padding: 16px 16px 56px; width: 100%; max-width: 380px; aspect-ratio: 1; border-radius: 20px; position: relative; }
.demo-canvas { aspect-ratio: 1; background: #fff; display: grid; place-items: center; border-radius: 12px; }
.demo-canvas svg { width: 75%; height: 75%; }
.demo-palette { position: absolute; bottom: 14px; left: 16px; right: 16px; display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.demo-palette .swatches { display: flex; gap: 8px; }
.demo-palette span { width: 28px; height: 28px; cursor: pointer; border-radius: 50%; }
.demo-palette .active { transform: scale(1.2); box-shadow: 0 0 0 3px var(--yellow); }
.demo-palette .tools { display: flex; gap: 4px; font-size: .72rem; color: var(--muted); font-weight: 600; }

/* === 6. EDITORIAL GRID (čerstvě z dílny) === */
.ed-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.ed-feature { background: var(--yellow); padding: 32px; border-radius: 24px; grid-row: span 2; display: flex; flex-direction: column; }
.ed-feature .thumb { aspect-ratio: 1; background: #fff; border-radius: 18px; display: grid; place-items: center; margin-bottom: 24px; }
.ed-feature .thumb svg { width: 80%; height: 80%; }
.ed-feature .tag {
    display: inline-block; font-size: .7rem; color: #fff; background: var(--berry); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; align-self: start;
}
.ed-feature h3 { font-size: 1.85rem; margin-bottom: 10px; line-height: 1.05; }
.ed-feature h3 em { color: var(--berry); font-style: normal; font-weight: 800; }
.ed-feature .desc { color: var(--ink); font-size: .95rem; margin-bottom: 20px; flex: 1; opacity: .85; }
.ed-feature .meta { display: flex; gap: 14px; font-size: .78rem; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; padding-top: 16px; font-weight: 600; border-top: 1px solid rgba(27,31,58,.15); }
.ed-card { background: var(--white); padding: 18px; border-radius: 18px; transition: transform .2s; cursor: pointer; display: flex; flex-direction: column; }
.ed-card:hover { transform: translateY(-4px); }
.ed-card .thumb { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; position: relative; overflow: hidden; }
.ed-card .thumb svg { width: 78%; height: 78%; }
.ed-card .badge {
    position: absolute; top: 10px; left: 10px; background: var(--lilac); color: #fff; font-size: .62rem; padding: 4px 8px;
    border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.ed-card .badge.premium { background: var(--yellow); color: var(--ink); }
.ed-card .badge.new { background: var(--berry); color: #fff; }
.ed-card h4 { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.ed-card .meta { font-size: .72rem; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ed-grid .ed-card:nth-child(2) .thumb { background: var(--berry-soft); }
.ed-grid .ed-card:nth-child(3) .thumb { background: var(--teal-soft); }
.ed-grid .ed-card:nth-child(4) .thumb { background: var(--lilac-soft); }
.ed-grid .ed-card:nth-child(5) .thumb { background: var(--sky-soft); }
.ed-grid .ed-card:nth-child(6) .thumb { background: var(--yellow-soft); }

/* === 7. RANKING (nejstahovanější) === */
.rank-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.rank-item {
    display: grid; grid-template-columns: 60px 70px 1fr auto; gap: 18px; align-items: center;
    padding: 22px 0; cursor: pointer; transition: padding .2s; border-bottom: 1px solid var(--border-soft);
}
.rank-item:hover { padding-left: 8px; }
.rank-item:hover .rk-arrow { transform: translateX(8px); color: var(--berry); }
.rk-num { font-family: 'Manrope', sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.rk-num.top { color: var(--berry); }
.rk-thumb { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; }
.rk-thumb svg { width: 70%; height: 70%; }
.rank-list .rank-item:nth-child(1) .rk-thumb { background: var(--berry); color: #fff; }
.rank-list .rank-item:nth-child(2) .rk-thumb { background: var(--yellow); }
.rank-list .rank-item:nth-child(3) .rk-thumb { background: var(--teal); color: #fff; }
.rank-list .rank-item:nth-child(4) .rk-thumb { background: var(--lilac); color: #fff; }
.rank-list .rank-item:nth-child(5) .rk-thumb { background: var(--blush); }
.rank-list .rank-item:nth-child(6) .rk-thumb { background: var(--sky); color: #fff; }
.rank-list .rank-item:nth-child(7) .rk-thumb { background: var(--yellow-soft); }
.rank-list .rank-item:nth-child(8) .rk-thumb { background: var(--teal-soft); }
.rk-body h4 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.rk-meta { font-size: .78rem; color: var(--muted); display: flex; gap: 14px; font-variant-numeric: tabular-nums; font-weight: 500; }
.rk-arrow { transition: all .25s; color: var(--ink-soft); font-size: 1.3rem; }

/* === 8. BUNDLES (mockup varianta — .bundle-cover/.bundle-body) === */
.bundle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bundle-cover { aspect-ratio: 4/5; display: grid; place-items: center; position: relative; padding: 32px; }
.bundle-grid .bundle-item:nth-child(1) .bundle-cover { background: var(--teal); }
.bundle-grid .bundle-item:nth-child(2) .bundle-cover { background: var(--lilac); }
.bundle-grid .bundle-item:nth-child(3) .bundle-cover { background: var(--berry); }
.bundle-grid .bundle-item:nth-child(4) .bundle-cover { background: var(--yellow); }
.bundle-cover .ico { font-size: 4.5rem; }
.bundle-cover .lbl {
    position: absolute; top: 18px; left: 18px; background: #fff; color: var(--ink);
    padding: 5px 12px; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px;
}
.bundle-item.premium .lbl { background: var(--yellow); color: var(--ink); }
.bundle-cover .pages {
    position: absolute; bottom: 18px; right: 18px; background: rgba(255,255,255,.3); color: #fff;
    padding: 5px 12px; font-size: .72rem; font-weight: 500; border-radius: 999px;
}
.bundle-grid .bundle-item:nth-child(4) .bundle-cover .pages { background: rgba(255,255,255,.5); color: var(--ink); }
.bundle-body { padding: 24px; display: flex; flex-direction: column; flex: 1; background: #fff; }
.bundle-body h4 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.bundle-body p { font-size: .88rem; color: var(--ink-soft); flex: 1; }

/* === 9. PREMIUM (berry blok + pricing box) === */
.premium-bg.ok-section {
    padding: 120px 0 !important;
    background: var(--berry) !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.premium-bg::before {
    content: ""; position: absolute; width: 340px; height: 340px; background: var(--yellow); border-radius: 50%;
    top: -120px; left: -100px; opacity: .32;
}
.premium-bg::after {
    content: ""; position: absolute; width: 260px; height: 260px; background: var(--lilac); border-radius: 50%;
    bottom: -100px; right: -80px; opacity: .4;
}
.premium-wrap { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: start; position: relative; z-index: 1; }
.premium-copy .eyebrow { color: var(--yellow); }
.premium-copy h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 20px; }
.premium-copy h2 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.premium-copy > p { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 520px; margin-bottom: 36px; }
.premium-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.premium-benefit { background: rgba(255,255,255,.18); padding: 24px; border-radius: 18px; backdrop-filter: blur(6px); }
.premium-benefit .num { font-family: 'Manrope', sans-serif; font-size: .85rem; color: var(--yellow); font-weight: 700; display: block; margin-bottom: 8px; }
.premium-benefit h4 { font-family: 'Manrope', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: #fff; }
.premium-benefit p { font-size: .88rem; color: rgba(255,255,255,.85); margin: 0; }

/* Pricing box na homepage — scoped přes .premium-bg (globální .pricing-block
   z monolitu zůstává pro Premium landing) */
.premium-bg .pricing-block { background: #fff; color: var(--ink); padding: 36px; border-radius: 24px; position: relative; max-width: none; margin: 0; border: none; }
.premium-bg .pricing-block::before {
    content: attr(data-stitek); top: -12px; right: 24px; left: auto; transform: none;
    padding: 6px 14px; font-size: .7rem; letter-spacing: .08em;
}
.premium-bg .pricing-tabs { margin-bottom: 28px; }
.premium-bg .pricing-tabs .save { margin-left: 4px; border-radius: 6px; }
.premium-bg .price-display { margin-bottom: 4px; justify-content: flex-start; }
.premium-bg .price-display strong { font-size: 4rem; }
.premium-bg .price-display span { font-size: .92rem; }
.premium-bg .price-note { font-size: .88rem; margin-bottom: 24px; text-align: left; }
.premium-bg .price-list { gap: 10px; margin-bottom: 28px; padding: 0; }
.premium-bg .price-list li { font-size: .94rem; gap: 12px; }
.premium-bg .price-list .check {
    background: none; width: auto; height: auto; border-radius: 0; display: inline;
    color: var(--teal); font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
}
.price-cta {
    width: 100%; background: var(--berry); color: #fff; border: none;
    padding: 16px; font-family: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer;
    transition: all .2s; border-radius: 999px;
}
.price-cta:hover { background: var(--berry-deep); }
.trust { margin-top: 14px; text-align: center; font-size: .78rem; color: var(--ink-soft); }

/* === 10. MAGAZINE === */
.mag-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; }
.mag-feature { grid-row: span 2; background: var(--blush); color: var(--ink); padding: 32px; border-radius: 24px; display: flex; flex-direction: column; }
.mag-feature .mag-img { aspect-ratio: 4/3; background: #fff; border-radius: 16px; margin-bottom: 22px; display: grid; place-items: center; font-size: 5rem; }
.mag-feature .cat {
    display: inline-block; font-size: .7rem; color: #fff; background: var(--berry); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; align-self: start;
}
.mag-feature h3 { font-size: 1.85rem; margin-bottom: 10px; line-height: 1.05; color: var(--ink); }
.mag-feature h3 em { color: var(--berry); font-style: normal; font-weight: 800; }
.mag-feature p { color: var(--ink); margin-bottom: 14px; flex: 1; opacity: .85; }
.mag-feature .meta { font-size: .78rem; color: var(--ink); font-weight: 500; opacity: .7; }
.mag-side { background: #fff; padding: 22px; border-radius: 18px; display: flex; flex-direction: column; transition: transform .2s; cursor: pointer; }
.mag-side:hover { transform: translateY(-4px); }
.mag-side .mag-img { aspect-ratio: 4/3; border-radius: 12px; margin-bottom: 14px; display: grid; place-items: center; font-size: 3rem; }
.mag-grid .mag-side:nth-child(2) .mag-img { background: var(--teal-soft); }
.mag-grid .mag-side:nth-child(3) .mag-img { background: var(--lilac-soft); }
.mag-grid .mag-side:nth-child(4) .mag-img { background: var(--yellow-soft); }
.mag-grid .mag-side:nth-child(5) .mag-img { background: var(--sky-soft); }
.mag-side .cat { display: inline-block; font-size: .7rem; color: var(--berry); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; align-self: start; }
.mag-side h3 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; margin-bottom: 8px; flex: 1; letter-spacing: -.02em; }
.mag-side .meta { font-size: .72rem; color: var(--muted); font-weight: 500; }

/* === 11. UGC MOZAIKA === */
.ugc-mosaic { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 120px; gap: 10px; }
.ugc-cell {
    border-radius: 18px; display: grid; place-items: center; font-size: 2.4rem; position: relative; overflow: hidden; cursor: pointer;
    transition: transform .2s;
}
.ugc-cell:hover { transform: translateY(-3px); z-index: 2; }
.ugc-cell .overlay {
    position: absolute; inset: auto 0 0 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(27,31,58,.7));
    color: #fff; font-size: .72rem; display: flex; justify-content: space-between; font-weight: 500;
}
.ugc-cell.tall { grid-row: span 2; }
.ugc-cell.wide { grid-column: span 2; }
.ugc-cell.big { grid-column: span 2; grid-row: span 2; font-size: 4.5rem; }
.ugc-cell.c1 { background: var(--berry-soft); }
.ugc-cell.c2 { background: var(--teal-soft); }
.ugc-cell.c3 { background: var(--yellow-soft); }
.ugc-cell.c4 { background: var(--lilac-soft); }
.ugc-cell.c5 { background: var(--sky-soft); }
.ugc-upload {
    background: var(--berry); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 14px; border-radius: 18px; cursor: pointer;
}
.ugc-upload strong { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; color: var(--yellow); }
.ugc-upload span { font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.85); font-weight: 500; text-transform: uppercase; }

/* === 12. NEWSLETTER (teal blok, vlastní markup — ne Divi modul) === */
.newsletter {
    background: var(--teal); color: #fff; padding: 80px 56px; text-align: center; border-radius: 32px; position: relative; overflow: hidden;
}
.newsletter::before {
    content: ""; position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%;
    top: -100px; right: -80px; opacity: .4;
}
.newsletter::after {
    content: ""; position: absolute; width: 220px; height: 220px; background: var(--berry); border-radius: 50%;
    bottom: -80px; left: -60px; opacity: .4;
}
.newsletter .inner { position: relative; max-width: 580px; margin: 0 auto; z-index: 1; }
.newsletter .eyebrow { color: var(--yellow); justify-content: center; display: inline-flex; margin-bottom: 18px; }
.newsletter h2 { color: #fff; margin-bottom: 14px; font-size: clamp(2rem, 3.8vw, 2.8rem); }
.newsletter h2 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.newsletter p { color: rgba(255,255,255,.9); margin-bottom: 32px; font-size: 1.05rem; }
.nl-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
/* !important přebíjí globální input styly z 07-forms.css (09 se načítá později) */
.nl-form input {
    flex: 1; border: none !important; padding: 18px 24px !important; font-family: inherit;
    font-size: 1rem !important; color: var(--ink) !important; outline: none !important;
    background: #fff !important; border-radius: 999px !important;
}
.nl-form input::placeholder { color: var(--muted); }
.nl-form button {
    background: var(--berry); color: #fff; border: none; padding: 0 30px; font-family: inherit;
    font-weight: 600; cursor: pointer; border-radius: 999px; transition: background .2s;
}
.nl-form button:hover { background: var(--berry-deep); }
/* Souhlas pod formulářem. Užší než blok, ať se věta neroztáhne přes celou šířku. */
.newsletter .small {
    margin: 18px auto 0; max-width: 440px; font-size: .78rem; line-height: 1.55;
    color: rgba(255,255,255,.75); font-weight: 500;
}
.newsletter .small a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.newsletter .small a:hover { color: var(--yellow); }

/* Honeypot: mimo obrazovku, ne display:none — to si část robotů hlídá. */
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hláška po odeslání. Vypisuje ji newsletter.js nad souhlas. */
.newsletter .nl-msg {
    margin: 14px auto 0; max-width: 440px; font-size: .9rem; line-height: 1.5;
    font-weight: 600; color: #fff;
}
.newsletter .nl-msg:empty { display: none; }
.newsletter .nl-msg.is-err { color: var(--yellow); }
.nl-form button[disabled] { opacity: .65; cursor: default; }


/*============================================================================
   VÝPIS KATEGORIÍ (category-listing-mockup-v1) — postup: exports/category-listing.html
============================================================================*/

/* === HERO MINI (cream) === */
.cat-hero,
.cat-hero.et_pb_section {
    padding: 72px 0 56px !important;
    background: var(--cream);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.cat-hero-shape-1 { position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; top: -80px; left: -100px; opacity: .55; z-index: 0; }
.cat-hero-shape-2 { position: absolute; width: 180px; height: 180px; background: var(--teal); bottom: -80px; right: -60px; transform: rotate(20deg); border-radius: 50px; opacity: .55; z-index: 0; }
.cat-hero-shape-3 { position: absolute; width: 60px; height: 60px; background: var(--lilac); border-radius: 50%; top: 40%; right: 14%; opacity: .7; z-index: 0; }
.cat-hero-shape-4 { position: absolute; width: 48px; height: 48px; background: var(--berry); border-radius: 50%; bottom: 18%; left: 20%; opacity: .6; z-index: 0; }
.cat-hero-inner { position: relative; z-index: 1; max-width: 780px; }
.cat-hero h1 { margin-bottom: 18px; }
.cat-hero .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 620px; margin-bottom: 28px; }
.cat-hero-search-wrap { position: relative; max-width: 520px; margin-bottom: 32px; }
.cat-hero .cat-hero-search,
input.cat-hero-search {
    width: 100%;
    border: 1px solid var(--border-soft) !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 20px 150px 20px 28px !important; /* sjednoceno s homepage hero-search */
    font-family: inherit !important;
    font-size: 1.05rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: all .2s;
}
.cat-hero-search::placeholder { color: var(--muted); }
.cat-hero .cat-hero-search:focus,
input.cat-hero-search:focus { outline: none !important; border-color: var(--berry) !important; box-shadow: 0 0 0 4px var(--berry-soft) !important; }
.cat-hero-search-btn {
    position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 24px; border-radius: 999px;
    background: var(--berry); color: #fff; border: 1px solid var(--berry); font-family: inherit; font-weight: 600;
    cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.cat-hero-search-btn:hover { background: var(--berry-deep); border-color: var(--berry-deep); }
.cat-hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; justify-content: start; }
.cat-hero-stats div { padding: 0 28px; border-left: 1px solid var(--line); }
.cat-hero-stats div:first-child { border-left: none; padding-left: 0; }
.cat-hero-stats strong { font-family: 'Manrope', sans-serif; font-size: 1.9rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.cat-hero-stats span { font-size: .76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; display: block; font-weight: 500; }
.cat-hero-stats .berry { color: var(--berry); }

/* === Wrap sekce pro filter bar (Code modul s .filter-bar) === */
.filter-section.et_pb_section { padding: 0 !important; }

/* === SKUPINY KATEGORIÍ === */
.cat-group { margin-bottom: 80px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-group-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 32px; }
.cat-group-head h2 .teal { color: var(--teal-deep); }
.cat-group-head .sub { color: var(--ink-soft); font-size: .95rem; margin-top: 6px; max-width: 520px; }
.cat-group-count {
    font-size: .85rem; color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 6px; background: var(--cream);
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-soft);
}
.cat-group-count strong { color: var(--ink); font-weight: 700; }

/* Cat-tile barevné varianty pro mockup děti (.ill) — c-* třídy */
.cat-tile.c-berry .ill { background: var(--berry-soft); } .cat-tile.c-berry .ill svg { color: var(--berry); }
.cat-tile.c-teal .ill { background: var(--teal-soft); } .cat-tile.c-teal .ill svg { color: var(--teal-deep); }
.cat-tile.c-yellow .ill { background: var(--yellow-soft); } .cat-tile.c-yellow .ill svg { color: #A57100; }
.cat-tile.c-lilac .ill { background: var(--lilac-soft); } .cat-tile.c-lilac .ill svg { color: var(--lilac); }
.cat-tile.c-sky .ill { background: var(--sky-soft); } .cat-tile.c-sky .ill svg { color: #1B6FB8; }
.cat-tile.c-blush .ill { background: var(--blush-soft); } .cat-tile.c-blush .ill svg { color: #B85555; }
/* hover varianta i mimo .cat-grid (skupiny používají c-* třídy) */
.cat-tile:hover .ill { background: #fff !important; }
.cat-tile:hover .ill svg { color: var(--berry) !important; }
.cat-tile:hover .name, .cat-tile:hover .meta { color: #fff; }

/* === PREMIUM CTA mini === */
.premium-cta {
    background: var(--berry); color: #fff; border-radius: 32px; padding: 48px 56px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; position: relative; overflow: hidden;
}
.premium-cta::before { content: ""; position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; left: -80px; opacity: .28; z-index: 0; }
.premium-cta::after { content: ""; position: absolute; width: 200px; height: 200px; background: var(--lilac); border-radius: 50%; bottom: -80px; right: -50px; opacity: .35; z-index: 0; }
.premium-cta > div { position: relative; z-index: 1; }
.premium-cta .eyebrow { color: var(--yellow); margin-bottom: 12px; }
.premium-cta h3 { color: #fff; font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.02em; }
.premium-cta h3 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.premium-cta p { color: rgba(255,255,255,.9); font-size: 1rem; max-width: 520px; margin: 0; }
.premium-cta .cta-actions { display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }

/* === REQUEST CTA (lilac box) === */
.request-cta { background: var(--lilac-soft); border-radius: 32px; padding: 48px 56px; text-align: center; }
.request-cta .icon {
    width: 64px; height: 64px; background: var(--lilac); border-radius: 50%;
    display: grid; place-items: center; margin: 0 auto 18px; color: #fff; font-size: 1.8rem; font-weight: 800;
}
.request-cta h3 { font-size: 1.7rem; margin-bottom: 10px; color: var(--ink); }
.request-cta h3 em { color: var(--lilac); font-style: normal; font-weight: 800; }
.request-cta p { max-width: 480px; margin: 0 auto 22px; color: var(--ink-soft); }
.request-cta .pill-btn { background: var(--lilac) !important; border-color: var(--lilac) !important; }
.request-cta .pill-btn:hover { background: #7A5CD9 !important; border-color: #7A5CD9 !important; }


/*============================================================================
   ARCHIV PŘÍSPĚVKŮ — rubriky/štítky (category-detail-mockup-v1) — archive.php
============================================================================*/

/* === DETAIL HERO (cream s tvary) === */
.detail-hero {
    background: var(--cream); color: var(--ink); padding: 56px 0 72px;
    position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
}
.detail-hero .shape-1 { position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; right: -80px; opacity: .5; z-index: 0; }
.detail-hero .shape-2 { position: absolute; width: 200px; height: 200px; background: var(--teal); bottom: -90px; left: -70px; transform: rotate(20deg); border-radius: 50px; opacity: .45; z-index: 0; }
.detail-hero .shape-3 { position: absolute; width: 70px; height: 70px; background: var(--lilac); border-radius: 50%; top: 42%; right: 22%; opacity: .6; z-index: 0; }
.detail-hero .shape-4 { position: absolute; width: 54px; height: 54px; background: var(--berry); border-radius: 50%; bottom: 16%; left: 36%; opacity: .55; z-index: 0; }
.detail-hero .container { position: relative; z-index: 1; }
.detail-hero .eyebrow { color: var(--berry); margin-bottom: 14px; }
.detail-hero h1 { color: var(--ink); margin-bottom: 20px; max-width: 820px; }
.detail-hero .lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 660px; margin-bottom: 32px; line-height: 1.55; }
.detail-hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.detail-hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 0; justify-content: start; }
.detail-hero-stats div { padding: 0 32px; border-left: 1px solid var(--line); }
.detail-hero-stats div:first-child { border-left: none; padding-left: 0; }
.detail-hero-stats strong { font-family: 'Manrope', sans-serif; font-size: 2rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.detail-hero-stats span { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; display: block; font-weight: 500; }
.detail-hero-stats .berry { color: var(--berry); }

/* === RESULTS HEAD === */
.results-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; flex-wrap: wrap; gap: 14px; }
.results-head h2 { font-size: 1.3rem; font-weight: 700; }
.results-head .count { color: var(--ink-soft); font-size: .92rem; font-variant-numeric: tabular-nums; }
.results-head .count strong { color: var(--ink); font-weight: 700; }

/* === COLORING GRID (mockup varianta — .coloring-thumb/.coloring-info) === */
.coloring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.coloring-grid .coloring-card { position: relative; cursor: pointer; transition: transform .2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.coloring-grid .coloring-card:hover { transform: translateY(-4px); }
.coloring-thumb { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; position: relative; overflow: hidden; }
.coloring-thumb svg.art { width: 78%; height: 78%; }
.coloring-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coloring-thumb .badge {
    position: absolute; top: 12px; left: 12px; background: var(--lilac); color: #fff;
    font-size: .62rem; padding: 5px 10px; border-radius: 999px; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700; z-index: 2;
}
.coloring-thumb .badge.new { background: var(--berry); color: #fff; }
.coloring-thumb .badge.premium { background: var(--yellow); color: var(--ink); }
.coloring-thumb .badge.popular { background: var(--teal); color: #fff; }
.coloring-thumb .fav-btn {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: rgba(255,255,255,.92);
    border: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--ink-soft); z-index: 2; transition: all .15s;
}
.coloring-thumb .fav-btn:hover { color: var(--berry); transform: scale(1.1); }
.coloring-thumb .fav-btn.active { color: var(--berry); }
.card-overlay {
    position: absolute; inset: 0; background: rgba(27,31,58,.55);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity .2s; z-index: 3;
}
.coloring-card:hover .card-overlay { opacity: 1; }
.card-overlay .action-btn {
    background: #fff; color: var(--ink); border: none; font-family: inherit;
    font-size: .82rem; font-weight: 600; padding: 10px 16px; border-radius: 999px;
    cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
}
.card-overlay .action-btn.primary { background: var(--berry); color: #fff; }
.card-overlay .action-btn:hover { transform: translateY(-2px); }
.card-overlay .action-btn.icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.coloring-info { padding: 14px 6px 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.coloring-info h4 { font-family: 'Manrope', sans-serif; font-size: .98rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; }
.coloring-info .card-meta { font-size: .74rem; color: var(--muted); font-weight: 500; display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.coloring-info .card-meta span:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--line); }
.coloring-info .card-age { font-size: .7rem; color: var(--ink); background: var(--cream); padding: 3px 8px; border-radius: 999px; font-weight: 600; border: 1px solid var(--border-soft); white-space: nowrap; flex-shrink: 0; }
.coloring-grid .coloring-card:nth-child(8n+1) .coloring-thumb { background: var(--berry-soft); }
.coloring-grid .coloring-card:nth-child(8n+2) .coloring-thumb { background: var(--teal-soft); }
.coloring-grid .coloring-card:nth-child(8n+3) .coloring-thumb { background: var(--yellow-soft); }
.coloring-grid .coloring-card:nth-child(8n+4) .coloring-thumb { background: var(--lilac-soft); }
.coloring-grid .coloring-card:nth-child(8n+5) .coloring-thumb { background: var(--sky-soft); }
.coloring-grid .coloring-card:nth-child(8n+6) .coloring-thumb { background: var(--blush-soft); }
.coloring-grid .coloring-card:nth-child(8n+7) .coloring-thumb { background: var(--cream-2); }
.coloring-grid .coloring-card:nth-child(8n+8) .coloring-thumb { background: #E8F0FB; }

/* === SEO BLOK (archiv varianta — .seo-body + číslované tipy) === */
.seo-block .eyebrow { margin-bottom: 14px; }
.seo-block h2 { margin-bottom: 18px; max-width: 680px; }
.seo-block .seo-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; }
.seo-block .seo-body p { font-size: 1rem; color: var(--ink); line-height: 1.65; margin-bottom: 14px; }
.seo-block .seo-body p:last-child { margin-bottom: 0; }
.seo-block h3 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--ink); }
.seo-block h3:first-of-type { margin-top: 0; }
.seo-tips h3 { margin-top: 0; margin-bottom: 18px; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.seo-tips h3::before { content: ""; width: 8px; height: 8px; background: var(--berry); border-radius: 50%; }
.seo-tips ul { list-style: none; display: grid; gap: 12px; padding: 0; }
.seo-tips li { display: flex; gap: 12px; align-items: start; font-size: .92rem; color: var(--ink); line-height: 1.5; margin: 0; }
.seo-tips li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--berry-soft); color: var(--berry); font-weight: 800; font-size: .7rem; display: grid; place-items: center; margin-top: 1px; }
.seo-tips li:nth-child(1)::before { content: "1"; }
.seo-tips li:nth-child(2)::before { content: "2"; }
.seo-tips li:nth-child(3)::before { content: "3"; }
.seo-tips li:nth-child(4)::before { content: "4"; }
.seo-tips li:nth-child(5)::before { content: "5"; }

/* === SOUVISEJÍCÍ KATEGORIE + MAGAZÍN TIPY === */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mag-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mag-tip-card { background: #fff; padding: 22px; border-radius: 18px; border: 1px solid var(--border-soft); transition: transform .2s; cursor: pointer; display: flex; flex-direction: column; }
.mag-tip-card:hover { transform: translateY(-4px); border-color: var(--berry); }
.mag-tip-card .mag-img { aspect-ratio: 16/10; border-radius: 12px; margin-bottom: 18px; display: grid; place-items: center; font-size: 3rem; }
.mag-tips-grid .mag-tip-card:nth-child(1) .mag-img { background: var(--berry-soft); }
.mag-tips-grid .mag-tip-card:nth-child(2) .mag-img { background: var(--teal-soft); }
.mag-tips-grid .mag-tip-card:nth-child(3) .mag-img { background: var(--yellow-soft); }
.mag-tip-card .cat { display: inline-block; font-size: .68rem; color: var(--berry); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; align-self: start; }
.mag-tip-card h3 { font-family: 'Manrope', sans-serif; font-size: 1.05rem; margin-bottom: 8px; flex: 1; letter-spacing: -.02em; }
.mag-tip-card .meta { font-size: .72rem; color: var(--muted); font-weight: 500; display: flex; gap: 10px; }


/*============================================================================
   SINGLE OMALOVÁNKA (coloring-detail-mockup-v1) — single.php
============================================================================*/

/* === DETAIL NAV (breadcrumbs + prev/next) === */
.detail-nav { padding: 18px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.detail-nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

/* === DETAIL MAIN — 2 sloupce, pravý panel sticky === */
.detail-main { padding: 48px 0 72px; }
.detail-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.image-frame {
    background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 32px;
    aspect-ratio: 1/1.15; display: grid; place-items: center; position: relative; overflow: hidden;
}
.image-frame::before { content: ""; position: absolute; width: 220px; height: 220px; background: var(--berry-soft); border-radius: 50%; top: -80px; right: -60px; opacity: .4; z-index: 0; }
.image-frame::after { content: ""; position: absolute; width: 160px; height: 160px; background: var(--yellow-soft); border-radius: 50%; bottom: -60px; left: -50px; opacity: .5; z-index: 0; }
.image-frame .art { width: 88%; height: 88%; position: relative; z-index: 1; }
.image-frame img.art { object-fit: contain; }
.image-frame .top-badges { position: absolute; top: 18px; left: 18px; display: flex; gap: 6px; z-index: 2; }
.image-frame .badge { background: var(--berry); color: #fff; font-size: .62rem; padding: 5px 10px; border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.image-frame .badge.premium { background: var(--yellow); color: var(--ink); }
.image-frame .badge.new { background: var(--berry); color: #fff; }
.image-frame .zoom-btn {
    position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; background: #fff;
    border: 1px solid var(--border-soft); border-radius: 50%; display: grid; place-items: center;
    cursor: pointer; color: var(--ink); transition: all .15s; z-index: 2;
}
.image-frame .zoom-btn:hover { background: var(--berry); border-color: var(--berry); color: #fff; }
.image-meta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-soft); }
.image-meta strong { color: var(--ink); font-weight: 600; }
.image-meta .sep { color: var(--line); }

.detail-actions { position: sticky; top: 90px; }
.action-panel { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 32px; }
.action-panel .eyebrow { margin-bottom: 10px; }
.action-panel .eyebrow a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.action-panel h1 { margin-bottom: 14px; color: var(--ink); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.action-panel h1 .num { color: var(--berry); font-weight: 800; font-variant-numeric: tabular-nums; }
.action-panel .desc { font-size: .98rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
.action-panel .desc p { margin: 0 0 10px; padding: 0; }
.action-panel .desc p:last-child { margin-bottom: 0; }
.action-stats { display: flex; gap: 0; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.action-stats div { padding: 0 16px; border-left: 1px solid var(--line); flex: 1; }
.action-stats div:first-child { border-left: none; padding-left: 0; }
.action-stats strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.action-stats span { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; margin-top: 5px; display: block; }
.action-stats .star { color: var(--berry); }
.action-ctas { display: grid; gap: 8px; margin-bottom: 28px; }

.print-opts { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); margin-bottom: 24px; }
.print-opts-head { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 6px; }
.opt-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.opt-label { font-size: .85rem; font-weight: 600; color: var(--ink); min-width: 90px; }
.opt-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.secondary-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
.sec-btn {
    padding: 8px 14px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 999px;
    font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.sec-btn:hover { background: var(--berry); border-color: var(--berry); color: #fff; }
.sec-btn.active { background: var(--berry-soft); color: var(--berry); border-color: var(--berry-soft); }
.sec-btn.active:hover { background: var(--berry); color: #fff; }
.sec-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.trust-line { margin-top: 20px; font-size: .78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; justify-content: center; }
.trust-line strong { color: var(--ink); font-weight: 600; }

/* === TAGS ROW === */
.tags-section { background: var(--cream); padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tags-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tags-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
/* POZOR: nikdy ne bare `.tag` — WP dává class `tag` na <body> archivu štítku
   (skill quirk #25: component class = body class) */
.tags-row .tag { padding: 6px 14px; background: #fff; border: 1px solid var(--border-soft); border-radius: 999px; font-size: .82rem; color: var(--ink-soft); font-weight: 500; transition: all .15s; }
.tags-row .tag:hover { background: var(--berry); border-color: var(--berry); color: #fff; }

/* === REVIEWS (single varianta — reviews-head, bars) === */
.reviews-section { padding: 80px 0; }
.reviews-head { display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.rating-display .big-num { font-family: 'Manrope', sans-serif; font-size: 3.5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.04em; }
.rating-display .rd-meta { display: flex; flex-direction: column; gap: 4px; }
.rating-display .stars { font-size: 1.1rem; color: var(--berry); letter-spacing: 2px; line-height: 1; }
.rating-display .count { font-size: .85rem; color: var(--ink-soft); }
.rating-bars { display: grid; gap: 6px; font-size: .78rem; }
.rating-bar .bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rating-bar .bar-fill { height: 100%; background: var(--berry); border-radius: 999px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px; }
.review-author { font-family: 'Manrope', sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink); }
.review-meta { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.review-stars { color: var(--berry); letter-spacing: 1px; font-size: .85rem; }
.review-body { font-size: .92rem; color: var(--ink); line-height: 1.6; }

/* === RELATED COLORING (cream sekce s gridem karet) === */
.related-coloring { padding: 80px 0; background: var(--cream); }
.related-coloring .sec-head .link { background: #fff; }
.related-coloring .related-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* pastel rotace i pro .related-grid karty */
.related-grid .coloring-card { position: relative; cursor: pointer; transition: transform .2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.related-grid .coloring-card:hover { transform: translateY(-4px); }
.related-grid .coloring-card:nth-child(8n+1) .coloring-thumb { background: var(--berry-soft); }
.related-grid .coloring-card:nth-child(8n+2) .coloring-thumb { background: var(--teal-soft); }
.related-grid .coloring-card:nth-child(8n+3) .coloring-thumb { background: var(--yellow-soft); }
.related-grid .coloring-card:nth-child(8n+4) .coloring-thumb { background: var(--lilac-soft); }
.related-grid .coloring-card:nth-child(8n+5) .coloring-thumb { background: var(--sky-soft); }
.related-grid .coloring-card:nth-child(8n+6) .coloring-thumb { background: var(--blush-soft); }

/* === BACK TO CATEGORY CTA === */
.back-cta { background: var(--berry); color: #fff; border-radius: 32px; padding: 48px 56px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; position: relative; overflow: hidden; }
.back-cta::before { content: ""; position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; left: -80px; opacity: .28; z-index: 0; }
.back-cta::after { content: ""; position: absolute; width: 200px; height: 200px; background: var(--lilac); border-radius: 50%; bottom: -80px; right: -50px; opacity: .35; z-index: 0; }
.back-cta > div { position: relative; z-index: 1; }
.back-cta .eyebrow { color: var(--yellow); margin-bottom: 10px; }
.back-cta h3 { color: #fff; font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.02em; }
.back-cta h3 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.back-cta p { color: rgba(255,255,255,.9); font-size: .98rem; margin: 0; }
.back-cta > a { position: relative; z-index: 1; }

/* === Sekční obaly pro PHP šablony (.ok-archive / .ok-single) === */
.ok-archive section, .ok-single section { position: relative; }
/* Spodní padding sekce s mřížkou nese předěl na následující sekci. Bez něj
   začínalo krémové pozadí „Další kategorie" přesně na spodní hraně
   stránkování a tlačítka se o ten pruh opírala. Sekce bez vlastního pozadí
   si po mřížce vlastní horní odsazení sníží, ať je rozestup pořád 80 px. */
.ok-archive .sec-grid { padding: 48px 0 72px; }
.ok-archive .sec-grid + .sec-seo { padding-top: 8px; }
.ok-archive .sec-seo { padding: 80px 0 64px; }
.ok-archive .sec-related { padding: 80px 0; background: var(--cream); }
.ok-archive .sec-newsletter { padding: 64px 0 96px; }
.ok-single .sec-back { padding: 32px 0 64px; }
.ok-single .sec-newsletter { padding: 0 0 96px; }

/* === Výpis kategorií jako PHP šablona (page-kategorie.php) — sekční paddingy === */
.ok-cats .sec-groups { padding: 72px 0 96px; }
.ok-cats .sec-premium { padding: 64px 0 32px; }
.ok-cats .sec-request { padding: 32px 0 48px; }
.ok-cats .sec-newsletter { padding: 16px 0 96px; }
@media (max-width: 780px) {
    .ok-cats .sec-groups { padding: 48px 0 64px; }
    .ok-cats .sec-premium { padding: 48px 0 24px; }
    .ok-cats .sec-newsletter { padding: 8px 0 64px; }
}

/* Skupiny na /kategorie/ — každá vlastní sekce, střídání bílá/krémová
   (vizuální rytmus místo chybějícího filter baru) */
.ok-cats .sec-group { padding: 72px 0; }
.ok-cats .sec-group--cream { background: var(--cream); }
.ok-cats .sec-group .cat-group { margin-bottom: 0; }
@media (max-width: 780px) {
    .ok-cats .sec-group { padding: 48px 0; }
}

/* Detail nav — breadcrumbs na vertikální střed (globální .breadcrumbs má
   margin-bottom 22px pro hero kontext) */
.detail-nav .breadcrumbs { margin-bottom: 0; }

/* Grid blowout fix — děti gridu nesmí vynutit šířku přes min-content
   (jinak action-stats/nowrap obsah roztahuje stránku doprava na mobilu) */
.detail-grid > * { min-width: 0; }


/*============================================================================
   VÝSLEDKY HLEDÁNÍ (search-results-mockup-v1) — search.php
============================================================================*/
.search-hero { padding: 56px 0; background: var(--cream); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.search-hero .shape-1 { position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; top: -80px; right: -70px; opacity: .45; z-index: 0; }
.search-hero .shape-2 { position: absolute; width: 140px; height: 140px; background: var(--teal); bottom: -50px; left: -30px; border-radius: 50%; opacity: .4; z-index: 0; }
.search-hero .container { position: relative; z-index: 1; }
.search-hero .search-inner { max-width: 880px; }
.search-hero .breadcrumbs { margin-bottom: 18px; }
.search-hero h1 { margin-bottom: 14px; }
.search-hero .sub { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 28px; }
.search-hero .sub strong { color: var(--ink); font-weight: 700; }
.search-bar-wrap { position: relative; max-width: 720px; }
.search-hero .search-bar-wrap input.search-bar {
    width: 100%;
    border: 1px solid var(--border-soft) !important;
    background-color: #fff !important;
    border-radius: 999px !important;
    padding: 20px 168px 20px 56px !important;
    font-family: inherit !important;
    font-size: 1.08rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: all .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3B5' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 22px center !important;
}
.search-hero .search-bar-wrap input.search-bar:focus { outline: none !important; border-color: var(--berry) !important; box-shadow: 0 0 0 4px var(--berry-soft) !important; }
.search-clear {
    position: absolute; right: 130px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer; color: var(--ink-soft);
    font-size: 1.2rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; text-decoration: none;
}
.search-clear:hover { background: var(--cream); color: var(--ink); }
.search-bar-btn {
    position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 26px; border-radius: 999px;
    background: var(--berry); color: #fff; border: 1px solid var(--berry); font-family: inherit;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.search-bar-btn:hover { background: var(--berry-deep); border-color: var(--berry-deep); }

/* Typové chips + řazení */
.type-tabs { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0; }
.type-tabs-inner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.type-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.type-chip {
    height: 38px; padding: 0 16px; background: var(--cream); border: 1px solid var(--border-soft);
    border-radius: 999px; font-family: inherit; font-size: .86rem; font-weight: 500; color: var(--ink-soft);
    cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.type-chip:hover { background: #fff; border-color: var(--berry); color: var(--ink); }
.type-chip.active { background: var(--berry); border-color: var(--berry); color: #fff; }
.type-chip .num { font-size: .7rem; background: rgba(27,31,58,.08); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.type-chip.active .num { background: rgba(255,255,255,.25); color: #fff; }
.sort-block { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-soft); }

/* Sekce výsledků */
.result-section { padding: 48px 0; }
.result-section--cream { background: var(--cream); }
.result-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 14px; flex-wrap: wrap; }
.result-section-head h2 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; }
.result-section-head h2 .count { font-family: 'Manrope', sans-serif; font-size: .85rem; color: var(--ink-soft); background: var(--cream); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-soft); font-weight: 600; }
.result-section--cream .result-section-head h2 .count { background: #fff; }
.result-section-head .see-all { font-size: .88rem; color: var(--berry); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Strip kategorií (search 4 sloupce / 404 6 sloupců) */
.cat-strip { display: grid; gap: 14px; }
.ok-search-page .cat-strip { grid-template-columns: repeat(4, 1fr); }
.ok-404 .cat-strip { grid-template-columns: repeat(6, 1fr); max-width: 1080px; margin: 0 auto; }
.ok-404 .cat-strip .cat-tile { padding: 20px 14px; border-radius: 20px; }
.ok-404 .cat-strip .ill { width: 60px; height: 60px; margin: 0 auto 12px; }

/* Zvýraznění shody */
.result-section mark, .cat-strip mark { background: var(--yellow-soft); color: var(--ink); padding: 0 3px; font-weight: 600; }

/* Prázdný stav */
.no-results-box { background: var(--cream); border: 1px solid var(--border-soft); border-radius: 32px; padding: 56px 32px; text-align: center; }
.no-results-box h2 { margin-bottom: 10px; }
.no-results-box p { max-width: 480px; margin: 0 auto 8px; color: var(--ink-soft); }

/*============================================================================
   404 (404-mockup-v1) — 404.php
============================================================================*/
.err-main { padding: 64px 0 96px; position: relative; overflow: hidden; }
.err-main .shape-1 { position: absolute; width: 320px; height: 320px; background: var(--yellow); border-radius: 50%; top: -100px; right: -120px; opacity: .4; z-index: 0; }
.err-main .shape-2 { position: absolute; width: 240px; height: 240px; background: var(--teal); bottom: -100px; left: -80px; border-radius: 50%; opacity: .35; z-index: 0; }
.err-main .shape-3 { position: absolute; width: 90px; height: 90px; background: var(--lilac); border-radius: 50%; top: 30%; left: 8%; opacity: .45; z-index: 0; }
.err-main .shape-4 { position: absolute; width: 60px; height: 60px; background: var(--berry); border-radius: 50%; bottom: 18%; right: 14%; opacity: .5; z-index: 0; }
.err-main .container { position: relative; z-index: 1; }
.err-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.err-visual { aspect-ratio: 1; background: #fff; border-radius: 32px; border: 1px solid var(--border-soft); position: relative; overflow: hidden; display: grid; place-items: center; }
.err-visual::before { content: ""; position: absolute; width: 280px; height: 280px; background: var(--berry-soft); border-radius: 50%; top: -80px; left: -80px; opacity: .5; }
.err-visual::after { content: ""; position: absolute; width: 200px; height: 200px; background: var(--yellow-soft); border-radius: 50%; bottom: -60px; right: -60px; opacity: .6; }
.err-visual .big-404 { font-family: 'Manrope', sans-serif; font-size: 14rem; font-weight: 800; color: var(--berry); line-height: 1; letter-spacing: -.06em; position: relative; z-index: 1; text-shadow: 6px 6px 0 var(--yellow); }
.err-visual .err-emoji { position: absolute; font-size: 5rem; z-index: 2; }
.err-visual .err-emoji.e1 { top: 18%; right: 14%; }
.err-visual .err-emoji.e2 { bottom: 14%; left: 12%; }
.err-content h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 18px; }
.err-content h1 em { color: var(--berry); font-style: normal; font-weight: 800; }
.err-content p { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 32px; max-width: 480px; }
.err-content .ok-search { margin-bottom: 36px; }
.err-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.top-cats { padding: 0 0 96px; }
.top-cats h2 { font-size: 1.4rem; margin-bottom: 14px; text-align: center; }
.top-cats .sub { color: var(--ink-soft); text-align: center; margin-bottom: 32px; font-size: .95rem; }

/* Hledání — populární kategorie potřebují odstup od cream hero
   (na 404 odstup dělá err-main, na search ne) */
.ok-search-page .top-cats { padding-top: 72px; }

/* Hledání — select řazení drží výšku type-chips i na mobilu
   (vyšší specificita než mobilní 34px pravidlo filter baru) */
.type-tabs .filter-sort .select select {
    height: 38px !important;
    line-height: 36px !important;
}

/* 404 — odstup nadpisu „Nebo zkus…" od 404 bloku */
.ok-404 .top-cats { padding-top: 48px; }


/*============================================================================
   MAGAZÍN — archiv + taxonomie (magazine-listing-mockup-v1)
   Šablony: archive-magazin.php, taxonomy-magazin_*.php (sdílený part)
============================================================================*/
.mag-hero { padding: 64px 0 48px; background: var(--cream); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.mag-hero .shape-1 { position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; right: -80px; opacity: .5; z-index: 0; }
.mag-hero .shape-2 { position: absolute; width: 180px; height: 180px; background: var(--teal); bottom: -80px; left: -60px; border-radius: 50px; transform: rotate(18deg); opacity: .4; z-index: 0; }
.mag-hero .shape-3 { position: absolute; width: 70px; height: 70px; background: var(--lilac); border-radius: 50%; top: 50%; right: 18%; opacity: .6; z-index: 0; }
.mag-hero .shape-4 { position: absolute; width: 50px; height: 50px; background: var(--berry); border-radius: 50%; bottom: 24%; left: 38%; opacity: .55; z-index: 0; }
.mag-hero .container { position: relative; z-index: 1; }
.mag-hero-inner { max-width: 780px; }
.mag-hero h1 { margin-bottom: 18px; color: var(--ink); }
.mag-hero .lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 620px; margin-bottom: 0; line-height: 1.6; }

/* Vyhledávání v article filter baru */
.filter-search { display: flex; align-items: center; gap: 8px; }
.filter-search input.mag-search-input {
    background-color: var(--cream) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 999px !important;
    padding: 8px 16px 8px 36px !important;
    font-family: inherit !important;
    font-size: .86rem !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
    width: 240px;
    transition: all .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3B5' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}
.filter-search input.mag-search-input:focus { background-color: #fff !important; border-color: var(--berry) !important; box-shadow: 0 0 0 4px var(--berry-soft) !important; }

/* Featured článek (blush karta) */
.featured-section { padding: 64px 0; }
.featured-card {
    background: var(--blush-soft); border-radius: 32px; overflow: hidden;
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; cursor: pointer;
    transition: transform .25s; text-decoration: none; color: inherit;
}
.featured-card:hover { transform: translateY(-4px); }
.featured-img { aspect-ratio: 1.2/1; background: var(--blush); display: grid; place-items: center; position: relative; overflow: hidden; font-size: 8rem; }
.featured-img::before { content: ""; position: absolute; width: 200px; height: 200px; background: var(--yellow); border-radius: 50%; top: -60px; left: -60px; opacity: .4; }
.featured-img::after { content: ""; position: absolute; width: 140px; height: 140px; background: var(--berry); border-radius: 50%; bottom: -40px; right: -40px; opacity: .35; }
.featured-img span { position: relative; z-index: 1; }
.featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.featured-body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.featured-badge { display: inline-flex; align-items: center; gap: 6px; align-self: start; background: var(--berry); color: #fff; font-size: .66rem; padding: 6px 14px; border-radius: 999px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.featured-cat { display: inline-block; font-size: .7rem; color: var(--berry); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; align-self: start; }
.featured-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 14px; line-height: 1.1; }
.featured-card h2 em { color: var(--berry); font-style: normal; font-weight: 800; }
.featured-excerpt { font-size: 1.02rem; color: var(--ink); line-height: 1.6; margin-bottom: 24px; opacity: .85; }
.featured-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: .82rem; color: var(--ink-soft); }
.featured-meta .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .85rem; }
.featured-meta .author { display: flex; flex-direction: column; }
.featured-meta strong { color: var(--ink); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .92rem; }
.featured-meta .dot { color: var(--muted); }
.featured-readmore { font-size: .92rem; color: var(--berry); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* Grid článků (sdílená karta — archiv, related) */
.articles-section { padding: 32px 0 80px; }
.articles-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; flex-wrap: wrap; gap: 14px; }
.articles-head h2 { font-size: 1.4rem; font-weight: 700; }
.articles-head .count { color: var(--ink-soft); font-size: .92rem; font-variant-numeric: tabular-nums; }
.articles-head .count strong { color: var(--ink); font-weight: 700; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.articles-grid .article-card { text-decoration: none; color: inherit; }
.article-img { aspect-ratio: 16/10; display: grid; place-items: center; font-size: 3.5rem; position: relative; overflow: hidden; }
.article-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-img .new-flag { position: absolute; top: 14px; left: 14px; background: var(--berry); color: #fff; font-size: .62rem; padding: 4px 10px; border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; z-index: 2; }
.articles-grid .article-card:nth-child(6n+1) .article-img { background: var(--berry-soft); }
.articles-grid .article-card:nth-child(6n+2) .article-img { background: var(--teal-soft); }
.articles-grid .article-card:nth-child(6n+3) .article-img { background: var(--yellow-soft); }
.articles-grid .article-card:nth-child(6n+4) .article-img { background: var(--lilac-soft); }
.articles-grid .article-card:nth-child(6n+5) .article-img { background: var(--sky-soft); }
.articles-grid .article-card:nth-child(6n+6) .article-img { background: var(--blush-soft); }
.article-card .article-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.article-cat { display: inline-block; font-size: .68rem; color: var(--berry); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; align-self: start; }
.article-card h3 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; margin-bottom: 10px; letter-spacing: -.01em; line-height: 1.25; }
.article-card .excerpt { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; flex: 1; }
.article-card .article-meta { font-size: .74rem; color: var(--muted); font-weight: 500; display: flex; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.article-card .article-meta .dot { color: var(--line); }
.article-card .article-meta strong { color: var(--ink-soft); font-weight: 600; }

/* Cross-link na kategorie omalovánek */
.cross-link { padding: 80px 0; background: var(--cream); border-top: 1px solid var(--line); }
.cross-link .sec-head .link { background: #fff; }
.cross-link .cat-strip { grid-template-columns: repeat(4, 1fr); }

/*============================================================================
   MAGAZÍN — detail článku (magazine-article-mockup-v1) — single-magazin.php
============================================================================*/
.article-head { padding: 48px 0 32px; background: var(--cream); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.article-head .shape-1 { position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; top: -80px; right: -70px; opacity: .45; z-index: 0; }
.article-head .shape-2 { position: absolute; width: 160px; height: 160px; background: var(--teal); bottom: -60px; left: -50px; border-radius: 50%; opacity: .35; z-index: 0; }
.article-head .container { position: relative; z-index: 1; }
.article-head-inner { max-width: 760px; }
.article-cat-chip { display: inline-block; background: var(--berry); color: #fff; font-size: .68rem; padding: 6px 14px; border-radius: 999px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.article-head h1 { margin-bottom: 18px; color: var(--ink); }
.article-dek { font-size: 1.2rem; color: var(--ink); line-height: 1.55; margin-bottom: 32px; opacity: .85; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; max-width: 660px; }
.article-byline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .92rem; color: var(--ink-soft); }
.article-byline .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1rem; }
.article-byline .author-info { display: flex; flex-direction: column; gap: 2px; }
.article-byline .author-info strong { font-family: 'Manrope', sans-serif; font-size: 1rem; color: var(--ink); font-weight: 700; }
.article-byline .author-info span { font-size: .82rem; color: var(--ink-soft); }
.article-byline .meta-block { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.article-byline .meta-block strong { color: var(--ink); font-weight: 600; }
.article-byline .meta-block span { color: var(--muted); }
.article-byline .vdiv { width: 1px; height: 36px; background: var(--line); }

.article-featured-img { padding: 48px 0 0; background: #fff; }
.featured-image-frame {
    max-width: 1120px; margin: 0 auto; aspect-ratio: 16/9; background: var(--blush-soft);
    border-radius: 32px; display: grid; place-items: center; font-size: 8rem; position: relative; overflow: hidden;
}
.featured-image-frame::before { content: ""; position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; top: -60px; left: -60px; opacity: .4; }
.featured-image-frame::after { content: ""; position: absolute; width: 180px; height: 180px; background: var(--berry); border-radius: 50%; bottom: -50px; right: -50px; opacity: .3; }
.featured-image-frame span { position: relative; z-index: 1; }
.featured-image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.featured-caption { max-width: 1120px; margin: 14px auto 0; font-size: .85rem; color: var(--ink-soft); text-align: center; font-style: italic; font-family: 'Source Serif 4', Georgia, serif; }

.article-body-wrap { padding: 64px 0 80px; background: #fff; }
.article-layout { display: grid; grid-template-columns: 60px 1fr; gap: 32px; align-items: start; max-width: 880px; margin: 0 auto; }
.article-layout > * { min-width: 0; }

.share-rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.share-rail .share-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-soft); writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 8px; align-self: center; }
.share-btn {
    width: 44px; height: 44px; border-radius: 50%; background: var(--cream); border: 1px solid var(--border-soft);
    display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: all .15s; text-decoration: none;
    font-size: .72rem; font-weight: 700;
}
.share-btn:hover { background: var(--berry); border-color: var(--berry); color: #fff; transform: translateY(-2px); }
.share-btn svg { width: 18px; height: 18px; }

.article-content { max-width: 680px; width: 100%; justify-self: start; }
.article-content p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.15rem; color: var(--ink); line-height: 1.75; margin-bottom: 20px; }
.article-content p:last-child { margin-bottom: 0; }
.article-content h2 { margin: 48px 0 18px; font-family: 'Manrope', sans-serif; }
.article-content h2:first-child { margin-top: 0; }
.article-content h3 { margin: 32px 0 14px; font-size: 1.2rem; }
.article-content strong { color: var(--ink); font-weight: 700; }
.article-content ul, .article-content ol { margin: 8px 0 24px 24px; padding-left: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.15rem; color: var(--ink); line-height: 1.75; }
.article-content li { margin-bottom: 8px; color: var(--ink); }
.article-content ul li::marker { color: var(--berry); }
.article-content img { border-radius: 18px; height: auto; max-width: 100%; }

.article-tags { padding-top: 36px; border-top: 1px solid var(--line); margin-top: 48px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-tags .label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-right: 4px; }
.article-tags a { padding: 6px 14px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 999px; font-size: .82rem; color: var(--ink-soft); font-weight: 500; transition: all .15s; }
.article-tags a:hover { background: var(--berry); border-color: var(--berry); color: #fff; }

.article-share-row { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 24px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 18px; }
.article-share-row .label { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); }
.article-share-row .actions { display: flex; gap: 8px; }
.article-share-row .share-btn { width: 40px; height: 40px; }

.author-bio-section { padding: 0 0 80px; background: #fff; }
.author-bio {
    max-width: 780px; margin: 0 auto; background: var(--cream); border: 1px solid var(--border-soft);
    border-radius: 24px; padding: 36px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.author-bio .big-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.8rem; flex-shrink: 0; }
.author-bio .ab-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--berry); margin-bottom: 6px; }
.author-bio h3 { font-family: 'Manrope', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.author-bio p { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 0; }

.related-articles { padding: 80px 0; background: var(--cream); }
.related-articles .sec-head .link { background: #fff; }
.related-articles .article-card { background: #fff; }

/* FIX: bílé pozadí .link (cross-link/related sekce) má stejnou specificitu
   jako hover a je v souboru později — hover (berry + bílý text) prohrával
   a text na hoveru zmizel (bílá na bílé). */
.related-coloring .sec-head .link:hover,
.cross-link .sec-head .link:hover,
.related-articles .sec-head .link:hover {
    background: var(--berry);
    border-color: var(--berry);
    color: #fff;
}

/* FIX: Divi reset maže list-style — seznamy v článku bez teček/čísel */
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }

/* === MAGAZÍN — elementy uvnitř článku (mockup magazine-article-v1) ===
   Obrázek a citace = nativní Gutenberg bloky (Obrázek, Citace),
   tip box a CTA box = shortcody [ok_tip] a [ok_cta_box]
   (includes/shortcodes-clanek.php). */

/* Inline obrázek — nativní WP blok Obrázek (figure.wp-block-image) */
.article-content .wp-block-image,
.article-content .inline-image { margin: 40px -20px; }
.article-content .inline-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--teal-soft);
    aspect-ratio: 16/10;
    display: grid; place-items: center;
    font-size: 5rem;
}
.article-content .wp-block-image img {
    border-radius: var(--radius-lg);
    width: 100%; height: auto; display: block;
}
.article-content .wp-block-image figcaption,
.article-content .inline-caption {
    font-size: .85rem;
    color: var(--ink-soft);
    text-align: center;
    font-style: italic;
    margin: 14px 0 0;
    font-family: 'Source Serif 4', Georgia, serif;
}

/* Citace — nativní WP blok Citace (blockquote.wp-block-quote),
   stejný vzhled jako .pull-quote z mockupu */
.article-content blockquote {
    background: var(--cream);
    border-left: 4px solid var(--berry);
    padding: 32px 36px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: 40px -16px 40px 0;
    font-family: 'Source Serif 4', Georgia, serif;
}
.article-content blockquote p {
    font-size: 1.32rem;
    color: var(--ink);
    line-height: 1.45;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
}
.article-content blockquote cite {
    font-style: normal;
    font-size: .88rem;
    color: var(--ink-soft);
    font-weight: 600;
    display: block;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
}
.article-content blockquote cite::before { content: "— "; }

/* CTA box „Stáhni si X motivů" — shortcode [ok_cta_box] */
.inline-cta {
    background: var(--berry);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 36px;
    margin: 48px -20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.inline-cta::before {
    content: "";
    position: absolute;
    width: 180px; height: 180px;
    background: var(--yellow);
    border-radius: 50%;
    top: -60px; left: -60px;
    opacity: .28; z-index: 0;
}
.inline-cta::after {
    content: "";
    position: absolute;
    width: 140px; height: 140px;
    background: var(--lilac);
    border-radius: 50%;
    bottom: -50px; right: -40px;
    opacity: .4; z-index: 0;
}
.inline-cta > * { position: relative; z-index: 1; }
.inline-cta .ico-block {
    width: 64px; height: 64px;
    background: var(--yellow);
    border-radius: 50%;
    color: var(--ink);
    display: grid; place-items: center;
    font-size: 1.8rem;
    margin-bottom: 14px;
}
.inline-cta h4 {
    font-family: 'Manrope', sans-serif;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.inline-cta h4 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.inline-cta p {
    color: rgba(255, 255, 255, .92) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .95rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.inline-cta .pill-btn { flex-shrink: 0; }

/*============================================================================
   PREMIUM LANDING (premium-mockup-v1) — page-premium.php
============================================================================*/
.premium-hero {
    background: var(--berry);
    color: #fff;
    padding: 96px 0 120px;
    position: relative;
    overflow: hidden;
}
.premium-hero::before {
    content: ""; position: absolute; width: 480px; height: 480px;
    background: var(--yellow); border-radius: 50%;
    top: -160px; right: -140px; opacity: .32; z-index: 0;
}
.premium-hero::after {
    content: ""; position: absolute; width: 340px; height: 340px;
    background: var(--lilac); border-radius: 50%;
    bottom: -120px; left: -100px; opacity: .4; z-index: 0;
}
.premium-hero .shape-3 { position: absolute; width: 120px; height: 120px; background: var(--teal); border-radius: 50%; top: 34%; left: 8%; opacity: .4; z-index: 0; }
.premium-hero .shape-4 { position: absolute; width: 70px; height: 70px; background: #fff; border-radius: 50%; top: 18%; right: 24%; opacity: .18; z-index: 0; }
.premium-hero .container { position: relative; z-index: 1; }
.premium-hero-inner { max-width: 780px; }
.breadcrumbs-white { font-size: .85rem; color: rgba(255,255,255,.85); font-weight: 500; margin-bottom: 32px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumbs-white a { color: rgba(255,255,255,.85); transition: color .15s; }
.breadcrumbs-white a:hover { color: #fff; }
.breadcrumbs-white .sep { color: rgba(255,255,255,.5); }
.breadcrumbs-white .current { color: #fff; font-weight: 600; }
.premium-hero .eyebrow { color: var(--yellow); margin-bottom: 18px; font-size: .78rem; }
.premium-hero h1 { color: #fff; margin-bottom: 22px; }
.premium-hero h1 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.premium-hero h1 .marker { display: inline-block; background: var(--yellow); padding: 0 18px; border-radius: 16px; color: var(--ink); }
.premium-hero .lead { color: rgba(255,255,255,.94); font-size: 1.2rem; max-width: 640px; margin-bottom: 36px; line-height: 1.55; }
.hero-benefits { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-benefit {
    background: rgba(255,255,255,.16); color: #fff; padding: 8px 16px; border-radius: 999px;
    font-size: .85rem; font-weight: 500; border: 1px solid rgba(255,255,255,.22);
    display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(6px);
}
.hero-benefit::before { content: "✓"; color: var(--yellow); font-weight: 800; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; gap: 24px; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.88); align-items: center; }
.hero-trust strong { color: #fff; font-weight: 600; }
.hero-trust .dot { color: rgba(255,255,255,.4); }

/* Stats band */
.stats-band { padding: 64px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; } /* auto-fit: položky s nulovou hodnotou šablona vynechává */
.stats-grid > div { padding: 0 32px; border-left: 1px solid var(--line); text-align: center; }
.stats-grid > div:first-child { border-left: none; }
.stats-grid strong { font-family: 'Manrope', sans-serif; font-size: 2.6rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.04em; color: var(--ink); margin-bottom: 8px; }
.stats-grid .berry { color: var(--berry); }
.stats-grid span { font-size: .82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }

/* Srovnávací tabulka Free vs Premium */
.compare-section { padding: 96px 0; }
.compare-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.compare-head .eyebrow { justify-content: center; display: inline-flex; }
.compare-head h2 .berry { color: var(--berry); }
.compare-head .sub { color: var(--ink-soft); font-size: 1.1rem; margin-top: 10px; }
.compare-table { background: #fff; border: 1px solid var(--border-soft); border-radius: 32px; overflow: hidden; max-width: 980px; margin: 0 auto; }
.compare-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; padding: 18px 32px; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: none; }
.compare-row.header { background: var(--cream); padding: 28px 32px; font-family: 'Manrope', sans-serif; border-bottom: 1px solid var(--border-soft); }
.compare-row.header .col-feature { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.compare-row.header .col-plan { text-align: center; }
.compare-row.header .col-plan strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.compare-row.header .col-plan .price { font-size: .82rem; color: var(--ink-soft); font-weight: 500; }
.compare-row.header .col-plan .price em { color: var(--berry); font-style: normal; font-weight: 700; }
.compare-row.header .col-premium { background: var(--berry-soft); margin: -28px 0; padding: 28px 0; border-radius: 0; position: relative; }
.compare-row.header .col-premium::before {
    content: attr(data-stitek); position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--yellow); color: var(--ink); padding: 5px 14px; font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; white-space: nowrap;
}
.compare-row.header .col-premium strong { color: var(--berry-deep); }
.compare-row.section-label { background: var(--cream); padding: 14px 32px; font-family: 'Manrope', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); font-weight: 700; grid-template-columns: 1fr; }
.col-feature { font-size: .95rem; color: var(--ink); font-weight: 500; }
.col-feature .hint { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
.col-plan { text-align: center; font-size: .92rem; color: var(--ink); }
.col-plan.col-premium { background: var(--berry-soft); margin: -18px 0; padding: 18px 0; }
.col-plan .check { color: var(--teal); font-size: 1.3rem; font-weight: 800; display: inline-block; }
.col-plan .x { color: var(--muted); font-size: 1.2rem; display: inline-block; }
.col-plan .limited { color: var(--ink-soft); font-size: .85rem; font-style: italic; }
.col-plan.col-premium .check { color: var(--berry); }
.col-plan .num { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--ink); }
.compare-cta { text-align: center; margin-top: 40px; }

/* Pricing (jeden blok s tabs) */
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.pricing-head .eyebrow { justify-content: center; display: inline-flex; }
.pricing-head h2 .berry { color: var(--berry); }
.pricing-head .sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: 10px; }
.pricing-block { background: #fff; border: 1px solid var(--border-soft); border-radius: 32px; padding: 48px; max-width: 520px; margin: 0 auto; position: relative; }
.pricing-block::before {
    content: attr(data-stitek); position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--yellow); color: var(--ink); padding: 7px 18px; font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; white-space: nowrap;
}
.pricing-tabs { display: flex; gap: 4px; margin-bottom: 32px; padding: 4px; background: var(--cream); border-radius: 999px; }
.pricing-tabs button { flex: 1; background: none; border: none; color: var(--ink-soft); padding: 12px; border-radius: 999px; font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.pricing-tabs button.active { background: var(--berry); color: #fff; }
.pricing-tabs .save { background: var(--yellow); color: var(--ink); font-size: .62rem; padding: 2px 6px; margin-left: 6px; font-weight: 700; border-radius: 6px; letter-spacing: .04em; }
.price-display { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; justify-content: center; }
.price-display strong { font-family: 'Manrope', sans-serif; font-size: 4.4rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.05em; }
.price-display span { color: var(--ink-soft); font-size: 1rem; }
.price-note { color: var(--berry); font-size: .92rem; margin-bottom: 28px; font-weight: 600; text-align: center; }
.price-list { list-style: none; display: grid; gap: 12px; margin: 0 0 32px; padding: 0; }
.price-list li { display: flex; align-items: center; gap: 14px; font-size: .95rem; color: var(--ink); padding: 4px 0; }
.price-list .check { width: 22px; height: 22px; background: var(--teal-soft); color: var(--teal-deep); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .75rem; }
.price-trust { margin-top: 18px; text-align: center; font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }
.price-trust strong { color: var(--ink); font-weight: 600; }
.price-trust .dot { color: var(--muted); margin: 0 6px; }

/* Pricing block — stav předplatného místo nabídky (viz includes/premium.php).
   Druhý selektor přebíjí badge scoped na homepage sekci .premium-bg.
   Text „⭐ tvůj tarif" je v data-stitek stejně jako u ostatních štítků. */
.pricing-block.is-active::before,
.premium-bg .pricing-block.is-active::before { content: attr(data-stitek); }
.premium-state { text-align: center; margin-bottom: 28px; }
.premium-state h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.55rem; font-weight: 800; color: var(--ink);
    line-height: 1.2; letter-spacing: -.02em; margin: 4px 0 8px;
}
.premium-state p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.premium-bg .premium-state { text-align: left; }

/* FAQ — obal sekce + hlavička + ikona (itemy už řeší FAQ accordion blok výše) */
.faq-section { padding: 96px 0; background: #fff; }
.faq-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.faq-head .eyebrow { justify-content: center; display: inline-flex; }
.faq-head h2 .berry { color: var(--berry); }
.faq-head .sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: 10px; }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-icon {
    width: 30px; height: 30px; background: var(--berry-soft); color: var(--berry); border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0; transition: transform .2s; font-weight: 800; font-size: 1.1rem;
}
.faq-item.open .faq-icon { background: var(--berry); color: #fff; transform: rotate(45deg); }
.faq-item .faq-a[hidden] { display: none !important; }

/* Testimonials */
.testimonials-section { padding: 96px 0; background: var(--cream); }
.testimonials-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.testimonials-head .eyebrow { justify-content: center; display: inline-flex; }
.testimonials-head h2 .berry { color: var(--berry); }
.testimonials-head .rating { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; background: #fff; border: 1px solid var(--border-soft); padding: 14px 24px; border-radius: 999px; }
.testimonials-head .rating .stars { color: var(--berry); letter-spacing: 2px; font-size: 1.1rem; }
.testimonials-head .rating strong { font-family: 'Manrope', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.testimonials-head .rating span { font-size: .85rem; color: var(--ink-soft); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* počet karet se může měnit, sloupce se přizpůsobí */
.testimonial-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; position: relative; }
.testimonial-card .quote-mark {
    position: absolute; top: -16px; left: 24px; width: 36px; height: 36px; background: var(--berry); color: #fff;
    border-radius: 50%; display: grid; place-items: center; font-family: 'Manrope', sans-serif;
    font-size: 1.8rem; font-weight: 800; line-height: 1; padding-bottom: 4px;
}
.testimonial-body { font-size: 1rem; color: var(--ink); line-height: 1.65; margin-bottom: 24px; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--berry-soft); color: var(--berry); display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.1rem; }
.testimonial-card:nth-child(2) .testimonial-avatar { background: var(--teal-soft); color: var(--teal-deep); }
.testimonial-card:nth-child(3) .testimonial-avatar { background: var(--yellow-soft); color: #A57100; }
.testimonial-author strong { display: block; font-family: 'Manrope', sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink); }
.testimonial-author span { font-size: .82rem; color: var(--ink-soft); }
.testimonial-stars { margin-bottom: 14px; color: var(--berry); letter-spacing: 2px; }

/* Final CTA */
.final-cta { background: var(--berry); color: #fff; border-radius: 32px; padding: 80px 64px; text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; width: 340px; height: 340px; background: var(--yellow); border-radius: 50%; top: -120px; left: -100px; opacity: .3; z-index: 0; }
.final-cta::after { content: ""; position: absolute; width: 260px; height: 260px; background: var(--lilac); border-radius: 50%; bottom: -100px; right: -80px; opacity: .4; z-index: 0; }
.final-cta > div { position: relative; z-index: 1; }
.final-cta .eyebrow { color: var(--yellow); justify-content: center; display: inline-flex; }
.final-cta h2 { color: #fff; margin-bottom: 18px; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.final-cta h2 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.final-cta p { color: rgba(255,255,255,.92); font-size: 1.1rem; max-width: 560px; margin: 0 auto 36px; }
.final-cta .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.final-cta .trust { font-size: .85rem; color: rgba(255,255,255,.85); display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; align-items: center; }
.final-cta .trust strong { color: #fff; font-weight: 600; }
.final-cta .trust .dot { color: rgba(255,255,255,.4); }

/* Premium: pricing sekce má cream pozadí */
.ok-premium .pricing-section { padding: 96px 0; background: var(--cream); }

/*============================================================================
   PRO ŠKOLY — B2B landing (b2b-schools-mockup-v1) — page-pro-skoly.php
============================================================================*/
.b2b-hero { padding: 80px 0; background: var(--cream); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.b2b-hero .shape-1 { position: absolute; width: 300px; height: 300px; background: var(--teal); border-radius: 50%; top: -100px; right: -90px; opacity: .4; z-index: 0; }
.b2b-hero .shape-2 { position: absolute; width: 200px; height: 200px; background: var(--yellow); bottom: -80px; left: -60px; border-radius: 50px; transform: rotate(15deg); opacity: .5; z-index: 0; }
.b2b-hero .shape-3 { position: absolute; width: 70px; height: 70px; background: var(--berry); border-radius: 50%; top: 35%; right: 18%; opacity: .5; z-index: 0; }
.b2b-hero .container { position: relative; z-index: 1; }
.b2b-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.b2b-hero h1 { margin-bottom: 18px; }
.b2b-hero h1 .teal { color: var(--teal-deep); }
.b2b-hero h1 .marker { display: inline-block; background: var(--yellow); padding: 0 14px; border-radius: 14px; color: var(--ink); }
.b2b-hero .lead { color: var(--ink-soft); font-size: 1.15rem; max-width: 540px; margin-bottom: 32px; line-height: 1.6; }
.b2b-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.b2b-hero-trust { display: flex; gap: 24px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); align-items: center; }
.b2b-hero-trust strong { color: var(--ink); font-weight: 600; }
.b2b-hero-trust .dot { color: var(--muted); }
.b2b-visual { background: var(--teal); color: #fff; border-radius: 24px; padding: 48px; position: relative; overflow: hidden; aspect-ratio: 1.1/1; display: flex; flex-direction: column; justify-content: space-between; }
.b2b-visual::before { content: ""; position: absolute; width: 240px; height: 240px; background: var(--yellow); border-radius: 50%; top: -80px; left: -60px; opacity: .25; }
.b2b-visual::after { content: ""; position: absolute; width: 160px; height: 160px; background: var(--berry); border-radius: 50%; bottom: -60px; right: -40px; opacity: .35; }
.b2b-visual > * { position: relative; z-index: 1; }
.b2b-visual .stat-big { font-family: 'Manrope', sans-serif; font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; margin-bottom: 8px; }
.b2b-visual .stat-label { font-size: .78rem; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.b2b-visual .stat-desc { font-size: 1.1rem; color: rgba(255,255,255,.95); margin-top: 16px; line-height: 1.4; max-width: 340px; }
.b2b-visual .quote-block { font-size: .95rem; color: #fff; border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; font-style: italic; line-height: 1.55; }
.b2b-visual .quote-block cite { display: block; font-style: normal; font-weight: 600; font-family: 'Manrope', sans-serif; font-size: .82rem; margin-top: 8px; color: var(--yellow); }

/* Centrovaná hlavička sekce (mockup B2B) */
.sec-head--center { display: block; text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sec-head--center .eyebrow { justify-content: center; display: inline-flex; }
.sec-head--center h2 .teal { color: var(--teal-deep); }
.sec-head--center h2 .berry { color: var(--berry); }
.sec-head--center .sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: 10px; max-width: none; }

/* Benefity */
.benefits-section { padding: 96px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 32px; transition: transform .2s; }
.benefit-card:hover { transform: translateY(-4px); border-color: var(--berry-soft); }
.benefit-card .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; font-size: 1.4rem; }
.benefit-card:nth-child(1) .ico { background: var(--berry-soft); color: var(--berry); }
.benefit-card:nth-child(2) .ico { background: var(--teal-soft); color: var(--teal-deep); }
.benefit-card:nth-child(3) .ico { background: var(--yellow-soft); color: #A57100; }
.benefit-card:nth-child(4) .ico { background: var(--lilac-soft); color: var(--lilac); }
.benefit-card h3 { font-size: 1.15rem; margin-bottom: 8px; letter-spacing: -.01em; }
.benefit-card p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }

/* Ceníkové tiery */
.ok-b2b .pricing-section { padding: 96px 0; background: var(--cream); }
.pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.tier-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; position: relative; transition: transform .2s; }
.tier-card:hover { transform: translateY(-4px); }
.tier-card.featured { border-color: var(--berry); }
.tier-card.featured::before { content: attr(data-stitek); position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--yellow); color: var(--ink); padding: 6px 16px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
.tier-card .tier-name { font-family: 'Manrope', sans-serif; font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
.tier-card .tier-desc { font-size: .88rem; color: var(--ink-soft); margin-bottom: 24px; min-height: 42px; }
.tier-card .price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tier-card .price-row strong { font-family: 'Manrope', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.tier-card .price-row span { font-size: .85rem; color: var(--ink-soft); }
.tier-card .price-note { color: var(--berry); font-size: .85rem; font-weight: 600; margin-bottom: 24px; text-align: left; }
.tier-card ul { list-style: none; display: grid; gap: 10px; margin: 0 0 28px; padding: 0; flex: 1; }
.tier-card li { display: flex; align-items: start; gap: 10px; font-size: .9rem; color: var(--ink); line-height: 1.5; }
.tier-card li .check { width: 18px; height: 18px; background: var(--teal-soft); color: var(--teal-deep); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .68rem; margin-top: 1px; }

/* B2B varianty sdílených sekcí */
.ok-b2b .testimonials-section { background: #fff; }
.ok-b2b .testimonial-card { background: var(--cream); }
.ok-b2b .faq-section { background: var(--cream); }
.ok-b2b .faq-item { background: #fff !important; }
.ok-b2b .faq-item.open { border-color: var(--berry-soft) !important; }

/* Kontaktní formulář */
.contact-section { padding: 96px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-info h2 { margin-bottom: 18px; }
.contact-info h2 .berry { color: var(--berry); }
.contact-info > p { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 24px; }
.contact-info ul { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.contact-info li { display: flex; gap: 12px; align-items: start; font-size: .95rem; color: var(--ink); }
.contact-info li .ico-circle { width: 36px; height: 36px; background: var(--berry-soft); color: var(--berry); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; }
.contact-info li strong { font-family: 'Manrope', sans-serif; color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
.contact-info li span { font-size: .85rem; color: var(--ink-soft); }
.contact-form { background: var(--cream); border: 1px solid var(--border-soft); border-radius: 24px; padding: 36px; }
.contact-form h3 { margin-bottom: 8px; font-size: 1.4rem; }
.contact-form .form-sub { font-size: .9rem; color: var(--ink-soft); margin-bottom: 24px; }
/* POZOR: `.form-row` je zároveň třída WooCommerce (pokladna, účet, login).
   Bez scopování dělala z každého pole pokladny dvousloupcovou mřížku
   (label v jednom sloupci, input ve druhém) a rozhodila celý formulář.
   Držet jen na našich formulářích. */
.contact-form .form-row,
.upload-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: span 2; }
.form-field label { font-size: .78rem; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.contact-form .form-field input,
.contact-form .form-field textarea,
.contact-form .form-field select {
    background: #fff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .15s;
    width: 100%;
}
.contact-form .form-field input:focus,
.contact-form .form-field textarea:focus,
.contact-form .form-field select:focus {
    border-color: var(--berry) !important;
    box-shadow: 0 0 0 4px var(--berry-soft) !important;
}
.contact-form .form-field textarea { resize: vertical; min-height: 100px; }
.form-checkbox { display: flex; gap: 10px; align-items: start; margin: 14px 0 18px; font-size: .85rem; color: var(--ink-soft); }
.form-checkbox input { margin-top: 3px; accent-color: var(--berry); width: auto !important; }
.form-checkbox a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }

/* FIX compare-table: pink sloupec přes celou výšku řádku (mockup trik
   margin/padding -28/28 sedí jen když mají buňky shodnou výšku — reálné
   řádky s .hint jsou vyšší → mezery). Stretch + flex centrování řeší
   všechny výšky. Badge „doporučené" potřebuje overflow visible,
   zaoblení horních rohů proto přebírá header řádek. */
.compare-table { overflow: visible; }
.compare-row.header { border-radius: 32px 32px 0 0; }
.compare-row .col-plan.col-premium {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}
.compare-row:last-child .col-plan.col-premium { border-radius: 0 0 18px 18px; }

/* FIX hero benefity: pill vzhled se pletl s tlačítky (nejsou klikací) —
   předěláno na prostý checklist bez pozadí a rámečku */
.hero-benefit {
    background: transparent;
    border: none;
    padding: 2px 0;
    border-radius: 0;
    backdrop-filter: none;
    color: rgba(255, 255, 255, .95);
}
.hero-benefits { gap: 6px 24px; }

/* FIX citace ikona: znak " v Plus Jakarta vypadal jako dvě čárky —
   ornamentální uvozovka + flex centrování */
.testimonial-card .quote-mark,
.b2b-visual .quote-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    padding-bottom: 0;
}

/* FIX faq ikona: glyf +/× nebyl opticky na středu kolečka */
.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Arial, sans-serif;
    font-size: 1.15rem;
    padding: 0 0 2px;
}

/*============================================================================
   OBLÍBENÉ (page-oblibene.php) — toolbar + empty state
   Hero/grid/karty sdílí styly archivu (cat-hero, coloring-grid).
============================================================================*/
.fav-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.fav-count-line { font-size: .95rem; color: var(--ink-soft); }
.fav-count-line strong { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--ink); }

.fav-empty {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 0 16px;
}
.fav-empty-art {
    width: 96px; height: 96px;
    background: var(--berry-soft);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 2.6rem;
    margin: 0 auto 24px;
}
.fav-empty h2 { margin-bottom: 12px; }
.fav-empty > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin-bottom: 28px; }
.fav-empty-actions { margin-bottom: 40px; }
.fav-empty .top-cats-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

/* FIX: srdíčko (z-index 2) bylo při hoveru pod .card-overlay (z-index 3)
   — nešlo odebrat z oblíbených */
.coloring-thumb .fav-btn { z-index: 4; }

/* === PALEC U VYBARVENÝCH OBRÁZKŮ (sekce "Nejlépe vybarvené" + /vybarvene-obrazky/) === */
.coloring-card--submission { position: relative; }
.coloring-card--submission .coloring-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-btn {
    position: absolute; top: 12px; right: 12px; z-index: 4;
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px; border: none; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.92); color: var(--ink-soft);
    font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.thumb-btn:hover { color: var(--berry); transform: scale(1.05); }
.thumb-btn.active { color: var(--berry); }
.thumb-btn svg { pointer-events: none; }

/*============================================================================
   MŮJ ÚČET (account-dashboard-mockup-v1) — WC my-account overrides
   Šablony: woocommerce/myaccount/{my-account,navigation,dashboard}.php
============================================================================*/
.account-wrap { padding: 48px 0 80px; background: var(--cream); }
.account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }

/* Sidebar */
.account-sidebar { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 24px; position: sticky; top: calc(var(--header-bottom, 84px) + 20px); }
.sidebar-user { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.sidebar-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.4rem; margin-bottom: 10px; }
.sidebar-user strong { display: block; font-family: 'Manrope', sans-serif; font-size: .98rem; font-weight: 700; margin-bottom: 2px; }
.sidebar-user span { font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.sidebar-user .premium-badge { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; background: var(--yellow); color: var(--ink); padding: 4px 10px; border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-user .free-badge { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; background: var(--cream); color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: all .15s; }
.sidebar-nav a:hover { background: var(--cream); color: var(--ink); }
.sidebar-nav li.is-active a { background: var(--berry-soft); color: var(--berry); font-weight: 700; }
.sidebar-nav a .ico { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; }
.sidebar-nav a .ico svg { width: 18px; height: 18px; }
.sidebar-nav a .num { background: var(--cream); color: var(--ink-soft); font-size: .7rem; padding: 2px 7px; border-radius: 999px; font-weight: 600; margin-left: auto; }
.sidebar-nav li.is-active a .num { background: var(--berry); color: #fff; }
.sidebar-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sidebar-foot a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: .88rem; color: var(--ink-soft); font-weight: 500; }
.sidebar-foot a:hover { background: var(--cream); color: var(--ink); }

/* Hlavní panel */
.account-main { min-width: 0; }
.panel-head { margin-bottom: 32px; }
.panel-head h1 { margin-bottom: 6px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.panel-head h1 .berry { color: var(--berry); }
.panel-head p { font-size: 1rem; color: var(--ink-soft); }

.welcome-card { background: var(--berry); color: #fff; border-radius: 24px; padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-bottom: 24px; position: relative; overflow: hidden; }
.welcome-card::before { content: ""; position: absolute; width: 220px; height: 220px; background: var(--yellow); border-radius: 50%; top: -80px; right: -60px; opacity: .28; }
.welcome-card::after { content: ""; position: absolute; width: 160px; height: 160px; background: var(--lilac); border-radius: 50%; bottom: -60px; left: -40px; opacity: .35; }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-card .eyebrow { color: var(--yellow); margin-bottom: 10px; }
.welcome-card h2 { color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.02em; }
.welcome-card h2 em { color: var(--yellow); font-style: normal; }
.welcome-card p { color: rgba(255,255,255,.92); margin: 0; font-size: .98rem; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.stat-tile { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 24px; }
.stat-tile .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font-size: 1.1rem; }
.stat-tile:nth-child(1) .ico { background: var(--berry-soft); color: var(--berry); }
.stat-tile:nth-child(2) .ico { background: var(--teal-soft); color: var(--teal-deep); }
.stat-tile:nth-child(3) .ico { background: var(--yellow-soft); color: #A57100; }
.stat-tile:nth-child(4) .ico { background: var(--lilac-soft); color: var(--lilac); }
.stat-tile strong { font-family: 'Manrope', sans-serif; font-size: 1.8rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.03em; margin-bottom: 4px; }
.stat-tile span { font-size: .85rem; color: var(--ink-soft); }

.subscription-card { background: linear-gradient(135deg, var(--cream) 0%, #FFF4E6 100%); border: 1px solid var(--border-soft); border-radius: 24px; padding: 28px; margin-bottom: 24px; }
.sub-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sub-status { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--teal-deep); background: var(--teal-soft); padding: 6px 14px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.sub-status::before { content: ""; width: 8px; height: 8px; background: var(--teal-deep); border-radius: 50%; }
.sub-status.free { color: var(--ink-soft); background: #fff; border: 1px solid var(--border-soft); }
.sub-status.free::before { background: var(--muted); }
.sub-info h3 { font-size: 1.2rem; margin-bottom: 6px; }
.sub-info p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.sub-info p strong { color: var(--ink); font-weight: 600; }

.section-block { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 28px; margin-bottom: 24px; }
.section-block-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; }
.section-block-head h3 { font-size: 1.15rem; }
.section-block-head a { font-size: .85rem; color: var(--berry); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.section-block .empty-note { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* mini grid oblíbených */
.acc-fav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acc-fav-card { transition: transform .2s; }
.acc-fav-card:hover { transform: translateY(-3px); }
.acc-fav-thumb { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; }
.acc-fav-thumb svg { width: 75%; height: 75%; }
.acc-fav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-fav-thumb .fav-mark { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; background: rgba(255,255,255,.92); border-radius: 50%; display: grid; place-items: center; color: var(--berry); }
.acc-fav-card:nth-child(4n+1) .acc-fav-thumb { background: var(--berry-soft); }
.acc-fav-card:nth-child(4n+2) .acc-fav-thumb { background: var(--teal-soft); }
.acc-fav-card:nth-child(4n+3) .acc-fav-thumb { background: var(--yellow-soft); }
.acc-fav-card:nth-child(4n+4) .acc-fav-thumb { background: var(--lilac-soft); }
.acc-fav-name { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.acc-fav-meta { font-size: .72rem; color: var(--muted); }

/* seznam stahování */
.downloads-list { display: grid; gap: 8px; }
.dl-row { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--border-soft); transition: background .15s; }
.dl-row:hover { background: #fff; border-color: var(--berry-soft); }
.dl-thumb { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; }
.dl-thumb svg { width: 60%; height: 60%; }
.dl-row:nth-child(4n+1) .dl-thumb { background: var(--berry-soft); }
.dl-row:nth-child(4n+2) .dl-thumb { background: var(--teal-soft); }
.dl-row:nth-child(4n+3) .dl-thumb { background: var(--yellow-soft); }
.dl-row:nth-child(4n+4) .dl-thumb { background: var(--lilac-soft); }
.dl-info strong { display: block; font-family: 'Manrope', sans-serif; font-size: .95rem; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.dl-info span { font-size: .74rem; color: var(--muted); }
.dl-format { background: #fff; border: 1px solid var(--border-soft); padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.dl-redo { background: transparent; border: none; color: var(--berry); font-weight: 600; font-size: .82rem; cursor: pointer; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.dl-redo:hover { background: var(--berry-soft); }

/* Obsah ostatních WC endpointů (objednávky, adresy, detaily účtu) */
.account-main .woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
.account-content-card { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 28px; }
.account-content-card h2, .account-content-card h3 { margin-bottom: 16px; }
.account-content-card p { margin-bottom: 14px; }
.account-content-card a:not(.button):not(.pill-btn) { color: var(--berry); font-weight: 500; }
.account-content-card table.shop_table { width: 100%; border-collapse: collapse; border: none; font-size: .92rem; }
.account-content-card table.shop_table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.account-content-card table.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
.account-content-card .button,
.account-content-card button[type="submit"] {
    background: var(--berry) !important; color: #fff !important; border: 1px solid var(--berry) !important;
    border-radius: 999px !important; padding: 10px 22px !important; font-weight: 600 !important;
    font-family: inherit !important; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center;
}
.account-content-card .button:hover,
.account-content-card button[type="submit"]:hover { background: var(--berry-deep) !important; border-color: var(--berry-deep) !important; }
.account-content-card .woocommerce-message,
.account-content-card .woocommerce-info { background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }

/* Můj účet — dorovnání: bullets z Divi ul stylů + login formulář */
.sidebar-nav li { list-style: none; margin: 0; }
.sidebar-nav li::marker { content: none; }
.ok-account .woocommerce { width: 100%; }

/* Můj účet — WC core floatuje navigaci (35 %) a obsah (65 %),
   náš grid layout floaty nepotřebuje */
.account-grid .woocommerce-MyAccount-navigation,
.account-grid .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}

/* Můj účet — kontrast textu v WC hláškách */
.account-content-card .woocommerce-message,
.account-content-card .woocommerce-info {
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* === Můj účet — formuláře (Detaily účtu, adresy): WC floaty rozbíjely
   layout uvnitř karty → grid 2 sloupce, wide pole přes oba === */
.account-content-card form .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: block;
}
.account-content-card .woocommerce-EditAccountForm,
.account-content-card .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
}
.account-content-card .woocommerce-EditAccountForm > *,
.account-content-card .woocommerce-address-fields__field-wrapper > * {
    grid-column: span 2;
    min-width: 0;
}
.account-content-card .woocommerce-EditAccountForm > .form-row-first,
.account-content-card .woocommerce-EditAccountForm > .form-row-last,
.account-content-card .woocommerce-address-fields__field-wrapper > .form-row-first,
.account-content-card .woocommerce-address-fields__field-wrapper > .form-row-last {
    grid-column: span 1;
}
.account-content-card form fieldset {
    border: none;
    margin: 8px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
}
.account-content-card form legend {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 14px;
}
.account-content-card .form-row label {
    display: block;
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink);
}
.account-content-card .form-row label .required { color: var(--berry); text-decoration: none; }
.account-content-card .form-row .woocommerce-password-strength,
.account-content-card .form-row em,
.account-content-card .form-row span em {
    display: block;
    font-size: .82rem;
    color: var(--ink-soft);
    font-style: normal;
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.account-content-card .form-row input[type="text"],
.account-content-card .form-row input[type="email"],
.account-content-card .form-row input[type="password"],
.account-content-card .form-row input[type="tel"],
.account-content-card .form-row select {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .15s;
}
.account-content-card .form-row input:focus,
.account-content-card .form-row select:focus {
    border-color: var(--berry) !important;
    box-shadow: 0 0 0 4px var(--berry-soft) !important;
}
.account-content-card .show-password-input { top: 12px; right: 12px; }

/* === Můj účet — tlačítka v tabulkách (Stahování, Objednávky): menší
   a bez Divi hover šipky === */
.account-content-card .button,
.account-content-card button[type="submit"] {
    padding: 8px 18px !important;
    font-size: .85rem !important;
    line-height: 1.4 !important;
}
.account-content-card .button::after,
.account-content-card .button::before,
.account-content-card button::after,
.account-content-card button::before,
.ok-thankyou .button::after,
.ok-thankyou .button::before {
    display: none !important;
    content: none !important;
}
.account-content-card .button:hover,
.ok-thankyou .button:hover { padding: 8px 18px !important; }
.ok-thankyou .woocommerce-MyAccount-downloads-file,
.ok-thankyou table.shop_table .button { font-size: .85rem !important; padding: 8px 18px !important; }

/*============================================================================
   DETAIL PRODUKTU — balíček (bundle-detail-mockup-v1)
   Šablona: woocommerce/single-product.php. Sdílí detail-nav, detail-grid,
   action-panel, action-stats, sec-btn, premium-lock z detailu omalovánky.
============================================================================*/
.bundle-cover-large {
    background: var(--lilac);
    color: #fff;
    border-radius: 24px;
    aspect-ratio: 4/5;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.bundle-cover-large::before { content: ""; position: absolute; width: 280px; height: 280px; background: rgba(255,255,255,.16); border-radius: 50%; top: -80px; right: -60px; }
.bundle-cover-large::after { content: ""; position: absolute; width: 200px; height: 200px; background: rgba(255,255,255,.12); border-radius: 50%; bottom: -50px; left: -40px; }
.bundle-cover-large .ico { font-size: 10rem; position: relative; z-index: 1; line-height: 1; }
.bundle-cover-large > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bundle-cover-large .top-row { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 2; }
.bundle-cover-large .lbl { background: var(--yellow); color: var(--ink); padding: 6px 14px; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; }
.bundle-cover-large .pages { background: rgba(27,31,58,.45); color: #fff; padding: 6px 14px; font-size: .78rem; font-weight: 600; border-radius: 999px; backdrop-filter: blur(6px); }

.preview-strip { margin-top: 18px; }
.preview-strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.preview-strip-head h4 { font-size: .92rem; font-weight: 700; }
.preview-strip-head .count { font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.preview-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.preview-thumb { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 1.5rem; cursor: pointer; transition: transform .15s; position: relative; overflow: hidden; }
.preview-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-thumb:hover { transform: translateY(-2px); }
.preview-thumb:nth-child(6n+1) { background: var(--berry-soft); }
.preview-thumb:nth-child(6n+2) { background: var(--teal-soft); }
.preview-thumb:nth-child(6n+3) { background: var(--yellow-soft); }
.preview-thumb:nth-child(6n+4) { background: var(--lilac-soft); }
.preview-thumb:nth-child(6n+5) { background: var(--cream); }
.preview-thumb:nth-child(6n+6) { background: #EAF0F8; }
.preview-thumb .more-overlay { position: absolute; inset: 0; background: rgba(27,31,58,.7); color: #fff; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700; z-index: 1; }

.action-panel .premium-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: var(--ink); padding: 5px 12px; border-radius: 999px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }

/* Cena + koupit (WC add to cart) */
.buy-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.buy-row .price { font-family: 'Manrope', sans-serif; font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.buy-row .price .woocommerce-Price-amount { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.buy-row .vat-note { font-size: .82rem; color: var(--ink-soft); }
.action-panel form.cart { margin: 0 0 8px; }
.action-panel form.cart .single_add_to_cart_button {
    width: 100%;
    background: var(--berry) !important;
    color: #fff !important;
    border: 1px solid var(--berry) !important;
    border-radius: 999px !important;
    padding: 15px 28px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all .2s;
}
.action-panel form.cart .single_add_to_cart_button:hover { background: var(--berry-deep) !important; border-color: var(--berry-deep) !important; }
.action-panel form.cart .single_add_to_cart_button::after,
.action-panel form.cart .single_add_to_cart_button::before { display: none !important; content: none !important; }

/* O balíčku */
.about-bundle { padding: 80px 0; background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.about-text h2 { margin-bottom: 20px; }
.about-text h2 .berry { color: var(--berry); }
.about-text p { font-size: 1rem; color: var(--ink); line-height: 1.7; margin-bottom: 16px; }
.about-text h3 { margin: 24px 0 10px; }
.about-side { background: #fff; padding: 28px; border-radius: 18px; border: 1px solid var(--border-soft); }
.about-side h3 { font-size: 1rem; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.about-side h3::before { content: ""; width: 8px; height: 8px; background: var(--berry); border-radius: 50%; }
.about-side ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.about-side li { display: flex; gap: 12px; align-items: start; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.about-side li .check { width: 20px; height: 20px; background: var(--teal-soft); color: var(--teal-deep); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .72rem; }

/* Související balíčky */
.related-products { padding: 80px 0; }
.related-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-mini { display: block; transition: transform .2s; }
.product-mini:hover { transform: translateY(-4px); }
.product-mini-cover { aspect-ratio: 4/3; border-radius: 18px; display: grid; place-items: center; font-size: 3.4rem; position: relative; overflow: hidden; margin-bottom: 14px; }
.product-mini-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-mini:nth-child(3n+1) .product-mini-cover { background: var(--berry-soft); }
.product-mini:nth-child(3n+2) .product-mini-cover { background: var(--teal-soft); }
.product-mini:nth-child(3n+3) .product-mini-cover { background: var(--lilac-soft); }
.product-mini h3 { font-size: 1.05rem; margin-bottom: 4px; }
.product-mini .price { font-size: .92rem; color: var(--ink-soft); }
.product-mini .price .woocommerce-Price-amount { font-weight: 700; color: var(--ink); }

/*============================================================================
   OBCHOD — výpis balíčků (bundles-listing-mockup-v1)
   Šablona: woocommerce/archive-product.php (shop + product_cat + product_tag)
============================================================================*/
.bundles-hero { padding: 64px 0 56px; background: var(--cream); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.bundles-hero .shape-1 { position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; right: -80px; opacity: .5; z-index: 0; }
.bundles-hero .shape-2 { position: absolute; width: 200px; height: 200px; background: var(--teal); bottom: -90px; left: -70px; border-radius: 50px; transform: rotate(15deg); opacity: .4; z-index: 0; }
.bundles-hero .shape-3 { position: absolute; width: 70px; height: 70px; background: var(--lilac); border-radius: 50%; top: 42%; right: 22%; opacity: .6; z-index: 0; }
.bundles-hero .shape-4 { position: absolute; width: 54px; height: 54px; background: var(--berry); border-radius: 50%; bottom: 16%; left: 36%; opacity: .55; z-index: 0; }
.bundles-hero .container { position: relative; z-index: 1; }
.bundles-hero-inner { max-width: 780px; }
.bundles-hero h1 { margin-bottom: 18px; color: var(--ink); }
.bundles-hero h1 .berry { color: var(--berry); }
.bundles-hero h1 .marker { display: inline-block; background: var(--yellow); padding: 0 16px; border-radius: 14px; color: var(--ink); }
.bundles-hero .lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 640px; margin-bottom: 36px; line-height: 1.55; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; justify-content: start; }
.hero-stats div { padding: 0 28px; border-left: 1px solid var(--line); }
.hero-stats div:first-child { border-left: none; padding-left: 0; }
.hero-stats strong { font-family: 'Manrope', sans-serif; font-size: 1.9rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hero-stats .berry { color: var(--berry); }
.hero-stats span { font-size: .76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; margin-top: 6px; display: block; font-weight: 500; }

/* Grid balíčků */
.bundle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bundle-item {
    background: #fff;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    transition: transform .25s;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
}
.bundle-item:hover { transform: translateY(-6px); border-color: var(--berry-soft); }
.bundle-cover { aspect-ratio: 4/5; display: grid; place-items: center; position: relative; padding: 32px; overflow: hidden; }
.bundle-cover::before { content: ""; position: absolute; width: 140px; height: 140px; background: rgba(255,255,255,.18); border-radius: 50%; top: -40px; right: -30px; }
.bundle-cover::after { content: ""; position: absolute; width: 90px; height: 90px; background: rgba(255,255,255,.14); border-radius: 50%; bottom: -20px; left: -20px; }
.bundle-cover .ico { font-size: 5rem; position: relative; z-index: 1; line-height: 1; }
.bundle-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bundle-cover .lbl {
    position: absolute; top: 16px; left: 16px;
    background: #fff; color: var(--ink);
    padding: 5px 12px; font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; z-index: 2;
    white-space: nowrap;
}
.bundle-cover .lbl.premium { background: var(--yellow); color: var(--ink); }
.bundle-cover .lbl.new { background: var(--berry); color: #fff; }
.bundle-cover .pages {
    position: absolute; bottom: 16px; right: 16px;
    background: rgba(255,255,255,.85); color: var(--ink);
    padding: 5px 12px; font-size: .72rem; font-weight: 600; border-radius: 999px; z-index: 2;
    white-space: nowrap;
}
.bundle-body { padding: 22px; display: flex; flex-direction: column; flex: 1; background: #fff; }
.bundle-cat { display: inline-block; font-size: .66rem; color: var(--berry); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; align-self: start; }
.bundle-body h4 { font-family: 'Manrope', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; line-height: 1.2; }
.bundle-body p { font-size: .88rem; color: var(--ink-soft); flex: 1; margin-bottom: 14px; line-height: 1.5; }
.bundle-meta { display: flex; gap: 10px; font-size: .72rem; color: var(--muted); font-weight: 500; padding-top: 14px; border-top: 1px solid var(--line); align-items: center; }
.bundle-meta .dot { color: var(--line); }
.bundle-meta strong { color: var(--ink-soft); font-weight: 600; }
.bundle-meta .bprice { margin-left: auto; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.bundle-meta .bprice .woocommerce-Price-amount { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

/* Barevné varianty coveru (rotace dle pořadí) */
.bundle-item.c-berry .bundle-cover { background: var(--berry); color: #fff; }
.bundle-item.c-teal .bundle-cover { background: var(--teal); color: #fff; }
.bundle-item.c-yellow .bundle-cover { background: var(--yellow); color: var(--ink); }
.bundle-item.c-lilac .bundle-cover { background: var(--lilac); color: #fff; }
.bundle-item.c-blush .bundle-cover { background: var(--berry-soft); color: var(--ink); }
.bundle-item.c-cream .bundle-cover { background: var(--cream); color: var(--ink); }
.bundle-item.c-yellow .bundle-cover .pages,
.bundle-item.c-cream .bundle-cover .pages { background: rgba(255,255,255,.6); }

/* Premium CTA pás */
.premium-cta { background: var(--berry); color: #fff; border-radius: 32px; padding: 48px 56px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; position: relative; overflow: hidden; }
.premium-cta::before { content: ""; position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; left: -80px; opacity: .28; z-index: 0; }
.premium-cta::after { content: ""; position: absolute; width: 200px; height: 200px; background: var(--lilac); border-radius: 50%; bottom: -80px; right: -50px; opacity: .35; z-index: 0; }
.premium-cta > div { position: relative; z-index: 1; }
.premium-cta .eyebrow { color: var(--yellow); margin-bottom: 12px; }
.premium-cta h3 { color: #fff; font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.02em; font-family: 'Manrope', sans-serif; line-height: 1.1; }
.premium-cta h3 em { color: var(--yellow); font-style: normal; font-weight: 800; }
.premium-cta p { color: rgba(255,255,255,.9); font-size: 1rem; max-width: 560px; margin: 0; }
.premium-cta .cta-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* FIX detail produktu: premium-lock box neměl odstup od ceny
   (sdílená třída z homepage bloku nemá margin) */
.action-panel .premium-lock { margin: 0 0 22px; }

/*============================================================================
   PŘIHLÁŠENÍ / REGISTRACE (auth-mockup-v1)
   Šablona: woocommerce/myaccount/form-login.php (nepřihlášení na /muj-ucet/)
============================================================================*/
.auth-main { padding: 48px 0 80px; position: relative; overflow: hidden; background: var(--cream); }
.auth-main .shape-1 { position: absolute; width: 280px; height: 280px; background: var(--yellow); border-radius: 50%; top: -100px; right: -80px; opacity: .45; z-index: 0; }
.auth-main .shape-2 { position: absolute; width: 200px; height: 200px; background: var(--teal); bottom: -80px; left: -60px; border-radius: 50%; opacity: .4; z-index: 0; }
.auth-main .shape-3 { position: absolute; width: 60px; height: 60px; background: var(--lilac); border-radius: 50%; top: 30%; left: 14%; opacity: .55; z-index: 0; }
.auth-main .shape-4 { position: absolute; width: 48px; height: 48px; background: var(--berry); border-radius: 50%; bottom: 14%; right: 18%; opacity: .5; z-index: 0; }
.auth-main .container { position: relative; z-index: 1; }

.auth-tabs-wrap { max-width: 520px; margin: 0 auto 24px; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--border-soft); border-radius: 999px; }
.auth-tabs button { flex: 1; background: none; border: none; color: var(--ink-soft); padding: 12px; border-radius: 999px; font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.auth-tabs button.active { background: var(--berry); color: #fff; }

.auth-card { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 40px; }
.auth-card[hidden] { display: none; }
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head .eyebrow { margin-bottom: 12px; }
.auth-head h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; }
.auth-head h1 .berry { color: var(--berry); }
.auth-head p { font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
.auth-head p a { color: var(--berry); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.auth-card .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.auth-card .form-field label { font-size: .78rem; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.auth-card .form-field label .hint { font-size: .7rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.auth-card .form-field label .hint a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.auth-card .form-field input {
    background: #fff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .15s;
    width: 100%;
}
.auth-card .form-field input:focus { border-color: var(--berry) !important; box-shadow: 0 0 0 4px var(--berry-soft) !important; }
.auth-card .pwd-wrap { position: relative; }
.auth-card .pwd-wrap input { padding-right: 90px !important; }
.auth-card .show-pwd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; color: var(--ink-soft); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-family: inherit; }
.auth-card .show-pwd:hover { background: var(--cream); color: var(--ink); }

.auth-card .form-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; font-size: .85rem; }
.auth-card .form-checkbox { display: flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 500; cursor: pointer; margin: 0; }
.auth-card .form-checkbox input { accent-color: var(--berry); width: 16px !important; height: 16px; }
.auth-card .pill-btn { width: 100%; }
.auth-card .gdpr-note { margin-top: 16px; font-size: .78rem; color: var(--ink-soft); text-align: center; line-height: 1.5; }
.auth-card .gdpr-note a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.switch-view { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--ink-soft); }
.switch-view a { color: var(--berry); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/*============================================================================
   UGC GALERIE (ugc-gallery-mockup-v1) — page-galerie.php
============================================================================*/
.ugc-hero { padding: 64px 0; background: var(--cream); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.ugc-hero .shape-1 { position: absolute; width: 300px; height: 300px; background: var(--yellow); border-radius: 50%; top: -100px; right: -80px; opacity: .45; z-index: 0; }
.ugc-hero .shape-2 { position: absolute; width: 200px; height: 200px; background: var(--lilac); bottom: -80px; left: -60px; border-radius: 50%; opacity: .4; z-index: 0; }
.ugc-hero .shape-3 { position: absolute; width: 80px; height: 80px; background: var(--berry); border-radius: 50%; top: 34%; right: 20%; opacity: .5; z-index: 0; }
.ugc-hero .container { position: relative; z-index: 1; }
.ugc-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.ugc-hero h1 { margin-bottom: 18px; }
.ugc-hero h1 .berry { color: var(--berry); }
.ugc-hero h1 .marker { display: inline-block; background: var(--yellow); padding: 0 14px; border-radius: 14px; color: var(--ink); }
.ugc-hero .lead { color: var(--ink-soft); font-size: 1.12rem; max-width: 540px; margin-bottom: 28px; line-height: 1.6; }
.ugc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.ugc-hero-stats { display: flex; gap: 32px; font-size: .85rem; color: var(--ink-soft); align-items: center; flex-wrap: wrap; }
.ugc-hero-stats div strong { font-family: 'Manrope', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--ink); display: block; letter-spacing: -.02em; line-height: 1; }
.ugc-hero-stats div span { display: block; margin-top: 4px; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 500; }
.ugc-hero-stats .berry strong { color: var(--berry); }

.contest-box { background: var(--berry); color: #fff; border-radius: 24px; padding: 32px; position: relative; overflow: hidden; }
.contest-box::before { content: ""; position: absolute; width: 200px; height: 200px; background: var(--yellow); border-radius: 50%; top: -60px; left: -50px; opacity: .3; }
.contest-box::after { content: ""; position: absolute; width: 160px; height: 160px; background: var(--lilac); border-radius: 50%; bottom: -60px; right: -40px; opacity: .4; }
.contest-box > * { position: relative; z-index: 1; }
.contest-box .stamp { position: absolute; top: 20px; right: 20px; width: 100px; height: 100px; background: var(--yellow); color: var(--ink); border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .7rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-8deg); z-index: 2; }
.contest-box .stamp strong { display: block; font-size: 1.4rem; letter-spacing: -.02em; text-transform: none; margin: 2px 0; }
.contest-box .ce-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; display: inline-block; }
.contest-box h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; max-width: 280px; }
.contest-box h2 em { color: var(--yellow); font-style: normal; }
.contest-box p { color: rgba(255,255,255,.92); font-size: .95rem; margin-bottom: 18px; max-width: 280px; }
.contest-box ul { list-style: none; font-size: .88rem; margin: 0 0 20px; padding: 0; }
.contest-box li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.contest-box li::before { content: "✓"; color: var(--yellow); font-weight: 800; }

.masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.ugc-cell { border-radius: 18px; overflow: hidden; position: relative; cursor: pointer; display: grid; place-items: center; font-size: 3rem; transition: transform .2s; }
.ugc-cell:hover { transform: translateY(-3px); z-index: 2; }
.ugc-cell.tall { grid-row: span 2; }
.ugc-cell.wide { grid-column: span 2; }
.ugc-cell.big { grid-column: span 2; grid-row: span 2; font-size: 5rem; }
.ugc-cell.c-berry { background: var(--berry-soft); }
.ugc-cell.c-teal { background: var(--teal-soft); }
.ugc-cell.c-yellow { background: var(--yellow-soft); }
.ugc-cell.c-lilac { background: var(--lilac-soft); }
.ugc-cell.c-sky { background: #DCEBFB; }
.ugc-cell.c-blush { background: #FFE4E4; }
.ugc-cell .overlay { position: absolute; inset: auto 0 0 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(27,31,58,.78)); color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 8px; font-size: .78rem; font-weight: 500; }
.ugc-cell .overlay strong { font-family: 'Manrope', sans-serif; font-weight: 700; display: block; font-size: .85rem; margin-bottom: 2px; color: #fff; }
.ugc-cell .overlay span { font-size: .7rem; opacity: .9; }
.ugc-cell .likes { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ugc-cell .age-badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); color: var(--ink); padding: 3px 10px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ugc-cell .winner-badge { position: absolute; top: 10px; right: 10px; background: var(--yellow); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ugc-upload-cell { background: var(--berry); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; cursor: pointer; transition: transform .2s; border-radius: 18px; }
.ugc-upload-cell:hover { transform: translateY(-3px); }
.ugc-upload-cell .plus { width: 48px; height: 48px; background: var(--yellow); color: var(--ink); border-radius: 50%; display: grid; place-items: center; font-family: 'Manrope', sans-serif; font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.ugc-upload-cell strong { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: #fff; }
.ugc-upload-cell span { font-size: .72rem; color: rgba(255,255,255,.85); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }

.upload-section { padding: 64px 0 96px; background: var(--cream); border-top: 1px solid var(--line); }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; }
.upload-info h2 { margin-bottom: 14px; }
.upload-info h2 .berry { color: var(--berry); }
.upload-info > p { font-size: 1.02rem; color: var(--ink); line-height: 1.6; margin-bottom: 20px; }
.upload-info ul { list-style: none; display: grid; gap: 12px; margin: 0 0 24px; padding: 0; }
.upload-info li { display: flex; gap: 12px; align-items: start; font-size: .95rem; }
.upload-info li .ico-check { width: 28px; height: 28px; background: var(--teal-soft); color: var(--teal-deep); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; }
.rules-collapse { margin-top: 20px; background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 20px; }
.rules-collapse summary { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.rules-collapse summary::after { content: "+"; font-size: 1.3rem; color: var(--berry); font-weight: 800; }
.rules-collapse[open] summary::after { content: "−"; }
.rules-collapse p { font-size: .88rem; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.55; }
.rules-collapse a { color: var(--berry); }

.upload-form { background: #fff; border: 1px solid var(--border-soft); border-radius: 24px; padding: 32px; }
.upload-form h3 { font-size: 1.3rem; margin-bottom: 8px; }
.upload-form .form-sub { font-size: .88rem; color: var(--ink-soft); margin-bottom: 20px; }
.upload-zone { background: var(--cream); border: 2px dashed var(--border-soft); border-radius: 16px; padding: 36px; text-align: center; margin-bottom: 18px; cursor: pointer; transition: all .15s; }
.upload-zone:hover { border-color: var(--berry); background: var(--berry-soft); }
.upload-zone .ico-camera { width: 48px; height: 48px; background: var(--berry); color: #fff; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; font-size: 1.4rem; }
.upload-zone strong { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.upload-zone span { font-size: .82rem; color: var(--ink-soft); }
.upload-form .form-field input,
.upload-form .form-field select,
.upload-form .form-field textarea {
    background: #fff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
}
.upload-form .form-field input:focus,
.upload-form .form-field select:focus,
.upload-form .form-field textarea:focus { border-color: var(--berry) !important; box-shadow: 0 0 0 4px var(--berry-soft) !important; }
.upload-form .form-field textarea { resize: vertical; min-height: 80px; }

/*============================================================================
   ONLINE VYBARVOVÁNÍ (online-coloring-mockup-v1) — page-vybarvovani.php
   Samostatný full-screen template (bez site headeru), vše scopováno
   pod body.ok-coloring-app
============================================================================*/
body.ok-coloring-app { background: #F0F2F7; height: 100vh; display: flex; flex-direction: column; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; color: var(--ink); }
/* Reklama vkládaná zvenčí appku na celou obrazovku rozbíjela dvěma způsoby:
   blok vložený do <body> se stal dalším flex prvkem na výšku (ukrojil ~300 px)
   a kotvící reklama dole si navíc přidala `padding-bottom` na <body>, který se
   kvůli `box-sizing: border-box` odečetl ze 100vh (dalších ~154 px). Plátno
   i panely se o to zmenšily a spodek pravého panelu se ustřihl. Uvnitř appky
   se reklama stejně nemá kam vejít (body má overflow:hidden).

   Tohle je záplata na layout, ne řešení: ať se reklama na /vybarvit/ vůbec
   nevyžádá, patří ta stránka do výjimek v reklamním pluginu / v AdSense. */
body.ok-coloring-app { padding-top: 0 !important; padding-bottom: 0 !important; }
body.ok-coloring-app > .google-auto-placed,
body.ok-coloring-app > ins.adsbygoogle,
body.ok-coloring-app > .adsbygoogle,
body.ok-coloring-app > [id^="advads-"],
body.ok-coloring-app > .advads-injected,
html:has(body.ok-coloring-app) > ins.adsbygoogle { display: none !important; }

.ok-coloring-app .top-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; z-index: 10; flex-wrap: wrap; }
/* Dlouhý název motivu i popisky tlačítek se dřív lámaly uprostřed a lišta
   narostla na dva až tři řádky (98 px místo 76 px) — ukrojené plátno a
   rozsypaný dojem. Název se radši zkrátí třemi tečkami, popisky se nelámou
   a levá skupina neroste do zbytku šířky (flex: 0 1 auto), aby zbylo místo
   na tlačítka vpravo. Když se to na užším monitoru přeci jen nevejde, lišta
   se zalomí na celé řádky, ne uvnitř tlačítek. */
.ok-coloring-app .top-bar-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 1 auto; }
.ok-coloring-app .top-bar-center,
.ok-coloring-app .top-bar-right { flex: 0 0 auto; }
.ok-coloring-app .back-btn,
.ok-coloring-app .app-btn { white-space: nowrap; }
.ok-coloring-app .back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 999px; font-size: .86rem; color: var(--ink); font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
.ok-coloring-app .back-btn:hover { background: var(--berry); border-color: var(--berry); color: #fff; }
.ok-coloring-app .top-bar .vdiv { width: 1px; height: 24px; background: var(--line); }
.ok-coloring-app .file-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; max-width: 240px; }
.ok-coloring-app .file-name strong { font-family: 'Manrope', sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-coloring-app .file-name span { font-size: .74rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-coloring-app .top-bar-center { display: flex; gap: 4px; align-items: center; background: var(--cream); border-radius: 999px; padding: 4px; border: 1px solid var(--border-soft); }
.ok-coloring-app .tool-icon { width: 38px; height: 38px; background: transparent; border: none; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: all .15s; }
.ok-coloring-app .tool-icon:hover { background: #fff; color: var(--ink); }
.ok-coloring-app .tool-icon.disabled { opacity: .4; cursor: not-allowed; }
.ok-coloring-app .tool-icon svg { width: 18px; height: 18px; }
.ok-coloring-app .top-bar-center .vdiv { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ok-coloring-app .top-bar-right { display: flex; gap: 8px; align-items: center; }
.ok-coloring-app .app-btn { padding: 9px 14px; font-family: inherit; font-size: .86rem; font-weight: 600; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; border: 1px solid; }
.ok-coloring-app .app-btn.primary { background: var(--berry); color: #fff; border-color: var(--berry); }
.ok-coloring-app .app-btn.primary:hover { background: var(--berry-deep); border-color: var(--berry-deep); }
.ok-coloring-app .app-btn.ghost { background: #fff; color: var(--ink); border-color: var(--border-soft); }
.ok-coloring-app .app-btn.ghost:hover { background: var(--cream); border-color: var(--berry); }

/* Pravý panel 272 px (bylo 240): do užšího se „Aktivovat Premium →" nevešlo
   na jeden řádek — panel má vlastní svislý posuvník, ten z vnitřní šířky
   ukrojí dalších ~15 px a na text zbylo 112 px při potřebných 130. */
.ok-coloring-app .workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 96px 1fr 272px; overflow: hidden; }
.ok-coloring-app .tools-panel { background: #fff; border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.ok-coloring-app .tools-section { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ok-coloring-app .tools-section-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: center; margin-bottom: 4px; }
.ok-coloring-app .tool-btn { width: 56px; height: 56px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: all .15s; position: relative; }
.ok-coloring-app .tool-btn:hover { background: #fff; border-color: var(--berry); color: var(--ink); }
.ok-coloring-app .tool-btn.active { background: var(--berry); border-color: var(--berry); color: #fff; }
.ok-coloring-app .tool-btn.disabled { opacity: .4; cursor: not-allowed; }
.ok-coloring-app .tool-btn svg { width: 22px; height: 22px; }
.ok-coloring-app .tool-btn .shortcut { position: absolute; bottom: 4px; right: 6px; font-size: .6rem; color: inherit; opacity: .5; font-weight: 600; font-family: 'Manrope', sans-serif; }
.ok-coloring-app .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ok-coloring-app .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border-soft); transition: all .15s; }
.ok-coloring-app .color-swatch:hover { transform: scale(1.1); }
.ok-coloring-app .color-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.ok-coloring-app .more-colors-btn { margin-top: 8px; width: 64px; font-size: .7rem; color: var(--berry); font-weight: 600; background: transparent; border: 1px dashed var(--berry-soft); padding: 6px; border-radius: 8px; cursor: pointer; text-align: center; font-family: inherit; }
.ok-coloring-app .more-colors-btn:hover { background: var(--berry-soft); }

.ok-coloring-app .canvas-area { position: relative; background: #F0F2F7; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 32px; }
.ok-coloring-app .canvas-area::before { content: ""; position: absolute; width: 300px; height: 300px; background: var(--yellow-soft); border-radius: 50%; top: -100px; left: -100px; opacity: .35; z-index: 0; }
.ok-coloring-app .canvas-area::after { content: ""; position: absolute; width: 240px; height: 240px; background: var(--berry-soft); border-radius: 50%; bottom: -80px; right: -80px; opacity: .3; z-index: 0; }
/* Žádné width:100% — .canvas-frame je flex item v .canvas-area (display:flex),
   takže bez explicitní šířky se sama zmenší na velikost obsahu (portrétový
   obrázek pak nemá kolem sebe zbytečný bílý pás, jen 16px padding). max-width
   zůstává jako horní strop pro širší/na šířku obrázky. */
.ok-coloring-app .canvas-frame { background: #fff; border-radius: 24px; border: 1px solid var(--border-soft); padding: 16px; box-shadow: 0 10px 40px rgba(27,31,58,.08); max-width: 960px; max-height: 100%; position: relative; z-index: 1; display: grid; place-items: center; overflow: hidden; transition: transform .15s; }
.ok-coloring-app .canvas-frame svg.art { width: 100%; height: auto; }
.ok-coloring-app .canvas-frame svg.art [data-fillable] { cursor: pointer; transition: fill .15s; }
.ok-coloring-app .canvas-frame svg.art [data-fillable]:hover { opacity: .85; }
.ok-coloring-app .canvas-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px; display: flex; gap: 4px; align-items: center; z-index: 2; box-shadow: 0 4px 14px rgba(27,31,58,.06); }
.ok-coloring-app .canvas-controls button { width: 34px; height: 34px; background: transparent; border: none; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); font-size: 1.1rem; font-weight: 700; font-family: inherit; }
.ok-coloring-app .canvas-controls button:hover { background: var(--cream); color: var(--ink); }
.ok-coloring-app .canvas-controls .zoom-display { padding: 0 12px; font-size: .82rem; color: var(--ink); font-weight: 600; min-width: 56px; text-align: center; }
.ok-coloring-app .canvas-controls .vdiv { width: 1px; height: 18px; background: var(--line); }

.ok-coloring-app .right-panel { background: #fff; border-left: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.ok-coloring-app .panel-section h3 { font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 14px; }
.ok-coloring-app .recent-colors { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ok-coloring-app .recent-color { aspect-ratio: 1; border-radius: 6px; cursor: pointer; transition: transform .15s; }
.ok-coloring-app .recent-color:hover { transform: scale(1.15); }
.ok-coloring-app .project-info { background: var(--cream); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px; }
.ok-coloring-app .project-info-row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 6px; }
.ok-coloring-app .project-info-row:last-of-type { margin-bottom: 0; }
.ok-coloring-app .project-info-row strong { color: var(--ink); font-weight: 600; }
.ok-coloring-app .project-info-row span { color: var(--ink-soft); }
.ok-coloring-app .premium-upsell { background: var(--yellow-soft); border: 1px solid var(--yellow); border-radius: 14px; padding: 16px; }
.ok-coloring-app .premium-upsell strong { display: block; font-family: 'Manrope', sans-serif; font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ok-coloring-app .premium-upsell p { font-size: .8rem; color: var(--ink); line-height: 1.4; margin-bottom: 10px; opacity: .85; }
/* box-sizing + nowrap: width:100% bez border-boxu přičítá padding a text se
   pak láme na „Aktivovat / Premium / →". Šířku panelu drží .workspace výš. */
.ok-coloring-app .premium-upsell a { background: var(--yellow); color: var(--ink); border: 1px solid var(--yellow); padding: 8px 12px; border-radius: 999px; font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; width: 100%; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap; }
.ok-coloring-app .premium-upsell a:hover { background: #EFB820; border-color: #EFB820; }
.ok-coloring-app #wpadminbar { display: none; }

/* Záložka „Moje vybarvené" v Můj účet — normální stránka (ne .ok-coloring-app),
 * proto bez toho scope prefixu; grid náhledů uložených prací + upsell box
 * pro neprémiové uživatele, stejný vizuální jazyk jako premium-upsell výše. */
.ok-account-premium-upsell { max-width: 480px; background: var(--yellow-soft); border: 1px solid var(--yellow); border-radius: 14px; padding: 20px; }
.ok-account-premium-upsell strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ok-account-premium-upsell p { font-size: .9rem; color: var(--ink); line-height: 1.5; margin-bottom: 14px; opacity: .85; }
.ok-account-premium-upsell a { background: var(--yellow); color: var(--ink); border: 1px solid var(--yellow); padding: 10px 18px; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; display: inline-flex; }
.ok-account-premium-upsell a:hover { background: #EFB820; border-color: #EFB820; }

.ok-my-works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.ok-my-works-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px; transition: border-color .15s, box-shadow .15s; }
.ok-my-works-item:hover { border-color: var(--berry); box-shadow: 0 4px 14px rgba(27,31,58,.06); }
.ok-my-works-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #F0F2F7; border-radius: 8px; }
.ok-my-works-item strong { font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-my-works-item small { font-size: .76rem; color: var(--ink-soft); }

/* Vybarvovací aplikace — zrušit WP admin-bar margin na html (lišta je skrytá) */
html:has(body.ok-coloring-app) { margin-top: 0 !important; }

/* Vybarvovací aplikace — bez body paddingu pro fixed site header (header tu není) */
body.ok-coloring-app { padding-top: 0 !important; }

/* Auth — WC privacy text (hook woocommerce_register_form) menším písmem
   + odstup tlačítka */
.auth-card .woocommerce-privacy-policy-text p {
    font-size: .78rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 22px;
}
.auth-card .woocommerce-privacy-policy-text a {
    color: var(--berry);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Souhlasové checkboxy (galerie, Pro školy, účet) — normální text menším
   písmem jako GDPR poznámka u loginu; globální label v 07-forms má
   uppercase s !important, proto i tady !important */
.upload-form .form-checkbox,
.contact-form .form-checkbox,
.auth-card .form-checkbox,
.upload-form .form-checkbox span,
.contact-form .form-checkbox span,
.auth-card .form-checkbox span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: var(--ink-soft) !important;
    line-height: 1.5;
}

/* Soutěžní box v galerii — seznam dědil tmavou barvu z globálních stylů */
.contest-box ul,
.contest-box li {
    color: #fff;
}

/* === DYNAMICKÉ BLOKY HOMEPAGE ===
   Karty balíčků a dlaždice vybarvení vykreslují shortcody ([ok_home_balicky],
   [ok_ugc_mozaika]) místo statického HTML z mockupu. Na rozdíl od mockupu jsou
   klikací a mají skutečné obrázky, proto pár doplňků ke stávajícím pravidlům. */

a.bundle-item { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.bundle-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

a.ugc-cell { text-decoration: none; color: inherit; }
.ugc-cell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
a.ugc-upload { text-decoration: none; }

/* Zatím žádné vybarvení: zůstane jen výzva, mozaika se nerozpadne na proužky. */
.ugc-mosaic--prazdna { grid-template-columns: 1fr; grid-auto-rows: auto; }
.ugc-mosaic--prazdna .ugc-upload { padding: 48px 24px; }