/* ============================================================
   CURVA — RESPONSIVE: COMMON
   Shared across every page: navbar, top bar, desktop footer, the
   mobile-only accordion footer (curva-mobile-footer and friends),
   toast notification, and the shared product-card grid (used by
   Home's Best Sellers and the Shop grid, and reused verbatim inside
   Product's "You May Also Like" section).
   Load this file on EVERY page, before the page's own responsive
   module.
   ============================================================ */

/* Base/default state: hidden on every page until the media query
   below overrides it for small phones. This MUST stay above every
   @media block in this file — a plain rule with no media condition
   beats an earlier conditional rule of equal specificity if it comes
   later in the file, which is exactly the bug this fixes. Moving it
   here means the phone-only override further down in this file can
   actually win, instead of always losing to this one. */
   .curva-mobile-footer{
    display: none;
}

@media (max-width:991.98px){

    .top-bar{
        font-size: 12px;
        padding: 8px 12px;
        line-height: 1.5;
}

    .logo{
        font-size: 28px;
}

    .navbar .container{
        flex-wrap: wrap;
}

    .navbar-collapse{
        background: #fff;
        margin-top: 15px;
        padding: 20px 0 10px;
        border-top: 1px solid #f0f0f0;
}

    .navbar-nav{
        text-align: center;
}

    .nav-item{
        margin: 8px 0;
}

    .nav-link::after{
        left: 50%;
        transform: translateX(-50%);
}

    .icons{
        justify-content: center;
        margin-top: 18px;
        gap: 24px;
}

    .products{
        padding: 60px 0;
}

    .section-title{
        font-size: 32px;
}

    .product-info h4{
        font-size: 20px;
}

    .new-price{
        font-size: 32px;
}

    .footer{
        padding: 60px 0 40px;
        text-align: center;
}

    .footer .col-lg-4,
    .footer .col-lg-2{
        margin-bottom: 35px;
}

    .footer-logo{
        margin-left: auto;
        margin-right: auto;
}

    .footer-line{
        margin-left: auto;
        margin-right: auto;
}

    .social-icons{
        justify-content: center;
}

    .cod-box{
        text-align: left;
}

    .toast-notification{
        width: 88vw;
        max-width: 340px;
        top: 16px;
        left: -100vw;
}

    .toast-notification.show{
        left: 6vw;
}

    .old-price{
        font-size: 20px;
}

}

@media (max-width:767.98px){

    .logo{
        font-size: 24px;
}

    .icons{
        gap: 20px;
}

    .icons i{
        font-size: 18px;
}

    .section-title{
        font-size: 30px !important;
        line-height: 1.15 !important;
}

    .products{
        padding: 45px 0;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 30px !important;
        padding-bottom: 45px !important;
        overflow: hidden !important;
}

    .footer{
        padding: 50px 0 30px;
}

    .footer h4{
        font-size: 20px;
}

    /* Bootstrap's col-md-4/col-lg-4/col-lg-2 on the footer columns have
       no defined width below the md breakpoint (768px) — so from
       576-767px they were falling back to flex's default content-based
       sizing instead of stacking, producing an odd partial-width
       layout. Forcing full width here fixes that gap. Harmless below
       575.98px too, since .footer .row is already hidden there in
       favor of .curva-mobile-footer. */
    .footer .row > [class*="col-"]{
        flex:0 0 100%;
        max-width:100%;
}

    .cod-box{
        flex-direction: column;
        text-align: center;
}

    .new-price{
        font-size: 28px;
}

    .old-price{
        font-size: 17px;
}

    html,
    body{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
}

    .products > .container{
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
}

    .products .d-flex{
        width: 100% !important;
        margin-bottom: 25px !important;
}

    .view-all{
        font-size: 13px !important;
        white-space: nowrap;
}

}

@media (max-width:575.98px){

    .top-bar{
        font-size: 11px;
        padding: 8px;
}

    .toast-notification{
        width: 90vw;
        left: -100vw;
        padding: 14px;
        gap: 12px;
}

    .toast-notification.show{
        left: 5vw;
}

    .toast-content h6{
        font-size: 16px;
}

    .toast-content p{
        font-size: 13px;
}

    .social-icons a{
        width: 46px;
        height: 46px;
        font-size: 17px;
}

    .footer{
        padding: 40px 0 30px;
}

    .footer .row{
        display: none;
}

    .footer-mobile{
        display: block;
}

    .footer-accordion{
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 16px 0;
}

    .footer-accordion summary{
        display: flex;
        align-items: center;
        gap: 14px;
        list-style: none;
        cursor: pointer;
        font-size: 19px;
        font-weight: 700;
        color: #fff;
}

    .footer-accordion summary::-webkit-details-marker{
        display: none;
}

    .accordion-dash{
        width: 22px;
        height: 3px;
        background: #d90429;
        border-radius: 2px;
        flex-shrink: 0;
}

    .accordion-chevron{
        margin-left: auto;
        font-size: 14px;
        color: #888;
        transition: transform .25s ease;
}

    .footer-accordion[open] .accordion-chevron{
        transform: rotate(180deg);
}

    .footer-mobile-links{
        list-style: none;
        padding: 14px 0 4px 36px;
        margin: 0;
}

    .footer-mobile-links li{
        margin-bottom: 14px;
}

    .footer-mobile-links a{
        color: #cfcfcf;
        text-decoration: none;
        font-size: 16px;
        transition: .25s;
}

    .footer-mobile-links a:hover{
        color: #fff;
}

    .cod-box-mobile{
        margin-top: 26px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        padding: 32px 22px;
        text-align: center;
}

    .cod-icon-mobile{
        width: 64px;
        height: 64px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: rgba(217,4,41,.15);
        color: #d90429;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
}

    .cod-box-mobile h5{
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
}

    .cod-box-mobile p{
        color: #bbb;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
}

    .footer-trust-badges{
        display: flex;
        justify-content: space-between;
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.08);
}

    .trust-badge{
        position: relative;
        flex: 1;
        text-align: center;
        color: #ccc;
        font-size: 12px;
        line-height: 1.4;
        padding: 0 8px;
}

    .trust-badge:not(:last-child)::after{
        content: "";
        position: absolute;
        right: 0;
        top: 2px;
        height: 32px;
        width: 1px;
        background: rgba(255,255,255,.15);
}

    .trust-badge i{
        display: block;
        font-size: 18px;
        margin-bottom: 8px;
        color: #fff;
}

    .footer-mobile-social{
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.08);
}

    .footer-mobile-social a{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 17px;
        transition: .3s;
}

    .footer-mobile-social a:hover{
        background: #d90429;
}

    .footer-mobile-logo{
        display: block;
        width: 90px;
        margin: 28px auto 14px;
}

    .footer-copyright{
        text-align: center;
        color: #999;
        font-size: 12px;
        margin: 0;
}

    .new-price{
        font-size: 24px;
}

    .curva-mobile-footer{
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 16px 24px;
        background: #0b0b0b;
        color: #fff;
        font-family: "Poppins", sans-serif;
}

    .curva-footer-accordion{
        width: 100%;
}

    .curva-footer-accordion details{
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.10);
}

    .curva-footer-accordion summary{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 54px;
        padding: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        user-select: none;
}

    .curva-footer-accordion summary::-webkit-details-marker{
        display: none;
}

    .curva-footer-accordion summary i{
        color: #777;
        font-size: 11px;
        transition: transform .25s ease;
}

    .curva-footer-accordion details[open] summary i{
        transform: rotate(180deg);
        color: #fff;
}

    .curva-footer-links{
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 2px 0 14px;
}

    .curva-footer-links a{
        display: block;
        padding: 7px 0;
        color: #999;
        font-size: 13px;
        text-decoration: none;
        transition: .2s ease;
}

    .curva-footer-links a:hover{
        color: #fff;
}

    .curva-cod-card{
        width: 100%;
        box-sizing: border-box;
        margin-top: 22px;
        padding: 22px 16px;
        text-align: center;
        background: #151515;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
}

    .curva-cod-icon{
        width: 48px;
        height: 48px;
        margin: 0 auto 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(217,4,41,.12);
        color: #d90429;
        font-size: 20px;
}

    .curva-cod-card h3{
        margin: 0 0 6px;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
}

    .curva-cod-card p{
        max-width: 290px;
        margin: 0 auto 13px;
        color: #999;
        font-size: 12px;
        line-height: 1.6;
}

    .curva-cod-status{
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 10px;
        border-radius: 50px;
        background: rgba(255,255,255,.04);
        color: #bbb;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .5px;
}

    .curva-cod-status span{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #20c970;
        box-shadow: 0 0 7px rgba(32,201,112,.5);
}

    .curva-trust{
        display: flex;
        align-items: stretch;
        width: 100%;
        margin-top: 22px;
        padding: 17px 0;
        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);
}

    .curva-trust-item{
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
}

    .curva-trust-item i{
        margin-bottom: 6px;
        color: #fff;
        font-size: 15px;
}

    .curva-trust-item strong{
        color: #fff;
        font-size: 10px;
        font-weight: 600;
}

    .curva-trust-item small{
        margin-top: 2px;
        color: #777;
        font-size: 9px;
}

    .curva-trust-divider{
        width: 1px;
        height: 35px;
        align-self: center;
        background: rgba(255,255,255,.12);
}

    .curva-social{
        padding-top: 20px;
        text-align: center;
}

    .curva-social p{
        margin: 0 0 12px;
        color: #666;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 2px;
}

    .curva-social-icons{
        display: flex;
        justify-content: center;
        gap: 10px;
}

    .curva-social-icons a{
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #151515;
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        transition: .25s ease;
}

    .curva-social-icons a:hover{
        background: #d90429;
        border-color: #d90429;
        transform: translateY(-3px);
}

    .curva-social-icons a i{
        color: #fff;
}

    .curva-footer-brand{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
}

    .curva-footer-brand img{
        display: block;
        width: 64px;
        height: auto;
        object-fit: contain;
        margin-bottom: 7px;
}

    .curva-footer-brand span{
        color: #555;
        font-size: 8px;
        font-weight: 600;
        letter-spacing: 2px;
}

    .curva-footer-bottom{
        margin-top: 18px;
        text-align: center;
}

    .curva-footer-line{
        width: 100%;
        height: 1px;
        margin-bottom: 14px;
        background: rgba(255,255,255,.07);
}

    .curva-footer-bottom p{
        margin: 0 0 4px;
        color: #666;
        font-size: 9px;
}

    .curva-footer-bottom small{
        color: #444;
        font-size: 8px;
}

    .old-price{
        font-size: 16px;
}

}

@media (max-width:1199.98px){

    .new-price{
        font-size: 36px;
}

}

@media (max-width:380px){

    .curva-mobile-footer{
        padding-left: 13px;
        padding-right: 13px;
}

    .curva-cod-card{
        padding: 20px 13px;
}

    .curva-trust-item strong{
        font-size: 9px;
}

    .curva-trust-item small{
        font-size: 8px;
}

    .curva-social-icons a{
        width: 36px;
        height: 36px;
}

    .curva-footer-brand img{
        width: 58px;
}

}

@media (min-width:768px) and (max-width:991.98px){

    .new-price{
        font-size: 32px;
}

    .old-price{
        font-size: 20px;
}

    .products{
        padding-top: 45px !important;
        padding-bottom: 60px !important;
}

    .products > .container{
        padding-left: 25px !important;
        padding-right: 25px !important;
}

    .section-title{
        font-size: 36px !important;
}

    .view-all{
        font-size: 15px;
}

}

@media (max-width:400px){

    .new-price{
        font-size: 22px;
}

}

@media (max-width:425px){

    .products{
        padding-top: 25px !important;
        padding-bottom: 40px !important;
}

    .products > .container{
        padding-left: 8px !important;
        padding-right: 8px !important;
}

    .products .d-flex{
        margin-bottom: 20px !important;
}

    .section-title{
        font-size: 25px !important;
}

    .view-all{
        font-size: 12px !important;
}

}

@media (max-width:360px){

    .products > .container{
        padding-left: 6px !important;
        padding-right: 6px !important;
}

    .section-title{
        font-size: 23px !important;
}

    .view-all{
        font-size: 11px !important;
}

}