@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* =====================
   CSS RESET
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
   VARIABLES
===================== */
:root {
  --primary: #111;
  --accent: #D4AF37;
  --text-dark: #222;
  --text-light: #EAEAEA;
  --bg-light: #0B0B0B;
  --font-main: 'Segoe UI', Arial, sans-serif;
}

/* =====================
   GLOBAL STYLES
===================== */
.glass-card {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body {
  font-family: var(--font-main);
  color: var(--text-light);
  background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url("../../gallery/images/background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

/* =====================
   HEADER
===================== */
header {
  background: var(--bg-light); /* #0B0B0B */
  color: white;
  padding: 45px 8%;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the Nav */
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

header .logo {
  font-family: 'Cinzel', serif;
  font-size: 50px;
  letter-spacing: 6px;
  color: #D4AF37;
  background: #0B0B0B;
  font-weight: 700;
  text-transform: uppercase;
  
  /* Maintain positioning */
  position: absolute; /* Pin to left */
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex;
  align-items: center;
  gap: 15px;
}

header .logo img {
    height: 100px !important;
    width: auto;
}

/* Centered Pill Search Bar - NOW RECTANGLE */
.search-bar {
  display: flex !important; /* Force display */
  position: absolute;
  left: 30%;
  top: 50%;
  transform: translateY(-50%);
  width: 450px;
  max-width: 40%;
  height: 48px;
  background: white;
  border-radius: 5px; /* Rectangle */
  padding: 4px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  z-index: 1001;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding-left: 20px;
  font-size: 1rem;
  color: #333;
  outline: none;
  height: 100%;
}

.search-bar button {
  background: var(--accent); /* Gold */
  color: #0B0B0B;
  border: none;
  border-radius: 4px; /* Rectangle */
  padding: 0 35px;
  height: 100%;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.3s;
}

.search-bar button:hover {
  background: #b59218;
}

header nav {
  display: flex;
  align-items: center;
  gap: 30px;
  /* Pin Nav to Right */
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}



 /* Login Button Formatting */
header nav a[href="login.html"] {
  background-color: #0B0B0B;
  color: #EAEAEA;
  border: 1px solid #EAEAEA;
  padding: 8px 28px;
  border-radius: 5px;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.1rem;
  margin-left: 10px;
  
  /* Reset absolute position */
  position: static; 
  transform: none;
}

header nav a[href="login.html"]:hover {
  background: #D4AF37; /* Accent */
  color: #0B0B0B;
  border-color: #D4AF37;
}
header nav a {
  margin-left: 25px;
  color: white;
  font-weight: 500;
  font-size: 1.3rem;
  transition: color 0.3s;
}

header nav a:hover {
  color: var(--accent);
}

/* =====================
   HAMBURGER MENU
===================== */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}

/* =====================
   MEDIA QUERIES
===================== */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        padding: 20px 5%;
        justify-content: space-between;
    }

    header .logo {
        position: static;
        transform: none;
        font-size: 30px;
    }
    
    header .logo img {
        height: 60px !important;
    }

    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    header nav {
        position: fixed;
        left: -100%;
        top: 0; 
        flex-direction: column;
        background-color: var(--bg-light); 
        width: 100%;
        height: 100vh; /* Full screen menu */
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        z-index: 999; /* Below header content but above page */
        justify-content: center;
        padding-top: 80px; /* Space for close button if we had one, or just centering */
        transform: none; /* Reset desktop transform */
        right: auto; /* Reset desktop right */
    }

    header nav.active {
        left: 0;
    }

    header nav a {
        margin: 25px 0;
        font-size: 1.5rem;
    }

    /* Move Search Bar to bottom or hide/adjust */
    .search-bar {
        position: static;
        transform: none;
        order: 3; /* Move below logo and hamburger */
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
        display: flex;
        display: flex;
    }

    /* Responsive Typography & Spacing */
    .hero-content h1 {
        font-size: 2.5rem; /* Smaller hero text */
    }
    
    .hero-content p {
        font-size: 1rem;
    }

    .home-content, .products-content {
        padding: 40px 5%; /* Less padding on mobile */
    }

    .page-title, .carousel-title {
        font-size: 2rem;
    }

    /* Carousel Adjustments for Mobile */
    .carousel-slide {
        min-width: 260px; /* Smaller cards for mobile */
        max-width: 260px;
        height: 380px;
    }
    
    .carousel-track {
        padding: 20px; /* Reduce track padding */
        gap: 15px;
    }
}


/* =====================
   HERO BANNER
===================== */
.hero-banner {
  min-height: 90vh;
  background-image:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("../../gallery/images/banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

.hero-btn {
  padding: 14px 40px;
  background: var(--accent);
  color: white;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s, background 0.2s;
  display: inline-block;
}

.hero-btn:hover {
  background: #d00000;
  transform: translateY(-2px);
}

/* =====================
   HOME CONTENT
===================== */
.home-content {
  padding: 80px 10%;
  text-align: center;
}

.home-content h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--text-light);
}

.features {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.feature {
  background: #1a1a1a;
  color: var(--text-light);
  padding: 30px 40px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s;
}

.feature:hover {
  transform: translateY(-5px);
}

/* =====================
   FOOTER
===================== */
footer {
  background: var(--primary);
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
  margin-top: auto;
}

/* =====================
   PRODUCTS PAGE
===================== */
.products-content {
  padding: 80px 10%;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: var(--text-light);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  justify-content: center;
}

.product-card {
  background: #1a1a1a;
  color: var(--text-light);
  padding: 20px;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
  border-color: var(--accent);
}

.product-image-placeholder {
  width: 100%;
  height: 200px;
  background: #222;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-weight: 500;
}

.product-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--text-light);
}

.product-card .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 20px;
}

.btn-sm {
  padding: 10px 25px;
  font-size: 0.9rem;
}

/* =====================
   CAROUSEL
===================== */
.carousel-container {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Same background logic or transparent if blended */
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Ensure no cropping on carousel */
.carousel-track-container {
    width: 100%; /* Full width of parent */
    max-width: 1700px;
    height: 500px; /* Ensure height fits content + padding */
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    border-radius: 12px;
    display: flex;
    align-items: center;
    /* Remove padding that might cause issues, let track handle it */
    padding: 0; 
}

.carousel-track-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.carousel-track {
    display: flex;
    gap: 30px;
    /* Add padding to ensure first/last items aren't flush against edge if desired, 
       but for "no cropping" mostly we want enough track width. 
       Use enough padding so items aren't cut off by container bounds if container has padding. */
    padding: 20px 40px; 
    width: max-content; /* Ensure it takes full width of children */
}

.carousel-slide {
    min-width: 300px; /* Fixed width for consistency */
    max-width: 300px;
    height: 400px; /* Fixed height */
    flex: 0 0 auto;
    scroll-snap-align: center; /* Snaps to center */
    /* Reuse product card styles */
    margin: 0; /* consistent spacing comes from gap */
}

/* Carousel Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    color: var(--accent);
    border: 1px solid var(--accent);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.carousel-btn:hover {
    background: var(--accent);
    color: #000;
}

.carousel-btn.prev {
    left: 10px; /* Closer to edge */
}

.carousel-btn.next {
    right: 10px; /* Closer to edge */
}

.carousel-title {
    font-size: 2.5rem;
    color: var(--text-light);
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* CSS End */