/* --- ŠIROKÁ KOMBINOVANÁ KRABICE: POPIS A CHUŤ --- */

#moved-p {
    margin-top: 40px !important;
    clear: both !important;
    background-color: #fdfaf7 !important;
    border: 1px solid #efe3d6 !important;
    border-radius: 16px !important;
    padding: 40px 50px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.03) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important;
}

.combined-box-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 1px 1fr !important;
    gap: 40px !important; 
    align-items: stretch !important; 
    width: 100% !important;
}

.combined-col {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.combined-col-separator {
    background-color: #efe3d6 !important;
    width: 1px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

h2.combined-box-title {
    font-size: 22px !important;
    color: black !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
    text-align: left !important;
    border-bottom: none !important;
}

.combined-description {
    margin: 0 !important;
    padding: 0 !important;
}

.combined-description p,
.combined-description ul,
.combined-description li {
    font-size: 15px !important;
    color: #444 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

.combined-description strong,
.combined-description b {
    color: #111 !important;
    font-weight: 700 !important;
}

.combined-description ul {
    list-style: disc !important;
    margin-left: 20px !important;
}

.combined-taste-table {
    width: 100% !important;
    margin-bottom: 30px !important;
}

.combined-taste-table table.detail-parameters {
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

.combined-taste-table table.detail-parameters th {
    text-align: left !important;
    width: 40% !important;
    font-weight: normal !important;
    color: #2c1e16 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

.combined-taste-table table.detail-parameters td {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

.combined-taste-table table.detail-parameters tr:last-child th,
.combined-taste-table table.detail-parameters tr:last-child td {
    border-bottom: none !important;
}

.combined-taste-charts {
    width: 100% !important;
}

.hero-chart-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; 
    gap: 30px !important;
    width: 100% !important;
}

.radar-svg {
    width: 55% !important;
    max-width: 200px !important;
    margin: 0 !important;
}

.pie-chart-combined-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
}

.h-s {
    margin: 0 !important;
    width: 85px !important;
    height: 85px !important;
}

.h-legend {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
}

.dot { display: inline-block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; margin-right: 8px !important; }
.ara-dot { background-color: #4e342e !important; }
.rob-dot { background-color: #e0d4c8 !important; }
.b-w { display: flex !important; gap: 1px !important; }

@media (max-width: 991px) {
    #moved-p { padding: 25px !important; }
    .combined-box-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    .combined-col-separator { display: none !important; }
    .combined-col-right { order: 1 !important; padding: 0 !important; }
    .combined-taste-charts { border-bottom: 1px dashed #efe3d6 !important; padding-bottom: 30px !important; margin-bottom: 30px !important; }
    .combined-col-left { order: 2 !important; padding: 0 !important; border-bottom: none !important; margin-bottom: 0 !important; }
    .hero-chart-container { justify-content: center !important; }
}

@media (max-width: 450px) {
    .hero-chart-container { flex-direction: column !important; gap: 20px !important; }
}

/* --- POLETUJÍCÍ ZRNKA (BEZPEČNĚ NA OKRAJÍCH, PŘIROZENÝ FLOAT) --- */
.floating-beans-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    pointer-events: none; z-index: -1;
    overflow: hidden;
}

.f-bean-box { position: absolute; will-change: transform; }

.f-bean-img {
    width: 100%; height: 100%;
    background-size: contain; background-repeat: no-repeat;
    background-position: center; opacity: 1; 
    will-change: transform; 
    animation: organicFloat 12s ease-in-out infinite; 
}

/* Výraznější, přirozeně plavající vznášení na místě */
@keyframes organicFloat {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    33% { transform: translate(12px, -15px) rotate(15deg); }
    66% { transform: translate(-8px, -10px) rotate(-10deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

.f-bean-img-1 { background-image: url('https://cdn.myshoptet.com/usr/781782.myshoptet.com/user/documents/upload/zrnko1.png'); }
.f-bean-img-2 { background-image: url('https://cdn.myshoptet.com/usr/781782.myshoptet.com/user/documents/upload/zrnko2.png'); }
.f-bean-img-3 { background-image: url('https://cdn.myshoptet.com/usr/781782.myshoptet.com/user/documents/upload/zrnko3.png'); }
.f-bean-img-4 { background-image: url('https://cdn.myshoptet.com/usr/781782.myshoptet.com/user/documents/upload/zrnko4.png'); }

/* --- LEVÝ SHLUK --- */
/* Zlatý střed: bezpečně daleko od textu (min 740px), ale neustřiženo na okraji (max 920px) */
#f-bean-1 { width: 95px; height: 95px; top: -5%; left: calc(50% - 820px); } #f-bean-1 .f-bean-img { filter: blur(3px); animation-delay: 0s; }
#f-bean-3 { width: 45px; height: 45px; top: 15%; left: calc(50% - 880px); } #f-bean-3 .f-bean-img { filter: blur(2px); animation-delay: -3s; }
#f-bean-6 { width: 55px; height: 55px; top: 35%; left: calc(50% - 760px); } #f-bean-6 .f-bean-img { filter: blur(1px); animation-delay: -7s; }
#f-bean-8 { width: 65px; height: 65px; top: 50%; left: calc(50% - 840px); } #f-bean-8 .f-bean-img { filter: blur(3px); animation-delay: -2s; }
#f-bean-9 { width: 70px; height: 70px; top: 75%; left: calc(50% - 850px); } #f-bean-9 .f-bean-img { filter: blur(1px); animation-delay: -5s; }
#f-bean-11{ width: 50px; height: 50px; top: 90%; left: calc(50% - 790px); } #f-bean-11 .f-bean-img { filter: blur(3px); animation-delay: -8s; }
#f-bean-12{ width: 90px; height: 90px; top: 110%; left: calc(50% - 870px); } #f-bean-12 .f-bean-img { filter: blur(2px); animation-delay: -4s; }
#f-bean-15{ width: 60px; height: 60px; top: 135%; left: calc(50% - 860px); } #f-bean-15 .f-bean-img { filter: blur(1px); animation-delay: -9s; }
#f-bean-17{ width: 40px; height: 40px; top: 160%; left: calc(50% - 740px); } #f-bean-17 .f-bean-img { filter: blur(3px); animation-delay: -1s; }

/* --- PRAVÝ SHLUK --- */
/* Zlatý střed: bezpečně daleko od textu (min 760px), ale neustřiženo na okraji (max 920px) */
#f-bean-2 { width: 85px; height: 85px; top: 5%; right: calc(50% - 860px); } #f-bean-2 .f-bean-img { filter: blur(0px); animation-delay: -1s; }
#f-bean-4 { width: 75px; height: 75px; top: 25%; right: calc(50% - 790px); } #f-bean-4 .f-bean-img { filter: blur(2px); animation-delay: -5s; }
#f-bean-5 { width: 100px; height: 100px; top: 45%; right: calc(50% - 800px); } #f-bean-5 .f-bean-img { filter: blur(0px); animation-delay: -3s; }
#f-bean-7 { width: 35px; height: 35px; top: 65%; right: calc(50% - 900px); } #f-bean-7 .f-bean-img { filter: blur(4px); animation-delay: -8s; }
#f-bean-10{ width: 60px; height: 60px; top: 85%; right: calc(50% - 820px); } #f-bean-10 .f-bean-img { filter: blur(0px); animation-delay: 0s; }
#f-bean-13{ width: 80px; height: 80px; top: 115%; right: calc(50% - 880px); } #f-bean-13 .f-bean-img { filter: blur(0px); animation-delay: -4s; }
#f-bean-14{ width: 50px; height: 50px; top: 140%; right: calc(50% - 750px); } #f-bean-14 .f-bean-img { filter: blur(3px); animation-delay: -2s; }
#f-bean-16{ width: 100px; height: 100px; top: 170%; right: calc(50% - 860px); } #f-bean-16 .f-bean-img { filter: blur(0px); animation-delay: -11s; }
#f-bean-18{ width: 75px; height: 75px; top: 190%; right: calc(50% - 800px); } #f-bean-18 .f-bean-img { filter: blur(2px); animation-delay: -3s; }

@media (max-width: 768px) {
    #f-bean-1, #f-bean-3, #f-bean-5, #f-bean-8, #f-bean-10, #f-bean-12, #f-bean-14, #f-bean-16, #f-bean-18 { display: none !important; }
    .f-bean-img { opacity: 0.3; }
}

/* ========================================================= */
/* --- PŘITAŽENÍ POLETUJÍCÍCH ZRNEK PRO NOTEBOOKY --- */
/* ========================================================= */

/* Pro běžné notebooky (např. Macbook Air s šířkou kolem 1440px) */
@media (max-width: 1550px) {
    /* Přitažení levého shluku zrnek směrem do středu */
    #f-bean-1, #f-bean-3, #f-bean-6, #f-bean-8, #f-bean-9, 
    #f-bean-11, #f-bean-12, #f-bean-15, #f-bean-17 {
        margin-left: 12vw !important;
    }

    /* Přitažení pravého shluku zrnek směrem do středu */
    #f-bean-2, #f-bean-4, #f-bean-5, #f-bean-7, #f-bean-10, 
    #f-bean-13, #f-bean-14, #f-bean-16, #f-bean-18 {
        margin-right: 12vw !important;
    }
}

/* Pro menší notebooky a tablety na šířku přitáhneme ještě o kus víc */
@media (max-width: 1200px) {
    #f-bean-1, #f-bean-3, #f-bean-6, #f-bean-8, #f-bean-9, 
    #f-bean-11, #f-bean-12, #f-bean-15, #f-bean-17 {
        margin-left: 20vw !important;
    }

    #f-bean-2, #f-bean-4, #f-bean-5, #f-bean-7, #f-bean-10, 
    #f-bean-13, #f-bean-14, #f-bean-16, #f-bean-18 {
        margin-right: 20vw !important;
    }
}