/* PagePalm core.css — sdílený layout a responsivita všech UI kitů.
   Vzhled (barvy, fonty, radius) určují --pp-* proměnné v themes/{kit}/kit.css. */

:root {
    --pp-primary: #2563eb;
    --pp-primary-contrast: #ffffff;
    --pp-bg: #ffffff;
    --pp-surface: #f8fafc;
    --pp-text: #0f172a;
    --pp-muted: #64748b;
    --pp-font: 'Inter', system-ui, sans-serif;
    --pp-heading-font: var(--pp-font);
    --pp-radius: 8px;
    --pp-max-width: 72rem;
    --pp-section-pad: clamp(3rem, calc(8 * var(--pp-vw)), 6rem);
    --pp-heading-weight: 700;
    --pp-heading-spacing: -0.01em;
    /* zarovnání hero: center (default) nebo start = levý hero */
    --pp-hero-justify: center;
    --pp-hero-text: center;
    --pp-card-bg: var(--pp-surface);
    --pp-card-border: transparent;
    --pp-card-shadow: none;
    /* Velikost písma: --pp-root-size = základ kitu, --pp-text-scale = brand „Velikost písma“ (0,9–1,2).
       --pp-vw = 1vw násobené stejně, aby se plynulé velikosti v clamp() zvětšovaly s ostatním. */
    --pp-root-size: 100%;
    --pp-text-scale: 1;
    --pp-vw: calc(1vw * var(--pp-text-scale));
}

/* Vše v rem (písmo, mezery, tlačítka) se přepočítá ve stejném poměru. */
html { font-size: calc(var(--pp-root-size) * var(--pp-text-scale)); }

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
img { max-width: 100%; display: block; }
[hidden] { display: none; } /* atribut hidden musí přebít display:block výše (přepínání fotek, core.js) */
iframe { border: 0; }

/* --- Base --- */
body {
    font-family: var(--pp-font);
    color: var(--pp-text);
    background: var(--pp-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.pp-container {
    /* Šířka obsahu se s velikostí písma nemění (rem by ji jinak roztáhl). */
    max-width: calc(var(--pp-max-width) / var(--pp-text-scale));
    margin-inline: auto;
    padding-inline: clamp(1rem, calc(4 * var(--pp-vw)), 2rem);
}

/* .pp-hero-title: nadpis dalších snímků hero je <p> (jen jeden h1 na stránce), vypadá stejně. */
h1, h2, h3, .pp-hero-title {
    font-family: var(--pp-heading-font);
    line-height: 1.15;
    font-weight: var(--pp-heading-weight);
    letter-spacing: var(--pp-heading-tracking, var(--pp-heading-spacing));
    /* Brand „Nadpisy verzálkami“ nastaví proměnné jen při zapnutí; kity s vlastním text-transform (Bold, Nocturne) je přebijí. */
    text-transform: var(--pp-heading-transform, none);
}
h1, .pp-hero-title { font-size: clamp(2rem, calc(5 * var(--pp-vw)), 3.25rem); }
h2 { font-size: clamp(1.5rem, calc(3.5 * var(--pp-vw)), 2.25rem); }
h3 { font-size: clamp(1.125rem, calc(2 * var(--pp-vw)), 1.375rem); }

.pp-section { padding-block: var(--pp-section-pad); }
.pp-section-title { text-align: center; margin-bottom: clamp(1.5rem, calc(4 * var(--pp-vw)), 3rem); }
.pp-section-intro { text-align: center; color: var(--pp-muted); max-width: 40rem; margin: -1rem auto clamp(1.5rem, calc(4 * var(--pp-vw)), 3rem); }

/* --- Ikony (App\Icons\IconSet, <x-pp-icon>) --- */
.pp-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.pp-icon--image { object-fit: contain; }
.pp-icon--text, .pp-feature-icon .pp-icon--text { width: auto; height: auto; font-style: normal; line-height: 1; }
/* SVG v benefitech dědí velikost z font-size kitu (.pp-feature-icon), stejně jako emoji */
.pp-feature-icon .pp-icon { color: var(--pp-primary); }
.pp-info-item dt .pp-icon { margin-right: 0.35rem; color: var(--pp-primary); }

/* --- Button --- */
.pp-button {
    display: inline-block;
    background: var(--pp-primary);
    color: var(--pp-primary-contrast);
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: var(--pp-radius);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.pp-button:hover { filter: brightness(1.1); }
.pp-button--inverse { background: var(--pp-primary-contrast); color: var(--pp-primary); }

/* --- Navbar --- */
.pp-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pp-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--pp-text) 10%, transparent);
}
.pp-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    flex-wrap: wrap;
}
.pp-brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pp-text);
    text-decoration: none;
    font-family: var(--pp-heading-font);
}
/* Logo webu (App\Websites\WebsiteLogo): samotné, nebo vedle názvu. Výšku nese inline styl z nastavení. */
.pp-brand--logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.pp-brand-logo { display: block; width: auto; max-width: min(60vw, 20rem); object-fit: contain; }
.pp-nav { display: flex; gap: 1.5rem; }
.pp-nav a { color: var(--pp-text); text-decoration: none; font-weight: 500; }
.pp-nav a:hover { color: var(--pp-primary); }
.pp-nav a.is-active { color: var(--pp-primary); }
.pp-nav-toggle { display: none; }
.pp-nav-burger { display: none; cursor: pointer; padding: 0.5rem; }
.pp-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--pp-text);
    margin-block: 5px;
}

.pp-member-links { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0.75rem; font-size: 0.9rem; }
.pp-member-name { color: var(--pp-muted); }
.pp-inline-form { display: inline; }
.pp-inline-form button {
    background: none; border: 0; padding: 0; font: inherit;
    color: var(--pp-primary); cursor: pointer;
}
.pp-members-form-inner { max-width: 26rem; display: grid; gap: 1rem; }
.pp-members-switch { color: var(--pp-muted); font-size: 0.9rem; }

.pp-lang-switch { display: inline-flex; gap: 0.4rem; margin-left: 0.75rem; }
.pp-lang-switch a { font-size: 0.8rem; color: var(--pp-muted); text-decoration: none; }
.pp-lang-switch a.pp-lang-active { color: var(--pp-primary); font-weight: 700; }

.pp-nav-item { position: relative; }
.pp-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: var(--pp-bg);
    border: 1px solid color-mix(in srgb, var(--pp-text) 12%, transparent);
    border-radius: var(--pp-radius);
    padding: 0.4rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--pp-text) 8%, transparent);
    z-index: 60;
}
.pp-nav-item:hover .pp-nav-dropdown,
.pp-nav-item:focus-within .pp-nav-dropdown { display: grid; }
.pp-nav-dropdown a { padding: 0.45rem 0.75rem; border-radius: calc(var(--pp-radius) / 2); }
.pp-nav-dropdown a:hover { background: var(--pp-surface); }

@media (max-width: 760px) {
    .pp-nav-burger { display: block; }
    .pp-nav-item .pp-nav-dropdown {
        display: grid;
        position: static;
        border: 0;
        box-shadow: none;
        padding-left: 1rem;
    }
    .pp-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding-block: 0.5rem;
    }
    .pp-nav a { padding-block: 0.6rem; }
    .pp-nav-toggle:checked ~ .pp-nav { display: flex; }
}

/* --- Navbar varianty (uikits.config.header_variant) --- */
.pp-navbar--centered .pp-navbar-inner {
    flex-direction: column;
    gap: 0.35rem;
    padding-block: 0.85rem;
    justify-content: center;
}
.pp-navbar--centered .pp-nav { justify-content: center; flex-wrap: wrap; }
.pp-navbar--centered .pp-brand { font-size: 1.35rem; }
.pp-navbar--minimal {
    position: static;
    background: transparent;
    border-bottom: 0;
}
.pp-navbar--minimal .pp-navbar-inner { min-height: 4.5rem; }

@media (max-width: 760px) {
    .pp-navbar--centered .pp-navbar-inner { flex-direction: row; }
}

/* --- Footer varianty (uikits.config.footer_variant) --- */
.pp-footer--minimal .pp-footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
}

/* --- Hero --- */
.pp-hero {
    background: var(--pp-surface);
    padding-block: clamp(4rem, calc(12 * var(--pp-vw)), 8rem);
    text-align: var(--pp-hero-text);
}
.pp-hero--image {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.pp-hero--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.pp-hero-inner { position: relative; display: grid; gap: 1.25rem; justify-items: var(--pp-hero-justify); }
.pp-hero-subtitle { font-size: clamp(1rem, calc(2 * var(--pp-vw)), 1.25rem); color: inherit; opacity: 0.85; max-width: 40rem; }
.pp-hero:not(.pp-hero--image) .pp-hero-subtitle { color: var(--pp-muted); opacity: 1; }

/* --- Obrázek na pozadí sekce (App\Pages\SectionBackground) ---
   Kořen sekce nese data-pp-bg="{překrytí}" a obrázek v --pp-section-bg. Překrytí je vrstva přechodu nad
   obrázkem (žádný pseudo-prvek – ty si berou kity) a zároveň přepíná barvy uvnitř sekce kvůli čitelnosti. */
:root {
    /* Barvy brandu vyhodnocené na kořeni – sekce s překrytím „brand“ si --pp-primary lokálně prohazuje. */
    --pp-primary-root: var(--pp-primary);
    --pp-primary-contrast-root: var(--pp-primary-contrast);
}
.pp-section[data-pp-bg] {
    background-image: linear-gradient(var(--pp-bg-overlay, transparent), var(--pp-bg-overlay, transparent)), var(--pp-section-bg);
    background-size: cover;
    background-position: center;
}
/* Karty uvnitř sekce berou pozadí z --pp-card-bg nebo --pp-surface. --pp-bg se nepřepisuje: kity ho používají i jako barvu textu. */
.pp-section[data-pp-bg="dark"] {
    --pp-bg-overlay: rgb(15 23 42 / 0.66);
    --pp-text: #ffffff;
    --pp-muted: rgb(255 255 255 / 0.8);
    --pp-surface: rgb(255 255 255 / 0.1);
    --pp-card-bg: rgb(255 255 255 / 0.1);
    --pp-text-inverse: #111827; /* text na ploše v barvě --pp-text (např. tlačítko v Nocturne) */
    color: var(--pp-text);
}
.pp-section[data-pp-bg="light"] {
    --pp-bg-overlay: rgb(255 255 255 / 0.84);
    --pp-text: #111827;
    --pp-muted: #4b5563;
    --pp-surface: rgb(255 255 255 / 0.72);
    --pp-card-bg: rgb(255 255 255 / 0.72);
    --pp-text-inverse: #ffffff;
    color: var(--pp-text);
}
.pp-section[data-pp-bg="brand"] {
    --pp-bg-overlay: color-mix(in srgb, var(--pp-primary-root) 86%, transparent);
    --pp-text: var(--pp-primary-contrast-root);
    --pp-muted: color-mix(in srgb, var(--pp-primary-contrast-root) 82%, transparent);
    --pp-surface: color-mix(in srgb, var(--pp-primary-contrast-root) 12%, transparent);
    --pp-card-bg: color-mix(in srgb, var(--pp-primary-contrast-root) 12%, transparent);
    --pp-text-inverse: var(--pp-primary-root);
    /* Tlačítka a odkazy by na podkladu v barvě brandu splynuly – uvnitř sekce se barvy prohodí. */
    --pp-primary: var(--pp-primary-contrast-root);
    --pp-primary-contrast: var(--pp-primary-root);
    color: var(--pp-text);
}
/* Úvodní sekce má vlastní obrázek, světlý text i tmavou vrstvu (.pp-hero--image::before) a barvy kitu
   se v ní nepřepisují; ostatní volby jen přebarví vrstvu a text. */
.pp-hero--image[data-pp-bg="light"] { color: #111827; }
.pp-hero--image[data-pp-bg="light"]::before { background: rgb(255 255 255 / 0.84); }
.pp-hero--image[data-pp-bg="brand"] { color: var(--pp-primary-contrast-root); }
.pp-hero--image[data-pp-bg="brand"]::before { background: color-mix(in srgb, var(--pp-primary-root) 86%, transparent); }
.pp-hero--image[data-pp-bg="brand"] .pp-button { background: var(--pp-primary-contrast-root); color: var(--pp-primary-root); }
.pp-hero--image[data-pp-bg="none"]::before { display: none; }

/* --- Hero se snímky (App\Pages\HeroSlides, core.js heroSlides()) ---
   Snímky leží v jedné buňce mřížky (výška = nejvyšší snímek, žádný posun obsahu). Fotku snímku kreslí jeho
   ::before přes celou sekci (snímek není pozicovaný); vrstvy: fotka 0 → překryv sekce (::before) 1 → text 2.
   Snímek sám nikdy nedostává opacity ani transform, aby nevznikl kontext vrstvení a text zůstal nad překryvem.
   Bez JS je vidět jen první snímek; pohyb (prolínání, přiblížení, nástup textů) jen s .pp-hero--motion. */
.pp-hero--slides { display: grid; isolation: isolate; overflow: hidden; }
.pp-hero--slides::before { z-index: 1; }
.pp-hero-slide {
    grid-area: 1 / 1;
    display: grid;
    align-items: center;
    /* Obrázek z inline stylu jen předává ::before (background-image: inherit); sám se nekreslí. */
    background-size: 0 0;
    background-repeat: no-repeat;
}
.pp-hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    opacity: 0;
}
.pp-hero-slide.is-active::before { opacity: 1; }
.pp-hero--slides .pp-hero-inner { z-index: 2; }
/* Úvodní řádek na fotce: barva textu hero místo tlumené barvy kitu, která na tmavém překryvu zaniká. */
.pp-hero--slides .pp-kicker { color: color-mix(in srgb, currentColor 85%, transparent); }
.pp-hero-slide:not(.is-active) > .pp-hero-inner { visibility: hidden; }

.pp-hero--motion .pp-hero-slide::before { transition: opacity 1s ease; }
/* Přiblížení je animace (ne přechod), aby ho pauza zastavila na místě (WCAG 2.2.2).
   Odcházející snímek (.is-leaving, core.js ho drží po dobu prolnutí) animaci dokončuje, takže neposkočí. */
.pp-hero--motion .pp-hero-slide.is-active::before,
.pp-hero--motion .pp-hero-slide.is-leaving::before { animation: pp-hero-zoom 7s linear forwards; }
/* Stejná specifičnost jako pravidlo výše a až za ním: zkratka animation by jinak vrátila running. */
.pp-hero--paused .pp-hero-slide.is-active::before,
.pp-hero--paused .pp-hero-slide.is-leaving::before { animation-play-state: paused; }
@keyframes pp-hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
.pp-hero--motion .pp-hero-slide > .pp-hero-inner { transition: visibility 0s linear 0.6s; }
.pp-hero--motion .pp-hero-slide.is-active > .pp-hero-inner { transition-delay: 0s; }
.pp-hero--motion .pp-hero-slide .pp-hero-inner > * {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.pp-hero--motion .pp-hero-slide.is-active .pp-hero-inner > * { opacity: 1; transform: none; }
/* Postupný nástup: kicker → nadpis → podnadpis → tlačítko. */
.pp-hero--motion .pp-hero-slide.is-active .pp-hero-inner > :nth-child(1) { transition-delay: 0.4s; }
.pp-hero--motion .pp-hero-slide.is-active .pp-hero-inner > :nth-child(2) { transition-delay: 0.55s; }
.pp-hero--motion .pp-hero-slide.is-active .pp-hero-inner > :nth-child(3) { transition-delay: 0.7s; }
.pp-hero--motion .pp-hero-slide.is-active .pp-hero-inner > :nth-child(4) { transition-delay: 0.85s; }

/* Ovládání: tečky a pauza/přehrát. Barva z textu hero (currentColor), kit může přebarvit. */
.pp-hero-controls { display: none; }
.js .pp-hero-controls {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: clamp(0.75rem, calc(3 * var(--pp-vw)), 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.pp-hero-dots { display: flex; gap: 0.25rem; }
.pp-hero-dots button,
.pp-hero-pause {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.pp-hero-dots button::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    opacity: 0.75;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.pp-hero-dots button[aria-current="true"]::before { background: currentColor; opacity: 1; }
.pp-hero-dots button:hover::before { opacity: 1; }
.pp-hero-dots button:focus-visible,
.pp-hero-pause:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* Ikona pauzy: dva svislé pruhy; po pozastavení trojúhelník „přehrát“. */
.pp-hero-pause::before,
.pp-hero-pause::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    width: 0.2rem;
    height: 0.75rem;
    background: currentColor;
    border-radius: 1px;
}
.pp-hero-pause::before { left: 0.55rem; }
.pp-hero-pause::after { right: 0.55rem; }
.pp-hero--paused .pp-hero-pause::before {
    left: 0.7rem;
    width: 0;
    height: 0;
    background: none;
    border-style: solid;
    border-width: 0.4rem 0 0.4rem 0.65rem;
    border-color: transparent transparent transparent currentColor;
    border-radius: 0;
    top: 0.475rem;
}
.pp-hero--paused .pp-hero-pause::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pp-hero-slide::before,
    .pp-hero-slide > .pp-hero-inner,
    .pp-hero-slide .pp-hero-inner > * { transition: none !important; transform: none !important; animation: none !important; }
}

/* --- Profilový hero (hero s polem image: text vlevo, fotka vpravo) --- */
.pp-hero-profile { position: relative; overflow: hidden; padding-block: clamp(4rem, calc(10 * var(--pp-vw)), 7rem); }
.pp-hero-profile-inner { display: grid; gap: clamp(2rem, calc(5 * var(--pp-vw)), 4rem); align-items: center; }
@media (min-width: 900px) { .pp-hero-profile-inner { grid-template-columns: 1.1fr 0.9fr; } }
.pp-hero-profile-text { display: grid; gap: 1rem; justify-items: var(--pp-hero-justify); text-align: var(--pp-hero-text); }
.pp-kicker { color: var(--pp-muted); font-weight: 500; letter-spacing: 0.04em; }
.pp-hero-rotating { font-size: clamp(1.1rem, calc(2.4 * var(--pp-vw)), 1.5rem); font-weight: 600; color: var(--pp-primary); min-height: 1.5em; }
.pp-hero-profile .pp-hero-subtitle { max-width: 36rem; color: var(--pp-muted); opacity: 1; }
.pp-hero-profile-media { position: relative; max-width: 420px; margin-inline: auto; }
.pp-hero-profile-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pp-radius); position: relative; }
.pp-hero-wave { display: none; } /* kit může zobrazit */

/* --- Výška hero (App\Pages\HeroHeight) ---
   Třída na <body>: pp-hero-h-home-{tall|full} na úvodní stránce, pp-hero-h-page-{low|tall} na ostatních.
   Výchozí výšky (auto / medium) žádnou třídu nemají – hero zůstává, jak ho kreslí šablona.
   Prefix body zvedá specifičnost nad pravidla kitů (např. Editorial padding, Nocturne min-height profilu).
   Vyšší hero má obsah svisle na střed; platí pro klasický, profilový i hero se snímky. */
body.pp-hero-h-home-tall .pp-hero,
body.pp-hero-h-home-full .pp-hero,
body.pp-hero-h-page-tall .pp-hero {
    display: grid;
    align-content: center;
}
/* Kontejner jako položka mřížky by se s margin-inline: auto smrštil na obsah. */
body.pp-hero-h-home-tall .pp-hero > .pp-container,
body.pp-hero-h-home-full .pp-hero > .pp-container,
body.pp-hero-h-page-tall .pp-hero > .pp-container { width: 100%; }
body.pp-hero-h-home-tall .pp-hero { min-height: 70svh; }
/* Celá obrazovka bez hlavičky nad hero; --pp-header-h si může upřesnit šablona. */
body.pp-hero-h-home-full .pp-hero { min-height: calc(100svh - var(--pp-header-h, 4.5rem)); }
body.pp-hero-h-page-tall .pp-hero { min-height: 50svh; }
body.pp-hero-h-page-low .pp-hero { padding-block: clamp(2rem, calc(5 * var(--pp-vw)), 3.5rem); }

/* --- O mně (sekce about_profile) --- */
.pp-about-profile-inner { display: grid; gap: clamp(2rem, calc(5 * var(--pp-vw)), 4rem); align-items: start; }
@media (min-width: 900px) { .pp-about-profile-inner { grid-template-columns: 0.8fr 1.2fr; } }
.pp-about-profile-media img { width: 100%; border-radius: var(--pp-radius); object-fit: cover; }
.pp-about-profile-text { display: grid; gap: 1.25rem; }
.pp-about-profile .pp-section-title { text-align: left; margin-bottom: 0; }
.pp-lead { font-size: 1.15rem; font-weight: 600; }
.pp-tag-group h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.pp-steps { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 0; margin: 0; list-style: none; counter-reset: pp-step; }
.pp-steps li { counter-increment: pp-step; display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.pp-steps li::before { content: '#0' counter(pp-step); color: var(--pp-primary); font-weight: 700; font-size: 0.85rem; }

/* --- Zkušenosti (sekce resume) --- */
.pp-resume-list { list-style: none; padding: 0; margin: 0; display: grid; }
.pp-resume-item { display: grid; gap: 0.5rem 2rem; padding-block: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--pp-text) 12%, transparent); }
@media (min-width: 760px) { .pp-resume-item { grid-template-columns: minmax(180px, 1fr) 3fr; } }
.pp-resume-org h3 { font-size: 1.05rem; }
.pp-resume-period, .pp-resume-place { color: var(--pp-muted); font-size: 0.9rem; }
.pp-resume-body h4 { font-size: 1.1rem; margin-bottom: 0.35rem; color: var(--pp-primary); }
.pp-resume-body p { color: var(--pp-muted); }

/* --- Mřížka karet (Výhody, Tým, Reference) ---
   Počet sloupců podle počtu karet (App\Pages\CardGrid): šablona sekce dá --pp-c2…--pp-c5 = sloupců při stropu 2–5,
   tady se strop vybere podle šířky. Poslední neúplný řádek je na středu. Kit sníží strop přes --pp-cols-wide. */
.pp-card-grid {
    --pp-cols: 1;
    --pp-grid-gap: clamp(1rem, calc(3 * var(--pp-vw)), 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pp-grid-gap);
}
.pp-card-grid > * {
    flex: 0 0 calc((100% - (var(--pp-cols) - 1) * var(--pp-grid-gap)) / var(--pp-cols));
    min-width: 0;
}
@media (min-width: 600px) { .pp-card-grid { --pp-cols: var(--pp-c2, 2); } }
@media (min-width: 900px) { .pp-card-grid { --pp-cols: var(--pp-c3, 3); } }
@media (min-width: 1100px) { .pp-card-grid { --pp-cols: var(--pp-c4, 3); } }
@media (min-width: 1280px) { .pp-card-grid { --pp-cols: var(--pp-cols-wide, var(--pp-c5, 3)); } }
.pp-feature, .pp-team-member, .pp-testimonial {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-card-border);
    box-shadow: var(--pp-card-shadow);
    border-radius: var(--pp-radius);
    padding: 1.5rem;
}
.pp-feature-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.pp-feature h3, .pp-team-member h3 { margin-bottom: 0.35rem; }
.pp-feature p, .pp-team-member p { color: var(--pp-muted); }

.pp-team-member img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 0.75rem;
}
.pp-team-role { font-weight: 600; color: var(--pp-primary); }

.pp-testimonial blockquote { font-style: italic; margin-bottom: 1rem; }
.pp-testimonial figcaption { display: flex; align-items: center; gap: 0.75rem; }
.pp-testimonial img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pp-testimonial small { display: block; color: var(--pp-muted); }

/* --- Čísla (sekce stats): mobil 2 sloupce, jinak podle počtu (data-cols = min(počet, 4)) --- */
.pp-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, calc(4 * var(--pp-vw)), 2.5rem) clamp(1rem, calc(3 * var(--pp-vw)), 2rem); text-align: center; }
.pp-stats-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
    .pp-stats-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-stats-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pp-stat { display: grid; gap: 0.35rem; align-content: start; }
.pp-stat-number { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25em; margin: 0; line-height: 1; }
.pp-stat-value {
    font-family: var(--pp-heading-font);
    font-size: var(--pp-stat-size, clamp(2.25rem, calc(6 * var(--pp-vw)), 3.5rem));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    word-spacing: -0.12em;
    color: var(--pp-primary);
}
.pp-stat-unit { font-size: 1.1rem; font-weight: 600; color: var(--pp-text); }
.pp-stat-label { margin: 0; color: var(--pp-muted); }

/* --- Loga (sekce logos): stejná výška, ve stupních šedi, barevně po najetí myší --- */
.pp-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 40%), 1fr));
    gap: clamp(1rem, calc(3 * var(--pp-vw)), 2rem);
    align-items: center;
}
.pp-logo { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--pp-logo-h, 3.5rem); color: var(--pp-muted); text-decoration: none; }
.pp-logo img {
    height: var(--pp-logo-h, 3.5rem);
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.pp-logo-name { font-family: var(--pp-heading-font); font-weight: 700; font-size: 1.15rem; text-align: center; opacity: 0.8; }
@media (hover: hover) {
    a.pp-logo:hover img, div.pp-logo:hover img { filter: none; opacity: 1; }
    a.pp-logo:hover .pp-logo-name { opacity: 1; color: var(--pp-text); }
}
a.pp-logo:focus-visible img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .pp-logo img { transition: none; }
}

/* --- Gallery --- */
.pp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.pp-gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--pp-radius);
}

/* --- CTA --- */
.pp-cta {
    background: var(--pp-primary);
    color: var(--pp-primary-contrast);
    border-radius: var(--pp-radius);
    padding: clamp(2rem, calc(6 * var(--pp-vw)), 4rem);
    text-align: center;
    display: grid;
    gap: 1rem;
    justify-items: center;
}
.pp-cta p { opacity: 0.9; max-width: 36rem; }

/* --- Prose (richtext) --- */
.pp-prose { max-width: 46rem; }
.pp-prose p { margin-bottom: 1rem; }
.pp-prose h2, .pp-prose h3 { margin-block: 1.75rem 0.75rem; }
.pp-prose ul, .pp-prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.pp-prose a { color: var(--pp-primary); }
.pp-prose img { border-radius: var(--pp-radius); margin-block: 1rem; }

/* --- Contact form --- */
.pp-form { display: grid; gap: 1rem; max-width: 36rem; }
.pp-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pp-form label { display: grid; gap: 0.35rem; font-weight: 500; }
.pp-form input, .pp-form textarea {
    font: inherit;
    padding: 0.65rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--pp-text) 20%, transparent);
    border-radius: var(--pp-radius);
    background: var(--pp-bg);
    color: var(--pp-text);
}
.pp-form input:focus, .pp-form textarea:focus {
    outline: 2px solid var(--pp-primary);
    outline-offset: 1px;
    border-color: transparent;
}
.pp-form .pp-button { justify-self: start; }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pp-form-success {
    background: var(--pp-surface);
    border: 1px solid var(--pp-primary);
    border-radius: var(--pp-radius);
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    max-width: 36rem;
}
.pp-form-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--pp-radius);
    color: #b91c1c;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    max-width: 36rem;
    font-size: 0.9rem;
}
.pp-form-errors p { margin: 0.15rem 0; }

/* --- Map & info --- */
.pp-map iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--pp-radius); }
.pp-map-address { margin-bottom: 1rem; font-weight: 500; }
.pp-info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.pp-info-item {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    padding: 1rem 1.25rem;
}
.pp-info-item dt { font-weight: 600; margin-bottom: 0.25rem; }
.pp-info-item dd { color: var(--pp-muted); }

/* --- Soubory ke stažení (sekce downloads, přílohy produktu) --- */
.pp-downloads .pp-container { max-width: 52rem; }
.pp-downloads-group + .pp-downloads-group { margin-top: clamp(1.5rem, calc(4 * var(--pp-vw)), 2.5rem); }
.pp-downloads-group-title { font-size: 1.15rem; margin-bottom: 0.75rem; }
.pp-download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pp-download {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-card-border);
    box-shadow: var(--pp-card-shadow);
    border-radius: var(--pp-radius);
    color: var(--pp-text);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.pp-download:hover { transform: translateY(-1px); border-color: var(--pp-primary); }
.pp-download-type {
    flex: none;
    min-width: 3.1rem;
    padding: 0.3rem 0.4rem;
    border-radius: calc(var(--pp-radius) / 2);
    background: var(--pp-primary);
    color: var(--pp-primary-contrast);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}
.pp-download-body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.pp-download-title { font-weight: 600; overflow-wrap: anywhere; }
.pp-download:hover .pp-download-title { color: var(--pp-primary); }
.pp-download-desc { color: var(--pp-muted); font-size: 0.9rem; }
.pp-download-meta { flex: none; color: var(--pp-muted); font-size: 0.85rem; white-space: nowrap; }
.pp-product-downloads { margin: 1.75rem 0; }
.pp-product-downloads h3 { margin-bottom: 0.75rem; }
@media (max-width: 480px) {
    .pp-download { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
    .pp-download-meta { flex-basis: 100%; }
}

/* --- Blog --- */
.pp-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, calc(3 * var(--pp-vw)), 2rem);
}
.pp-post-card {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pp-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pp-post-card-body { padding: 1.25rem; display: grid; gap: 0.5rem; }
.pp-post-card h2 { font-size: 1.2rem; }
.pp-post-card h2 a { color: var(--pp-text); text-decoration: none; }
.pp-post-card h2 a:hover { color: var(--pp-primary); }
.pp-post-meta { color: var(--pp-muted); font-size: 0.85rem; }
.pp-post-card-body p:last-child { color: var(--pp-muted); }
.pp-posts-empty { text-align: center; color: var(--pp-muted); }

.pp-post-header { padding-block: clamp(2.5rem, calc(7 * var(--pp-vw)), 5rem) 0; text-align: center; }
.pp-post-perex { max-width: 42rem; margin-inline: auto; color: var(--pp-muted); font-size: 1.1rem; }
.pp-post-cover {
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    border-radius: var(--pp-radius);
    margin-top: 2rem;
}

/* --- Catalog --- */
.pp-cat-grid, .pp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(1rem, calc(3 * var(--pp-vw)), 2rem);
}
.pp-cat-card, .pp-product-card {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--pp-text);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}
.pp-cat-card:hover, .pp-product-card:hover { transform: translateY(-3px); }
.pp-cat-card img, .pp-product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pp-cat-card-body, .pp-product-card-body { padding: 1.1rem; display: grid; gap: 0.35rem; }
.pp-cat-card h2, .pp-product-card h2, .pp-product-card h3 { font-size: 1.15rem; }
.pp-cat-card-body p:last-child { color: var(--pp-muted); font-size: 0.9rem; }
/* Sekce featured_products: odkaz na celý katalog pod mřížkou. */
.pp-featured-more { margin-top: clamp(1.5rem, calc(4 * var(--pp-vw)), 2.5rem); text-align: center; }
.pp-price { color: var(--pp-primary); font-weight: 700; }
.pp-price--big { font-size: 1.6rem; }

.pp-product-detail-grid {
    display: grid;
    gap: clamp(1.5rem, calc(4 * var(--pp-vw)), 3rem);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}
.pp-product-gallery { display: grid; gap: 0.75rem; }
.pp-product-gallery img { width: 100%; border-radius: var(--pp-radius); }
.pp-product-noimage {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    color: var(--pp-muted);
}
.pp-product-info { display: grid; gap: 1rem; align-content: start; }
.pp-product-info .pp-post-meta a { color: var(--pp-muted); }

/* Odkaz zpět (kategorie → katalog, produkt → kategorie). */
.pp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 1.25rem;
    color: var(--pp-muted);
    font-size: 0.9rem;
    text-decoration: none;
}
.pp-back::before { content: '←'; }
.pp-back:hover { color: var(--pp-primary); }

/* Trvalá navigace katalogu (App\Catalog\CatalogNav): tlačítka nahoře, od 860 px volitelně panel vlevo/vpravo. */
.pp-catalog-layout { display: grid; gap: clamp(1.25rem, calc(3 * var(--pp-vw)), 2.5rem); align-items: start; }
.pp-catalog-main { min-width: 0; }
.pp-catalog-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-catalog-nav a {
    padding: 0.5rem 0.9rem;
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    color: var(--pp-text);
    font-size: 0.95rem;
    text-decoration: none;
}
.pp-catalog-nav a:hover { color: var(--pp-primary); }
.pp-catalog-nav a[aria-current] { background: var(--pp-primary); color: var(--pp-primary-contrast); font-weight: 600; }
@media (min-width: 860px) {
    .pp-catalog-layout--left { grid-template-columns: 15rem minmax(0, 1fr); }
    .pp-catalog-layout--right { grid-template-columns: minmax(0, 1fr) 15rem; }
    .pp-catalog-layout--right .pp-catalog-nav { order: 2; }
    .pp-catalog-layout--left .pp-catalog-nav,
    .pp-catalog-layout--right .pp-catalog-nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 5.5rem; }
}

/* --- Objednávka a pokladna (modul Objednávky; e-shop později použije totéž) --- */
.pp-product-order { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-top: 0.5rem; }
.pp-product-order-qty { display: grid; gap: 0.35rem; font-weight: 500; font-size: 0.9rem; }
.pp-product-order-qty input {
    font: inherit;
    width: 5.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--pp-text) 20%, transparent);
    border-radius: var(--pp-radius);
    background: var(--pp-bg);
    color: var(--pp-text);
}

.pp-order-intro { margin-bottom: 2rem; }
.pp-order-group { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.pp-order-group:first-of-type { margin-top: 0; }
.pp-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pp-order-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.9rem 0.6rem 0.6rem;
    background: var(--pp-surface);
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    scroll-margin-top: 6rem;
    transition: border-color 0.15s ease;
}
.pp-order-item.is-selected { border-color: var(--pp-primary); }
.pp-order-item.is-highlighted { animation: pp-order-highlight 1.6s ease 1; }
@keyframes pp-order-highlight {
    0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
.pp-order-item-image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: calc(var(--pp-radius) * 0.6);
    background: color-mix(in srgb, var(--pp-text) 8%, transparent);
}
.pp-order-item-body { display: grid; gap: 0.15rem; min-width: 0; }
.pp-order-item-name { font-weight: 600; color: var(--pp-text); text-decoration: none; overflow-wrap: anywhere; }
a.pp-order-item-name:hover { color: var(--pp-primary); }

.pp-qty { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--pp-text) 20%, transparent); border-radius: var(--pp-radius); overflow: hidden; background: var(--pp-bg); }
.pp-qty-button {
    width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--pp-text);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.pp-qty-button:hover { background: color-mix(in srgb, var(--pp-primary) 12%, transparent); color: var(--pp-primary); }
.pp-qty input {
    width: 3.25rem;
    border: 0;
    border-inline: 1px solid color-mix(in srgb, var(--pp-text) 12%, transparent);
    background: transparent;
    color: var(--pp-text);
    font: inherit;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pp-qty input::-webkit-outer-spin-button, .pp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-qty input:focus { outline: 2px solid var(--pp-primary); outline-offset: -2px; }

.pp-order-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    background: var(--pp-bg);
    border: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent);
    border-radius: var(--pp-radius);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--pp-text) 16%, transparent);
}
.pp-order-bar-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; min-width: 0; }
.pp-order-bar-count { color: var(--pp-muted); }
.pp-order-bar-total { font-size: 1.3rem; color: var(--pp-text); }
.pp-order-bar-note { flex-basis: 100%; color: var(--pp-muted); font-size: 0.85rem; }
.pp-order-bar .pp-button.is-disabled { opacity: 0.45; }
.pp-order-bar.is-shaking { animation: pp-order-shake 0.35s ease 1; }
@keyframes pp-order-shake {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.is-updating [data-pp-sum] { opacity: 0.55; transition: opacity 0.15s ease; }

.pp-checkout-title { margin-bottom: 1.5rem; }
.pp-checkout-grid { display: grid; gap: clamp(1.5rem, calc(4 * var(--pp-vw)), 3rem); align-items: start; }
@media (min-width: 900px) {
    .pp-checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
    .pp-checkout-summary { position: sticky; top: 5.5rem; }
}
.pp-checkout-main.pp-form { max-width: none; gap: 1.5rem; }
.pp-checkout-block { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.pp-checkout-block[hidden] { display: none; }
.pp-checkout-block legend { padding: 0; margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 700; }
.pp-checkout-company summary { cursor: pointer; color: var(--pp-muted); font-size: 0.95rem; }
.pp-checkout-company[open] { display: grid; gap: 1rem; }

.pp-options { display: grid; gap: 0.5rem; }
.pp-form .pp-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--pp-text) 20%, transparent);
    border-radius: var(--pp-radius);
    background: var(--pp-bg);
    font-weight: 400;
    cursor: pointer;
}
.pp-form .pp-option input { padding: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--pp-primary); }
.pp-option:has(input:checked) { border-color: var(--pp-primary); box-shadow: inset 0 0 0 1px var(--pp-primary); }
.pp-option-body { display: grid; gap: 0.1rem; }
.pp-option-name { font-weight: 600; }
.pp-option-note { color: var(--pp-muted); font-size: 0.85rem; }
.pp-option-price { font-weight: 600; white-space: nowrap; }
.pp-option-unavailable { display: none; }
.pp-option.is-disabled { opacity: 0.55; cursor: not-allowed; }
.pp-option.is-disabled .pp-option-unavailable { display: block; }

.pp-checkout-summary {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
}
.pp-checkout-summary h2 { font-size: 1.15rem; }
.pp-summary-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.pp-summary-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; }
.pp-summary-qty { color: var(--pp-muted); }
.pp-summary-price, .pp-summary-totals dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-summary-totals { display: grid; gap: 0.4rem; margin: 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent); }
.pp-summary-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.pp-summary-totals dt { color: var(--pp-muted); }
.pp-summary-totals dd { margin: 0; }
.pp-summary-totals .pp-summary-total { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent); font-size: 1.25rem; font-weight: 700; }
.pp-summary-totals .pp-summary-total dt { color: var(--pp-text); }
.pp-summary-note { margin: 0; color: var(--pp-muted); font-size: 0.85rem; }
.pp-checkout-terms { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; }
.pp-checkout-terms input { margin-top: 0.2rem; accent-color: var(--pp-primary); }
.pp-checkout-submit { width: 100%; text-align: center; padding-block: 0.95rem; font-size: 1.05rem; }

.pp-checkout-done .pp-container { display: grid; gap: 2rem; justify-items: center; }
.pp-done-head { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.pp-done-head .pp-checkout-title { margin: 0; }
.pp-done-mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--pp-primary);
    color: var(--pp-primary-contrast);
    font-size: 1.75rem;
}
.pp-done-note { color: var(--pp-muted); }
.pp-done-summary { width: min(100%, 34rem); }
.pp-done-instructions { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent); }
.pp-done-instructions h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.pp-done-back { margin: 0; }
@media (max-width: 560px) {
    .pp-order-item { grid-template-columns: 3rem minmax(0, 1fr); }
    .pp-order-item .pp-qty { grid-column: 1 / -1; justify-self: end; }
    .pp-order-item-image { width: 3rem; height: 3rem; }
    .pp-order-bar { bottom: 0; margin-inline: calc(clamp(1rem, calc(4 * var(--pp-vw)), 2rem) * -1); border-radius: 0; border-inline: 0; }
}

/* --- Portfolio --- */
.pp-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(1rem, calc(3 * var(--pp-vw)), 2rem);
}
.pp-portfolio-card {
    background: var(--pp-card-bg);
    border: 1px solid var(--pp-card-border);
    box-shadow: var(--pp-card-shadow);
    border-radius: var(--pp-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--pp-text);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}
.pp-portfolio-card:hover { transform: translateY(-3px); }
.pp-portfolio-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pp-portfolio-card-body { padding: 1.1rem; display: grid; gap: 0.4rem; }
.pp-portfolio-card h3 { font-size: 1.15rem; }
.pp-portfolio-card-body p { color: var(--pp-muted); font-size: 0.95rem; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pp-post-header .pp-tags { justify-content: center; margin-top: 0.75rem; }
.pp-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-primary) 12%, transparent);
    color: var(--pp-primary);
    font-size: 0.75rem;
    font-weight: 600;
}
.pp-portfolio-actions .pp-container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.pp-link-back { color: var(--pp-muted); text-decoration: none; }
.pp-link-back:hover { color: var(--pp-primary); }

/* --- Footer --- */
.pp-footer {
    background: var(--pp-surface);
    border-top: 1px solid color-mix(in srgb, var(--pp-text) 10%, transparent);
    padding-block: 2.5rem;
    margin-top: var(--pp-section-pad);
}
.pp-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
}
.pp-footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.pp-footer-nav a { color: var(--pp-muted); text-decoration: none; }
.pp-footer-nav a:hover { color: var(--pp-primary); }
.pp-footer p { color: var(--pp-muted); font-size: 0.875rem; }
.pp-powered a { color: var(--pp-primary); text-decoration: none; }
/* Vlastní kód webu (websites.custom_footer_html): počítadla a odznaky v řadě pod patičkou. */
.pp-footer-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    color: var(--pp-muted);
    font-size: 0.875rem;
}
.pp-footer-custom img { max-width: 100%; height: auto; }

/* --- Cookie lišta (App\Websites\CookieConsent) --- */
.pp-cookie-bar {
    position: fixed;
    inset: auto 1rem 1rem 1rem;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    max-width: 60rem;
    margin-inline: auto;
    padding: 1rem 1.25rem;
    background: var(--pp-surface);
    color: var(--pp-text);
    border: 1px solid color-mix(in srgb, var(--pp-text) 15%, transparent);
    border-radius: var(--pp-radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
    font-size: 0.9375rem;
}
.pp-cookie-bar[hidden] { display: none; }
.pp-cookie-bar-text { flex: 1 1 18rem; }
.pp-cookie-bar-text p { margin: 0.25rem 0 0; color: var(--pp-muted); }
.pp-cookie-bar-text a { color: var(--pp-primary); }
.pp-cookie-bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-cookie-bar .pp-button { padding: 0.5rem 1.1rem; font-size: 0.9375rem; cursor: pointer; }
.pp-button--outline {
    background: transparent;
    color: var(--pp-text);
    border: 1px solid color-mix(in srgb, var(--pp-text) 30%, transparent);
}
.pp-cookie-settings {
    padding: 0;
    background: none;
    border: 0;
    color: var(--pp-muted);
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}
.pp-cookie-settings:hover { color: var(--pp-primary); }

/* --- Odkazy webu ve slotech (App\Websites\LinkSlots, partials/links.blade.php) ---
   Základ pro všechny kity; kit upravuje barvy, tvar a zda zobrazí popisek. */
.pp-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.pp-links-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pp-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.pp-links-item:hover { color: var(--pp-primary); }
.pp-links-item .pp-icon { width: 1.15em; height: 1.15em; }
.pp-links-initial {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}

/* topbar: tenká lišta nad hlavičkou, ikona + popisek, vpravo */
.pp-links--topbar {
    justify-content: flex-end;
    padding: 0.35rem clamp(1rem, calc(4 * var(--pp-vw)), 2rem);
    background: var(--pp-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--pp-text) 10%, transparent);
    font-size: 0.85rem;
}

/* navbar: položky za stránkami, popisek, ikona menší */
.pp-nav .pp-links--navbar { display: contents; }
.pp-nav .pp-links--navbar .pp-links-item { color: var(--pp-text); font-weight: 500; font-size: inherit; }
.pp-nav .pp-links--navbar .pp-links-item:hover { color: var(--pp-primary); }

/* rails: svislá plovoucí lišta, jen ikony, skrytá na mobilu */
.pp-links--rail_left, .pp-links--rail_right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    flex-direction: column;
    gap: 0.5rem;
}
.pp-links--rail_left { left: 1rem; }
.pp-links--rail_right { right: 1rem; }
.pp-links--rail_left .pp-links-item, .pp-links--rail_right .pp-links-item {
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    color: var(--pp-text);
    box-shadow: var(--pp-card-shadow);
}
.pp-links--rail_left .pp-links-item:hover, .pp-links--rail_right .pp-links-item:hover {
    background: var(--pp-primary);
    color: var(--pp-primary-contrast);
}
.pp-links--rail_left .pp-links-label, .pp-links--rail_right .pp-links-label { display: none; }
@media (max-width: 991px) {
    .pp-links--rail_left, .pp-links--rail_right { display: none; }
}

/* footer a contact: řádek ikona + popisek */
.pp-links--contact { margin-top: 1.5rem; justify-content: center; }
.pp-footer--minimal .pp-links--footer { justify-content: center; }

/* --- core.js: kotvy, reveal, lightbox --- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
[data-pp-anchor] { scroll-margin-top: 5rem; }
.pp-reveal { opacity: 1; } /* kit může přidat přechod jen pod html.js: .js .pp-reveal { opacity: 0; … } .js .pp-reveal.is-visible { … } */
.pp-lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(96vw, 1200px);
    max-height: 96vh;
}
.pp-lightbox::backdrop { background: color-mix(in srgb, var(--pp-text) 85%, transparent); }
.pp-lightbox img { max-width: 96vw; max-height: 90vh; display: block; border-radius: var(--pp-radius); }
.pp-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--pp-bg);
    color: var(--pp-text);
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- Lišta náhledu variant vzhledu (partials/design-bar.blade.php, App\Websites\DesignVariants\DesignPreview) ---
   Nástroj, ne součást webu: neutrální tmavý pruh s vlastním písmem a velikostmi v px, aby ho kit ani
   velikost písma brandu neměnily. Rámeček zařízení (.pp-design-frame) překryje stránku pod lištou. */
.pp-design-bar {
    position: relative;
    z-index: 2147483001;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #111827;
    color: #f9fafb;
    font: 400 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}
.pp-design-bar-text { flex: 1 1 260px; min-width: 0; margin: 0; color: #f9fafb; font: inherit; overflow-wrap: anywhere; }
.pp-design-bar-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.pp-design-bar-group { display: inline-flex; gap: 2px; }
.pp-design-bar-select,
.pp-design-bar-button,
.pp-design-bar-name input {
    min-height: 32px;
    max-width: 100%;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #4b5563;
    border-radius: 6px;
    background: #1f2937;
    color: #f9fafb;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
.pp-design-bar-select { max-width: 220px; }
.pp-design-bar-name input { width: 160px; cursor: text; }
.pp-design-bar-button:hover,
.pp-design-bar-select:hover { border-color: #9ca3af; }
.pp-design-bar-button[aria-pressed="true"] { background: #f9fafb; border-color: #f9fafb; color: #111827; }
.pp-design-bar-vote { min-width: 36px; }
.pp-design-bar-label { color: #d1d5db; font: inherit; white-space: nowrap; }
.pp-design-bar-item { display: inline-flex; gap: 8px; align-items: center; min-width: 0; margin-right: 6px; }
.pp-design-bar-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding-inline: 8px; }
.pp-design-bar-icon { width: 16px; height: 16px; flex: none; }
.pp-design-bar :focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.pp-design-bar-name { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.pp-design-bar-name[hidden] { display: none; }
.pp-design-bar-name label { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #d1d5db; font: inherit; }
.pp-design-bar-status { color: #d1d5db; }
.pp-design-bar-status:empty { display: none; }
.pp-design-bar-exit { color: #f9fafb; font: inherit; text-decoration: underline; white-space: nowrap; }
.pp-design-bar-exit:hover { color: #93c5fd; }
.pp-design-frame {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #374151;
    overflow: auto;
}
.pp-design-frame iframe { max-width: 100%; height: 100%; background: #ffffff; box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); }
html.pp-design-framed,
html.pp-design-framed body { overflow: hidden; }