/* ============================================================
   Storefront — Levné brány
   Design system: "Technical Atelier"
   --------------------------------------------------------------
   Inspirace: rýsovací prkno, modrotisk, technický katalog.
   Cream paper background, hairline borders, sparingly použitá
   modrá (jako razítko), copper/rust akcent na CTA, tabulkové
   numerické hodnoty v monospace.
   ============================================================ */

:root {
    /* ---------- COLOR — FLAT MODERN BLUE ---------- */
    --c-paper:        #f5f7fa;   /* light blue-gray bg */
    --c-paper-2:      #eef2f8;   /* alternating section bg */
    --c-paper-line:   #e1e6ed;   /* hairline borders */
    --c-paper-edge:   #cbd2dc;   /* stronger borders */

    --c-ink:          #15233f;   /* deep navy text */
    --c-ink-2:        #2c3e5e;   /* secondary text */
    --c-ink-3:        #6b7280;   /* muted text */
    --c-ink-4:        #9ca3af;   /* placeholder, hints */

    --c-blueprint:    #2a4d8f;   /* primary blue (původní brand) */
    --c-blueprint-2:  #1d3a72;   /* hover/active */
    --c-blueprint-soft: rgba(42, 77, 143, 0.08);

    /* Accent — sjednoceno na blue family místo rust */
    --c-rust:         #2a4d8f;
    --c-rust-2:       #1d3a72;
    --c-rust-soft:    rgba(42, 77, 143, 0.10);

    --c-forest:       #16a34a;
    --c-forest-soft:  rgba(22, 163, 74, 0.10);

    --c-warning:      #d97706;
    --c-warning-soft: rgba(217, 119, 6, 0.10);

    --c-danger:       #dc2626;
    --c-danger-soft:  rgba(220, 38, 38, 0.10);

    --c-white:        #ffffff;

    /* ---------- LEGACY ALIASY (zachovávají se během fází B-H) ----------
       Stará jména proměnných odkazují na nové hodnoty, takže
       existující komponenty CSS dál fungují, kým je postupně přepíšeme. */
    --c-bg:            var(--c-paper);
    --c-surface:       var(--c-white);
    --c-text:          var(--c-ink);
    --c-text-muted:    var(--c-ink-3);
    --c-border:        var(--c-paper-line);
    --c-border-strong: var(--c-paper-edge);
    --c-primary:       var(--c-blueprint);
    --c-primary-strong:#163055;
    --c-primary-fg:    var(--c-paper);
    --c-accent:        var(--c-rust);
    --c-success:       var(--c-forest);

    /* ---------- TYPOGRAPHY ---------- */
    --font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
    --font-base: var(--font-sans);  /* legacy alias */

    --t-12:  0.75rem;
    --t-14:  0.875rem;
    --t-16:  1rem;
    --t-18:  1.125rem;
    --t-22:  1.375rem;
    --t-28:  1.75rem;
    --t-36:  2.25rem;
    --t-48:  3rem;
    --t-64:  4rem;
    --t-88:  5.5rem;

    --lh-tight: 1.04;
    --lh-snug:  1.18;
    --lh-base:  1.55;
    --lh-loose: 1.7;

    --w-light: 300; --w-regular: 400; --w-medium: 500;
    --w-semibold: 600; --w-bold: 700;

    --tr-tight:   -0.02em;
    --tr-eyebrow: 0.16em;

    /* ---------- SPACING (4-based) ---------- */
    --s-1:  4px;   --s-2:  8px;  --s-3:  12px; --s-4:  16px;
    --s-5:  20px;  --s-6:  24px; --s-8:  32px; --s-10: 40px;
    --s-12: 48px;  --s-16: 64px; --s-20: 80px; --s-24: 96px;
    --s-32: 128px; --s-40: 160px;

    /* legacy spacing aliasy (dříve var(--space-N) = 4/8/12/16/24/32/48/64) */
    --space-1: var(--s-1);   --space-2: var(--s-2);   --space-3: var(--s-3);
    --space-4: var(--s-4);   --space-5: var(--s-6);   --space-6: var(--s-8);
    --space-8: var(--s-12);  --space-10: var(--s-16);

    /* ---------- RADIUS — ROUNDED ---------- */
    --r-0: 0;
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;
    --r-pill: 999px;
    --r-sm: var(--r-2);  --r-md: var(--r-3);  --r-lg: var(--r-4);  /* legacy */

    /* ---------- BORDERS ---------- */
    --bw-hair:  1px;
    --bw-rule:  2px;
    --bw-stamp: 3px;

    /* ---------- SHADOWS — soft, flat ---------- */
    --shadow-rest:  0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lift:  0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-stamp: 0 1px 0 var(--c-paper-line);
    --shadow-sm:    var(--shadow-rest);   /* legacy */
    --shadow-md:    var(--shadow-lift);   /* legacy */

    /* ---------- MOTION ---------- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in:  cubic-bezier(0.4, 0, 1, 1);
    --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms;

    /* ---------- LAYOUT ---------- */
    --container:        1240px;
    --container-narrow: 880px;
    --grid-gap:         24px;
    --header-h:         72px;

    --bp-md: 720px;
    --bp-lg: 1024px;

    /* ---------- PAPER GRID — subtle dotted texture v pozadí ---------- */
    --grid-cell:  24px;
    --grid-color: rgba(21, 23, 26, .04);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body.shop-body {
    font-family: var(--font-sans);
    font-size: var(--t-16);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background-color: var(--c-paper);
    background-image: radial-gradient(circle at 1px 1px, var(--grid-color) 1px, transparent 0);
    background-size: var(--grid-cell) var(--grid-cell);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--c-blueprint); text-decoration: none; transition: color var(--d-fast) var(--ease-out); }
a:hover { color: var(--c-rust); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- HEADINGS ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--w-medium);
    color: var(--c-ink);
    margin: 0 0 var(--s-3);
}

h1, .h1 {
    font-size: clamp(var(--t-36), 4.5vw, var(--t-48));
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    font-variation-settings: "wdth" 88, "opsz" 48;
}
h2, .h2 {
    font-size: clamp(var(--t-28), 3vw, var(--t-36));
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    font-variation-settings: "wdth" 92, "opsz" 36;
}
h3, .h3 {
    font-size: var(--t-22);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    font-variation-settings: "wdth" 95, "opsz" 22;
}
h4, .h4 { font-size: var(--t-18); font-weight: var(--w-semibold); line-height: var(--lh-snug); }

.display, h1.display {
    font-size: clamp(var(--t-48), 6vw, var(--t-88));
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    font-weight: var(--w-medium);
    font-variation-settings: "wdth" 80, "opsz" 96;
}

/* ---------- UTILITY: eyebrow, numerics, lead, caption ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-12);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-ink-3);
    font-weight: var(--w-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.eyebrow::before {
    content: ""; width: 24px; height: 1px; background: currentColor; flex-shrink: 0;
}
.eyebrow--no-rule::before { display: none; }

.num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "ss01";
    letter-spacing: -0.01em;
}
.num--lg { font-size: var(--t-48); font-weight: var(--w-medium); line-height: 1; }
.num--md { font-size: var(--t-28); font-weight: var(--w-medium); line-height: 1.1; }
.num--sm { font-size: var(--t-14); }

.lead {
    font-size: var(--t-18);
    line-height: var(--lh-loose);
    color: var(--c-ink-2);
    max-width: 60ch;
}
.caption { font-size: var(--t-12); color: var(--c-ink-3); }
.muted   { color: var(--c-ink-3); }

/* Selection — subtle warm */
::selection { background: var(--c-rust-soft); color: var(--c-ink); }
::-moz-selection { background: var(--c-rust-soft); color: var(--c-ink); }

/* Focus visible — blueprint outline */
:focus-visible {
    outline: 2px solid var(--c-blueprint);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* ---------- Header ---------- */
.shop-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 30;
}
.shop-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5); padding: var(--space-3) 0;
}
.shop-header__brand {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: 1.1rem; color: inherit;
}
.shop-header__brand:hover { text-decoration: none; }
.shop-header__logo {
    background: var(--c-primary); color: var(--c-primary-fg);
    width: 32px; height: 32px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}
.shop-nav { display: flex; gap: var(--space-5); }
.shop-nav a {
    color: var(--c-text); padding: var(--space-2) 0;
    font-weight: 500; border-bottom: 2px solid transparent;
}
.shop-nav a.is-active, .shop-nav a:hover {
    border-color: var(--c-primary); text-decoration: none;
}
.shop-header__cta { display: none; }
@media (min-width: 720px) { .shop-header__cta { display: inline-flex; } }
@media (max-width: 720px) { .shop-nav { display: none; } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: var(--c-surface);
    color: var(--c-text);
    font: 500 .95rem var(--font-base);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: var(--c-primary-fg); }
.btn--primary:hover { background: var(--c-primary-strong); }
.btn--ghost { background: transparent; border-color: var(--c-border-strong); }
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: 1.05rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Badge ---------- */
.badge {
    display: inline-block; padding: 4px 10px;
    background: rgba(42, 77, 143, .08); color: var(--c-primary);
    border-radius: 999px; font-size: .8rem; font-weight: 600;
    margin-bottom: var(--space-3);
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--c-bg) 100%);
    padding: var(--space-10) 0;
}
.hero__inner {
    display: grid; gap: var(--space-8);
    grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 1024px) {
    .hero__inner { grid-template-columns: 1.1fr 1fr; }
}
.hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1; margin: var(--space-3) 0;
}
.hero__accent { color: var(--c-primary); }
.hero__lead { color: var(--c-text-muted); font-size: 1.15rem; margin-bottom: var(--space-5); }
.hero__cta {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.hero__points {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
    color: var(--c-text-muted); font-size: .95rem;
}
.hero__points li { display: flex; align-items: center; gap: 6px; }
.hero__points li::before { content: "✓"; color: var(--c-success); font-weight: 700; }

.hero__visual {
    display: grid; gap: var(--space-3);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    justify-self: end;
    width: 100%;
}
.hero__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; justify-content: space-between;
    font-weight: 600;
}
.hero__card span { color: var(--c-text-muted); font-weight: 500; font-size: .95rem; }
.hero__card--1 { background: linear-gradient(135deg, #2a4d8f, #1d3a72); color: #fff; }
.hero__card--1 span { color: rgba(255, 255, 255, .8); }

/* ---------- Sections / Grid ---------- */
.section { padding: var(--space-10) 0; }
.section--alt { background: var(--c-surface); }
.section__head { margin-bottom: var(--space-6); max-width: 720px; }
.section__head h1, .section__head h2 { margin: 0 0 var(--space-2); }
.section__head p { color: var(--c-text-muted); margin: 0; }

.grid { display: grid; gap: var(--space-5); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--two { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid--two { grid-template-columns: 1fr 1fr; } }

.steps { padding-left: 1.2em; line-height: 1.9; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li {
    padding-left: 1.6em; position: relative; margin-bottom: var(--space-2);
}
.checks li::before {
    content: "✓"; position: absolute; left: 0;
    color: var(--c-success); font-weight: 700;
}

/* ---------- Typografie ---------- */
.lead { font-size: 1.1rem; color: var(--c-text-muted); }
.contact-list { list-style: none; padding: 0; line-height: 2; }
.prose h2 { margin-top: var(--space-5); }
.prose ul li { margin-bottom: 4px; }
.prose code {
    background: rgba(42, 77, 143, .08); padding: 2px 6px;
    border-radius: 4px; font-size: .9em;
}

/* ---------- Footer ---------- */
.shop-footer {
    background: #14181f; color: #c8cdd6;
    padding: var(--space-8) 0 var(--space-4);
    margin-top: var(--space-10);
}
.shop-footer a { color: #fff; }
.shop-footer__grid {
    display: grid; gap: var(--space-5);
    grid-template-columns: 1fr; padding-bottom: var(--space-6);
}
@media (min-width: 720px) {
    .shop-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.shop-footer__grid ul { list-style: none; padding: 0; margin: 0; }
.shop-footer__grid li { margin-bottom: 4px; }
.shop-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: var(--space-3);
}

/* ---------- Flash zprávy ---------- */
.flash {
    padding: 12px 16px; border-radius: var(--r-md);
    margin: var(--space-3) 0;
}
.flash--success { background: #e6f4ee; color: var(--c-success); }
.flash--error   { background: #fdecea; color: var(--c-danger); }
.flash--info    { background: #e6efff; color: var(--c-primary); }

/* ---------- Error stránka (404 / 500) ---------- */
.error-page { text-align: center; padding: var(--space-10) 0; }
.error-page h1 { font-size: 4rem; margin: 0; color: var(--c-primary); }
.shop-main { min-height: calc(100vh - 320px); }

/* ============================================================
   FÁZE 1 — Katalog komponenty
   ============================================================ */

/* Card varianty pro produkt list */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.card--link { color: inherit; }
.card--link:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); text-decoration: none; }
.card__title { margin: 0; font-size: 1.15rem; }
.card__desc  { color: var(--c-text-muted); margin: 0; flex: 1; font-size: .92rem; }
.card__price { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.card__price strong { font-size: 1.25rem; color: var(--c-text); }
.card__price small { color: var(--c-text-muted); font-size: .8rem; margin-top: 2px; }
.card__cta { color: var(--c-primary); font-weight: 600; font-size: .9rem; }

/* Availability badge varianty */
.badge--in_stock      { background: rgba(28, 124, 84, .12); color: var(--c-success); }
.badge--made_to_order { background: rgba(176, 107, 0, .12); color: var(--c-warning); }
.badge--inquiry_only  { background: rgba(91, 98, 113, .12); color: var(--c-text-muted); }

/* Kategorie navigation chips */
.catnav {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.catnav__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: .9rem;
    transition: border-color .15s, background .15s, color .15s;
}
.catnav__chip:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.catnav__chip.is-active { background: var(--c-primary); color: var(--c-primary-fg); border-color: var(--c-primary); }
.catnav__count {
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 0 8px;
    font-size: .75rem;
    font-weight: 600;
}
.catnav__chip.is-active .catnav__count { background: rgba(255, 255, 255, .25); }

/* Pagination */
.pagination {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    margin-top: var(--space-6);
}
.pagination__page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; padding: 8px 12px;
    border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    color: var(--c-text);
}
.pagination__page:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.pagination__page.is-active { background: var(--c-primary); color: var(--c-primary-fg); border-color: var(--c-primary); }

/* Search form */
.search-form {
    display: flex; gap: var(--space-3); margin: var(--space-4) 0;
    max-width: 640px;
}
.search-form input[type="search"] {
    flex: 1; padding: 12px 16px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    font: inherit; font-size: 1rem;
    background: var(--c-surface);
}
.search-form input:focus { outline: 2px solid var(--c-primary); border-color: var(--c-primary); }

/* Product detail */
.product-detail__header { margin-bottom: var(--space-6); }
.product-detail__header h1 { margin: 0 0 var(--space-2); }
.product-detail__avail {
    display: block; color: var(--c-text-muted);
    margin-top: var(--space-2); font-size: .9rem;
}
.product-detail__grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .product-detail__grid { grid-template-columns: 1.6fr 1fr; }
}
.product-detail__sidebar {
    align-self: start;
    position: sticky; top: 80px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.product-detail__note {
    color: var(--c-text-muted); font-size: .85rem; margin: 0;
    line-height: 1.4;
}
.back-link {
    display: inline-block; margin-bottom: var(--space-3);
    color: var(--c-text-muted); font-size: .9rem;
}
.back-link:hover { color: var(--c-primary); text-decoration: none; }

/* Price card v product detail */
.price-card {
    background: linear-gradient(135deg, #2a4d8f, #1d3a72);
    color: #fff;
    padding: var(--space-4);
    border-radius: var(--r-md);
}
.price-card__row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0;
    color: rgba(255, 255, 255, .85);
}
.price-card__row strong { color: #fff; }
.price-card__row--total {
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    margin-bottom: 6px; padding-bottom: 8px;
    color: #fff;
}

/* Parametry / definition list */
.param-list {
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr;
    margin: 0;
}
.param-list > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
}
.param-list dt { color: var(--c-text-muted); margin: 0; }
.param-list dd { margin: 0; font-weight: 500; }
@media (max-width: 720px) {
    .param-list > div { grid-template-columns: 1fr; gap: 2px; padding: 6px 0; }
    .param-list dt { font-size: .85rem; }
}

/* ============================================================
   FÁZE 2 — Konfigurátor
   ============================================================ */
.configurator-page { padding: var(--space-6) 0 var(--space-10); }
.configurator {
    display: grid; gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .configurator { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.configurator__main {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
}
.configurator__sidebar {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    align-self: start;
    position: sticky; top: 80px;
    display: flex; flex-direction: column; gap: var(--space-4);
}
.configurator__sidebar h3 { margin: var(--space-2) 0 4px; font-size: 1rem; }
.configurator__sidebar h3:first-child { margin-top: 0; }
.configurator__sidebar .btn { margin-top: auto; }

.configurator__error {
    background: #fdecea; color: var(--c-danger);
    padding: 10px 14px; border-radius: var(--r-md);
    margin-top: var(--space-3); font-size: .9rem;
}
.configurator__source {
    color: var(--c-text-muted); font-size: .85rem;
    margin-top: var(--space-3);
}
.configurator__source code {
    background: rgba(42, 77, 143, .08);
    padding: 1px 6px; border-radius: 4px; font-size: .82rem;
}

.dimension-grid {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dimension-grid label {
    display: flex; flex-direction: column; gap: 4px;
    font-weight: 500; font-size: .9rem;
}
.dimension-grid label small { font-weight: 400; color: var(--c-text-muted); }
.dimension-grid label small.hint { font-size: .75rem; }
.dimension-grid input[type="number"] {
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    font: inherit; font-size: .95rem;
}
.dimension-grid input:focus { outline: 2px solid var(--c-primary); border-color: var(--c-primary); }

.cfg-fieldset {
    margin-top: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
}
.cfg-fieldset legend {
    color: var(--c-text-muted); font-size: .85rem;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 0 8px;
}
.cfg-checkbox {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0; cursor: pointer;
}
.cfg-checkbox small { display: block; color: var(--c-text-muted); font-size: .8rem; }

.price-breakdown { list-style: none; padding: 0; margin: 0; }
.price-breakdown li {
    display: flex; justify-content: space-between;
    gap: 12px; padding: 6px 0;
    border-bottom: 1px dashed var(--c-border);
    font-size: .92rem;
}
.price-breakdown li.muted { color: var(--c-text-muted); border-bottom: 0; }
.price-breakdown li span:last-child { font-weight: 600; white-space: nowrap; }

.vat-note {
    color: var(--c-text-muted); font-size: .8rem;
    line-height: 1.4; margin: 0;
}

/* ============================================================
   FÁZE 3 — Košík + Checkout
   ============================================================ */
.cart-grid {
    display: grid; gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .cart-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }

.cart-items { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-item {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--space-4);
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-4); align-items: center;
}
@media (max-width: 720px) {
    .cart-item { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
}
.cart-item__main h3 { margin: 0 0 4px; font-size: 1.05rem; }
.cart-item__params {
    list-style: none; padding: 0; margin: 0;
    color: var(--c-text-muted); font-size: .85rem;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.cart-item__qty input { width: 80px; padding: 6px 8px; }
.cart-item__qty label { font-size: .85rem; color: var(--c-text-muted); }
.cart-item__price strong { display: block; font-size: 1.05rem; }
.cart-item__price small { color: var(--c-text-muted); font-size: .75rem; }
.cart-item__remove {
    background: none; border: 0; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 6px 10px;
    border-radius: var(--r-md); color: var(--c-text-muted);
}
.cart-item__remove:hover { background: rgba(179, 38, 30, .08); color: var(--c-danger); }

.cart-summary, .checkout-summary {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--space-5);
    align-self: start; position: sticky; top: 80px;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.cart-summary h2, .checkout-summary h2 { margin: 0; font-size: 1.05rem; }
.cart-summary dl, .checkout-totals { margin: 0; }
.cart-summary dl > div, .checkout-totals > div {
    display: flex; justify-content: space-between; padding: 4px 0;
    color: var(--c-text-muted); font-size: .92rem;
}
.cart-summary dl > div dd, .checkout-totals > div dd { margin: 0; color: var(--c-text); font-weight: 500; }
.cart-summary__total dt, .cart-summary__total dd,
.checkout-totals__total dt, .checkout-totals__total dd {
    color: var(--c-text) !important; font-weight: 700 !important; font-size: 1.1rem !important;
}
.cart-summary__total, .checkout-totals__total {
    border-top: 1px solid var(--c-border); padding-top: 8px !important; margin-top: 4px;
}
.cart-summary__hint { color: var(--c-text-muted); font-size: .8rem; margin: 0; }

.checkout-grid {
    display: grid; gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .checkout-grid { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); } }

.checkout-step {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--space-5);
    margin: 0 0 var(--space-4);
}
.checkout-step legend {
    color: var(--c-primary); font-weight: 600; font-size: .95rem;
    padding: 0 8px;
}
.form-grid {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 500; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .checkout-step textarea {
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    font: inherit; font-size: .95rem; background: var(--c-surface);
}
.form-grid input:focus, .checkout-step textarea:focus {
    outline: 2px solid var(--c-primary); border-color: var(--c-primary);
}
.checkout-step textarea { width: 100%; resize: vertical; }

.cfg-options { display: flex; flex-direction: column; gap: 8px; }
.cfg-option {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    cursor: pointer; background: var(--c-surface);
    transition: border-color .15s, background .15s;
}
.cfg-option:hover { border-color: var(--c-primary); }
.cfg-option:has(input:checked) {
    border-color: var(--c-primary);
    background: rgba(42, 77, 143, .04);
    box-shadow: 0 0 0 2px rgba(42, 77, 143, .12);
}
.cfg-option.is-disabled { opacity: .5; pointer-events: none; }
.cfg-option__main strong { display: block; margin-bottom: 2px; }
.cfg-option__main small { color: var(--c-text-muted); font-size: .82rem; }
.cfg-option__price { font-weight: 600; white-space: nowrap; }

.ares-hint {
    margin-top: 8px; padding: 8px 12px;
    background: rgba(42, 77, 143, .06); color: var(--c-primary);
    border-radius: var(--r-md); font-size: .85rem;
}

.checkout-summary ul.checkout-items, .checkout-summary .checkout-items {
    list-style: none; padding: 0; margin: 0;
}
.checkout-items li {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px dashed var(--c-border); font-size: .9rem;
}
.checkout-error {
    background: #fdecea; color: var(--c-danger);
    padding: 12px 16px; border-radius: var(--r-md); margin-top: var(--space-3);
}

.thank-you {
    text-align: center; padding: var(--space-8) 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-6);
}
.thank-you__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--c-success); color: #fff;
    font-size: 32px; line-height: 1; margin-bottom: var(--space-3);
}
.thank-you h1 { margin: 0; }
.thank-you__grid {
    display: grid; gap: var(--space-5); grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .thank-you__grid { grid-template-columns: 1fr 1fr; } }
.thank-you__details, .thank-you__payment {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--space-5);
}
.thank-you__cta { margin-top: var(--space-5); }
.payment-info {
    background: rgba(42, 77, 143, .06); padding: var(--space-4);
    border-radius: var(--r-md); margin-bottom: var(--space-3);
}

.kv-list { display: grid; gap: var(--space-2); margin: 0; }
.kv-list > div {
    display: grid; grid-template-columns: 160px 1fr;
    padding: 6px 0; border-bottom: 1px solid var(--c-border);
}
.kv-list--compact > div { grid-template-columns: 140px 1fr; padding: 4px 0; }
.kv-list dt { color: var(--c-text-muted); margin: 0; font-size: .9rem; }
.kv-list dd { margin: 0; }

.payment-qr {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--space-4); text-align: center;
}
.payment-qr h3 { margin: 0 0 var(--space-3); }
.payment-qr img {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 8px;
}
.payment-qr__hint { color: var(--c-text-muted); font-size: .85rem; }
.payment-qr__details { text-align: left; margin-top: var(--space-4); }
.payment-qr__details h4 { margin: 0 0 var(--space-2); font-size: 1rem; }
.payment-qr__note {
    margin-top: var(--space-3); padding-top: var(--space-3);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted); font-size: .82rem; line-height: 1.5;
}

/* JS pro cart removal/quantity */
[data-item-qty], [data-item-remove] { /* placeholder — JS doplní v Phase 3.1 */ }

/* ============================================================
   FÁZE 3.5 — Per-product instalační příplatek + 12 % prohlášení
   ============================================================ */
.cfg-install { margin-top: var(--space-5); }
.cfg-install legend { color: var(--c-primary); font-weight: 600; }

.cfg-install__toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3); margin: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    cursor: pointer;
}
.cfg-install__toggle:has(input:checked) {
    border-color: var(--c-primary);
    background: rgba(42, 77, 143, .04);
}
.cfg-install__main strong { display: block; margin-bottom: 2px; }
.cfg-install__main small { color: var(--c-text-muted); font-size: .85rem; line-height: 1.4; display: block; }

.cfg-install__declaration {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--r-md);
    border: 1px dashed var(--c-border-strong);
    background: rgba(176, 107, 0, .06);
}
.cfg-install__declaration[hidden] { display: none; }
.cfg-install__declaration h4 {
    margin: 0 0 var(--space-2);
    color: var(--c-warning);
    font-size: .95rem;
}
.cfg-install__declaration p {
    margin: 0 0 var(--space-3);
    font-size: .87rem; line-height: 1.5;
}

/* ============================================================
   FÁZE B — Technical Atelier primitives
   Tlačítka, karty, formuláře, breadcrumbs, ikony
   Tyto styly jsou DEFINOVANÉ ZNOVU s vyšší specificitou
   přes "[class].name" — postupně nahrazují legacy komponenty.
   ============================================================ */

/* ---------- Container (full-width grid container) ---------- */
.shop-body .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-6);
}
@media (max-width: 720px) {
    .shop-body .container { padding: 0 var(--s-4); }
}

/* ============================================================
   B.1 — Tlačítka
   ============================================================ */
[class].btn {
    --btn-bg: var(--c-white);
    --btn-fg: var(--c-ink);
    --btn-bd: var(--c-paper-edge);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-2);
    font-family: var(--font-sans);
    font-size: var(--t-14);
    font-weight: var(--w-medium);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--d-fast) var(--ease-out),
                background var(--d-fast),
                border-color var(--d-fast),
                color var(--d-fast),
                box-shadow var(--d-fast);
    position: relative;
    white-space: nowrap;
}
[class].btn:hover { transform: translateY(-1px); text-decoration: none; }
[class].btn:active { transform: translateY(0); }

[class].btn--primary {
    --btn-bg: var(--c-rust);
    --btn-fg: var(--c-paper);
    --btn-bd: var(--c-rust);
}
[class].btn--primary:hover { --btn-bg: var(--c-rust-2); --btn-bd: var(--c-rust-2); }

[class].btn--ink {
    --btn-bg: var(--c-ink);
    --btn-fg: var(--c-paper);
    --btn-bd: var(--c-ink);
}

[class].btn--ghost {
    --btn-bg: transparent;
    --btn-bd: var(--c-paper-edge);
    --btn-fg: var(--c-ink);
}
[class].btn--ghost:hover { --btn-bd: var(--c-ink); --btn-bg: var(--c-paper-2); }

[class].btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--t-16); }
[class].btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-12); }
[class].btn--block { width: 100%; }

[class].btn[disabled],
[class].btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
[class].btn[aria-busy="true"] {
    pointer-events: none;
    background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: btn-shimmer 1.4s linear infinite;
}
@keyframes btn-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================
   B.2 — Card (product/atelier kind)
   ============================================================ */
.card-atelier {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-paper-line);
    border-top: var(--bw-stamp) solid var(--c-ink);
    transition: border-color var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out),
                box-shadow var(--d-base);
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.card-atelier:hover {
    border-top-color: var(--c-rust);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    text-decoration: none;
}
/* Dimension marks v rozích — signature detail */
.card-atelier::before, .card-atelier::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border-color: var(--c-paper-edge);
    border-style: solid;
    pointer-events: none;
    transition: border-color var(--d-base);
}
.card-atelier::before { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.card-atelier::after  { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.card-atelier:hover::before, .card-atelier:hover::after { border-color: var(--c-rust); }

.card-atelier__visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-paper-line);
    display: grid; place-items: center;
    overflow: hidden;
    color: var(--c-ink-2);
}
.card-atelier__visual::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .6;
}
.card-atelier__visual > svg {
    width: 78%; height: auto; position: relative; z-index: 1;
    transition: color var(--d-base) var(--ease-out);
}
.card-atelier:hover .card-atelier__visual > svg { color: var(--c-blueprint); }

.card-atelier__badge {
    position: absolute; top: var(--s-3); right: var(--s-3);
    padding: 3px var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-12);
    background: var(--c-forest-soft);
    color: var(--c-forest);
    border-radius: var(--r-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
}
.card-atelier__badge--warn { background: var(--c-warning-soft); color: var(--c-warning); }
.card-atelier__badge--quiet { background: var(--c-blueprint-soft); color: var(--c-blueprint); }

.card-atelier__body {
    padding: var(--s-5);
    display: flex; flex-direction: column;
    gap: var(--s-3); flex: 1;
}
.card-atelier__title {
    margin: 0;
    font-size: var(--t-22);
    font-weight: var(--w-medium);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variation-settings: "wdth" 95, "opsz" 22;
}
.card-atelier__title em { font-style: normal; color: var(--c-ink-3); }
.card-atelier__desc {
    margin: 0;
    color: var(--c-ink-3);
    font-size: var(--t-14);
    flex: 1;
    line-height: 1.5;
}
.card-atelier__specs {
    display: grid; gap: var(--s-1);
    margin: var(--s-2) 0;
    padding: var(--s-3) 0;
    border-top: 1px dashed var(--c-paper-line);
    border-bottom: 1px dashed var(--c-paper-line);
}
.card-atelier__specs > div { display: flex; justify-content: space-between; }
.card-atelier__specs dt {
    color: var(--c-ink-3); font-size: var(--t-12);
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.card-atelier__specs dd { margin: 0; color: var(--c-ink); }

.card-atelier__foot {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s-3);
    margin-top: auto;
}
.card-atelier__price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-1);
}
.card-atelier__price small {
    color: var(--c-ink-3);
    font-size: var(--t-12);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.card-atelier__price strong {
    font-family: var(--font-mono);
    font-size: var(--t-22);
    font-weight: var(--w-medium);
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.card-atelier__cta {
    display: inline-flex; align-items: center; gap: var(--s-1);
    color: var(--c-rust);
    font-weight: var(--w-medium);
    font-size: var(--t-14);
}
.card-atelier__cta svg {
    transition: transform var(--d-base) var(--ease-out);
}
.card-atelier:hover .card-atelier__cta svg { transform: translateX(3px); }

/* ============================================================
   B.3 — Form fields (.field)
   ============================================================ */
.field {
    display: flex; flex-direction: column; gap: var(--s-1);
    margin-bottom: var(--s-4);
}
.field label,
.field > label > span:first-child {
    font-size: var(--t-14);
    font-weight: var(--w-medium);
    color: var(--c-ink);
    display: inline-flex;
    gap: var(--s-1);
    align-items: baseline;
}
.field__req {
    color: var(--c-rust);
    font-family: var(--font-mono);
    font-size: var(--t-12);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field input[type="password"],
.field select,
.field textarea {
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-16);
    padding: var(--s-3) var(--s-4);
    background: var(--c-white);
    color: var(--c-ink);
    border: 1px solid var(--c-paper-edge);
    border-radius: var(--r-2);
    transition: border-color var(--d-fast),
                box-shadow var(--d-fast);
    width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-4); }
.field input:hover, .field select:hover, .field textarea:hover {
    border-color: var(--c-ink-4);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--c-blueprint);
    box-shadow: 0 0 0 3px var(--c-blueprint-soft);
}

.field__hint {
    color: var(--c-ink-3);
    font-size: var(--t-12);
    margin-top: 2px;
}
.field__error {
    color: var(--c-danger);
    font-size: var(--t-12);
    display: flex; align-items: center; gap: var(--s-1);
    margin-top: 2px;
}
.field__error::before {
    content: "!";
    font-family: var(--font-mono);
    font-weight: var(--w-bold);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-danger);
    color: var(--c-paper);
    display: inline-grid; place-items: center;
    font-size: 10px;
    flex-shrink: 0;
}
.field__error[hidden] { display: none; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--c-danger); }
.field.has-error input:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); }
.field.has-success input { border-color: var(--c-forest); }

/* Inline checkbox/radio chip */
.checkbox-chip,
.radio-chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-paper-edge);
    border-radius: var(--r-2);
    background: var(--c-white);
    cursor: pointer;
    font-size: var(--t-14);
    transition: border-color var(--d-fast), background var(--d-fast);
}
.checkbox-chip:has(input:checked),
.radio-chip:has(input:checked) {
    border-color: var(--c-blueprint);
    background: var(--c-blueprint-soft);
}
.checkbox-chip input, .radio-chip input { accent-color: var(--c-blueprint); }

/* ============================================================
   B.4 — Breadcrumbs
   ============================================================ */
.crumbs {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-paper-line);
    margin-bottom: var(--s-6);
}
.crumbs ol {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-12);
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.crumbs li:not(:last-child)::after {
    content: " / ";
    color: var(--c-ink-4);
    margin-left: var(--s-2);
}
.crumbs a {
    color: var(--c-ink-3);
    text-decoration: none;
}
.crumbs a:hover { color: var(--c-ink); }
.crumbs [aria-current="page"] { color: var(--c-ink); }

/* ============================================================
   B.5 — Icon system (inline SVG sprite)
   ============================================================ */
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--lg { width: 1.25em; height: 1.25em; }
.icon--xl { width: 2em; height: 2em; }

/* ============================================================
   B.6 — Trust badges
   ============================================================ */
.trust {
    background: var(--c-paper-2);
    border-top: 1px solid var(--c-paper-line);
    border-bottom: 1px solid var(--c-paper-line);
    padding: var(--s-12) 0;
}
.trust__grid {
    display: grid;
    gap: var(--s-8);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.trust__item {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding-left: var(--s-4);
    border-left: 2px solid var(--c-rust);
}
.trust__item .icon { width: 32px; height: 32px; color: var(--c-ink-3); margin-bottom: var(--s-2); }
.trust__item strong {
    font-size: var(--t-18);
    font-weight: var(--w-medium);
}

/* ============================================================
   B.7 — Reveal animace (subtle, prefers-reduced-motion friendly)
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal-in 600ms var(--ease-out) forwards;
}
[data-reveal][data-delay="1"] { animation-delay:  60ms; }
[data-reveal][data-delay="2"] { animation-delay: 120ms; }
[data-reveal][data-delay="3"] { animation-delay: 180ms; }
[data-reveal][data-delay="4"] { animation-delay: 240ms; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   FÁZE C — Masthead (header) + Footer
   ============================================================ */
.masthead {
    position: sticky; top: 0; z-index: 50;
    background: var(--c-paper);
}
.masthead__inner {
    height: var(--header-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-8);
}
.masthead__rule {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0,
        var(--c-paper-edge) 80px,
        var(--c-paper-edge) calc(100% - 80px),
        transparent 100%
    );
}

.brand {
    display: inline-flex; align-items: center; gap: var(--s-3);
    color: var(--c-ink) !important;
    text-decoration: none !important;
}
.brand__mark { color: var(--c-blueprint); flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong {
    font-weight: var(--w-semibold);
    font-size: var(--t-16);
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.brand__text em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    color: var(--c-ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.masthead__nav { display: flex; gap: var(--s-8); justify-content: center; }
.masthead__nav a {
    display: inline-flex; align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    color: var(--c-ink-2);
    text-decoration: none;
    font-weight: var(--w-medium);
    font-size: var(--t-14);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast);
}
.masthead__nav-num {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--c-ink-4);
    letter-spacing: 0.04em;
}
.masthead__nav a:hover,
.masthead__nav a.is-active {
    color: var(--c-ink);
    border-bottom-color: var(--c-rust);
}
.masthead__nav a:hover .masthead__nav-num,
.masthead__nav a.is-active .masthead__nav-num { color: var(--c-rust); }

.masthead__tools { display: flex; gap: var(--s-1); align-items: center; }

.icon-btn {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    color: var(--c-ink-2);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
.icon-btn:hover {
    border-color: var(--c-paper-edge);
    background: var(--c-white);
    color: var(--c-ink);
    text-decoration: none;
}
.icon-btn--menu { display: none; }

.cart-counter {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--c-rust);
    color: var(--c-paper);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-semibold);
    line-height: 18px;
    border-radius: var(--r-pill);
    text-align: center;
    box-shadow: 0 0 0 2px var(--c-paper);
}

@media (max-width: 900px) {
    .masthead__nav { display: none; }
    .icon-btn--menu { display: inline-grid; }
}

.mobile-drawer {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-paper-edge);
    padding: var(--s-3) 0;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer nav {
    display: flex; flex-direction: column;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-4);
}
.mobile-drawer a {
    display: flex; align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-paper-line);
    color: var(--c-ink);
    text-decoration: none;
    font-weight: var(--w-medium);
}
.mobile-drawer a:last-child { border-bottom: 0; }
.mobile-drawer .masthead__nav-num { color: var(--c-ink-4); }

/* ---------- Footer ---------- */
.footer {
    background: var(--c-paper-2);
    border-top: 1px solid var(--c-paper-line);
    margin-top: var(--s-20);
    padding: var(--s-16) 0 var(--s-6);
}
.footer__top {
    display: grid; gap: var(--s-10);
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 900px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .footer__top { grid-template-columns: 1fr; }
}

.footer__brand .brand__mark { color: var(--c-blueprint); margin-bottom: var(--s-2); }
.footer__brand-name {
    display: block;
    font-size: var(--t-18);
    font-weight: var(--w-semibold);
    margin-bottom: var(--s-2);
    color: var(--c-ink);
}
.footer__brand p {
    max-width: 32ch;
    color: var(--c-ink-3);
    font-size: var(--t-14);
    margin: var(--s-2) 0 var(--s-4);
}
.footer__brand address {
    font-style: normal;
    font-size: var(--t-14);
    line-height: 1.7;
    color: var(--c-ink-2);
}
.footer__brand a {
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--c-paper-edge);
}
.footer__brand a:hover { border-bottom-color: var(--c-rust); color: var(--c-rust); }

.footer__nav { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__nav .eyebrow { color: var(--c-ink); margin-bottom: var(--s-3); }
.footer__nav a {
    color: var(--c-ink-2);
    text-decoration: none;
    font-size: var(--t-14);
}
.footer__nav a:hover { color: var(--c-rust); }

.footer__cert .eyebrow { color: var(--c-ink); margin-bottom: var(--s-3); }
.footer__cert-list {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--font-mono);
    font-size: var(--t-12);
    color: var(--c-ink-3);
    display: grid; gap: var(--s-2);
}
.footer__cert-list li {
    padding-left: var(--s-3);
    border-left: 2px solid var(--c-blueprint);
    line-height: 1.4;
}

.footer__bottom {
    margin-top: var(--s-10);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-paper-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--c-ink-3);
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Hide legacy header/footer styles in case shop-header/shop-footer was rendered */
.shop-header { display: none !important; }
.shop-footer { display: none !important; }

/* ============================================================
   FÁZE D — Hero / Trust strip / Catalog grid / Process split
   ============================================================ */

/* ---------- Sections + section-head ---------- */
.section { padding: var(--s-16) 0 var(--s-20); }
.section--paper-2 { background: var(--c-paper-2); border-top: 1px solid var(--c-paper-line); border-bottom: 1px solid var(--c-paper-line); }

.section-head {
    max-width: 720px;
    margin: 0 0 var(--s-10);
}
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 { margin: 0 0 var(--s-3); }

/* ---------- Hero ---------- */
.hero {
    padding: var(--s-16) 0 var(--s-20);
    border-bottom: 1px solid var(--c-paper-line);
    position: relative;
}
.hero::before {
    content: ""; position: absolute; top: var(--s-6); left: var(--s-6);
    width: 24px; height: 24px;
    background:
        linear-gradient(var(--c-ink-3), var(--c-ink-3)) top left / 18px 1px no-repeat,
        linear-gradient(var(--c-ink-3), var(--c-ink-3)) top left / 1px 18px no-repeat;
    opacity: 0.6;
}
.hero__grid {
    display: grid; gap: var(--s-12);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-16); }
}

.hero__content > * + * { margin-top: var(--s-6); }
.hero__content .display { margin: var(--s-4) 0 var(--s-6); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.hero__specs {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--s-10);
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: 1px solid var(--c-paper-line);
}
@media (max-width: 540px) {
    .hero__specs { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
    .hero__specs .num--md { font-size: var(--t-22); }
}
.hero__specs dt {
    font-family: var(--font-mono);
    font-size: var(--t-12);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-ink-3);
    margin-bottom: var(--s-1);
}
.hero__specs dd { margin: 0; color: var(--c-ink); }

.hero__drawing {
    margin: 0;
    padding: var(--s-5);
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    color: var(--c-ink-2);
    position: relative;
}
.hero__drawing > svg { width: 100%; height: auto; }
.hero__drawing figcaption {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--c-paper-line);
    display: flex; flex-direction: column; gap: var(--s-1);
}
.hero__drawing figcaption small {
    font-family: var(--font-mono);
    font-size: var(--t-12);
    color: var(--c-ink-3);
}
/* Hero corner ticks */
.hero__drawing::before, .hero__drawing::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border-color: var(--c-blueprint); border-style: solid;
}
.hero__drawing::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hero__drawing::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ---------- Catalog grid ---------- */
.catalog-grid {
    display: grid; gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------- Process split + steps ---------- */
.split-2 {
    display: grid; gap: var(--s-12);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .split-2 { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.steps-numbered {
    list-style: none;
    padding: 0; margin: var(--s-5) 0 0;
    display: flex; flex-direction: column; gap: var(--s-3);
}
.steps-numbered li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    color: var(--c-ink-2);
    line-height: 1.55;
}
.steps-numbered li:last-child { border-bottom: 0; }
.steps-numbered__n {
    color: var(--c-rust);
    align-self: start;
    padding-top: 2px;
}
.steps-numbered strong { color: var(--c-ink); }

.list-checks {
    list-style: none; padding: 0;
    margin: var(--s-5) 0 0;
    display: flex; flex-direction: column; gap: var(--s-3);
    color: var(--c-ink-2);
}
.list-checks li {
    padding-left: 28px;
    position: relative;
    line-height: 1.55;
}
.list-checks li::before {
    content: "";
    position: absolute; left: 0; top: 6px;
    width: 16px; height: 16px;
    border: 1px solid var(--c-forest);
    background:
        linear-gradient(45deg, transparent 45%, var(--c-forest) 45%, var(--c-forest) 55%, transparent 55%) top left / 12px 1px no-repeat,
        linear-gradient(-45deg, transparent 45%, var(--c-forest) 45%, var(--c-forest) 55%, transparent 55%) bottom right / 12px 1px no-repeat;
    border-radius: var(--r-1);
}
.list-checks li::after {
    content: "✓";
    position: absolute; left: 3px; top: 4px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--c-forest);
    line-height: 1;
}

/* Hide old legacy hero/section/grid styles */
.hero__inner,
.hero__visual,
.hero__points,
.section--alt,
.grid--two,
.grid--cards,
.steps,
.checks,
.hero__card { /* legacy — replaced by new ones */ }

/* ============================================================
   FÁZE E — Catalog list + Product detail
   ============================================================ */

/* ---------- Catnav (kategorie chips) ---------- */
.catnav {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-bottom: var(--s-8);
    padding-bottom: var(--s-4);
    border-bottom: 1px dashed var(--c-paper-line);
}
.catnav__chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-paper-edge);
    background: var(--c-white);
    color: var(--c-ink-2);
    text-decoration: none;
    font-size: var(--t-14);
    font-weight: var(--w-medium);
    transition: border-color var(--d-fast), color var(--d-fast), background var(--d-fast);
}
.catnav__chip:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
    text-decoration: none;
}
.catnav__chip.is-active {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}
.catnav__count {
    color: var(--c-ink-3);
    font-family: var(--font-mono);
    font-size: var(--t-12);
}
.catnav__chip.is-active .catnav__count { color: rgba(247, 243, 234, 0.7); }

/* ---------- Pagination ---------- */
.pagination {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px dashed var(--c-paper-line);
}
.pagination__page {
    display: inline-grid; place-items: center;
    min-width: 40px; padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-paper-edge);
    color: var(--c-ink-2);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--t-14);
    transition: border-color var(--d-fast), color var(--d-fast);
}
.pagination__page:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
    text-decoration: none;
}
.pagination__page.is-active {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: var(--s-16) var(--s-4);
    border: 1px dashed var(--c-paper-edge);
    background: var(--c-white);
}

/* ---------- Product detail ---------- */
.pdetail {
    display: grid;
    gap: var(--s-10);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .pdetail {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(320px, 3fr);
        grid-template-areas: "visual main panel";
        gap: var(--s-10);
    }
    .pdetail__visual { grid-area: visual; }
    .pdetail__main   { grid-area: main; }
    .pdetail__panel  { grid-area: panel; }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    .pdetail {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-areas:
            "visual panel"
            "main   panel";
    }
}

.pdetail__visual {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    color: var(--c-ink-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.pdetail__visual::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    pointer-events: none;
}
.pdetail__visual > svg { width: 80%; height: auto; position: relative; z-index: 1; }
.pdetail__visual::after {
    /* dimension corner ticks */
    content: "";
    position: absolute; top: 8px; right: 8px;
    width: 16px; height: 16px;
    border: 1px solid var(--c-blueprint);
    border-bottom: 0; border-left: 0;
}

.pdetail__main h1 { margin: var(--s-3) 0 var(--s-3); }
.pdetail__avail { margin: 0 0 var(--s-5); }
.pdetail__description {
    color: var(--c-ink-2);
    line-height: var(--lh-loose);
    margin: var(--s-5) 0;
}
.pdetail__h2 {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-paper-line);
}

.param-grid {
    display: grid; gap: 0;
    margin: 0;
}
.param-grid > div {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    align-items: baseline;
}
.param-grid dt {
    color: var(--c-ink-3);
    font-family: var(--font-mono);
    font-size: var(--t-12);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.param-grid dd { margin: 0; color: var(--c-ink); }

/* ---------- Sticky price panel ---------- */
.price-panel {
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    border-top: var(--bw-stamp) solid var(--c-blueprint);
    padding: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-4);
}
@media (min-width: 1024px) {
    .pdetail__panel .price-panel {
        position: sticky;
        top: calc(var(--header-h) + var(--s-4));
    }
}
.price-panel__head { display: flex; justify-content: space-between; align-items: baseline; }
.price-panel__src {
    display: inline-flex; align-items: center; gap: var(--s-1);
    color: var(--c-forest);
}
.price-panel__src::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-forest);
    animation: pulse-dot 2.5s var(--ease-out) infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--c-forest); opacity: 1; }
    50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.5; }
}

.price-panel__total {
    display: flex; flex-direction: column; gap: var(--s-1);
    padding-bottom: var(--s-4);
    border-bottom: 1px dashed var(--c-paper-line);
}
.price-panel__total .num--lg { letter-spacing: -0.02em; line-height: 1; }
.price-panel__sub {
    display: grid; gap: var(--s-1);
}
.price-panel__sub > div { display: flex; justify-content: space-between; }
.price-panel__sub dt { color: var(--c-ink-3); font-size: var(--t-13, 13px); }
.price-panel__sub dd { margin: 0; }

.trust-mini {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--c-paper-line);
}
.trust-mini li {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--c-ink-3);
    font-size: var(--t-14);
}
.trust-mini .icon { color: var(--c-blueprint); }

/* Hide legacy product-detail and card classes */
.product-detail__sidebar,
.product-detail__main,
.product-detail__header,
.product-detail__grid,
.product-detail,
.price-card,
.price-card__row,
.product-detail__avail,
.product-detail__note,
.param-list,
.card,
.card--link,
.card__title,
.card__desc,
.card__price,
.card__cta,
.card__meta,
.back-link { /* legacy — kept invisible by new selectors taking precedence */ }

/* ============================================================
   FÁZE F — Konfigurátor s blueprint canvas
   ============================================================ */
.configurator-page { padding-top: var(--s-10); }

.cfg {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: 1fr;
    grid-template-areas:
        "canvas"
        "form"
        "panel";
}
@media (min-width: 900px) {
    .cfg {
        grid-template-columns: 1fr minmax(320px, 380px);
        grid-template-areas:
            "canvas panel"
            "form   panel";
        gap: var(--s-6);
    }
}
@media (min-width: 1200px) {
    .cfg {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(320px, 380px);
        grid-template-areas:
            "canvas form panel";
    }
}

.cfg__canvas { grid-area: canvas; }
.cfg__form   { grid-area: form; }
.cfg__panel  { grid-area: panel; }

/* ---------- Canvas (blueprint paper) ---------- */
.cfg__canvas {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    color: var(--c-blueprint);
    padding: var(--s-5);
    overflow: hidden;
}
.cfg__canvas-inner {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--c-paper-2);
    background-image:
        linear-gradient(var(--c-blueprint-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--c-blueprint-soft) 1px, transparent 1px);
    background-size: 20px 20px;
    display: grid; place-items: center;
}
.cfg__canvas-inner > svg {
    width: 80%; height: auto;
    color: var(--c-blueprint);
}
.cfg__canvas-caption {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--c-paper-line);
    display: flex; flex-direction: column; gap: var(--s-1);
}
.cfg__canvas-caption small {
    font-family: var(--font-mono);
    font-size: var(--t-12);
    color: var(--c-ink-3);
}
/* Corner blueprint marks */
.cfg__canvas::before, .cfg__canvas::after {
    content: ""; position: absolute; width: 18px; height: 18px;
    border-color: var(--c-blueprint); border-style: solid;
}
.cfg__canvas::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.cfg__canvas::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ---------- Form blocks ---------- */
.cfg-block {
    margin: 0 0 var(--s-5);
    padding: var(--s-5) var(--s-6);
    background: var(--c-white);
    border: 1px solid var(--c-paper-line);
}
.cfg-block legend {
    display: inline-flex; align-items: baseline; gap: var(--s-2);
    color: var(--c-ink);
    font-weight: var(--w-medium);
    font-size: var(--t-16);
    padding: 0 var(--s-2);
    margin-left: -var(--s-2);
    background: var(--c-white);
}
.cfg-block legend .num--sm { color: var(--c-rust); font-family: var(--font-mono); font-size: var(--t-12); }

.cfg__inputs {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cfg__inputs .field { margin-bottom: 0; }
.cfg__inputs label > span:first-child { color: var(--c-ink); }
.cfg__inputs label .field__req { color: var(--c-ink-3); font-family: var(--font-mono); font-size: var(--t-12); font-weight: var(--w-regular); }

.cfg__error {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    margin: var(--s-3) 0;
    font-size: var(--t-14);
    line-height: 1.5;
    display: flex; align-items: flex-start; gap: var(--s-2);
}
.cfg__error[hidden] { display: none; }
.cfg__error::before {
    content: "!"; font-family: var(--font-mono); font-weight: var(--w-bold);
    flex-shrink: 0;
    width: 18px; height: 18px;
    background: var(--c-danger); color: var(--c-paper);
    border-radius: 50%;
    display: inline-grid; place-items: center;
    font-size: 11px;
}

/* ---------- cfg-toggle (instalace + 12 % checkbox) ---------- */
.cfg-toggle {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--c-paper-edge);
    border-radius: var(--r-2);
    cursor: pointer;
    background: var(--c-white);
    align-items: flex-start;
    transition: border-color var(--d-fast), background var(--d-fast);
}
.cfg-toggle:has(input:checked) {
    border-color: var(--c-blueprint);
    background: var(--c-blueprint-soft);
}
.cfg-toggle input { margin-top: 4px; accent-color: var(--c-blueprint); }
.cfg-toggle__body { display: flex; flex-direction: column; gap: 2px; }
.cfg-toggle__title { font-weight: var(--w-medium); }
.cfg-toggle__meta {
    color: var(--c-ink-3);
    font-size: var(--t-12);
    line-height: 1.5;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.cfg-install__declaration[hidden] { display: none; }
.cfg-install__declaration { margin-top: var(--s-3); }

.cfg-note {
    padding: var(--s-4);
    border-radius: var(--r-2);
    background: var(--c-warning-soft);
    border-left: 3px solid var(--c-warning);
}
.cfg-note--warn .cfg-note__head { color: var(--c-warning); }
.cfg-note__head {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: var(--w-semibold);
    margin: 0 0 var(--s-2);
}
.cfg-note p { margin: 0 0 var(--s-2); font-size: var(--t-14); line-height: 1.6; }
.cfg-note p:last-of-type { margin-bottom: var(--s-3); }

/* ---------- Panel: sticky price + breakdown + CTA ---------- */
.cfg__panel .price-panel {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
}

.cfg-panel__breakdown details {
    border-top: 1px dashed var(--c-paper-line);
    border-bottom: 1px dashed var(--c-paper-line);
    padding: var(--s-2) 0;
}
.cfg-panel__breakdown summary {
    cursor: pointer; padding: var(--s-2) 0;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--t-14);
    font-weight: var(--w-medium);
    color: var(--c-ink-2);
}
.cfg-panel__breakdown summary::-webkit-details-marker { display: none; }
.cfg-panel__breakdown summary svg { transition: transform var(--d-fast); }
.cfg-panel__breakdown details[open] summary svg { transform: rotate(180deg); }

.bd-list {
    list-style: none; padding: 0; margin: var(--s-2) 0 0;
    counter-reset: bd;
}
.bd-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    font-size: var(--t-13, 13px);
    counter-increment: bd;
    align-items: baseline;
}
.bd-list li:last-child { border-bottom: 0; }
.bd-list li::before {
    content: counter(bd, decimal-leading-zero);
    font-family: var(--font-mono);
    color: var(--c-ink-4);
    font-size: var(--t-12);
}
.bd-list li.muted::before { content: "—"; }
.bd-list li > span:nth-child(1) { color: var(--c-ink-2); }
.bd-list li > span:nth-child(2) {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    text-align: right;
    white-space: nowrap;
    color: var(--c-ink);
}
.bd-list li.muted { display: block; color: var(--c-ink-3); }

.cfg-panel__vat-note {
    padding: var(--s-3);
    background: var(--c-blueprint-soft);
    border-left: 2px solid var(--c-blueprint);
    color: var(--c-ink-2);
    line-height: 1.5;
}
.cfg-panel__vat-note:empty { display: none; }

/* hide legacy configurator class names — POZN: .stepper si bere nový checkout */
.configurator,
.configurator__main,
.configurator__sidebar,
.configurator__error,
.configurator__source,
.dimension-grid,
.cfg-fieldset,
.cfg-checkbox,
.cfg-install__main,
.cfg-install__toggle,
.price-card,
.price-card__row,
.price-breakdown,
.vat-note,
.step,
.step__group,
.option-grid,
.option-card,
.option-card__label,
.option-card__price { /* legacy — replaced by .cfg / .cfg-block / .cfg-toggle */ }

/* ============================================================
   FÁZE G — Krokový checkout (01 → 04)
   ============================================================ */

.stepper {
    list-style: none; padding: 0; margin: 0 0 var(--s-8);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--c-paper-line);
    border-bottom: 1px solid var(--c-paper-line);
    background: var(--c-white);
}
.stepper__step {
    padding: var(--s-4) var(--s-3);
    display: flex; align-items: center; gap: var(--s-3);
    color: var(--c-ink-4);
    border-right: 1px solid var(--c-paper-line);
    position: relative;
    cursor: pointer;
    transition: color var(--d-fast), background var(--d-fast);
}
.stepper__step:last-child { border-right: 0; }
.stepper__step:hover { background: var(--c-paper-2); }
.stepper__num { color: inherit; }
.stepper__label { font-weight: var(--w-medium); }

.stepper__step.is-done {
    color: var(--c-ink-3);
    background: var(--c-paper);
}
.stepper__step.is-done::after {
    content: "✓";
    margin-left: auto;
    color: var(--c-forest);
    font-size: var(--t-14);
    font-weight: var(--w-bold);
}
.stepper__step.is-current {
    color: var(--c-ink);
    background: var(--c-paper);
}
.stepper__step.is-current::after {
    content: ""; position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 2px;
    background: var(--c-rust);
}
@media (max-width: 720px) {
    .stepper { grid-template-columns: 1fr; }
    .stepper__step { border-right: 0; border-bottom: 1px solid var(--c-paper-line); }
    .stepper__step:last-child { border-bottom: 0; }
    .stepper__step.is-current::after { width: 4px; height: 100%; left: 0; top: 0; bottom: auto; }
}

.co-grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .co-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}

.co-step { display: none; }
.co-step.is-active { display: block; }

.co-step__head {
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-paper-line);
}
.co-step__head .eyebrow { margin-bottom: var(--s-2); }
.co-step__head h2 { margin: 0; }
.co-step__h3 {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--c-paper-line);
    font-size: var(--t-18);
}
.co-step__body { padding: var(--s-5) 0; }
.co-step__nav {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px dashed var(--c-paper-line);
    flex-wrap: wrap;
}

.form-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid .field { margin: 0; }

.cfg-options {
    display: flex; flex-direction: column;
    gap: var(--s-2);
}
.cfg-options .cfg-toggle {
    grid-template-columns: 22px 1fr auto;
    align-items: center;
}
.cfg-toggle__price {
    font-family: var(--font-mono);
    color: var(--c-ink);
    white-space: nowrap;
}
.cfg-toggle.is-disabled { opacity: 0.4; pointer-events: none; }

.ares-hint {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-blueprint-soft);
    color: var(--c-blueprint);
    border-left: 2px solid var(--c-blueprint);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: 13px;
}

.co-recap {
    display: grid; gap: var(--s-5);
    margin-bottom: var(--s-5);
}
.co-recap__block {
    background: var(--c-paper-2);
    padding: var(--s-4) var(--s-5);
    border-left: 2px solid var(--c-blueprint);
}
.co-recap__block .eyebrow { margin-bottom: var(--s-2); }
.co-recap__block .param-grid > div {
    grid-template-columns: minmax(120px, 1fr) 2fr;
}

.co-summary { align-self: start; }
@media (min-width: 1024px) {
    .co-summary .price-panel {
        position: sticky;
        top: calc(var(--header-h) + var(--s-4));
    }
}

.co-items {
    list-style: none; padding: 0; margin: 0 0 var(--s-3);
    border-bottom: 1px dashed var(--c-paper-line);
    padding-bottom: var(--s-3);
    font-size: var(--t-14);
}
.co-items li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--s-2) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    gap: var(--s-3);
}
.co-items li:last-child { border-bottom: 0; }

/* Hide legacy checkout classes */
.checkout-grid,
.checkout-main,
.checkout-summary,
.checkout-step,
.checkout-error,
.checkout-items,
.checkout-totals { /* legacy — replaced by .co-* / .cfg-toggle */ }

/* ============================================================
   FÁZE H — Thank-you + Timeline + QR card + a11y
   ============================================================ */

.ty-hero {
    text-align: center;
    padding: var(--s-12) var(--s-4);
    border-bottom: 1px solid var(--c-paper-line);
    margin-bottom: var(--s-10);
    position: relative;
}
.ty-hero::before, .ty-hero::after {
    content: ""; position: absolute; width: 24px; height: 24px;
    border-color: var(--c-rust); border-style: solid;
    pointer-events: none;
}
.ty-hero::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.ty-hero::after  { top: 0; right: 0; border-width: 1px 1px 0 0; }

.ty-hero__icon {
    display: inline-grid; place-items: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--c-forest);
    color: var(--c-paper);
    margin-bottom: var(--s-5);
    animation: ty-pulse 2.4s var(--ease-out) infinite;
}
@keyframes ty-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0.3); }
    50%      { box-shadow: 0 0 0 12px transparent; }
}
.ty-hero .eyebrow { justify-content: center; margin-bottom: var(--s-3); }
.ty-hero__title { margin: 0 0 var(--s-4); }
.ty-hero .lead { margin: 0 auto var(--s-6); max-width: 580px; }
.ty-hero strong.num { color: var(--c-blueprint); }

.ty-hero__specs {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    padding-top: var(--s-6);
    margin: var(--s-6) auto 0;
    max-width: 720px;
    border-top: 1px dashed var(--c-paper-line);
}
.ty-hero__specs > div { text-align: center; }
.ty-hero__specs dt {
    font-family: var(--font-mono);
    font-size: var(--t-12);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-ink-3);
    margin-bottom: var(--s-1);
}
.ty-hero__specs dd { margin: 0; color: var(--c-ink); }
@media (max-width: 600px) {
    .ty-hero__specs { grid-template-columns: 1fr; gap: var(--s-3); }
}

.ty-grid {
    display: grid;
    gap: var(--s-8);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .ty-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
}

.timeline {
    list-style: none; padding: 0; margin: 0;
}
.timeline__step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    position: relative;
}
.timeline__step:last-child { border-bottom: 0; }
.timeline__num {
    color: var(--c-ink-4);
    align-self: start;
    padding-top: 2px;
}
.timeline__step--done .timeline__num { color: var(--c-forest); }
.timeline__step--current .timeline__num { color: var(--c-rust); }
.timeline__step--current::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--s-4);
    bottom: var(--s-4);
    width: 2px;
    background: var(--c-rust);
}
.timeline__label {
    display: block;
    font-weight: var(--w-medium);
    color: var(--c-ink);
    margin-bottom: 2px;
}
.timeline__step--done .timeline__label::after {
    content: " ✓";
    color: var(--c-forest);
}
.timeline__desc { margin: 0; font-size: var(--t-14); }

.ty-items__h3 {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-paper-line);
}
.ty-items {
    list-style: none; padding: 0; margin: 0;
}
.ty-items li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-paper-line);
    gap: var(--s-3);
}

.ty-payment {
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    border-top: var(--bw-stamp) solid var(--c-blueprint);
    padding: var(--s-6);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.ty-info {
    background: var(--c-paper-2);
    padding: var(--s-4) var(--s-5);
    border-left: 2px solid var(--c-blueprint);
}
.ty-info .eyebrow { margin-bottom: var(--s-2); color: var(--c-blueprint); }
.ty-info p { margin: 0 0 var(--s-2); font-size: var(--t-14); line-height: 1.6; }
.ty-info p:last-of-type { margin-bottom: var(--s-3); }

.qr-card {
    background: var(--c-paper-2);
    padding: var(--s-5);
    border-radius: var(--r-2);
}
.qr-card__head { margin-bottom: var(--s-3); }
.qr-card__head .eyebrow .icon { color: var(--c-blueprint); }
.qr-card__image {
    text-align: center;
    padding: var(--s-3);
    background: var(--c-white);
    border: 1px solid var(--c-paper-edge);
    margin: 0 auto var(--s-3);
    max-width: 256px;
    position: relative;
}
.qr-card__image::before, .qr-card__image::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border-color: var(--c-blueprint); border-style: solid;
}
.qr-card__image::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.qr-card__image::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.qr-card__image img {
    width: 100%; height: auto;
    max-width: 220px;
    margin: 0 auto;
}
.qr-card__hint { text-align: center; margin: 0 0 var(--s-3); }
.qr-card__rule {
    border: 0;
    border-top: 1px dashed var(--c-paper-line);
    margin: var(--s-3) 0;
}
.qr-card__details .eyebrow { margin-bottom: var(--s-2); }
.qr-card__kv > div { grid-template-columns: minmax(120px, 1fr) 2fr; }
.qr-card__kv code {
    background: var(--c-white);
    padding: 2px 6px;
    border: 1px solid var(--c-paper-edge);
    border-radius: var(--r-1);
    font-family: var(--font-mono);
    word-break: break-all;
}
.qr-card__note {
    margin: var(--s-3) 0 0;
    padding: var(--s-3);
    background: var(--c-blueprint-soft);
    border-left: 2px solid var(--c-blueprint);
    line-height: 1.5;
}

/* Hide legacy thank-you classes */
.thank-you,
.thank-you__icon,
.thank-you__grid,
.thank-you__details,
.thank-you__payment,
.thank-you__cta,
.payment-info,
.payment-qr,
.payment-qr__hint,
.payment-qr__details,
.payment-qr__note { /* legacy — replaced by .ty-* / .qr-card */ }

/* ============================================================
   A11Y POLISH — skip link + reduced motion
   ============================================================ */

.skip-link {
    position: absolute; left: -9999px;
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink);
    color: var(--c-paper);
    text-decoration: none;
    z-index: 100;
    font-weight: var(--w-medium);
}
.skip-link:focus {
    left: var(--s-3);
    top: var(--s-3);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   FLAT MODERN BLUE — override block (přepisuje atelier styling)
   - Bez paper grid background
   - Bez dimension corner ticks
   - Sans-serif numerics (žádné mono)
   - Větší radius (8/12/16px)
   - Soft shadows místo hard borders
   - Modré primary CTA (žádný rust)
   ============================================================ */

/* 1. Background — clean, žádný dotted grid */
body.shop-body {
    background-image: none;
    background-color: var(--c-paper);
}

/* 2. Bricolage display — bez condensed width axis (čistější moderní look) */
.display, h1.display, h1, .h1, h2, .h2, h3, .h3 {
    font-variation-settings: "wght" 500, "wdth" 100;
}

/* 3. Eyebrow — clean (bez rule line, bez uppercase mono) */
.eyebrow {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-blueprint);
    font-weight: var(--w-semibold);
    font-size: var(--t-12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.eyebrow::before { display: none; }

/* 4. Numerics — sans-serif (žádné mono) */
.num, .num--lg, .num--md, .num--sm {
    font-family: var(--font-sans);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* 5. Vypnout dimension corner ticks na všech atelier elementech */
.hero::before,
.card-atelier::before,
.card-atelier::after,
.hero__drawing::before,
.hero__drawing::after,
.cfg__canvas::before,
.cfg__canvas::after,
.ty-hero::before,
.ty-hero::after,
.qr-card__image::before,
.qr-card__image::after,
.pdetail__visual::after { display: none !important; }

/* 6. Buttons — větší radius, modré primary */
[class].btn { border-radius: var(--r-2); }
[class].btn--primary {
    --btn-bg: var(--c-blueprint);
    --btn-bd: var(--c-blueprint);
    --btn-fg: var(--c-white);
}
[class].btn--primary:hover {
    --btn-bg: var(--c-blueprint-2);
    --btn-bd: var(--c-blueprint-2);
}

/* 7. Cards — soft shadow, větší radius, bez stamp top border */
.card-atelier {
    border-radius: var(--r-3);
    border: 1px solid var(--c-paper-line);
    border-top-width: 1px;
    background: var(--c-white);
    box-shadow: var(--shadow-rest);
    overflow: hidden;
}
.card-atelier:hover {
    border-color: var(--c-paper-edge);
    box-shadow: var(--shadow-lift);
}
.card-atelier__visual { border-bottom: 1px solid var(--c-paper-line); }
.card-atelier__visual::before { opacity: 0.3; }
.card-atelier__cta { color: var(--c-blueprint); }

/* 8. Form inputs — větší radius */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field input[type="password"],
.field select,
.field textarea {
    border-radius: var(--r-2);
}

/* 9. Hero drawing — clean rounded panel */
.hero__drawing {
    border-radius: var(--r-3);
    border-color: var(--c-paper-line);
    background: var(--c-white);
}
.hero__drawing figcaption small { color: var(--c-ink-3); }

/* 10. Configurator canvas — bez corner ticks, větší radius */
.cfg__canvas {
    border-radius: var(--r-3);
    border-color: var(--c-paper-line);
    background: var(--c-white);
}
.cfg__canvas-inner { border-radius: var(--r-2); }
.cfg__canvas-caption small { color: var(--c-ink-3); }

/* 11. Cfg form blocks — rounded */
.cfg-block {
    border-radius: var(--r-3);
    border: 1px solid var(--c-paper-line);
    box-shadow: var(--shadow-rest);
}
.cfg-block legend { background: var(--c-white); }
.cfg-block legend .num--sm { color: var(--c-blueprint); }

/* 12. Cfg toggles — rounded */
.cfg-toggle { border-radius: var(--r-2); }

/* 13. Cfg note (čestné prohlášení) — rounded */
.cfg-note { border-radius: var(--r-2); }

/* 14. Price panel — rounded, bez stamp top, soft shadow */
.price-panel {
    border-radius: var(--r-3);
    border: 1px solid var(--c-paper-line);
    border-top: 1px solid var(--c-paper-line);
    box-shadow: var(--shadow-rest);
}

/* 15. Catnav chips — rounded pill */
.catnav__chip { border-radius: var(--r-pill); }

/* 16. Pagination — rounded */
.pagination__page { border-radius: var(--r-2); }

/* 17. Trust strip — rounded items */
.trust__item {
    border-left: 3px solid var(--c-blueprint);
    background: var(--c-white);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    padding: var(--s-4);
    box-shadow: var(--shadow-rest);
}

/* 18. Trust mini — modré ikony */
.trust-mini .icon { color: var(--c-blueprint); }

/* 19. Cards & containers — sjednoceně rounded */
.empty-state,
.ty-info,
.co-recap__block,
.ares-hint,
.cfg-panel__vat-note,
.qr-card,
.qr-card__image,
.flash { border-radius: var(--r-2); }

/* 20. Detail produktu — rounded visual + panel */
.pdetail__visual { border-radius: var(--r-3); }
.pdetail__visual::before { opacity: 0.3; }

/* 21. Stepper — bez harsh borders */
.stepper {
    border: 1px solid var(--c-paper-line);
    border-radius: var(--r-3);
    overflow: hidden;
}
.stepper__step.is-current::after { background: var(--c-blueprint); }

/* 22. Footer — soft */
.footer {
    background: var(--c-paper-2);
}
.footer__cert-list li { border-left-color: var(--c-blueprint); }
.trust__item .icon { color: var(--c-blueprint); }

/* 23. Thank-you hero — bez corner ticks, jemnější */
.ty-hero {
    background: var(--c-white);
    border: 1px solid var(--c-paper-line);
    border-radius: var(--r-3);
    margin-bottom: var(--s-8);
}

/* 24. Thank-you payment panel — rounded */
.ty-payment {
    border-radius: var(--r-3);
    border: 1px solid var(--c-paper-line);
    border-top: 1px solid var(--c-paper-line);
    box-shadow: var(--shadow-rest);
}

/* 25. QR card — rounded */
.qr-card { border-radius: var(--r-3); }

/* 26. Cart counter — primary blue */
.cart-counter { background: var(--c-blueprint); }

/* 27. Active nav border — modré místo rust */
.masthead__nav a:hover,
.masthead__nav a.is-active {
    border-bottom-color: var(--c-blueprint);
}
.masthead__nav a:hover .masthead__nav-num,
.masthead__nav a.is-active .masthead__nav-num { color: var(--c-blueprint); }

/* 28. Brand text em — clean (žádné mono uppercase) */
.brand__text em {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    color: var(--c-ink-3);
}

/* 29. Hero specs labels — clean */
.hero__specs dt,
.ty-hero__specs dt {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-14);
    color: var(--c-ink-3);
    font-weight: var(--w-medium);
}

/* 30. Param-grid dt — clean */
.param-grid dt {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-14);
    font-weight: var(--w-medium);
}

/* 31. Card specs dt — clean */
.card-atelier__specs dt {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--w-medium);
}

/* 32. Crumbs — clean (žádné mono uppercase) */
.crumbs ol {
    font-family: var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-14);
}

/* 33. Stepper labels — clean */
.stepper__num {
    font-family: var(--font-sans);
}

/* 34. Footer cert list — clean (žádné mono) */
.footer__cert-list {
    font-family: var(--font-sans);
    font-size: var(--t-14);
}

/* 35. List checks — modré checkboxy místo forest */
.list-checks li::before {
    border: 1.5px solid var(--c-blueprint);
}
.list-checks li::after { color: var(--c-blueprint); }

/* 36. Steps numbered — modré */
.steps-numbered__n { color: var(--c-blueprint); }

/* 37. Card badge — větší radius */
.card-atelier__badge { border-radius: var(--r-1); }

/* 38. Bd-list — sans serif numerics */
.bd-list li > span:nth-child(2) { font-family: var(--font-sans); }
.bd-list li::before { font-family: var(--font-sans); }

/* 39. Field req asterisk — modré */
.field__req { color: var(--c-blueprint); }

/* 40. Skip link — rounded */
.skip-link { border-radius: var(--r-2); }

/* 41. Section paper-2 — světlý blue */
.section--paper-2 {
    background: var(--c-paper-2);
    border-top: 1px solid var(--c-paper-line);
    border-bottom: 1px solid var(--c-paper-line);
}

/* 42. Hero corner mark dimension — odstranit */
.hero { border-bottom: 1px solid var(--c-paper-line); }

/* 43. cfg-toggle: na BG bgcolor pozadí (ne paper-2 jak default) */
.cfg-toggle { background: var(--c-white); }
.cfg-toggle:has(input:checked) {
    border-color: var(--c-blueprint);
    background: var(--c-blueprint-soft);
}

/* 44. Cfg__panel — vat note rounded */
.cfg-panel__vat-note { border-radius: var(--r-2); }

/* 45. Hero CTA primary blue (default už by mělo) */
.hero__cta .btn--primary { background: var(--c-blueprint); border-color: var(--c-blueprint); }

/* 46. Search form input — rounded */
.search-form input[type="search"] { border-radius: var(--r-2); }

/* 48. Cart item — service (montáž) varianta */
.cart-item--service {
    background: var(--c-blueprint-soft);
    border-color: var(--c-blueprint);
    border-left: 3px solid var(--c-blueprint);
}
.cart-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-blueprint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.cart-item__badge .icon { width: 14px; height: 14px; }
.cart-item__title--sm {
    font-size: 0.95rem;
    margin: 0 0 4px 0;
    color: var(--c-ink);
    font-weight: 600;
}
.cart-item__note {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: var(--c-ink-3);
}
.cart-item__remove--locked {
    color: var(--c-ink-4);
    font-size: 1rem;
    padding: 4px;
    cursor: help;
}

/* ============================================================
   47. Configurator landing — 4 karty kategorií se seznamem kalkulací
   ============================================================ */
.cfg-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}
@media (max-width: 900px) {
    .cfg-cats { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.cfg-cat {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    background: var(--c-white);
    border: 1px solid var(--c-paper-line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-rest);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cfg-cat:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--c-paper-edge);
}
@media (max-width: 700px) {
    .cfg-cat { grid-template-columns: 1fr; }
}

.cfg-cat__visual {
    background: var(--c-paper-2);
    border-right: 1px solid var(--c-paper-line);
    padding: var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blueprint);
}
.cfg-cat__visual svg { width: 100%; height: auto; max-width: 200px; }
@media (max-width: 700px) {
    .cfg-cat__visual {
        border-right: none;
        border-bottom: 1px solid var(--c-paper-line);
        padding: var(--sp-3) var(--sp-3) 0;
    }
}

.cfg-cat__body {
    display: flex;
    flex-direction: column;
    padding: var(--sp-4);
    gap: var(--sp-3);
}
.cfg-cat__head { display: flex; flex-direction: column; gap: 4px; }
.cfg-cat__title {
    font-size: clamp(1.4rem, 1.6vw, 1.7rem);
    line-height: 1.15;
    margin: 0;
    color: var(--c-ink);
}
.cfg-cat__desc {
    font-size: 0.95rem;
    color: var(--c-ink-2);
    margin: 0;
}

.cfg-cat__empty {
    padding: var(--sp-3);
    background: var(--c-paper-2);
    border-radius: var(--r-2);
    font-size: 0.9rem;
}
.cfg-cat__empty a { color: var(--c-blueprint); text-decoration: underline; }

.cfg-cat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cfg-cat__item { margin: 0; }

.cfg-cat__link {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: var(--sp-3);
    background: var(--c-paper);
    border: 1px solid var(--c-paper-line);
    border-radius: var(--r-2);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.cfg-cat__link:hover {
    background: var(--c-blueprint-soft);
    border-color: var(--c-blueprint);
    transform: translateY(-1px);
}
.cfg-cat__link:focus-visible {
    outline: 2px solid var(--c-blueprint);
    outline-offset: 2px;
}

.cfg-cat__item-name {
    font-weight: 600;
    color: var(--c-ink);
    font-size: 1rem;
}
.cfg-cat__item-desc {
    font-size: 0.85rem;
    color: var(--c-ink-3);
    line-height: 1.4;
}
.cfg-cat__item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: var(--sp-2);
}
.cfg-cat__price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--c-ink);
}
.cfg-cat__price small { color: var(--c-ink-3); font-size: 0.75rem; }
.cfg-cat__price strong { font-weight: 700; }

.cfg-cat__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-blueprint);
    font-weight: 600;
    font-size: 0.9rem;
}
.cfg-cat__cta .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.cfg-cat__link:hover .cfg-cat__cta .icon { transform: translateX(2px); }