<style>
/* --- GLOBÁLNÍ DEFINICE --- */
:root {
    --accent-color: #f0ad4e; /* Oranžová */
}
/* ---------------------------------------------------------------- */
/* hlavní kontejner produktu
/* ---------------------------------------------------------------- */


/* ======================================================= */
/*  SEZNAMU PRODUKTŮ-KATEGORIE */
/* ======================================================= */
        .col-md-4 {
                /*max-width: 80%;*/
               
            }
            .col-md-4 h1{
               
                max-width: 100%;
                width: 100%;
                margin-left: 10%;
                font-size: 1.8em;
                text-align: center;
                padding-top: 10px;
                border-bottom: solid 1px #ffa600;
                
            }
            .category-title {
                max-width: 90%;
                width: 90%;
                margin-left: 5%;
                font-size: 1.7em;
                text-align: center;
                padding-top: 10px;
                border-bottom: solid 1px #ffa600;
            }
          /*-   .wide .p-thumbnails {
            margin-right: 50px;  
                border: SOLID 1PX #d5ad1b !important;
                border-radius: 45px !important;
                
                box-shadow: 1px 0px 20px 1px rgb(70 68 68 / 20%);
            
            }
            .wide .p-thumbnails:hover {
               
                box-shadow: 1px 0px 20px 1px rgb(0 0 0 / 89%);
                transform: scale(1.1);
                TRANSITION: 0.3s;
            }
            .wide .p-thumbnails a img:hover {
                border-color: #e7e7e7;
                transform: scale(1.2);
            }
           ------*/
/* ======================================================= */
/*  uprava galerie */
/* ======================================================= */           
            
/* Skrytí původních prvků */
.p-thumbnails, .thumbnail-next, .thumbnail-prev, .thumbnails-navigation {
    display: none !important;
}

/* Hlavní wrapper musí dovolit animaci "vycestovat" mimo rámec při pohybu */
.p-image-wrapper {
    position: relative !important;
    overflow: visible !important; 
    touch-action: none;
    padding: 20px 0;
    z-index: 10 !important; /* Základna pro body */
}

/* Cílíme na ten blok, který má v Shoptetu stín */
.p-image.image {
    background: #fff;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    transition: none !important; /* Vypneme Shoptet přechody, použijeme naše */
    position: relative;
   z-index: 1 !important; /* Fotka musí být pod body */
}

/* Definice animací pro plynulý odskok */
.cb-animate-next { animation: cbSlideNext 0.8s cubic-bezier(0.4, 0, 0.2, 1) ;}
.cb-animate-prev {animation: cbSlidePrev 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes cbSlideNext {
    0% { transform: translateX(60px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes cbSlidePrev {
    0% { transform: translateX(-60px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
/* Zajištění, aby body byly vždy vidět nad animací */
.citybrex-hotspot {
   position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    background: #d5ad1b !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    z-index: 9999 !important; /* Body musí být úplně nahoře */
    cursor: pointer !important;
    pointer-events: auto !important;
    display: block !important;
}

/* Šipky posuneme kousek víc ven, aby nepřekážely bodům */
.cb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #d5ad1b00 !important;
    color: #ffa600  !important;
    border: none !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 1005;
    cursor: pointer;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.2);*/
    font-size: 3em;
    font-weight: lighter;
}
.cb-prev { left: -70px; }
.cb-next { right: 60px; }
#hotspot-info-panel 
{
    position: absolute;
    bottom: 0;
    width:80%;
    left: 10%;
    right: 0;
    background:rgb(255 252 252 / 97%);
    color:#060606;
    padding: 12px 25px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 10000 !important; /* Musí být nad body i fotkou */
    display: none; /* Zapíná se pomocí JS */
    border-top: 1px solid #d5ad1b; /* Tlustší zlatá linka pro styl */
    text-align: center;
    box-shadow: 0 2px 30px rgba(0,0,0,0.5); /* Stín směrem nahoru, aby panel vystoupil */
    backdrop-filter: blur(5px); /* Rozostření pozadí pod panelem - vypadá to velmi moderně */
    animation: slideUp 0.3s ease-out;
    border-radius: 20px
}
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Tlačítko pro zavření panelu (vložíme ho přes JS) */
.close-panel-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #d5ad1b;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
}
/* Sonar efekt kolem bodu */
.citybrex-hotspot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: 1px solid #d5ad1b;
    border-radius: 50%;
    animation: sonar 2s infinite;
}

@keyframes sonar {
    0% { width: 100%; height: 100%; opacity: 1; }
    100% { width: 300%; height: 300%; opacity: 0; }
}

/* Změna barvy, když je panel otevřený */
.citybrex-hotspot.is-active {
    background: #000 !important;
    border-color: #d5ad1b !important;
    transform: scale(1.2);
}
/*mobil galerie*/
/* --- POUZE PRO MOBIL (do 767px) --- */
@media (max-width: 767px) {
    /* 1. Reset vnějších okrajů Shoptetu */
    .p-detail-inner,
    #main-content > .container,
    .content-wrapper > .container,
    .col-xs-12,
    .detail-img,
    .detail-parameters-row,
    .p-image-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Zvětšení bílé karty s galerií (Shoptet .p-image.image) */
    .p-image.image {
        border-radius: 0 !important; /* Na mobilu bez rohů pro plnou šířku */
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        padding: 0 !important;
        background: #fff;
    }

    /* 3. Zvětšení bílé karty se záložkami (.citybrex-tabs-container) */
    .citybrex-tabs-container {
        border-radius: 0 !important; /* Na mobilu bez rohů pro plnou šířku */
        border-left: none !important;
        border-right: none !important;
    }

    /* 4. Úprava navigace záložek na mobilu */
    .cb-tabs-nav {
        display: flex !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    .cb-tab-link {
        flex: 1 !important; /* Taby se roztáhnou rovnoměrně */
        text-align: center !important;
        padding: 15px 5px !important;
        font-size: 13px !important;
    }

    /* 5. Větší padding uvnitř karet, aby text nelepil k okraji */
    .p-image-wrapper,
    .cb-tab-content {
        padding: 20px 15px !important;
    }
    .cb-prev { left: 0px; }
    .cb-next { right: 0px; }
}
 /* ======================================================= */
/*  BLOKU S CENOU )NUTNÝ SKRIPT  */
/* ======================================================= */  
.col-md-4 {
           /* max-width: 5%;*/
            
        }
/* 1. Úprava NADPISU - nyní ho můžeš ovládat centrálně */
.p-detail-inner h1 {
    text-align: center; /* Změň na 'left' pro zarovnání vlevo */
    margin-bottom: 30px !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    width: 100%;
    font-size: medium;
    border-bottom: solid 1px #ffa600;
}

/* 2. HLAVNÍ KONTEJNER (Galerie vlevo, bloky vpravo) */
.p-detail-inner .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Galerie (vlevo) */
.p-image-wrapper {
    flex: 1;
    /*min-width: 500px;*/
    max-width: 80% !important; /* Uprav pro šířku galerie */
}

/* Pravý sloupec pro bloky (Cena + Budoucí obsah) */
.cb-right-column {
    flex: 0 0 30%; /* Šířka pravého sloupce */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Mezera mezi horním blokem a cenou */
    margin-left: auto;
}

/* Horní prázdný bílý blok */
#cb-custom-extra-block {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    min-height: 100px; /* Aby byl vidět, i když je prázdný */
    DISPLAY: NONE;
}

/* Nákupní karta (Cena) */
#product-detail-form {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 1px solid #f0f0f0 !important;
    width: 90% !important;
    margin: 0 !important; /* Reset marginů, o mezeru se stará 'gap' */
}

/* --- MOBILNÍ ÚPRAVA --- */
@media (max-width: 991px) {
    .p-image-wrapper, .cb-right-column {
        max-width: 90% !important;
        flex: 1 1 100%;
    }
    
    .cb-right-column {
        order: 2; /* Cena a extra blok půjdou pod galerii */
    }
    
    #cb-custom-extra-block, #product-detail-form {
        border-radius: 0 !important;
    }
}
 /* ======================================================= */
/*  uprava popisu (karty)  */
/* ======================================================= */ 
/*  nnápis popis  */
.shp-tabs, .shp-tabs-holder{
    display: none;
}
/*  text krátký  */
.p-detail-inner .p-short-description{
    display: none;
}
/* 1. Import písma Roboto (trochu techničtější než Poppins, sedí k Interu) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Globální nastavení písma pro detail produktu */
.p-detail-inner, .cb-tab-content {
    font-family: 'Roboto', sans-serif !important;
}

/* 2. Hlavní kontejner karet - Stín a kulaté rohy */
.citybrex-tabs-container {
    margin-top: 40px;
    background: #ffffff;
    border-radius: 12px; /* Kulaté rohy pro celý blok */
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Jemný, hluboký stín */
    overflow: hidden; /* Důležité pro kulaté rohy */
    border: 1px solid #eaeaea;
    margin-right: 2%;
    margin-bottom: 30px;
}

/* 3. Navigace karet */
.cb-tabs-nav {
    display: flex;
    background: #f8f8f8; /* Mírně šedé pozadí navigace */
    border-bottom: 1px solid #eaeaea;
}

.cb-tab-link {
    padding: 16px 30px;
    cursor: pointer;
    color: #555;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 1.0em;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border-right: 1px solid #eaeaea;
}

/* Interaktivita - Hover efekt */
.cb-tab-link:not(.active):hover {
    background: #f0f0f0;
    color: #000;
}

/* Aktivní karta */
.cb-tab-link.active {
    background: #ffffff;
    color: #000;
    font-weight: 700;
}

/* Zlatá linka u aktivní karty */
.cb-tab-link.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #d5ad1b; /* CITYBREX Zlatá */
}

/* 4. Obsah karet */
.cb-tab-content {
    display: none;
    padding: 1px; /* Větší padding pro vzdušnost */
    animation: cbFadeIn 0.7s ease;
    font-size: 1.3em;
}

.cb-tab-content.active {
    display: block;
}

/* 5. OPRAVA: Sjednocení rozložení (Popis vs Ke stažení) */
/* Vynutíme, aby se text popisu a .descr-info chovaly jako bloky pod sebou */
#tab-popis {
    display: flex;
    flex-direction: column;
}

/* Text popisu roztáhneme na celou šířku */
#tab-popis .descr-text {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-bottom: 30px;
}

/* Blok kategorie/tisk (.descr-info) srovnáme dolů */
#tab-popis .descr-info {
    width: 100% !important;
    float: none !important;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: auto; /* Posune ho na dno karty */
}

/* 6. Ikonky a stylování seznamu v popisu */
.cb-tab-content ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.cb-tab-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Zlatá technická ikonka místo odrážky */
.cb-tab-content ul li::before {
    content: '→'; /* Nebo technický čtvereček '■' */
    position: absolute;
    left: 0;
    color: #d5ad1b;
    font-weight: bold;
    font-size: 14px;
    top: -1px;
}

/* 7. Styl pro kartu Ke stažení (Ikonky) */
.download-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    text-decoration: none !important;
}

.download-item:hover {
    background: #ffffff;
    border-color: #d5ad1b;
    box-shadow: 0 5px 15px rgba(213, 173, 27, 0.1);
    transform: translateY(-2px);
}

.download-icon {
    font-size: 30px;
    color: #d5ad1b;
}

/* Animace */
@keyframes cbFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ======================================================= */
/*  tlačítko koupit  */
/* ======================================================= */ 

            /*-------*/
            .subcategories{
            border-bottom: solid 1px #ffa600;        
            }
            /* TLAČITKO KOUPIT NA SEZNAMU PRODUKTŮ */
            .p-detail-inner .price .add-to-cart .btn
              { 
               BORDER-RADIUS: 30PX;
               COLOR:RED;
               MAX-WIDTH: 50%;
            }   
            .p-detail-inner .detail-img>div .image {
                box-shadow: 1px 0px 20px 1px rgb(70 68 68 / 20%);
                border-radius: 15px;
                margin-top: 100px;
                
            }
             .p-detail-inner .detail-img>div .image:hover {
               transform: translateY(-5px) scale(1.05);
               TRANSITION: 0.3s;
              }
            #content > div > div > div > div.p-detail-inner > div > div.col-md-8.pull-right.detail-img.p-image-wrapper > div.row > div > a > img:hover 
            {
                
            }
            #content .btn.unveil-button, #footer .btn.unveil-button 
            {
                   display: NONE;
                }
               :where(body.ums_a11y_category_page--on) .category-header {
                  display: NONE;
                } 
            .products-block .product:not(.highlight-product):hover .tools-wrap
            {
                  z-index: 10; /* Posune prvek nad ostatní */
                transform: translateY(-5px) scale(1.05); /* Mírně ho zvedne a zvětší */
                background: rgb(255 255 255 / 47%);
                backdrop-filter: blur(0.51px); /* Rozmaže pozadí pod blokem */
                border: 1px solid #d5ad1b;
                border-radius: 10px;
                box-shadow: 1px 0px 20px 1px rgb(0 0 0 / 89%);
                  /*display: NONE;.product .btn  .product .btn*/} 
            .products-block .product:not(.highlight-product):hover .tools-wrap .tools .btn  {
                 background:rgb(255 167 1 / 80%);
               border-radius: 20px;
            }  

/* ======================================================= */
/* TLAČITKO KOUPIT NA SEZNAMU PRODUKTŮ */
/* ======================================================= */
                /* Změna barvy a zaoblení tlačítka */
          .p-detail-inner .add-to-cart-button {
              background-color: #f5f5f3 !important; /* Vaše zlatá barva */
              border: SOLID 1PX #d5ad1b !important; 
              border-radius: 25px !important; /* Ostré rohy jako u Hero sekce */
              text-transform: uppercase;
              font-weight: bold;
              transition: 0.3s;
              color: #3e2525 !important;    
          }

          /* Efekt při najetí myší (hover) */
          .p-detail-inner .add-to-cart-button:hover {
              background-color: #ffffff !important; /* Černá při najetí */
              color: #d5ad1b !important;
              box-shadow: 1px 0px 20px 1px rgb(0 0 0 / 89%);
          }
/* ======================================================= */
/* STRANA KONTAKTY */
/* ======================================================= */      
/* Kombinace Body ID stránky a ID kontejneru */
        body.in-kontakty #content-wrapper.content-wrapper 
        {
          
            background-color: white !important; 
             border-radius: 20px !important;;
            box-shadow: -3px -6px 58px #d9d9d9, 2px -5px 62px #5b5959 !important;
            border: solid 0px #93dde0 !important;

        PADDING: 30PX;
        MAX-WIDTH:90%;
        }

        body.in-kontakty #content-wrapper .container 
        {
           
             background-color: white !important; /* Příklad */
              border-radius: 20px;
            box-shadow: -3px -6px 58px #d9d9d9, 2px -5px 62px #5b5959 !important;
            border: solid 0px #93dde0 !important;
        } 
        
 /* ======================================================= */
/* MOBIL */
/* ======================================================= */  

    @media (max-width: 768px) {
 
        .col-md-4 {
            max-width: 90%;
            
        }
           .category-title {
            max-width: 90%;
            width: 90%;
            margin-left: 5%;
            font-size: 1.4em;
            text-align: center;
            padding-top: 10px;
            border-bottom: solid 1px #ffa600;
        	}  
          .col-md-4 h1{
           
            max-width: 100%;
            width: 100%;
            margin-left: 10%;
            font-size: 1.2em;
            text-align: center;
            padding-top: 10px;
            border-bottom: solid 1px #ffa600;
            
        }
        .p-detail-inner .detail-img>div .image {
            box-shadow: 1px 0px 20px 1px rgb(70 68 68 / 20%);
            border-radius: 15px;
            margin-top: 15px;
            width: 80%;
            left: 10%;
        }
        .content-wrapper.container .row>div{
        padding-left: 15px;
        }
    }      
        
</style>
