/** Shopify CDN: Minification failed

Line 16:20 Expected ":"
Line 239:67 Unexpected "{"

**/
/* ========================================
   PROGRESS BAR COMPONENT - CORE STYLES
======================================== */

/* Main container with background and spacing */
.progress-bar-section {
    background: #328c4f1f;
    width: 100%;
    overflow: hidden;
    padding: 12px;Xx
    height: 100%;
    margin-bottom: 20px;
    min-height: 126px;
    margin-top: 24px;
}

/* ========================================
   PROGRESS BAR TEXT CONTENT
======================================== */

/* Text container above progress bar */
.progress-bar-section .progress-bar-text {
    margin-bottom: 0px;
}
 .perparent-prod.product {
    margin-top: 0;
}
/* Main text styling */
.progress-bar-section .progress-bar-text p {
    font-size: 16px;
    color: #231f20;
    font-weight: 500;
    text-align: center;
}

/* Highlighted text in progress bar */
.progress-bar-section .progress-bar-text strong {
    font-weight: 700;
    color: #328C4F;
}

/* ========================================
   PROGRESS BAR TRACK & FILL ANIMATION
======================================== */

/* Progress bar background track */
.progress-bar-section .progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 20px;
    position: relative;
    top: 16px;
    transition: .5s all;
    background-color: #d2d9cb;
}

/* Animated progress fill bar */
.progress-bar-section .fill-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 0%; 
    background-color: #328c4f;
    border-radius: 10px;
    z-index: 0;
    transition: width 0.5s ease-in-out; 
}

/* ========================================
   PROGRESS TIER LAYOUT SYSTEM
======================================== */

/* Wrapper for tier milestone positioning */
.progress-bar-section .progressbar-wrapper {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-20%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Individual tier column base styles */
.progress-bar-section .progressbar-cols {
    width: 33.33%;
    text-align: center;
    margin: 0 auto;
    flex: 0 0 33.33%;
}

/* ========================================
   TIER MILESTONE ICONS & CONTENT
======================================== */

/* Icon container wrapper */
.progress-bar-section .progress-icon-wrapper {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

/* Circular tier milestone icons */
.progress-bar-section .progressbar-cols .progress-icon {
    border-radius: 50%;
    border: 1px solid #231F20;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E6EEDF;
    padding: 1px;
}

/* Tier heading text */
.progress-bar-section .progressbar-cols .heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    color: #231F20;
    line-height: 24px;
    margin: 0px 0 0 0;
}

/* Tier description text */
.progress-bar-section .progressbar-cols .sub-heading {
    font-size: 14px;
    line-height: 20px;
    color: #231f20;
    font-weight: 400;
    letter-spacing: 0px;
}

/* ========================================
   DYNAMIC TIER LAYOUT VARIATIONS
======================================== */

/* Single tier milestone layout */
.progress-bar-section .progressbar-wrapper.one-tier .progressbar-cols {
    width: 100%;
    flex: 0 0 100%;
    text-align: end;
}

/* Single tier icon alignment */
.progress-bar-section .progressbar-wrapper.one-tier .progress-icon-wrapper {
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Two tier milestone layout */
.progress-bar-section .progressbar-wrapper.two-tier .progressbar-cols {
    width: 50%;
    flex: 0 0 50%;
}

/* Three tier milestone layout */
.progress-bar-section .progressbar-wrapper.three-tier .progressbar-cols {
    width: 33.33%;
    flex: 0 0 33.33%;
}

/* ========================================
   MILESTONE ACHIEVEMENT STATE
======================================== */

/* Achieved milestone highlighting */
.progress-bar-section .progressbar-cols.achieved .heading {
    color: #328c4f;
    font-weight: 700;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - TABLET
======================================== */

/* Tablet and smaller desktop adjustments */
@media (max-width: 768px) {
    .progress-bar-section {
        min-height: 125px;
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .progress-bar-section .progress-bar-text {
        margin-bottom: 4px;
    }
    
    .progress-bar-section .progress-bar-text p {
        font-size: 13px;
    }

    .progress-bar-section .progressbar-cols .progress-icon {
        height: 26px;
        width: 26px;
    }

    .progress-bar-section .progressbar-cols .heading {
        font-size: 12px;
        line-height: 18px;
    }

    .progress-bar-section .progressbar-cols .sub-heading {
        font-size: 12px;
        line-height: 18px;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS - MOBILE
======================================== */

/* Mobile and cart drawer specific styles */
@media (max-width: 575px) {
    .cart-drawer .progress-bar-section {
        padding: 8px;
        margin-bottom: 16px;
        min-height: 90px;
    }

    .cart-drawer .progress-bar-section .progress-bar-text strong {
        font-size: 13px;
        line-height: 14px;
    }

    .cart-drawer .progress-bar-section .progressbar-cols .heading, {
        font-size: 8px;
        line-height: 10px;
    }

    .cart-drawer .progress-bar-section .progressbar-cols .sub-heading {
        font-size: 8px;
        line-height: 10px;
    } 

    .cart-drawer .progress-bar-section .progressbar-cols .heading {
        margin: 0px 0 0 0;
    }

    .cart-drawer .progress-bar-section .progressbar-cols .progress-icon {
        height: 20px;
        width: 20px;
        padding: 2px;
    }
    
    .cart-drawer .progress-bar-section .progress-bar-text {
        margin-bottom: 0px;
    }

    .cart-drawer .progress-bar-section .progress-bar-text p {
        font-size: 10px;
        line-height: 12px;
    }

    .cart-drawer .progress-bar-section .progressbar-cols .heading, 
    .cart-drawer .progress-bar-section .progressbar-cols .sub-heading {
        font-size: 13px !important;
        line-height: 17px !important;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS - SMALL MOBILE
======================================== */

/* Very small mobile screens */
@media screen and (max-width: 360px) {
    .cart-drawer .progress-bar-section {
        min-height: 105px;
    }
    
    .cart-drawer .progress-bar-section .progressbar-cols .heading, 
    .cart-drawer .progress-bar-section .progressbar-cols .sub-heading {
        font-size: 12px !important;
    }
}

/* Progress bar thickness adjustment for small screens */
@media (max-width: 400px) {
    .progress-bar-section .fill-bar {
        height: 5px;
    }

    .progress-bar-section .progress-bar {
        height: 5px;
    }
}

@media screen and (max-width: 310px) {
.progress-bar-section .progressbar-cols .heading {
    font-size: 10px;
}
.progress-bar-section .progressbar-cols .sub-heading {
    font-size: 10px;
    line-height: 10px;
}

}


@media screen and (max-width: 367px) {
    .progress-bar-section .progress-bar-text p {
        font-size: 10px;
    }
}

/* iPhone SE and similar device adjustments */
@media screen and (max-width: 375px) {
    .cart-drawer .progress-bar-section .progressbar-cols .heading, 
    .cart-drawer .progress-bar-section .progressbar-cols .sub-heading {
        font-size: 10px;
    }
}

/* ========================================
   THIRD-PARTY WIDGET OVERRIDES
======================================== */

/* Hide floating WhatsApp widget */
div#zoko-8aec0844-b70f-11ec-b909-0242ac120002 {
    display: none;
}