* { 
    box-sizing: border-box; 
} 
 
 
html, 
body { 
    margin: 0; 
    padding: 0; 
 
    font-family: "Inter", sans-serif; 
 
    background: #0A373B; 
 
    color: #2C2C2C; 
} 
 
 
/* ========================================= 
   HEADER 
   SAME AS BRACELETS / CART 
========================================= */ 
 
.header { 
 
    position: fixed; 
 
    top: 0; 
    left: 0; 
 
    width: 100%; 
    height: 110px; 
 
    background: linear-gradient( 
        to bottom, 
        #0A373B 0px, 
        #0A373B 55px, 
        rgba(123, 107, 105, 0.49) 55px, 
        rgba(123, 107, 105, 0.49) 110px 
    ); 
 
    z-index: 1000; 
} 
 
 
/* LOGO */ 
 
.header-logo { 
 
    position: absolute; 
 
    left: 24px; 
    top: 15px; 
 
    width: 80px; 
    height: 80px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    z-index: 1100; 
} 
 
 
.header-logo img { 
 
    width: 100%; 
    height: 100%; 
 
    object-fit: contain; 
} 
 
 
/* NAVIGATION */ 
 
.navigation { 
 
    position: absolute; 
 
    left: 337px; 
    top: 42px; 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 18px; 
 
    z-index: 1100; 
 
    transform: translateY(25px); 
} 
 
 
.nav-link { 
 
    font-family: "Inter", sans-serif; 
 
    font-weight: 400; 
 
    font-size: 18px; 
 
    line-height: 24px; 
 
    color: #EC9E96; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    white-space: nowrap; 
 
    text-decoration: none; 
} 
 
 
.nav-link:hover, 
.nav-link.active { 
 
    color: #FAF5EE; 
} 
 
 
/* NAV DOT */ 
 
.nav-dot { 
 
    width: 8px; 
    height: 8px; 
 
    border-radius: 50%; 
 
    background: #EC9E96; 
 
    flex-shrink: 0; 
 
    display: inline-block; 
} 
 
 
/* HEADER ICONS */ 
 
.header-icons { 
 
    position: absolute; 
 
    right: 40px; 
    top: 38px; 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 20px; 
 
    z-index: 1100; 
 
    transform: translateY(25px); 
} 
 
 
.header-icon-btn { 
 
    width: 32px; 
    height: 32px; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
 
    padding: 0; 
    margin: 0; 
 
    border: none; 
 
    outline: none; 
 
    background: transparent; 
 
    color: #EC9E96; 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    appearance: none; 
    -webkit-appearance: none; 
 
    box-shadow: none; 
} 
 
 
.header-icon-btn:hover { 
 
    background: transparent; 
 
    color: #FAF5EE; 
 
    transform: translateY(-2px); 
} 
 
 
.header-icon-btn i { 
 
    background: transparent; 
 
    color: inherit; 
 
    font-size: inherit; 
 
    line-height: 1; 
 
    pointer-events: none; 
} 
 
 
/* ========================================= 
   WISHLIST BODY 
========================================= */ 
 
.wishlist-page { 
 
    width: 90%; 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
    padding-top: 160px; 
 
    padding-bottom: 80px; 
 
    min-height: 650px; 
} 
 
 
.wishlist-page h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: #EC9E96; 
 
    font-size: 42px; 
 
    font-weight: 600; 
} 
 
 
.wishlist-subtitle { 
 
    margin: 12px 0 45px; 
 
    text-align: center; 
 
    color: #FAF5EE; 
 
    font-size: 16px; 
} 
 
 
/* Wishlist products */ 
 
#wishlist-items { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    gap: 30px; 
} 
 
 
/* ========================================= 
   FOOTER 
   SAME AS CART 
========================================= */ 
 
.footer { 
 
    position: relative; 
 
    width: 100%; 
 
    min-height: 100px; 
 
    padding: 0 77px 40px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    font-family: "Almarai", sans-serif; 
 
    font-size: 24px; 
 
    line-height: 1; 
 
    color: #EC9E96; 
 
    z-index: 10; 
} 
 
 
.footer-copy { 
 
    display: flex; 
 
    align-items: center; 
} 
 
 
.footer-credit { 
 
    display: flex; 
 
    align-items: center; 
 
    gap: 6px; 
} 
 
 
.footer-credit strong { 
 
    font-weight: 700; 
 
    color: #FAF5EE; 
} 
 
 
/* ========================================= 
   WISHLIST CARDS 
========================================= */ 
 
#wishlist-items { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    gap: 30px; 
} 
 
 
/* CARD */ 
 
.wishlist-card { 
 
    background: #FAF5EE; 
 
    border-radius: 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    transition: 
        transform 0.25s ease, 
        box-shadow 0.25s ease; 
} 
 
 
.wishlist-card:hover { 
 
    transform: translateY(-5px); 
 
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.15); 
} 
 
 
/* IMAGE */ 
 
.wishlist-image { 
 
    width: 100%; 
 
    height: 300px; 
 
    background: #114246; 
 
    position: relative; 
 
    overflow: hidden; 
} 
 
 
.wishlist-image img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
} 
 
 
/* REMOVE HEART */ 
 
.wishlist-remove { 
 
    position: absolute; 
 
    top: 15px; 
    right: 15px; 
 
    width: 42px; 
    height: 42px; 
 
    border: none; 
 
    border-radius: 50%; 
 
    background: #FAF5EE; 
 
    color: #0A373B; 
 
    font-size: 18px; 
 
    cursor: pointer; 
 
    display: flex; 
 
    align-items: center; 
    justify-content: center; 
} 
 
 
.wishlist-remove:hover { 
 
    background: #EC9E96; 
 
    color: #0A373B; 
} 
 
 
/* DETAILS */ 
 
.wishlist-details { 
 
    padding: 20px; 
} 
 
 
.wishlist-details h3 { 
 
    margin: 0 0 8px; 
 
    color: #0A373B; 
 
    font-size: 22px; 
} 
 
 
.wishlist-description { 
 
    margin: 0 0 20px; 
 
    color: #666; 
 
    font-size: 14px; 
} 
 
 
/* BOTTOM */ 
 
.wishlist-bottom { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    gap: 15px; 
} 
 
 
.wishlist-price { 
 
    color: #0A373B; 
 
    font-size: 18px; 
 
    font-weight: 600; 
} 
 
 
/* ADD TO CART */ 
 
.wishlist-add-cart { 
 
    padding: 10px 18px; 
 
    border: none; 
 
    border-radius: 25px; 
 
    background: #0A373B; 
 
    color: #EC9E96; 
 
    font-size: 13px; 
 
    cursor: pointer; 
 
    transition: 0.2s ease; 
} 
 
 
.wishlist-add-cart:hover { 
 
    background: #EC9E96; 
 
    color: #0A373B; 
} 
 
 
/* ========================================= 
   EMPTY WISHLIST 
========================================= */ 
 
.empty-wishlist { 
 
    grid-column: 1 / -1; 
 
    background: #FAF5EE; 
 
    border-radius: 20px; 
 
    padding: 70px 30px; 
 
    text-align: center; 
} 
 
 
.empty-heart { 
 
    font-size: 55px; 
 
    color: #EC9E96; 
 
    margin-bottom: 10px; 
} 
 
 
.empty-wishlist h2 { 
 
    color: #0A373B; 
 
    margin: 0 0 10px; 
} 
 
 
.empty-wishlist p { 
 
    color: #666; 
 
    margin-bottom: 25px; 
} 
 
 
/* =========================================================
   RESPONSIVE
   ONLY TABLET + MOBILE CHANGES
   DESKTOP ABOVE 991px IS UNCHANGED
========================================================= */


/* =========================================================
   TABLET
   601px - 991px
   3 PRODUCTS PER ROW
========================================================= */

@media (min-width: 601px) and (max-width: 991px) {

    .header {
        height: 200px;
        background: #0A373B;
    }


    .header-logo {
        width: 130px;
        height: 130px;

        left: 25px;
        top: 15px;
    }


    .navigation {
        left: 175px;
        top: 115px;

        gap: 12px;

        transform: none;

        max-width: calc(100% - 270px);

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: none;
    }

    .navigation::-webkit-scrollbar {
        display: none;
    }


    .nav-link {
        font-size: 14px;
        line-height: 20px;
    }


    .nav-dot {
        width: 6px;
        height: 6px;
    }


    .header-icons {
        top: 112px;
        right: 20px;

        gap: 12px;

        transform: none;
    }


    .header-icon-btn {
        width: 30px;
        height: 30px;

        font-size: 17px;
    }


    /* WISHLIST PAGE */

    .wishlist-page {
        width: 92%;
        max-width: 900px;

        padding-top: 230px;
        padding-bottom: 60px;

        min-height: auto;
    }


    .wishlist-page h1 {
        font-size: 36px;
    }


    .wishlist-subtitle {
        font-size: 14px;

        margin: 10px 0 30px;
    }


    /* 3 PRODUCTS PER ROW */

    #wishlist-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: 18px;
        row-gap: 24px;
    }


    /* CARD */

    .wishlist-card {
        border-radius: 16px;
    }


    .wishlist-image {
        height: 210px;
    }


    .wishlist-remove {
        width: 34px;
        height: 34px;

        top: 10px;
        right: 10px;

        font-size: 15px;
    }


    .wishlist-details {
        padding: 14px;
    }


    .wishlist-details h3 {
        font-size: 17px;

        margin-bottom: 6px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .wishlist-description {
        font-size: 11px;

        line-height: 1.4;

        margin-bottom: 12px;

        display: -webkit-box;
     
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    .wishlist-bottom {
        gap: 7px;
    }


    .wishlist-price {
        font-size: 14px;
    }


    .wishlist-add-cart {
        padding: 8px 10px;

        font-size: 10px;

        white-space: nowrap;
    }


    /* FOOTER */

    .footer {
        min-height: 80px;

        padding: 0 30px 30px;

        font-size: 18px;
    }
}


/* =========================================================
   MOBILE
   381px - 600px
   2 PRODUCTS PER ROW
========================================================= */

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

    .header {
        height: 120px;

        position: relative;

        background: #0A373B;
    }


    .header-logo {
        width: 75px;
        height: 75px;

        left: 12px;
        top: 10px;
    }


    .navigation {
        left: 95px;
        top: 68px;

        gap: 8px;

        max-width: calc(100% - 105px);

        overflow-x: auto;

        white-space: nowrap;

        padding-bottom: 4px;

        transform: none;

        scrollbar-width: none;
    }

    .navigation::-webkit-scrollbar {
        display: none;
    }


    .nav-link {
        font-size: 11px;

        line-height: 18px;
    }


    .nav-dot {
        width: 4px;
        height: 4px;
    }


    .header-icons {
        top: 16px;
        right: 12px;

        gap: 8px;

        transform: none;
    }


    .header-icon-btn {
        width: 27px;
        height: 27px;

        font-size: 15px;
    }


    /* WISHLIST PAGE */

    .wishlist-page {
        width: 94%;

        padding-top: 35px;
        padding-bottom: 45px;

        min-height: auto;
    }


    .wishlist-page h1 {
        font-size: 28px;
    }


    .wishlist-subtitle {
        font-size: 12px;

        line-height: 1.4;

        margin: 8px 0 24px;
    }


    /* 2 PRODUCTS PER ROW */

    #wishlist-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 18px;
    }


    /* CARD */

    .wishlist-card {
        border-radius: 13px;
    }


    .wishlist-image {
        height: 170px;
    }


    .wishlist-remove {
        width: 29px;
        height: 29px;

        top: 7px;
        right: 7px;

        font-size: 13px;
    }


    .wishlist-details {
        padding: 10px;
    }


    .wishlist-details h3 {
        font-size: 15px;

        line-height: 1.25;

        margin-bottom: 5px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .wishlist-description {
        font-size: 10px;

        line-height: 1.35;

        margin-bottom: 9px;

        display: -webkit-box;
       
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    .wishlist-bottom {
        flex-direction: column;

        align-items: stretch;

        gap: 7px;
    }


    .wishlist-price {
        font-size: 14px;
    }


    .wishlist-add-cart {
        width: 100%;

        padding: 8px 5px;

        border-radius: 20px;

        font-size: 10px;
    }


    /* FOOTER */

    .footer {
        min-height: auto;

        flex-direction: column;

        gap: 10px;

        text-align: center;

        padding: 20px 15px 30px;

        font-size: 15px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   380px AND BELOW
   STILL 2 PRODUCTS PER ROW
========================================================= */

@media (max-width: 380px) {

    .header {
        height: 115px;

        position: relative;

        background: #0A373B;
    }


    .header-logo {
        width: 70px;
        height: 70px;

        left: 10px;
        top: 10px;
    }


    .navigation {
        left: 85px;
        top: 65px;

        gap: 7px;

        max-width: calc(100% - 95px);

        overflow-x: auto;

        white-space: nowrap;

        padding-bottom: 3px;

        transform: none;

        scrollbar-width: none;
    }

    .navigation::-webkit-scrollbar {
        display: none;
    }


    .nav-link {
        font-size: 10px;
    }


    .nav-dot {
        width: 4px;
        height: 4px;
    }


    .header-icons {
        top: 14px;
        right: 10px;

        gap: 6px;

        transform: none;
    }


    .header-icon-btn {
        width: 25px;
        height: 25px;

        font-size: 14px;
    }


    /* WISHLIST PAGE */

    .wishlist-page {
        width: 95%;

        padding-top: 30px;
        padding-bottom: 40px;
    }


    .wishlist-page h1 {
        font-size: 25px;
    }


    .wishlist-subtitle {
        font-size: 11px;

        margin: 7px 0 20px;
    }


    /* 2 PRODUCTS PER ROW */

    #wishlist-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 9px;
        row-gap: 14px;
    }


    .wishlist-card {
        border-radius: 11px;
    }


    .wishlist-image {
        height: 145px;
    }


    .wishlist-remove {
        width: 26px;
        height: 26px;

        top: 6px;
        right: 6px;

        font-size: 11px;
    }


    .wishlist-details {
        padding: 8px;
    }


    .wishlist-details h3 {
        font-size: 13px;

        margin-bottom: 4px;
    }


    .wishlist-description {
        font-size: 9px;

        line-height: 1.3;

        margin-bottom: 8px;
    }


    .wishlist-price {
        font-size: 13px;
    }


    .wishlist-add-cart {
        padding: 7px 4px;

        font-size: 9px;

        border-radius: 18px;
    }


    .footer {
        font-size: 14px;

        padding: 18px 10px 25px;
    }
}