/* ============================================================
   RESPONSIVE.CSS  —  UTILITY / RESPONSIVE LAYER
   ------------------------------------------------------------
   Ye file apni style.css k baad link karain, HTML <head> mein:

   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="responsive.css">

   NOTE (mobile menu):
   Apki JS pehle se ye kar rahi hai (nav ul par "active"
   class toggle hoti hai .menu-toggle click par):

     const menuBtn = document.querySelector(".menu-toggle");
     const menu = document.querySelector("nav ul");
     if (menuBtn && menu) {
         menuBtn.addEventListener("click", function(){
             menu.classList.toggle("active");
         });
     }

   Isi liye neechay CSS mein "nav ul.active" selector
   use kiya gaya hai (JS ko badalne ki zarurat nahi).
============================================================ */


/* ============================================================
   0. OVERFLOW FIX (box-sizing)
   ------------------------------------------------------------
   Ye elements width:100% + apni padding rakhte hain lekin
   box-sizing:border-box nahi thi — is wajah se actual width
   100% + padding ho kar mobile par page ko horizontally
   overflow kara rahi thi (login/register/forgot/account
   sidebar tirchay/cut ho rahe thay, newsletter input+button
   bhi isi wajah se kharab lag rahe thay).
============================================================ */

.login-box,
.register-box,
.forgot-box,
.account-sidebar,
.newsletter-form input,
.newsletter-btn{
    box-sizing:border-box;
}

/* Kisi bhi element (jaise slider arrows ka negative left/right
   offset) ki wajah se agar page thora sa viewport se bara ho
   jaye, to poore page ka horizontal scroll/right-side khali
   margin ban jata hai — har page par. Ye isay root se rok deta
   hai bina kisi visual design ko chheray. */

html, body {
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

/* ============================================================
   0.1 NAV / BANNER OVERLAP FIX
   ------------------------------------------------------------
   Agar nav fixed/sticky hai to uske neeche wala content (hero
   banner) upar chala jata hai aur nav ke peeche/oper overlap
   ho jata hai. Ye body ko utni hi top padding deta hai jitni
   nav ki height hai, taake hero banner nav ke neechay se shuru
   ho, thori space ke sath.

   NOTE: agar apki nav fixed nahi (normal flow mein) hai to ye
   rule harmless hai (extra thori space hi dikhegi). Agar nav
   ki actual height 80px se different hai to neechay wala
   80px value adjust kar dain.
============================================================ */



/* ============================================================
   0.2 LAPTOP NAV FIX  (<= 1440px)
   ------------------------------------------------------------
   Choti laptop screens par nav (logo + 7 links + search + icons)
   ek line mein fit nahi ho raha tha, is liye search box menu ke
   upar aa jata tha aur icons cut ho jate thay. Yahan font, gap
   aur search width screen ke hisab se kam ki gayi hai.
============================================================ */

/* Kisi bhi laptop size par nav apni line mein rahe */
nav{
    gap:16px;
}

.right-side{
    flex-shrink:0;
}

.search{
    flex-shrink:1;
    min-width:0;
}

/* Logo: "AK LIBASS" hamesha ek hi line mein, shrink/wrap na ho */

.logo{
    flex-shrink:0;
}

.logo h2{
    white-space:nowrap;
}

/* Logo ek line mein aane se jo jagah chahiye, wo search aur
   menu gap se wapas li gayi hai (large laptop / desktop) */

@media(max-width:1600px){

    nav ul{
        gap:22px;
    }

    .search input{
        width:250px;
    }

}

@media(max-width:1440px){

    nav{
        padding:8px 30px;
    }

    nav ul{
        gap:22px;
    }

    nav ul li a{
        font-size:19px;
    }

    .logo h2{
        font-size:24px;
    }

    .search input{
        width:240px;
    }

    .right-side{
        gap:14px;
    }

}

@media(max-width:1366px){

    nav{
        padding:8px 25px;
    }

    nav ul{
        gap:16px;
    }

    nav ul li a{
        font-size:16px;
    }

    .logo img{
        width:42px;
        height:42px;
    }

    .logo h2{
        font-size:22px;
    }

    .search input{
        width:190px;
        font-size:14px;
    }

    .nav-wishlist a,
    .nav-cart a,
    .user a{
        font-size:23px;
    }

}

@media(max-width:1200px){

    nav{
        padding:8px 20px;
        gap:12px;
    }

    nav ul{
        gap:12px;
    }

    nav ul li a{
        font-size:15px;
    }

    .logo img{
        width:38px;
        height:38px;
    }

    .logo h2{
        font-size:20px;
    }

    .search input{
        width:150px;
        font-size:13px;
        padding:9px 34px 9px 12px;
    }

    .right-side{
        gap:10px;
    }

    .nav-wishlist a,
    .nav-cart a,
    .user a{
        font-size:21px;
    }

}


/* ============================================================
   BREAKPOINTS
   Desktop        : > 1440px   (default styles style.css mein)
   Laptop         : 1101px – 1440px  (section 0.2)
   Tablet         : 769px – 1100px   (hamburger menu on)
   Mobile         : 481px – 768px
   Small Mobile   : <= 480px
============================================================ */


/* ============================================================
   1. TABLET  (max-width:1024px)
============================================================ */

@media(max-width:1024px){

    /* ---- Navbar ---- */

    nav ul{
        gap:18px;
    }

    nav ul li a{
        font-size:19px;
    }

    .search input{
        width:220px;
    }

    /* ---- Hero ---- */

    .hero{
        height:400px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero h2{
        font-size:44px;
    }

    .hero h2 span{
        font-size:58px;
    }

    .hero-text{
        font-size:18px;
    }

    /* ---- Collection ---- */

    .collection-container{
        grid-template-columns:repeat(2,1fr);
    }

    .section-heading h2{
        font-size:40px;
    }

    /* ---- Product grids (summer/winter/abaya/kids/shawl) ---- */

    .summer-grid,
    .winter-grid,
    .abaya-grid,
    .kids-grid,
    .shawl-grid,
    .related-grid{
        grid-template-columns:repeat(3,1fr);
    }

    /* ---- Product page ---- */

    .product-page{
        gap:35px;
    }

    /* ---- About ---- */

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mission{
        grid-template-columns:repeat(2,1fr);
    }

    /* ---- Checkout ---- */

    .checkout-page{
        grid-template-columns:1fr;
    }

}


/* ============================================================
   2. TABLET / SMALL LAPTOP  (max-width:1100px)
   -- Mobile menu switch-on point --
   (pehle 900px tha; ab 1100px taake nav cut na ho)
============================================================ */

@media(max-width:1100px){

    /* ---- Nav becomes column + menu toggle appears ---- */

    nav{
        flex-wrap:wrap;
        position:relative;
        align-items:flex-start;
        row-gap:10px;
    }

    nav ul{
        display:none;
        width:100%;
        flex-direction:column;
        gap:15px;
        background:hotpink;
        padding:20px;
        border-radius:10px;
        margin-top:10px;
        order:4;
    }

    nav ul.active{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

}


/* ============================================================
   3. MOBILE  (max-width:768px)
   -- Menu toggle placed BELOW search, left side --
============================================================ */

@media(max-width:768px){

    /* ---- Header layout: logo center / (toggle+search+icons) in one line ---- */

    nav{
        flex-direction:column;
        align-items:center;
    }

    /* Logo + heading: apni line, center mein */

    .logo{
        order:1;
        width:100%;
        justify-content:center;
        text-align:center;
        margin-bottom:12px;
    }

    /* Toggle + search + icons: sab EK line mein */

    .right-side{
        order:2;
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:10px;
    }

    /* Menu toggle: is line ka pehla item, LEFT side
       (.right-side k andar hona zaroori hai)

       NOTE: style.css mein ek generic "button{width:100%;
       height:55px;border-radius:35px;background:hotpink}"
       rule hai (Forgot Password section) jo har <button> ko
       lagta hai. Isay yahan explicitly reset kiya ja raha hai. */

    .menu-toggle{
        order:1;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        width:34px !important;
        height:34px !important;
        min-width:34px;
        padding:0 !important;
        margin:0 !important;
        background:transparent !important;
        border:none !important;
        border-radius:50% !important;
        cursor:pointer;
        flex-shrink:0;
    }

    .menu-toggle:hover{
        background:rgba(255,255,255,.15) !important;
    }

    .menu-toggle i{
        color:#fff;
        font-size:27px;
    }

    /* Search: beech mein, jitni jagah bachay utni le */

    .search{
        order:2;
        flex:1 1 auto;
        min-width:0;      /* zaroori hai warna flex item shrink nahi hota */
        width:auto;
    }

    .search input{
        width:100%;
        box-sizing:border-box;
        padding:10px 36px 10px 14px;
        font-size:14px;
    }

    .search i{
        right:12px;
        font-size:14px;
    }

    /* Top black announcement bar: MARQUEE (continuously scrolling),
       sale message + Track Order + Contact Us + Help sab ek line
       mein, bina kisi cut/hide k. (Poori CSS neechay ek jagah,
       .marquee-* section mein hai.) */

    .top-bar{
        overflow:hidden;
        padding:6px 0;
        font-size:12px;
    }

    /* Wishlist / cart / user: usi line mein, RIGHT side, chota size */

    .nav-wishlist,
    .nav-cart,
    .user{
        display:flex;
        align-items:center;
        flex-shrink:0;
    }

    .nav-wishlist a,
    .nav-cart a,
    .user a{
        font-size:27px;
    }

    .nav-wishlist{
        order:3;
    }

    .nav-cart{
        order:4;
    }

    .user{
        order:5;
    }

    nav ul{
        order:6;
        flex-basis:100%;
    }

    /* ---- Hero ---- */

    .hero{
        height:auto;
        padding:60px 20px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero h2{
        font-size:34px;
    }

    .hero h2 span{
        font-size:46px;
    }

    .hero-text{
        font-size:16px;
    }

    .sale-tag{
        padding:8px 20px;
        font-size:15px;
    }

    /* ---- Collection ---- */

    .collection-container{
        grid-template-columns:1fr;
    }

    .overlay h3{
        font-size:34px;
    }

    .overlay p{
        font-size:16px;
    }

    /* "Shop By Collection" heading + paragraph — chhota kiya gaya */

  .section-heading{
    padding:25px 20px;
}

.section-heading h2{
    font-size:17px;
}

.section-heading p{
    font-size:12px;
}

    /* ---- New arrivals slider ---- */
    /* "New Arrivals" heading + paragraph — chhota kiya gaya */

    .section-title{
        padding:35px 20px;
    }

    .section-title h2{
        font-size:24px;
    }

    .section-title p{
        font-size:14px;
    }

    /* Arrows pehle left:-20px / right:-20px thay — mobile par
       screen se bahar nikal kar edge par cut ho rahe thay
       (screenshot mein adha button dikh raha tha). Ab viewport
       ke andar rakha gaya hai. */

    .prev,
    .next{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .prev{
        left:-8px;
    }

    .next{
        right:-8px;
    }

    /* Home slider product card: pehle 230px thi — Khaadi jaisi
       badi, prominent tasveer ke liye ab aur bari kar di gayi
       hai (image-box height ratio se khud badh jati hai). */

    .product-card{
        min-width:260px;
        max-width:260px;
    }

    .image-box{
        height:auto;
        aspect-ratio:3/4;   /* baaki cards jaisi hi fix — fixed 340px
                                height chhoti screens par photo ko
                                zyada crop kar rahi thi. */
    }

    /* ---- Product grids ---- */

    .products-grid,
    .summer-grid,
    .winter-grid,
    .abaya-grid,
    .kids-grid,
    .shawl-grid,
    .wishlist-grid,
    #searchProducts,
    .search-results-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;   /* pehle 20px thi — gap kam kar ke tasveer ke
                       liye zyada width chhori gayi hai (Khaadi
                       jaisa bara, edge-to-edge look) */
    }

    /* ---- Badges: chhoti card par pehle bhi desktop jaisi bari
       thi. Wishlist button aur "NEW" tag donon ko aur chhota
       kar diya gaya hai. ---- */

    .new-tag,
    .arrival-new-tag,
    .summer-new-tag,
    .winter-new-tag,
    .abaya-new-tag,
    .kids-new-tag,
    .shawl-new-tag,
    .wishlist-new-tag,
    .related-new-tag,
    .search-product-new-tag{
        font-size:9px;
        padding:3px 10px;
    }

    .discount-tag,
    .arrival-discount-tag,
    .summer-discount-tag,
    .winter-discount-tag,
    .abaya-discount-tag,
    .kids-discount-tag,
    .shawl-discount-tag,
    .related-discount-tag{
        font-size:9px;
        padding:3px 8px;
    }

    /* ---- Wishlist heart button: aur chhota kar diya gaya hai
       taake tasveer par kam jagah rokay ---- */

  .wishlist-btn{
    width:32px;
    height:32px;
}

.wishlist-btn i{
    font-size:20px;
}

    /* ---- Cart icon: har page (home-slider/arrival/summer/winter/
       abaya/kids/shawl/wishlist) par chhota — pehle desktop jitna
       hi (38px) tha ---- */

    .cart-icon,
    .related-cart-icon,
    .arrival-cart-icon,
    .summer-cart-icon,
    .winter-cart-icon,
    .abaya-cart-icon,
    .kids-cart-icon,
    .shawl-cart-icon,
    .wishlist-cart-icon{
        width:32px;
        height:32px;
        font-size:14px;
    }

    /* ---- Old/New price: text aur chhota, tasveer ko zyada
       jagah dene ke liye ---- */

    .old-price,
    .arrival-old-price,
    .summer-old-price,
    .winter-old-price,
    .abaya-old-price,
    .kids-old-price,
    .shawl-old-price,
    .wishlist-old-price{
        font-size:12px;
    }

    .new-price,
    .arrival-new-price,
    .summer-new-price,
    .winter-new-price,
    .abaya-new-price,
    .kids-new-price,
    .shawl-new-price,
    .wishlist-new-price{
        font-size:13px;
    }

    /* ---- Product name heading: aur chhota ---- */

    .product-info h3,
    .arrival-name h3,
    .summer-info h3,
    .winter-info h3,
    .abaya-info h3,
    .kids-info h3,
    .shawl-info h3,
    .wishlist-name h3,
    .search-product-info h3,
    .related-card h3{
        font-size:13px;
    }

    .product-info small,
    .arrival-info small,
    .summer-info small,
    .winter-info small,
    .abaya-info small,
    .kids-info small,
    .shawl-info small,
    .wishlist-info small,
    .search-product-info small{
        font-size:11px;
    }

    /* ---- Related products: grid ki jagah ab HORIZONTAL SLIDER
       (home page ki .product-slider jaisa) ---- */

    .related-grid{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        scroll-behavior:smooth;
        gap:18px;
        padding-bottom:10px;
        scrollbar-width:none;
    }

    .related-grid::-webkit-scrollbar{
        display:none;
    }

    .related-card{
        min-width:200px;
        max-width:200px;
        flex-shrink:0;
    }

      .new-arrival-products,
    .summer-products,
    .winter-products,
    .abaya-products,
    .kids-products,
    .shawl-products,
    #searchProducts,
    .search-results-grid,
    .wishlist-grid{
        padding:10px 6px 40px;
    }

    .arrival-image-box,
    .summer-image-box,
    .winter-image-box,
    .abaya-image-box,
    .kids-image-box,
    .shawl-image-box,
    .wishlist-image-box,
    .related-image-box,
    .search-product-image{
        height:auto;
        aspect-ratio:3/4.3;   /* pehle fixed 340px thi — 2-column mobile
                                grid par card narrow ho jata tha lekin
                                height wahi rehti thi, is liye photo
                                zyada zoom/crop ho kar neeche se cut ho
                                rahi thi. Ab box hamesha width ke
                                mutabik apni height khud rakhega. */
    }

    /* ---- Product page ---- */

    .product-page{
        flex-direction:column;
    }

    .product-gallery,
    .product-details{
        width:100%;
    }

    .product-gallery{
        flex-direction:column-reverse;
    }

    /* ---- Product page thumbnails: pehle inke darmiyan bara gap
       (15px, style.css se inherit) tha aur size chhota (70x85)
       tha. Ab gap khatam kar ke size Khaadi jaisa bara kar diya
       gaya hai. ---- */

    .thumbs{
        flex-direction:row;
        overflow-x:auto;
        gap:6px;
        justify-content:flex-start;
    }

    .thumb{
        width:104px;
        height:135px;
        flex-shrink:0;
    }

    .product-details h1{
        font-size:26px;
    }

    .stitch-box{
        flex-wrap:wrap;
    }

    .option-btn{
        width:48%;
    }

    .product-buttons{
        flex-direction:column;
    }

    /* ---- About ---- */

    .about-story{
        flex-direction:column;
        gap:35px;
    }

    .mission{
        grid-template-columns:1fr;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .timeline{
        flex-direction:column;
    }

    .about-end{
        padding:60px 30px;
    }

    .about-end h2{
        font-size:34px;
    }

    .about-end p{
        width:100%;
        font-size:17px;
    }

    /* ---- Contact ---- */

    .contact-section{
        grid-template-columns:1fr;
    }

    /* ---- Checkout ---- */

    .checkout-form,
    .checkout-summary{
        padding:22px;
    }

    /* ---- Account page ---- */

    .account-page{
        flex-direction:column;
        padding:30px 20px;
    }

    .account-sidebar{
        width:100%;
    }

    /* ---- Orders table: horizontal scroll instead of squeeze ---- */

    .orders-table{
        overflow-x:auto;
    }

    .orders-table table{
        min-width:650px;
    }

    /* ---- Newsletter ---- */

    .newsletter h2{
        font-size:26px;
    }

    .newsletter p{
        font-size:15px;
    }

    .newsletter-form input{
        width:100%;
        max-width:400px;
    }

    .newsletter-btn{
        width:100% !important;
        max-width:400px;
    }

    /* ---- Login / Register / Forgot ---- */

    .login-container,
    .register-container,
    .forgot-container{
        min-height:auto;
        padding:30px 15px;
    }

    .login-box,
    .register-box,
    .forgot-box{
        width:100%;
        max-width:400px;
        padding:35px 25px;
    }

    /* ---- Footer ---- */

    .footer{
        padding:50px 6%;
    }

    .footer-container{
        gap:40px;
    }

    /* Social icons: pehle column ke min-width se zyada chaudi
       row ban rahi thi is liye aakhri icon screen se bahar cut
       ho raha tha — ab wrap hoti hain aur chhoti bhi hain */

    .social-icons{
        flex-wrap:wrap;
        gap:12px;
    }

    .social-icons a{
        width:38px;
        height:38px;
        font-size:22px;
    }

}


/* ============================================================
   4. SMALL MOBILE  (max-width:480px)
============================================================ */

@media(max-width:480px){

    /* ---- Header ---- */

    .logo img{
        width:38px;
        height:38px;
    }

    .logo h2{
        font-size:20px;
    }

    .search input{
        padding:10px 38px 10px 14px;
        font-size:14px;
    }

    .menu-toggle{
        width:32px !important;
        height:32px !important;
        min-width:32px;
    }

    .menu-toggle i{
        font-size:25px;
    }

    .right-side{
        gap:8px;
    }

    .search input{
        padding:9px 30px 9px 12px;
        font-size:13px;
    }

    .search i{
        right:10px;
        font-size:13px;
    }

    .nav-wishlist,
    .nav-cart,
    .user{
        margin-left:6px;
    }

    .nav-wishlist a,
    .nav-cart a,
    .user a{
        font-size:25px;
    }

    /* Top bar: aur chhoti screens pa aur bhi compact */

    .top-bar{
        padding:5px 0;
        font-size:10px;
    }

    /* ---- Hero ---- */

    .hero h1{
        font-size:26px;
    }

    .hero h2{
        font-size:26px;
    }

    .hero h2 span{
        font-size:36px;
    }

    .hero-text{
        font-size:14px;
    }

    /* "Shop By Collection" / "New Arrivals" headings: chhoti
       screen par aur bhi chhoti */

    .section-heading h2{
        font-size:20px;
    }

    .section-heading p{
        font-size:13px;
    }

    .section-title h2{
        font-size:20px;
    }

    .section-title p{
        font-size:13px;
    }

    /* ---- Product grids: 2 column rakha (jaisa large mobile par
       hai) — single column par card bohot bara ho jata tha.
       Gap yahan bhi kam kar di gayi hai taake tasveer ko zyada
       width mile. ---- */

    .products-grid,
    .summer-grid,
    .winter-grid,
    .abaya-grid,
    .kids-grid,
    .shawl-grid,
    .wishlist-grid,
    #searchProducts,
    .search-results-grid{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    /* Home slider card: large mobile (768px) par 260px hai, chhoti
       screen par bhi Khaadi jaisi bari rakhi gayi hai — sirf
       thora kam taake do card side by side scroll ho sakein */

    .product-card{
        min-width:195px;
        max-width:195px;
    }

    /* ---- Badges: aur ek notch chhoti ---- */

    .new-tag,
    .arrival-new-tag,
    .summer-new-tag,
    .winter-new-tag,
    .abaya-new-tag,
    .kids-new-tag,
    .shawl-new-tag,
    .wishlist-new-tag,
    .related-new-tag,
    .search-product-new-tag{
        font-size:8px;
        padding:2px 8px;
    }

    .discount-tag,
    .arrival-discount-tag,
    .summer-discount-tag,
    .winter-discount-tag,
    .abaya-discount-tag,
    .kids-discount-tag,
    .shawl-discount-tag,
    .related-discount-tag{
        font-size:8px;
        padding:2px 6px;
    }

    /* ---- Arrows: chhoti screen par thora aur sides ki taraf ---- */

    .prev,
    .next{
        width:32px;
        height:32px;
        font-size:15px;
    }

    .prev{
        left:-6px;
    }

    .next{
        right:-6px;
    }

    /* ---- Wishlist heart button: aur chhota ---- */

.wishlist-btn{
    width:28px;
    height:28px;
}

.wishlist-btn i{
    font-size:20px;
}

    /* ---- Cart icon: aur chhota ---- */

    .cart-icon,
    .related-cart-icon,
    .arrival-cart-icon,
    .summer-cart-icon,
    .winter-cart-icon,
    .abaya-cart-icon,
    .kids-cart-icon,
    .shawl-cart-icon,
    .wishlist-cart-icon{
        width:28px;
        height:28px;
        font-size:12px;
    }

    /* ---- Old/New price: aur chhoti ---- */

    .old-price,
    .arrival-old-price,
    .summer-old-price,
    .winter-old-price,
    .abaya-old-price,
    .kids-old-price,
    .shawl-old-price,
    .wishlist-old-price{
        font-size:11px;
    }

    .new-price,
    .arrival-new-price,
    .summer-new-price,
    .winter-new-price,
    .abaya-new-price,
    .kids-new-price,
    .shawl-new-price,
    .wishlist-new-price{
        font-size:12px;
    }

    /* ---- Product name heading: aur chhoti ---- */

    .product-info h3,
    .arrival-name h3,
    .summer-info h3,
    .winter-info h3,
    .abaya-info h3,
    .kids-info h3,
    .shawl-info h3,
    .wishlist-name h3,
    .search-product-info h3,
    .related-card h3{
        font-size:12px;
    }

    .product-info small,
    .arrival-info small,
    .summer-info small,
    .winter-info small,
    .abaya-info small,
    .kids-info small,
    .shawl-info small,
    .wishlist-info small,
    .search-product-info small{
        font-size:10px;
    }

    /* height ab yahan override nahi ki — 768px breakpoint wali
       aspect-ratio:3/4 hi chalti rahegi taake photo hamesha
       width ke mutabik proportion mein rahe aur neeche se cut
       na ho. */

    .related-card{
        min-width:170px;
        max-width:170px;
    }

   
    

    /* ---- Product page thumbnails: chhoti screen par bhi bara
       size, gap khatam ---- */

    .thumbs{
        gap:5px;
    }

    .thumb{
        width:82px;
        height:106px;
    }

    /* ---- FAQ ---- */

    .faq-question{
        font-size:16px;
        padding:16px 18px;
    }

    /* ---- Policy cards ---- */

    .policy-card{
        padding:20px;
    }

    .policy-card h2{
        font-size:22px;
    }

    /* ---- Checkout success box ---- */

    .order-success{
        width:92%;
        padding:28px 20px;
    }

    /* ---- Cart page ---- */

    .cart-line{
        flex-wrap:wrap;
    }

    .cart-line-total{
        text-align:left;
        width:100%;
    }

    /* ---- Login / Register / Forgot / Account: chhoti screen par
       aur bhi kam padding — pehle margin jaisa khali space nazar
       aa raha tha ---- */

    .login-container,
    .register-container,
    .forgot-container{
        padding:20px 10px;
    }

    .login-box,
    .register-box,
    .forgot-box{
        padding:25px 18px;
    }

    .account-page{
        padding:20px 12px;
    }

    /* ---- Footer: social icons aur chhoti ---- */

    .social-icons{
        gap:10px;
    }

    .social-icons a{
        width:34px;
        height:34px;
        font-size:18px;
    }

    /* ---- Newsletter heading: aur chhoti ---- */

    .newsletter h2{
        font-size:22px;
    }

    .newsletter p{
        font-size:14px;
    }

    /* ---- Site toast ---- */

    .site-toast{
        right:12px;
        left:12px;
        max-width:none;
        top:80px;
    }

}


/* ============================================================
   5. TOP-BAR MARQUEE (sale message + Track Order/Contact/Help)
   ------------------------------------------------------------
   HTML thora restructure karna hoga (content 2 dafa, seamless
   loop k liye). Neechay wali HTML apni top-bar ki jagah use
   karain:

   <div class="top-bar">
       <div class="marquee-track">

           <div class="marquee-group">
               <div class="top-left">
                   <span>&#10024; &#127881; MEGA SALE | UP TO 50% OFF ON SELECTED STYLES | SHOP NOW &#127881; &#10024;</span>
               </div>
               <div class="top-right">
                   <a href="Track Order.html">Track Order &#128666;</a>
                   <a href="contact.html">Contact Us &#128222;</a>
                   <a href="FAQS.html">Help</a>
               </div>
           </div>

           <div class="marquee-group" aria-hidden="true">
               <div class="top-left">
                   <span>&#10024; &#127881; MEGA SALE | UP TO 50% OFF ON SELECTED STYLES | SHOP NOW &#127881; &#10024;</span>
               </div>
               <div class="top-right">
                   <a href="Track Order.html">Track Order &#128666;</a>
                   <a href="contact.html">Contact Us &#128222;</a>
                   <a href="FAQS.html">Help</a>
               </div>
           </div>

       </div>
   </div>

   Dusra ".marquee-group" copy sirf loop ko seamless (bina
   jhatkay k) banane k liye hai — mobile pa dikhta hai, desktop
   pa khud-ba-khud hide ho jata hai (neechay CSS dekhain).
============================================================ */

/* ---- Base (har screen size pa) ----
   Desktop pa .marquee-group "display:contents" ki wajah se
   khud gayab ho jata hai aur .top-left/.top-right seedha
   .marquee-track k child ban jate hain — matlab original
   "justify-content:space-between" wala layout bilkul waisa
   hi rehta hai jaisa pehle tha. */

.marquee-track{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.marquee-group{
    display:contents;
}

.marquee-group[aria-hidden="true"]{
    display:none;
}

/* ---- Mobile: marquee ON (<=768px) ---- */

@media(max-width:768px){

    .top-bar{
        position:relative;
    }

    .marquee-track{
        display:flex;
        justify-content:flex-start;
        width:max-content;
        animation:topMarquee 18s linear infinite;
    }

    .marquee-group{
        display:flex !important;
        align-items:center;
        gap:35px;
        flex-shrink:0;
        padding-right:35px;
        white-space:nowrap;
    }

    .marquee-group[aria-hidden="true"]{
        display:flex !important;
    }

    .top-left span{
        white-space:nowrap;
    }

    .top-right{
        display:flex;
        gap:20px;
        white-space:nowrap;
    }

    /* Finger/mouse rakhne par pause ho jaye, parhne mein aasani k liye */

    .top-bar:hover .marquee-track,
    .top-bar:active .marquee-track{
        animation-play-state:paused;
    }

}

@media(max-width:480px){

    .marquee-track{
        animation-duration:14s;
    }

    .marquee-group{
        gap:22px;
        padding-right:22px;
    }

    .top-right{
        gap:14px;
    }

}

@keyframes topMarquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}







.collection {
    width: 100%;
    margin: 40px 0;
}

.collection h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 38px;
    color: hotpink;
    font-family: 'Poppins', sans-serif;
}

.collection-text {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: rgb(31, 27, 27);
    margin-bottom: 40px;
}


/* =========================
   TABLET
========================= */

@media screen and (max-width: 1000px) {

    .collection {
        margin: 35px 0;
        padding: 0 25px;
        box-sizing: border-box;
    }

    .collection h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .collection-text {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 30px;
    }
}


/* =========================
   MOBILE
========================= */

@media screen and (max-width: 600px) {

    .collection {
        width: 100%;
        margin: 30px 0;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .collection h2 {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .collection-text {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 25px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

@media screen and (max-width: 400px) {

    .collection {
        margin: 25px 0;
        padding: 0 12px;
    }

    .collection h2 {
        font-size: 23px;
    }

    .collection-text {
        font-size: 13px;
        line-height: 1.5;
    }
}





@media(max-width:768px){

    .prev,
    .next{
        top:173px;
    }

    .prev{
        left:-4px;
    }

    .next{
        right:-4px;
    }

}

@media(max-width:480px){

    .prev,
    .next{
        top:130px;
        width:32px;
        height:32px;
    }

    .prev{
        left:-2px;
    }

    .next{
        right:-2px;
    }

}



    /* ---- Product page: stitch/size buttons, price, heading ---- */

    .product-details h1{
        font-size:22px;
    }

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

    .o-price{
        font-size:18px;
    }

    .option-btn{
        height:40px;
        font-size:13px;
    }

    .size-btn{
        width:44px;
        height:44px;
        font-size:14px;
    }

    .quantity-box button{
        width:38px;
        height:38px;
        font-size:18px;
    }

    .quantity-box input{
        width:50px;
        height:38px;
        font-size:15px;
    }


        /* ---- Breadcrumb ---- */

    .breadcrumb{
        padding:0 20px;
        margin:25px auto 15px;
        flex-wrap:wrap;
        gap:6px;
    }

    .breadcrumb h4{
        font-size:14px;
    }

    .breadcrumb a{
        font-size:14px;
    }


        .breadcrumb h4,
    .breadcrumb a{
        font-size:12.5px;
    }

        .new-arrival-products,
    .summer-products,
    .winter-products,
    .abaya-products,
    .kids-products,
    .shawl-products,
    #searchProducts,
    .search-results-grid,
    .wishlist-grid{
        padding:10px 4px 35px;
    }










   /*=========================================
            PRODUCT PAGE
=========================================*/

.product-page{
    max-width:1400px;
    margin:50px auto;
    padding:0 20px;
    display:flex;
    gap:60px;
    align-items:flex-start;
}


/*=========================================
            GALLERY
=========================================*/

.product-gallery{
    display:flex;
    gap:15px;
    width:70%;
    align-items:stretch;
    height:1000px;
}

/*=========================================
            THUMBNAILS
=========================================*/

.thumbs{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:150px;
    height:100%;
    overflow-y:auto;
    padding-right:2px;
}

.thumb{
    width:100%;
    aspect-ratio:3/4;
    flex-shrink:0;
    object-fit:cover;
    border:2px solid #eee;
    cursor:pointer;
    transition:.3s;
}
.thumb:hover{
    border-color:#111;
}

.thumb.active{
    border:2px solid #111;
}


/*=========================================
            MAIN IMAGE
=========================================*/
.main-image-box{
    position:relative;
    flex:1;
    min-width:0;
    height:100%;
    background:#f8f8f8;
    overflow:hidden;
}

.main-image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
}


/*=========================================
            PRODUCT INFO
=========================================*/

.product-details{
    width:40%;
}

.product-details small{
    color:#888;
    font-size:15px;
}

.product-details h1{
    font-size:34px;
    margin:10px 0 20px;
    font-weight:600;
}


/*=========================================
            RESPONSIVE — TABLET
            (large tablets / small laptops)
=========================================*/
@media (max-width:1024px){

    .product-page{
        gap:35px;
    }

    .product-gallery{
        width:60%;
        height:750px;
    }

    .thumbs{
        width:110px;
    }

    .product-details{
        width:40%;
    }

    .product-details h1{
        font-size:28px;
    }

}


/*=========================================
            RESPONSIVE — TABLET PORTRAIT
            Gallery ab column layout mein,
            thumbnails neeche horizontal row
=========================================*/
@media (max-width:768px){

    .product-page{
        flex-direction:column;
        gap:25px;
        margin:30px auto;
    }

    .product-details{
        width:100%;
    }

    .product-gallery{
        flex-direction:column;
        width:100%;
        height:auto;
        gap:10px;
    }

    .main-image-box{
        width:100%;
        height:500px;
        order:1;
    }

    .thumbs{
        flex-direction:row;
        width:100%;
        height:auto;
        overflow-x:auto;
        overflow-y:hidden;
        padding-right:0;
        padding-bottom:4px;
        order:2;
    }

    .thumb{
        width:120px;
        aspect-ratio:3/4;
        flex-shrink:0;
    }

}


/*=========================================
            RESPONSIVE — MOBILE
=========================================*/
@media (max-width:600px){

    .product-page{
        padding:0 12px;
    }

    .main-image-box{
        height:420px;
    }

    .thumb{
        width:95px;
    }

    .product-details h1{
        font-size:24px;
        margin:8px 0 14px;
    }

    .product-details small{
        font-size:13px;
    }

}