@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* ---------- COLORS ---------- */
:root {
    --primary-navy: #102a43;
    --secondary-navy: #243b53;
    --accent-gold: #c5a059;
    --accent-gold-hover: #d4b572;
    --bg-light: #f8f9fa;
    --text-dark: #333333;
    --text-light: #f0f0f0;
    --white: #ffffff;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 40px rgba(16, 42, 67, 0.15);
}

/* ---------- GLOBAL ---------- */
body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    color: var(--text-dark);
    background-color: rgb(230, 230, 230);
    background-image: none;
    /* Removed old texture */
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- HEADER ---------- */
header {
    background-color: var(--primary-navy);
    height: 90px;
    padding: 0 5vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    /* gap: 3rem; Removed gap to control spacing with margins finely */
}

.logo {
    display: flex;
    justify-content: flex-start;
    /* Align logo to the left */
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.logo img {
    width: 55px;
    /* filter: brightness(0) invert(1); */
    /* Make logo white if it's not transparent/white already */
}

.logo-fashion {
    margin: 0;
    font-size: 24px;
    color: var(--accent-gold);
    font-family: "Playfair Display", serif;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
}

.logo-zone {
    margin: 0;
    font-size: 18px;
    color: var(--white);
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.list {
    margin: 0;
    justify-self: end;
    /* Align list to the right (next to basket) */
    margin-right: 40px;
    /* Add spacing between links and basket */
}

.list ul {
    list-style: none;
    display: flex;
    gap: 40px;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.list a {
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.list a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--accent-gold);
    transition: width 0.3s ease;
}

.list a:hover {
    color: var(--accent-gold);
}

.list a:hover::after {
    width: 100%;
}

.basket {
    justify-self: end;
}

.basket img {
    width: 28px;
    /* margin-left: 20px; */
    /* Removed margin as grid handles spacing */
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.basket a:hover img {
    transform: scale(1.1);
}

/* ------ Hello section ------ */
.hello-section {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    border: 2px solid rgba(197, 160, 89, 0.7);
    /* Accent Gold with 0.7 opacity */
    margin: 2rem auto;
    /* Centered with margin */
    border-radius: 8px;
    /* Slight rounded corners for the frame */
    max-width: 800px;
    /* Constrain width for a better "frame" look */
}

.hello {
    width: 70%;
    text-align: center;
    margin-bottom: 1.5rem;
}

.hello h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.2rem;
    color: var(--primary-navy);
    margin: 0;
    font-weight: 700;
}

.text {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    color: var(--text-dark);
}

.text h3 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    color: var(--secondary-navy);
}

.separator {
    border: none;
    border-top: 2px solid var(--accent-gold);
    width: 65%;
    margin: 1rem 0;
    opacity: 0.7;
}

/* ---------- MAIN ---------- */
main {
    width: 100%;
    padding: 2rem 0 2rem 0;
    display: flex;
    justify-content: center;
}

.cards {
    width: 100%;
    /* max-width: 1200px; */
    display: flex;
    justify-content: center;
    gap: 8rem;
    flex-wrap: wrap;
    padding: 0 20px;
}

/* ---------- CARD ---------- */
.card {
    background-color: var(--white);
    width: 320px;
    height: 540px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.card-img {
    height: 70%;
    overflow: hidden;
    position: relative;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card:hover .card-img img {
    transform: scale(1.08);
}

.buy-info {
    height: 30%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white);
}

.info-price {
    text-align: center;
}

.info-price p:first-child {
    font-family: "Playfair Display", serif;
    font-size: 1.2rem;
    color: var(--primary-navy);
    margin: 0 0 8px 0;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.info-price p:last-child {
    font-size: 1.3rem;
    color: var(--accent-gold);
    font-weight: 600;
    margin: 0;
}

/* ---------- BUTTON ---------- */
.button-buy {
    background-color: var(--primary-navy);
    color: var(--white);
    height: 48px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--primary-navy);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.button-buy:hover {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--primary-navy);
}

/* ---------- FOOTER ---------- */
footer {
    background-color: var(--primary-navy);
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-light);
    gap: 30px;
}

.listInFooter ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.listInFooter a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
    opacity: 0.8;
}

.listInFooter a:hover {
    color: var(--accent-gold);
    opacity: 1;
}

.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    font-size: 14px;
}

.contacts p {
    margin: 0;
}

.contacts p:first-child {
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 5px;
}

/* ---------- ADAPTIVE ---------- */
@media (max-width: 768px) {
    header {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 15px;
    }

    .list {
        margin: 0;
        width: 100%;
    }

    .list ul {
        justify-content: center;
        gap: 20px;
        font-size: 14px;
    }

    .basket {
        display: none;
    }

    /* Since list is now first in HTML, we might want logo first on mobile? 
       Use order property if needed, but current request implied centering logo with links on left. 
       On mobile, usually logo is top. */
    .logo {
        order: -1;
        /* Move logo to top on mobile */
    }

    .hello h2 {
        font-size: 2rem;
    }

    .text {
        width: 90%;
    }

    .cards {
        gap: 2rem;
    }

    .listInFooter ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}