/* --- GLOBÁLNÍ NASTAVENÍ --- */
.sh-custom-wrapper { font-family: "Open Sans", sans-serif; color: #333; line-height: 1.6; }
.sh-block { padding: 40px 15px; }
.sh-dark-bg { background: #2c2c2c; color: #fff; border-radius: 8px; margin: 20px 0; }

/* --- BLOK 1: INTERAKTIVNÍ VÝHODY --- */
.sh-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 25px; justify-items: center; }
.sh-item-interactive { position: relative; width: 100%; max-width: 180px; }
.sh-icon-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 5; text-align: center; }

/* Ikona */
.sh-icon-inv { width: 50px !important; height: 50px !important; object-fit: contain; transition: transform 0.6s ease; }
.sh-item-interactive:hover .sh-icon-inv { transform: rotate(360deg) scale(1.1); }

/* Nadpis trvale pod ikonou */
.sh-visible-title { margin: 12px 0 0 0; font-size: 1rem!important; font-weight: bold; color: #fff; text-transform: uppercase; text-align: center; padding-top:20px!important; font-family: "Exo 2", sans-serif;}

/* Bublina s detailem (zobrazí se po najetí) */
.sh-benefit-text { 
    position: absolute; top: 90px; left: 50%; transform: translateX(-50%) translateY(15px);
    width: 220px; background: #fff; color: #333; padding: 15px; border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 10;
}
.sh-benefit-text p { margin: 0; font-size: 12px; text-align: center; line-height: 1.4; }
.sh-item-interactive:hover .sh-benefit-text { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Šipka pro bublinu */
.sh-benefit-text::after {
    content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent #ffffff transparent;
}

/* --- BLOK 2 & 3: SPLIT LAYOUT A STICKY --- */
.sh-split { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 40px; 
    align-items: flex-start; /* DŮLEŽITÉ: Aby se sloupce nenatáhly a sticky fungovalo */
    text-align: left; 
    margin: 30px 0; 
    position: relative;
}
.sh-col { flex: 1; min-width: 300px; }
.sh-reverse { flex-direction: row-reverse; }
.sh-table { width: 100%; border-collapse: collapse; }
.sh-table td { padding: 12px 10px; border-bottom: 1px solid #eee; }
.sh-col img { max-width: 100%; border-radius: 8px; }

/* Sticky sloupec s nákresem */
.sh-sticky-column { 
    position: -webkit-sticky; 
    position: sticky; 
    top: 120px; /* Vzdálenost odshora - uprav, pokud se nákres schovává pod horní menu */
    z-index: 5;
    cursor: zoom-in;
}
.sh-zoom-hint { display: block; font-size: 11px; color: #888; margin-top: 8px; text-align: center; cursor: zoom-in;}

/* Shoptet Hack pro zajištění funkčnosti Sticky efektu */
#productDetail #description { overflow: visible !important; }
.p-detail-inner { overflow: visible !important; }

/* --- BLOK 4: RAL PALETA --- */
.sh-ral-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-bottom: 20px;}
.sh-ral-item { 
    width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; 
    cursor: pointer; transition: 0.3s; position: relative; display: flex; align-items: center; justify-content: center;
}
.sh-ral-item span { font-size: 10px; color: transparent; font-weight: bold; mix-blend-mode: difference; }
.sh-ral-item:hover { transform: scale(1.2); }
.sh-ral-item:hover span { color: #fff; opacity: 1; }

/* --- BLOK 5: HOVER KARTY --- */
.sh-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.sh-hover-card { position: relative; overflow: hidden; border-radius: 10px; height: 320px; background: #c3c1b5; text-align: center; }
.sh-hover-card span { display: block; margin:12px; font-size: 1rem!important; font-weight: bold; color: #2c2c2c; text-transform: uppercase; padding-top:20px!important; font-family: "Exo 2", sans-serif;}
.sh-hover-card img { width: 100%; height: 70%; object-fit: cover; transition: 0.5s; opacity: 0.8; }
.sh-overlay { 
    position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); 
    color: #fff; padding: 25px; transition: 0.4s; display: flex; flex-direction: column; justify-content: center; text-align: center; box-sizing: border-box;
}
.sh-hover-card:hover .sh-overlay { top: 0; }
.sh-hover-card:hover img { transform: scale(1.1); }

/* --- LIGHTBOX & TLAČÍTKO --- */
.sh-lightbox { display: none; position: fixed; z-index: 10001; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
.sh-lightbox-content { max-width: 90%; max-height: 85%; border: 4px solid #fff; border-radius: 4px;}
.sh-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; }
.sh-scroll-top { text-align: center; margin: 50px 0; }
#js-scroll-up { padding: 12px 30px; border-radius: 30px; border: 1px solid #ddd; cursor: pointer; transition: 0.3s; font-weight: bold; background: #fff;}
#js-scroll-up:hover { background: #333; color: #fff; border-color: #333;}

/* --- RESPONSIVITA --- */
@media (max-width: 768px) {
    .sh-split, .sh-reverse { flex-direction: column; text-align: center; align-items: center; }
    .sh-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .sh-benefit-text { display: none; } /* Vypnutí bublin na mobilu */
    .sh-sticky-column { position: static; margin-top: 20px; } /* Vypnutí sticky na mobilu, aby to neblokovalo scrollování */
}