:root {
        --fav-active-color: #f74c6a;       /* vyplněné srdce */
        --fav-inactive-color: #77787f;     /* obrysové srdce */
    }

    .fav-btn svg {
        /* výchozí stav: obrys bez výplně */
        fill: none;
        stroke: var(--fav-inactive-color);
        stroke-width: 1.5px;
        transition: fill 0.2s, stroke 0.2s;
    }

    .fav-btn.active svg {
        /* aktivní stav: výplň i obrys stejnou barvou */
        fill: var(--fav-active-color);
        stroke: var(--fav-active-color);
    }

    /* Kontejner tlačítek – nechává je vedle sebe, zalamuje, centrování */
    #size-switch {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1rem;
        margin-bottom: 1rem;
    }

    /* Jednotlivé tlačítko – sjednoceno na GRID (ne FLEX) */
    #size-switch .layout-switch-btn {
        display: grid;
        grid-template-columns: 1fr;           /* bez ikony = celý prostor pro text */
        place-items: center;                  /* centrování obsahu v obou osách */
        gap: .5rem;

        width: 160px;                         /* aby šla vedle sebe */
        height: 65px;
        padding: .2rem .2rem;
        margin: 0;
        text-align: center;                   /* text zarovnat na střed */
        font-weight: 200;

        border: 1px solid #bec4d3;
        background-color: #fafafc;
        color: #77787f;
        cursor: pointer;
        border-radius: 0;

        --icon-size: 3rem;        /* tady zvětšíš/zmenšíš ikonu */
        --icon-gap: .3rem;        /* mezera mezi ikonou a textem */  
    }

    /* S ikonou → 1/3 : 2/3 */
    #size-switch .layout-switch-btn:has(.icon) {
        grid-template-columns: 0.8fr 2.2fr;       /* 1/3 : 2/3 */
    }

    /* Ikona vlevo – grid zajistí mezeru, nepotřebujeme margin-right */
    #size-switch .layout-switch-btn .icon {
        place-self: center;
        width: var(--icon-size);
        height: var(--icon-size);
        margin: 0;
        max-width: 110%;
        max-height: 110%;
        object-fit: contain;
        transition: transform .15s ease, filter .15s ease;
    }

    #size-switch .layout-switch-btn:hover .icon {
        transform: scale(1.06);
    }

    /* Text ve dvou řádcích – vždy uprostřed své grid buňky */
    #size-switch .layout-switch-btn .text-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }
    #size-switch .layout-switch-btn .line2 { opacity: .8; font-size: .9em; }

    /* Stavy */
    #size-switch .layout-switch-btn.active {
        color: #4a4b54;
        background-color: #dee0e8;
        box-shadow: 0 0 0 2px #f74c6a !important;
        border-color: #f74c6a !important; /* pokud chceš sladit i hranici */        
    }
    #size-switch .layout-switch-btn:focus { outline: none; font-weight: 500;}
    #size-switch .layout-switch-btn:hover { outline: none; font-weight: 500; }
    
.layout-switch-btn:focus {
  outline: none !important;
  /* tloušťku upravíš posledním číslem (3px), barvu hexem */
  box-shadow: 0 0 0 2px #f74c6a !important;
  border-color: #f74c6a !important; /* pokud chceš sladit i hranici */
} 

    .layout-switch-btn {
        position: relative;
    }

    .layout-switch-btn .promo-dot {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        z-index: 2;

        /* vypnout starý vzhled */
        border-radius: 0;
        background: none;
        box-shadow: none;

        /* SVG jako pozadí */
        background-image: url('/img/stickers/lepitko.svg'); /* <- cesta k tvé SVG */
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }

    .layout-switch-btn[hidden] .promo-dot {
        display: none !important;
    }

            #pkg58-heading[hidden] { display: none !important; }    

        .bigButton{
            color: #FFF;
            text-decoration: none;
            background: #F74A68;
            padding: 15px 20px;
            font-size: 20px;  
        }  

        .bigButton:hover{
            color: #FFF; 
        } 

        @media (min-width: 576px) {
            .bigButton {
                width: 240px;            
                max-width: 240px;      
                white-space: nowrap;   
                display: block;
                margin-left: auto;       

            }   
        }    
        #pkg58-row[hidden], #pkg58-themes[hidden] { display: none !important; }

        #pkg58-row {
            display: flex;    
            flex-wrap: nowrap;
            justify-content: center;
            align-items: flex-end;
            column-gap: 16px;
            row-gap: 0;
            margin-top: 12px;
        }
        #pkg58-row .simple-selector { flex: 0 0 auto; display: inline-flex; margin: 0 8px; }
        #pkg58-row .simple-selector.row { margin-left: 0; margin-right: 0; }

        @media (max-width: 576px) {
            #pkg58-row { flex-wrap: wrap; row-gap: 10px; }
        }

        /* Galerie náhledů – mřížka, centrovaná */
        .pkg58-themes {
            display: grid;
            grid-template-columns: repeat(4, minmax(140px, 1fr));
            gap: 14px;
            justify-items: center;
            align-items: start;
            margin-top: 14px;
        }
        @media (max-width: 768px) { .pkg58-themes { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
        @media (max-width: 480px) { .pkg58-themes { grid-template-columns: 1fr; } }

        .pkg58-thumb {
            appearance: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; outline: none;
        }
        .pkg58-thumb img {
            display: block; width: 180px; height: auto;
            border: 2px solid transparent; border-radius: 0px;
            transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .pkg58-thumb .pkg58-thumb-label { display: block; margin-top: 6px; font-size: .95rem; color:#77787F;}

        .pkg58-thumb.is-active img {
            border-color: #F74A68;
            box-shadow: 0 0 0 3px #F74A68;
            transform: translateY(-2px);
        }
        .pkg58-thumb:focus img, .pkg58-thumb:hover img { border-color: #F74A68;}
        .pkg58-thumb--custom img { border-style: dashed; }

        #pkg58-cta[hidden] { display: none !important; }

        .pkg58-cta {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-align: center;
        }

        .pkg58-cta .btn.disabled,
        .pkg58-cta .btn[aria-disabled="true"] {
            pointer-events: none;
            opacity: .55;
        }

        .pkg58-cta-hint {
            font-size: .9rem;
            opacity: .8;
        }

        @media (max-width: 576px) {
            .pkg58-cta { flex-direction: column; gap: 8px; }
            #pkg58-go { width: 100%; max-width: 360px; }
        }

        #theme-carousel[hidden] { display: none !important; }