

.section-product { margin-top: 134px; color: #494949; }
.section-product > .grid { margin-top: 40px; display: grid; grid-template-columns: 517fr 688fr 315fr; gap: 30px 40px; }

.section-product > .grid > .gallery > .collapse { display: grid; }
.section-product > .grid > .gallery > .collapse > * { grid-area: 1 / 1; }
.section-product > .grid > .gallery > .collapse > picture > img { border-radius: 26px; }
.section-product > .grid > .gallery > .collapse > .collapsed { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top > .badge { color: #fff; font-weight: 700; padding: 12px 24px; border-radius: 9999px; background-color: #6b27ff; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav { width: 48px; height: 48px; flex-shrink: 0; background-color: #fff; border-radius: 9999px; border: 1px solid #6b27ff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.4s; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav > svg * { transition: stroke 0.4s; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav:hover { background-color: #6b27ff; }
.section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav:hover > svg * { stroke: #fff; }
.section-product > .grid > .gallery > .collapse > .collapsed > .icon { width: 80px; height: 80px; flex-shrink: 0; background-color: #6b27ff; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }

.section-product > .grid > .gallery > .tags { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.section-product > .grid > .gallery > .tags > .tag { padding: 10px 12px; border: 1px solid #6b27ff; border-radius: 9999px; color: #6b27ff; }


.section-product > .grid > .seller { border-radius: 40px; background-color: #f5f5f5; padding: 22px 40px; display: flex; flex-direction: column; gap: 16px; height: fit-content; }
.section-product > .grid > .seller > .top { display: flex; justify-content: space-between; align-items: flex-end; }
.section-product > .grid > .seller > .top > .title > a { text-decoration: none; color: inherit; font-weight: 600; }
.section-product > .grid > .seller > .break { height: 1px; background-color: #49494933; }


.section-product > .grid > .middle > h1 { font-weight: 900; }
.section-product > .grid > .middle > .details { margin-top: 10px; display: flex; gap: 24px; align-items: center; }
.section-product > .grid > .middle > .details > .dot { width: 6px; height: 6px; flex-shrink: 0; background-color: #494949; border-radius: 9999px; }
.section-product > .grid > .middle > .details > .detail > span { font-weight: 700; }
.section-product > .grid > .middle > .calories { margin-top: 24px; color: #494949cc; }
.section-product > .grid > .middle > .calories > .options { margin-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.section-product > .grid > .middle > .calories > .options > label > .bubble { display: flex; font-weight: 600; color: #494949; padding: 6px 16px; border: 1px solid #6b27ff; background-color: #efe7ff; border-radius: 9999px; transition: background-color 0.4s, color 0.4s; cursor: pointer; margin-top: -20px; font-size: 16px; }
.section-product > .grid > .middle > .calories > .options > label > input:checked + .bubble { background-color: #6b27ff; color: #fff; }

.section-product > .grid > .middle > .calories > .options > label:hover > .bubble { background-color: #6b27ff; color: #fff; }

.section-product > .grid > .middle > .calories > .options > label > input:focus + .bubble { background-color: #6b27ff; color: #fff; }


.section-product > .grid > .middle > .price { font-weight: 600; margin-top: 30px; display: flex; align-items: center; gap: 24px; }
.section-product > .grid > .middle > .price > .total { color: #6b27ff; padding-left: 25px; }
.section-product > .grid > .middle > .price > .lowest { display: flex; align-items: center; gap: 8px; }
.section-product > .grid > .middle > .price > .lowest > span { text-decoration: line-through; }
.section-product > .grid > .middle > .buttons-wrapper { margin-top: 20px; }


.section-add-to-cart-sticky { position: sticky; bottom: 0; width: 100%; background-color: #fff; box-shadow: 10px -4px 9px #0000000d; z-index: 9999; }
.section-add-to-cart-sticky > .wrapper { padding: 15px 10px 0px 10px; display: flex; justify-content: space-between; align-items: center; color: #494949; }
.section-add-to-cart-sticky > .wrapper > .left > .top { display: flex; align-items: center; gap: 24px; font-weight: 900; }
.section-add-to-cart-sticky > .wrapper > .left > .top > .icon { width: 48px; height: 48px; background-color: #6b27ff; border-radius: 9999px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.section-add-to-cart-sticky > .wrapper > .left > .bottom { margin-top: 24px; display: flex; align-items: flex-end; gap: 16px; }
.section-add-to-cart-sticky > .wrapper > .left > .bottom > a { text-decoration: none; padding: 10px 24px; border-bottom: 2px solid transparent; color: #494949; }
.section-add-to-cart-sticky > .wrapper > .left > .bottom > a.active { font-weight: 900; border-color: #6b27ff; }
.section-add-to-cart-sticky > .wrapper > .right { display: flex; align-items: center; gap: 24px; font-weight: 600; }

.section-add-to-cart-sticky > .wrapper > .right > .left { display: flex; align-items: center; gap: 24px; font-weight: 600; }
.section-add-to-cart-sticky > .wrapper > .right > .left > .lowest { display: flex; align-items: center; gap: 8px; }
.section-add-to-cart-sticky > .wrapper > .right > .left > .lowest > span { text-decoration: line-through; }
.section-add-to-cart-sticky > .wrapper > .right > .left > .total { color: #6b27ff; }






.section-description { position: relative; padding-top: 80px; margin-top: -20px; color: #494949; }
.section-description > .wrapper > h2 { font-weight: 900; }

.section-description > .wrapper > .info { margin-top: 12px; display: grid; grid-template-columns: 1fr 830px; gap: 80px; }
.section-description > .wrapper > .info > .column > .prop { display: flex; gap: 35px; align-items: center; height: 64px; }
.section-description > .wrapper > .info > .column > .prop > .name { display: flex; gap: 12px; align-items: center; }
.section-description > .wrapper > .info > .column > .prop > .name span { font-weight: 900; }

.section-description > .wrapper > .info > .column > .break { height: 1px; background-color: #49494933; }

.section-description > .wrapper > .info > .right > .prop > .options { display: flex; align-items: center; gap: 16px; }
.section-description > .wrapper > .info > .right > .prop > .options > label { flex-shrink: 0; }
.section-description > .wrapper > .info > .right > .prop > .options > label > .bubble { display: flex; font-weight: 600; color: #494949; padding: 6px 16px; border: 1px solid #6b27ff; background-color: #efe7ff; border-radius: 9999px; transition: background-color 0.4s, color 0.4s; cursor: pointer; margin-top: -24px; }
.section-description > .wrapper > .info > .right > .prop > .options > label > input:checked + .bubble { background-color: #6b27ff; color: #fff; }
.section-description > .wrapper > .info > .right > .prop > .options > label:hover > .bubble { background-color: #6b27ff; color: #fff; }

.section-description > .wrapper > .info > .right > .prop > .options > label > input:focus + .bubble { background-color: #6b27ff; color: #fff; }


.section-description > .wrapper > .text { margin-top: 40px; color: #000; }
.section-description > .wrapper > .bundle { margin-top: 40px; display: grid; align-items: center; grid-template-columns: 1fr 350px; gap: 100px; padding: 16px 64px 16px 50px; background-color: #f5f5f5; border-radius: 40px; }
.section-description > .wrapper > .bundle > .left > .slogan { margin-top: 10px; }
.section-description > .wrapper > .bundle > .left > .includes { margin-top: 24px; display: grid; grid-template-columns: 417fr 526fr; gap: 20px 80px; }
.section-description > .wrapper > .bundle > .left > .includes > .prop { display: flex; gap: 16px; }
.section-description > .wrapper > .bundle > .left > .includes > .prop > svg { flex-shrink: 0; translate: 0px -4px; }
.section-description > .wrapper > .bundle > .left > .includes > .text > span { font-weight: 600; color: #6b27ff; }

.section-description > .wrapper .single-slide > picture > img { border-radius: 31px; box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.3); }
.section-description > .wrapper .single-slide > .wrapper { padding: 0px 40px; }
.section-description > .wrapper .single-slide > .wrapper > .category { margin-top: 10px; }
.section-description > .wrapper .single-slide > .wrapper > .name { font-weight: 900; color: #000; }

.section-description > .wrapper > .global-section-slider { margin-top: 50px; }


.section-app { position: relative; margin-top: 70px; }
.section-app > .wrapper { border-radius: 40px;  background: linear-gradient(90deg, #401799 0%, #6b27ff 100%); }
.section-app > .wrapper > .inner { background-image: url("data:image/svg+xml,%3Csvg width='192' height='235' viewBox='0 0 192 235' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1715_22213)'%3E%3Ccircle opacity='0.1' cx='192.5' cy='117.5' r='192.5' fill='%23EFE7FF'/%3E%3Ccircle opacity='0.1' cx='192.5' cy='117.5' r='152.5' fill='%23EFE7FF'/%3E%3Ccircle opacity='0.1' cx='192.5' cy='117.5' r='112.5' fill='%23EFE7FF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1715_22213'%3E%3Crect width='192' height='235' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-position: center right; background-repeat: no-repeat; background-size: contain; display: grid; grid-template-columns: 388px 1fr; gap: 20px; padding: 0px 232px 0px 0px; }
.section-app > .wrapper > .inner > picture { margin-top: -34px; margin-bottom: -5px; }
.section-app > .wrapper > .inner > .right { color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.section-app > .wrapper > .inner > .right > .break { height: 1px; background-color: #ffffff33; }
.section-app > .wrapper > .inner > .right > .bottom { display: flex; justify-content: space-between; }
.section-app > .wrapper > .inner > .right > .bottom > h3 { display: flex; align-items: center; gap: 20px; }
.section-app > .wrapper > .inner > .right > .bottom > h3 > svg { flex-shrink: 0; }
.section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box { display: flex; gap: 25px; }
.section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box svg { width: 168px; }
.section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box a svg path { transition: fill 0.3s; }
.section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box a:hover svg path { fill: #fff; }
.section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box a:hover svg path[fill="white"] { fill: #000; }

.section-opinions { position: relative; padding-top: 100px; margin-top: 0px; }
.section-opinions > .wrapper { display: flex; flex-direction: column; gap: 40px; }
.section-opinions > .wrapper > h2 { color: #494949; }
.section-opinions > .wrapper > .top { background-color: #f5f5f5; border-radius: 40px; padding: 40px 0px 40px 50px; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15); display: flex; gap: 10px; align-items: center; position: relative; }
.section-opinions > .wrapper > .top > .icon { width: 189px; height: 189px; flex-shrink: 0; border-radius: 99999px; background-color: #fff; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; margin-right: 40px; }
.section-opinions > .wrapper > .top > .middle { flex-shrink: 0; }
.section-opinions > .wrapper > .top > .middle > h3 { font-weight: 400; }
.section-opinions > .wrapper > .top > .middle > .bottom { margin-top: 24px; display: flex; gap: 24px; align-items: stretch; padding-right: 254px; }
.section-opinions > .wrapper > .top > .middle > .bottom > .rating { display: flex; flex-shrink: 0; gap: 24px; padding: 16px 32px; background-color: #ffffff1a; border-radius: 999px; color: #494949; box-shadow: inset 0px 0px 10px 4px rgba(0, 0, 0, 0.05); }
.section-opinions > .wrapper > .top > .middle > .bottom > .rating > .stars { display: flex; gap: 12px; align-items: center; }
.section-opinions > .wrapper > .top > .middle > .bottom > .rating > .stars > svg { width: 40px; height: 40px; }
.section-opinions > .wrapper > .top > .middle > .bottom > .opinions { padding: 0px 32px; height: auto; display: flex; align-items: center; color: #494949; background-color: #efe7ff; border-radius: 999px; }
.section-opinions > .wrapper > .top > .middle > .bottom > .global-btn-white { padding: 17px 65px; }
.section-opinions > .wrapper > .top > .pfp { margin-top: -185px; background-color: #fff; border-radius: 99999px; z-index: 999; border: 1.8px solid #f5f5f5; margin-left: auto; flex-shrink: 1; width: 100%; height: auto; max-width: 395px; }
.section-opinions > .wrapper > .top > .pfp img { border-radius: 9999px; width: 100%; height: auto; }
.section-opinions > .wrapper > .top > .decor { position: absolute; right: 280px; top: -158px; }
.section-opinions > .wrapper > .top > .decor-2 { position: absolute; right: -307px; top: -129px; z-index: 999; }
.section-opinions > .wrapper > .list { display: flex; gap: 32px; flex-direction: column; }
.section-opinions > .wrapper > .list > .item { display: grid; grid-template-columns: 423px 1fr; gap: 40px; }
.section-opinions > .wrapper > .list > .item > .right { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.section-opinions > .wrapper > .list > .item > .right > .quote { padding-left: 40px; border-left: 1px solid #000; }
.section-opinions > .wrapper > .list > .item > .right > .response { margin-left: 40px; border-radius: 16px; background-color: #f5f5f5; padding: 14px 20px; color: #494949;}
.section-opinions > .wrapper > .list > .item > .right > .response > .title { color: #49494980;}
.section-opinions > .wrapper > .list > .item > .left { display: grid; }
.section-opinions > .wrapper > .list > .item > .left > * { grid-area: 1 / 1; }
.section-opinions > .wrapper > .list > .item > .left > .bubble { background-color: #f5f5f5; clip-path: path('M0 40C0 17.9086 17.9086 0 40 0H383C405.091 0 423 17.9086 423 40V114C423 136.091 405.091 154 383 154H251.035C235.552 154 223 141.448 223 125.965C223 110.482 210.448 97.9304 194.965 97.9304H40C17.9086 97.9304 0 80.0218 0 57.9304V40Z'); height: 154px; display: flex; flex-direction: column; align-items: flex-end; padding: 24px 24px 20px 32px; gap: 21px; }
.section-opinions > .wrapper > .list > .item > .left > .bubble > .top { width: 100%; display: flex; gap: 24px;  }
.section-opinions > .wrapper > .list > .item > .left > .bubble > .top > svg { flex-shrink: 0; }
.section-opinions > .wrapper > .list > .item > .left > .bubble > .top > .right > .date { margin-top: 2px; font-weight: 900; }
.section-opinions > .wrapper > .list > .item > .left > .stars { display: flex; height: 154px; align-items: flex-end; padding: 16px 39px; gap: 8px; }
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="4"] > svg:nth-child(5) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="3"] > svg:nth-child(5) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="2"] > svg:nth-child(5) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="1"] > svg:nth-child(5) > path { fill: #efe7ff; }
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="3"] > svg:nth-child(4) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="2"] > svg:nth-child(4) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="1"] > svg:nth-child(4) > path { fill: #efe7ff; }
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="2"] > svg:nth-child(3) > path,
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="1"] > svg:nth-child(3) > path { fill: #efe7ff; }
.section-opinions > .wrapper > .list > .item > .left > .stars[data-rating="1"] > svg:nth-child(2) > path { fill: #efe7ff; }
.section-opinions > .wrapper > .global-btn-white { align-self: center; }


.global-section-slider.alt-title .text-box { gap: 24px; }
.global-section-slider.alt-title .text-box > a { padding: 5px 17px; }


@media all and (max-width: 1600px) {
    .section-opinions > .wrapper > .top > .decor-2 { display: none; }

    .section-description > .wrapper > .info > .column > .prop { gap: 12px; }
    .section-description > .wrapper > .info > .right > .prop > .options { gap: 12px; }
    .section-description > .wrapper > .info { grid-template-columns: 1fr 740px; }
    /** @TODO: sekcja z globala */
    .global-section-slider { display: none; }
}

@media all and (max-width: 1500px) {

    .section-opinions > .wrapper > .top > .pfp { display: none; }
    .section-opinions > .wrapper > .top > .decor { right: 0px; }


    .section-product > .grid { grid-template-columns: 517fr 1046fr; }

    .section-product > .grid > .seller { flex-direction: row; align-items: center; padding: 10px 24px; grid-column: span 2; }
    .section-product > .grid > .seller > .top { flex-direction: row; gap: 16px; align-items: center; flex-shrink: 0; }
    .section-product > .grid > .seller > .top > a > svg { flex-shrink: 0; width: 17px; }
    .section-product > .grid > .seller > .top > .title { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
    .section-product > .grid > .seller > .break { height: 26px; width: 1px; background-color: #49494933;}

    .section-description > .wrapper > .bundle { gap: 50px; }
    .section-description > .wrapper > .bundle > .left > .includes { grid-template-columns: 356px 1fr; gap: 20px 40px; }

    .section-app > .wrapper > .inner { padding-right: 100px; }

}

@media all and (max-width: 1400px) {
    .section-app > .wrapper > .inner { padding: 20px 100px 0px 0px; }
    .section-app > .wrapper > .inner > .right > .bottom { flex-direction: column; gap: 10px; }
    .section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box svg { max-width: 140px; }
    .section-app > .wrapper > .inner { align-items: end; }


}


@media all and (max-width: 1300px) {

    .section-opinions > .wrapper > .top { padding: 24px; }

    .section-description > .wrapper > .bundle > .left > .includes { grid-template-columns: 356px 312px; }
    .section-description > .wrapper > .bundle { grid-template-columns: 708px 1fr; }
    .section-description > .wrapper > .bundle > picture > img { width: 100%; height: auto; }
    .section-description > .wrapper > .global-section-slider { margin-top: 30px; }
}

@media all and (max-width: 1200px) {
    .section-opinions { padding-top: 64px;  }
    .section-opinions > .wrapper > .top > .decor img { width: 250px; height: auto; }
    .section-opinions > .wrapper > .top > .decor { top: -90px; right: 0px; }
    .section-opinions > .wrapper > .top > .middle { flex-shrink: 1; }
    .section-opinions > .wrapper > .top > .middle > .bottom { flex-wrap: wrap; }
    .section-opinions > .wrapper > .top > .middle > .bottom > .rating > .stars > svg { width: 30px; height: 30px; }


    .section-description > .wrapper > .info { grid-template-columns: 1fr; gap: 0px; }
    .section-description > .wrapper > .info > .left { border-bottom: 1px solid #49494933; }


    .section-description > .wrapper > .bundle { grid-template-columns: 1fr; padding: 20px 30px; }
    .section-description > .wrapper > .bundle > .left > .includes { grid-template-columns: 1fr 1fr; }
    .section-description > .wrapper > .bundle > picture { display: none; }
    .section-description > .wrapper > .bundle > .left > .includes > .prop { gap: 10px; }
    .section-description > .wrapper > .bundle > .left > .includes > .prop > svg { width: 20px; }

    .section-add-to-cart-sticky > .wrapper > .right > .left { flex-direction: column; align-items: flex-end; gap: 0px; }

}

@media all and (max-width: 1100px) {
    .section-opinions > .wrapper > .top > .decor { display: none; }
    .section-opinions > .wrapper > .top > .middle > .bottom { padding-right: 0px; }
    .section-opinions > .wrapper > .top > .middle > .bottom > .opinions { padding: 20px 30px; }

    .section-product > .grid { grid-template-columns: 1fr 1fr; }
    .section-product > .grid > .gallery > .collapse > picture > img { width: 100%; height: auto; }

    .section-app { margin-top: 40px; }
}

@media all and (max-width: 1000px) {
    .section-product > .grid > .seller { grid-column: span 2; }

    .section-add-to-cart-sticky > .wrapper > .left > .top > .icon { display: none; }

    .section-product > .grid > .seller > .top { flex-direction: row-reverse;  }
    .section-product > .grid > .seller > .top > .title { display: block; }
}

@media all and (max-width: 900px) {
    .section-opinions > .wrapper > .list { align-items: center; }
    .section-opinions > .wrapper > .list > .item { grid-template-columns: 1fr; width: 423px; gap: 16px; }
    .section-opinions > .wrapper > .list > .item > .right > .quote { padding: 16px; border: none; }
    .section-opinions > .wrapper > .list > .item > .right > .response { margin: 0px; }

    .section-product > .grid { gap: 20px; }
    .section-product > .grid > .middle > .details { gap: 10px; }
    .section-product > .grid > .middle > .price { flex-direction: column; align-items: flex-start; gap: 0px; }
    .section-product > .grid > .middle > .price > .total { padding: 0px; }

    .section-product > .grid > .gallery > .collapse > .collapsed { padding: 24px; }

    .section-product > .grid > .gallery > .collapse > .collapsed > .icon { width: 60px; height: 60px; }
    .section-product > .grid > .gallery > .collapse > .collapsed > .icon > svg { width: 40px; }
    .section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav { width: 30px; height: 30px; }
    .section-product > .grid > .gallery > .collapse > .collapsed > .top > .fav > svg { width: 20px; height: 20px; }
    .section-product > .grid > .gallery > .collapse > .collapsed > .top > .badge { padding: 8px 16px; }

    .section-app > .wrapper > .inner { grid-template-columns: 1.8fr 2fr; padding: 20px 60px 0px 0px; }
    .section-app > .wrapper > .inner > picture > img { width: 100%; height: auto; }

    .section-add-to-cart-sticky > .wrapper { padding: 10px; flex-direction: column; gap: 10px; }

    .section-add-to-cart-sticky > .wrapper { gap: 4px; }
    .section-add-to-cart-sticky > .wrapper > .left > .bottom { display: none; }
    .section-add-to-cart-sticky > .wrapper > .right { flex-direction: column; gap: 10px; }
    .section-add-to-cart-sticky > .wrapper > .right > .left { flex-direction: row; gap: 10px; align-items: center; }

    .section-description > .wrapper > .global-section-slider { margin-top: 20px; }
}

@media all and (max-width: 767px) {
    .section-opinions { padding-top: 40px;  }
    .section-opinions > .wrapper > .top { flex-direction: column; }
    .section-opinions > .wrapper > .top > .icon { margin-right: 0px; }
    .section-opinions > .wrapper > .top > .middle > h3 { text-align: center; }
    .section-opinions > .wrapper > .top > .middle > .bottom { justify-content: center; }

    .section-product > .grid { grid-template-columns: 1fr; }
    .section-product > .grid > .seller { grid-column: 1; }
    .section-product > .grid > .middle > .price { flex-direction: row; align-items: center; gap: 24px; }
    .section-product > .grid > .middle > .buttons-wrapper .btn-content { width: 100%; }

    
    .section-description > .wrapper > .bundle > .left > .slogan { margin-top: 10px; }
    .section-description > .wrapper > .bundle > .left > .includes { grid-template-columns: 1fr; gap: 10px; }

    .section-description > .wrapper > .info { margin-top: 0px; }

    .section-description > .wrapper > .info > .right > .prop > .options { flex-wrap: wrap; }
    .section-description > .wrapper > .info > .column > .prop { height: fit-content; padding: 20px 0px; }

    .section-description > .wrapper > .global-section-slider { margin-top: 10px; }

    .section-app > .wrapper > .inner > picture { display: none; }
    .section-app > .wrapper > .inner { grid-template-columns: 1fr; padding: 40px; }

    .section-add-to-cart-sticky > .wrapper > .left > .top { font-size: 16px !important; }
    .section-add-to-cart-sticky > .wrapper > .right > .left > .total { font-size: 16px !important;}

}

@media all and (max-width: 680px) {

}

@media all and (max-width: 576px) {
    .section-opinions > .wrapper > .list { gap: 16px; }
    .section-opinions > .wrapper > .list > .item { width: 100%; gap: 8px; }
    .section-opinions > .wrapper > .list > .item > .left > .bubble { clip-path: none; border-radius: 20px; height: fit-content; gap: 0px; }
    .section-opinions > .wrapper > .list > .item > .left > .stars { height: 130px; }


    .section-product > .grid > .seller { flex-direction: column; }
    .section-product > .grid > .seller > .top { flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
    .section-product > .grid > .seller > .break { height: 1px; width: 100%; }

    .section-app > .wrapper > .inner {  padding: 30px; }
    
}

@media all and (max-width: 450px) {
    .section-opinions > .wrapper > .top { padding: 16px; }
    .section-opinions > .wrapper > .top > .middle > .bottom > .rating { padding: 8px 16px; gap: 10px; }
    .section-opinions > .wrapper > .top > .middle > .bottom > .rating > .stars { gap: 8px; }
    .section-opinions > .wrapper > .top > .middle > .bottom > .rating > .stars > svg { width: 24px; height: 24px; }

    .section-product > .grid > .gallery > .tags > .tag { padding: 6px 24px; }
    .section-product > .grid > .middle > .price { flex-direction: column; align-items: flex-start; gap: 0px; }

    /* .section-description > .wrapper > .info > .column > .prop > .name { flex-direction: column; align-items: flex-start; gap: 0px; } */
    .section-description > .wrapper > .info > .column > .prop:not(.wide) { flex-direction: column; align-items: flex-start; gap: 10px; }

    .section-app > .wrapper > .inner {  padding: 20px; }
    .section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box { gap: 10px; }
    .section-app > .wrapper > .inner > .right > .bottom > .links-wrapper > .buttons-box a svg { width: 130px; }

    .popup > .wrapper { max-height: 90vh; overflow-y: scroll; }
    .popup > .wrapper::-webkit-scrollbar-track { margin: 30px 0px; }
    .popup > .wrapper > * { flex-grow: 1; flex-shrink: 0; flex-basis: auto; }
}

@media all and (max-width: 400px) {
    .section-description > .wrapper > .info > .column > .prop > .name { flex-direction: column; align-items: flex-start; gap: 0px; }
}