.roboto{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
         .gz-qty-chips-container {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                margin-top: 15px;
                max-width: 252px; /* Adjust this to match the width of your "588 / per unit" text */
                position: relative;
                z-index: 1; /* Ensures it stays below any floating score elements if needed */
            }
           
/* ── Right Panel – Product Info ─────────────────────── */
.product-title {
    color: white;
    font-size: 46px;
   
    font-weight: 700;
    line-height: 59.40px;
    word-wrap: break-word
}


/* ── Pricing + ZSS Card ─────────────────────────────── */
.pricing-zss-row {
    display: flex;
    gap: 0px;
    align-items: stretch;
}

/* start pricing */
/* .pricing-box {
    margin-right: -297px;
    background: rgb(128 118 118 / 0%);
    border: 1px solid #FFFDE4;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    flex: 1;
    min-width: 0;
}

.price-main {
    color: var(--cream);
    font-size: 42px;
   
    font-weight: 700;
    line-height: 58.80px;
    letter-spacing: 0.60px;
    word-wrap: break-word
}

.price-per {
    color: var(--text-muted);
    font-size: 16px;
   
    font-weight: 400;
    line-height: 27.20px;
    word-wrap: break-word
}
*/
.pack-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 100px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: white;
    border: 1.5px solid #3d7045;
     border-radius: 20px;
    color: #000;
    font-size: 0.80rem; 
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}
.pack-btn:hover,
.pack-btn.active {
    background: var(--green-mid);
    border-color: var(--green-light);
    color: #fff;
    box-shadow: 0 0 16px rgba(74, 140, 80, 0.35);
} 




/* end pricing */

/* ZSS Score */
.zss-box {
    background: var(--green-dark);
    border: 1px solid #7A9B34;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    width: 297px;
    flex-shrink: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* .zss-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(74, 140, 80, 0.25) 0%, transparent 60%);
    pointer-events: none;
} */

.zss-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--green-light);
    text-transform: uppercase;
}

.zss-score-big {
    font-family: 'Playfair Display', serif;
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--cream);
    line-height: 1;
    display: block;
}

.zssnew-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* Your existing style */
.zss-denom {
    color: #FFFDE4;
    font-size: 48px;
    font-family: Roboto;
    font-weight: 300;
    line-height: 67.20px;
    word-wrap: break-word;
}

/* Line under text */
.zss-line {
    width: 70px;
    /* adjust if needed */
    height: 3px;
    background: linear-gradient(to right, #FFFFFF, #FFFFFF33);
    margin-top: 5px;
    /* space between text & line */
    border-radius: 4px;
}


.zss-sub {
    color: #FFFDE4;
    font-size: 16px;
   
    font-weight: 400;
    line-height: 27.20px;
    word-wrap: break-word
}

/* ── CTA Buttons ────────────────────────────────────── */
.btn-add-cart {
    background: linear-gradient(135deg, var(--green-mid), var(--green-accent));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 28px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(45, 90, 53, 0.5);
    letter-spacing: 0.3px;
}

.btn-add-cart:hover {
    background: linear-gradient(135deg, #3a6e42, #5da564);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(45, 90, 53, 0.65);
}

.btn-add-cart:active {
    transform: translateY(0);
}

.btn-sustainability {
    background: transparent;
    border: 1.5px solid var(--green-light);
    border-radius: 12px;
    color: var(--green-light);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 13px 28px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.btn-sustainability:hover {
    background: rgba(123, 196, 127, 0.12);
    border-color: #a8daa9;
    color: #a8daa9;
    transform: translateY(-2px);
}

/* Perks row */
.perk-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-light);
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
}

.perk-text {
    font-size: 0.82rem;
    color: rgba(245, 240, 232, 0.7);
    font-weight: 500;
}

/* ── Responsive Tweaks ──────────────────────────────── */
@media (max-width: 991.98px) {
    .pricing-zss-row {
        flex-direction: column;
    }

        .zss-box {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
    }

    .zss-score-big {
        font-size: 2.8rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 60px 0 40px;
    }

    .product-image-card {
        padding: 1.5rem 1.25rem;
    }




    .btn-add-cart,
    .btn-sustainability {
        padding: 13px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .product-title {
        font-size: 1.65rem;
    }

}

/* ── Entry Animations ───────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-1 {
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-2 {
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.anim-3 {
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.anim-4 {
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

.anim-5 {
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
}

.anim-6 {
    justify-content: center;
    animation: fadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
}

/* Glow ring around ZSS score */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 16px rgba(74, 140, 80, 0.25), inset 0 0 8px rgba(74, 140, 80, 0.05);
    }

    50% {
        box-shadow: 0 0 32px rgba(74, 140, 80, 0.45), inset 0 0 16px rgba(74, 140, 80, 0.1);
    }
}

.zss-box {
    animation: pulse-glow 3.5s ease-in-out infinite;
}

/* Cart icon bounce */
.btn-add-cart:hover .cart-icon {
    animation: bounce-cart 0.45s ease;
}

@keyframes bounce-cart {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    70% {
        transform: translateY(2px);
    }
}

/* End */

.pricing-zss-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

@media (max-width: 768px) {
    .pricing-zss-row {
        grid-template-columns: 1fr;
    }
}

.pricing-box, .zss-box {
    background: rgb(28 26 26 / 31%);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.price-main {
    color: #FFFDE4;
    font-size: 42px;
   
    font-weight: 700;
    line-height: 58.80px;
    letter-spacing: 0.60px;
    word-wrap: break-word
}

.price-per {
    color: #FFFDE4;
    font-size: 16px;
   
    font-weight: 400;
    line-height: 27.20px;
    word-wrap: break-word
}

.gap-new {
    gap: 4rem !important;
}


.pack-btn:hover {
    background: #000000;
    color: white;
}
.pack-12 {
    flex: 0 0 100% !important; 
    width: 100%;
}
/* .pack-btn.active {
    margin-top: 7px;
    width: 214px;
    background: #ffffff;
    color: rgb(0, 0, 0);
} */

.zss-number {
    color: #FFFDE4;
    font-size: 128px;
     font-family: fangsong;
    font-weight: 900;
    line-height: 128px;
    word-wrap: break-word
}

.zss-label {
    color: #FFFDE4;
    font-size: 16px;
   
    font-weight: 700;
    text-transform: uppercase;
    line-height: 27.20px;
    letter-spacing: 2px;
    word-wrap: break-word
}

.zss-score-big {
    font-size: 2.5rem;
    font-weight: 700;
    color: #3d7045;
}

.zss-denom {
    color: #FFFDE4;
    font-size: 48px;
        font-family: fangsong;
    font-weight: 300;
    line-height: 67.20px;
    word-wrap: break-word
}

.zss-sub {
    color: #FFFDE4;
    font-size: 15px;
   
    font-weight: 400;
    line-height: 27.20px;
    word-wrap: break-word
}

/* .btn-add-cart, */
.btn-sustainability {
    font-family: 'Montserrat';
    width: 90%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-add-cart {
    padding: 5px;
    width: 98%;
    border-radius: 46px;
    background: #3d7045;
    color: white;
}

.btn-add-cart:hover {
    background: #2d5a35;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(61, 112, 69, 0.3);
}

/*  end */
.btn-add-cart1 {
    padding: 13px !important;
    width: 100% !important;
    border-radius: 46px !important;
    background: #3d7045 !important;
    color: white !important;
}

.btn-add-cart1:hover {
    background: #2d5a35;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(61, 112, 69, 0.3);
}
/*  end */



.btn-sustainability {
    padding: 13px;
    width: 100%;
    border-radius: 46px;
    background: #fffde4;
    color: #7A9B34;
    border: 2px solid #3d7045;
}

.btn-sustainability:hover {
    /* background: #f5f0e8;
    transform: translateY(-2px); */
    background: rgba(255, 255, 255, 0.95);
    color: #7A9B34;
}

.perk-dot {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    display: inline-block;
}

.perk-text {
    color: #f5f0e8;
    font-weight: 500;
}

.anim-1 {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.anim-2 {

    color: white;
    font-size: 46px;
    font-weight: 700;
    line-height: 59.40px;
    word-wrap: break-word
}

.anim-3 {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.anim-4 {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.anim-5 {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

.anim-6 {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* End */


@media (max-width: 768px) {
  .pricing-box,
.zss-box {
      padding: 0.5rem !important;
  margin-top: 5px;
  }
  .zss-label {
    font-size: 11px !important;
  }
  
    .zss-number {
        font-size: 90px !important;
    }
    .zss-sub {
        font-size: 17px !important;
    }
   
  
  .anim-2 {
    font-size: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
  }

.pricing-box{
  margin-right:unset;
  text-align: center;
  }
}

.gz-price {
    color: #fff !important;
}
.price-section small {
    color: #fff !important;
}

@media (max-width: 768px) {
    .gz-qty-chips-container {
        margin-left: auto;
        margin-right: auto;
        justify-content: center; /* items bhi center */
    }
    .zss-box {
        display: none;
    }

    .gz-score-badge {
        top: 29px !important;
        right: 7px !important;
    }
     .gz-product-card {
        position: relative;
    }

    .gz-score-badge {
        width: 24%;
        display: block !important;
        position: absolute;
        top: 0;
        right: 0;
        background: #000000;
        color: #ffffff;
        font-size: 10px;
        font-weight: 600;
        padding: 7px 1px;
        border-radius: 0 12px 0 12px;
        line-height: 1.2;
        text-align: center;
        box-shadow: -2px 2px 0 #000;
        z-index: 111111;
    }
}

.gz-score-badge {
    display: none; /* default hide */
}