/* Reset margins for a clean slate */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    /* Updated to use your new Google Font */
    font-family: "Instrument Serif", serif; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Header sits absolutely at the top, leaving the center purely for products */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 2.5rem 3rem; /* Spacing from the top and sides */
}

/* Logo styling for the top left */
.logo {
    font-size: 1.2rem;
    letter-spacing: 0.15rem;
    color: #000000;
    text-decoration: none;
}

/* Contact link for the top right */
.contact-link {
    font-size: 1rem;
    color: #000000; /* Matches your previous design */
    text-decoration: none;
    letter-spacing: 0.05rem;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #000000;
}

/* Main area pushes content to the exact center of the screen */
main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

.header-logo {
    height: 24px; /* Adjust this to make your logo bigger or smaller */
    width: auto;
    
    /* THE MAGIC TRICK: This forces all colored/grey pixels to black */
    filter: brightness(0); 
    
    /* Smooth transition just in case you want to add a hover effect later */
}

/* The container for your 4 items */
.catalog-row {
    display: flex;
    gap: 6vw; /* Uses viewport width to space them out evenly */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px; /* Prevents it from getting too wide on massive monitors */
}

/* Individual product wrapper */
.product {
    width: 25vw; /* Width scales based on screen size */
    min-width: 350px;
    max-width: 512px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.4s ease; /* Smooth hover scale */
}

/* Image styling */
.product img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Forces white backgrounds to blend perfectly with the site */
    mix-blend-mode: multiply; 
}

/* Subtle floating effect when hovering over a ring */
.product:hover {
    transform: scale(1.025);
}

/* Mobile responsiveness: drops to a 2x2 grid on small screens */
@media (max-width: 1500px) {
    .catalog-row {
        flex-wrap: wrap;
        gap: 3rem;
    }
    .product {
        width: 35%; 
    }
}

/* =========================================
   HOMEPAGE SPECIFIC STYLES
   ========================================= */

/* Center everything perfectly on the screen */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Takes up the full height of the browser window */
    width: 100%;
}

/* Make the center logo larger than the header logo, but keep it black */
.center-logo {
    height: 50px; /* You can adjust this height to make the main logo larger or smaller */
    width: auto;
    margin-bottom: 30px;
    filter: brightness(0); /* The magic trick to turn the SVG solid black */
}

/* Stack the links vertically */
.home-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between CATALOG and CONTACT */
    text-align: center;
}

/* Styling the homepage links */
.home-nav-links a {
    text-decoration: none;
    color: rgb(59, 104, 140); /* The muted blue from your original mockup */
    font-size: 1rem; /* Bumped up slightly because Instrument Serif reads a bit smaller */
    letter-spacing: 0.05rem;
    transition: color 0.3s ease;
}

/* Hover effect */
.home-nav-links a:hover {
    color: #000000;
}

/* The container for the contact page elements to keep them centered */
.contact-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem; /* Adds a nice chunk of breathing room between the email and the text */
}

/* Styling the made-to-order blurb */
.policy-blurb {
    font-family: "Instrument Serif", serif;
    font-size: 0.9rem;
    color: #353535; /* A very muted, elegant grey */
    color: rgb(59, 104, 140); /* The muted blue from your original mockup */
    letter-spacing: 0.05rem;
    line-height: 1.8; /* Gives the text room to breathe vertically */
}
.mailto-link {
    color:#000000;    
}










/* =========================================
   INDIVIDUAL PRODUCT PAGE STYLES (STACKED)
   ========================================= */

/* The vertical stacked container */
.product-layout {
    display: flex;
    flex-direction: column; /* Forces the image to sit above the text */
    align-items: center;    /* Centers everything horizontally */
    justify-content: center;
    gap: 3rem; /* Breathing room between the image and the text */
    max-width: 800px; 
    width: 100%;
    margin: 0 auto; 
    text-align: center; /* Forces all the text to center-align */
}

/* Image wrapper */
.product-image-col {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product-image-col img {
    width: 100%;
    max-width: 512px; /* Keeps the ring prominent but not aggressively huge */
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply; 
}

/* Text wrapper */
.product-info-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Keeps the text block perfectly centered under the image */
    gap: 1.5rem; 
    width: 100%;
    max-width: 600px; /* Prevents the paragraphs from stretching too wide and looking messy */
}

/* Typography for the product details */
.item-name {
    font-size: 2rem;
    text-transform: uppercase;
    color: #000000; 
    font-weight: normal;
    letter-spacing: 0.05rem;
    margin-bottom: 0.5rem;
}

.item-description {
    font-size: 1.15rem;
    text-transform: uppercase;
    line-height: 1;
    color: #000000;
    letter-spacing: 0.02rem;
}

.item-pricing {
    text-transform: uppercase;
    margin-top: 1rem;
    font-size: 1.15rem;
    color: #000000;
    line-height: 1.4;
}

.inquiry{
    text-transform: uppercase;
    margin-top: 1rem;
    font-size: .8rem;
    color: #000000;
    line-height: 1.4;
}


/* Styling for the product page disclaimer */
.product-disclaimer {
    font-family: "Instrument Serif", serif;
    font-size: 0.6rem; /* Very small and editorial */
    color: #888888; /* The same muted grey from your contact page */
    letter-spacing: 0.05rem;
    line-height: 1.6;
    text-align: center; 
    max-width: 80%; /* Keeps the text from getting too wide */
}


/* =========================================
   MOBILE LAYOUT FIXES
   ========================================= */

@media (max-width: 768px) {
    /* Forces a hard buffer zone below the header on phones */
    main {
        padding-top: 5rem; /* Pushes the rings down securely */
        padding-bottom: 5rem; /* Gives breathing room at the bottom of the screen */
    }

    /* Just in case the images are still trying to stretch too tall */
    .product-image-col img,
    .product img {
        max-height: 50vh; /* Stops the ring from taking up more than half the screen height */
        object-fit: contain;
    }
}