:root {
            --bg-color: #f4f5f7;
            --card-bg: #ffffff;
            --text-color: #1a202c;
            --border-color: #cbd5e1;
            --accent-blue: #2b6cb0;
            --accent-hover: #2c5282;
            --muted-text: #718096;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1a202c;
                --card-bg: #2d3748;
                --text-color: #e2e8f0;
                --border-color: #4a5568;
                --accent-blue: #63b3ed;
                --accent-hover: #4299e1;
                --muted-text: #a0aec0;
            }
        }

        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; }
        .back-link { color: var(--muted-text); text-decoration: none; font-weight: 600; }
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
        .product-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
        .gallery-col { width: 100%; display: flex; flex-direction: column; gap: 12px; }
        .detail-title { margin: 0; color: var(--text-color); font-size: clamp(20px, 3.5vw, 28px); }

        /* main-image/thumb-item backgrounds stay white on purpose, even in
           dark mode — these are photo mattes, and product photography
           reads best against a neutral backdrop regardless of site theme
           (same convention most photo-heavy e-commerce sites use). Only
           the border adapts, so the frame doesn't look stark against a
           dark page. */
        /* Fixed aspect-ratio box (not just fixed max-width) so switching
           between thumbnails of different shapes/sizes never changes the
           gallery's height — nothing below (title, spec table) shifts.
           217:289 (reduced from 868x1156) matches the actual featured
           photo dimensions exactly — same ratio as .thumb-item below.
           object-fit:contain centers each image inside that fixed box
           without cropping or stretching it; any letterboxing shows the
           white background below, matching real product photography. */
        .main-image { max-width: 320px; aspect-ratio: 217 / 289; margin: 0 auto; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; position: relative; background: #fff; }
        .main-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
        .zoom-btn {
            position: absolute; bottom: 8px; right: 8px; width: 34px; height: 34px;
            border-radius: 50%; border: 1px solid #cbd5e1; background: rgba(255,255,255,0.92); color: #1a202c;
            display: flex; align-items: center; justify-content: center; cursor: zoom-in;
            font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); padding: 0;
        }
        .zoom-btn:hover { background: white; }

        .lightbox-overlay {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
            z-index: 2000; align-items: center; justify-content: center; padding: 24px;
            cursor: zoom-out; box-sizing: border-box;
        }
        .lightbox-overlay.active { display: flex; }
        .lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; background: #fff; }
        
        /* Styl pro pás miniatur doplňujících fotek */
        .thumbs-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 320px; margin: 5px auto 0 auto; }
        .thumb-item { width: 60px; aspect-ratio: 217 / 289; border: 2px solid var(--border-color); border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; transition: all 0.2s ease; }
        .thumb-item:hover, .thumb-item.active { border-color: var(--accent-blue); transform: scale(1.03); }
        .thumb-item img { width: 100%; height: 100%; object-fit: contain; }

        .info-col { padding: 10px; }
        .description-box { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); line-height: 1.6; margin-bottom: 25px; color: var(--text-color); }
        .description-box p { margin: 0 0 12px 0; }
        .description-box p:last-child { margin-bottom: 0; }
        .description-box blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--border-color); font-style: italic; }

        .spec-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        /* Mobil: label + hodnota na JEDNOM řádku ("Kategorie: Vaječníky › Klasické"),
           a když se hodnota nevejde, zalomí se PŘIROZENĚ uprostřed (jako běžný text),
           ne jako celý blok pod label. Proto th/td běží jako inline text uvnitř
           blokového tr — flexbox by při zalomení posunul celé td na nový řádek
           místo zalomení textu samotného. */
        .spec-table tr { display: block; padding: 5px 0; border-bottom: 1px solid var(--border-color); }
        .spec-table th, .spec-table td { display: inline; text-align: left; }
        .spec-table th { font-size: clamp(0.7rem, 0.65rem + 0.15vw, 0.8rem); text-transform: uppercase; color: var(--muted-text); }
        .spec-table th::after { content: ': '; }
        .spec-table td { font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem); color: var(--text-color); }
        .spec-link { color: var(--accent-blue); text-decoration: none; }
        .spec-link:hover { text-decoration: underline; }

        .btn-edit { display: inline-block; background: #4a5568; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 20px; }
        .btn-add-sibling { display: inline-block; background: #38a169; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 20px; }

        /* "Podobné" — na mobilu vystředěno, na desktopu zarovnáno doleva (viz media query níže) */
        .siblings-section { margin-top: 0px; padding-top: 0px; text-align: center; }
        .siblings-section h2 { font-size: 18px; color: var(--text-color); margin-top: 0; margin-bottom: 15px; }
        .siblings-grid { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
        .sibling-card { display: block; width: 100px; }
        .sibling-card img { width: 100px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); background: #fff; }

        @media(min-width:800px) {
            .container { padding: 40px; }
            .product-grid {
                display: grid;
                grid-template-columns: minmax(260px, 380px) 1fr;
                grid-template-rows: min-content 1fr;
                grid-template-areas: "gallery title" "gallery info";
                gap: 14px 40px;
                align-items: start;
            }
            .gallery-col { grid-area: gallery; }
            .detail-title { grid-area: title; }
            .info-col { grid-area: info; padding: 0; }
            .main-image { max-width: 360px; border-radius: 20px; }

            .spec-table tr { display: table-row; padding: 0; border-bottom: none; }
            .spec-table th, .spec-table td { display: table-cell; padding: 5px; border-bottom: 1px solid rgba(128,128,128,.2); }
            .spec-table th { width: 30%; }
            .spec-table th::after { content: ''; }

            .siblings-section { text-align: left; }
            .siblings-grid { justify-content: flex-start; }
        }