/** Shopify CDN: Minification failed

Line 225:43 Expected identifier but found whitespace
Line 225:44 Unexpected "0"

**/
.pc_byob {
    .page-width {
        @media (max-width:991px){ 
            padding:0;
        }
    }
    .byob_wrapper {
        .products_wrapper {
            padding-right:27px;
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 17px;
             @media (min-width:992px) and (max-width:1200px){ 
                grid-template-columns: repeat(2, 1fr);
            }
            @media (max-width:991px){ 
                padding:0 25px 30px;
            }
            @media (max-width:767px){ 
                 grid-template-columns: repeat(2, 1fr);
                 padding:0 15px 30px;
                gap: 10px 12px;
            }
            .product_item {
                &.disabled {
                    filter: grayscale(.8);
                    opacity: .5;
                    border-radius: 20px;
                    pointer-events: none;
                    transform: scale(.97);
                }
                .product_thumb_wrapper {
                    border-radius: 24px;
                    border: 1px solid #F6F6F6;
                    background: #f6f6f6;
                    display: flex;
                    align-items: center;
                    padding: 50px 20px 80px;
                    
                    @media (max-width:576px){
                        border-radius: 16px;
                        padding: 20px 10px 60px;
                    }
                    .product_thumb_img {
                        height: auto;
                        max-height: 250px;
                        min-height: 250px;
                        border-radius: 20px;
                        margin: 0 auto;
                        @media (max-width:1500px){
                            max-height: 160px;
                            min-height: 160px;
                            width: 100%;
                        }
                        @media (max-width:576px){
                            max-height: 110px;
                            min-height: 110px;
                        }
                    }
                    modal-opener {
                        position: absolute;
                        bottom: 22px;
                        left: 50%;
                        transform: translateX(-50%);
                        @media (max-width:767px){
                            bottom: 10px;
                                button {
                                    padding: 6px 40px;
                                    min-height: auto;
                                }
                        }
                    }
                }
                .product_info {
                    padding:16px 0;
                    h3 {
                    color: #1D1D1D;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 19px; 
                    margin:0 0 13px;
                    }
                    .product_price {
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 120%;
                    }
                }
                &.byob_item_focus {
                    .product_thumb_wrapper {
                        &::after {
                            content:" ";
                            box-shadow: 0 0 9px #f26321;
                            width:100%;
                            top:0;
                            left:0;
                            height:100%;
                            animation: shadowAnim 2s ease 0s infinite;
                            border-radius: inherit;
                            position:absolute;
                        }
                    }
                 
                }
            }
        }
        .byob_detail {
            position: sticky;
            top: 40px;
            flex: 426px 0 0;

            @media (max-width:1360px){
                flex: 340px 0 0;
            }
            @media (max-width:991px){  
                flex: 100% 0 0;
                width: 100%;
                top:unset;
                bottom:0;
                z-index:2;
                background:#fff;
            }
            h2 {
                margin:0 0 20px;
                color: #191A26;
            }
            .mb_header {
                padding:20px;
                background: #F26322;
                color: #FFF;
                font-size: 20px;
                font-weight: 500;
                line-height: 19px;
                cursor:pointer;
                gap:3px;
                .mb_icon {
                    margin-right: 5px;
                }
            }
            .byob_block {
                padding:35px 20px 45px;
                border-radius: 24px;
                background: #F6F6F6;
                 @media (max-width:991px){  
                    display:none;
                  }
                  @media (max-width:576px){
                    padding:24px 15px 49px;
                  }
                .byob_header {
                    gap:10px;
                    margin:0 0 18px;
                    h3 {
                        color: #1D1D1D;
                        font-size: 18px;
                        line-height: 24px;
                    }
                    .byob_item_count {
                        color: #1D1D1D;
                        font-size: 15px;
                        line-height: 20px;
                    }
                }
                .byob_grid {
                    display:grid;
                    grid-template-columns: repeat(2, 1fr);
                    row-gap:15px;
                    column-gap:12px;
                    @media (max-width:576px){
                        grid-template-columns: repeat(4, 1fr);
                        column-gap:8px;
                    }
                    .byob_grid_item {
                        position:relative;
                        border-radius: 19px;
                        border: 1px dashed rgba(0, 0, 0, 0.43);
                        min-height:152px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                         @media (max-width:576px){
                            border-radius: 10px;
                            min-height: 88px;
                            padding: 8px 4px;
                        }
                            img {
                                border-radius: inherit;
                                width:100%;
                            }
                            .add_icon {
                                position:absolute;
                                inset:0;
                                width:20px;
                                height:20px;
                                margin:auto;
                                padding:2px;
                                svg {
                                    width:100%;
                                    height:auto;
                                }
                            }
                            .remove_icon {
                                opacity:0;
                                position: absolute;
                                top: 10px;
                                right: 10px;
                                background: #172F56;
                                padding: 5px;
                                border-radius: 20px;
                                width: 25px;
                                height: 25px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                transition:.3s all ease;
                                transform: rotate(45deg);
                                box-shadow: 0 0 6px #fff
                                &:hover {
                                    transform: rotate(45deg) scale(1.05);
                                }
                                @media (max-width:576px){
                                    width: 18px;
                                    height: 18px;
                                    top: 7px;
                                    right: 7px;
                                }
                            }
                            &.bundle_product {
                                border: 1px solid #172F56;
                                .remove_icon {
                                    opacity:1;
                                }
                            }
                    }
                }
                .byob_footer {
                    padding:33px 0 0;
                    h4 {
                        color: #1D1D1D;
                        font-size: 18px;
                        line-height: 26px;
                        margin: 0 0 12px;
                    }
                    .subscription_btns {
                        gap:17px;
                        .option {
                            border-radius: 33px;
                            border: 1px solid rgba(102, 112, 133, 0.40);
                            transition:.3s all ease;
                            &:has(input:checked){
                                border: 1px solid #667085;
                                background: #667085;
                                .option_inner {
                                    .radio  {
                                        svg {
                                            opacity:1;
                                        }
                                    }
                                    h5 {
                                        color:#fff;
                                    }
                                    .price {
                                        color:#fff;
                                         .original_price { 
                                            color:#fff;
                                         }
                                    }
                                }
                                &.sub_btn {
                                    ul {
                                        display:block;
                                    }
                                    select {
                                        display:block;
                                    }
                                }
                            }
                            .option_inner {
                                min-height:58px;
                                gap:18px;
                                padding:8px 23px;
                                position:relative;
                                overflow:hidden;
                                cursor:pointer;
                                input {
                                    position:absolute;
                                    top:-100vh;
                                    opacity:0;
                                    visibility:hidden;
                                }
                                .radio {
                                    width:26px;
                                    height:26px;
                                    border-radius:50px;
                                    background-color:#fff;
                                    border:1px solid rgba(23, 47, 86, 0.21);
                                    svg {
                                        opacity:0;
                                    }
                                }
                                h5 {
                                    flex-grow:1;
                                    margin: 3px 0 0;
                                    color: #191A26;
                                    font-size: 18px;
                                    line-height: 22px;
                                }
                                .price {
                                    color: #191A26;
                                    font-size: 16px;
                                    font-weight: 500;
                                    line-height: 20px;
                                    .original_price {
                                        color: #C9C9CC;
                                        font-size: 12px;
                                        font-weight: 500;
                                        line-height: 16px;
                                    }
                                }
                            }
                            ul {
                                display:none;
                                padding: 11px 20px 25px 36px;
                                list-style-type: none;
                                margin: 0;
                                li {
                                    font-size: 17px;
                                    line-height: 24px;
                                    color:#fff;
                                    display:flex;
                                    align-items:center;
                                    gap:9px;
                                    &:not(:last-child){
                                            margin: 0 0 4px;
                                    }
                                }
                            }
                            select {
                                color: #1D1D1D;
                                display:none;
                                margin: 0 auto 20px;
                                width: calc(100% - 38px);
                                padding: 12px;
                                font-size: 18px;
                                font-weight: 500;
                                border-radius: 6px;
                                border:none;
                                outline:none;
                            }
                        }
                    }
                    .byob_atc {
                        padding-top:33px;
                        .atc_btn {
                            width: 100%;
                            min-height: 58px;
                            letter-spacing: 0.36px;
                            font-weight: 500;
                            transition:.3s all ease;
                            overflow:hidden;
                            position:relative;
                            &.button_disable {
                                cursor: not-allowed;
                                opacity: .5;
                            }
                            &:has(> :not(.hidden)){
                                &::after {
                                    content:"...";
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    background: #feb593;
                                    letter-spacing: 5px;
                                }
                            }
                        }
                    }
                }
            }
          @media (max-width:991px){
            &.mb_detail_open {
                .byob_block {
                    display:block;
                }
            }
          }
        }
    }
}

.byob_modal {
    
    .shopify-block {
        &:has(quotify-button){
            display:none;
        }
    }
    .qty_button_wrapper {
        .product-form__submit {
            display:block !important;
        }
    }
    .data-sheets ,
    .product__sku ,
    .installment ,
    .complementary-products {
       display:none;
    }
   .product__view-details {
       display:none !important;
    }
}


   @keyframes shadowAnim {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
        }
        100% {
            opacity:0;
        }
    }