/* =========================================
   1. ANIMATIONS (The Sales Drivers)
   ========================================= */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slowPan {
  0% { background-position: center top; }
  50% { background-position: center bottom; }
  100% { background-position: center top; }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 5px rgba(255, 69, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 69, 0, 0.6); }
  100% { box-shadow: 0 0 5px rgba(255, 69, 0, 0.2); }
}

/* =========================================
   2. CORE STYLES
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-decoration: none;
}

body {
  background-color: #080808;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
}

/* =========================================
   3. HEADER (Modern Floating Glass)
   ========================================= */

header {
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(15px);
  padding: 15px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

header h1 {
  font-size: 1.8rem;
  color: #ff4500; 
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
}

/* LOGO FIX: Perfect Circle */
header .logo {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Makes it circular */
  border: 2px solid #ff4500;
  padding: 2px;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.logo-container:hover .logo {
  transform: rotate(360deg);
}

nav a {
  margin-left: 25px;
  color: #bbb;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

nav a:hover {
  color: #ff4500;
  text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

/* =========================================
   3.5 SHIPPING BANNER
   ========================================= */

.shipping-banner {
  background: linear-gradient(90deg, rgba(255, 69, 0, 0.15) 0%, rgba(255, 69, 0, 0.08) 50%, rgba(255, 69, 0, 0.15) 100%);
  border-top: 1px solid rgba(255, 69, 0, 0.2);
  border-bottom: 1px solid rgba(255, 69, 0, 0.2);
  padding: 16px 20px;
  position: relative;
  z-index: 100;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.banner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  color: #ff4500;
}

.banner-icon {
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
}

.banner-text {
  white-space: nowrap;
}

.banner-divider {
  width: 2px;
  height: 24px;
  background: rgba(255, 69, 0, 0.3);
}

@media (max-width: 600px) {
  .shipping-banner {
    padding: 12px 16px;
  }
  
  .banner-content {
    gap: 20px;
  }
  
  .banner-item {
    font-size: 0.8rem;
    letter-spacing: 1px;
  }
  
  .banner-icon {
    font-size: 1.1rem;
  }
  
  .banner-divider {
    height: 20px;
  }
}

@media (max-width: 480px) {
  .banner-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .banner-divider {
    display: none;
  }
  
  .banner-item {
    font-size: 0.75rem;
  }
}

/* =========================================
   4. HERO SECTION
   ========================================= */

.hero {
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-attachment: fixed; */
  /* animation: slowPan 20s linear infinite; */
  position: relative;
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.hero h2 {
  position: relative;
  z-index: 2; /* Ensure text is above Vanta.js canvas */
  font-size: 4rem;
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -2px;
  animation: fadeInUp 1s ease-out;
  text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* =========================================
   5. PRODUCT GRID
   ========================================= */

.products {
  padding: 20px 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.product {
  background: #141414;
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: fadeInUp 0.8s ease-out backwards;
}

.product:hover {
  transform: translateY(-15px);
  border-color: rgba(255, 69, 0, 0.4);
  background: #1a1a1a;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.product img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 20px;
  transition: all 0.4s ease;
}

.product:hover img {
  transform: scale(1.03);
}

.product h3 {
  color: #ff4500;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.product p {
  color: #888;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

/* =========================================
   6. SEE MORE SECTION (Centered Button)
   ========================================= */

.see-more-container {
  padding: 10px 0 80px;
  background: transparent;
  display: flex;         /* Use Flex to center */
  justify-content: center; 
  align-items: center;
  position: relative;
  z-index: 1;
}

.see-more-btn {
  background: linear-gradient(135deg, #ff4500 0%, #cc3700 100%);
  color: #fff;
  padding: 18px 45px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3);
  transition: all 0.3s ease;
  animation: glowPulse 3s infinite;
  border: none;
  cursor: pointer;
}

.see-more-btn:hover {
  transform: scale(1.1);
  background: #fff;
  color: #ff4500;
}

/* =========================================
   7. FOOTER
   ========================================= */

.footer {
  background: rgba(5, 5, 5, 0.7); /* Semi-transparent for Vanta effect */
  color: #666; /* Subdued text color */
  padding: 60px 20px;
  text-align: center;
  margin-top: 80px;
  border-top: 1px solid rgba(255, 69, 0, 0.1); /* Very subtle orange line */
  position: relative;
  overflow: hidden;
}

/* Subtle background glow behind the footer content */
.footer::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.1) 0%, transparent 70%);
  z-index: 0;
}

.footer p {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.footer a {
  color: #ff4500;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.footer a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
}

/* SOCIAL ICONS SECTION */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px; /* More space between icons */
  margin-top: 25px;
  position: relative;
  z-index: 1;
}

.social-icons img {
  width: 28px;
  height: 28px;
  filter: invert(1) opacity(0.3); /* Greyish-white icons */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

/* High-Impact Hover State */
.social-icons img:hover {
  opacity: 1;
  transform: translateY(-10px) scale(1.2); /* Lift and grow */
  filter: invert(48%) sepia(89%) saturate(4500%) hue-rotate(3deg) brightness(101%) contrast(106%) drop-shadow(0 5px 15px rgba(255, 69, 0, 0.4));
}

/* Bottom copyright text */
.footer .copyright {
  margin-top: 30px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 2px;
}

.cart-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease-out;
}

.cart-modal-content {
  background: linear-gradient(160deg, #141414 0%, #0f0f0f 100%);
  margin: 6% auto;
  padding: 0;
  border: 1px solid #2a2a2a;
  width: 88%;
  max-width: 520px;
  border-radius: 20px;
  position: relative;
  box-shadow: 0 0 60px rgba(255, 69, 0, 0.12), 0 20px 60px rgba(0,0,0,0.8);
  animation: slideInTop 0.35s cubic-bezier(.22,.68,0,1.2);
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInTop {
  from { transform: translateY(-40px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}

/* ── Cart header bar ── */
.cart-modal-content h2 {
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 22px 24px 18px;
  margin: 0;
  border-bottom: 1px solid #1e1e1e;
  background: rgba(255, 69, 0, 0.04);
}

/* ── Close button ── */
.close-button {
  position: absolute;
  top: 14px;
  right: 20px;
  color: #555;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
  cursor: pointer;
  z-index: 2;
}
.close-button:hover {
  color: var(--neon-orange);
  transform: rotate(90deg);
  text-decoration: none;
}

/* ── Scrollable items area ── */
.cart-items {
  max-height: 320px;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

/* ── Single cart row ── */
.cart-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #1a1a1a;
  transition: border-color 0.2s;
}
.cart-item:hover { border-color: #2a2a2a; }
.cart-item:last-child { margin-bottom: 0; }

.cart-item img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #222;
  background: #111;
  flex-shrink: 0;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
  padding-right: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.cart-item-details h4 {
  margin: 0;
  color: #f0f0f0;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cart-item-details p {
  margin: 0;
  color: #484848;
  font-size: 0.73rem;
  letter-spacing: 0.3px;
}

/* ── Quantity pill ── */
.cart-quantity-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #ff4500;
  color: #ff4500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.qty-btn:hover { background: #ff4500; color: #fff; }

.cart-qty-input {
  width: 30px;
  height: 24px;
  text-align: center;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  outline: none;
  line-height: 24px;
}
.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button { opacity: 0; }

/* ── Price — pinned top-right ── */
.cart-item-price {
  position: absolute;
  top: 13px;
  right: 36px;
  color: var(--neon-orange);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ── Remove button — pinned top-right corner ── */
.remove-item-button {
  position: absolute;
  top: 11px;
  right: 10px;
  background: transparent;
  color: #2e2e2e;
  border: 1px solid #1e1e1e;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  padding: 0;
  line-height: 1;
}
.remove-item-button:hover {
  background: #ff4500;
  color: #fff;
  border-color: #ff4500;
}

/* ── Cart footer (total + buttons) ── */
.cart-summary {
  padding: 18px 24px 24px;
  border-top: 1px solid #1e1e1e;
  background: rgba(0, 0, 0, 0.3);
}

.cart-summary p {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary p::before {
  content: 'TOTAL';
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: #444;
  font-weight: 400;
}

/* ── Action buttons ── */
.cart-summary .button {
  display: block;
  width: 80%;
  margin: 8px auto 0;
  border: none;
  cursor: pointer;
  font-family: 'Bebas Neue', 'Segoe UI', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 14px 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 1rem;
  text-align: center;
}

/* Checkout — primary orange */
#checkoutButton {
  background: linear-gradient(135deg, #ff4500, #e03d00);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 69, 0, 0.3);
}
#checkoutButton:hover {
  background: linear-gradient(135deg, #ff5500, #ff4500);
  box-shadow: 0 6px 28px rgba(255, 69, 0, 0.5);
  transform: translateY(-1px);
}

/* Clear cart — ghost */
.cart-summary .clear-cart-button {
  background: transparent;
  color: #444;
  border: 1px solid #222;
  box-shadow: none;
}
.cart-summary .clear-cart-button:hover {
  background: #1a1a1a;
  color: #888;
  border-color: #333;
  transform: none;
}

/* Make the icon white using a filter */
.cart-img-white {
  width: 28px;
  height: auto;
  filter: invert(1);
  transition: transform 0.3s ease;
}

.nav-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.nav-cart-link:hover .cart-img-white {
  transform: scale(1.1);
}

/* The red notification circle */
.cart-badge {
  position: absolute;
  top: -5px;
  right: 5px;
  background: #ff4500;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  min-width: 15px;
  text-align: center;
  border: 2px solid #000;
}

nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-cart-link {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.cart-img-white {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Clear Cart (Dark Button) */
#clearCartButton {
  background-color: #222;
  color: #fff;
  border: 1px solid #444;
}

#clearCartButton:hover {
  background-color: #333;
  border-color: #666;
  transform: translateY(-2px);
}

/* =========================================
   8. CINEMATIC ENHANCEMENTS
   ========================================= */

/* Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.loader-content {
  text-align: center;
}

.loader-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #ff4500;
  padding: 5px;
  animation: loaderPulse 2s infinite ease-in-out;
}

@keyframes loaderPulse {
  0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 rgba(255, 69, 0, 0); }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 30px rgba(255, 69, 0, 0.6); }
  100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 rgba(255, 69, 0, 0); }
}

/* Reveal Animation for Hero */
.hero h2 {
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #ff4500;
  width: 0;
  animation: typing 3.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #ff4500; }
}

/* Parallax-like Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Cinematic Hover for Product Cards */
.product {
  overflow: hidden;
}

.product img {
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.product:hover img {
  transform: scale(1.1) rotate(2deg);
}

.product::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

.product:hover::after {
  left: 150%;
}

/* =========================================
   1. GLOBAL RESPONSIVE SYSTEM
   ========================================= */

:root {
  --neon-orange: #ff4500;
  --neon-green: #00ff88;
  --dark-bg: #080808;
  --card-bg: #141414;
  --header-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-decoration: none;
}

html {
  font-size: 16px; /* Base size for rem units */
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-bg);
  color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
}

/* =========================================
   2. ANIMATIONS
   ========================================= */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slowPan {
  0% { background-position: center top; }
  50% { background-position: center bottom; }
  100% { background-position: center top; }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 5px rgba(255, 69, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 69, 0, 0.6); }
  100% { box-shadow: 0 0 5px rgba(255, 69, 0, 0.2); }
}

/* =========================================
   3. HEADER (Responsive Navigation)
   ========================================= */

header {
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(15px);
  padding: 10px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

header h1 {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: var(--neon-orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
}

header .logo {
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  border-radius: 50%;
  border: 2px solid var(--neon-orange);
  padding: 2px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 25px);
}

nav a {
  color: #bbb;
  font-weight: 600;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  text-transform: uppercase;
  transition: all 0.3s ease;
}

nav a:hover {
  color: var(--neon-orange);
  text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

/* Mobile Menu Adjustments */
@media (max-width: 600px) {
  header { padding: 10px 3%; }
  nav { gap: 12px; }
  header h1 { display: none; } /* Hide text logo on very small screens to save space */
}

/* =========================================
   4. HERO SECTION
   ========================================= */

.hero {
  height: clamp(40vh, 60vh, 80vh);
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-attachment: fixed; */
  /* animation: slowPan 20s linear infinite; */
  position: relative;
  text-align: center;
  padding: 0 20px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero h2 {
  position: relative;
  z-index: 2; /* Ensure text is above Vanta.js canvas */
  font-size: clamp(1.5rem, 8vw, 4rem);
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -1px;
  animation: fadeInUp 1s ease-out;
  text-shadow: 0 10px 30px rgba(0,0,0,0.8);
  max-width: 1200px;
}

/* =========================================
   5. PRODUCT GRID (Responsive)
   ========================================= */

.products {
  padding: clamp(20px, 5vw, 60px) 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 4vw, 40px);
  background: #080808;
  max-width: 1600px;
  margin: 0 auto;
  will-change: auto;
}

.product {
  background: var(--card-bg);
  padding: clamp(15px, 3vw, 25px);
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: fadeInUp 0.8s ease-out backwards;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.product:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 69, 0, 0.4);
  background: #1a1a1a;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 20px;
  transition: all 0.4s ease;
  background-color: #1a1a1a;
  display: block;
}

.product h3 {
  color: var(--neon-orange);
  margin-bottom: 10px;
  font-size: clamp(1rem, 3vw, 1.3rem);
  text-transform: uppercase;
}

.product p {
  color: #888;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  margin-bottom: 15px;
}

/* =========================================
   6. SEE MORE SECTION
   ========================================= */

.see-more-container {
  padding: 40px 20px 80px;
  display: flex;
  justify-content: center;
}

.see-more-btn {
  background: linear-gradient(135deg, #ff4500 0%, #cc3700 100%);
  color: #fff;
  padding: clamp(12px, 3vw, 18px) clamp(30px, 6vw, 45px);
  border-radius: 50px;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 10px 20px rgba(255, 69, 0, 0.3);
  transition: all 0.3s ease;
  animation: glowPulse 3s infinite;
}

/* =========================================
   7. FOOTER
   ========================================= */

.footer {
  background: #050505;
  color: #666;
  padding: clamp(40px, 8vw, 80px) 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 69, 0, 0.1);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: clamp(15px, 4vw, 30px);
  margin-top: 25px;
}

.social-icons img {
  width: clamp(24px, 5vw, 32px);
  height: clamp(24px, 5vw, 32px);
  filter: invert(1) opacity(0.3);
  transition: all 0.4s ease;
}

/* =========================================
   8. CART MODAL (Responsive)
   — Styles unified with main cart block above —
   ========================================= */

/* =========================================
   9. CINEMATIC 3D OPENING (Responsive)
   ========================================= */

#preloader {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  perspective: 1000px;
}

.brand-3d {
  font-size: clamp(2rem, 12vw, 6rem);
  font-weight: 900;
  color: var(--neon-orange);
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: clamp(2px, 2vw, 10px);
  text-align: center;
  padding: 0 20px;
  transform-style: preserve-3d;
  animation: float3d 4s infinite ease-in-out;
}

@keyframes float3d {
  0%, 100% { transform: rotateX(20deg) rotateY(-20deg) translateZ(50px); }
  50% { transform: rotateX(-20deg) rotateY(20deg) translateZ(100px); }
}

.thunder-flash {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #fff;
  opacity: 0;
  z-index: 10000;
  pointer-events: none;
}

.flash-anim { animation: flash 0.2s ease-out; }
@keyframes flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.screen-break {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
  z-index: 10001;
}

.shard { background: #000; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.break-active .shard { opacity: 0; transform: scale(1.5) rotate(45deg) translate(var(--tx), var(--ty)); }

.product-card-colors {
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.color-swatches-container {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.listing-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: 0.3s;
}
/* Only truly-selected swatch gets orange ring */
.listing-color-swatch.active {
  border-color: #ff4500;
  transform: scale(1.2);
  box-shadow: 0 0 10px #ff4500;
}

/* Hover only on real pointer devices (not touch screens) */
@media (hover: hover) {
  .listing-color-swatch:hover {
    border-color: #ff4500;
    transform: scale(1.2);
  }
}

/* =========================================
   10. MOBILE RESPONSIVE GRID (2-Column Layout)
   ========================================= */

/* Mobile phones: 2-column grid layout */
@media (max-width: 768px) {
  header {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  header h1 {
    font-size: 1.1rem;
    letter-spacing: 3px;
  }

  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 8px;
    width: auto;
    flex: 1;
  }

  nav a {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    padding: 4px 0;
  }

  .hero {
    height: 30vh;
    min-height: 160px;
  }

  .hero h2 {
    font-size: 1.4rem;
    padding: 0 16px;
    text-align: center;
  }

  .products {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3vw, 20px);
    padding: clamp(15px, 3vw, 30px) 5%;
  }

  .product {
    padding: clamp(10px, 2vw, 15px);
  }

  .product img {
    margin-bottom: 10px;
  }

  .product h3 {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 5px;
  }

  .product p {
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    margin-bottom: 8px;
  }

  .product p:last-of-type {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  }
}

/* Extra small phones: Ensure proper spacing */
@media (max-width: 480px) {
  .products {
    gap: clamp(8px, 2vw, 15px);
    padding: clamp(10px, 2vw, 20px) 3%;
  }

  .product {
    padding: clamp(8px, 1.5vw, 12px);
    border-radius: 12px;
  }

  .product img {
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .product h3 {
    font-size: clamp(0.85rem, 2.2vw, 1rem);
    margin-bottom: 3px;
  }

  .product p {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    margin-bottom: 5px;
  }
}

/* Desktop: Preserve original multi-column layout */
@media (min-width: 769px) {
  .products {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 4vw, 40px);
    padding: clamp(20px, 5vw, 60px) 5%;
  }

  .product {
    padding: clamp(15px, 3vw, 25px);
  }
}
/* === Footer upgrade: 3-column layout (brand / quick links / contact) === */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.footer-col {
  flex: 1;
  min-width: 180px;
}
.footer-col h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-col p {
  color: #777;
  font-size: 0.9rem;
  margin: 0;
}
.footer-col a {
  display: block;
  color: #999;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: color 0.3s;
}
.footer-col a:hover {
  color: #ff4500;
}
.footer-brand .social-icons {
  justify-content: flex-start;
  margin-top: 16px;
}
.footer-bottom {
  border-top: 1px solid #222;
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
}
.footer-bottom p {
  color: #555;
  font-size: 0.8rem;
  margin: 0;
}
@media (max-width: 700px) {
  .footer-grid {
    flex-direction: column;
    text-align: center;
  }
  .footer-brand .social-icons {
    justify-content: center;
  }
}

/* === Conversion upgrades: fast hero, clear CTAs, and trust signals === */
#preloader {
  transition: opacity 0.25s ease, visibility 0.25s;
}

.hero {
  min-height: 420px;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100%, 1100px);
  padding: 0 20px;
  text-align: center;
}

.hero-content h2 {
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(255, 69, 0, 0.55);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 10, 10, 0.72);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #ff4500;
  border-color: #fff;
}

.hero-btn-primary {
  background: linear-gradient(135deg, #ff4500 0%, #cc3700 100%);
  border-color: #ff4500;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 1px;
  max-width: 1200px;
  margin: -34px auto 20px;
  padding: 0 5%;
  position: relative;
  z-index: 3;
}

.trust-item {
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 14px;
  text-align: center;
}

.trust-item span {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.trust-item small {
  display: block;
  margin-top: 6px;
  color: #8a8a8a;
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Replace the long typewriter intro with a fast fade so CTA buttons stay visible. */
.hero h2 {
  width: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  border-right: 0 !important;
  animation: fadeInUp 0.65s ease-out both !important;
}

@media (max-width: 900px) {
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 320px;
    padding: 44px 16px;
  }

  .hero-content {
    gap: 18px;
    padding: 0;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-btn {
    flex: 1 1 150px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.72rem;
  }
}

@media (max-width: 520px) {
  .trust-strip {
    grid-template-columns: 1fr;
    padding: 0 14px;
  }
}

/* ===== LANGUAGE SWITCHER ===================================== */
.lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 12px;
  border: 1px solid #333;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.lang-switcher button {
  /* Explicit resets — a generic unscoped "button {}" rule elsewhere
     (meant only for big CTA buttons like Add to Cart) was leaking its
     box-shadow glow, 40px top margin, and oversized border-radius onto
     these tiny buttons. Resetting everything here makes this pill
     immune to that, regardless of which stylesheet the page loads. */
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-right: 1px solid #333;
  color: #999;
  min-width: 34px;
  padding: 6px 10px;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
  box-shadow: none;
  transform: none;
}
.lang-switcher button::before { content: none; } /* kill the CTA shine-sweep effect */
.lang-switcher button:last-child { border-right: none; }
.lang-switcher button:hover {
  color: #fff;
  background: rgba(255,69,0,0.15);
  box-shadow: none;
  transform: none;
}
.lang-switcher button.lang-active {
  background: #ff4500;
  color: #fff;
}

@media (max-width: 600px) {
  /* The desktop "connected pill" look needs its border/background to
     span the row so it forces a line-break — but that leaves a big
     empty-looking bar on phones. So on mobile we make the outer wrapper
     invisible and give each button its own small individual pill
     instead, which can't visually "stretch" since nothing connects them. */
  .lang-switcher {
    flex-basis: 100%;
    justify-content: center;
    gap: 6px;
    margin-left: 0;
    margin-top: 10px;
    border: none;
    background: transparent;
    border-radius: 0;
  }
  .lang-switcher button {
    min-width: 38px;
    padding: 7px 12px;
    font-size: 0.68rem;
    border: 1px solid #333 !important;
    border-radius: 20px !important;
  }
  .lang-switcher button.lang-active {
    border-color: #ff4500 !important;
  }
}

/* ===== RTL (Arabic) overrides ================================ */
/* Note: flexbox containers using the default row direction are
   already auto-mirrored by the browser when dir="rtl" is set —
   adding flex-direction:row-reverse on top of that double-flips
   them, which is why nav/footer/colors looked broken before.
   Only non-flex or genuinely-needed adjustments are kept below. */
[dir="rtl"] body                    { text-align: right; }
[dir="rtl"] .lang-switcher          { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .footer-grid            { direction: rtl; }
[dir="rtl"] .cart-item              { direction: rtl; text-align: right; }
[dir="rtl"] select, [dir="rtl"] input, [dir="rtl"] textarea { text-align: right; direction: rtl; }
[dir="rtl"] .progress-labels        { direction: rtl; }
[dir="rtl"] .faq-question           { text-align: right; }

/* ===== RELATED PRODUCTS ===================================== */
.related-products-section {
  /* Sits OUTSIDE .container so flex/grid layout never touches it.
     Plain block-level full-width section between </main> and <footer>. */
  width: 100%;
  max-width: 1100px;
  margin: 50px auto 20px;
  padding: 0 20px;
}
.related-products-section h3 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 480px) {
  .related-products-section {
    padding: 0 12px;
    box-sizing: border-box;
    max-width: 100vw;
    overflow: hidden;
  }
  .related-products-grid    { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .related-product-card h4  { font-size: 0.72rem; }
  .related-product-price    { font-size: 0.78rem; }
}
.related-product-card {
  display: block;
  text-decoration: none;
  background: #111;
  border: 1px solid #222;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  /* min-width:0 overrides the CSS grid default min-width:auto on grid
     items, which lets cards grow beyond their 1fr column to fit their
     image content, pushing the whole grid past the viewport edge. */
  min-width: 0;
  box-sizing: border-box;
}
.related-product-card:hover {
  border-color: #ff4500;
  transform: translateY(-3px);
}
.related-product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}
.related-product-card h4 {
  font-size: 0.78rem;
  color: #ccc;
  margin: 10px 10px 4px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-product-price {
  font-size: 0.85rem;
  color: #ff4500;
  font-weight: 700;
  margin: 0 10px 12px;
}