@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
* { margin:0px; padding:0px; box-sizing:border-box;  }

/* .fbc-center-column stands for flexbox center column, it is a utility class that can be used to center content both horizontally and vertically in a column layout. */
/* .fbc-center-row stands for flexbox center row, it is a utility class that can be used to center content both horizontally and vertically in a row layout. */


:root  {  
        --white:#FFFFFF;
        --bright-yellow:#F5EDEA;
        --dark-yellow:#F0B556;
        --main-yellow:#FFD700;
        --header-height: 42px;
        --main-red:#EF4444;;
        --font-01:'Inter';
        --font-02:'Playfair Display';
        --font-03:'DM Sans';
        --m: 4rem;
        --header-height: 3.2rem;
        --first-color: #037486;
        --dark-color: #070D1F;
        --dark-color-alt: #282B3A;
        --white-color: #E6E7E9;
        --normal-font-size: 1rem;
        --small-font-size: .813rem;
        --glass-bg: rgba(0, 0, 0, 0.475); /* Deep black but translucent */
        --blur-strength: 12px;
        --z-fixed: 100;
}
body::-webkit-scrollbar { display: none; }

html,body { 
    margin: 0;
    padding: 0;
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; 
        -ms-overflow-style: none;
scrollbar-width: none;
    background-color: black; /* Note: when the header turns black, it will match the body color */
}
    
p,h1,h3,h4, h2 { text-decoration:none; color:var(--white-color);  }


header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px; /* Slightly taller for a premium feel */
    padding: 0 30px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    background-color: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother curve */
}

/* The Glass Effect on Scroll */
header.scrolled {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--blur-strength));
    -webkit-backdrop-filter: blur(var(--blur-strength)); /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle "edge" */
    height: 50px; /* Slight shrink effect on scroll */
}

/* Reset buttons */
button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0; /* Changed from right for better transform logic */
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 18, 0.95); /* Matched to your deep dark theme */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); /* Safari support */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Hardware-accelerated slide */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Premium easing curve */
}

.nav-overlay.open {
    transform: translateX(0);
}

/* ========================================
   CLOSE BUTTON
   ======================================== */
.close-btn {
    position: absolute;
    top: 24px;
    right: 32px;
    background: transparent;
    border: none;
    color: #a1a1aa;
    font-size: 3.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
}

.close-btn:hover {
    color: #ffffff;
    transform: rotate(90deg) scale(1.1); /* Nice interactive twist */
}

/* ========================================
   NAV LINKS & STAGGERED ANIMATION
   ======================================== */
.nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* Replaces margin for cleaner spacing */
}

.nav-links a {
    /* Force the custom font and weight */
    font-family: 'Barlow Condensed', sans-serif !important; 
    font-weight: 900 !important; /* 900 is usually the "Black" weight */
    text-transform: uppercase;   /* Ensures it stays capitalized */
    
    /* ... keep your other existing styles like size, color, animation ... */
    display: block;
    font-size: 3rem;
    color: #e4e4e7;
    text-decoration: none;
    letter-spacing: 5px;
    opacity: 0;
    transform: translateY(30px);
    transition: color 0.3s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover State */
.nav-links a:hover {
    color: #FFD700; /* Using your store's yellow accent */
    transform: scale(1.05) translateY(-2px);
}

/* THE MAGIC: When the menu opens, fade the links in and slide them up.
   We delay them slightly so they cascade in.
*/
.nav-overlay.open .nav-links a {
    opacity: 1;
    transform: translateY(0);
}

.nav-overlay.open .nav-links a:nth-child(1) { transition-delay: 0.15s; }
.nav-overlay.open .nav-links a:nth-child(2) { transition-delay: 0.25s; }
.nav-overlay.open .nav-links a:nth-child(3) { transition-delay: 0.35s; }

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: white;
}


#drop_down_menu_container 
    {
    height:68px; width:100%; margin:auto; display:flex; 
    align-items:center; gap:13px; margin-top:60px;
    justify-content:flex-end; 
}

/* =========================================
MAIN GRID
========================================= */

#products_show_case_container{

    max-width:1500px;
    min-width:364px;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:22px; margin-top:70px;
}



/* ===============================
FEATURED PRODUCT
=============================== */
#product_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Darker backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999; 
}

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

/* ========================================
   MODAL CONTAINER (The Card)
   ======================================== */
.modal_content {
    background: #1c1c1e; /* Deep Apple-style dark gray */
    width: 95%; border:1px solid #3f3f46;
    max-width: 420px;
    max-height: 100vh; /* Prevents it from going off-screen */
    overflow-y:auto; /* Scrollable if screen is tiny */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        animation: elitePulse 3s ease-in-out infinite;

}

@keyframes elitePulse {
    0% {
        border-color: rgba(125, 125, 125, 0.5);
        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
    }
    50% {
        /* Glows brighter in the middle of the cycle */
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
    }
    100% {
        border-color: rgba(125, 125, 125, 0.5);
        box-shadow: 0 0 0px rgba(255, 255, 255, 0);
    }
}

#product_modal.active .modal_content {
    transform: translateY(0) scale(1);
}

/* Hide scrollbar for a cleaner look */
.modal_content::-webkit-scrollbar { display: none; }
.modal_content { -ms-overflow-style: none; scrollbar-width: none; }

/* ========================================
   TOP IMAGE SECTION
   ======================================== */
.modal_image_wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    background: #000;
}

.modal_image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the space beautifully */
    border-radius: 12px 12px 0 0;
}

.close_modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #a20606;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}


/* The little grey tag from the screenshot */
.cdn_preview_badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.8);
    color: black;
    font-size: 0.7rem;
    font-family: sans-serif;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* ========================================
   DETAILS SECTION (Typography & Spacing)
   ======================================== */
.modal_details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal_title {
    color: white;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin: 0;
}


.modal_price {
    color: #FFD700; /* Yellow to match screenshot */
    font-size: 2.2rem;
    margin: 4px 0;
}

.modal_description {
    color: #a1a1aa;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ========================================
   VARIANT PILLS (Size / Color)
   ======================================== */
.modal_variant_group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal_variant_group h4 {
    color: white;
    font-size: 0.95rem;
    margin: 0;
}

.variant_pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pill {
    background: #27272a; /* Dark gray */
    border: 1.5px solid transparent;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill:hover {
    background: #3f3f46;
}

.pill.active {
    border-color: #FFD700; /* Yellow border for selected state */
    background: #FFD400; color: #0F0F12;
}

#products_show_case_main_child_container {
    width: 100%;
    height: 420px; /* Slightly taller for more impact */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

/* ========================================
    THE KEN BURNS ENGINE
   ======================================== */
.showcase-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1); /* Starts slightly zoomed out */
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 4s linear; /* The slow crawl */
    z-index: 0;
}

.showcase-slide.active {
    opacity: 1;
    transform: scale(1); /* Zooms "in" slowly while visible */
    z-index: 1;
}

/* ========================================
   THE HUD (TEXT & LABELS)
   ======================================== */
.showcase-hud {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glass-tag {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    color: white;
    font-size: 0.7rem;
    letter-spacing: 2px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFD700;
    animation: blink 1.5s infinite;
}

.hud-title {
    color: white;
    font-size: 2.2rem;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s ease;
    position: absolute; /* Stacked on top of each other */
}

.hud-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   PROGRESS & OVERLAYS
   ======================================== */
.slide-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 20;
}

.slide-progress-bar {
    height: 100%;
    width: 0%;
    background: #FFD700;
    transition: width 3s linear; /* Syncs with your 3s swap */
}

.cinematic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
    z-index: 5;
    pointer-events: none;
}

@keyframes blink { 
    50% { opacity: 0.3; } 
}


.whatsapp_container {
    margin-top: 24px;
    width: 100%; 
}

.whatsapp_btn {
    background: #25D366; /* Official WhatsApp Green */
    color: white;
    border: none;
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    position: relative; /* Needed to anchor the SVG */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px; margin:a;
}

.whatsapp_btn svg {
    position: absolute;
    left: 24px; /* Pins the icon to the left side */
}

.whatsapp_btn:hover {
    background: #1EBE57; /* Slightly darker green on hover */
    transform: translateY(-2px);
}

/* Disabled State (Before size is picked) */
.whatsapp_btn.disabled {
    background: #3f3f46;
    color: #a1a1aa;
    cursor: not-allowed;
    transform: none;
}

.whatsapp_btn.disabled svg {
    opacity: 0.5;
}

/* Shake Animation for when they try to click without a size */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}
/* LIGHT SWEEP */

#products_show_case_main_child_container::after{

    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:50%;
    height:100%;

    background:linear-gradient(
        110deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );

    transform:skewX(-25deg);
    transition:all 1.1s ease;
    z-index:2;
}

#products_show_case_main_child_container:hover::after{
    left:130%;
}



/* The "Limited Edition" Badge */
.product_badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #FFD700; /* Yellow */
    color: black;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    font-family: 'Barlow Condensed', sans-serif;
    z-index: 10;
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  /* Transparent Black with a "Glass" blur effect */
  background: rgba(0, 0, 0, 0.7); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

.marquee-track {
  display: flex;
  width: max-content; /* Vital for the seamless loop */
  animation: scroll-seamless 20s linear infinite;
}

.marquee-track span {
    color: #ffffff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-right: 50px; /* Space between the repeated messages */
    white-space: nowrap;
}

/* THE SEAMLESS LOOP LOGIC */
@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    /* We move it exactly half of its total width because we duplicated the content */
    transform: translateX(-50%);
  }
}

/* Smooth Pause on Hover */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
  cursor: pointer;
}
/* Grayscale effect for sold out items */
.sold_out_img img {
    filter: grayscale(100%) brightness(0.6);
}

/* The Sold Out Button inside the Modal */
.sold_out_btn {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 2px solid #3f3f46;
    color: #ef4444; /* Red text */
    border-radius: 99px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: not-allowed;
    text-transform: uppercase;
}

/* Optional: Make the card in the main grid look sold out too */
.products_box.is_sold_out {
    opacity: 0.7;
    filter: grayscale(0.8);
}

/* ======================
FEATURED CONTENT
====================== */

.featured_content{

    position:absolute;
    bottom:22px;
    left:22px;

    z-index:3;

    display:flex;
    flex-direction:column;
    gap:8px;
}

/* label */

.featured_label{

    font-size:11px;
    letter-spacing:1px;

    background:#FFD400;
    color:black;

    padding:4px 10px;

    border-radius:20px;

    width:max-content;
}

/* title */

.featured_title{

    font-size:22px;
    font-weight:700;

    color:white;

    line-height:1.2;
}

/* button */

.featured_cta{

    margin-top:6px;
    width:220px;
    height:36px;
    border-radius:20px;
    border:1px solid #FFD400;
    background:transparent;
    color:#FFD400;
    font-size:13px;
    cursor:pointer;
    transition:.25s;
}

.featured_cta:hover{

    background:#FFD400;
    color:black;
}


.featured_cta:active{

    background:#FFD400;
    color:black;
}
/* ===============================
PRODUCT CARD
=============================== */

.products_box{

    width:calc(50% - 11px);
    height:280px;
    background:#0F0F12;
    border-radius:12px;
    border:1px solid #27272A;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.25s;
}

.products_box:hover{

    border-color:#FFD400;
    box-shadow:0 8px 20px rgba(0,0,0,.45);
}


/* ===============================
PRODUCT IMAGE
=============================== */

.product_image{

    flex:1;
    background-size:cover; background-repeat:no-repeat;
    background-position:center;
    transition:.4s;
}

.products_box:hover .product_image{ filter:brightness(1.1); }


/* ===============================
PRODUCT INFO
=============================== */

.product_info{

    height:64px;
    background:#18181B;
    padding:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.product_name{

    font-size:14px;
    color:#E4E4E7;
    margin-bottom:4px;
}

.product_price{

    font-size:13px;
    color:#FFD400;
    font-weight:600;
}




.sort-dropdown{
    position:relative;
    width:200px;
    font-family:Inter, sans-serif;
}

/* Trigger button */

.sort-trigger{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    background:#111;
    color:#fff;
    border:1px solid #2a2a2a;
    border-radius:10px;
    cursor:pointer;
    transition:all .25s ease;
}

.sort-trigger:hover{
    border-color:#FFD400;
}

/* arrow */

.sort-arrow{
    transition:transform .25s ease;
}

.sort-dropdown.active .sort-arrow{
    transform:rotate(180deg);
}

/* menu */

.sort-menu{
    position:absolute;
    top:55px;
    left:0;
    width:100%;
    background:#111;
    border:1px solid #2a2a2a;
    border-radius:10px;
    overflow:hidden;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .25s ease;
    z-index:20;
}

/* open state */

.sort-dropdown.active .sort-menu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* options */

.sort-option{
    padding:14px 16px;
    color:#bbb;
    cursor:pointer;
    transition:all .2s ease;
}

.sort-option:hover{
    background:#1a1a1a;
    color:#fff;
}