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

:root {
    --color-black: #0E0E0E;
    --color-white: #F0F0F3;
    --color-grey: #D9D9D9;
    --color-card-bg: #151515;
    --shadow-light: rgba(255, 255, 255, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.4);
    --outer-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15), -10px -10px 20px #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inria Sans', sans-serif;
    background-color: var(--color-white);
    color: var(--color-black);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 480px;
    padding: 20px 20px;
    /* Reduced top padding */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Reduced gap from 30px */
}

header {
    margin-bottom: 10px;
    padding-left: 10px;
}

h1 {
    font-weight: 700;
    font-size: 36px;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: -1px;
}

.subtitle {
    font-size: 15px;
    font-weight: 400;
    margin-top: 5px;
    opacity: 0.8;
}

.links_grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.link_card {
    background-color: var(--color-card-bg);
    color: var(--color-white);
    border-radius: 20px;
    /* High radius for clay look */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    height: 100px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);

    /* Claymorphism Effects */
    box-shadow:
        20px 20px 40px rgba(0, 0, 0, 0.15),
        inset 4px 4px 8px rgba(255, 255, 255, 0.1),
        inset -4px -4px 8px rgba(0, 0, 0, 0.5);

    transition: all 0.3s ease;
}

.link_card:active {
    transform: scale(0.96);
    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.1),
        inset 4px 4px 8px rgba(255, 255, 255, 0.1),
        inset -4px -4px 8px rgba(0, 0, 0, 0.5);
}

.card_thumb {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    object-fit: cover;
    background-color: var(--color-grey);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.card_text {
    flex-grow: 1;
    padding-left: 20px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.arrow_btn {
    background-color: var(--color-grey);
    color: var(--color-black);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-weight: 700;
    margin-right: 5px;
    font-size: 20px;


    /* Inner clay feel for button */
    box-shadow:
        5px 5px 10px rgba(0, 0, 0, 0.2),
        inset 2px 2px 4px rgba(255, 255, 255, 0.8),
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Buy 1 Page Styles --- */

.nav_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    /* Fix container padding offset */
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;

    /* Increased height and side spacing */
    padding: 20px 25px;

    position: sticky;
    top: 0;
    background-color: var(--color-white);
    z-index: 100;

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav_bar.scrolled {
    /* Detach from top */
    top: 10px;

    /* Detach from sides - resetting margins to what looks like "detached"
       Since we used negative margins to go full width, "0" margin would actually bring it back *inside* the container padding (20px).
       But we want it slightly detached from edges.
       If container padding is 20px, and we use margin 0, it fits exactly in container.
       To detach, maybe we want it to be *smaller* than full width?
       Let's stick to margin 0 (which means it respects container padding so it looks like it "shrank" from full width)
       and add border radius.
    */
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;

    /* Liquid Glass Effect */
    background: rgba(255, 255, 255, 0.85);
    /* Semi-transparent */
    backdrop-filter: blur(12px) saturate(180%);

    /* Glossy Highlights (Wet Look) */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.1),
        /* Drop shadow */
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        /* Subtle border */
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* Top highlight */
}

.nav_logo {
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-black);
    text-transform: uppercase;
}

.menu_btn {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.menu_line {
    width: 100%;
    height: 3px;
    background-color: var(--color-black);
    border-radius: 2px;
}

.hero_card {
    background-color: var(--color-card-bg);
    /* Fallback */
    border-radius: 12px;
    height: 200px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    /* Reduced margin */

    /* Claymorphism */
    box-shadow:
        15px 15px 30px rgba(0, 0, 0, 0.2),
        inset 3px 3px 6px rgba(255, 255, 255, 0.1),
        inset -3px -3px 6px rgba(0, 0, 0, 0.5);
}

.hero_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.hero_text {
    position: relative;
    color: var(--color-white);
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    text-align: center;
    padding: 0 15px; /* Prevent edge touching */
    width: 100%;
}

.hero_text.long {
    font-size: 20px;
    line-height: 1.3;
}

.product_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    /* Consistent gap */
}

.product_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--color-black);
    cursor: pointer;
}

.product_image_container {
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1/1;

    /* Clay effect on white? Or maybe standard card style */
    /* Let's go with a subtle raised look for the image container */
    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.1),
        -5px -5px 15px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.price_row {
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.total_price_label {
    font-size: 10px;
    font-weight: 400;
    color: #555;
    text-transform: uppercase;
}

/* --- Mobile Menu Overlay --- */
.mobile_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile_menu.active {
    opacity: 1;
    pointer-events: auto;
}

.menu_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Match navbar height/padding feel */
    height: 40px;
}

.close_btn {
    font-size: 43px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    color: var(--color-black);
}

.menu_links {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.menu_link {
    text-decoration: none;
    color: var(--color-black);
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    /* Or uppercase if preferred, design usually shows capitalize/sentence case in list */
}