:root {
            --main-font: "Monospace821Regular", monospace, sans-serif;
            --link-color: #0000EE; /* Your specific link color */
            --bg-color: #fff;
            --text-color: #000;
            --max-width: 700px; /* Max width for general text content */
            --product-max-width: 1000px; /* Slightly wider for product display */
            --spacing-sm: 10px;
            --spacing-md: 20px;
            --spacing-lg: 40px;
        }

       @font-face {
    font-family: "Monospace821Regular";
    src: url('assets/font/MONOSPACE821BT.TTF') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "Monospace821Bold";
    src: url('assets/font/MONOSPACE821BOLDBT.TTF') format('truetype');
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "Monospace821Italic";
    src: url('assets/font/MONOSPACE821ITALICBT.TTF') format('truetype');
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Monospace821BoldItalic";
    src: url('assets/font/MONOSPACE821BOLDITALICBT.TTF') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--main-font);
            margin: 0;
            padding: 0;
        }
a:link,
a:visited,
a:hover,
a:active {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  opacity: 0.7; /* or your preferred hover effect */
}

        /* Your menu styles */
        .unMenu {
            position: fixed;
            top: var(--spacing-md);
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            gap: var(--spacing-md);
        }

        .unMenu a,
        .unLogoLink,
        .unTextContent a,
        .unFooter a,
        .contact-link { /* Apply to contact link */
            font-family: var(--main-font);
            font-size: 14px;
            text-decoration: none;
            color: var(--link-color);
        }

        .unMenu a:hover,
        .unLogoLink:hover,
        .unTextContent a:hover,
        .unFooter a:hover,
        .contact-link:hover { /* Apply to contact link */
            text-decoration: none;
  opacity: 0.7;
        }
        .logo {
            width: 20%;
        }

        /* Your logo link style */
        .unLogoLink {
            position: fixed;
            top: var(--spacing-md);
            left: var(--spacing-md);
            z-index: 1001;
        }

        /* Your section styles, adapted */
        .section {
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center; /* Center content horizontally */
            align-items: center; /* Center direct children vertically */
            box-sizing: border-box;
            padding: 0 var(--spacing-md);
        }

        .unTextContent { /* For general text sections like 'info' */
            max-width: var(--max-width);
            width: 100%;
            font-size: 0.9rem;
            text-align: left;
            line-height: 1.6;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .unTextContent h5 {
            font-size: 1rem;
            margin: 0 0 var(--spacing-sm) 0;
        }

        /* Specific styles for the product section */
        .product-section .unTextContent { /* Remove text-align: center from here */
            text-align: left; /* Ensure inner content is left-aligned */
        }
        .product-section .product-item {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Image on left, details on right */
            gap: var(--spacing-lg); /* Space between columns */
            max-width: var(--product-max-width); /* Allows products to be wider */
            width: 100%;
            padding: var(--spacing-lg) 0; /* Vertical padding within each product block */
            border-bottom: 1px solid var(--text-color); /* Separator between products */
        }

        .product-section .product-item:last-of-type {
            border-bottom: none; /* No border after the last product */
        }

        .product-image-gallery {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-md);
            border-right: 0px solid var(--text-color); /* Divider between image and text */
            padding-right: var(--spacing-lg);
        }

        .main-product-image {
            width: 100%;
            height: auto;
            display: block;
            border: 0px solid var(--text-color); /* Image border */
        }

        .thumbnails {
            display: flex;
            gap: var(--spacing-sm);
        }

        .thumbnails img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border: 0px solid var(--text-color);
            cursor: pointer;
            transition: border-color 0.1s ease; /* Simple transition */
        }

        .thumbnails img:hover, .thumbnails img:focus {
            border-color: var(--link-color); /* Highlight with link color */
        }

        .product-details {
            padding-left: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center details vertically */
        }
        .product-details a {
            font-family: var(--main-font);
            text-decoration: none;
            color: var(--link-color);
        } 
        .product-details a:hover {
            text-decoration: none;
  opacity: 0.7;
        }
        .product-details h4 {
            font-family: var(--main-font); /* Consistent font */
            font-size: 1.2rem;
            margin: 0 0 var(--spacing-sm) 0;
            color: var(--text-color); /* Default text color */
        }

        .product-details p {
            font-size: 0.9rem; /* Consistent body text size */
            margin-bottom: 15px;
        }
         .product-details a {
            font-size: 0.9rem; /* Consistent body text size */
            margin-bottom: 15px;
        }

        .product-price {
            font-family: var(--main-font);
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: var(--spacing-md);
            color: var(--link-color); /* Price as a link color highlight */
        }

        .product-options {
            margin-bottom: var(--spacing-md);
        }

        .product-options label {
            font-family: var(--main-font);
            font-size: 0.9rem;
            display: block;
            margin-bottom: 5px;
        }

        .size-selector {
            font-family: var(--main-font);
            font-size: 0.9rem;
            padding: 8px 12px;
            border: 0px solid var(--text-color);
            background-color: var(--bg-color);
            color: var(--text-color);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            width: 150px; /* Fixed width for selector */
        }

        .size-selector:focus {
            outline: 1px dashed var(--link-color); /* Dash outline on focus */
            outline-offset: 2px;
        }
/* --- Archive Gallery Styles --- */
.archive-gallery-container {
    width: 70%; /* A good default size for larger screens */
    max-width: 550px; /* A clean maximum width */
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-images {
    flex-grow: 1; /* Allows the image container to fill the space */
    margin: 0 15px; /* Adds space between the buttons and the image */
    position: relative;
    aspect-ratio: 3 / 4; /* Enforces the 3:4 aspect ratio */
    overflow: hidden; /* Hides images that are not active */
}

.gallery-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the space without distortion */
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* Smooth fade transition */
}

.gallery-images img.active {
    opacity: 1; /* Makes the current image visible */
}

.gallery-nav {
    background: transparent;
    border: none;
    font-family: var(--main-font);
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.1s ease;
}

.gallery-nav:hover {
    color: var(--link-color); /* Changes color on hover */
}
      .add-to-cart-button {
    font-family: var(--main-font);
    font-size: 14px;
    text-decoration: none;
    color: var(--link-color);
    display: block; /* <-- THE FIX IS HERE */
    border: 1px solid var(--link-color);
    padding: 8px 12px;
    text-align: center;
    transition: all 0.1s ease;
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 1rem; /* Added for spacing */
}
.shipping-note {
    font-size: 0.70rem; /* Makes the text about 25% smaller than the parent text */
    color: var(--text-color);
    font-weight: strong;       /* Optional: Makes the text dark gray instead of pure black */
}
        .add-to-cart-button:hover {
            text-decoration: none;
  opacity: 0.7; /* Consistent hover effect */
            background: transparent; /* Keep background transparent on hover */
            color: var(--link-color); /* Keep color as link color */
        }

        /* Your existing fixed elements */
        .unContact {
            font-size: 0.8rem;
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            text-decoration: none;
        }
         .unContact a {
            text-decoration: none;
        }
         .unContact a:hover {
            text-decoration: none;
  opacity: 0.7;
        }

        .unFooter {
            color: var(--link-color);
            font-size: 0.7rem;
            position: fixed;
            bottom: 2px;
            right: var(--spacing-md);
        }

        .backToTop {
    font-family: var(--main-font);
    position: fixed;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect centering */
    right: var(--spacing-md);
    font-size: 2rem;
    text-decoration: none;
    color: var(--link-color);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

        .backToTop.visible {
            opacity: 1;
            visibility: visible;
        }
.backToTop:hover {
    text-decoration: none;
    opacity: 0.7; /* Dim it slightly on hover */
}
        blockquote {
            font-size: 1rem;
            color: var(--text-color);
            text-align: left;
            width: 80vw;
            max-width: fit-content;
            margin: var(--spacing-md) auto;
        }

        blockquote cite {
            display: block;
            text-align: right;
            font-style: italic;
            margin-top: var(--spacing-sm);
        }

        /* Contact popup (from your original code) */
        .contact-popup-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            align-items: center; /* Center popup content */
            justify-content: center;
        }

        .contact-popup-content {
            background: #fff;
            width: 80%;
            max-width: 500px;
            padding: var(--spacing-md);
            text-align: center;
            position: relative;
            border: 0px solid var(--text-color); /* Explicit border */
        }

        .contact-popup-close {
            position: absolute;
            top: var(--spacing-sm);
            right: 15px; /* Adjust for better spacing */
            font-size: 1.8rem; /* Larger for brutalist feel */
            cursor: pointer;
            color: var(--text-color); /* Match text color */
        }
        .contact-popup-close:hover {
            text-decoration: none;
  opacity: 0.7;
        }

       /* --- Styling for Contact Popup Form --- */

.contact-form-popup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm); /* Adds space between form fields */
}

.contact-form-popup input[type="text"],
.contact-form-popup input[type="email"],
.contact-form-popup textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--text-color); /* Use your main text color for the border */
    font-family: var(--main-font);
    font-size: 0.9rem;
    color: var(--text-color);
    background-color: var(--bg-color);
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.contact-form-popup input[type="text"]:focus,
.contact-form-popup input[type="email"]:focus,
.contact-form-popup textarea:focus {
    border-color: var(--link-color); /* Highlight with link color on focus */
    outline: none;
}

/* Style the button to match the "PRE ORDER" button */
.contact-form-popup .add-to-cart-button {
    margin-top: var(--spacing-sm);
    width: 100%; /* Make button full-width */
}

        html {
            scroll-behavior: smooth; /* Keep this if you prefer it */
        }
/* --- Styling for Form Elements (Select and Input Number) --- */

/* Basic styling for all select and number input fields within product forms */
.product-details select,
.product-details input[type="number"] {
    width: 100%; /* Make them take full width of their container */
    padding: 10px 12px;
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Slightly rounded corners */
    font-family: var(--main-font); /* Use your main font */
    font-size: 0.95rem;
    color: var(--text-color); /* Use your main text color */
    background-color: var(--bg-color); /* Match background */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    -webkit-appearance: none; /* Remove default browser styling for select/number */
    -moz-appearance: none;
    appearance: none;
}

/* Specific styling for the select dropdown */
.product-details select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;
}

/* Focus styles for better accessibility */
.product-details select:focus,
.product-details input[type="number"]:focus {
    border-color: var(--link-color); /* Highlight border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(0, 150, 255, 0.2); /* Subtle blue glow */
}

/* Styles for placeholder option in select */
.product-details select option[value=""] {
    color: #888; /* Dim the placeholder text */
}

/* Adjust width for inputs/selects inside the product-details container */
/* This overrides the 150px inline style and ensures it takes full width when wider,
   but still allows it to be narrower if parent dictates. */
.product-item .product-details input[type="number"],
.product-item .product-details select {
    max-width: 150px; /* Reapply original width constraint if desired, or remove for full width */
    /* If you want them to always take full width, remove max-width */
}

/* You might want to add some margin-bottom to each form element for spacing */
.product-details label + input[type="number"],
.product-details label + select {
    margin-bottom: var(--spacing-sm); /* Adds space below the input/select */
}
        /* Your responsive styles */
        @media (max-width: 900px) { /* Adjusted breakpoint for product stacking */
            .product-section .product-item {
                grid-template-columns: 1fr; /* Stack columns */
                gap: 30px;
            }
            .product-image-gallery {
                border-right: none;
                border-bottom: 1px solid var(--text-color); /* Add a bottom border to image area */
                padding-right: 0;
                padding-bottom: var(--spacing-md);
            }
            .product-details {
                padding-left: 0;
                padding-top: var(--spacing-md);
            }
        }

        @media (max-width: 768px) {
    blockquote { width: 90vw; }
    .unTextContent { padding: var(--spacing-md); }
    
    /* Fix the navigation - remove fixed positioning */
    .unMenu {
        position: relative;
        top: 0;
        left: auto;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        width: 100%;
        padding: var(--spacing-sm) 0;
    }
    
    .unLogoLink {
        position: relative;
        top: 0;
        left: auto;
        transform: none;
        text-align: center;
        margin-bottom: var(--spacing-md);
    }
    
    .product-item { padding: 30px 0; }
    .contact-form { width: 90%; }
    .archive-gallery-container { width: 90%; }
}
/* Add this inside your @media (max-width: 768px) rule */
.archive-gallery-container {
    width: 90%; /* Makes the gallery nice and wide on smaller screens */
}
        @media (max-width: 480px) {
            blockquote { font-size: 0.9rem; line-height: 1.5; width: 95vw; }
            .unTextContent { width: 95vw; }
            .hero-headline { font-size: 2.2em; }
            .hero-subline { font-size: 0.9rem; }
            .product-details h4 { font-size: 1.1rem; }
            .product-price { font-size: 1rem; }
            .thumbnails img { width: 50px; height: 50px; }
            .unContact { font-size: 0.7rem; bottom: var(--spacing-md); }
            .unFooter { font-size: 0.6rem; right: var(--spacing-sm); }
            .backToTop { font-size: 1.5rem; top: 50%; transform: translateY(-50%);right: var(--spacing-sm); 
    }        }
        /* Add this inside your @media (max-width: 480px) rule */
.archive-gallery-container {
    width: 95%; /* Makes the gallery take up almost the full width on small phones */
}