@font-face {
    font-family: 'redonda';
    src: url('https://use.typekit.net/pha2knj.css') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'redonda';
    src: url('https://use.typekit.net/pha2knj.css') format('woff2');
    font-weight: 200;
    font-style: normal;
}
:root {
    /* Base sizes using viewport units */
    --base-size: clamp(2.2vw, 3vh, 2.2vw);  /* Base size as percentage of viewport width, with a minimum based on viewport height */
    --our-flag-size: calc(var(--base-size) * 2.48*1.25);
    --stands-size: calc(var(--base-size) * 3.15*1.25);
    --for-size: calc(var(--base-size) * 2.655*1.25);
    --changing-text-size: calc(var(--base-size) * 1.5*1.25);
    --not-him-size: calc(var(--base-size) * 1.55*1.25);  /* New variable for NOT HIM text */
    
    /* Spacing and underline controls */
    --line-spacing: 0px;
    --underline-thickness: 0.3vw;  /* Changed to viewport units */
    --underline-width: 17.5vw;  /* Make underline width responsive */
    --underline-offset: 1.5vw;  /* Changed to viewport units */
    
    /* Spacing variables */
    --element-gap: 1vw;  /* Gap between main elements */
    --vertical-gap: 0vw;  /* Gap between vertical elements */
    --vertical-offset: 0vw;  /* Offset for vertical container */
}

body {
    background-color: #000;
    color: white;
    font-family: "redonda", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;  /* Prevent horizontal scroll */
    width: 100vw;  /* Ensure full width */
}
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 5vw;
    background-color: #000;
    z-index: 2;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.content-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 1800px;
    gap: var(--element-gap);
    position: relative;
}
.flag-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1.9/1;
}
.flag {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    height: 100%;
    gap: var(--line-spacing);
}
h1 {
    font-size: var(--our-flag-size);
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: left;
    font-weight: bold;
}
h2 {
    font-size: var(--stands-size);
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: left;
    font-weight: bold;
}
.underline-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--underline-width);
    height: 1.2em;
}
.underline {
    position: absolute;
    bottom: var(--underline-offset);
    left: 0;
    width: 100%;
    height: var(--underline-thickness);
    background-color: #b31942;
}
.text-change {
    display: none;
    font-family: "pf-scandal", sans-serif;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: var(--changing-text-size);
    position: absolute;
    left: 0;
    bottom: calc(var(--underline-offset) * 3.9);
    transform: translateY(50%);
}
.text-change.visible {
    display: block;
}
.for-text {
    font-size: var(--for-size);
    line-height: 1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1vw;  /* Changed to viewport units */
    font-weight: bold;  /* Added to match OUR FLAG and STANDS */
}
/* New styles for vertical elements */
.vertical-container {
    position: absolute;
    right: var(--vertical-offset);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--vertical-gap);
    height: 100%;
}
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: var(--not-him-size);
    color: white;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "redonda", sans-serif;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Add these new styles */
.store-section, .about-section, .contact-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vw;
    margin: 0;
    box-sizing: border-box;
    z-index: 3;
}

.store-section {
    min-height: 80vh;  /* Reduced from 100vh to bring it closer to about section */
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
    max-width: 1800px;
    width: 90%;
    margin: 0 auto;
    padding: 2vw;
    justify-items: center;
}

.store-item {
    background: #111;
    border-radius: 1vw;
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    height: auto; /* Changed from fixed height to auto */
    min-height: 500px; /* Added min-height instead */
}

.store-item-image {
    width: 100%;
    aspect-ratio: 1/1;  /* Square images */
    background: #222;  /* Placeholder color */
    object-fit: contain; /* Changed from cover to contain */
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.store-item-title {
    font-family: "redonda", sans-serif;
    font-size: 20px;  /* Changed from 1.2vw */
    color: white;
    text-align: center;
    flex-shrink: 0; /* Prevents the title from shrinking */
}

.store-item-description {
    font-family: "redonda", sans-serif;
    font-size: 14px;
    color: #999;
    text-align: center;
    flex-grow: 1; /* This will make the description expand to fill available space */
    display: flex;
    align-items: center; /* Centers the text vertically within the growing space */
}

.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;  /* Keep right alignment */
    padding: 2vw;
    padding-right: 5vw;  /* Add extra padding on the right to pull it in from the edge */
    z-index: 1000;
    gap: 2vw;
}

.nav-button {
    font-family: "redonda", sans-serif;
    font-size: 16px;  /* Changed from min(1vw, 16px) to fixed 16px */
    color: white;
    background: none;
    border: 1px solid white;
    padding: 8px 16px;
    min-width: 80px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-button:hover {
    background: white;
    color: black;
}

.nav-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 8vw;  /* Increased from 5vw */
    background-color: black;
    z-index: 999;
}

.about-content, .contact-content {
    max-width: 800px;
    text-align: center;
    width: 100%;  /* Add this to ensure full width */
    display: flex;  /* Add this */
    flex-direction: column;  /* Add this */
    align-items: center;  /* Add this */
}

.about-content h2, .contact-content h2 {
    font-size: 48px;  /* Changed from 3vw */
    margin-bottom: 32px;  /* Changed from 2vw */
}

.about-content p {
    font-size: 18px;  /* Changed from 1.2vw */
    line-height: 1.6;
    margin-bottom: 24px;  /* Changed from 1.5vw */
}

.contact-info {
    font-size: 18px;  /* Changed from 1.2vw */
    line-height: 2;
}

.section-spacer {
    height: 300vh;  
    background-color: #000;
    position: relative;
    z-index: 1;
}

.snipcart-add-item {
    font-family: "redonda", sans-serif;
    font-size: 16px;
    color: white;
    background: #b31942;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.snipcart-add-item:hover {
    background: #8b1332;
}

.nav-button svg {
    vertical-align: middle;
}

/* Adjust the existing nav-button style */
.nav-button.snipcart-checkout {
    padding: 8px;
    min-width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add these carousel styles to your existing CSS */
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
    z-index: 2;
}

.carousel-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    :root {
        --base-size: 4vw;
        --our-flag-size: calc(var(--base-size) * 2.48);
        --stands-size: calc(var(--base-size) * 3.15);
        --for-size: calc(var(--base-size) * 2.655);
        --changing-text-size: calc(var(--base-size) * 1.5);
        --not-him-size: calc(var(--base-size) * 1.55);
        --underline-width: 35vw;
    }

    .section {
        position: relative;  /* Change from fixed to relative on mobile */
        height: auto;
        min-height: 100vh;
    }

    .section-spacer {
        height: 0;  /* Remove spacer on mobile */
    }

    .about-section, .contact-section, .store-section {
        min-height: 100vh;
        padding-top: 20vw;  /* Add space for the nav */
    }

    .content-container {
        flex-direction: column;
        gap: 2vw;
        padding: 0 5vw;
    }

    .flag-container {
        width: 80vw;
        max-width: 400px;
        margin: 0 auto;
    }

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

    .for-text {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1vw;
    }

    .underline-container {
        display: inline-flex;
        align-items: center;
        margin: 0;
    }

    /* Hide all changing text elements except US on mobile */
    .text-change {
        display: none !important;  /* Added !important to override any other styles */
    }
    .text-change[data-text="US"] {
        display: block !important;  /* Added !important to override any other styles */
        position: relative;
        bottom: auto;
        transform: none;
        opacity: 1 !important;  /* Added to ensure visibility */
    }

    .vertical-container {
        position: relative;
        right: 0;
        margin-top: 2vw;
        height: auto;
    }

    .vertical-text {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: calc(var(--not-him-size) * 0.8);
        margin-left: 2vw;
        display: inline-block;
    }

    .store-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4vw;
        padding: 4vw;
        justify-items: center;
    }

    .store-item {
        height: auto;
        min-height: 400px;
        padding: 3vw;  /* Increased padding for better spacing */
    }

    .store-item-image {
        width: 100%;
        aspect-ratio: 1/1;
        height: auto;
        object-fit: contain;  /* Changed from cover to contain */
        padding: 1vw;  /* Added padding around images */
    }

    .about-content, .contact-content {
        padding: 0 5vw;
    }

    .about-content h2, .contact-content h2 {
        font-size: 36px;
    }

    .about-content p, .contact-info {
        font-size: 16px;
    }

    .nav-menu {
        padding: 4vw;
        padding-right: 8vw;
        height: 15vw;  /* Match the background height */
        align-items: center;  /* Center buttons vertically */
    }

    .nav-button {
        font-size: 14px;
        padding: 6px 12px;
        min-width: 60px;
    }

    .nav-background {
        height: 15vw;  /* Increased from 12vw to ensure full coverage */
    }

    .carousel-container {
        aspect-ratio: 1/1;
        width: 100%;
        padding: 1vw;  /* Added padding around carousel */
    }

    .carousel-image {
        object-fit: contain;  /* Changed from cover to contain */
    }

    /* Adjust US text position on mobile */
    .text-change[data-text="US"] {
        display: block !important;
        position: relative;
        bottom: auto;
        transform: none;
        opacity: 1 !important;
        margin-bottom: 1vw;  /* Added margin to move it up from the line */
    }

    .underline-container {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding-bottom: 1vw;  /* Added padding to create space */
    }
}

@media (max-width: 480px) {
    .store-grid {
        grid-template-columns: 1fr;
        gap: 6vw;  /* Increased gap for better spacing */
    }

    .store-item {
        min-height: 350px;
    }

    .store-item-image {
        height: auto;  /* Changed from fixed height to auto */
        max-height: 180px;  /* Added max-height instead */
    }
}