/* ================================================================
   QUARLOOM APPARELS — STYLESHEET
   style.css
   ================================================================

   TABLE OF CONTENTS:
   1.  CSS Variables (Colors, Fonts)
   2.  Reset & Base
   3.  Scrollbar
   4.  Page Routing System
   5.  Spotlight Background Effect
   6.  Navbar
   7.  Hero Section
   8.  Section Headers
   9.  Categories Grid
   10. About Section
   11. Trust Strip
   12. Footer
   13. Floating Buttons
   14. Back Button
   15. Sub-page Hero
   16. Subcategory Grid
   17. Products Grid
   18. Product Detail Page
   19. Accordion
   20. Quote Modal & Form
   21. Animations
   22. Responsive / Mobile

================================================================ */


/* ----------------------------------------------------------------
   1. CSS VARIABLES
   Updated to Neon Red for Quarloom Apparels
---------------------------------------------------------------- */
:root {
  --black:       #000000;          /* Deepest black for contrast */
  --neon-red:    #FF3131;          /* Your specific Neon Red hex */
  --red-dim:     #8B0000;          /* Dark red for scrollbars and accents */
  --white:       #f5f5f0;          
  --grey:        #9a9a9a;          
  --card-bg:     rgba(255,255,255,0.02);  
  --border:      rgba(255, 49, 49, 0.25); /* Subtle neon red border */
}

/* ----------------------------------------------------------------
   2. RESET & BASE
---------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  cursor: default;
}


/* ----------------------------------------------------------------
   3. SCROLLBAR
---------------------------------------------------------------- */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #0a0a0a; }
::-webkit-scrollbar-thumb  { background: var(--red-dim); border-radius: 3px; }


/* ----------------------------------------------------------------
   4. PAGE ROUTING SYSTEM
   Pages are shown/hidden using JavaScript by toggling .active
---------------------------------------------------------------- */
.page          { display: none; min-height: 100vh; }
.page.active   { display: block; }

/* Shared page wrapper padding (for non-home pages) */
.page-wrapper { position: relative; z-index: 1; padding-top: 72px; }


/* ----------------------------------------------------------------
   5. TV RED SCANLINE BACKGROUND EFFECT
   The running red beam that moves across the background
---------------------------------------------------------------- */
.spotlight-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  background: #000; /* Keeps the base layer black */
  overflow: hidden;
}

/* This creates the actual "Beam" */
.spotlight-bg::before {
  content: '';
  position: absolute;
  top: -100%; left: -100%;
  width: 300%; height: 300%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 49, 49, 0.05) 48%,
    rgba(255, 49, 49, 0.4) 50%, /* The bright center of the beam */
    rgba(255, 49, 49, 0.05) 52%,
    transparent 55%
  );
  animation: scan-running 8s linear infinite; /* Adjust '8s' for speed */
}

/* The animation that moves the beam from one corner to the other */
@keyframes scan-running {
  0% { transform: translate(-25%, -25%); }
  100% { transform: translate(25%, 25%); }
}

/* Optional: Adding a static faint TV "flicker" texture */
.spotlight-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0px,
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

/* ----------------------------------------------------------------
   6. NAVBAR
---------------------------------------------------------------- */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 72px;
  background: rgba(4,4,4,0.85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-logo-icon {
  width: 40px; height: 40px;
  border: 1.5px solid var(--neon-red);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--neon-red);
  background: rgba(255, 49, 49, 0.08);
  letter-spacing: 1px;
}

.nav-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--white);
}

/* Category nav items */
.nav-categories {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-item { position: relative; }

.nav-link {
  color: var(--grey);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
}
.nav-link:hover { color: var(--white); }

/* Dropdown menu */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(8,8,8,0.97);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 240px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s;
  z-index: 999;
  backdrop-filter: blur(20px);
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 20px;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}
.dropdown-item:hover {
 color: var(--neon-red); /* Text turns red */
  background: rgba(255, 49, 49, 0.08); /* Subtle red background tint */
  padding-left: 28px; /* Smooth slide-in effect */
}

/* Inquire Now button */
.nav-cta {
  background: var(--neon-red);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: #ff5e5e;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 49, 49, 0.6);
}


/* ----------------------------------------------------------------
   7. HERO SECTION
---------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 72px;
  background: transparent !important;
}

/* Slideshow wrapper */
.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.active { opacity: 1; }

/* Dark gradient overlay on slides */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(4,4,4,0.3) 0%,
    rgba(4,4,4,0.6) 60%,
    rgba(4,4,4,0.95) 100%);
}

/* ✏️ EDIT: Replace these gradients with real background images:
   .hero-slide:nth-child(1) { background-image: url('images/hero1.jpg'); }
*/
.hero-slide:nth-child(1) { background: linear-gradient(135deg, #0a2010 0%, #040404 50%, #061a0c 100%); }
.hero-slide:nth-child(2) { background: linear-gradient(135deg, #040404 0%, #082012 50%, #040404 100%); }
.hero-slide:nth-child(3) { background: linear-gradient(135deg, #061a0c 0%, #040404 40%, #0a2010 100%); }
.hero-slide:nth-child(4) { background: linear-gradient(135deg, #040404 0%, #061a0c 60%, #040404 100%); }

/* Subtle grid texture on slides */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(29,185,84,0.015) 2px, rgba(29,185,84,0.015) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(29,185,84,0.015) 2px, rgba(29,185,84,0.015) 4px);
}

/* Large background word on each slide */
.hero-slide-bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  color: rgba(255, 49, 49, 0.04);
  letter-spacing: 10px;
  z-index: 0;
}

/* Hero text content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  padding: 0 24px;
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--neon-red);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 10vw, 130px);
  line-height: 0.95;
  letter-spacing: 4px;
  color: var(--white);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
}
.hero-title span { color: var(--neon-red); }

.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--grey);
  max-width: 560px;
  margin: 0 auto 44px;
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
}

.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 0.8s 0.9s forwards;
}

/* Reusable buttons */
.btn-primary {
  background: var(--neon-red);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.25s;
}
.btn-primary:hover {
  background: #25d966;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 49, 49, 0.45);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.25s;
}
.btn-outline:hover {
  border-color: var(--neon-red);
  color: var(--neon-red);
}

/* Slideshow dots */
.hero-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.hero-dot.active {
  background: var(--neon-red);
  width: 40px;
}


/* ----------------------------------------------------------------
   8. SECTION HEADERS
---------------------------------------------------------------- */
.section-header { text-align: center; margin-bottom: 64px; }

.section-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--neon-red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
}

.section-line {
  width: 60px;
  height: 2px;
  background: var(--neon-red);
  margin: 20px auto 0;
}


/* ----------------------------------------------------------------
   9. CATEGORIES GRID (Home Page)
---------------------------------------------------------------- */
.categories-section {
  position: relative;
  z-index: 1;
  padding: 120px 48px;
  overflow: visible; /* Change from hidden/unset to visible */
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates two columns for a 2x2 look */
  gap: 15px; /* Adds space so cards can expand without touching */
  max-width: 900px; /* Makes the grid tighter and more 'square' */
  margin: 0 auto;
  overflow: visible; /* Essential so the hover effect isn't cut off */
}

.cat-card {
  position: relative;
  aspect-ratio: 1 / 1; /* Forces the card into a perfect square */
  overflow: visible; /* Allows the hover growth to pop out */
  cursor: pointer;
  background: var(--card-bg);
  border: 1px solid var(--border);
  /* The timing for the 'takeover' growth */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s, border-color 0.4s;
  z-index: 1;
}
/* THE TAKEOVER: Card grows and glows on hover */
.cat-card:hover {
  transform: scale(1.08); /* Makes the card grow slightly larger */
  z-index: 10; /* Brings the card to the front of everything else */
  box-shadow: 0 0 35px rgba(255, 49, 49, 0.5); /* Neon red shadow glow */
  border-color: var(--neon-red); /* Highlights the border in bright red */
}

/* Image Brightness: Dims the images until you hover over them */
.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6; /* Starts slightly dark */
  transition: opacity 0.4s ease;
}

.cat-card:hover img {
  opacity: 1; /* Brightens up to full color on hover */
}
/* Dark gradient overlay */
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4,4,4,0.95) 0%, rgba(4,4,4,0.4) 50%, transparent 100%);
  transition: all 0.4s;
}
.cat-card:hover::before {
  background: linear-gradient(to top, rgba(4,4,4,0.98) 0%, rgba(4,4,4,0.6) 60%, rgba(4,4,4,0.2) 100%);
}

/* Image or placeholder */
.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}
.cat-card:hover img { transform: scale(1.07); }

/* ✏️ PLACEHOLDER — remove .cat-img-placeholder when you have real images */
.cat-img-placeholder {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: rgba(29,185,84,0.06);
  letter-spacing: 4px;
  transition: transform 0.6s ease;
}
.cat-card:hover .cat-img-placeholder { transform: scale(1.07); }

.cat-card:nth-child(1) .cat-img-placeholder { background: linear-gradient(160deg, #0d2e1a, #040404 60%, #071a0f); }
.cat-card:nth-child(2) .cat-img-placeholder { background: linear-gradient(160deg, #040404, #0a2010 60%, #040404); }
.cat-card:nth-child(3) .cat-img-placeholder { background: linear-gradient(160deg, #0a1e0a, #040404 50%, #0d2810); }
.cat-card:nth-child(4) .cat-img-placeholder { background: linear-gradient(160deg, #040404, #082010 60%, #040404); }

/* Card text overlay */
.cat-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 20px; /* Reduced padding for the 2x2 square look */
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.cat-number {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 8px;
}

.cat-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 4px;
}

.cat-count {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grey);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Hover-reveal "Explore Now" button */
.cat-btn {
  display: inline-block;
  padding: 8px 20px;
  background: var(--green);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  font-family: 'Montserrat', sans-serif;
}
.cat-card:hover .cat-btn {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------------
   10. ABOUT SECTION (Home Page)
---------------------------------------------------------------- */
.about-section {
  position: relative;
  z-index: 1;
  padding: 120px 48px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-visual { position: relative; }

/* 3. Center the image in the box and update colors */
.about-box {
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a0000, #000000 70%); /* Changed green tint to dark red/black */
  border: 1px solid var(--border); /* This will now be red because of your Step 1 variable change */
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
/* 1. Hide the old text letter 'Q' */
.about-box-text {
  display: none;
}
/* 2. Style the new logo image */
.about-main-img {
  width: 75%;             /* This controls how big the logo looks */
  height: auto;
  object-fit: contain;    /* This prevents the logo from stretching */
  z-index: 1;
  /* Adds a subtle neon red glow to your logo */
  filter: drop-shadow(0 0 12px rgba(255, 49, 49, 0.4)); 
}
.about-accent {
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  border: 2px solid var(--green);
  border-radius: 4px;
  z-index: -1;
}

.about-accent2 {
  position: absolute;
  bottom: -20px; left: -20px;
  width: 60px; height: 60px;
  background: var(--green);
  border-radius: 4px;
  opacity: 0.15;
}

.about-tag {
  position: absolute;
  bottom: 32px; left: 32px; right: 32px;
  background: rgba(4,4,4,0.9);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  backdrop-filter: blur(10px);
}

.about-tag-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.about-tag-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
}

.about-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.about-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 28px;
}

.about-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--grey);
  margin-bottom: 32px;
  font-style: italic;
}

.about-stats {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--green);
  letter-spacing: 2px;
}

.stat-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grey);
  font-weight: 600;
  text-transform: uppercase;
}


/* ----------------------------------------------------------------
   11. TRUST STRIP (Home Page)
---------------------------------------------------------------- */
.trust-strip {
  position: relative;
  z-index: 1;
  padding: 40px 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(29,185,84,0.03);
  display: flex;
  justify-content: center;
  gap: 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 40px;
  border-right: 1px solid var(--border);
  flex: 1;
  max-width: 240px;
}
.trust-item:last-child { border-right: none; }

.trust-icon { font-size: 22px; }

.trust-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}

.trust-sub {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--grey);
  text-transform: uppercase;
  margin-top: 2px;
}


/* ----------------------------------------------------------------
   12. FOOTER
---------------------------------------------------------------- */
footer {
  position: relative;
  z-index: 1;
  background: #020202;
  border-top: 1px solid var(--border);
  padding: 80px 48px 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.footer-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 4px;
  color: var(--white);
  margin-bottom: 12px;
}

.footer-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--green);
  margin-bottom: 24px;
}

.footer-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--grey);
}

.footer-heading {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-contact-icon { font-size: 14px; margin-top: 1px; }

.footer-contact-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--grey);
}

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

.social-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--grey);
  background: var(--card-bg);
}
.social-btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(29,185,84,0.1);
  transform: translateY(-2px);
}

.footer-quick-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.footer-link-btn {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  color: var(--grey);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  transition: color 0.2s;
  padding: 0;
}
.footer-link-btn:hover { color: var(--green); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy  { font-size: 11px; color: rgba(154,154,154,0.5); letter-spacing: 1px; }
.footer-made  { font-size: 11px; color: rgba(154,154,154,0.3); letter-spacing: 1px; }


/* ----------------------------------------------------------------
   13. FLOATING CONTACT BUTTONS
---------------------------------------------------------------- */
.floating-btns {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.float-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  text-decoration: none;
}

.float-wa { background: #25d366; color: #fff; }
.float-wa:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }

.float-em { background: var(--neon-red); color: #000; }
.float-em:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(255, 49, 49, 0.5); }


/* ----------------------------------------------------------------
   14. BACK BUTTON
---------------------------------------------------------------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin-bottom: 40px;
  transition: color 0.2s;
}
.back-btn::before { content: '←'; font-size: 14px; }
.back-btn:hover { color: var(--green); }


/* ----------------------------------------------------------------
   15. SUB-PAGE HERO (Subcategory, Products, Product Detail pages)
---------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: 160px 48px 80px;
  background: linear-gradient(to bottom, rgba(29,185,84,0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(29,185,84,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.page-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(50px, 7vw, 100px);
  letter-spacing: 4px;
  color: var(--white);
  line-height: 0.95;
  margin-bottom: 20px;
}

.page-hero-sub {
  font-size: 14px;
  color: var(--grey);
  max-width: 500px;
  line-height: 1.7;
}

/* Breadcrumb trail */
.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grey);
  text-transform: uppercase;
  font-weight: 600;
}

.breadcrumb-link {
  cursor: pointer;
  color: var(--grey);
  transition: color 0.2s;
}
.breadcrumb-link:hover { color:var(--neon-red); }
.breadcrumb-sep   { color: var(--neon-red); }
.breadcrumb-active { color: var(--white); }


/* ----------------------------------------------------------------
   16. SUBCATEGORY GRID
---------------------------------------------------------------- */
.subcat-section {
  position: relative;
  z-index: 1;
  padding: 80px 48px;
}

.subcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
}

.subcat-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
}

/* ✏️ PLACEHOLDER — replace with real <img> tags */
.subcat-img-placeholder {
  width: 100%; height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  background: linear-gradient(160deg, #0d2e1a, #040404 70%);
  transition: transform 0.5s ease;
}
.subcat-card:hover .subcat-img-placeholder { transform: scale(1.05); }

.subcat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4,4,4,0.98) 0%, rgba(4,4,4,0.3) 60%, transparent 100%);
}

.subcat-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 24px 22px;
}

.subcat-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 12px;
}

/* Hover-reveal "View Products" button */
.subcat-btn {
  display: inline-block;
  padding: 7px 18px;
  background: var(--neon-red);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s;
  cursor: pointer;
  border: none;
  font-family: 'Montserrat', sans-serif;
}
.subcat-card:hover .subcat-btn {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------------
   17. PRODUCTS GRID
---------------------------------------------------------------- */
.products-section {
  position: relative;
  z-index: 1;
  padding: 80px 48px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
}

.product-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg);
}

/* ✏️ PLACEHOLDER — replace with real <img> tags */
.product-img-placeholder {
  width: 100%; height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(160deg, #0a2010, #040404 70%);
  transition: transform 0.5s ease;
}
.product-card:hover .product-img-placeholder { transform: scale(1.07); }

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4,4,4,0.97) 0%, rgba(4,4,4,0.2) 60%, transparent 100%);
}

.product-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 22px 18px;
}

.product-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 12px;
}

/* Hover-reveal "See Product" button */
.product-btn {
  display: inline-block;
  padding: 7px 18px;
  background: transparent;
  color: var(--neon-red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s;
  cursor: pointer;
  border: 1px solid var(--green);
  font-family: 'Montserrat', sans-serif;
}
.product-card:hover .product-btn {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------------
   18. PRODUCT DETAIL PAGE
---------------------------------------------------------------- */
.product-detail-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 0;
}

.product-detail-section {
  position: relative;
  z-index: 1;
  padding: 80px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ✏️ EDIT: Replace the emoji placeholder with a real image */
.product-detail-img {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #0d2e1a, #040404 70%);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  position: sticky;
  top: 100px;
  overflow: hidden;
}
.product-detail-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(29,185,84,0.1) 0%, transparent 60%);
}

.product-detail-category {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.product-detail-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 24px;
}

.product-detail-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--grey);
  margin-bottom: 40px;
}

/* For patches category — italic serif style */
.product-detail-desc.patch-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
}

.product-detail-line {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin-bottom: 32px;
}

.product-cta {
  width: 100%;
  padding: 16px;
  background:var(--neon-red);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin-top: 32px;
  transition: all 0.25s;
}
.product-cta:hover {
  background: #25d966;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(29,185,84,0.4);
}


/* ----------------------------------------------------------------
   19. ACCORDION (Fabric Type & Customization)
---------------------------------------------------------------- */
.accordion-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--card-bg);
  cursor: pointer;
  border: none;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.2s;
}
.accordion-header:hover { background: rgba(29,185,84,0.06); }

.accordion-icon {
  font-size: 18px;
  color: var(--neon-red);
  transition: transform 0.3s;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-item.open .accordion-body { max-height: 300px; }

.accordion-content {
  padding: 20px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--grey);
}

.accordion-content ul { list-style: none; padding: 0; }
.accordion-content ul li {
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}
.accordion-content ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color:var(--neon-red);
}

.accordion-note {
  font-size: 11px;
  color: rgba(154,154,154,0.6);
  font-style: italic;
}


/* ----------------------------------------------------------------
   20. QUOTE MODAL & FORM
---------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #080808;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 48px;
  max-width: 560px;
  width: 100%;
  position: relative;
  animation: fadeUp 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  color: var(--grey);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }

.modal-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--neon-red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 32px;
}

.form-group { margin-bottom: 20px; }

.form-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grey);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  transition: border 0.2s;
  outline: none;
}
.form-input:focus { border-color: var(--neon-red); }
.form-input::placeholder { color: rgba(154,154,154,0.4); }

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  width: 100%;
  padding: 14px;
  background:  var(--neon-red);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin-top: 8px;
  transition: all 0.25s;
}
.form-submit:hover { background: #25d966; }

/* Form success message */
.form-success { text-align: center; padding: 20px 0; }
.form-success-icon { font-size: 48px; margin-bottom: 16px; }
.form-success-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--green);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.form-success-text { font-size: 13px; color: var(--grey); line-height: 1.7; }


/* ----------------------------------------------------------------
   21. ANIMATIONS
---------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ----------------------------------------------------------------
   22. RESPONSIVE / MOBILE
---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .categories-grid      { grid-template-columns: repeat(2, 1fr); }
  .about-section        { grid-template-columns: 1fr; gap: 40px; }
  .about-visual         { display: none; }
  .footer-grid          { grid-template-columns: 1fr 1fr; }
  nav                   { padding: 0 24px; }
  .nav-categories       { display: none; } /* Hidden on tablet — add hamburger menu if needed */
}

@media (max-width: 768px) {
  nav                        { padding: 0 16px; height: 60px; }
  .hero-title                { font-size: 52px; }
  .categories-section,
  .subcat-section,
  .products-section          { padding: 80px 16px; }
  .categories-grid           { grid-template-columns: repeat(2, 1fr); }
  .subcat-grid               { grid-template-columns: repeat(2, 1fr); }
  .products-grid             { grid-template-columns: repeat(2, 1fr); }
  .product-detail-grid       { grid-template-columns: 1fr; }
  .product-detail-img        { position: relative; top: 0; }
  .footer-grid               { grid-template-columns: 1fr; }
  .trust-strip               { flex-wrap: wrap; }
  .trust-item                { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 24px; max-width: 100%; width: 50%; }
  .about-stats               { gap: 24px; }
  footer                     { padding: 60px 20px 30px; }
  .page-hero                 { padding: 120px 20px 60px; }
  .product-detail-top        { padding: 40px 20px 0; }
  .product-detail-section    { padding: 40px 20px; }
  .modal-box                 { padding: 28px 20px; }
  .form-row                  { grid-template-columns: 1fr; }
}