/* ======================================================
   SPICENEST RESPONSIVE LAYOUT
====================================================== */

@media (max-width:1100px){
    .hero-content{grid-template-columns:1fr 1fr;gap:44px}
    .product-grid{gap:22px}
    .feature-grid{grid-template-columns:repeat(2,1fr)}
    .cart-table-head,.cart-item{grid-template-columns:minmax(200px,2fr) 120px 125px 82px}
}

@media (max-width:900px){
    html{scroll-padding-top:78px}
    .navbar .container{height:74px}
    .nav-links{display:none}
    .logo{font-size:1.75rem}
    .nav-btn{padding:10px 18px}

    .hero{padding:126px 0 88px}
    .hero-content{grid-template-columns:1fr;gap:42px}
    .hero-text{text-align:center}
    .hero-text>p{margin-inline:auto}
    .hero-buttons,.hero-features{justify-content:center}
    .hero-image{max-width:720px;margin-inline:auto}

    .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .review-grid{grid-template-columns:1fr}
    .review-card{max-width:720px;width:100%;margin-inline:auto}
    .footer-content{grid-template-columns:1.6fr 1fr 1fr;gap:30px}

    .cart-table-head{display:none}
    .cart-item{grid-template-columns:1fr auto;gap:12px}
    .cart-item-info{grid-column:1/2}
    .cart-controls{grid-column:2/3;grid-row:1/2}
    .cart-price{grid-column:1/2;text-align:left}
    .cart-remove{grid-column:2/3;justify-self:end}
}

@media (max-width:720px){
    .section-title{margin-bottom:44px}
    .products,.features,.reviews,.faq,.checkout{padding:82px 0}
    .cart-section{padding:64px 0}

    .bilingual-title-row{grid-template-columns:1fr;gap:5px;text-align:center}
    .bilingual-title-row h2,.urdu-section-title{text-align:center}
    .urdu-section-title{font-size:1.55rem}

    .product-grid{grid-template-columns:1fr}
    .product-card{max-width:520px;width:100%;margin-inline:auto}
    .product-content p{min-height:auto}
    .product-image{height:min(90vw,440px)}

    .cart-card,.checkout-card,.order-confirmation{padding:26px 20px;border-radius:22px}
    .cart-rewards{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .bilingual-payment-row{grid-template-columns:1fr auto;gap:6px}
    .bilingual-payment-row .urdu-payment-text{grid-column:1/3;text-align:left}
    .transfer-options{grid-template-columns:1fr}
    .confirmation-grid,.confirmation-actions,.payment-comparison-grid{grid-template-columns:1fr}
    .confirmation-reference,.confirmation-status{align-items:flex-start;flex-direction:column;gap:6px}

    .payment-modal-card{padding:28px 18px 20px}
    .payment-modal-header{padding-inline:10px}
    .recommended-label{position:static;display:inline-flex;margin-bottom:10px}

    .footer-content{grid-template-columns:1fr;text-align:center}
    .footer-content p{max-width:520px;margin-inline:auto}
}

@media (max-width:540px){
    .container{width:min(94%,var(--max-width))}
    .navbar .container{gap:12px}
    .logo{font-size:1.55rem}
    .nav-btn{padding:9px 14px;font-size:.88rem}

    .hero{padding:112px 0 68px}
    .hero h1{font-size:clamp(2.35rem,12vw,3.55rem)}
    .hero-text>p{font-size:1rem}
    .hero-buttons{display:grid;grid-template-columns:1fr;width:100%}
    .hero-buttons a{width:100%}
    .hero-features{display:grid;gap:8px}
    .hero-image::before{inset:12px -8px -12px 8px}

    .section-title h2{font-size:2rem}
    .cart-header{align-items:flex-start}
    .cart-header h2{font-size:1.65rem}
    .cart-item{padding:16px 0}
    .cart-item-info strong{font-size:.95rem}
    .cart-summary>div{font-size:.92rem}
    .grand-total{font-size:1.16rem!important}

    .faq-question{padding:18px}
    .faq-question-copy strong{font-size:.95rem}
    .faq-question-copy p{font-size:.82rem}
    .faq-answer>p,.faq-answer>.faq-urdu{padding-inline:18px}

    .payment-option{grid-template-columns:18px minmax(0,1fr);padding:14px}
    .bilingual-payment-row{grid-template-columns:1fr}
    .bilingual-payment-row .urdu-payment-text{grid-column:auto}
    .discount-badge{justify-self:start}
    .payment-brand-logos{flex-wrap:wrap}

    .confirmation-item{align-items:flex-start}
    .confirmation-item-total{font-size:.9rem}
    .confirmation-order-number{flex-wrap:wrap}

    .floating-order-btn{right:12px;bottom:82px;padding:12px 18px;font-size:.85rem}
    .floating-whatsapp-btn{right:12px;bottom:12px;padding:7px 11px 7px 7px}
    .whatsapp-chat-icon{width:34px;height:34px}
    .whatsapp-chat-text strong{font-size:.86rem}
    .toast{bottom:12px;border-radius:16px;width:calc(100% - 24px)}
}

/* v2.4 responsive additions */
@media (max-width:980px){
    .product-wheel-experience{grid-template-columns:1fr;gap:26px;text-align:center}
    .product-wheel-copy{max-width:650px;margin-inline:auto}
    .product-wheel-stage{width:min(100%,470px)}
    .edit-order-products{grid-template-columns:1fr}
}

@media (max-width:720px){
    .logo{width:88px;height:62px}
    .product-wheel-experience{padding:28px 20px;margin-bottom:48px}
    .product-wheel-stage{width:min(100%,410px)}
    .wheel-product-orb{width:87px;height:87px}
    .wheel-product-orb img{width:42px;height:52px}
    .order-edit-section{padding:78px 0}
    .edit-order-card{padding:26px 20px}
    .edit-order-editor-header{flex-direction:column}
    .edit-order-editor-header>p{max-width:none}
    .footer-logo-link{margin-inline:auto}
}

@media (max-width:520px){
    .product-wheel-experience{padding:24px 14px}
    .product-wheel-stage{width:min(100%,340px)}
    .wheel-product-orb{width:74px;height:74px;border-width:3px}
    .wheel-product-orb img{width:34px;height:43px}
    .wheel-product-orb span{font-size:.64rem}
    .product-wheel-pointer{top:6%;border-left-width:11px;border-right-width:11px;border-bottom-width:22px}
    .edit-order-panel{padding:18px 14px}
    .edit-order-product{grid-template-columns:50px minmax(0,1fr);gap:10px}
    .edit-order-product img{width:50px;height:62px}
    .edit-order-product-qty{grid-column:1/3;justify-content:flex-end}
    .edit-order-inline-actions{display:grid;grid-template-columns:1fr}
    .edit-order-inline-actions .primary-btn,.edit-order-inline-actions .secondary-btn{width:100%}
}


/* V2.5 account portal and icon-only WhatsApp */
@media(max-width:700px){
    .account-portal-close{right:12px;top:12px}
    .account-order-card-header{flex-direction:column;gap:10px}
    .account-order-actions,.account-edit-actions{flex-direction:column;align-items:stretch}
    .account-order-actions .compact-btn,.account-edit-actions button{width:100%!important}
    .floating-whatsapp-btn{width:56px!important;height:56px!important;right:12px!important;bottom:12px!important;padding:0!important}
    .floating-whatsapp-btn .whatsapp-logo{width:31px;height:31px}
}

@media (max-width: 1100px) {
    .section-rail {
        left: 10px;
    }
    .section-rail a {
        min-width: 78px;
        font-size: 0.78rem;
        padding: 9px 10px;
    }
}

@media (max-width: 860px) {
    .section-title-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .reward-choice-options {
        grid-template-columns: 1fr;
    }

    .video-modal-actions,
    .review-cta-actions {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .section-rail {
        top: auto;
        bottom: 14px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        flex-direction: row;
        width: calc(100% - 20px);
        justify-content: center;
        overflow-x: auto;
        padding: 8px;
        background: rgba(20, 20, 20, 0.16);
        border-radius: 999px;
        backdrop-filter: blur(8px);
    }

    .section-rail a {
        min-width: auto;
        white-space: nowrap;
    }

    .product-gallery-thumb img {
        height: 72px;
    }
}

@media (max-width: 860px) {
    .nav-actions .nav-btn {
        display: none;
    }
}

@media (max-width: 700px) {
    .section-rail {
        right: auto;
        transform: translateX(-50%) translateY(18px);
    }

    .section-rail.is-visible {
        transform: translateX(-50%) translateY(0);
    }

    .cart-drawer {
        width: 100%;
        max-width: none;
        padding: 22px 18px;
    }
}

/* v2.6.2 keeps the quick-navigation reel on the right on phones too. */
@media(max-width:700px){
    .section-rail{
        top:54%;
        right:6px;
        left:auto;
        bottom:auto;
        width:40px;
        max-width:calc(100vw - 12px);
        flex-direction:column;
        justify-content:flex-start;
        overflow:visible;
        padding:6px;
        border-radius:20px;
        transform:translateY(-50%) translateX(14px);
    }

    .section-rail.is-visible{
        transform:translateY(-50%) translateX(0);
    }

    .section-rail:hover,
    .section-rail:focus-within,
    .section-rail.is-expanded{
        width:150px;
    }

    .section-rail-link{
        height:32px;
    }

    .section-rail:hover .section-rail-link,
    .section-rail:focus-within .section-rail-link,
    .section-rail.is-expanded .section-rail-link{
        width:136px;
    }
}

@media (max-width: 900px) {
    .hero-trust-strip,
    .cart-payment-columns,
    .cart-drawer-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .trust-badge-card {
        padding: 16px;
        align-items: flex-start;
    }

    .image-lightbox-stage {
        grid-template-columns: 40px 1fr 40px;
        gap: 8px;
    }

    .image-lightbox-thumb img {
        height: 72px;
    }
}

/* ======================================================
   V2.6.3.1 RESPONSIVE POLISH
====================================================== */
@media (max-width: 980px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hero-image {
        max-width: 720px;
        margin-inline: auto;
    }

    .hero-text {
        text-align: center;
    }

    .hero-buttons,
    .hero-features {
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .products {
        padding-top: 54px;
    }

    .products .section-title {
        margin-bottom: 20px;
    }

    .product-wheel-experience {
        margin-top: 8px;
    }

    .cart-payment-columns,
    .cart-drawer-columns {
        grid-template-columns: 1fr;
    }

    .payment-column.is-selected {
        transform: none;
    }

    #about-brand,
    #reviews,
    #follow-us,
    #faq {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

@media (max-width: 560px) {
    .hero-trust-strip {
        gap: 12px;
    }

    .trust-badge-card {
        min-height: auto;
        gap: 12px;
    }

    .trust-icon-wrap {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .trust-icon-wrap img {
        width: 48px;
        height: 48px;
    }

    .image-lightbox-stage {
        grid-template-columns: 34px 1fr 34px;
    }

    .image-lightbox-nav {
        width: 34px;
        height: 34px;
        font-size: 1.35rem;
    }
}