.eshop-custom-section {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 auto !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    #body-content {
        padding: 0px 0px !important;
    }

    .row {
        padding: 0px 16px !important;
        margin-bottom: 40px;
    }

    .eshop-category-item, .shopitem {
        border-radius: 8px !important;
    }

    /* ==========================================================================
    2. HERO SEKCE
    ========================================================================== */
    .wb-hero {
        background-color: #f9fbf9;
        padding: 50px 0 40px 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        overflow: hidden;
    }

    .wb-hero .container {
        max-width: 1170px !important;
        margin-left: 16px !important;
    }

    .trust-badge {
        background: #ffffff;
        padding: 10px 22px;
        border-radius: 100px;
        display: inline-block;
        font-size: 14px;
        color: #444444;
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        margin-bottom: 35px;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .trust-badge .green-text {
        color: #8cbd30;
        font-weight: 800;
    }

    .wb-hero-content h1 {
        font-size: 62px;
        font-weight: 800;
        color: #1a1a1a;
        line-height: 1.1;
        margin: 0 0 25px 0;
        letter-spacing: -1px;
    }

    .wb-popis {
        font-size: 18px;
        color: #555555;
        line-height: 1.6;
        max-width: 500px;
        margin-bottom: 45px;
    }

    /* CTA a Telefon */
    .hero-cta-area {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
    }

    .wb-btn-primary {
        background-color: #8cbd30;
        color: #ffffff !important;
        padding: 18px 38px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 17px;
        text-decoration: none !important;
        display: inline-block;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 8px 20px rgba(140, 189, 48, 0.25);
    }

    .wb-btn-primary:hover {
        background-color: #7aa529;
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(140, 189, 48, 0.35);
    }

    .contact-status {
        font-size: 14px;
        color: #666666;
    }

    .status-line {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .telefon {
        color: #333333;
    }

    .telefon strong {
        font-size: 16px;
        margin-right: 5px;
    }

    .telefon strong:hover {
        color: #df2e2e;
    }

    .dot-pulse {
        width: 9px;
        height: 9px;
        background: #8cbd30;
        border-radius: 50%;
        display: inline-block;
        margin-right: 12px;
        position: relative;
    }

    .dot-pulse::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #8cbd30;
        border-radius: 50%;
        left: 0;
        top: 0;
        animation: pulse-ring 2s infinite;
    }

    @keyframes pulse-ring {
        0% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(3.5); opacity: 0; }
    }

    .hero-visual .image-wrapper {
        display: inline-block;
        max-width: 92%;
        width: 100%;
    }

    .main-image {
        width: 100%;
        height: auto;
    }

    /* ==========================================================================
    3. SEKCE BENEFITY LIĹ TA 
    ========================================================================== */
    .sekce-benefity {
        padding: 16px 0;
        background-color: #fcfcfc; 
        margin-top: -90px!important; 
        position: relative; 
        z-index: 10;
    }
    
    /* Panel s výhodami  */
    .glass-bar-center {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 10px 20px;
   
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); 
        border: 1px solid #f0f0f0;
        flex-wrap: nowrap;
        margin:8px 16px;
    }
    

    .benefit-col {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    
    .benefit-card-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px; 
    }
    
   
    .benefit-icon-wrapper {
        width: 46px;
        height: 46px;
        min-width: 46px;
        background-color: #f2f9f0; 
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    .benefit-icon-svg {
        width: 22px;
        height: 22px;
        fill: #89bc23; 
    }
    

    .benefit-info {
        display: flex;
        flex-direction: column;
    }
    
    .benefit-info h3 {
        font-size: 16px;
        font-weight: 700; 
        color: #1a1a1a;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
    }
    
    .benefit-info p {
        font-size: 14px;
        color: #7a7a7a; 
        margin: 2px 0 0 0;
        line-height: 1.2;
        white-space: nowrap;
    }
    
 
    .v-line {
        width: 1px;
        height: 40px;
        background-color: #eeeeee;
        flex-shrink: 0;
    }

    
    /* Responzivita pro mobilní zařízení */
    @media (max-width: 991px) {
        .glass-bar-center {
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        
        .v-line {
            display: none;
        }
        
        .benefit-col {
            width: 50%; 
            flex: none;
            justify-content: flex-start;
        }
    }
    
    @media (max-width: 600px) {
        .benefit-col {
            width: 100%; 
        }
        
        .glass-bar-center {
            padding: 15px;
        }
    }

    

    .v-line {
        width: 1px;
        height: 40px;
        background-color: #f0f0f0;
    }


  
   
    
    /* ==========================================================================
        Produkty
    ========================================================================== */

    .wb-sekce-produkty {
       
        width: 100%;
        text-align: center; 
        margin-top: 40px;   
        margin-bottom: 40px;
        padding: 0 16px;
    }

    .wb-sekce-produkty h2 {
        display: inline-block;
        font-weight: 800 !important;
        font-size: 42px !important; 
        margin-bottom: 24px !important;
        color: #1a1a1a;
    }

    /* ==========================================================================
    4. MARQUEE (SCROLLOVACĂŤ ZNAÄŚKY)
    ========================================================================== */
    .marquee-container-new {
        width: 100% !important;
        padding: 40px 0 20px 0 !important;
        overflow: hidden !important;
        margin-bottom: 80px !important;
    }

    .section-header-marquee h3 {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        opacity: 0.5 !important;
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    .znacky-wrapper {
        display: flex !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .znacky-track {
        display: flex !important;
        width: max-content !important;
        animation: marquee-animation 30s linear infinite !important;
        align-items: center !important;
    }

    .znacky-track img {
        height: 55px !important;
        margin: 0 40px !important;
        filter: grayscale(100%) !important;
        opacity: 0.5 !important;
        transition: 0.3s !important;
        flex-shrink: 0 !important;
    }

    .znacky-track img:hover {
        filter: grayscale(0%) !important;
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }

    @keyframes marquee-animation {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    .znacky-wrapper:hover .znacky-track {
        animation-play-state: paused !important;
    }

    /* ==========================================================================
    5.vyhody
    ========================================================================== */
    .sekce-vyhody {
        display: block !important;
        margin: 20px -10px 100px -10px !important;
        clear: both !important;
        padding: 0px 16px;
    }

    .sekce-vyhody:after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
        
    .vyhoda-icon-svg {
        width: 32px !important;     
        height: 32px !important;
        margin-bottom: 8px !important;
        display: block !important;
        fill: #89bc23 !important;   
    }

    .telefoni-cislo-svg {
        width: 32px !important;     
        height: 32px !important;
        margin-bottom: 0px !important;
        display: block !important;
        fill: #ffffff !important;   
    }


    
.telefoni-cislo {
    font-size: 24px !important;
    font-weight: 800 !important; 
    color: #ffffff !important;
    margin: 0 0 8px 0 !important; 
    line-height: 1.2;
}



    
    .vyhoda-col-fix {
        width: 25% !important;
        float: left !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    .vyhoda-card-final {
        background-color: #f8f9fa !important; 
        padding: 25px 20px !important;
      
        border-radius: 8px !important;
        min-height: 260px !important;
        display: block !important; 
        text-decoration: none !important;
        text-align: left !important;
        box-sizing: border-box !important; 
        transition: all 0.3s ease-in-out !important; 
        border: 1px solid #eeeeee !important;       
        box-shadow: none !important;  
    }

    .vyhoda-card-final:hover {
        border-color: #89bc23 !important;           
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; 
        transform: translateY(-5px) !important;     
    }
    .vyhoda-card-final[style*="background-color:#89bc23"]:hover {
        border-color: #ffffff !important;         
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

 

    .vyhoda-tag {
        display: inline-block !important;
        background: rgba(0, 0, 0, 0.15) !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
    }
    
    .vyhoda-card-final {
        transition: all 0.3s ease-in-out; 
        cursor: pointer;
        border: 1px solid transparent; 
    }
    
    .vyhoda-card-final:hover {
        transform: translateY(-5px); 
        background-color: #ffffff !important; 
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;/
        border-color: #89bc23; 
    }
    
    
    .vyhoda-card-final:hover .vyhoda-icon-svg {
        transform: scale(1.1); 
        fill: #76a31e; 
        transition: all 0.3s ease;
    }
    
   
    .vyhoda-card-final[style*="background-color:#89bc23"]:hover {
        background-color: #76a31e !important; 
        border-color: transparent;
    }
    
    .vyhoda-card-final[style*="background-color:#89bc23"]:hover .vyhoda-icon-svg {
        fill: #ffffff !important;
    }
    /* ==========================================================================
    6. SEKCE Tisk knih
    ========================================================================== */
    .sekce-kniharstvi {
        max-width: 1170px !important;
        margin: 40px 16px !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
      
    }

    .karta-kniharstvi-new {
        background: #f8f9fa !important;
        padding: 80px 20px 20px 16px !important;
        text-align: center !important;
        overflow: hidden !important;
        position: relative !important;
        border-radius:8px!important;
     
    }

    .karta-kniharstvi-new h2 {
        font-size: 48px !important;
        font-weight: 800 !important;
        margin: 0 0 20px 0 !important;
        letter-spacing: -0.04em !important;
        color: #1a1a1a !important;
    }

    .karta-kniharstvi-new .intro-text {
        font-size: 18px !important;
        color: #4b5563 !important;
        max-width: 700px !important;
        margin: 0 auto 30px auto !important;
        line-height: 1.6 !important;
    }

    .kniharstvi-list-new {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto 40px auto !important;
    }

    .kniharstvi-list-new li {
        font-weight: 700 !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        color: #1a1a1a !important;
    }

    .kniharstvi-list-new li::before {
        content: "" !important;
        width: 10px !important;
        height: 10px !important;
        background: #89bc23 !important;
        border-radius: 50% !important;
        margin-right: 10px !important;
        display: inline-block !important;
    }

    .ph-visual-area-new {
        width: 100% !important;
        position: relative !important;
        display: block !important;
        margin-top: 20px !important;
    }

    .ph-visual-area-new img {
        width: 30% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 40px !important;
    }

    /* ==========================================================================
    7. SEKCE PŘÍBĚHY A CITÁT
    ========================================================================== */
    .sekce-pribehy {
        padding: 60px 0;
        background: #ffffff;
        width: 100% !important;
        margin: 0 !important; 
        text-align: center;
    }

    .pribehy-title {
        font-weight: 800;
        font-size: 42px!important;
        margin-bottom: 50px;
        text-align: center;
    }
  


    .pribehy-card .fw-bold .mb-1{

        font-size: 20px!important;
        }
        

.pribehy-card p{

font-size: 17px!important;
}

    .row-grid {
        display: block !important;
        margin: 0 auto !important; 
        padding: 0 !important;     
        width: 100% !important;
        max-width: 1170px !important;
        text-align: center !important;
        border-spacing: 0 !important;
    }
    .row-grid [class*="col-"] {
        display: inline-block !important;
        float: none !important;
        vertical-align: top;
        width: 320px !important;  
        margin: 0 10px 40px 10px !important; 
        padding: 0 !important;
        text-align: center !important;
    }


 .pribehy-card {
    display: block;
    width: 100%;

}
 


.pribehy-card img {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin: 0 auto 15px auto !important;
    display: block;
    border-radius:8px;
  
}


.pribehy-card p {
    font-weight: 700;
    font-size: 16px;
    margin: 10px 0 0 0;
    color: #1a1a1a;
}
    .sekce-citat {
        margin: 80px auto 0 !important;
        max-width: 900px !important;
    }

    .sekce-citat .text {
        font-size: 36px;
        font-weight: 600;
        line-height: 1.4;
        color: #444;
    }

    .sekce-citat .autor {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 25px 0 40px;
    }

    .btn-citat {
        display: inline-block;
        background: #f0f0f0;
        color: #000;
        padding: 16px 32px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        transition: background 0.2s;
    }

    /* ==========================================================================
    8. RECENZE SLIDER
    ========================================================================== */
    .wb-recenze-sekce {
        margin-top: 20px !important;
        padding: 40px 0 !important;
        overflow: hidden;
        background: #fff;
        text-align: center; 
    }

  

    .wb-recenze-sekce h2 {
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .wb-btn-google {
        display: inline-block;
        margin: 0 auto 40px auto; 
        background: #89bc23;
        color: #fff !important;
        padding: 12px 25px;
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none !important;
        transition: background 0.2s;
    }

    .wb-btn-google:hover {
        background-color: #7aa529;
    }
    .wb-slider-relative {
        position: relative !important;
        padding: 0 45px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .wb-card-slider {
        display: flex !important;
        overflow-x: auto !important;
        gap: 20px !important;
        padding: 16px 5px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth !important;
        text-align: left; 
    }

    .wb-card-slider::-webkit-scrollbar { display: none; }

    .wb-slider-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 100 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }

    .wb-slider-nav.prev { left: 5px !important; }
    .wb-slider-nav.next { right: 5px !important; }

    .wb-recenze-card {
        flex: 0 0 320px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 30px 24px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .wb-stars-card { color: #ffc107; margin-bottom: 15px; }
    .wb-text-card { font-size: 17px; color: #555; min-height: 90px; margin-bottom: 16px; white-space: normal; }
    .wb-card-footer { border-top: 1px solid #f0f0f0; padding-top: 15px; margin-top: auto; }
    .wb-author-name { font-weight: 800; margin-bottom: 5px; }
    .wb-verify { font-size: 11px; color: #aaa; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .wb-verify img { width: 16px; }

    /* ==========================================================================
    RESPONZIVITA
    ========================================================================== */

    /* TABLETY (pod 991px) */
    @media (max-width: 991px) {
        .wb-hero { padding: 60px 0; }
        .wb-hero-content { padding: 0 30px; }
        .wb-hero-content h1 { text-align: center !important; font-size: 40px !important; margin: 0 auto 20px auto !important; }
        .wb-popis { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
        
        .hero-cta-area { justify-content: center; flex-direction: column; gap: 25px; }
        .hero-visual { margin-top: 50px; text-align: center !important; }
        .hero-visual .image-wrapper { max-width: 90%; }

        .contact-status { display: flex !important; flex-direction: column !important; align-items: center !important; }
        .status-line { justify-content: center !important; }


        .vyhody-row-fix {
            display: flex !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            gap: 15px !important;
            padding: 10px 5px 30px 5px !important;
            scrollbar-width: none;
        }
        .vyhody-row-fix::-webkit-scrollbar { display: none !important; }
        
        .vyhoda-col-fix {
            flex: 0 0 280px !important;
            float: none !important;
            scroll-snap-align: center !important;
            padding: 0 !important;
        }
        
        .vyhoda-card-final:hover { transform: none !important; box-shadow: none !important; }
        .vyhoda-card-final { min-height: 220px !important; }

        .ph-visual-area-new img { width: 60% !important; transform: none !important; }
    }

    /* DESKTOPY (nad 991px) */
    @media (min-width: 991px) {
        .display-table { display: table; width: 100%; table-layout: fixed; }
        .wb-hero-content, .hero-visual { display: table-cell; vertical-align: middle; float: none; }
    }

    /* MOBILY (pod 767px) */
    @media (max-width: 767px) {

        .wb-hero-content h1 { font-size: 38px !important;}
       
        .sekce-benefity { margin-top: -20px; padding: 0 15px; }
        .v-line, .v-line .hidden-xs { display: none !important; }
        .glass-bar-center { flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 15px; }
        .benefit-col { width: 100%; justify-content: flex-start; padding: 15px 0; }
        .benefit-icon-wrapper { width: 42px; height: 42px; margin-right: 12px; }
        .benefit-info h3 { font-size: 15px; }
        .benefit-info p { font-size: 12px; }

        /* Marquee a tisk knih */
        .znacky-track img { height: 35px !important; margin: 0 20px !important; }
        .karta-kniharstvi-new { padding: 40px 20px 0 20px !important; }
        
        .karta-kniharstvi-new h2 { font-size: 40px !important; }
        .kniharstvi-list-new { flex-direction: column !important; align-items: center !important; gap: 15px !important; }
        .ph-visual-area-new img { width: 80% !important; }
        .pribehy-card p{

            font-size: 15px!important;
            }
            

      
     
        .sekce-pribehy .row-grid {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            text-align: center !important;
        }

     
       
        .sekce-pribehy .row-grid [class*="col-"] {
            display: block !important;
            float: none !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 0 30px 0 !important;
            padding: 0 !important;
            clear: both !important;
        }
        

        .pribehy-card {
            display: inline-block !important; 
            float: none !important;
            width: 100% !important;
            max-width: 280px !important; 
            margin: 0 auto !important;
            text-align: center !important;
        }


        .pribehy-card img {
            display: block !important;
            margin: 0 auto 10px auto !important;
            float: none !important;
            max-width: 240px !important; 
            height: auto !important;
        }

       


        .pribehy-title { font-size: 32px; margin-bottom: 40px; }
        .sekce-citat .text { font-size: 20px; }


        .vyhoda-card-final:not(.is-green):hover {
            background: #f8f9fa !important; 
            border-color: #eeeeee !important; 
            transform: none !important; 
            box-shadow: none !important; 
        }
        .vyhoda-card-final.is-green:hover { transform: none !important; box-shadow: none !important; }

        .telefoni-cislo:hover {
          
           
            color: #ffffff !important;
            
        }
        
        .sekce-citat {
            margin-top: 40px !important; 
        
        }

        .sekce-citat .text {
            font-size: 24px !important;  
            line-height: 1.4 !important;
        }

        .wb-recenze-sekce {
            padding: 30px 0 !important;
            margin-top: 10px !important; 
        }

        
        .wb-btn-google {
            margin-bottom: 24px !important; 
        }
        .wb-recenze-sekce h2 {
            margin-top: 0 !important;      
            margin-bottom: 10px !important; 
        }
        .wb-slider-relative {
            padding: 0 10px !important; 
        }

        .wb-recenze-card {
            flex: 0 0 280px !important; 
            padding: 20px 15px !important; 
            margin-bottom: 10px;
        }

        .wb-text-card {
            font-size: 15px !important; 
            min-height: auto !important; 
        }

    }


   
.vyhoda-card-final.is-green {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 30px !important;
    margin: 0 !important; 
    position: relative !important;
    overflow: hidden !important;
    min-height: 300px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}


.vyhoda-card-final.is-green * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
}

.vyhoda-card-final.is-green h3 {
    color: #ffffff !important;
    font-size: 26px !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.vyhoda-card-final.is-green p {
    color: rgba(255,255,255,0.9) !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.vyhoda-card-final.is-green .wb-btn-primary {
    display: inline-block !important;
    background: #ffffff !important;
    color: #244131 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    width: auto !important;
}
   



#prevCard::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-bottom: 2px solid #1a1a1a !important;
    border-left: 2px solid #1a1a1a !important;
    transform: rotate(45deg) !important;
    margin: auto !important; 
    left:1px;
    position:relative;
}


#nextCard::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-bottom: 2px solid #1a1a1a !important;
    border-left: 2px solid #1a1a1a !important;
    transform: rotate(-135deg) !important;
    margin: auto !important; 
    left:-1px;
    position:relative;
}


#prevCard, #nextCard {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}