/* ===================================
RESPONSIVE.CSS
Zahra Collections V2.0
=================================== */


/* ---------- Laptop ---------- */

@media(max-width:1200px){

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

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .product-card{
        width:100%;
        min-width:0;
    }

    .product-card .image-box{
        width:100%;
        height:320px;
        overflow:hidden;
    }

    .product-card .image-box img,
    .product-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

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

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

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

    .instagram-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


/* ---------- Tablet ---------- */

@media(max-width:992px){

    .navbar{
        padding:18px 5%;
    }

    .logo img{
        height:70px;
    }

    .hero{
        height:75vh;
    }

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

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

    .product-details{
        grid-template-columns:1fr;
    }

    .cart-row{
        grid-template-columns:1fr;
        text-align:center;
    }

    .thumbnail-row{
        justify-content:center;
    }

    .buy-buttons{
        justify-content:center;
    }

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


    /* PRODUCT GRID */

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:25px;
        padding:0 20px;
    }

    .product-card{
        width:100%;
        min-width:0;
    }

    .product-card .image-box{
        width:100%;
        height:280px;
        overflow:hidden;
    }

    .product-card .image-box img,
    .product-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

}


/* ---------- Mobile ---------- */

@media(max-width:768px){

    .menu-btn{
        display:block;
    }

    .nav-links{
        display:none;
    }

    .nav-links.active{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:var(--brown);
        padding:20px 0;
    }

    .hero{
        min-height:100vh;
        height:auto;
        padding-top:220px;
        padding-bottom:60px;
    }

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

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

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

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

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

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


    /* =========================
       MOBILE PRODUCT GRID
       ========================= */

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        padding:0 12px;
        width:100%;
        box-sizing:border-box;
    }

    .product-card{
        width:100%;
        min-width:0;
        margin:0;
        box-sizing:border-box;
        overflow:hidden;
        border-radius:15px;
    }

    /* SAME IMAGE BOX FOR EVERY PRODUCT */

    .product-card .image-box{
        width:100%;
        height:190px;
        overflow:hidden;
        position:relative;
    }

    .product-card .image-box img,
    .product-card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    /* PRODUCT TEXT */

    .product-card h3{
        font-size:16px;
        line-height:1.3;
        margin:10px 0;
    }

    .product-card p{
        font-size:13px;
        line-height:1.5;
    }

    .product-info{
        padding:12px;
        box-sizing:border-box;
    }

    .price{
        font-size:17px;
    }

    .product-card .btn{
        font-size:13px;
        padding:9px;
    }


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

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

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

    .newsletter form{
        flex-direction:column;
        align-items:center;
    }

    .newsletter input{
        width:100%;
    }

    .search-box input{
        width:100%;
    }

    .filters{
        padding:0 20px;
    }

    .logo img{
        height:60px;
    }

    .product-info h1{
        font-size:30px;
    }

    .checkout{
        margin:40px 15px;
        padding:25px;
    }

    .page{
        padding:50px 20px;
    }

    .contact-form{
        width:100%;
    }

    .category-card img,
    .instagram-grid img{
        max-height:220px;
        width:100%;
        object-fit:cover;
    }


    /* COMING SOON */

    .coming-soon-message{
        width:90%;
        min-height:180px;
        padding:30px 15px;
        margin:25px auto;
        box-sizing:border-box;
    }

    .coming-soon-message h2{
        font-size:26px;
        margin-bottom:10px;
    }

    .coming-soon-message p{
        font-size:15px;
        line-height:1.5;
    }

}


/* ---------- Small Mobile ---------- */

@media(max-width:480px){

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

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

    .btn{
        width:100%;
        text-align:center;
    }

    .btn-outline{
        width:100%;
        margin-left:0;
        text-align:center;
    }

    .logo img{
        height:55px;
    }

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

    .feature{
        padding:25px;
    }


    /* SMALL MOBILE PRODUCT CARDS */

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:0 10px;
    }

    .product-card{
        width:100%;
        min-width:0;
    }

    .product-card .image-box{
        height:155px;
    }

    .product-card .image-box img,
    .product-card img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .product-info{
        padding:9px;
    }

    .product-card h3{
        font-size:14px;
        line-height:1.25;
    }

    .product-card p{
        font-size:12px;
    }

    .price{
        font-size:15px;
    }

    .product-card .btn{
        font-size:12px;
        padding:8px 5px;
    }


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

    .footer-logo{
        margin:auto;
    }

    .cart-row img{
        width:100px;
        margin:auto;
    }

    .quantity{
        flex-direction:column;
    }

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

    .category-card img,
    .instagram-grid img{
        max-height:180px;
    }

}


/* ---------- Large Desktop ---------- */

@media(min-width:1600px){

    .container{
        max-width:1500px;
    }

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

    .hero p{
        font-size:24px;
    }

}


/* =========================================
   MOBILE PRODUCT CARDS - CLEAN VIEW
   ========================================= */

@media (max-width: 768px) {

    /* Hide description */
    .product-card .product-info p {
        display: none !important;
    }

    /* Hide rating */
    .product-card .rating {
        display: none !important;
    }

    /* Hide old price */
    .product-card .old-price {
        display: none !important;
    }

    /* Hide buttons */
    .product-card .product-buttons {
        display: none !important;
    }

    /* Product information */
    .product-card .product-info {
        padding: 12px 10px 16px;
        height: auto;
    }

    /* Product name */
    .product-card h3 {
        font-size: 15px;
        line-height: 1.3;
        margin: 0 0 8px;
    }

    /* Price */
    .product-card .price {
        font-size: 21px;
        line-height: 1.2;
        margin: 0;
    }

}

@media (max-width: 768px) {

    .menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 10001;
        cursor: pointer;
    }

    .nav-links.active {
        z-index: 10000;
    }

}

/* =========================================
   CART - DESKTOP SPACE BELOW HEADER
   DO NOT CHANGE MOBILE
========================================= */

@media (min-width: 769px) {

    .cart-container {
        margin-top: 0;
        padding-top: 165px;
    }

}

/* =========================================
   MOBILE PRODUCT CARD ALIGNMENT
   ONLY AFFECTS SHOP/HOME PRODUCT CARDS
========================================= */

/* =========================================
   MOBILE PRODUCT PRICE ALIGNMENT
   ONLY MOBILE PRODUCT CARDS
========================================= */

@media (max-width: 768px) {

    .product-card {
        display: flex;
        flex-direction: column;
    }

    .product-card .product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Give every product name the same space */
    .product-card h3 {
        min-height: 58px;
        margin: 0 0 12px;
        line-height: 1.3;
    }

    /* Keep every price at exactly the same level */
    .product-card .price {
        margin: 0;
        padding: 0;
    }

}

/* =========================================
   MOBILE PRODUCT CARDS
   KEEP ALL PRICES PERFECTLY ALIGNED
========================================= */

@media (max-width: 768px) {

    .product-card {
        display: flex;
        flex-direction: column;
    }

    .product-card .product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Reserve exactly the same area for every name */
    .product-card h3 {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

        margin: 0 0 12px !important;
        line-height: 1.3 !important;

        overflow: hidden;
    }

    /* Every price starts at the same level */
    .product-card .price {
        margin: 0 !important;
        padding: 0 !important;
    }

}

/* =========================================
   MOBILE CATEGORY CARDS
   PROFESSIONAL 2 + 2 + 1 LAYOUT
   ========================================= */

@media (max-width: 768px) {

    .category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .category-card {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        display: block !important;
    }

    .category-card img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Dark overlay so text is always readable */
    .category-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.08)
        );
        z-index: 1;
        pointer-events: none;
    }

    /* Text container */
    .category-card > div {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .category-card h3 {
        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;

        font-size: 21px !important;
        line-height: 1.15 !important;

        color: #fff !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;

        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8);
    }

    /* Fifth category goes in the middle */
    .category-card:last-child {
        grid-column: 1 / -1 !important;
        width: min(100%, 175px) !important;
        justify-self: center !important;
    }

}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 480px) {

    .category-grid {
        gap: 12px !important;
        padding: 0 12px;
    }

    .category-card {
        border-radius: 16px !important;
    }

    .category-card h3 {
        font-size: 18px !important;
        line-height: 1.12 !important;
    }

    .category-card:last-child {
        width: min(100%, 165px) !important;
    }

}


/* =========================================================
   FINAL MOBILE CATEGORY FIX
   ZAHRA COLLECTIONS
   ========================================================= */

@media (max-width: 768px) {

    /* Category section spacing */
    .categories {
        padding: 55px 16px;
    }

    /* Two cards per row */
    .categories .category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reset ALL category-card grid positioning */
    .categories .category-grid .category-card {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 175px !important;
        margin: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    /* Images */
    .categories .category-grid .category-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Overlay */
    .categories .category-grid .category-card div {
        position: absolute !important;
        inset: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 12px !important;

        background:
            linear-gradient(
                to top,
                rgba(0, 0, 0, 0.62),
                rgba(0, 0, 0, 0.12)
            ) !important;

        text-align: center !important;
    }

    /* Category title */
    .categories .category-grid .category-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;

        font-family: "Cinzel", serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: 0.3px !important;

        text-align: center !important;

        /* Prevent ugly overflow */
        overflow-wrap: break-word !important;
        word-break: normal !important;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.75),
            0 1px 2px rgba(0, 0, 0, 0.9) !important;
    }

    /* TRADITIONAL PRODUCTS */
    .categories .category-grid .category-card:nth-child(5) {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 180px !important;
        margin: 0 !important;
    }

    .categories .category-grid .category-card:nth-child(5) h3 {
        max-width: 260px !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .categories {
        padding: 50px 12px;
    }

    .categories .category-grid {
        gap: 12px !important;
    }

    .categories .category-grid .category-card {
        height: 165px !important;
        border-radius: 16px !important;
    }

    .categories .category-grid .category-card h3 {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /* Traditional Products */
    .categories .category-grid .category-card:nth-child(5) {
        height: 175px !important;
    }

    .categories .category-grid .category-card:nth-child(5) h3 {
        max-width: 230px !important;
        font-size: 17px !important;
    }
}

/* =========================================================
   FINAL MOBILE CATEGORY CARD FIX
   ZAHRA COLLECTIONS
   ========================================================= */

@media (max-width: 768px) {

    .categories {
        padding: 55px 16px 70px;
    }

    .categories .section-title {
        margin-bottom: 38px;
    }

    .categories .section-title h2 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .categories .section-title p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Two clean columns */
    .categories .category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100%;
        max-width: 100%;
    }

    /* Every card behaves the same */
    .categories .category-card {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: 170px !important;
        min-width: 0 !important;

        border-radius: 18px !important;
        overflow: hidden !important;

        box-shadow:
            0 8px 22px rgba(75, 46, 37, 0.14);

        background: #ddd;
    }

    /* Images */
    .categories .category-card img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center !important;

        display: block;
    }

    /* Elegant dark overlay */
    .categories .category-card div {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        padding: 12px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.05) 0%,
                rgba(0, 0, 0, 0.12) 45%,
                rgba(0, 0, 0, 0.62) 100%
            ) !important;

        box-sizing: border-box !important;
    }

    /* Category names */
    .categories .category-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #fff !important;

        font-family: "Cinzel", serif !important;

        font-size: 20px !important;
        font-weight: 600 !important;

        line-height: 1.25 !important;
        letter-spacing: 0.3px !important;

        text-align: center !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.75),
            0 1px 2px rgba(0, 0, 0, 0.9);

        box-sizing: border-box !important;
    }

    /* IMPORTANT:
       Do NOT make the last card artificially narrow.
       It should have the same width as one column. */

    .categories .category-card:last-child {
        grid-column: 1 / span 2 !important;

        width: 50% !important;
        max-width: none !important;

        justify-self: center !important;
        margin: 0 !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .categories {
        padding-left: 12px;
        padding-right: 12px;
    }

    .categories .category-grid {
        gap: 12px !important;
    }

    .categories .category-card {
        height: 155px !important;
        border-radius: 16px !important;
    }

    .categories .category-card div {
        padding: 10px !important;
    }

    .categories .category-card h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.2px !important;
    }

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

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

}

/* =====================================================
   FINAL MOBILE CATEGORY FIX
   2 COLUMNS + LAST CARD CENTERED
   ===================================================== */

@media (max-width: 768px) {

    /* Force all category cards back into the mobile grid */
    .categories .category-grid .category-card:nth-child(1),
    .categories .category-grid .category-card:nth-child(2),
    .categories .category-grid .category-card:nth-child(3),
    .categories .category-grid .category-card:nth-child(4) {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    /* 5th card = centered */
    .categories .category-grid .category-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        justify-self: center !important;

        width: calc((100% - 15px) / 2) !important;
        max-width: none !important;
    }

}