/* ═══════════════════════════════════════════════
   FOTOOBRAZ – Minimalistický galeriový design
   Hodně bílé, fotky v popředí
   ═══════════════════════════════════════════════ */

/* ─── Reset & Base ──────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #595f6b;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-primary: #1a1a1a;
    --color-primary-hover: #333;
    --color-accent: #2563eb;
    --color-teal: #3F7373;
    --color-teal-rgb: 63,115,115;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
    --color-surface: #fafafa;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
    --container: 1200px;
    --header-height: 64px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html{font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip}
body{font-family:var(--font);color:var(--color-text);background:var(--color-bg);line-height:1.6;overflow-wrap:break-word;word-wrap:break-word;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
input,select,textarea,button{font:inherit}
h1,h2,h3,h4{font-weight:600;line-height:1.25}
:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.skip-link{
    position:absolute;top:-100%;left:0;
    background:var(--color-primary);color:#fff;
    padding:12px 20px;border-radius:0 0 var(--radius) 0;
    font-size:.875rem;font-weight:600;z-index:9999;
    text-decoration:none;
}
.skip-link:focus{top:0}

/* ─── Layout ────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.container-narrow{max-width:800px}
.container-xs{max-width:480px}
.section{padding:64px 0}
.text-center{text-align:center}
.text-muted{color:var(--color-text-muted)}

/* ─── Header ────────────────────────────────── */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--color-border-light);
    height:var(--header-height);
}
.site-main{padding-top:var(--header-height)}
.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-height);
}
.logo-text{
    font-size:1.4rem;font-weight:700;letter-spacing:-.02em;
    color:var(--color-text);
}
.logo-img{
    height:40px;width:auto;display:block;
}
.logo-img--footer{
    height:120px;width:auto;display:block;margin-bottom:12px;
}
.main-nav{display:flex;gap:32px;align-items:center}
.main-nav a{font-size:.9rem;font-weight:500;color:var(--color-text-muted);transition:color .2s}
.main-nav a:hover{color:var(--color-text)}
.nav-cta{
    background:transparent;color:var(--color-teal) !important;
    padding:8px 16px;border-radius:var(--radius);font-size:.85rem;
    border:1.5px solid var(--color-teal);
}
.nav-cta:hover{background:rgba(var(--color-teal-rgb),0.08)}
/* Header CTA hierarchie: když existuje druhé CTA (technika), fotoobraz = PRIMARY (plné tlačítko),
   technika zůstává outline (secondary), ať nesoupeří. Bez druhého CTA (NPHT) se .nav-cta NEMĚNÍ. */
.main-nav:has(.nav-cta--secondary) .nav-cta:not(.nav-cta--secondary){background:var(--color-teal);color:#fff !important}
.main-nav:has(.nav-cta--secondary) .nav-cta:not(.nav-cta--secondary):hover{background:var(--color-teal-dark,#356060);color:#fff !important}
.nav-cta--secondary{font-weight:500}
/* Header dropdown „Vytvořit… ▾" (D-5, jen storefronty s víc technikami; NPHT má jedno tlačítko). */
.nav-cta-dd{position:relative;display:inline-block}
.nav-cta--dd{background:var(--color-teal);color:#fff !important;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-cta--dd:hover{background:var(--color-teal-dark,#356060)}
.nav-cta-caret{font-size:.7em;transition:transform .15s ease}
.nav-cta-dd.is-open .nav-cta-caret{transform:rotate(180deg)}
.nav-cta-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:#fff;border:1px solid var(--color-border,#e5e5e5);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:none;z-index:1200}
.nav-cta-dd.is-open .nav-cta-menu{display:block}
.nav-cta-menu-item{display:block;padding:9px 12px;border-radius:6px;color:var(--color-text,#222) !important;font-size:.9rem;text-decoration:none;white-space:nowrap}
.nav-cta-menu-item:hover{background:rgba(var(--color-teal-rgb),.1);color:var(--color-teal) !important}
.nav-cta-menu-item:first-child{border-bottom:1px solid var(--color-border,#eee);margin-bottom:4px;padding-bottom:11px}
.nav-active{
    color:var(--color-text) !important;
    padding:8px 16px;border-radius:var(--radius);font-size:.85rem;
    border:1.5px solid var(--color-text);
}
.nav-active:hover{background:var(--color-surface)}
.header-actions{display:flex;gap:16px;align-items:center}
.header-link{color:var(--color-text-muted);transition:color .2s}
.header-link:hover{color:var(--color-text)}
.cart-link{position:relative}
.cart-badge{
    position:absolute;top:-6px;right:-8px;
    background:var(--color-primary);color:#fff;
    font-size:.65rem;font-weight:700;
    width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--color-text)}

/* ─── Buttons ───────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 24px;border-radius:var(--radius);font-weight:500;
    font-size:.9rem;border:none;cursor:pointer;transition:all .2s;
    text-align:center;
}
.btn small{font-size:.75rem;opacity:.7;display:block;margin-top:2px}
.btn-primary{background:var(--color-teal);color:#fff}
.btn-primary:hover{background:#2d5555;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border:1.5px solid var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-text);background:var(--color-surface)}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-full{width:100%}
/* Nápověda pod „Přidat do košíku" u technik s progressive disclosure (DBN/tečkování) — proč je
   tlačítko zašedlé. Jen non-fotoobraz (gate {% if technique_code %}) → fotoobraz beze změny. */
.cart-hint{margin:8px 0 0;font-size:.82rem;color:var(--color-text-muted);text-align:center}
/* Grafické práce (volitelný upsell, DBN/tečkování) — „i" ikona v dlaždici 2 + modal s 3 body. */
.graphic-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
    border-radius:50%;border:1.5px solid currentColor;font-size:.72rem;font-style:italic;font-weight:700;
    line-height:1;margin-left:6px;cursor:pointer;vertical-align:middle}
.graphic-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99998;
    align-items:center;justify-content:center;padding:20px}
.graphic-modal.open{display:flex}
.graphic-modal-inner{background:#fff;border-radius:var(--radius-lg,12px);max-width:460px;width:100%;
    padding:24px 26px;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.graphic-modal-inner h3{margin:0 0 14px;font-size:1.1rem}
.graphic-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.8rem;
    line-height:1;cursor:pointer;color:var(--color-text-muted)}
.graphic-modal-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.graphic-note-wrap{margin-top:12px}
.graphic-note-label{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:5px}
.graphic-note{width:100%;box-sizing:border-box;border:1px solid var(--color-border,#ddd);border-radius:8px;
    padding:9px 11px;font:inherit;font-size:.9rem;resize:vertical;min-height:64px}
.graphic-note:focus{outline:none;border-color:var(--color-teal);box-shadow:0 0 0 2px rgba(63,115,115,.15)}

/* ─── Hero ──────────────────────────────────── */
.hero{padding:80px 0 64px}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero-content{text-align:left}
.hero-logo{width:100%;max-width:480px;min-width:300px;height:auto;display:block;margin:0 auto 24px}
.hero h1{font-size:3.2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}
.hero-subtitle{font-size:1.15rem;color:var(--color-text-muted);max-width:520px;margin:0 0 32px}
.hero-actions{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap}
/* ⚠️ Schválně BEZ `color` a `font-size`: OoD má na `.home-ood .ood-hero p` vlastní pravidlo
   s vyšší specificitou, takže by tyhle dvě deklarace na OoD stejně prohrály a poznámka by
   vypadala na každém trhu jinak. `font-weight` a `margin` OoD nenastavuje → platí na obou. */
.hero-note{margin:18px 0 0;font-weight:600}
.hero-video{position:relative;flex-shrink:0;width:min(380px,32vw,39.375vh)}
.hero-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);cursor:pointer}
.hero-video-controls{position:absolute;bottom:14px;right:14px}
.hero-video-btn{
    background:var(--color-teal);color:#fff;border:none;cursor:pointer;
    font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:999px;
    box-shadow:var(--shadow-sm);opacity:.92;transition:opacity .2s,transform .2s;
    white-space:nowrap;
}
.hero-video-btn:hover{opacity:1;transform:translateY(-1px)}

/* ─── How it works ──────────────────────────── */
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.step{text-align:center}
.step-number{
    width:48px;height:48px;border-radius:50%;
    background:var(--color-surface);border:2px solid var(--color-teal);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:1.1rem;margin:0 auto 16px;
    color:var(--color-teal);
}
.step h3{font-size:1rem;margin-bottom:8px}
.step p{font-size:.85rem;color:var(--color-text-muted)}

/* ─── Section headers ───────────────────────── */
.section-title{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px}
.section-link{font-size:.85rem;color:var(--color-text-muted);font-weight:500}
.section-link:hover{color:var(--color-text)}
.page-header{margin-bottom:32px}
.page-header h1{font-size:2rem}
.page-subtitle{color:var(--color-text-muted);margin-top:8px}

/* ─── Motif Grid ────────────────────────────── */
.motif-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:24px;
}
.motif-grid--4{grid-template-columns:repeat(4,1fr)}
.motif-grid--3{grid-template-columns:repeat(3,1fr)}

.motif-card{
    display:block;border-radius:var(--radius-lg);overflow:hidden;
    transition:transform .25s, box-shadow .25s;
}
.motif-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.motif-card-image{
    position:relative;aspect-ratio:4/3;overflow:hidden;
    background:var(--color-surface);
}
.motif-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.motif-card:hover .motif-card-image img{transform:scale(1.05)}
.motif-card-info{padding:12px 4px}
.motif-card-name{display:block;font-weight:500;font-size:.9rem}
.motif-card-category{display:block;font-size:.8rem;color:var(--color-text-muted)}
.motif-card-sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.motif-size-chip{font-size:.7rem;color:var(--color-text-muted);background:var(--color-border-light);border:1px solid var(--color-border);border-radius:4px;padding:1px 5px;white-space:nowrap}
.motif-card-price{display:block;font-size:.85rem;color:var(--color-text-muted);margin-top:6px}
.price-size-hint{font-size:.8em;opacity:.75}

/* Badges */
.badge{
    position:absolute;top:12px;left:12px;
    padding:4px 10px;border-radius:4px;font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;
}
.badge-new{background:#1a1a1a;color:#fff}
.badge-featured{background:var(--color-accent);color:#fff}

/* ─── Categories ────────────────────────────── */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px,1fr));gap:16px;margin-top:32px}
.categories-grid--filter{margin-top:0;margin-bottom:28px}
.category-card{
    position:relative;aspect-ratio:3/2;border-radius:var(--radius-lg);
    overflow:hidden;background:var(--color-surface);
    transition:box-shadow .2s;
}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.category-card:hover img{transform:scale(1.05)}
.category-card-name{
    position:absolute;bottom:0;left:0;right:0;
    padding:16px;font-weight:600;color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.6));
}
.category-card--all{background:var(--color-border-light);display:flex;align-items:center;justify-content:center}
.category-card--all .category-card-name{position:static;background:none;color:var(--color-text);padding:0}
.category-card--active{box-shadow:0 0 0 3px var(--color-text)}
.filters-bar--compact{margin-top:0;justify-content:flex-end}

/* ─── Features grid (homepage) ─────────────── */
.section--alt{background:var(--color-surface)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.feature-card{background:#fff;border-radius:var(--radius-lg);padding:32px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.feature-card-icon{width:60px;height:60px;background:var(--color-border-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--color-teal)}
.feature-card h3{margin:0 0 10px;font-size:1.05rem}
.feature-card p{margin:0;color:var(--color-text-muted);font-size:.88rem;line-height:1.7}

/* ─── CTA Section ───────────────────────────── */
.cta-section{background:var(--color-surface)}
.cta-box{text-align:center;padding:48px 0}
.cta-content h2{font-size:1.8rem;margin-bottom:12px}
.cta-content p{color:var(--color-text-muted);margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto}

/* ─── Filters ───────────────────────────────── */
.filters-bar{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:16px;margin-bottom:32px;
    padding-bottom:16px;border-bottom:1px solid var(--color-border-light);
}
.filter-group{display:flex;flex-wrap:wrap;gap:8px}
.size-filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.size-filter-label{font-size:.8rem;font-weight:600;color:var(--color-text-muted);white-space:nowrap;flex-shrink:0}
.filter-chip--size{padding:5px 11px;font-size:.75rem}
.filter-chip{
    padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:500;
    background:var(--color-surface);border:1px solid var(--color-border);
    transition:all .15s;
}
.filter-chip:hover,.filter-chip.active{
    background:var(--color-primary);color:#fff;border-color:var(--color-primary);
}
.filters-right{display:flex;gap:12px;align-items:center}
.search-input{
    padding:8px 14px;border:1px solid var(--color-border);
    border-radius:var(--radius);font-size:.85rem;width:200px;
}
.sort-select{
    padding:8px 12px;border:1px solid var(--color-border);
    border-radius:var(--radius);font-size:.85rem;background:#fff;
}

/* ─── Pagination ────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:4px;margin-top:48px}
.page-link{
    padding:8px 14px;border-radius:var(--radius);font-size:.85rem;
    border:1px solid var(--color-border);background:#fff;
}
.page-link.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.page-link:hover:not(.active){background:var(--color-surface)}

/* ─── Motif Detail ──────────────────────────── */
.motif-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.motif-detail-image{position:sticky;top:calc(var(--header-height) + 24px)}
.canvas-mockup{
    background:var(--color-surface);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);overflow:hidden;
}
.canvas-mockup img{width:100%;display:block}
.canvas-mockup--zoomable{cursor:zoom-in;position:relative}
.canvas-mockup--zoomable:hover .zoom-hint{opacity:1}
.zoom-hint{
    position:absolute;bottom:12px;right:12px;
    background:rgba(0,0,0,.5);color:#fff;
    font-size:.75rem;font-weight:600;
    padding:5px 10px;border-radius:20px;
    display:flex;align-items:center;gap:5px;
    opacity:0;transition:opacity .2s;
    pointer-events:none;backdrop-filter:blur(4px);
}

/* Lightbox */
.lightbox{
    position:fixed;inset:0;z-index:1000;
    background:rgba(0,0,0,.85);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .25s;
    backdrop-filter:blur(6px);
}
.lightbox--open{opacity:1;pointer-events:all}
.lightbox__inner{
    max-width:90vw;max-height:90vh;
    border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.5);
    transform:scale(.95);transition:transform .25s;
}
.lightbox--open .lightbox__inner{transform:scale(1)}
.lightbox__img{display:block;max-width:90vw;max-height:90vh;object-fit:contain}
.lightbox__close{
    position:fixed;top:20px;right:24px;
    background:rgba(255,255,255,.15);border:none;color:#fff;
    font-size:1.75rem;line-height:1;width:44px;height:44px;
    border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;backdrop-filter:blur(4px);
}
.lightbox__close:hover{background:rgba(255,255,255,.3)}
.breadcrumb{font-size:.8rem;color:var(--color-text-muted);margin-bottom:16px;display:flex;gap:8px}
.breadcrumb a:hover{color:var(--color-text)}
.motif-detail-info h1{font-size:1.8rem;margin-bottom:24px}

/* Size picker */
.picker-label{font-weight:500;font-size:.85rem;margin-bottom:12px;display:block}
.size-options{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px,1fr));gap:8px}
.size-option{cursor:pointer}
.size-option input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.size-option-box{
    display:flex;flex-direction:column;align-items:center;
    padding:12px 8px;border:1.5px solid var(--color-border);border-radius:var(--radius);
    transition:all .15s;text-align:center;
}
.size-option input:checked + .size-option-box{
    border-color:var(--color-primary);background:var(--color-surface);
}
.size-option-label{font-size:.8rem;font-weight:500}
.size-option-price{font-size:.75rem;color:var(--color-text-muted);margin-top:2px}
.price-display{margin:24px 0;font-size:1.8rem;font-weight:700}
.motif-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.tag{
    padding:4px 12px;border-radius:16px;font-size:.75rem;
    background:var(--color-surface);border:1px solid var(--color-border);
}
.tag:hover{background:var(--color-border-light)}

/* ─── Configurator ──────────────────────────── */
.configurator-section{overflow-x:clip}
.config-reassurance{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:10px 14px;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius);font-size:.9rem;color:var(--color-text)}
.config-reassurance svg{width:19px;height:19px;color:var(--color-teal);flex-shrink:0}
.configurator-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;margin-top:40px}
.config-step{margin-bottom:40px;scroll-margin-top:calc(var(--header-height) + 16px)}
.config-step h2{font-size:1.1rem;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.step-num{
    width:32px;height:32px;border-radius:50%;
    background:var(--color-primary);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.8rem;font-weight:700;flex-shrink:0;
}

/* Upload zone */
.upload-zone{
    border:2px dashed var(--color-border);border-radius:var(--radius-lg);
    padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s;
    position:relative;
}
.upload-zone:hover,.upload-zone.dragover{
    border-color:var(--color-primary);background:var(--color-surface);
}
.upload-zone svg{margin:0 auto 16px;color:var(--color-text-muted)}
.upload-zone p{color:var(--color-text-muted);font-size:.9rem}
.upload-hint{font-size:.8rem !important;margin-top:8px}
.upload-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-progress{text-align:center;padding:24px}
.progress-bar{height:6px;background:var(--color-border-light);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--color-primary);border-radius:3px;transition:width .2s;width:0}

/* Orientation selector – vizuálně shodné se size-conf-box */
.orientation-option{
    cursor:pointer;display:flex;flex-direction:column;align-items:center;
    padding:14px 8px;gap:8px;
    border:1.5px solid var(--color-border);border-radius:var(--radius);
    background:#fff;transition:all .15s;text-align:center;
    font-family:inherit;font-size:inherit;
    position:relative;
}
.orientation-option:hover{border-color:var(--color-text-muted)}
.orientation-option.active{border-color:var(--color-primary);background:var(--color-surface)}
.orient-icon{background:var(--color-text);border-radius:2px}
.orient-icon--portrait{width:22px;height:34px}
.orient-icon--landscape{width:34px;height:22px}
.orient-icon--square{width:28px;height:28px}

/* Ratio recommendation box (above orientation tiles) */
.ratio-recommendation{
    margin-bottom:16px;padding:12px 16px;
    background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius);
    font-size:.85rem;color:#14532d;line-height:1.6;
}

/* Size recommendation box */
.size-recommendation{
    margin-bottom:16px;padding:12px 16px;
    background:#f0f9ff;border:1px solid #bae6fd;border-radius:var(--radius);
    font-size:.85rem;color:#0c4a6e;line-height:1.6;
}

/* Size options in configurator */
.size-options-configurator{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px,1fr));gap:20px 8px}
.size-option-conf{cursor:pointer;position:relative}
.size-option-conf input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.size-conf-box{
    display:flex;flex-direction:column;align-items:center;
    padding:14px 8px;border:1.5px solid var(--color-border);border-radius:var(--radius);
    transition:all .15s;text-align:center;
}
.size-option-conf input:checked + .size-conf-box{
    border-color:var(--color-primary);background:var(--color-surface);
}
.size-conf-badge{
    position:absolute;top:-11px;left:0;
    padding:3px 7px;
    background:#dc2626;color:#fff;
    font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    border-radius:3px 3px 3px 0;
    pointer-events:none;z-index:1;
}
.size-conf-dim{font-size:.85rem;font-weight:500}
.size-conf-price{font-size:.75rem;color:var(--color-text-muted);margin-top:2px}
.resolution-warning{
    margin-top:12px;padding:12px 16px;border-radius:var(--radius);
    background:#fef3c7;color:#92400e;font-size:.85rem;
}

/* Crop */
.crop-container{max-height:500px;overflow:hidden;border-radius:var(--radius);background:#000;width:100%;position:relative}
.crop-container img{display:block;max-width:100%}
.crop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crop-actions .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}

/* Uploaded photo preview */
.uploaded-preview{
    display:flex;align-items:center;gap:16px;
    padding:16px;border-radius:var(--radius-lg);
    background:var(--color-surface);border:1px solid var(--color-border-light);
}
.uploaded-preview-image{
    width:80px;height:80px;border-radius:var(--radius);
    overflow:hidden;flex-shrink:0;background:#eee;
}
.uploaded-preview-image img{width:100%;height:100%;object-fit:cover}
.uploaded-preview-info{flex:1;min-width:0}
.uploaded-filename{font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uploaded-meta{font-size:.8rem;color:var(--color-text-muted);margin-top:2px}
.uploaded-preview-actions{display:flex;gap:8px;flex-shrink:0}
.btn-danger{color:var(--color-error);border-color:var(--color-error)}
.btn-danger:hover{background:#fef2f2}

/* Preview sidebar */
.configurator-sidebar{position:sticky;top:calc(var(--header-height) + 24px)}
.preview-panel{
    background:var(--color-surface);border-radius:var(--radius-lg);
    padding:24px;border:1px solid var(--color-border-light);
}
.preview-block{margin-bottom:20px}
.preview-block-label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.preview-block-label small{font-weight:400;text-transform:none;letter-spacing:0}
.preview-canvas-wrap{background:var(--color-bg);border-radius:var(--radius);padding:16px;text-align:center;position:relative}
.preview-canvas-wrap canvas{max-width:100%;height:auto;display:block;margin:0 auto;box-shadow:0 4px 20px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.07)}
/* Room mockup */
.room-mockup{
    position:relative;width:100%;margin-bottom:0;
    aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;
    background-image:url("../images/room-mockup.01cd486bda96.jpg");
    background-image:image-set(url("../images/room-mockup.ef2c14737bf0.webp") type('image/webp'),url("../images/room-mockup.01cd486bda96.jpg") type('image/jpeg'));
    background-size:cover;background-position:center;background-repeat:no-repeat;
}
.room-mockup{cursor:pointer}
.mockup-frame-on-wall{
    display:none;
    position:absolute;
}
.mockup-frame-on-wall img{display:block;width:100%;height:100%;object-fit:cover}

/* Mockup popup */
.mockup-popup{
    position:fixed;inset:0;z-index:2000;
    background:rgba(0,0,0,.8);
    display:none;align-items:center;justify-content:center;
}
.mockup-popup.is-open{display:flex}
.mockup-popup-inner{position:relative;width:min(88vw,820px)}
.mockup-popup-close{
    position:fixed;top:16px;right:20px;
    background:rgba(255,255,255,.15);border:none;color:#fff;
    font-size:1.8rem;line-height:1;width:40px;height:40px;border-radius:50%;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.mockup-popup-close:hover{background:rgba(255,255,255,.3)}
.room-mockup--popup{cursor:default;margin-bottom:0}
.preview-info{display:flex;justify-content:space-between;margin-bottom:16px}
.preview-size{font-weight:500;font-size:.9rem}
.preview-price{font-weight:700;font-size:1.1rem}
.preview-description{font-size:.8rem;color:var(--color-text-muted);margin:0 0 16px;line-height:1.5}

/* ─── Cart ──────────────────────────────────── */
.cart-items{margin-bottom:32px}
.cart-item{
    display:flex;align-items:center;gap:16px;
    padding:16px 0;border-bottom:1px solid var(--color-border-light);
}
.cart-item-info{flex:1}
.cart-item-name{font-weight:500;font-size:.95rem}
.cart-item-meta{font-size:.8rem;color:var(--color-text-muted);margin-top:2px}
.cart-item-config{font-size:.78rem;color:var(--color-text-muted);margin-top:4px;line-height:1.45}
.cart-config-row{display:block}                       /* každý parametr „Název: hodnota" na svém řádku */
.cart-config-label{color:var(--color-text-muted)}     /* decentní, ne bold, ne barevně (dle zadání) */
.summary-item-config{display:block;font-size:.75rem;color:var(--color-text-muted);margin-top:2px;line-height:1.45}
.cart-item-price{font-size:.8rem;color:var(--color-text-muted);margin-top:4px}
.cart-item-qty{display:flex;align-items:center;gap:4px}
.qty-form{display:flex;align-items:center;gap:0}
.qty-btn{
    width:44px;height:44px;border:1px solid var(--color-border);
    background:#fff;border-radius:var(--radius);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;line-height:1;color:var(--color-text);
    flex-shrink:0;
}
.qty-btn:hover{background:var(--color-surface)}
.qty-value{width:36px;text-align:center;font-weight:500;font-size:.9rem}
.cart-item-total{font-weight:600;font-size:.95rem;min-width:80px;text-align:right}
.cart-item-remove{
    background:none;border:none;cursor:pointer;font-size:1.3rem;
    color:var(--color-text-muted);padding:4px 8px;
}
.cart-item-remove:hover{color:var(--color-error)}
.cart-summary{padding-top:24px;border-top:2px solid var(--color-text)}
.cart-total-row{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700}
.cart-note{font-size:.8rem;color:var(--color-text-muted);margin-top:8px}
.cart-actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}
.cart-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:16px 8px;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border-light)}
.cart-trust-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cart-trust-item svg{flex-shrink:0}
.cart-trust-item span{font-size:11px;color:var(--color-text-muted);line-height:1.35}

/* ─── Checkout steps ───────────────────────── */
.checkout-steps{
    display:flex;align-items:center;gap:0;
    margin-bottom:36px;
}
.checkout-step{
    display:flex;align-items:center;gap:8px;
    font-size:.85rem;font-weight:500;white-space:nowrap;
    color:var(--color-text-muted);text-decoration:none;
}
.checkout-step--done{color:var(--color-text-muted)}
.checkout-step--done:hover{color:var(--color-text)}
.checkout-step--active{color:var(--color-text);font-weight:600}
.checkout-step--pending{color:var(--color-border);cursor:default}
.checkout-step-num{
    width:24px;height:24px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:700;flex-shrink:0;
    background:var(--color-border-light);color:var(--color-text-muted);
    border:1.5px solid var(--color-border);
}
.checkout-step--done .checkout-step-num{
    background:var(--color-surface);border-color:var(--color-border);
}
.checkout-step--active .checkout-step-num{
    background:var(--color-primary);color:#fff;border-color:var(--color-primary);
}
.checkout-step--pending .checkout-step-num{
    background:#fff;border-color:var(--color-border-light);color:var(--color-border);
}
.checkout-step-divider{
    flex:1;height:1px;background:var(--color-border);margin:0 12px;min-width:24px;max-width:48px;
}
@media(max-width:540px){
    .checkout-step-label{display:none;}
    .checkout-step-divider{margin:0 6px;min-width:12px;}
    .option-box{padding:10px 10px;gap:6px;}
    .option-price{font-size:.8rem;margin-left:6px;}
    :root{--carrier-logo-w:60px}     /* ×0,83, týž poměr jako výšky a `--payment-logo-w` */
    .carrier-logo{height:20px;}
}

/* ─── Checkout ──────────────────────────────── */
.checkout-form{margin-top:32px;overflow-x:hidden}
.form-section{border:none;margin-bottom:32px;min-width:0;box-sizing:border-box;width:100%}
.form-section legend{font-size:1.1rem;font-weight:600;margin-bottom:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px}
.form-row{display:flex;gap:16px}
.form-row-2>*{flex:1}
.phone-input-group{display:flex}
.phone-prefix{
    display:flex;align-items:center;gap:8px;padding:10px 12px;
    background:var(--color-surface);border:1px solid var(--color-border);
    border-right:none;border-radius:var(--radius) 0 0 var(--radius);
    font-size:.9rem;font-weight:500;white-space:nowrap;user-select:none;
    color:var(--color-text);
}
.phone-input-group input{border-radius:0 var(--radius) var(--radius) 0 !important;flex:1}
.form-group input,.form-group select,.form-group textarea{
    width:100%;padding:10px 14px;border:1px solid var(--color-border);
    border-radius:var(--radius);font-size:1rem;background:#fff;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(26,26,26,.08);
}
.form-error{color:var(--color-error);font-size:.8rem;margin-top:4px;display:block}
.form-help{color:var(--color-text-muted);font-size:.75rem}
.form-errors{
    padding:12px 16px;border-radius:var(--radius);
    background:#fef2f2;color:var(--color-error);margin-bottom:24px;font-size:.85rem;
}
.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}
.checkbox-label input[type="checkbox"]{width:18px;height:18px}

/* Shipping/payment options */
.shipping-options,.payment-options{display:flex;flex-direction:column;gap:8px}
.shipping-option,.payment-option{cursor:pointer;display:block}
.shipping-option input,.payment-option input{display:none}
.option-box{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius);
    transition:all .15s;box-sizing:border-box;width:100%;
}
.shipping-option input:checked + .option-box,
.payment-option input:checked + .option-box{
    border-color:var(--color-primary);background:var(--color-surface);
}
.option-label{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
/* ★ PEVNĚ ŠIROKÝ PÁS, týž mechanismus jako u plateb (`--payment-logo-w`).
   🔴 Do 2. 9. 2026 měl každý dopravce šířku podle svého loga, takže název začínal
   pokaždé jinde. Změřeno na živých dlaždicích:

     nejlevnejsifotoobraz.cz   rozptyl 62,3 px   (osobní odběr NEMÁ logo vůbec)
     tableauxdedavid.fr        rozptyl 45,5 px   (Colis Privé 21 px vs Colissimo 66 px)
     bildervondavid.de         rozptyl 25,0 px   (Hermes 71 px vs DPD 46 px)
     najtanszyobraz.pl         rozptyl  2,5 px
     canvasvandavid.nl         rozptyl  0,0 px

   ⚠️ Nejhorší to bylo na ČESKÉM trhu, ne na německém — dlaždice bez loga začínala
   o 62 px vlevo proti ostatním. Proto má pás i prázdná varianta.

   ★ Šířka = nejširší logo (Hermes 70,5 px při své výšce), aby se žádné nemuselo
   zmenšovat pod svou výšku. Ladí se jedinou proměnnou.
   ★ `object-position:left` drží svislici LOGA i názvů — bez něj by úzká loga
   (Colis Privé 21 px) plavala uprostřed prázdného pásu. */
:root{--carrier-logo-w:72px}
.carrier-logo{flex-shrink:0;width:var(--carrier-logo-w);height:24px;object-fit:contain;object-position:left center}
/* Dlaždice BEZ loga (osobní odběr) — drží pás, aby název začal na téže svislici. */
.carrier-logo--prazdne{height:1px}
/* Spinner loaderu GLS mapy (stahuje se až 13,7 MB výdejen — viz checkout.html). */
.gls-map-spinner{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid #e5e7eb;border-top-color:var(--color-primary);animation:gls-map-spin .8s linear infinite}
@keyframes gls-map-spin{to{transform:rotate(360deg)}}
/* InPost má v kresbě sluníčko vedle nápisu, takže při 24 px vyjde jeho slovní značka
   zhruba poloviční proti „GLS“. Modifikátor mu dá větší výšku, sdílené vlastnosti
   (flex-shrink, width:auto) zůstávají na `.carrier-logo`.
   ★ Mobilní varianta MUSÍ být až ZDE, ne v `@media` bloku na ř. 614 — ten je v souboru
   DŘÍV než tahle sekce a při stejné specifičnosti by ho pozdější pravidlo přebilo. */
.carrier-logo--inpost{height:30px}
@media(max-width:540px){.carrier-logo--inpost{height:25px}}
/* ─── Spring dopravci (DE, AT, FR, NL) ───────────────────────────────────────
   🔴 JEDNOTNÁ VÝŠKA TU NEFUNGUJE. Poměry stran jdou od 0,78 (Colis Privé) po 6,41
   (Hermes) — při 24 px by měl Hermes 154 px na šířku a Colis Privé 19 px, tedy osmkrát
   míň. Výšky níž jsou dopočítané tak, aby měla všechna loga podobnou PLOCHU KRESBY
   (~400 px²), ne stejnou výšku.

   ★ Změřeno 2. 9. 2026 v prohlížeči přes canvas (podíl neprůhledných pixelů × poměr):

     logo          poměr  inkoust   výška  šířka  plocha
     GLS            2,18   28,6 %    24     52     359   (referenční, NEMĚNÍ SE)
     InPost         1,66   17,8 %    30     50     266   (referenční, NEMĚNÍ SE)
     Hermes         6,41   54,6 %    11     71     423
     DPD            2,28   41,6 %    20     46     379
     Colissimo      3,91   35,6 %    17     66     402
     Colis Privé    0,78   70,1 %    27     21     399
     PostNL         1,01   73,9 %    23     23     395

   ⚠️ Mobilní varianty jsou ×0,83, týmž poměrem jako u základu (24→20) a InPostu (30→25).
   A MUSÍ být až tady, ne v `@media` bloku výš — ten je v souboru dřív a při stejné
   specifičnosti by pozdější pravidlo přebil. */
/* ─── Detail výdejního místa ───────────────────────────────────
   ★ Otevře ho KLIK na bod; potvrzuje se až tlačítkem v něm. */
.spring-detail{margin-top:10px;padding:12px 14px;border:1px solid #d1d5db;border-radius:10px;background:#f9fafb}
.spring-detail-name{margin:0 0 4px;font-weight:600}
.spring-detail .spring-loc-sub{margin:0 0 2px}
.spring-detail-map{font-size:.875rem}
.spring-detail-btn{margin-top:10px}
/* ★ Symbol vlastního eshopu na dlaždici osobního odběru — jediná doprava, kterou
   zajišťuje David sám, takže tam nemá stát cizí dopravce. Symbol je HUSTÝ (83 %
   inkoustu proti 55 % u Hermesu) a čtvercový, takže potřebuje menší výšku než Hermes
   v absolutních číslech, ale větší než jednotnou: 22 px dá plochu 403 px². */
.carrier-logo--npht-symbol{height:22px}
/* ★ OoD symbol: 340×270, krytí 95,5 %, ale TMAVOST jen 10,2 % — vetsina plochy je
   krémová výplň, ne barva. Vzorec na krytí by dal 18 px, jenže tam by symbol byl
   opticky NEJLEHČI ze všech (tmavost 42 proti 156 u NPHT a 256 u DPD). 20 px je
   kompromis: krytí 481 zůstává v pásmu 240–520 a tmavost stoupne na 52. */
.carrier-logo--ood-symbol{height:20px}
.carrier-logo--hermes{height:11px}
.carrier-logo--dpd{height:20px}
.carrier-logo--colissimo{height:17px}
.carrier-logo--colis-prive{height:27px}
.carrier-logo--postnl{height:23px}
@media(max-width:540px){
  .carrier-logo--npht-symbol{height:18px}
  .carrier-logo--ood-symbol{height:17px}
  .carrier-logo--hermes{height:9px}
  .carrier-logo--dpd{height:17px}
  .carrier-logo--colissimo{height:14px}
  .carrier-logo--colis-prive{height:22px}
  .carrier-logo--postnl{height:19px}
}
/* ─── Loga platebních metod ──────────────────────────────────
   ★ Vlastní třída, NE `carrier-logo`. Dopravci a platby se můžou lišit velikostí
   a nechceme, aby doladění jedné hnulo druhou.

   ★ PEVNĚ ŠIROKÁ BUŇKA. Loga mají při výšce 24 px šířku od 23 px (převod) po 98 px
   (karta) — v seznamu pod sebou by název každé metody začínal na jiné svislici a
   výčet by se roztřepil. Šířka buňky = to NEJŠIRŠÍ logo, takže se žádné nemusí
   zmenšovat pod plnou výšku. Ladí se jedinou proměnnou. */
:root{--payment-logo-w:98px}
/* `object-position:left` je dulezitejsi, nez vypada: pri centrovani plave uzka ikona
   (prevod 23 px) uprostred prazdne buchty a rada log se opticky rozhodi. Vlevo drzi
   svislici LOGA i NAZVY. Overeno na zive strance, ne od stolu. */
.payment-logo{flex-shrink:0;width:var(--payment-logo-w);height:24px;object-fit:contain;object-position:left center}
/* Google Pay a Apple Pay jsou JEDNA metoda se dvěma značkami — dlaždice se jmenuje
   „Google Pay / Apple Pay". Ukázat jen jednu značku by o té druhé lhalo, a zákazník
   hledá očima právě tu svou. Ve 24 px se ale obě do buňky nevejdou (64+38+6 = 108),
   proto je pár o kousek nižší: 53+32+6 = 91. */
.payment-logo-pair{flex-shrink:0;width:var(--payment-logo-w);display:flex;align-items:center;justify-content:flex-start;gap:6px}
.payment-logo-pair img{height:20px;width:auto}
/* Na /doprava-a-platba/ je ikonový sloupec SDÍLENÝ s dopravou (52 px, viz
   `.shipping-option-row__carrier`). Logo se do něj vejde výškou, ne šířkou — karta
   a PayPal se tam proto zmenší. Zarovnání obou sekcí na tutéž svislici je přednější
   než pár pixelů výšky; kdyby to mělo být jinak, stačí zvednout šířku obou sloupců. */
.payment-option-row__icon .payment-logo{width:auto;height:auto;max-width:100%;max-height:24px;object-position:center}
/* Pár se v 52 px vedle sebe neuživí (vyšlo by ~9 px na výšku), proto na sebe. */
.payment-option-row__icon .payment-logo-pair{width:100%;flex-direction:column;align-items:center;gap:4px}
.payment-option-row__icon .payment-logo-pair img{height:auto;max-width:100%;max-height:13px}
@media(max-width:540px){
    :root{--payment-logo-w:82px}
    .payment-logo{height:20px}
    .payment-logo-pair img{height:17px}
}
.option-name{font-weight:500;font-size:.9rem;overflow-wrap:break-word}
.option-price{font-size:.85rem;color:var(--color-text-muted);flex-shrink:0;white-space:nowrap;margin-left:10px}
.option-note{display:block;font-size:.75rem;color:var(--color-text-muted);font-weight:400;margin-top:2px}
.shipping-option--disabled{cursor:not-allowed}
.shipping-option--disabled .option-box{opacity:.4;cursor:not-allowed}
.free-shipping-text{color:var(--color-success);font-weight:500}
.shipping-free-note{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-radius:var(--radius);
    font-size:.85rem;font-weight:500;margin-bottom:14px;
    background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;
}
.shipping-free-note--info{
    background:var(--color-surface);border-color:var(--color-border);
    color:var(--color-text-muted);font-weight:400;
}

/* Checkout summary */
.checkout-summary{
    padding:24px;border-radius:var(--radius-lg);
    background:var(--color-surface);margin:32px 0 24px;
}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem}
.summary-item-meta{font-size:.85rem;color:var(--color-text-muted)}
.summary-total{font-size:1.2rem;font-weight:700;border-top:2px solid var(--color-text);padding-top:12px;margin-top:8px}
.checkout-note{text-align:center;font-size:.85rem;color:var(--color-text-muted);margin-top:16px}
.vat-note{font-size:.75rem;color:var(--color-text-muted);text-align:right;margin-top:6px}
.parcelshop-picker{margin-top:14px;padding:14px 16px;border-radius:var(--radius);background:var(--color-surface);border:1px solid var(--color-border-light)}
.parcelshop-chosen-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin-bottom:6px}
.parcelshop-info{font-size:.9rem;line-height:1.5}
.parcelshop-info strong{display:block;font-weight:600}
.parcelshop-info span{display:block;color:var(--color-text-muted);font-size:.85rem}
.checkout-note a{color:var(--color-accent);font-weight:500}

/* ─── Order complete ────────────────────────── */
.success-icon{margin-bottom:24px}
.order-number-display{font-size:1.1rem;color:var(--color-text-muted);margin-bottom:24px}
.payment-info-box{
    padding:24px;border-radius:var(--radius-lg);background:var(--color-surface);
    text-align:left;margin:24px 0;border:1px solid var(--color-border-light);
}
.payment-info-box h3{margin-bottom:12px;font-size:1rem}
.payment-info-box p{font-size:.9rem;margin-bottom:6px}
.complete-actions{display:flex;gap:12px;justify-content:center;margin-top:32px}

/* ─── Order tracking ────────────────────────── */
.order-progress{
    display:flex;justify-content:space-between;
    margin:40px 0;position:relative;
}
.order-progress::before{
    content:'';position:absolute;top:12px;left:24px;right:24px;
    height:2px;background:var(--color-border);
}
.progress-step{text-align:center;position:relative;z-index:1;flex:1}
.progress-dot{
    width:24px;height:24px;border-radius:50%;
    background:var(--color-border);border:3px solid #fff;
    margin:0 auto 8px;
}
.progress-step.active .progress-dot,.progress-step.done .progress-dot{
    background:var(--color-primary);
}
.progress-label{font-size:.7rem;color:var(--color-text-muted)}
.progress-step.active .progress-label{color:var(--color-text);font-weight:600}

.order-detail-grid{display:flex;flex-direction:column;gap:24px}
.order-detail-section{padding:24px;background:var(--color-surface);border-radius:var(--radius-lg)}
.order-detail-section h3{font-size:1rem;margin-bottom:12px}
.order-item-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem}
.order-total-row{font-weight:700;border-top:1px solid var(--color-border);padding-top:12px;margin-top:8px}

.status-badge{
    display:inline-block;padding:4px 12px;border-radius:16px;font-size:.75rem;font-weight:600;
}
.status-new{background:#f3f4f6;color:#4b5563}
.status-paid{background:#dcfce7;color:#166534}
.status-production{background:#fef3c7;color:#92400e}
.status-produced{background:#dbeafe;color:#1e40af}
.status-shipped{background:#ede9fe;color:#5b21b6}
.status-delivered{background:#dcfce7;color:#166534}
.status-cancelled{background:#fef2f2;color:#991b1b}

/* ─── Auth ──────────────────────────────────── */
.auth-form{margin-top:32px}
.auth-alt{text-align:center;margin-top:24px;font-size:.85rem;color:var(--color-text-muted)}
.auth-alt a{color:var(--color-accent);font-weight:500}

/* ─── Profile ───────────────────────────────── */
.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.profile-section{margin-bottom:40px}
.profile-section h2{font-size:1.2rem;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-border-light)}
.orders-table{display:flex;flex-direction:column;gap:8px}
.order-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 16px;border-radius:var(--radius);
    background:var(--color-surface);
}
.order-row-main{display:flex;gap:16px;align-items:center;flex:1}
.order-row-number{font-weight:600;font-size:.85rem}
.order-row-date{font-size:.8rem;color:var(--color-text-muted)}
.order-row-total{font-weight:500;font-size:.85rem;margin-left:auto}

/* ─── Messages ──────────────────────────────── */
.messages-container{
    position:fixed;top:var(--header-height);left:0;right:0;
    z-index:900;padding:12px 16px 0;pointer-events:none;
}
.messages-container .container{pointer-events:auto}
.message{
    padding:12px 16px;border-radius:var(--radius);margin-bottom:8px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.message-success{background:#dcfce7;color:#166534}
.message-error{background:#fef2f2;color:#991b1b}
.message-warning{background:#fef3c7;color:#92400e}
.message-info{background:#dbeafe;color:#1e40af}
.message-close{background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:.5}

/* ─── Empty state ───────────────────────────── */
.empty-state{text-align:center;padding:64px 24px}
.empty-state svg{margin:0 auto 16px}
.empty-state p{color:var(--color-text-muted);margin-bottom:24px}
.empty-state-actions{display:flex;gap:12px;justify-content:center}

/* ─── Footer ────────────────────────────────── */
.site-footer{
    background:var(--color-surface);border-top:1px solid var(--color-border-light);
    padding:48px 0 32px;margin-top:64px;
}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:32px}
.footer-col h4{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:12px}
.footer-col a{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:8px}
.footer-col a:hover{color:var(--color-text)}
.footer-tagline{margin-top:8px}
.footer-tagline-main{display:block;font-size:1rem;font-weight:600;color:var(--color-text)}
.footer-tagline-sub{display:block;font-size:.78rem;color:var(--color-text-muted);margin-top:0}
/* Sesterske eshopy teze znacky. `flex-wrap` schvalne: OoD ma SEDM sourozencu
   a na uzsi obrazovce se musi zalomit do vic radku, ne pretect. */
.footer-sisters{padding-top:24px;border-top:1px solid var(--color-border-light);margin-bottom:8px}
.footer-sisters h4{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:12px}
.footer-sisters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-sisters a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--color-text-muted);white-space:nowrap}
.footer-sisters a:hover{color:var(--color-text)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--color-border-light);font-size:.8rem;color:var(--color-text-muted)}
.footer-owner{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-owner img{width:52px;height:52px;border-radius:50%;flex-shrink:0;object-fit:cover}
.footer-owner-text{display:flex;flex-direction:column;line-height:1.35}
.footer-owner-name{font-size:.85rem;font-weight:600;color:var(--color-text)}
.footer-owner-sub{font-size:.78rem;color:var(--color-text-muted)}

/* ─── Responsive ────────────────────────────── */
@media (max-width: 768px) {
    .hero h1{font-size:2rem}
    .hero-grid{grid-template-columns:1fr;gap:32px;justify-items:center}
    .hero-content{text-align:center}
    .hero-subtitle{margin-left:auto;margin-right:auto}
    .hero-actions{flex-direction:column;align-items:center;justify-content:center}
    .hero-video{width:min(300px,72vw,39.375vh);order:2}
    /* Na mobilu tlačítka nahoru vpravo — pryč od titulků, které bývají dole */
    .hero-video-controls{top:12px;bottom:auto;right:12px}
    .steps-grid{grid-template-columns:repeat(3,1fr);gap:20px}
    .features-grid{grid-template-columns:1fr}
    .motif-grid,.motif-grid--3,.motif-grid--4{grid-template-columns:repeat(2,1fr);gap:16px}
    .motif-detail{grid-template-columns:1fr;gap:24px}
    .motif-detail-image{position:static}
    .configurator-layout{grid-template-columns:1fr;gap:20px}
    .config-reassurance{font-size:.82rem;gap:8px;padding:9px 12px}
    .configurator-sidebar{position:static}
    .configurator-section{padding-top:32px;padding-bottom:40px}
    .config-step{margin-bottom:28px}
    .size-options-configurator{grid-template-columns:repeat(2,1fr);gap:10px}
    #orientationGrid{grid-template-columns:repeat(3,1fr);gap:8px}
    .upload-zone{padding:32px 20px}
    .filters-bar{flex-direction:column;align-items:stretch}
    .filters-right{flex-wrap:wrap}
    .search-input{width:100%}
    .cart-item{flex-wrap:wrap}
    .cart-item-total{width:100%;text-align:right}
    .form-row{flex-direction:column;gap:0}
    .footer-grid{grid-template-columns:1fr;gap:24px}
    /* Sedm sourozencu se na mobilu zalomi do vic radku; uzsi mezera drzi
       radky u sebe, at blok neroste do vysky vic, nez musi. */
    .footer-sisters ul{gap:8px 14px}
    .footer-owner img{width:44px;height:44px}
    .main-nav{display:none}
    /* Storefront s technika-dropdownem (OoD) drží CTA viditelné i na mobilu; NPHT (bez dropdownu)
       zůstává beze změny (display:none) → mobilní header NPHT byte-identický. */
    .main-nav:has(.nav-cta-dd){display:flex}
    .nav-cta--dd{padding:7px 12px;font-size:.8rem}
    .nav-cta-menu{right:0;left:auto;min-width:200px}
    .order-progress{gap:4px}
    .progress-label{font-size:.6rem}
    .categories-grid{grid-template-columns:repeat(2,1fr)}
    .logo img{height:32px}
    .contact-info-box,.escalation-card{padding:16px}
    .phone-reveal{padding:14px 16px}
    .phone-reveal-number{font-size:1.3rem}
}
@media (max-width: 480px) {
    .container{padding:0 16px}
    .motif-grid,.motif-grid--3,.motif-grid--4{grid-template-columns:1fr;gap:16px}
    .size-options{grid-template-columns:repeat(2,1fr)}
    .size-options-configurator{grid-template-columns:repeat(2,1fr);gap:20px 8px}
    #orientationGrid{grid-template-columns:repeat(3,1fr);gap:6px}
    #orientationGrid .orientation-option{padding:10px 4px;font-size:.8rem}
    .hero h1{font-size:1.6rem}
    .steps-grid{grid-template-columns:1fr 1fr;gap:16px}
    .crop-container{max-height:58vw}
    .upload-zone{padding:24px 16px}
    .config-step h2{font-size:1rem;gap:8px}
    .uploaded-preview{flex-direction:column;align-items:flex-start}
    .uploaded-preview-image{width:100%;height:auto;max-height:200px;border-radius:var(--radius)}
    .uploaded-preview-image img{width:100%;height:auto;max-height:200px;object-fit:contain}
    .uploaded-preview-actions{width:100%}
    .preview-block-label small{display:none}
    .logo img{height:26px}
    .contact-info-box,.escalation-card{padding:14px 12px}
    .phone-reveal{padding:12px;gap:10px}
    .phone-reveal-number{font-size:1.15rem;overflow-wrap:break-word;word-break:break-all}
}

/* ─── Kontakt ───────────────────────────────── */
.contact-section{padding-bottom:80px}
.contact-info-box{
    background:var(--color-surface);border:1px solid var(--color-border-light);
    border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:32px;
    display:flex;flex-direction:column;gap:14px;
}
.contact-info-row{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;line-height:1.5}
.contact-info-row svg{flex-shrink:0;margin-top:2px;color:var(--color-primary)}
.contact-info-row a{color:var(--color-primary)}
/* Popisek pod telefonem — nasmeruje na e-mail, aniz by cislo znehodnotil. Blokovy,
   at nesplyne s cislem na jednom radku. */
.contact-phone-note{display:block;color:var(--color-text-muted);font-size:.8125rem;margin-top:2px}
.contact-info-note{color:var(--color-text-muted);padding-top:14px;border-top:1px solid var(--color-border-light)}
.contact-card{background:#fff;border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:32px;margin-bottom:48px}
.contact-card h2{font-size:1.2rem;margin-bottom:24px}
.contact-form .form-field{margin-bottom:20px}
.contact-form label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px}
.contact-form input,.contact-form select,.contact-form textarea{
    width:100%;padding:10px 14px;border:1.5px solid var(--color-border);
    border-radius:var(--radius);font-size:1rem;font-family:inherit;
    transition:border-color .15s;box-sizing:border-box;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
    outline:none;border-color:var(--color-primary);
}
.contact-form .has-error input,.contact-form .has-error textarea{border-color:var(--color-error)}
.required-star{color:var(--color-error);margin-left:2px}
.field-error{font-size:.8rem;color:var(--color-error);margin-top:4px}
.contact-success{
    display:flex;align-items:flex-start;gap:12px;
    background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius);
    padding:16px 20px;margin-bottom:24px;font-size:.9rem;color:#14532d;
}
.contact-success svg{flex-shrink:0;color:#16a34a;margin-top:2px}

/* Escalation section */
.escalation-section{border-top:1px solid var(--color-border-light);padding-top:40px}
.escalation-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.escalation-header svg{color:var(--color-warning,#f59e0b);flex-shrink:0}
.escalation-header h2{font-size:1.1rem;margin:0}
.escalation-intro{font-size:.9rem;color:var(--color-text-muted);line-height:1.7;margin-bottom:12px}
.escalation-card{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:28px;margin-top:24px}
.phone-reveal{
    display:flex;align-items:flex-start;gap:16px;
    background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius);padding:20px 24px;
}
.phone-reveal svg{flex-shrink:0;color:#d97706;margin-top:3px}
.phone-reveal-label{font-size:.85rem;color:var(--color-text-muted);margin-bottom:4px}
.phone-reveal-number{font-size:1.6rem;font-weight:700;color:var(--color-text);letter-spacing:.02em;display:block;text-decoration:none}
.phone-reveal-number:hover{color:var(--color-primary)}
.phone-reveal-note{font-size:.8rem;color:var(--color-text-muted);margin-top:6px}

/* ─── Doprava a platba ──────────────────────── */
.info-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:2rem}
.info-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem}
.info-card__title{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border)}
.shipping-option-row,.payment-option-row{display:flex;align-items:flex-start;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--color-border-light)}
.shipping-option-row:last-of-type,.payment-option-row:last-of-type{border-bottom:none}
.shipping-option-row__carrier{flex-shrink:0;width:52px;display:flex;align-items:center;justify-content:center;padding-top:.2rem}
.shipping-option-row__body,.payment-option-row__body{flex:1;min-width:0}
.shipping-option-row__body p,.payment-option-row__body p{font-size:.875rem;color:var(--color-text-muted);margin-top:.2rem}
.shipping-option-row__price,.payment-option-row__price{flex-shrink:0;font-weight:600;font-size:1rem;white-space:nowrap;padding-top:.1rem}
.payment-option-row__icon{flex-shrink:0;width:52px;display:flex;align-items:center;justify-content:center;padding-top:.2rem;color:var(--color-text-muted)}
.payment-option-row__price--surcharge{color:var(--color-text-muted)}
.info-highlight{display:flex;align-items:center;gap:.6rem;margin-top:1.25rem;padding:.875rem 1rem;border-radius:var(--radius);font-size:.9rem}
.info-highlight--green{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.info-highlight svg{flex-shrink:0}
@media (max-width: 768px) {
    .info-page-grid{grid-template-columns:1fr}
}

/* ─── Cropper.js overrides ──────────────────── */
.cropper-view-box{outline:3px solid var(--color-teal)}
.cropper-face{border:4px solid var(--color-teal) !important;box-shadow:0 0 0 4px rgba(var(--color-teal-rgb),0.5),inset 0 0 0 4px rgba(var(--color-teal-rgb),0.3) !important}
.cropper-modal{background:#000;opacity:.6}
.cropper-dashed{border:2px dashed rgba(var(--color-teal-rgb),0.6)}
.cropper-line{background-color:var(--color-teal);opacity:1}
.cropper-line.line-e,.cropper-line.line-w{width:3px}
.cropper-line.line-n,.cropper-line.line-s{height:3px}
.cropper-point{width:16px !important;height:16px !important;background-color:var(--color-teal) !important;border:3px solid #fff !important;border-radius:50% !important;opacity:1 !important}
.cropper-point.point-e,.cropper-point.point-w{margin-top:-8px}
.cropper-point.point-n,.cropper-point.point-s{margin-left:-8px}

/* ─── Canvas loading placeholder ────────────── */
.canvas-loader{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:var(--radius)}
.canvas-loader__spinner{width:36px;height:36px;border:3px solid rgba(var(--color-teal-rgb),0.2);border-top-color:var(--color-teal);border-radius:50%;animation:canvas-spin .8s linear infinite}
.canvas-loader__text{font-size:14px;color:var(--color-text-muted,#6b7280)}
@keyframes canvas-spin{to{transform:rotate(360deg)}}

/* ─── Cookie consent modal (vynucená volba) ──── */
.cookie-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px}
.cookie-modal.is-visible{display:flex}
body.cookie-modal-open{overflow:hidden}
.cookie-modal-box{background:#fff;border-radius:var(--radius-lg);box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:500px;width:100%;padding:1.75rem;box-sizing:border-box}
.cookie-banner-text{font-size:.92rem;line-height:1.6;color:var(--color-text);margin:0 0 1.25rem}
.cookie-banner-link{color:var(--color-teal);font-weight:600;text-decoration:underline;white-space:nowrap}
.cookie-banner-actions{display:flex;gap:10px}
.cookie-btn{flex:1;font-size:.92rem;font-weight:700;padding:.7rem 1.3rem;border-radius:var(--radius);cursor:pointer;transition:all .2s}
.cookie-btn--accept{background:var(--color-teal);color:#fff;border:1.5px solid var(--color-teal)}
.cookie-btn--accept:hover{background:#2f5c5c;border-color:#2f5c5c}
.cookie-btn--reject{background:#fff;color:var(--color-text);border:1.5px solid var(--color-border)}
.cookie-btn--reject:hover{border-color:var(--color-text);background:var(--color-surface)}
@media (max-width: 480px){
    .cookie-banner-actions{flex-direction:column}
}

/* Placeholder textové logo (brandy bez logo_header, např. OoD). NPHT používá <img>. */
.site-logo-text{font-weight:800;font-size:1.15rem;color:var(--color-teal);letter-spacing:-0.01em;white-space:nowrap}